diff --git a/.dockerignore b/.dockerignore
index 09e0451..bfe1caa 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,6 +1,6 @@
-node_modules
+**/node_modules
+.git
 .env
 *.log
-package-lock.json
 docker-compose.yml
 .dockerignore
diff --git a/.github/workflows/deploy-qas.yml b/.github/workflows/deploy-qas.yml
index 98908e8..2b7f285 100644
--- a/.github/workflows/deploy-qas.yml
+++ b/.github/workflows/deploy-qas.yml
@@ -3,6 +3,11 @@ name: Deploy to Cloudflare
 on:
   push:
     branches: [qas]
+    paths:
+      - 'apps/api/**'
+      - 'docker-compose.yml'
+      - 'pnpm-lock.yaml'
+      - 'pnpm-workspace.yaml'
   workflow_dispatch: {}
 
 jobs:
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 40bb840..5a5a63e 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -3,6 +3,11 @@ name: Deploy to droplet
 on:
   push:
     branches: [main]
+    paths:
+      - 'apps/api/**'
+      - 'docker-compose.yml'
+      - 'pnpm-lock.yaml'
+      - 'pnpm-workspace.yaml'
   workflow_dispatch: {}
 
 jobs:
diff --git a/.env-development b/apps/api/.env-development
similarity index 100%
rename from .env-development
rename to apps/api/.env-development
diff --git a/.env-production b/apps/api/.env-production
similarity index 100%
rename from .env-production
rename to apps/api/.env-production
diff --git a/.sequelizerc b/apps/api/.sequelizerc
similarity index 100%
rename from .sequelizerc
rename to apps/api/.sequelizerc
diff --git a/Dockerfile b/apps/api/Dockerfile
similarity index 60%
rename from Dockerfile
rename to apps/api/Dockerfile
index d90d2c5..fc6d226 100644
--- a/Dockerfile
+++ b/apps/api/Dockerfile
@@ -14,11 +14,17 @@ COPY --from=typst /usr/bin/typst /usr/local/bin/typst
 
 WORKDIR /app
 
-# Install production dependencies only
+# Workspace manifests first (cache-friendly), then a filtered install —
+# pnpm needs every workspace package's manifest present to resolve the
+# graph even though only apps/api's deps get installed here.
 COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
-RUN pnpm install --frozen-lockfile
+COPY apps/api/package.json ./apps/api/package.json
+COPY apps/web/package.json ./apps/web/package.json
+RUN pnpm install --frozen-lockfile --filter api...
 
-COPY . .
+COPY apps/api ./apps/api
+
+WORKDIR /app/apps/api
 
 RUN chmod +x docker-entrypoint.sh
 
diff --git a/README.md b/apps/api/README.md
similarity index 100%
rename from README.md
rename to apps/api/README.md
diff --git a/ROUTES.md b/apps/api/ROUTES.md
similarity index 100%
rename from ROUTES.md
rename to apps/api/ROUTES.md
diff --git a/config/database.cjs b/apps/api/config/database.cjs
similarity index 100%
rename from config/database.cjs
rename to apps/api/config/database.cjs
diff --git a/config/db.config.js b/apps/api/config/db.config.js
similarity index 100%
rename from config/db.config.js
rename to apps/api/config/db.config.js
diff --git a/config/garage.toml b/apps/api/config/garage.toml
similarity index 100%
rename from config/garage.toml
rename to apps/api/config/garage.toml
diff --git a/config/redis.config.js b/apps/api/config/redis.config.js
similarity index 100%
rename from config/redis.config.js
rename to apps/api/config/redis.config.js
diff --git a/controllers/admin/achievements.controller.js b/apps/api/controllers/admin/achievements.controller.js
similarity index 100%
rename from controllers/admin/achievements.controller.js
rename to apps/api/controllers/admin/achievements.controller.js
diff --git a/controllers/admin/advertisements.controller.js b/apps/api/controllers/admin/advertisements.controller.js
similarity index 100%
rename from controllers/admin/advertisements.controller.js
rename to apps/api/controllers/admin/advertisements.controller.js
diff --git a/controllers/admin/assets.controller.js b/apps/api/controllers/admin/assets.controller.js
similarity index 100%
rename from controllers/admin/assets.controller.js
rename to apps/api/controllers/admin/assets.controller.js
diff --git a/controllers/admin/categories.controller.js b/apps/api/controllers/admin/categories.controller.js
similarity index 100%
rename from controllers/admin/categories.controller.js
rename to apps/api/controllers/admin/categories.controller.js
diff --git a/controllers/admin/completion_requirements.controller.js b/apps/api/controllers/admin/completion_requirements.controller.js
similarity index 100%
rename from controllers/admin/completion_requirements.controller.js
rename to apps/api/controllers/admin/completion_requirements.controller.js
diff --git a/controllers/admin/course_reading_progress.controller.js b/apps/api/controllers/admin/course_reading_progress.controller.js
similarity index 100%
rename from controllers/admin/course_reading_progress.controller.js
rename to apps/api/controllers/admin/course_reading_progress.controller.js
diff --git a/controllers/admin/courses.controller.js b/apps/api/controllers/admin/courses.controller.js
similarity index 100%
rename from controllers/admin/courses.controller.js
rename to apps/api/controllers/admin/courses.controller.js
diff --git a/controllers/admin/dashboard.controller.js b/apps/api/controllers/admin/dashboard.controller.js
similarity index 100%
rename from controllers/admin/dashboard.controller.js
rename to apps/api/controllers/admin/dashboard.controller.js
diff --git a/controllers/admin/documentation/advertisements.md b/apps/api/controllers/admin/documentation/advertisements.md
similarity index 100%
rename from controllers/admin/documentation/advertisements.md
rename to apps/api/controllers/admin/documentation/advertisements.md
diff --git a/controllers/admin/documentation/assets.md b/apps/api/controllers/admin/documentation/assets.md
similarity index 100%
rename from controllers/admin/documentation/assets.md
rename to apps/api/controllers/admin/documentation/assets.md
diff --git a/controllers/admin/documentation/categories.md b/apps/api/controllers/admin/documentation/categories.md
similarity index 100%
rename from controllers/admin/documentation/categories.md
rename to apps/api/controllers/admin/documentation/categories.md
diff --git a/controllers/admin/documentation/courses.md b/apps/api/controllers/admin/documentation/courses.md
similarity index 100%
rename from controllers/admin/documentation/courses.md
rename to apps/api/controllers/admin/documentation/courses.md
diff --git a/controllers/admin/documentation/dashboard.md b/apps/api/controllers/admin/documentation/dashboard.md
similarity index 100%
rename from controllers/admin/documentation/dashboard.md
rename to apps/api/controllers/admin/documentation/dashboard.md
diff --git a/controllers/admin/documentation/landing_pages.md b/apps/api/controllers/admin/documentation/landing_pages.md
similarity index 100%
rename from controllers/admin/documentation/landing_pages.md
rename to apps/api/controllers/admin/documentation/landing_pages.md
diff --git a/controllers/admin/documentation/notifications.md b/apps/api/controllers/admin/documentation/notifications.md
similarity index 100%
rename from controllers/admin/documentation/notifications.md
rename to apps/api/controllers/admin/documentation/notifications.md
diff --git a/controllers/admin/documentation/products.md b/apps/api/controllers/admin/documentation/products.md
similarity index 100%
rename from controllers/admin/documentation/products.md
rename to apps/api/controllers/admin/documentation/products.md
diff --git a/controllers/admin/documentation/profile.md b/apps/api/controllers/admin/documentation/profile.md
similarity index 100%
rename from controllers/admin/documentation/profile.md
rename to apps/api/controllers/admin/documentation/profile.md
diff --git a/controllers/admin/documentation/tasks.md b/apps/api/controllers/admin/documentation/tasks.md
similarity index 100%
rename from controllers/admin/documentation/tasks.md
rename to apps/api/controllers/admin/documentation/tasks.md
diff --git a/controllers/admin/documentation/tiers.md b/apps/api/controllers/admin/documentation/tiers.md
similarity index 100%
rename from controllers/admin/documentation/tiers.md
rename to apps/api/controllers/admin/documentation/tiers.md
diff --git a/controllers/admin/documentation/user_activity.md b/apps/api/controllers/admin/documentation/user_activity.md
similarity index 100%
rename from controllers/admin/documentation/user_activity.md
rename to apps/api/controllers/admin/documentation/user_activity.md
diff --git a/controllers/admin/documentation/user_groups.md b/apps/api/controllers/admin/documentation/user_groups.md
similarity index 100%
rename from controllers/admin/documentation/user_groups.md
rename to apps/api/controllers/admin/documentation/user_groups.md
diff --git a/controllers/admin/documentation/users.md b/apps/api/controllers/admin/documentation/users.md
similarity index 100%
rename from controllers/admin/documentation/users.md
rename to apps/api/controllers/admin/documentation/users.md
diff --git a/controllers/admin/lessons.controller.js b/apps/api/controllers/admin/lessons.controller.js
similarity index 100%
rename from controllers/admin/lessons.controller.js
rename to apps/api/controllers/admin/lessons.controller.js
diff --git a/controllers/admin/media.controller.js b/apps/api/controllers/admin/media.controller.js
similarity index 100%
rename from controllers/admin/media.controller.js
rename to apps/api/controllers/admin/media.controller.js
diff --git a/controllers/admin/notification.controller.js b/apps/api/controllers/admin/notification.controller.js
similarity index 100%
rename from controllers/admin/notification.controller.js
rename to apps/api/controllers/admin/notification.controller.js
diff --git a/controllers/admin/notificationBroadcasts.controller.js b/apps/api/controllers/admin/notificationBroadcasts.controller.js
similarity index 100%
rename from controllers/admin/notificationBroadcasts.controller.js
rename to apps/api/controllers/admin/notificationBroadcasts.controller.js
diff --git a/controllers/admin/notificationSettings.controller.js b/apps/api/controllers/admin/notificationSettings.controller.js
similarity index 100%
rename from controllers/admin/notificationSettings.controller.js
rename to apps/api/controllers/admin/notificationSettings.controller.js
diff --git a/controllers/admin/products.controller.js b/apps/api/controllers/admin/products.controller.js
similarity index 100%
rename from controllers/admin/products.controller.js
rename to apps/api/controllers/admin/products.controller.js
diff --git a/controllers/admin/profile.controller.js b/apps/api/controllers/admin/profile.controller.js
similarity index 100%
rename from controllers/admin/profile.controller.js
rename to apps/api/controllers/admin/profile.controller.js
diff --git a/controllers/admin/task.controller.js b/apps/api/controllers/admin/task.controller.js
similarity index 100%
rename from controllers/admin/task.controller.js
rename to apps/api/controllers/admin/task.controller.js
diff --git a/controllers/admin/task_completion.controller.js b/apps/api/controllers/admin/task_completion.controller.js
similarity index 100%
rename from controllers/admin/task_completion.controller.js
rename to apps/api/controllers/admin/task_completion.controller.js
diff --git a/controllers/admin/tier_categories.controller.js b/apps/api/controllers/admin/tier_categories.controller.js
similarity index 100%
rename from controllers/admin/tier_categories.controller.js
rename to apps/api/controllers/admin/tier_categories.controller.js
diff --git a/controllers/admin/tier_policies.controller.js b/apps/api/controllers/admin/tier_policies.controller.js
similarity index 100%
rename from controllers/admin/tier_policies.controller.js
rename to apps/api/controllers/admin/tier_policies.controller.js
diff --git a/controllers/admin/tiers.controller.js b/apps/api/controllers/admin/tiers.controller.js
similarity index 100%
rename from controllers/admin/tiers.controller.js
rename to apps/api/controllers/admin/tiers.controller.js
diff --git a/controllers/admin/units.controller.js b/apps/api/controllers/admin/units.controller.js
similarity index 100%
rename from controllers/admin/units.controller.js
rename to apps/api/controllers/admin/units.controller.js
diff --git a/controllers/admin/user_activity.controller.js b/apps/api/controllers/admin/user_activity.controller.js
similarity index 100%
rename from controllers/admin/user_activity.controller.js
rename to apps/api/controllers/admin/user_activity.controller.js
diff --git a/controllers/admin/user_groups.controller.js b/apps/api/controllers/admin/user_groups.controller.js
similarity index 100%
rename from controllers/admin/user_groups.controller.js
rename to apps/api/controllers/admin/user_groups.controller.js
diff --git a/controllers/admin/users.controller.js b/apps/api/controllers/admin/users.controller.js
similarity index 100%
rename from controllers/admin/users.controller.js
rename to apps/api/controllers/admin/users.controller.js
diff --git a/controllers/auth.controller.js b/apps/api/controllers/auth.controller.js
similarity index 100%
rename from controllers/auth.controller.js
rename to apps/api/controllers/auth.controller.js
diff --git a/controllers/client/advertisements.controller.js b/apps/api/controllers/client/advertisements.controller.js
similarity index 100%
rename from controllers/client/advertisements.controller.js
rename to apps/api/controllers/client/advertisements.controller.js
diff --git a/controllers/client/certificate.controller.js b/apps/api/controllers/client/certificate.controller.js
similarity index 100%
rename from controllers/client/certificate.controller.js
rename to apps/api/controllers/client/certificate.controller.js
diff --git a/controllers/client/course_purchases.controller.js b/apps/api/controllers/client/course_purchases.controller.js
similarity index 100%
rename from controllers/client/course_purchases.controller.js
rename to apps/api/controllers/client/course_purchases.controller.js
diff --git a/controllers/client/course_reading_progress.controller.js b/apps/api/controllers/client/course_reading_progress.controller.js
similarity index 100%
rename from controllers/client/course_reading_progress.controller.js
rename to apps/api/controllers/client/course_reading_progress.controller.js
diff --git a/controllers/client/courses.controller.js b/apps/api/controllers/client/courses.controller.js
similarity index 100%
rename from controllers/client/courses.controller.js
rename to apps/api/controllers/client/courses.controller.js
diff --git a/controllers/client/media.controller.js b/apps/api/controllers/client/media.controller.js
similarity index 100%
rename from controllers/client/media.controller.js
rename to apps/api/controllers/client/media.controller.js
diff --git a/controllers/client/notification.controller.js b/apps/api/controllers/client/notification.controller.js
similarity index 100%
rename from controllers/client/notification.controller.js
rename to apps/api/controllers/client/notification.controller.js
diff --git a/controllers/client/profile.controller.js b/apps/api/controllers/client/profile.controller.js
similarity index 100%
rename from controllers/client/profile.controller.js
rename to apps/api/controllers/client/profile.controller.js
diff --git a/controllers/client/task.controller.js b/apps/api/controllers/client/task.controller.js
similarity index 100%
rename from controllers/client/task.controller.js
rename to apps/api/controllers/client/task.controller.js
diff --git a/controllers/client/task_download.controller.js b/apps/api/controllers/client/task_download.controller.js
similarity index 100%
rename from controllers/client/task_download.controller.js
rename to apps/api/controllers/client/task_download.controller.js
diff --git a/controllers/client/task_progress.controller.js b/apps/api/controllers/client/task_progress.controller.js
similarity index 100%
rename from controllers/client/task_progress.controller.js
rename to apps/api/controllers/client/task_progress.controller.js
diff --git a/controllers/client/task_upload.controller.js b/apps/api/controllers/client/task_upload.controller.js
similarity index 100%
rename from controllers/client/task_upload.controller.js
rename to apps/api/controllers/client/task_upload.controller.js
diff --git a/controllers/client/tiers.controller.js b/apps/api/controllers/client/tiers.controller.js
similarity index 100%
rename from controllers/client/tiers.controller.js
rename to apps/api/controllers/client/tiers.controller.js
diff --git a/controllers/client/units.controller.js b/apps/api/controllers/client/units.controller.js
similarity index 100%
rename from controllers/client/units.controller.js
rename to apps/api/controllers/client/units.controller.js
diff --git a/controllers/health.controller.js b/apps/api/controllers/health.controller.js
similarity index 100%
rename from controllers/health.controller.js
rename to apps/api/controllers/health.controller.js
diff --git a/controllers/public/media.controller.js b/apps/api/controllers/public/media.controller.js
similarity index 100%
rename from controllers/public/media.controller.js
rename to apps/api/controllers/public/media.controller.js
diff --git a/controllers/staff/groups.ctrl.js b/apps/api/controllers/staff/groups.ctrl.js
similarity index 100%
rename from controllers/staff/groups.ctrl.js
rename to apps/api/controllers/staff/groups.ctrl.js
diff --git a/controllers/staff/scores.ctrl.js b/apps/api/controllers/staff/scores.ctrl.js
similarity index 100%
rename from controllers/staff/scores.ctrl.js
rename to apps/api/controllers/staff/scores.ctrl.js
diff --git a/controllers/staff/tasks.ctrl.js b/apps/api/controllers/staff/tasks.ctrl.js
similarity index 100%
rename from controllers/staff/tasks.ctrl.js
rename to apps/api/controllers/staff/tasks.ctrl.js
diff --git a/controllers/staff/users.controller.js b/apps/api/controllers/staff/users.controller.js
similarity index 100%
rename from controllers/staff/users.controller.js
rename to apps/api/controllers/staff/users.controller.js
diff --git a/controllers/staff/users.ctrl.js b/apps/api/controllers/staff/users.ctrl.js
similarity index 100%
rename from controllers/staff/users.ctrl.js
rename to apps/api/controllers/staff/users.ctrl.js
diff --git a/cron/admin.cron.js b/apps/api/cron/admin.cron.js
similarity index 100%
rename from cron/admin.cron.js
rename to apps/api/cron/admin.cron.js
diff --git a/cron/client.cron.js b/apps/api/cron/client.cron.js
similarity index 100%
rename from cron/client.cron.js
rename to apps/api/cron/client.cron.js
diff --git a/cron/cronRegistry.util.js b/apps/api/cron/cronRegistry.util.js
similarity index 100%
rename from cron/cronRegistry.util.js
rename to apps/api/cron/cronRegistry.util.js
diff --git a/cron/jobs/expire_advertisements.cron.js b/apps/api/cron/jobs/expire_advertisements.cron.js
similarity index 100%
rename from cron/jobs/expire_advertisements.cron.js
rename to apps/api/cron/jobs/expire_advertisements.cron.js
diff --git a/cron/jobs/expire_user_tiers.cron.js b/apps/api/cron/jobs/expire_user_tiers.cron.js
similarity index 100%
rename from cron/jobs/expire_user_tiers.cron.js
rename to apps/api/cron/jobs/expire_user_tiers.cron.js
diff --git a/cron/jobs/fail_stale_payments.cron.js b/apps/api/cron/jobs/fail_stale_payments.cron.js
similarity index 100%
rename from cron/jobs/fail_stale_payments.cron.js
rename to apps/api/cron/jobs/fail_stale_payments.cron.js
diff --git a/cron/jobs/issue_certificates.cron.js b/apps/api/cron/jobs/issue_certificates.cron.js
similarity index 100%
rename from cron/jobs/issue_certificates.cron.js
rename to apps/api/cron/jobs/issue_certificates.cron.js
diff --git a/cron/jobs/lift_expired_bans.cron.js b/apps/api/cron/jobs/lift_expired_bans.cron.js
similarity index 100%
rename from cron/jobs/lift_expired_bans.cron.js
rename to apps/api/cron/jobs/lift_expired_bans.cron.js
diff --git a/cron/jobs/retry_stuck_transcodes.cron.js b/apps/api/cron/jobs/retry_stuck_transcodes.cron.js
similarity index 100%
rename from cron/jobs/retry_stuck_transcodes.cron.js
rename to apps/api/cron/jobs/retry_stuck_transcodes.cron.js
diff --git a/cron/jobs/task_due_soon.cron.js b/apps/api/cron/jobs/task_due_soon.cron.js
similarity index 100%
rename from cron/jobs/task_due_soon.cron.js
rename to apps/api/cron/jobs/task_due_soon.cron.js
diff --git a/cron/jobs/task_overdue.cron.js b/apps/api/cron/jobs/task_overdue.cron.js
similarity index 100%
rename from cron/jobs/task_overdue.cron.js
rename to apps/api/cron/jobs/task_overdue.cron.js
diff --git a/cron/jobs/user_notifications.cron.js b/apps/api/cron/jobs/user_notifications.cron.js
similarity index 100%
rename from cron/jobs/user_notifications.cron.js
rename to apps/api/cron/jobs/user_notifications.cron.js
diff --git a/data/achievements.data.js b/apps/api/data/achievements.data.js
similarity index 100%
rename from data/achievements.data.js
rename to apps/api/data/achievements.data.js
diff --git a/data/cronPresets.data.js b/apps/api/data/cronPresets.data.js
similarity index 100%
rename from data/cronPresets.data.js
rename to apps/api/data/cronPresets.data.js
diff --git a/data/email_body.data.js b/apps/api/data/email_body.data.js
similarity index 100%
rename from data/email_body.data.js
rename to apps/api/data/email_body.data.js
diff --git a/data/notifications.data.js b/apps/api/data/notifications.data.js
similarity index 100%
rename from data/notifications.data.js
rename to apps/api/data/notifications.data.js
diff --git a/database/migrations/20270101000001-create-users.js b/apps/api/database/migrations/20270101000001-create-users.js
similarity index 100%
rename from database/migrations/20270101000001-create-users.js
rename to apps/api/database/migrations/20270101000001-create-users.js
diff --git a/database/migrations/20270101000002-create-assets.js b/apps/api/database/migrations/20270101000002-create-assets.js
similarity index 100%
rename from database/migrations/20270101000002-create-assets.js
rename to apps/api/database/migrations/20270101000002-create-assets.js
diff --git a/database/migrations/20270101000003-create-user-groups.js b/apps/api/database/migrations/20270101000003-create-user-groups.js
similarity index 100%
rename from database/migrations/20270101000003-create-user-groups.js
rename to apps/api/database/migrations/20270101000003-create-user-groups.js
diff --git a/database/migrations/20270101000004-create-user-sessions.js b/apps/api/database/migrations/20270101000004-create-user-sessions.js
similarity index 100%
rename from database/migrations/20270101000004-create-user-sessions.js
rename to apps/api/database/migrations/20270101000004-create-user-sessions.js
diff --git a/database/migrations/20270101000005-create-user-group-members.js b/apps/api/database/migrations/20270101000005-create-user-group-members.js
similarity index 100%
rename from database/migrations/20270101000005-create-user-group-members.js
rename to apps/api/database/migrations/20270101000005-create-user-group-members.js
diff --git a/database/migrations/20270101000006-create-achievements.js b/apps/api/database/migrations/20270101000006-create-achievements.js
similarity index 100%
rename from database/migrations/20270101000006-create-achievements.js
rename to apps/api/database/migrations/20270101000006-create-achievements.js
diff --git a/database/migrations/20270101000007-create-categories.js b/apps/api/database/migrations/20270101000007-create-categories.js
similarity index 100%
rename from database/migrations/20270101000007-create-categories.js
rename to apps/api/database/migrations/20270101000007-create-categories.js
diff --git a/database/migrations/20270101000008-create-courses.js b/apps/api/database/migrations/20270101000008-create-courses.js
similarity index 100%
rename from database/migrations/20270101000008-create-courses.js
rename to apps/api/database/migrations/20270101000008-create-courses.js
diff --git a/database/migrations/20270101000009-create-course-objectives.js b/apps/api/database/migrations/20270101000009-create-course-objectives.js
similarity index 100%
rename from database/migrations/20270101000009-create-course-objectives.js
rename to apps/api/database/migrations/20270101000009-create-course-objectives.js
diff --git a/database/migrations/20270101000010-create-course-prerequisites.js b/apps/api/database/migrations/20270101000010-create-course-prerequisites.js
similarity index 100%
rename from database/migrations/20270101000010-create-course-prerequisites.js
rename to apps/api/database/migrations/20270101000010-create-course-prerequisites.js
diff --git a/database/migrations/20270101000011-create-course-assessments.js b/apps/api/database/migrations/20270101000011-create-course-assessments.js
similarity index 100%
rename from database/migrations/20270101000011-create-course-assessments.js
rename to apps/api/database/migrations/20270101000011-create-course-assessments.js
diff --git a/database/migrations/20270101000012-create-units.js b/apps/api/database/migrations/20270101000012-create-units.js
similarity index 100%
rename from database/migrations/20270101000012-create-units.js
rename to apps/api/database/migrations/20270101000012-create-units.js
diff --git a/database/migrations/20270101000013-create-unit-quizzes.js b/apps/api/database/migrations/20270101000013-create-unit-quizzes.js
similarity index 100%
rename from database/migrations/20270101000013-create-unit-quizzes.js
rename to apps/api/database/migrations/20270101000013-create-unit-quizzes.js
diff --git a/database/migrations/20270101000014-create-lessons.js b/apps/api/database/migrations/20270101000014-create-lessons.js
similarity index 100%
rename from database/migrations/20270101000014-create-lessons.js
rename to apps/api/database/migrations/20270101000014-create-lessons.js
diff --git a/database/migrations/20270101000015-create-lesson-pages.js b/apps/api/database/migrations/20270101000015-create-lesson-pages.js
similarity index 100%
rename from database/migrations/20270101000015-create-lesson-pages.js
rename to apps/api/database/migrations/20270101000015-create-lesson-pages.js
diff --git a/database/migrations/20270101000016-create-lesson-objectives.js b/apps/api/database/migrations/20270101000016-create-lesson-objectives.js
similarity index 100%
rename from database/migrations/20270101000016-create-lesson-objectives.js
rename to apps/api/database/migrations/20270101000016-create-lesson-objectives.js
diff --git a/database/migrations/20270101000017-create-quiz-questions.js b/apps/api/database/migrations/20270101000017-create-quiz-questions.js
similarity index 100%
rename from database/migrations/20270101000017-create-quiz-questions.js
rename to apps/api/database/migrations/20270101000017-create-quiz-questions.js
diff --git a/database/migrations/20270101000018-create-quiz-options.js b/apps/api/database/migrations/20270101000018-create-quiz-options.js
similarity index 100%
rename from database/migrations/20270101000018-create-quiz-options.js
rename to apps/api/database/migrations/20270101000018-create-quiz-options.js
diff --git a/database/migrations/20270101000019-create-products.js b/apps/api/database/migrations/20270101000019-create-products.js
similarity index 100%
rename from database/migrations/20270101000019-create-products.js
rename to apps/api/database/migrations/20270101000019-create-products.js
diff --git a/database/migrations/20270101000020-create-course-purchases.js b/apps/api/database/migrations/20270101000020-create-course-purchases.js
similarity index 100%
rename from database/migrations/20270101000020-create-course-purchases.js
rename to apps/api/database/migrations/20270101000020-create-course-purchases.js
diff --git a/database/migrations/20270101000021-create-course-product-categories.js b/apps/api/database/migrations/20270101000021-create-course-product-categories.js
similarity index 100%
rename from database/migrations/20270101000021-create-course-product-categories.js
rename to apps/api/database/migrations/20270101000021-create-course-product-categories.js
diff --git a/database/migrations/20270101000022-create-course-roles.js b/apps/api/database/migrations/20270101000022-create-course-roles.js
similarity index 100%
rename from database/migrations/20270101000022-create-course-roles.js
rename to apps/api/database/migrations/20270101000022-create-course-roles.js
diff --git a/database/migrations/20270101000023-create-tier-categories.js b/apps/api/database/migrations/20270101000023-create-tier-categories.js
similarity index 100%
rename from database/migrations/20270101000023-create-tier-categories.js
rename to apps/api/database/migrations/20270101000023-create-tier-categories.js
diff --git a/database/migrations/20270101000024-create-tier-plans.js b/apps/api/database/migrations/20270101000024-create-tier-plans.js
similarity index 100%
rename from database/migrations/20270101000024-create-tier-plans.js
rename to apps/api/database/migrations/20270101000024-create-tier-plans.js
diff --git a/database/migrations/20270101000025-create-plan-courses.js b/apps/api/database/migrations/20270101000025-create-plan-courses.js
similarity index 100%
rename from database/migrations/20270101000025-create-plan-courses.js
rename to apps/api/database/migrations/20270101000025-create-plan-courses.js
diff --git a/database/migrations/20270101000026-create-user-tiers.js b/apps/api/database/migrations/20270101000026-create-user-tiers.js
similarity index 100%
rename from database/migrations/20270101000026-create-user-tiers.js
rename to apps/api/database/migrations/20270101000026-create-user-tiers.js
diff --git a/database/migrations/20270101000027-create-payments.js b/apps/api/database/migrations/20270101000027-create-payments.js
similarity index 100%
rename from database/migrations/20270101000027-create-payments.js
rename to apps/api/database/migrations/20270101000027-create-payments.js
diff --git a/database/migrations/20270101000028-create-plan-policies.js b/apps/api/database/migrations/20270101000028-create-plan-policies.js
similarity index 100%
rename from database/migrations/20270101000028-create-plan-policies.js
rename to apps/api/database/migrations/20270101000028-create-plan-policies.js
diff --git a/database/migrations/20270101000029-create-payment-policies.js b/apps/api/database/migrations/20270101000029-create-payment-policies.js
similarity index 100%
rename from database/migrations/20270101000029-create-payment-policies.js
rename to apps/api/database/migrations/20270101000029-create-payment-policies.js
diff --git a/database/migrations/20270101000030-create-system-badges.js b/apps/api/database/migrations/20270101000030-create-system-badges.js
similarity index 100%
rename from database/migrations/20270101000030-create-system-badges.js
rename to apps/api/database/migrations/20270101000030-create-system-badges.js
diff --git a/database/migrations/20270101000031-create-quiz-attempts.js b/apps/api/database/migrations/20270101000031-create-quiz-attempts.js
similarity index 100%
rename from database/migrations/20270101000031-create-quiz-attempts.js
rename to apps/api/database/migrations/20270101000031-create-quiz-attempts.js
diff --git a/database/migrations/20270101000032-create-advertisements.js b/apps/api/database/migrations/20270101000032-create-advertisements.js
similarity index 100%
rename from database/migrations/20270101000032-create-advertisements.js
rename to apps/api/database/migrations/20270101000032-create-advertisements.js
diff --git a/database/migrations/20270101000033-create-task-lists.js b/apps/api/database/migrations/20270101000033-create-task-lists.js
similarity index 100%
rename from database/migrations/20270101000033-create-task-lists.js
rename to apps/api/database/migrations/20270101000033-create-task-lists.js
diff --git a/database/migrations/20270101000034-create-task-list-groups.js b/apps/api/database/migrations/20270101000034-create-task-list-groups.js
similarity index 100%
rename from database/migrations/20270101000034-create-task-list-groups.js
rename to apps/api/database/migrations/20270101000034-create-task-list-groups.js
diff --git a/database/migrations/20270101000035-create-tasks.js b/apps/api/database/migrations/20270101000035-create-tasks.js
similarity index 100%
rename from database/migrations/20270101000035-create-tasks.js
rename to apps/api/database/migrations/20270101000035-create-tasks.js
diff --git a/database/migrations/20270101000036-create-task-requirements.js b/apps/api/database/migrations/20270101000036-create-task-requirements.js
similarity index 100%
rename from database/migrations/20270101000036-create-task-requirements.js
rename to apps/api/database/migrations/20270101000036-create-task-requirements.js
diff --git a/database/migrations/20270101000037-create-task-completions.js b/apps/api/database/migrations/20270101000037-create-task-completions.js
similarity index 100%
rename from database/migrations/20270101000037-create-task-completions.js
rename to apps/api/database/migrations/20270101000037-create-task-completions.js
diff --git a/database/migrations/20270101000038-create-task-completion-files.js b/apps/api/database/migrations/20270101000038-create-task-completion-files.js
similarity index 100%
rename from database/migrations/20270101000038-create-task-completion-files.js
rename to apps/api/database/migrations/20270101000038-create-task-completion-files.js
diff --git a/database/migrations/20270101000039-create-task-link-visits.js b/apps/api/database/migrations/20270101000039-create-task-link-visits.js
similarity index 100%
rename from database/migrations/20270101000039-create-task-link-visits.js
rename to apps/api/database/migrations/20270101000039-create-task-link-visits.js
diff --git a/database/migrations/20270101000040-create-task-progress.js b/apps/api/database/migrations/20270101000040-create-task-progress.js
similarity index 100%
rename from database/migrations/20270101000040-create-task-progress.js
rename to apps/api/database/migrations/20270101000040-create-task-progress.js
diff --git a/database/migrations/20270101000041-create-task-prerequisites.js b/apps/api/database/migrations/20270101000041-create-task-prerequisites.js
similarity index 100%
rename from database/migrations/20270101000041-create-task-prerequisites.js
rename to apps/api/database/migrations/20270101000041-create-task-prerequisites.js
diff --git a/database/migrations/20270101000042-create-notification-broadcasts.js b/apps/api/database/migrations/20270101000042-create-notification-broadcasts.js
similarity index 100%
rename from database/migrations/20270101000042-create-notification-broadcasts.js
rename to apps/api/database/migrations/20270101000042-create-notification-broadcasts.js
diff --git a/database/migrations/20270101000043-create-admin-notifications.js b/apps/api/database/migrations/20270101000043-create-admin-notifications.js
similarity index 100%
rename from database/migrations/20270101000043-create-admin-notifications.js
rename to apps/api/database/migrations/20270101000043-create-admin-notifications.js
diff --git a/database/migrations/20270101000044-create-user-notifications.js b/apps/api/database/migrations/20270101000044-create-user-notifications.js
similarity index 100%
rename from database/migrations/20270101000044-create-user-notifications.js
rename to apps/api/database/migrations/20270101000044-create-user-notifications.js
diff --git a/database/migrations/20270101000045-create-course-reading-progress.js b/apps/api/database/migrations/20270101000045-create-course-reading-progress.js
similarity index 100%
rename from database/migrations/20270101000045-create-course-reading-progress.js
rename to apps/api/database/migrations/20270101000045-create-course-reading-progress.js
diff --git a/database/migrations/20270101000046-create-course-units.js b/apps/api/database/migrations/20270101000046-create-course-units.js
similarity index 100%
rename from database/migrations/20270101000046-create-course-units.js
rename to apps/api/database/migrations/20270101000046-create-course-units.js
diff --git a/database/migrations/20270101000047-create-unit-lessons.js b/apps/api/database/migrations/20270101000047-create-unit-lessons.js
similarity index 100%
rename from database/migrations/20270101000047-create-unit-lessons.js
rename to apps/api/database/migrations/20270101000047-create-unit-lessons.js
diff --git a/database/migrations/20270101000048-create-unit-reading-progress.js b/apps/api/database/migrations/20270101000048-create-unit-reading-progress.js
similarity index 100%
rename from database/migrations/20270101000048-create-unit-reading-progress.js
rename to apps/api/database/migrations/20270101000048-create-unit-reading-progress.js
diff --git a/database/migrations/20270101000049-create-lesson-reading-progress.js b/apps/api/database/migrations/20270101000049-create-lesson-reading-progress.js
similarity index 100%
rename from database/migrations/20270101000049-create-lesson-reading-progress.js
rename to apps/api/database/migrations/20270101000049-create-lesson-reading-progress.js
diff --git a/database/migrations/20270101000050-create-pages.js b/apps/api/database/migrations/20270101000050-create-pages.js
similarity index 100%
rename from database/migrations/20270101000050-create-pages.js
rename to apps/api/database/migrations/20270101000050-create-pages.js
diff --git a/database/migrations/20270101000051-create-landing-pages.js b/apps/api/database/migrations/20270101000051-create-landing-pages.js
similarity index 100%
rename from database/migrations/20270101000051-create-landing-pages.js
rename to apps/api/database/migrations/20270101000051-create-landing-pages.js
diff --git a/database/migrations/20270101000052-create-page-sections.js b/apps/api/database/migrations/20270101000052-create-page-sections.js
similarity index 100%
rename from database/migrations/20270101000052-create-page-sections.js
rename to apps/api/database/migrations/20270101000052-create-page-sections.js
diff --git a/database/migrations/20270101000053-create-page-blocks.js b/apps/api/database/migrations/20270101000053-create-page-blocks.js
similarity index 100%
rename from database/migrations/20270101000053-create-page-blocks.js
rename to apps/api/database/migrations/20270101000053-create-page-blocks.js
diff --git a/database/migrations/20270101000054-create-page-templates.js b/apps/api/database/migrations/20270101000054-create-page-templates.js
similarity index 100%
rename from database/migrations/20270101000054-create-page-templates.js
rename to apps/api/database/migrations/20270101000054-create-page-templates.js
diff --git a/database/migrations/20270101000055-create-announcements.js b/apps/api/database/migrations/20270101000055-create-announcements.js
similarity index 100%
rename from database/migrations/20270101000055-create-announcements.js
rename to apps/api/database/migrations/20270101000055-create-announcements.js
diff --git a/database/migrations/20270101000056-create-announcement-courses.js b/apps/api/database/migrations/20270101000056-create-announcement-courses.js
similarity index 100%
rename from database/migrations/20270101000056-create-announcement-courses.js
rename to apps/api/database/migrations/20270101000056-create-announcement-courses.js
diff --git a/database/migrations/20270101000057-create-announcement-roles.js b/apps/api/database/migrations/20270101000057-create-announcement-roles.js
similarity index 100%
rename from database/migrations/20270101000057-create-announcement-roles.js
rename to apps/api/database/migrations/20270101000057-create-announcement-roles.js
diff --git a/database/migrations/20270101000058-create-announcement-reads.js b/apps/api/database/migrations/20270101000058-create-announcement-reads.js
similarity index 100%
rename from database/migrations/20270101000058-create-announcement-reads.js
rename to apps/api/database/migrations/20270101000058-create-announcement-reads.js
diff --git a/database/migrations/20270101000059-create-user-activity.js b/apps/api/database/migrations/20270101000059-create-user-activity.js
similarity index 100%
rename from database/migrations/20270101000059-create-user-activity.js
rename to apps/api/database/migrations/20270101000059-create-user-activity.js
diff --git a/database/migrations/20270101000060-create-page-user-groups.js b/apps/api/database/migrations/20270101000060-create-page-user-groups.js
similarity index 100%
rename from database/migrations/20270101000060-create-page-user-groups.js
rename to apps/api/database/migrations/20270101000060-create-page-user-groups.js
diff --git a/database/migrations/20270101000061-create-assessment-sessions.js b/apps/api/database/migrations/20270101000061-create-assessment-sessions.js
similarity index 100%
rename from database/migrations/20270101000061-create-assessment-sessions.js
rename to apps/api/database/migrations/20270101000061-create-assessment-sessions.js
diff --git a/database/migrations/20270101000062-create-pending-certificates.js b/apps/api/database/migrations/20270101000062-create-pending-certificates.js
similarity index 100%
rename from database/migrations/20270101000062-create-pending-certificates.js
rename to apps/api/database/migrations/20270101000062-create-pending-certificates.js
diff --git a/database/migrations/20270101000063-create-cron-notification-settings.js b/apps/api/database/migrations/20270101000063-create-cron-notification-settings.js
similarity index 100%
rename from database/migrations/20270101000063-create-cron-notification-settings.js
rename to apps/api/database/migrations/20270101000063-create-cron-notification-settings.js
diff --git a/database/migrations/20270101000064-create-achievement-definitions.js b/apps/api/database/migrations/20270101000064-create-achievement-definitions.js
similarity index 100%
rename from database/migrations/20270101000064-create-achievement-definitions.js
rename to apps/api/database/migrations/20270101000064-create-achievement-definitions.js
diff --git a/database/migrations/20270101000065-create-trusted-devices.js b/apps/api/database/migrations/20270101000065-create-trusted-devices.js
similarity index 100%
rename from database/migrations/20270101000065-create-trusted-devices.js
rename to apps/api/database/migrations/20270101000065-create-trusted-devices.js
diff --git a/database/migrations/20270101000066-create-sticky-banner-settings.js b/apps/api/database/migrations/20270101000066-create-sticky-banner-settings.js
similarity index 100%
rename from database/migrations/20270101000066-create-sticky-banner-settings.js
rename to apps/api/database/migrations/20270101000066-create-sticky-banner-settings.js
diff --git a/database/migrations/20270101000067-create-completion-requirements.js b/apps/api/database/migrations/20270101000067-create-completion-requirements.js
similarity index 100%
rename from database/migrations/20270101000067-create-completion-requirements.js
rename to apps/api/database/migrations/20270101000067-create-completion-requirements.js
diff --git a/database/migrations/20270101000068-create-completion-requirement-progress.js b/apps/api/database/migrations/20270101000068-create-completion-requirement-progress.js
similarity index 100%
rename from database/migrations/20270101000068-create-completion-requirement-progress.js
rename to apps/api/database/migrations/20270101000068-create-completion-requirement-progress.js
diff --git a/database/migrations/20270101000069-create-certificates.js b/apps/api/database/migrations/20270101000069-create-certificates.js
similarity index 100%
rename from database/migrations/20270101000069-create-certificates.js
rename to apps/api/database/migrations/20270101000069-create-certificates.js
diff --git a/database/migrations/20270101000070-create-course-instructors.js b/apps/api/database/migrations/20270101000070-create-course-instructors.js
similarity index 100%
rename from database/migrations/20270101000070-create-course-instructors.js
rename to apps/api/database/migrations/20270101000070-create-course-instructors.js
diff --git a/database/migrations/20270101000071-create-quiz-sessions.js b/apps/api/database/migrations/20270101000071-create-quiz-sessions.js
similarity index 100%
rename from database/migrations/20270101000071-create-quiz-sessions.js
rename to apps/api/database/migrations/20270101000071-create-quiz-sessions.js
diff --git a/database/migrations/20270101000072-create-user-bans.js b/apps/api/database/migrations/20270101000072-create-user-bans.js
similarity index 100%
rename from database/migrations/20270101000072-create-user-bans.js
rename to apps/api/database/migrations/20270101000072-create-user-bans.js
diff --git a/database/migrations/20270101000073-create-media-playback-positions.js b/apps/api/database/migrations/20270101000073-create-media-playback-positions.js
similarity index 100%
rename from database/migrations/20270101000073-create-media-playback-positions.js
rename to apps/api/database/migrations/20270101000073-create-media-playback-positions.js
diff --git a/database/migrations/20270101000074-create-course-achievements.js b/apps/api/database/migrations/20270101000074-create-course-achievements.js
similarity index 100%
rename from database/migrations/20270101000074-create-course-achievements.js
rename to apps/api/database/migrations/20270101000074-create-course-achievements.js
diff --git a/database/migrations/20270101000075-add-user-tiers-active-per-tier-unique-index.js b/apps/api/database/migrations/20270101000075-add-user-tiers-active-per-tier-unique-index.js
similarity index 100%
rename from database/migrations/20270101000075-add-user-tiers-active-per-tier-unique-index.js
rename to apps/api/database/migrations/20270101000075-add-user-tiers-active-per-tier-unique-index.js
diff --git a/database/migrations/20270101000076-add-assets-transcode-status.js b/apps/api/database/migrations/20270101000076-add-assets-transcode-status.js
similarity index 100%
rename from database/migrations/20270101000076-add-assets-transcode-status.js
rename to apps/api/database/migrations/20270101000076-add-assets-transcode-status.js
diff --git a/database/migrations/20270101000077-add-lessons-subscription.js b/apps/api/database/migrations/20270101000077-add-lessons-subscription.js
similarity index 100%
rename from database/migrations/20270101000077-add-lessons-subscription.js
rename to apps/api/database/migrations/20270101000077-add-lessons-subscription.js
diff --git a/database/migrations/20270101000078-generalize-products-purchasable.js b/apps/api/database/migrations/20270101000078-generalize-products-purchasable.js
similarity index 100%
rename from database/migrations/20270101000078-generalize-products-purchasable.js
rename to apps/api/database/migrations/20270101000078-generalize-products-purchasable.js
diff --git a/database/migrations/20270101000079-create-plan-units.js b/apps/api/database/migrations/20270101000079-create-plan-units.js
similarity index 100%
rename from database/migrations/20270101000079-create-plan-units.js
rename to apps/api/database/migrations/20270101000079-create-plan-units.js
diff --git a/database/migrations/20270101000080-create-plan-lessons.js b/apps/api/database/migrations/20270101000080-create-plan-lessons.js
similarity index 100%
rename from database/migrations/20270101000080-create-plan-lessons.js
rename to apps/api/database/migrations/20270101000080-create-plan-lessons.js
diff --git a/database/migrations/20270101000081-add-tier-plans-audit-columns.js b/apps/api/database/migrations/20270101000081-add-tier-plans-audit-columns.js
similarity index 100%
rename from database/migrations/20270101000081-add-tier-plans-audit-columns.js
rename to apps/api/database/migrations/20270101000081-add-tier-plans-audit-columns.js
diff --git a/database/migrations/20270101000082-add-tier-categories-special.js b/apps/api/database/migrations/20270101000082-add-tier-categories-special.js
similarity index 100%
rename from database/migrations/20270101000082-add-tier-categories-special.js
rename to apps/api/database/migrations/20270101000082-add-tier-categories-special.js
diff --git a/database/migrations/20270101000083-add-categories-audit-columns.js b/apps/api/database/migrations/20270101000083-add-categories-audit-columns.js
similarity index 100%
rename from database/migrations/20270101000083-add-categories-audit-columns.js
rename to apps/api/database/migrations/20270101000083-add-categories-audit-columns.js
diff --git a/database/migrations/20270101000084-add-image-asset-id-to-notifications.js b/apps/api/database/migrations/20270101000084-add-image-asset-id-to-notifications.js
similarity index 100%
rename from database/migrations/20270101000084-add-image-asset-id-to-notifications.js
rename to apps/api/database/migrations/20270101000084-add-image-asset-id-to-notifications.js
diff --git a/database/migrations/20270101000085-convert-advertisements-badge-label-to-array.js b/apps/api/database/migrations/20270101000085-convert-advertisements-badge-label-to-array.js
similarity index 100%
rename from database/migrations/20270101000085-convert-advertisements-badge-label-to-array.js
rename to apps/api/database/migrations/20270101000085-convert-advertisements-badge-label-to-array.js
diff --git a/database/migrations/20270101000086-remove-message-from-notification-broadcasts.js b/apps/api/database/migrations/20270101000086-remove-message-from-notification-broadcasts.js
similarity index 100%
rename from database/migrations/20270101000086-remove-message-from-notification-broadcasts.js
rename to apps/api/database/migrations/20270101000086-remove-message-from-notification-broadcasts.js
diff --git a/database/migrations/20270101000087-add-message-back-to-notification-broadcasts.js b/apps/api/database/migrations/20270101000087-add-message-back-to-notification-broadcasts.js
similarity index 100%
rename from database/migrations/20270101000087-add-message-back-to-notification-broadcasts.js
rename to apps/api/database/migrations/20270101000087-add-message-back-to-notification-broadcasts.js
diff --git a/database/migrations/20270101000088-relax-plan-bundle-item-uniqueness.js b/apps/api/database/migrations/20270101000088-relax-plan-bundle-item-uniqueness.js
similarity index 100%
rename from database/migrations/20270101000088-relax-plan-bundle-item-uniqueness.js
rename to apps/api/database/migrations/20270101000088-relax-plan-bundle-item-uniqueness.js
diff --git a/database/migrations/20270101000089-create-user-tier-grants.js b/apps/api/database/migrations/20270101000089-create-user-tier-grants.js
similarity index 100%
rename from database/migrations/20270101000089-create-user-tier-grants.js
rename to apps/api/database/migrations/20270101000089-create-user-tier-grants.js
diff --git a/database/migrations/20270101000090-relax-user-tiers-active-per-plan.js b/apps/api/database/migrations/20270101000090-relax-user-tiers-active-per-plan.js
similarity index 100%
rename from database/migrations/20270101000090-relax-user-tiers-active-per-plan.js
rename to apps/api/database/migrations/20270101000090-relax-user-tiers-active-per-plan.js
diff --git a/database/migrations/20270101000091-drop-plan-policies.js b/apps/api/database/migrations/20270101000091-drop-plan-policies.js
similarity index 100%
rename from database/migrations/20270101000091-drop-plan-policies.js
rename to apps/api/database/migrations/20270101000091-drop-plan-policies.js
diff --git a/database/migrations/20270101000092-add-tier-plans-status.js b/apps/api/database/migrations/20270101000092-add-tier-plans-status.js
similarity index 100%
rename from database/migrations/20270101000092-add-tier-plans-status.js
rename to apps/api/database/migrations/20270101000092-add-tier-plans-status.js
diff --git a/database/migrations/20270101000093-add-tier-plans-is-recommended.js b/apps/api/database/migrations/20270101000093-add-tier-plans-is-recommended.js
similarity index 100%
rename from database/migrations/20270101000093-add-tier-plans-is-recommended.js
rename to apps/api/database/migrations/20270101000093-add-tier-plans-is-recommended.js
diff --git a/docker-entrypoint.sh b/apps/api/docker-entrypoint.sh
similarity index 100%
rename from docker-entrypoint.sh
rename to apps/api/docker-entrypoint.sh
diff --git a/middleware/auth.middleware.js b/apps/api/middleware/auth.middleware.js
similarity index 100%
rename from middleware/auth.middleware.js
rename to apps/api/middleware/auth.middleware.js
diff --git a/middleware/avatar_upload.middleware.js b/apps/api/middleware/avatar_upload.middleware.js
similarity index 100%
rename from middleware/avatar_upload.middleware.js
rename to apps/api/middleware/avatar_upload.middleware.js
diff --git a/middleware/badge_upload.middleware.js b/apps/api/middleware/badge_upload.middleware.js
similarity index 100%
rename from middleware/badge_upload.middleware.js
rename to apps/api/middleware/badge_upload.middleware.js
diff --git a/middleware/csrf.middleware.js b/apps/api/middleware/csrf.middleware.js
similarity index 100%
rename from middleware/csrf.middleware.js
rename to apps/api/middleware/csrf.middleware.js
diff --git a/middleware/mediaGuard.middleware.js b/apps/api/middleware/mediaGuard.middleware.js
similarity index 100%
rename from middleware/mediaGuard.middleware.js
rename to apps/api/middleware/mediaGuard.middleware.js
diff --git a/middleware/originGuard.middleware.js b/apps/api/middleware/originGuard.middleware.js
similarity index 100%
rename from middleware/originGuard.middleware.js
rename to apps/api/middleware/originGuard.middleware.js
diff --git a/middleware/rateLimiter.middleware.js b/apps/api/middleware/rateLimiter.middleware.js
similarity index 100%
rename from middleware/rateLimiter.middleware.js
rename to apps/api/middleware/rateLimiter.middleware.js
diff --git a/middleware/rbac.middleware.js b/apps/api/middleware/rbac.middleware.js
similarity index 100%
rename from middleware/rbac.middleware.js
rename to apps/api/middleware/rbac.middleware.js
diff --git a/middleware/task_upload.middleware.js b/apps/api/middleware/task_upload.middleware.js
similarity index 100%
rename from middleware/task_upload.middleware.js
rename to apps/api/middleware/task_upload.middleware.js
diff --git a/middleware/validate.middleware.js b/apps/api/middleware/validate.middleware.js
similarity index 100%
rename from middleware/validate.middleware.js
rename to apps/api/middleware/validate.middleware.js
diff --git a/models/advertisements/advertisements.attributes.js b/apps/api/models/advertisements/advertisements.attributes.js
similarity index 100%
rename from models/advertisements/advertisements.attributes.js
rename to apps/api/models/advertisements/advertisements.attributes.js
diff --git a/models/advertisements/advertisements.mdl.js b/apps/api/models/advertisements/advertisements.mdl.js
similarity index 100%
rename from models/advertisements/advertisements.mdl.js
rename to apps/api/models/advertisements/advertisements.mdl.js
diff --git a/models/advertisements/advertisements.placements.js b/apps/api/models/advertisements/advertisements.placements.js
similarity index 100%
rename from models/advertisements/advertisements.placements.js
rename to apps/api/models/advertisements/advertisements.placements.js
diff --git a/models/assets/assets.attributes.js b/apps/api/models/assets/assets.attributes.js
similarity index 100%
rename from models/assets/assets.attributes.js
rename to apps/api/models/assets/assets.attributes.js
diff --git a/models/assets/assets.mdl.js b/apps/api/models/assets/assets.mdl.js
similarity index 100%
rename from models/assets/assets.mdl.js
rename to apps/api/models/assets/assets.mdl.js
diff --git a/models/courses/assessment_session.mdl.js b/apps/api/models/courses/assessment_session.mdl.js
similarity index 100%
rename from models/courses/assessment_session.mdl.js
rename to apps/api/models/courses/assessment_session.mdl.js
diff --git a/models/courses/categories.attributes.js b/apps/api/models/courses/categories.attributes.js
similarity index 100%
rename from models/courses/categories.attributes.js
rename to apps/api/models/courses/categories.attributes.js
diff --git a/models/courses/categories.mdl.js b/apps/api/models/courses/categories.mdl.js
similarity index 100%
rename from models/courses/categories.mdl.js
rename to apps/api/models/courses/categories.mdl.js
diff --git a/models/courses/certificate.mdl.js b/apps/api/models/courses/certificate.mdl.js
similarity index 100%
rename from models/courses/certificate.mdl.js
rename to apps/api/models/courses/certificate.mdl.js
diff --git a/models/courses/completion_requirement.mdl.js b/apps/api/models/courses/completion_requirement.mdl.js
similarity index 100%
rename from models/courses/completion_requirement.mdl.js
rename to apps/api/models/courses/completion_requirement.mdl.js
diff --git a/models/courses/completion_requirement_progress.mdl.js b/apps/api/models/courses/completion_requirement_progress.mdl.js
similarity index 100%
rename from models/courses/completion_requirement_progress.mdl.js
rename to apps/api/models/courses/completion_requirement_progress.mdl.js
diff --git a/models/courses/course_achievement.mdl.js b/apps/api/models/courses/course_achievement.mdl.js
similarity index 100%
rename from models/courses/course_achievement.mdl.js
rename to apps/api/models/courses/course_achievement.mdl.js
diff --git a/models/courses/course_assessment.mdl.js b/apps/api/models/courses/course_assessment.mdl.js
similarity index 100%
rename from models/courses/course_assessment.mdl.js
rename to apps/api/models/courses/course_assessment.mdl.js
diff --git a/models/courses/course_instructor.mdl.js b/apps/api/models/courses/course_instructor.mdl.js
similarity index 100%
rename from models/courses/course_instructor.mdl.js
rename to apps/api/models/courses/course_instructor.mdl.js
diff --git a/models/courses/course_objective.mdl.js b/apps/api/models/courses/course_objective.mdl.js
similarity index 100%
rename from models/courses/course_objective.mdl.js
rename to apps/api/models/courses/course_objective.mdl.js
diff --git a/models/courses/course_prerequisite.mdl.js b/apps/api/models/courses/course_prerequisite.mdl.js
similarity index 100%
rename from models/courses/course_prerequisite.mdl.js
rename to apps/api/models/courses/course_prerequisite.mdl.js
diff --git a/models/courses/course_purchases.mdl.js b/apps/api/models/courses/course_purchases.mdl.js
similarity index 100%
rename from models/courses/course_purchases.mdl.js
rename to apps/api/models/courses/course_purchases.mdl.js
diff --git a/models/courses/course_reading_progress.mdl.js b/apps/api/models/courses/course_reading_progress.mdl.js
similarity index 100%
rename from models/courses/course_reading_progress.mdl.js
rename to apps/api/models/courses/course_reading_progress.mdl.js
diff --git a/models/courses/course_role.mdl.js b/apps/api/models/courses/course_role.mdl.js
similarity index 100%
rename from models/courses/course_role.mdl.js
rename to apps/api/models/courses/course_role.mdl.js
diff --git a/models/courses/course_units.mdl.js b/apps/api/models/courses/course_units.mdl.js
similarity index 100%
rename from models/courses/course_units.mdl.js
rename to apps/api/models/courses/course_units.mdl.js
diff --git a/models/courses/courses.associations.js b/apps/api/models/courses/courses.associations.js
similarity index 100%
rename from models/courses/courses.associations.js
rename to apps/api/models/courses/courses.associations.js
diff --git a/models/courses/courses.attributes.js b/apps/api/models/courses/courses.attributes.js
similarity index 100%
rename from models/courses/courses.attributes.js
rename to apps/api/models/courses/courses.attributes.js
diff --git a/models/courses/courses.mdl.js b/apps/api/models/courses/courses.mdl.js
similarity index 100%
rename from models/courses/courses.mdl.js
rename to apps/api/models/courses/courses.mdl.js
diff --git a/models/courses/lesson_objective.mdl.js b/apps/api/models/courses/lesson_objective.mdl.js
similarity index 100%
rename from models/courses/lesson_objective.mdl.js
rename to apps/api/models/courses/lesson_objective.mdl.js
diff --git a/models/courses/lesson_page.mdl.js b/apps/api/models/courses/lesson_page.mdl.js
similarity index 100%
rename from models/courses/lesson_page.mdl.js
rename to apps/api/models/courses/lesson_page.mdl.js
diff --git a/models/courses/lesson_reading_progress.mdl.js b/apps/api/models/courses/lesson_reading_progress.mdl.js
similarity index 100%
rename from models/courses/lesson_reading_progress.mdl.js
rename to apps/api/models/courses/lesson_reading_progress.mdl.js
diff --git a/models/courses/lessons.mdl.js b/apps/api/models/courses/lessons.mdl.js
similarity index 100%
rename from models/courses/lessons.mdl.js
rename to apps/api/models/courses/lessons.mdl.js
diff --git a/models/courses/media_playback_position.mdl.js b/apps/api/models/courses/media_playback_position.mdl.js
similarity index 100%
rename from models/courses/media_playback_position.mdl.js
rename to apps/api/models/courses/media_playback_position.mdl.js
diff --git a/models/courses/pending_certificate.mdl.js b/apps/api/models/courses/pending_certificate.mdl.js
similarity index 100%
rename from models/courses/pending_certificate.mdl.js
rename to apps/api/models/courses/pending_certificate.mdl.js
diff --git a/models/courses/products.mdl.js b/apps/api/models/courses/products.mdl.js
similarity index 100%
rename from models/courses/products.mdl.js
rename to apps/api/models/courses/products.mdl.js
diff --git a/models/courses/quiz_attempt.mdl.js b/apps/api/models/courses/quiz_attempt.mdl.js
similarity index 100%
rename from models/courses/quiz_attempt.mdl.js
rename to apps/api/models/courses/quiz_attempt.mdl.js
diff --git a/models/courses/quiz_option.mdl.js b/apps/api/models/courses/quiz_option.mdl.js
similarity index 100%
rename from models/courses/quiz_option.mdl.js
rename to apps/api/models/courses/quiz_option.mdl.js
diff --git a/models/courses/quiz_question.mdl.js b/apps/api/models/courses/quiz_question.mdl.js
similarity index 100%
rename from models/courses/quiz_question.mdl.js
rename to apps/api/models/courses/quiz_question.mdl.js
diff --git a/models/courses/quiz_session.mdl.js b/apps/api/models/courses/quiz_session.mdl.js
similarity index 100%
rename from models/courses/quiz_session.mdl.js
rename to apps/api/models/courses/quiz_session.mdl.js
diff --git a/models/courses/unit_lessons.mdl.js b/apps/api/models/courses/unit_lessons.mdl.js
similarity index 100%
rename from models/courses/unit_lessons.mdl.js
rename to apps/api/models/courses/unit_lessons.mdl.js
diff --git a/models/courses/unit_quiz.mdl.js b/apps/api/models/courses/unit_quiz.mdl.js
similarity index 100%
rename from models/courses/unit_quiz.mdl.js
rename to apps/api/models/courses/unit_quiz.mdl.js
diff --git a/models/courses/unit_reading_progress.mdl.js b/apps/api/models/courses/unit_reading_progress.mdl.js
similarity index 100%
rename from models/courses/unit_reading_progress.mdl.js
rename to apps/api/models/courses/unit_reading_progress.mdl.js
diff --git a/models/courses/units.mdl.js b/apps/api/models/courses/units.mdl.js
similarity index 100%
rename from models/courses/units.mdl.js
rename to apps/api/models/courses/units.mdl.js
diff --git a/models/notifications/admin_notification.mdl.js b/apps/api/models/notifications/admin_notification.mdl.js
similarity index 100%
rename from models/notifications/admin_notification.mdl.js
rename to apps/api/models/notifications/admin_notification.mdl.js
diff --git a/models/notifications/cron_notification_setting.mdl.js b/apps/api/models/notifications/cron_notification_setting.mdl.js
similarity index 100%
rename from models/notifications/cron_notification_setting.mdl.js
rename to apps/api/models/notifications/cron_notification_setting.mdl.js
diff --git a/models/notifications/notification_broadcast.attributes.js b/apps/api/models/notifications/notification_broadcast.attributes.js
similarity index 100%
rename from models/notifications/notification_broadcast.attributes.js
rename to apps/api/models/notifications/notification_broadcast.attributes.js
diff --git a/models/notifications/notification_broadcast.mdl.js b/apps/api/models/notifications/notification_broadcast.mdl.js
similarity index 100%
rename from models/notifications/notification_broadcast.mdl.js
rename to apps/api/models/notifications/notification_broadcast.mdl.js
diff --git a/models/notifications/user_notification.mdl.js b/apps/api/models/notifications/user_notification.mdl.js
similarity index 100%
rename from models/notifications/user_notification.mdl.js
rename to apps/api/models/notifications/user_notification.mdl.js
diff --git a/models/system_badges/system_badges.mdl.js b/apps/api/models/system_badges/system_badges.mdl.js
similarity index 100%
rename from models/system_badges/system_badges.mdl.js
rename to apps/api/models/system_badges/system_badges.mdl.js
diff --git a/models/task/task.attributes.js b/apps/api/models/task/task.attributes.js
similarity index 100%
rename from models/task/task.attributes.js
rename to apps/api/models/task/task.attributes.js
diff --git a/models/task/task.mdl.js b/apps/api/models/task/task.mdl.js
similarity index 100%
rename from models/task/task.mdl.js
rename to apps/api/models/task/task.mdl.js
diff --git a/models/task/task_completion.attributes.js b/apps/api/models/task/task_completion.attributes.js
similarity index 100%
rename from models/task/task_completion.attributes.js
rename to apps/api/models/task/task_completion.attributes.js
diff --git a/models/task/task_completion.mdl.js b/apps/api/models/task/task_completion.mdl.js
similarity index 100%
rename from models/task/task_completion.mdl.js
rename to apps/api/models/task/task_completion.mdl.js
diff --git a/models/task/task_progress.mdl.js b/apps/api/models/task/task_progress.mdl.js
similarity index 100%
rename from models/task/task_progress.mdl.js
rename to apps/api/models/task/task_progress.mdl.js
diff --git a/models/tiers/payment_policies.mdl.js b/apps/api/models/tiers/payment_policies.mdl.js
similarity index 100%
rename from models/tiers/payment_policies.mdl.js
rename to apps/api/models/tiers/payment_policies.mdl.js
diff --git a/models/tiers/payments.attributes.js b/apps/api/models/tiers/payments.attributes.js
similarity index 100%
rename from models/tiers/payments.attributes.js
rename to apps/api/models/tiers/payments.attributes.js
diff --git a/models/tiers/payments.mdl.js b/apps/api/models/tiers/payments.mdl.js
similarity index 100%
rename from models/tiers/payments.mdl.js
rename to apps/api/models/tiers/payments.mdl.js
diff --git a/models/tiers/plan_courses.mdl.js b/apps/api/models/tiers/plan_courses.mdl.js
similarity index 100%
rename from models/tiers/plan_courses.mdl.js
rename to apps/api/models/tiers/plan_courses.mdl.js
diff --git a/models/tiers/plan_lessons.mdl.js b/apps/api/models/tiers/plan_lessons.mdl.js
similarity index 100%
rename from models/tiers/plan_lessons.mdl.js
rename to apps/api/models/tiers/plan_lessons.mdl.js
diff --git a/models/tiers/plan_units.mdl.js b/apps/api/models/tiers/plan_units.mdl.js
similarity index 100%
rename from models/tiers/plan_units.mdl.js
rename to apps/api/models/tiers/plan_units.mdl.js
diff --git a/models/tiers/tier.associations.js b/apps/api/models/tiers/tier.associations.js
similarity index 100%
rename from models/tiers/tier.associations.js
rename to apps/api/models/tiers/tier.associations.js
diff --git a/models/tiers/tier_categories.mdl.js b/apps/api/models/tiers/tier_categories.mdl.js
similarity index 100%
rename from models/tiers/tier_categories.mdl.js
rename to apps/api/models/tiers/tier_categories.mdl.js
diff --git a/models/tiers/tier_plans.attributes.js b/apps/api/models/tiers/tier_plans.attributes.js
similarity index 100%
rename from models/tiers/tier_plans.attributes.js
rename to apps/api/models/tiers/tier_plans.attributes.js
diff --git a/models/tiers/tier_plans.mdl.js b/apps/api/models/tiers/tier_plans.mdl.js
similarity index 100%
rename from models/tiers/tier_plans.mdl.js
rename to apps/api/models/tiers/tier_plans.mdl.js
diff --git a/models/tiers/user_tier_grants.mdl.js b/apps/api/models/tiers/user_tier_grants.mdl.js
similarity index 100%
rename from models/tiers/user_tier_grants.mdl.js
rename to apps/api/models/tiers/user_tier_grants.mdl.js
diff --git a/models/tiers/user_tiers.mdl.js b/apps/api/models/tiers/user_tiers.mdl.js
similarity index 100%
rename from models/tiers/user_tiers.mdl.js
rename to apps/api/models/tiers/user_tiers.mdl.js
diff --git a/models/users/achievement_definitions.mdl.js b/apps/api/models/users/achievement_definitions.mdl.js
similarity index 100%
rename from models/users/achievement_definitions.mdl.js
rename to apps/api/models/users/achievement_definitions.mdl.js
diff --git a/models/users/achievements.mdl.js b/apps/api/models/users/achievements.mdl.js
similarity index 100%
rename from models/users/achievements.mdl.js
rename to apps/api/models/users/achievements.mdl.js
diff --git a/models/users/trusted_devices.mdl.js b/apps/api/models/users/trusted_devices.mdl.js
similarity index 100%
rename from models/users/trusted_devices.mdl.js
rename to apps/api/models/users/trusted_devices.mdl.js
diff --git a/models/users/user_activity.mdl.js b/apps/api/models/users/user_activity.mdl.js
similarity index 100%
rename from models/users/user_activity.mdl.js
rename to apps/api/models/users/user_activity.mdl.js
diff --git a/models/users/user_bans.mdl.js b/apps/api/models/users/user_bans.mdl.js
similarity index 100%
rename from models/users/user_bans.mdl.js
rename to apps/api/models/users/user_bans.mdl.js
diff --git a/models/users/user_groups.attributes.js b/apps/api/models/users/user_groups.attributes.js
similarity index 100%
rename from models/users/user_groups.attributes.js
rename to apps/api/models/users/user_groups.attributes.js
diff --git a/models/users/user_groups.mdl.js b/apps/api/models/users/user_groups.mdl.js
similarity index 100%
rename from models/users/user_groups.mdl.js
rename to apps/api/models/users/user_groups.mdl.js
diff --git a/models/users/user_sessions.mdl.js b/apps/api/models/users/user_sessions.mdl.js
similarity index 100%
rename from models/users/user_sessions.mdl.js
rename to apps/api/models/users/user_sessions.mdl.js
diff --git a/models/users/users.attributes.js b/apps/api/models/users/users.attributes.js
similarity index 100%
rename from models/users/users.attributes.js
rename to apps/api/models/users/users.attributes.js
diff --git a/models/users/users.mdl.js b/apps/api/models/users/users.mdl.js
similarity index 100%
rename from models/users/users.mdl.js
rename to apps/api/models/users/users.mdl.js
diff --git a/apps/api/package.json b/apps/api/package.json
new file mode 100644
index 0000000..dec0b8a
--- /dev/null
+++ b/apps/api/package.json
@@ -0,0 +1,63 @@
+{
+  "name": "api",
+  "version": "1.0.0",
+  "description": "STAR Phase 1 - Tier 1 Auth System with CSRF, Rate Limiting, RBAC, Google & System Auth",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js",
+    "test": "jest",
+    "db:migrate": "sequelize-cli db:migrate",
+    "db:migrate:undo": "sequelize-cli db:migrate:undo",
+    "db:migrate:undo:all": "sequelize-cli db:migrate:undo:all",
+    "db:migrate:status": "sequelize-cli db:migrate:status",
+    "db:seed": "sequelize-cli db:seed:all",
+    "db:seed:undo": "sequelize-cli db:seed:undo:all"
+  },
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.1068.0",
+    "@aws-sdk/lib-storage": "^3.1085.0",
+    "@aws-sdk/s3-request-presigner": "^3.1068.0",
+    "axios": "^1.16.0",
+    "bcryptjs": "^2.4.3",
+    "connect-pg-simple": "^10.0.0",
+    "cookie-parser": "^1.4.6",
+    "cors": "^2.8.5",
+    "csurf": "^1.11.0",
+    "currency-codes": "^2.2.0",
+    "dotenv": "^16.0.3",
+    "express": "^4.18.2",
+    "express-rate-limit": "^6.10.0",
+    "express-session": "^1.17.3",
+    "express-validator": "^7.0.1",
+    "ffprobe-static": "^3.1.0",
+    "fluent-ffmpeg": "^2.1.3",
+    "form-data": "^4.0.5",
+    "google-auth-library": "^9.0.0",
+    "http-proxy-middleware": "^4.0.0",
+    "jsonwebtoken": "^9.0.1",
+    "multer": "^2.1.1",
+    "node-cron": "^4.2.1",
+    "nodemailer": "^6.9.5",
+    "path": "^0.12.7",
+    "pg": "^8.11.3",
+    "pg-hstore": "^2.3.4",
+    "rate-limit-redis": "^4.0.0",
+    "redis": "^4.6.7",
+    "sequelize": "^6.32.1",
+    "sharp": "^0.35.3",
+    "ua-parser-js": "^2.0.10",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "jest": "^30.4.2",
+    "nodemon": "^3.0.1",
+    "sequelize-cli": "^6.6.5"
+  },
+  "jest": {
+    "testMatch": [
+      "**/tests/**/*.test.js"
+    ],
+    "forceExit": true
+  }
+}
diff --git a/providers/paypal.provider.js b/apps/api/providers/paypal.provider.js
similarity index 100%
rename from providers/paypal.provider.js
rename to apps/api/providers/paypal.provider.js
diff --git a/providers/registry.js b/apps/api/providers/registry.js
similarity index 100%
rename from providers/registry.js
rename to apps/api/providers/registry.js
diff --git a/routes/admin/achievements.routes.js b/apps/api/routes/admin/achievements.routes.js
similarity index 100%
rename from routes/admin/achievements.routes.js
rename to apps/api/routes/admin/achievements.routes.js
diff --git a/routes/admin/admin.routes.js b/apps/api/routes/admin/admin.routes.js
similarity index 100%
rename from routes/admin/admin.routes.js
rename to apps/api/routes/admin/admin.routes.js
diff --git a/routes/admin/advertisements.routes.js b/apps/api/routes/admin/advertisements.routes.js
similarity index 100%
rename from routes/admin/advertisements.routes.js
rename to apps/api/routes/admin/advertisements.routes.js
diff --git a/routes/admin/assets.routes.js b/apps/api/routes/admin/assets.routes.js
similarity index 100%
rename from routes/admin/assets.routes.js
rename to apps/api/routes/admin/assets.routes.js
diff --git a/routes/admin/categories.routes.js b/apps/api/routes/admin/categories.routes.js
similarity index 100%
rename from routes/admin/categories.routes.js
rename to apps/api/routes/admin/categories.routes.js
diff --git a/routes/admin/courses.routes.js b/apps/api/routes/admin/courses.routes.js
similarity index 100%
rename from routes/admin/courses.routes.js
rename to apps/api/routes/admin/courses.routes.js
diff --git a/routes/admin/dashboard.routes.js b/apps/api/routes/admin/dashboard.routes.js
similarity index 100%
rename from routes/admin/dashboard.routes.js
rename to apps/api/routes/admin/dashboard.routes.js
diff --git a/routes/admin/groups.routes.js b/apps/api/routes/admin/groups.routes.js
similarity index 100%
rename from routes/admin/groups.routes.js
rename to apps/api/routes/admin/groups.routes.js
diff --git a/routes/admin/lessons.routes.js b/apps/api/routes/admin/lessons.routes.js
similarity index 100%
rename from routes/admin/lessons.routes.js
rename to apps/api/routes/admin/lessons.routes.js
diff --git a/routes/admin/media.routes.js b/apps/api/routes/admin/media.routes.js
similarity index 100%
rename from routes/admin/media.routes.js
rename to apps/api/routes/admin/media.routes.js
diff --git a/routes/admin/notificationBroadcasts.routes.js b/apps/api/routes/admin/notificationBroadcasts.routes.js
similarity index 100%
rename from routes/admin/notificationBroadcasts.routes.js
rename to apps/api/routes/admin/notificationBroadcasts.routes.js
diff --git a/routes/admin/notificationSettings.routes.js b/apps/api/routes/admin/notificationSettings.routes.js
similarity index 100%
rename from routes/admin/notificationSettings.routes.js
rename to apps/api/routes/admin/notificationSettings.routes.js
diff --git a/routes/admin/notifications.routes.js b/apps/api/routes/admin/notifications.routes.js
similarity index 100%
rename from routes/admin/notifications.routes.js
rename to apps/api/routes/admin/notifications.routes.js
diff --git a/routes/admin/products.routes.js b/apps/api/routes/admin/products.routes.js
similarity index 100%
rename from routes/admin/products.routes.js
rename to apps/api/routes/admin/products.routes.js
diff --git a/routes/admin/profile.routes.js b/apps/api/routes/admin/profile.routes.js
similarity index 100%
rename from routes/admin/profile.routes.js
rename to apps/api/routes/admin/profile.routes.js
diff --git a/routes/admin/task.routes.js b/apps/api/routes/admin/task.routes.js
similarity index 100%
rename from routes/admin/task.routes.js
rename to apps/api/routes/admin/task.routes.js
diff --git a/routes/admin/tier_categories.routes.js b/apps/api/routes/admin/tier_categories.routes.js
similarity index 100%
rename from routes/admin/tier_categories.routes.js
rename to apps/api/routes/admin/tier_categories.routes.js
diff --git a/routes/admin/tier_policies.routes.js b/apps/api/routes/admin/tier_policies.routes.js
similarity index 100%
rename from routes/admin/tier_policies.routes.js
rename to apps/api/routes/admin/tier_policies.routes.js
diff --git a/routes/admin/tiers.routes.js b/apps/api/routes/admin/tiers.routes.js
similarity index 100%
rename from routes/admin/tiers.routes.js
rename to apps/api/routes/admin/tiers.routes.js
diff --git a/routes/admin/units.routes.js b/apps/api/routes/admin/units.routes.js
similarity index 100%
rename from routes/admin/units.routes.js
rename to apps/api/routes/admin/units.routes.js
diff --git a/routes/admin/users.routes.js b/apps/api/routes/admin/users.routes.js
similarity index 100%
rename from routes/admin/users.routes.js
rename to apps/api/routes/admin/users.routes.js
diff --git a/routes/auth.routes.js b/apps/api/routes/auth.routes.js
similarity index 100%
rename from routes/auth.routes.js
rename to apps/api/routes/auth.routes.js
diff --git a/routes/client/advertisements.routes.js b/apps/api/routes/client/advertisements.routes.js
similarity index 100%
rename from routes/client/advertisements.routes.js
rename to apps/api/routes/client/advertisements.routes.js
diff --git a/routes/client/client.routes.js b/apps/api/routes/client/client.routes.js
similarity index 100%
rename from routes/client/client.routes.js
rename to apps/api/routes/client/client.routes.js
diff --git a/routes/client/course_purchases.routes.js b/apps/api/routes/client/course_purchases.routes.js
similarity index 100%
rename from routes/client/course_purchases.routes.js
rename to apps/api/routes/client/course_purchases.routes.js
diff --git a/routes/client/courses.routes.js b/apps/api/routes/client/courses.routes.js
similarity index 100%
rename from routes/client/courses.routes.js
rename to apps/api/routes/client/courses.routes.js
diff --git a/routes/client/groups.routes.js b/apps/api/routes/client/groups.routes.js
similarity index 100%
rename from routes/client/groups.routes.js
rename to apps/api/routes/client/groups.routes.js
diff --git a/routes/client/lessons.routes.js b/apps/api/routes/client/lessons.routes.js
similarity index 100%
rename from routes/client/lessons.routes.js
rename to apps/api/routes/client/lessons.routes.js
diff --git a/routes/client/media.routes.js b/apps/api/routes/client/media.routes.js
similarity index 100%
rename from routes/client/media.routes.js
rename to apps/api/routes/client/media.routes.js
diff --git a/routes/client/notifications.routes.js b/apps/api/routes/client/notifications.routes.js
similarity index 100%
rename from routes/client/notifications.routes.js
rename to apps/api/routes/client/notifications.routes.js
diff --git a/routes/client/tiers.routes.js b/apps/api/routes/client/tiers.routes.js
similarity index 100%
rename from routes/client/tiers.routes.js
rename to apps/api/routes/client/tiers.routes.js
diff --git a/routes/client/units.routes.js b/apps/api/routes/client/units.routes.js
similarity index 100%
rename from routes/client/units.routes.js
rename to apps/api/routes/client/units.routes.js
diff --git a/routes/health.routes.js b/apps/api/routes/health.routes.js
similarity index 100%
rename from routes/health.routes.js
rename to apps/api/routes/health.routes.js
diff --git a/routes/public/media.routes.js b/apps/api/routes/public/media.routes.js
similarity index 100%
rename from routes/public/media.routes.js
rename to apps/api/routes/public/media.routes.js
diff --git a/routes/public/public.routes.js b/apps/api/routes/public/public.routes.js
similarity index 100%
rename from routes/public/public.routes.js
rename to apps/api/routes/public/public.routes.js
diff --git a/routes/staff/staff.routes.js b/apps/api/routes/staff/staff.routes.js
similarity index 100%
rename from routes/staff/staff.routes.js
rename to apps/api/routes/staff/staff.routes.js
diff --git a/scripts/backfill-durations.js b/apps/api/scripts/backfill-durations.js
similarity index 100%
rename from scripts/backfill-durations.js
rename to apps/api/scripts/backfill-durations.js
diff --git a/scripts/garage-init.sh b/apps/api/scripts/garage-init.sh
similarity index 100%
rename from scripts/garage-init.sh
rename to apps/api/scripts/garage-init.sh
diff --git a/scripts/get_gmail_refresh_token.js b/apps/api/scripts/get_gmail_refresh_token.js
similarity index 100%
rename from scripts/get_gmail_refresh_token.js
rename to apps/api/scripts/get_gmail_refresh_token.js
diff --git a/server.js b/apps/api/server.js
similarity index 100%
rename from server.js
rename to apps/api/server.js
diff --git a/services/accountStatus.service.js b/apps/api/services/accountStatus.service.js
similarity index 100%
rename from services/accountStatus.service.js
rename to apps/api/services/accountStatus.service.js
diff --git a/services/achievements.service.js b/apps/api/services/achievements.service.js
similarity index 100%
rename from services/achievements.service.js
rename to apps/api/services/achievements.service.js
diff --git a/services/assetTranscode.service.js b/apps/api/services/assetTranscode.service.js
similarity index 100%
rename from services/assetTranscode.service.js
rename to apps/api/services/assetTranscode.service.js
diff --git a/services/avatar.service.js b/apps/api/services/avatar.service.js
similarity index 100%
rename from services/avatar.service.js
rename to apps/api/services/avatar.service.js
diff --git a/services/certificate-record.service.js b/apps/api/services/certificate-record.service.js
similarity index 100%
rename from services/certificate-record.service.js
rename to apps/api/services/certificate-record.service.js
diff --git a/services/certificate.service.js b/apps/api/services/certificate.service.js
similarity index 100%
rename from services/certificate.service.js
rename to apps/api/services/certificate.service.js
diff --git a/services/chibisafe.service.js b/apps/api/services/chibisafe.service.js
similarity index 100%
rename from services/chibisafe.service.js
rename to apps/api/services/chibisafe.service.js
diff --git a/services/completion_requirements.service.js b/apps/api/services/completion_requirements.service.js
similarity index 100%
rename from services/completion_requirements.service.js
rename to apps/api/services/completion_requirements.service.js
diff --git a/services/course_reading_progress.service.js b/apps/api/services/course_reading_progress.service.js
similarity index 100%
rename from services/course_reading_progress.service.js
rename to apps/api/services/course_reading_progress.service.js
diff --git a/services/email.service.js b/apps/api/services/email.service.js
similarity index 100%
rename from services/email.service.js
rename to apps/api/services/email.service.js
diff --git a/services/ffmpeg.service.js b/apps/api/services/ffmpeg.service.js
similarity index 100%
rename from services/ffmpeg.service.js
rename to apps/api/services/ffmpeg.service.js
diff --git a/services/ffprobe.service.js b/apps/api/services/ffprobe.service.js
similarity index 100%
rename from services/ffprobe.service.js
rename to apps/api/services/ffprobe.service.js
diff --git a/services/health.service.js b/apps/api/services/health.service.js
similarity index 100%
rename from services/health.service.js
rename to apps/api/services/health.service.js
diff --git a/services/mediaToken.service.js b/apps/api/services/mediaToken.service.js
similarity index 100%
rename from services/mediaToken.service.js
rename to apps/api/services/mediaToken.service.js
diff --git a/services/payment.service.js b/apps/api/services/payment.service.js
similarity index 100%
rename from services/payment.service.js
rename to apps/api/services/payment.service.js
diff --git a/services/planAccess.service.js b/apps/api/services/planAccess.service.js
similarity index 100%
rename from services/planAccess.service.js
rename to apps/api/services/planAccess.service.js
diff --git a/services/playback_position.service.js b/apps/api/services/playback_position.service.js
similarity index 100%
rename from services/playback_position.service.js
rename to apps/api/services/playback_position.service.js
diff --git a/services/reading_progress.service.js b/apps/api/services/reading_progress.service.js
similarity index 100%
rename from services/reading_progress.service.js
rename to apps/api/services/reading_progress.service.js
diff --git a/services/s3.service.js b/apps/api/services/s3.service.js
similarity index 100%
rename from services/s3.service.js
rename to apps/api/services/s3.service.js
diff --git a/services/task_reading_progress_sync.service.js b/apps/api/services/task_reading_progress_sync.service.js
similarity index 100%
rename from services/task_reading_progress_sync.service.js
rename to apps/api/services/task_reading_progress_sync.service.js
diff --git a/services/tierGrants.service.js b/apps/api/services/tierGrants.service.js
similarity index 100%
rename from services/tierGrants.service.js
rename to apps/api/services/tierGrants.service.js
diff --git a/services/trustedDevice.service.js b/apps/api/services/trustedDevice.service.js
similarity index 100%
rename from services/trustedDevice.service.js
rename to apps/api/services/trustedDevice.service.js
diff --git a/templates/certificate.typ b/apps/api/templates/certificate.typ
similarity index 100%
rename from templates/certificate.typ
rename to apps/api/templates/certificate.typ
diff --git a/templates/fonts/Arimo/Arimo-Bold.ttf b/apps/api/templates/fonts/Arimo/Arimo-Bold.ttf
similarity index 100%
rename from templates/fonts/Arimo/Arimo-Bold.ttf
rename to apps/api/templates/fonts/Arimo/Arimo-Bold.ttf
diff --git a/templates/fonts/Arimo/Arimo-BoldItalic.ttf b/apps/api/templates/fonts/Arimo/Arimo-BoldItalic.ttf
similarity index 100%
rename from templates/fonts/Arimo/Arimo-BoldItalic.ttf
rename to apps/api/templates/fonts/Arimo/Arimo-BoldItalic.ttf
diff --git a/templates/fonts/Arimo/Arimo-Italic.ttf b/apps/api/templates/fonts/Arimo/Arimo-Italic.ttf
similarity index 100%
rename from templates/fonts/Arimo/Arimo-Italic.ttf
rename to apps/api/templates/fonts/Arimo/Arimo-Italic.ttf
diff --git a/templates/fonts/Arimo/Arimo-Regular.ttf b/apps/api/templates/fonts/Arimo/Arimo-Regular.ttf
similarity index 100%
rename from templates/fonts/Arimo/Arimo-Regular.ttf
rename to apps/api/templates/fonts/Arimo/Arimo-Regular.ttf
diff --git a/templates/fonts/Arimo/OFL.txt b/apps/api/templates/fonts/Arimo/OFL.txt
similarity index 100%
rename from templates/fonts/Arimo/OFL.txt
rename to apps/api/templates/fonts/Arimo/OFL.txt
diff --git a/templates/philpro-logo.png b/apps/api/templates/philpro-logo.png
similarity index 100%
rename from templates/philpro-logo.png
rename to apps/api/templates/philpro-logo.png
diff --git a/templates/signature-placeholder.png b/apps/api/templates/signature-placeholder.png
similarity index 100%
rename from templates/signature-placeholder.png
rename to apps/api/templates/signature-placeholder.png
diff --git a/tests/controllers/courses.controller.access.test.js b/apps/api/tests/controllers/courses.controller.access.test.js
similarity index 100%
rename from tests/controllers/courses.controller.access.test.js
rename to apps/api/tests/controllers/courses.controller.access.test.js
diff --git a/tests/controllers/tiers.controller.capture.test.js b/apps/api/tests/controllers/tiers.controller.capture.test.js
similarity index 100%
rename from tests/controllers/tiers.controller.capture.test.js
rename to apps/api/tests/controllers/tiers.controller.capture.test.js
diff --git a/tests/cron/fail_stale_payments.test.js b/apps/api/tests/cron/fail_stale_payments.test.js
similarity index 100%
rename from tests/cron/fail_stale_payments.test.js
rename to apps/api/tests/cron/fail_stale_payments.test.js
diff --git a/tests/middleware/originGuard.test.js b/apps/api/tests/middleware/originGuard.test.js
similarity index 100%
rename from tests/middleware/originGuard.test.js
rename to apps/api/tests/middleware/originGuard.test.js
diff --git a/tests/middleware/rateLimiter.test.js b/apps/api/tests/middleware/rateLimiter.test.js
similarity index 100%
rename from tests/middleware/rateLimiter.test.js
rename to apps/api/tests/middleware/rateLimiter.test.js
diff --git a/tests/middleware/rbac.test.js b/apps/api/tests/middleware/rbac.test.js
similarity index 100%
rename from tests/middleware/rbac.test.js
rename to apps/api/tests/middleware/rbac.test.js
diff --git a/tests/providers/paypal.provider.test.js b/apps/api/tests/providers/paypal.provider.test.js
similarity index 100%
rename from tests/providers/paypal.provider.test.js
rename to apps/api/tests/providers/paypal.provider.test.js
diff --git a/tests/providers/registry.test.js b/apps/api/tests/providers/registry.test.js
similarity index 100%
rename from tests/providers/registry.test.js
rename to apps/api/tests/providers/registry.test.js
diff --git a/tests/services/health.test.js b/apps/api/tests/services/health.test.js
similarity index 100%
rename from tests/services/health.test.js
rename to apps/api/tests/services/health.test.js
diff --git a/tests/services/payment.service.test.js b/apps/api/tests/services/payment.service.test.js
similarity index 100%
rename from tests/services/payment.service.test.js
rename to apps/api/tests/services/payment.service.test.js
diff --git a/tests/services/planAccess.service.test.js b/apps/api/tests/services/planAccess.service.test.js
similarity index 100%
rename from tests/services/planAccess.service.test.js
rename to apps/api/tests/services/planAccess.service.test.js
diff --git a/tests/utils/datetime.test.js b/apps/api/tests/utils/datetime.test.js
similarity index 100%
rename from tests/utils/datetime.test.js
rename to apps/api/tests/utils/datetime.test.js
diff --git a/tests/utils/otp.test.js b/apps/api/tests/utils/otp.test.js
similarity index 100%
rename from tests/utils/otp.test.js
rename to apps/api/tests/utils/otp.test.js
diff --git a/tests/utils/response.test.js b/apps/api/tests/utils/response.test.js
similarity index 100%
rename from tests/utils/response.test.js
rename to apps/api/tests/utils/response.test.js
diff --git a/tests/utils/token.test.js b/apps/api/tests/utils/token.test.js
similarity index 100%
rename from tests/utils/token.test.js
rename to apps/api/tests/utils/token.test.js
diff --git a/utils/audienceResolver.util.js b/apps/api/utils/audienceResolver.util.js
similarity index 100%
rename from utils/audienceResolver.util.js
rename to apps/api/utils/audienceResolver.util.js
diff --git a/utils/buildQuery.util.js b/apps/api/utils/buildQuery.util.js
similarity index 100%
rename from utils/buildQuery.util.js
rename to apps/api/utils/buildQuery.util.js
diff --git a/utils/courses/archive.util.js b/apps/api/utils/courses/archive.util.js
similarity index 100%
rename from utils/courses/archive.util.js
rename to apps/api/utils/courses/archive.util.js
diff --git a/utils/courses/completion_requirements.registry.js b/apps/api/utils/courses/completion_requirements.registry.js
similarity index 100%
rename from utils/courses/completion_requirements.registry.js
rename to apps/api/utils/courses/completion_requirements.registry.js
diff --git a/utils/courses/grading.util.js b/apps/api/utils/courses/grading.util.js
similarity index 100%
rename from utils/courses/grading.util.js
rename to apps/api/utils/courses/grading.util.js
diff --git a/utils/courses/hierarchy.util.js b/apps/api/utils/courses/hierarchy.util.js
similarity index 100%
rename from utils/courses/hierarchy.util.js
rename to apps/api/utils/courses/hierarchy.util.js
diff --git a/utils/courses/junction.util.js b/apps/api/utils/courses/junction.util.js
similarity index 100%
rename from utils/courses/junction.util.js
rename to apps/api/utils/courses/junction.util.js
diff --git a/utils/courses/objectives.util.js b/apps/api/utils/courses/objectives.util.js
similarity index 100%
rename from utils/courses/objectives.util.js
rename to apps/api/utils/courses/objectives.util.js
diff --git a/utils/courses/permanentDelete.util.js b/apps/api/utils/courses/permanentDelete.util.js
similarity index 100%
rename from utils/courses/permanentDelete.util.js
rename to apps/api/utils/courses/permanentDelete.util.js
diff --git a/utils/courses/quiz_security.util.js b/apps/api/utils/courses/quiz_security.util.js
similarity index 100%
rename from utils/courses/quiz_security.util.js
rename to apps/api/utils/courses/quiz_security.util.js
diff --git a/utils/courses/resolvePrerequisiteTitles.util.js b/apps/api/utils/courses/resolvePrerequisiteTitles.util.js
similarity index 100%
rename from utils/courses/resolvePrerequisiteTitles.util.js
rename to apps/api/utils/courses/resolvePrerequisiteTitles.util.js
diff --git a/utils/courses/restore.util.js b/apps/api/utils/courses/restore.util.js
similarity index 100%
rename from utils/courses/restore.util.js
rename to apps/api/utils/courses/restore.util.js
diff --git a/utils/courses/taskPrerequisites.util.js b/apps/api/utils/courses/taskPrerequisites.util.js
similarity index 100%
rename from utils/courses/taskPrerequisites.util.js
rename to apps/api/utils/courses/taskPrerequisites.util.js
diff --git a/utils/datetime.util.js b/apps/api/utils/datetime.util.js
similarity index 100%
rename from utils/datetime.util.js
rename to apps/api/utils/datetime.util.js
diff --git a/utils/defaultGroup.util.js b/apps/api/utils/defaultGroup.util.js
similarity index 100%
rename from utils/defaultGroup.util.js
rename to apps/api/utils/defaultGroup.util.js
diff --git a/utils/duration.util.js b/apps/api/utils/duration.util.js
similarity index 100%
rename from utils/duration.util.js
rename to apps/api/utils/duration.util.js
diff --git a/utils/excludeJSONBPaths.util.js b/apps/api/utils/excludeJSONBPaths.util.js
similarity index 100%
rename from utils/excludeJSONBPaths.util.js
rename to apps/api/utils/excludeJSONBPaths.util.js
diff --git a/utils/fieldValues.util.js b/apps/api/utils/fieldValues.util.js
similarity index 100%
rename from utils/fieldValues.util.js
rename to apps/api/utils/fieldValues.util.js
diff --git a/utils/google_oidc.util.js b/apps/api/utils/google_oidc.util.js
similarity index 100%
rename from utils/google_oidc.util.js
rename to apps/api/utils/google_oidc.util.js
diff --git a/utils/logActivity.util.js b/apps/api/utils/logActivity.util.js
similarity index 100%
rename from utils/logActivity.util.js
rename to apps/api/utils/logActivity.util.js
diff --git a/utils/modelToAttributes.util.js b/apps/api/utils/modelToAttributes.util.js
similarity index 100%
rename from utils/modelToAttributes.util.js
rename to apps/api/utils/modelToAttributes.util.js
diff --git a/utils/notificationVisibility.util.js b/apps/api/utils/notificationVisibility.util.js
similarity index 100%
rename from utils/notificationVisibility.util.js
rename to apps/api/utils/notificationVisibility.util.js
diff --git a/utils/otp.util.js b/apps/api/utils/otp.util.js
similarity index 100%
rename from utils/otp.util.js
rename to apps/api/utils/otp.util.js
diff --git a/utils/paginate.util.js b/apps/api/utils/paginate.util.js
similarity index 100%
rename from utils/paginate.util.js
rename to apps/api/utils/paginate.util.js
diff --git a/utils/personalInfo.util.js b/apps/api/utils/personalInfo.util.js
similarity index 100%
rename from utils/personalInfo.util.js
rename to apps/api/utils/personalInfo.util.js
diff --git a/utils/purchasable.util.js b/apps/api/utils/purchasable.util.js
similarity index 100%
rename from utils/purchasable.util.js
rename to apps/api/utils/purchasable.util.js
diff --git a/utils/renderTemplate.util.js b/apps/api/utils/renderTemplate.util.js
similarity index 100%
rename from utils/renderTemplate.util.js
rename to apps/api/utils/renderTemplate.util.js
diff --git a/utils/resolveAvatar.util.js b/apps/api/utils/resolveAvatar.util.js
similarity index 100%
rename from utils/resolveAvatar.util.js
rename to apps/api/utils/resolveAvatar.util.js
diff --git a/utils/response.util.js b/apps/api/utils/response.util.js
similarity index 100%
rename from utils/response.util.js
rename to apps/api/utils/response.util.js
diff --git a/utils/session_info.util.js b/apps/api/utils/session_info.util.js
similarity index 100%
rename from utils/session_info.util.js
rename to apps/api/utils/session_info.util.js
diff --git a/utils/suspendGuard.util.js b/apps/api/utils/suspendGuard.util.js
similarity index 100%
rename from utils/suspendGuard.util.js
rename to apps/api/utils/suspendGuard.util.js
diff --git a/utils/token.util.js b/apps/api/utils/token.util.js
similarity index 100%
rename from utils/token.util.js
rename to apps/api/utils/token.util.js
diff --git a/utils/withTransactionRetry.util.js b/apps/api/utils/withTransactionRetry.util.js
similarity index 100%
rename from utils/withTransactionRetry.util.js
rename to apps/api/utils/withTransactionRetry.util.js
diff --git a/validators/auth.validator.js b/apps/api/validators/auth.validator.js
similarity index 100%
rename from validators/auth.validator.js
rename to apps/api/validators/auth.validator.js
diff --git a/validators/profile.validator.js b/apps/api/validators/profile.validator.js
similarity index 100%
rename from validators/profile.validator.js
rename to apps/api/validators/profile.validator.js
diff --git a/apps/web/.dockerignore b/apps/web/.dockerignore
new file mode 100644
index 0000000..5d0850b
--- /dev/null
+++ b/apps/web/.dockerignore
@@ -0,0 +1,7 @@
+node_modules
+.env
+src
+public
+*.config.js
+*.config.ts
+index.html
diff --git a/apps/web/.env.example b/apps/web/.env.example
new file mode 100644
index 0000000..8a9f8af
--- /dev/null
+++ b/apps/web/.env.example
@@ -0,0 +1,38 @@
+# ═══════════════════════════════════════════════════════════════════════════════
+#  $APP_NAME — Frontend Environment Variables Template
+#  Copy to .env and fill in all CHANGE_ME values before building.
+#
+#  Self-hosted setup:
+#    1. cp .env.example .env
+#    2. Fill in every CHANGE_ME value below
+#    3. npm run build          (bakes env vars into the dist/ bundle)
+#    4. docker build -t $APP_NAME-app .
+#       (or serve dist/ with any static host — Nginx, Caddy, Vercel, etc.)
+#
+#  NOTE: These are BUILD-TIME variables (VITE_ prefix). Changing them after
+#        the build has no effect — you must rebuild to pick up new values.
+# ═══════════════════════════════════════════════════════════════════════════════
+
+# ── API Connection ────────────────────────────────────────────────────────────
+#  Point to your backend's public URL — no trailing slash.
+#  Must match APP_URL / ALLOWED_ORIGINS in the backend .env.
+VITE_APP_NAME=starr
+VITE_API_URL=https://api.yourdomain.com/api
+VITE_APP_URL=https://api.yourdomain.com
+
+# ── Environment ───────────────────────────────────────────────────────────────
+#  "production" (droplet) or "qas" (home-hosted, behind Cloudflare Tunnel).
+#  Set to "qas" only on the QAS Preview build in Vercel's project settings.
+VITE_APP_ENV=production
+
+# ── PayPal ────────────────────────────────────────────────────────────────────
+#  Client ID is the public key — safe to expose in the browser bundle.
+#  developer.paypal.com → My Apps & Credentials → Live tab → Client ID
+VITE_PAYPAL_CLIENT_ID=CHANGE_ME
+
+# ── Country detection (phone input) ────────────────────────────────────────────
+#  IP → country lookup used to pre-select the phone input's dialing code.
+#  Defaults to the free hosted instance; self-host for production via
+#  https://github.com/lineofflight/country (Docker, needs a free MaxMind
+#  license key) and point this at your own instance instead.
+VITE_COUNTRY_API_URL=https://api.country.is
diff --git a/apps/web/.gitignore b/apps/web/.gitignore
new file mode 100644
index 0000000..bcd6d22
--- /dev/null
+++ b/apps/web/.gitignore
@@ -0,0 +1,49 @@
+# ── Dependencies ──────────────────────────────────────────────────────────────
+node_modules/
+
+# ── Environment / Secrets ─────────────────────────────────────────────────────
+.env
+.env.local
+.env.*.local
+# Keep .env.example — it is safe and documents required variables
+
+# ── SSL / TLS / Keys ──────────────────────────────────────────────────────────
+*.pem
+*.key
+*.cert
+*.crt
+*.p12
+*.pfx
+
+# ── Build / Output ────────────────────────────────────────────────────────────
+dist/
+dist-ssr/
+
+# ── Tauri ─────────────────────────────────────────────────────────────────────
+src-tauri/target/
+.tauri/
+
+# ── Logs ──────────────────────────────────────────────────────────────────────
+*.log
+logs/
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+lerna-debug.log*
+
+# ── OS ────────────────────────────────────────────────────────────────────────
+.DS_Store
+Thumbs.db
+desktop.ini
+
+# ── Editors ───────────────────────────────────────────────────────────────────
+.vscode/*
+!.vscode/extensions.json
+.idea/
+*.swp
+*.swo
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+.vercel
diff --git a/apps/web/.vscode/extensions.json b/apps/web/.vscode/extensions.json
new file mode 100644
index 0000000..e69de29
diff --git a/apps/web/Dockerfile b/apps/web/Dockerfile
new file mode 100644
index 0000000..a450ee2
--- /dev/null
+++ b/apps/web/Dockerfile
@@ -0,0 +1,9 @@
+# Pre-built image — run `npm run build` first so dist/ exists.
+FROM nginx:1.27-alpine
+
+COPY dist/ /usr/share/nginx/html/
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/apps/web/README.md b/apps/web/README.md
new file mode 100644
index 0000000..92dc71f
--- /dev/null
+++ b/apps/web/README.md
@@ -0,0 +1,177 @@
+# new_starr_app — Frontend
+
+React + Vite CSR frontend for the STARR LMS platform.
+
+---
+
+## Page Metadata
+
+Metadata (`<title>`, Open Graph, Twitter Card) is managed with **`react-helmet-async`**.  
+The system has two layers:
+
+1. **Global fallback** — a `<Helmet>` in `App.jsx` always renders default tags. Any page that does not supply its own metadata falls back to this.
+2. **Per-page override** — each page renders a `<PageMeta />` component anywhere in its JSX tree. react-helmet-async lets the deepest/last `<Helmet>` win, so the page always overrides the fallback.
+
+This approach fixes the `useNavigate()` stale-title bug: when you navigate away from a page, its `<PageMeta>` unmounts and the global fallback immediately takes over.
+
+---
+
+### The component
+
+```jsx
+// src/contexts/MetadataContext.jsx
+import { PageMeta } from '@/contexts/MetadataContext'
+```
+
+**Props**
+
+| Prop | Type | Default |
+|---|---|---|
+| `title` | `string \| undefined` | `'STARR \| Philproperties'` |
+| `description` | `string \| undefined` | app default description |
+| `keywords` | `string \| undefined` | app default keywords |
+| `ogImage` | `string \| undefined` | app default OG image URL |
+| `ogType` | `string` | `'website'` |
+
+Every prop is optional. Any omitted prop falls back to the app-level default.  
+Passing `title={undefined}` explicitly is the same as omitting it — the fallback title renders.
+
+---
+
+### Static pages
+
+Pages with no data dependency just pass a hardcoded string.
+
+```jsx
+import { PageMeta } from '@/contexts/MetadataContext'
+
+export default function CourseList() {
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta
+        title="Courses - STARR"
+        description="Browse and manage your training courses."
+      />
+      {/* rest of page */}
+    </section>
+  )
+}
+```
+
+---
+
+### Dynamic pages — data from context
+
+When the page title comes from an API response, pass the derived string.  
+Use `undefined` (not a hardcoded fallback string) while the data is loading — this lets the global default render during the loading state and then automatically updates when data arrives.
+
+```jsx
+import { PageMeta } from '@/contexts/MetadataContext'
+import { useCourses } from '@/contexts/AdminCoursesContext'
+
+export default function ViewCourse() {
+  const { course } = useCourses()
+
+  return (
+    <section className="bg-muted/60 min-h-full">
+      {/* undefined while course is null → global default renders */}
+      <PageMeta
+        title={course ? `${course.title} - STARR` : undefined}
+        description={course?.description}
+      />
+      {/* rest of page */}
+    </section>
+  )
+}
+```
+
+---
+
+### Dynamic pages — data in local state
+
+Same pattern when the title comes from local `useState` instead of context.
+
+```jsx
+import { PageMeta } from '@/contexts/MetadataContext'
+
+export default function EditUnit() {
+  const [unitTitle, setUnitTitle] = useState('')
+  // ... fetch and setUnitTitle on load
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title={unitTitle ? `Edit: ${unitTitle} - STARR` : undefined} />
+      {/* rest of page */}
+    </section>
+  )
+}
+```
+
+---
+
+### Placement rules
+
+- Drop `<PageMeta>` as the **first child** of the root element in the page's main `return`.
+- Do **not** add it to early/loading returns (spinner-only returns). The global fallback covers those.
+- Do **not** wrap the entire page in `<PageMeta>` — it is an inline element, not a wrapper.
+
+```jsx
+// CORRECT — inline inside root element
+return (
+  <section>
+    <PageMeta title="..." />
+    <div>...</div>
+  </section>
+)
+
+// WRONG — do not use as a wrapper
+return (
+  <PageMeta title="...">
+    <section>...</section>
+  </PageMeta>
+)
+```
+
+---
+
+### Title convention
+
+| Page type | Pattern | Example |
+|---|---|---|
+| List | `{Entity} - STARR` | `Courses - STARR` |
+| Archived list | `Archived {Entity} - STARR` | `Archived Courses - STARR` |
+| Create | `Add {Entity} - STARR` | `Add Course - STARR` |
+| View (dynamic) | `{name} - STARR` | `Intro to Sales - STARR` |
+| Edit (dynamic) | `Edit: {name} - STARR` | `Edit: Intro to Sales - STARR` |
+| Sub-list | `{SubEntity} – {parentName} - STARR` | `Units – Intro to Sales - STARR` |
+| Nested action | `{Action} – {parentName} - STARR` | `Page Builder – Lesson 1 - STARR` |
+
+---
+
+### Adding metadata to a new page — checklist
+
+1. Import `PageMeta` from `@/contexts/MetadataContext`.
+2. Identify what data (if any) drives the title — context state, local state, or nothing.
+3. Place `<PageMeta title="..." />` as the first child of the root element in the main `return`.
+4. Use the title convention above.
+5. Pass `description` if the page has meaningful content to describe (e.g. a course description).
+6. Pass `title={undefined}` (or omit `title`) while data is still loading.
+
+---
+
+### MetadataProvider (legacy)
+
+`Login.jsx` and `Register.jsx` still use the old wrapper pattern via `MetadataProvider`. This is a backward-compat shim that internally renders `<PageMeta {...value} />` and then its children. It works but should not be used for new pages — use the inline `<PageMeta />` pattern instead.
+
+```jsx
+// Old pattern (Login / Register only — do not copy for new pages)
+<MetadataProvider value={{ title: 'Login - Philproperties', description: '...' }}>
+  <LoginContent />
+</MetadataProvider>
+
+// New pattern (use this for all new pages)
+<section>
+  <PageMeta title="Login - Philproperties" description="..." />
+  <LoginContent />
+</section>
+```
diff --git a/apps/web/components.json b/apps/web/components.json
new file mode 100644
index 0000000..e94d87e
--- /dev/null
+++ b/apps/web/components.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": false,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@coss": "https://coss.com/ui/r/{name}.json"
+  }
+}
diff --git a/apps/web/eslint.config.js b/apps/web/eslint.config.js
new file mode 100644
index 0000000..ea36dd3
--- /dev/null
+++ b/apps/web/eslint.config.js
@@ -0,0 +1,21 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: { ecmaFeatures: { jsx: true } },
+    },
+  },
+])
diff --git a/apps/web/index.html b/apps/web/index.html
new file mode 100644
index 0000000..42e235c
--- /dev/null
+++ b/apps/web/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Fira+Code:wght@400..600&family=Abril+Fatface&display=swap"
+      rel="stylesheet"
+    />
+    <title>%VITE_APP_NAME%</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/apps/web/jsconfig.json b/apps/web/jsconfig.json
new file mode 100644
index 0000000..e8b3494
--- /dev/null
+++ b/apps/web/jsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/web/lib/bs/.sourcedirs.json b/apps/web/lib/bs/.sourcedirs.json
new file mode 100644
index 0000000..01b8a62
--- /dev/null
+++ b/apps/web/lib/bs/.sourcedirs.json
@@ -0,0 +1 @@
+{"cmt_scan":[{"also_scan_build_root":true,"build_root":"lib/bs","scan_dirs":["src/modules/client/hooks/rescript","src/modules/client/hooks/rescript/canvas"]}],"dirs":["src/modules/client/hooks/rescript","src/modules/client/hooks/rescript/canvas"],"generated":[],"pkgs":[["@rescript/react","/home/lash/Desktop/projects/new_starr_app/node_modules/.pnpm/@rescript+react@0.15.0_@rescript+runtime@12.3.0_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/@rescript/react"]],"version":2}
\ No newline at end of file
diff --git a/apps/web/lib/bs/build.ninja b/apps/web/lib/bs/build.ninja
new file mode 100644
index 0000000..e69de29
diff --git a/apps/web/lib/bs/compiler-info.json b/apps/web/lib/bs/compiler-info.json
new file mode 100644
index 0000000..3131cd1
--- /dev/null
+++ b/apps/web/lib/bs/compiler-info.json
@@ -0,0 +1,8 @@
+{
+  "version": "12.3.0",
+  "bsc_path": "/home/lash/Desktop/projects/new_starr_app/node_modules/.pnpm/@rescript+linux-x64@12.3.0/node_modules/@rescript/linux-x64/bin/bsc.exe",
+  "bsc_hash": "75e3a59c95cc953608fd3dd6ea6ed68141bba4414a20a52f114261b8a48385fa",
+  "rescript_config_hash": "d85ec7cb9b3b80783c8953553f7875d1b9d94eb55dcfd9a57b3ba357830c1934",
+  "runtime_path": "/home/lash/Desktop/projects/new_starr_app/node_modules/.pnpm/@rescript+runtime@12.3.0/node_modules/@rescript/runtime",
+  "generated_at": "1779801549320"
+}
\ No newline at end of file
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationPanel.ast b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationPanel.ast
new file mode 100644
index 0000000..ff57b58
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationPanel.ast differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationPanel.cmi b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationPanel.cmi
new file mode 100644
index 0000000..6a2b4f0
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationPanel.cmi differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationPanel.cmj b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationPanel.cmj
new file mode 100644
index 0000000..615482c
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationPanel.cmj differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationPanel.cmt b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationPanel.cmt
new file mode 100644
index 0000000..6917c82
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationPanel.cmt differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationPanel.js b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationPanel.js
new file mode 100644
index 0000000..debb90b
--- /dev/null
+++ b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationPanel.js
@@ -0,0 +1,58 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as JsxRuntime from "react/jsx-runtime";
+
+function AnnotationPanel(props) {
+  let onClose = props.onClose;
+  let onNoteChange = props.onNoteChange;
+  let note = props.note;
+  let lesson = props.lesson;
+  let noteValue = note !== undefined ? note : "";
+  return JsxRuntime.jsxs("div", {
+    children: [
+      JsxRuntime.jsxs("div", {
+        children: [
+          JsxRuntime.jsxs("div", {
+            children: [
+              JsxRuntime.jsx("p", {
+                children: "Annotation",
+                className: "text-xs text-muted-foreground uppercase tracking-widest font-semibold"
+              }),
+              JsxRuntime.jsx("h2", {
+                children: lesson.title,
+                className: "text-lg font-bold mt-0.5"
+              })
+            ]
+          }),
+          JsxRuntime.jsx("button", {
+            children: "✕ Close",
+            className: "text-muted-foreground hover:text-foreground transition-colors text-sm",
+            onClick: param => onClose()
+          })
+        ],
+        className: "flex items-center justify-between mb-4"
+      }),
+      JsxRuntime.jsx("textarea", {
+        className: "flex-1 w-full resize-none rounded-lg border bg-background p-4 text-sm focus:outline-none focus:ring-2 focus:ring-ring",
+        placeholder: "Write your notes for this lesson...",
+        value: noteValue,
+        onChange: e => {
+          let value = e.target.value;
+          onNoteChange(lesson.id, value);
+        }
+      }),
+      JsxRuntime.jsx("p", {
+        children: "Auto-saved to your browser",
+        className: "text-xs text-muted-foreground mt-2"
+      })
+    ],
+    className: "flex flex-col h-full"
+  });
+}
+
+let make = AnnotationPanel;
+
+export {
+  make,
+}
+/* react/jsx-runtime Not a pure module */
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationPanel.res b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationPanel.res
new file mode 100644
index 0000000..6acb6d5
--- /dev/null
+++ b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationPanel.res
@@ -0,0 +1,43 @@
+@react.component
+let make = (
+  ~lesson: AnnotationTypes.lesson,
+  ~note: option<string>,
+  ~onNoteChange: (string, string) => unit,
+  ~onClose: unit => unit,
+) => {
+  let noteValue = switch note {
+  | Some(n) => n
+  | None => ""
+  }
+
+  <div className="flex flex-col h-full">
+    <div className="flex items-center justify-between mb-4">
+      <div>
+        <p className="text-xs text-muted-foreground uppercase tracking-widest font-semibold">
+          {React.string("Annotation")}
+        </p>
+        <h2 className="text-lg font-bold mt-0.5">
+          {React.string(lesson.title)}
+        </h2>
+      </div>
+      <button
+        onClick={_ => onClose()}
+        className="text-muted-foreground hover:text-foreground transition-colors text-sm"
+      >
+        {React.string("✕ Close")}
+      </button>
+    </div>
+    <textarea
+      className="flex-1 w-full resize-none rounded-lg border bg-background p-4 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+      placeholder="Write your notes for this lesson..."
+      value={noteValue}
+      onChange={e => {
+        let value = ReactEvent.Form.target(e)["value"]
+        onNoteChange(lesson.id, value)
+      }}
+    />
+    <p className="text-xs text-muted-foreground mt-2">
+      {React.string("Auto-saved to your browser")}
+    </p>
+  </div>
+}
\ No newline at end of file
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationStorage.ast b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationStorage.ast
new file mode 100644
index 0000000..ea6f70c
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationStorage.ast differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationStorage.cmi b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationStorage.cmi
new file mode 100644
index 0000000..d5424a3
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationStorage.cmi differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationStorage.cmj b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationStorage.cmj
new file mode 100644
index 0000000..19c9ebe
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationStorage.cmj differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationStorage.cmt b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationStorage.cmt
new file mode 100644
index 0000000..fe6ca5b
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationStorage.cmt differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationStorage.js b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationStorage.js
new file mode 100644
index 0000000..4e01749
--- /dev/null
+++ b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationStorage.js
@@ -0,0 +1,29 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
+
+function storageKey(courseId, lessonId) {
+  return `annotation:` + courseId + `:` + lessonId;
+}
+
+function saveNote(courseId, lessonId, note) {
+  let key = storageKey(courseId, lessonId);
+  return localStorage.setItem(key, note);
+}
+
+function loadNote(courseId, lessonId) {
+  let key = storageKey(courseId, lessonId);
+  return Primitive_option.fromNullable(localStorage.getItem(key));
+}
+
+function deleteNote(courseId, lessonId) {
+  return localStorage.removeItem(storageKey(courseId, lessonId));
+}
+
+export {
+  storageKey,
+  saveNote,
+  loadNote,
+  deleteNote,
+}
+/* No side effect */
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationStorage.res b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationStorage.res
new file mode 100644
index 0000000..4763bac
--- /dev/null
+++ b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationStorage.res
@@ -0,0 +1,20 @@
+@val external localStorage: {..} = "localStorage"
+
+let storageKey = (courseId: string, lessonId: string) =>
+  `annotation:${courseId}:${lessonId}`
+
+let saveNote = (courseId: string, lessonId: string, note: string) => {
+  let key = storageKey(courseId, lessonId)
+  localStorage["setItem"](key, note)
+}
+
+let loadNote = (courseId: string, lessonId: string) => {
+  let key = storageKey(courseId, lessonId)
+  let value: Nullable.t<string> = localStorage["getItem"](key)
+  Nullable.toOption(value)
+}
+
+let deleteNote = (courseId: string, lessonId: string) => {
+  let key = storageKey(courseId, lessonId)
+  localStorage["removeItem"](key)
+}
\ No newline at end of file
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationTypes.ast b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationTypes.ast
new file mode 100644
index 0000000..0c1a30f
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationTypes.ast differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationTypes.cmi b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationTypes.cmi
new file mode 100644
index 0000000..6aa711f
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationTypes.cmi differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationTypes.cmj b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationTypes.cmj
new file mode 100644
index 0000000..bb77606
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationTypes.cmj differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationTypes.cmt b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationTypes.cmt
new file mode 100644
index 0000000..dfc3ce2
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationTypes.cmt differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationTypes.js b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationTypes.js
new file mode 100644
index 0000000..188d4f9
--- /dev/null
+++ b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationTypes.js
@@ -0,0 +1,15 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+
+let initialState_notes = {};
+
+let initialState = {
+  selectedLesson: undefined,
+  isPenOpen: false,
+  notes: initialState_notes
+};
+
+export {
+  initialState,
+}
+/* No side effect */
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationTypes.res b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationTypes.res
new file mode 100644
index 0000000..900f30b
--- /dev/null
+++ b/apps/web/lib/bs/src/modules/client/hooks/rescript/AnnotationTypes.res
@@ -0,0 +1,17 @@
+type lesson = {
+  id: string,
+  title: string,
+  unitId: string,
+}
+
+type annotationState = {
+  selectedLesson: option<lesson>,
+  isPenOpen: bool,
+  notes: dict<string>,
+}
+
+let initialState = {
+  selectedLesson: None,
+  isPenOpen: false,
+  notes: Dict.make(),
+}
\ No newline at end of file
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/Hello.ast b/apps/web/lib/bs/src/modules/client/hooks/rescript/Hello.ast
new file mode 100644
index 0000000..72a181d
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/Hello.ast differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/Hello.cmi b/apps/web/lib/bs/src/modules/client/hooks/rescript/Hello.cmi
new file mode 100644
index 0000000..d48034a
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/Hello.cmi differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/Hello.cmj b/apps/web/lib/bs/src/modules/client/hooks/rescript/Hello.cmj
new file mode 100644
index 0000000..615482c
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/Hello.cmj differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/Hello.cmt b/apps/web/lib/bs/src/modules/client/hooks/rescript/Hello.cmt
new file mode 100644
index 0000000..ba73d6a
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/Hello.cmt differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/Hello.js b/apps/web/lib/bs/src/modules/client/hooks/rescript/Hello.js
new file mode 100644
index 0000000..03bfdb6
--- /dev/null
+++ b/apps/web/lib/bs/src/modules/client/hooks/rescript/Hello.js
@@ -0,0 +1,16 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as JsxRuntime from "react/jsx-runtime";
+
+function Hello(props) {
+  return JsxRuntime.jsx("div", {
+    children: "ReScript is working!"
+  });
+}
+
+let make = Hello;
+
+export {
+  make,
+}
+/* react/jsx-runtime Not a pure module */
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/Hello.res b/apps/web/lib/bs/src/modules/client/hooks/rescript/Hello.res
new file mode 100644
index 0000000..201d496
--- /dev/null
+++ b/apps/web/lib/bs/src/modules/client/hooks/rescript/Hello.res
@@ -0,0 +1,4 @@
+@react.component
+let make = () => {
+  <div> {React.string("ReScript is working!")} </div>
+}
\ No newline at end of file
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchCanvas.ast b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchCanvas.ast
new file mode 100644
index 0000000..0c35b4a
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchCanvas.ast differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchCanvas.cmi b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchCanvas.cmi
new file mode 100644
index 0000000..0900749
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchCanvas.cmi differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchCanvas.cmj b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchCanvas.cmj
new file mode 100644
index 0000000..1be3490
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchCanvas.cmj differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchCanvas.cmt b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchCanvas.cmt
new file mode 100644
index 0000000..b64bcee
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchCanvas.cmt differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchCanvas.js b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchCanvas.js
new file mode 100644
index 0000000..2665359
--- /dev/null
+++ b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchCanvas.js
@@ -0,0 +1,192 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as React from "react";
+import * as UseSketch from "./useSketch.js";
+import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
+import * as JsxRuntime from "react/jsx-runtime";
+import SketchToolbarJsx from "./SketchToolbar.jsx";
+
+let make = SketchToolbarJsx;
+
+let SketchToolbar = {
+  make: make
+};
+
+function SketchCanvas(props) {
+  let onClear = props.onClear;
+  let onSave = props.onSave;
+  let color = props.color;
+  let tool = props.tool;
+  let isActive = props.isActive;
+  let canvasRef = React.useRef(null);
+  let isDrawing = React.useRef(false);
+  let lastPoint = React.useRef(undefined);
+  React.useEffect(() => {
+    let el = canvasRef.current;
+    if (!(el == null)) {
+      let parent = el.parentElement;
+      el.width = parent.offsetWidth;
+      el.height = parent.offsetHeight;
+    }
+  }, [isActive]);
+  let getPos = (e, canvas) => {
+    let rect = canvas.getBoundingClientRect();
+    return {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    };
+  };
+  let startDraw = e => {
+    let el = canvasRef.current;
+    if (el == null) {
+      return;
+    }
+    isDrawing.current = true;
+    let pos = getPos(e, el);
+    lastPoint.current = pos;
+    if (tool === "Highlighter") {
+      let ctx = el.getContext("2d");
+      let hex = UseSketch.colorToHex(color);
+      let width = UseSketch.toolToWidth(tool, 2.0);
+      ctx.globalAlpha = 0.25;
+      ctx.globalCompositeOperation = "source-over";
+      ctx.strokeStyle = hex;
+      ctx.lineWidth = width;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      ctx.beginPath();
+      ctx.moveTo(pos.x, pos.y);
+      return;
+    }
+    if (tool !== "Text") {
+      return;
+    }
+    let text = el.ownerDocument.defaultView.prompt("Enter text:", "");
+    if (text == null) {
+      return;
+    }
+    let ctx$1 = el.getContext("2d");
+    let hex$1 = UseSketch.colorToHex(color);
+    ctx$1.globalAlpha = 1.0;
+    ctx$1.fillStyle = hex$1;
+    ctx$1.font = "bold 16px sans-serif";
+    ctx$1.fillText(text, pos.x, pos.y);
+  };
+  let draw = e => {
+    if (!(isDrawing.current && tool !== "Text")) {
+      return;
+    }
+    let el = canvasRef.current;
+    if (el == null) {
+      return;
+    }
+    let last = lastPoint.current;
+    if (last === undefined) {
+      return;
+    }
+    let ctx = el.getContext("2d");
+    let pos = getPos(e, el);
+    let hex = UseSketch.colorToHex(color);
+    let width = UseSketch.toolToWidth(tool, 2.0);
+    let exit = 0;
+    switch (tool) {
+      case "Highlighter" :
+        ctx.lineTo(pos.x, pos.y);
+        ctx.stroke();
+        break;
+      case "Pen" :
+      case "Text" :
+        exit = 1;
+        break;
+    }
+    if (exit === 1) {
+      ctx.globalAlpha = 1.0;
+      ctx.strokeStyle = hex;
+      ctx.lineWidth = width;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      ctx.beginPath();
+      ctx.moveTo(last.x, last.y);
+      ctx.quadraticCurveTo(last.x + (pos.x - last.x) / 2.0, last.y + (pos.y - last.y) / 2.0, pos.x, pos.y);
+      ctx.stroke();
+    }
+    lastPoint.current = pos;
+  };
+  let stopDraw = _e => {
+    if (tool === "Highlighter") {
+      let el = canvasRef.current;
+      if (!(el == null)) {
+        let ctx = el.getContext("2d");
+        ctx.stroke();
+        ctx.globalAlpha = 1.0;
+        ctx.globalCompositeOperation = "source-over";
+      }
+    }
+    isDrawing.current = false;
+    lastPoint.current = undefined;
+  };
+  let handleClear = () => {
+    let el = canvasRef.current;
+    if (el == null) {
+      return;
+    }
+    let ctx = el.getContext("2d");
+    ctx.clearRect(0, 0, el.width, el.height);
+    onClear();
+  };
+  let handleSave = () => {
+    let el = canvasRef.current;
+    if (el == null) {
+      return;
+    }
+    let dataUrl = el.toDataURL("image/png");
+    let link = document.createElement("a");
+    link.href = dataUrl;
+    link.download = "sketch.png";
+    link.click();
+    onSave();
+  };
+  if (isActive) {
+    return JsxRuntime.jsxs("div", {
+      children: [
+        JsxRuntime.jsx(make, {
+          state: {
+            isActive: isActive,
+            tool: tool,
+            color: color,
+            strokeWidth: 2.0
+          },
+          onSetTool: props.onSetTool,
+          onSetColor: props.onSetColor,
+          onClear: handleClear,
+          onSave: handleSave,
+          onClose: props.onClose
+        }),
+        JsxRuntime.jsx("canvas", {
+          ref: Primitive_option.some(canvasRef),
+          className: "w-full h-full cursor-crosshair",
+          height: "100%",
+          width: "100%",
+          onMouseDown: startDraw,
+          onMouseLeave: stopDraw,
+          onMouseMove: draw,
+          onMouseUp: stopDraw
+        })
+      ],
+      className: "absolute inset-0 z-10",
+      style: {
+        pointerEvents: isActive ? "all" : "none"
+      }
+    });
+  } else {
+    return null;
+  }
+}
+
+let make$1 = SketchCanvas;
+
+export {
+  SketchToolbar,
+  make$1 as make,
+}
+/* make Not a pure module */
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchCanvas.res b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchCanvas.res
new file mode 100644
index 0000000..37b7457
--- /dev/null
+++ b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchCanvas.res
@@ -0,0 +1,198 @@
+module SketchToolbar = {
+  @module("./SketchToolbar.jsx") @react.component
+  external make: (
+    ~state: UseSketch.sketchState,
+    ~onSetTool: UseSketch.tool => unit,
+    ~onSetColor: UseSketch.color => unit,
+    ~onClear: unit => unit,
+    ~onSave: unit => unit,
+    ~onClose: unit => unit,
+  ) => React.element = "default"
+}
+
+type point = {x: float, y: float}
+
+@val external document: {..} = "document"
+external asCanvas: Dom.element => {..} = "%identity"
+
+@react.component
+let make = (
+  ~isActive: bool,
+  ~tool: UseSketch.tool,
+  ~color: UseSketch.color,
+  ~onSave: unit => unit,
+  ~onClear: unit => unit,
+  ~onClose: unit => unit,
+  ~onSetTool: UseSketch.tool => unit,
+  ~onSetColor: UseSketch.color => unit,
+) => {
+  let canvasRef: React.ref<Nullable.t<Dom.element>> = React.useRef(Nullable.null)
+  let isDrawing = React.useRef(false)
+  let lastPoint = React.useRef(None)
+
+  React.useEffect1(() => {
+    switch canvasRef.current->Nullable.toOption {
+    | None => ()
+    | Some(el) =>
+      let canvas = asCanvas(el)
+      let parent = canvas["parentElement"]
+      canvas["width"] = parent["offsetWidth"]
+      canvas["height"] = parent["offsetHeight"]
+    }
+    None
+  }, [isActive])
+
+  let getPos = (e: JsxEvent.Mouse.t, canvas) => {
+    let rect = canvas["getBoundingClientRect"]()
+    {
+      x: Float.fromInt(JsxEvent.Mouse.clientX(e)) -. rect["left"],
+      y: Float.fromInt(JsxEvent.Mouse.clientY(e)) -. rect["top"],
+    }
+  }
+
+  let startDraw = (e: JsxEvent.Mouse.t) => {
+    switch canvasRef.current->Nullable.toOption {
+    | None => ()
+    | Some(el) =>
+      let canvas = asCanvas(el)
+      isDrawing.current = true
+      let pos = getPos(e, canvas)
+      lastPoint.current = Some(pos)
+      if tool === UseSketch.Highlighter {
+        let ctx = canvas["getContext"]("2d")
+        let hex = UseSketch.colorToHex(color)
+        let width = UseSketch.toolToWidth(tool, 2.0)
+        ctx["globalAlpha"] = 0.25
+        ctx["globalCompositeOperation"] = "source-over"
+        ctx["strokeStyle"] = hex
+        ctx["lineWidth"] = width
+        ctx["lineCap"] = "round"
+        ctx["lineJoin"] = "round"
+        let _ = ctx["beginPath"]()
+        let _ = ctx["moveTo"](pos.x, pos.y)
+      } else if tool === UseSketch.Text {
+        let text = canvas["ownerDocument"]["defaultView"]["prompt"]("Enter text:", "")
+        switch Nullable.toOption(text) {
+        | None => ()
+        | Some(t) =>
+          let ctx = canvas["getContext"]("2d")
+          let hex = UseSketch.colorToHex(color)
+          ctx["globalAlpha"] = 1.0
+          ctx["fillStyle"] = hex
+          ctx["font"] = "bold 16px sans-serif"
+          let _ = ctx["fillText"](t, pos.x, pos.y)
+        }
+      }
+    }
+  }
+
+  let draw = (e: JsxEvent.Mouse.t) => {
+    if isDrawing.current && tool !== UseSketch.Text {
+      switch canvasRef.current->Nullable.toOption {
+      | None => ()
+      | Some(el) =>
+        let canvas = asCanvas(el)
+        switch lastPoint.current {
+        | None => ()
+        | Some(last) =>
+          let ctx = canvas["getContext"]("2d")
+          let pos = getPos(e, canvas)
+          let hex = UseSketch.colorToHex(color)
+          let width = UseSketch.toolToWidth(tool, 2.0)
+          switch tool {
+          | UseSketch.Highlighter =>
+            let _ = ctx["lineTo"](pos.x, pos.y)
+            let _ = ctx["stroke"]()
+          | _ =>
+            ctx["globalAlpha"] = 1.0
+            ctx["strokeStyle"] = hex
+            ctx["lineWidth"] = width
+            ctx["lineCap"] = "round"
+            ctx["lineJoin"] = "round"
+            let _ = ctx["beginPath"]()
+            let _ = ctx["moveTo"](last.x, last.y)
+            let _ = ctx["quadraticCurveTo"](
+              last.x +. (pos.x -. last.x) /. 2.0,
+              last.y +. (pos.y -. last.y) /. 2.0,
+              pos.x,
+              pos.y,
+            )
+            let _ = ctx["stroke"]()
+          }
+          lastPoint.current = Some(pos)
+        }
+      }
+    }
+  }
+
+  let stopDraw = (_e: JsxEvent.Mouse.t) => {
+    if tool === UseSketch.Highlighter {
+      switch canvasRef.current->Nullable.toOption {
+      | None => ()
+      | Some(el) =>
+        let canvas = asCanvas(el)
+        let ctx = canvas["getContext"]("2d")
+        let _ = ctx["stroke"]()
+        ctx["globalAlpha"] = 1.0
+        ctx["globalCompositeOperation"] = "source-over"
+      }
+    }
+    isDrawing.current = false
+    lastPoint.current = None
+  }
+
+  let handleClear = () => {
+    switch canvasRef.current->Nullable.toOption {
+    | None => ()
+    | Some(el) =>
+      let canvas = asCanvas(el)
+      let ctx = canvas["getContext"]("2d")
+      let _ = ctx["clearRect"](0, 0, canvas["width"], canvas["height"])
+      onClear()
+    }
+  }
+
+  let handleSave = () => {
+    switch canvasRef.current->Nullable.toOption {
+    | None => ()
+    | Some(el) =>
+      let canvas = asCanvas(el)
+      let dataUrl = canvas["toDataURL"]("image/png")
+      let link = document["createElement"]("a")
+      link["href"] = dataUrl
+      link["download"] = "sketch.png"
+      let _ = link["click"]()
+      onSave()
+    }
+  }
+
+  if !isActive {
+    React.null
+  } else {
+    <div className="absolute inset-0 z-10" style={{pointerEvents: isActive ? "all" : "none"}}>
+      <SketchToolbar.make
+        state={{
+          UseSketch.isActive,
+          tool,
+          color,
+          strokeWidth: 2.0,
+        }}
+        onSetTool={onSetTool}
+        onSetColor={onSetColor}
+        onClear={handleClear}
+        onSave={handleSave}
+        onClose={onClose}
+      />
+      <canvas
+        ref={canvasRef->ReactDOM.Ref.domRef}
+        width="100%"
+        height="100%"
+        className="w-full h-full cursor-crosshair"
+        onMouseDown={startDraw}
+        onMouseMove={draw}
+        onMouseUp={stopDraw}
+        onMouseLeave={stopDraw}
+      />
+    </div>
+  }
+}
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchToolbar.ast b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchToolbar.ast
new file mode 100644
index 0000000..bddb198
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchToolbar.ast differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchToolbar.cmi b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchToolbar.cmi
new file mode 100644
index 0000000..08fbd39
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchToolbar.cmi differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchToolbar.cmj b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchToolbar.cmj
new file mode 100644
index 0000000..ddcaf15
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchToolbar.cmj differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchToolbar.cmt b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchToolbar.cmt
new file mode 100644
index 0000000..d3599a0
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchToolbar.cmt differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchToolbar.js b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchToolbar.js
new file mode 100644
index 0000000..1aa051d
--- /dev/null
+++ b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchToolbar.js
@@ -0,0 +1,14 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import SketchToolbarJsx from "./SketchToolbar.jsx";
+
+let make = SketchToolbarJsx;
+
+let SketchToolbar = {
+  make: make
+};
+
+export {
+  SketchToolbar,
+}
+/* make Not a pure module */
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchToolbar.res b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchToolbar.res
new file mode 100644
index 0000000..7394c20
--- /dev/null
+++ b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/SketchToolbar.res
@@ -0,0 +1,11 @@
+module SketchToolbar = {
+  @module("./SketchToolbar.jsx") @react.component
+  external make: (
+    ~state: UseSketch.sketchState,
+    ~onSetTool: UseSketch.tool => unit,
+    ~onSetColor: UseSketch.color => unit,
+    ~onClear: unit => unit,
+    ~onSave: unit => unit,
+    ~onClose: unit => unit,
+  ) => React.element = "default"
+}
\ No newline at end of file
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/useSketch.ast b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/useSketch.ast
new file mode 100644
index 0000000..da8675b
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/useSketch.ast differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/useSketch.cmi b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/useSketch.cmi
new file mode 100644
index 0000000..09e2048
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/useSketch.cmi differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/useSketch.cmj b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/useSketch.cmj
new file mode 100644
index 0000000..9ebcf08
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/useSketch.cmj differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/useSketch.cmt b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/useSketch.cmt
new file mode 100644
index 0000000..d29a878
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/useSketch.cmt differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/useSketch.js b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/useSketch.js
new file mode 100644
index 0000000..4f8672e
--- /dev/null
+++ b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/useSketch.js
@@ -0,0 +1,106 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as React from "react";
+
+let initialState = {
+  isActive: false,
+  tool: "Pen",
+  color: "Black",
+  strokeWidth: 2.0
+};
+
+function colorToHex(color) {
+  switch (color) {
+    case "Black" :
+      return "#000000";
+    case "Red" :
+      return "#ef4444";
+    case "Blue" :
+      return "#3b82f6";
+    case "Yellow" :
+      return "#eab308";
+  }
+}
+
+function toolToOpacity(tool) {
+  switch (tool) {
+    case "Highlighter" :
+      return 0.3;
+    case "Pen" :
+    case "Text" :
+      return 1.0;
+  }
+}
+
+function isHighlighter(tool) {
+  switch (tool) {
+    case "Highlighter" :
+      return true;
+    case "Pen" :
+    case "Text" :
+      return false;
+  }
+}
+
+function toolToWidth(tool, base) {
+  switch (tool) {
+    case "Highlighter" :
+      return base * 8.0;
+    case "Pen" :
+    case "Text" :
+      return base;
+  }
+}
+
+function use() {
+  let match = React.useState(() => initialState);
+  let setState = match[1];
+  let activate = () => setState(prev => ({
+    isActive: true,
+    tool: prev.tool,
+    color: prev.color,
+    strokeWidth: prev.strokeWidth
+  }));
+  let deactivate = () => setState(prev => ({
+    isActive: false,
+    tool: prev.tool,
+    color: prev.color,
+    strokeWidth: prev.strokeWidth
+  }));
+  let toggle = () => setState(prev => ({
+    isActive: !prev.isActive,
+    tool: prev.tool,
+    color: prev.color,
+    strokeWidth: prev.strokeWidth
+  }));
+  let setTool = tool => setState(prev => ({
+    isActive: prev.isActive,
+    tool: tool,
+    color: prev.color,
+    strokeWidth: prev.strokeWidth
+  }));
+  let setColor = color => setState(prev => ({
+    isActive: prev.isActive,
+    tool: prev.tool,
+    color: color,
+    strokeWidth: prev.strokeWidth
+  }));
+  return [
+    match[0],
+    activate,
+    deactivate,
+    toggle,
+    setTool,
+    setColor
+  ];
+}
+
+export {
+  initialState,
+  colorToHex,
+  toolToOpacity,
+  isHighlighter,
+  toolToWidth,
+  use,
+}
+/* react Not a pure module */
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/useSketch.res b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/useSketch.res
new file mode 100644
index 0000000..1e87469
--- /dev/null
+++ b/apps/web/lib/bs/src/modules/client/hooks/rescript/canvas/useSketch.res
@@ -0,0 +1,67 @@
+type tool =
+  | Pen
+  | Highlighter
+  | Text
+
+type color =
+  | Black
+  | Red
+  | Blue
+  | Yellow
+
+type sketchState = {
+  isActive: bool,
+  tool: tool,
+  color: color,
+  strokeWidth: float,
+}
+
+let initialState: sketchState = {
+  isActive: false,
+  tool: Pen,
+  color: Black,
+  strokeWidth: 2.0,
+}
+
+let colorToHex = (color: color) =>
+  switch color {
+  | Black => "#000000"
+  | Red => "#ef4444"
+  | Blue => "#3b82f6"
+  | Yellow => "#eab308"
+  }
+
+let toolToOpacity = (tool: tool) =>
+  switch tool {
+  | Highlighter => 0.3
+  | Pen | Text => 1.0
+  }
+
+let isHighlighter = (tool: tool) =>
+  switch tool {
+  | Highlighter => true
+  | Pen | Text => false
+  }
+
+let toolToWidth = (tool: tool, base: float) =>
+  switch tool {
+  | Highlighter => base *. 8.0
+  | Pen => base
+  | Text => base
+  }
+
+let use = () => {
+  let (state, setState) = React.useState(() => initialState)
+
+  let activate = () => setState(prev => {...prev, isActive: true})
+
+  let deactivate = () => setState(prev => {...prev, isActive: false})
+
+  let toggle = () => setState(prev => {...prev, isActive: !prev.isActive})
+
+  let setTool = (tool: tool) => setState(prev => {...prev, tool})
+
+  let setColor = (color: color) => setState(prev => {...prev, color})
+
+  (state, activate, deactivate, toggle, setTool, setColor)
+}
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/useAnnotation.ast b/apps/web/lib/bs/src/modules/client/hooks/rescript/useAnnotation.ast
new file mode 100644
index 0000000..d074bd1
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/useAnnotation.ast differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/useAnnotation.cmi b/apps/web/lib/bs/src/modules/client/hooks/rescript/useAnnotation.cmi
new file mode 100644
index 0000000..b958f4e
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/useAnnotation.cmi differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/useAnnotation.cmj b/apps/web/lib/bs/src/modules/client/hooks/rescript/useAnnotation.cmj
new file mode 100644
index 0000000..dbed5e6
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/useAnnotation.cmj differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/useAnnotation.cmt b/apps/web/lib/bs/src/modules/client/hooks/rescript/useAnnotation.cmt
new file mode 100644
index 0000000..5c0822b
Binary files /dev/null and b/apps/web/lib/bs/src/modules/client/hooks/rescript/useAnnotation.cmt differ
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/useAnnotation.js b/apps/web/lib/bs/src/modules/client/hooks/rescript/useAnnotation.js
new file mode 100644
index 0000000..4b57f53
--- /dev/null
+++ b/apps/web/lib/bs/src/modules/client/hooks/rescript/useAnnotation.js
@@ -0,0 +1,53 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as React from "react";
+import * as AnnotationTypes from "./AnnotationTypes.js";
+import * as AnnotationStorage from "./AnnotationStorage.js";
+
+function use(courseId) {
+  let match = React.useState(() => AnnotationTypes.initialState);
+  let setState = match[1];
+  let state = match[0];
+  let selectLesson = lesson => {
+    let savedNote = AnnotationStorage.loadNote(courseId, lesson.id);
+    let notes = {};
+    if (savedNote !== undefined) {
+      notes[lesson.id] = savedNote;
+    }
+    setState(param => ({
+      selectedLesson: lesson,
+      isPenOpen: true,
+      notes: notes
+    }));
+  };
+  let updateNote = (lessonId, note) => {
+    AnnotationStorage.saveNote(courseId, lessonId, note);
+    setState(prev => {
+      let notes = {};
+      notes[lessonId] = note;
+      return {
+        selectedLesson: prev.selectedLesson,
+        isPenOpen: prev.isPenOpen,
+        notes: notes
+      };
+    });
+  };
+  let closePen = () => setState(prev => ({
+    selectedLesson: undefined,
+    isPenOpen: false,
+    notes: prev.notes
+  }));
+  let getNote = lessonId => state.notes[lessonId];
+  return [
+    state,
+    selectLesson,
+    updateNote,
+    closePen,
+    getNote
+  ];
+}
+
+export {
+  use,
+}
+/* react Not a pure module */
diff --git a/apps/web/lib/bs/src/modules/client/hooks/rescript/useAnnotation.res b/apps/web/lib/bs/src/modules/client/hooks/rescript/useAnnotation.res
new file mode 100644
index 0000000..b555acc
--- /dev/null
+++ b/apps/web/lib/bs/src/modules/client/hooks/rescript/useAnnotation.res
@@ -0,0 +1,38 @@
+@val external window: {..} = "window"
+
+let use = (courseId: string) => {
+  let (state, setState) = React.useState(() => AnnotationTypes.initialState)
+
+  let selectLesson = (lesson: AnnotationTypes.lesson) => {
+    let savedNote = AnnotationStorage.loadNote(courseId, lesson.id)
+    let notes = Dict.make()
+    switch savedNote {
+    | Some(note) => Dict.set(notes, lesson.id, note)
+    | None => ()
+    }
+    setState(_ => {
+      selectedLesson: Some(lesson),
+      isPenOpen: true,
+      notes,
+    })
+  }
+
+  let updateNote = (lessonId: string, note: string) => {
+    AnnotationStorage.saveNote(courseId, lessonId, note)
+    setState(prev => {
+      let notes = Dict.make()
+      Dict.set(notes, lessonId, note)
+      {...prev, notes}
+    })
+  }
+
+  let closePen = () => {
+    setState(prev => {...prev, isPenOpen: false, selectedLesson: None})
+  }
+
+  let getNote = (lessonId: string) => {
+    Dict.get(state.notes, lessonId)
+  }
+
+  (state, selectLesson, updateNote, closePen, getNote)
+}
\ No newline at end of file
diff --git a/apps/web/lib/ocaml/AnnotationPanel.res b/apps/web/lib/ocaml/AnnotationPanel.res
new file mode 100644
index 0000000..6acb6d5
--- /dev/null
+++ b/apps/web/lib/ocaml/AnnotationPanel.res
@@ -0,0 +1,43 @@
+@react.component
+let make = (
+  ~lesson: AnnotationTypes.lesson,
+  ~note: option<string>,
+  ~onNoteChange: (string, string) => unit,
+  ~onClose: unit => unit,
+) => {
+  let noteValue = switch note {
+  | Some(n) => n
+  | None => ""
+  }
+
+  <div className="flex flex-col h-full">
+    <div className="flex items-center justify-between mb-4">
+      <div>
+        <p className="text-xs text-muted-foreground uppercase tracking-widest font-semibold">
+          {React.string("Annotation")}
+        </p>
+        <h2 className="text-lg font-bold mt-0.5">
+          {React.string(lesson.title)}
+        </h2>
+      </div>
+      <button
+        onClick={_ => onClose()}
+        className="text-muted-foreground hover:text-foreground transition-colors text-sm"
+      >
+        {React.string("✕ Close")}
+      </button>
+    </div>
+    <textarea
+      className="flex-1 w-full resize-none rounded-lg border bg-background p-4 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+      placeholder="Write your notes for this lesson..."
+      value={noteValue}
+      onChange={e => {
+        let value = ReactEvent.Form.target(e)["value"]
+        onNoteChange(lesson.id, value)
+      }}
+    />
+    <p className="text-xs text-muted-foreground mt-2">
+      {React.string("Auto-saved to your browser")}
+    </p>
+  </div>
+}
\ No newline at end of file
diff --git a/apps/web/lib/ocaml/AnnotationStorage.ast b/apps/web/lib/ocaml/AnnotationStorage.ast
new file mode 100644
index 0000000..ea6f70c
Binary files /dev/null and b/apps/web/lib/ocaml/AnnotationStorage.ast differ
diff --git a/apps/web/lib/ocaml/AnnotationStorage.cmi b/apps/web/lib/ocaml/AnnotationStorage.cmi
new file mode 100644
index 0000000..d5424a3
Binary files /dev/null and b/apps/web/lib/ocaml/AnnotationStorage.cmi differ
diff --git a/apps/web/lib/ocaml/AnnotationStorage.cmj b/apps/web/lib/ocaml/AnnotationStorage.cmj
new file mode 100644
index 0000000..19c9ebe
Binary files /dev/null and b/apps/web/lib/ocaml/AnnotationStorage.cmj differ
diff --git a/apps/web/lib/ocaml/AnnotationStorage.cmt b/apps/web/lib/ocaml/AnnotationStorage.cmt
new file mode 100644
index 0000000..fe6ca5b
Binary files /dev/null and b/apps/web/lib/ocaml/AnnotationStorage.cmt differ
diff --git a/apps/web/lib/ocaml/AnnotationStorage.res b/apps/web/lib/ocaml/AnnotationStorage.res
new file mode 100644
index 0000000..4763bac
--- /dev/null
+++ b/apps/web/lib/ocaml/AnnotationStorage.res
@@ -0,0 +1,20 @@
+@val external localStorage: {..} = "localStorage"
+
+let storageKey = (courseId: string, lessonId: string) =>
+  `annotation:${courseId}:${lessonId}`
+
+let saveNote = (courseId: string, lessonId: string, note: string) => {
+  let key = storageKey(courseId, lessonId)
+  localStorage["setItem"](key, note)
+}
+
+let loadNote = (courseId: string, lessonId: string) => {
+  let key = storageKey(courseId, lessonId)
+  let value: Nullable.t<string> = localStorage["getItem"](key)
+  Nullable.toOption(value)
+}
+
+let deleteNote = (courseId: string, lessonId: string) => {
+  let key = storageKey(courseId, lessonId)
+  localStorage["removeItem"](key)
+}
\ No newline at end of file
diff --git a/apps/web/lib/ocaml/AnnotationTypes.ast b/apps/web/lib/ocaml/AnnotationTypes.ast
new file mode 100644
index 0000000..0c1a30f
Binary files /dev/null and b/apps/web/lib/ocaml/AnnotationTypes.ast differ
diff --git a/apps/web/lib/ocaml/AnnotationTypes.cmi b/apps/web/lib/ocaml/AnnotationTypes.cmi
new file mode 100644
index 0000000..6aa711f
Binary files /dev/null and b/apps/web/lib/ocaml/AnnotationTypes.cmi differ
diff --git a/apps/web/lib/ocaml/AnnotationTypes.cmj b/apps/web/lib/ocaml/AnnotationTypes.cmj
new file mode 100644
index 0000000..bb77606
Binary files /dev/null and b/apps/web/lib/ocaml/AnnotationTypes.cmj differ
diff --git a/apps/web/lib/ocaml/AnnotationTypes.cmt b/apps/web/lib/ocaml/AnnotationTypes.cmt
new file mode 100644
index 0000000..dfc3ce2
Binary files /dev/null and b/apps/web/lib/ocaml/AnnotationTypes.cmt differ
diff --git a/apps/web/lib/ocaml/AnnotationTypes.res b/apps/web/lib/ocaml/AnnotationTypes.res
new file mode 100644
index 0000000..900f30b
--- /dev/null
+++ b/apps/web/lib/ocaml/AnnotationTypes.res
@@ -0,0 +1,17 @@
+type lesson = {
+  id: string,
+  title: string,
+  unitId: string,
+}
+
+type annotationState = {
+  selectedLesson: option<lesson>,
+  isPenOpen: bool,
+  notes: dict<string>,
+}
+
+let initialState = {
+  selectedLesson: None,
+  isPenOpen: false,
+  notes: Dict.make(),
+}
\ No newline at end of file
diff --git a/apps/web/lib/ocaml/Hello.res b/apps/web/lib/ocaml/Hello.res
new file mode 100644
index 0000000..201d496
--- /dev/null
+++ b/apps/web/lib/ocaml/Hello.res
@@ -0,0 +1,4 @@
+@react.component
+let make = () => {
+  <div> {React.string("ReScript is working!")} </div>
+}
\ No newline at end of file
diff --git a/apps/web/lib/ocaml/SketchCanvas.ast b/apps/web/lib/ocaml/SketchCanvas.ast
new file mode 100644
index 0000000..0c35b4a
Binary files /dev/null and b/apps/web/lib/ocaml/SketchCanvas.ast differ
diff --git a/apps/web/lib/ocaml/SketchCanvas.cmi b/apps/web/lib/ocaml/SketchCanvas.cmi
new file mode 100644
index 0000000..0900749
Binary files /dev/null and b/apps/web/lib/ocaml/SketchCanvas.cmi differ
diff --git a/apps/web/lib/ocaml/SketchCanvas.cmj b/apps/web/lib/ocaml/SketchCanvas.cmj
new file mode 100644
index 0000000..1be3490
Binary files /dev/null and b/apps/web/lib/ocaml/SketchCanvas.cmj differ
diff --git a/apps/web/lib/ocaml/SketchCanvas.cmt b/apps/web/lib/ocaml/SketchCanvas.cmt
new file mode 100644
index 0000000..b64bcee
Binary files /dev/null and b/apps/web/lib/ocaml/SketchCanvas.cmt differ
diff --git a/apps/web/lib/ocaml/SketchCanvas.res b/apps/web/lib/ocaml/SketchCanvas.res
new file mode 100644
index 0000000..37b7457
--- /dev/null
+++ b/apps/web/lib/ocaml/SketchCanvas.res
@@ -0,0 +1,198 @@
+module SketchToolbar = {
+  @module("./SketchToolbar.jsx") @react.component
+  external make: (
+    ~state: UseSketch.sketchState,
+    ~onSetTool: UseSketch.tool => unit,
+    ~onSetColor: UseSketch.color => unit,
+    ~onClear: unit => unit,
+    ~onSave: unit => unit,
+    ~onClose: unit => unit,
+  ) => React.element = "default"
+}
+
+type point = {x: float, y: float}
+
+@val external document: {..} = "document"
+external asCanvas: Dom.element => {..} = "%identity"
+
+@react.component
+let make = (
+  ~isActive: bool,
+  ~tool: UseSketch.tool,
+  ~color: UseSketch.color,
+  ~onSave: unit => unit,
+  ~onClear: unit => unit,
+  ~onClose: unit => unit,
+  ~onSetTool: UseSketch.tool => unit,
+  ~onSetColor: UseSketch.color => unit,
+) => {
+  let canvasRef: React.ref<Nullable.t<Dom.element>> = React.useRef(Nullable.null)
+  let isDrawing = React.useRef(false)
+  let lastPoint = React.useRef(None)
+
+  React.useEffect1(() => {
+    switch canvasRef.current->Nullable.toOption {
+    | None => ()
+    | Some(el) =>
+      let canvas = asCanvas(el)
+      let parent = canvas["parentElement"]
+      canvas["width"] = parent["offsetWidth"]
+      canvas["height"] = parent["offsetHeight"]
+    }
+    None
+  }, [isActive])
+
+  let getPos = (e: JsxEvent.Mouse.t, canvas) => {
+    let rect = canvas["getBoundingClientRect"]()
+    {
+      x: Float.fromInt(JsxEvent.Mouse.clientX(e)) -. rect["left"],
+      y: Float.fromInt(JsxEvent.Mouse.clientY(e)) -. rect["top"],
+    }
+  }
+
+  let startDraw = (e: JsxEvent.Mouse.t) => {
+    switch canvasRef.current->Nullable.toOption {
+    | None => ()
+    | Some(el) =>
+      let canvas = asCanvas(el)
+      isDrawing.current = true
+      let pos = getPos(e, canvas)
+      lastPoint.current = Some(pos)
+      if tool === UseSketch.Highlighter {
+        let ctx = canvas["getContext"]("2d")
+        let hex = UseSketch.colorToHex(color)
+        let width = UseSketch.toolToWidth(tool, 2.0)
+        ctx["globalAlpha"] = 0.25
+        ctx["globalCompositeOperation"] = "source-over"
+        ctx["strokeStyle"] = hex
+        ctx["lineWidth"] = width
+        ctx["lineCap"] = "round"
+        ctx["lineJoin"] = "round"
+        let _ = ctx["beginPath"]()
+        let _ = ctx["moveTo"](pos.x, pos.y)
+      } else if tool === UseSketch.Text {
+        let text = canvas["ownerDocument"]["defaultView"]["prompt"]("Enter text:", "")
+        switch Nullable.toOption(text) {
+        | None => ()
+        | Some(t) =>
+          let ctx = canvas["getContext"]("2d")
+          let hex = UseSketch.colorToHex(color)
+          ctx["globalAlpha"] = 1.0
+          ctx["fillStyle"] = hex
+          ctx["font"] = "bold 16px sans-serif"
+          let _ = ctx["fillText"](t, pos.x, pos.y)
+        }
+      }
+    }
+  }
+
+  let draw = (e: JsxEvent.Mouse.t) => {
+    if isDrawing.current && tool !== UseSketch.Text {
+      switch canvasRef.current->Nullable.toOption {
+      | None => ()
+      | Some(el) =>
+        let canvas = asCanvas(el)
+        switch lastPoint.current {
+        | None => ()
+        | Some(last) =>
+          let ctx = canvas["getContext"]("2d")
+          let pos = getPos(e, canvas)
+          let hex = UseSketch.colorToHex(color)
+          let width = UseSketch.toolToWidth(tool, 2.0)
+          switch tool {
+          | UseSketch.Highlighter =>
+            let _ = ctx["lineTo"](pos.x, pos.y)
+            let _ = ctx["stroke"]()
+          | _ =>
+            ctx["globalAlpha"] = 1.0
+            ctx["strokeStyle"] = hex
+            ctx["lineWidth"] = width
+            ctx["lineCap"] = "round"
+            ctx["lineJoin"] = "round"
+            let _ = ctx["beginPath"]()
+            let _ = ctx["moveTo"](last.x, last.y)
+            let _ = ctx["quadraticCurveTo"](
+              last.x +. (pos.x -. last.x) /. 2.0,
+              last.y +. (pos.y -. last.y) /. 2.0,
+              pos.x,
+              pos.y,
+            )
+            let _ = ctx["stroke"]()
+          }
+          lastPoint.current = Some(pos)
+        }
+      }
+    }
+  }
+
+  let stopDraw = (_e: JsxEvent.Mouse.t) => {
+    if tool === UseSketch.Highlighter {
+      switch canvasRef.current->Nullable.toOption {
+      | None => ()
+      | Some(el) =>
+        let canvas = asCanvas(el)
+        let ctx = canvas["getContext"]("2d")
+        let _ = ctx["stroke"]()
+        ctx["globalAlpha"] = 1.0
+        ctx["globalCompositeOperation"] = "source-over"
+      }
+    }
+    isDrawing.current = false
+    lastPoint.current = None
+  }
+
+  let handleClear = () => {
+    switch canvasRef.current->Nullable.toOption {
+    | None => ()
+    | Some(el) =>
+      let canvas = asCanvas(el)
+      let ctx = canvas["getContext"]("2d")
+      let _ = ctx["clearRect"](0, 0, canvas["width"], canvas["height"])
+      onClear()
+    }
+  }
+
+  let handleSave = () => {
+    switch canvasRef.current->Nullable.toOption {
+    | None => ()
+    | Some(el) =>
+      let canvas = asCanvas(el)
+      let dataUrl = canvas["toDataURL"]("image/png")
+      let link = document["createElement"]("a")
+      link["href"] = dataUrl
+      link["download"] = "sketch.png"
+      let _ = link["click"]()
+      onSave()
+    }
+  }
+
+  if !isActive {
+    React.null
+  } else {
+    <div className="absolute inset-0 z-10" style={{pointerEvents: isActive ? "all" : "none"}}>
+      <SketchToolbar.make
+        state={{
+          UseSketch.isActive,
+          tool,
+          color,
+          strokeWidth: 2.0,
+        }}
+        onSetTool={onSetTool}
+        onSetColor={onSetColor}
+        onClear={handleClear}
+        onSave={handleSave}
+        onClose={onClose}
+      />
+      <canvas
+        ref={canvasRef->ReactDOM.Ref.domRef}
+        width="100%"
+        height="100%"
+        className="w-full h-full cursor-crosshair"
+        onMouseDown={startDraw}
+        onMouseMove={draw}
+        onMouseUp={stopDraw}
+        onMouseLeave={stopDraw}
+      />
+    </div>
+  }
+}
diff --git a/apps/web/lib/ocaml/SketchToolbar.ast b/apps/web/lib/ocaml/SketchToolbar.ast
new file mode 100644
index 0000000..bddb198
Binary files /dev/null and b/apps/web/lib/ocaml/SketchToolbar.ast differ
diff --git a/apps/web/lib/ocaml/SketchToolbar.cmi b/apps/web/lib/ocaml/SketchToolbar.cmi
new file mode 100644
index 0000000..08fbd39
Binary files /dev/null and b/apps/web/lib/ocaml/SketchToolbar.cmi differ
diff --git a/apps/web/lib/ocaml/SketchToolbar.cmj b/apps/web/lib/ocaml/SketchToolbar.cmj
new file mode 100644
index 0000000..ddcaf15
Binary files /dev/null and b/apps/web/lib/ocaml/SketchToolbar.cmj differ
diff --git a/apps/web/lib/ocaml/SketchToolbar.cmt b/apps/web/lib/ocaml/SketchToolbar.cmt
new file mode 100644
index 0000000..d3599a0
Binary files /dev/null and b/apps/web/lib/ocaml/SketchToolbar.cmt differ
diff --git a/apps/web/lib/ocaml/SketchToolbar.res b/apps/web/lib/ocaml/SketchToolbar.res
new file mode 100644
index 0000000..7394c20
--- /dev/null
+++ b/apps/web/lib/ocaml/SketchToolbar.res
@@ -0,0 +1,11 @@
+module SketchToolbar = {
+  @module("./SketchToolbar.jsx") @react.component
+  external make: (
+    ~state: UseSketch.sketchState,
+    ~onSetTool: UseSketch.tool => unit,
+    ~onSetColor: UseSketch.color => unit,
+    ~onClear: unit => unit,
+    ~onSave: unit => unit,
+    ~onClose: unit => unit,
+  ) => React.element = "default"
+}
\ No newline at end of file
diff --git a/apps/web/lib/ocaml/useAnnotation.res b/apps/web/lib/ocaml/useAnnotation.res
new file mode 100644
index 0000000..b555acc
--- /dev/null
+++ b/apps/web/lib/ocaml/useAnnotation.res
@@ -0,0 +1,38 @@
+@val external window: {..} = "window"
+
+let use = (courseId: string) => {
+  let (state, setState) = React.useState(() => AnnotationTypes.initialState)
+
+  let selectLesson = (lesson: AnnotationTypes.lesson) => {
+    let savedNote = AnnotationStorage.loadNote(courseId, lesson.id)
+    let notes = Dict.make()
+    switch savedNote {
+    | Some(note) => Dict.set(notes, lesson.id, note)
+    | None => ()
+    }
+    setState(_ => {
+      selectedLesson: Some(lesson),
+      isPenOpen: true,
+      notes,
+    })
+  }
+
+  let updateNote = (lessonId: string, note: string) => {
+    AnnotationStorage.saveNote(courseId, lessonId, note)
+    setState(prev => {
+      let notes = Dict.make()
+      Dict.set(notes, lessonId, note)
+      {...prev, notes}
+    })
+  }
+
+  let closePen = () => {
+    setState(prev => {...prev, isPenOpen: false, selectedLesson: None})
+  }
+
+  let getNote = (lessonId: string) => {
+    Dict.get(state.notes, lessonId)
+  }
+
+  (state, selectLesson, updateNote, closePen, getNote)
+}
\ No newline at end of file
diff --git a/apps/web/lib/ocaml/useSketch.ast b/apps/web/lib/ocaml/useSketch.ast
new file mode 100644
index 0000000..da8675b
Binary files /dev/null and b/apps/web/lib/ocaml/useSketch.ast differ
diff --git a/apps/web/lib/ocaml/useSketch.cmi b/apps/web/lib/ocaml/useSketch.cmi
new file mode 100644
index 0000000..09e2048
Binary files /dev/null and b/apps/web/lib/ocaml/useSketch.cmi differ
diff --git a/apps/web/lib/ocaml/useSketch.cmj b/apps/web/lib/ocaml/useSketch.cmj
new file mode 100644
index 0000000..9ebcf08
Binary files /dev/null and b/apps/web/lib/ocaml/useSketch.cmj differ
diff --git a/apps/web/lib/ocaml/useSketch.cmt b/apps/web/lib/ocaml/useSketch.cmt
new file mode 100644
index 0000000..d29a878
Binary files /dev/null and b/apps/web/lib/ocaml/useSketch.cmt differ
diff --git a/apps/web/lib/ocaml/useSketch.res b/apps/web/lib/ocaml/useSketch.res
new file mode 100644
index 0000000..1e87469
--- /dev/null
+++ b/apps/web/lib/ocaml/useSketch.res
@@ -0,0 +1,67 @@
+type tool =
+  | Pen
+  | Highlighter
+  | Text
+
+type color =
+  | Black
+  | Red
+  | Blue
+  | Yellow
+
+type sketchState = {
+  isActive: bool,
+  tool: tool,
+  color: color,
+  strokeWidth: float,
+}
+
+let initialState: sketchState = {
+  isActive: false,
+  tool: Pen,
+  color: Black,
+  strokeWidth: 2.0,
+}
+
+let colorToHex = (color: color) =>
+  switch color {
+  | Black => "#000000"
+  | Red => "#ef4444"
+  | Blue => "#3b82f6"
+  | Yellow => "#eab308"
+  }
+
+let toolToOpacity = (tool: tool) =>
+  switch tool {
+  | Highlighter => 0.3
+  | Pen | Text => 1.0
+  }
+
+let isHighlighter = (tool: tool) =>
+  switch tool {
+  | Highlighter => true
+  | Pen | Text => false
+  }
+
+let toolToWidth = (tool: tool, base: float) =>
+  switch tool {
+  | Highlighter => base *. 8.0
+  | Pen => base
+  | Text => base
+  }
+
+let use = () => {
+  let (state, setState) = React.useState(() => initialState)
+
+  let activate = () => setState(prev => {...prev, isActive: true})
+
+  let deactivate = () => setState(prev => {...prev, isActive: false})
+
+  let toggle = () => setState(prev => {...prev, isActive: !prev.isActive})
+
+  let setTool = (tool: tool) => setState(prev => {...prev, tool})
+
+  let setColor = (color: color) => setState(prev => {...prev, color})
+
+  (state, activate, deactivate, toggle, setTool, setColor)
+}
diff --git a/apps/web/lib/watch.lock b/apps/web/lib/watch.lock
new file mode 100644
index 0000000..a8eedbf
--- /dev/null
+++ b/apps/web/lib/watch.lock
@@ -0,0 +1 @@
+967186
\ No newline at end of file
diff --git a/apps/web/nginx.conf b/apps/web/nginx.conf
new file mode 100644
index 0000000..9ee4493
--- /dev/null
+++ b/apps/web/nginx.conf
@@ -0,0 +1,23 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # SPA fallback — all unknown paths go to index.html
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Cache hashed assets aggressively
+    location ~* \.(js|css|woff2?|ttf|svg|ico|png|jpg|jpeg|webp|gif)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # No caching for index.html so users always get the latest shell
+    location = /index.html {
+        add_header Cache-Control "no-cache, no-store, must-revalidate";
+    }
+}
diff --git a/apps/web/package.json b/apps/web/package.json
new file mode 100644
index 0000000..eaad350
--- /dev/null
+++ b/apps/web/package.json
@@ -0,0 +1,70 @@
+{
+  "name": "web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.4.1",
+    "@fontsource-variable/geist": "^5.2.8",
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@tailwindcss/vite": "^4.2.4",
+    "@tanstack/react-table": "^8.21.3",
+    "@tauri-apps/api": "^2.11.0",
+    "axios": "^1.16.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.38.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^1.14.0",
+    "nanoid": "^5.1.11",
+    "next-themes": "^0.4.6",
+    "pdfjs-dist": "^6.0.227",
+    "qrcode.react": "^4.2.0",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.5",
+    "react-day-picker": "^9.14.0",
+    "react-dom": "^19.2.5",
+    "react-easy-crop": "^6.0.2",
+    "react-helmet-async": "^3.0.0",
+    "react-hook-form": "^7.75.0",
+    "react-icons": "^5.6.0",
+    "react-markdown": "^10.1.0",
+    "react-phone-number-input": "^3.4.17",
+    "react-photo-view": "^1.2.7",
+    "react-resizable-panels": "^4.11.0",
+    "react-router-dom": "^7.14.2",
+    "recharts": "3.8.0",
+    "remark-gfm": "^4.0.1",
+    "shadcn": "^4.6.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2",
+    "xlsx-js-style": "^1.2.0",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "autoprefixer": "^10.5.0",
+    "eslint": "^10.2.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.5.0",
+    "postcss": "^8.5.13",
+    "tailwindcss": "^4.2.4",
+    "vite": "^8.0.10"
+  }
+}
\ No newline at end of file
diff --git a/apps/web/public/PHILPRO-README.png b/apps/web/public/PHILPRO-README.png
new file mode 100644
index 0000000..e90239b
Binary files /dev/null and b/apps/web/public/PHILPRO-README.png differ
diff --git a/apps/web/public/archive.png b/apps/web/public/archive.png
new file mode 100644
index 0000000..0f4dcec
Binary files /dev/null and b/apps/web/public/archive.png differ
diff --git a/apps/web/public/badges/early-access-badge-percent-flaticon.svg b/apps/web/public/badges/early-access-badge-percent-flaticon.svg
new file mode 100644
index 0000000..5746455
--- /dev/null
+++ b/apps/web/public/badges/early-access-badge-percent-flaticon.svg
@@ -0,0 +1 @@
+<svg width="24" xmlns="http://www.w3.org/2000/svg" height="24" id="screenshot-47f7117a-c919-8034-8008-1e04fe684930" viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-47f7117a-c919-8034-8008-1e04fe684930" width="512" height="512" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-47f7117a-c919-8034-8008-1e04fe6909e4" style="display: none;"><g class="fills" id="fills-47f7117a-c919-8034-8008-1e04fe6909e4"><rect width="24" height="24" x="0" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: none;" ry="0" fill="none" rx="0" y="0"/></g></g><g id="shape-47f7117a-c919-8034-8008-1e04fe6a2f4e"><defs><linearGradient id="fill-color-gradient-render-6-0" x1="0.49559909221913717" y1="0.29963732228022955" x2="0.49559909221913717" y2="1.693574264042768" gradientTransform=""><stop offset="0" stop-color="#0ac588" stop-opacity="1"/><stop offset="1" stop-color="#3658bd" stop-opacity="0.5"/></linearGradient><pattern patternUnits="userSpaceOnUse" x="0.020120959611631406" y="0.019498997214896008" width="23.97987904038837" height="23.96200175500084" patternTransform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" id="fill-0-render-6"><g><rect width="23.97987904038837" height="23.96200175500084" style="fill: url(&quot;#fill-color-gradient-render-6-0&quot;);"/></g></pattern></defs><g class="fills" id="fills-47f7117a-c919-8034-8008-1e04fe6a2f4e"><path d="M24,12C24,10.373992919921875,23.2860107421875,8.839996337890625,22.074951171875,7.876007080078125C22.2149658203125,6.253997802734375,21.635009765625,4.6649932861328125,20.4849853515625,3.514007568359375C19.3349609375,2.3650054931640625,17.75,1.7830047607421875,16.2080078125,1.9589996337890625C14.1939697265625,-0.5970001220703125,9.843017578125,-0.6450042724609375,7.8759765625,1.9239959716796875C4.6429443359375,1.5399932861328125,1.5340576171875,4.5839996337890625,1.9599609375,7.7919921875C-0.595947265625,9.805999755859375,-0.64501953125,14.156997680664062,1.925048828125,16.125C1.7850341796875,17.746994018554688,2.364990234375,19.33599853515625,3.5150146484375,20.48699951171875C4.6650390625,21.636001586914062,6.251953125,22.218002319335938,7.7919921875,22.0419921875C9.8060302734375,24.597991943359375,14.156982421875,24.64599609375,16.1240234375,22.076995849609375C17.7440185546875,22.21600341796875,19.333984375,21.63800048828125,20.4849853515625,20.48699951171875C21.634033203125,19.337005615234375,22.2139892578125,17.746994018554688,22.0400390625,16.209991455078125C23.2860107421875,15.162002563476562,24,13.628005981445312,24,12.001998901367188ZM8,9C8.0059814453125,7.6920013427734375,9.9940185546875,7.6920013427734375,10,9C9.9940185546875,10.307998657226562,8.0059814453125,10.307998657226562,8,9ZM10.83203125,15.55499267578125C10.5240478515625,16.01800537109375,9.8990478515625,16.136001586914062,9.4449462890625,15.832000732421875C8.9849853515625,15.5260009765625,8.8609619140625,14.904998779296875,9.16796875,14.44500732421875L13.16796875,8.44500732421875C13.4739990234375,7.985992431640625,14.093994140625,7.8600006103515625,14.5550537109375,8.167999267578125C15.0150146484375,8.4739990234375,15.1390380859375,9.095001220703125,14.83203125,9.55499267578125L10.83203125,15.55499267578125ZM15,16C13.6920166015625,15.994003295898438,13.6920166015625,14.005996704101562,15,14C16.3079833984375,14.005996704101562,16.3079833984375,15.994003295898438,15,16Z" fill="url(#fill-0-render-6)"/></g></g></g></svg>
\ No newline at end of file
diff --git a/apps/web/public/badges/exclusive-award-flaticon.svg b/apps/web/public/badges/exclusive-award-flaticon.svg
new file mode 100644
index 0000000..ebe8b10
--- /dev/null
+++ b/apps/web/public/badges/exclusive-award-flaticon.svg
@@ -0,0 +1 @@
+<svg width="24.001" xmlns="http://www.w3.org/2000/svg" height="24" id="screenshot-47f7117a-c919-8034-8008-1e04fe46dfc3" viewBox="0 0 24.001 24" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-47f7117a-c919-8034-8008-1e04fe46dfc3" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-47f7117a-c919-8034-8008-1e04fe47a963" style="display: none;"><g class="fills" id="fills-47f7117a-c919-8034-8008-1e04fe47a963"><rect width="24" height="24" x="0" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: none;" ry="0" fill="none" rx="0" y="0"/></g></g><g id="shape-47f7117a-c919-8034-8008-1e04fe49865a"><defs><linearGradient id="fill-color-gradient-render-9-0" x1="0.523422633680369" y1="-0.16606702333909987" x2="0.49963287348574265" y2="1.4159779370305472" gradientTransform=""><stop offset="0.16" stop-color="#ff7f00" stop-opacity="1"/><stop offset="1" stop-color="#833707" stop-opacity="0.5"/></linearGradient><pattern patternUnits="userSpaceOnUse" x="0.00022758251179766376" y="0.0002499949187040329" width="24.000545050821756" height="24.000107635613887" patternTransform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" id="fill-0-render-9"><g><rect width="24.000545050821756" height="24.000107635613887" style="fill: url(&quot;#fill-color-gradient-render-9-0&quot;);"/></g></pattern></defs><g class="fills" id="fills-47f7117a-c919-8034-8008-1e04fe49865a"><path d="M14,9.5C14,10.602996826171875,13.10302734375,11.5,12,11.5C10.89697265625,11.5,10,10.602996826171875,10,9.5C10,8.397003173828125,10.89697265625,7.5,12,7.5C13.10302734375,7.5,14,8.397003173828125,14,9.5ZM21.16796875,8.216995239257812C20.928955078125,7.7859954833984375,20.6109619140625,7.45599365234375,20.25,7.2220001220703125C19.60595703125,6.805999755859375,19.262939453125,6.0410003662109375,19.4329833984375,5.29400634765625C19.530029296875,4.8650054931640625,19.5240478515625,4.397003173828125,19.385009765625,3.912994384765625C19.1390380859375,3.0540008544921875,18.43896484375,2.35400390625,17.5799560546875,2.108001708984375C17.095947265625,1.968994140625,16.6280517578125,1.9629974365234375,16.199951171875,2.05999755859375C15.4520263671875,2.2299957275390625,14.68701171875,1.88800048828125,14.27099609375,1.2429962158203125C14.0379638671875,0.8820037841796875,13.70703125,0.563995361328125,13.2769775390625,0.3249969482421875C12.4949951171875,-0.108001708984375,11.5059814453125,-0.108001708984375,10.7239990234375,0.3249969482421875C10.29296875,0.563995361328125,9.9630126953125,0.8820037841796875,9.72998046875,1.2429962158203125C9.31396484375,1.886993408203125,8.5489501953125,2.2299957275390625,7.801025390625,2.05999755859375C7.373046875,1.9629974365234375,6.905029296875,1.968994140625,6.4210205078125,2.108001708984375C5.56201171875,2.35400390625,4.862060546875,3.0540008544921875,4.615966796875,3.912994384765625C4.47705078125,4.397003173828125,4.470947265625,4.865997314453125,4.5679931640625,5.29400634765625C4.738037109375,6.0419921875,4.39501953125,6.8070068359375,3.7509765625,7.2220001220703125C3.3890380859375,7.4550018310546875,3.072021484375,7.7859954833984375,2.8330078125,8.216995239257812C2.614013671875,8.610992431640625,2.508056640625,9.059005737304688,2.510009765625,9.505996704101562C2.508056640625,9.9530029296875,2.614990234375,10.399993896484375,2.8330078125,10.794998168945312C3.072021484375,11.225997924804688,3.3900146484375,11.555999755859375,3.7509765625,11.789993286132812C4.39501953125,12.20599365234375,4.738037109375,12.970993041992188,4.5679931640625,13.718002319335938C4.470947265625,14.147003173828125,4.47705078125,14.615005493164062,4.615966796875,15.100006103515625C4.862060546875,15.958999633789062,5.56201171875,16.65899658203125,6.4210205078125,16.904998779296875C6.905029296875,17.04400634765625,7.373046875,17.050003051757812,7.801025390625,16.9530029296875C8.5489501953125,16.783004760742188,9.31396484375,17.125,9.72998046875,17.770004272460938C9.9630126953125,18.130996704101562,10.29296875,18.449005126953125,10.7239990234375,18.688003540039062C11.5059814453125,19.121002197265625,12.4959716796875,19.121002197265625,13.2769775390625,18.688003540039062C13.7080078125,18.449005126953125,14.0379638671875,18.130996704101562,14.27099609375,17.770004272460938C14.68701171875,17.126007080078125,15.4520263671875,16.783004760742188,16.199951171875,16.9530029296875C16.6280517578125,17.050003051757812,17.095947265625,17.04400634765625,17.5799560546875,16.904998779296875C18.43896484375,16.65899658203125,19.1390380859375,15.958999633789062,19.385009765625,15.100006103515625C19.5240478515625,14.615997314453125,19.530029296875,14.147003173828125,19.4329833984375,13.718002319335938C19.262939453125,12.970001220703125,19.60595703125,12.205001831054688,20.25,11.789993286132812C20.612060546875,11.5570068359375,20.928955078125,11.225997924804688,21.16796875,10.794998168945312C21.386962890625,10.4010009765625,21.4930419921875,9.9530029296875,21.490966796875,9.505996704101562C21.4930419921875,9.059005737304688,21.385986328125,8.61199951171875,21.16796875,8.216995239257812ZM11.989013671875,13.501998901367188C9.782958984375,13.501998901367188,7.989013671875,11.7080078125,7.989013671875,9.501998901367188C7.989013671875,7.2960052490234375,9.782958984375,5.5019989013671875,11.989013671875,5.5019989013671875C14.1949462890625,5.5019989013671875,15.989013671875,7.2960052490234375,15.989013671875,9.501998901367188C15.989013671875,11.7080078125,14.1949462890625,13.501998901367188,11.989013671875,13.501998901367188ZM8.1009521484375,18.9320068359375C7.375,19.074005126953125,6.60498046875,19.037994384765625,5.8699951171875,18.826995849609375C4.4439697265625,18.41900634765625,3.2939453125,17.320999145507812,2.7939453125,15.932998657226562L0.488037109375,18.156005859375C-0.4840087890625,19.093994140625,0.0830078125,20.740005493164062,1.427001953125,20.878997802734375L3.1920166015625,21.061004638671875L3.4100341796875,22.628997802734375C3.5889892578125,23.919998168945312,5.1610107421875,24.457000732421875,6.093017578125,23.546005249023438L9.4940185546875,20.25C8.9410400390625,19.895004272460938,8.4610595703125,19.46600341796875,8.1009521484375,18.9320068359375ZM14.5069580078125,20.25L17.907958984375,23.546005249023438C18.8399658203125,24.457000732421875,20.4119873046875,23.919998168945312,20.5909423828125,22.628997802734375L20.8089599609375,21.061004638671875L22.573974609375,20.878997802734375C23.91796875,20.740005493164062,24.4849853515625,19.093994140625,23.512939453125,18.156005859375L21.20703125,15.932998657226562C20.70703125,17.320999145507812,19.5570068359375,18.41900634765625,18.1309814453125,18.826995849609375C17.39599609375,19.037994384765625,16.6259765625,19.074005126953125,15.9000244140625,18.9320068359375C15.5400390625,19.46600341796875,15.06005859375,19.895004272460938,14.5069580078125,20.25Z" fill="url(#fill-0-render-9)"/></g></g></g></svg>
\ No newline at end of file
diff --git a/apps/web/public/badges/free-access-badge-leaf-flaticon.svg b/apps/web/public/badges/free-access-badge-leaf-flaticon.svg
new file mode 100644
index 0000000..b02565d
--- /dev/null
+++ b/apps/web/public/badges/free-access-badge-leaf-flaticon.svg
@@ -0,0 +1 @@
+<svg width="24" xmlns="http://www.w3.org/2000/svg" height="24" id="screenshot-47f7117a-c919-8034-8008-1e04fdf8b719" viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-47f7117a-c919-8034-8008-1e04fdf8b719" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-47f7117a-c919-8034-8008-1e04fdfa136f" style="display: none;"><g class="fills" id="fills-47f7117a-c919-8034-8008-1e04fdfa136f"><rect width="24" height="24" x="0" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: none;" ry="0" fill="none" rx="0" y="0"/></g></g><g id="shape-47f7117a-c919-8034-8008-1e04fdfc23d0"><g class="fills" id="fills-47f7117a-c919-8034-8008-1e04fdfc23d0"><path d="M15,12C15,13.302001953125,14.1610107421875,14.402008056640625,13,14.815994262695312L13,11C13,10.447998046875,12.552001953125,10,12,10C11.447998046875,10,11,10.447998046875,11,11L11,14.815994262695312C9.8389892578125,14.402008056640625,9,13.302001953125,9,12C9,10.3699951171875,10.6729736328125,8.126007080078125,11.8609619140625,7.0540008544921875C11.9010009765625,7.01800537109375,11.9510498046875,7,12,7C12.050048828125,7,12.0989990234375,7.01800537109375,12.1390380859375,7.0529937744140625C13.3270263671875,8.126007080078125,15,10.369003295898438,15,12ZM22.041015625,16.2080078125C22.2149658203125,17.7449951171875,21.635986328125,19.334991455078125,20.4859619140625,20.485000610351562C19.3360595703125,21.634994506835938,17.7449951171875,22.212997436523438,16.1240234375,22.074996948242188C15.1610107421875,23.285003662109375,13.626953125,24,12,24C10.373046875,24,8.8399658203125,23.285995483398438,7.7919921875,22.041000366210938C6.260986328125,22.220001220703125,4.666015625,21.636001586914062,3.5150146484375,20.485992431640625C2.364013671875,19.33599853515625,1.7860107421875,17.746002197265625,1.925048828125,16.123992919921875C0.7149658203125,15.160995483398438,0,13.626998901367188,0,12C0,10.373001098632812,0.7139892578125,8.839996337890625,1.958984375,7.7919921875C1.7850341796875,6.2550048828125,2.364013671875,4.6649932861328125,3.5140380859375,3.5149993896484375C4.6629638671875,2.3650054931640625,6.251953125,1.7819976806640625,7.8759765625,1.9250030517578125C8.8389892578125,0.714996337890625,10.373046875,0,12,0C13.626953125,0,15.1600341796875,0.7140045166015625,16.2080078125,1.9589996337890625C17.7430419921875,1.787994384765625,19.333984375,2.3639984130859375,20.4849853515625,3.514007568359375C21.635009765625,4.66400146484375,22.2139892578125,6.253997802734375,22.074951171875,7.876007080078125C23.2850341796875,8.839004516601562,24,10.373001098632812,24,12C24,13.626998901367188,23.2860107421875,15.160003662109375,22.041015625,16.2080078125ZM17,12C17,9.427001953125,14.697021484375,6.667999267578125,13.47802734375,5.5679931640625C12.635009765625,4.8079986572265625,11.364013671875,4.8070068359375,10.52099609375,5.5679931640625C9.302978515625,6.6669921875,7,9.425994873046875,7,11.998992919921875C7,14.412994384765625,8.720947265625,16.432998657226562,11,16.897994995117188L11,17.998992919921875C11,18.550994873046875,11.447998046875,18.998992919921875,12,18.998992919921875C12.552001953125,18.998992919921875,13,18.550994873046875,13,17.998992919921875L13,16.897994995117188C15.279052734375,16.432998657226562,17,14.41400146484375,17,11.998992919921875Z" style="fill: rgb(136, 184, 48); fill-opacity: 1;"/></g></g></g></svg>
\ No newline at end of file
diff --git a/apps/web/public/badges/philpro-1.png b/apps/web/public/badges/philpro-1.png
new file mode 100644
index 0000000..6aa6514
Binary files /dev/null and b/apps/web/public/badges/philpro-1.png differ
diff --git a/apps/web/public/badges/philpro-2.png b/apps/web/public/badges/philpro-2.png
new file mode 100644
index 0000000..387582a
Binary files /dev/null and b/apps/web/public/badges/philpro-2.png differ
diff --git a/apps/web/public/badges/philpro-3.png b/apps/web/public/badges/philpro-3.png
new file mode 100644
index 0000000..2390c74
Binary files /dev/null and b/apps/web/public/badges/philpro-3.png differ
diff --git a/apps/web/public/badges/philpro-4.png b/apps/web/public/badges/philpro-4.png
new file mode 100644
index 0000000..04e46f3
Binary files /dev/null and b/apps/web/public/badges/philpro-4.png differ
diff --git a/apps/web/public/badges/philpro-5.png b/apps/web/public/badges/philpro-5.png
new file mode 100644
index 0000000..ecd7df3
Binary files /dev/null and b/apps/web/public/badges/philpro-5.png differ
diff --git a/apps/web/public/badges/premium-badge-sheriff-flaticon.svg b/apps/web/public/badges/premium-badge-sheriff-flaticon.svg
new file mode 100644
index 0000000..5ec24ce
--- /dev/null
+++ b/apps/web/public/badges/premium-badge-sheriff-flaticon.svg
@@ -0,0 +1 @@
+<svg width="24" xmlns="http://www.w3.org/2000/svg" height="24.001" id="screenshot-47f7117a-c919-8034-8008-1e04fe58b8bc" viewBox="0 0 24 24.001" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-47f7117a-c919-8034-8008-1e04fe58b8bc" width="512" height="512" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-47f7117a-c919-8034-8008-1e04fe599a57" style="display: none;"><g class="fills" id="fills-47f7117a-c919-8034-8008-1e04fe599a57"><rect width="24" height="24.00000000000003" x="0" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: none;" ry="0" fill="none" rx="0" y="0.0010000000474974513"/></g></g><g id="shape-47f7117a-c919-8034-8008-1e04fe5aa3d6"><defs><linearGradient id="fill-color-gradient-render-12-0" x1="0.515402781361369" y1="-0.07826510690515463" x2="0.552544898749403" y2="1.2304600216950337" gradientTransform=""><stop offset="0" stop-color="#1e85fb" stop-opacity="1"/><stop offset="1" stop-color="#db106f" stop-opacity="0.5"/></linearGradient><pattern patternUnits="userSpaceOnUse" x="1" y="0" width="22" height="24.000000549363932" patternTransform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" id="fill-0-render-12"><g><rect width="22" height="24.000000549363932" style="fill: url(&quot;#fill-color-gradient-render-12-0&quot;);"/></g></pattern></defs><g class="fills" id="fills-47f7117a-c919-8034-8008-1e04fe5aa3d6"><path d="M14,12.001007080078125C14,13.10400390625,13.10302734375,14.001007080078125,12,14.001007080078125C10.89697265625,14.001007080078125,10,13.10400390625,10,12.001007080078125C10,10.89801025390625,10.89697265625,10.001007080078125,12,10.001007080078125C13.10302734375,10.001007080078125,14,10.89801025390625,14,12.001007080078125ZM23,17.001007080078125C23,18.10400390625,22.10302734375,19.001007080078125,21,19.001007080078125C20.262939453125,19.001007080078125,19.625,18.59600830078125,19.2779541015625,18.001007080078125L16.1309814453125,18.001007080078125C15.6929931640625,18.001007080078125,15.2869873046875,18.23699951171875,15.071044921875,18.61700439453125L13.719970703125,20.99700927734375C13.89404296875,21.292999267578125,14,21.633010864257812,14,22C14,23.103012084960938,13.10302734375,24,12,24C10.89697265625,24,10,23.103012084960938,10,22C10,21.633010864257812,10.1070556640625,21.292999267578125,10.280029296875,20.99700927734375L8.928955078125,18.61700439453125C8.7130126953125,18.236007690429688,8.3070068359375,18,7.8690185546875,18L4.7220458984375,18C4.375,18.595001220703125,3.737060546875,19,3,19C1.89697265625,19,1,18.103012084960938,1,17C1,15.897003173828125,1.89697265625,15,3,15C3.1510009765625,15,3.2969970703125,15.020004272460938,3.43798828125,15.052001953125L4.8289794921875,12.602005004882812C5.0400390625,12.231002807617188,5.0400390625,11.769012451171875,4.8289794921875,11.39801025390625L3.43798828125,8.948013305664062C3.2969970703125,8.980010986328125,3.1510009765625,9,3,9C1.89697265625,9,1,8.103012084960938,1,7C1,5.897003173828125,1.89697265625,5,3,5C3.737060546875,5,4.375,5.4050140380859375,4.7220458984375,6L7.8690185546875,6C8.3070068359375,6,8.7130126953125,5.764007568359375,8.928955078125,5.3830108642578125L10.280029296875,3.0040130615234375C10.1070556640625,2.7080078125,10,2.368011474609375,10,2C10,0.897003173828125,10.89697265625,0,12,0C13.10302734375,0,14,0.897003173828125,14,2C14,2.36700439453125,13.8929443359375,2.707000732421875,13.719970703125,3.0040130615234375L15.071044921875,5.3830108642578125C15.2869873046875,5.764007568359375,15.6929931640625,6,16.1309814453125,6L19.2779541015625,6C19.625,5.4050140380859375,20.262939453125,5,21,5C22.10302734375,5,23,5.897003173828125,23,7C23,8.103012084960938,22.10302734375,9,21,9C20.8489990234375,9,20.7030029296875,8.980010986328125,20.56201171875,8.948013305664062L19.1710205078125,11.39801025390625C18.9599609375,11.770004272460938,18.9610595703125,12.231002807617188,19.1710205078125,12.602005004882812L20.56201171875,15.052001953125C20.7030029296875,15.020004272460938,20.8489990234375,15,21,15C22.10302734375,15,23,15.897003173828125,23,17ZM16,12.001007080078125C16,9.795013427734375,14.2060546875,8.001007080078125,12,8.001007080078125C9.7939453125,8.001007080078125,8,9.795013427734375,8,12.001007080078125C8,14.207000732421875,9.7939453125,16.001007080078125,12,16.001007080078125C14.2060546875,16.001007080078125,16,14.207000732421875,16,12.001007080078125Z" fill="url(#fill-0-render-12)"/></g></g></g></svg>
\ No newline at end of file
diff --git a/apps/web/public/documents/Notepad_Win11.svg b/apps/web/public/documents/Notepad_Win11.svg
new file mode 100644
index 0000000..8b16a08
--- /dev/null
+++ b/apps/web/public/documents/Notepad_Win11.svg
@@ -0,0 +1,2876 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="221.45963mm"
+   height="295.27911mm"
+   viewBox="0 0 221.45964 295.27911"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs2"><linearGradient
+       id="linearGradient59028"><stop
+         style="stop-color:#43afcf;stop-opacity:1;"
+         offset="0"
+         id="stop59024" /><stop
+         style="stop-color:#7ad6f2;stop-opacity:1;"
+         offset="1"
+         id="stop59026" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_39_"
+       y2="45.238998"
+       x2="97.723"
+       y1="45.669998"
+       x1="99.226997"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4146"
+         offset="0"
+         style="stop-color:#8aa742;stop-opacity:1" /><stop
+         id="stop4148"
+         offset="0.1"
+         style="stop-color:#8aa742;stop-opacity:1" /><stop
+         id="stop4150"
+         offset="0.25"
+         style="stop-color:#b7ca33;stop-opacity:1" /><stop
+         id="stop4152"
+         offset="0.405"
+         style="stop-color:#b7ca33;stop-opacity:1" /><stop
+         id="stop4154"
+         offset="1"
+         style="stop-color:#8aa742;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_40_"
+       y2="17.01"
+       x2="105.865"
+       y1="17.111"
+       x1="107.31"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4161"
+         offset="0"
+         style="stop-color:#83b641;stop-opacity:1" /><stop
+         id="stop4163"
+         offset="0.2"
+         style="stop-color:#b7ca33;stop-opacity:1" /><stop
+         id="stop4165"
+         offset="0.525"
+         style="stop-color:#b7ca33;stop-opacity:1" /><stop
+         id="stop4167"
+         offset="1"
+         style="stop-color:#8aa742;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_41_"
+       y2="21.652"
+       x2="171.41499"
+       y1="20.577"
+       x1="170.769"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4172"
+         offset="0"
+         style="stop-color:#83b641;stop-opacity:1" /><stop
+         id="stop4174"
+         offset="1"
+         style="stop-color:#595e48;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_42_"
+       y2="21.895"
+       x2="172.026"
+       y1="21.409"
+       x1="172.43401"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4179"
+         offset="0"
+         style="stop-color:#8aa742;stop-opacity:1" /><stop
+         id="stop4181"
+         offset="1"
+         style="stop-color:#595e48;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_43_"
+       y2="22.834"
+       x2="173.04201"
+       y1="21.805"
+       x1="173.04201"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4190"
+         offset="0"
+         style="stop-color:#8aa742;stop-opacity:1" /><stop
+         id="stop4192"
+         offset="1"
+         style="stop-color:#767e47;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_44_"
+       y2="77.838997"
+       x2="153.91"
+       y1="77.938004"
+       x1="155.32001"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4199"
+         offset="0"
+         style="stop-color:#767e47;stop-opacity:1" /><stop
+         id="stop4201"
+         offset="1"
+         style="stop-color:#8aa742;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_45_"
+       y2="79.074997"
+       x2="155.071"
+       y1="78.063004"
+       x1="155.98199"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4206"
+         offset="0"
+         style="stop-color:#767e47;stop-opacity:1" /><stop
+         id="stop4208"
+         offset="1"
+         style="stop-color:#595e48;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_46_"
+       y2="79.838997"
+       x2="154.649"
+       y1="79.838997"
+       x1="90.361"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4213"
+         offset="0"
+         style="stop-color:#8aa742;stop-opacity:1" /><stop
+         id="stop4215"
+         offset="0.4"
+         style="stop-color:#b7ca33;stop-opacity:1" /><stop
+         id="stop4217"
+         offset="1"
+         style="stop-color:#8aa742;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_47_"
+       y2="73.786003"
+       x2="88.950996"
+       y1="74.917"
+       x1="89.969002"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4228"
+         offset="0"
+         style="stop-color:#767e47;stop-opacity:1" /><stop
+         id="stop4230"
+         offset="0.1"
+         style="stop-color:#767e47;stop-opacity:1" /><stop
+         id="stop4232"
+         offset="0.65"
+         style="stop-color:#83b641;stop-opacity:1" /><stop
+         id="stop4234"
+         offset="1"
+         style="stop-color:#8aa742;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_48_"
+       y2="74.424004"
+       x2="90.676003"
+       y1="73.086998"
+       x1="89.935997"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4239"
+         offset="0"
+         style="stop-color:#8aa742;stop-opacity:1" /><stop
+         id="stop4241"
+         offset="0.405"
+         style="stop-color:#83b641;stop-opacity:1" /><stop
+         id="stop4243"
+         offset="0.8"
+         style="stop-color:#8aa742;stop-opacity:1" /><stop
+         id="stop4245"
+         offset="1"
+         style="stop-color:#8aa742;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_49_"
+       y2="49.099998"
+       x2="162.08701"
+       y1="49.528999"
+       x1="163.58501"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4250"
+         offset="0"
+         style="stop-color:#595e48;stop-opacity:1" /><stop
+         id="stop4252"
+         offset="1"
+         style="stop-color:#83b641;stop-opacity:1" /></linearGradient><defs
+       id="defs4256"><path
+         id="XMLID_12_"
+         d="m 107.254,17.442 c 14.297,9.621 30.156,17.29 63.152,3.648 L 154.15,77.255 c -27.541,12.922 -49.002,6.278 -63.283,-3.398 z" /></defs><clipPath
+       id="clipPath4259"><use
+         id="use4261"
+         xlink:href="#XMLID_12_"
+         height="152.966"
+         width="812.04401"
+         y="0"
+         x="0" /></clipPath><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_51_"
+       y2="40.804001"
+       x2="100.46"
+       y1="57.84"
+       x1="159.869"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4264"
+         offset="0"
+         style="stop-color:#6fbc48;stop-opacity:1" /><stop
+         id="stop4266"
+         offset="0.333"
+         style="stop-color:#98c74f;stop-opacity:1" /><stop
+         id="stop4268"
+         offset="0.667"
+         style="stop-color:#80c046;stop-opacity:1" /><stop
+         id="stop4270"
+         offset="1"
+         style="stop-color:#607d3a;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_52_"
+       y2="129.19099"
+       x2="63.144001"
+       y1="129.19099"
+       x1="0.18700001"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4289"
+         offset="0"
+         style="stop-color:#76a5d8;stop-opacity:1" /><stop
+         id="stop4291"
+         offset="0.45"
+         style="stop-color:#dae3ec;stop-opacity:1" /><stop
+         id="stop4293"
+         offset="1"
+         style="stop-color:#3f87c7;stop-opacity:1" /></linearGradient><defs
+       id="defs4305"><path
+         id="XMLID_16_"
+         d="M 63.135,134.475 C 48.804,124.827 33.267,117.01 0.193,130.682 L 16.238,74.603 c 33.079,-13.68 49.107,-6.4 63.426,3.303 z" /></defs><clipPath
+       id="XMLID_53_"><use
+         id="use4309"
+         xlink:href="#XMLID_16_"
+         height="152.966"
+         width="812.04401"
+         y="0"
+         x="0" /></clipPath><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_55_"
+       y2="74.621002"
+       x2="16.247"
+       y1="74.211998"
+       x1="16.247"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4329"
+         offset="0"
+         style="stop-color:#76a5d8;stop-opacity:1" /><stop
+         id="stop4331"
+         offset="1"
+         style="stop-color:#2e499e;stop-opacity:1" /></linearGradient><defs
+       id="defs4351"><path
+         id="XMLID_20_"
+         d="M 35.432,7.781 35.25,7.729 c 0.07,-0.238 0.234,-0.323 0.298,-0.35 l 0.027,-0.008 c 10e-4,10e-4 -0.06,0.126 -0.143,0.41 z" /></defs><clipPath
+       id="XMLID_56_"><use
+         id="use4355"
+         xlink:href="#XMLID_20_"
+         height="152.966"
+         width="812.04401"
+         y="0"
+         x="0" /></clipPath><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_57_"
+       y2="62.354"
+       x2="82.387001"
+       y1="62.354"
+       x1="19.111"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4390"
+         offset="0"
+         style="stop-color:#faab4f;stop-opacity:1" /><stop
+         id="stop4392"
+         offset="0.25"
+         style="stop-color:#faab4f;stop-opacity:1" /><stop
+         id="stop4394"
+         offset="0.475"
+         style="stop-color:#fcc193;stop-opacity:1" /><stop
+         id="stop4396"
+         offset="0.525"
+         style="stop-color:#fcc193;stop-opacity:1" /><stop
+         id="stop4398"
+         offset="0.75"
+         style="stop-color:#f89c3e;stop-opacity:1" /><stop
+         id="stop4400"
+         offset="1"
+         style="stop-color:#f89c3e;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_58_"
+       y2="27.458"
+       x2="29.653999"
+       y1="44.528999"
+       x1="89.186996"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4409"
+         offset="0"
+         style="stop-color:#cd2b2b;stop-opacity:1" /><stop
+         id="stop4411"
+         offset="0.4"
+         style="stop-color:#f2692a;stop-opacity:1" /><stop
+         id="stop4413"
+         offset="0.725"
+         style="stop-color:#fcb544;stop-opacity:1" /><stop
+         id="stop4415"
+         offset="1"
+         style="stop-color:#f37237;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_59_"
+       y2="145.73599"
+       x2="137.342"
+       y1="144.478"
+       x1="137.679"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4420"
+         offset="0"
+         style="stop-color:#d4a52e;stop-opacity:1" /><stop
+         id="stop4422"
+         offset="1"
+         style="stop-color:#a87c3c;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_60_"
+       y2="90.400002"
+       x2="153.52901"
+       y1="89.364998"
+       x1="153.52901"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4429"
+         offset="0.006"
+         style="stop-color:#c19236;stop-opacity:1" /><stop
+         id="stop4431"
+         offset="1"
+         style="stop-color:#d4a52e;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_61_"
+       y2="89.225998"
+       x2="151.881"
+       y1="88.141998"
+       x1="151.23"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4436"
+         offset="0.006"
+         style="stop-color:#ffcd02;stop-opacity:1" /><stop
+         id="stop4438"
+         offset="1"
+         style="stop-color:#a87c3c;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_62_"
+       y2="89.447998"
+       x2="152.528"
+       y1="88.973"
+       x1="152.927"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4443"
+         offset="0.006"
+         style="stop-color:#ffcd02;stop-opacity:1" /><stop
+         id="stop4445"
+         offset="1"
+         style="stop-color:#a87c3c;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_63_"
+       y2="143.80499"
+       x2="134.95399"
+       y1="143.903"
+       x1="136.367"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4452"
+         offset="0"
+         style="stop-color:#c19236;stop-opacity:1" /><stop
+         id="stop4454"
+         offset="1"
+         style="stop-color:#ffcd02;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_64_"
+       y2="111.211"
+       x2="78.693001"
+       y1="111.635"
+       x1="80.170998"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4463"
+         offset="0"
+         style="stop-color:#d4a52e;stop-opacity:1" /><stop
+         id="stop4465"
+         offset="0.1"
+         style="stop-color:#d4a52e;stop-opacity:1" /><stop
+         id="stop4467"
+         offset="0.2"
+         style="stop-color:#ffc222;stop-opacity:1" /><stop
+         id="stop4469"
+         offset="0.35"
+         style="stop-color:#ffc222;stop-opacity:1" /><stop
+         id="stop4471"
+         offset="1"
+         style="stop-color:#d4a52e;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_65_"
+       y2="115.876"
+       x2="142.89799"
+       y1="116.277"
+       x1="144.299"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4476"
+         offset="0"
+         style="stop-color:#a87c3c;stop-opacity:1" /><stop
+         id="stop4478"
+         offset="1"
+         style="stop-color:#ffd200;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_66_"
+       y2="145.32899"
+       x2="136.25101"
+       y1="143.748"
+       x1="136.955"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4485"
+         offset="0"
+         style="stop-color:#c19236;stop-opacity:1" /><stop
+         id="stop4487"
+         offset="1"
+         style="stop-color:#d4a52e;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_67_"
+       y2="145.625"
+       x2="135.694"
+       y1="145.625"
+       x1="71.436996"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4492"
+         offset="0"
+         style="stop-color:#d4a52e;stop-opacity:1" /><stop
+         id="stop4494"
+         offset="0.4"
+         style="stop-color:#ffd200;stop-opacity:1" /><stop
+         id="stop4496"
+         offset="1"
+         style="stop-color:#d4a52e;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_68_"
+       y2="139.714"
+       x2="69.957001"
+       y1="140.86301"
+       x1="70.991997"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4505"
+         offset="0"
+         style="stop-color:#d4a52e;stop-opacity:1" /><stop
+         id="stop4507"
+         offset="0.1"
+         style="stop-color:#d4a52e;stop-opacity:1" /><stop
+         id="stop4509"
+         offset="0.7"
+         style="stop-color:#ffd200;stop-opacity:1" /><stop
+         id="stop4511"
+         offset="1"
+         style="stop-color:#d4a52e;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_69_"
+       y2="140.255"
+       x2="71.754997"
+       y1="138.93401"
+       x1="71.022003"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4516"
+         offset="0"
+         style="stop-color:#d4a52e;stop-opacity:1" /><stop
+         id="stop4518"
+         offset="0.4"
+         style="stop-color:#ffc222;stop-opacity:1" /><stop
+         id="stop4520"
+         offset="0.8"
+         style="stop-color:#ffcd02;stop-opacity:1" /><stop
+         id="stop4522"
+         offset="1"
+         style="stop-color:#d4a52e;stop-opacity:1" /></linearGradient><defs
+       id="defs4526"><path
+         id="XMLID_35_"
+         d="m 88.131,83.682 c 14.313,9.633 29.822,16.309 62.76,4.969 l -15.703,54.578 c -28.98,12.742 -48.541,5.09 -63.201,-3.77 z" /></defs><clipPath
+       id="XMLID_70_"><use
+         id="use4530"
+         xlink:href="#XMLID_35_"
+         height="152.966"
+         width="812.04401"
+         y="0"
+         x="0" /></clipPath><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_71_"
+       y2="106.551"
+       x2="81.422997"
+       y1="123.625"
+       x1="140.966"><stop
+         id="stop4533"
+         offset="0"
+         style="stop-color:#ffc907;stop-opacity:1" /><stop
+         id="stop4535"
+         offset="0.167"
+         style="stop-color:#ffd200;stop-opacity:1" /><stop
+         id="stop4537"
+         offset="0.333"
+         style="stop-color:#ffd952;stop-opacity:1" /><stop
+         id="stop4539"
+         offset="0.625"
+         style="stop-color:#ffcd02;stop-opacity:1" /><stop
+         id="stop4541"
+         offset="1"
+         style="stop-color:#b77a36;stop-opacity:1" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       id="XMLID_72_"
+       y2="83.264999"
+       x2="86.717003"
+       y1="83.367996"
+       x1="88.188004"
+       gradientTransform="matrix(5.7728038,0,0,5.7728038,0.00527315,169.32165)"><stop
+         id="stop4550"
+         offset="0"
+         style="stop-color:#ffc222;stop-opacity:1" /><stop
+         id="stop4552"
+         offset="0.2"
+         style="stop-color:#ffc222;stop-opacity:1" /><stop
+         id="stop4554"
+         offset="0.525"
+         style="stop-color:#ffd200;stop-opacity:1" /><stop
+         id="stop4556"
+         offset="1"
+         style="stop-color:#d4a52e;stop-opacity:1" /></linearGradient><path
+       id="path2986"
+       d="m 107.254,17.442 c 14.297,9.621 30.156,17.29 63.152,3.648 L 154.15,77.255 c -27.541,12.922 -49.002,6.278 -63.283,-3.398 z" /><path
+       id="path2988"
+       d="M 63.135,134.475 C 48.804,124.827 33.267,117.01 0.193,130.682 L 16.238,74.603 c 33.079,-13.68 49.107,-6.4 63.426,3.303 z" /><path
+       id="path2990"
+       d="M 35.432,7.781 35.25,7.729 c 0.07,-0.238 0.234,-0.323 0.298,-0.35 l 0.027,-0.008 c 10e-4,10e-4 -0.06,0.126 -0.143,0.41 z" /><path
+       id="path2992"
+       d="m 88.131,83.682 c 14.313,9.633 29.822,16.309 62.76,4.969 l -15.703,54.578 c -28.98,12.742 -48.541,5.09 -63.201,-3.77 z" /><radialGradient
+       id="SVGID_5_"
+       gradientUnits="userSpaceOnUse"
+       cy="44.404999"
+       cx="49.591999"
+       r="49.125999"><stop
+         id="stop3427"
+         stop-color="#D1E7EE"
+         offset=".0011" /><stop
+         id="stop3429"
+         stop-color="#CDE4EC"
+         offset=".0979" /><stop
+         id="stop3431"
+         stop-color="#C0DCE8"
+         offset=".203" /><stop
+         id="stop3433"
+         stop-color="#ADD0E1"
+         offset=".2985" /><stop
+         id="stop3435"
+         stop-color="#3982B1"
+         offset=".6504" /><stop
+         id="stop3437"
+         stop-color="#3474AA"
+         offset=".7203" /><stop
+         id="stop3439"
+         stop-color="#285699"
+         offset=".899" /><stop
+         id="stop3441"
+         stop-color="#244B93"
+         offset="1" /></radialGradient><radialGradient
+       id="SVGID_6_"
+       gradientUnits="userSpaceOnUse"
+       cy="44.198002"
+       cx="49.529999"
+       r="49.334"><stop
+         id="stop3446"
+         stop-color="#D8EEED"
+         offset=".0036" /><stop
+         id="stop3448"
+         stop-color="#98D8D7"
+         offset=".1733" /><stop
+         id="stop3450"
+         stop-color="#8ED3D3"
+         offset=".2237" /><stop
+         id="stop3452"
+         stop-color="#74C6CA"
+         offset=".3088" /><stop
+         id="stop3454"
+         stop-color="#49B1BA"
+         offset=".4176" /><stop
+         id="stop3456"
+         stop-color="#3CAAB5"
+         offset=".4477" /><stop
+         id="stop3458"
+         stop-color="#2E81A4"
+         offset=".56" /><stop
+         id="stop3460"
+         stop-color="#215B94"
+         offset=".6836" /><stop
+         id="stop3462"
+         stop-color="#19448B"
+         offset=".783" /><stop
+         id="stop3464"
+         stop-color="#163B87"
+         offset=".8448" /><stop
+         id="stop3466"
+         stop-color="#0B317D"
+         offset="1" /></radialGradient><radialGradient
+       id="SVGID_7_"
+       gradientUnits="userSpaceOnUse"
+       cy="44.318001"
+       cx="49.570999"
+       r="49.308998"><stop
+         id="stop3473"
+         stop-color="#D8EEED"
+         offset=".0036" /><stop
+         id="stop3475"
+         stop-color="#98D8D7"
+         offset=".1733" /><stop
+         id="stop3477"
+         stop-color="#8ED3D3"
+         offset=".2237" /><stop
+         id="stop3479"
+         stop-color="#74C6CA"
+         offset=".3088" /><stop
+         id="stop3481"
+         stop-color="#49B1BA"
+         offset=".4176" /><stop
+         id="stop3483"
+         stop-color="#3CAAB5"
+         offset=".4477" /><stop
+         id="stop3485"
+         stop-color="#2E81A4"
+         offset=".56" /><stop
+         id="stop3487"
+         stop-color="#215B94"
+         offset=".6836" /><stop
+         id="stop3489"
+         stop-color="#19448B"
+         offset=".783" /><stop
+         id="stop3491"
+         stop-color="#163B87"
+         offset=".8448" /><stop
+         id="stop3493"
+         stop-color="#152469"
+         offset="1" /></radialGradient><radialGradient
+       id="SVGID_8_"
+       gradientUnits="userSpaceOnUse"
+       cy="44.261002"
+       cx="49.595001"
+       r="49.341"><stop
+         id="stop3502"
+         stop-color="#D8EEED"
+         offset=".0036" /><stop
+         id="stop3504"
+         stop-color="#98D8D7"
+         offset=".1733" /><stop
+         id="stop3506"
+         stop-color="#8ED3D3"
+         offset=".2237" /><stop
+         id="stop3508"
+         stop-color="#74C6CA"
+         offset=".3088" /><stop
+         id="stop3510"
+         stop-color="#49B1BA"
+         offset=".4176" /><stop
+         id="stop3512"
+         stop-color="#3CAAB5"
+         offset=".4477" /><stop
+         id="stop3514"
+         stop-color="#2E81A4"
+         offset=".56" /><stop
+         id="stop3516"
+         stop-color="#215B94"
+         offset=".6836" /><stop
+         id="stop3518"
+         stop-color="#19448B"
+         offset=".783" /><stop
+         id="stop3520"
+         stop-color="#163B87"
+         offset=".8448" /><stop
+         id="stop3522"
+         stop-color="#0B317D"
+         offset="1" /></radialGradient><linearGradient
+       id="SVGID_9_"
+       y2="72.973999"
+       gradientUnits="userSpaceOnUse"
+       x2="39.187"
+       y1="45.946999"
+       x1="46.870998"><stop
+         id="stop3533"
+         stop-color="#98D8D7"
+         offset="0" /><stop
+         id="stop3535"
+         stop-color="#152469"
+         offset="1" /></linearGradient><radialGradient
+       id="SVGID_10_"
+       gradientUnits="userSpaceOnUse"
+       cy="44.256001"
+       cx="49.603001"
+       r="49.415001"><stop
+         id="stop3540"
+         stop-color="#D8EEED"
+         offset=".0036" /><stop
+         id="stop3542"
+         stop-color="#98D8D7"
+         offset=".1733" /><stop
+         id="stop3544"
+         stop-color="#8ED3D3"
+         offset=".2237" /><stop
+         id="stop3546"
+         stop-color="#74C6CA"
+         offset=".3088" /><stop
+         id="stop3548"
+         stop-color="#49B1BA"
+         offset=".4176" /><stop
+         id="stop3550"
+         stop-color="#3CAAB5"
+         offset=".4477" /><stop
+         id="stop3552"
+         stop-color="#2E81A4"
+         offset=".56" /><stop
+         id="stop3554"
+         stop-color="#215B94"
+         offset=".6836" /><stop
+         id="stop3556"
+         stop-color="#19448B"
+         offset=".783" /><stop
+         id="stop3558"
+         stop-color="#163B87"
+         offset=".8448" /><stop
+         id="stop3560"
+         stop-color="#152469"
+         offset="1" /></radialGradient><linearGradient
+       id="SVGID_11_"
+       y2="59.539001"
+       gradientUnits="userSpaceOnUse"
+       x2="12.304"
+       y1="59.539001"
+       x1="2.1038001"><stop
+         id="stop3567"
+         stop-color="#DEF3F1"
+         offset="0" /><stop
+         id="stop3569"
+         stop-color="#5085BC"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_12_"
+       y2="61.422001"
+       gradientUnits="userSpaceOnUse"
+       x2="47.335999"
+       y1="61.422001"
+       x1="36.953999"><stop
+         id="stop3574"
+         stop-color="#DEF3F1"
+         offset="0" /><stop
+         id="stop3576"
+         stop-color="#5085BC"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_13_"
+       y2="42.262001"
+       gradientUnits="userSpaceOnUse"
+       x2="47.195"
+       y1="42.262001"
+       x1="11.303"><stop
+         id="stop3581"
+         stop-color="#094992"
+         offset="0" /><stop
+         id="stop3583"
+         stop-color="#8BCDE2"
+         offset=".6685" /><stop
+         id="stop3585"
+         stop-color="#E6F6F9"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_14_"
+       y2="42.960999"
+       gradientUnits="userSpaceOnUse"
+       x2="11.375"
+       y1="42.960999"
+       x1="11.375"><stop
+         id="stop3590"
+         stop-color="#7E9EC4"
+         offset="0" /><stop
+         id="stop3592"
+         stop-color="#151D89"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_15_"
+       y2="42.880001"
+       gradientUnits="userSpaceOnUse"
+       x2="46.487"
+       y1="42.880001"
+       x1="12.171"><stop
+         id="stop3597"
+         stop-color="#BBC7E1"
+         offset=".0056" /><stop
+         id="stop3599"
+         stop-color="#7090C3"
+         offset=".2247" /><stop
+         id="stop3601"
+         stop-color="#C8EAEF"
+         offset=".5449" /><stop
+         id="stop3603"
+         stop-color="#fff"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_16_"
+       y2="41.838001"
+       gradientUnits="userSpaceOnUse"
+       x2="47.195"
+       y1="41.838001"
+       x1="11.385"><stop
+         id="stop3608"
+         stop-color="#7090C3"
+         offset=".0056" /><stop
+         id="stop3610"
+         stop-color="#C1E7ED"
+         offset=".5449" /><stop
+         id="stop3612"
+         stop-color="#fff"
+         offset="1" /></linearGradient><radialGradient
+       id="SVGID_17_"
+       gradientUnits="userSpaceOnUse"
+       cy="43.060001"
+       cx="11.276"
+       r="0.1211"><stop
+         id="stop3617"
+         stop-color="#7E9EC4"
+         offset="0" /><stop
+         id="stop3619"
+         stop-color="#0A50A1"
+         offset="1" /></radialGradient><radialGradient
+       id="SVGID_18_"
+       gradientUnits="userSpaceOnUse"
+       cy="73.624001"
+       cx="-12.359"
+       r="60.597"><stop
+         id="stop3624"
+         stop-color="#D8EEED"
+         offset=".0036" /><stop
+         id="stop3626"
+         stop-color="#98D8D7"
+         offset=".1733" /><stop
+         id="stop3628"
+         stop-color="#8ED3D3"
+         offset=".2237" /><stop
+         id="stop3630"
+         stop-color="#74C6CA"
+         offset=".3088" /><stop
+         id="stop3632"
+         stop-color="#49B1BA"
+         offset=".4176" /><stop
+         id="stop3634"
+         stop-color="#3CAAB5"
+         offset=".4477" /><stop
+         id="stop3636"
+         stop-color="#369FB5"
+         offset=".4987" /><stop
+         id="stop3638"
+         stop-color="#2A88B4"
+         offset=".6306" /><stop
+         id="stop3640"
+         stop-color="#257FB4"
+         offset=".7129" /><stop
+         id="stop3642"
+         stop-color="#4161AB"
+         offset="1" /></radialGradient><radialGradient
+       id="SVGID_19_"
+       gradientUnits="userSpaceOnUse"
+       cy="45.485001"
+       cx="49.549999"
+       r="45.735001"><stop
+         id="stop3651"
+         stop-color="#FCF5B0"
+         offset="0" /><stop
+         id="stop3653"
+         stop-color="#F7EDA0"
+         offset=".1657" /><stop
+         id="stop3655"
+         stop-color="#F3E591"
+         offset=".2849" /><stop
+         id="stop3657"
+         stop-color="#FCD118"
+         offset=".65" /><stop
+         id="stop3659"
+         stop-color="#F7A50C"
+         offset=".8024" /><stop
+         id="stop3661"
+         stop-color="#F38603"
+         offset=".9288" /><stop
+         id="stop3663"
+         stop-color="#F27B00"
+         offset="1" /></radialGradient><linearGradient
+       id="SVGID_20_"
+       y2="83.387001"
+       gradientUnits="userSpaceOnUse"
+       x2="79.737"
+       y1="82.676003"
+       x1="79.927002"><stop
+         id="stop3668"
+         stop-color="#DE980D"
+         offset="0" /><stop
+         id="stop3670"
+         stop-color="#A85D10"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_21_"
+       y2="67.470001"
+       gradientUnits="userSpaceOnUse"
+       x2="88.981003"
+       y1="67.470001"
+       x1="79.939003"><stop
+         id="stop3675"
+         stop-color="#DEB150"
+         offset="0" /><stop
+         id="stop3677"
+         stop-color="#FFF8B3"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_22_"
+       y2="52.111"
+       gradientUnits="userSpaceOnUse"
+       x2="88.890999"
+       y1="51.522999"
+       x1="88.890999"><stop
+         id="stop3682"
+         stop-color="#C67C0C"
+         offset=".0056" /><stop
+         id="stop3684"
+         stop-color="#DE980D"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_23_"
+       y2="51.444"
+       gradientUnits="userSpaceOnUse"
+       x2="87.959999"
+       y1="50.832001"
+       x1="87.592003"><stop
+         id="stop3689"
+         stop-color="#FED40F"
+         offset=".0056" /><stop
+         id="stop3691"
+         stop-color="#A85D10"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_24_"
+       y2="51.571999"
+       gradientUnits="userSpaceOnUse"
+       x2="88.324997"
+       y1="51.303001"
+       x1="88.551003"><stop
+         id="stop3696"
+         stop-color="#FED40F"
+         offset=".0056" /><stop
+         id="stop3698"
+         stop-color="#A85D10"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_25_"
+       y2="51.257999"
+       gradientUnits="userSpaceOnUse"
+       x2="87.578003"
+       y1="51.257999"
+       x1="51.914001"><stop
+         id="stop3705"
+         stop-color="#FFF8FB"
+         offset="0" /><stop
+         id="stop3707"
+         stop-color="#FEC236"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_26_"
+       y2="66.505997"
+       gradientUnits="userSpaceOnUse"
+       x2="82.876999"
+       y1="66.734001"
+       x1="83.672997"><stop
+         id="stop3714"
+         stop-color="#B37E00"
+         offset="0" /><stop
+         id="stop3716"
+         stop-color="#FF9E00"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_27_"
+       y2="83.151001"
+       gradientUnits="userSpaceOnUse"
+       x2="79.125999"
+       y1="82.259003"
+       x1="79.523003"><stop
+         id="stop3723"
+         stop-color="#FFD100"
+         offset=".0056" /><stop
+         id="stop3725"
+         stop-color="#A8710A"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_28_"
+       y2="83.129997"
+       gradientUnits="userSpaceOnUse"
+       x2="78.833"
+       y1="83.129997"
+       x1="42.487"><stop
+         id="stop3730"
+         stop-color="#DE980D"
+         offset="0" /><stop
+         id="stop3732"
+         stop-color="#FDDA10"
+         offset=".4" /><stop
+         id="stop3734"
+         stop-color="#DE980D"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_29_"
+       y2="79.982002"
+       gradientUnits="userSpaceOnUse"
+       x2="41.648998"
+       y1="80.632004"
+       x1="42.234001"><stop
+         id="stop3743"
+         stop-color="#DE980D"
+         offset="0" /><stop
+         id="stop3745"
+         stop-color="#DE980D"
+         offset=".1" /><stop
+         id="stop3747"
+         stop-color="#FDDA10"
+         offset=".7" /><stop
+         id="stop3749"
+         stop-color="#DE980D"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_30_"
+       y2="80.287003"
+       gradientUnits="userSpaceOnUse"
+       x2="42.664001"
+       y1="79.542"
+       x1="42.250999"><stop
+         id="stop3754"
+         stop-color="#DE980D"
+         offset="0" /><stop
+         id="stop3756"
+         stop-color="#FEBF0F"
+         offset=".4" /><stop
+         id="stop3758"
+         stop-color="#FED40F"
+         offset=".8" /><stop
+         id="stop3760"
+         stop-color="#DE980D"
+         offset="1" /></linearGradient><radialGradient
+       id="SVGID_31_"
+       gradientUnits="userSpaceOnUse"
+       cy="47.890999"
+       cx="51.452"
+       r="0.44839999"><stop
+         id="stop3767"
+         stop-color="#FEEB71"
+         offset="0" /><stop
+         id="stop3769"
+         stop-color="#DE980D"
+         offset="1" /></radialGradient><linearGradient
+       id="SVGID_32_"
+       y2="63.881001"
+       gradientUnits="userSpaceOnUse"
+       x2="46.583"
+       y1="64.121002"
+       x1="47.418999"><stop
+         id="stop3774"
+         stop-color="#FFEFBB"
+         offset=".0056" /><stop
+         id="stop3776"
+         stop-color="#FFBF00"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_33_"
+       y2="51.645"
+       gradientUnits="userSpaceOnUse"
+       x2="88.910004"
+       y1="51.645"
+       x1="50.167999"><stop
+         id="stop3781"
+         stop-color="#FCA859"
+         offset=".0056" /><stop
+         id="stop3783"
+         stop-color="#FDC30F"
+         offset=".2135" /><stop
+         id="stop3785"
+         stop-color="#B51C00"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_34_"
+       y2="52.148998"
+       gradientUnits="userSpaceOnUse"
+       x2="88.981003"
+       y1="52.148998"
+       x1="50.480999"><stop
+         id="stop3790"
+         stop-color="#FFF6D8"
+         offset=".0056" /><stop
+         id="stop3792"
+         stop-color="#FDDA10"
+         offset=".525" /><stop
+         id="stop3794"
+         stop-color="#F9BD0C"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_35_"
+       y2="81.851997"
+       gradientUnits="userSpaceOnUse"
+       x2="78.352997"
+       y1="82.317001"
+       x1="78.890999"><stop
+         id="stop3799"
+         stop-color="#EAB949"
+         offset="0" /><stop
+         id="stop3801"
+         stop-color="#EDC25A"
+         offset=".0722" /><stop
+         id="stop3803"
+         stop-color="#F3D883"
+         offset=".2779" /><stop
+         id="stop3805"
+         stop-color="#F8E9A4"
+         offset=".4784" /><stop
+         id="stop3807"
+         stop-color="#FCF5BC"
+         offset=".6698" /><stop
+         id="stop3809"
+         stop-color="#FEFCCA"
+         offset=".8479" /><stop
+         id="stop3811"
+         stop-color="#FFFFCF"
+         offset="1" /></linearGradient><radialGradient
+       id="SVGID_36_"
+       gradientUnits="userSpaceOnUse"
+       cy="39.194"
+       cx="48.154999"
+       r="43.414001"><stop
+         id="stop3818"
+         stop-color="#EFD916"
+         offset=".0036" /><stop
+         id="stop3820"
+         stop-color="#EFD516"
+         offset=".1053" /><stop
+         id="stop3822"
+         stop-color="#EDC715"
+         offset=".216" /><stop
+         id="stop3824"
+         stop-color="#EBB213"
+         offset=".3308" /><stop
+         id="stop3826"
+         stop-color="#E89312"
+         offset=".4485" /><stop
+         id="stop3828"
+         stop-color="#E36D0F"
+         offset=".5673" /><stop
+         id="stop3830"
+         stop-color="#E04D0D"
+         offset=".65" /><stop
+         id="stop3832"
+         stop-color="#CE2907"
+         offset=".7851" /><stop
+         id="stop3834"
+         stop-color="#BF0B02"
+         offset=".9224" /><stop
+         id="stop3836"
+         stop-color="#B90000"
+         offset="1" /></radialGradient><linearGradient
+       id="SVGID_38_"
+       y2="5.2898002"
+       gradientUnits="userSpaceOnUse"
+       x2="22.211"
+       y1="5.2898002"
+       x1="22.032"><stop
+         id="stop3860"
+         stop-color="#FD7E36"
+         offset="0" /><stop
+         id="stop3862"
+         stop-color="#BD6F4F"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_40_"
+       y2="4.2667999"
+       gradientUnits="userSpaceOnUse"
+       x2="57.925999"
+       y1="4.2667999"
+       x1="22.120001"><stop
+         id="stop3878"
+         stop-color="#FC2B21"
+         offset="0" /><stop
+         id="stop3880"
+         stop-color="#FF590A"
+         offset=".236" /><stop
+         id="stop3882"
+         stop-color="#FB570B"
+         offset=".2478" /><stop
+         id="stop3884"
+         stop-color="#E74C0E"
+         offset=".3274" /><stop
+         id="stop3886"
+         stop-color="#D84511"
+         offset=".4172" /><stop
+         id="stop3888"
+         stop-color="#D04013"
+         offset=".5247" /><stop
+         id="stop3890"
+         stop-color="#CD3F13"
+         offset=".6966" /><stop
+         id="stop3892"
+         stop-color="#D04213"
+         offset=".7958" /><stop
+         id="stop3894"
+         stop-color="#D84B14"
+         offset=".8688" /><stop
+         id="stop3896"
+         stop-color="#E65B16"
+         offset=".9334" /><stop
+         id="stop3898"
+         stop-color="#F97219"
+         offset=".9927" /><stop
+         id="stop3900"
+         stop-color="#FC7519"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_41_"
+       y2="21.966999"
+       gradientUnits="userSpaceOnUse"
+       x2="22.964001"
+       y1="21.966999"
+       x1="12.904"><stop
+         id="stop3909"
+         stop-color="#FD7E36"
+         offset="0" /><stop
+         id="stop3911"
+         stop-color="#BD6F4F"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_42_"
+       y2="1.4118"
+       gradientUnits="userSpaceOnUse"
+       x2="25.65"
+       y1="9.0417004"
+       x1="59.880001"><stop
+         id="stop3916"
+         stop-color="#FE560D"
+         offset="0" /><stop
+         id="stop3918"
+         stop-color="#8C1501"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_43_"
+       y2="-2.4793999"
+       gradientUnits="userSpaceOnUse"
+       x2="39.596001"
+       y1="8.6359997"
+       x1="40.002998"><stop
+         id="stop3923"
+         stop-color="#FE560D"
+         offset="0" /><stop
+         id="stop3925"
+         stop-color="#8C1501"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_44_"
+       y2="23.684"
+       gradientUnits="userSpaceOnUse"
+       x2="58.074001"
+       y1="23.684"
+       x1="47.625"><stop
+         id="stop3932"
+         stop-color="#FD7E36"
+         offset="0" /><stop
+         id="stop3934"
+         stop-color="#FC895B"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_45_"
+       y2="36.240002"
+       gradientUnits="userSpaceOnUse"
+       x2="48.695"
+       y1="36.240002"
+       x1="12.928"><stop
+         id="stop3939"
+         stop-color="#FD9B20"
+         offset="0" /><stop
+         id="stop3941"
+         stop-color="#FD9B20"
+         offset=".25" /><stop
+         id="stop3943"
+         stop-color="#FDB830"
+         offset=".3365" /><stop
+         id="stop3945"
+         stop-color="#FED23E"
+         offset=".4292" /><stop
+         id="stop3947"
+         stop-color="#FEDB43"
+         offset=".4851" /><stop
+         id="stop3949"
+         stop-color="#FE8411"
+         offset=".75" /><stop
+         id="stop3951"
+         stop-color="#FE560D"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_47_"
+       y2="5.2898002"
+       gradientUnits="userSpaceOnUse"
+       x2="22.212999"
+       y1="5.2898002"
+       x1="22.034"><stop
+         id="stop3965"
+         stop-color="#FD7E36"
+         offset="0" /><stop
+         id="stop3967"
+         stop-color="#BD6F4F"
+         offset="1" /></linearGradient><radialGradient
+       id="SVGID_50_"
+       gradientUnits="userSpaceOnUse"
+       cy="44.013"
+       cx="49.351002"
+       r="49.676998"><stop
+         id="stop4004"
+         stop-color="#D1E787"
+         offset=".005" /><stop
+         id="stop4006"
+         stop-color="#CEE583"
+         offset=".1227" /><stop
+         id="stop4008"
+         stop-color="#C4DE76"
+         offset=".2473" /><stop
+         id="stop4010"
+         stop-color="#B3D361"
+         offset=".3751" /><stop
+         id="stop4012"
+         stop-color="#9CC443"
+         offset=".5051" /><stop
+         id="stop4014"
+         stop-color="#7FB01D"
+         offset=".6356" /><stop
+         id="stop4016"
+         stop-color="#7BAE19"
+         offset=".6495" /><stop
+         id="stop4018"
+         stop-color="#578D19"
+         offset=".7789" /><stop
+         id="stop4020"
+         stop-color="#366E1A"
+         offset=".922" /><stop
+         id="stop4022"
+         stop-color="#29621A"
+         offset="1" /></radialGradient><linearGradient
+       id="SVGID_51_"
+       y2="13.84"
+       gradientUnits="userSpaceOnUse"
+       x2="98.606003"
+       y1="13.84"
+       x1="62.728001"><stop
+         id="stop4027"
+         stop-color="#D3ED89"
+         offset="0" /><stop
+         id="stop4029"
+         stop-color="#5F821C"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_52_"
+       y2="26.584"
+       gradientUnits="userSpaceOnUse"
+       x2="57.341999"
+       y1="26.827999"
+       x1="58.195"><stop
+         id="stop4036"
+         stop-color="#D3ED89"
+         offset=".2822" /><stop
+         id="stop4038"
+         stop-color="#D3ED89"
+         offset=".4045" /><stop
+         id="stop4040"
+         stop-color="#5F821C"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_53_"
+       y2="10.625"
+       gradientUnits="userSpaceOnUse"
+       x2="61.946999"
+       y1="10.682"
+       x1="62.764999"><stop
+         id="stop4047"
+         stop-color="#7AA922"
+         offset="0" /><stop
+         id="stop4049"
+         stop-color="#D3ED89"
+         offset=".2" /><stop
+         id="stop4051"
+         stop-color="#D3ED89"
+         offset=".525" /><stop
+         id="stop4053"
+         stop-color="#7AA922"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_54_"
+       y2="29.306"
+       gradientUnits="userSpaceOnUse"
+       x2="99.835999"
+       y1="29.306"
+       x1="89.855003"><stop
+         id="stop4058"
+         stop-color="#7AA922"
+         offset=".0056" /><stop
+         id="stop4060"
+         stop-color="#1D4A20"
+         offset=".1685" /><stop
+         id="stop4062"
+         stop-color="#26551B"
+         offset=".382" /><stop
+         id="stop4064"
+         stop-color="#7AA922"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_55_"
+       y2="45.007999"
+       gradientUnits="userSpaceOnUse"
+       x2="89.101997"
+       y1="45.063999"
+       x1="89.907997"><stop
+         id="stop4073"
+         stop-color="#7AA922"
+         offset="0" /><stop
+         id="stop4075"
+         stop-color="#D3ED89"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_56_"
+       y2="45.703999"
+       gradientUnits="userSpaceOnUse"
+       x2="89.760002"
+       y1="45.136002"
+       x1="90.272003"><stop
+         id="stop4080"
+         stop-color="#5F821C"
+         offset="0" /><stop
+         id="stop4082"
+         stop-color="#26551B"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_57_"
+       y2="46.138"
+       gradientUnits="userSpaceOnUse"
+       x2="89.521004"
+       y1="46.138"
+       x1="53.181999"><stop
+         id="stop4087"
+         stop-color="#7AA922"
+         offset="0" /><stop
+         id="stop4089"
+         stop-color="#D3ED89"
+         offset=".4" /><stop
+         id="stop4091"
+         stop-color="#7AA922"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_58_"
+       y2="42.716999"
+       gradientUnits="userSpaceOnUse"
+       x2="52.387001"
+       y1="43.355"
+       x1="52.960999"><stop
+         id="stop4102"
+         stop-color="#1D3A19"
+         offset="0" /><stop
+         id="stop4104"
+         stop-color="#26551B"
+         offset=".1" /><stop
+         id="stop4106"
+         stop-color="#7AA922"
+         offset=".65" /><stop
+         id="stop4108"
+         stop-color="#D3ED89"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_59_"
+       y2="43.077999"
+       gradientUnits="userSpaceOnUse"
+       x2="53.360001"
+       y1="42.324001"
+       x1="52.942001"><stop
+         id="stop4113"
+         stop-color="#5F821C"
+         offset="0" /><stop
+         id="stop4115"
+         stop-color="#7AA922"
+         offset=".4045" /><stop
+         id="stop4117"
+         stop-color="#5F821C"
+         offset=".8" /><stop
+         id="stop4119"
+         stop-color="#5F821C"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_60_"
+       y2="13.016"
+       gradientUnits="userSpaceOnUse"
+       x2="99.545998"
+       y1="13.42"
+       x1="99.427002"><stop
+         id="stop4124"
+         stop-color="#5B7F30"
+         offset="0" /><stop
+         id="stop4126"
+         stop-color="#D3ED89"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_61_"
+       y2="8.0393"
+       gradientUnits="userSpaceOnUse"
+       x2="62.159"
+       y1="18.514"
+       x1="98.690002"><stop
+         id="stop4131"
+         stop-color="#1D3419"
+         offset="0" /><stop
+         id="stop4133"
+         stop-color="#26551B"
+         offset=".2277" /><stop
+         id="stop4135"
+         stop-color="#7AA922"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_62_"
+       y2="28.764999"
+       gradientUnits="userSpaceOnUse"
+       x2="93.730003"
+       y1="29.007999"
+       x1="94.575996"><stop
+         id="stop4140"
+         stop-color="#5F821C"
+         offset="0" /><stop
+         id="stop4142"
+         stop-color="#75C146"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_63_"
+       y2="13.263"
+       gradientUnits="userSpaceOnUse"
+       x2="100.04"
+       y1="13.263"
+       x1="98.396004"><stop
+         id="stop4147"
+         stop-color="#D3ED89"
+         offset="0" /><stop
+         id="stop4149"
+         stop-color="#5F821C"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_64_"
+       y2="8.4527998"
+       gradientUnits="userSpaceOnUse"
+       x2="62.105999"
+       y1="18.898001"
+       x1="98.531998"><stop
+         id="stop4154-2"
+         stop-color="#93BF81"
+         offset="0" /><stop
+         id="stop4156"
+         stop-color="#26551B"
+         offset=".2277" /><stop
+         id="stop4158"
+         stop-color="#BDE256"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_65_"
+       y2="13.016"
+       gradientUnits="userSpaceOnUse"
+       x2="99.547997"
+       y1="13.42"
+       x1="99.429001"><stop
+         id="stop4163-7"
+         stop-color="#5B7F30"
+         offset="0" /><stop
+         id="stop4165-9"
+         stop-color="#D3ED89"
+         offset="1" /></linearGradient><linearGradient
+       id="SVGID_66_"
+       y2="13.264"
+       gradientUnits="userSpaceOnUse"
+       x2="100.04"
+       y1="13.264"
+       x1="98.396004"><stop
+         id="stop4170"
+         stop-color="#D3ED89"
+         offset="0" /><stop
+         id="stop4172-8"
+         stop-color="#5F821C"
+         offset="1" /></linearGradient><filter
+       id="filter6896"
+       height="1.5"
+       width="1.5"
+       y="-0.25"
+       x="-0.25"><feGaussianBlur
+         id="feGaussianBlur6898"
+         result="blur"
+         stdDeviation="0.8"
+         in="SourceAlpha" /><feColorMatrix
+         id="feColorMatrix6900"
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.541 0 "
+         type="matrix"
+         result="bluralpha" /><feOffset
+         id="feOffset6902"
+         result="offsetBlur"
+         dy="0.9"
+         dx="1.7"
+         in="bluralpha" /><feMerge
+         id="feMerge6904"><feMergeNode
+           id="feMergeNode6906"
+           in="offsetBlur" /><feMergeNode
+           id="feMergeNode6908"
+           in="SourceGraphic" /></feMerge></filter><radialGradient
+       id="SVGID_48_"
+       cx="232.2451"
+       cy="-168.24001"
+       r="33.430199"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"
+       gradientUnits="userSpaceOnUse"><stop
+         offset="0.005"
+         style="stop-color:#D1E787"
+         id="stop7071" /><stop
+         offset="0.1227"
+         style="stop-color:#CEE583"
+         id="stop7073" /><stop
+         offset="0.2473"
+         style="stop-color:#C4DE76"
+         id="stop7075" /><stop
+         offset="0.3751"
+         style="stop-color:#B3D361"
+         id="stop7077" /><stop
+         offset="0.5051"
+         style="stop-color:#9CC443"
+         id="stop7079" /><stop
+         offset="0.6356"
+         style="stop-color:#7FB01D"
+         id="stop7081" /><stop
+         offset="0.6495"
+         style="stop-color:#7BAE19"
+         id="stop7083" /><stop
+         offset="0.7789"
+         style="stop-color:#578D19"
+         id="stop7085" /><stop
+         offset="0.922"
+         style="stop-color:#366E1A"
+         id="stop7087" /><stop
+         offset="1"
+         style="stop-color:#29621A"
+         id="stop7089" /></radialGradient><linearGradient
+       id="SVGID_49_"
+       gradientUnits="userSpaceOnUse"
+       x1="241.248"
+       y1="-147.9348"
+       x2="265.39261"
+       y2="-147.9348"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#D3ED89"
+         id="stop7094" /><stop
+         offset="1"
+         style="stop-color:#5F821C"
+         id="stop7096" /></linearGradient><linearGradient
+       id="SVGID_50_-6"
+       gradientUnits="userSpaceOnUse"
+       x1="238.1963"
+       y1="-156.675"
+       x2="237.6232"
+       y2="-156.5107"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0.2822"
+         style="stop-color:#D3ED89"
+         id="stop7103" /><stop
+         offset="0.4045"
+         style="stop-color:#D3ED89"
+         id="stop7105" /><stop
+         offset="1"
+         style="stop-color:#5F821C"
+         id="stop7107" /></linearGradient><linearGradient
+       id="SVGID_51_-4"
+       gradientUnits="userSpaceOnUse"
+       x1="241.27251"
+       y1="-145.8098"
+       x2="240.7211"
+       y2="-145.7713"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#7AA922"
+         id="stop7114" /><stop
+         offset="0.2"
+         style="stop-color:#D3ED89"
+         id="stop7116" /><stop
+         offset="0.525"
+         style="stop-color:#D3ED89"
+         id="stop7118" /><stop
+         offset="1"
+         style="stop-color:#7AA922"
+         id="stop7120" /></linearGradient><linearGradient
+       id="SVGID_52_-3"
+       gradientUnits="userSpaceOnUse"
+       x1="259.50201"
+       y1="-158.343"
+       x2="266.21881"
+       y2="-158.343"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0.0056"
+         style="stop-color:#7AA922"
+         id="stop7125" /><stop
+         offset="0.1685"
+         style="stop-color:#1D4A20"
+         id="stop7127" /><stop
+         offset="0.382"
+         style="stop-color:#26551B"
+         id="stop7129" /><stop
+         offset="1"
+         style="stop-color:#7AA922"
+         id="stop7131" /></linearGradient><linearGradient
+       id="SVGID_53_-2"
+       gradientUnits="userSpaceOnUse"
+       x1="259.53909"
+       y1="-168.9465"
+       x2="258.99619"
+       y2="-168.9086"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#7AA922"
+         id="stop7140" /><stop
+         offset="1"
+         style="stop-color:#D3ED89"
+         id="stop7142" /></linearGradient><linearGradient
+       id="SVGID_54_-8"
+       gradientUnits="userSpaceOnUse"
+       x1="259.7822"
+       y1="-168.99631"
+       x2="259.43851"
+       y2="-169.3781"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#5F821C"
+         id="stop7147" /><stop
+         offset="1"
+         style="stop-color:#26551B"
+         id="stop7149" /></linearGradient><linearGradient
+       id="SVGID_55_-1"
+       gradientUnits="userSpaceOnUse"
+       x1="234.8242"
+       y1="-169.6702"
+       x2="259.27731"
+       y2="-169.6702"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#7AA922"
+         id="stop7154" /><stop
+         offset="0.4"
+         style="stop-color:#D3ED89"
+         id="stop7156" /><stop
+         offset="1"
+         style="stop-color:#7AA922"
+         id="stop7158" /></linearGradient><linearGradient
+       id="SVGID_56_-5"
+       gradientUnits="userSpaceOnUse"
+       x1="234.6748"
+       y1="-167.7971"
+       x2="234.2885"
+       y2="-167.3681"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#1D3A19"
+         id="stop7169" /><stop
+         offset="0.1"
+         style="stop-color:#26551B"
+         id="stop7171" /><stop
+         offset="0.65"
+         style="stop-color:#7AA922"
+         id="stop7173" /><stop
+         offset="1"
+         style="stop-color:#D3ED89"
+         id="stop7175" /></linearGradient><linearGradient
+       id="SVGID_57_-0"
+       gradientUnits="userSpaceOnUse"
+       x1="234.6611"
+       y1="-167.10381"
+       x2="234.9424"
+       y2="-167.6113"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#5F821C"
+         id="stop7180" /><stop
+         offset="0.4045"
+         style="stop-color:#7AA922"
+         id="stop7182" /><stop
+         offset="0.8"
+         style="stop-color:#5F821C"
+         id="stop7184" /><stop
+         offset="1"
+         style="stop-color:#5F821C"
+         id="stop7186" /></linearGradient><linearGradient
+       id="SVGID_58_-5"
+       gradientUnits="userSpaceOnUse"
+       x1="265.94339"
+       y1="-147.6521"
+       x2="266.02328"
+       y2="-147.3804"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#5B7F30"
+         id="stop7191" /><stop
+         offset="1"
+         style="stop-color:#D3ED89"
+         id="stop7193" /></linearGradient><linearGradient
+       id="SVGID_59_-4"
+       gradientUnits="userSpaceOnUse"
+       x1="265.44821"
+       y1="-151.0808"
+       x2="240.8642"
+       y2="-144.0314"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#1D3419"
+         id="stop7198" /><stop
+         offset="0.2277"
+         style="stop-color:#26551B"
+         id="stop7200" /><stop
+         offset="1"
+         style="stop-color:#7AA922"
+         id="stop7202" /></linearGradient><linearGradient
+       id="SVGID_60_-3"
+       gradientUnits="userSpaceOnUse"
+       x1="262.67871"
+       y1="-158.1414"
+       x2="262.1095"
+       y2="-157.9781"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#5F821C"
+         id="stop7207" /><stop
+         offset="1"
+         style="stop-color:#75C146"
+         id="stop7209" /></linearGradient><linearGradient
+       id="SVGID_61_-1"
+       gradientUnits="userSpaceOnUse"
+       x1="265.25"
+       y1="-147.5471"
+       x2="266.35449"
+       y2="-147.5471"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#D3ED89"
+         id="stop7214" /><stop
+         offset="1"
+         style="stop-color:#5F821C"
+         id="stop7216" /></linearGradient><linearGradient
+       id="SVGID_62_-7"
+       gradientUnits="userSpaceOnUse"
+       x1="265.3428"
+       y1="-151.33859"
+       x2="240.8306"
+       y2="-144.30991"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#93BF81"
+         id="stop7221" /><stop
+         offset="0.2277"
+         style="stop-color:#26551B"
+         id="stop7223" /><stop
+         offset="1"
+         style="stop-color:#BDE256"
+         id="stop7225" /></linearGradient><linearGradient
+       id="SVGID_63_-7"
+       gradientUnits="userSpaceOnUse"
+       x1="265.94531"
+       y1="-147.65359"
+       x2="266.02551"
+       y2="-147.38091"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#5B7F30"
+         id="stop7230" /><stop
+         offset="1"
+         style="stop-color:#D3ED89"
+         id="stop7232" /></linearGradient><linearGradient
+       id="SVGID_64_-6"
+       gradientUnits="userSpaceOnUse"
+       x1="265.25"
+       y1="-147.5481"
+       x2="266.35641"
+       y2="-147.5481"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#D3ED89"
+         id="stop7237" /><stop
+         offset="1"
+         style="stop-color:#5F821C"
+         id="stop7239" /></linearGradient><radialGradient
+       id="SVGID_36_-4"
+       cx="231.4404"
+       cy="-164.9973"
+       r="29.2155"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"
+       gradientUnits="userSpaceOnUse"><stop
+         offset="0.0036"
+         style="stop-color:#EFD916"
+         id="stop6895" /><stop
+         offset="0.1053"
+         style="stop-color:#EFD516"
+         id="stop6897" /><stop
+         offset="0.216"
+         style="stop-color:#EDC715"
+         id="stop6899" /><stop
+         offset="0.3308"
+         style="stop-color:#EBB213"
+         id="stop6901" /><stop
+         offset="0.4485"
+         style="stop-color:#E89312"
+         id="stop6903" /><stop
+         offset="0.5673"
+         style="stop-color:#E36D0F"
+         id="stop6905" /><stop
+         offset="0.65"
+         style="stop-color:#E04D0D"
+         id="stop6907" /><stop
+         offset="0.7851"
+         style="stop-color:#CE2907"
+         id="stop6909" /><stop
+         offset="0.9224"
+         style="stop-color:#BF0B02"
+         id="stop6911" /><stop
+         offset="1"
+         style="stop-color:#B90000"
+         id="stop6913" /></radialGradient><linearGradient
+       id="SVGID_38_-7"
+       gradientUnits="userSpaceOnUse"
+       x1="213.8618"
+       y1="-142.1819"
+       x2="213.98241"
+       y2="-142.1819"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#FD7E36"
+         id="stop6936" /><stop
+         offset="1"
+         style="stop-color:#BD6F4F"
+         id="stop6938" /></linearGradient><linearGradient
+       id="SVGID_39_"
+       gradientUnits="userSpaceOnUse"
+       x1="213.9214"
+       y1="-141.4929"
+       x2="238.01559"
+       y2="-141.4929"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#FC2B21"
+         id="stop6950" /><stop
+         offset="0.236"
+         style="stop-color:#FF590A"
+         id="stop6952" /><stop
+         offset="0.2478"
+         style="stop-color:#FB570B"
+         id="stop6954" /><stop
+         offset="0.3274"
+         style="stop-color:#E74C0E"
+         id="stop6956" /><stop
+         offset="0.4172"
+         style="stop-color:#D84511"
+         id="stop6958" /><stop
+         offset="0.5247"
+         style="stop-color:#D04013"
+         id="stop6960" /><stop
+         offset="0.6966"
+         style="stop-color:#CD3F13"
+         id="stop6962" /><stop
+         offset="0.7958"
+         style="stop-color:#D04213"
+         id="stop6964" /><stop
+         offset="0.8688"
+         style="stop-color:#D84B14"
+         id="stop6966" /><stop
+         offset="0.9334"
+         style="stop-color:#E65B16"
+         id="stop6968" /><stop
+         offset="0.9927"
+         style="stop-color:#F97219"
+         id="stop6970" /><stop
+         offset="1"
+         style="stop-color:#FC7519"
+         id="stop6972" /></linearGradient><linearGradient
+       id="SVGID_40_-4"
+       gradientUnits="userSpaceOnUse"
+       x1="207.71831"
+       y1="-153.4045"
+       x2="214.4888"
+       y2="-153.4045"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#FD7E36"
+         id="stop6981" /><stop
+         offset="1"
+         style="stop-color:#BD6F4F"
+         id="stop6983" /></linearGradient><linearGradient
+       id="SVGID_41_-6"
+       gradientUnits="userSpaceOnUse"
+       x1="239.4238"
+       y1="-144.7278"
+       x2="215.336"
+       y2="-139.3586"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#FE560D"
+         id="stop6988" /><stop
+         offset="1"
+         style="stop-color:#8C1501"
+         id="stop6990" /></linearGradient><linearGradient
+       id="SVGID_42_-7"
+       gradientUnits="userSpaceOnUse"
+       x1="225.95509"
+       y1="-144.4333"
+       x2="225.6814"
+       y2="-136.9538"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#FE560D"
+         id="stop6995" /><stop
+         offset="1"
+         style="stop-color:#8C1501"
+         id="stop6997" /></linearGradient><linearGradient
+       id="SVGID_43_-5"
+       gradientUnits="userSpaceOnUse"
+       x1="231.084"
+       y1="-154.55881"
+       x2="238.1152"
+       y2="-154.55881"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#FD7E36"
+         id="stop7004" /><stop
+         offset="1"
+         style="stop-color:#FC895B"
+         id="stop7006" /></linearGradient><linearGradient
+       id="SVGID_44_-0"
+       gradientUnits="userSpaceOnUse"
+       x1="207.73489"
+       y1="-163.009"
+       x2="231.8037"
+       y2="-163.009"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#FD9B20"
+         id="stop7011" /><stop
+         offset="0.25"
+         style="stop-color:#FD9B20"
+         id="stop7013" /><stop
+         offset="0.3365"
+         style="stop-color:#FDB830"
+         id="stop7015" /><stop
+         offset="0.4292"
+         style="stop-color:#FED23E"
+         id="stop7017" /><stop
+         offset="0.4851"
+         style="stop-color:#FEDB43"
+         id="stop7019" /><stop
+         offset="0.75"
+         style="stop-color:#FE8411"
+         id="stop7021" /><stop
+         offset="1"
+         style="stop-color:#FE560D"
+         id="stop7023" /></linearGradient><linearGradient
+       id="SVGID_45_-6"
+       gradientUnits="userSpaceOnUse"
+       x1="213.8618"
+       y1="-142.1819"
+       x2="213.98309"
+       y2="-142.1819"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#FD7E36"
+         id="stop7036" /><stop
+         offset="1"
+         style="stop-color:#BD6F4F"
+         id="stop7038" /></linearGradient><linearGradient
+       id="SVGID_47_-1"
+       gradientUnits="userSpaceOnUse"
+       x1="213.92039"
+       y1="-141.49339"
+       x2="238.01559"
+       y2="-141.49339"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#FC2B21"
+         id="stop7042" /><stop
+         offset="0.236"
+         style="stop-color:#FF590A"
+         id="stop7044" /><stop
+         offset="0.2478"
+         style="stop-color:#FB570B"
+         id="stop7046" /><stop
+         offset="0.3274"
+         style="stop-color:#E74C0E"
+         id="stop7048" /><stop
+         offset="0.4172"
+         style="stop-color:#D84511"
+         id="stop7050" /><stop
+         offset="0.5247"
+         style="stop-color:#D04013"
+         id="stop7052" /><stop
+         offset="0.6966"
+         style="stop-color:#CD3F13"
+         id="stop7054" /><stop
+         offset="0.7958"
+         style="stop-color:#D04213"
+         id="stop7056" /><stop
+         offset="0.8688"
+         style="stop-color:#D84B14"
+         id="stop7058" /><stop
+         offset="0.9334"
+         style="stop-color:#E65B16"
+         id="stop7060" /><stop
+         offset="0.9927"
+         style="stop-color:#F97219"
+         id="stop7062" /><stop
+         offset="1"
+         style="stop-color:#FC7519"
+         id="stop7064" /></linearGradient><radialGradient
+       id="SVGID_19_-5"
+       cx="232.37891"
+       cy="-169.2312"
+       r="30.7768"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"
+       gradientUnits="userSpaceOnUse"><stop
+         offset="0"
+         style="stop-color:#FCF5B0"
+         id="stop6728" /><stop
+         offset="0.1657"
+         style="stop-color:#F7EDA0"
+         id="stop6730" /><stop
+         offset="0.2849"
+         style="stop-color:#F3E591"
+         id="stop6732" /><stop
+         offset="0.65"
+         style="stop-color:#FCD118"
+         id="stop6734" /><stop
+         offset="0.8024"
+         style="stop-color:#F7A50C"
+         id="stop6736" /><stop
+         offset="0.9288"
+         style="stop-color:#F38603"
+         id="stop6738" /><stop
+         offset="1"
+         style="stop-color:#F27B00"
+         id="stop6740" /></radialGradient><linearGradient
+       id="SVGID_20_-7"
+       gradientUnits="userSpaceOnUse"
+       x1="252.8213"
+       y1="-194.2585"
+       x2="252.6933"
+       y2="-194.73621"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#DE980D"
+         id="stop6745" /><stop
+         offset="1"
+         style="stop-color:#A85D10"
+         id="stop6747" /></linearGradient><linearGradient
+       id="SVGID_21_-8"
+       gradientUnits="userSpaceOnUse"
+       x1="252.8291"
+       y1="-184.0251"
+       x2="258.91409"
+       y2="-184.0251"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#DEB150"
+         id="stop6752" /><stop
+         offset="1"
+         style="stop-color:#FFF8B3"
+         id="stop6754" /></linearGradient><linearGradient
+       id="SVGID_22_-4"
+       gradientUnits="userSpaceOnUse"
+       x1="258.85349"
+       y1="-173.2937"
+       x2="258.85349"
+       y2="-173.6902"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0.0056"
+         style="stop-color:#C67C0C"
+         id="stop6759" /><stop
+         offset="1"
+         style="stop-color:#DE980D"
+         id="stop6761" /></linearGradient><linearGradient
+       id="SVGID_23_-0"
+       gradientUnits="userSpaceOnUse"
+       x1="257.9805"
+       y1="-172.8289"
+       x2="258.22781"
+       y2="-173.24049"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0.0056"
+         style="stop-color:#FED40F"
+         id="stop6766" /><stop
+         offset="1"
+         style="stop-color:#A85D10"
+         id="stop6768" /></linearGradient><linearGradient
+       id="SVGID_24_-7"
+       gradientUnits="userSpaceOnUse"
+       x1="258.62601"
+       y1="-173.14529"
+       x2="258.4733"
+       y2="-173.32719"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0.0056"
+         style="stop-color:#FED40F"
+         id="stop6773" /><stop
+         offset="1"
+         style="stop-color:#A85D10"
+         id="stop6775" /></linearGradient><linearGradient
+       id="SVGID_25_-3"
+       gradientUnits="userSpaceOnUse"
+       x1="233.9707"
+       y1="-173.1165"
+       x2="257.9707"
+       y2="-173.1165"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#FFF8FB"
+         id="stop6782" /><stop
+         offset="1"
+         style="stop-color:#FEC236"
+         id="stop6784" /></linearGradient><linearGradient
+       id="SVGID_26_-4"
+       gradientUnits="userSpaceOnUse"
+       x1="255.3418"
+       y1="-183.53"
+       x2="254.8069"
+       y2="-183.37669"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#B37E00"
+         id="stop6791" /><stop
+         offset="1"
+         style="stop-color:#FF9E00"
+         id="stop6793" /></linearGradient><linearGradient
+       id="SVGID_27_-7"
+       gradientUnits="userSpaceOnUse"
+       x1="252.5498"
+       y1="-193.9778"
+       x2="252.2829"
+       y2="-194.5773"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0.0056"
+         style="stop-color:#FFD100"
+         id="stop6800" /><stop
+         offset="1"
+         style="stop-color:#A8710A"
+         id="stop6802" /></linearGradient><linearGradient
+       id="SVGID_28_-4"
+       gradientUnits="userSpaceOnUse"
+       x1="227.62601"
+       y1="-194.56419"
+       x2="252.08591"
+       y2="-194.56419"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#DE980D"
+         id="stop6807" /><stop
+         offset="0.4"
+         style="stop-color:#FDDA10"
+         id="stop6809" /><stop
+         offset="1"
+         style="stop-color:#DE980D"
+         id="stop6811" /></linearGradient><linearGradient
+       id="SVGID_29_-3"
+       gradientUnits="userSpaceOnUse"
+       x1="227.4561"
+       y1="-192.8821"
+       x2="227.06281"
+       y2="-192.4453"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#DE980D"
+         id="stop6820" /><stop
+         offset="0.1"
+         style="stop-color:#DE980D"
+         id="stop6822" /><stop
+         offset="0.7"
+         style="stop-color:#FDDA10"
+         id="stop6824" /><stop
+         offset="1"
+         style="stop-color:#DE980D"
+         id="stop6826" /></linearGradient><linearGradient
+       id="SVGID_30_-0"
+       gradientUnits="userSpaceOnUse"
+       x1="227.4678"
+       y1="-192.1497"
+       x2="227.745"
+       y2="-192.6497"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#DE980D"
+         id="stop6831" /><stop
+         offset="0.4"
+         style="stop-color:#FEBF0F"
+         id="stop6833" /><stop
+         offset="0.8"
+         style="stop-color:#FED40F"
+         id="stop6835" /><stop
+         offset="1"
+         style="stop-color:#DE980D"
+         id="stop6837" /></linearGradient><radialGradient
+       id="SVGID_31_-3"
+       cx="233.6602"
+       cy="-170.8503"
+       r="0.3021"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"
+       gradientUnits="userSpaceOnUse"><stop
+         offset="0"
+         style="stop-color:#FEEB71"
+         id="stop6844" /><stop
+         offset="1"
+         style="stop-color:#DE980D"
+         id="stop6846" /></radialGradient><linearGradient
+       id="SVGID_32_-1"
+       gradientUnits="userSpaceOnUse"
+       x1="230.9463"
+       y1="-181.7717"
+       x2="230.3831"
+       y2="-181.61031"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0.0056"
+         style="stop-color:#FFEFBB"
+         id="stop6851" /><stop
+         offset="1"
+         style="stop-color:#FFBF00"
+         id="stop6853" /></linearGradient><linearGradient
+       id="SVGID_33_-4"
+       gradientUnits="userSpaceOnUse"
+       x1="232.79491"
+       y1="-173.37621"
+       x2="258.86661"
+       y2="-173.37621"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0.0056"
+         style="stop-color:#FCA859"
+         id="stop6858" /><stop
+         offset="0.2135"
+         style="stop-color:#FDC30F"
+         id="stop6860" /><stop
+         offset="1"
+         style="stop-color:#B51C00"
+         id="stop6862" /></linearGradient><linearGradient
+       id="SVGID_34_-8"
+       gradientUnits="userSpaceOnUse"
+       x1="233.00591"
+       y1="-173.71561"
+       x2="258.91409"
+       y2="-173.71561"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0.0056"
+         style="stop-color:#FFF6D8"
+         id="stop6867" /><stop
+         offset="0.525"
+         style="stop-color:#FDDA10"
+         id="stop6869" /><stop
+         offset="1"
+         style="stop-color:#F9BD0C"
+         id="stop6871" /></linearGradient><linearGradient
+       id="SVGID_35_-1"
+       gradientUnits="userSpaceOnUse"
+       x1="252.125"
+       y1="-194.0168"
+       x2="251.763"
+       y2="-193.7038"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#EAB949"
+         id="stop6876" /><stop
+         offset="0.0722"
+         style="stop-color:#EDC25A"
+         id="stop6878" /><stop
+         offset="0.2779"
+         style="stop-color:#F3D883"
+         id="stop6880" /><stop
+         offset="0.4784"
+         style="stop-color:#F8E9A4"
+         id="stop6882" /><stop
+         offset="0.6698"
+         style="stop-color:#FCF5BC"
+         id="stop6884" /><stop
+         offset="0.8479"
+         style="stop-color:#FEFCCA"
+         id="stop6886" /><stop
+         offset="1"
+         style="stop-color:#FFFFCF"
+         id="stop6888" /></linearGradient><radialGradient
+       id="SVGID_5_-3"
+       cx="232.4072"
+       cy="-168.50459"
+       r="33.058399"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"
+       gradientUnits="userSpaceOnUse"><stop
+         offset="0.0011"
+         style="stop-color:#D1E7EE"
+         id="stop6504" /><stop
+         offset="0.0979"
+         style="stop-color:#CDE4EC"
+         id="stop6506" /><stop
+         offset="0.203"
+         style="stop-color:#C0DCE8"
+         id="stop6508" /><stop
+         offset="0.2985"
+         style="stop-color:#ADD0E1"
+         id="stop6510" /><stop
+         offset="0.6504"
+         style="stop-color:#3982B1"
+         id="stop6512" /><stop
+         offset="0.7203"
+         style="stop-color:#3474AA"
+         id="stop6514" /><stop
+         offset="0.899"
+         style="stop-color:#285699"
+         id="stop6516" /><stop
+         offset="1"
+         style="stop-color:#244B93"
+         id="stop6518" /></radialGradient><radialGradient
+       id="SVGID_6_-4"
+       cx="232.3887"
+       cy="-168.27609"
+       r="33.259701"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"
+       gradientUnits="userSpaceOnUse"><stop
+         offset="0.0036"
+         style="stop-color:#D8EEED"
+         id="stop6523" /><stop
+         offset="0.1733"
+         style="stop-color:#98D8D7"
+         id="stop6525" /><stop
+         offset="0.2237"
+         style="stop-color:#8ED3D3"
+         id="stop6527" /><stop
+         offset="0.3088"
+         style="stop-color:#74C6CA"
+         id="stop6529" /><stop
+         offset="0.4176"
+         style="stop-color:#49B1BA"
+         id="stop6531" /><stop
+         offset="0.4477"
+         style="stop-color:#3CAAB5"
+         id="stop6533" /><stop
+         offset="0.56"
+         style="stop-color:#2E81A4"
+         id="stop6535" /><stop
+         offset="0.6836"
+         style="stop-color:#215B94"
+         id="stop6537" /><stop
+         offset="0.783"
+         style="stop-color:#19448B"
+         id="stop6539" /><stop
+         offset="0.8448"
+         style="stop-color:#163B87"
+         id="stop6541" /><stop
+         offset="1"
+         style="stop-color:#0B317D"
+         id="stop6543" /></radialGradient><radialGradient
+       id="SVGID_7_-4"
+       cx="232.3857"
+       cy="-168.4431"
+       r="33.177502"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"
+       gradientUnits="userSpaceOnUse"><stop
+         offset="0.0036"
+         style="stop-color:#D8EEED"
+         id="stop6550" /><stop
+         offset="0.1733"
+         style="stop-color:#98D8D7"
+         id="stop6552" /><stop
+         offset="0.2237"
+         style="stop-color:#8ED3D3"
+         id="stop6554" /><stop
+         offset="0.3088"
+         style="stop-color:#74C6CA"
+         id="stop6556" /><stop
+         offset="0.4176"
+         style="stop-color:#49B1BA"
+         id="stop6558" /><stop
+         offset="0.4477"
+         style="stop-color:#3CAAB5"
+         id="stop6560" /><stop
+         offset="0.56"
+         style="stop-color:#2E81A4"
+         id="stop6562" /><stop
+         offset="0.6836"
+         style="stop-color:#215B94"
+         id="stop6564" /><stop
+         offset="0.783"
+         style="stop-color:#19448B"
+         id="stop6566" /><stop
+         offset="0.8448"
+         style="stop-color:#163B87"
+         id="stop6568" /><stop
+         offset="1"
+         style="stop-color:#152469"
+         id="stop6570" /></radialGradient><radialGradient
+       id="SVGID_8_-2"
+       cx="232.4102"
+       cy="-168.4158"
+       r="33.192299"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"
+       gradientUnits="userSpaceOnUse"><stop
+         offset="0.0036"
+         style="stop-color:#D8EEED"
+         id="stop6579" /><stop
+         offset="0.1733"
+         style="stop-color:#98D8D7"
+         id="stop6581" /><stop
+         offset="0.2237"
+         style="stop-color:#8ED3D3"
+         id="stop6583" /><stop
+         offset="0.3088"
+         style="stop-color:#74C6CA"
+         id="stop6585" /><stop
+         offset="0.4176"
+         style="stop-color:#49B1BA"
+         id="stop6587" /><stop
+         offset="0.4477"
+         style="stop-color:#3CAAB5"
+         id="stop6589" /><stop
+         offset="0.56"
+         style="stop-color:#2E81A4"
+         id="stop6591" /><stop
+         offset="0.6836"
+         style="stop-color:#215B94"
+         id="stop6593" /><stop
+         offset="0.783"
+         style="stop-color:#19448B"
+         id="stop6595" /><stop
+         offset="0.8448"
+         style="stop-color:#163B87"
+         id="stop6597" /><stop
+         offset="1"
+         style="stop-color:#0B317D"
+         id="stop6599" /></radialGradient><linearGradient
+       id="SVGID_9_-2"
+       gradientUnits="userSpaceOnUse"
+       x1="230.5762"
+       y1="-169.54131"
+       x2="225.40559"
+       y2="-187.72929"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#98D8D7"
+         id="stop6610" /><stop
+         offset="1"
+         style="stop-color:#152469"
+         id="stop6612" /></linearGradient><radialGradient
+       id="SVGID_10_-5"
+       cx="232.418"
+       cy="-168.40359"
+       r="33.309898"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"
+       gradientUnits="userSpaceOnUse"><stop
+         offset="0.0036"
+         style="stop-color:#D8EEED"
+         id="stop6617" /><stop
+         offset="0.1733"
+         style="stop-color:#98D8D7"
+         id="stop6619" /><stop
+         offset="0.2237"
+         style="stop-color:#8ED3D3"
+         id="stop6621" /><stop
+         offset="0.3088"
+         style="stop-color:#74C6CA"
+         id="stop6623" /><stop
+         offset="0.4176"
+         style="stop-color:#49B1BA"
+         id="stop6625" /><stop
+         offset="0.4477"
+         style="stop-color:#3CAAB5"
+         id="stop6627" /><stop
+         offset="0.56"
+         style="stop-color:#2E81A4"
+         id="stop6629" /><stop
+         offset="0.6836"
+         style="stop-color:#215B94"
+         id="stop6631" /><stop
+         offset="0.783"
+         style="stop-color:#19448B"
+         id="stop6633" /><stop
+         offset="0.8448"
+         style="stop-color:#163B87"
+         id="stop6635" /><stop
+         offset="1"
+         style="stop-color:#152469"
+         id="stop6637" /></radialGradient><linearGradient
+       id="SVGID_11_-2"
+       gradientUnits="userSpaceOnUse"
+       x1="200.4502"
+       y1="-178.6882"
+       x2="207.3149"
+       y2="-178.6882"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#DEF3F1"
+         id="stop6644" /><stop
+         offset="1"
+         style="stop-color:#5085BC"
+         id="stop6646" /></linearGradient><linearGradient
+       id="SVGID_12_-9"
+       gradientUnits="userSpaceOnUse"
+       x1="223.9028"
+       y1="-179.9543"
+       x2="230.8896"
+       y2="-179.9543"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#DEF3F1"
+         id="stop6651" /><stop
+         offset="1"
+         style="stop-color:#5085BC"
+         id="stop6653" /></linearGradient><linearGradient
+       id="SVGID_13_-1"
+       gradientUnits="userSpaceOnUse"
+       x1="206.6411"
+       y1="-167.06129"
+       x2="230.79491"
+       y2="-167.06129"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#094992"
+         id="stop6658" /><stop
+         offset="0.6685"
+         style="stop-color:#8BCDE2"
+         id="stop6660" /><stop
+         offset="1"
+         style="stop-color:#E6F6F9"
+         id="stop6662" /></linearGradient><linearGradient
+       id="SVGID_14_-1"
+       gradientUnits="userSpaceOnUse"
+       x1="206.6895"
+       y1="-167.532"
+       x2="206.6895"
+       y2="-167.532"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0"
+         style="stop-color:#7E9EC4"
+         id="stop6667" /><stop
+         offset="1"
+         style="stop-color:#151D89"
+         id="stop6669" /></linearGradient><linearGradient
+       id="SVGID_15_-8"
+       gradientUnits="userSpaceOnUse"
+       x1="207.2256"
+       y1="-167.47681"
+       x2="230.31841"
+       y2="-167.47681"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0.0056"
+         style="stop-color:#BBC7E1"
+         id="stop6674" /><stop
+         offset="0.2247"
+         style="stop-color:#7090C3"
+         id="stop6676" /><stop
+         offset="0.5449"
+         style="stop-color:#C8EAEF"
+         id="stop6678" /><stop
+         offset="1"
+         style="stop-color:#FFFFFF"
+         id="stop6680" /></linearGradient><linearGradient
+       id="SVGID_16_-8"
+       gradientUnits="userSpaceOnUse"
+       x1="206.6963"
+       y1="-166.7756"
+       x2="230.79491"
+       y2="-166.7756"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"><stop
+         offset="0.0056"
+         style="stop-color:#7090C3"
+         id="stop6685" /><stop
+         offset="0.5449"
+         style="stop-color:#C1E7ED"
+         id="stop6687" /><stop
+         offset="1"
+         style="stop-color:#FFFFFF"
+         id="stop6689" /></linearGradient><radialGradient
+       id="SVGID_17_-5"
+       cx="206.6226"
+       cy="-167.59891"
+       r="0.081500001"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"
+       gradientUnits="userSpaceOnUse"><stop
+         offset="0"
+         style="stop-color:#7E9EC4"
+         id="stop6694" /><stop
+         offset="1"
+         style="stop-color:#0A50A1"
+         id="stop6696" /></radialGradient><radialGradient
+       id="SVGID_18_-0"
+       cx="190.71919"
+       cy="-188.16721"
+       r="40.776699"
+       gradientTransform="matrix(1,0,0,-1,-270.96,-122.0747)"
+       gradientUnits="userSpaceOnUse"><stop
+         offset="0.0036"
+         style="stop-color:#D8EEED"
+         id="stop6701" /><stop
+         offset="0.1733"
+         style="stop-color:#98D8D7"
+         id="stop6703" /><stop
+         offset="0.2237"
+         style="stop-color:#8ED3D3"
+         id="stop6705" /><stop
+         offset="0.3088"
+         style="stop-color:#74C6CA"
+         id="stop6707" /><stop
+         offset="0.4176"
+         style="stop-color:#49B1BA"
+         id="stop6709" /><stop
+         offset="0.4477"
+         style="stop-color:#3CAAB5"
+         id="stop6711" /><stop
+         offset="0.4987"
+         style="stop-color:#369FB5"
+         id="stop6713" /><stop
+         offset="0.6306"
+         style="stop-color:#2A88B4"
+         id="stop6715" /><stop
+         offset="0.7129"
+         style="stop-color:#257FB4"
+         id="stop6717" /><stop
+         offset="1"
+         style="stop-color:#4161AB"
+         id="stop6719" /></radialGradient><radialGradient
+       id="SVGID_1_"
+       cx="256.7764"
+       cy="-191.69119"
+       r="30.8692"
+       gradientTransform="matrix(0.9732,0,0,-0.9795,-286.1021,-136.4147)"
+       gradientUnits="userSpaceOnUse"><stop
+         offset="0.25"
+         style="stop-color:#FFFFFF"
+         id="stop6468" /><stop
+         offset="1"
+         style="stop-color:#000000"
+         id="stop6470" /></radialGradient><radialGradient
+       id="SVGID_2_"
+       cx="256.77829"
+       cy="-191.69209"
+       r="30.867001"
+       gradientTransform="matrix(0.9732,0,0,-0.9795,-286.1021,-136.4147)"
+       gradientUnits="userSpaceOnUse"><stop
+         offset="0.25"
+         style="stop-color:#FFFFFF"
+         id="stop6475" /><stop
+         offset="1"
+         style="stop-color:#000000"
+         id="stop6477" /></radialGradient><radialGradient
+       id="SVGID_3_"
+       cx="256.77731"
+       cy="-191.6926"
+       r="30.868799"
+       gradientTransform="matrix(0.9732,0,0,-0.9795,-286.1021,-136.4147)"
+       gradientUnits="userSpaceOnUse"><stop
+         offset="0.25"
+         style="stop-color:#FFFFFF"
+         id="stop6482" /><stop
+         offset="1"
+         style="stop-color:#000000"
+         id="stop6484" /></radialGradient><radialGradient
+       id="SVGID_4_"
+       cx="256.7764"
+       cy="-191.6926"
+       r="30.871201"
+       gradientTransform="matrix(0.9732,0,0,-0.9795,-286.1021,-136.4147)"
+       gradientUnits="userSpaceOnUse"><stop
+         offset="0.25"
+         style="stop-color:#FFFFFF"
+         id="stop6489" /><stop
+         offset="1"
+         style="stop-color:#000000"
+         id="stop6491" /></radialGradient><path
+       id="path2959"
+       d="m 107.254,17.442 c 14.297,9.621 30.156,17.29 63.152,3.648 L 154.15,77.255 c -27.541,12.922 -49.002,6.278 -63.283,-3.398 z" /><path
+       id="path2961"
+       d="M 63.135,134.475 C 48.804,124.827 33.267,117.01 0.193,130.682 L 16.238,74.603 c 33.079,-13.68 49.107,-6.4 63.426,3.303 z" /><path
+       id="path2963"
+       d="M 35.432,7.781 35.25,7.729 c 0.07,-0.238 0.234,-0.323 0.298,-0.35 l 0.027,-0.008 c 10e-4,10e-4 -0.06,0.126 -0.143,0.41 z" /><path
+       id="path2965"
+       d="m 88.131,83.682 c 14.313,9.633 29.822,16.309 62.76,4.969 l -15.703,54.578 c -28.98,12.742 -48.541,5.09 -63.201,-3.77 z" /><path
+       id="path21110"
+       d="m 107.254,17.442 c 14.297,9.621 30.156,17.29 63.152,3.648 L 154.15,77.255 c -27.541,12.922 -49.002,6.278 -63.283,-3.398 z" /><path
+       id="path21112"
+       d="M 63.135,134.475 C 48.804,124.827 33.267,117.01 0.193,130.682 L 16.238,74.603 c 33.079,-13.68 49.107,-6.4 63.426,3.303 z" /><path
+       id="path21114"
+       d="M 35.432,7.781 35.25,7.729 c 0.07,-0.238 0.234,-0.323 0.298,-0.35 l 0.027,-0.008 c 10e-4,10e-4 -0.06,0.126 -0.143,0.41 z" /><path
+       id="path21116"
+       d="m 88.131,83.682 c 14.313,9.633 29.822,16.309 62.76,4.969 l -15.703,54.578 c -28.98,12.742 -48.541,5.09 -63.201,-3.77 z" /><linearGradient
+       xlink:href="#linearGradient59028"
+       id="linearGradient60436"
+       x1="3131.343"
+       y1="2403.8093"
+       x2="3054.7461"
+       y2="2327.2124"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(2.0366166,0,0,2.0366166,-3129.8852,-2397.0881)" /><filter
+       style="color-interpolation-filters:sRGB"
+       id="filter60750"
+       x="-0.11410929"
+       y="-0.15376239"
+       width="1.2282186"
+       height="1.3075248"><feGaussianBlur
+         stdDeviation="5.1700548"
+         id="feGaussianBlur60752" /></filter><filter
+       style="color-interpolation-filters:sRGB"
+       id="filter60776"
+       x="-0.071904999"
+       y="-0.069731894"
+       width="1.14381"
+       height="1.1394638"><feGaussianBlur
+         stdDeviation="3.2578653"
+         id="feGaussianBlur60778" /></filter></defs><g
+     id="layer1"
+     transform="translate(-3044.5984,-2312.4153)"><rect
+       style="fill:#8d4410;fill-opacity:1;stroke-width:18.3295;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+       id="rect58297-2-9"
+       width="221.45963"
+       height="228.36111"
+       x="3044.5984"
+       y="2379.3333"
+       ry="11.610024" /><rect
+       style="fill:#000000;fill-opacity:0.796491;stroke-width:8.99999;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;filter:url(#filter60776)"
+       id="rect58297-2-8"
+       width="108.73898"
+       height="112.12769"
+       x="3031.7358"
+       y="2333.2991"
+       ry="5.7006431"
+       transform="matrix(2.0366166,0,0,2.0366166,-3129.8852,-2397.0881)" /><rect
+       style="fill:#ffffff;fill-opacity:1;stroke-width:18.3295;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+       id="rect58297-2"
+       width="221.45963"
+       height="228.36111"
+       x="3044.5984"
+       y="2354.9475"
+       ry="11.610024" /><rect
+       style="fill:#000000;fill-opacity:0.652632;stroke-width:8.99999;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;filter:url(#filter60750)"
+       id="rect58297-4"
+       width="108.73901"
+       height="80.696793"
+       x="3031.7358"
+       y="2352.9434"
+       ry="5.7006431"
+       transform="matrix(2.0366166,0,0,2.0366166,-3129.8852,-2397.0881)" /><rect
+       style="fill:url(#linearGradient60436);fill-opacity:1;stroke-width:18.3295;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+       id="rect58297"
+       width="221.45963"
+       height="228.36111"
+       x="3044.5984"
+       y="2330.9426"
+       ry="11.610024" /><g
+       id="g58295"
+       style="fill:#057093;fill-opacity:1"
+       transform="matrix(2.0366166,0,0,2.0366166,-3129.8852,-2397.0881)"><rect
+         style="fill:#057093;fill-opacity:1;stroke-width:8.99999;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+         id="rect58246"
+         width="72.49675"
+         height="9.1672363"
+         x="3049.8557"
+         y="2351.4468"
+         ry="3.1282878" /><rect
+         style="fill:#057093;fill-opacity:1;stroke-width:8.99999;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+         id="rect58246-9"
+         width="72.49675"
+         height="9.1672363"
+         x="3049.8557"
+         y="2375.9207"
+         ry="3.1282878" /><rect
+         style="fill:#057093;fill-opacity:1;stroke-width:8.99999;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+         id="rect58246-9-7"
+         width="72.49675"
+         height="9.1672363"
+         x="3049.8557"
+         y="2400.1301"
+         ry="3.1282878" /></g><g
+       id="g58244"
+       style="fill:#057093;fill-opacity:1"
+       transform="matrix(2.0366166,0,0,2.0366166,-3129.8852,-2397.0881)"><rect
+         style="fill:#057093;fill-opacity:1;stroke-width:8.99999;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+         id="rect56737"
+         width="12.534941"
+         height="18.194374"
+         x="3043.5403"
+         y="2312.4153"
+         ry="6.2674704" /><rect
+         style="fill:#057093;fill-opacity:1;stroke-width:8.99999;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+         id="rect56737-6"
+         width="12.534941"
+         height="18.194374"
+         x="3068.0142"
+         y="2312.4153"
+         ry="6.2674704" /><rect
+         style="fill:#057093;fill-opacity:1;stroke-width:8.99999;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+         id="rect56737-4"
+         width="12.534941"
+         height="18.194374"
+         x="3116.1021"
+         y="2312.4153"
+         ry="6.2674704" /><rect
+         style="fill:#057093;fill-opacity:1;stroke-width:8.99999;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+         id="rect56737-6-7"
+         width="12.534941"
+         height="18.194374"
+         x="3091.7605"
+         y="2312.4153"
+         ry="6.2674704" /></g></g></svg>
diff --git a/apps/web/public/documents/PDF_file_icon.svg b/apps/web/public/documents/PDF_file_icon.svg
new file mode 100644
index 0000000..07c96f0
--- /dev/null
+++ b/apps/web/public/documents/PDF_file_icon.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="75.320129mm" height="92.604164mm" viewBox="0 0 75.320129 92.604164">
+  <g transform="translate(53.548057 -183.975276) scale(1.4843)">
+    <path fill="#ff2116" d="M-29.632812 123.94727c-3.551967 0-6.44336 2.89347-6.44336 6.44531v49.49804c0 3.55185 2.891393 6.44532 6.44336 6.44532H8.2167969c3.5519661 0 6.4433591-2.89335 6.4433591-6.44532v-40.70117s.101353-1.19181-.416015-2.35156c-.484969-1.08711-1.275391-1.84375-1.275391-1.84375a1.0584391 1.0584391 0 0 0-.0059-.008l-9.3906254-9.21094a1.0584391 1.0584391 0 0 0-.015625-.0156s-.8017392-.76344-1.9902344-1.27344c-1.39939552-.6005-2.8417968-.53711-2.8417968-.53711l.021484-.002z" color="#000" font-family="sans-serif" overflow="visible" paint-order="markers fill stroke" style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000000;solid-opacity:1"/>
+    <path fill="#f5f5f5" d="M-29.632812 126.06445h28.3789058a1.0584391 1.0584391 0 0 0 .021484 0s1.13480448.011 1.96484378.36719c.79889772.34282 1.36536982.86176 1.36914062.86524.0000125.00001.00391.004.00391.004l9.3671868 9.18945s.564354.59582.837891 1.20899c.220779.49491.234375 1.40039.234375 1.40039a1.0584391 1.0584391 0 0 0-.002.0449v40.74609c0 2.41592-1.910258 4.32813-4.3261717 4.32813H-29.632812c-2.415914 0-4.326172-1.91209-4.326172-4.32813v-49.49804c0-2.41603 1.910258-4.32813 4.326172-4.32813z" color="#000" font-family="sans-serif" overflow="visible" paint-order="markers fill stroke" style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000000;solid-opacity:1"/>
+    <path fill="#ff2116" d="M-23.40766 161.09299c-1.45669-1.45669.11934-3.45839 4.39648-5.58397l2.69124-1.33743 1.04845-2.29399c.57665-1.26169 1.43729-3.32036 1.91254-4.5748l.8641-2.28082-.59546-1.68793c-.73217-2.07547-.99326-5.19438-.52872-6.31588.62923-1.51909 2.69029-1.36323 3.50626.26515.63727 1.27176.57212 3.57488-.18329 6.47946l-.6193 2.38125.5455.92604c.30003.50932 1.1764 1.71867 1.9475 2.68743l1.44924 1.80272 1.8033728-.23533c5.72900399-.74758 7.6912472.523 7.6912472 2.34476 0 2.29921-4.4984914 2.48899-8.2760865-.16423-.8499666-.59698-1.4336605-1.19001-1.4336605-1.19001s-2.3665326.48178-3.531704.79583c-1.202707.32417-1.80274.52719-3.564509 1.12186 0 0-.61814.89767-1.02094 1.55026-1.49858 2.4279-3.24833 4.43998-4.49793 5.1723-1.3991.81993-2.86584.87582-3.60433.13733zm2.28605-.81668c.81883-.50607 2.47616-2.46625 3.62341-4.28553l.46449-.73658-2.11497 1.06339c-3.26655 1.64239-4.76093 3.19033-3.98386 4.12664.43653.52598.95874.48237 2.01093-.16792zm21.21809-5.95578c.80089-.56097.68463-1.69142-.22082-2.1472-.70466-.35471-1.2726074-.42759-3.1031574-.40057-1.1249.0767-2.9337647.3034-3.2403347.37237 0 0 .993716.68678 1.434896.93922.58731.33544 2.0145161.95811 3.0565161 1.27706 1.02785.31461 1.6224.28144 2.0729-.0409zm-8.53152-3.54594c-.4847-.50952-1.30889-1.57296-1.83152-2.3632-.68353-.89643-1.02629-1.52887-1.02629-1.52887s-.4996 1.60694-.90948 2.57394l-1.27876 3.16076-.37075.71695s1.971043-.64627 2.97389-.90822c1.0621668-.27744 3.21787-.70134 3.21787-.70134zm-2.74938-11.02573c.12363-1.0375.1761-2.07346-.15724-2.59587-.9246-1.01077-2.04057-.16787-1.85154 2.23517.0636.8084.26443 2.19033.53292 3.04209l.48817 1.54863.34358-1.16638c.18897-.64151.47882-2.02015.64411-3.06364z"/>
+    <path fill="#2c2c2c" d="M-20.930423 167.83862h2.364986q1.133514 0 1.840213.2169.706698.20991 1.189489.9446.482795.72769.482795 1.75625 0 .94459-.391832 1.6233-.391833.67871-1.056548.97958-.65772.30087-2.02913.30087h-.818651v3.72941h-1.581322zm1.581322 1.22447v3.33058h.783664q1.049552 0 1.44838-.39184.405826-.39183.405826-1.27345 0-.65772-.265887-1.06355-.265884-.41282-.587747-.50378-.314866-.098-1.000572-.098zm5.50664-1.22447h2.148082q1.560333 0 2.4909318.55276.9375993.55276 1.4133973 1.6443.482791 1.09153.482791 2.42096 0 1.3994-.4338151 2.49793-.4268149 1.09153-1.3154348 1.76324-.8816233.67172-2.5189212.67172h-2.267031zm1.581326 1.26645v7.018h.657715q1.378411 0 2.001144-.9516.6227329-.95858.6227329-2.5539 0-3.5125-2.6238769-3.5125zm6.4722254-1.26645h5.30372941v1.26645H-4.2075842v2.85478h2.9807225v1.26646h-2.9807225v4.16322h-1.5813254z" font-family="Franklin Gothic Medium Cond" letter-spacing="0" style="line-height:125%;-inkscape-font-specification:'Franklin Gothic Medium Cond'" word-spacing="4.26000023"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/apps/web/public/documents/docx_icon.svg b/apps/web/public/documents/docx_icon.svg
new file mode 100644
index 0000000..949e051
--- /dev/null
+++ b/apps/web/public/documents/docx_icon.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#FFF" stroke-miterlimit="10" stroke-width="2" viewBox="0 0 96 96">
+  <path stroke="#979593" d="M67.1716 7H27c-1.1046 0-2 .8954-2 2v78c0 1.1046.8954 2 2 2h58c1.1046 0 2-.8954 2-2V26.8284c0-.5304-.2107-1.0391-.5858-1.4142L68.5858 7.5858C68.2107 7.2107 67.702 7 67.1716 7z"/>
+  <path fill="none" stroke="#979593" d="M67 7v18c0 1.1046.8954 2 2 2h18"/>
+  <path fill="#C8C6C4" d="M79 61H48v-2h31c.5523 0 1 .4477 1 1s-.4477 1-1 1zm0-6H48v-2h31c.5523 0 1 .4477 1 1s-.4477 1-1 1zm0-6H48v-2h31c.5523 0 1 .4477 1 1s-.4477 1-1 1zm0-6H48v-2h31c.5523 0 1 .4477 1 1s-.4477 1-1 1zm0 24H48v-2h31c.5523 0 1 .4477 1 1s-.4477 1-1 1z"/>
+  <path fill="#185ABD" d="M12 74h32c2.2091 0 4-1.7909 4-4V38c0-2.2091-1.7909-4-4-4H12c-2.2091 0-4 1.7909-4 4v32c0 2.2091 1.7909 4 4 4z"/>
+  <path d="M21.6245 60.6455c.0661.522.109.9769.1296 1.3657h.0762c.0306-.3685.0889-.8129.1751-1.3349.0862-.5211.1703-.961.2517-1.319L25.7911 44h4.5702l3.6562 15.1272c.183.7468.3353 1.6973.457 2.8532h.0608c.0508-.7979.1777-1.7184.3809-2.7615L37.8413 44H42l-5.1183 22h-4.86l-3.4885-14.5744c-.1016-.4197-.2158-.9663-.3428-1.6417-.127-.6745-.2057-1.1656-.236-1.4724h-.0608c-.0407.358-.1195.8896-.2364 1.595-.1169.7062-.211 1.2273-.2819 1.565L24.1 66h-4.9357L14 44h4.2349l3.1843 15.3882c.0709.3165.1392.7362.2053 1.2573z"/>
+</svg>
\ No newline at end of file
diff --git a/apps/web/public/documents/pptx_icon_(2019).svg b/apps/web/public/documents/pptx_icon_(2019).svg
new file mode 100644
index 0000000..00fffb2
--- /dev/null
+++ b/apps/web/public/documents/pptx_icon_(2019).svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#FFF" stroke-miterlimit="10" stroke-width="2" viewBox="0 0 96 96">
+  <path stroke="#979593" d="M67.1716 7H27c-1.1046 0-2 .8954-2 2v78c0 1.1046.8954 2 2 2h58c1.1046 0 2-.8954 2-2V26.8284c0-.5304-.2107-1.0391-.5858-1.4142L68.5858 7.5858C68.2107 7.2107 67.702 7 67.1716 7z"/>
+  <path fill="none" stroke="#979593" d="M67 7v18c0 1.1046.8954 2 2 2h18"/>
+  <path fill="#F5BA9D" d="M62 34c8.2843 0 15 6.7157 15 15H62V34z"/>
+  <path fill="#C8C6C4" d="M77 51c0 10.0264-8.6799 18.0255-18.9355 16.8929-7.7951-.8609-14.0964-7.1622-14.9574-14.9573C41.9744 42.68 49.9736 34 60 34v17h17zm2 25H34c-.5522 0-1 .4477-1 1s.4478 1 1 1h45c.5522 0 1-.4477 1-1s-.4478-1-1-1zm0-5H34c-.5522 0-1 .4477-1 1s.4478 1 1 1h45c.5522 0 1-.4477 1-1s-.4478-1-1-1z"/>
+  <path fill="#C43E1C" d="M12 74h32c2.2091 0 4-1.7909 4-4V38c0-2.2091-1.7909-4-4-4H12c-2.2091 0-4 1.7909-4 4v32c0 2.2091 1.7909 4 4 4z"/>
+  <path d="M29.8541 42c2.9554 0 5.2196.6626 6.7895 1.9849C38.2145 45.3081 39 47.2246 39 49.7332c0 1.6109-.3888 3.0433-1.1653 4.2971-.7765 1.2548-1.8814 2.2299-3.3134 2.9262C33.0892 57.6518 31.429 58 29.5426 58H24.999v9H20V42h9.8541zm-4.855 12h3.9666c1.5464 0 2.7144-.3491 3.5051-1.0453.7897-.6972 1.1841-1.715 1.1841-3.0536 0-2.6004-1.5133-3.9011-4.5416-3.9011h-4.1142v8z"/>
+</svg>
\ No newline at end of file
diff --git a/apps/web/public/favicon.ico b/apps/web/public/favicon.ico
new file mode 100644
index 0000000..dd6be73
Binary files /dev/null and b/apps/web/public/favicon.ico differ
diff --git a/apps/web/public/favicon.svg b/apps/web/public/favicon.svg
new file mode 100644
index 0000000..6893eb1
--- /dev/null
+++ b/apps/web/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
\ No newline at end of file
diff --git a/apps/web/public/file-sample_150kB.pdf b/apps/web/public/file-sample_150kB.pdf
new file mode 100644
index 0000000..94d9477
Binary files /dev/null and b/apps/web/public/file-sample_150kB.pdf differ
diff --git a/apps/web/public/icons.svg b/apps/web/public/icons.svg
new file mode 100644
index 0000000..e952219
--- /dev/null
+++ b/apps/web/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
diff --git a/apps/web/public/manypixels_diversity-1-88.png b/apps/web/public/manypixels_diversity-1-88.png
new file mode 100644
index 0000000..76d735d
Binary files /dev/null and b/apps/web/public/manypixels_diversity-1-88.png differ
diff --git a/apps/web/public/media-fallback-patient-tv.svg b/apps/web/public/media-fallback-patient-tv.svg
new file mode 100644
index 0000000..68a64e9
--- /dev/null
+++ b/apps/web/public/media-fallback-patient-tv.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 400" width="640" height="400" font-family="Helvetica, Arial, sans-serif">
+  
+  <rect width="640" height="400" rx="24" class="fb-bg" fill="#FBF7F0"></rect>
+  <line x1="320" y1="92" x2="284" y2="52" class="fb-ink-s" stroke="#2B2926" stroke-width="4" stroke-linecap="round"></line>
+  <line x1="320" y1="92" x2="360" y2="48" class="fb-ink-s" stroke="#2B2926" stroke-width="4" stroke-linecap="round"></line>
+  <circle cx="284" cy="52" r="6" fill="#E8684A">
+    
+  </circle>
+  <circle cx="360" cy="48" r="6" fill="#2FA9A2"></circle>
+  <rect x="228" y="88" width="184" height="136" rx="18" class="fb-ink" fill="#2B2926"></rect>
+  <rect x="242" y="102" width="156" height="108" rx="10" class="fb-bg" fill="#FBF7F0"></rect>
+  <ellipse cx="296" cy="148" rx="8" ry="8" class="fb-ink" fill="#2B2926">
+    
+  </ellipse>
+  <ellipse cx="344" cy="148" rx="8" ry="8" class="fb-ink" fill="#2B2926">
+    
+  </ellipse>
+  <rect x="308" y="176" width="24" height="4" rx="2" class="fb-ink" fill="#2B2926"></rect>
+  <line x1="288" y1="224" x2="276" y2="244" class="fb-ink-s" stroke="#2B2926" stroke-width="4" stroke-linecap="round"></line>
+  <line x1="352" y1="224" x2="364" y2="244" class="fb-ink-s" stroke="#2B2926" stroke-width="4" stroke-linecap="round"></line>
+  <text x="320" y="318" text-anchor="middle" font-size="26" font-weight="bold" class="fb-ink" fill="#2B2926">Media is currently loading...</text>
+  <text x="320" y="348" text-anchor="middle" font-size="16" class="fb-muted" fill="#6F6A63">If media did not load correctly just reload a page again..</text>
+</svg>
\ No newline at end of file
diff --git a/apps/web/public/philpro-colored-single.png b/apps/web/public/philpro-colored-single.png
new file mode 100644
index 0000000..391b23a
Binary files /dev/null and b/apps/web/public/philpro-colored-single.png differ
diff --git a/apps/web/public/philpro-dark.png b/apps/web/public/philpro-dark.png
new file mode 100644
index 0000000..77d5f99
Binary files /dev/null and b/apps/web/public/philpro-dark.png differ
diff --git a/apps/web/public/philpro-white-single.png b/apps/web/public/philpro-white-single.png
new file mode 100644
index 0000000..01cdc9b
Binary files /dev/null and b/apps/web/public/philpro-white-single.png differ
diff --git a/apps/web/public/philpro-white.png b/apps/web/public/philpro-white.png
new file mode 100644
index 0000000..26cd98b
Binary files /dev/null and b/apps/web/public/philpro-white.png differ
diff --git a/apps/web/src/App.css b/apps/web/src/App.css
new file mode 100644
index 0000000..f90339d
--- /dev/null
+++ b/apps/web/src/App.css
@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}
diff --git a/apps/web/src/App.jsx b/apps/web/src/App.jsx
new file mode 100644
index 0000000..8942580
--- /dev/null
+++ b/apps/web/src/App.jsx
@@ -0,0 +1,95 @@
+import { useEffect } from 'react';
+import { AuthProvider, useAuth, decodeToken } from './contexts/AuthContext';
+import { ThemeProvider } from './contexts/ThemeContext';
+import { DateTimePreferenceProvider } from './contexts/DateTimePreferenceContext';
+import { Helmet, HelmetProvider } from "react-helmet-async";
+import { TooltipProvider } from './components/ui/tooltip';
+import { setAuthInterceptor } from './utils/api.util';
+import { attachCsrfInterceptor, fetchCsrfToken } from './utils/csrf.util';
+import AppRouter from './routes/AppRouter';
+import AppLoadingScreen from './components/AppLoadingScreen';
+import './index.css';
+import 'react-photo-view/dist/react-photo-view.css';
+
+function AppWithAuth() {
+  const { accessTokenRef, setAccessToken, setUser, restoreSession, logout, loading } = useAuth()
+
+  useEffect(() => {
+    attachCsrfInterceptor()
+    fetchCsrfToken()
+    setAuthInterceptor(
+      () => accessTokenRef.current,
+      (newToken) => {
+        if (newToken) {
+          setAccessToken(newToken)
+          // setUser(decodeToken(newToken))
+          /*****************************************************************************
+          * REMOVED: setUser(decodeToken(newToken))
+          *
+          * WHY: This callback fires on EVERY silent token refresh (401 → /auth/refresh
+          * → retry), not just on initial login. decodeToken() only returns the raw JWT
+          * payload — { user_id, email, acc_type, reg_type, iat, exp } — which does NOT
+          * include personal_info, achievements, or any profile data.
+          *
+          * Each silent refresh was overwriting the full user object (originally set by
+          * login/verifyOTP/restoreSession via safeUser()) with this stripped-down JWT
+          * payload. After the first refresh, personal_info became undefined, causing:
+          *   - ClientNav to fall back to email instead of full name
+          *   - ROLE_CONFIG lookups to behave inconsistently
+          *   - Any component reading user.personal_info to silently break
+          *
+          * SUGGESTION: user state should ONLY be set from actual API responses that return
+          * safeUser() (login, verifyOTP, restoreSession). Token refresh should update
+          * ONLY the access token — never touch user. This applies uniformly across
+          * admin, client, and staff roles since they all share this interceptor.
+          * 
+          * Basis to see:
+          * AuthContext.jsx the setUser state for login(), restoreSession()
+          * auth.controller.js return outputs for login and refreshToken and so safeUser()
+          * 
+          * 
+          *****************************************************************************/
+        } else {
+          logout()
+        }
+      }
+    )
+    restoreSession()
+  }, [])
+
+  if (loading) return <AppLoadingScreen />
+
+  return <AppRouter />
+}
+
+{/* if there is revisions then remove Tooltip */ }
+
+export default function App() {
+  return (
+    <HelmetProvider>
+      {/* Global fallback — overridden by any mounted PageMeta */}
+      <Helmet>
+        <title>STARR | Philproperties</title>
+        <meta name="description" content="This is still in development phase. Come back soon." />
+        <meta name="keywords" content="philproperties, online courses, sales training" />
+        <meta property="og:title" content="STARR | Philproperties" />
+        <meta property="og:description" content="This is still in development phase. Come back soon." />
+        <meta property="og:type" content="website" />
+        <meta property="og:image" content="https://95306gu5u4.ufs.sh/f/uBRuoG2BEPFD7KSEgHPf2HyENZzXqhfcGpQsYtIMT9F5RWUC" />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content="STARR | Philproperties" />
+        <meta name="twitter:description" content="This is still in development phase. Come back soon." />
+        <meta name="twitter:image" content="https://95306gu5u4.ufs.sh/f/uBRuoG2BEPFD7KSEgHPf2HyENZzXqhfcGpQsYtIMT9F5RWUC" />
+      </Helmet>
+      <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
+        <DateTimePreferenceProvider>
+          <TooltipProvider delayDuration={300}>
+            <AuthProvider>
+              <AppWithAuth />
+            </AuthProvider>
+          </TooltipProvider>
+        </DateTimePreferenceProvider>
+      </ThemeProvider>
+    </HelmetProvider>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/assets/hero.png b/apps/web/src/assets/hero.png
new file mode 100644
index 0000000..02251f4
Binary files /dev/null and b/apps/web/src/assets/hero.png differ
diff --git a/apps/web/src/assets/react.svg b/apps/web/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/apps/web/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/apps/web/src/assets/vite.svg b/apps/web/src/assets/vite.svg
new file mode 100644
index 0000000..5101b67
--- /dev/null
+++ b/apps/web/src/assets/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>
diff --git a/apps/web/src/components/AppLoadingScreen.jsx b/apps/web/src/components/AppLoadingScreen.jsx
new file mode 100644
index 0000000..4e4f67c
--- /dev/null
+++ b/apps/web/src/components/AppLoadingScreen.jsx
@@ -0,0 +1,12 @@
+import { Spinner } from './ui/spinner'
+
+const APP_NAME = import.meta.env.VITE_APP_NAME ?? 'STARR'
+
+export default function AppLoadingScreen() {
+  return (
+    <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-background">
+      <Spinner className="size-10 text-primary" />
+      <p className="mt-4 text-sm text-muted-foreground tracking-wide">Loading {APP_NAME}...</p>
+    </div>
+  )
+}
diff --git a/apps/web/src/components/admin/advertisements/AdvertisementPreview.jsx b/apps/web/src/components/admin/advertisements/AdvertisementPreview.jsx
new file mode 100644
index 0000000..22a0314
--- /dev/null
+++ b/apps/web/src/components/admin/advertisements/AdvertisementPreview.jsx
@@ -0,0 +1,97 @@
+// components/admin/advertisements/AdvertisementPreview.jsx
+
+import { ChevronLeft, ChevronRight, Megaphone } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+
+// ── AdvertisementPreview ─────────────────────────────────────────────────────
+/**
+ * Live, presentational preview of a single ad slide as it will actually
+ * render inside the real Hero/Banner carousel (see components/generic/Blocks/
+ * Client/Advertisements/{Hero,Banner}.jsx) — same image + gradient overlay +
+ * bottom-left badge/headline/description layout, just scaled down for the
+ * admin form. The prev/next/progress chrome below the slide is static (no
+ * real carousel behind it, since there's only ever one slide to preview) —
+ * it's there purely so the admin recognizes this as "inside a carousel."
+ *
+ * Props:
+ *   format      — "hero" | "banner", determines slide height/typography
+ *   badgeLabels — string[]
+ *   headline    — string
+ *   description — string
+ *   imageSrc    — resolved image URL, or null/undefined
+ */
+export function AdvertisementPreview({ format = "hero", badgeLabels, headline, description, imageSrc }) {
+    const isHero = format !== "banner";
+    const labels = Array.isArray(badgeLabels) ? badgeLabels.filter(Boolean) : [];
+
+    return (
+        <div>
+            <p className="text-xs text-muted-foreground mb-2">
+                Preview — this is how it will appear in the carousel.
+            </p>
+            <Card className={cnRounded(isHero)}>
+                <CardContent className={cnHeight(isHero) + " relative bg-muted flex items-center justify-center p-0"}>
+                    {imageSrc ? (
+                        <img
+                            src={imageSrc}
+                            alt={headline || "Advertisement preview"}
+                            className="absolute inset-0 w-full h-full object-cover"
+                        />
+                    ) : (
+                        <Megaphone className="size-6 text-muted-foreground" />
+                    )}
+
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent" />
+
+                    <div className="absolute bottom-0 left-0 p-4 flex flex-col gap-2 max-w-[85%]">
+                        {labels.length > 0 && (
+                            <div className="flex items-center gap-1.5 flex-wrap">
+                                {labels.map((label, i) => (
+                                    <Badge key={i} variant="outline" className="pointer-events-none select-none w-fit border-white/30 bg-black/20 text-white">
+                                        <Megaphone /> {label}
+                                    </Badge>
+                                ))}
+                            </div>
+                        )}
+                        {headline && (
+                            <div className={(isHero ? "text-xl" : "text-lg") + " font-bold text-white leading-tight tracking-tight"}>
+                                {headline}
+                            </div>
+                        )}
+                        {description && (
+                            <p className="text-gray-200 text-xs leading-relaxed line-clamp-2">
+                                {description}
+                            </p>
+                        )}
+                    </div>
+                </CardContent>
+            </Card>
+
+            {/* Static carousel chrome — communicates "this sits inside a carousel," not functional */}
+            <div className="flex items-center justify-between mt-3">
+                <div className="flex items-center gap-2">
+                    <Button variant="outline" size="icon-sm" className="rounded-lg" disabled>
+                        <ChevronLeft />
+                    </Button>
+                    <Button variant="outline" size="icon-sm" className="rounded-lg" disabled>
+                        <ChevronRight />
+                    </Button>
+                </div>
+                <div className="flex-1 max-w-24 ml-4">
+                    <Progress value={100} className="h-2" />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function cnRounded(isHero) {
+    return "border overflow-hidden pl-0 py-0 " + (isHero ? "rounded-2xl" : "rounded-xl");
+}
+
+function cnHeight(isHero) {
+    return isHero ? "h-56" : "h-48";
+}
diff --git a/apps/web/src/components/coss/tabs.jsx b/apps/web/src/components/coss/tabs.jsx
new file mode 100644
index 0000000..8e8c611
--- /dev/null
+++ b/apps/web/src/components/coss/tabs.jsx
@@ -0,0 +1,69 @@
+"use client";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cn } from "@/lib/utils";
+
+export function Tabs({ className, ...props }) {
+  return (
+    <TabsPrimitive.Root
+      className={cn(
+        "flex flex-col gap-2 data-[orientation=vertical]:flex-row",
+        className,
+      )}
+      data-slot="tabs"
+      {...props}
+    />
+  );
+}
+
+export function TabsList({ variant = "default", className, children, ...props }) {
+  return (
+    <TabsPrimitive.List
+      className={cn(
+        "relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground",
+        "data-[orientation=vertical]:flex-col",
+        variant === "default"
+          ? "rounded-lg bg-muted p-0.5 text-muted-foreground/72"
+          : "data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent",
+        className,
+      )}
+      data-slot="tabs-list"
+      {...props}
+    >
+      {children}
+      <TabsPrimitive.Indicator
+        className={cn(
+          "absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out",
+          variant === "underline"
+            ? "z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:-translate-x-px data-[orientation=horizontal]:translate-y-px"
+            : "-z-1 rounded-md bg-background shadow-sm/5 dark:bg-input",
+        )}
+        data-slot="tab-indicator"
+      />
+    </TabsPrimitive.List>
+  );
+}
+
+export function TabsTab({ className, ...props }) {
+  return (
+    <TabsPrimitive.Tab
+      className={cn(
+        "relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
+        className,
+      )}
+      data-slot="tabs-tab"
+      {...props}
+    />
+  );
+}
+
+export function TabsPanel({ className, ...props }) {
+  return (
+    <TabsPrimitive.Panel
+      className={cn("flex-1 outline-none", className)}
+      data-slot="tabs-content"
+      {...props}
+    />
+  );
+}
+
+export { TabsPrimitive, TabsTab as TabsTrigger, TabsPanel as TabsContent };
\ No newline at end of file
diff --git a/apps/web/src/components/custom/interactive-hover-button.jsx b/apps/web/src/components/custom/interactive-hover-button.jsx
new file mode 100644
index 0000000..fc41b02
--- /dev/null
+++ b/apps/web/src/components/custom/interactive-hover-button.jsx
@@ -0,0 +1,42 @@
+import * as React from "react"
+import { ArrowRight } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+export function InteractiveHoverButton({
+  children,
+  className,
+  ...props
+}) {
+  // Split text and icons for consistent layout
+  const childArray = React.Children.toArray(children)
+  const hasIcon = childArray.length > 1
+
+  return (
+    <button
+      className={cn(
+        "group bg-background relative w-auto cursor-pointer overflow-hidden rounded-full border p-2 px-6 text-center font-medium transition-all disabled:pointer-events-none disabled:opacity-50",
+        className
+      )}
+      {...props}>
+      {/* Normal State */}
+      <div className="flex items-center justify-start gap-2">
+        <div className="bg-primary size-2 rounded-full transition-all duration-300 group-hover:scale-[300]" />
+        <span className="inline-flex items-center gap-2 transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0">
+          {childArray.map((child, index) => (
+            <React.Fragment key={index}>{child}</React.Fragment>
+          ))}
+        </span>
+      </div>
+
+      {/* Hover State */}
+      <div className="text-primary-foreground absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-2 opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100">
+        <span className="inline-flex items-center gap-2">
+          {childArray.map((child, index) => (
+            <React.Fragment key={index}>{child}</React.Fragment>
+          ))}
+        </span>
+        <ArrowRight className="size-4 shrink-0 xs:hidden lg:block" />
+      </div>
+    </button>
+  )
+}
diff --git a/apps/web/src/components/custom/original-tabs.jsx b/apps/web/src/components/custom/original-tabs.jsx
new file mode 100644
index 0000000..8d40da5
--- /dev/null
+++ b/apps/web/src/components/custom/original-tabs.jsx
@@ -0,0 +1,60 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props} />
+  );
+}
+
+function TabsList({
+  className,
+  ...props
+}) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props} />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/apps/web/src/components/custom/ripple-button.jsx b/apps/web/src/components/custom/ripple-button.jsx
new file mode 100644
index 0000000..34b4fc5
--- /dev/null
+++ b/apps/web/src/components/custom/ripple-button.jsx
@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from "react";
+
+import { cn } from "@/lib/utils"
+
+export const RippleButton = React.forwardRef((
+  {
+    className,
+    children,
+    rippleColor = "#ffffff",
+    duration = "600ms",
+    onClick,
+    ...props
+  },
+  ref
+) => {
+  const [buttonRipples, setButtonRipples] = useState([])
+
+  const handleClick = (event) => {
+    createRipple(event)
+    onClick?.(event)
+  }
+
+  const createRipple = (event) => {
+    const button = event.currentTarget
+    const rect = button.getBoundingClientRect()
+    const size = Math.max(rect.width, rect.height)
+    const x = event.clientX - rect.left - size / 2
+    const y = event.clientY - rect.top - size / 2
+
+    const newRipple = { x, y, size, key: Date.now() }
+    setButtonRipples((prevRipples) => [...prevRipples, newRipple])
+  }
+
+  useEffect(() => {
+    if (buttonRipples.length > 0) {
+      const lastRipple = buttonRipples[buttonRipples.length - 1]
+      const timeout = setTimeout(() => {
+        setButtonRipples((prevRipples) =>
+          prevRipples.filter((ripple) => ripple.key !== lastRipple.key))
+      }, parseInt(duration))
+      return () => clearTimeout(timeout);
+    }
+  }, [buttonRipples, duration])
+
+  return (
+    <button
+      className={cn(
+        "bg-background text-primary relative flex cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 px-4 py-2 text-center",
+        className
+      )}
+      onClick={handleClick}
+      ref={ref}
+      {...props}>
+      <div className="relative z-10">{children}</div>
+      <span className="pointer-events-none absolute inset-0">
+        {buttonRipples.map((ripple) => (
+          <span
+            className="animate-rippling bg-background absolute rounded-full opacity-30"
+            key={ripple.key}
+            style={{
+              width: `${ripple.size}px`,
+              height: `${ripple.size}px`,
+              top: `${ripple.y}px`,
+              left: `${ripple.x}px`,
+              backgroundColor: rippleColor,
+              transform: `scale(0)`,
+            }} />
+        ))}
+      </span>
+    </button>
+  );
+})
+
+RippleButton.displayName = "RippleButton"
diff --git a/apps/web/src/components/generic/AddBlockMenu.jsx b/apps/web/src/components/generic/AddBlockMenu.jsx
new file mode 100644
index 0000000..8fce213
--- /dev/null
+++ b/apps/web/src/components/generic/AddBlockMenu.jsx
@@ -0,0 +1,93 @@
+// components/generic/CMS/AddBlockMenu.jsx
+
+import { Plus, Type, Image, ImagePlay, Video, VideoIcon, Music2, Code2, FileText } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+const BLOCK_TYPES = [
+    {
+        type:        "text",
+        label:       "Text",
+        description: "A rich text block",
+        icon:        <Type className="h-4 w-4" />,
+    },
+    {
+        type:        "image",
+        label:       "Image",
+        description: "A single image",
+        icon:        <Image className="h-4 w-4" />,
+    },
+    {
+        type:        "text-image",
+        label:       "Text + Image",
+        description: "Text beside an image",
+        icon:        <ImagePlay className="h-4 w-4" />,
+    },
+    {
+        type:        "video",
+        label:       "Video",
+        description: "A single video",
+        icon:        <VideoIcon className="h-4 w-4" />,
+    },
+    {
+        type:        "text-video",
+        label:       "Text + Video",
+        description: "Text beside a video",
+        icon:        <Video className="h-4 w-4" />,
+    },
+    {
+        type:        "audio",
+        label:       "Audio",
+        description: "An audio player",
+        icon:        <Music2 className="h-4 w-4" />,
+    },
+    {
+        type:        "code",
+        label:       "Code",
+        description: "A syntax-highlighted code block",
+        icon:        <Code2 className="h-4 w-4" />,
+    },
+    {
+        type:        "markdown",
+        label:       "Markdown",
+        description: "Rich text written in Markdown",
+        icon:        <FileText className="h-4 w-4" />,
+    },
+];
+
+export function AddBlockMenu({ onAdd }) {
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button type="button" variant="outline" className="w-full border-dashed gap-2">
+                    <Plus className="h-4 w-4" />
+                    Add Block
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="center" className="w-56">
+                <DropdownMenuLabel>Choose a block type</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                {BLOCK_TYPES.map(({ type, label, description, icon }) => (
+                    <DropdownMenuItem
+                        key={type}
+                        onClick={() => onAdd(type)}
+                        className="flex items-start gap-3 py-2 cursor-pointer"
+                    >
+                        <span className="mt-0.5 text-muted-foreground">{icon}</span>
+                        <div className="flex flex-col">
+                            <span className="text-sm font-medium">{label}</span>
+                            <span className="text-xs text-muted-foreground">{description}</span>
+                        </div>
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/AdminStickyAnnouncementBar.jsx b/apps/web/src/components/generic/AdminStickyAnnouncementBar.jsx
new file mode 100644
index 0000000..e021454
--- /dev/null
+++ b/apps/web/src/components/generic/AdminStickyAnnouncementBar.jsx
@@ -0,0 +1,86 @@
+import { X } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { useAdminNotifications } from "@/contexts/AdminNotificationContext";
+import { getTierColor, getContrastText } from "@/utils/tierColors";
+import { goToLink } from "@/components/generic/notificationDisplay";
+
+// Admin counterpart to StickyAnnouncementBar (client). Only supports the
+// explicit link_url from the composer's "Link" section — the type-based
+// fallback resolver in notificationDisplay.jsx points at client-only routes
+// (/course/:id, /plans, /group/:id), which don't exist in the admin app.
+function resolveClickAction(stickyAnnouncement) {
+  const linkUrl = stickyAnnouncement.data?.linkUrl || null;
+  if (!linkUrl) return null;
+  return {
+    label: stickyAnnouncement.data?.linkLabel || "Open Link",
+    go: (navigate) => goToLink(linkUrl, navigate),
+  };
+}
+
+// Up to 2 sticky alerts shown at once, stacked — no dialog on click anymore;
+// the centered title text itself is the click target and redirects straight
+// to the alert's link (if any).
+const MAX_VISIBLE_STICKY = 2;
+
+function AdminStickyAnnouncementRow({ announcement, onDismiss }) {
+  const navigate = useNavigate();
+  const swatch    = getTierColor(announcement.color || "indigo").swatch;
+  const textColor = getContrastText(swatch, announcement.color || "indigo");
+  const clickAction = resolveClickAction(announcement);
+
+  return (
+    <div role="status" className="w-full shadow-sm px-4 md:px-6" style={{ backgroundColor: swatch }}>
+      <div className="relative w-full rounded-none py-3 flex items-center justify-center px-10">
+        <p
+          className={["text-sm font-semibold leading-snug truncate", clickAction ? "cursor-pointer" : ""].join(" ")}
+          style={{ color: textColor }}
+          onClick={clickAction ? () => clickAction.go(navigate) : undefined}
+        >
+          {announcement.title || "Announcement"}
+        </p>
+
+        {/* Only way to dismiss a sticky alert. */}
+        <div
+          role="button"
+          tabIndex={0}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            void onDismiss();
+          }}
+          onKeyDown={(e) => {
+            if (e.key !== "Enter" && e.key !== " ") return;
+            e.preventDefault();
+            e.stopPropagation();
+            void onDismiss();
+          }}
+          aria-label="Dismiss sticky announcement"
+          title="Dismiss"
+          className="absolute right-2 inline-flex items-center justify-center size-8 rounded-lg cursor-pointer hover:opacity-70 transition-opacity"
+          style={{ color: textColor }}
+        >
+          <X className="size-4" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function AdminStickyAnnouncementBar() {
+  const { stickyAnnouncements, markSeen } = useAdminNotifications();
+
+  const visible = stickyAnnouncements.slice(0, MAX_VISIBLE_STICKY);
+  if (visible.length === 0) return null;
+
+  return (
+    <div className="w-full flex flex-col">
+      {visible.map((announcement) => (
+        <AdminStickyAnnouncementRow
+          key={announcement.notification_id}
+          announcement={announcement}
+          onDismiss={() => markSeen(announcement.notification_id)}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/generic/AssetLoader.jsx b/apps/web/src/components/generic/AssetLoader.jsx
new file mode 100644
index 0000000..4d871eb
--- /dev/null
+++ b/apps/web/src/components/generic/AssetLoader.jsx
@@ -0,0 +1,10 @@
+// components/generic/AssetPageLoader.jsx
+import { Loader2 } from "lucide-react";
+
+export default function AssetPageLoader() {
+    return (
+        <div className="flex items-center justify-center h-96 rounded-lg border bg-muted/30">
+            <Loader2 className="size-8 animate-spin text-muted-foreground" />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/AssetPickerSheet.jsx b/apps/web/src/components/generic/AssetPickerSheet.jsx
new file mode 100644
index 0000000..67cee09
--- /dev/null
+++ b/apps/web/src/components/generic/AssetPickerSheet.jsx
@@ -0,0 +1,409 @@
+import { useEffect, useState, useCallback, useRef, memo } from "react";
+import { Search, CheckCircle2, SlidersHorizontal, X } from "lucide-react";
+
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "@/components/ui/sheet";
+import { Input }   from "@/components/ui/input";
+import { Button }  from "@/components/ui/button";
+import { Badge }   from "@/components/ui/badge";
+import { Spinner } from "@/components/ui/spinner";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+
+import { useAssets, useMediaTokens } from "@/contexts/AdminAssetsContext";
+import { formatPlayerTime } from "@/utils/format.util";
+
+const STREAM_BASE = `${import.meta.env.VITE_API_URL}/client/media/stream`;
+const DEBOUNCE_MS = 400;
+
+const EXT_OPTIONS = {
+    image:    ["svg", "png", "jpg", "jpeg", "webp", "gif"],
+    video:    ["mp4", "mov", "webm", "avi"],
+    audio:    ["mp3", "wav", "ogg", "m4a"],
+    document: ["pdf", "docx", "xlsx", "pptx"],
+};
+
+// ─── Asset Card ───────────────────────────────────────────────────────────────
+// streamSrc is resolved at the sheet level (batch token request) — no per-card fetch.
+// memo()'d because a sibling AssetPickerSheet's mediaTokens update re-runs
+// this component's own function body (context change) even when none of
+// THIS card's actual props changed — memo + a stable onSelect (see
+// handleSelect's useCallback below) lets it bail out instead of re-rendering
+// every card in every mounted-but-untouched picker.
+
+const AssetCard = memo(function AssetCard({ asset, streamSrc, selected, onSelect }) {
+    const directThumb = asset.thumbnail_url ?? asset.file_url;
+    const thumb = streamSrc ?? directThumb;
+    // duration comes straight off the asset row (ffprobe-derived at upload) —
+    // shows regardless of whether a thumbnail image loaded, since a missing
+    // preview shouldn't also mean losing the one other useful signal at a glance.
+    const showDuration = (asset.file_type === "video" || asset.file_type === "audio") && !!asset.duration;
+
+    return (
+        <button
+            type="button"
+            onClick={() => onSelect(asset)}
+            className={[
+                "relative rounded-lg border-2 overflow-hidden transition-all text-left w-full",
+                "hover:border-primary/60 hover:shadow-sm",
+                selected ? "border-primary ring-2 ring-primary/20" : "border-border",
+            ].join(" ")}
+        >
+            <div className="relative aspect-video bg-muted w-full overflow-hidden">
+                {thumb ? (
+                    <img src={thumb} alt={asset.display_name} className="w-full h-full object-cover" />
+                ) : (
+                    <div className="w-full h-full flex items-center justify-center">
+                        <span className="text-xs text-muted-foreground">No preview</span>
+                    </div>
+                )}
+                {showDuration && (
+                    <span className="absolute bottom-1 right-1 rounded bg-black/70 px-1.5 py-0.5 text-[10px] font-medium text-white tabular-nums">
+                        {formatPlayerTime(asset.duration)}
+                    </span>
+                )}
+            </div>
+            <div className="p-2">
+                <p className="text-xs font-medium truncate">{asset.display_name}</p>
+                {asset.extension && (
+                    <p className="text-[10px] text-muted-foreground uppercase mt-0.5">{asset.extension}</p>
+                )}
+            </div>
+            {selected && (
+                <div className="absolute top-1.5 right-1.5">
+                    <CheckCircle2 className="h-5 w-5 text-primary fill-white" />
+                </div>
+            )}
+        </button>
+    );
+});
+
+function EmptyState({ fileType }) {
+    return (
+        <div className="flex flex-col items-center justify-center h-48 gap-2">
+            <p className="text-sm text-muted-foreground">No {fileType} files found.</p>
+        </div>
+    );
+}
+
+// ─── Main Sheet ───────────────────────────────────────────────────────────────
+
+// allowedExtensions optionally narrows a fileType's picker to a subset of
+// EXT_OPTIONS (e.g. the Document Import block only wants pdf/pptx out of the
+// full document set). Omit it and behavior is unchanged from every existing
+// caller — the extension filter stays purely an opt-in user-facing toggle.
+export function AssetPickerSheet({ open, onOpenChange, fileType, onSelect, allowedExtensions }) {
+    // NOTE: previously this returned null before any hooks ran when `open` was
+    // false. Since the parent renders this component unconditionally (only the
+    // `open` prop toggles), that meant React remounted every hook from scratch
+    // on each open — wiping local state and forcing a full refetch every time,
+    // plus skipping the <Sheet> close transition. Visibility is controlled by
+    // <Sheet open={open}> below instead, so state survives across open/close
+    // toggles. Because this component now stays mounted for its parent's
+    // lifetime, a page with several media blocks keeps several instances
+    // mounted at once — assets/pagination/loading are therefore local state
+    // (below), not AdminAssetsContext state, so opening one picker doesn't
+    // re-render or stomp the list of every other mounted one. mediaTokens and
+    // the request-level TTL cache stay in context — they're pure per-asset /
+    // per-query caches, safe (and worth) sharing across instances.
+
+    const { fetchAssetsList } = useAssets();
+    // Separate context from useAssets() on purpose — see useMediaTokens's
+    // definition in AdminAssetsContext.jsx. Keeps this picker from
+    // re-rendering when the admin Assets table's unrelated list state changes.
+    const { mediaTokens, getMediaTokens } = useMediaTokens();
+
+    const [search,      setSearch]      = useState("");
+    const [activeExts,  setActiveExts]  = useState(new Set());
+    const [page,        setPage]        = useState(1);
+    const [selected,    setSelected]    = useState(null);
+    const [filterOpen,  setFilterOpen]  = useState(false);
+
+    // Local, per-instance list state — deliberately NOT shared context state.
+    // A page can mount many AssetPickerSheet instances at once (one per media
+    // block); sharing a single assets/pagination/loading slice meant opening
+    // one picker re-rendered and stomped the list of every other mounted one.
+    const [assets,        setAssets]        = useState([]);
+    const [pagination,    setPagination]    = useState({ page: 1, totalPages: 0, hasPrevPage: false, hasNextPage: false });
+    const [loading,       setLoading]       = useState(false);
+    // Tracks the follow-up batch token fetch separately from `loading` (the
+    // list fetch) — combined into `showSpinner` below so the grid never
+    // renders with placeholder "No preview" cards that then pop thumbnails
+    // in a beat later. One spinner, then everything appears already loaded.
+    const [tokensLoading, setTokensLoading]  = useState(false);
+
+    const debounceRef = useRef(null);
+    const isFirstSearchRun = useRef(true);
+    const LIMIT = 10;
+
+    const extOptions = allowedExtensions ?? EXT_OPTIONS[fileType] ?? [];
+
+    const resolveStreamSrc = useCallback((assetId) => {
+        const entry = mediaTokens[String(assetId)];
+        if (!entry) return null;
+        return entry.thumbnail_url ?? `${STREAM_BASE}/${entry.token}`;
+    }, [mediaTokens]);
+
+    // ── Build and fire fetch ──────────────────────────────────────────────────
+    const doFetch = useCallback((searchVal, extSet, pg) => {
+        // No chips picked: fall back to allowedExtensions (if the caller
+        // passed one) as a mandatory whitelist, otherwise no extension
+        // filter at all — matches every pre-existing caller's behavior.
+        const extFilterValue = extSet.size > 0 ? [...extSet] : (allowedExtensions ?? null);
+        const filters = [
+            ...(fileType         ? [{ id: "file_type",    value: [fileType]           }] : []),
+            ...(searchVal.trim() ? [{ id: "display_name", value: [searchVal.trim()]   }] : []),
+            ...(extFilterValue?.length ? [{ id: "extension", value: extFilterValue }] : []),
+        ];
+        setLoading(true);
+        fetchAssetsList({ page: pg, limit: LIMIT, filters })
+            .then(({ assets: nextAssets, pagination: nextPagination }) => {
+                setAssets(nextAssets);
+                setPagination(nextPagination);
+            })
+            .finally(() => setLoading(false));
+    }, [fileType, fetchAssetsList, allowedExtensions]);
+
+    // ── Immediate fetch: on open, or when filters/page change while open ──────
+    // (fetchAssets itself is TTL-cached in AdminAssetsContext, so reopening
+    // with the same query within the cache window costs no network round-trip.)
+    useEffect(() => {
+        if (!open) return;
+        doFetch(search, activeExts, page);
+    }, [open, activeExts, page]);
+
+    // ── Debounced fetch: only when the user edits the search box ──────────────
+    // Deliberately does NOT depend on `open` — otherwise this and the effect
+    // above both fire on every sheet open, doubling the request.
+    useEffect(() => {
+        if (isFirstSearchRun.current) { isFirstSearchRun.current = false; return; }
+        if (!open) return;
+        clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => {
+            setPage(1);
+            doFetch(search, activeExts, 1);
+        }, DEBOUNCE_MS);
+        return () => clearTimeout(debounceRef.current);
+    }, [search]);
+
+    // ── Batch token fetch after assets load ───────────────────────────────────
+    // One request for all S3 assets on the current page instead of N per-card
+    // requests. getMediaTokens (AdminAssetsContext) already skips any asset_id
+    // whose cached token is still valid, so reopening the sheet within the
+    // token's ~30min TTL issues no request at all for previously-seen assets.
+    useEffect(() => {
+        if (!open || !assets.length) return;
+
+        const s3Ids = assets
+            .filter((a) => a.storage_provider === "s3")
+            .map((a) => a.asset_id);
+
+        if (!s3Ids.length) return;
+
+        setTokensLoading(true);
+        getMediaTokens(s3Ids)
+            .catch((err) => {
+                console.warn("[AssetPickerSheet] batch token fetch failed:", err?.response?.status, err?.message);
+            })
+            .finally(() => setTokensLoading(false));
+    }, [assets, open, getMediaTokens]);
+
+    // ── Reset on close ────────────────────────────────────────────────────────
+    useEffect(() => {
+        if (!open) {
+            setSearch("");
+            setActiveExts(new Set());
+            setPage(1);
+            setSelected(null);
+            setFilterOpen(false);
+        }
+    }, [open]);
+
+    const toggleExt = (ext) => {
+        setActiveExts((prev) => {
+            const next = new Set(prev);
+            next.has(ext) ? next.delete(ext) : next.add(ext);
+            return next;
+        });
+        setPage(1);
+    };
+
+    const clearFilters = () => {
+        setActiveExts(new Set());
+        setPage(1);
+    };
+
+    // useCallback so AssetCard's memo() (above) actually has a stable prop to
+    // compare against — an inline function here would give every card a new
+    // onSelect reference on every render, defeating the memo entirely.
+    const handleSelect = useCallback((asset) => {
+        setSelected(asset.asset_id);
+        // Pass the resolved stream/presigned URL as a second arg so callers
+        // (e.g. badge image picker) can use the authenticated URL directly
+        // rather than falling back to asset.file_url which is a private CDN
+        // key that the browser cannot load without S3 credentials.
+        const resolvedUrl = resolveStreamSrc(asset.asset_id)
+            ?? asset.thumbnail_url
+            ?? asset.file_url
+            ?? null;
+        onSelect(asset, resolvedUrl);
+        onOpenChange(false);
+    }, [resolveStreamSrc, onSelect, onOpenChange]);
+
+    const label = fileType
+        ? `${fileType.charAt(0).toUpperCase()}${fileType.slice(1)}s`
+        : "Files";
+
+    const hasActiveFilters = activeExts.size > 0;
+    const showSpinner = loading || tokensLoading;
+
+    return (
+        <Sheet open={open} onOpenChange={onOpenChange}>
+            <SheetContent side="right" className="w-full sm:max-w-lg flex flex-col gap-0 p-0">
+
+                {/* ── Header ── */}
+                <SheetHeader className="px-6 pt-6 pb-4 border-b">
+                    <SheetTitle>Select {label}</SheetTitle>
+                    <SheetDescription>Click a file to attach it.</SheetDescription>
+                </SheetHeader>
+
+                {/* ── Search + Filter ── */}
+                <div className="px-6 py-3 border-b space-y-2">
+                    <div className="flex gap-2">
+                        <div className="relative flex-1">
+                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                            <Input
+                                placeholder={`Search ${label.toLowerCase()}…`}
+                                value={search}
+                                onChange={(e) => setSearch(e.target.value)}
+                                className="pl-9"
+                            />
+                        </div>
+
+                        {extOptions.length > 0 && (
+                            <Popover open={filterOpen} onOpenChange={setFilterOpen}>
+                                <PopoverTrigger asChild>
+                                    <Button
+                                        type="button"
+                                        variant={hasActiveFilters ? "default" : "outline"}
+                                        size="icon"
+                                        className="relative shrink-0"
+                                    >
+                                        <SlidersHorizontal className="h-4 w-4" />
+                                        {hasActiveFilters && (
+                                            <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground font-medium">
+                                                {activeExts.size}
+                                            </span>
+                                        )}
+                                    </Button>
+                                </PopoverTrigger>
+                                <PopoverContent align="end" className="w-56 p-3 space-y-1">
+                                    <div className="flex items-center justify-between">
+                                        <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">File type</p>
+                                        {hasActiveFilters && (
+                                            <button
+                                                type="button"
+                                                onClick={clearFilters}
+                                                className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                                            >
+                                                Clear
+                                            </button>
+                                        )}
+                                    </div>
+                                    <div className="flex flex-wrap gap-1.5">
+                                        {extOptions.map((ext) => (
+                                            <button
+                                                key={ext}
+                                                type="button"
+                                                onClick={() => toggleExt(ext)}
+                                                className={[
+                                                    "px-2.5 py-1 rounded-full border text-xs uppercase font-mono transition-colors",
+                                                    activeExts.has(ext)
+                                                        ? "bg-primary text-primary-foreground border-primary"
+                                                        : "bg-card border-border hover:bg-muted",
+                                                ].join(" ")}
+                                            >
+                                                {ext}
+                                            </button>
+                                        ))}
+                                    </div>
+                                </PopoverContent>
+                            </Popover>
+                        )}
+                    </div>
+
+                    {hasActiveFilters && (
+                        <div className="flex flex-wrap gap-1.5">
+                            {[...activeExts].map((ext) => (
+                                <Badge key={ext} variant="secondary" className="gap-1 pr-1 uppercase text-[10px] font-mono">
+                                    {ext}
+                                    <button type="button" onClick={() => toggleExt(ext)} className="ml-0.5 hover:opacity-70">
+                                        <X className="h-3 w-3" />
+                                    </button>
+                                </Badge>
+                            ))}
+                        </div>
+                    )}
+                </div>
+
+                {/* ── Grid ── */}
+                {/* showSpinner covers both the list fetch AND the follow-up batch
+                    token fetch, so the grid only ever appears once every card
+                    already has its thumbnail resolved — no placeholder-then-pop-in
+                    flicker. Spinner fills the full remaining sheet height (not a
+                    small fixed box) so it's centered in the whole visible area. */}
+                <div className="flex-1 overflow-y-auto px-6 py-4">
+                    {showSpinner ? (
+                        <div className="flex items-center justify-center h-full min-h-[24rem]">
+                            <Spinner className="h-6 w-6" />
+                        </div>
+                    ) : !assets.length ? (
+                        <EmptyState fileType={fileType ?? "asset"} />
+                    ) : (
+                        <div className="grid grid-cols-2 gap-3">
+                            {assets.map((asset) => (
+                                <AssetCard
+                                    key={asset.asset_id}
+                                    asset={asset}
+                                    streamSrc={resolveStreamSrc(asset.asset_id)}
+                                    selected={selected === asset.asset_id}
+                                    onSelect={handleSelect}
+                                />
+                            ))}
+                        </div>
+                    )}
+                </div>
+
+                {/* ── Pagination ── */}
+                {/* Always shown once there's at least one page of results (even a
+                    single page) — Prev/Next self-disable via hasPrevPage/hasNextPage,
+                    so a one-page list just reads "Page 1 of 1" with both disabled
+                    rather than hiding the control entirely. */}
+                {pagination.totalPages > 0 && (
+                    <div className="flex items-center justify-between px-6 py-3 border-t text-sm">
+                        <span className="text-muted-foreground">
+                            Page {pagination.page} of {pagination.totalPages}
+                        </span>
+                        <div className="flex gap-2">
+                            <button
+                                type="button"
+                                disabled={!pagination.hasPrevPage || showSpinner}
+                                onClick={() => setPage((p) => p - 1)}
+                                className="px-3 py-1 rounded border text-xs disabled:opacity-40 hover:bg-muted transition-colors"
+                            >
+                                Prev
+                            </button>
+                            <button
+                                type="button"
+                                disabled={!pagination.hasNextPage || showSpinner}
+                                onClick={() => setPage((p) => p + 1)}
+                                className="px-3 py-1 rounded border text-xs disabled:opacity-40 hover:bg-muted transition-colors"
+                            >
+                                Next
+                            </button>
+                        </div>
+                    </div>
+                )}
+
+            </SheetContent>
+        </Sheet>
+    );
+}
diff --git a/apps/web/src/components/generic/AvatarUploadDialog.jsx b/apps/web/src/components/generic/AvatarUploadDialog.jsx
new file mode 100644
index 0000000..1facf4b
--- /dev/null
+++ b/apps/web/src/components/generic/AvatarUploadDialog.jsx
@@ -0,0 +1,297 @@
+import { useState, useRef, useCallback } from 'react'
+import Cropper from 'react-easy-crop'
+import { Upload, Trash2, Loader2, ZoomIn, ZoomOut, ArrowLeft } from 'lucide-react'
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Separator } from '@/components/ui/separator'
+import { cn } from '@/lib/utils'
+
+const MAX_MB    = 5
+const MAX_BYTES = MAX_MB * 1024 * 1024
+const ALLOWED   = ['image/jpeg', 'image/png', 'image/webp', 'image/gif']
+
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.addEventListener('load', () => resolve(img))
+    img.addEventListener('error', reject)
+    img.setAttribute('crossOrigin', 'anonymous')
+    img.src = src
+  })
+}
+
+async function cropToBlob(imageSrc, pixels, outputSize = 200) {
+  const img = await loadImage(imageSrc)
+  const canvas = document.createElement('canvas')
+  canvas.width  = outputSize
+  canvas.height = outputSize
+  const ctx = canvas.getContext('2d')
+  ctx.drawImage(img, pixels.x, pixels.y, pixels.width, pixels.height, 0, 0, outputSize, outputSize)
+  return new Promise((resolve) => canvas.toBlob(resolve, 'image/jpeg', 0.93))
+}
+
+export default function AvatarUploadDialog({
+  open,
+  onClose,
+  currentAvatarUrl = '',
+  initials = '?',
+  onUpload,
+  onDelete,
+  loading = false,
+}) {
+  const [step,              setStep]              = useState('pick') // 'pick' | 'crop'
+  const [imageSrc,          setImageSrc]          = useState(null)
+  const [fileName,          setFileName]          = useState('')
+  const [dragOver,          setDragOver]          = useState(false)
+  const [error,             setError]             = useState('')
+  const [crop,              setCrop]              = useState({ x: 0, y: 0 })
+  const [zoom,              setZoom]              = useState(1)
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState(null)
+
+  const inputRef = useRef(null)
+
+  const reset = () => {
+    setStep('pick')
+    setImageSrc(null)
+    setFileName('')
+    setError('')
+    setDragOver(false)
+    setCrop({ x: 0, y: 0 })
+    setZoom(1)
+    setCroppedAreaPixels(null)
+  }
+
+  const handleClose = () => { reset(); onClose() }
+
+  const validate = (f) => {
+    if (!ALLOWED.includes(f.type)) {
+      setError('Unsupported format. Use JPEG, PNG, WebP or GIF.')
+      return false
+    }
+    if (f.size > MAX_BYTES) {
+      setError(`File too large — max is ${MAX_MB} MB.`)
+      return false
+    }
+    return true
+  }
+
+  const applyFile = (f) => {
+    setError('')
+    if (!validate(f)) return
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      setImageSrc(e.target.result)
+      setFileName(f.name)
+      setCrop({ x: 0, y: 0 })
+      setZoom(1)
+      setStep('crop')
+    }
+    reader.readAsDataURL(f)
+  }
+
+  const handleInputChange = (e) => {
+    const f = e.target.files?.[0]
+    if (f) applyFile(f)
+    e.target.value = ''
+  }
+
+  const handleDrop = (e) => {
+    e.preventDefault()
+    setDragOver(false)
+    const f = e.dataTransfer.files?.[0]
+    if (f) applyFile(f)
+  }
+
+  const onCropComplete = useCallback((_, pixels) => {
+    setCroppedAreaPixels(pixels)
+  }, [])
+
+  const handleUpload = async () => {
+    if (!croppedAreaPixels) return
+    const blob = await cropToBlob(imageSrc, croppedAreaPixels)
+    const file  = new File([blob], fileName || 'avatar.jpg', { type: 'image/jpeg' })
+    const result = await onUpload(file)
+    if (result?.success) handleClose()
+  }
+
+  const handleDelete = async () => {
+    const result = await onDelete()
+    if (result?.success) handleClose()
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-md p-0 overflow-hidden gap-0">
+
+        {/* ── Header ── */}
+        <DialogHeader className="px-5 pt-5 pb-4 border-b">
+          <div className="flex items-center gap-2">
+            {step === 'crop' && (
+              <button
+                onClick={() => { setStep('pick'); setImageSrc(null) }}
+                className="p-1 -ml-1 rounded-md hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+              >
+                <ArrowLeft size={16} />
+              </button>
+            )}
+            <DialogTitle className="text-base">
+              {step === 'crop' ? 'Adjust photo' : 'Change Avatar'}
+            </DialogTitle>
+          </div>
+        </DialogHeader>
+
+        {/* ── Step: pick ── */}
+        {step === 'pick' && (
+          <div className="px-5 py-5 space-y-4">
+            <div className="flex justify-center pb-1">
+              <Avatar className="size-24 ring-2 ring-border">
+                <AvatarImage src={currentAvatarUrl} />
+                <AvatarFallback className="text-2xl font-semibold">{initials}</AvatarFallback>
+              </Avatar>
+            </div>
+
+            <Separator />
+
+            <div
+              onClick={() => inputRef.current?.click()}
+              onDragOver={(e) => { e.preventDefault(); setDragOver(true) }}
+              onDragLeave={() => setDragOver(false)}
+              onDrop={handleDrop}
+              className={cn(
+                'border-2 border-dashed rounded-xl px-6 py-6 text-center cursor-pointer transition-colors select-none',
+                dragOver
+                  ? 'border-primary bg-primary/5'
+                  : 'border-border hover:border-muted-foreground/40 hover:bg-muted/40',
+                error && !dragOver && 'border-destructive/60 bg-destructive/5'
+              )}
+            >
+              <input
+                ref={inputRef}
+                type="file"
+                accept={ALLOWED.join(',')}
+                className="hidden"
+                onChange={handleInputChange}
+              />
+              <div className={cn(
+                'size-10 rounded-full flex items-center justify-center mx-auto mb-3',
+                error ? 'bg-destructive/10' : 'bg-muted'
+              )}>
+                <Upload className={cn('size-5', error ? 'text-destructive/70' : 'text-muted-foreground')} />
+              </div>
+              <p className="text-sm font-medium">
+                {dragOver ? 'Drop to select' : 'Click or drag & drop to upload'}
+              </p>
+              <p className="text-xs text-muted-foreground mt-1">
+                JPEG, PNG, WebP or GIF &middot; max {MAX_MB} MB
+              </p>
+              {error && (
+                <p className="text-xs text-destructive font-medium mt-2">{error}</p>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* ── Step: crop ── */}
+        {step === 'crop' && (
+          <div>
+            {/* Cropper canvas */}
+            <div className="relative h-72 bg-zinc-900">
+              <Cropper
+                image={imageSrc}
+                crop={crop}
+                zoom={zoom}
+                aspect={1}
+                cropShape="round"
+                showGrid={false}
+                onCropChange={setCrop}
+                onZoomChange={setZoom}
+                onCropComplete={onCropComplete}
+                style={{
+                  containerStyle: { borderRadius: 0 },
+                  cropAreaStyle: { border: '2px solid rgba(255,255,255,0.85)', boxShadow: '0 0 0 9999px rgba(0,0,0,0.55)' },
+                }}
+              />
+            </div>
+
+            {/* Zoom controls */}
+            <div className="px-5 py-4 space-y-2.5 border-b bg-background">
+              <div className="flex items-center gap-3">
+                <button
+                  onClick={() => setZoom((z) => Math.max(1, +(z - 0.1).toFixed(2)))}
+                  className="p-1.5 rounded-md hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+                >
+                  <ZoomOut size={15} />
+                </button>
+                <input
+                  type="range"
+                  min={1}
+                  max={3}
+                  step={0.01}
+                  value={zoom}
+                  onChange={(e) => setZoom(Number(e.target.value))}
+                  className="flex-1 h-1.5 appearance-none rounded-full bg-border cursor-pointer
+                    [&::-webkit-slider-thumb]:appearance-none
+                    [&::-webkit-slider-thumb]:size-4
+                    [&::-webkit-slider-thumb]:rounded-full
+                    [&::-webkit-slider-thumb]:bg-foreground
+                    [&::-webkit-slider-thumb]:cursor-pointer
+                    [&::-webkit-slider-thumb]:shadow-sm"
+                />
+                <button
+                  onClick={() => setZoom((z) => Math.min(3, +(z + 0.1).toFixed(2)))}
+                  className="p-1.5 rounded-md hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+                >
+                  <ZoomIn size={15} />
+                </button>
+              </div>
+              <p className="text-xs text-center text-muted-foreground">
+                Drag to reposition &middot; Scroll or pinch to zoom
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* ── Footer ── */}
+        {/* mx-0 mb-0 rounded-none bg-transparent override DialogFooter's negative margins
+            that assume p-4 on DialogContent — we use p-0 so those would overshoot */}
+        <DialogFooter className="mx-0 mb-0 rounded-none bg-transparent border-t px-5 py-4 sm:justify-end">
+          {step === 'pick' && currentAvatarUrl && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-destructive hover:text-destructive hover:bg-destructive/10 gap-1.5 sm:mr-auto"
+              onClick={handleDelete}
+              disabled={loading}
+            >
+              {loading
+                ? <Loader2 className="size-3.5 animate-spin" />
+                : <Trash2 className="size-3.5" />
+              }
+              Remove
+            </Button>
+          )}
+          <DialogClose asChild>
+            <Button variant="outline" size="sm" disabled={loading}>
+              Cancel
+            </Button>
+          </DialogClose>
+          {step === 'crop' && (
+            <Button
+              size="sm"
+              onClick={handleUpload}
+              disabled={!croppedAreaPixels || loading}
+              className="gap-1.5"
+            >
+              {loading && <Loader2 className="size-3.5 animate-spin" />}
+              Upload photo
+            </Button>
+          )}
+        </DialogFooter>
+
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/web/src/components/generic/BlockList.jsx b/apps/web/src/components/generic/BlockList.jsx
new file mode 100644
index 0000000..82b39c8
--- /dev/null
+++ b/apps/web/src/components/generic/BlockList.jsx
@@ -0,0 +1,96 @@
+// components/generic/CMS/BlockList.jsx
+
+import { BlockWrapper } from "./BlockWrapper";
+import { TextBlock } from "./Blocks/Admin/TextBlock";
+import { ImageBlock } from "./Blocks/Admin/ImageBlock";
+import { TextImageBlock } from "./Blocks/Admin/TextImageBlock";
+import { VideoBlock } from "./Blocks/Admin/VideoBlock";
+import { TextVideoBlock } from "./Blocks/Admin/TextVideoBlock";
+import { AudioBlock } from "./Blocks/Admin/AudioBlock";
+import { CodeBlock } from "./Blocks/Admin/CodeBlock";
+import { MarkdownBlock } from "./Blocks/Admin/MarkdownBlock";
+
+// ─── Block renderer ───────────────────────────────────────────────────────────
+//
+// blockId is forwarded to TextBlock (and any future rich-text blocks) so the
+// WYSIWYG editor knows exactly when to seed its innerHTML from saved data.
+
+function BlockContent({ block, onUpdate }) {
+  const { id, type, content } = block;
+
+  switch (type) {
+    case "text":
+      return (
+        <TextBlock
+          blockId={id}
+          content={content}
+          onUpdate={onUpdate}
+        />
+      );
+    case "image":
+      return <ImageBlock content={content} onUpdate={onUpdate} />;
+    case "text-image":
+      return <TextImageBlock blockId={id} content={content} onUpdate={onUpdate} />;
+    case "video":
+      return <VideoBlock content={content} onUpdate={onUpdate} />;
+    case "text-video":
+      return <TextVideoBlock blockId={id} content={content} onUpdate={onUpdate} />;
+    case "audio":
+      return <AudioBlock content={content} onUpdate={onUpdate} />;
+    case "code":
+      return <CodeBlock content={content} onUpdate={onUpdate} />;
+    case "markdown":
+      return <MarkdownBlock content={content} onUpdate={onUpdate} />;
+    default:
+      return <p className="text-sm text-muted-foreground">Unknown block type.</p>;
+  }
+}
+
+// ─── Default content per type ─────────────────────────────────────────────────
+
+export const DEFAULT_CONTENT = {
+  "text": { body: "" },
+  "image": { asset_id: null, url: "", alt: "" },
+  "text-image": { body: "", asset_id: null, url: "", alt: "", image_position: "right" },
+  "video": { asset_id: null, url: "", thumbnail_url: "", duration_seconds: 0 },
+  "text-video": { body: "", asset_id: null, url: "", thumbnail_url: "", video_position: "right", duration_seconds: 0 },
+  "audio":      { asset_id: null, url: "", title: "", artist: "", tag: "", thumbnail: "", duration_seconds: 0 },
+  "code":       { language: "javascript", code: "" },
+  "markdown":   { body: "" },
+};
+
+// ─── List ─────────────────────────────────────────────────────────────────────
+
+export function BlockList({ blocks, onUpdate, onMove, onDelete }) {
+  if (!blocks.length) {
+    return (
+      <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/20 py-16 gap-2">
+        <p className="text-sm text-muted-foreground">No blocks yet.</p>
+        <p className="text-xs text-muted-foreground">
+          Use the button below to add your first block.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      {blocks.map((block, index) => (
+        <BlockWrapper
+          key={block.id}
+          type={block.type}
+          index={index}
+          total={blocks.length}
+          onMoveUp={() => onMove(block.id, "up")}
+          onMoveDown={() => onMove(block.id, "down")}
+          onDelete={() => onDelete(block.id)}
+        >
+          <BlockContent
+            block={block}
+            onUpdate={(updated) => onUpdate(block.id, updated)}
+          />
+        </BlockWrapper>
+      ))}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/BlockWrapper.jsx b/apps/web/src/components/generic/BlockWrapper.jsx
new file mode 100644
index 0000000..6f5af9d
--- /dev/null
+++ b/apps/web/src/components/generic/BlockWrapper.jsx
@@ -0,0 +1,80 @@
+import { GripVertical, ChevronUp, ChevronDown, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge }  from "@/components/ui/badge";
+
+const BLOCK_LABELS = {
+  "text":       "Text",
+  "image":      "Image",
+  "text-image": "Text + Image",
+  "video":      "Video",
+  "text-video": "Text + Video",
+  "audio":      "Audio",
+};
+
+export function BlockWrapper({
+  type,
+  index,
+  total,
+  onMoveUp,
+  onMoveDown,
+  onDelete,
+  children,
+}) {
+  return (
+    <div className="group relative rounded-lg border bg-card transition-shadow hover:shadow-sm">
+
+      {/* ── Top toolbar ── */}
+      <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/40 rounded-t-lg">
+
+        {/* Left — drag handle + block type */}
+        <div className="flex items-center gap-2">
+          <GripVertical className="h-4 w-4 text-muted-foreground cursor-grab" />
+          <Badge variant="secondary" className="text-xs">
+            {BLOCK_LABELS[type] ?? type}
+          </Badge>
+          <span className="text-xs text-muted-foreground">
+            Block {index + 1}
+          </span>
+        </div>
+
+        {/* Right — move + delete */}
+        <div className="flex items-center gap-1">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            disabled={index === 0}
+            onClick={onMoveUp}
+          >
+            <ChevronUp className="h-4 w-4" />
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            disabled={index === total - 1}
+            onClick={onMoveDown}
+          >
+            <ChevronDown className="h-4 w-4" />
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 text-destructive hover:text-destructive hover:bg-destructive/10"
+            onClick={onDelete}
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* ── Block content ── */}
+      <div className="p-4">
+        {children}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Blocks/Admin/AudioBlock.jsx b/apps/web/src/components/generic/Blocks/Admin/AudioBlock.jsx
new file mode 100644
index 0000000..aa02ba7
--- /dev/null
+++ b/apps/web/src/components/generic/Blocks/Admin/AudioBlock.jsx
@@ -0,0 +1,404 @@
+import { useRef, useState, useEffect, useCallback } from "react";
+import {
+    Music2,
+    RotateCcw,
+    RotateCw,
+    Play,
+    Pause,
+    VolumeOff,
+    Volume2,
+} from "lucide-react";
+import { Label }            from "@/components/ui/label";
+import { Textarea }         from "@/components/ui/textarea";
+import { AssetPickerSheet } from "../../AssetPickerSheet";
+import api from "@/utils/api.util";
+import { MediaFallback } from "@/components/generic/MediaFallback";
+import { Spinner } from "@/components/ui/spinner";
+import { formatPlayerTime as fmtTime } from "@/utils/format.util";
+
+const API_BASE = (import.meta.env.VITE_API_URL ?? "http://localhost:3024").replace(/\/$/, "");
+
+const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2];
+
+// ─── AudioBlock (Admin) ───────────────────────────────────────────────────────
+
+export function AudioBlock({ content, onUpdate, readOnly = false }) {
+    const [pickerOpen, setPickerOpen] = useState(false);
+
+    // ── S3 token state — fetched when storage_provider is "s3" ───────────────
+    const [streamSrc,      setStreamSrc]      = useState(null);
+    const [streamThumb,    setStreamThumb]    = useState(null);
+    const [tokenLoading,   setTokenLoading]   = useState(false);
+
+    const audioRef  = useRef(null);
+    const [playing,     setPlaying]     = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [buffered,    setBuffered]    = useState(0);
+    const [duration,    setDuration]    = useState(0);
+    const [volume,      setVolume]      = useState(1);
+    const [muted,       setMuted]       = useState(false);
+    const [speedIdx,    setSpeedIdx]    = useState(2); // 1×
+    // True from the moment `src` is set until the browser has actually
+    // buffered enough to play (or stalls mid-playback) — same gap VideoBlock
+    // closes, so a slow-loading audio file doesn't just sit there silently.
+    const [mediaLoading, setMediaLoading] = useState(true);
+
+    const assetId         = content.asset_id       ?? null;
+    const storageProvider = content.storage_provider ?? null;
+    const isS3            = storageProvider === "s3";
+
+    // For S3 assets, use the stream URL fetched via admin token.
+    // For all other providers, use the raw url/src from block content.
+    const src       = isS3 ? (streamSrc ?? "")      : (content.url ?? content.src ?? "");
+    const title     = content.title     ?? "Audio";
+    const artist    = content.artist    ?? "";
+    const tag       = content.tag       ?? "";
+    const thumbnail = isS3 ? (streamThumb ?? content.thumbnail ?? null) : (content.thumbnail ?? null);
+
+    // ── Fetch admin token for S3 assets ───────────────────────────────────────
+    useEffect(() => {
+        if (!assetId || !isS3) {
+            setStreamSrc(null);
+            setStreamThumb(null);
+            return;
+        }
+        let cancelled = false;
+        setTokenLoading(true);
+        api.post("/admin/media/token", { asset_id: assetId })
+            .then(({ data }) => {
+                if (cancelled) return;
+                const { token, thumbnail_url } = data?.data ?? {};
+                if (token) setStreamSrc(`${API_BASE}/client/media/stream/${token}`);
+                if (thumbnail_url) setStreamThumb(thumbnail_url);
+            })
+            .catch(() => { /* non-fatal — player shows nothing */ })
+            .finally(() => { if (!cancelled) setTokenLoading(false); });
+        return () => { cancelled = true; };
+    }, [assetId, isS3]);
+
+    // Reset the loading spinner whenever the src actually changes (new
+    // asset picked, or the S3 token above just resolved).
+    useEffect(() => { setMediaLoading(true); }, [src]);
+
+    // ── Audio events ──────────────────────────────────────────────────────────
+
+    const onTimeUpdate = useCallback(() => setCurrentTime(audioRef.current?.currentTime ?? 0), []);
+    const onLoadedMeta = useCallback(() => setDuration(audioRef.current?.duration ?? 0), []);
+    const onEnded      = useCallback(() => setPlaying(false), []);
+    const onProgress   = useCallback(() => {
+        const el = audioRef.current;
+        if (el?.buffered.length && el.duration) {
+            setBuffered((el.buffered.end(el.buffered.length - 1) / el.duration) * 100);
+        }
+    }, []);
+    const onLoadedData = useCallback(() => setMediaLoading(false), []);
+    const onCanPlay    = useCallback(() => setMediaLoading(false), []);
+    const onWaiting     = useCallback(() => setMediaLoading(true), []);
+    const onPlaying     = useCallback(() => setMediaLoading(false), []);
+
+    // ── Controls ──────────────────────────────────────────────────────────────
+
+    const togglePlay = () => {
+        const el = audioRef.current;
+        if (!el) return;
+        if (playing) { el.pause(); setPlaying(false); }
+        else         { el.play();  setPlaying(true);  }
+    };
+
+    const seek = (e) => {
+        const el  = audioRef.current;
+        const bar = e.currentTarget;
+        const pct = (e.clientX - bar.getBoundingClientRect().left) / bar.offsetWidth;
+        el.currentTime = pct * duration;
+    };
+
+    const skip = (secs) => {
+        const el = audioRef.current;
+        if (!el) return;
+        el.currentTime = Math.min(Math.max(0, el.currentTime + secs), duration);
+    };
+
+    const handleVolume = (e) => {
+        const v = parseFloat(e.target.value);
+        setVolume(v);
+        if (audioRef.current) audioRef.current.volume = v;
+        setMuted(v === 0);
+    };
+
+    const toggleMute = () => {
+        const el = audioRef.current;
+        if (!el) return;
+        el.muted = !muted;
+        setMuted(!muted);
+    };
+
+    const cycleSpeed = () => {
+        const next = (speedIdx + 1) % SPEEDS.length;
+        setSpeedIdx(next);
+        if (audioRef.current) audioRef.current.playbackRate = SPEEDS[next];
+    };
+
+    const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+
+    // ── Asset picker handler ──────────────────────────────────────────────────
+    //
+    // Stores all metadata needed by the client AudioBlock at render time so
+    // the client never needs a separate API call to fetch asset details.
+    //
+    // Fields saved to block content:
+    //   asset_id     — used by client for the secure token flow
+    //   url          — used by admin player (direct src); ignored by client for S3
+    //   title        — display name (kept if already customised, else asset name)
+    //   artist       — cleared on new pick so stale artist doesn't carry over
+    //   thumbnail    — cover art from asset.thumbnail_url
+    //   tag          — file extension badge e.g. "MP3"
+    //   duration_seconds — probed media length, read by duration.util.js on save
+    //
+    const handleSelect = (asset) => {
+        onUpdate({
+            asset_id:         asset.asset_id,
+            // url is null for S3 (redacted server-side); Chibisafe/CDN keeps its raw URL
+            url:              asset.file_url ?? null,
+            storage_provider: asset.storage_provider ?? null,
+            title:            asset.display_name,
+            artist:           "",
+            thumbnail:        asset.thumbnail_url ?? null,
+            tag:              asset.extension?.toUpperCase() ?? "",
+            duration_seconds: Number(asset.duration) || 0,
+        });
+        setPlaying(false);
+        setCurrentTime(0);
+        setDuration(0);
+        setBuffered(0);
+        setStreamSrc(null);
+        setStreamThumb(null);
+    };
+
+    // ─────────────────────────────────────────────────────────────────────────
+
+    return (
+        <div className="space-y-3">
+            {!readOnly && <Label>Audio</Label>}
+
+            {isS3 && tokenLoading ? (
+                <MediaFallback className="w-full h-28 rounded-xl border border-border" />
+            ) : src ? (
+                <div className="w-full rounded-xl overflow-hidden border border-border bg-card text-card-foreground shadow-sm">
+                    <audio
+                        ref={audioRef}
+                        src={src}
+                        onTimeUpdate={onTimeUpdate}
+                        onLoadedMetadata={onLoadedMeta}
+                        onEnded={onEnded}
+                        onProgress={onProgress}
+                        onLoadedData={onLoadedData}
+                        onCanPlay={onCanPlay}
+                        onWaiting={onWaiting}
+                        onPlaying={onPlaying}
+                        preload="metadata"
+                    />
+
+                    {/* ── Header ── */}
+                    <div className="relative overflow-hidden">
+                        {thumbnail ? (
+                            <div
+                                className="absolute inset-0 scale-110"
+                                style={{
+                                    backgroundImage:    `url(${thumbnail})`,
+                                    backgroundSize:     "cover",
+                                    backgroundPosition: "center",
+                                    filter:             "blur(24px) brightness(0.35)",
+                                }}
+                            />
+                        ) : (
+                            <div className="absolute inset-0 bg-primary" />
+                        )}
+
+                        <div className="relative z-10 flex items-center gap-4 p-4 text-white">
+                            <div className="shrink-0 w-20 h-20 rounded-md overflow-hidden bg-black/25 flex items-center justify-center">
+                                {mediaLoading ? (
+                                    <Spinner className="size-6 text-white" />
+                                ) : thumbnail ? (
+                                    <img src={thumbnail} alt={title} className="w-full h-full object-cover" />
+                                ) : (
+                                    <Music2 className="w-7 h-7 text-white/30" />
+                                )}
+                            </div>
+                            <div className="flex flex-col gap-1 flex-1 min-w-0">
+                                {tag && (
+                                    <div className="text-xs font-semibold rounded-full uppercase px-2 py-0.5 bg-card text-card-foreground border w-fit">
+                                        {tag}
+                                    </div>
+                                )}
+                                <p className="text-sm font-semibold leading-snug line-clamp-3">{title}</p>
+                                {artist && <p className="text-xs text-white/60 line-clamp-2">{artist}</p>}
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* ── Controls ── */}
+                    <div className="px-4 pb-4 pt-3 space-y-3">
+
+                        {/* Progress bar */}
+                        <div className="flex items-center gap-2.5">
+                            <span className="text-xs tabular-nums text-muted-foreground w-8 shrink-0">
+                                {fmtTime(currentTime)}
+                            </span>
+                            <div
+                                className="flex-1 h-1.5 rounded-full bg-muted cursor-pointer relative group"
+                                onClick={seek}
+                                role="slider"
+                                aria-label="Seek"
+                                aria-valuenow={Math.round(progress)}
+                                aria-valuemin={0}
+                                aria-valuemax={100}
+                            >
+                                <div
+                                    className="absolute inset-y-0 left-0 rounded-full bg-muted-foreground/25 transition-[width] duration-300"
+                                    style={{ width: `${buffered}%` }}
+                                />
+                                <div
+                                    className="h-full rounded-full bg-primary transition-all relative"
+                                    style={{ width: `${progress}%` }}
+                                />
+                                <div
+                                    className="absolute top-1/2 w-3 h-3 rounded-full bg-primary opacity-0 group-hover:opacity-100 transition-opacity"
+                                    style={{ left: `${progress}%`, transform: "translate(-50%, -50%)" }}
+                                />
+                            </div>
+                            <span className="text-xs tabular-nums text-muted-foreground w-8 shrink-0 text-right">
+                                {fmtTime(duration)}
+                            </span>
+                        </div>
+
+                        {/* Button row */}
+                        <div className="grid grid-cols-3 items-center">
+
+                            {/* Volume */}
+                            <div className="flex items-center gap-1.5">
+                                <button
+                                    onClick={toggleMute}
+                                    aria-label={muted ? "Unmute" : "Mute"}
+                                    className="w-7 h-7 flex items-center justify-center rounded-full text-foreground hover:bg-muted transition-colors"
+                                >
+                                    {muted || volume === 0
+                                        ? <VolumeOff className="size-4" />
+                                        : <Volume2   className="size-4" />
+                                    }
+                                </button>
+                                <input
+                                    type="range" min="0" max="1" step="0.05"
+                                    value={muted ? 0 : volume}
+                                    onChange={handleVolume}
+                                    aria-label="Volume"
+                                    className="w-16 h-1.5 accent-primary cursor-pointer
+                                        [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:cursor-pointer
+                                        [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:cursor-pointer"
+                                />
+                            </div>
+
+                            {/* Play controls */}
+                            <div className="flex items-center justify-center gap-2">
+                                <button
+                                    onClick={() => skip(-10)}
+                                    aria-label="Rewind 10s"
+                                    className="p-2 flex items-center justify-center rounded-full text-foreground hover:bg-muted transition-colors"
+                                >
+                                    <RotateCcw className="size-4" />
+                                </button>
+                                <button
+                                    onClick={togglePlay}
+                                    aria-label={playing ? "Pause" : "Play"}
+                                    className="p-3 rounded-full flex items-center justify-center bg-primary text-primary-foreground hover:opacity-80 transition-opacity active:scale-95 shadow-md"
+                                >
+                                    {playing
+                                        ? <Pause className="size-4" />
+                                        : <Play  className="size-4" />
+                                    }
+                                </button>
+                                <button
+                                    onClick={() => skip(10)}
+                                    aria-label="Forward 10s"
+                                    className="p-2 flex items-center justify-center rounded-full text-foreground hover:bg-muted transition-colors"
+                                >
+                                    <RotateCw className="size-4" />
+                                </button>
+                            </div>
+
+                            {/* Speed */}
+                            <div className="flex items-center justify-end">
+                                <button
+                                    onClick={cycleSpeed}
+                                    aria-label={`Speed ${SPEEDS[speedIdx]}x`}
+                                    className="h-7 px-2 rounded text-sm font-medium text-foreground hover:bg-muted transition-colors tabular-nums"
+                                >
+                                    {SPEEDS[speedIdx]}x
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* ── Change audio (admin only) ── */}
+                    {!readOnly && (
+                        <div className="px-4 pb-4">
+                            <button
+                                type="button"
+                                onClick={() => setPickerOpen(true)}
+                                className="w-full text-sm text-muted-foreground border rounded-md py-1.5 hover:bg-muted transition-colors"
+                            >
+                                Change audio
+                            </button>
+                        </div>
+                    )}
+                </div>
+            ) : (
+                <button
+                    type="button"
+                    onClick={() => !readOnly && setPickerOpen(true)}
+                    className="w-full py-12 rounded-lg border-2 border-dashed border-muted-foreground/30 hover:border-primary/50 hover:bg-muted/20 transition-colors flex flex-col items-center justify-center gap-2"
+                >
+                    <Music2 className="h-8 w-8 text-muted-foreground/50" />
+                    <p className="text-sm text-muted-foreground">Click to select an audio file</p>
+                </button>
+            )}
+
+            {/* ── Metadata fields (admin only) ─────────────────────────────────
+                These fields are saved into block content and rendered directly
+                by the client AudioBlock — no extra API call needed at runtime. */}
+            {!readOnly && src && (
+                <div className="space-y-3 pt-1">
+                    <div className="space-y-1.5">
+                        <Label htmlFor="audio-title">Title</Label>
+                        <Textarea
+                            id="audio-title"
+                            rows={2}
+                            value={content.title ?? ""}
+                            onChange={(e) => onUpdate({ ...content, title: e.target.value })}
+                            placeholder="Track title"
+                        />
+                    </div>
+                    <div className="space-y-1.5">
+                        <Label htmlFor="audio-artist">Artist / Subtitle</Label>
+                        <Textarea
+                            id="audio-artist"
+                            rows={2}
+                            value={content.artist ?? ""}
+                            onChange={(e) => onUpdate({ ...content, artist: e.target.value })}
+                            placeholder="Artist name or subtitle"
+                        />
+                    </div>
+                </div>
+            )}
+
+            {/* ── Asset picker ── */}
+            {!readOnly && (
+                <AssetPickerSheet
+                    open={pickerOpen}
+                    onOpenChange={setPickerOpen}
+                    fileType="audio"
+                    onSelect={handleSelect}
+                />
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Blocks/Admin/CodeBlock.jsx b/apps/web/src/components/generic/Blocks/Admin/CodeBlock.jsx
new file mode 100644
index 0000000..e0b7c41
--- /dev/null
+++ b/apps/web/src/components/generic/Blocks/Admin/CodeBlock.jsx
@@ -0,0 +1,48 @@
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+
+const LANGUAGES = [
+    { value: "html",       label: "HTML" },
+    { value: "css",        label: "CSS" },
+    { value: "javascript", label: "JavaScript" },
+    { value: "typescript", label: "TypeScript" },
+    { value: "jsx",        label: "JSX / TSX" },
+    { value: "python",     label: "Python" },
+    { value: "sql",        label: "SQL" },
+    { value: "bash",       label: "Shell / Bash" },
+    { value: "json",       label: "JSON" },
+    { value: "text",       label: "Plain Text" },
+];
+
+export function CodeBlock({ content, onUpdate }) {
+    return (
+        <div className="space-y-3">
+            <div className="flex items-center gap-3">
+                <Label>Language</Label>
+                <select
+                    value={content.language ?? "javascript"}
+                    onChange={(e) => onUpdate({ ...content, language: e.target.value })}
+                    className="h-7 text-xs border rounded px-2 bg-background cursor-pointer"
+                >
+                    {LANGUAGES.map((l) => (
+                        <option key={l.value} value={l.value}>{l.label}</option>
+                    ))}
+                </select>
+            </div>
+
+            <div className="space-y-1.5">
+                <Label>Code</Label>
+                <Textarea
+                    value={content.code ?? ""}
+                    onChange={(e) => onUpdate({ ...content, code: e.target.value })}
+                    placeholder="// Write or paste your code here..."
+                    className="font-mono text-sm min-h-[180px] resize-y leading-relaxed"
+                    spellCheck={false}
+                    autoComplete="off"
+                    autoCorrect="off"
+                    autoCapitalize="off"
+                />
+            </div>
+        </div>
+    );
+}
diff --git a/apps/web/src/components/generic/Blocks/Admin/ImageBlock.jsx b/apps/web/src/components/generic/Blocks/Admin/ImageBlock.jsx
new file mode 100644
index 0000000..a507bec
--- /dev/null
+++ b/apps/web/src/components/generic/Blocks/Admin/ImageBlock.jsx
@@ -0,0 +1,86 @@
+import { useState } from "react";
+import { ImageIcon } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { AssetPickerSheet } from "../../AssetPickerSheet";
+import { useAssetPreviewSrc } from "@/hooks/useAssetPreviewSrc";
+import { MediaFallback } from "@/components/generic/MediaFallback";
+
+
+function MediaPlaceholder({ onClick }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="w-full aspect-video rounded-lg border-2 border-dashed border-muted-foreground/30 hover:border-primary/50 hover:bg-muted/20 transition-colors flex flex-col items-center justify-center gap-2"
+    >
+      <ImageIcon className="h-8 w-8 text-muted-foreground/50" />
+      <p className="text-sm text-muted-foreground">
+        Click to select an image
+      </p>
+    </button>
+  );
+}
+
+export function ImageBlock({ content, onUpdate, readOnly = false }) {
+  const [pickerOpen, setPickerOpen] = useState(false);
+
+  // content.url is redacted (null) server-side for S3 assets — see
+  // redactS3Url() in controllers/admin/assets.controller.js. Re-resolve
+  // through media.util.js instead of trusting the persisted url/thumbnail.
+  const { src, loading } = useAssetPreviewSrc(
+    { asset_id: content?.asset_id, storage_provider: content?.storage_provider, file_url: content?.url, thumbnail_url: content?.url },
+    { scope: "admin" },
+  );
+
+  return (
+    <div className="space-y-3">
+      <Label>Image</Label>
+
+      {loading ? (
+        <MediaFallback className="w-full aspect-video rounded-lg" />
+      ) : src ? (
+        <div
+          className="relative rounded-lg overflow-hidden cursor-pointer group"
+          onClick={() => setPickerOpen(true)}
+        >
+          <img
+            src={src}
+            alt={content.alt ?? ""}
+            className="w-full aspect-video object-cover"
+          />
+          <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+            <p className="text-white text-sm font-medium">Change Image</p>
+          </div>
+        </div>
+      ) : (
+        <MediaPlaceholder onClick={() => setPickerOpen(true)} />
+      )}
+
+      {content.asset_id && (
+        <div className="space-y-1.5">
+          <Label>Alt Text</Label>
+          <Input
+            placeholder="Describe the image..."
+            value={content.alt ?? ""}
+            onChange={(e) => onUpdate({ ...content, alt: e.target.value })}
+          />
+        </div>
+      )}
+
+      {!readOnly && (
+        <AssetPickerSheet
+          open={pickerOpen}
+          onOpenChange={setPickerOpen}
+          fileType="image"
+          onSelect={(asset) => onUpdate({
+            ...content,
+            asset_id: asset.asset_id,
+            storage_provider: asset.storage_provider ?? null,
+            url: asset.file_url,
+          })}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/generic/Blocks/Admin/MarkdownBlock.jsx b/apps/web/src/components/generic/Blocks/Admin/MarkdownBlock.jsx
new file mode 100644
index 0000000..c202210
--- /dev/null
+++ b/apps/web/src/components/generic/Blocks/Admin/MarkdownBlock.jsx
@@ -0,0 +1,157 @@
+import { useRef, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+import {
+    Bold, Italic, Heading2, Code, Code2,
+    Link2, List, ListOrdered, Quote, Minus, Eye, Pencil,
+} from "lucide-react";
+
+// ─── Toolbar button ───────────────────────────────────────────────────────────
+
+function ToolbarBtn({ title, onClick, children, active }) {
+    return (
+        <button
+            type="button"
+            title={title}
+            onMouseDown={(e) => { e.preventDefault(); onClick(); }}
+            className={cn(
+                "h-7 w-7 flex items-center justify-center rounded text-muted-foreground shrink-0",
+                "hover:bg-accent hover:text-accent-foreground transition-colors",
+                active && "bg-accent text-accent-foreground"
+            )}
+        >
+            {children}
+        </button>
+    );
+}
+
+function Divider() {
+    return <span className="w-px h-4 bg-border mx-0.5 shrink-0" />;
+}
+
+// ─── MarkdownBlock ────────────────────────────────────────────────────────────
+
+export function MarkdownBlock({ content, onUpdate }) {
+    const [preview, setPreview] = useState(false);
+    const textareaRef = useRef(null);
+
+    const body = content.body ?? "";
+
+    // Insert markdown syntax at cursor, wrapping selection when applicable
+    const insert = (before, after = "", placeholder = "") => {
+        const el = textareaRef.current;
+        if (!el) return;
+        el.focus();
+        const start = el.selectionStart;
+        const end   = el.selectionEnd;
+        const selected = body.slice(start, end) || placeholder;
+        const next = body.slice(0, start) + before + selected + after + body.slice(end);
+        onUpdate({ ...content, body: next });
+        // Restore cursor after React re-render
+        requestAnimationFrame(() => {
+            el.focus();
+            const cursor = start + before.length + selected.length + after.length;
+            el.setSelectionRange(cursor, cursor);
+        });
+    };
+
+    const insertLine = (prefix) => {
+        const el = textareaRef.current;
+        if (!el) return;
+        el.focus();
+        const start = el.selectionStart;
+        const lineStart = body.lastIndexOf("\n", start - 1) + 1;
+        const next = body.slice(0, lineStart) + prefix + body.slice(lineStart);
+        onUpdate({ ...content, body: next });
+        requestAnimationFrame(() => {
+            el.focus();
+            el.setSelectionRange(start + prefix.length, start + prefix.length);
+        });
+    };
+
+    return (
+        <div className="space-y-1.5">
+            <Label>Markdown Content</Label>
+            <div className="border rounded-md overflow-hidden focus-within:ring-2 focus-within:ring-ring">
+
+                {/* ── Toolbar ── */}
+                <div className="flex flex-wrap items-center gap-0.5 px-2 py-1.5 border-b bg-muted/40">
+                    <ToolbarBtn title="Bold" onClick={() => insert("**", "**", "bold text")}>
+                        <Bold className="h-3.5 w-3.5" />
+                    </ToolbarBtn>
+                    <ToolbarBtn title="Italic" onClick={() => insert("*", "*", "italic text")}>
+                        <Italic className="h-3.5 w-3.5" />
+                    </ToolbarBtn>
+                    <Divider />
+                    <ToolbarBtn title="Heading 2" onClick={() => insertLine("## ")}>
+                        <Heading2 className="h-3.5 w-3.5" />
+                    </ToolbarBtn>
+                    <Divider />
+                    <ToolbarBtn title="Inline code" onClick={() => insert("`", "`", "code")}>
+                        <Code className="h-3.5 w-3.5" />
+                    </ToolbarBtn>
+                    <ToolbarBtn title="Code block" onClick={() => insert("```\n", "\n```", "your code here")}>
+                        <Code2 className="h-3.5 w-3.5" />
+                    </ToolbarBtn>
+                    <Divider />
+                    <ToolbarBtn title="Link" onClick={() => insert("[", "](url)", "link text")}>
+                        <Link2 className="h-3.5 w-3.5" />
+                    </ToolbarBtn>
+                    <Divider />
+                    <ToolbarBtn title="Bullet list" onClick={() => insertLine("- ")}>
+                        <List className="h-3.5 w-3.5" />
+                    </ToolbarBtn>
+                    <ToolbarBtn title="Numbered list" onClick={() => insertLine("1. ")}>
+                        <ListOrdered className="h-3.5 w-3.5" />
+                    </ToolbarBtn>
+                    <ToolbarBtn title="Blockquote" onClick={() => insertLine("> ")}>
+                        <Quote className="h-3.5 w-3.5" />
+                    </ToolbarBtn>
+                    <ToolbarBtn title="Horizontal rule" onClick={() => insert("\n---\n", "", "")}>
+                        <Minus className="h-3.5 w-3.5" />
+                    </ToolbarBtn>
+
+                    {/* Spacer */}
+                    <div className="flex-1" />
+
+                    {/* Preview toggle */}
+                    <Divider />
+                    <ToolbarBtn
+                        title={preview ? "Edit" : "Preview"}
+                        active={preview}
+                        onClick={() => setPreview((p) => !p)}
+                    >
+                        {preview ? <Pencil className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+                    </ToolbarBtn>
+                </div>
+
+                {/* ── Edit / Preview ── */}
+                {preview ? (
+                    <div className="min-h-[180px] px-3 py-3">
+                        {body.trim() ? (
+                            <div className="typeset text-sm">
+                                <ReactMarkdown remarkPlugins={[remarkGfm]}>{body}</ReactMarkdown>
+                            </div>
+                        ) : (
+                            <p className="text-xs text-muted-foreground italic">Nothing to preview yet.</p>
+                        )}
+                    </div>
+                ) : (
+                    <textarea
+                        ref={textareaRef}
+                        value={body}
+                        onChange={(e) => onUpdate({ ...content, body: e.target.value })}
+                        placeholder={"# Heading\n\nWrite **markdown** here...\n\n- List item\n- Another item\n\n```js\nconsole.log('hello')\n```"}
+                        className="w-full min-h-[180px] resize-y px-3 py-2 text-sm font-mono focus:outline-none bg-background"
+                        spellCheck={false}
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                    />
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/apps/web/src/components/generic/Blocks/Admin/TextBlock.jsx b/apps/web/src/components/generic/Blocks/Admin/TextBlock.jsx
new file mode 100644
index 0000000..a257d76
--- /dev/null
+++ b/apps/web/src/components/generic/Blocks/Admin/TextBlock.jsx
@@ -0,0 +1,425 @@
+// components/generic/CMS/Blocks/TextBlock.jsx
+
+import { useEffect, useRef, useState } from "react";
+import {
+  Bold, Italic, Underline,
+  AlignLeft, AlignCenter, AlignRight, AlignJustify,
+  List, ListOrdered, Indent, Outdent,
+  Link2, FileText, Table, Code, Code2,
+} from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { AssetPickerSheet } from "../../AssetPickerSheet";
+import { cn } from "@/lib/utils";
+
+// ─── Toolbar button ───────────────────────────────────────────────────────────
+
+function ToolbarBtn({ title, onMouseDown, active, children }) {
+  return (
+    <button
+      type="button"
+      title={title}
+      onMouseDown={onMouseDown}
+      className={cn(
+        "h-7 w-7 flex items-center justify-center rounded text-muted-foreground",
+        "hover:bg-accent hover:text-accent-foreground transition-colors shrink-0",
+        active && "bg-accent text-accent-foreground"
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+// ─── Toolbar divider ──────────────────────────────────────────────────────────
+
+function Divider() {
+  return <span className="w-px h-4 bg-border mx-0.5 shrink-0" />;
+}
+
+// ─── Format options ───────────────────────────────────────────────────────────
+
+const FORMAT_OPTIONS = [
+  { label: "Paragraph", val: "p" },
+  { label: "Heading 1", val: "h1" },
+  { label: "Heading 2", val: "h2" },
+  { label: "Heading 3", val: "h3" },
+];
+
+// ─── Table picker popover ─────────────────────────────────────────────────────
+// A small grid that lets the user hover to choose rows × columns (up to 8×8),
+// then click to confirm. Rendered inline in the toolbar.
+
+const MAX_ROWS = 8;
+const MAX_COLS = 8;
+
+function TablePicker({ onInsert, onClose }) {
+  const [hovered, setHovered] = useState({ r: 0, c: 0 });
+
+  return (
+    // Overlay — clicking outside closes the picker without inserting
+    <div className="fixed inset-0 z-50" onMouseDown={onClose}>
+      <div
+        className="absolute z-50 bg-popover border rounded-lg shadow-lg p-3 flex flex-col gap-2"
+        style={{ top: "var(--table-picker-y, 40px)", left: "var(--table-picker-x, 0px)" }}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        {/* Label */}
+        <p className="text-xs text-muted-foreground select-none">
+          {hovered.r > 0 && hovered.c > 0
+            ? `${hovered.r} × ${hovered.c} table`
+            : "Hover to select size"}
+        </p>
+
+        {/* Grid */}
+        <div
+          className="grid gap-0.5"
+          style={{ gridTemplateColumns: `repeat(${MAX_COLS}, 1.25rem)` }}
+        >
+          {Array.from({ length: MAX_ROWS }, (_, r) =>
+            Array.from({ length: MAX_COLS }, (_, c) => (
+              <div
+                key={`${r}-${c}`}
+                onMouseEnter={() => setHovered({ r: r + 1, c: c + 1 })}
+                onClick={() => {
+                  onInsert(hovered.r, hovered.c);
+                  onClose();
+                }}
+                className={cn(
+                  "h-5 w-5 rounded-sm border cursor-pointer transition-colors",
+                  r < hovered.r && c < hovered.c
+                    ? "bg-primary/20 border-primary/50"
+                    : "bg-muted border-border"
+                )}
+              />
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── RichTextEditor ───────────────────────────────────────────────────────────
+
+export function RichTextEditor({ blockId, value, onChange, readOnly = false }) {
+  const editorRef = useRef(null);
+  const initializedFor = useRef(null);
+  const savedRange = useRef(null);
+  const tableButtonRef = useRef(null);
+
+  const [docPickerOpen, setDocPickerOpen] = useState(false);
+  const [tablePickerOpen, setTablePickerOpen] = useState(false);
+
+  // ── Seed innerHTML exactly once per blockId ────────────────────────────────
+  useEffect(() => {
+    if (!editorRef.current) return;
+    if (initializedFor.current === blockId) return;
+    editorRef.current.innerHTML = value ?? "";
+    initializedFor.current = blockId;
+  }, [blockId, value]);
+
+  // ── Position the table picker below its toolbar button ────────────────────
+  useEffect(() => {
+    if (!tablePickerOpen || !tableButtonRef.current) return;
+    const rect = tableButtonRef.current.getBoundingClientRect();
+    document.documentElement.style.setProperty("--table-picker-y", `${rect.bottom + 6}px`);
+    document.documentElement.style.setProperty("--table-picker-x", `${rect.left}px`);
+  }, [tablePickerOpen]);
+
+  // ── execCommand helpers ────────────────────────────────────────────────────
+
+  const exec = (cmd, val = null) => {
+    editorRef.current?.focus();
+    document.execCommand(cmd, false, val);
+  };
+
+  const applyFormat = (val) => {
+    editorRef.current?.focus();
+    document.execCommand("formatBlock", false, `<${val}>`);
+  };
+
+  const isActive = (cmd) => {
+    try { return document.queryCommandState(cmd); } catch { return false; }
+  };
+
+  // ── URL link ──────────────────────────────────────────────────────────────
+
+  const insertUrlLink = () => {
+    const url = window.prompt("Enter URL:", "https://");
+    if (url) exec("createLink", url);
+  };
+
+  // ── Document link ─────────────────────────────────────────────────────────
+
+  const openDocPicker = () => {
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount > 0) {
+      savedRange.current = sel.getRangeAt(0).cloneRange();
+    }
+    setDocPickerOpen(true);
+  };
+
+  const handleDocSelect = (asset) => {
+    setDocPickerOpen(false);
+    const url = asset.file_url;
+    const label = asset.display_name ?? "Document";
+
+    editorRef.current?.focus();
+    const sel = window.getSelection();
+    if (savedRange.current && sel) {
+      sel.removeAllRanges();
+      sel.addRange(savedRange.current);
+    }
+
+    const html = `<a href="${url}" class="doc-link" target="_blank" rel="noopener noreferrer">${label}</a>`;
+    document.execCommand("insertHTML", false, html);
+    onChange(editorRef.current.innerHTML);
+    savedRange.current = null;
+  };
+
+  // ── Inline code toggle ────────────────────────────────────────────────────
+  // Wraps the selected text in <code>. If the cursor is already inside a
+  // <code> element, unwraps it instead.
+
+  const toggleInlineCode = () => {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    const ancestor = range.commonAncestorContainer;
+    const codeParent = (ancestor.nodeType === 3 ? ancestor.parentElement : ancestor)?.closest("code");
+
+    if (codeParent) {
+      const text = document.createTextNode(codeParent.textContent ?? "");
+      codeParent.replaceWith(text);
+      onChange(editorRef.current.innerHTML);
+    } else {
+      const text = sel.toString();
+      if (!text) return;
+      exec("insertHTML", `<code>${text}</code>`);
+      onChange(editorRef.current.innerHTML);
+    }
+  };
+
+  // ── Code block insertion ───────────────────────────────────────────────────
+
+  const insertCodeBlock = () => {
+    editorRef.current?.focus();
+    const sel = window.getSelection();
+    const selectedText = sel?.toString() || "// your code here";
+    exec("insertHTML", `<pre><code>${selectedText}</code></pre><p><br></p>`);
+    onChange(editorRef.current.innerHTML);
+  };
+
+  // ── Table insertion ────────────────────────────────────────────────────────
+  // Builds a <table> with a header row (th) + (rows-1) data rows.
+  // Each cell is contenteditable (inherited from the editor).
+  // A paragraph after the table lets the user continue typing below it.
+
+  const insertTable = (rows, cols) => {
+    if (rows < 1 || cols < 1) return;
+
+    // Save cursor before opening picker collapses it
+    editorRef.current?.focus();
+    const sel = window.getSelection();
+    if (savedRange.current && sel) {
+      sel.removeAllRanges();
+      sel.addRange(savedRange.current);
+    }
+
+    // Build header row
+    const headerCells = Array.from({ length: cols })
+      .map((_, i) => `<th>Column ${i + 1}</th>`)
+      .join("");
+
+    // Build body rows
+    const bodyRows = Array.from({ length: rows - 1 })
+      .map(() =>
+        `<tr>${Array.from({ length: cols }).map(() => "<td><br></td>").join("")}</tr>`
+      )
+      .join("");
+
+    const tableHTML = `
+      <table>
+        <thead><tr>${headerCells}</tr></thead>
+        <tbody>${bodyRows}</tbody>
+      </table>
+      <p><br></p>
+    `;
+
+    document.execCommand("insertHTML", false, tableHTML);
+    onChange(editorRef.current.innerHTML);
+    savedRange.current = null;
+  };
+
+  const openTablePicker = () => {
+    // Save current cursor so we can restore it after the picker closes
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount > 0) {
+      savedRange.current = sel.getRangeAt(0).cloneRange();
+    }
+    setTablePickerOpen(true);
+  };
+
+  // ── Toolbar groups ─────────────────────────────────────────────────────────
+
+  const GROUPS = [
+    [
+      { cmd: "bold", Icon: Bold, title: "Bold" },
+      { cmd: "italic", Icon: Italic, title: "Italic" },
+      { cmd: "underline", Icon: Underline, title: "Underline" },
+    ],
+    [
+      { cmd: "justifyLeft", Icon: AlignLeft, title: "Align left" },
+      { cmd: "justifyCenter", Icon: AlignCenter, title: "Align center" },
+      { cmd: "justifyRight", Icon: AlignRight, title: "Align right" },
+      { cmd: "justifyFull", Icon: AlignJustify, title: "Justify" },
+    ],
+    [
+      { cmd: "insertUnorderedList", Icon: List, title: "Bullet list" },
+      { cmd: "insertOrderedList", Icon: ListOrdered, title: "Numbered list" },
+      { cmd: "indent", Icon: Indent, title: "Indent" },
+      { cmd: "outdent", Icon: Outdent, title: "Outdent" },
+    ],
+  ];
+
+  return (
+    <>
+      <div className="border rounded-md overflow-hidden focus-within:ring-2 focus-within:ring-ring">
+
+        {/* ── Toolbar ── */}
+        <div className="flex flex-wrap items-center gap-0.5 px-2 py-1.5 border-b bg-muted/40">
+
+          {/* Block format select */}
+          <select
+            className="h-7 text-xs border rounded px-1 mr-0.5 bg-background cursor-pointer shrink-0"
+            defaultValue="p"
+            onChange={(e) => applyFormat(e.target.value)}
+          >
+            {FORMAT_OPTIONS.map((o) => (
+              <option key={o.val} value={o.val}>{o.label}</option>
+            ))}
+          </select>
+
+          <Divider />
+
+          {/* Formatting groups */}
+          {GROUPS.map((group, gi) => (
+            <div key={gi} className="flex items-center gap-0.5">
+              {group.map(({ cmd, Icon, title }) => (
+                <ToolbarBtn
+                  key={cmd}
+                  title={title}
+                  active={isActive(cmd)}
+                  onMouseDown={(e) => { e.preventDefault(); exec(cmd); }}
+                >
+                  <Icon className="h-3.5 w-3.5" />
+                </ToolbarBtn>
+              ))}
+              <Divider />
+            </div>
+          ))}
+
+          {/* URL link */}
+          <ToolbarBtn
+            title="Insert URL link"
+            onMouseDown={(e) => { e.preventDefault(); insertUrlLink(); }}
+          >
+            <Link2 className="h-3.5 w-3.5" />
+          </ToolbarBtn>
+
+          {/* Document link */}
+          <ToolbarBtn
+            title="Embed document link"
+            onMouseDown={(e) => { e.preventDefault(); openDocPicker(); }}
+          >
+            <FileText className="h-3.5 w-3.5" />
+          </ToolbarBtn>
+
+          <Divider />
+
+          {/* Insert table */}
+          <ToolbarBtn
+            title="Insert table"
+            active={tablePickerOpen}
+            onMouseDown={(e) => {
+              e.preventDefault();
+              tablePickerOpen ? setTablePickerOpen(false) : openTablePicker();
+            }}
+          >
+            <span ref={tableButtonRef} className="flex items-center justify-center">
+              <Table className="h-3.5 w-3.5" />
+            </span>
+          </ToolbarBtn>
+
+          <Divider />
+
+          {/* Inline code */}
+          <ToolbarBtn
+            title="Inline code"
+            onMouseDown={(e) => { e.preventDefault(); toggleInlineCode(); }}
+          >
+            <Code className="h-3.5 w-3.5" />
+          </ToolbarBtn>
+
+          {/* Code block */}
+          <ToolbarBtn
+            title="Code block"
+            onMouseDown={(e) => { e.preventDefault(); insertCodeBlock(); }}
+          >
+            <Code2 className="h-3.5 w-3.5" />
+          </ToolbarBtn>
+        </div>
+
+        {/* ── Editable area ── */}
+        <div
+          ref={editorRef}
+          contentEditable
+          suppressContentEditableWarning
+          onInput={() => onChange(editorRef.current.innerHTML)}
+          className="typeset min-h-[120px] px-3 m-0 py-0 text-sm focus:outline-none"
+        />
+      </div>
+
+      {/* Table size picker */}
+      {tablePickerOpen && (
+        <TablePicker
+          onInsert={insertTable}
+          onClose={() => setTablePickerOpen(false)}
+        />
+      )}
+
+      {/* Document asset picker */}
+      {!readOnly && (
+        <AssetPickerSheet
+          open={docPickerOpen}
+          onOpenChange={setDocPickerOpen}
+          fileType="document"
+          onSelect={handleDocSelect}
+        />
+      )}
+    </>
+  );
+}
+
+// ─── TextBlock ────────────────────────────────────────────────────────────────
+
+export function TextBlock({ content, onUpdate, blockId, readOnly = false }) {
+    if (readOnly) {
+        return (
+            <div
+                className="typeset text-sm"
+                dangerouslySetInnerHTML={{ __html: content.body ?? "" }}
+            />
+        );
+    }
+    return (
+        <div className="space-y-1.5">
+            <Label>Content</Label>
+            <RichTextEditor
+                blockId={blockId}
+                value={content.body ?? ""}
+                onChange={(html) => onUpdate({ ...content, body: html })}
+            />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Blocks/Admin/TextImageBlock.jsx b/apps/web/src/components/generic/Blocks/Admin/TextImageBlock.jsx
new file mode 100644
index 0000000..cd51534
--- /dev/null
+++ b/apps/web/src/components/generic/Blocks/Admin/TextImageBlock.jsx
@@ -0,0 +1,121 @@
+// components/generic/CMS/Blocks/TextImageBlock.jsx
+
+import { useState } from "react";
+import { ImageIcon } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { RichTextEditor } from "./TextBlock";   // reuse the shared editor
+import { AssetPickerSheet } from "../../AssetPickerSheet";
+import { useAssetPreviewSrc } from "@/hooks/useAssetPreviewSrc";
+import { MediaFallback } from "@/components/generic/MediaFallback";
+
+export function TextImageBlock({ content, onUpdate, blockId, readOnly = false }) {
+  const [pickerOpen, setPickerOpen] = useState(false);
+
+  // content.url is redacted (null) server-side for S3 assets — re-resolve
+  // through media.util.js instead of trusting the persisted url/thumbnail.
+  const { src, loading } = useAssetPreviewSrc(
+    { asset_id: content?.asset_id, storage_provider: content?.storage_provider, file_url: content?.url, thumbnail_url: content?.url },
+    { scope: "admin" },
+  );
+
+  return (
+    <div className="space-y-4">
+
+      {/* ── Image position ── */}
+      <div className="space-y-1.5 max-w-[200px]">
+        <Label>Image Position</Label>
+        <Select
+          value={content.image_position ?? "right"}
+          onValueChange={(v) => onUpdate({ ...content, image_position: v })}
+        >
+          <SelectTrigger><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+
+        {/* ── Text side — WYSIWYG ── */}
+        <div className="space-y-1.5">
+          <Label>Content</Label>
+          <RichTextEditor
+            blockId={`${blockId}_text`}
+            value={content.body ?? ""}
+            onChange={(html) => onUpdate({ ...content, body: html })}
+          />
+        </div>
+
+        {/* ── Image side ── */}
+        <div className={[
+          "space-y-1.5",
+          content.image_position === "left" ? "md:order-first" : "",
+        ].join(" ")}>
+          <Label>Image</Label>
+
+          {loading ? (
+            <MediaFallback className="w-full aspect-video rounded-lg" />
+          ) : src ? (
+            <div
+              className="relative rounded-lg overflow-hidden cursor-pointer group"
+              onClick={() => setPickerOpen(true)}
+            >
+              <img
+                src={src}
+                alt={content.alt ?? ""}
+                className="w-full aspect-video object-cover"
+              />
+              <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                <p className="text-white text-sm font-medium">Change Image</p>
+              </div>
+            </div>
+          ) : (
+            <button
+              type="button"
+              onClick={() => setPickerOpen(true)}
+              className="w-full aspect-video rounded-lg border-2 border-dashed border-muted-foreground/30 hover:border-primary/50 hover:bg-muted/20 transition-colors flex flex-col items-center justify-center gap-2"
+            >
+              <ImageIcon className="h-8 w-8 text-muted-foreground/50" />
+              <p className="text-sm text-muted-foreground">Click to select an image</p>
+            </button>
+          )}
+
+          {content.asset_id && (
+            <div className="space-y-1.5">
+              <Label>Alt Text</Label>
+              <Input
+                placeholder="Describe the image..."
+                value={content.alt ?? ""}
+                onChange={(e) => onUpdate({ ...content, alt: e.target.value })}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {!readOnly && (
+        <AssetPickerSheet
+          open={pickerOpen}
+          onOpenChange={setPickerOpen}
+          fileType="image"
+          onSelect={(asset) => onUpdate({
+            ...content,
+            asset_id: asset.asset_id,
+            storage_provider: asset.storage_provider ?? null,
+            url: asset.file_url,
+          })}
+        />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Blocks/Admin/TextVideoBlock.jsx b/apps/web/src/components/generic/Blocks/Admin/TextVideoBlock.jsx
new file mode 100644
index 0000000..a885546
--- /dev/null
+++ b/apps/web/src/components/generic/Blocks/Admin/TextVideoBlock.jsx
@@ -0,0 +1,124 @@
+// components/generic/CMS/Blocks/TextVideoBlock.jsx
+
+import { useState } from "react";
+import { VideoIcon } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { RichTextEditor } from "./TextBlock";   // reuse the shared editor
+import { AssetPickerSheet } from "../../AssetPickerSheet";
+import { useAssetPreviewSrc } from "@/hooks/useAssetPreviewSrc";
+import { MediaFallback } from "@/components/generic/MediaFallback";
+
+export function TextVideoBlock({ content, onUpdate, blockId, readOnly = false }) {
+  const [pickerOpen, setPickerOpen] = useState(false);
+
+  // content.thumbnail_url is a presigned S3 URL captured at pick time for
+  // S3 assets — it expires. Re-resolve through media.util.js instead of
+  // trusting the persisted value, mirroring VideoBlock.jsx.
+  const { thumbnailUrl, loading } = useAssetPreviewSrc(
+    { asset_id: content?.asset_id, storage_provider: content?.storage_provider, file_url: content?.url, thumbnail_url: content?.thumbnail_url },
+    { scope: "admin" },
+  );
+  const thumb = thumbnailUrl ?? content.thumbnail_url ?? null;
+
+  return (
+    <div className="space-y-4">
+
+      {/* ── Video position ── */}
+      <div className="space-y-1.5 max-w-[200px]">
+        <Label>Video Position</Label>
+        <Select
+          value={content.video_position ?? "right"}
+          onValueChange={(v) => onUpdate({ ...content, video_position: v })}
+        >
+          <SelectTrigger><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+
+        {/* ── Text side — WYSIWYG ── */}
+        <div className="space-y-1.5">
+          <Label>Content</Label>
+          <RichTextEditor
+            blockId={`${blockId}_text`}
+            value={content.body ?? ""}
+            onChange={(html) => onUpdate({ ...content, body: html })}
+          />
+        </div>
+
+        {/* ── Video side ── */}
+        <div className={[
+          "space-y-1.5",
+          content.video_position === "left" ? "md:order-first" : "",
+        ].join(" ")}>
+          <Label>Video</Label>
+
+          {loading ? (
+            <MediaFallback className="w-full aspect-video rounded-lg" />
+          ) : content.asset_id ? (
+            <div
+              className="relative rounded-lg overflow-hidden cursor-pointer group"
+              onClick={() => setPickerOpen(true)}
+            >
+              {thumb ? (
+                <img
+                  src={thumb}
+                  alt="Video thumbnail"
+                  className="w-full aspect-video object-cover"
+                />
+              ) : (
+                <div className="w-full aspect-video bg-muted flex items-center justify-center">
+                  <VideoIcon className="h-10 w-10 text-muted-foreground/50" />
+                </div>
+              )}
+              <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                <p className="text-white text-sm font-medium">Change Video</p>
+              </div>
+              <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+                <div className="h-12 w-12 rounded-full bg-black/50 flex items-center justify-center">
+                  <VideoIcon className="h-5 w-5 text-white" />
+                </div>
+              </div>
+            </div>
+          ) : (
+            <button
+              type="button"
+              onClick={() => setPickerOpen(true)}
+              className="w-full aspect-video rounded-lg border-2 border-dashed border-muted-foreground/30 hover:border-primary/50 hover:bg-muted/20 transition-colors flex flex-col items-center justify-center gap-2"
+            >
+              <VideoIcon className="h-8 w-8 text-muted-foreground/50" />
+              <p className="text-sm text-muted-foreground">Click to select a video</p>
+            </button>
+          )}
+        </div>
+      </div>
+
+      {!readOnly && (
+        <AssetPickerSheet
+          open={pickerOpen}
+          onOpenChange={setPickerOpen}
+          fileType="video"
+          onSelect={(asset) => onUpdate({
+            ...content,
+            asset_id: asset.asset_id,
+            storage_provider: asset.storage_provider ?? null,
+            url: asset.file_url,
+            thumbnail_url: asset.thumbnail_url ?? null,
+            duration_seconds: Number(asset.duration) || 0,
+          })}
+        />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Blocks/Admin/VideoBlock.jsx b/apps/web/src/components/generic/Blocks/Admin/VideoBlock.jsx
new file mode 100644
index 0000000..417a50a
--- /dev/null
+++ b/apps/web/src/components/generic/Blocks/Admin/VideoBlock.jsx
@@ -0,0 +1,502 @@
+import { useRef, useState, useEffect, useCallback } from "react";
+import {
+  Play,
+  Pause,
+  SkipBack,
+  Volume2,
+  VolumeX,
+  Maximize2,
+  Minimize2,
+  VideoIcon,
+} from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { AssetPickerSheet } from "../../AssetPickerSheet";
+import { useAssetPreviewSrc } from "@/hooks/useAssetPreviewSrc";
+import { MediaFallback } from "@/components/generic/MediaFallback";
+import { Spinner } from "@/components/ui/spinner";
+import { formatPlayerTime as fmtTime } from "@/utils/format.util";
+
+// ─── VideoBlock (Admin) ───────────────────────────────────────────────────────
+
+export function VideoBlock({ content, onUpdate, readOnly = false }) {
+  const [pickerOpen, setPickerOpen] = useState(false);
+
+  // content.url is redacted (null) server-side for S3 assets — see
+  // redactS3Url() in controllers/admin/assets.controller.js. Re-resolve
+  // through media.util.js instead of trusting the persisted url/thumbnail.
+  //
+  // thumbnail_url is intentionally NOT passed here: resolveAssetSrc()'s fast
+  // path falls back to thumbnail_url when there's no stream_token, which for
+  // a video asset with a redacted (null) file_url meant `src` resolved to
+  // the poster JPEG instead of the video file, and the browser then refused
+  // to play it ("media resource ... was not suitable"). Omitting it forces
+  // the async mint-token path, which resolves the real video stream src.
+  const { src, loading } = useAssetPreviewSrc(
+    { asset_id: content?.asset_id, storage_provider: content?.storage_provider, file_url: content?.url },
+    { scope: "admin" },
+  );
+  const poster = content?.thumbnail_url ?? undefined;
+
+  const vidRef = useRef(null);
+  const wrapRef = useRef(null);
+  const [playing,       setPlaying]       = useState(false);
+  const [progress,      setProgress]      = useState(0);
+  const [currentTime,   setCurrentTime]   = useState(0);
+  const [totalDuration, setTotalDuration] = useState(0);
+  const [muted,         setMuted]         = useState(false);
+  const [volume,        setVolume]        = useState(1);
+  const [overlayVisible,setOverlayVisible]= useState(true);
+  // Native Fullscreen API works on desktop (all browsers) and Android Chrome.
+  // iOS Safari doesn't support Fullscreen API on arbitrary elements at all, so
+  // pseudoFullscreen is a CSS-only (fixed inset-0) fallback that keeps our
+  // custom controls instead of falling back to native <video> fullscreen.
+  const [nativeFullscreen, setNativeFullscreen] = useState(false);
+  const [pseudoFullscreen, setPseudoFullscreen] = useState(false);
+  const isFullscreen = nativeFullscreen || pseudoFullscreen;
+  // True from the moment `src` is set until the browser has actually
+  // buffered enough to render a frame (or stalls mid-playback) — closes the
+  // gap between "token resolved" (the `loading` from useAssetPreviewSrc
+  // above) and "video is actually watchable", which used to render as a
+  // blank black box with no indication anything was happening, especially
+  // on large/slow-loading files.
+  const [mediaLoading,  setMediaLoading]  = useState(true);
+  const [hoverProgress, setHoverProgress] = useState(null); // { x, time }
+  const previewVidRef = useRef(null);
+  // Fullscreen-only auto-hide for the controls bar, mirroring the client
+  // player: idle 3s while playing fades the bar out, any mouse movement (or
+  // a pause) brings it back. Outside fullscreen the bar stays put — it's a
+  // normal in-flow row there, not an overlay, so hiding it would just leave
+  // a blank gap.
+  const [controlsVisible, setControlsVisible] = useState(true);
+  const hideTimer = useRef(null);
+
+  // Reset player when video changes
+  useEffect(() => {
+    setPlaying(false);
+    setProgress(0);
+    setCurrentTime(0);
+    setTotalDuration(0);
+    setOverlayVisible(true);
+    setMediaLoading(true);
+  }, [src]);
+
+  // ── Video event listeners ─────────────────────────────────────────────────
+
+  useEffect(() => {
+    const v = vidRef.current;
+    if (!v) return;
+
+    const onTimeUpdate = () => {
+      setCurrentTime(v.currentTime);
+      if (v.duration) setProgress((v.currentTime / v.duration) * 100);
+    };
+    const onLoaded     = () => setTotalDuration(v.duration);
+    const onEnded       = () => { setPlaying(false); setOverlayVisible(true); };
+    const onLoadedData  = () => setMediaLoading(false);
+    const onCanPlay     = () => setMediaLoading(false);
+    const onWaiting     = () => setMediaLoading(true);
+    const onPlaying     = () => setMediaLoading(false);
+
+    v.addEventListener("timeupdate",     onTimeUpdate);
+    v.addEventListener("loadedmetadata", onLoaded);
+    v.addEventListener("ended",          onEnded);
+    v.addEventListener("loadeddata",     onLoadedData);
+    v.addEventListener("canplay",        onCanPlay);
+    v.addEventListener("waiting",        onWaiting);
+    v.addEventListener("playing",        onPlaying);
+
+    return () => {
+      v.removeEventListener("timeupdate",     onTimeUpdate);
+      v.removeEventListener("loadedmetadata", onLoaded);
+      v.removeEventListener("ended",          onEnded);
+      v.removeEventListener("loadeddata",     onLoadedData);
+      v.removeEventListener("canplay",        onCanPlay);
+      v.removeEventListener("waiting",        onWaiting);
+      v.removeEventListener("playing",        onPlaying);
+    };
+  }, [src]);
+
+  // ── Controls ──────────────────────────────────────────────────────────────
+
+  const resetHideTimer = useCallback(() => {
+    setControlsVisible(true);
+    clearTimeout(hideTimer.current);
+    if (playing && isFullscreen) {
+      hideTimer.current = setTimeout(() => setControlsVisible(false), 3000);
+    }
+  }, [playing, isFullscreen]);
+
+  useEffect(() => {
+    resetHideTimer();
+    return () => clearTimeout(hideTimer.current);
+  }, [playing, isFullscreen, resetHideTimer]);
+
+  const togglePlay = useCallback(() => {
+    const v = vidRef.current;
+    if (!v) return;
+    if (v.paused) { v.play();  setPlaying(true);  setOverlayVisible(false); }
+    else          { v.pause(); setPlaying(false); setOverlayVisible(true);  }
+  }, []);
+
+  // Safari doesn't focus a <div tabIndex> on click, which silently kills
+  // keyboard shortcuts afterwards — force it explicitly.
+  const handleAreaClick = useCallback(() => {
+    wrapRef.current?.focus({ preventScroll: true });
+    togglePlay();
+    resetHideTimer();
+  }, [togglePlay, resetHideTimer]);
+
+  const restart = () => {
+    const v = vidRef.current;
+    if (!v) return;
+    v.currentTime = 0;
+    v.pause();
+    setPlaying(false);
+    setOverlayVisible(true);
+  };
+
+  const handleSeek = (e) => {
+    const v = vidRef.current;
+    if (!v || !v.duration) return;
+    v.currentTime = (parseFloat(e.target.value) / 100) * v.duration;
+  };
+
+  const handleVolumeChange = (e) => {
+    const val = parseFloat(e.target.value);
+    setVolume(val);
+    if (vidRef.current) { vidRef.current.volume = val; vidRef.current.muted = val === 0; }
+    setMuted(val === 0);
+  };
+
+  const toggleMute = () => {
+    const v = vidRef.current;
+    if (!v) return;
+    v.muted = !v.muted;
+    setMuted(v.muted);
+  };
+
+  const toggleFullscreen = () => {
+    // Uses wrapRef instead of getElementById so this works correctly even if
+    // an admin page ever renders more than one VideoBlock at once (an id
+    // lookup would always grab the first match, toggling the wrong player).
+    const el = wrapRef.current;
+    if (!el) return;
+    if (isFullscreen) {
+      if (document.fullscreenElement) document.exitFullscreen();
+      else if (document.webkitFullscreenElement) document.webkitExitFullscreen();
+      else setPseudoFullscreen(false);
+    } else if (el.requestFullscreen) {
+      el.requestFullscreen();
+    } else if (el.webkitRequestFullscreen) {
+      // Desktop Safari — supports element fullscreen via the prefixed API.
+      el.webkitRequestFullscreen();
+    } else {
+      // iOS Safari has no element-level Fullscreen API at all.
+      setPseudoFullscreen(true);
+    }
+  };
+
+  // Ignore keystrokes aimed at the seek/volume range inputs so arrow keys
+  // there keep their native behavior instead of double-seeking.
+  const handleKeyDown = useCallback((e) => {
+    if (e.target.tagName === "INPUT") return;
+    const v = vidRef.current;
+    // Fold single-char keys to lowercase so Shift/Caps-Lock doesn't break
+    // letter shortcuts (e.g. Shift+F reporting as "F", not "f").
+    const key = e.key.length === 1 ? e.key.toLowerCase() : e.key;
+    switch (key) {
+      case " ":
+        e.preventDefault();
+        togglePlay();
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        if (v && v.duration) v.currentTime = Math.min(v.currentTime + 5, v.duration);
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        if (v) v.currentTime = Math.max(v.currentTime - 5, 0);
+        break;
+      case "m":
+        e.preventDefault();
+        toggleMute();
+        break;
+      case "f":
+        e.preventDefault();
+        toggleFullscreen();
+        break;
+      case "Escape":
+        if (isFullscreen) {
+          e.preventDefault();
+          toggleFullscreen();
+        }
+        break;
+      default: break;
+    }
+  }, [togglePlay, toggleMute, toggleFullscreen, isFullscreen]);
+
+  // #video-block-wrap now wraps both the video area and the controls bar
+  // below it (previously just the video), so fullscreen no longer drops the
+  // seek bar / volume / fullscreen button. isFullscreen also relaxes the
+  // 16/9 + max-height constraints so the video fills the screen properly.
+  useEffect(() => {
+    // Safari (incl. desktop) still fires the prefixed webkitfullscreenchange
+    // event for element-level fullscreen, so both are listened for.
+    const onChange = () => {
+      const active = !!(document.fullscreenElement || document.webkitFullscreenElement);
+      setNativeFullscreen(active);
+      // Safari doesn't focus a <div tabIndex> on click, so keyboard
+      // shortcuts silently stop working after entering fullscreen unless we
+      // explicitly refocus the wrapper here.
+      if (active) wrapRef.current?.focus({ preventScroll: true });
+    };
+    document.addEventListener("fullscreenchange", onChange);
+    document.addEventListener("webkitfullscreenchange", onChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", onChange);
+      document.removeEventListener("webkitfullscreenchange", onChange);
+    };
+  }, []);
+
+  // CSS pseudo-fullscreen fallback (iOS Safari) — lock page scroll and
+  // reclaim keyboard focus while it's active, restore on exit/unmount.
+  useEffect(() => {
+    if (!pseudoFullscreen) return;
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    wrapRef.current?.focus({ preventScroll: true });
+    return () => { document.body.style.overflow = prevOverflow; };
+  }, [pseudoFullscreen]);
+
+  // ── Asset picker handler ──────────────────────────────────────────────────
+  //
+  // Saves all metadata needed by the client VideoBlock at render time.
+  // Clean object — no ...content spread so stale data never carries over.
+  //
+  // Fields saved:
+  //   asset_id         — used by client for the secure token flow
+  //   url              — used by admin player (direct src); ignored by client for S3
+  //   thumbnail_url    — poster image for the video player
+  //   title            — display name (shown in any title-aware blocks)
+  //   tag              — file extension badge e.g. "MP4"
+  //   duration_seconds — probed media length, read by duration.util.js on save
+  //
+  const handleSelect = (asset) => {
+    onUpdate({
+      asset_id:         asset.asset_id,
+      storage_provider: asset.storage_provider ?? null,
+      url:              asset.file_url,
+      thumbnail_url:    asset.thumbnail_url ?? null,
+      title:            asset.display_name,
+      tag:              asset.extension?.toUpperCase() ?? "",
+      duration_seconds: Number(asset.duration) || 0,
+    });
+    setPlaying(false);
+    setProgress(0);
+    setCurrentTime(0);
+    setTotalDuration(0);
+    setOverlayVisible(true);
+  };
+
+  // ─────────────────────────────────────────────────────────────────────────
+
+  return (
+    <div className="space-y-3">
+      {!readOnly && <Label>Video</Label>}
+
+      {loading ? (
+        <MediaFallback className="w-full aspect-video rounded-lg" />
+      ) : src ? (
+        <div
+          id="video-block-wrap"
+          ref={wrapRef}
+          tabIndex={0}
+          onKeyDown={handleKeyDown}
+          onMouseMove={isFullscreen ? resetHideTimer : undefined}
+          className={`overflow-hidden bg-card outline-none focus-visible:ring-2 focus-visible:ring-ring ${isFullscreen ? "fixed inset-0 z-[100] flex flex-col" : "rounded-lg border"}`}
+        >
+
+          {/* ── Video area ── */}
+          <div
+            className={`relative w-full bg-black cursor-pointer group ${isFullscreen ? "flex-1 min-h-0" : ""}`}
+            style={isFullscreen ? undefined : { aspectRatio: "16/9", maxHeight: "calc(100vh - 260px)" }}
+            onClick={handleAreaClick}
+          >
+            <video
+              ref={vidRef}
+              src={src}
+              poster={poster}
+              preload="metadata"
+              playsInline
+              className="w-full h-full object-cover"
+            />
+
+            {/* Loading spinner — covers the gap between src resolving and the
+                browser actually having a frame to show */}
+            {mediaLoading && (
+              <div className="absolute inset-0 flex items-center justify-center bg-black/40 pointer-events-none">
+                <Spinner className="size-8 text-white" />
+              </div>
+            )}
+
+            {/* Play/pause overlay */}
+            {!mediaLoading && (
+              <div
+                className={`absolute inset-0 flex items-center justify-center transition-opacity duration-200 ${overlayVisible ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+                style={{ background: "rgba(0,0,0,0.3)" }}
+              >
+                <button
+                  aria-label={playing ? "Pause" : "Play"}
+                  onClick={(e) => { e.stopPropagation(); togglePlay(); }}
+                  className="w-12 h-12 rounded-full bg-white/90 hover:bg-white flex items-center justify-center transition-transform hover:scale-105"
+                >
+                  {playing
+                    ? <Pause className="size-4 text-black" />
+                    : <Play  className="size-4 text-black ml-0.5" />
+                  }
+                </button>
+              </div>
+            )}
+
+            {/* Change video hover hint */}
+            {!readOnly && (
+              <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                <button
+                  className="text-xs bg-black/60 hover:bg-black/80 text-white px-2.5 py-1 rounded-md transition-colors"
+                  onClick={(e) => { e.stopPropagation(); setPickerOpen(true); }}
+                >
+                  Change
+                </button>
+              </div>
+            )}
+          </div>
+
+          {/* ── Player controls ──
+              Fullscreen: absolutely positioned over the bottom of the video
+              (wrap is `fixed inset-0` there, so it's the containing block)
+              and fades per controlsVisible. Non-fullscreen: normal in-flow
+              row below the video, always visible. */}
+          <div className={
+            isFullscreen
+              ? `absolute bottom-0 left-0 right-0 z-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent px-4 pt-8 pb-4 flex flex-col gap-2 transition-opacity duration-300 ${controlsVisible ? "opacity-100" : "opacity-0 pointer-events-none"}`
+              : "px-3 pt-2.5 pb-3 flex flex-col gap-2"
+          }>
+
+            {/* Progress bar */}
+            <div
+              className={`relative h-1 rounded-full cursor-pointer ${isFullscreen ? "bg-white/30" : "bg-border"}`}
+              onMouseMove={(e) => {
+                const rect = e.currentTarget.getBoundingClientRect();
+                const pct  = Math.min(Math.max((e.clientX - rect.left) / rect.width, 0), 1);
+                const time = pct * (vidRef.current?.duration ?? 0);
+                setHoverProgress({ x: e.clientX - rect.left, time });
+                if (previewVidRef.current && isFinite(time) && time >= 0) {
+                  previewVidRef.current.currentTime = time;
+                }
+              }}
+              onMouseLeave={() => setHoverProgress(null)}
+            >
+              <div
+                className={`h-full rounded-full transition-[width] duration-100 ${isFullscreen ? "bg-white" : "bg-foreground"}`}
+                style={{ width: `${progress}%` }}
+              />
+              <input
+                type="range" min="0" max="100" step="0.1"
+                value={progress}
+                onChange={handleSeek}
+                aria-label="Seek"
+                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+              />
+
+              {/* Scrub preview — hidden video seeked to hover position, no canvas/sprite needed */}
+              {hoverProgress && (
+                <div
+                  className="absolute bottom-3 flex flex-col items-center pointer-events-none z-30"
+                  style={{ left: `${hoverProgress.x}px`, transform: "translateX(-50%)" }}
+                >
+                  <div className="rounded-md overflow-hidden border border-white/20 shadow-xl bg-black" style={{ width: 160, height: 90 }}>
+                    <video
+                      ref={previewVidRef}
+                      src={src}
+                      preload="auto"
+                      muted
+                      playsInline
+                      disablePictureInPicture
+                      disableRemotePlayback
+                      onContextMenu={(e) => e.preventDefault()}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                  <span className="text-white text-xs mt-1 font-medium tabular-nums drop-shadow bg-black/70 px-1.5 py-0.5 rounded">
+                    {fmtTime(hoverProgress.time)}
+                  </span>
+                </div>
+              )}
+            </div>
+
+            {/* Button row */}
+            <div className="flex items-center gap-2">
+              <button onClick={togglePlay} aria-label={playing ? "Pause" : "Play"} className={`transition-colors ${isFullscreen ? "text-white/80 hover:text-white" : "text-muted-foreground hover:text-foreground"}`}>
+                {playing ? <Pause className="size-4" /> : <Play className="size-4" />}
+              </button>
+              <button onClick={restart} aria-label="Restart" className={`transition-colors ${isFullscreen ? "text-white/80 hover:text-white" : "text-muted-foreground hover:text-foreground"}`}>
+                <SkipBack className="size-4" />
+              </button>
+              <span className={`text-xs tabular-nums ${isFullscreen ? "text-white/70" : "text-muted-foreground"}`}>
+                {fmtTime(currentTime)} / {fmtTime(totalDuration)}
+              </span>
+
+              <div className="flex items-center gap-1.5 ml-auto">
+                <button onClick={toggleMute} aria-label="Toggle mute" className={`transition-colors ${isFullscreen ? "text-white/80 hover:text-white" : "text-muted-foreground hover:text-foreground"}`}>
+                  {muted ? <VolumeX className="size-4" /> : <Volume2 className="size-4" />}
+                </button>
+                <input
+                  type="range" min="0" max="1" step="0.05"
+                  value={muted ? 0 : volume}
+                  onChange={handleVolumeChange}
+                  aria-label="Volume"
+                  className={`w-16 ${isFullscreen ? "accent-white" : "accent-foreground"}`}
+                />
+              </div>
+
+              <button onClick={toggleFullscreen} aria-label={isFullscreen ? "Exit fullscreen" : "Fullscreen"} className={`transition-colors ml-1 ${isFullscreen ? "text-white/80 hover:text-white" : "text-muted-foreground hover:text-foreground"}`}>
+                {isFullscreen ? <Minimize2 className="size-4" /> : <Maximize2 className="size-4" />}
+              </button>
+            </div>
+          </div>
+
+          {/* ── Change video footer (admin only) ── */}
+          {!readOnly && (
+            <div className="px-3 pb-3">
+              <button
+                type="button"
+                onClick={() => setPickerOpen(true)}
+                className="w-full text-sm text-muted-foreground border rounded-md py-1.5 hover:bg-muted transition-colors"
+              >
+                Change video
+              </button>
+            </div>
+          )}
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={() => setPickerOpen(true)}
+          className="w-full aspect-video rounded-lg border-2 border-dashed border-muted-foreground/30 hover:border-primary/50 hover:bg-muted/20 transition-colors flex flex-col items-center justify-center gap-2"
+        >
+          <VideoIcon className="h-8 w-8 text-muted-foreground/50" />
+          <p className="text-sm text-muted-foreground">Click to select a video</p>
+        </button>
+      )}
+
+      {!readOnly && (
+        <AssetPickerSheet
+          open={pickerOpen}
+          onOpenChange={setPickerOpen}
+          fileType="video"
+          onSelect={handleSelect}
+        />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Blocks/Client/Advertisements/Banner.jsx b/apps/web/src/components/generic/Blocks/Client/Advertisements/Banner.jsx
new file mode 100644
index 0000000..ad180e2
--- /dev/null
+++ b/apps/web/src/components/generic/Blocks/Client/Advertisements/Banner.jsx
@@ -0,0 +1,224 @@
+// components/blocks/Banner.jsx
+
+import { useEffect, useState } from "react";
+import { Megaphone } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "@/components/ui/carousel";
+import { Progress } from "@/components/ui/progress";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { resolveAssetSrc } from "@/utils/media.util";
+
+// An ad only ever has an internally-authored landing page when it has no
+// redirect_link (see applyAdvertisementFields on the backend, which clears
+// whichever one the admin didn't choose) — so its presence alone is enough
+// to tell whether there's Page Builder content worth surfacing.
+function hasLandingPage(ad) {
+    const page = ad?.landing_page;
+    if (!page) return false;
+    return Boolean(page.title || page.description || page.body || page.links?.length);
+}
+
+// ── Banner ───────────────────────────────────────────────────────────────────
+/**
+ * Banner advertisement carousel — same carousel shell as Hero, so a placement
+ * with several live ads (e.g. tier_plans.banner) rotates through all of them
+ * instead of only ever showing the single highest-priority one.
+ * Every current-shape ad (content_mode "content") always shows its image with
+ * badge/headline/description layered on top, same as Hero — the whole slide
+ * is clickable through to the ad's redirect_link/landing page whenever it has
+ * no CTA buttons of its own. content_mode "image" is legacy-only (pre-dates
+ * the mandatory badge/headline/description/image/link shape) and keeps
+ * rendering as a bare clickable image with no text overlay.
+ *
+ * Props:
+ *   ads        — array of advertisement objects { content_mode, badge_labels, headline, description, ctas, redirect_link, image, image_url, advertisement_id }
+ *   onCtaClick — (ad, cta) => void. cta is undefined for the whole-slide click.
+ */
+export function Banner({ ads, onCtaClick }) {
+    const [api, setApi] = useState();
+    const [current, setCurrent] = useState(0);
+    const [count, setCount] = useState(0);
+    const [viewAd, setViewAd] = useState(null); // ad whose Page Builder content is open in the Dialog
+
+    useEffect(() => {
+        if (!api) return;
+
+        setCount(api.scrollSnapList().length);
+        setCurrent(api.selectedScrollSnap() + 1);
+
+        api.on("select", () => {
+            setCurrent(api.selectedScrollSnap() + 1);
+        });
+    }, [api]);
+
+    if (!ads?.length) return null;
+
+    const progressValue = count ? (current / count) * 100 : 0;
+
+    return (
+        <div className="w-full">
+            <Carousel setApi={setApi} className="w-full">
+                <CarouselContent>
+                    {ads.map((ad) => {
+                        const imageSrc = resolveAssetSrc(ad.image) || ad.image_url || null;
+                        const ctas = Array.isArray(ad.ctas) ? ad.ctas : [];
+                        const badgeLabels = Array.isArray(ad.badge_labels) ? ad.badge_labels : [];
+
+                        // Whole-slide click-through only makes sense when there's no CTA
+                        // row of its own to carry that responsibility instead — a landing
+                        // page (Page Builder content) always wins over the plain redirect.
+                        const clickable = ctas.length === 0 && (hasLandingPage(ad) || ad.redirect_link);
+                        const handleSlideClick = () => (hasLandingPage(ad) ? setViewAd(ad) : onCtaClick?.(ad, undefined));
+
+                        return (
+                            <CarouselItem key={ad.advertisement_id}>
+                                {ad.content_mode !== "content" ? (
+                                    // ── Full Image (legacy Image Only ads with no badge/headline/description) ──
+                                    <button
+                                        type="button"
+                                        onClick={() => (hasLandingPage(ad) ? setViewAd(ad) : onCtaClick?.(ad, ctas[0]))}
+                                        className="relative w-full rounded-xl overflow-hidden bg-muted flex items-center justify-center text-left h-[clamp(180px,22vw,320px)] border"
+                                    >
+                                        {imageSrc ? (
+                                            <img
+                                                src={imageSrc}
+                                                alt={ad.headline || "Advertisement"}
+                                                className="w-full h-full object-cover pointer-events-none select-none"
+                                            />
+                                        ) : (
+                                            <Megaphone className="size-6 text-muted-foreground pointer-events-none select-none" />
+                                        )}
+                                    </button>
+                                ) : (
+                                    // ── Image + Content overlay ──
+                                    <div
+                                        role={clickable ? "button" : undefined}
+                                        tabIndex={clickable ? 0 : undefined}
+                                        onClick={clickable ? handleSlideClick : undefined}
+                                        onKeyDown={clickable ? (e) => { if (e.key === "Enter" || e.key === " ") handleSlideClick(); } : undefined}
+                                        className={"relative w-full rounded-xl overflow-hidden border text-left h-[clamp(180px,22vw,320px)]" + (clickable ? " cursor-pointer" : "")}
+                                    >
+                                        {imageSrc ? (
+                                            <img
+                                                src={imageSrc}
+                                                alt={ad.headline || "Advertisement"}
+                                                className="absolute inset-0 w-full h-full object-cover pointer-events-none select-none"
+                                            />
+                                        ) : (
+                                            <div className="absolute inset-0 bg-muted flex items-center justify-center">
+                                                <Megaphone className="size-6 text-muted-foreground" />
+                                            </div>
+                                        )}
+
+                                        <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent" />
+
+                                        <div className="relative h-full w-full flex items-center xs:p-5 sm:p-4 lg:p-10 text-white overflow-hidden">
+                                            <div className="md:w-2xl space-y-4 xs:p-1.5 lg:p-0">
+                                                {badgeLabels.length > 0 && (
+                                                    <div className="flex items-center gap-1.5 flex-wrap">
+                                                        {badgeLabels.map((label, i) => (
+                                                            <Badge key={i} variant="outline" className="pointer-events-none select-none border-white/50 bg-white/10 text-white">
+                                                                {label}
+                                                            </Badge>
+                                                        ))}
+                                                    </div>
+                                                )}
+                                                {ad.headline && <div className="pointer-events-none select-none lg:text-5xl xs:text-4xl font-geist font-bold lg:leading-16">{ad.headline}</div>}
+                                                {ad.description && <p className="pointer-events-none select-none leading-relaxed text-lg line-clamp-2">{ad.description}</p>}
+
+                                                {ctas.length > 0 && (
+                                                    <div className="flex gap-3 items-center">
+                                                        {ctas.map((cta, i) => (
+                                                            <Button
+                                                                key={i}
+                                                                variant={cta.variant === "outline" ? "outline" : "secondary"}
+                                                                onClick={() => onCtaClick?.(ad, cta)}
+                                                            >
+                                                                {cta.label}
+                                                            </Button>
+                                                        ))}
+                                                    </div>
+                                                )}
+                                            </div>
+                                        </div>
+                                    </div>
+                                )}
+                            </CarouselItem>
+                        );
+                    })}
+                </CarouselContent>
+
+                {/* Navigation and Progress — only meaningful with more than one slide */}
+                {ads.length > 1 && (
+                    <div className="flex items-center justify-between mt-4">
+                        <div className="flex items-center gap-2">
+                            <CarouselPrevious className="static translate-y-0 size-8 rounded-lg" />
+                            <CarouselNext className="static translate-y-0 size-8 rounded-lg" />
+                        </div>
+                        <div className="flex-1 max-w-24 ml-4">
+                            <Progress value={progressValue} className="h-2" />
+                        </div>
+                    </div>
+                )}
+            </Carousel>
+
+            {/* ── Page Builder content Dialog ─────────────────────────────────── */}
+            <Dialog open={!!viewAd} onOpenChange={(open) => !open && setViewAd(null)}>
+                <DialogContent className="sm:max-w-lg max-h-[80vh] overflow-y-auto">
+                    {viewAd && (() => {
+                        const page = viewAd.landing_page ?? {};
+                        const imageSrc = resolveAssetSrc(viewAd.image) || viewAd.image_url || null;
+                        const links = Array.isArray(page.links) ? page.links : [];
+
+                        return (
+                            <>
+                                <DialogHeader>
+                                    <DialogTitle>{page.title || viewAd.headline || "Advertisement"}</DialogTitle>
+                                    {page.description && <DialogDescription>{page.description}</DialogDescription>}
+                                </DialogHeader>
+
+                                {imageSrc && (
+                                    <div className="rounded-lg overflow-hidden border h-48">
+                                        <img
+                                            src={imageSrc}
+                                            alt={page.title || viewAd.headline || "Advertisement"}
+                                            className="w-full h-full object-cover"
+                                        />
+                                    </div>
+                                )}
+
+                                {page.body && (
+                                    <div className="prose prose-sm dark:prose-invert max-w-none whitespace-pre-wrap">
+                                        {page.body}
+                                    </div>
+                                )}
+
+                                {links.length > 0 && (
+                                    <div className="flex flex-wrap gap-2 pt-2">
+                                        {links.map((l, i) => (
+                                            <Button
+                                                key={i}
+                                                variant={i === 0 ? "default" : "outline"}
+                                                onClick={() => { onCtaClick?.(viewAd, l); setViewAd(null); }}
+                                            >
+                                                {l.label || l.link}
+                                            </Button>
+                                        ))}
+                                    </div>
+                                )}
+                            </>
+                        );
+                    })()}
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+}
+
+// ── BannerSkeleton ───────────────────────────────────────────────────────────
+
+export function BannerSkeleton() {
+    return <Skeleton className="w-full rounded-xl h-[220px]" />;
+}
diff --git a/apps/web/src/components/generic/Blocks/Client/Advertisements/Hero.jsx b/apps/web/src/components/generic/Blocks/Client/Advertisements/Hero.jsx
new file mode 100644
index 0000000..7dee7c4
--- /dev/null
+++ b/apps/web/src/components/generic/Blocks/Client/Advertisements/Hero.jsx
@@ -0,0 +1,240 @@
+// components/blocks/Hero.jsx
+
+import { useEffect, useState } from "react";
+import { Megaphone } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent } from "@/components/ui/card";
+import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "@/components/ui/carousel";
+import { Progress } from "@/components/ui/progress";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { resolveAssetSrc } from "@/utils/media.util";
+
+// An ad only ever has an internally-authored landing page when it has no
+// redirect_link (see applyAdvertisementFields on the backend, which clears
+// whichever one the admin didn't choose) — so its presence alone is enough
+// to tell whether there's Page Builder content worth surfacing.
+function hasLandingPage(ad) {
+    const page = ad?.landing_page;
+    if (!page) return false;
+    return Boolean(page.title || page.description || page.body || page.links?.length);
+}
+
+// ── Hero ─────────────────────────────────────────────────────────────────────
+/**
+ * Hero advertisement carousel.
+ * Each slide is a full-bleed background image with a bottom gradient overlay,
+ * badge/headline/description/CTAs anchored bottom-left. The whole slide is
+ * clickable through to the ad's redirect_link/landing page whenever it has no
+ * CTA buttons of its own. Renders null when no ads are given — callers should
+ * not fall back to placeholder copy.
+ *
+ * Props:
+ *   ads        — array of advertisement objects { badge_labels, headline, description, ctas, redirect_link, image, image_url, advertisement_id }
+ *   onCtaClick — (ad, cta) => void. cta is undefined for the whole-slide click.
+ */
+export function Hero({ ads, onCtaClick }) {
+    const [api, setApi] = useState();
+    const [current, setCurrent] = useState(0);
+    const [count, setCount] = useState(0);
+    const [viewAd, setViewAd] = useState(null); // ad whose Page Builder content is open in the Dialog
+
+    useEffect(() => {
+        if (!api) return;
+
+        setCount(api.scrollSnapList().length);
+        setCurrent(api.selectedScrollSnap() + 1);
+
+        api.on("select", () => {
+            setCurrent(api.selectedScrollSnap() + 1);
+        });
+    }, [api]);
+
+    if (!ads?.length) return null;
+
+    const progressValue = count ? (current / count) * 100 : 0;
+
+    return (
+        <div className="w-full">
+            <Carousel setApi={setApi} className="w-full">
+                <CarouselContent>
+                    {ads.map((ad) => {
+                        const imageSrc = resolveAssetSrc(ad.image) || ad.image_url || null;
+                        const ctas = Array.isArray(ad.ctas) ? ad.ctas : [];
+                        const badgeLabels = Array.isArray(ad.badge_labels) ? ad.badge_labels : [];
+
+                        // Whole-slide click-through only makes sense when there's no CTA
+                        // row of its own to carry that responsibility instead — a landing
+                        // page (Page Builder content) always wins over the plain redirect.
+                        const clickable = ctas.length === 0 && (hasLandingPage(ad) || ad.redirect_link);
+                        const handleSlideClick = () => (hasLandingPage(ad) ? setViewAd(ad) : onCtaClick?.(ad, undefined));
+
+                        return (
+                            <CarouselItem key={ad.advertisement_id}>
+                                <Card className="border rounded-2xl overflow-hidden pl-0 py-0">
+                                    <CardContent
+                                        role={clickable ? "button" : undefined}
+                                        tabIndex={clickable ? 0 : undefined}
+                                        onClick={clickable ? handleSlideClick : undefined}
+                                        onKeyDown={clickable ? (e) => { if (e.key === "Enter" || e.key === " ") handleSlideClick(); } : undefined}
+                                        className={"relative xs:h-64 lg:h-96 bg-muted flex items-center justify-center" + (clickable ? " cursor-pointer" : "")}
+                                    >
+                                        {imageSrc ? (
+                                            <img
+                                                src={imageSrc}
+                                                alt={ad.headline || "Advertisement"}
+                                                className="absolute inset-0 w-full h-full object-cover"
+                                            />
+                                        ) : (
+                                            <Megaphone className="size-8 text-muted-foreground" />
+                                        )}
+
+                                        {/* Bottom gradient overlay */}
+                                        <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent" />
+
+                                        {hasLandingPage(ad) && (
+                                            <div className="absolute top-4 right-4">
+                                                <Button
+                                                    variant="secondary"
+                                                    aria-label="View advertisement details"
+                                                    onClick={() => setViewAd(ad)}
+                                                >
+                                                    View <Megaphone />
+                                                </Button>
+                                            </div>
+                                        )}
+
+                                        {/* Bottom-left content */}
+                                        <div className="absolute bottom-0 left-0 p-6 flex flex-col gap-3 xs:max-w-[280px] sm:max-w-sm lg:max-w-xl">
+                                            {badgeLabels.length > 0 && (
+                                                <div className="flex items-center gap-1.5 flex-wrap">
+                                                    {badgeLabels.map((label, i) => (
+                                                        <Badge key={i} variant="outline" className="pointer-events-none select-none w-fit border-white/30 bg-black/20 text-white">
+                                                            <Megaphone /> {label}
+                                                        </Badge>
+                                                    ))}
+                                                </div>
+                                            )}
+                                            {ad.headline && (
+                                                <div className="font-bold text-white xs:text-2xl lg:text-4xl leading-tight tracking-tighter pointer-events-none select-none">
+                                                    {ad.headline}
+                                                </div>
+                                            )}
+                                            {ad.description && (
+                                                <p className="text-gray-200 xs:text-sm lg:text-md leading-relaxed pointer-events-none select-none line-clamp-2">
+                                                    {ad.description}
+                                                </p>
+                                            )}
+                                            {ctas.length > 0 && (
+                                                <div className="flex items-center gap-2 pt-1">
+                                                    {ctas.map((cta, i) => (
+                                                        <Button
+                                                            key={i}
+                                                            variant={cta.variant === "outline" ? "outline" : "default"}
+                                                            className={cta.variant !== "outline" ? "bg-[oklch(0.63_0.25_302)] text-white hover:bg-[oklch(0.63_0.25_302)]/85" : undefined}
+                                                            onClick={() => onCtaClick?.(ad, cta)}
+                                                        >
+                                                            {cta.label}
+                                                        </Button>
+                                                    ))}
+                                                </div>
+                                            )}
+                                        </div>
+                                    </CardContent>
+                                </Card>
+                            </CarouselItem>
+                        );
+                    })}
+                </CarouselContent>
+
+                {/* Navigation and Progress — only meaningful with more than one slide */}
+                {ads.length > 1 && (
+                    <div className="flex items-center justify-between mt-4">
+                        <div className="flex items-center gap-2">
+                            <CarouselPrevious className="static translate-y-0 size-8 rounded-lg" />
+                            <CarouselNext className="static translate-y-0 size-8 rounded-lg" />
+                        </div>
+                        <div className="flex-1 max-w-24 ml-4">
+                            <Progress value={progressValue} className="h-2" />
+                        </div>
+                    </div>
+                )}
+            </Carousel>
+
+            {/* ── Page Builder content Dialog ─────────────────────────────────── */}
+            <Dialog open={!!viewAd} onOpenChange={(open) => !open && setViewAd(null)}>
+                <DialogContent className="sm:max-w-lg max-h-[80vh] overflow-y-auto">
+                    {viewAd && (() => {
+                        const page = viewAd.landing_page ?? {};
+                        const imageSrc = resolveAssetSrc(viewAd.image) || viewAd.image_url || null;
+                        const links = Array.isArray(page.links) ? page.links : [];
+
+                        return (
+                            <>
+                                <DialogHeader>
+                                    <DialogTitle>{page.title || viewAd.headline || "Advertisement"}</DialogTitle>
+                                    {page.description && <DialogDescription>{page.description}</DialogDescription>}
+                                </DialogHeader>
+
+                                {imageSrc && (
+                                    <div className="rounded-lg overflow-hidden border h-48">
+                                        <img
+                                            src={imageSrc}
+                                            alt={page.title || viewAd.headline || "Advertisement"}
+                                            className="w-full h-full object-cover"
+                                        />
+                                    </div>
+                                )}
+
+                                {page.body && (
+                                    <div className="prose prose-sm dark:prose-invert max-w-none whitespace-pre-wrap">
+                                        {page.body}
+                                    </div>
+                                )}
+
+                                {links.length > 0 && (
+                                    <div className="flex flex-wrap gap-2 pt-2">
+                                        {links.map((l, i) => (
+                                            <Button
+                                                key={i}
+                                                variant={i === 0 ? "default" : "outline"}
+                                                onClick={() => { onCtaClick?.(viewAd, l); setViewAd(null); }}
+                                            >
+                                                {l.label || l.link}
+                                            </Button>
+                                        ))}
+                                    </div>
+                                )}
+                            </>
+                        );
+                    })()}
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+}
+
+// ── HeroSkeleton ─────────────────────────────────────────────────────────────
+
+export function HeroSkeleton() {
+    return (
+        <div className="w-full">
+            <Card className="border rounded-2xl overflow-hidden pl-0 py-0">
+                <CardContent className="relative xs:h-64 lg:h-96">
+                    <Skeleton className="absolute inset-0 h-full w-full rounded-none" />
+                    <div className="absolute bottom-0 left-0 p-6 flex flex-col gap-3 w-full max-w-lg">
+                        <Skeleton className="h-6 w-32 rounded-full" />
+                        <Skeleton className="h-10 w-3/4" />
+                        <Skeleton className="h-4 w-full" />
+                        <Skeleton className="h-4 w-2/3" />
+                        <div className="flex gap-2 pt-1">
+                            <Skeleton className="h-9 w-24" />
+                            <Skeleton className="h-9 w-28" />
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}
diff --git a/apps/web/src/components/generic/Blocks/Client/AudioBlock.jsx b/apps/web/src/components/generic/Blocks/Client/AudioBlock.jsx
new file mode 100644
index 0000000..be628fb
--- /dev/null
+++ b/apps/web/src/components/generic/Blocks/Client/AudioBlock.jsx
@@ -0,0 +1,371 @@
+import { useRef, useState, useEffect, useCallback } from "react";
+import { Music2, RotateCcw, RotateCw, Play, Pause, VolumeOff, Volume2 } from "lucide-react";
+import api from "@/utils/api.util";
+import { MediaFallback } from "@/components/generic/MediaFallback";
+import { useMediaWatchGuard } from "@/hooks/useMediaWatchGuard";
+import { formatPlayerTime as fmtTime } from "@/utils/format.util";
+
+const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2];
+
+const API_BASE = (import.meta.env.VITE_API_URL ?? "http://localhost:3024").replace(/\/$/, "");
+
+// ─── AudioBlock (Client — secure) ────────────────────────────────────────────
+//
+// S3/Garage:
+//   1. POST /client/media/token → get JWT token
+//   2. fetch(streamUrl, { credentials: "include" }) → get raw bytes
+//   3. URL.createObjectURL(blob) → blob:http://... URL
+//   4. <audio src="blob:..."> → real URL never visible in DOM
+//
+// Chibisafe:
+//   → content.url used directly (Chibisafe CDN, no proxy needed)
+//
+// Direct (legacy):
+//   → content.url / content.src used directly, no token flow
+//
+// content shape: { asset_id?, url?, storage_provider?, title?, artist?, tag?, thumbnail? }
+
+// onWatchProgress(percent) — optional, called (throttled) as playback advances and
+// immediately at 100% on end. Backing the watch_percent completion requirement type.
+export function AudioBlock({ content, onWatchProgress, resumePercent, antiSkipEnabled }) {
+    const audioRef = useRef(null);
+    const guard     = useMediaWatchGuard({ onWatchProgress, antiSkipEnabled });
+    const resumedRef = useRef(false);
+
+    // ── Stream state ──────────────────────────────────────────────────────────
+    const [blobUrl,       setBlobUrl]       = useState(null);
+    const [thumbnailUrl,  setThumbnailUrl]  = useState(null);
+    const [fetchLoading,  setFetchLoading]  = useState(false);
+    const [fetchError,    setFetchError]    = useState(false);
+
+    // ── Player state ──────────────────────────────────────────────────────────
+    const [playing,     setPlaying]     = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [buffered,    setBuffered]    = useState(0);
+    const [duration,    setDuration]    = useState(0);
+    const [volume,      setVolume]      = useState(1);
+    const [muted,       setMuted]       = useState(false);
+    const [speedIdx,    setSpeedIdx]    = useState(2); // 1×
+
+    const assetId         = content?.asset_id;
+    const storageProvider = content?.storage_provider;
+    const directUrl       = content?.url ?? content?.src ?? null;
+    const title           = content?.title     ?? "Audio";
+    const artist          = content?.artist    ?? "";
+    const tag             = content?.tag       ?? "";
+    // For S3 assets, thumbnailUrl is set from the token response (presigned URL).
+    // For other providers, fall back to the raw content.thumbnail value.
+    const thumbnail       = thumbnailUrl ?? content?.thumbnail ?? null;
+
+    // ── Resolve stream URL → set as audio src directly ───────────────────────
+    useEffect(() => {
+        setBlobUrl(null);
+        setThumbnailUrl(null);
+        setFetchError(false);
+        setPlaying(false);
+        setCurrentTime(0);
+        setDuration(0);
+        guard.reset();
+        resumedRef.current = false;
+
+        // Legacy direct URL — no asset_id
+        if (!assetId && directUrl) {
+            setBlobUrl(directUrl);
+            return;
+        }
+
+        if (!assetId) return;
+
+        let cancelled = false;
+
+        const load = async () => {
+            setFetchLoading(true);
+            try {
+                // Chibisafe — use raw URL directly (CDN is public, no token needed)
+                if (storageProvider === "chibisafe") {
+                    if (!directUrl) throw new Error("No URL in content");
+                    if (!cancelled) setBlobUrl(directUrl);
+                    return;
+                }
+
+                // S3 — get token; response also includes presigned thumbnail URL
+                const { data } = await api.post("/client/media/token", { asset_id: assetId });
+                if (cancelled) return;
+                const { token, thumbnail_url } = data?.data ?? {};
+                if (!token) throw new Error("No token returned");
+
+                if (!cancelled) {
+                    setBlobUrl(`${API_BASE}/client/media/stream/${token}`);
+                    if (thumbnail_url) setThumbnailUrl(thumbnail_url);
+                }
+
+            } catch (err) {
+                if (cancelled) return;
+                console.error("[AudioBlock] load failed", err);
+                setFetchError(true);
+            } finally {
+                if (!cancelled) setFetchLoading(false);
+            }
+        };
+
+        load();
+
+        return () => { cancelled = true; };
+    }, [assetId, storageProvider, directUrl]);
+
+    // ── Audio events ──────────────────────────────────────────────────────────
+
+    const onTimeUpdate = useCallback(() => {
+        const el = audioRef.current;
+        setCurrentTime(el?.currentTime ?? 0);
+        guard.trackTimeUpdate(el?.currentTime ?? 0, el?.duration);
+        if (el?.duration) {
+            const pct = (el.currentTime / el.duration) * 100;
+            guard.maybeReport(pct);
+        }
+    }, [guard]);
+    const onLoadedMeta = useCallback(() => {
+        const el = audioRef.current;
+        const d  = el?.duration ?? 0;
+        setDuration(d);
+        guard.setDuration(d);
+        // Resume from the last position reached, once per asset. Left alone once
+        // fully watched (>=99%) — restarting reads better than resuming at the end.
+        if (el && !resumedRef.current && resumePercent > 0 && resumePercent < 99 && d) {
+            resumedRef.current = true;
+            const resumeSeconds = Math.min((resumePercent / 100) * d, d - 0.25);
+            el.currentTime = resumeSeconds;
+            setCurrentTime(resumeSeconds);
+            // Seeds the seek-cap so forward-seeking within already-watched territory
+            // works immediately, instead of clamping back to 0 until the next tick.
+            guard.trackTimeUpdate(resumeSeconds, d);
+        }
+    }, [guard, resumePercent]);
+    const onEnded      = useCallback(() => { setPlaying(false); onWatchProgress?.(100); }, [onWatchProgress]);
+    const onPlay       = useCallback(() => {
+        const el = audioRef.current;
+        if (el?.duration) guard.reportPlayStart((el.currentTime / el.duration) * 100);
+    }, [guard]);
+    const onPause      = useCallback(() => {
+        const el = audioRef.current;
+        if (el?.duration) guard.flush((el.currentTime / el.duration) * 100);
+    }, [guard]);
+    const onSeeking    = useCallback(() => guard.markSeeking(), [guard]);
+    const onSeeked     = useCallback(() => guard.markSeeked(), [guard]);
+    const onProgress   = useCallback(() => {
+        const el = audioRef.current;
+        if (el?.buffered.length && el.duration) {
+            setBuffered((el.buffered.end(el.buffered.length - 1) / el.duration) * 100);
+        }
+    }, []);
+
+    // ── Controls ──────────────────────────────────────────────────────────────
+
+    const togglePlay = () => {
+        const el = audioRef.current;
+        if (!el) return;
+        if (playing) { el.pause(); setPlaying(false); }
+        else         { el.play();  setPlaying(true);  }
+    };
+
+    const seek = (e) => {
+        const el  = audioRef.current;
+        const bar = e.currentTarget;
+        const pct = (e.clientX - bar.getBoundingClientRect().left) / bar.offsetWidth;
+        el.currentTime = guard.clampSeekTarget(pct * duration);
+    };
+
+    const skip = (secs) => {
+        const el = audioRef.current;
+        if (!el) return;
+        el.currentTime = guard.clampSeekTarget(Math.min(Math.max(0, el.currentTime + secs), duration));
+    };
+
+    const handleVolume = (e) => {
+        const v = parseFloat(e.target.value);
+        setVolume(v);
+        if (audioRef.current) audioRef.current.volume = v;
+        setMuted(v === 0);
+    };
+
+    const toggleMute = () => {
+        const el = audioRef.current;
+        if (!el) return;
+        el.muted = !muted;
+        setMuted(!muted);
+    };
+
+    const cycleSpeed = () => {
+        const next = (speedIdx + 1) % SPEEDS.length;
+        setSpeedIdx(next);
+        if (audioRef.current) audioRef.current.playbackRate = SPEEDS[next];
+    };
+
+    const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+
+    // ── States ────────────────────────────────────────────────────────────────
+
+    if (fetchLoading) {
+        return <MediaFallback className="w-full h-28 rounded-xl border border-border" />;
+    }
+
+    if (fetchError) {
+        return (
+            <div className="w-full rounded-xl border border-border bg-card flex items-center justify-center h-24 gap-2 text-muted-foreground text-sm">
+                <Music2 className="size-4" /> Audio unavailable.
+            </div>
+        );
+    }
+
+    if (!blobUrl) return null;
+
+    // ─────────────────────────────────────────────────────────────────────────
+    return (
+        <div className="w-full rounded-xl overflow-hidden border border-border bg-card text-card-foreground shadow-sm">
+
+            <audio
+                ref={audioRef}
+                src={blobUrl}
+                onTimeUpdate={onTimeUpdate}
+                onLoadedMetadata={onLoadedMeta}
+                onEnded={onEnded}
+                onPlay={onPlay}
+                onPause={onPause}
+                onSeeking={onSeeking}
+                onSeeked={onSeeked}
+                onProgress={onProgress}
+                preload="auto"
+            />
+
+            {/* ── Header ── */}
+            <div className="relative overflow-hidden">
+                <div className="xs:opacity-0 lg:opacity-100 select-none absolute top-4 right-5 z-20">
+                    <img src="/philpro-white-single.png" alt="Logo" className="h-6 w-auto" />
+                </div>
+
+                {thumbnail ? (
+                    <div
+                        className="absolute inset-0 scale-110"
+                        style={{
+                            backgroundImage: `url(${thumbnail})`,
+                            backgroundSize: "cover",
+                            backgroundPosition: "center",
+                            filter: "blur(24px) brightness(0.35)",
+                        }}
+                    />
+                ) : (
+                    <div className="absolute inset-0 bg-primary" />
+                )}
+
+                {/* Mobile */}
+                <div className="relative z-10 flex flex-col gap-4 pb-6 text-white sm:hidden">
+                    <div className="w-full px-4 pt-4">
+                        <div className="w-full h-72 aspect-square rounded-lg overflow-hidden bg-black/30 shadow-xl dark:border">
+                            {thumbnail ? (
+                                <img src={thumbnail} alt={title} className="w-full h-full object-cover" />
+                            ) : (
+                                <div className="w-full h-full flex items-center justify-center">
+                                    <Music2 className="w-10 h-10 text-white/30" />
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                    <div className="flex flex-col gap-1 px-4">
+                        {tag && (
+                            <div className="text-xs font-semibold rounded-full uppercase px-3 py-1 bg-card text-card-foreground border w-fit mb-1">
+                                {tag}
+                            </div>
+                        )}
+                        <p className="text-lg font-semibold leading-tight">{title}</p>
+                        {artist && <p className="text-sm text-white/60">{artist}</p>}
+                    </div>
+                </div>
+
+                {/* Desktop */}
+                <div className="relative z-10 hidden sm:flex items-center gap-4 p-4 text-white">
+                    <div className="shrink-0 w-48 h-48 rounded-md overflow-hidden bg-black/25">
+                        {thumbnail ? (
+                            <img src={thumbnail} alt={title} className="w-full h-full object-cover" />
+                        ) : (
+                            <div className="w-full h-full flex items-center justify-center">
+                                <Music2 className="w-7 h-7 text-white/30" />
+                            </div>
+                        )}
+                    </div>
+                    <div className="flex flex-col gap-1 min-w-0">
+                        {tag && (
+                            <div className="text-xs font-semibold rounded-full uppercase px-3 py-1 bg-card text-card-foreground border w-fit">
+                                {tag}
+                            </div>
+                        )}
+                        <p className="w-sm line-clamp-3 text-lg font-semibold leading-tight">{title}</p>
+                        {artist && <p className="text-sm text-white/60 truncate">{artist}</p>}
+                    </div>
+                </div>
+            </div>
+
+            {/* ── Controls ── */}
+            <div className="px-4 pb-4 pt-3 space-y-3">
+                <div className="flex items-center gap-2.5">
+                    <span className="text-xs tabular-nums text-card-foreground w-8 shrink-0">
+                        {fmtTime(currentTime)}
+                    </span>
+                    <div
+                        className="flex-1 h-1.5 rounded-full bg-muted cursor-pointer relative group"
+                        onClick={seek}
+                        role="slider"
+                        aria-label="Seek"
+                        aria-valuenow={Math.round(progress)}
+                        aria-valuemin={0}
+                        aria-valuemax={100}
+                    >
+                        <div className="absolute inset-y-0 left-0 rounded-full bg-muted-foreground/25 transition-[width] duration-300" style={{ width: `${buffered}%` }} />
+                        <div className="h-full rounded-full bg-primary transition-all relative" style={{ width: `${progress}%` }} />
+                        <div className="absolute top-1/2 w-3 h-3 rounded-full bg-primary opacity-0 group-hover:opacity-100 transition-opacity" style={{ left: `${progress}%`, transform: "translate(-50%, -50%)" }} />
+                    </div>
+                    <span className="text-xs tabular-nums text-card-foreground w-8 shrink-0 text-right">
+                        {fmtTime(duration)}
+                    </span>
+                </div>
+
+                <div className="grid grid-cols-3 items-center">
+                    {/* Left — volume */}
+                    <div className="flex items-center gap-1.5">
+                        <button onClick={toggleMute} aria-label={muted ? "Unmute" : "Mute"} className="w-7 h-7 flex items-center justify-center rounded-full text-foreground hover:bg-muted transition-colors">
+                            {muted || volume === 0 ? <VolumeOff className="size-4" /> : <Volume2 className="size-4" />}
+                        </button>
+                        <input
+                            type="range" min="0" max="1" step="0.05"
+                            value={muted ? 0 : volume}
+                            onChange={handleVolume}
+                            aria-label="Volume"
+                            className="w-16 h-1.5 accent-primary cursor-pointer
+                                [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:cursor-pointer
+                                [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:cursor-pointer"
+                        />
+                    </div>
+
+                    {/* Center — play controls */}
+                    <div className="flex items-center justify-center gap-2">
+                        <button onClick={() => skip(-10)} aria-label="Rewind 10 seconds" className="p-2 flex items-center justify-center rounded-full text-foreground hover:bg-muted transition-colors">
+                            <RotateCcw className="size-4" />
+                        </button>
+                        <button onClick={togglePlay} aria-label={playing ? "Pause" : "Play"} className="p-3 rounded-full flex items-center justify-center bg-primary text-primary-foreground hover:opacity-80 transition-opacity active:scale-95 shadow-md">
+                            {playing ? <Pause className="xs:size-4 lg:size-5" /> : <Play className="xs:size-4 lg:size-5" />}
+                        </button>
+                        <button onClick={() => skip(10)} aria-label="Forward 10 seconds" className="p-2 flex items-center justify-center rounded-full text-foreground hover:bg-muted transition-colors">
+                            <RotateCw className="size-4" />
+                        </button>
+                    </div>
+
+                    {/* Right — speed */}
+                    <div className="flex items-center justify-end gap-1">
+                        <button onClick={cycleSpeed} aria-label={`Playback speed ${SPEEDS[speedIdx]}x`} className="h-7 px-2 rounded text-sm font-medium text-foreground hover:bg-muted transition-colors tabular-nums">
+                            {SPEEDS[speedIdx]}x
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Blocks/Client/CodeBlock.jsx b/apps/web/src/components/generic/Blocks/Client/CodeBlock.jsx
new file mode 100644
index 0000000..c16f726
--- /dev/null
+++ b/apps/web/src/components/generic/Blocks/Client/CodeBlock.jsx
@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { Copy, Check } from "lucide-react";
+
+export function CodeBlock({ content }) {
+    const [copied, setCopied] = useState(false);
+
+    const code     = content.code ?? "";
+    const language = content.language ?? "text";
+
+    const handleCopy = () => {
+        navigator.clipboard.writeText(code).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        });
+    };
+
+    if (!code) {
+        return (
+            <div className="rounded-lg border border-dashed bg-muted/20 p-4 text-xs text-muted-foreground italic">
+                Empty code block
+            </div>
+        );
+    }
+
+    return (
+        <div className="rounded-lg overflow-hidden border border-zinc-700 dark:border-zinc-600 bg-zinc-950 text-zinc-100 my-2">
+            {/* ── Header bar ── */}
+            <div className="flex items-center justify-between px-4 py-2 bg-zinc-900 border-b border-zinc-700">
+                <span className="text-[11px] font-mono text-zinc-400 uppercase tracking-widest select-none">
+                    {language}
+                </span>
+                <button
+                    onClick={handleCopy}
+                    className="flex items-center gap-1.5 text-xs text-zinc-400 hover:text-zinc-100 transition-colors"
+                >
+                    {copied
+                        ? <Check className="size-3.5 text-emerald-400" />
+                        : <Copy className="size-3.5" />
+                    }
+                    <span>{copied ? "Copied!" : "Copy"}</span>
+                </button>
+            </div>
+
+            {/* ── Code area ── */}
+            <pre className="overflow-x-auto p-4 text-sm leading-relaxed" style={{ margin: 0, background: "transparent" }}>
+                <code className="font-mono whitespace-pre">{code}</code>
+            </pre>
+        </div>
+    );
+}
diff --git a/apps/web/src/components/generic/Blocks/Client/ImageBlock.jsx b/apps/web/src/components/generic/Blocks/Client/ImageBlock.jsx
new file mode 100644
index 0000000..04d2233
--- /dev/null
+++ b/apps/web/src/components/generic/Blocks/Client/ImageBlock.jsx
@@ -0,0 +1,32 @@
+import { ImageIcon } from "lucide-react";
+import { ZoomableImage } from "@/modules/admin/components/courses/LessonsPreview";
+import { useAssetPreviewSrc } from "@/hooks/useAssetPreviewSrc";
+import { MediaFallback } from "@/components/generic/MediaFallback";
+
+// content shape: { asset_id?, url?, storage_provider?, alt? }
+//
+// url is redacted (null) server-side for S3 assets — see redactS3Url() in
+// controllers/admin/assets.controller.js. Resolve through useAssetPreviewSrc
+// (media.util.js) instead of reading content.url directly, so S3-backed
+// images re-mint a fresh stream token/thumbnail at render time.
+export function ImageBlock({ content }) {
+    const { src, loading } = useAssetPreviewSrc(
+        { asset_id: content?.asset_id, storage_provider: content?.storage_provider, file_url: content?.url, thumbnail_url: content?.url },
+        { scope: "client" },
+    );
+
+    if (loading) {
+        return <MediaFallback className="aspect-video rounded-lg" />;
+    }
+
+    if (!src) {
+        return (
+            <div className="flex items-center justify-center aspect-video rounded-lg border border-dashed text-xs text-muted-foreground bg-muted/20 gap-1.5">
+                <ImageIcon className="h-4 w-4" />
+                No image
+            </div>
+        );
+    }
+
+    return <ZoomableImage url={src} alt={content?.alt} />;
+}
diff --git a/apps/web/src/components/generic/Blocks/Client/MarkdownBlock.jsx b/apps/web/src/components/generic/Blocks/Client/MarkdownBlock.jsx
new file mode 100644
index 0000000..78a6229
--- /dev/null
+++ b/apps/web/src/components/generic/Blocks/Client/MarkdownBlock.jsx
@@ -0,0 +1,20 @@
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+export function MarkdownBlock({ content }) {
+    const body = content.body ?? "";
+
+    if (!body.trim()) {
+        return (
+            <div className="text-xs text-muted-foreground italic py-2">
+                Empty markdown block
+            </div>
+        );
+    }
+
+    return (
+        <div className="typeset">
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{body}</ReactMarkdown>
+        </div>
+    );
+}
diff --git a/apps/web/src/components/generic/Blocks/Client/TextBlock.jsx b/apps/web/src/components/generic/Blocks/Client/TextBlock.jsx
new file mode 100644
index 0000000..34b8247
--- /dev/null
+++ b/apps/web/src/components/generic/Blocks/Client/TextBlock.jsx
@@ -0,0 +1,11 @@
+export function TextBlock({ content }) {
+    if (!content.body) {
+        return <div className="text-xs text-muted-foreground italic py-2">Empty text block</div>;
+    }
+    return (
+        <div
+            className="typeset text-sm"
+            dangerouslySetInnerHTML={{ __html: content.body }}
+        />
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Blocks/Client/TextImageBlock.jsx b/apps/web/src/components/generic/Blocks/Client/TextImageBlock.jsx
new file mode 100644
index 0000000..f4966c8
--- /dev/null
+++ b/apps/web/src/components/generic/Blocks/Client/TextImageBlock.jsx
@@ -0,0 +1,15 @@
+import { ImageBlock } from "./ImageBlock";
+
+export function TextImageBlock({ content }) {
+    const imgLeft = content.image_position === "left";
+    return (
+        <div className="flex flex-col gap-6 items-start sm:grid sm:grid-cols-2 sm:gap-6">
+            {imgLeft && <ImageBlock content={content} />}
+            <div
+                className="typeset text-sm w-full"
+                dangerouslySetInnerHTML={{ __html: content.body || "<p class='text-muted-foreground italic'>Empty text</p>" }}
+            />
+            {!imgLeft && <ImageBlock content={content} />}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Blocks/Client/TextVideoBlock.jsx b/apps/web/src/components/generic/Blocks/Client/TextVideoBlock.jsx
new file mode 100644
index 0000000..0c2a98d
--- /dev/null
+++ b/apps/web/src/components/generic/Blocks/Client/TextVideoBlock.jsx
@@ -0,0 +1,17 @@
+import { VideoBlock } from "./VideoBlock";
+
+export function TextVideoBlock({ content, onWatchProgress, resumePercent, antiSkipEnabled }) {
+    const vidLeft = content.video_position === "left";
+    return (
+        <div className="flex flex-col gap-6 items-start sm:grid sm:grid-cols-2 sm:gap-6">
+            {vidLeft && <VideoBlock content={content} onWatchProgress={onWatchProgress} resumePercent={resumePercent} antiSkipEnabled={antiSkipEnabled} />}
+            <div
+                className="typeset text-sm w-full"
+                dangerouslySetInnerHTML={{
+                    __html: content.body || "<p class='text-muted-foreground italic'>Empty text</p>",
+                }}
+            />
+            {!vidLeft && <VideoBlock content={content} onWatchProgress={onWatchProgress} resumePercent={resumePercent} antiSkipEnabled={antiSkipEnabled} />}
+        </div>
+    );
+}
diff --git a/apps/web/src/components/generic/Blocks/Client/VideoBlock.jsx b/apps/web/src/components/generic/Blocks/Client/VideoBlock.jsx
new file mode 100644
index 0000000..db37236
--- /dev/null
+++ b/apps/web/src/components/generic/Blocks/Client/VideoBlock.jsx
@@ -0,0 +1,730 @@
+import { useRef, useState, useEffect, useCallback } from "react";
+import {
+    Play, Pause, SkipBack, Volume2, VolumeX, Maximize2, Minimize2, Settings, VideoIcon,
+    Volume1, SkipForward, Gauge, X, RotateCcw,
+} from "lucide-react";
+import {
+    Tooltip, TooltipContent, TooltipProvider, TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import api from "@/utils/api.util";
+import { MediaFallback } from "@/components/generic/MediaFallback";
+import { useMediaWatchGuard } from "@/hooks/useMediaWatchGuard";
+import { formatPlayerTime as fmtTime } from "@/utils/format.util";
+
+const PLAYBACK_SPEEDS = ["0.5", "0.75", "Normal", "1.25", "1.5", "2"];
+
+const API_BASE = (import.meta.env.VITE_API_URL ?? "http://localhost:3024").replace(/\/$/, "");
+
+// ─── Tooltip control button ───────────────────────────────────────────────────
+
+function CtrlBtn({ label, onClick, children, className = "" }) {
+    return (
+        <Tooltip>
+            <TooltipTrigger asChild>
+                <button
+                    type="button"
+                    aria-label={label}
+                    onClick={onClick}
+                    className={`text-white/80 hover:text-white transition-colors flex items-center justify-center ${className}`}
+                >
+                    {children}
+                </button>
+            </TooltipTrigger>
+            <TooltipContent side="top" className="text-sm">{label}</TooltipContent>
+        </Tooltip>
+    );
+}
+
+// ─── Settings panel ───────────────────────────────────────────────────────────
+
+function SettingsPanel({ speed, onSpeed, onClose }) {
+    const [tab, setTab] = useState(null);
+
+    const Row = ({ icon: Icon, label, value, onClick }) => (
+        <button
+            type="button"
+            onClick={onClick}
+            className="w-full flex items-center justify-between px-4 py-2.5 hover:bg-white/10 transition-colors text-sm"
+        >
+            <span className="flex items-center gap-2.5 text-white/90">
+                <Icon className="size-4 text-white/50" />
+                {label}
+            </span>
+            <div className="text-white/50 flex items-center gap-2">
+                <p>{value}</p><ChevronRight className="size-4" />
+            </div>
+        </button>
+    );
+
+    const OptionList = ({ options, current, onSelect }) => (
+        <div className="py-1">
+            {options.map((opt) => (
+                <button
+                    key={opt} type="button"
+                    onClick={() => { onSelect(opt); setTab(null); }}
+                    className={`w-full text-left px-4 py-2 text-sm transition-colors hover:bg-white/10 flex items-center justify-between ${current === opt ? "text-white font-medium" : "text-white/60"}`}
+                >
+                    {opt}
+                    {current === opt && <span className="text-white text-xs">✓</span>}
+                </button>
+            ))}
+        </div>
+    );
+
+    return (
+        <>
+            <div
+                className="hidden lg:block absolute bottom-12 right-2 z-20 w-70 rounded-xl overflow-hidden shadow-2xl border border-white/10"
+                style={{ background: "rgba(18,18,18,0.96)", backdropFilter: "blur(16px)" }}
+                onClick={(e) => e.stopPropagation()}
+            >
+                {tab === null && (
+                    <>
+                        <p className="text-[10px] font-semibold uppercase tracking-widest text-white/30 px-4 pt-3 pb-1">Settings</p>
+                        <Row icon={Gauge} label="Playback speed" value={speed} onClick={() => setTab("speed")} />
+                        <div className="h-2" />
+                    </>
+                )}
+                {tab !== null && (
+                    <>
+                        <button type="button" onClick={() => setTab(null)} className="flex items-center gap-1.5 px-4 pt-3 pb-1 text-sm text-white/40 hover:text-white/70 transition-colors w-full">
+                            <ChevronLeft className="size-4" /> Playback speed
+                        </button>
+                        <OptionList options={PLAYBACK_SPEEDS} current={speed} onSelect={onSpeed} />
+                        <div className="h-1" />
+                    </>
+                )}
+            </div>
+
+            <div
+                className="lg:hidden absolute bottom-0 left-0 right-0 z-20 rounded-t-2xl border-t border-white/10 overflow-hidden"
+                style={{ background: "rgba(18,18,18,0.98)", backdropFilter: "blur(20px)" }}
+                onClick={(e) => e.stopPropagation()}
+            >
+                <div className="flex items-center justify-between px-4 pt-2.5 pb-1">
+                    <div className="w-8 h-1 rounded-full bg-white/20 mx-auto" />
+                    <button type="button" onClick={(e) => { e.stopPropagation(); onClose(); }} className="absolute right-3 top-3 text-white/40 hover:text-white transition-colors">
+                        <X className="size-4" />
+                    </button>
+                </div>
+                {tab === null && (
+                    <>
+                        <p className="text-[10px] font-semibold uppercase tracking-widest text-white/30 px-4 pt-2 pb-1">Settings</p>
+                        <Row icon={Gauge} label="Playback speed" value={speed} onClick={() => setTab("speed")} />
+                        <div className="h-safe pb-4" />
+                    </>
+                )}
+                {tab !== null && (
+                    <>
+                        <button type="button" onClick={() => setTab(null)} className="flex items-center gap-1.5 px-4 pt-3 pb-1 text-sm text-white/40 hover:text-white/70 transition-colors w-full">
+                            <ChevronLeft className="size-4" /> Playback speed
+                        </button>
+                        <div className="flex flex-wrap gap-2 px-4 py-3">
+                            {PLAYBACK_SPEEDS.map((opt) => (
+                                <button
+                                    key={opt} type="button"
+                                    onClick={() => { onSpeed(opt); setTab(null); }}
+                                    className={`px-4 py-1.5 rounded-full text-sm border transition-colors ${speed === opt ? "bg-white text-black border-white font-medium" : "bg-white/10 text-white/70 border-white/10 hover:bg-white/20"}`}
+                                >
+                                    {opt}
+                                </button>
+                            ))}
+                        </div>
+                        <div className="pb-4" />
+                    </>
+                )}
+            </div>
+        </>
+    );
+}
+
+// ─── VideoBlock (Client — secure) ────────────────────────────────────────────
+//
+// S3/Garage:
+//   1. POST /client/media/token → get JWT token
+//   2. fetch(streamUrl, { credentials: "include" }) → get raw bytes
+//   3. URL.createObjectURL(blob) → blob:http://... URL
+//   4. <video src="blob:..."> → real URL never visible in DOM
+//
+// Chibisafe:
+//   → content.url used directly (Chibisafe CDN, no proxy needed)
+//
+// content shape: { asset_id, url, storage_provider, thumbnail_url? }
+
+// onWatchProgress(percent) — optional, called (throttled) as playback advances and
+// immediately at 100% on end. Backing the watch_percent completion requirement type;
+// harmless/unused when the lesson isn't configured for it (caller just won't pass it).
+export function VideoBlock({ content, onWatchProgress, resumePercent, antiSkipEnabled }) {
+    const wrapRef = useRef(null);
+    const vidRef  = useRef(null);
+    const guard   = useMediaWatchGuard({ onWatchProgress, antiSkipEnabled });
+    const resumedRef = useRef(false);
+
+    // ── Stream state ──────────────────────────────────────────────────────────
+    const [blobUrl,      setBlobUrl]      = useState(null);
+    const [freshThumb,   setFreshThumb]   = useState(null);
+    const [fetchLoading, setFetchLoading] = useState(false);
+    const [fetchError,   setFetchError]   = useState(false);
+
+    // ── Player state ──────────────────────────────────────────────────────────
+    const [playing,         setPlaying]         = useState(false);
+    const [progress,        setProgress]        = useState(0);
+    const [currentTime,     setCurrentTime]     = useState(0);
+    const [totalDuration,   setTotalDuration]   = useState(0);
+    const [muted,           setMuted]           = useState(false);
+    const [volume,          setVolume]          = useState(1);
+    const [ended,           setEnded]           = useState(false);
+    const [overlayVisible,  setOverlayVisible]  = useState(true);
+    const [controlsVisible, setControlsVisible] = useState(true);
+    // Native Fullscreen API works on desktop (all browsers) and Android Chrome.
+    // iOS Safari doesn't support Fullscreen API on arbitrary elements at all, so
+    // pseudoFullscreen is a CSS-only (fixed inset-0) fallback that keeps our
+    // custom controls instead of falling back to native <video> fullscreen.
+    const [nativeFullscreen, setNativeFullscreen] = useState(false);
+    const [pseudoFullscreen, setPseudoFullscreen] = useState(false);
+    const isFullscreen = nativeFullscreen || pseudoFullscreen;
+    const [settingsOpen,    setSettingsOpen]    = useState(false);
+    const [volumePanelOpen, setVolumePanelOpen] = useState(false);
+    const [keyFeedback,     setKeyFeedback]     = useState(null);
+    const [speed,           setSpeed]           = useState("Normal");
+    const [buffered,        setBuffered]        = useState(0);
+    const [buffering,       setBuffering]       = useState(false);
+    const [hoverProgress,   setHoverProgress]   = useState(null);
+
+    const hideTimer        = useRef(null);
+    const keyFeedbackTimer = useRef(null);
+    const previewVidRef    = useRef(null);
+
+    const assetId         = content?.asset_id;
+    const storageProvider = content?.storage_provider;
+    // content.thumbnail_url is a presigned S3 URL captured at CMS pick time —
+    // it expires. For S3 assets, use the fresh thumbnail_url minted alongside
+    // the stream token below instead; only fall back to the persisted value
+    // for chibisafe (stable public CDN URL).
+    const poster          = (storageProvider === "s3" ? freshThumb : content?.thumbnail_url) ?? undefined;
+
+    // ── Resolve stream URL → set as video src directly ───────────────────────
+    //
+    // Previously we fetched all bytes into a Blob and used URL.createObjectURL().
+    // That blob URL could be opened in a new tab and saved with "Save Video As...".
+    // Now we set the stream URL directly as <video src> — no blob is ever created.
+    // The backend blocks direct browser navigation (Sec-Fetch-Mode: navigate → 401)
+    // and the token is IP-bound, so sharing the URL is ineffective.
+    useEffect(() => {
+        if (!assetId) return;
+
+        setBlobUrl(null);
+        setFreshThumb(null);
+        setFetchError(false);
+        setPlaying(false);
+        setProgress(0);
+        setCurrentTime(0);
+        setTotalDuration(0);
+        setOverlayVisible(true);
+        setSettingsOpen(false);
+        setEnded(false);
+        guard.reset();
+        resumedRef.current = false;
+
+        let cancelled = false;
+
+        const load = async () => {
+            setFetchLoading(true);
+            try {
+                // Chibisafe — use raw URL directly
+                if (storageProvider === "chibisafe") {
+                    const raw = content?.url;
+                    if (!raw) throw new Error("No URL in content");
+                    if (!cancelled) setBlobUrl(raw);
+                    return;
+                }
+
+                // S3 — get token then stream directly; no blob download
+                const { data } = await api.post("/client/media/token", { asset_id: assetId });
+                if (cancelled) return;
+                const { token, thumbnail_url } = data?.data ?? {};
+                if (!token) throw new Error("No token returned");
+
+                if (!cancelled) {
+                    setBlobUrl(`${API_BASE}/client/media/stream/${token}`);
+                    if (thumbnail_url) setFreshThumb(thumbnail_url);
+                }
+
+            } catch (err) {
+                if (cancelled) return;
+                console.error("[VideoBlock] load failed", err);
+                setFetchError(true);
+            } finally {
+                if (!cancelled) setFetchLoading(false);
+            }
+        };
+
+        load();
+
+        return () => { cancelled = true; };
+    }, [assetId, storageProvider]);
+
+    // ── Video events ──────────────────────────────────────────────────────────
+    useEffect(() => {
+        const v = vidRef.current;
+        if (!v || !blobUrl) return;
+
+        const onTimeUpdate = () => {
+            setCurrentTime(v.currentTime);
+            guard.trackTimeUpdate(v.currentTime, v.duration);
+            if (v.duration) {
+                const pct = (v.currentTime / v.duration) * 100;
+                setProgress(pct);
+                guard.maybeReport(pct);
+            }
+        };
+        const onLoaded   = () => {
+            setTotalDuration(v.duration);
+            guard.setDuration(v.duration);
+            // Resume from the last position reached, once per asset. Left alone once
+            // fully watched (>=99%) — restarting reads better than resuming at the end.
+            if (!resumedRef.current && resumePercent > 0 && resumePercent < 99 && v.duration) {
+                resumedRef.current = true;
+                const resumeSeconds = Math.min((resumePercent / 100) * v.duration, v.duration - 0.25);
+                v.currentTime = resumeSeconds;
+                setCurrentTime(resumeSeconds);
+                setProgress(resumePercent);
+                // Seeds the seek-cap so forward-seeking within already-watched territory
+                // works immediately, instead of clamping back to 0 until the next tick.
+                guard.trackTimeUpdate(resumeSeconds, v.duration);
+            }
+        };
+        const onEnded    = () => {
+            setPlaying(false); setOverlayVisible(false); setEnded(true);
+            onWatchProgress?.(100);
+        };
+        const onPlay     = () => {
+            if (v.duration) guard.reportPlayStart((v.currentTime / v.duration) * 100);
+        };
+        const onPause    = () => {
+            if (v.duration) guard.flush((v.currentTime / v.duration) * 100);
+        };
+        const onSeeking  = () => guard.markSeeking();
+        const onSeeked   = () => guard.markSeeked();
+        const onWaiting  = () => setBuffering(true);
+        const onCanPlay  = () => setBuffering(false);
+        const onProgress = () => {
+            if (v.buffered.length && v.duration) {
+                setBuffered((v.buffered.end(v.buffered.length - 1) / v.duration) * 100);
+            }
+        };
+
+        v.addEventListener("waiting",        onWaiting);
+        v.addEventListener("canplay",        onCanPlay);
+        v.addEventListener("timeupdate",     onTimeUpdate);
+        v.addEventListener("loadedmetadata", onLoaded);
+        v.addEventListener("ended",          onEnded);
+        v.addEventListener("play",           onPlay);
+        v.addEventListener("pause",          onPause);
+        v.addEventListener("seeking",        onSeeking);
+        v.addEventListener("seeked",         onSeeked);
+        v.addEventListener("progress",       onProgress);
+
+        if (v.readyState >= 1 && v.duration) onLoaded();
+
+        return () => {
+            v.removeEventListener("waiting",        onWaiting);
+            v.removeEventListener("canplay",        onCanPlay);
+            v.removeEventListener("timeupdate",     onTimeUpdate);
+            v.removeEventListener("loadedmetadata", onLoaded);
+            v.removeEventListener("ended",          onEnded);
+            v.removeEventListener("play",           onPlay);
+            v.removeEventListener("pause",          onPause);
+            v.removeEventListener("seeking",        onSeeking);
+            v.removeEventListener("seeked",         onSeeked);
+            v.removeEventListener("progress",       onProgress);
+        };
+    }, [blobUrl]);
+
+    useEffect(() => {
+        const v = vidRef.current;
+        if (!v) return;
+        v.playbackRate = speed === "Normal" ? 1 : parseFloat(speed);
+    }, [speed]);
+
+    useEffect(() => {
+        // Safari (incl. desktop) still fires the prefixed webkitfullscreenchange
+        // event for element-level fullscreen, so both are listened for.
+        const onChange = () => {
+            const active = !!(document.fullscreenElement || document.webkitFullscreenElement);
+            setNativeFullscreen(active);
+            // Safari doesn't focus a <div tabIndex> on click, so keyboard
+            // shortcuts silently stop working after entering fullscreen unless
+            // we explicitly refocus the wrapper here.
+            if (active) wrapRef.current?.focus({ preventScroll: true });
+        };
+        document.addEventListener("fullscreenchange", onChange);
+        document.addEventListener("webkitfullscreenchange", onChange);
+        return () => {
+            document.removeEventListener("fullscreenchange", onChange);
+            document.removeEventListener("webkitfullscreenchange", onChange);
+        };
+    }, []);
+
+    // CSS pseudo-fullscreen fallback (iOS Safari) — lock page scroll and
+    // reclaim keyboard focus while it's active, restore on exit/unmount.
+    useEffect(() => {
+        if (!pseudoFullscreen) return;
+        const prevOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        wrapRef.current?.focus({ preventScroll: true });
+        return () => { document.body.style.overflow = prevOverflow; };
+    }, [pseudoFullscreen]);
+
+    const resetHideTimer = useCallback(() => {
+        setControlsVisible(true);
+        clearTimeout(hideTimer.current);
+        if (playing) {
+            hideTimer.current = setTimeout(() => {
+                setControlsVisible(false);
+                setSettingsOpen(false);
+            }, 3000);
+        }
+    }, [playing]);
+
+    useEffect(() => {
+        resetHideTimer();
+        return () => clearTimeout(hideTimer.current);
+    }, [playing, resetHideTimer]);
+
+    const showFeedback = useCallback((icon, label) => {
+        setKeyFeedback((prev) => ({ icon, label, key: (prev?.key ?? 0) + 1 }));
+        clearTimeout(keyFeedbackTimer.current);
+        keyFeedbackTimer.current = setTimeout(() => setKeyFeedback(null), 800);
+    }, []);
+
+    const togglePlay = useCallback(() => {
+        const v = vidRef.current;
+        if (!v) return;
+        if (v.paused) { v.play(); setPlaying(true); setOverlayVisible(false); setEnded(false); }
+        else          { v.pause(); setPlaying(false); setOverlayVisible(true); }
+    }, []);
+
+    // YouTube-style tap-to-reveal: while playing with the bar auto-hidden, the
+    // first tap only brings the controls back (doesn't pause); a second tap —
+    // once controls are already visible — toggles play, same as desktop where
+    // onMouseMove already keeps controls visible ahead of the click.
+    const handleWrapperClick = useCallback(() => {
+        // Safari doesn't focus a <div tabIndex> on click, which silently kills
+        // keyboard shortcuts afterwards — force it explicitly.
+        wrapRef.current?.focus({ preventScroll: true });
+        if (!controlsVisible) { resetHideTimer(); return; }
+        togglePlay();
+        resetHideTimer();
+    }, [controlsVisible, resetHideTimer, togglePlay]);
+
+    const restart = () => {
+        const v = vidRef.current;
+        if (!v) return;
+        v.currentTime = 0;
+        v.pause();
+        setPlaying(false);
+        setOverlayVisible(true);
+    };
+
+    const handleSeek = (e) => {
+        const v = vidRef.current;
+        if (!v || !v.duration) return;
+        v.currentTime = guard.clampSeekTarget((parseFloat(e.target.value) / 100) * v.duration);
+    };
+
+    const handleVolumeChange = (e) => {
+        const val = parseFloat(e.target.value);
+        setVolume(val);
+        if (vidRef.current) { vidRef.current.volume = val; vidRef.current.muted = val === 0; }
+        setMuted(val === 0);
+    };
+
+    const toggleMute = () => {
+        const v = vidRef.current;
+        if (!v) return;
+        v.muted = !v.muted;
+        setMuted(v.muted);
+    };
+
+    const toggleFullscreen = () => {
+        const el = wrapRef.current;
+        if (!el) return;
+        if (isFullscreen) {
+            if (document.fullscreenElement) document.exitFullscreen();
+            else if (document.webkitFullscreenElement) document.webkitExitFullscreen();
+            else setPseudoFullscreen(false);
+        } else if (el.requestFullscreen) {
+            el.requestFullscreen();
+        } else if (el.webkitRequestFullscreen) {
+            // Desktop Safari — supports element fullscreen via the prefixed API.
+            el.webkitRequestFullscreen();
+        } else {
+            // iOS Safari has no element-level Fullscreen API at all.
+            setPseudoFullscreen(true);
+        }
+    };
+
+    const handleKeyDown = useCallback((e) => {
+        if (e.target.tagName === "INPUT") return;
+        // Fold single-char keys to lowercase so Shift/Caps-Lock doesn't break
+        // letter shortcuts (e.g. Shift+F reporting as "F", not "f").
+        const key = e.key.length === 1 ? e.key.toLowerCase() : e.key;
+        switch (key) {
+            case " ": case "k":
+                e.preventDefault();
+                togglePlay();
+                showFeedback(playing ? <Pause className="size-7 text-white" /> : <Play className="size-7 text-white" />, playing ? "Pause" : "Play");
+                resetHideTimer();
+                break;
+            case "ArrowRight":
+                e.preventDefault();
+                if (vidRef.current) vidRef.current.currentTime = guard.clampSeekTarget(Math.min(vidRef.current.currentTime + 5, vidRef.current.duration));
+                showFeedback(<SkipForward className="size-7 text-white" />, "+5s");
+                resetHideTimer();
+                break;
+            case "ArrowLeft":
+                e.preventDefault();
+                if (vidRef.current) vidRef.current.currentTime = Math.max(vidRef.current.currentTime - 5, 0);
+                showFeedback(<SkipBack className="size-7 text-white" />, "-5s");
+                resetHideTimer();
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                if (vidRef.current) {
+                    const nv = Math.min(volume + 0.1, 1);
+                    vidRef.current.volume = nv; setVolume(nv); setMuted(false);
+                    showFeedback(<Volume2 className="size-7 text-white" />, `${Math.round(nv * 100)}%`);
+                }
+                break;
+            case "ArrowDown":
+                e.preventDefault();
+                if (vidRef.current) {
+                    const nv = Math.max(volume - 0.1, 0);
+                    vidRef.current.volume = nv; setVolume(nv); setMuted(nv === 0);
+                    showFeedback(<Volume1 className="size-7 text-white" />, `${Math.round(nv * 100)}%`);
+                }
+                break;
+            case "m":
+                e.preventDefault();
+                toggleMute();
+                showFeedback(muted ? <Volume2 className="size-7 text-white" /> : <VolumeX className="size-7 text-white" />, muted ? "Unmuted" : "Muted");
+                break;
+            case "f":
+                e.preventDefault();
+                toggleFullscreen();
+                showFeedback(isFullscreen ? <Minimize2 className="size-7 text-white" /> : <Maximize2 className="size-7 text-white" />, isFullscreen ? "Exit fullscreen" : "Fullscreen");
+                break;
+            case "Escape":
+                if (isFullscreen) {
+                    e.preventDefault();
+                    toggleFullscreen();
+                    showFeedback(<Minimize2 className="size-7 text-white" />, "Exit fullscreen");
+                }
+                break;
+            default: break;
+        }
+    }, [togglePlay, toggleMute, toggleFullscreen, resetHideTimer, volume, muted, isFullscreen, playing, showFeedback, guard]);
+
+    // ── States ────────────────────────────────────────────────────────────────
+
+    if (!assetId) {
+        return (
+            <div className="flex items-center justify-center aspect-video rounded-lg border border-dashed text-xs text-muted-foreground bg-muted/20 gap-1.5">
+                <VideoIcon className="h-4 w-4" /> No video
+            </div>
+        );
+    }
+
+    if (fetchLoading) {
+        return <MediaFallback className="aspect-video rounded-lg" />;
+    }
+
+    if (fetchError || !blobUrl) {
+        return (
+            <div className="flex flex-col items-center justify-center aspect-video rounded-lg bg-black/80 gap-2">
+                <VideoIcon className="h-8 w-8 text-white/30" />
+                <p className="text-sm text-white/50">Video unavailable.</p>
+            </div>
+        );
+    }
+
+    return (
+        <TooltipProvider delayDuration={400}>
+            <div
+                ref={wrapRef}
+                tabIndex={0}
+                className={`relative w-full overflow-hidden bg-black select-none outline-none ${pseudoFullscreen ? "fixed inset-0 z-[100]" : "rounded-lg"}`}
+                style={{ aspectRatio: isFullscreen ? undefined : "16/9" }}
+                onMouseMove={resetHideTimer}
+                onMouseLeave={() => { if (playing) setControlsVisible(false); }}
+                onClick={handleWrapperClick}
+                onKeyDown={handleKeyDown}
+                onContextMenu={(e) => e.preventDefault()}
+            >
+                <video
+                    ref={vidRef}
+                    src={blobUrl}
+                    poster={poster}
+                    preload="auto"
+                    playsInline
+                    controlsList="nodownload nofullscreen noremoteplayback"
+                    disablePictureInPicture
+                    disableRemotePlayback
+                    onContextMenu={(e) => e.preventDefault()}
+                    className={`w-full h-full ${isFullscreen ? "object-contain" : "object-cover"}`}
+                />
+
+                {/* Centre overlay */}
+                <div
+                    className={`absolute inset-0 flex items-center justify-center transition-opacity duration-200 pointer-events-none ${overlayVisible ? "opacity-100" : "opacity-0"}`}
+                    style={{ background: "rgba(0,0,0,0.3)" }}
+                >
+                    <div className="w-14 h-14 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center border border-white/25">
+                        {playing ? <Pause className="size-6 text-white" /> : <Play className="size-6 text-white ml-0.5" />}
+                    </div>
+                </div>
+
+                {/* Buffering spinner */}
+                {buffering && (
+                    <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+                        <div className="w-12 h-12 rounded-full border-4 border-white/20 border-t-white animate-spin" />
+                    </div>
+                )}
+
+                {/* Keyboard feedback */}
+                {keyFeedback && (
+                    <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+                        <div
+                            key={keyFeedback.key}
+                            className="flex flex-col items-center gap-1 px-5 py-3 rounded-2xl border border-white/10"
+                            style={{ background: "rgba(0,0,0,0.65)", backdropFilter: "blur(12px)", animation: "fadeInOut 0.8s ease forwards" }}
+                        >
+                            <span className="leading-none">{keyFeedback.icon}</span>
+                            <span className="text-white text-sm font-medium tracking-wide">{keyFeedback.label}</span>
+                        </div>
+                        <style>{`@keyframes fadeInOut{0%{opacity:0;transform:scale(.85)}20%{opacity:1;transform:scale(1)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.95)}}`}</style>
+                    </div>
+                )}
+
+                {/* End overlay */}
+                {ended && (
+                    <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 pointer-events-none" style={{ background: "rgba(0,0,0,0.55)" }}>
+                        <button
+                            type="button" aria-label="Replay"
+                            className="pointer-events-auto w-16 h-16 rounded-full bg-white/20 hover:bg-white/30 backdrop-blur-sm border border-white/25 flex items-center justify-center transition-colors"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                const v = vidRef.current;
+                                if (!v) return;
+                                v.currentTime = 0; v.play();
+                                setPlaying(true); setEnded(false); setOverlayVisible(false);
+                            }}
+                        >
+                            <RotateCcw className="size-7 text-white" />
+                        </button>
+                        <span className="text-white/70 text-sm">Replay</span>
+                    </div>
+                )}
+
+                {/* Settings panel */}
+                {settingsOpen && (
+                    <SettingsPanel speed={speed} onSpeed={setSpeed} onClose={() => setSettingsOpen(false)} />
+                )}
+
+                {/* Controls bar */}
+                <div
+                    className={`absolute bottom-0 left-0 right-0 transition-opacity duration-300 ${controlsVisible ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+                    style={{ background: "linear-gradient(to top, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.4) 80%, transparent 100%)" }}
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <div className="px-3 pb-4">
+                        <div
+                            className="relative lg:h-2 xs:h-1 group cursor-pointer"
+                            onMouseMove={(e) => {
+                                const rect = e.currentTarget.getBoundingClientRect();
+                                const pct  = Math.min(Math.max((e.clientX - rect.left) / rect.width, 0), 1);
+                                const time = pct * (vidRef.current?.duration ?? 0);
+                                setHoverProgress({ x: e.clientX - rect.left, pct: pct * 100, time });
+                                if (previewVidRef.current && isFinite(time) && time >= 0) {
+                                    previewVidRef.current.currentTime = time;
+                                }
+                            }}
+                            onMouseLeave={() => setHoverProgress(null)}
+                        >
+                            <div className="absolute inset-0 bg-white/25 rounded-full" />
+                            <div className="absolute inset-y-0 left-0 bg-white/40 rounded-full transition-[width] duration-300" style={{ width: `${buffered}%` }} />
+                            <div className="absolute inset-y-0 left-0 bg-white rounded-full" style={{ width: `${progress}%` }} />
+                            <div className="absolute top-1/2 -translate-y-1/2 w-3 h-3 rounded-full bg-white shadow-md -ml-1.5 opacity-0 group-hover:opacity-100 transition-opacity" style={{ left: `${progress}%` }} />
+                            <input type="range" min="0" max="100" step="0.1" value={progress} onChange={handleSeek} aria-label="Seek" className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
+
+                            {/* Scrubber preview — also uses blob URL */}
+                            {hoverProgress && (
+                                <div
+                                    className="hidden lg:flex absolute bottom-5 flex-col items-center pointer-events-none z-30"
+                                    style={{ left: `${hoverProgress.x}px`, transform: "translateX(-50%)" }}
+                                >
+                                    <div className="rounded-md overflow-hidden border border-white/20 shadow-xl" style={{ width: 160, height: 90 }}>
+                                        <video ref={previewVidRef} src={blobUrl} preload="auto" muted playsInline disablePictureInPicture disableRemotePlayback onContextMenu={(e) => e.preventDefault()} className="w-full h-full object-cover" />
+                                    </div>
+                                    <span className="text-white text-xs mt-1 font-medium tabular-nums drop-shadow">{fmtTime(hoverProgress.time)}</span>
+                                    <div className="w-2 h-2 bg-black/60 rotate-45 -mt-1 border-r border-b border-white/20" />
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
+                    <div className="flex items-center gap-3 px-2.5 pb-3">
+                        <CtrlBtn label={playing ? "Pause" : "Play"} onClick={togglePlay}>
+                            {playing ? <Pause className="size-4" /> : <Play className="size-4" />}
+                        </CtrlBtn>
+                        <CtrlBtn label="Restart" onClick={restart}>
+                            <SkipBack className="size-4" />
+                        </CtrlBtn>
+
+                        <div className="relative" onClick={(e) => e.stopPropagation()}>
+                            {volumePanelOpen && (
+                                <div
+                                    className="lg:hidden absolute bottom-9 left-1/2 -translate-x-1/2 z-30 rounded-xl border border-white/10 px-4 py-3 flex flex-col items-center gap-2"
+                                    style={{ background: "rgba(18,18,18,0.96)", backdropFilter: "blur(16px)" }}
+                                >
+                                    <span className="text-[10px] text-white/40 uppercase tracking-widest">Volume</span>
+                                    <input type="range" min="0" max="1" step="0.05" value={muted ? 0 : volume} onChange={handleVolumeChange} aria-label="Volume" className="accent-white cursor-pointer" style={{ writingMode: "vertical-lr", direction: "rtl", height: "80px", width: "auto" }} />
+                                    <span className="text-xs text-white/50 tabular-nums">{muted ? "0" : Math.round(volume * 100)}%</span>
+                                </div>
+                            )}
+                            <CtrlBtn
+                                label={muted ? "Unmute" : "Mute"}
+                                onClick={() => {
+                                    if (window.innerWidth < 1024) setVolumePanelOpen((o) => !o);
+                                    else toggleMute();
+                                }}
+                            >
+                                {muted ? <VolumeX className="size-4 sm:size-5" /> : <Volume2 className="size-4 sm:size-5" />}
+                            </CtrlBtn>
+                        </div>
+
+                        <input type="range" min="0" max="1" step="0.05" value={muted ? 0 : volume} onChange={handleVolumeChange} aria-label="Volume" className="hidden lg:block w-16 accent-white cursor-pointer" onClick={(e) => e.stopPropagation()} />
+
+                        <span className="text-white/60 text-sm tabular-nums ml-1.5">
+                            {fmtTime(currentTime)} / {fmtTime(totalDuration)}
+                        </span>
+
+                        <div className="ml-auto flex items-center gap-3">
+                            {speed !== "Normal" && (
+                                <span className="text-sm text-white/60 bg-white/10 px-1.5 py-0.5 rounded-sm font-mono">{speed}x</span>
+                            )}
+                            <CtrlBtn label="Settings" onClick={(e) => { e.stopPropagation(); setSettingsOpen((o) => !o); }} className={settingsOpen ? "text-white" : ""}>
+                                <Settings className={`size-5 transition-transform duration-300 ${settingsOpen ? "rotate-45" : ""}`} />
+                            </CtrlBtn>
+                            <CtrlBtn label={isFullscreen ? "Exit fullscreen" : "Fullscreen"} onClick={toggleFullscreen}>
+                                {isFullscreen ? <Minimize2 className="size-5" /> : <Maximize2 className="size-5" />}
+                            </CtrlBtn>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </TooltipProvider>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Breadcrumb/AppBreadcrumb.jsx b/apps/web/src/components/generic/Breadcrumb/AppBreadcrumb.jsx
new file mode 100644
index 0000000..30c3b2b
--- /dev/null
+++ b/apps/web/src/components/generic/Breadcrumb/AppBreadcrumb.jsx
@@ -0,0 +1,117 @@
+import { useNavigate } from "react-router-dom";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { cn } from "@/lib/utils";
+
+/**
+ * AppBreadcrumb
+ *
+ * Generic breadcrumb driven entirely by the `items` prop.
+ * The last item is always rendered as the current page (non-clickable).
+ * All preceding items are rendered as clickable links.
+ *
+ * ─── Item definition shape ────────────────────────────────────────────────────
+ *
+ * @field {string}    label       Display text
+ * @field {ReactNode} [icon]      Optional icon rendered before the label
+ * @field {string}    [to]        navigate() path — if omitted, item is non-navigable
+ * @field {Function}  [onClick]   Custom click handler (e, navigate) => void
+ *                                Overrides `to` when provided.
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * @param {Array}  items          Ordered list of breadcrumb item definitions
+ * @param {Object} [color]        Independent color overrides per element
+ * @param {Object} [color.link]   Override for non-last (clickable) items
+ * @param {string} [color.link.color]  className applied to BreadcrumbLink
+ * @param {Object} [color.page]   Override for the last (current page) item
+ * @param {string} [color.page.color]  className applied to BreadcrumbPage
+ *
+ * ─── Usage ───────────────────────────────────────────────────────────────────
+ *
+ * import { House, Users } from "lucide-react";
+ * import AppBreadcrumb from "@/components/generic/AppBreadcrumb";
+ *
+ * // Basic — just paths
+ * <AppBreadcrumb
+ *   items={[
+ *     { label: "Home", icon: <House className="size-4" />, to: `/admin/${adminId}/users` },
+ *     { label: "Users" },
+ *   ]}
+ * />
+ *
+ * // With custom click handler
+ * <AppBreadcrumb
+ *   items={[
+ *     { label: "Home", icon: <House className="size-4" />, onClick: (e, navigate) => navigate("/admin") },
+ *     { label: "Settings", to: `/admin/${adminId}/settings` },
+ *     { label: "Profile" },
+ *   ]}
+ * />
+ *
+ * // With per-element color overrides
+ * <AppBreadcrumb
+ *   color={{ link: { color: "text-muted-foreground" }, page: { color: "text-[#000000]" } }}
+ *   items={items}
+ * />
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ */
+const AppBreadcrumb = ({ items = [], color = {} }) => {
+  const navigate = useNavigate();
+  const linkColor = color.link?.color ?? "";
+  const pageColor = color.page?.color ?? "";
+
+  if (!items.length) return null;
+
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+
+          return (
+            <span key={index} className="flex items-center gap-1.5">
+              <BreadcrumbItem>
+                {isLast ? (
+                  <BreadcrumbPage className={cn("flex items-center gap-2 max-w-[300px] truncate", pageColor)}>
+                    {item.icon}
+                    <span className="hidden lg:inline truncate">{item.label}</span>
+                    <span className="lg:hidden">...</span>
+                  </BreadcrumbPage>
+                ) : (
+                  <BreadcrumbLink asChild>
+                    <div
+                      className={cn("flex items-center gap-2 select-none cursor-pointer max-w-[300px]", linkColor)}
+                      onClick={(e) => {
+                        if (item.onClick) {
+                          item.onClick(e, navigate);
+                        } else if (item.to) {
+                          e.preventDefault();
+                          navigate(item.to);
+                        }
+                      }}
+                    >
+                      {item.icon}
+                      <span className="truncate">{item.label}</span>
+                    </div>
+                  </BreadcrumbLink>
+                )}
+              </BreadcrumbItem>
+
+              {!isLast && <BreadcrumbSeparator />}
+            </span>
+          );
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};
+
+export default AppBreadcrumb;
\ No newline at end of file
diff --git a/apps/web/src/components/generic/BroadcastTargetPicker.jsx b/apps/web/src/components/generic/BroadcastTargetPicker.jsx
new file mode 100644
index 0000000..f7e8d57
--- /dev/null
+++ b/apps/web/src/components/generic/BroadcastTargetPicker.jsx
@@ -0,0 +1,132 @@
+// components/generic/BroadcastTargetPicker.jsx
+// Single-select searchable picker for notification broadcast targeting.
+// Fetches the right list (task lists / courses / tier plans) based on targetType.
+
+import { useEffect, useMemo, useState } from "react";
+import { Check, ChevronsUpDown, Search } from "lucide-react";
+import api from "@/utils/api.util";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { cn } from "@/lib/utils";
+
+// ─── Per-target-type data source config ───────────────────────────────────────
+const TARGET_CONFIGS = {
+    task_list: {
+        fetch: () => api.get("/admin/task-lists", { params: { limit: 100 } }).then((res) => res.data?.data?.data ?? []),
+        idKey: "task_list_id",
+        labelKey: "name",
+        placeholder: "Select a task list…",
+    },
+    course: {
+        fetch: () => api.get("/admin/courses/flat").then((res) => res.data?.data ?? []),
+        idKey: "uuid",
+        labelKey: "title",
+        placeholder: "Select a course…",
+    },
+    tier_plan: {
+        fetch: () => api.get("/admin/tiers", { params: { limit: 100 } }).then((res) => res.data?.data?.data ?? []),
+        idKey: "plan_id",
+        labelKey: "label",
+        placeholder: "Select a subscription plan…",
+    },
+};
+
+export function BroadcastTargetPicker({ targetType, value, onChange, onLabelResolved }) {
+    const config = TARGET_CONFIGS[targetType];
+
+    const [items, setItems] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+
+    useEffect(() => {
+        if (!config) return;
+        let cancelled = false;
+        setLoading(true);
+        config.fetch()
+            .then((data) => { if (!cancelled) setItems(Array.isArray(data) ? data : []); })
+            .finally(() => { if (!cancelled) setLoading(false); });
+        return () => { cancelled = true; };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [targetType]);
+
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q || !config) return items;
+        return items.filter((item) => String(item[config.labelKey] ?? "").toLowerCase().includes(q));
+    }, [items, query, config]);
+
+    const selected = config ? items.find((item) => String(item[config.idKey]) === String(value)) : undefined;
+
+    // Lets the parent (Review step summaries, etc.) show the resolved name
+    // instead of just the raw id — fires whenever the matched item changes,
+    // including on initial load once the fetched list resolves `value`.
+    useEffect(() => {
+        onLabelResolved?.(selected ? selected[config.labelKey] : null);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selected]);
+
+    if (!config) return null;
+
+    return (
+        <Popover open={open} onOpenChange={(v) => { setOpen(v); if (!v) setQuery(""); }}>
+            <PopoverTrigger asChild>
+                <Button
+                    type="button"
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={open}
+                    className="w-full justify-between font-normal h-9"
+                >
+                    <span className="truncate">
+                        {selected ? selected[config.labelKey] : config.placeholder}
+                    </span>
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                <div className="flex items-center gap-2 border-b px-3">
+                    <Search className="size-4 shrink-0 text-muted-foreground" />
+                    <input
+                        autoFocus
+                        value={query}
+                        onChange={(e) => setQuery(e.target.value)}
+                        placeholder="Search…"
+                        className="flex-1 bg-transparent py-2.5 text-sm outline-none placeholder:text-muted-foreground"
+                    />
+                </div>
+                <div className="max-h-56 overflow-y-auto">
+                    {loading ? (
+                        <div className="flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground">
+                            <Spinner className="size-4" />
+                            Loading…
+                        </div>
+                    ) : filtered.length === 0 ? (
+                        <p className="py-6 text-center text-sm text-muted-foreground">No results found.</p>
+                    ) : (
+                        filtered.map((item) => {
+                            const id = item[config.idKey];
+                            const isSelected = String(value) === String(id);
+                            return (
+                                <div
+                                    key={id}
+                                    role="option"
+                                    aria-selected={isSelected}
+                                    onClick={() => { onChange(id); setOpen(false); setQuery(""); }}
+                                    className={cn(
+                                        "flex items-center gap-2 px-3 py-2 text-sm cursor-pointer select-none transition-colors hover:bg-accent hover:text-accent-foreground",
+                                        isSelected && "bg-accent/50"
+                                    )}
+                                >
+                                    <Check className={cn("size-3.5 shrink-0", isSelected ? "opacity-100" : "opacity-0")} />
+                                    <span className="truncate">{item[config.labelKey]}</span>
+                                </div>
+                            );
+                        })
+                    )}
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+}
diff --git a/apps/web/src/components/generic/ClientNotificationBell.jsx b/apps/web/src/components/generic/ClientNotificationBell.jsx
new file mode 100644
index 0000000..72ab88c
--- /dev/null
+++ b/apps/web/src/components/generic/ClientNotificationBell.jsx
@@ -0,0 +1,25 @@
+import { useNavigate } from "react-router-dom";
+import { Bell } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useClientNotifications } from "@/contexts/ClientNotificationContext";
+
+export default function ClientNotificationBell() {
+  const { unseenCount } = useClientNotifications();
+  const navigate = useNavigate();
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      className="relative"
+      onClick={() => navigate("/notifications")}
+    >
+      <Bell className="h-4 w-4" />
+      {unseenCount > 0 && (
+        <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white leading-none">
+          {unseenCount > 99 ? "99+" : unseenCount}
+        </span>
+      )}
+    </Button>
+  );
+}
diff --git a/apps/web/src/components/generic/ComboBoxCommand.jsx b/apps/web/src/components/generic/ComboBoxCommand.jsx
new file mode 100644
index 0000000..2705385
--- /dev/null
+++ b/apps/web/src/components/generic/ComboBoxCommand.jsx
@@ -0,0 +1,463 @@
+// ComboBoxCommand.jsx
+// ─────────────────────────────────────────────────────────────────────────────
+// Generic multi-select combobox with server-search, select-all, embossed
+// checkboxes, and +N overflow badge popover.
+//
+// Props:
+//   value       {any[]}      — array of selected IDs (controlled)
+//   onChange    {fn}         — called with new array of IDs
+//   items       {object[]}   — flat list of option objects
+//   loading     {boolean}    — shows spinner while fetching
+//   onSearch    {fn}         — called with search term when Search is clicked
+//
+//   // Field mapping — tell the component which keys to read from each item:
+//   fieldId     {string}     — unique identifier key        default: "id"
+//   fieldLabel  {string}     — primary display label key    default: "name"
+//   fieldMeta   {string}     — secondary mono badge key     default: null (hidden)
+//
+//   // Copy overrides (all optional):
+//   placeholder {string}     — trigger placeholder          default: "Select items…"
+//   searchPlaceholder {string}                              default: "Search…"
+//   selectAllLabel    {string}                              default: "Select all"
+//   deselectAllLabel  {string}                              default: "Deselect all"
+//   emptyLabel        {string}                              default: "No items available."
+//   unit        {string}     — singular noun for counts     default: "item"
+//
+//   maxVisible  {number}     — badges before +N collapse    default: 3
+//
+// ── Usage examples ────────────────────────────────────────────────────────────
+//
+//  // Groups (your existing use-case)
+//  <ComboBoxCommand
+//    value={field.value}
+//    onChange={field.onChange}
+//    items={groups}
+//    loading={groupsLoading}
+//    onSearch={onSearchGroups}
+//    fieldId="group_id"
+//    fieldLabel="name"
+//    fieldMeta="group_code"
+//    placeholder="Select groups…"
+//    unit="group"
+//  />
+//
+//  // Users
+//  <ComboBoxCommand
+//    value={field.value}
+//    onChange={field.onChange}
+//    items={users}
+//    fieldId="user_id"
+//    fieldLabel="full_name"
+//    fieldMeta="email"
+//    placeholder="Assign users…"
+//    unit="user"
+//  />
+//
+//  // Tags (no meta badge)
+//  <ComboBoxCommand
+//    value={field.value}
+//    onChange={field.onChange}
+//    items={tags}
+//    fieldId="tag_id"
+//    fieldLabel="label"
+//    placeholder="Select tags…"
+//    unit="tag"
+//  />
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { useState, useRef } from "react";
+import { Check, ChevronsUpDown, X, Search, Loader2 } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+// ─── Overflow popover ─────────────────────────────────────────────────────────
+function OverflowPopover({ overflow, onRemove, fieldId, fieldLabel, fieldMeta }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className={cn(
+            "inline-flex items-center h-6 px-2 rounded-full text-xs font-medium transition-colors",
+            "bg-primary/10 text-primary border border-primary/20",
+            "hover:bg-primary/20 hover:border-primary/40",
+            open && "bg-primary/20 border-primary/40"
+          )}
+        >
+          +{overflow.length} more
+        </button>
+      </PopoverTrigger>
+
+      <PopoverContent className="p-0 w-64" align="start" sideOffset={4}>
+        <div className="px-3 py-2 border-b border-border">
+          <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+            {overflow.length} more selected
+          </p>
+        </div>
+        <div className="p-2 space-y-0.5 max-h-52 overflow-y-auto">
+          {overflow.map((item) => (
+            <div
+              key={item[fieldId]}
+              className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-muted/50 group transition-colors"
+            >
+              <span className="flex-1 text-sm truncate">{item[fieldLabel]}</span>
+              {fieldMeta && item[fieldMeta] && (
+                <span className="font-mono text-[10px] text-muted-foreground bg-muted px-1 py-0.5 rounded shrink-0">
+                  {item[fieldMeta]}
+                </span>
+              )}
+              <button
+                type="button"
+                onClick={() => onRemove(item[fieldId])}
+                className={cn(
+                  "shrink-0 rounded-sm p-0.5 opacity-0 group-hover:opacity-60",
+                  "hover:!opacity-100 hover:bg-destructive/20 transition-all"
+                )}
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </div>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
+export function ComboBoxCommand({
+  // Data
+  value = [],
+  onChange,
+  items = [],
+  loading = false,
+  onSearch,
+
+  // Field mapping
+  fieldId = "id",
+  fieldLabel = "name",
+  fieldMeta = null,       // set to a key string to show the mono badge
+
+  // Copy
+  placeholder = "Select items…",
+  searchPlaceholder = "Search…",
+  selectAllLabel = "Select all",
+  deselectAllLabel = "Deselect all",
+  emptyLabel = "No items available.",
+  unit = "item",
+
+  // Layout
+  maxVisible = 3,
+}) {
+  const [open, setOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const inputRef = useRef(null);
+
+  const safeItems = Array.isArray(items) ? items : [];
+
+  // ── Client-side filter ─────────────────────────────────────────────────────
+  const filtered = safeItems.filter((item) => {
+    if (!inputValue.trim()) return true;
+    const q = inputValue.toLowerCase();
+    const matchLabel = String(item[fieldLabel] ?? "").toLowerCase().includes(q);
+    const matchMeta = fieldMeta
+      ? String(item[fieldMeta] ?? "").toLowerCase().includes(q)
+      : false;
+    return matchLabel || matchMeta;
+  });
+
+  // ── Selection state ────────────────────────────────────────────────────────
+  const selected = safeItems.filter((item) => value.includes(item[fieldId]));
+  const allSelected = filtered.length > 0 && filtered.every((item) => value.includes(item[fieldId]));
+  const someSelected = !allSelected && filtered.some((item) => value.includes(item[fieldId]));
+
+  const visibleBadges = selected.slice(0, maxVisible);
+  const overflowBadges = selected.slice(maxVisible);
+
+  // ── Handlers ───────────────────────────────────────────────────────────────
+  const toggle = (id) => {
+    const key = String(id);
+    onChange(
+      value.map(String).includes(key)
+        ? value.filter((v) => String(v) !== key)
+        : [...value, key]
+    );
+  };
+  
+  const toggleAll = () => {
+    if (allSelected) {
+      const filteredIds = new Set(filtered.map((item) => item[fieldId]));
+      onChange(value.filter((id) => !filteredIds.has(id)));
+    } else {
+      const merged = Array.from(new Set([...value, ...filtered.map((item) => item[fieldId])]));
+      onChange(merged);
+    }
+  };
+
+  const handleSearch = () => {
+    if (onSearch && inputValue.trim()) onSearch(inputValue.trim());
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && inputValue.trim()) {
+      e.preventDefault();
+      handleSearch();
+    }
+  };
+
+  // ── Pluralise helper ───────────────────────────────────────────────────────
+  const plural = (n) => `${n} ${unit}${n !== 1 ? "s" : ""}`;
+
+  return (
+    <div className="space-y-2">
+      <Popover open={open} onOpenChange={setOpen}>
+
+        {/* ── Trigger ── */}
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="w-full justify-between font-normal h-9"
+          >
+            <span className="truncate">
+              {selected.length > 0
+                ? `${plural(selected.length)} selected`
+                : placeholder}
+            </span>
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+
+        {/* ── Dropdown ── */}
+        <PopoverContent className="p-0 w-[480px]" align="start" sideOffset={4}>
+          <Command shouldFilter={false}>
+
+            {/* Search bar */}
+            <div className="flex items-center gap-1.5 border-b border-border px-2 py-1.5">
+              <Search className="h-4 w-4 shrink-0 text-muted-foreground" />
+              <input
+                ref={inputRef}
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder={searchPlaceholder}
+                className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground py-1"
+              />
+              <button
+                type="button"
+                onClick={handleSearch}
+                disabled={!inputValue.trim() || loading}
+                title="Search on server"
+                className={cn(
+                  "flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
+                  "border border-border bg-muted hover:bg-muted/70",
+                  "disabled:opacity-40 disabled:cursor-not-allowed",
+                  inputValue.trim() && !loading &&
+                  "border-primary/40 bg-primary/10 text-primary hover:bg-primary/15"
+                )}
+              >
+                {loading
+                  ? <Loader2 className="h-3 w-3 animate-spin" />
+                  : <Search className="h-3 w-3" />
+                }
+                Search
+              </button>
+            </div>
+
+            <CommandList className="max-h-[300px]">
+
+              {/* Loading */}
+              {loading && (
+                <div className="flex items-center justify-center gap-2 py-8 text-sm text-muted-foreground">
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  Loading…
+                </div>
+              )}
+
+              {/* Empty */}
+              {!loading && filtered.length === 0 && (
+                <CommandEmpty className="py-6 text-sm text-muted-foreground text-center">
+                  {inputValue ? `No results for "${inputValue}".` : emptyLabel}
+                </CommandEmpty>
+              )}
+
+              {!loading && filtered.length > 0 && (
+                <>
+                  {/* Select All row */}
+                  <div
+                    role="button"
+                    onClick={toggleAll}
+                    className={cn(
+                      "flex items-center gap-3 px-3 py-2.5 cursor-pointer select-none",
+                      "border-b border-border transition-colors hover:bg-muted/50",
+                      (allSelected || someSelected) && "bg-primary/5"
+                    )}
+                  >
+                    {/* Embossed checkbox */}
+                    <span className={cn(
+                      "h-4 w-4 shrink-0 rounded border-2 flex items-center justify-center transition-all",
+                      "shadow-[inset_0_2px_4px_rgba(0,0,0,0.12),inset_0_1px_2px_rgba(0,0,0,0.08)]",
+                      allSelected
+                        ? "bg-primary border-primary shadow-none"
+                        : someSelected
+                          ? "bg-primary/15 border-primary"
+                          : "bg-background border-border"
+                    )}>
+                      {allSelected && <Check className="h-2.5 w-2.5 text-primary-foreground stroke-[3.5]" />}
+                      {someSelected && <span className="h-1.5 w-1.5 rounded-[2px] bg-primary block" />}
+                    </span>
+                    <span className="text-sm font-semibold text-foreground">
+                      {allSelected ? deselectAllLabel : selectAllLabel}
+                    </span>
+                    <span className="ml-auto text-xs text-muted-foreground tabular-nums">
+                      {plural(filtered.length)}
+                    </span>
+                  </div>
+
+                  {/* Items */}
+                  <CommandGroup>
+                    {filtered.map((item) => {
+                      const id = item[fieldId];
+                      const label = item[fieldLabel];
+                      const meta = fieldMeta ? item[fieldMeta] : null;
+                      const isSelected = value.includes(id);
+
+                      return (
+                        <CommandItem
+                          key={id}
+                          value={String(id)}
+                          onSelect={() => toggle(id)}
+                          className={cn(
+                            "flex items-center gap-3 px-3 py-2.5 cursor-pointer transition-colors",
+                            "aria-selected:bg-transparent data-selected:bg-transparent",
+                            isSelected
+                              ? "bg-primary/[0.06] hover:bg-primary/[0.10]"
+                              : "hover:bg-muted/50"
+                          )}
+                        >
+                          {/* Embossed checkbox */}
+                          <span className={cn(
+                            "h-4 w-4 shrink-0 rounded border-2 flex items-center justify-center transition-all",
+                            isSelected
+                              ? "bg-primary border-primary shadow-none ring-2 ring-primary/25 ring-offset-1"
+                              : [
+                                "bg-background border-border",
+                                "shadow-[inset_0_2px_4px_rgba(0,0,0,0.10),inset_0_1px_2px_rgba(0,0,0,0.06)]",
+                                "hover:border-primary/60",
+                              ]
+                          )}>
+                            {isSelected && (
+                              <Check className="h-2.5 w-2.5 text-primary-foreground stroke-[3.5]" />
+                            )}
+                          </span>
+
+                          {/* Label */}
+                          <span className={cn(
+                            "flex-1 truncate text-sm",
+                            isSelected ? "font-medium text-foreground" : "text-foreground/90"
+                          )}>
+                            {label}
+                          </span>
+
+                          {/* Meta pill */}
+                          {meta && (
+                            <span className={cn(
+                              "font-mono text-[11px] px-1.5 py-0.5 rounded shrink-0",
+                              isSelected
+                                ? "bg-primary/15 text-primary"
+                                : "bg-muted text-muted-foreground"
+                            )}>
+                              {meta}
+                            </span>
+                          )}
+                        </CommandItem>
+                      );
+                    })}
+                  </CommandGroup>
+                </>
+              )}
+            </CommandList>
+
+            {/* Footer */}
+            {!loading && safeItems.length > 0 && (
+              <>
+                <CommandSeparator />
+                <div className="flex items-center justify-between px-3 py-2 text-[11px] text-muted-foreground">
+                  <span>
+                    {value.length > 0 ? `${plural(value.length)} selected` : "None selected"}
+                  </span>
+                  <span className="tabular-nums">
+                    {filtered.length} / {safeItems.length} shown
+                  </span>
+                </div>
+              </>
+            )}
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      {/* ── Selected badges with +N overflow ── */}
+      {selected.length > 0 && (
+        <div className="flex flex-wrap gap-1.5 items-center">
+
+          {/* First maxVisible badges */}
+          {visibleBadges.map((item) => (
+            <Badge
+              key={item[fieldId]}
+              variant="secondary"
+              className="gap-1 pr-1 text-xs h-6"
+            >
+              {item[fieldLabel]}
+              {fieldMeta && item[fieldMeta] && (
+                <span className="font-mono opacity-50 text-[10px]">{item[fieldMeta]}</span>
+              )}
+              <button
+                type="button"
+                onClick={() => toggle(item[fieldId])}
+                className="rounded-sm opacity-60 hover:opacity-100 hover:bg-destructive/20 p-0.5 ml-0.5"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </Badge>
+          ))}
+
+          {/* +N overflow → popover */}
+          {overflowBadges.length > 0 && (
+            <OverflowPopover
+              overflow={overflowBadges}
+              onRemove={(id) => toggle(id)}
+              fieldId={fieldId}
+              fieldLabel={fieldLabel}
+              fieldMeta={fieldMeta}
+            />
+          )}
+
+          {/* Clear all */}
+          {selected.length > 1 && (
+            <button
+              type="button"
+              onClick={() => onChange([])}
+              className="text-[11px] text-muted-foreground hover:text-destructive transition-colors underline underline-offset-2 ml-0.5"
+            >
+              Clear all
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Dashboard/BarBreakdown.jsx b/apps/web/src/components/generic/Dashboard/BarBreakdown.jsx
new file mode 100644
index 0000000..299a9f7
--- /dev/null
+++ b/apps/web/src/components/generic/Dashboard/BarBreakdown.jsx
@@ -0,0 +1,72 @@
+// components/generic/Dashboard/BarBreakdown.jsx
+
+import { BarChart, Bar, XAxis, YAxis, Tooltip, Cell, ResponsiveContainer } from "recharts";
+
+const DEFAULT_COLORS = [
+  "#6366f1", "#22c55e", "#f59e0b", "#ef4444",
+  "#06b6d4", "#a855f7", "#ec4899", "#84cc16",
+];
+
+/**
+ * A horizontal bar chart card for ranked data.
+ *
+ * @param {Object}    props
+ * @param {string}    props.label          Card title
+ * @param {Array}     props.data           [{ label, value }]
+ * @param {Function}  [props.onBarClick]   (entry) => void — called with the clicked bar
+ * @param {string[]}  [props.colors]
+ * @param {number}    [props.height]       Default: 240
+ * @param {number}    [props.yAxisWidth]   Default: 130
+ * @param {string}    [props.className]
+ *
+ * @example
+ * <BarBreakdown
+ *   label="Top Groups by Members"
+ *   data={breakdown.data}
+ *   onBarClick={(entry) => navigate(`/admin/users/groups`)}
+ * />
+ */
+export function BarBreakdown({
+  label,
+  data = [],
+  onBarClick,
+  colors = DEFAULT_COLORS,
+  height = 240,
+  yAxisWidth = 130,
+  className = "",
+}) {
+  if (!data.length) return null;
+
+  const isClickable = typeof onBarClick === "function";
+
+  return (
+    <div className={`bg-card border rounded-xl p-4 flex flex-col gap-2 ${className}`}>
+      <p className="text-sm font-medium">{label}</p>
+      <ResponsiveContainer width="100%" height={height}>
+        <BarChart
+          data={data}
+          layout="vertical"
+          margin={{ left: 0, right: 24, top: 4, bottom: 4 }}
+          onClick={isClickable ? ({ activePayload }) => {
+            if (activePayload?.[0]) onBarClick(activePayload[0].payload);
+          } : undefined}
+          style={isClickable ? { cursor: "pointer" } : undefined}
+        >
+          <XAxis type="number" tick={{ fontSize: 11 }} />
+          <YAxis
+            type="category"
+            dataKey="label"
+            tick={{ fontSize: 11 }}
+            width={yAxisWidth}
+          />
+          <Tooltip />
+          <Bar dataKey="value" radius={[0, 4, 4, 0]}>
+            {data.map((_, i) => (
+              <Cell key={i} fill={colors[i % colors.length]} />
+            ))}
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Dashboard/DashboardSection.jsx b/apps/web/src/components/generic/Dashboard/DashboardSection.jsx
new file mode 100644
index 0000000..2374647
--- /dev/null
+++ b/apps/web/src/components/generic/Dashboard/DashboardSection.jsx
@@ -0,0 +1,74 @@
+// components/generic/Dashboard/DashboardSection.jsx
+
+import { StatGrid }     from "./StatGrid";
+import { PieBreakdown } from "./PieBreakdown";
+import { BarBreakdown } from "./BarBreakdown";
+
+/**
+ * Renders a titled section with a stat grid and breakdown charts.
+ *
+ * @param {Object}   props
+ * @param {string}   props.title
+ * @param {Array}    props.stats          [{ key, label, value, icon? }]
+ * @param {Array}    [props.breakdowns]   [{ key, label, chartType, data[] }]
+ * @param {Object}   [props.iconMap]      { [statKey]: <ReactNode> }
+ * @param {Object}   [props.linkMap]      { [statKey]: () => void } — stat card click handlers
+ * @param {Object}   [props.chartLinkMap] { [breakdownKey]: (entry) => void } — chart segment click handlers
+ * @param {string}   [props.className]
+ *
+ * @example
+ * <DashboardSection
+ *   title="Users"
+ *   stats={dashboard.users.stats}
+ *   breakdowns={dashboard.users.breakdowns}
+ *   iconMap={USER_ICON_MAP}
+ *   linkMap={{
+ *     total:    () => navigate('/admin/users/all'),
+ *     archived: () => navigate('/admin/users/all/archived'),
+ *   }}
+ *   chartLinkMap={{
+ *     acc_type: (entry) => navigate(`/admin/users/all`),
+ *   }}
+ * />
+ */
+export function DashboardSection({
+  title,
+  stats = [],
+  breakdowns = [],
+  iconMap = {},
+  linkMap = {},
+  chartLinkMap = {},
+  className = "",
+}) {
+  return (
+    <section className={`flex flex-col gap-4 ${className}`}>
+      {title && <h2 className="text-base font-medium">{title}</h2>}
+
+      {stats.length > 0 && (
+        <StatGrid stats={stats} iconMap={iconMap} linkMap={linkMap} />
+      )}
+
+      {breakdowns.length > 0 && (
+        <div className={`grid gap-4 ${breakdowns.length > 1 ? "sm:grid-cols-2" : "grid-cols-1"}`}>
+          {breakdowns.map((b) =>
+            b.chartType === "bar" ? (
+              <BarBreakdown
+                key={b.key}
+                label={b.label}
+                data={b.data}
+                onBarClick={chartLinkMap[b.key]}
+              />
+            ) : (
+              <PieBreakdown
+                key={b.key}
+                label={b.label}
+                data={b.data}
+                onSliceClick={chartLinkMap[b.key]}
+              />
+            )
+          )}
+        </div>
+      )}
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Dashboard/PieBreakdown.jsx b/apps/web/src/components/generic/Dashboard/PieBreakdown.jsx
new file mode 100644
index 0000000..64422d4
--- /dev/null
+++ b/apps/web/src/components/generic/Dashboard/PieBreakdown.jsx
@@ -0,0 +1,69 @@
+// components/generic/Dashboard/PieBreakdown.jsx
+
+import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from "recharts";
+
+const DEFAULT_COLORS = [
+  "#6366f1", "#22c55e", "#f59e0b", "#ef4444",
+  "#06b6d4", "#a855f7", "#ec4899", "#84cc16",
+];
+
+/**
+ * A pie chart card for small-cardinality breakdowns.
+ *
+ * @param {Object}    props
+ * @param {string}    props.label        Card title
+ * @param {Array}     props.data         [{ label, value }]
+ * @param {Function}  [props.onSliceClick] (entry) => void — called with the clicked slice
+ * @param {string[]}  [props.colors]
+ * @param {number}    [props.height]     Default: 220
+ * @param {string}    [props.className]
+ *
+ * @example
+ * <PieBreakdown
+ *   label="By Account Type"
+ *   data={breakdown.data}
+ *   onSliceClick={(entry) => navigate(`/admin/users/all?acc_type=${entry.label}`)}
+ * />
+ */
+export function PieBreakdown({
+  label,
+  data = [],
+  onSliceClick,
+  colors = DEFAULT_COLORS,
+  height = 220,
+  className = "",
+}) {
+  if (!data.length) return null;
+
+  const isClickable = typeof onSliceClick === "function";
+
+  return (
+    <div className={`bg-card border rounded-xl p-4 flex flex-col gap-2 ${className}`}>
+      <p className="text-sm font-medium">{label}</p>
+      <ResponsiveContainer width="100%" height={height}>
+        <PieChart>
+          <Pie
+            data={data}
+            dataKey="value"
+            nameKey="label"
+            cx="50%"
+            cy="50%"
+            outerRadius={80}
+            label={({ label: l, percent }) =>
+              `${l} ${(percent * 100).toFixed(0)}%`
+            }
+            labelLine={false}
+            onClick={isClickable ? (entry) => onSliceClick(entry) : undefined}
+            cursor={isClickable ? "pointer" : undefined}
+          >
+            {data.map((_, i) => (
+              <Cell key={i} fill={colors[i % colors.length]} />
+            ))}
+          </Pie>
+          <Tooltip formatter={(v, n) => [v, n]} />
+          <Legend />
+        </PieChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Dashboard/StatCard.jsx b/apps/web/src/components/generic/Dashboard/StatCard.jsx
new file mode 100644
index 0000000..78bed3d
--- /dev/null
+++ b/apps/web/src/components/generic/Dashboard/StatCard.jsx
@@ -0,0 +1,49 @@
+// components/generic/Dashboard/StatCard.jsx
+
+/**
+ * A single metric card. Optionally clickable for navigation.
+ *
+ * @param {Object}        props
+ * @param {string}        props.label       Display label
+ * @param {number|string} props.value       Metric value
+ * @param {ReactNode}     [props.icon]      Optional icon
+ * @param {Function}      [props.onClick]   If provided, card becomes clickable
+ * @param {string}        [props.className] Extra classes on the card
+ *
+ * @example
+ * <StatCard
+ *   label="Total Users"
+ *   value={128}
+ *   icon={<Users className="size-5" />}
+ *   onClick={() => navigate('/admin/users/all')}
+ * />
+ */
+export function StatCard({ label, value, icon, onClick, className = "" }) {
+  const isClickable = typeof onClick === "function";
+
+  return (
+    <div
+      role={isClickable ? "button" : undefined}
+      tabIndex={isClickable ? 0 : undefined}
+      onClick={isClickable ? onClick : undefined}
+      onKeyDown={isClickable ? (e) => e.key === "Enter" && onClick() : undefined}
+      className={`
+        bg-card border rounded-xl px-4 py-4 flex items-center gap-4
+        ${isClickable ? "cursor-pointer hover:border-foreground/30 hover:bg-accent transition-colors" : ""}
+        ${className}
+      `}
+    >
+      {icon && (
+        <div className="shrink-0 bg-muted rounded-lg p-2">
+          {icon}
+        </div>
+      )}
+      <div className="min-w-0">
+        <p className="text-[11px] uppercase tracking-wide text-muted-foreground truncate">
+          {label}
+        </p>
+        <p className="text-2xl font-semibold leading-tight">{value ?? 0}</p>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Dashboard/StatGrid.jsx b/apps/web/src/components/generic/Dashboard/StatGrid.jsx
new file mode 100644
index 0000000..c411058
--- /dev/null
+++ b/apps/web/src/components/generic/Dashboard/StatGrid.jsx
@@ -0,0 +1,36 @@
+// components/generic/Dashboard/StatGrid.jsx
+
+import { StatCard } from "./StatCard";
+
+/**
+ * Renders a responsive grid of StatCards from a stats array.
+ *
+ * @param {Object}  props
+ * @param {Array}   props.stats          [{ key, label, value, icon? }]
+ * @param {Object}  [props.iconMap]      { [key]: <ReactNode> }
+ * @param {Object}  [props.linkMap]      { [key]: () => void } — maps stat key → navigate callback
+ * @param {string}  [props.className]
+ *
+ * @example
+ * const linkMap = {
+ *   total:    () => navigate('/admin/users/all'),
+ *   active:   () => navigate('/admin/users/all'),
+ *   archived: () => navigate('/admin/users/all/archived'),
+ * };
+ * <StatGrid stats={dashboard.users.stats} iconMap={iconMap} linkMap={linkMap} />
+ */
+export function StatGrid({ stats = [], iconMap = {}, linkMap = {}, className = "" }) {
+  return (
+    <div className={`grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 ${className}`}>
+      {stats.map((s) => (
+        <StatCard
+          key={s.key}
+          label={s.label}
+          value={s.value}
+          icon={s.icon ?? iconMap[s.key]}
+          onClick={linkMap[s.key]}
+        />
+      ))}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Dashboard/TableDashboard.jsx b/apps/web/src/components/generic/Dashboard/TableDashboard.jsx
new file mode 100644
index 0000000..2ec8c77
--- /dev/null
+++ b/apps/web/src/components/generic/Dashboard/TableDashboard.jsx
@@ -0,0 +1,141 @@
+// components/generic/Dashboard/TableDashboard.jsx
+
+import { StatCard } from "./StatCard";
+import { PieBreakdown } from "./PieBreakdown";
+import { BarBreakdown } from "./BarBreakdown";
+
+/**
+ * A dashboard strip rendered above a DataTable.
+ * Clicking any stat card or chart segment applies a filter to the table
+ * via tableRefsRef.current.setFilters([{ id, value }]).
+ *
+ * Clicking the same card/segment again clears that filter (toggle).
+ *
+ * @param {Object}   props
+ * @param {Array}    props.stats
+ *   [{ key, label, value, icon?, filterId?, filterValue? }]
+ *   - filterId:    column id to filter on  (e.g. "is_active")
+ *   - filterValue: value array to apply    (e.g. ["true"])
+ *
+ * @param {Array}    props.breakdowns
+ *   [{ key, label, chartType, filterId?, data: [{ label, value }] }]
+ *   - filterId: column id for the breakdown (e.g. "acc_type")
+ *   - Each data entry's `label` becomes the filterValue when clicked
+ *
+ * @param {Object}   props.iconMap         { [statKey]: <ReactNode> }
+ * @param {Array}    props.activeFilters    filtersRef.current — to highlight active items
+ * @param {Object}   props.tableRefsRef    ref with { setFilters, getFilters }
+ * @param {string}   [props.className]
+ *
+ * @example — Users table
+ * <TableDashboard
+ *   stats={dashboard.users.stats}
+ *   breakdowns={dashboard.users.breakdowns}
+ *   iconMap={USER_ICON_MAP}
+ *   activeFilters={tableRefsRef.current.getFilters?.() ?? []}
+ *   tableRefsRef={tableRefsRef}
+ * />
+ */
+export function TableDashboard({
+  stats = [],
+  breakdowns = [],
+  statMap = {},
+  tableRefsRef,   // ← remove activeFilters prop entirely
+  className = "",
+}) {
+  // ─── Always read live from ref ────────────────────────────────────────────
+  function getActiveFilters() {
+    return tableRefsRef?.current?.getFilters?.() ?? [];
+  }
+
+  function isFilterActive(filterId, filterValue) {
+    if (!filterId) return false;
+    const existing = getActiveFilters().find((f) => f.id === filterId);
+    if (!existing) return false;
+    if (!filterValue) return true;
+    return filterValue.every((v) => existing.value?.includes(v));
+  }
+
+  function toggleFilter(filterId, filterValue) {
+    if (!filterId || !tableRefsRef?.current?.setFilters) return;
+
+    const managedIds = new Set([
+      ...stats.map((s) => s.filterId),
+      ...breakdowns.map((b) => b.filterId),
+    ].filter(Boolean));
+
+    const current = getActiveFilters();
+    const existing = current.find((f) => f.id === filterId);
+    const isActive = existing &&
+      (!filterValue || filterValue.every((v) => existing.value?.includes(v)));
+
+    const unrelated = current.filter((f) => !managedIds.has(f.id));
+
+    if (isActive) {
+      tableRefsRef.current.setFilters(unrelated);
+    } else {
+      tableRefsRef.current.setFilters([
+        ...unrelated,
+        { id: filterId, value: filterValue ?? [] },
+      ]);
+    }
+  }
+
+  function handleStatClick(stat) {
+    if (stat.onClick) return stat.onClick();
+    if (!stat.filterId) return;
+    toggleFilter(stat.filterId, stat.filterValue);
+  }
+
+  function handleChartClick(breakdown, entry) {
+    if (!breakdown.filterId) return;
+    toggleFilter(breakdown.filterId, [String(entry.label)]);
+  }
+
+  if (!stats.length && !breakdowns.length) return null;
+
+  return (
+    <div className={`flex flex-col gap-4 mb-4 ${className}`}>
+      {stats.length > 0 && (
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
+          {stats.map((s) => {
+            const active = isFilterActive(s.filterId, s.filterValue);
+            const mapping = statMap[s.key] ?? {};
+            return (
+              <StatCard
+                key={s.key}
+                label={mapping.label ?? s.label}
+                value={s.value}
+                icon={mapping.icon}
+                onClick={s.filterId || s.onClick ? () => handleStatClick(s) : undefined}
+                className={active ? "ring-2 ring-primary border-primary" : ""}
+              />
+            );
+          })}
+        </div>
+      )}
+
+      {breakdowns.length > 0 && (
+        <div className={`grid gap-4 ${breakdowns.length > 1 ? "sm:grid-cols-2" : "grid-cols-1"}`}>
+          {breakdowns.map((b) =>
+            b.chartType === "bar" ? (
+              <BarBreakdown
+                key={b.key}
+                label={b.label}
+                data={b.data}
+                onBarClick={b.filterId ? (entry) => handleChartClick(b, entry) : undefined}
+              />
+            ) : (
+              <PieBreakdown
+                key={b.key}
+                label={b.label}
+                data={b.data}
+                onSliceClick={b.filterId ? (entry) => handleChartClick(b, entry) : undefined}
+              />
+            )
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/DashboardGrid.jsx b/apps/web/src/components/generic/DashboardGrid.jsx
new file mode 100644
index 0000000..ebf01e3
--- /dev/null
+++ b/apps/web/src/components/generic/DashboardGrid.jsx
@@ -0,0 +1,62 @@
+// ─── DashboardGrid.jsx ─────────────────────────────────────────────────────────
+import { useNavigate } from "react-router-dom";
+import { motion } from "framer-motion";
+
+export default function DashboardGrid({ sections = [] }) {
+  const navigate = useNavigate();
+
+  const handleNavigate = (e, link) => {
+    e.preventDefault()
+    navigate(link)
+  }
+
+  return (
+    <section className="">
+      <div className="lg:container lg:mx-auto flex flex-col items-start gap-8 p-6">
+        {sections.map(({ title, description, tiles }) => (
+          <div key={title} className="flex flex-col items-start gap-4 w-full">
+
+            {/* Header */}
+            <div className="flex flex-col gap-2">
+              <h1 className="text-2xl leading-tighter font-medium tracking-tighter">
+                {title}
+              </h1>
+              <p className="text-muted-foreground">{description}</p>
+            </div>
+
+            {/* Tiles */}
+            <div className="grid xs:grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 h-fit w-full gap-4">
+              {tiles.map(({ key, label, icon: Icon, link }) => (
+                <motion.div
+                  key={key}
+                  onClick={(e) => handleNavigate(e, link)}
+                  className="group bg-card hover:bg-primary border rounded-lg relative overflow-hidden flex flex-col h-54 cursor-pointer transition-colors duration-200 ease-out"
+                  whileHover={{ y: -6, scale: 1.02 }}
+                  transition={{
+                    y: { type: "spring", stiffness: 300, damping: 20 },
+                    scale: { type: "spring", stiffness: 300, damping: 20 },
+                  }}
+                >
+                  <motion.div
+                    className="w-full flex justify-end"
+                    whileHover={{ rotate: -18, scale: 1.05 }}
+                    transition={{ type: "spring", stiffness: 200 }}
+                  >
+                    <Icon className="size-32 opacity-50 -rotate-24 text-blue-500 transition-colors duration-200 group-hover:text-white group-hover:opacity-100" />
+                  </motion.div>
+                  <motion.div
+                    className="p-4 font-medium mt-auto text-foreground transition-colors duration-200 ease-out group-hover:text-white"
+                    whileHover={{ y: -2 }}
+                  >
+                    {label}
+                  </motion.div>
+                </motion.div>
+              ))}
+            </div>
+
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/DatePickerButton.jsx b/apps/web/src/components/generic/DatePickerButton.jsx
new file mode 100644
index 0000000..39f1e1a
--- /dev/null
+++ b/apps/web/src/components/generic/DatePickerButton.jsx
@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { CalendarIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+// Single-date picker button used by "From"/"To" range filters (Activity Feed,
+// User Activity tab). Extracted so both pages share one implementation.
+export function DatePickerButton({ value, onChange, placeholder, disabled }) {
+  const [open, setOpen] = useState(false);
+  const { fmtDate } = useDateFormat();
+
+  const label = value ? fmtDate(value) : placeholder;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={`h-8 text-sm w-[150px] justify-start font-normal gap-2 ${!value ? "text-muted-foreground" : ""}`}
+        >
+          <CalendarIcon className="size-3.5 shrink-0" />
+          <span className="truncate">{label}</span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={value}
+          onSelect={(d) => { onChange(d ?? null); setOpen(false); }}
+          disabled={disabled}
+          initialFocus
+        />
+        <div className="border-t px-3 py-2 flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            className="flex-1 h-7 text-xs"
+            onClick={() => { onChange(new Date()); setOpen(false); }}
+          >
+            Today
+          </Button>
+          {value && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="flex-1 h-7 text-xs text-muted-foreground"
+              onClick={() => { onChange(null); setOpen(false); }}
+            >
+              Clear
+            </Button>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/web/src/components/generic/DeadlinePicker.jsx b/apps/web/src/components/generic/DeadlinePicker.jsx
new file mode 100644
index 0000000..874fc2f
--- /dev/null
+++ b/apps/web/src/components/generic/DeadlinePicker.jsx
@@ -0,0 +1,128 @@
+/***********************************************************************************************************************************************************************
+ * File Name    : DeadlinePicker.jsx
+ * Type         : Reusable Component
+ * Description  : Combined date + time picker for deadline fields.
+ *                Controlled via a single ISO datetime string (value / onChange).
+ *                Calendar + time input live inside a Card, matching shadcn's
+ *                "Date and Time Picker" pattern.
+ *
+ * Props:
+ *   value    : string | null   — ISO datetime string e.g. "2026-06-01T10:30"
+ *   onChange : (iso: string | null) => void
+ *   disabled?: boolean
+ ***********************************************************************************************************************************************************************/
+import { useState } from 'react';
+import { format, parseISO, isValid } from 'date-fns';
+import { ChevronDownIcon, Clock2Icon } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import { Card, CardContent, CardFooter } from '@/components/ui/card';
+import { Field, FieldGroup, FieldLabel } from '@/components/ui/field';
+import { InputGroup, InputGroupAddon, InputGroupInput } from '@/components/ui/input-group';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function toDate(iso) {
+    if (!iso) return undefined;
+    const d = parseISO(iso);
+    return isValid(d) ? d : undefined;
+}
+
+function toTimeString(iso) {
+    if (!iso) return '00:00';
+    const d = parseISO(iso);
+    if (!isValid(d)) return '00:00';
+    return format(d, 'HH:mm');
+}
+
+function buildISO(date, timeStr) {
+    if (!date) return null;
+    const [h = '00', m = '00'] = (timeStr ?? '00:00').split(':');
+    const d = new Date(date);
+    d.setHours(Number(h), Number(m), 0, 0);
+    return d.toISOString();
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+export default function DeadlinePicker({ value, onChange, disabled = false }) {
+    const [open, setOpen] = useState(false);
+
+    const selectedDate = toDate(value);
+    const timeStr = toTimeString(value);
+
+    const handleDateSelect = (date) => {
+        onChange(buildISO(date, timeStr));
+    };
+
+    const handleTimeChange = (e) => {
+        onChange(buildISO(selectedDate ?? new Date(), e.target.value));
+    };
+
+    const handleClear = () => onChange(null);
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    type="button"
+                    variant="outline"
+                    disabled={disabled}
+                    className="w-56 justify-between font-normal text-sm"
+                >
+                    {selectedDate
+                        ? `${format(selectedDate, 'MMM d, yyyy')}  ${format(parseISO(buildISO(selectedDate, timeStr)), 'h:mm a')}`
+                        : 'Select date'}
+                    <ChevronDownIcon className="h-4 w-4 opacity-50" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto border-0 bg-transparent p-0 shadow-none ring-0" align="start">
+                <Card size="sm" className="w-fit">
+                    <CardContent>
+                        <Calendar
+                            mode="single"
+                            selected={selectedDate}
+                            captionLayout="dropdown"
+                            defaultMonth={selectedDate}
+                            onSelect={handleDateSelect}
+                            disabled={disabled}
+                            className="p-0"
+                        />
+                    </CardContent>
+                    <CardFooter className="flex-col items-stretch gap-3 border-t bg-card">
+                        <FieldGroup>
+                            <Field orientation="horizontal">
+                                <FieldLabel htmlFor="deadline-time">Time</FieldLabel>
+                                <InputGroup>
+                                    <InputGroupInput
+                                        id="deadline-time"
+                                        type="time"
+                                        step="60"
+                                        value={timeStr}
+                                        onChange={handleTimeChange}
+                                        disabled={disabled || !selectedDate}
+                                        className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+                                    />
+                                    <InputGroupAddon>
+                                        <Clock2Icon className="text-muted-foreground" />
+                                    </InputGroupAddon>
+                                </InputGroup>
+                            </Field>
+                        </FieldGroup>
+                        {value && (
+                            <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                disabled={disabled}
+                                onClick={handleClear}
+                            >
+                                Clear
+                            </Button>
+                        )}
+                    </CardFooter>
+                </Card>
+            </PopoverContent>
+        </Popover>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Dialogs/ArchiveDialog.jsx b/apps/web/src/components/generic/Dialogs/ArchiveDialog.jsx
new file mode 100644
index 0000000..c4e2604
--- /dev/null
+++ b/apps/web/src/components/generic/Dialogs/ArchiveDialog.jsx
@@ -0,0 +1,138 @@
+// ─── components/ArchiveDialog.jsx ────────────────────────────────────────────
+import { useEffect, useState } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Spinner } from "@/components/ui/spinner";
+import { AlertTriangle } from "lucide-react";
+
+/**
+ * Generic archive dialog — works for any entity (users, groups, etc.)
+ *
+ * Single:  <ArchiveDialog entity={rowObject} getName={(r) => r.name} ... />
+ * Bulk:    <ArchiveDialog ids={[1, 2, 3]} entityLabel="Group" ... />
+ *
+ * @param {Function} onArchive       (id | { ids }) => Promise  — called with single id or { ids }
+ * @param {Function} getName         (entity) => string         — how to display the entity name
+ * @param {string}   entityLabel     e.g. "User", "Group"
+ * @param {boolean}  loading         from whichever context the parent uses
+ * @param {Function} onImpactCheck   optional — async () => { label, count }[]
+ *                                   called when dialog opens (single archive only).
+ *                                   Returns an array of impact lines to warn about.
+ *                                   Items with count === 0 are filtered out automatically.
+ */
+export function ArchiveDialog({
+  open,
+  onOpenChange,
+  entity,
+  ids,
+  entityLabel = "Item",
+  getName,
+  onArchive,
+  loading,
+  onSuccess,
+  onImpactCheck,
+}) {
+  const isBulk = Array.isArray(ids) && ids.length > 0;
+  const count  = isBulk ? ids.length : 1;
+
+  const [impactLoading, setImpactLoading] = useState(false);
+  const [impacts, setImpacts] = useState([]);
+
+  const displayName = isBulk
+    ? `${count} selected ${entityLabel.toLowerCase()}${count !== 1 ? "s" : ""}`
+    : (getName?.(entity) ?? entity?.name ?? entity?.email ?? "this item");
+
+  // Fetch impact when dialog opens for a single-entity archive
+  useEffect(() => {
+    if (!open || isBulk || !onImpactCheck) {
+      setImpacts([]);
+      return;
+    }
+    setImpactLoading(true);
+    setImpacts([]);
+    onImpactCheck()
+      .then((rows) => setImpacts((rows ?? []).filter((r) => r.count > 0)))
+      .catch(() => setImpacts([]))
+      .finally(() => setImpactLoading(false));
+  }, [open]);
+
+  const handleArchive = async () => {
+    const res = isBulk
+      ? await onArchive({ ids })
+      : await onArchive(entity);
+
+    if (res) {
+      onOpenChange(false);
+      onSuccess?.();
+    }
+  };
+
+  const hasImpact = impacts.length > 0;
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            Archive {isBulk ? `${count} ${entityLabel}${count !== 1 ? "s" : ""}` : entityLabel}
+          </AlertDialogTitle>
+
+          {impactLoading ? (
+            <div className="flex items-center gap-2 py-2 text-sm text-muted-foreground">
+              <Spinner className="size-4" /> Checking impact…
+            </div>
+          ) : (
+            <>
+              <AlertDialogDescription>
+                Are you sure you want to archive{" "}
+                <span className="font-medium text-foreground">{displayName}</span>?{" "}
+                {isBulk
+                  ? "They will be deactivated and lose access immediately."
+                  : "This will deactivate the record immediately."}
+              </AlertDialogDescription>
+
+              {hasImpact && (
+                <div className="mt-3 rounded-md border border-amber-300 bg-amber-50 dark:border-amber-700 dark:bg-amber-950/40 p-3 space-y-1.5">
+                  <div className="flex items-center gap-1.5 text-amber-700 dark:text-amber-400 font-medium text-sm">
+                    <AlertTriangle className="h-4 w-4 shrink-0" />
+                    This will affect active learners
+                  </div>
+                  <ul className="ml-5 list-disc text-sm text-amber-800 dark:text-amber-300 space-y-0.5">
+                    {impacts.map((impact, i) => (
+                      <li key={i}>
+                        <span className="font-semibold">{impact.count}</span> {impact.label}
+                      </li>
+                    ))}
+                  </ul>
+                  <p className="text-xs text-amber-700 dark:text-amber-400 pt-0.5">
+                    You can still proceed — this cannot be undone without restoring the record.
+                  </p>
+                </div>
+              )}
+            </>
+          )}
+        </AlertDialogHeader>
+
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={loading || impactLoading}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleArchive}
+            disabled={loading || impactLoading}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            {loading && <Spinner className="size-4 mr-2" />}
+            Archive{isBulk ? ` ${count} ${entityLabel}${count !== 1 ? "s" : ""}` : ""}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/apps/web/src/components/generic/Dialogs/BanUserDialog.jsx b/apps/web/src/components/generic/Dialogs/BanUserDialog.jsx
new file mode 100644
index 0000000..46fadef
--- /dev/null
+++ b/apps/web/src/components/generic/Dialogs/BanUserDialog.jsx
@@ -0,0 +1,230 @@
+// ─── components/Dialogs/BanUserDialog.jsx ─────────────────────────────────────
+import { useState } from "react";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Spinner } from "@/components/ui/spinner";
+import { Calendar } from "@/components/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
+import { CalendarIcon, Clock2Icon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { fmtDate } from "@/utils/datetime.util";
+
+const EMPTY = { reason: "", ban_type: "temporary", expires_at: "", _date: null, _time: "12:00" };
+
+/**
+ * Ban dialog — single or bulk.
+ *
+ * Single:  <BanUserDialog entity={rowObject} getName={(r) => r.name} ... />
+ * Bulk:    <BanUserDialog ids={[1, 2, 3]} entityLabel="User" ... />
+ *
+ * @param {Function} onBan     (payload) => Promise  — called with { reason, ban_type, expires_at? }
+ *                             For bulk, caller merges ids on top.
+ */
+export function BanUserDialog({
+  open,
+  onOpenChange,
+  entity,
+  ids,
+  entityLabel = "User",
+  getName,
+  onBan,
+  loading,
+  onSuccess,
+}) {
+  const [form, setForm] = useState(EMPTY);
+  const [errors, setErrors] = useState({});
+  const [calOpen, setCalOpen] = useState(false);
+
+  const mergeDateTime = (date, time) => {
+    if (!date) return "";
+    const [h, m] = (time || "12:00").split(":").map(Number);
+    const d = new Date(date);
+    d.setHours(h, m, 0, 0);
+    return d.toISOString();
+  };
+
+  const isBulk = Array.isArray(ids) && ids.length > 0;
+  const count  = isBulk ? ids.length : 1;
+  const displayName = isBulk
+    ? `${count} selected ${entityLabel.toLowerCase()}${count !== 1 ? "s" : ""}`
+    : (getName?.(entity) ?? entity?.personal_info?.name?.full_name ?? entity?.email ?? "this user");
+
+  const validate = () => {
+    const e = {};
+    if (!form.reason.trim()) e.reason = "Reason is required.";
+    if (form.ban_type === "temporary") {
+      if (!form.expires_at) e.expires_at = "Expiry date is required.";
+      else if (new Date(form.expires_at) <= new Date()) e.expires_at = "Expiry must be in the future.";
+    }
+    setErrors(e);
+    return Object.keys(e).length === 0;
+  };
+
+  const handleSubmit = async () => {
+    if (!validate()) return;
+    const payload = {
+      reason:   form.reason.trim(),
+      ban_type: form.ban_type,
+      ...(form.ban_type === "temporary" ? { expires_at: form.expires_at } : {}),
+    };
+    const res = await onBan(payload);
+    if (res) {
+      setForm(EMPTY);
+      setErrors({});
+      onOpenChange(false);
+      onSuccess?.();
+    }
+  };
+
+  const handleOpenChange = (v) => {
+    if (!v) { setForm(EMPTY); setErrors({}); }
+    onOpenChange(v);
+  };
+
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-destructive">
+            Ban {isBulk ? `${count} ${entityLabel}${count !== 1 ? "s" : ""}` : entityLabel}
+          </DialogTitle>
+          <DialogDescription>
+            You are about to ban{" "}
+            <span className="font-medium text-foreground">{displayName}</span>.
+            They will be logged out immediately and blocked from accessing the platform.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4 py-2">
+          {/* Reason */}
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="ban-reason">
+              Reason <span className="text-destructive">*</span>
+            </Label>
+            <Textarea
+              id="ban-reason"
+              placeholder="Explain why this user is being banned…"
+              rows={3}
+              value={form.reason}
+              onChange={(e) => setForm((f) => ({ ...f, reason: e.target.value }))}
+              aria-invalid={!!errors.reason}
+            />
+            {errors.reason && (
+              <p className="text-xs text-destructive">{errors.reason}</p>
+            )}
+          </div>
+
+          {/* Ban type */}
+          <div className="flex flex-col gap-2">
+            <Label>Ban Duration</Label>
+            <RadioGroup
+              value={form.ban_type}
+              onValueChange={(v) => setForm((f) => ({ ...f, ban_type: v, expires_at: "" }))}
+              className="flex gap-6"
+            >
+              <label className="flex items-center gap-2 cursor-pointer text-sm">
+                <RadioGroupItem value="permanent" id="ban-perm" />
+                <span>Permanent</span>
+              </label>
+              <label className="flex items-center gap-2 cursor-pointer text-sm">
+                <RadioGroupItem value="temporary" id="ban-temp" />
+                <span>Temporary</span>
+              </label>
+            </RadioGroup>
+          </div>
+
+          {/* Expiry — shown only for temporary */}
+          {form.ban_type === "temporary" && (
+            <div className="flex flex-col gap-1.5">
+              <Label>
+                Ban Until <span className="text-destructive">*</span>
+              </Label>
+              <Popover open={calOpen} onOpenChange={setCalOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    aria-invalid={!!errors.expires_at}
+                    className={cn(
+                      "w-full justify-start text-left font-normal",
+                      !form._date && "text-muted-foreground",
+                      errors.expires_at && "border-destructive"
+                    )}
+                  >
+                    <CalendarIcon className="mr-2 size-4 shrink-0" />
+                    {form._date ? fmtDate(form._date) : "Pick a date"}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Card size="sm" className="w-fit rounded-none border-0 shadow-none ring-0">
+                    <CardContent>
+                      <Calendar
+                        mode="single"
+                        selected={form._date ?? undefined}
+                        onSelect={(date) => {
+                          const merged = mergeDateTime(date, form._time);
+                          setForm((f) => ({ ...f, _date: date ?? null, expires_at: merged }));
+                        }}
+                        disabled={(d) => d < new Date(Date.now() + 60_000)}
+                        className="p-0"
+                        initialFocus
+                      />
+                    </CardContent>
+                    <CardFooter className="border-t bg-card">
+                      <FieldGroup>
+                        <Field>
+                          <FieldLabel htmlFor="ban-expires-time">Time</FieldLabel>
+                          <InputGroup>
+                            <InputGroupInput
+                              id="ban-expires-time"
+                              type="time"
+                              step="60"
+                              value={form._time}
+                              onChange={(e) => {
+                                const merged = mergeDateTime(form._date, e.target.value);
+                                setForm((f) => ({ ...f, _time: e.target.value, expires_at: merged }));
+                              }}
+                              className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+                            />
+                            <InputGroupAddon align="inline-end">
+                              <Clock2Icon className="text-muted-foreground" />
+                            </InputGroupAddon>
+                          </InputGroup>
+                        </Field>
+                      </FieldGroup>
+                    </CardFooter>
+                  </Card>
+                </PopoverContent>
+              </Popover>
+              {errors.expires_at && (
+                <p className="text-xs text-destructive">{errors.expires_at}</p>
+              )}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => handleOpenChange(false)} disabled={loading}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={handleSubmit}
+            disabled={loading}
+          >
+            {loading && <Spinner className="size-4 mr-2" />}
+            Ban {isBulk ? `${count} ${entityLabel}${count !== 1 ? "s" : ""}` : entityLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/components/generic/Dialogs/Client/InfoDialog.jsx b/apps/web/src/components/generic/Dialogs/Client/InfoDialog.jsx
new file mode 100644
index 0000000..dc2dafe
--- /dev/null
+++ b/apps/web/src/components/generic/Dialogs/Client/InfoDialog.jsx
@@ -0,0 +1,50 @@
+// ─── components/generic/Dialogs/Client/InfoDialog.jsx ────────────────────────
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Info } from "lucide-react";
+
+/**
+ * Generic one-time informational dialog for client-side validation notices —
+ * e.g. "this course has no assessment yet". Purely informational: a single
+ * acknowledgement button, no destructive action.
+ *
+ * Usage:
+ *   <InfoDialog
+ *     open={open}
+ *     onOpenChange={setOpen}
+ *     title="Assessment Coming Soon"
+ *     description="This course does not have an assessment built yet…"
+ *   />
+ */
+export function InfoDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  icon: Icon = Info,
+  actionLabel = "Continue",
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Icon className="size-4 text-muted-foreground shrink-0" />
+            {title}
+          </DialogTitle>
+          <DialogDescription className="text-left">{description}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button onClick={() => onOpenChange(false)}>{actionLabel}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/components/generic/Dialogs/DemoteAdminDialog.jsx b/apps/web/src/components/generic/Dialogs/DemoteAdminDialog.jsx
new file mode 100644
index 0000000..deb6ce5
--- /dev/null
+++ b/apps/web/src/components/generic/Dialogs/DemoteAdminDialog.jsx
@@ -0,0 +1,59 @@
+// ─── components/DemoteAdminDialog.jsx ────────────────────────────────────────
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Spinner } from "@/components/ui/spinner";
+
+/**
+ * Confirms removing Administrator access from a single user.
+ *
+ * @param {Function} onDemoteAdmin (entity) => Promise
+ */
+export function DemoteAdminDialog({
+  open,
+  onOpenChange,
+  entity,
+  onDemoteAdmin,
+  loading,
+  onSuccess,
+}) {
+  const displayName = entity?.personal_info?.name?.full_name ?? entity?.email ?? "this user";
+
+  const handleConfirm = async () => {
+    const res = await onDemoteAdmin(entity);
+    if (res) {
+      onOpenChange(false);
+      onSuccess?.();
+    }
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Demote Administrator</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to remove Administrator access from{" "}
+            <span className="font-medium text-foreground">{displayName}</span>?
+            Their account will be returned to a standard User role, and they will
+            be notified by email.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={loading}>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleConfirm} disabled={loading}>
+            {loading && <Spinner className="size-4 mr-2" />}
+            Demote
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/apps/web/src/components/generic/Dialogs/MakeAdminDialog.jsx b/apps/web/src/components/generic/Dialogs/MakeAdminDialog.jsx
new file mode 100644
index 0000000..9f88de3
--- /dev/null
+++ b/apps/web/src/components/generic/Dialogs/MakeAdminDialog.jsx
@@ -0,0 +1,59 @@
+// ─── components/MakeAdminDialog.jsx ──────────────────────────────────────────
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Spinner } from "@/components/ui/spinner";
+
+/**
+ * Confirms promoting a single user to Administrator.
+ *
+ * @param {Function} onMakeAdmin (entity) => Promise
+ */
+export function MakeAdminDialog({
+  open,
+  onOpenChange,
+  entity,
+  onMakeAdmin,
+  loading,
+  onSuccess,
+}) {
+  const displayName = entity?.personal_info?.name?.full_name ?? entity?.email ?? "this user";
+
+  const handleConfirm = async () => {
+    const res = await onMakeAdmin(entity);
+    if (res) {
+      onOpenChange(false);
+      onSuccess?.();
+    }
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Make Administrator</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to grant{" "}
+            <span className="font-medium text-foreground">{displayName}</span>{" "}
+            Administrator access? They will gain full access to all administrative
+            features, and will be notified by email.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={loading}>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleConfirm} disabled={loading}>
+            {loading && <Spinner className="size-4 mr-2" />}
+            Make Admin
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/apps/web/src/components/generic/Dialogs/PermanentDeleteDialog.jsx b/apps/web/src/components/generic/Dialogs/PermanentDeleteDialog.jsx
new file mode 100644
index 0000000..084cc4d
--- /dev/null
+++ b/apps/web/src/components/generic/Dialogs/PermanentDeleteDialog.jsx
@@ -0,0 +1,141 @@
+// ─── components/PermanentDeleteDialog.jsx ────────────────────────────────────
+import { useEffect, useState } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Spinner } from "@/components/ui/spinner";
+import { AlertTriangle } from "lucide-react";
+
+/**
+ * Generic permanent-delete dialog — works for any entity (users, groups, etc.)
+ * Unlike ArchiveDialog, this is irreversible: there is no Restore after this.
+ *
+ * Single:  <PermanentDeleteDialog entity={rowObject} getName={(r) => r.name} ... />
+ * Bulk:    <PermanentDeleteDialog ids={[1, 2, 3]} entityLabel="Group" ... />
+ *
+ * @param {Function} onDelete        (id | { ids }) => Promise  — called with single id or { ids }
+ * @param {Function} getName         (entity) => string         — how to display the entity name
+ * @param {string}   entityLabel     e.g. "User", "Group"
+ * @param {boolean}  loading         from whichever context the parent uses
+ * @param {Function} onImpactCheck   optional — async () => { label, count }[]
+ *                                   called when dialog opens (single delete only).
+ *                                   Returns an array of impact lines to warn about.
+ *                                   Items with count === 0 are filtered out automatically.
+ */
+export function PermanentDeleteDialog({
+  open,
+  onOpenChange,
+  entity,
+  ids,
+  entityLabel = "Item",
+  getName,
+  onDelete,
+  loading,
+  onSuccess,
+  onImpactCheck,
+}) {
+  const isBulk = Array.isArray(ids) && ids.length > 0;
+  const count  = isBulk ? ids.length : 1;
+
+  const [impactLoading, setImpactLoading] = useState(false);
+  const [impacts, setImpacts] = useState([]);
+
+  const displayName = isBulk
+    ? `${count} selected ${entityLabel.toLowerCase()}${count !== 1 ? "s" : ""}`
+    : (getName?.(entity) ?? entity?.name ?? entity?.email ?? "this item");
+
+  // Fetch impact when dialog opens for a single-entity delete
+  useEffect(() => {
+    if (!open || isBulk || !onImpactCheck) {
+      setImpacts([]);
+      return;
+    }
+    setImpactLoading(true);
+    setImpacts([]);
+    onImpactCheck()
+      .then((rows) => setImpacts((rows ?? []).filter((r) => r.count > 0)))
+      .catch(() => setImpacts([]))
+      .finally(() => setImpactLoading(false));
+  }, [open]);
+
+  const handleDelete = async () => {
+    const res = isBulk
+      ? await onDelete({ ids })
+      : await onDelete(entity);
+
+    if (res) {
+      onOpenChange(false);
+      onSuccess?.();
+    }
+  };
+
+  const hasImpact = impacts.length > 0;
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            Permanently Delete {isBulk ? `${count} ${entityLabel}${count !== 1 ? "s" : ""}` : entityLabel}
+          </AlertDialogTitle>
+
+          {impactLoading ? (
+            <div className="flex items-center gap-2 py-2 text-sm text-muted-foreground">
+              <Spinner className="size-4" /> Checking impact…
+            </div>
+          ) : (
+            <>
+              <AlertDialogDescription>
+                Are you sure you want to permanently delete{" "}
+                <span className="font-medium text-foreground">{displayName}</span>?{" "}
+                This action cannot be undone.
+              </AlertDialogDescription>
+
+              {hasImpact && (
+                <div className="mt-3 rounded-md border border-amber-300 bg-amber-50 dark:border-amber-700 dark:bg-amber-950/40 p-3 space-y-1.5">
+                  <div className="flex items-center gap-1.5 text-amber-700 dark:text-amber-400 font-medium text-sm">
+                    <AlertTriangle className="h-4 w-4 shrink-0" />
+                    This will also permanently remove related data
+                  </div>
+                  <ul className="ml-5 list-disc text-sm text-amber-800 dark:text-amber-300 space-y-0.5">
+                    {impacts.map((impact, i) => (
+                      <li key={i}>
+                        <span className="font-semibold">{impact.count}</span> {impact.label}
+                      </li>
+                    ))}
+                  </ul>
+                  <p className="text-xs text-amber-700 dark:text-amber-400 pt-0.5">
+                    Deleting anyway will permanently remove all of the above along with it.
+                  </p>
+                </div>
+              )}
+
+              <div className="mt-3 rounded-md border border-destructive/40 bg-destructive/5 p-2.5 text-xs text-destructive">
+                This is different from Archive — there is no Restore after this.
+              </div>
+            </>
+          )}
+        </AlertDialogHeader>
+
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={loading || impactLoading}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleDelete}
+            disabled={loading || impactLoading}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            {loading && <Spinner className="size-4 mr-2" />}
+            Delete{isBulk ? ` ${count}` : ""} Permanently
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/apps/web/src/components/generic/Dialogs/RestoreDialog.jsx b/apps/web/src/components/generic/Dialogs/RestoreDialog.jsx
new file mode 100644
index 0000000..bdfc28e
--- /dev/null
+++ b/apps/web/src/components/generic/Dialogs/RestoreDialog.jsx
@@ -0,0 +1,83 @@
+// ─── components/RestoreDialog.jsx ────────────────────────────────────────────
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Spinner } from "@/components/ui/spinner";
+
+/**
+ * Generic restore dialog — works for any entity (users, groups, etc.)
+ *
+ * Single:  <RestoreDialog entity={rowObject} getName={(r) => r.name} ... />
+ * Bulk:    <RestoreDialog ids={[1, 2, 3]} entityLabel="Group" ... />
+ *
+ * @param {Function} onRestore   (id | { ids }) => Promise  — called with single id or { ids }
+ * @param {Function} getName     (entity) => string         — how to display the entity name
+ * @param {string}   entityLabel e.g. "User", "Group"
+ * @param {boolean}  loading     from whichever context the parent uses
+ */
+export function RestoreDialog({
+  open,
+  onOpenChange,
+  entity,
+  ids,
+  entityLabel = "Item",
+  getName,
+  onRestore,
+  loading,
+  onSuccess,
+}) {
+  const isBulk = Array.isArray(ids) && ids.length > 0;
+  const count  = isBulk ? ids.length : 1;
+
+  const displayName = isBulk
+    ? `${count} selected ${entityLabel.toLowerCase()}${count !== 1 ? "s" : ""}`
+    : (getName?.(entity) ?? entity?.name ?? entity?.email ?? "this item");
+
+  const handleRestore = async () => {
+    const res = isBulk
+      ? await onRestore({ ids })
+      : await onRestore(entity);
+
+    if (res) {
+      onOpenChange(false);
+      onSuccess?.();
+    }
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            Restore {isBulk ? `${count} ${entityLabel}${count !== 1 ? "s" : ""}` : entityLabel}
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to restore{" "}
+            <span className="font-medium text-foreground">{displayName}</span>?{" "}
+            {isBulk
+              ? "They will regain access to their accounts immediately."
+              : "This will reactivate the record immediately."}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={loading}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleRestore}
+            disabled={loading}
+            className="bg-emerald-600 text-white hover:bg-emerald-700"
+          >
+            {loading && <Spinner className="size-4 mr-2" />}
+            Restore{isBulk ? ` ${count} ${entityLabel}${count !== 1 ? "s" : ""}` : ""}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Dialogs/UnbanDialog.jsx b/apps/web/src/components/generic/Dialogs/UnbanDialog.jsx
new file mode 100644
index 0000000..33a2ee5
--- /dev/null
+++ b/apps/web/src/components/generic/Dialogs/UnbanDialog.jsx
@@ -0,0 +1,93 @@
+// ─── components/Dialogs/UnbanDialog.jsx ───────────────────────────────────────
+import { useState } from "react";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+
+/**
+ * Unban dialog — single or bulk.
+ *
+ * Single: <UnbanDialog entity={rowObject} getName={(r) => r.name} ... />
+ * Bulk:   <UnbanDialog ids={[1, 2, 3]} entityLabel="User" ... />
+ *
+ * @param {Function} onUnban   (payload) => Promise  — { lift_reason? }
+ */
+export function UnbanDialog({
+  open,
+  onOpenChange,
+  entity,
+  ids,
+  entityLabel = "User",
+  getName,
+  onUnban,
+  loading,
+  onSuccess,
+}) {
+  const [liftReason, setLiftReason] = useState("");
+
+  const isBulk = Array.isArray(ids) && ids.length > 0;
+  const count  = isBulk ? ids.length : 1;
+  const displayName = isBulk
+    ? `${count} selected ${entityLabel.toLowerCase()}${count !== 1 ? "s" : ""}`
+    : (getName?.(entity) ?? entity?.personal_info?.name?.full_name ?? entity?.email ?? "this user");
+
+  const handleSubmit = async () => {
+    const res = await onUnban({ lift_reason: liftReason.trim() || undefined });
+    if (res) {
+      setLiftReason("");
+      onOpenChange(false);
+      onSuccess?.();
+    }
+  };
+
+  const handleOpenChange = (v) => {
+    if (!v) setLiftReason("");
+    onOpenChange(v);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Unban {isBulk ? `${count} ${entityLabel}${count !== 1 ? "s" : ""}` : entityLabel}</DialogTitle>
+          <DialogDescription>
+            Remove the ban on{" "}
+            <span className="font-medium text-foreground">{displayName}</span>.
+            They will regain access to the platform immediately.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-1.5 py-2">
+          <Label htmlFor="lift-reason">
+            Lift Reason <span className="text-muted-foreground text-xs">(optional)</span>
+          </Label>
+          <Textarea
+            id="lift-reason"
+            placeholder="Reason for lifting this ban…"
+            rows={3}
+            value={liftReason}
+            onChange={(e) => setLiftReason(e.target.value)}
+          />
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => handleOpenChange(false)} disabled={loading}>
+            Cancel
+          </Button>
+          <Button
+            className="bg-emerald-600 text-white hover:bg-emerald-700"
+            onClick={handleSubmit}
+            disabled={loading}
+          >
+            {loading && <Spinner className="size-4 mr-2" />}
+            Unban {isBulk ? `${count} ${entityLabel}${count !== 1 ? "s" : ""}` : entityLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/components/generic/Dialogs/UnsavedChangesDialog.jsx b/apps/web/src/components/generic/Dialogs/UnsavedChangesDialog.jsx
new file mode 100644
index 0000000..fcca2d3
--- /dev/null
+++ b/apps/web/src/components/generic/Dialogs/UnsavedChangesDialog.jsx
@@ -0,0 +1,72 @@
+// ─── components/generic/Dialogs/UnsavedChangesDialog.jsx ─────────────────────
+import { useRef } from "react";
+import { AlertTriangle } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+/**
+ * Generic "leave without saving?" prompt. Rendered by useUnsavedChangesGuard —
+ * see that hook for the intended integration (drop its returned `dialog`
+ * anywhere in the page JSX, no direct usage of this component needed).
+ */
+export function UnsavedChangesDialog({
+  open,
+  onConfirm,
+  onCancel,
+  title = "Unsaved changes",
+  description = "You have unsaved changes. If you leave this page now, they will be lost.",
+  confirmLabel = "Leave without saving",
+  cancelLabel = "Stay on this page",
+}) {
+  // Radix's AlertDialogAction/Cancel both auto-dismiss on click (firing
+  // onOpenChange(false)) *in addition to* their own onClick. Without this
+  // flag, clicking Action fires onConfirm() then onOpenChange(false) fires
+  // onCancel() right behind it — the reset immediately undoes the confirm,
+  // so "Leave without saving" silently does nothing.
+  const confirmedRef = useRef(false);
+
+  const handleConfirm = () => {
+    confirmedRef.current = true;
+    onConfirm?.();
+  };
+
+  const handleOpenChange = (next) => {
+    if (next) return;
+    if (confirmedRef.current) {
+      confirmedRef.current = false;
+      return;
+    }
+    onCancel?.();
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={handleOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle className="flex items-center gap-2">
+            <AlertTriangle className="h-4 w-4 text-amber-500" />
+            {title}
+          </AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={onCancel}>{cancelLabel}</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleConfirm}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/apps/web/src/components/generic/EnvironmentBanner.jsx b/apps/web/src/components/generic/EnvironmentBanner.jsx
new file mode 100644
index 0000000..91b843c
--- /dev/null
+++ b/apps/web/src/components/generic/EnvironmentBanner.jsx
@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { X } from "lucide-react";
+
+// Hardcoded (not DB-driven) — flip to false if it should reappear on every
+// reload instead of staying dismissed once closed.
+const PERSIST_DISMISSAL = true;
+const DISMISS_KEY = "qas_env_banner_dismissed";
+
+export default function EnvironmentBanner() {
+  const [dismissed, setDismissed] = useState(
+    () => PERSIST_DISMISSAL && localStorage.getItem(DISMISS_KEY) === "true"
+  );
+
+  if (dismissed) return null;
+
+  const handleDismiss = () => {
+    if (PERSIST_DISMISSAL) localStorage.setItem(DISMISS_KEY, "true");
+    setDismissed(true);
+  };
+
+  return (
+    <div role="status" className="w-full shadow-sm px-4 md:px-6 bg-amber-400">
+      <div className="relative w-full rounded-none py-2 flex items-center justify-center px-10">
+        <p className="text-sm font-semibold leading-snug truncate text-amber-950">
+          Development / Staging (QAS) environment — not production
+        </p>
+
+        <div
+          role="button"
+          tabIndex={0}
+          onClick={handleDismiss}
+          onKeyDown={(e) => {
+            if (e.key !== "Enter" && e.key !== " ") return;
+            e.preventDefault();
+            handleDismiss();
+          }}
+          aria-label="Dismiss environment banner"
+          title="Dismiss"
+          className="absolute right-2 inline-flex items-center justify-center size-8 rounded-lg cursor-pointer hover:opacity-70 transition-opacity text-amber-950"
+        >
+          <X className="size-4" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/generic/FileZoomViewer.jsx b/apps/web/src/components/generic/FileZoomViewer.jsx
new file mode 100644
index 0000000..5748846
--- /dev/null
+++ b/apps/web/src/components/generic/FileZoomViewer.jsx
@@ -0,0 +1,306 @@
+/***********************************************************************************************************************************************************************
+ * File Name    : FileZoomViewer.jsx
+ * Type         : Component (Generic)
+ * Description  : Zoom/pan/fit viewer for image and PDF files. Used by both the
+ *                 client task-attachment preview (FilePreview.jsx, via blob:
+ *                 URLs) and the admin asset view pages (ViewImageAsset.jsx,
+ *                 ViewDocumentAsset.jsx, via direct stream-token URLs) —
+ *                 `src` accepts either, this component doesn't care how the
+ *                 URL was produced.
+ *
+ *                Supported:
+ *                  image/jpeg, image/png  → <img> with scroll-zoom + drag-pan
+ *                  application/pdf        → pdf.js renders the current page to
+ *                                            <canvas>, same zoom/pan controls,
+ *                                            with page navigation for multi-page PDFs
+ *
+ *                Not supported (shows a message instead of attempting render):
+ *                  DOCX, video, audio, and any other file type — video/audio
+ *                  assets use the existing admin VideoBlock/AudioBlock players
+ *                  instead (see Blocks/Admin/), not this viewer.
+ *
+ * Props:
+ *   src       {string}  – object URL or direct stream URL
+ *   mimeType  {string}
+ *   fileName  {string}
+ *   loading   {boolean} – true while the parent is still resolving the src
+ ***********************************************************************************************************************************************************************/
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { Spinner } from '@/components/ui/spinner';
+import {
+    ZoomIn, ZoomOut, Maximize2, ChevronLeft, ChevronRight, FileWarning,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const MIN_SCALE = 0.25;
+const MAX_SCALE = 4;
+const SCALE_STEP = 0.25;
+
+// ─── Resolve viewer mode from mime type / extension ───────────────────────────
+const resolveMode = (mimeType = '', fileName = '') => {
+    if (mimeType === 'image/jpeg' || mimeType === 'image/png') return 'image';
+    if (mimeType === 'application/pdf') return 'pdf';
+
+    const ext = (fileName.split('.').pop() ?? '').toLowerCase();
+    if (['jpg', 'jpeg', 'png'].includes(ext)) return 'image';
+    if (ext === 'pdf') return 'pdf';
+    return 'unsupported';
+};
+
+// ─── Not supported message ─────────────────────────────────────────────────────
+const UnsupportedMessage = ({ fileName }) => (
+    <div className="flex flex-col items-center gap-3 py-16 text-muted-foreground">
+        <FileWarning className="size-12" />
+        <p className="text-sm font-medium">Full preview not supported for this file type.</p>
+        <p className="text-xs max-w-xs text-center">
+            {fileName ? `"${fileName}" ` : 'This file '}
+            can't be opened in the zoom viewer. JPEG, PNG, and PDF files are supported.
+        </p>
+    </div>
+);
+
+// ─── Toolbar ──────────────────────────────────────────────────────────────────
+const ZoomToolbar = ({
+    scale, onZoomIn, onZoomOut, onFit,
+    page, numPages, onPrevPage, onNextPage,
+}) => (
+    <div className="flex items-center justify-between gap-2 px-3 py-2 border-b bg-muted/40">
+        <div className="flex items-center gap-1">
+            <Button variant="ghost" size="icon" className="size-8" onClick={onZoomOut} disabled={scale <= MIN_SCALE} aria-label="Zoom out">
+                <ZoomOut className="size-4" />
+            </Button>
+            <span className="text-xs w-12 text-center tabular-nums select-none">{Math.round(scale * 100)}%</span>
+            <Button variant="ghost" size="icon" className="size-8" onClick={onZoomIn} disabled={scale >= MAX_SCALE} aria-label="Zoom in">
+                <ZoomIn className="size-4" />
+            </Button>
+            <Button variant="ghost" onClick={onFit} aria-label="Fit to screen">
+                <Maximize2 className="size-4" /> Fit to screen
+            </Button>
+        </div>
+
+        {numPages > 1 && (
+            <div className="flex items-center gap-1">
+                <Button variant="ghost" size="icon" className="size-8" onClick={onPrevPage} disabled={page <= 1} aria-label="Previous page">
+                    <ChevronLeft className="size-4" />
+                </Button>
+                <span className="text-xs tabular-nums">{page} / {numPages}</span>
+                <Button variant="ghost" size="icon" className="size-8" onClick={onNextPage} disabled={page >= numPages} aria-label="Next page">
+                    <ChevronRight className="size-4" />
+                </Button>
+            </div>
+        )}
+    </div>
+);
+
+// ─── Shared zoom/pan canvas wrapper ─────────────────────────────────────────────
+// Wraps any child (img or canvas) with scroll-to-zoom + drag-to-pan behavior.
+const ZoomPanArea = ({ scale, setScale, offset, setOffset, fitFn, children }) => {
+    const containerRef = useRef(null);
+    const dragRef = useRef({ dragging: false, startX: 0, startY: 0, origX: 0, origY: 0 });
+
+    // ── Scroll to zoom (centered on cursor) ────────────────────────────────────
+    const onWheel = useCallback((e) => {
+        e.preventDefault();
+        const delta = e.deltaY > 0 ? -SCALE_STEP : SCALE_STEP;
+        setScale((s) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, +(s + delta).toFixed(2))));
+    }, [setScale]);
+
+    // ── Drag to pan ───────────────────────────────────────────────────────────
+    const onPointerDown = (e) => {
+        dragRef.current = {
+            dragging: true,
+            startX: e.clientX,
+            startY: e.clientY,
+            origX: offset.x,
+            origY: offset.y,
+        };
+        e.currentTarget.setPointerCapture(e.pointerId);
+    };
+    const onPointerMove = (e) => {
+        if (!dragRef.current.dragging) return;
+        const dx = e.clientX - dragRef.current.startX;
+        const dy = e.clientY - dragRef.current.startY;
+        setOffset({ x: dragRef.current.origX + dx, y: dragRef.current.origY + dy });
+    };
+    const onPointerUp = (e) => {
+        dragRef.current.dragging = false;
+        e.currentTarget.releasePointerCapture(e.pointerId);
+    };
+
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el) return;
+        el.addEventListener('wheel', onWheel, { passive: false });
+        return () => el.removeEventListener('wheel', onWheel);
+    }, [onWheel]);
+
+    return (
+        <div
+            ref={containerRef}
+            className={cn(
+                'relative overflow-hidden bg-muted h-[420px] flex items-center justify-center',
+                scale > 1 ? 'cursor-grab active:cursor-grabbing' : 'cursor-default'
+            )}
+            onPointerDown={onPointerDown}
+            onPointerMove={onPointerMove}
+            onPointerUp={onPointerUp}
+            onDoubleClick={fitFn}
+        >
+            <div
+                style={{
+                    transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
+                    transformOrigin: 'center center',
+                    transition: dragRef.current.dragging ? 'none' : 'transform 0.1s ease-out',
+                }}
+            >
+                {children}
+            </div>
+        </div>
+    );
+};
+
+// ─── Image viewer ───────────────────────────────────────────────────────────────
+const ImageViewer = ({ src, fileName }) => {
+    const [scale, setScale] = useState(1);
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+
+    const fit = () => { setScale(1); setOffset({ x: 0, y: 0 }); };
+
+    return (
+        <div className="flex flex-col">
+            <ZoomToolbar
+                scale={scale}
+                onZoomIn={() => setScale((s) => Math.min(MAX_SCALE, +(s + SCALE_STEP).toFixed(2)))}
+                onZoomOut={() => setScale((s) => Math.max(MIN_SCALE, +(s - SCALE_STEP).toFixed(2)))}
+                onFit={fit}
+                page={1}
+                numPages={1}
+                onPrevPage={() => {}}
+                onNextPage={() => {}}
+            />
+            <ZoomPanArea scale={scale} setScale={setScale} offset={offset} setOffset={setOffset} fitFn={fit}>
+                <img
+                    src={src}
+                    alt={fileName}
+                    draggable={false}
+                    onContextMenu={(e) => e.preventDefault()}
+                    className="max-h-[380px] max-w-none select-none pointer-events-none"
+                />
+            </ZoomPanArea>
+        </div>
+    );
+};
+
+// ─── PDF viewer (pdf.js → canvas) ───────────────────────────────────────────────
+const PdfViewer = ({ src, fileName }) => {
+    const [scale, setScale] = useState(1);
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const [pdfDoc, setPdfDoc] = useState(null);
+    const [page, setPage] = useState(1);
+    const [numPages, setNumPages] = useState(1);
+    const [rendering, setRendering] = useState(true);
+    const [loadError, setLoadError] = useState(false);
+    const canvasRef = useRef(null);
+
+    const fit = () => { setScale(1); setOffset({ x: 0, y: 0 }); };
+
+    // ── Load the PDF document ──────────────────────────────────────────────────
+    useEffect(() => {
+        let cancelled = false;
+
+        (async () => {
+            try {
+                const pdfjsLib = await import('pdfjs-dist');
+                pdfjsLib.GlobalWorkerOptions.workerSrc =
+                    new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
+                const doc = await pdfjsLib.getDocument({ url: src }).promise;
+                if (cancelled) return;
+                setPdfDoc(doc);
+                setNumPages(doc.numPages);
+            } catch (err) {
+                if (!cancelled) setLoadError(true);
+            }
+        })();
+
+        return () => { cancelled = true; };
+    }, [src]);
+
+    // ── Render current page to canvas ──────────────────────────────────────────
+    useEffect(() => {
+        if (!pdfDoc) return;
+        let cancelled = false;
+
+        (async () => {
+            setRendering(true);
+            try {
+                const pdfPage = await pdfDoc.getPage(page);
+                const viewport = pdfPage.getViewport({ scale: 1.5 }); // base render scale for crispness
+
+                const canvas = canvasRef.current;
+                if (!canvas || cancelled) return;
+                canvas.width = viewport.width;
+                canvas.height = viewport.height;
+
+                const ctx = canvas.getContext('2d');
+                await pdfPage.render({ canvasContext: ctx, viewport }).promise;
+            } catch {
+                if (!cancelled) setLoadError(true);
+            } finally {
+                if (!cancelled) setRendering(false);
+            }
+        })();
+
+        return () => { cancelled = true; };
+    }, [pdfDoc, page]);
+
+    if (loadError) return <UnsupportedMessage fileName={fileName} />;
+
+    return (
+        <div className="flex flex-col">
+            <ZoomToolbar
+                scale={scale}
+                onZoomIn={() => setScale((s) => Math.min(MAX_SCALE, +(s + SCALE_STEP).toFixed(2)))}
+                onZoomOut={() => setScale((s) => Math.max(MIN_SCALE, +(s - SCALE_STEP).toFixed(2)))}
+                onFit={fit}
+                page={page}
+                numPages={numPages}
+                onPrevPage={() => { setPage((p) => Math.max(1, p - 1)); fit(); }}
+                onNextPage={() => { setPage((p) => Math.min(numPages, p + 1)); fit(); }}
+            />
+            <ZoomPanArea scale={scale} setScale={setScale} offset={offset} setOffset={setOffset} fitFn={fit}>
+                <canvas ref={canvasRef} className="max-h-[380px] select-none" />
+            </ZoomPanArea>
+            {rendering && (
+                <div className="absolute inset-0 flex items-center justify-center bg-background/50">
+                    <Spinner className="size-6" />
+                </div>
+            )}
+        </div>
+    );
+};
+
+// ─── Main viewer ────────────────────────────────────────────────────────────────
+const FileZoomViewer = ({ src, mimeType, fileName, loading }) => {
+    const mode = resolveMode(mimeType, fileName);
+
+    if (loading) {
+        return (
+            <div className="flex items-center justify-center h-[420px]">
+                <Spinner className="size-6" />
+            </div>
+        );
+    }
+
+    if (!src || mode === 'unsupported') {
+        return <UnsupportedMessage fileName={fileName} />;
+    }
+
+    if (mode === 'image') return <ImageViewer src={src} fileName={fileName} />;
+    if (mode === 'pdf')   return <PdfViewer src={src} fileName={fileName} />;
+
+    return <UnsupportedMessage fileName={fileName} />;
+};
+
+export default FileZoomViewer;
diff --git a/apps/web/src/components/generic/GroupMultiSelect.jsx b/apps/web/src/components/generic/GroupMultiSelect.jsx
new file mode 100644
index 0000000..850fd23
--- /dev/null
+++ b/apps/web/src/components/generic/GroupMultiSelect.jsx
@@ -0,0 +1,311 @@
+/***********************************************************************************************************************************************************************
+ * File Name    : GroupMultiSelect.jsx
+ * Type         : Reusable Component
+ * Description  : Searchable multi-select dropdown for User Groups.
+ *                - Portal-based dropdown (escapes Card overflow clipping)
+ *                - First badge + "+N" overflow chip when 2+ selected
+ *                - "Select all" and "Clear" actions in dropdown header
+ *
+ * Props:
+ *   value       : number[]                    — selected group_ids
+ *   onChange    : (ids: number[]) => void
+ *   groups?     : { group_id, name }[]        — skip API fetch if provided
+ *   disabled?   : boolean
+ *   placeholder?: string
+ ***********************************************************************************************************************************************************************/
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import api from '@/utils/api.util';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+import { Check, ChevronsUpDown, X, Users, ChevronLeft, ChevronRight } from 'lucide-react';
+
+const PAGE_SIZE = 5;
+
+export default function GroupMultiSelect({
+    value = [],
+    onChange,
+    groups: groupsProp = null,
+    disabled = false,
+    placeholder = 'Select groups…',
+}) {
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState('');
+    const [page, setPage] = useState(1);
+    const [allGroups, setAllGroups] = useState(groupsProp ?? []);
+    const [loadingGroups, setLoadingGroups] = useState(!groupsProp);
+    const [dropdownStyle, setDropdownStyle] = useState({});
+
+    const triggerRef  = useRef(null);
+    const dropdownRef = useRef(null);
+
+    // ── Fetch groups if not provided by parent ────────────────────────────────
+    useEffect(() => {
+        if (groupsProp !== null) {
+            setAllGroups(groupsProp);
+            setLoadingGroups(false);
+            return;
+        }
+        let cancelled = false;
+        setLoadingGroups(true);
+        api.get('/admin/groups', { params: { limit: 500 } })
+            .then((res) => {
+                if (!cancelled) {
+                    const raw = res.data?.data?.data ?? res.data?.data ?? [];
+                    setAllGroups(Array.isArray(raw) ? raw : []);
+                }
+            })
+            .catch(() => { if (!cancelled) setAllGroups([]); })
+            .finally(() => { if (!cancelled) setLoadingGroups(false); });
+        return () => { cancelled = true; };
+    }, [groupsProp]);
+
+    // ── Position portal dropdown under trigger ────────────────────────────────
+    useLayoutEffect(() => {
+        if (!open || !triggerRef.current) return;
+
+        const reposition = () => {
+            const rect = triggerRef.current.getBoundingClientRect();
+            setDropdownStyle({
+                position: 'fixed',
+                top:   rect.bottom + 4,
+                left:  rect.left,
+                width: rect.width,
+                zIndex: 9999,
+            });
+        };
+
+        reposition();
+        window.addEventListener('scroll', reposition, true);
+        window.addEventListener('resize', reposition);
+        return () => {
+            window.removeEventListener('scroll', reposition, true);
+            window.removeEventListener('resize', reposition);
+        };
+    }, [open]);
+
+    // ── Close on outside click ────────────────────────────────────────────────
+    useEffect(() => {
+        if (!open) return;
+        const handler = (e) => {
+            if (
+                triggerRef.current?.contains(e.target) ||
+                dropdownRef.current?.contains(e.target)
+            ) return;
+            setOpen(false);
+            setSearch('');
+        };
+        document.addEventListener('mousedown', handler);
+        return () => document.removeEventListener('mousedown', handler);
+    }, [open]);
+
+    // ── Helpers ───────────────────────────────────────────────────────────────
+    const filtered = allGroups.filter((g) =>
+        g.name.toLowerCase().includes(search.toLowerCase())
+    );
+    const selectedGroups = allGroups.filter((g) => value.includes(g.group_id));
+    const overflowCount  = selectedGroups.length - 1;
+
+    // All currently visible (filtered) IDs — used for select-all scope
+    const filteredIds    = filtered.map((g) => g.group_id);
+    const allFilteredSelected = filteredIds.length > 0 && filteredIds.every((id) => value.includes(id));
+
+    // ── Pagination ────────────────────────────────────────────────────────────
+    const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+    const safePage    = Math.min(page, totalPages);
+    const paginated   = filtered.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE);
+
+    // Reset to page 1 whenever the search term changes
+    const handleSearchChange = (e) => {
+        setSearch(e.target.value);
+        setPage(1);
+    };
+
+    const toggle = (groupId) =>
+        onChange(value.includes(groupId)
+            ? value.filter((id) => id !== groupId)
+            : [...value, groupId]
+        );
+
+    const remove = (e, groupId) => {
+        e.stopPropagation();
+        onChange(value.filter((id) => id !== groupId));
+    };
+
+    // Select all visible (filtered) groups
+    const handleSelectAll = () => {
+        const merged = Array.from(new Set([...value, ...filteredIds]));
+        onChange(merged);
+    };
+
+    // Clear all selections
+    const handleClear = () => onChange([]);
+
+    // ── Portal dropdown ───────────────────────────────────────────────────────
+    const dropdown = open && createPortal(
+        <div
+            ref={dropdownRef}
+            style={dropdownStyle}
+            className="rounded-md border border-border bg-popover shadow-lg"
+        >
+            {/* Search row */}
+            <div className="p-2 border-b border-border">
+                <Input
+                    autoFocus
+                    value={search}
+                    onChange={handleSearchChange}
+                    placeholder="Search groups…"
+                    className="h-8 text-sm"
+                />
+            </div>
+
+            {/* Select all / Clear row — only when groups are loaded */}
+            {!loadingGroups && allGroups.length > 0 && (
+                <div className="flex items-center justify-between px-3 py-1.5 border-b border-border bg-muted/40">
+                    <button
+                        type="button"
+                        onMouseDown={(e) => e.preventDefault()}
+                        onClick={allFilteredSelected ? handleClear : handleSelectAll}
+                        className="text-xs text-primary hover:underline underline-offset-2 font-medium"
+                    >
+                        {allFilteredSelected ? 'Deselect all' : 'Select all'}
+                        {search && ` (${filteredIds.length})`}
+                    </button>
+                    {value.length > 0 && (
+                        <button
+                            type="button"
+                            onMouseDown={(e) => e.preventDefault()}
+                            onClick={handleClear}
+                            className="text-xs text-muted-foreground hover:text-destructive transition-colors"
+                        >
+                            Clear ({value.length})
+                        </button>
+                    )}
+                </div>
+            )}
+
+            {/* Options */}
+            <ul className="py-1">
+                {loadingGroups ? (
+                    <li className="px-3 py-6 text-center text-xs text-muted-foreground">
+                        Loading groups…
+                    </li>
+                ) : filtered.length === 0 ? (
+                    <li className="px-3 py-6 text-center text-xs text-muted-foreground">
+                        No groups found.
+                    </li>
+                ) : (
+                    paginated.map((g) => {
+                        const selected = value.includes(g.group_id);
+                        return (
+                            <li
+                                key={g.group_id}
+                                onMouseDown={(e) => e.preventDefault()}
+                                onClick={() => toggle(g.group_id)}
+                                className={cn(
+                                    'flex items-center gap-2 px-3 py-2 text-sm cursor-pointer select-none',
+                                    'hover:bg-accent hover:text-accent-foreground',
+                                    selected && 'bg-accent/50'
+                                )}
+                            >
+                                <div className={cn(
+                                    'h-4 w-4 rounded border flex items-center justify-center shrink-0',
+                                    selected
+                                        ? 'bg-primary border-primary text-primary-foreground'
+                                        : 'border-input'
+                                )}>
+                                    {selected && <Check className="h-3 w-3" />}
+                                </div>
+                                <Users className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                <span className="truncate">{g.name}</span>
+                            </li>
+                        );
+                    })
+                )}
+            </ul>
+
+            {/* Pagination */}
+            {!loadingGroups && filtered.length > PAGE_SIZE && (
+                <div className="flex items-center justify-between px-3 py-1.5 border-t border-border bg-muted/40">
+                    <button
+                        type="button"
+                        onMouseDown={(e) => e.preventDefault()}
+                        onClick={() => setPage((p) => Math.max(1, p - 1))}
+                        disabled={safePage <= 1}
+                        className="flex items-center gap-0.5 text-xs text-muted-foreground hover:text-foreground disabled:opacity-40 disabled:pointer-events-none"
+                    >
+                        <ChevronLeft className="h-3.5 w-3.5" />
+                        Prev
+                    </button>
+                    <span className="text-xs text-muted-foreground tabular-nums">
+                        {safePage} / {totalPages}
+                    </span>
+                    <button
+                        type="button"
+                        onMouseDown={(e) => e.preventDefault()}
+                        onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                        disabled={safePage >= totalPages}
+                        className="flex items-center gap-0.5 text-xs text-muted-foreground hover:text-foreground disabled:opacity-40 disabled:pointer-events-none"
+                    >
+                        Next
+                        <ChevronRight className="h-3.5 w-3.5" />
+                    </button>
+                </div>
+            )}
+        </div>,
+        document.body
+    );
+
+    return (
+        <>
+            {/* ── Trigger button ───────────────────────────────────────────── */}
+            <button
+                ref={triggerRef}
+                type="button"
+                disabled={disabled}
+                onClick={() => { setOpen((o) => !o); setSearch(''); setPage(1); }}
+                className={cn(
+                    'w-full min-h-9 px-3 py-1.5 rounded-md border border-input bg-background text-sm',
+                    'flex items-center gap-1.5 text-left',
+                    'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1',
+                    'disabled:opacity-50 disabled:cursor-not-allowed',
+                    open && 'ring-2 ring-ring ring-offset-1'
+                )}
+            >
+                {selectedGroups.length === 0 ? (
+                    <span className="text-muted-foreground flex-1">{placeholder}</span>
+                ) : (
+                    <span className="flex items-center gap-1 flex-1 min-w-0">
+                        {/* Always show only the first selected group */}
+                        <Badge variant="secondary" className="gap-1 text-xs pr-1 shrink-0">
+                            <Users className="h-3 w-3" />
+                            {selectedGroups[0].name}
+                            <span
+                                role="button"
+                                tabIndex={0}
+                                onClick={(e) => remove(e, selectedGroups[0].group_id)}
+                                onKeyDown={(e) => e.key === 'Enter' && remove(e, selectedGroups[0].group_id)}
+                                className="ml-0.5 rounded-full hover:bg-muted-foreground/20 p-0.5 cursor-pointer"
+                            >
+                                <X className="h-2.5 w-2.5" />
+                            </span>
+                        </Badge>
+
+                        {/* +N overflow chip */}
+                        {overflowCount > 0 && (
+                            <Badge variant="outline" className="text-xs px-1.5 shrink-0">
+                                +{overflowCount}
+                            </Badge>
+                        )}
+                    </span>
+                )}
+                <ChevronsUpDown className="h-3.5 w-3.5 text-muted-foreground shrink-0 ml-auto" />
+            </button>
+
+            {/* ── Portalled dropdown ────────────────────────────────────────── */}
+            {dropdown}
+        </>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/MediaFallback.jsx b/apps/web/src/components/generic/MediaFallback.jsx
new file mode 100644
index 0000000..3486405
--- /dev/null
+++ b/apps/web/src/components/generic/MediaFallback.jsx
@@ -0,0 +1,20 @@
+// components/generic/MediaFallback.jsx
+//
+// Mandatory fallback shown wherever a media element (video/audio/image) is
+// still resolving its source — replaces ad-hoc spinners so every player has
+// the same loading state.
+
+export function MediaFallback({ className = "" }) {
+    return (
+        <div
+            className={`flex items-center justify-center overflow-hidden ${className}`}
+            style={{ background: "#FBF7F0" }}
+        >
+            <img
+                src="/media-fallback-patient-tv.svg"
+                alt="Media is loading"
+                className="w-full h-full object-contain"
+            />
+        </div>
+    );
+}
diff --git a/apps/web/src/components/generic/NotificationBell.jsx b/apps/web/src/components/generic/NotificationBell.jsx
new file mode 100644
index 0000000..112ed8e
--- /dev/null
+++ b/apps/web/src/components/generic/NotificationBell.jsx
@@ -0,0 +1,147 @@
+import { useState } from "react";
+import { Bell, AlertCircle, UserPlus, Megaphone } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { useAdminNotifications } from "@/contexts/AdminNotificationContext";
+import { cn } from "@/lib/utils";
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+const TYPE_ICON = {
+    task_overdue:      AlertCircle,
+    user_registration: UserPlus,
+    announcement:      Megaphone,
+};
+
+function NotificationIcon({ type, className }) {
+    const Icon = TYPE_ICON[type] ?? Bell;
+    return <Icon className={cn("shrink-0", className)} />;
+}
+
+function timeAgo(dateStr) {
+    const diff = Date.now() - new Date(dateStr).getTime();
+    const m = Math.floor(diff / 60_000);
+    if (m < 1)  return "just now";
+    if (m < 60) return `${m}m ago`;
+    const h = Math.floor(m / 60);
+    if (h < 24) return `${h}h ago`;
+    return `${Math.floor(h / 24)}d ago`;
+}
+
+export default function NotificationBell() {
+    const { notifications, unseenCount, loading, fetchNotifications, markSeen, markAllSeen } =
+        useAdminNotifications();
+    const { fmtDateTime } = useDateFormat();
+
+    const [selected, setSelected] = useState(null);
+
+    function handleOpen(open) {
+        if (open) fetchNotifications();
+    }
+
+    function handleClickNotification(n) {
+        if (!n.seen) markSeen(n.notification_id);
+        setSelected(n);
+    }
+
+    return (
+        <>
+            <Popover onOpenChange={handleOpen}>
+                <PopoverTrigger asChild>
+                    <Button variant="outline" size="icon" className="relative">
+                        <Bell className="h-5 w-5" />
+                        {unseenCount > 0 && (
+                            <span className="absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white leading-none">
+                                {unseenCount > 99 ? "99+" : unseenCount}
+                            </span>
+                        )}
+                    </Button>
+                </PopoverTrigger>
+
+                <PopoverContent align="end" className="w-80 p-0">
+                    <div className="flex items-center justify-between px-4 py-3">
+                        <span className="text-sm font-semibold">Notifications</span>
+                        {unseenCount > 0 && (
+                            <button
+                                onClick={markAllSeen}
+                                className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                            >
+                                Mark all as read
+                            </button>
+                        )}
+                    </div>
+
+                    <Separator />
+
+                    <ScrollArea className="h-80">
+                        {loading && notifications.length === 0 ? (
+                            <p className="py-8 text-center text-xs text-muted-foreground">Loading...</p>
+                        ) : notifications.length === 0 ? (
+                            <p className="py-8 text-center text-xs text-muted-foreground">No notifications yet.</p>
+                        ) : (
+                            <ul>
+                                {notifications.map((n, i) => (
+                                    <li key={n.notification_id}>
+                                        <button
+                                            onClick={() => handleClickNotification(n)}
+                                            className={cn(
+                                                "w-full text-left px-4 py-3 hover:bg-muted/50 transition-colors",
+                                                !n.seen && "bg-blue-50 dark:bg-blue-950/20"
+                                            )}
+                                        >
+                                            <div className="flex items-start gap-3">
+                                                <div className="mt-0.5">
+                                                    <NotificationIcon type={n.type} className="h-4 w-4 text-muted-foreground" />
+                                                </div>
+                                                <div className="flex-1 min-w-0">
+                                                    <div className="flex items-center gap-1.5">
+                                                        {!n.seen && (
+                                                            <span className="h-2 w-2 shrink-0 rounded-full bg-blue-500" />
+                                                        )}
+                                                        <p className="text-xs font-medium truncate">{n.title}</p>
+                                                    </div>
+                                                    <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">{n.message}</p>
+                                                    <p className="text-[10px] text-muted-foreground mt-1">{timeAgo(n.createdAt)}</p>
+                                                </div>
+                                            </div>
+                                        </button>
+                                        {i < notifications.length - 1 && <Separator />}
+                                    </li>
+                                ))}
+                            </ul>
+                        )}
+                    </ScrollArea>
+                </PopoverContent>
+            </Popover>
+
+            {/* Detail dialog — outside Popover so it isn't clipped */}
+            <Dialog open={!!selected} onOpenChange={(open) => !open && setSelected(null)}>
+                <DialogContent className="sm:max-w-lg">
+                    <DialogHeader>
+                        <div className="flex items-center gap-3 mb-1">
+                            <div className="flex h-9 w-9 items-center justify-center rounded-full bg-muted">
+                                <NotificationIcon
+                                    type={selected?.type}
+                                    className="h-5 w-5 text-foreground"
+                                />
+                            </div>
+                            <DialogTitle className="leading-snug">{selected?.title}</DialogTitle>
+                        </div>
+                        <DialogDescription className="text-sm text-foreground/80 leading-relaxed">
+                            {selected?.message}
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    <Separator />
+
+                    <div className="flex items-center justify-between text-xs text-muted-foreground">
+                        <span className="capitalize">{selected?.type?.replace(/_/g, ' ')}</span>
+                        <span>{selected ? fmtDateTime(selected.createdAt) : ""}</span>
+                    </div>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+}
diff --git a/apps/web/src/components/generic/NotificationDetailDialog.jsx b/apps/web/src/components/generic/NotificationDetailDialog.jsx
new file mode 100644
index 0000000..e21d73f
--- /dev/null
+++ b/apps/web/src/components/generic/NotificationDetailDialog.jsx
@@ -0,0 +1,101 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Copy, Check, ArrowRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Separator } from "@/components/ui/separator";
+import { Spinner } from "@/components/ui/spinner";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { NotificationIcon, getTypeAccent, getTypeButtonClasses, resolveNotificationLink } from "@/components/generic/notificationDisplay";
+
+export default function NotificationDetailDialog({ notification, onOpenChange }) {
+    const { fmtDateTime } = useDateFormat();
+    const navigate = useNavigate();
+    const [copiedCode, setCopiedCode] = useState(false);
+    const [navigating, setNavigating] = useState(false);
+
+    async function handleCopyCode(code) {
+        await navigator.clipboard.writeText(code);
+        setCopiedCode(true);
+        setTimeout(() => setCopiedCode(false), 2000);
+    }
+
+    const link = notification ? resolveNotificationLink(notification.type, notification.data) : null;
+
+    async function handleGo() {
+        if (!link) return;
+        setNavigating(true);
+        await link.go(navigate);
+        setNavigating(false);
+        onOpenChange(false);
+    }
+
+    return (
+        <Dialog open={!!notification} onOpenChange={(open) => { if (!open) { onOpenChange(false); setCopiedCode(false); } }}>
+            <DialogContent className="sm:max-w-lg">
+                <DialogHeader>
+                    <div className="flex items-center gap-3 mb-1">
+                        <div className={`flex h-9 w-9 items-center justify-center rounded-full ${getTypeAccent(notification?.type)}`}>
+                            <NotificationIcon
+                                type={notification?.type}
+                                className="h-5 w-5"
+                            />
+                        </div>
+                        <DialogTitle className="leading-snug">{notification?.title}</DialogTitle>
+                    </div>
+                    <DialogDescription className="text-sm text-foreground/80 leading-relaxed">
+                        {notification?.message}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <Separator />
+
+                {notification?.data?.groupCode && (
+                    <>
+                        <div className="flex flex-col gap-1.5">
+                            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                                Group Code
+                            </p>
+                            <div className="flex items-center gap-2">
+                                <span className="flex-1 font-mono text-sm bg-muted rounded-lg px-3 py-2 truncate">
+                                    {notification.data.groupCode}
+                                </span>
+                                <Button
+                                    size="sm"
+                                    variant="outline"
+                                    className="shrink-0 gap-1.5"
+                                    onClick={() => handleCopyCode(notification.data.groupCode)}
+                                >
+                                    {copiedCode
+                                        ? <><Check className="size-3.5" /> Copied</>
+                                        : <><Copy className="size-3.5" /> Copy</>
+                                    }
+                                </Button>
+                            </div>
+                            <p className="text-[11px] text-muted-foreground">
+                                Share this code with others so they can join your group.
+                            </p>
+                        </div>
+                        <Separator />
+                    </>
+                )}
+
+                {link && (
+                    <Button
+                        variant="outline"
+                        className={`w-full gap-1.5 ${getTypeButtonClasses(notification?.type)}`}
+                        onClick={handleGo}
+                        disabled={navigating}
+                    >
+                        {navigating ? <Spinner className="size-4" /> : <>{link.label} <ArrowRight className="size-3.5" /></>}
+                    </Button>
+                )}
+
+                <div className="flex items-center justify-between text-xs text-muted-foreground">
+                    <span className="capitalize">{notification?.type?.replace("_", " ")}</span>
+                    <span>{notification ? fmtDateTime(notification.createdAt) : ""}</span>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/apps/web/src/components/generic/OverflowBadges.jsx b/apps/web/src/components/generic/OverflowBadges.jsx
new file mode 100644
index 0000000..09ac184
--- /dev/null
+++ b/apps/web/src/components/generic/OverflowBadges.jsx
@@ -0,0 +1,124 @@
+/***********************************************************************************************************************************************************************
+ * File Name: OverflowBadges.jsx
+ * Type of Program: Generic Component
+ * Description: Renders up to `max` badges inline. Remaining items collapse into a
+ *              "+N" overflow button that opens a dialog listing all items.
+ *
+ * HOW TO USE:
+ *   <OverflowBadges
+ *     items={groups}                        // array of objects (or primitives)
+ *     labelKey="group_code"                 // key used for the badge label
+ *     dialogTitleKey="name"                 // key used for the left side in the dialog row (optional)
+ *     keyKey="group_id"                     // key used as React key
+ *     dialogTitle="All groups"              // dialog heading (optional)
+ *     max={2}                               // how many badges to show before collapsing (default: 2)
+ *     badgeVariant="outline"                // shadcn Badge variant (default: "outline")
+ *     badgeClassName="font-mono text-xs"    // extra classes on each badge (optional)
+ *   />
+ *
+ *   // Primitive arrays (no keys needed):
+ *   <OverflowBadges items={["SALES-A1", "HR-B2", "IT-C3"]} max={2} />
+ ***********************************************************************************************************************************************************************/
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+/**
+ * @param {object}   props
+ * @param {Array}    props.items            Array of objects or primitives to render.
+ * @param {string}   [props.labelKey]       Key on each item to use as the badge label. Omit for primitive arrays.
+ * @param {string}   [props.dialogTitleKey] Key on each item to show as the row title in the dialog. Falls back to labelKey.
+ * @param {string}   [props.keyKey]         Key on each item to use as the React key. Falls back to index.
+ * @param {string}   [props.dialogTitle]    Heading shown in the overflow dialog. Default: "All items".
+ * @param {number}   [props.max]            Max badges shown inline before collapsing. Default: 2.
+ * @param {string}   [props.badgeVariant]   shadcn Badge variant. Default: "outline".
+ * @param {string}   [props.badgeClassName] Extra className on each Badge.
+ * @param {string}   [props.emptyText]      Text shown when items is empty. Default: "—".
+ */
+export function OverflowBadges({
+  items = [],
+  labelKey,
+  dialogTitleKey,
+  keyKey,
+  dialogTitle = "All items",
+  max = 1,
+  badgeVariant = "outline",
+  badgeClassName = "text-xs",
+  emptyText = "—",
+}) {
+  const [open, setOpen] = useState(false);
+
+  if (!items.length)
+    return <span className="text-muted-foreground text-xs">{emptyText}</span>;
+
+  const getLabel = (item) =>
+    labelKey ? item[labelKey] : String(item);
+
+  const getTitle = (item) =>
+    dialogTitleKey ? item[dialogTitleKey] : labelKey ? item[labelKey] : String(item);
+
+  const getKey = (item, i) =>
+    keyKey ? item[keyKey] : i;
+
+  const visible  = items.slice(0, max);
+  const overflow = items.slice(max);
+
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-1">
+        {visible.map((item, i) => (
+          <Badge
+            key={getKey(item, i)}
+            variant={badgeVariant}
+            className={badgeClassName}
+          >
+            {getLabel(item)}
+          </Badge>
+        ))}
+
+        {overflow.length > 0 && (
+          <button
+            onClick={(e) => { e.stopPropagation(); setOpen(true); }}
+            className="inline-flex items-center justify-center h-5 px-1.5 rounded-md border border-dashed text-xs text-muted-foreground hover:text-foreground hover:border-foreground transition-colors"
+          >
+            +{overflow.length}
+          </button>
+        )}
+      </div>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:max-w-[360px]">
+          <DialogHeader>
+            <DialogTitle>{dialogTitle}</DialogTitle>
+          </DialogHeader>
+          <div className="flex flex-col gap-2 pt-1">
+            {items.map((item, i) => {
+              const label = getLabel(item);
+              const title = getTitle(item);
+              const isSame = label === title;
+
+              return (
+                <div
+                  key={getKey(item, i)}
+                  className="flex items-center justify-between rounded-lg border px-3 py-2"
+                >
+                  <span className="text-sm font-medium">{title}</span>
+                  {!isSame && (
+                    <Badge variant={badgeVariant} className={badgeClassName}>
+                      {label}
+                    </Badge>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/PlacementSkeleton.jsx b/apps/web/src/components/generic/PlacementSkeleton.jsx
new file mode 100644
index 0000000..e9fc85c
--- /dev/null
+++ b/apps/web/src/components/generic/PlacementSkeleton.jsx
@@ -0,0 +1,142 @@
+// components/generic/PlacementSkeleton.jsx
+
+import { cn } from "@/lib/utils";
+import { PLACEMENT_LAYOUTS } from "@/data/placementLayouts.data";
+
+// ── Block renderers ────────────────────────────────────────────────────────
+
+const BAR_HEIGHT = {
+    sm: "h-4",
+    md: "h-8",
+    lg: "h-14",
+    xl: "h-16",
+};
+
+function HighlightTag({ label }) {
+    return (
+        <span className="absolute inset-0 flex items-center justify-center text-[10px] font-medium text-primary text-center px-1 leading-tight">
+            {label}
+        </span>
+    );
+}
+
+function Nav() {
+    return (
+        <div className="h-5 rounded bg-muted border flex items-center gap-1 px-2 shrink-0">
+            <span className="size-1.5 rounded-full bg-muted-foreground/30" />
+            <span className="size-1.5 rounded-full bg-muted-foreground/30" />
+        </div>
+    );
+}
+
+function Bar({ size = "md", highlight, label }) {
+    return (
+        <div
+            className={cn(
+                "relative rounded border shrink-0",
+                BAR_HEIGHT[size] ?? BAR_HEIGHT.md,
+                highlight ? "bg-primary/15 border-2 border-primary" : "bg-muted border-border"
+            )}
+        >
+            {highlight && label && <HighlightTag label={label} />}
+        </div>
+    );
+}
+
+function Filters() {
+    return (
+        <div className="flex gap-1.5 shrink-0">
+            {[1, 2, 3].map((i) => (
+                <span key={i} className="h-3 w-8 rounded-full bg-muted border" />
+            ))}
+        </div>
+    );
+}
+
+function Grid({ label }) {
+    return (
+        <div className="flex flex-col gap-1 shrink-0">
+            <div className="flex gap-1.5">
+                {[1, 2, 3, 4].map((i) => (
+                    <span key={i} className="h-6 flex-1 rounded bg-muted border" />
+                ))}
+            </div>
+            {label && <span className="text-[9px] text-muted-foreground text-center">{label}</span>}
+        </div>
+    );
+}
+
+function ListBlock({ label }) {
+    return (
+        <div className="flex flex-col gap-1 shrink-0">
+            {[1, 2].map((i) => (
+                <span key={i} className="h-3 rounded bg-muted border" />
+            ))}
+            {label && <span className="text-[9px] text-muted-foreground text-center">{label}</span>}
+        </div>
+    );
+}
+
+function Row({ columns = [] }) {
+    return (
+        <div className="flex gap-2 shrink-0 flex-1">
+            {columns.map((col, i) => (
+                <div key={i} className={cn("relative rounded border h-16", col.width ?? "flex-1", col.highlight ? "bg-primary/15 border-2 border-primary" : "bg-muted border-border")}>
+                    {col.highlight ? (
+                        <HighlightTag label={col.label} />
+                    ) : (
+                        col.label && (
+                            <span className="absolute inset-0 flex items-center justify-center text-[9px] text-muted-foreground text-center px-1">
+                                {col.label}
+                            </span>
+                        )
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+}
+
+function Block({ block }) {
+    switch (block.kind) {
+        case "nav":     return <Nav />;
+        case "bar":     return <Bar size={block.size} highlight={block.highlight} label={block.label} />;
+        case "filters": return <Filters />;
+        case "grid":    return <Grid label={block.label} />;
+        case "list":    return <ListBlock label={block.label} />;
+        case "row":     return <Row columns={block.columns} />;
+        default:        return null;
+    }
+}
+
+// ── PlacementSkeleton ───────────────────────────────────────────────────────
+/**
+ * Lightweight wireframe preview of where an advertisement placement lands on
+ * its page. Purely a visual aid for the admin creation wizard — not a real
+ * screenshot, so it never goes stale when the real page's styling changes.
+ *
+ * Props:
+ *   placement — a placement registry key, e.g. "dashboard.hero"
+ */
+export function PlacementSkeleton({ placement }) {
+    const layout = PLACEMENT_LAYOUTS[placement];
+    if (!layout) return null;
+
+    return (
+        <div className="relative w-full aspect-video rounded-lg border bg-card p-3 overflow-hidden">
+            <div className={cn("h-full flex flex-col gap-2", layout.overlay && "opacity-40")}>
+                {layout.blocks.map((block, i) => (
+                    <Block key={i} block={block} />
+                ))}
+            </div>
+
+            {layout.overlay && (
+                <div className="absolute inset-0 flex items-center justify-center">
+                    <div className="relative w-1/2 h-1/3 rounded-lg bg-primary/15 border-2 border-primary shadow-sm">
+                        <HighlightTag label={layout.overlay.label} />
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/apps/web/src/components/generic/Profile.jsx b/apps/web/src/components/generic/Profile.jsx
new file mode 100644
index 0000000..2d3df4d
--- /dev/null
+++ b/apps/web/src/components/generic/Profile.jsx
@@ -0,0 +1,537 @@
+import { useAuth } from '@/contexts/AuthContext'
+import { useProfile } from '@/contexts/ProfileProvider'
+import { useState, useEffect } from 'react'
+import { Camera, Loader2, Phone, MapPin, Shield, Trophy, Activity, Plus, Trash2, Pencil, Home, Building2, Edit2, Check, X } from 'lucide-react'
+import AvatarUploadDialog from '@/components/generic/AvatarUploadDialog'
+import { resolveAssetSrc } from '@/utils/media.util'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Separator } from '@/components/ui/separator'
+import { Badge } from '@/components/ui/badge'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose } from '@/components/ui/dialog'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@/components/ui/alert-dialog'
+import { useForm, Controller } from 'react-hook-form'
+import { z } from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+
+import { ROLE_CONFIG, AVATAR_COLORS } from '@/data/profile.data'
+
+// ─── Schemas ──────────────────────────────────────────────────────────────────
+const addressSchema = z.object({
+    address_type: z.string().min(1, 'Required'),
+    street: z.string().min(1, 'Required'),
+    city: z.string().min(1, 'Required'),
+    state: z.string().min(1, 'Required'),
+    zip: z.string().min(1, 'Required'),
+    country: z.string().min(1, 'Required'),
+})
+
+const phoneSchema = z.object({
+    phone_type: z.string().min(1, 'Required'),
+    country_code: z.string().min(1, 'Required'),
+    number: z.string().min(7, 'Required'),
+})
+
+// ─── Address Dialog ───────────────────────────────────────────────────────────
+function AddressDialog({ open, onClose, initial, onSave }) {
+    const { register, handleSubmit, control, formState: { errors } } = useForm({
+        resolver: zodResolver(addressSchema),
+        defaultValues: initial ?? {
+            address_type: 'home', street: '', city: '',
+            state: '', zip: '', country: 'Philippines',
+        },
+    })
+
+    const onSubmit = (data) => {
+        onSave({ ...data, full_address: `${data.street}, ${data.city}, ${data.state}, ${data.country}, ${data.zip}` })
+        onClose()
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onClose}>
+            <DialogContent className="sm:max-w-md">
+                <DialogHeader>
+                    <DialogTitle>{initial ? 'Edit address' : 'Add address'}</DialogTitle>
+                </DialogHeader>
+                <form onSubmit={handleSubmit(onSubmit)} className="space-y-3 py-1">
+
+                    <div className="space-y-1.5">
+                        <Label>Address type</Label>
+                        <Controller name="address_type" control={control} render={({ field }) => (
+                            <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                <SelectTrigger><SelectValue placeholder="Select type" /></SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="home">Home</SelectItem>
+                                    <SelectItem value="work">Work</SelectItem>
+                                    <SelectItem value="province">Province</SelectItem>
+                                    <SelectItem value="other">Other</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        )} />
+                        {errors.address_type && <p className="text-xs text-destructive">{errors.address_type.message}</p>}
+                    </div>
+
+                    <div className="space-y-1.5">
+                        <Label>Street</Label>
+                        <Input placeholder="123 Mabini St" {...register('street')} />
+                        {errors.street && <p className="text-xs text-destructive">{errors.street.message}</p>}
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-3">
+                        <div className="space-y-1.5">
+                            <Label>City</Label>
+                            <Input placeholder="Manila" {...register('city')} />
+                            {errors.city && <p className="text-xs text-destructive">{errors.city.message}</p>}
+                        </div>
+                        <div className="space-y-1.5">
+                            <Label>State / Region</Label>
+                            <Input placeholder="NCR" {...register('state')} />
+                            {errors.state && <p className="text-xs text-destructive">{errors.state.message}</p>}
+                        </div>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-3">
+                        <div className="space-y-1.5">
+                            <Label>ZIP code</Label>
+                            <Input placeholder="1000" {...register('zip')} />
+                            {errors.zip && <p className="text-xs text-destructive">{errors.zip.message}</p>}
+                        </div>
+                        <div className="space-y-1.5">
+                            <Label>Country</Label>
+                            <Input placeholder="Philippines" {...register('country')} />
+                            {errors.country && <p className="text-xs text-destructive">{errors.country.message}</p>}
+                        </div>
+                    </div>
+
+                    <DialogFooter>
+                        <DialogClose asChild>
+                            <Button type="button" variant="outline">Cancel</Button>
+                        </DialogClose>
+                        <Button type="submit">{initial ? 'Save changes' : 'Add address'}</Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+// ─── Phone Dialog ─────────────────────────────────────────────────────────────
+function PhoneDialog({ open, onClose, initial, onSave }) {
+    const { register, handleSubmit, control, formState: { errors } } = useForm({
+        resolver: zodResolver(phoneSchema),
+        defaultValues: initial ?? { phone_type: 'mobile', country_code: '63', number: '' },
+    })
+
+    const onSubmit = (data) => {
+        onSave({ ...data, full_number: data.country_code + data.number })
+        onClose()
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onClose}>
+            <DialogContent className="sm:max-w-sm">
+                <DialogHeader>
+                    <DialogTitle>{initial ? 'Edit phone number' : 'Add phone number'}</DialogTitle>
+                </DialogHeader>
+                <form onSubmit={handleSubmit(onSubmit)} className="space-y-3 py-1">
+
+                    <div className="space-y-1.5">
+                        <Label>Phone type</Label>
+                        <Controller name="phone_type" control={control} render={({ field }) => (
+                            <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                <SelectTrigger><SelectValue placeholder="Select type" /></SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="mobile">Mobile</SelectItem>
+                                    <SelectItem value="home">Home</SelectItem>
+                                    <SelectItem value="work">Work</SelectItem>
+                                    <SelectItem value="other">Other</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        )} />
+                        {errors.phone_type && <p className="text-xs text-destructive">{errors.phone_type.message}</p>}
+                    </div>
+
+                    <div className="flex gap-2">
+                        <div className="space-y-1.5 w-24">
+                            <Label>Code</Label>
+                            <Input placeholder="63" {...register('country_code')} />
+                            {errors.country_code && <p className="text-xs text-destructive">{errors.country_code.message}</p>}
+                        </div>
+                        <div className="space-y-1.5 flex-1">
+                            <Label>Number</Label>
+                            <Input placeholder="9123456789" {...register('number')} />
+                            {errors.number && <p className="text-xs text-destructive">{errors.number.message}</p>}
+                        </div>
+                    </div>
+
+                    <DialogFooter>
+                        <DialogClose asChild>
+                            <Button type="button" variant="outline">Cancel</Button>
+                        </DialogClose>
+                        <Button type="submit">{initial ? 'Save changes' : 'Add number'}</Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+// ─── Delete Confirm ───────────────────────────────────────────────────────────
+function DeleteConfirm({ open, onClose, onConfirm, label }) {
+    return (
+        <AlertDialog open={open} onOpenChange={onClose}>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>Delete {label}?</AlertDialogTitle>
+                    <AlertDialogDescription>
+                        This will remove the {label} from your profile. This cannot be undone.
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction
+                        onClick={onConfirm}
+                        className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                    >
+                        Delete
+                    </AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    )
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+export default function ProfilePage() {
+    const { user } = useAuth()
+    const {
+        profile, getProfile,
+        updateProfile, profileLoading,
+        uploadAvatar, deleteAvatar, avatarLoading,
+    } = useProfile()
+
+    const isClient = user?.acc_type === 'client'
+    const role = ROLE_CONFIG[user?.acc_type] ?? { label: user?.acc_type, variant: 'outline' }
+    // Use fresh profile data; fall back to auth context while loading
+    const info = profile?.personal_info ?? user?.personal_info
+
+    const [avatarDialogOpen, setAvatarDialogOpen] = useState(false)
+
+    const [editing, setEditing] = useState(false)
+    const [addresses, setAddresses] = useState(info?.addresses ?? [])
+    const [phones, setPhones] = useState(info?.phone_number ?? [])
+
+    const [addrDialog, setAddrDialog] = useState({ open: false, index: null })
+    const [deleteAddr, setDeleteAddr] = useState({ open: false, index: null })
+    const [phoneDialog, setPhoneDialog] = useState({ open: false, index: null })
+    const [deletePhone, setDeletePhone] = useState({ open: false, index: null })
+
+    const fullName = info?.name?.full_name ?? user?.email ?? 'User'
+    const initials = ((info?.name?.given_name?.[0] ?? '') + (info?.name?.last_name?.[0] ?? '')).toUpperCase() || user?.email?.[0]?.toUpperCase() || 'U'
+    const avatarUrl = resolveAssetSrc(info?.avatar)
+    const avatarColor = AVATAR_COLORS[user?.acc_type] ?? 'bg-muted text-muted-foreground'
+
+    // Load fresh profile data on mount
+    useEffect(() => { getProfile(); }, [])
+
+    // Sync phones/addresses when profile arrives from API
+    useEffect(() => {
+        if (!profile?.personal_info) return
+        setAddresses(profile.personal_info.addresses ?? [])
+        setPhones(profile.personal_info.phone_number ?? [])
+    }, [profile])
+
+    // Save profile changes (phones + addresses)
+    const handleSave = async () => {
+        const result = await updateProfile({ phone_number: phones, addresses })
+        if (result?.success) setEditing(false)
+    }
+
+    // ── Address handlers ──
+    const handleSaveAddress = (data) => {
+        if (addrDialog.index !== null) {
+            setAddresses((p) => p.map((a, i) => i === addrDialog.index ? data : a))
+        } else {
+            setAddresses((p) => [...p, data])
+        }
+    }
+
+    const handleDeleteAddress = () => {
+        setAddresses((p) => p.filter((_, i) => i !== deleteAddr.index))
+        setDeleteAddr({ open: false, index: null })
+    }
+
+    // ── Phone handlers ──
+    const handleSavePhone = (data) => {
+        if (phoneDialog.index !== null) {
+            setPhones((p) => p.map((ph, i) => i === phoneDialog.index ? data : ph))
+        } else {
+            setPhones((p) => [...p, data])
+        }
+    }
+
+    const handleDeletePhone = () => {
+        setPhones((p) => p.filter((_, i) => i !== deletePhone.index))
+        setDeletePhone({ open: false, index: null })
+    }
+
+    return (
+        <TooltipProvider>
+            <div className="min-h-screen bg-muted/30 p-4 md:p-8">
+                <div className="max-w-4xl mx-auto space-y-6">
+
+                    {/* ── Header ── */}
+                    <Card>
+                        <CardContent className="py-4">
+                            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-5">
+                                <div className="relative">
+                                    <Avatar className="w-20 h-20">
+                                        <AvatarImage src={avatarUrl} alt={fullName} />
+                                        <AvatarFallback className={`text-lg font-semibold ${avatarColor}`}>{initials}</AvatarFallback>
+                                    </Avatar>
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <button
+                                                className="absolute -bottom-1 -right-1 p-1.5 rounded-full bg-primary text-primary-foreground shadow hover:opacity-80 transition-opacity"
+                                                onClick={() => setAvatarDialogOpen(true)}
+                                            >
+                                                <Camera size={11} />
+                                            </button>
+                                        </TooltipTrigger>
+                                        <TooltipContent>Change photo</TooltipContent>
+                                    </Tooltip>
+                                </div>
+
+                                {/* Name + role */}
+                                <div className="flex-1 min-w-0">
+                                    <h1 className="text-xl font-semibold">{fullName}</h1>
+                                    <p className="text-sm text-muted-foreground">{user?.email}</p>
+                                    <div className="mt-2 flex items-center gap-2 flex-wrap">
+                                        {info?.occupation && (
+                                            <Badge className="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">
+                                                {info.occupation}
+                                            </Badge>
+                                        )}
+                                        <Badge variant={role.variant}>{role.label}</Badge>
+                                    </div>
+                                </div>
+
+                                {/* ← Outside flex-1, sits at the end */}
+                                <div className="flex gap-2 shrink-0">
+                                    {editing ? (
+                                        <>
+                                            <Button size="sm" onClick={handleSave} disabled={profileLoading} className="gap-1.5">
+                                                {profileLoading
+                                                    ? <Loader2 size={13} className="animate-spin" />
+                                                    : <Check size={13} />
+                                                }
+                                                Save profile
+                                            </Button>
+                                            <Button size="sm" variant="outline" onClick={() => setEditing(false)} className="gap-1.5">
+                                                <X size={13} /> Cancel
+                                            </Button>
+                                        </>
+                                    ) : (
+                                        <Button size="sm" variant="outline" onClick={() => setEditing(true)} className="gap-1.5">
+                                            <Edit2 size={13} /> Edit profile
+                                        </Button>
+                                    )}
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+
+                        {/* ── Left: Phone + Address ── */}
+                        <div className="md:col-span-1 space-y-4">
+
+                            {/* Phone numbers */}
+                            <Card>
+                                <CardHeader className="">
+                                    <CardTitle className="text-sm font-semibold flex items-center gap-2">
+                                        <Phone size={14} className="text-muted-foreground" />
+                                        Phone numbers
+                                        {editing && (
+                                            <Button size="icon" variant="ghost" className="ml-auto size-6 rounded-md"
+                                                onClick={() => setPhoneDialog({ open: true, index: null })}>
+                                                <Plus size={13} />
+                                            </Button>
+                                        )}
+                                    </CardTitle>
+                                </CardHeader>
+                                <CardContent>
+                                    <Separator className="" />
+                                    {phones.length === 0 ? (
+                                        <p className="text-xs text-muted-foreground py-2">No phone numbers added.</p>
+                                    ) : (
+                                        <div className="divide-y m-0">
+                                            {phones.map((p, i) => (
+                                                <div key={i} className="flex items-center gap-2 group py-2.5">
+                                                    <div className="flex-1 min-w-0">
+                                                        <p className="text-sm font-medium">+{p.country_code} {p.number}</p>
+                                                        <p className="text-xs text-muted-foreground capitalize">{p.phone_type}</p>
+                                                    </div>
+                                                    {editing && (
+                                                        <div className="flex gap-1 shrink-0">
+                                                            <Button size="icon" variant="ghost" className="size-6 rounded-md"
+                                                                onClick={() => setPhoneDialog({ open: true, index: i })}>
+                                                                <Pencil size={11} />
+                                                            </Button>
+                                                            <Button size="icon" variant="ghost" className="size-6 rounded-md text-destructive hover:text-destructive"
+                                                                onClick={() => setDeletePhone({ open: true, index: i })}>
+                                                                <Trash2 size={11} />
+                                                            </Button>
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            ))}
+                                        </div>
+                                    )}
+                                </CardContent>
+                            </Card>
+
+                            {/* Addresses */}
+                            <Card>
+                                <CardHeader className="">
+                                    <CardTitle className="text-sm font-semibold flex items-center gap-2">
+                                        <MapPin size={14} className="text-muted-foreground" />
+                                        Addresses
+                                        {editing && (
+                                            <Button size="icon" variant="ghost" className="ml-auto size-6 rounded-md"
+                                                onClick={() => setAddrDialog({ open: true, index: null })}>
+                                                <Plus size={13} />
+                                            </Button>
+                                        )}
+                                    </CardTitle>
+                                </CardHeader>
+                                <CardContent>
+                                    <Separator className="" />
+                                    {addresses.length === 0 ? (
+                                        <p className="text-xs text-muted-foreground py-2">No addresses added.</p>
+                                    ) : (
+                                        <div className="divide-y">
+                                            {addresses.map((a, i) => (
+                                                <div key={i} className="flex items-start gap-2 group py-2.5">
+                                                    {a.address_type === 'work'
+                                                        ? <Building2 size={13} className="mt-1 text-muted-foreground shrink-0" />
+                                                        : <Home size={13} className="mt-1 text-muted-foreground shrink-0" />
+                                                    }
+                                                    <div className="flex-1 min-w-0">
+                                                        <p className="text-xs font-medium capitalize text-muted-foreground">{a.address_type}</p>
+                                                        <p className="text-sm leading-snug">{a.full_address}</p>
+                                                    </div>
+                                                    <div className="flex gap-1 shrink-0">
+                                                        {editing && (
+                                                            <div className="flex gap-1 shrink-0">
+                                                                <Button size="icon" variant="ghost" className="size-6 rounded-md"
+                                                                    onClick={() => setAddrDialog({ open: true, index: i })}>
+                                                                    <Pencil size={11} />
+                                                                </Button>
+                                                                <Button size="icon" variant="ghost" className="size-6 rounded-md text-destructive hover:text-destructive"
+                                                                    onClick={() => setDeleteAddr({ open: true, index: i })}>
+                                                                    <Trash2 size={11} />
+                                                                </Button>
+                                                            </div>
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    )}
+                                </CardContent>
+                            </Card>
+                        </div>
+
+                        {/* ── Right column ── */}
+                        <div className="md:col-span-2 space-y-6">
+                            {isClient ? (
+                                <>
+                                    <Card>
+                                        <CardHeader className="pb-2">
+                                            <CardTitle className="text-sm font-semibold flex items-center gap-2">
+                                                <Activity size={14} className="text-muted-foreground" />
+                                                Recent activities
+                                            </CardTitle>
+                                        </CardHeader>
+                                        <CardContent>
+                                            <Separator className="mb-1" />
+                                            <p className="text-xs text-muted-foreground py-2">No recent activities.</p>
+                                        </CardContent>
+                                    </Card>
+
+                                    <Card>
+                                        <CardHeader className="pb-2">
+                                            <CardTitle className="text-sm font-semibold flex items-center gap-2">
+                                                <Trophy size={14} className="text-muted-foreground" />
+                                                Achievements
+                                            </CardTitle>
+                                        </CardHeader>
+                                        <CardContent>
+                                            <Separator className="mb-3" />
+                                            <p className="text-xs text-muted-foreground py-2">No achievements yet.</p>
+                                        </CardContent>
+                                    </Card>
+                                </>
+                            ) : (
+                                <Card className="h-full">
+                                    <CardContent className="flex flex-col items-center justify-center text-center gap-3 min-h-48 pt-6">
+                                        <Shield size={32} className="text-muted-foreground/30" />
+                                        <div>
+                                            <p className="text-sm font-medium">Nothing else to show</p>
+                                            <p className="text-xs text-muted-foreground mt-1">
+                                                Activities and achievements are only visible to clients.
+                                            </p>
+                                        </div>
+                                    </CardContent>
+                                </Card>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* ── Dialogs ── */}
+            <AddressDialog
+                open={addrDialog.open}
+                onClose={() => setAddrDialog({ open: false, index: null })}
+                initial={addrDialog.index !== null ? addresses[addrDialog.index] : null}
+                onSave={handleSaveAddress}
+            />
+            <DeleteConfirm
+                open={deleteAddr.open}
+                onClose={() => setDeleteAddr({ open: false, index: null })}
+                onConfirm={handleDeleteAddress}
+                label="address"
+            />
+            <PhoneDialog
+                open={phoneDialog.open}
+                onClose={() => setPhoneDialog({ open: false, index: null })}
+                initial={phoneDialog.index !== null ? phones[phoneDialog.index] : null}
+                onSave={handleSavePhone}
+            />
+            <DeleteConfirm
+                open={deletePhone.open}
+                onClose={() => setDeletePhone({ open: false, index: null })}
+                onConfirm={handleDeletePhone}
+                label="phone number"
+            />
+
+            <AvatarUploadDialog
+                open={avatarDialogOpen}
+                onClose={() => setAvatarDialogOpen(false)}
+                currentAvatarUrl={avatarUrl ?? ''}
+                initials={initials}
+                onUpload={uploadAvatar}
+                onDelete={deleteAvatar}
+                loading={avatarLoading}
+            />
+        </TooltipProvider>
+    )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/RequirementBuilder.jsx b/apps/web/src/components/generic/RequirementBuilder.jsx
new file mode 100644
index 0000000..817db37
--- /dev/null
+++ b/apps/web/src/components/generic/RequirementBuilder.jsx
@@ -0,0 +1,282 @@
+import { useState } from 'react';
+import { Plus, Trash2, GripVertical, Link, Upload, BookOpen, Layers, FileText } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+
+// ─── Requirement type config ──────────────────────────────────────────────────
+const REQUIREMENT_TYPES = [
+    { value: 'visit_link', label: 'Visit a Link', icon: Link, category: 'Action' },
+    { value: 'upload_file', label: 'Upload a File', icon: Upload, category: 'Action' },
+    { value: 'read_course', label: 'Read a Course', icon: BookOpen, category: 'Content' },
+    { value: 'read_unit', label: 'Read a Unit', icon: Layers, category: 'Content' },
+    { value: 'read_lesson', label: 'Read a Lesson', icon: FileText, category: 'Content' },
+];
+
+const TYPE_MAP = Object.fromEntries(REQUIREMENT_TYPES.map((t) => [t.value, t]));
+
+const FILE_TYPE_OPTIONS = [
+    { value: 'pdf', label: 'PDF' },
+    { value: 'docx', label: 'DOCX' },
+    { value: 'xlsx', label: 'XLSX' },
+    { value: 'png', label: 'PNG' },
+    { value: 'jpg', label: 'JPG' },
+    { value: 'mp4', label: 'MP4' },
+    { value: 'zip', label: 'ZIP' },
+];
+
+// ─── Empty requirement factory ────────────────────────────────────────────────
+function createRequirement(type = 'visit_link') {
+    return {
+        _key: crypto.randomUUID(),
+        type,
+        // visit_link
+        link_url: '',
+        link_label: '',
+        // upload_file
+        allowed_file_types: [],
+        max_file_count: 1,
+        // read_*
+        reference_id: '',
+        reference_label: '',
+    };
+}
+
+// ─── RequirementBuilder ───────────────────────────────────────────────────────
+export default function RequirementBuilder({ value = [], onChange, courses = [], units = [], lessons = [] }) {
+    const [items, setItems] = useState(
+        value.length > 0
+            ? value.map((r) => ({ _key: crypto.randomUUID(), ...r }))
+            : []
+    );
+
+    const emit = (next) => {
+        setItems(next);
+        // strip _key before calling onChange
+        onChange?.(next.map(({ _key, ...r }) => r));
+    };
+
+    const addItem = () => emit([...items, createRequirement('visit_link')]);
+
+    const removeItem = (key) => emit(items.filter((i) => i._key !== key));
+
+    const updateItem = (key, patch) =>
+        emit(items.map((i) => (i._key === key ? { ...i, ...patch } : i)));
+
+    const toggleFileType = (key, ft) => {
+        const item = items.find((i) => i._key === key);
+        if (!item) return;
+        const current = item.allowed_file_types ?? [];
+        const next = current.includes(ft)
+            ? current.filter((t) => t !== ft)
+            : [...current, ft];
+        updateItem(key, { allowed_file_types: next });
+    };
+
+    return (
+        <div className="space-y-3">
+            {items.length === 0 && (
+                <p className="text-sm text-muted-foreground text-center py-6 border border-dashed rounded-lg">
+                    No requirements added. Click "Add Requirement" to start.
+                </p>
+            )}
+
+            {items.map((item, idx) => {
+                const typeDef = TYPE_MAP[item.type];
+                const Icon = typeDef?.icon ?? Link;
+
+                return (
+                    <Card key={item._key} className="relative">
+                        <CardContent className="pt-4 pb-4 space-y-3">
+                            {/* Header row */}
+                            <div className="flex items-center gap-2">
+                                <GripVertical className="h-4 w-4 text-muted-foreground shrink-0" />
+                                <Badge variant="outline" className="text-xs gap-1 shrink-0">
+                                    <Icon className="h-3 w-3" />
+                                    {idx + 1}
+                                </Badge>
+
+                                {/* Type selector */}
+                                <Select
+                                    value={item.type}
+                                    onValueChange={(v) => updateItem(item._key, { type: v })}
+                                >
+                                    <SelectTrigger className="h-8 text-sm flex-1">
+                                        <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {REQUIREMENT_TYPES.map((t) => (
+                                            <SelectItem key={t.value} value={t.value}>
+                                                <span className="flex items-center gap-2">
+                                                    <t.icon className="h-3.5 w-3.5" />
+                                                    {t.label}
+                                                </span>
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className="h-8 w-8 shrink-0 text-destructive hover:text-destructive"
+                                    onClick={() => removeItem(item._key)}
+                                >
+                                    <Trash2 className="h-4 w-4" />
+                                </Button>
+                            </div>
+
+                            {/* ── visit_link fields ── */}
+                            {item.type === 'visit_link' && (
+                                <div className="grid grid-cols-2 gap-3 pl-7">
+                                    <div className="space-y-1">
+                                        <Label className="text-xs">URL <span className="text-destructive">*</span></Label>
+                                        <Input
+                                            placeholder="https://example.com"
+                                            value={item.link_url}
+                                            onChange={(e) => updateItem(item._key, { link_url: e.target.value })}
+                                            className="h-8 text-sm"
+                                        />
+                                    </div>
+                                    <div className="space-y-1">
+                                        <Label className="text-xs">Label (optional)</Label>
+                                        <Input
+                                            placeholder="Link description"
+                                            value={item.link_label}
+                                            onChange={(e) => updateItem(item._key, { link_label: e.target.value })}
+                                            className="h-8 text-sm"
+                                        />
+                                    </div>
+                                </div>
+                            )}
+
+                            {/* ── upload_file fields ── */}
+                            {item.type === 'upload_file' && (
+                                <div className="pl-7 space-y-3">
+                                    <div className="space-y-1">
+                                        <Label className="text-xs">Allowed File Types</Label>
+                                        <div className="flex flex-wrap gap-2">
+                                            {FILE_TYPE_OPTIONS.map((ft) => (
+                                                <Badge
+                                                    key={ft.value}
+                                                    variant={(item.allowed_file_types ?? []).includes(ft.value) ? 'default' : 'outline'}
+                                                    className="cursor-pointer select-none text-xs"
+                                                    onClick={() => toggleFileType(item._key, ft.value)}
+                                                >
+                                                    {ft.label}
+                                                </Badge>
+                                            ))}
+                                        </div>
+                                    </div>
+                                    <div className="space-y-1 w-32">
+                                        <Label className="text-xs">Max Files</Label>
+                                        <Input
+                                            type="number"
+                                            min={1}
+                                            max={20}
+                                            value={item.max_file_count}
+                                            onChange={(e) => updateItem(item._key, { max_file_count: parseInt(e.target.value) || 1 })}
+                                            className="h-8 text-sm"
+                                        />
+                                    </div>
+                                </div>
+                            )}
+
+                            {/* ── read_course / read_unit / read_lesson fields ── */}
+                            {['read_course', 'read_unit', 'read_lesson'].includes(item.type) && (
+                                <div className="pl-7 space-y-1">
+                                    <Label className="text-xs">
+                                        {item.type === 'read_course' ? 'Course' : item.type === 'read_unit' ? 'Unit' : 'Lesson'}
+                                    </Label>
+
+                                    {/* Reference selector */}
+                                    {item.type === 'read_course' && (
+                                        <Select
+                                            value={item.reference_id}
+                                            onValueChange={(v) => {
+                                                const course = courses.find((c) => c.course_id === v);
+                                                updateItem(item._key, {
+                                                    reference_id: v,
+                                                    reference_label: course?.title ?? '',
+                                                });
+                                            }}
+                                        >
+                                            <SelectTrigger className="h-8 text-sm">
+                                                <SelectValue placeholder="Select a course" />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                {courses.map((c) => (
+                                                    <SelectItem key={c.course_id} value={c.course_id}>
+                                                        {c.title}
+                                                    </SelectItem>
+                                                ))}
+                                            </SelectContent>
+                                        </Select>
+                                    )}
+
+                                    {item.type === 'read_unit' && (
+                                        <Select
+                                            value={item.reference_id}
+                                            onValueChange={(v) => {
+                                                const unit = units.find((u) => u.unit_id === v);
+                                                updateItem(item._key, {
+                                                    reference_id: v,
+                                                    reference_label: unit?.title ?? '',
+                                                });
+                                            }}
+                                        >
+                                            <SelectTrigger className="h-8 text-sm">
+                                                <SelectValue placeholder="Select a unit" />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                {units.map((u) => (
+                                                    <SelectItem key={u.unit_id} value={u.unit_id}>
+                                                        {u.title}
+                                                    </SelectItem>
+                                                ))}
+                                            </SelectContent>
+                                        </Select>
+                                    )}
+
+                                    {item.type === 'read_lesson' && (
+                                        <Select
+                                            value={item.reference_id}
+                                            onValueChange={(v) => {
+                                                const lesson = lessons.find((l) => l.lesson_id === v);
+                                                updateItem(item._key, {
+                                                    reference_id: v,
+                                                    reference_label: lesson?.title ?? '',
+                                                });
+                                            }}
+                                        >
+                                            <SelectTrigger className="h-8 text-sm">
+                                                <SelectValue placeholder="Select a lesson" />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                {lessons.map((l) => (
+                                                    <SelectItem key={l.lesson_id} value={l.lesson_id}>
+                                                        {l.title}
+                                                    </SelectItem>
+                                                ))}
+                                            </SelectContent>
+                                        </Select>
+                                    )}
+                                </div>
+                            )}
+                        </CardContent>
+                    </Card>
+                );
+            })}
+
+            <Button type="button" variant="outline" size="sm" className="w-full gap-2" onClick={addItem}>
+                <Plus className="h-4 w-4" />
+                Add Requirement
+            </Button>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/ResponsiveModal.jsx b/apps/web/src/components/generic/ResponsiveModal.jsx
new file mode 100644
index 0000000..7543990
--- /dev/null
+++ b/apps/web/src/components/generic/ResponsiveModal.jsx
@@ -0,0 +1,238 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { VisuallyHidden } from "radix-ui";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerClose,
+} from "@/components/ui/drawer";
+
+// ---------------------------------------------------------------------------
+// useMediaQuery
+// ---------------------------------------------------------------------------
+function useMediaQuery(query) {
+  const [matches, setMatches] = React.useState(false);
+  React.useEffect(() => {
+    const mql = window.matchMedia(query);
+    setMatches(mql.matches);
+    const handler = (e) => setMatches(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [query]);
+  return matches;
+}
+
+// ---------------------------------------------------------------------------
+// ResponsiveModal
+//
+// Props:
+// open boolean
+// onOpenChange (open: boolean) => void
+//
+// title ReactNode? — rendered as DialogTitle / DrawerTitle
+// description ReactNode? — rendered as DialogDescription / DrawerDescription
+// footer ReactNode? — rendered as DialogFooter / DrawerFooter
+// children ReactNode? — modal body
+// onAction - fetch api call
+//
+// dialogContentProps object? — forwarded to <DialogContent>
+// drawerContentProps object? — forwarded to <DrawerContent>
+// drawerDirection "top"|"bottom"|"left"|"right" (default "bottom")
+// hideDrawerClose boolean? — hide the default Close button in drawer
+//
+// ---------------------------------------------------------------------------
+// Usage:
+//
+// <ResponsiveModal
+//   open={open}
+//   onOpenChange={setOpen}
+//   title="Are you absolutely sure?"
+//   description="This action cannot be undone."
+//   footer={
+//     <>
+//       <button onClick={() => setOpen(false)}>Cancel</button>
+//       <button>Confirm</button>
+//     </>
+//   }
+// >
+//   <MyForm />
+// </ResponsiveModal>
+//
+// ---------------------------------------------------------------------------
+export function ResponsiveModal({
+  open,
+  onOpenChange,
+  title,
+  description,
+  footer,
+  children,
+  onAction,
+  dialogContentProps = {},
+  drawerContentProps = {},
+  drawerDirection = "bottom",
+  hideDrawerClose = false,
+}) {
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+
+  // ── Desktop → Dialog ──────────────────────────────────────────────────
+  if (isDesktop) {
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent
+          {...dialogContentProps}
+          className={cn("sm:max-w-lg", dialogContentProps.className)}
+        >
+          {title || description ? (
+            <DialogHeader>
+              {title && <DialogTitle>{title}</DialogTitle>}
+              {description && <DialogDescription>{description}</DialogDescription>}
+            </DialogHeader>
+          ) : (
+            <VisuallyHidden.Root>
+              <DialogTitle />
+              <DialogDescription />
+            </VisuallyHidden.Root>
+          )}
+
+          {children}
+
+          {(footer || onAction) && (
+            <DialogFooter>
+              {footer}
+              {onAction && (
+                <Button onClick={onAction}>Confirm</Button>
+              )}
+            </DialogFooter>
+          )}
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  // ── Mobile → Drawer ───────────────────────────────────────────────────
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange} direction={drawerDirection}>
+      <DrawerContent
+        {...drawerContentProps}
+        className={cn("max-h-[85svh]", drawerContentProps.className)}
+      >
+        {title || description ? (
+          <DrawerHeader>
+            {title && <DrawerTitle>{title}</DrawerTitle>}
+            {description ? (
+              <DrawerDescription>{description}</DrawerDescription>
+            ) : (
+              <VisuallyHidden.Root>
+                <DrawerDescription />
+              </VisuallyHidden.Root>
+            )}
+          </DrawerHeader>
+        ) : (
+          <VisuallyHidden.Root>
+            <DrawerTitle />
+            <DrawerDescription />
+          </VisuallyHidden.Root>
+        )}
+
+        <div className="overflow-y-auto px-4 pb-4">{children}</div>
+
+        {(footer || onAction || !hideDrawerClose) && (
+          <DrawerFooter className="pt-2">
+            {footer}
+            {onAction && (
+              <button
+                onClick={onAction}
+                className="w-full rounded-md bg-primary px-4 py-3 text-sm font-medium text-primary-foreground shadow-sm hover:bg-primary/90 transition-colors"
+              >
+                Confirm
+              </button>
+            )}
+            {!hideDrawerClose && (
+              <DrawerClose asChild>
+                <button className="mt-1 w-full rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground">
+                  Close
+                </button>
+              </DrawerClose>
+            )}
+          </DrawerFooter>
+        )}
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+export { useMediaQuery };
+export default ResponsiveModal;
+
+
+// ===========================================================================
+// USAGE EXAMPLES
+// ===========================================================================
+//
+// const [open, setOpen] = useState(false);
+//
+//
+// ── 1. Full example ───────────────────────────────────────────────────────
+//
+//   <ResponsiveModal
+//     open={open}
+//     onOpenChange={setOpen}
+//     title="Are you absolutely sure?"
+//     description="This action cannot be undone. This will permanently delete
+//                  your account and remove your data from our servers."
+//     footer={
+//       <>
+//         <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
+//         <Button>Continue</Button>
+//       </>
+//     }
+//   >
+//     <MyForm />
+//   </ResponsiveModal>
+//
+//
+// ── 2. Title only (no description) ───────────────────────────────────────
+//
+//   <ResponsiveModal
+//     open={open}
+//     onOpenChange={setOpen}
+//     title="Confirm Delete"
+//     footer={<Button>Delete</Button>}
+//   >
+//     <p>Are you sure?</p>
+//   </ResponsiveModal>
+//
+//
+// ── 3. No header ─────────────────────────────────────────────────────────
+//
+//   <ResponsiveModal open={open} onOpenChange={setOpen}>
+//     <p>Body only.</p>
+//   </ResponsiveModal>
+//
+//
+// ── 4. Custom width ───────────────────────────────────────────────────────
+//
+//   <ResponsiveModal
+//     open={open}
+//     onOpenChange={setOpen}
+//     title="Wide Modal"
+//     dialogContentProps={{ className: "sm:max-w-2xl" }}
+//   >
+//     <BigTable />
+//   </ResponsiveModal>
+//
+// ===========================================================================
\ No newline at end of file
diff --git a/apps/web/src/components/generic/ScrollToTop.jsx b/apps/web/src/components/generic/ScrollToTop.jsx
new file mode 100644
index 0000000..6a84374
--- /dev/null
+++ b/apps/web/src/components/generic/ScrollToTop.jsx
@@ -0,0 +1,28 @@
+/**
+ * ╔══════════════════════════════════════════════════════════════════════════════╗
+ * ║                                ScrollToTop.jsx                               ║
+ * ╠══════════════════════════════════════════════════════════════════════════════╣
+ * ║  Author        : Kenneth Obsequio (@lash0000)                                ║
+ * ║  Date Created  : May 25, 2026                                                ║
+ * ║                                                                              ║
+ * ╠══════════════════════════════════════════════════════════════════════════════╣
+ * ║  Changelog                                                                   ║
+ * ║  - For every navigate or <Link> redirection.                                 ║
+ * ╚══════════════════════════════════════════════════════════════════════════════╝
+ */
+
+
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+const ScrollToTop = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+};
+
+export default ScrollToTop;
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Sheet/AddSheet.jsx b/apps/web/src/components/generic/Sheet/AddSheet.jsx
new file mode 100644
index 0000000..7ef0e15
--- /dev/null
+++ b/apps/web/src/components/generic/Sheet/AddSheet.jsx
@@ -0,0 +1,243 @@
+// components/generic/Sheet/AddUsersSheet.jsx
+
+import { useState, useEffect, useMemo } from "react";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Spinner } from "@/components/ui/spinner";
+import { AlertTriangle } from "lucide-react";
+
+/**
+ * Generic sheet for selecting and adding users to any entity
+ * (groups, tasks, projects, etc.)
+ *
+ * @param {Object}    props
+ * @param {boolean}   props.open
+ * @param {Function}  props.onOpenChange
+ *
+ * @param {string}    [props.title]          Sheet heading. Default: "Add members"
+ * @param {string}    [props.submitLabel]    Submit button label. Default: "Add"
+ *
+ * @param {Array}     props.users            [{ [idKey], [labelKey] }] — list to display
+ * @param {boolean}   props.loading
+ * @param {Function}  props.onFetch          Called on open to (re)load the list
+ *
+ * @param {string}    [props.idKey]          Key for the user id.    Default: "user_id"
+ * @param {string}    [props.labelKey]       Key for the display name. Default: "full_name"
+ * @param {string}    [props.subLabelKey]    Optional secondary line (e.g. "email")
+ * @param {string}    [props.warningKey]     If set, users with a truthy value at this key show
+ *                                           a "will be moved" warning (e.g. "current_group")
+ *
+ * @param {Function}  props.onSubmit         Called with selected ids[]
+ *
+ * @example — groups
+ * <AddUsersSheet
+ *   title="Add members"
+ *   users={usersNotIn}
+ *   onFetch={() => fetchUsersNotInGroup(gid)}
+ *   onSubmit={(ids) => addUsersToGroup(gid, ids)}
+ *   ...
+ * />
+ *
+ * @example — tasks
+ * <AddUsersSheet
+ *   title="Assign users"
+ *   users={unassignedUsers}
+ *   onFetch={() => fetchUnassignedUsers(taskId)}
+ *   onSubmit={(ids) => assignUsersToTask(taskId, ids)}
+ *   idKey="user_id"
+ *   labelKey="full_name"
+ *   subLabelKey="email"
+ *   ...
+ * />
+ */
+export function AddSheet({
+    open,
+    onOpenChange,
+
+    title = "Add members",
+    submitLabel = "Add",
+
+    users = [],
+    loading = false,
+    onFetch,
+
+    idKey = "user_id",
+    labelKey = "full_name",
+    subLabelKey = null,
+    warningKey = null,
+
+    onSubmit,
+}) {
+    const [search, setSearch] = useState("");
+    const [selected, setSelected] = useState([]);
+
+    useEffect(() => {
+        if (open) {
+            onFetch?.();
+            setSearch("");
+            setSelected([]);
+        }
+    }, [open]);
+
+    const filtered = useMemo(() => {
+        if (!search.trim()) return users;
+        return users.filter((u) =>
+            String(u[labelKey] ?? "").toLowerCase().includes(search.toLowerCase())
+        );
+    }, [search, users, labelKey]);
+
+    const toggle = (id) =>
+        setSelected((prev) =>
+            prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]
+        );
+
+    const toggleAll = () => {
+        const allIds = filtered.map((u) => u[idKey]);
+        const allSelected = allIds.every((id) => selected.includes(id));
+        setSelected((prev) =>
+            allSelected
+                ? prev.filter((id) => !allIds.includes(id))
+                : [...new Set([...prev, ...allIds])]
+        );
+    };
+
+    const allFilteredSelected =
+        filtered.length > 0 && filtered.every((u) => selected.includes(u[idKey]));
+
+    const movingCount = useMemo(() => {
+        if (!warningKey) return 0;
+        return selected.filter((id) => {
+            const user = users.find((u) => u[idKey] === id);
+            return !!user?.[warningKey];
+        }).length;
+    }, [selected, users, warningKey, idKey]);
+
+    async function handleSubmit() {
+        if (!selected.length) return;
+        await onSubmit(selected);
+        onOpenChange(false);
+    }
+
+    function handleClose() {
+        setSearch("");
+        setSelected([]);
+        onOpenChange(false);
+    }
+
+    return (
+        <Sheet open={open} onOpenChange={handleClose}>
+            {/*
+                SheetContent is a flex column with fixed height (100dvh).
+                We split it into 3 rows: header (shrink-0), body (flex-1 overflow-hidden), footer (shrink-0).
+                The body itself is a flex column — search and select-all shrink, list overflows.
+            */}
+            <SheetContent side="right" className="w-[400px] flex flex-col h-full p-0">
+
+                {/* Header */}
+                <SheetHeader className="shrink-0 border-b px-6 py-4">
+                    <SheetTitle>{title}</SheetTitle>
+                </SheetHeader>
+
+                {/* Body — fills remaining space, clips overflow */}
+                <div className="flex-1 min-h-0 flex flex-col gap-3 px-6 py-4 relative">
+                    {loading && (
+                        <div className="absolute inset-0 flex items-center justify-center bg-background/60 backdrop-blur-sm z-10">
+                            <Spinner className="size-8" />
+                        </div>
+                    )}
+
+                    {/* Search — fixed height */}
+                    <div className="shrink-0">
+                        <Input
+                            placeholder="Search..."
+                            value={search}
+                            onChange={(e) => setSearch(e.target.value)}
+                        />
+                    </div>
+
+                    {/* Select all — fixed height */}
+                    {filtered.length > 0 && (
+                        <label className="shrink-0 flex items-center gap-2 text-sm font-medium cursor-pointer select-none border-b pb-3">
+                            <input
+                                type="checkbox"
+                                checked={allFilteredSelected}
+                                onChange={toggleAll}
+                            />
+                            Select all ({filtered.length})
+                        </label>
+                    )}
+
+                    {/* Scrollable list — takes all remaining space */}
+                    <div className="flex-1 min-h-0 overflow-y-auto">
+                        <div className="space-y-1 pr-1">
+                            {!loading && filtered.length === 0 ? (
+                                <p className="text-sm text-muted-foreground text-center py-6">
+                                    {search ? `No results for "${search}".` : "No users available."}
+                                </p>
+                            ) : (
+                                filtered.map((user) => {
+                                    const id      = user[idKey];
+                                    const label   = user[labelKey];
+                                    const sub     = subLabelKey ? user[subLabelKey] : null;
+                                    const warning = warningKey  ? user[warningKey]  : null;
+
+                                    return (
+                                        <label
+                                            key={id}
+                                            className="flex items-center gap-3 p-1 rounded-md hover:bg-muted cursor-pointer text-sm select-none"
+                                        >
+                                            <input
+                                                type="checkbox"
+                                                checked={selected.includes(id)}
+                                                onChange={() => toggle(id)}
+                                            />
+                                            <div className="flex flex-col min-w-0 flex-1">
+                                                <span className="truncate">{label}</span>
+                                                {sub && (
+                                                    <span className="text-xs text-muted-foreground truncate">
+                                                        {sub}
+                                                    </span>
+                                                )}
+                                                {warning && (
+                                                    <span className="text-xs text-amber-600 flex items-center gap-1 mt-0.5">
+                                                        <AlertTriangle className="size-3 shrink-0" />
+                                                        Also in: {warning}
+                                                    </span>
+                                                )}
+                                            </div>
+                                        </label>
+                                    );
+                                })
+                            )}
+                        </div>
+                    </div>
+                </div>
+
+                {/* Footer */}
+                <div className="shrink-0 flex flex-col gap-2 border-t px-6 py-4">
+                    {movingCount > 0 && (
+                        <p className="text-xs text-amber-600 flex items-center gap-1.5">
+                            <AlertTriangle className="size-3 shrink-0" />
+                            {movingCount} user{movingCount > 1 ? 's' : ''} already belong{movingCount === 1 ? 's' : ''} to other group{movingCount > 1 ? 's' : ''}.
+                        </p>
+                    )}
+                    <div className="flex gap-2">
+                        <Button variant="outline" className="flex-1" onClick={handleClose}>
+                            Cancel
+                        </Button>
+                        <Button
+                            className="flex-1"
+                            disabled={!selected.length || loading}
+                            onClick={handleSubmit}
+                        >
+                            {selected.length > 0 ? `${submitLabel} (${selected.length})` : submitLabel}
+                        </Button>
+                    </div>
+                </div>
+
+            </SheetContent>
+        </Sheet>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Sheet/FilterSheet.jsx b/apps/web/src/components/generic/Sheet/FilterSheet.jsx
new file mode 100644
index 0000000..c4628b1
--- /dev/null
+++ b/apps/web/src/components/generic/Sheet/FilterSheet.jsx
@@ -0,0 +1,215 @@
+import { useState, useEffect, useMemo } from "react";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Spinner } from "@/components/ui/spinner";
+
+// ─── Field-specific display maps ──────────────────────────────────────────────
+const FIELD_DISPLAY_MAP = {
+  is_active: { true: "Active", false: "Inactive" },
+  is_verified: { true: "Verified", false: "Not Verified" },
+  is_banned: { true: "Banned", false: "Not Banned" },
+  is_public: { true: "Public", false: "Private" },
+  is_required: { true: "Yes", false: "No" },
+};
+
+const BOOLEAN_FIELDS = Object.keys(FIELD_DISPLAY_MAP);
+
+// ─── Generic formatter ────────────────────────────────────────────────────────
+// Audit fields (createdBy/updatedBy/deletedBy) come back from the field-values
+// API as { value: user_id, label: full_name } — filtering has to select on the
+// id, but the sheet should still display the name. Every other field type
+// still hands this plain primitives, which pass through unchanged.
+const itemValue = (item) => (item && typeof item === "object" && "value" in item) ? item.value : item;
+const itemLabel = (item) => (item && typeof item === "object" && "label" in item) ? item.label : item;
+
+const formatFilterItem = (item, field, type, fmtDate) => {
+  const label = itemLabel(item);
+  if (FIELD_DISPLAY_MAP[field]) {
+    return FIELD_DISPLAY_MAP[field][String(label)] ?? label;
+  }
+  if (type === "date" && label) {
+    return fmtDate(label);
+  }
+  return label;
+};
+
+// ─── Reusable empty state ─────────────────────────────────────────────────────
+const EmptyState = ({ search }) => (
+  <p className="text-sm text-muted-foreground text-center py-4">
+    {search ? `No results for "${search}".` : "No data found."}
+  </p>
+);
+
+// ─── Reusable item list renderer ──────────────────────────────────────────────
+const FilterList = ({ items, field, type, selected, onToggle, inputType = "checkbox" }) => {
+  const { fmtDate } = useDateFormat();
+  if (items.length === 0) return <EmptyState />;
+
+  return items.map((item) => {
+    const value = itemValue(item);
+    return (
+      <label key={value} className="flex items-center gap-2 text-sm cursor-pointer">
+        <input
+          type={inputType}
+          name={inputType === "radio" ? field : undefined}
+          checked={selected.includes(String(value))}
+          onChange={() => onToggle(value)}
+        />
+        {formatFilterItem(item, field, type, fmtDate)}
+      </label>
+    );
+  });
+};
+
+export function FilterSheet({ open, onOpenChange, column, attr, data = [], loading }) {
+  const type = attr?.type;
+  const field = attr?.field;
+
+  const enumData = attr?.options?.choices || [];
+
+  const [search, setSearch] = useState("");
+  const [selected, setSelected] = useState([]);
+
+  useEffect(() => {
+    const val = column?.getFilterValue();
+    setSelected(Array.isArray(val) ? val.map(String) : []);
+  }, [column]);
+
+  const sourceData = useMemo(() => {
+    if (BOOLEAN_FIELDS.includes(field)) return ["true", "false"];
+    if (type === "enum") return enumData;
+    return data || [];
+  }, [field, type, enumData, data]);
+
+  const filteredData = useMemo(() => {
+    if (!search) return sourceData;
+    return sourceData.filter((item) =>
+      formatFilterItem(item, field, type)
+        .toString()
+        .toLowerCase()
+        .includes(search.toLowerCase())
+    );
+  }, [search, sourceData, field, type]);
+
+  const toggle = (item) => {
+    setSelected((prev) =>
+      prev.includes(String(item))
+        ? prev.filter((v) => v !== String(item))
+        : [...prev, String(item)]
+    );
+  };
+
+  const toggleRadio = (item) => setSelected([String(item)]);
+
+  const isBoolean = BOOLEAN_FIELDS.includes(field);
+  const isEnum = type === "enum" && !isBoolean;
+  const isList = !isBoolean && !isEnum;
+
+  const isEmpty = !loading && sourceData.length === 0;
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-[380px] flex flex-col">
+        <SheetHeader className="shrink-0 border-b">
+          <SheetTitle>Filter by {column?.columnDef?.header}</SheetTitle>
+        </SheetHeader>
+
+        <div className="flex-1 overflow-hidden flex flex-col gap-4 px-4 relative">
+          {loading && (
+            <div className="absolute inset-0 flex items-center justify-center bg-background/60 backdrop-blur-sm z-10">
+              <Spinner className="size-8" />
+            </div>
+          )}
+
+          {/* ================= EMPTY STATE ================= */}
+          {isEmpty && <EmptyState />}
+
+          {/* ================= BOOLEAN ================= */}
+          {!isEmpty && isBoolean && (
+            <div className="space-y-2 overflow-auto pr-2 pt-2">
+              <FilterList
+                items={sourceData}
+                field={field}
+                type={type}
+                selected={selected}
+                onToggle={toggleRadio}
+                inputType="radio"
+              />
+            </div>
+          )}
+
+          {/* ================= ENUM ================= */}
+          {!isEmpty && isEnum && (
+            <div className="space-y-2 overflow-auto pr-2 pt-2">
+              <FilterList
+                items={sourceData}
+                field={field}
+                type={type}
+                selected={selected}
+                onToggle={toggle}
+              />
+            </div>
+          )}
+
+          {/* ========== TEXT / NUMBER / DATE ========== */}
+          {!isEmpty && isList && (
+            <>
+              <div>
+                <Input
+                  placeholder={`Search ${type}...`}
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                />
+              </div>
+              <ScrollArea className="flex-1 h-[550px] pr-2">
+                <div className="space-y-2">
+                  {filteredData.length === 0
+                    ? <EmptyState search={search} />
+                    : <FilterList
+                      items={filteredData}
+                      field={field}
+                      type={type}
+                      selected={selected}
+                      onToggle={toggle}
+                    />
+                  }
+                </div>
+                <ScrollBar orientation="vertical" />
+              </ScrollArea>
+            </>
+          )}
+        </div>
+
+        {/* ─── Footer — hidden when empty ──────────────────────────────────── */}
+        {!isEmpty && (
+          <div className="shrink-0 flex gap-2 border-t p-4">
+            <Button
+              variant="outline"
+              className="flex-1"
+              onClick={() => {
+                setSelected([]);
+                column.setFilterValue(undefined);
+                onOpenChange(false);
+              }}
+            >
+              Clear
+            </Button>
+            <Button
+              className="flex-1"
+              onClick={() => {
+                column.setFilterValue(selected);
+                onOpenChange(false);
+              }}
+            >
+              Apply
+            </Button>
+          </div>
+        )}
+
+      </SheetContent>
+    </Sheet>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/StickyAnnouncementBar.jsx b/apps/web/src/components/generic/StickyAnnouncementBar.jsx
new file mode 100644
index 0000000..4eb0521
--- /dev/null
+++ b/apps/web/src/components/generic/StickyAnnouncementBar.jsx
@@ -0,0 +1,77 @@
+import { X } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { useClientNotifications } from "@/contexts/ClientNotificationContext";
+import { resolveNotificationLink } from "@/components/generic/notificationDisplay";
+import { getTierColor, getContrastText } from "@/utils/tierColors";
+
+// Up to 2 sticky alerts shown at once, stacked — no dialog on click anymore;
+// the centered title text itself is the click target and redirects straight
+// to the alert's link (if any).
+const MAX_VISIBLE_STICKY = 2;
+
+function resolveClickAction(stickyAnnouncement) {
+  return resolveNotificationLink(stickyAnnouncement.type, stickyAnnouncement.data);
+}
+
+function StickyAnnouncementRow({ announcement, onDismiss }) {
+  const navigate = useNavigate();
+  const swatch      = getTierColor(announcement.color || "indigo").swatch;
+  const textColor   = getContrastText(swatch, announcement.color || "indigo");
+  const clickAction = resolveClickAction(announcement);
+
+  return (
+    <div role="status" className="w-full shadow-sm px-4 md:px-6" style={{ backgroundColor: swatch }}>
+      <div className="relative w-full rounded-none py-3 flex items-center justify-center px-10">
+        <p
+          className={["text-sm font-semibold leading-snug truncate", clickAction ? "cursor-pointer" : ""].join(" ")}
+          style={{ color: textColor }}
+          onClick={clickAction ? () => clickAction.go(navigate) : undefined}
+        >
+          {announcement.title || "Announcement"}
+        </p>
+
+        {/* Only way to dismiss a sticky alert. */}
+        <div
+          role="button"
+          tabIndex={0}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            void onDismiss();
+          }}
+          onKeyDown={(e) => {
+            if (e.key !== "Enter" && e.key !== " ") return;
+            e.preventDefault();
+            e.stopPropagation();
+            void onDismiss();
+          }}
+          aria-label="Dismiss sticky announcement"
+          title="Dismiss"
+          className="absolute right-2 inline-flex items-center justify-center size-8 rounded-lg cursor-pointer hover:opacity-70 transition-opacity"
+          style={{ color: textColor }}
+        >
+          <X className="size-4" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function StickyAnnouncementBar() {
+  const { stickyAnnouncements, markSeen } = useClientNotifications();
+
+  const visible = stickyAnnouncements.slice(0, MAX_VISIBLE_STICKY);
+  if (visible.length === 0) return null;
+
+  return (
+    <div className="w-full flex flex-col">
+      {visible.map((announcement) => (
+        <StickyAnnouncementRow
+          key={announcement.notification_id}
+          announcement={announcement}
+          onDismiss={() => markSeen(announcement.notification_id)}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/generic/Table/ActiveFilterPills.jsx b/apps/web/src/components/generic/Table/ActiveFilterPills.jsx
new file mode 100644
index 0000000..cab087f
--- /dev/null
+++ b/apps/web/src/components/generic/Table/ActiveFilterPills.jsx
@@ -0,0 +1,104 @@
+import { Filter, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { BOOLEAN_FIELD_LABELS } from "@/utils/table.util";
+
+// Resolves a filter's raw value(s) into what should actually be shown on the
+// pill. Handles every shape ColumnFilter/FilterSheet can produce:
+//  - date range:              { from, to }
+//  - boolean columns:         "true" / "false" (or an array of those)
+//  - id-backed columns (e.g. createdBy/updatedBy): raw ids — resolved via
+//    fieldOptions[field], the { value, label } picklist DataTable cached
+//    from the last time that column's filter sheet was opened
+//  - everything else (free text, plain enum values): shown as-is
+function resolveFilterDisplay(filter, fieldOptions) {
+  const raw = filter.value;
+
+  if (raw && typeof raw === "object" && !Array.isArray(raw)) {
+    const { from, to } = raw;
+    if (from && to) return `${from} – ${to}`;
+    if (from) return `From ${from}`;
+    if (to) return `Until ${to}`;
+    return "";
+  }
+
+  const values     = Array.isArray(raw) ? raw : [raw];
+  const boolLabels = BOOLEAN_FIELD_LABELS[filter.id];
+  const options    = fieldOptions?.[filter.id];
+
+  const labels = values.map((v) => {
+    if (boolLabels) return boolLabels[v === "true" ? 1 : 0];
+    if (Array.isArray(options)) {
+      const match = options.find((o) => String(o?.value ?? o) === String(v));
+      if (match !== undefined) return match?.label ?? match?.value ?? match;
+    }
+    return v;
+  });
+
+  return labels.join(", ");
+}
+
+/**
+ * ActiveFilterPills
+ *
+ * Displays active column filters as dismissible pill badges.
+ *
+ * Props:
+ * @param {Array}    filters          - Array of { id, value } (TanStack columnFilters shape)
+ * @param {Array}    attributes       - Array of { field, name } for display labels
+ * @param {Object}   [fieldOptions]   - { [field]: [{ value, label }] } picklist cache,
+ *                                      used to resolve id-backed filters (createdBy, etc.)
+ * @param {Function} onRemove         - (id: string) => void   — remove a single filter
+ * @param {Function} [onClearAll]     - () => void             — clear all filters
+ * @param {boolean}  [showClearButton]- Render the "Clear filters (n)" button instead of pills
+ *                                      (used in the toolbar area; omit for the pill row)
+ */
+export function ActiveFilterPills({
+  filters = [],
+  attributes = [],
+  fieldOptions = {},
+  onRemove,
+  onClearAll,
+  showClearButton = false,
+}) {
+  if (filters.length === 0) return null;
+
+  // ── Toolbar variant: just a "Clear filters (n)" ghost button ──────────────
+  if (showClearButton) {
+    return (
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={onClearAll}
+        className="h-8 text-xs gap-1.5 text-muted-foreground hover:text-foreground"
+      >
+        <X className="h-3 w-3" />
+        Clear filters ({filters.length})
+      </Button>
+    );
+  }
+
+  // ── Pill row variant ───────────────────────────────────────────────────────
+  return (
+    <div className="flex items-center gap-2 flex-wrap mb-3">
+      <Filter className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+      {filters.map((f) => {
+        const attr = attributes.find((a) => a.field === f.id);
+        return (
+          <span
+            key={f.id}
+            className="inline-flex items-center gap-1 text-xs bg-primary/10 text-primary border border-primary/20 rounded-full px-2.5 py-0.5"
+          >
+            <span className="font-medium">{attr?.name ?? f.id}:</span>
+            {resolveFilterDisplay(f, fieldOptions)}
+            <button
+              onClick={() => onRemove(f.id)}
+              className="ml-0.5 hover:text-destructive transition-colors"
+            >
+              <X className="h-2.5 w-2.5" />
+            </button>
+          </span>
+        );
+      })}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Table/ColumnActionsDropdown.jsx b/apps/web/src/components/generic/Table/ColumnActionsDropdown.jsx
new file mode 100644
index 0000000..eb93457
--- /dev/null
+++ b/apps/web/src/components/generic/Table/ColumnActionsDropdown.jsx
@@ -0,0 +1,97 @@
+import { flexRender } from "@tanstack/react-table";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import {
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  ChevronDown,
+  X,
+} from "lucide-react";
+
+/**
+ * ColumnActionsDropdown
+ *
+ * Per-column header button that opens a dropdown with sort and filter actions.
+ *
+ * Props:
+ * @param {Object}   header          - TanStack header object
+ * @param {Object}   [attr]          - Attribute definition (from column meta.attr)
+ * @param {boolean}  isOpen          - Controlled open state
+ * @param {Function} onOpenChange    - (isOpen: boolean) => void
+ * @param {Function} onFilterClick   - (e) => void  — triggered when "Filter By" is clicked
+ * @param {boolean}  [showFilter]    - Whether to render the Filter By option (default: !!attr)
+ */
+export function ColumnActionsDropdown({
+  header,
+  attr,
+  isOpen,
+  onOpenChange,
+  onFilterClick,
+  showFilter,
+}) {
+  const column = header.column;
+  const sorted = column.getIsSorted();
+  const canFilter = showFilter ?? !!attr;
+  const canSort = column.getCanSort();
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={onOpenChange}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 px-3">
+          {sorted === "asc" && (
+            <ArrowUp className="size-3.5 text-primary" />
+          )}
+          {sorted === "desc" && (
+            <ArrowDown className="size-3.5 text-primary" />
+          )}
+          {!sorted && (
+            <ArrowUpDown className="size-3.5 text-muted-foreground" />
+          )}
+          {flexRender(column.columnDef.header, header.getContext())}
+          <ChevronDown className="ml-2 size-4" />
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start" className="w-56">
+        <DropdownMenuLabel className="text-xs">Column Actions</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+
+        {canSort && (
+          <>
+            <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+              <ArrowUp className="mr-2 size-4" />
+              Sort Asc
+            </DropdownMenuItem>
+
+            <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+              <ArrowDown className="mr-2 size-4" />
+              Sort Desc
+            </DropdownMenuItem>
+
+            <DropdownMenuItem onClick={() => column.clearSorting()}>
+              <X className="mr-2 size-4" />
+              Clear Sort
+            </DropdownMenuItem>
+          </>
+        )}
+
+        {canFilter && (
+          <>
+            {canSort && <DropdownMenuSeparator />}
+            <DropdownMenuItem onClick={onFilterClick}>
+              Filter By
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Table/ColumnVisibilityToggle.jsx b/apps/web/src/components/generic/Table/ColumnVisibilityToggle.jsx
new file mode 100644
index 0000000..ca6c211
--- /dev/null
+++ b/apps/web/src/components/generic/Table/ColumnVisibilityToggle.jsx
@@ -0,0 +1,58 @@
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Columns2 } from "lucide-react";
+
+export function ColumnVisibilityToggle({ table, label = "Columns" }) {
+  const columns = table.getAllLeafColumns().filter(
+    (col) => col.id !== "select" && col.id !== "actions"
+  );
+
+  const allVisible  = columns.every((col) => col.getIsVisible());
+  
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="h-8 text-xs gap-1.5">
+          <Columns2 className="h-3.5 w-3.5" />
+          {label}
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end" className="w-52">
+        <DropdownMenuLabel className="text-xs text-muted-foreground">
+          Toggle visible columns
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+
+        {/* ─── Show All ──────────────────────────────────────────────────── */}
+        <DropdownMenuCheckboxItem
+          checked={allVisible}
+          onCheckedChange={(v) => table.toggleAllColumnsVisible(v)}
+          className="text-xs font-medium"
+        >
+          Show All
+        </DropdownMenuCheckboxItem>
+
+        <DropdownMenuSeparator />
+
+        {/* ─── Individual columns ────────────────────────────────────────── */}
+        {columns.map((col) => {
+          const headerLabel = typeof col.columnDef.header === "string"
+            ? col.columnDef.header
+            : col.id;
+
+          return (
+            <DropdownMenuCheckboxItem
+              key={col.id}
+              checked={col.getIsVisible()}
+              onCheckedChange={(v) => col.toggleVisibility(v)}
+              className="text-xs"
+            >
+              {headerLabel}
+            </DropdownMenuCheckboxItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Table/DataTable.jsx b/apps/web/src/components/generic/Table/DataTable.jsx
new file mode 100644
index 0000000..c4bc6b9
--- /dev/null
+++ b/apps/web/src/components/generic/Table/DataTable.jsx
@@ -0,0 +1,368 @@
+import { useState, useMemo, useRef, useEffect, useCallback } from "react";
+import { useReactTable, getCoreRowModel, flexRender, } from "@tanstack/react-table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table";
+import { Spinner } from "@/components/ui/spinner";
+
+import { pageSizes } from "@/utils/table.util";
+import { ActiveFilterPills } from "./ActiveFilterPills";
+import { ColumnActionsDropdown } from "./ColumnActionsDropdown";
+import { TablePagination } from "./TablePagination";
+import { ColumnVisibilityToggle } from "./ColumnVisibilityToggle";
+import { ToolbarActions } from "./ToolbarActions";
+import { SelectionToolbar } from "./SelectionToolbar";
+import { cn } from "@/lib/utils";
+
+export default function DataTable({
+  data,
+  columns,
+  attributes = [],
+  pagination,
+  setPagination,
+  loading,
+  onFetch,
+  onFetchFilterData,
+  onRefsReady,
+  renderFilterSheet,
+  toolbarActions = [],
+  selectionActions = [],
+  showColumnToggle = true,
+  title = "Records",
+  emptyMessage = "No records match the current filters.",
+  recordLabel = "record",
+  pageSizeOptions = pageSizes,
+  columnPinning = { right: [], left: [] },
+  className = "",
+  enableRowSelection = true,
+}) {
+  // ─── Refs — always hold latest filters and sort ───────────────────────────
+  const filtersRef = useRef([]);
+  const sortRef    = useRef([]);
+  
+  // ─── State ────────────────────────────────────────────────────────────────
+  const [activeColumn,      setActiveColumn]      = useState(null);
+  const [sorting,           setSorting]           = useState([]);
+  const [columnFilters,     setColumnFilters]     = useState([]);
+  const [columnVisibility,  setColumnVisibility]  = useState({});
+  const [rowSelection,      setRowSelection]      = useState({});
+  const [filterState,       setFilterState]       = useState({
+    open: false, column: null, attr: null, data: [],
+  });
+  // Caches the { value, label } picklist fetched per field (e.g. createdBy's
+  // [{value: 56, label: "Obsequio, Russell..."}]) so ActiveFilterPills can
+  // show a name instead of a raw id once a filter is applied — the sheet
+  // itself only holds this data while open.
+  const [fieldOptions,      setFieldOptions]       = useState({});
+
+  const activeFilters = columnFilters.filter((f) => f.value !== "");
+
+  // ─── setFilters — called externally by dashboard charts ──────────────────
+  // Merges incoming filters with existing ones (replaces by id, appends new).
+  // Pass an empty array [] to clear all filters.
+  const setFilters = useCallback((incomingFilters) => {
+    setColumnFilters((prev) => {
+      let next;
+
+      if (!incomingFilters.length) {
+        next = [];
+      } else {
+        // Replace matching ids, keep the rest
+        const incomingIds = new Set(incomingFilters.map((f) => f.id));
+        const kept        = prev.filter((f) => !incomingIds.has(f.id));
+        next              = [...kept, ...incomingFilters];
+      }
+
+      const newFilters    = next.filter((f) => f.value !== "");
+      filtersRef.current  = newFilters;
+
+      onFetch({
+        page:    1,
+        limit:   pagination.limit,
+        filters: newFilters,
+        sort:    sortRef.current,
+      });
+
+      return next;
+    });
+  }, [onFetch, pagination.limit]);
+
+  // ─── Expose refs to parent ────────────────────────────────────────────────
+  useEffect(() => {
+    onRefsReady?.({
+      getFilters:     () => filtersRef.current,
+      getSort:        () => sortRef.current,
+      resetSelection: () => table.resetRowSelection(),
+      setFilters,                                     
+      tableInstance:  table,
+    });
+
+    onFetch({ page: 1, limit: pagination.limit, filters: [], sort: [] });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setFilters]);
+
+  const handleOpenFilterSheet = async (e, column, attr) => {
+    e.preventDefault();
+    setActiveColumn(null);
+
+    // Enum/boolean columns already carry their full value set in
+    // attr.options.choices (see FilterSheet.jsx's sourceData) — hitting
+    // the field-values endpoint for them is a wasted round-trip.
+    if (attr?.type === "enum") {
+      setFilterState({ open: true, column, attr, data: [] });
+      return;
+    }
+
+    const data = await onFetchFilterData(attr.field);
+    setFilterState({ open: true, column, attr, data });
+    setFieldOptions((prev) => ({ ...prev, [attr.field]: data }));
+  };
+
+  const table = useReactTable({
+    data,
+    columns,
+    initialState: { columnPinning },
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination: {
+        pageIndex: pagination.page - 1,
+        pageSize:  pagination.limit,
+      },
+    },
+    enableRowSelection,
+    onRowSelectionChange:  setRowSelection,
+    manualPagination:      true,
+    manualSorting:         true,
+    manualFiltering:       true,
+    pageCount:             pagination.totalPages,
+
+    // ─── Sort change ──────────────────────────────────────────────────────
+    onSortingChange: (updater) => {
+      const next    = typeof updater === "function" ? updater(sorting) : updater;
+      const newSort = next.length ? [{ id: next[0].id, desc: next[0].desc }] : [];
+
+      setSorting(next);
+      sortRef.current = newSort;
+
+      onFetch({
+        page:    1,
+        limit:   pagination.limit,
+        filters: filtersRef.current,
+        sort:    newSort,
+      });
+    },
+
+    // ─── Filter change ────────────────────────────────────────────────────
+    onColumnFiltersChange: (updater) => {
+      const next       = typeof updater === "function" ? updater(columnFilters) : updater;
+      const newFilters = next.filter((f) => f.value !== "");
+
+      setColumnFilters(next);
+      filtersRef.current = newFilters;
+
+      onFetch({
+        page:    1,
+        limit:   pagination.limit,
+        filters: newFilters,
+        sort:    sortRef.current,
+      });
+    },
+
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel:          getCoreRowModel(),
+  });
+
+  // ─── Page change ──────────────────────────────────────────────────────────
+  const handlePageChange = (page) => {
+    setPagination((p) => ({ ...p, page }));
+    onFetch({
+      page,
+      limit:   pagination.limit,
+      filters: filtersRef.current,
+      sort:    sortRef.current,
+    });
+  };
+
+  const selectedRows = useMemo(
+    () => table.getSelectedRowModel().rows.map((r) => r.original),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rowSelection, data]
+  );
+
+  const hasSelection = selectedRows.length > 0;
+
+  return (
+    <div className={`w-full bg-card rounded-lg border border-border mb-6 px-6 py-4 relative ${className}`}>
+
+      {/* ── Toolbar ── */}
+      {hasSelection ? (
+        <SelectionToolbar
+          selectedRows={selectedRows}
+          onClearSelection={() => table.resetRowSelection()}
+          selectionActions={selectionActions}
+          recordLabel={recordLabel}
+        />
+      ) : (
+        <div className="flex items-start justify-between gap-4 mb-5">
+          <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+          <div className="flex items-center gap-2 shrink-0">
+            <ActiveFilterPills
+              filters={activeFilters}
+              attributes={attributes}
+              fieldOptions={fieldOptions}
+              onClearAll={() => {
+                setColumnFilters([]);
+                filtersRef.current = [];
+                onFetch({ page: 1, limit: pagination.limit, filters: [], sort: sortRef.current });
+              }}
+              onRemove={(id) => {
+                const next       = columnFilters.filter((c) => c.id !== id);
+                const newFilters = next.filter((f) => f.value !== "");
+                setColumnFilters(next);
+                filtersRef.current = newFilters;
+                onFetch({ page: 1, limit: pagination.limit, filters: newFilters, sort: sortRef.current });
+              }}
+              showClearButton
+            />
+            <ToolbarActions actions={toolbarActions} />
+            {showColumnToggle && <ColumnVisibilityToggle table={table} />}
+          </div>
+        </div>
+      )}
+
+      <ActiveFilterPills
+        filters={activeFilters}
+        attributes={attributes}
+        fieldOptions={fieldOptions}
+        onRemove={(id) => {
+          const next       = columnFilters.filter((c) => c.id !== id);
+          const newFilters = next.filter((f) => f.value !== "");
+          setColumnFilters(next);
+          filtersRef.current = newFilters;
+          onFetch({ page: 1, limit: pagination.limit, filters: newFilters, sort: sortRef.current });
+        }}
+      />
+
+      {/* ── Table ── */}
+      <div className="rounded-lg border overflow-hidden">
+        <div className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              {table.getHeaderGroups().map((hg) => (
+                <TableRow key={hg.id} className="bg-muted/40 hover:bg-muted/40">
+                  {hg.headers.map((header) => {
+                    const isPinned = header.column.getIsPinned();
+                    const attr     = header.column.columnDef.meta?.attr;
+                    const isPlain  = header.column.id === "select" || header.column.id === "actions";
+
+                    return (
+                      <TableHead
+                        key={header.id}
+                        className={cn("align-middle whitespace-nowrap", isPinned ? "bg-muted" : "")}
+                        style={{
+                          position: isPinned ? "sticky" : "relative",
+                          right:    isPinned === "right" ? header.column.getStart("right") : undefined,
+                          left:     isPinned === "left"  ? header.column.getStart("left")  : undefined,
+                          zIndex:   isPinned ? 2 : 0,
+                          width:    header.column.columnDef.size,
+                        }}
+                      >
+                        {isPlain ? (
+                          flexRender(header.column.columnDef.header, header.getContext())
+                        ) : (
+                          <ColumnActionsDropdown
+                            header={header}
+                            attr={attr}
+                            isOpen={activeColumn === header.column.id}
+                            onOpenChange={(isOpen) => setActiveColumn(isOpen ? header.column.id : null)}
+                            onFilterClick={(e) => handleOpenFilterSheet(e, header.column, attr)}
+                            showFilter={attr?.filterable}
+                          />
+                        )}
+                      </TableHead>
+                    );
+                  })}
+                </TableRow>
+              ))}
+            </TableHeader>
+
+            {renderFilterSheet?.({
+              open:         filterState.open,
+              onOpenChange: (v) => setFilterState((p) => ({ ...p, open: v })),
+              column:       filterState.column,
+              attr:         filterState.attr,
+              data:         filterState.data,
+              loading,
+            })}
+
+            <TableBody>
+              {table.getRowModel().rows.length === 0 ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={table.getVisibleLeafColumns().length}
+                    className="text-center py-16 text-muted-foreground text-sm"
+                  >
+                    {emptyMessage}
+                  </TableCell>
+                </TableRow>
+              ) : (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() ? "selected" : undefined}
+                    className="hover:bg-muted/30 transition-colors data-[state=selected]:bg-primary/5"
+                  >
+                    {row.getVisibleCells().map((cell) => {
+                      const isPinned = cell.column.getIsPinned();
+                      return (
+                        <TableCell
+                          key={cell.id}
+                          className={cn("m-0", isPinned && "bg-card")}
+                          style={{
+                            position: isPinned ? "sticky" : "relative",
+                            right:    isPinned === "right" ? 0 : undefined,
+                            left:     isPinned === "left"  ? cell.column.getStart("left") : undefined,
+                            zIndex:   isPinned ? 1 : 0,
+                          }}
+                        >
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </TableCell>
+                      );
+                    })}
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </div>
+
+        {loading && (
+          <div className="absolute inset-0 flex items-center justify-center bg-background/60 backdrop-blur-sm z-10">
+            <Spinner className="size-8" />
+          </div>
+        )}
+      </div>
+
+      {/* ── Footer ── */}
+      <TablePagination
+        table={table}
+        pagination={pagination}
+        onPageChange={handlePageChange}
+        totalRecords={pagination.totalRecords}
+        rowCount={data.length}
+        onPageSizeChange={(size) => {
+          setPagination((p) => ({ ...p, limit: size, page: 1 }));
+          onFetch({
+            page:    1,
+            limit:   size,
+            filters: filtersRef.current,
+            sort:    sortRef.current,
+          });
+        }}
+        pageSizeOptions={pageSizeOptions}
+        recordLabel={recordLabel}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Table/RowActions.jsx b/apps/web/src/components/generic/Table/RowActions.jsx
new file mode 100644
index 0000000..b8ef648
--- /dev/null
+++ b/apps/web/src/components/generic/Table/RowActions.jsx
@@ -0,0 +1,103 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { MoreHorizontal } from "lucide-react";
+
+/**
+ * RowActions
+ *
+ * Renders a single kebab (⋯) dropdown per row containing all defined actions.
+ * Each action is evaluated against the row's data for conditional
+ * visibility and disabled state.
+ *
+ * ─── Action definition shape ─────────────────────────────────────────────────
+ *
+ * @field {string}    key              Unique identifier
+ * @field {string}    label            Menu item text
+ * @field {ReactNode} [icon]           Optional leading icon
+ * @field {Function}  onClick          (rowData) => void
+ * @field {Function|boolean} [hidden]  (rowData) => boolean  — hide for specific rows
+ * @field {Function|boolean} [disabled](rowData) => boolean  — disable for specific rows
+ * @field {boolean}   [separator]      Render a separator BEFORE this item
+ * @field {string}    [className]      Extra classes on the menu item
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * @param {Object}  row              TanStack row object (row.original = raw data)
+ * @param {Array}   rowActions       Array of action definitions
+ * @param {string}  [dropdownLabel]  Label shown at top of the menu (default: "Actions")
+ * @param {string}  [align]          Dropdown alignment ("end" | "start", default: "end")
+ */
+export function RowActions({
+  row,
+  rowActions = [],
+  dropdownLabel = "Actions",
+  align = "end",
+}) {
+  const data = row.original;
+  const visibleActions = rowActions.filter((a) => !resolveFlag(a.hidden, data));
+
+  if (!visibleActions.length) return null;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 w-7 p-0 data-[state=open]:bg-muted"
+          aria-label="Open actions"
+        >
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align={align} className="w-44">
+        {dropdownLabel && (
+          <>
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              {dropdownLabel}
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+          </>
+        )}
+
+        {visibleActions.map((action) => {
+          const isDisabled = resolveFlag(action.disabled, data);
+
+          return (
+            <span key={action.key}>
+              {action.separator && <DropdownMenuSeparator />}
+              <DropdownMenuItem
+                onClick={() => action.onClick(data)}
+                disabled={isDisabled}
+                className={action.className}
+              >
+                {action.icon && (
+                  <span className="mr-2 flex items-center size-4">
+                    {action.icon}
+                  </span>
+                )}
+                {action.label}
+              </DropdownMenuItem>
+            </span>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+// ── Helper ────────────────────────────────────────────────────────────────────
+
+/** Resolves a flag that is either a static boolean or a (rowData) => boolean fn */
+function resolveFlag(flag, data) {
+  if (typeof flag === "function") return flag(data);
+  return flag ?? false;
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Table/SelectionToolbar.jsx b/apps/web/src/components/generic/Table/SelectionToolbar.jsx
new file mode 100644
index 0000000..8441602
--- /dev/null
+++ b/apps/web/src/components/generic/Table/SelectionToolbar.jsx
@@ -0,0 +1,91 @@
+import { Button } from "@/components/ui/button";
+import { X } from "lucide-react";
+
+/**
+ * SelectionToolbar
+ *
+ * Replaces the normal toolbar area when one or more rows are selected.
+ * Shows a selection count and flat inline action buttons — no dropdowns,
+ * since the actions are already visible.
+ *
+ * ─── Selection action definition shape ───────────────────────────────────────
+ *
+ * @field {string}            key           Unique identifier
+ * @field {string}            label         Button text
+ * @field {ReactNode}         [icon]        Optional leading icon
+ * @field {Function}          onClick       (selectedRows: rowData[], table: TableInstance) => void
+ *                                          Receives selected row data AND the TanStack table instance
+ *                                          so handlers like export can call table.getVisibleLeafColumns().
+ * @field {string}            [variant]     shadcn Button variant (default: "outline")
+ * @field {string}            [className]   Extra classes
+ * @field {boolean|Function}  [disabled]    Static boolean or (selectedRows) => boolean
+ * @field {boolean|Function}  [hidden]      Static boolean or (selectedRows) => boolean
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * @param {Array}          selectedRows      Array of raw row data objects
+ * @param {Function}       onClearSelection  () => void — clears all checkboxes
+ * @param {Array}          selectionActions  Action button definitions (see above)
+ * @param {string}         [recordLabel]     Singular label (default: "record")
+ * @param {TableInstance}  table             TanStack table instance forwarded from DataTable.
+ *                                           Passed as the second argument to every onClick handler.
+ */
+export function SelectionToolbar({
+  selectedRows = [],
+  onClearSelection,
+  selectionActions = [],
+  recordLabel = "record",
+  table,
+}) {
+  if (!selectedRows.length) return null;
+
+  const count = selectedRows.length;
+  const label = count === 1 ? recordLabel : `${recordLabel}s`;
+
+  return (
+    <div className="flex items-center justify-between gap-4 mb-5">
+      {/* Left: count + clear */}
+      <div className="flex items-center gap-2">
+        <button
+          onClick={onClearSelection}
+          className="flex items-center justify-center h-5 w-5 rounded-sm border border-primary bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+          aria-label="Clear selection"
+        >
+          <X className="h-3 w-3" />
+        </button>
+        <span className="text-sm font-medium">
+          {count} {label} selected
+        </span>
+      </div>
+
+      {/* Right: flat action buttons */}
+      <div className="flex items-center gap-2 shrink-0">
+        {selectionActions
+          .filter((a) => !resolveFlag(a.hidden, selectedRows))
+          .map((action) => {
+            const isDisabled = resolveFlag(action.disabled, selectedRows);
+            return (
+              <Button
+                key={action.key}
+                variant={action.variant ?? "outline"}
+                size="sm"
+                className={`h-8 text-xs gap-1.5 ${action.className ?? ""}`}
+                onClick={() => action.onClick(selectedRows, table)}
+                disabled={isDisabled}
+              >
+                {action.icon}
+                {action.label}
+              </Button>
+            );
+          })}
+      </div>
+    </div>
+  );
+}
+
+// ── Helper ────────────────────────────────────────────────────────────────────
+
+function resolveFlag(flag, data) {
+  if (typeof flag === "function") return flag(data);
+  return flag ?? false;
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Table/TablePagination.jsx b/apps/web/src/components/generic/Table/TablePagination.jsx
new file mode 100644
index 0000000..47a7b16
--- /dev/null
+++ b/apps/web/src/components/generic/Table/TablePagination.jsx
@@ -0,0 +1,119 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { ChevronsLeft, ChevronsRight } from "lucide-react";
+import { pageSizes } from "@/utils/table.util";
+
+/**
+ * TablePagination
+ *
+ * Footer bar with First / Previous / Next / Last page controls,
+ * a "Page X of Y" indicator, a row count summary, and a rows-per-page picker.
+ *
+ * Props:
+ * @param {Object}   pagination           - { page, limit, totalPages, totalRecords, hasPrevPage, hasNextPage }
+ * @param {Function} onPageChange        - (updater | patch) => void
+ * @param {number}   rowCount             - Number of rows currently visible (e.g. users.length)
+ * @param {number}   [totalRecords]       - Grand total record count (falls back to pagination.totalRecords)
+ * @param {Function} [onPageSizeChange]   - (size: number) => void  — called when rows-per-page changes
+ * @param {number[]} [pageSizeOptions]    - Options for rows-per-page picker (default: [10, 50, 100])
+ * @param {string}   [recordLabel]        - Singular label for records (default: "record")
+ * @param {Object}   [table]              - TanStack table instance (used to read current pageSize)
+ */
+export function TablePagination({
+  pagination,
+  onPageChange,
+  rowCount,
+  totalRecords,
+  onPageSizeChange,
+  pageSizeOptions = pageSizes,
+  recordLabel = "record",
+  table,
+}) {
+  const total = totalRecords ?? pagination.totalRecords;
+  const currentPageSize = pagination.limit;
+  const pluralLabel = rowCount === 1 ? recordLabel : `${recordLabel}s`;
+
+  return (
+    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 px-4 py-4 border-t border-border">
+      <div className="text-sm text-muted-foreground">
+        Showing {rowCount} of {total} {pluralLabel}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2 justify-end">
+        {/* First */}
+        <Button
+          variant="outline"
+          onClick={() => onPageChange(1)}
+          disabled={!pagination.hasPrevPage}
+        >
+          <ChevronsLeft className="size-4" /> First
+        </Button>
+
+        {/* Previous */}
+        <Button
+          variant="outline"
+          onClick={() => onPageChange(pagination.page - 1)}
+          disabled={!pagination.hasPrevPage}
+        >
+          Previous
+        </Button>
+
+        <span className="text-sm font-medium px-2">
+          Page {pagination.page} of {pagination.totalPages}
+        </span>
+
+        {/* Next */}
+        <Button
+          variant="outline"
+          onClick={() => onPageChange(pagination.page + 1)}
+          disabled={!pagination.hasNextPage}
+        >
+          Next
+        </Button>
+
+        {/* Last */}
+        <Button
+          variant="outline"
+          onClick={() => onPageChange(pagination.totalPages)}
+          disabled={!pagination.hasNextPage}
+        >
+          Last <ChevronsRight className="size-4" />
+        </Button>
+
+        {/* Rows per page */}
+        {onPageSizeChange && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" className="font-medium text-sm">
+                Rows per page: {currentPageSize}
+              </Button>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent align="end">
+              <DropdownMenuLabel>Select rows</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              {pageSizeOptions.map((size) => (
+                <DropdownMenuItem
+                  key={size}
+                  onClick={() => onPageSizeChange(size)}
+                  className={
+                    currentPageSize === size ? "bg-muted font-medium" : ""
+                  }
+                >
+                  Show {size}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Table/ToolbarActions.jsx b/apps/web/src/components/generic/Table/ToolbarActions.jsx
new file mode 100644
index 0000000..6dd9d24
--- /dev/null
+++ b/apps/web/src/components/generic/Table/ToolbarActions.jsx
@@ -0,0 +1,153 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { ChevronDown } from "lucide-react";
+
+/**
+ * ToolbarActions
+ *
+ * Renders a list of configurable toolbar buttons beside the column visibility toggle.
+ * Each button can be one of three types: "icon", "button", or "dropdown".
+ *
+ * ─── Button definition shape ───────────────────────────────────────────────────
+ *
+ * Common fields (all types):
+ * @field {string}    key              Unique identifier
+ * @field {"icon"|"button"|"dropdown"} type  Render mode
+ * @field {ReactNode} icon             Lucide icon or any ReactNode
+ * @field {string}    [label]          Text label (required for "button"; used as tooltip for "icon")
+ * @field {string}    [variant]        shadcn Button variant (default: "outline")
+ * @field {string}    [size]           shadcn Button size (default: "sm")
+ * @field {string}    [className]      Extra classes on the button
+ * @field {boolean}   [disabled]       Disable the button
+ * @field {boolean}   [hidden]         Completely hide the button
+ *
+ * For type "icon" | "button":
+ * @field {Function}  onClick          (table: TableInstance) => void
+ *                                     Receives the TanStack table instance so handlers
+ *                                     like export can call table.getVisibleLeafColumns().
+ *
+ * For type "dropdown":
+ * @field {string}    [dropdownLabel]  Optional label shown at the top of the dropdown
+ * @field {Array}     items            Dropdown item definitions:
+ * @field {string}    key              Unique key
+ * @field {ReactNode} icon             Item icon
+ * @field {string}    label            Item label
+ * @field {Function}  onClick          (table: TableInstance) => void
+ * @field {boolean}   [disabled]       Disable this item
+ * @field {boolean}   [hidden]         Hide this item
+ * @field {boolean}   [separator]      Render a separator BEFORE this item
+ * @field {string}    [className]      Extra classes on the item
+ *
+ * ───────────────────────────────────────────────────────────────────────────────
+ *
+ * @param {Array}          actions  Array of button definitions (see above)
+ * @param {string}         [align]  DropdownMenuContent align ("end" | "start", default: "end")
+ * @param {TableInstance}  table    TanStack table instance forwarded from DataTable.
+ *                                  Passed as the first argument to every onClick handler.
+ */
+export function ToolbarActions({ actions = [], align = "end", table }) {
+  if (!actions.length) return null;
+
+  return (
+    <>
+      {actions
+        .filter((action) => !action.hidden)
+        .map((action) => {
+          // ── Icon-only button ─────────────────────────────────────────────
+          if (action.type === "icon") {
+            return (
+              <Button
+                key={action.key}
+                variant={action.variant ?? "outline"}
+                size={action.size ?? "sm"}
+                className={`h-8 w-8 p-0 ${action.className ?? ""}`}
+                onClick={() => action.onClick(table)}
+                disabled={action.disabled}
+                title={action.label}
+                aria-label={action.label}
+              >
+                {action.icon}
+              </Button>
+            );
+          }
+
+          // ── Icon + label button ──────────────────────────────────────────
+          if (action.type === "button") {
+            return (
+              <Button
+                key={action.key}
+                variant={action.variant ?? "outline"}
+                size={action.size ?? "sm"}
+                className={`h-8 text-xs gap-1.5 ${action.className ?? ""}`}
+                onClick={() => action.onClick(table)}
+                disabled={action.disabled}
+              >
+                {action.icon}
+                {action.label}
+              </Button>
+            );
+          }
+
+          // ── Dropdown button ──────────────────────────────────────────────
+          if (action.type === "dropdown") {
+            const visibleItems = (action.items ?? []).filter((i) => !i.hidden);
+
+            return (
+              <DropdownMenu key={action.key}>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant={action.variant ?? "outline"}
+                    size={action.size ?? "sm"}
+                    className={`h-8 text-xs gap-1.5 ${action.className ?? ""}`}
+                    disabled={action.disabled}
+                  >
+                    {action.icon}
+                    {action.label}
+                    <ChevronDown className="h-3.5 w-3.5" />
+                  </Button>
+                </DropdownMenuTrigger>
+
+                <DropdownMenuContent align={align} className="w-48">
+                  {action.dropdownLabel && (
+                    <>
+                      <DropdownMenuLabel className="text-xs text-muted-foreground">
+                        {action.dropdownLabel}
+                      </DropdownMenuLabel>
+                      <DropdownMenuSeparator />
+                    </>
+                  )}
+
+                  {visibleItems.map((item) => (
+                    <span key={item.key}>
+                      {item.separator && <DropdownMenuSeparator />}
+                      <DropdownMenuItem
+                        onClick={() => item.onClick(table)}
+                        disabled={item.disabled}
+                        className={item.className}
+                      >
+                        {item.icon && (
+                          <span className="mr-2 flex items-center">
+                            {item.icon}
+                          </span>
+                        )}
+                        {item.label}
+                      </DropdownMenuItem>
+                    </span>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            );
+          }
+
+          return null;
+        })}
+    </>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/Table/buildRowActionsColumn.jsx b/apps/web/src/components/generic/Table/buildRowActionsColumn.jsx
new file mode 100644
index 0000000..2a1e490
--- /dev/null
+++ b/apps/web/src/components/generic/Table/buildRowActionsColumn.jsx
@@ -0,0 +1,88 @@
+import { RowActions } from "@/components/generic/Table/RowActions";
+
+/**
+ * buildRowActionsColumn
+ *
+ * Factory that returns a TanStack column definition for the kebab actions column.
+ * Append the result to your `columns` array — no other setup needed.
+ *
+ * @param {Array}  rowActions              Action definitions (see RowActions for shape)
+ * @param {Object} [options]
+ * @param {string} [options.id]            Column id           (default: "actions")
+ * @param {string} [options.header]        Column header text  (default: "")
+ * @param {string} [options.dropdownLabel] Kebab menu label    (default: "Actions")
+ * @param {string} [options.align]         Dropdown alignment  (default: "end")
+ * @param {number} [options.size]          Column px width     (default: 48)
+ * @returns {Object} TanStack ColumnDef
+ *
+ * ─── Usage ───────────────────────────────────────────────────────────────────
+ *
+ * import { buildRowActionsColumn } from "@/components/generic/buildRowActionsColumn";
+ * import { Pencil, Trash2, Eye, Archive } from "lucide-react";
+ *
+ * const columns = [
+ *   ...buildColumns(attributes),
+ *
+ *   buildRowActionsColumn(
+ *     [
+ *       {
+ *         key: "view",
+ *         label: "View details",
+ *         icon: <Eye className="h-3.5 w-3.5" />,
+ *         onClick: (row) => navigate(`/users/${row.id}`),
+ *       },
+ *       {
+ *         key: "edit",
+ *         label: "Edit",
+ *         icon: <Pencil className="h-3.5 w-3.5" />,
+ *         onClick: (row) => navigate(`/users/${row.id}/edit`),
+ *         disabled: (row) => row.role === "super_admin",
+ *       },
+ *       {
+ *         key: "archive",
+ *         label: "Archive",
+ *         icon: <Archive className="h-3.5 w-3.5" />,
+ *         onClick: (row) => archiveUser(row.id),
+ *         hidden: (row) => row.status === "archived",
+ *         separator: true,
+ *       },
+ *       {
+ *         key: "delete",
+ *         label: "Delete",
+ *         icon: <Trash2 className="h-3.5 w-3.5" />,
+ *         className: "text-destructive focus:text-destructive",
+ *         onClick: (row) => confirmDelete(row.id),
+ *         disabled: (row) => row.role === "admin",
+ *       },
+ *     ],
+ *     { dropdownLabel: "User Actions" }
+ *   ),
+ * ];
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ */
+export function buildRowActionsColumn(rowActions, options = {}) {
+  const {
+    id = "actions",
+    header = "Actions",
+    dropdownLabel = "Actions",
+    align = "end",
+    size = 48,
+  } = options;
+
+  return {
+    id,
+    header,
+    size,
+    enableSorting: false,
+    enableHiding: false,
+    cell: ({ row }) => (
+      <RowActions
+        row={row}
+        rowActions={rowActions}
+        dropdownLabel={dropdownLabel}
+        align={align}
+      />
+    ),
+  };
+}
diff --git a/apps/web/src/components/generic/Table/buildSelectionColumn.jsx b/apps/web/src/components/generic/Table/buildSelectionColumn.jsx
new file mode 100644
index 0000000..3cedcf1
--- /dev/null
+++ b/apps/web/src/components/generic/Table/buildSelectionColumn.jsx
@@ -0,0 +1,70 @@
+import { Checkbox } from "@/components/ui/checkbox";
+
+/**
+ * buildSelectionColumn
+ *
+ * Returns a TanStack column definition for the checkbox selection column.
+ * Prepend this to your `columns` array.
+ *
+ * The header renders a "select all on this page" checkbox with an
+ * indeterminate state when only some rows are checked.
+ * Each cell renders a per-row checkbox, disabled for any row TanStack
+ * reports as non-selectable via `row.getCanSelect()` — controlled by
+ * passing a function to DataTable's `enableRowSelection` prop, e.g.
+ * `enableRowSelection={(row) => row.original.user_id !== currentUserId}`
+ * to prevent a user from selecting their own row.
+ *
+ * @returns {Object} TanStack ColumnDef
+ *
+ * ─── Usage ───────────────────────────────────────────────────────────────────
+ *
+ * import { buildSelectionColumn } from "@/components/generic/buildSelectionColumn";
+ *
+ * const columns = [
+ *   buildSelectionColumn(),
+ *   ...buildColumns(attributes),
+ *   buildRowActionsColumn(rowActions),
+ * ];
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ */
+export function buildSelectionColumn() {
+  return {
+    id: "select",
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+
+    header: ({ table }) => (
+      <div className="flex items-center justify-center px-1">
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected()
+              ? true
+              : table.getIsSomePageRowsSelected()
+              ? "indeterminate"
+              : false
+          }
+          onCheckedChange={(value) =>
+            table.toggleAllPageRowsSelected(!!value)
+          }
+          aria-label="Select all rows on this page"
+        />
+      </div>
+    ),
+
+    cell: ({ row }) => {
+      const canSelect = row.getCanSelect();
+      return (
+        <div className="flex items-center justify-center px-1">
+          <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            disabled={!canSelect}
+            aria-label={canSelect ? "Select row" : "Row cannot be selected"}
+          />
+        </div>
+      );
+    },
+  };
+}
diff --git a/apps/web/src/components/generic/TaskMultiSelect.jsx b/apps/web/src/components/generic/TaskMultiSelect.jsx
new file mode 100644
index 0000000..0ccaf4f
--- /dev/null
+++ b/apps/web/src/components/generic/TaskMultiSelect.jsx
@@ -0,0 +1,284 @@
+/***********************************************************************************************************************************************************************
+ * File Name    : TaskMultiSelect.jsx
+ * Type         : Reusable Component
+ * Description  : Searchable multi-select dropdown for sibling Tasks (used to pick
+ *                a task's prerequisite tasks). Cloned from GroupMultiSelect.jsx's
+ *                UI/UX — portal dropdown, badge + "+N" overflow, select all/clear —
+ *                but takes `tasks` directly from the caller instead of fetching its
+ *                own endpoint, since the parent page already has the sibling task
+ *                list loaded.
+ *
+ * Props:
+ *   value       : string[]                    — selected task_ids
+ *   onChange    : (ids: string[]) => void
+ *   tasks       : { task_id, name }[]          — candidate tasks (already excludes self)
+ *   disabled?   : boolean
+ *   placeholder?: string
+ ***********************************************************************************************************************************************************************/
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+import { Check, ChevronsUpDown, X, ListChecks, ChevronLeft, ChevronRight } from 'lucide-react';
+
+const PAGE_SIZE = 5;
+
+export default function TaskMultiSelect({
+    value = [],
+    onChange,
+    tasks = [],
+    disabled = false,
+    placeholder = 'Select tasks…',
+}) {
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState('');
+    const [page, setPage] = useState(1);
+    const [dropdownStyle, setDropdownStyle] = useState({});
+
+    const triggerRef  = useRef(null);
+    const dropdownRef = useRef(null);
+
+    // ── Position portal dropdown under trigger ────────────────────────────────
+    useLayoutEffect(() => {
+        if (!open || !triggerRef.current) return;
+
+        const reposition = () => {
+            const rect = triggerRef.current.getBoundingClientRect();
+            setDropdownStyle({
+                position: 'fixed',
+                top:   rect.bottom + 4,
+                left:  rect.left,
+                width: rect.width,
+                zIndex: 9999,
+            });
+        };
+
+        reposition();
+        window.addEventListener('scroll', reposition, true);
+        window.addEventListener('resize', reposition);
+        return () => {
+            window.removeEventListener('scroll', reposition, true);
+            window.removeEventListener('resize', reposition);
+        };
+    }, [open]);
+
+    // ── Close on outside click ────────────────────────────────────────────────
+    useEffect(() => {
+        if (!open) return;
+        const handler = (e) => {
+            if (
+                triggerRef.current?.contains(e.target) ||
+                dropdownRef.current?.contains(e.target)
+            ) return;
+            setOpen(false);
+            setSearch('');
+        };
+        document.addEventListener('mousedown', handler);
+        return () => document.removeEventListener('mousedown', handler);
+    }, [open]);
+
+    // ── Helpers ───────────────────────────────────────────────────────────────
+    const filtered = tasks.filter((t) =>
+        t.name.toLowerCase().includes(search.toLowerCase())
+    );
+    const selectedTasks  = tasks.filter((t) => value.includes(t.task_id));
+    const overflowCount  = selectedTasks.length - 1;
+
+    // All currently visible (filtered) IDs — used for select-all scope
+    const filteredIds    = filtered.map((t) => t.task_id);
+    const allFilteredSelected = filteredIds.length > 0 && filteredIds.every((id) => value.includes(id));
+
+    // ── Pagination ────────────────────────────────────────────────────────────
+    const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+    const safePage    = Math.min(page, totalPages);
+    const paginated   = filtered.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE);
+
+    // Reset to page 1 whenever the search term changes
+    const handleSearchChange = (e) => {
+        setSearch(e.target.value);
+        setPage(1);
+    };
+
+    const toggle = (taskId) =>
+        onChange(value.includes(taskId)
+            ? value.filter((id) => id !== taskId)
+            : [...value, taskId]
+        );
+
+    const remove = (e, taskId) => {
+        e.stopPropagation();
+        onChange(value.filter((id) => id !== taskId));
+    };
+
+    // Select all visible (filtered) tasks
+    const handleSelectAll = () => {
+        const merged = Array.from(new Set([...value, ...filteredIds]));
+        onChange(merged);
+    };
+
+    // Clear all selections
+    const handleClear = () => onChange([]);
+
+    // ── Portal dropdown ───────────────────────────────────────────────────────
+    const dropdown = open && createPortal(
+        <div
+            ref={dropdownRef}
+            style={dropdownStyle}
+            className="rounded-md border border-border bg-popover shadow-lg"
+        >
+            {/* Search row */}
+            <div className="p-2 border-b border-border">
+                <Input
+                    autoFocus
+                    value={search}
+                    onChange={handleSearchChange}
+                    placeholder="Search tasks…"
+                    className="h-8 text-sm"
+                />
+            </div>
+
+            {/* Select all / Clear row */}
+            {tasks.length > 0 && (
+                <div className="flex items-center justify-between px-3 py-1.5 border-b border-border bg-muted/40">
+                    <button
+                        type="button"
+                        onMouseDown={(e) => e.preventDefault()}
+                        onClick={allFilteredSelected ? handleClear : handleSelectAll}
+                        className="text-xs text-primary hover:underline underline-offset-2 font-medium"
+                    >
+                        {allFilteredSelected ? 'Deselect all' : 'Select all'}
+                        {search && ` (${filteredIds.length})`}
+                    </button>
+                    {value.length > 0 && (
+                        <button
+                            type="button"
+                            onMouseDown={(e) => e.preventDefault()}
+                            onClick={handleClear}
+                            className="text-xs text-muted-foreground hover:text-destructive transition-colors"
+                        >
+                            Clear ({value.length})
+                        </button>
+                    )}
+                </div>
+            )}
+
+            {/* Options */}
+            <ul className="py-1">
+                {filtered.length === 0 ? (
+                    <li className="px-3 py-6 text-center text-xs text-muted-foreground">
+                        No tasks found.
+                    </li>
+                ) : (
+                    paginated.map((t) => {
+                        const selected = value.includes(t.task_id);
+                        return (
+                            <li
+                                key={t.task_id}
+                                onMouseDown={(e) => e.preventDefault()}
+                                onClick={() => toggle(t.task_id)}
+                                className={cn(
+                                    'flex items-center gap-2 px-3 py-2 text-sm cursor-pointer select-none',
+                                    'hover:bg-accent hover:text-accent-foreground',
+                                    selected && 'bg-accent/50'
+                                )}
+                            >
+                                <div className={cn(
+                                    'h-4 w-4 rounded border flex items-center justify-center shrink-0',
+                                    selected
+                                        ? 'bg-primary border-primary text-primary-foreground'
+                                        : 'border-input'
+                                )}>
+                                    {selected && <Check className="h-3 w-3" />}
+                                </div>
+                                <ListChecks className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                <span className="truncate">{t.name}</span>
+                            </li>
+                        );
+                    })
+                )}
+            </ul>
+
+            {/* Pagination */}
+            {filtered.length > PAGE_SIZE && (
+                <div className="flex items-center justify-between px-3 py-1.5 border-t border-border bg-muted/40">
+                    <button
+                        type="button"
+                        onMouseDown={(e) => e.preventDefault()}
+                        onClick={() => setPage((p) => Math.max(1, p - 1))}
+                        disabled={safePage <= 1}
+                        className="flex items-center gap-0.5 text-xs text-muted-foreground hover:text-foreground disabled:opacity-40 disabled:pointer-events-none"
+                    >
+                        <ChevronLeft className="h-3.5 w-3.5" />
+                        Prev
+                    </button>
+                    <span className="text-xs text-muted-foreground tabular-nums">
+                        {safePage} / {totalPages}
+                    </span>
+                    <button
+                        type="button"
+                        onMouseDown={(e) => e.preventDefault()}
+                        onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                        disabled={safePage >= totalPages}
+                        className="flex items-center gap-0.5 text-xs text-muted-foreground hover:text-foreground disabled:opacity-40 disabled:pointer-events-none"
+                    >
+                        Next
+                        <ChevronRight className="h-3.5 w-3.5" />
+                    </button>
+                </div>
+            )}
+        </div>,
+        document.body
+    );
+
+    return (
+        <>
+            {/* ── Trigger button ───────────────────────────────────────────── */}
+            <button
+                ref={triggerRef}
+                type="button"
+                disabled={disabled}
+                onClick={() => { setOpen((o) => !o); setSearch(''); setPage(1); }}
+                className={cn(
+                    'w-full min-h-9 px-3 py-1.5 rounded-md border border-input bg-background text-sm',
+                    'flex items-center gap-1.5 text-left',
+                    'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1',
+                    'disabled:opacity-50 disabled:cursor-not-allowed',
+                    open && 'ring-2 ring-ring ring-offset-1'
+                )}
+            >
+                {selectedTasks.length === 0 ? (
+                    <span className="text-muted-foreground flex-1">{placeholder}</span>
+                ) : (
+                    <span className="flex items-center gap-1 flex-1 min-w-0">
+                        {/* Always show only the first selected task */}
+                        <Badge variant="secondary" className="gap-1 text-xs pr-1 shrink-0 max-w-[180px]">
+                            <ListChecks className="h-3 w-3 shrink-0" />
+                            <span className="truncate">{selectedTasks[0].name}</span>
+                            <span
+                                role="button"
+                                tabIndex={0}
+                                onClick={(e) => remove(e, selectedTasks[0].task_id)}
+                                onKeyDown={(e) => e.key === 'Enter' && remove(e, selectedTasks[0].task_id)}
+                                className="ml-0.5 rounded-full hover:bg-muted-foreground/20 p-0.5 cursor-pointer shrink-0"
+                            >
+                                <X className="h-2.5 w-2.5" />
+                            </span>
+                        </Badge>
+
+                        {/* +N overflow chip */}
+                        {overflowCount > 0 && (
+                            <Badge variant="outline" className="text-xs px-1.5 shrink-0">
+                                +{overflowCount}
+                            </Badge>
+                        )}
+                    </span>
+                )}
+                <ChevronsUpDown className="h-3.5 w-3.5 text-muted-foreground shrink-0 ml-auto" />
+            </button>
+
+            {/* ── Portalled dropdown ────────────────────────────────────────── */}
+            {dropdown}
+        </>
+    );
+}
diff --git a/apps/web/src/components/generic/TranscodeStatusBanner.jsx b/apps/web/src/components/generic/TranscodeStatusBanner.jsx
new file mode 100644
index 0000000..a59277d
--- /dev/null
+++ b/apps/web/src/components/generic/TranscodeStatusBanner.jsx
@@ -0,0 +1,22 @@
+// components/generic/TranscodeStatusBanner.jsx
+//
+// Small inline notice for a video asset's background remux (see backend
+// services/assetTranscode.service.js) — .mov/.mkv uploads get repackaged
+// into a faststart .mp4 for fast in-browser playback. Non-blocking: the
+// asset still plays from its original (slower) file while this is pending/
+// processing, this banner is just a heads-up. Renders nothing once the
+// asset is "done"/"none" (fast already) — "failed" also renders nothing,
+// the asset just quietly keeps playing from the original.
+
+import { Loader2 } from "lucide-react";
+
+export function TranscodeStatusBanner({ status }) {
+    if (status !== "pending" && status !== "processing") return null;
+
+    return (
+        <div className="flex items-center gap-2 px-3 py-2 text-xs text-muted-foreground bg-muted/40 border-b">
+            <Loader2 className="size-3.5 animate-spin" />
+            Optimizing this video for faster playback — still watchable now, will load quicker shortly.
+        </div>
+    );
+}
diff --git a/apps/web/src/components/generic/UploadProgressToast.jsx b/apps/web/src/components/generic/UploadProgressToast.jsx
new file mode 100644
index 0000000..9362507
--- /dev/null
+++ b/apps/web/src/components/generic/UploadProgressToast.jsx
@@ -0,0 +1,109 @@
+// components/generic/UploadProgressToast.jsx
+//
+// Floating widget mounted once in AdminLayout (outside the router Outlet's
+// unmount cycle) so it keeps showing Add Assets Bulk's upload progress no
+// matter what admin page you navigate to mid-batch. State comes from
+// UploadQueueContext, which lives above the router for the same reason.
+//
+// Only renders "bulk"-sourced jobs — Add File (single) uploads share the
+// same underlying queue (so they too survive navigation) but get their own
+// SingleUploadToast instead of being folded into this multi-file "N of M"
+// widget, which was designed around an actual batch and reads oddly for a
+// single file.
+
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { ChevronUp, ChevronDown, X, Loader2, CheckCircle2, XCircle } from "lucide-react";
+
+import { useUploadQueue } from "@/contexts/UploadQueueContext";
+import { Progress } from "@/components/ui/progress";
+import { Button } from "@/components/ui/button";
+
+const ACTIVE = new Set(["uploading", "queued"]);
+const FAILED = new Set(["failed", "invalid"]);
+
+export default function UploadProgressToast() {
+    const { jobs: allJobs, retryJob } = useUploadQueue();
+    const jobs = allJobs.filter((j) => j.source === "bulk");
+    const navigate = useNavigate();
+    const [dismissed, setDismissed] = useState(false);
+    const [expanded, setExpanded] = useState(false);
+    const prevActiveCountRef = useRef(0);
+
+    const active = jobs.filter((j) => ACTIVE.has(j.status));
+    const finished = jobs.filter((j) => !ACTIVE.has(j.status));
+
+    // A fresh batch starting up should always resurface the widget, even if
+    // the previous one was dismissed.
+    useEffect(() => {
+        if (prevActiveCountRef.current === 0 && active.length > 0) setDismissed(false);
+        prevActiveCountRef.current = active.length;
+    }, [active.length]);
+
+    if (dismissed || jobs.length === 0) return null;
+
+    const aggregatePct = active.length
+        ? Math.round(active.reduce((sum, j) => sum + j.progress, 0) / active.length)
+        : 100;
+
+    const failedCount = finished.filter((j) => FAILED.has(j.status)).length;
+
+    const label = active.length
+        ? `Uploading ${active.length} file${active.length === 1 ? "" : "s"}… ${aggregatePct}%`
+        : failedCount
+            ? `${finished.length - failedCount} of ${finished.length} file${finished.length === 1 ? "" : "s"} uploaded`
+            : `${finished.length} file${finished.length === 1 ? "" : "s"} uploaded`;
+
+    return (
+        <div className="fixed bottom-4 right-4 z-[60] w-80 rounded-lg border bg-card shadow-lg overflow-hidden">
+            <div
+                className="flex items-center gap-2 px-3 py-2.5 cursor-pointer select-none"
+                onClick={() => setExpanded((v) => !v)}
+            >
+                {active.length > 0
+                    ? <Loader2 className="h-4 w-4 animate-spin text-primary shrink-0" />
+                    : failedCount
+                        ? <XCircle className="h-4 w-4 text-destructive shrink-0" />
+                        : <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />}
+                <span className="text-sm font-medium flex-1 truncate">{label}</span>
+                <Button type="button" variant="ghost" size="icon" className="h-6 w-6" onClick={(e) => { e.stopPropagation(); setExpanded((v) => !v); }}>
+                    {expanded ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronUp className="h-3.5 w-3.5" />}
+                </Button>
+                <Button
+                    type="button" variant="ghost" size="icon" className="h-6 w-6"
+                    disabled={active.length > 0}
+                    onClick={(e) => { e.stopPropagation(); setDismissed(true); }}
+                >
+                    <X className="h-3.5 w-3.5" />
+                </Button>
+            </div>
+
+            {active.length > 0 && <Progress value={aggregatePct} className="h-1 rounded-none" />}
+
+            {expanded && (
+                <div className="max-h-64 overflow-y-auto border-t divide-y">
+                    {jobs.map((job) => (
+                        <div key={job.id} className="flex items-center gap-2 px-3 py-2 text-xs">
+                            {job.status === "uploaded" && <CheckCircle2 className="h-3.5 w-3.5 text-green-500 shrink-0" />}
+                            {FAILED.has(job.status) && <XCircle className="h-3.5 w-3.5 text-destructive shrink-0" />}
+                            {ACTIVE.has(job.status) && <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground shrink-0" />}
+                            <span className="flex-1 truncate">{job.name}</span>
+                            {job.status === "failed" && (
+                                <button type="button" className="text-primary hover:underline shrink-0" onClick={() => retryJob(job.id)}>
+                                    Retry
+                                </button>
+                            )}
+                        </div>
+                    ))}
+                    <button
+                        type="button"
+                        className="w-full text-xs text-primary hover:underline py-2"
+                        onClick={() => navigate("/admin/assets/add/bulk")}
+                    >
+                        View upload details
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/apps/web/src/components/generic/UserMenu.jsx b/apps/web/src/components/generic/UserMenu.jsx
new file mode 100644
index 0000000..18b146b
--- /dev/null
+++ b/apps/web/src/components/generic/UserMenu.jsx
@@ -0,0 +1,263 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '@/contexts/AuthContext'
+import { useTheme } from '@/contexts/ThemeContext'
+import { useProfile } from '@/contexts/ProfileProvider'
+import { useDateTimePreference } from '@/contexts/DateTimePreferenceContext'
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Label } from '@/components/ui/label'
+import { Separator } from '@/components/ui/separator'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'
+import { Dialog, DialogContent } from '@/components/ui/dialog'
+import { AlertDialog, AlertDialogContent, } from '@/components/ui/alert-dialog'
+
+import { User, Settings, LogOut, Sun, Moon, Monitor, Loader2, Check, Clock } from 'lucide-react'
+
+import { AVATAR_COLORS } from '@/data/profile.data'
+
+// ─── Theme Option ─────────────────────────────────────────────────────────────
+function ThemeOption({ value, label, icon: Icon, active, onClick }) {
+  return (
+    <button
+      onClick={() => onClick(value)}
+      className={`relative flex flex-col items-center gap-2 p-3 rounded-lg border-2 transition-all cursor-pointer w-full
+        ${active
+          ? 'border-primary bg-primary/5'
+          : 'border-border hover:border-muted-foreground/40 hover:bg-muted/40'
+        }`}
+    >
+      <Icon size={18} className={active ? 'text-primary' : 'text-muted-foreground'} />
+      <span className={`text-xs font-medium ${active ? 'text-primary' : 'text-muted-foreground'}`}>
+        {label}
+      </span>
+      {active && (
+        <span className="absolute top-2 right-2">
+          <Check size={12} className="text-primary" />
+        </span>
+      )}
+    </button>
+  )
+}
+
+// ─── Timezone Option ──────────────────────────────────────────────────────────
+function TimezoneOption({ value, label, description, active, onClick }) {
+  return (
+    <button
+      onClick={() => onClick(value)}
+      className={`flex flex-col gap-1 p-3 rounded-lg border-2 transition-all cursor-pointer w-full text-left
+        ${active
+          ? 'border-primary bg-primary/5'
+          : 'border-border hover:border-muted-foreground/40 hover:bg-muted/40'
+        }`}
+    >
+      <span className={`text-sm font-semibold ${active ? 'text-primary' : 'text-foreground'}`}>
+        {label}
+      </span>
+      <span className="text-xs text-muted-foreground">{description}</span>
+      {active && <Check size={12} className="text-primary mt-0.5" />}
+    </button>
+  )
+}
+
+// ─── Settings Dialog ──────────────────────────────────────────────────────────
+function SettingsDialog({ open, onClose }) {
+  const { theme, setTheme } = useTheme()
+  const { timezone, setTimezone } = useDateTimePreference()
+  const [tab, setTab] = useState('appearance')
+
+  const TABS = [
+    { id: 'appearance', label: 'Appearance', icon: Sun },
+    { id: 'datetime',   label: 'Date & Time', icon: Clock },
+  ]
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="p-0 overflow-hidden sm:max-w-2xl gap-0 rounded-2xl">
+        <div className="flex h-[480px]">
+
+          {/* ── Sidebar ── */}
+          <div className="w-52 shrink-0 border-r bg-muted/30 flex flex-col">
+            <div className="flex items-center px-4 py-3 border-b">
+              <span className="text-sm font-semibold">Settings</span>
+            </div>
+            <nav className="flex-1 p-2 space-y-0.5">
+              {TABS.map((t) => (
+                <button
+                  key={t.id}
+                  onClick={() => setTab(t.id)}
+                  className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-md text-sm font-medium transition-colors text-left
+                    ${tab === t.id
+                      ? 'bg-background text-foreground shadow-sm border border-border/50'
+                      : 'text-muted-foreground hover:text-foreground hover:bg-background/60'
+                    }`}
+                >
+                  <t.icon size={14} />
+                  {t.label}
+                </button>
+              ))}
+            </nav>
+          </div>
+
+          {/* ── Content ── */}
+          <div className="flex-1 overflow-y-auto p-6">
+
+            {/* Appearance */}
+            {tab === 'appearance' && (
+              <div className="space-y-5">
+                <div>
+                  <h2 className="text-base font-semibold">Appearance</h2>
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    Choose how the interface looks for you.
+                  </p>
+                </div>
+                <Separator />
+                <div>
+                  <Label className="text-sm font-medium mb-3 block">Theme</Label>
+                  <div className="grid grid-cols-3 gap-3 relative">
+                    <ThemeOption value="light" label="Light" icon={Sun} active={theme === 'light'} onClick={setTheme} />
+                    <ThemeOption value="dark" label="Dark" icon={Moon} active={theme === 'dark'} onClick={setTheme} />
+                    <ThemeOption value="system" label="System" icon={Monitor} active={theme === 'system'} onClick={setTheme} />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Date & Time */}
+            {tab === 'datetime' && (
+              <div className="space-y-5">
+                <div>
+                  <h2 className="text-base font-semibold">Date &amp; Time</h2>
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    Choose how dates and times are displayed across the platform.
+                    Your locale format is taken from your browser&apos;s language setting.
+                  </p>
+                </div>
+                <Separator />
+                <div>
+                  <Label className="text-sm font-medium mb-3 block">Timezone Display</Label>
+                  <div className="grid grid-cols-2 gap-3">
+                    <TimezoneOption
+                      value="local"
+                      label="Local"
+                      description="Dates shown in your device's local timezone."
+                      active={timezone === 'local'}
+                      onClick={setTimezone}
+                    />
+                    <TimezoneOption
+                      value="UTC"
+                      label="UTC"
+                      description="Dates shown in Coordinated Universal Time (UTC+0)."
+                      active={timezone === 'UTC'}
+                      onClick={setTimezone}
+                    />
+                  </div>
+                </div>
+                <div className="rounded-lg border bg-muted/40 p-3 text-xs text-muted-foreground space-y-1">
+                  <p className="font-medium text-foreground">Preview</p>
+                  <p>Date: <span className="text-foreground">{new Date().toLocaleDateString(navigator.language, { month: 'short', day: 'numeric', year: 'numeric', ...(timezone === 'UTC' ? { timeZone: 'UTC' } : {}) })}</span></p>
+                  <p>Date &amp; Time: <span className="text-foreground">{new Date().toLocaleString(navigator.language, { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit', ...(timezone === 'UTC' ? { timeZone: 'UTC' } : {}) })}</span></p>
+                  {timezone === 'UTC' && <p className="text-amber-600 dark:text-amber-400 font-medium">All times shown in UTC</p>}
+                </div>
+              </div>
+            )}
+
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+// ─── Sign Out Overlay ─────────────────────────────────────────────────────────
+function SignOutOverlay({ open }) {
+  return (
+    <AlertDialog open={open}>
+      <AlertDialogContent className="max-w-xs">
+        <div className="flex flex-col items-center justify-center gap-4 py-6">
+          <Loader2 className="size-8 animate-spin text-muted-foreground" />
+          <p className="text-sm font-medium">Signing out...</p>
+        </div>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+
+// ─── Main UserMenu ────────────────────────────────────────────────────────────
+export default function UserMenu() {
+  const { user, logout } = useAuth()
+  const { avatarUrl } = useProfile()
+  const navigate = useNavigate()
+
+  const [settingsOpen, setSettingsOpen] = useState(false)
+  const [signingOut, setSigningOut] = useState(false)
+
+  // Build initials from personal_info or fallback to acc_type first char
+  const given = user?.personal_info?.name?.given_name ?? ''
+  const last = user?.personal_info?.name?.last_name ?? ''
+
+  const initials = given && last
+    ? (given[0] + last[0]).toUpperCase()
+    : (user?.email?.[0] ?? 'U').toUpperCase()
+
+  const fullName = given && last ? `${given} ${last}` : user?.email ?? 'User'
+  const shortName = (given || user?.email) ?? 'User'
+  const avatarColor = AVATAR_COLORS[user?.acc_type] ?? 'bg-muted text-muted-foreground'
+
+  const handleLogout = async () => {
+    setSigningOut(true)
+    await logout()
+    navigate('/login', { replace: true })
+  }
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Avatar className="rounded-lg cursor-pointer hover:opacity-80 transition-opacity size-9">
+            <AvatarImage src={avatarUrl ?? ''} alt={fullName} />
+            <AvatarFallback className={`text-sm font-semibold ${avatarColor}`}>
+              {initials}
+            </AvatarFallback>
+          </Avatar>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent align="end" className="w-64">
+          {/* User info */}
+          <div className="px-2 py-2">
+            <p className="text-sm font-semibold truncate">{shortName}</p>
+            <p className="text-xs text-muted-foreground truncate">{user?.email ?? '—'}</p>
+          </div>
+
+          <DropdownMenuSeparator />
+
+          <DropdownMenuGroup>
+            <DropdownMenuItem onClick={() => navigate('my-profile')}>
+              <User className="size-4" />
+              <span className="font-medium">Profile</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setSettingsOpen(true)}>
+              <Settings className="size-4" />
+              <span className="font-medium">Settings</span>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+
+          <DropdownMenuSeparator />
+
+          <DropdownMenuGroup>
+            <DropdownMenuItem variant="destructive" onClick={handleLogout}>
+              <LogOut className="size-4" />
+              <span className="font-medium">Sign out</span>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/* Settings dialog */}
+      <SettingsDialog open={settingsOpen} onClose={() => setSettingsOpen(false)} />
+
+      {/* Sign out overlay */}
+      <SignOutOverlay open={signingOut} />
+    </>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/generic/notificationDisplay.jsx b/apps/web/src/components/generic/notificationDisplay.jsx
new file mode 100644
index 0000000..a5b30a4
--- /dev/null
+++ b/apps/web/src/components/generic/notificationDisplay.jsx
@@ -0,0 +1,148 @@
+import { Bell, Trophy, BookOpen, Star, CheckCircle, Megaphone, Zap, ClipboardList } from "lucide-react";
+import { cn } from "@/lib/utils";
+import api from "@/utils/api.util";
+
+const TYPE_ICON = {
+    achievement:  Trophy,
+    course:       BookOpen,
+    milestone:    Star,
+    task:         CheckCircle,
+    announcement: Megaphone,
+    tier_expired: Zap,
+    assessment:   ClipboardList,
+};
+
+const TYPE_ACCENT = {
+    achievement:  "bg-yellow-100 text-yellow-700 dark:bg-yellow-950/40 dark:text-yellow-400",
+    course:       "bg-blue-100 text-blue-700 dark:bg-blue-950/40 dark:text-blue-400",
+    milestone:    "bg-purple-100 text-purple-700 dark:bg-purple-950/40 dark:text-purple-400",
+    task:         "bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-400",
+    announcement: "bg-indigo-100 text-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-400",
+    tier_expired: "bg-amber-100 text-amber-700 dark:bg-amber-950/40 dark:text-amber-400",
+    assessment:   "bg-blue-100 text-blue-700 dark:bg-blue-950/40 dark:text-blue-400",
+};
+
+export function NotificationIcon({ type, className }) {
+    const Icon = TYPE_ICON[type] ?? Bell;
+    return <Icon className={cn("shrink-0", className)} />;
+}
+
+export function getTypeAccent(type) {
+    return TYPE_ACCENT[type] ?? "bg-muted text-foreground";
+}
+
+// Outline-button variant of TYPE_ACCENT — same per-type color family, tuned
+// for a bordered CTA (e.g. "View task list" / "Open Link") instead of a
+// filled icon badge, so the action button reads as the same type as the
+// notification it belongs to rather than a generic button for every type.
+const TYPE_BUTTON_CLASSES = {
+    achievement:  "border-yellow-300 text-yellow-700 hover:bg-yellow-50 dark:border-yellow-800 dark:text-yellow-400 dark:hover:bg-yellow-950/40",
+    course:       "border-blue-300 text-blue-700 hover:bg-blue-50 dark:border-blue-800 dark:text-blue-400 dark:hover:bg-blue-950/40",
+    milestone:    "border-purple-300 text-purple-700 hover:bg-purple-50 dark:border-purple-800 dark:text-purple-400 dark:hover:bg-purple-950/40",
+    task:         "border-emerald-300 text-emerald-700 hover:bg-emerald-50 dark:border-emerald-800 dark:text-emerald-400 dark:hover:bg-emerald-950/40",
+    announcement: "border-indigo-300 text-indigo-700 hover:bg-indigo-50 dark:border-indigo-800 dark:text-indigo-400 dark:hover:bg-indigo-950/40",
+    tier_expired: "border-amber-300 text-amber-700 hover:bg-amber-50 dark:border-amber-800 dark:text-amber-400 dark:hover:bg-amber-950/40",
+    assessment:   "border-blue-300 text-blue-700 hover:bg-blue-50 dark:border-blue-800 dark:text-blue-400 dark:hover:bg-blue-950/40",
+};
+
+export function getTypeButtonClasses(type) {
+    return TYPE_BUTTON_CLASSES[type] ?? "";
+}
+
+export function timeAgo(dateStr) {
+    const diff = Date.now() - new Date(dateStr).getTime();
+    const m = Math.floor(diff / 60_000);
+    if (m < 1)  return "just now";
+    if (m < 60) return `${m}m ago`;
+    const h = Math.floor(m / 60);
+    if (h < 24) return `${h}h ago`;
+    return `${Math.floor(h / 24)}d ago`;
+}
+
+// Admin-authored links only ever get typed as either an internal path
+// ("/course/123") or a bare/https URL — a host typed without a scheme
+// (e.g. "example.com") isn't "/"-prefixed, so it would otherwise fall
+// through to window.open() and resolve as a broken relative path instead of
+// navigating off-site. Prepend https:// whenever no scheme is present.
+export function normalizeExternalUrl(url) {
+    if (/^[a-z][a-z0-9+.-]*:/i.test(url)) return url; // already has a scheme (https:, http:, mailto:, tel:, ...)
+    return `https://${url}`;
+}
+
+export function goToLink(url, navigate) {
+    if (url.startsWith("/")) navigate(url);
+    else window.open(normalizeExternalUrl(url), "_blank", "noopener,noreferrer");
+}
+
+// Resolves a course uuid to its numeric course_id — client course pages route by course_id, not uuid.
+async function goToCourse(navigate, courseUuid) {
+    try {
+        const { data } = await api.get(`/client/courses/uuid/${courseUuid}`);
+        const courseId = data?.data?.course_id;
+        if (courseId) navigate(`/course/${courseId}`);
+    } catch {
+        // silent — dialog just stays open if the course can't be resolved
+    }
+}
+
+/**
+ * Per-type deep-link registry. Returns null when the notification carries no
+ * resolvable target (e.g. old rows created before ids were tracked).
+ *
+ * @returns {{ label: string, go: (navigate: Function) => (void | Promise<void>) } | null}
+ */
+export function resolveNotificationLink(type, data) {
+    if (!data) return null;
+
+    // An explicit admin-authored link (the broadcast form's "On Open" section)
+    // always wins over the type-based fallbacks below, same precedence the
+    // sticky banner uses — otherwise a notification with a configured button
+    // silently loses it whenever it's delivered as a regular notification
+    // instead of a sticky one.
+    if (data.linkUrl) {
+        return { label: data.linkLabel || "Open Link", go: (navigate) => goToLink(data.linkUrl, navigate) };
+    }
+
+    switch (type) {
+        case "course":
+            return data.courseUuid
+                ? { label: "Go to course", go: (navigate) => goToCourse(navigate, data.courseUuid) }
+                : null;
+
+        case "assessment":
+            return data.courseUuid
+                ? { label: "Go to course", go: (navigate) => goToCourse(navigate, data.courseUuid) }
+                : null;
+
+        case "task":
+            if (data.groupId && data.taskListId && data.taskId) {
+                return { label: "View task", go: (navigate) => navigate(`/group/${data.groupId}/view/${data.taskListId}/task/${data.taskId}`) };
+            }
+            return (data.groupId && data.taskListId)
+                ? { label: "View task list", go: (navigate) => navigate(`/group/${data.groupId}/view/${data.taskListId}`) }
+                : null;
+
+        case "tier_expired":
+            return data.planId
+                ? { label: "Renew plan", go: (navigate) => navigate(`/subscriptions/view/${data.planId}`) }
+                : { label: "View plans", go: (navigate) => navigate("/subscriptions") };
+
+        case "announcement":
+            if (data.groupId && data.groupCode) {
+                return { label: "View my group", go: (navigate) => navigate(`/group/${data.groupId}`) };
+            }
+            if (data.targetType === "course" && data.targetId) {
+                return { label: "Go to course", go: (navigate) => goToCourse(navigate, data.targetId) };
+            }
+            if (data.targetType === "tier_plan" && data.targetId) {
+                return { label: "View plan", go: (navigate) => navigate(`/subscriptions/view/${data.targetId}`) };
+            }
+            if (data.targetType === "task_list" && data.groupId && data.targetId) {
+                return { label: "View task list", go: (navigate) => navigate(`/group/${data.groupId}/view/${data.targetId}`) };
+            }
+            return null;
+
+        default:
+            return null;
+    }
+}
diff --git a/apps/web/src/components/ui/accordion.jsx b/apps/web/src/components/ui/accordion.jsx
new file mode 100644
index 0000000..0bbc8a2
--- /dev/null
+++ b/apps/web/src/components/ui/accordion.jsx
@@ -0,0 +1,78 @@
+import * as React from "react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({
+  className,
+  ...props
+}) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props} />
+  );
+}
+
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props} />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}>
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}>
+      <div
+        className={cn(
+          "h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}>
+        {children}
+      </div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/apps/web/src/components/ui/alert-dialog.jsx b/apps/web/src/components/ui/alert-dialog.jsx
new file mode 100644
index 0000000..05b38f8
--- /dev/null
+++ b/apps/web/src/components/ui/alert-dialog.jsx
@@ -0,0 +1,174 @@
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}) {
+  return (<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />);
+}
+
+function AlertDialogPortal({
+  ...props
+}) {
+  return (<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />);
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props} />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action data-slot="alert-dialog-action" className={cn(className)} {...props} />
+    </Button>
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel data-slot="alert-dialog-cancel" className={cn(className)} {...props} />
+    </Button>
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}
diff --git a/apps/web/src/components/ui/alert.jsx b/apps/web/src/components/ui/alert.jsx
new file mode 100644
index 0000000..bc53c0c
--- /dev/null
+++ b/apps/web/src/components/ui/alert.jsx
@@ -0,0 +1,78 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props} />
+  );
+}
+
+function AlertTitle({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function AlertAction({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props} />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }
diff --git a/apps/web/src/components/ui/aspect-ratio.jsx b/apps/web/src/components/ui/aspect-ratio.jsx
new file mode 100644
index 0000000..85fdb52
--- /dev/null
+++ b/apps/web/src/components/ui/aspect-ratio.jsx
@@ -0,0 +1,11 @@
+"use client"
+
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui"
+
+function AspectRatio({
+  ...props
+}) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+export { AspectRatio }
diff --git a/apps/web/src/components/ui/avatar.jsx b/apps/web/src/components/ui/avatar.jsx
new file mode 100644
index 0000000..34cdf97
--- /dev/null
+++ b/apps/web/src/components/ui/avatar.jsx
@@ -0,0 +1,105 @@
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full rounded-full object-cover", className)}
+      {...props} />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function AvatarBadge({
+  className,
+  ...props
+}) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function AvatarGroup({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}
diff --git a/apps/web/src/components/ui/badge.jsx b/apps/web/src/components/ui/badge.jsx
new file mode 100644
index 0000000..6a07934
--- /dev/null
+++ b/apps/web/src/components/ui/badge.jsx
@@ -0,0 +1,47 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props} />
+  );
+}
+
+export { Badge, badgeVariants }
diff --git a/apps/web/src/components/ui/breadcrumb.jsx b/apps/web/src/components/ui/breadcrumb.jsx
new file mode 100644
index 0000000..cb11cfd
--- /dev/null
+++ b/apps/web/src/components/ui/breadcrumb.jsx
@@ -0,0 +1,121 @@
+import * as React from "react"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Breadcrumb({
+  className,
+  ...props
+}) {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      data-slot="breadcrumb"
+      className={cn(className)}
+      {...props} />
+  );
+}
+
+function BreadcrumbList({
+  className,
+  ...props
+}) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function BreadcrumbItem({
+  className,
+  ...props
+}) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props} />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props} />
+  );
+}
+
+function BreadcrumbPage({
+  className,
+  ...props
+}) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props} />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}>
+      {children ?? (
+        <ChevronRightIcon />
+      )}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-5 items-center justify-center [&>svg]:size-4", className)}
+      {...props}>
+      <MoreHorizontalIcon />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/apps/web/src/components/ui/button-group.jsx b/apps/web/src/components/ui/button-group.jsx
new file mode 100644
index 0000000..a97fa9b
--- /dev/null
+++ b/apps/web/src/components/ui/button-group.jsx
@@ -0,0 +1,78 @@
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+const buttonGroupVariants = cva(
+  "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg!",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props} />
+  );
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      className={cn(
+        "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}
diff --git a/apps/web/src/components/ui/button.jsx b/apps/web/src/components/ui/button.jsx
new file mode 100644
index 0000000..4f393e8
--- /dev/null
+++ b/apps/web/src/components/ui/button.jsx
@@ -0,0 +1,63 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props} />
+  );
+}
+
+export { Button, buttonVariants }
diff --git a/apps/web/src/components/ui/calendar.jsx b/apps/web/src/components/ui/calendar.jsx
new file mode 100644
index 0000000..7c4fc8d
--- /dev/null
+++ b/apps/web/src/components/ui/calendar.jsx
@@ -0,0 +1,182 @@
+"use client"
+
+import * as React from "react"
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  locale,
+  formatters,
+  components,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      locale={locale}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString(locale?.code, { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn("relative rounded-(--cell-radius)", defaultClassNames.dropdown_root),
+        dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
+        caption_label: cn("font-medium select-none", captionLayout === "label"
+          ? "text-sm"
+          : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
+        week_number: cn(
+          "text-[0.8rem] text-muted-foreground select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn(
+          "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_end
+        ),
+        today: cn(
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (<div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />);
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (<ChevronLeftIcon className={cn("size-4", className)} {...props} />);
+          }
+
+          if (orientation === "right") {
+            return (<ChevronRightIcon className={cn("size-4", className)} {...props} />);
+          }
+
+          return (<ChevronDownIcon className={cn("size-4", className)} {...props} />);
+        },
+        DayButton: ({ ...props }) => (
+          <CalendarDayButton locale={locale} {...props} />
+        ),
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div
+                className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          );
+        },
+        ...components,
+      }}
+      {...props} />
+  );
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  locale,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString(locale?.code)}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props} />
+  );
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/apps/web/src/components/ui/card.jsx b/apps/web/src/components/ui/card.jsx
new file mode 100644
index 0000000..8d4523f
--- /dev/null
+++ b/apps/web/src/components/ui/card.jsx
@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function CardHeader({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function CardTitle({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function CardDescription({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props} />
+  );
+}
+
+function CardAction({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function CardContent({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props} />
+  );
+}
+
+function CardFooter({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/apps/web/src/components/ui/carousel.jsx b/apps/web/src/components/ui/carousel.jsx
new file mode 100644
index 0000000..fc3848e
--- /dev/null
+++ b/apps/web/src/components/ui/carousel.jsx
@@ -0,0 +1,194 @@
+import * as React from "react"
+import useEmblaCarousel from "embla-carousel-react";
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+
+const CarouselContext = React.createContext(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}) {
+  const [carouselRef, api] = useEmblaCarousel({
+    ...opts,
+    axis: orientation === "horizontal" ? "x" : "y",
+  }, plugins)
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback((event) => {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault()
+      scrollPrev()
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault()
+      scrollNext()
+    }
+  }, [scrollPrev, scrollNext])
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    };
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}>
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}>
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+}
+
+function CarouselContent({
+  className,
+  ...props
+}) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content">
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props} />
+    </div>
+  );
+}
+
+function CarouselItem({
+  className,
+  ...props
+}) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn("absolute touch-manipulation rounded-full", orientation === "horizontal"
+        ? "top-1/2 -left-12 -translate-y-1/2"
+        : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className)}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}>
+      <ChevronLeftIcon />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn("absolute touch-manipulation rounded-full", orientation === "horizontal"
+        ? "top-1/2 -right-12 -translate-y-1/2"
+        : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className)}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}>
+      <ChevronRightIcon />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+}
+
+export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel };
diff --git a/apps/web/src/components/ui/chart.jsx b/apps/web/src/components/ui/chart.jsx
new file mode 100644
index 0000000..4f27e8a
--- /dev/null
+++ b/apps/web/src/components/ui/chart.jsx
@@ -0,0 +1,319 @@
+"use client";
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = {
+  light: "",
+  dark: ".dark"
+}
+
+const INITIAL_DIMENSION = {
+  width: 320,
+  height: 200
+}
+
+const ChartContext = React.createContext(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  initialDimension = INITIAL_DIMENSION,
+  ...props
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}>
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer initialDimension={initialDimension}>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+const ChartStyle = ({
+  id,
+  config
+}) => {
+  const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color)
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+.map(([key, itemConfig]) => {
+const color =
+  itemConfig.theme?.[theme] ??
+  itemConfig.color
+return color ? `  --color-${key}: ${color};` : null
+})
+.join("\n")}
+}
+`)
+          .join("\n"),
+      }} />
+  );
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey
+}) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? (config[label]?.label ?? label)
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      );
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      )}>
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item, index) => {
+            const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color ?? item.payload?.fill ?? item.color
+
+            return (
+              <div
+                key={index}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}>
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+                            "h-2.5 w-2.5": indicator === "dot",
+                            "w-1": indicator === "line",
+                            "w-0 border-[1.5px] border-dashed bg-transparent":
+                              indicator === "dashed",
+                            "my-0.5": nestLabel && indicator === "dashed",
+                          })}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor
+                            }
+                          } />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}>
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label ?? item.name}
+                        </span>
+                      </div>
+                      {item.value != null && (
+                        <span className="font-mono font-medium text-foreground tabular-nums">
+                          {typeof item.value === "number"
+                            ? item.value.toLocaleString()
+                            : String(item.value)}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey
+}) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}>
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item, index) => {
+          const key = `${nameKey ?? item.dataKey ?? "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}>
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }} />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+function getPayloadConfigFromPayload(
+  config,
+  payload,
+  key
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey = key
+
+  if (
+    key in payload &&
+    typeof payload[key] === "string"
+  ) {
+    configLabelKey = payload[key]
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key] === "string"
+  ) {
+    configLabelKey = payloadPayload[key]
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/apps/web/src/components/ui/checkbox.jsx b/apps/web/src/components/ui/checkbox.jsx
new file mode 100644
index 0000000..64c9e48
--- /dev/null
+++ b/apps/web/src/components/ui/checkbox.jsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { CheckIcon } from "lucide-react"
+
+function Checkbox({
+  className,
+  ...props
+}) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}>
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none [&>svg]:size-3.5">
+        <CheckIcon />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox }
diff --git a/apps/web/src/components/ui/collapsible.jsx b/apps/web/src/components/ui/collapsible.jsx
new file mode 100644
index 0000000..04a6a71
--- /dev/null
+++ b/apps/web/src/components/ui/collapsible.jsx
@@ -0,0 +1,23 @@
+"use client"
+
+import { Collapsible as CollapsiblePrimitive } from "radix-ui"
+
+function Collapsible({
+  ...props
+}) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}) {
+  return (<CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />);
+}
+
+function CollapsibleContent({
+  ...props
+}) {
+  return (<CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />);
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/apps/web/src/components/ui/combobox.jsx b/apps/web/src/components/ui/combobox.jsx
new file mode 100644
index 0000000..08066b9
--- /dev/null
+++ b/apps/web/src/components/ui/combobox.jsx
@@ -0,0 +1,283 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group"
+import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react"
+
+const Combobox = ComboboxPrimitive.Root
+
+function ComboboxValue({
+  ...props
+}) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
+}
+
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}>
+      {children}
+      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+    </ComboboxPrimitive.Trigger>
+  );
+}
+
+function ComboboxClear({
+  className,
+  ...props
+}) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      render={<InputGroupButton variant="ghost" size="icon-xs" />}
+      className={cn(className)}
+      {...props}>
+      <XIcon className="pointer-events-none" />
+    </ComboboxPrimitive.Clear>
+  );
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}) {
+  return (
+    <InputGroup className={cn("w-auto", className)}>
+      <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            asChild
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}>
+            <ComboboxTrigger />
+          </InputGroupButton>
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  );
+}
+
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50">
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn(
+            "group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props} />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  );
+}
+
+function ComboboxList({
+  className,
+  ...props
+}) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}>
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        render={
+          <span
+            className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }>
+        <CheckIcon className="pointer-events-none" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  );
+}
+
+function ComboboxGroup({
+  className,
+  ...props
+}) {
+  return (<ComboboxPrimitive.Group data-slot="combobox-group" className={cn(className)} {...props} />);
+}
+
+function ComboboxLabel({
+  className,
+  ...props
+}) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props} />
+  );
+}
+
+function ComboboxCollection({
+  ...props
+}) {
+  return (<ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />);
+}
+
+function ComboboxEmpty({
+  className,
+  ...props
+}) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn(
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function ComboboxSeparator({
+  className,
+  ...props
+}) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props} />
+  );
+}
+
+function ComboboxChips({
+  className,
+  ...props
+}) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn(
+        "flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        className
+      )}
+      {...props}>
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant="ghost" size="icon-xs" />}
+          className="-ml-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove">
+          <XIcon className="pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  );
+}
+
+function ComboboxChipsInput({
+  className,
+  ...props
+}) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn("min-w-16 flex-1 outline-none", className)}
+      {...props} />
+  );
+}
+
+function useComboboxAnchor() {
+  return React.useRef(null);
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+}
diff --git a/apps/web/src/components/ui/command.jsx b/apps/web/src/components/ui/command.jsx
new file mode 100644
index 0000000..348f0e7
--- /dev/null
+++ b/apps/web/src/components/ui/command.jsx
@@ -0,0 +1,178 @@
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  InputGroup,
+  InputGroupAddon,
+} from "@/components/ui/input-group"
+import { SearchIcon, CheckIcon } from "lucide-react"
+
+function Command({
+  className,
+  ...props
+}) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = false,
+  ...props
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0", className)}
+        showCloseButton={showCloseButton}>
+        {children}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}) {
+  return (
+    <div data-slot="command-input-wrapper" className="p-1 pb-0">
+      <InputGroup
+        className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
+        <CommandPrimitive.Input
+          data-slot="command-input"
+          className={cn(
+            "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          {...props} />
+        <InputGroupAddon>
+          <SearchIcon className="size-4 shrink-0 opacity-50" />
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function CommandEmpty({
+  className,
+  ...props
+}) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className={cn("py-6 text-center text-sm", className)}
+      {...props} />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props} />
+  );
+}
+
+function CommandItem({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        className
+      )}
+      {...props}>
+      {children}
+      <CheckIcon
+        className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+    </CommandPrimitive.Item>
+  );
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/apps/web/src/components/ui/context-menu.jsx b/apps/web/src/components/ui/context-menu.jsx
new file mode 100644
index 0000000..0831469
--- /dev/null
+++ b/apps/web/src/components/ui/context-menu.jsx
@@ -0,0 +1,233 @@
+import * as React from "react"
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function ContextMenu({
+  ...props
+}) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({
+  className,
+  ...props
+}) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      className={cn("select-none", className)}
+      {...props} />
+  );
+}
+
+function ContextMenuGroup({
+  ...props
+}) {
+  return (<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />);
+}
+
+function ContextMenuPortal({
+  ...props
+}) {
+  return (<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />);
+}
+
+function ContextMenuSub({
+  ...props
+}) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}) {
+  return (<ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />);
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props} />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}>
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}>
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}>
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props} />
+  );
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/apps/web/src/components/ui/date-time-picker.jsx b/apps/web/src/components/ui/date-time-picker.jsx
new file mode 100644
index 0000000..2b90b47
--- /dev/null
+++ b/apps/web/src/components/ui/date-time-picker.jsx
@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { format } from "date-fns";
+import { CalendarDays, Clock, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input }  from "@/components/ui/input";
+import { Label }  from "@/components/ui/label";
+import { Calendar } from "@/components/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+
+/**
+ * DateTimePicker
+ *
+ * value    — ISO string | null
+ * onChange — (isoString | null) => void
+ */
+export function DateTimePicker({ value, onChange, placeholder = "Pick date & time", disabled }) {
+  const [open, setOpen] = useState(false);
+
+  const dateValue = value ? new Date(value) : undefined;
+
+  const timeStr = dateValue
+    ? `${String(dateValue.getHours()).padStart(2, "0")}:${String(dateValue.getMinutes()).padStart(2, "0")}`
+    : "00:00";
+
+  const handleDaySelect = (day) => {
+    if (!day) { onChange(null); return; }
+    const base = dateValue ?? new Date();
+    day.setHours(base.getHours(), base.getMinutes(), 0, 0);
+    onChange(day.toISOString());
+  };
+
+  const handleTimeChange = (e) => {
+    const [h, m] = e.target.value.split(":").map(Number);
+    const base = dateValue ? new Date(dateValue) : new Date();
+    base.setHours(h, m, 0, 0);
+    onChange(base.toISOString());
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          disabled={disabled}
+          className={cn(
+            "w-full justify-start text-left font-normal",
+            !value && "text-muted-foreground",
+          )}
+        >
+          <CalendarDays className="mr-2 h-4 w-4 shrink-0" />
+          {dateValue ? format(dateValue, "MMM d, yyyy  HH:mm") : placeholder}
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={dateValue}
+          onSelect={handleDaySelect}
+          disabled={(date) => date < new Date(new Date().setHours(0, 0, 0, 0))}
+          autoFocus
+        />
+
+        <div className="border-t px-3 py-2.5 flex items-center gap-2">
+          <Clock className="h-4 w-4 text-muted-foreground shrink-0" />
+          <Label className="text-xs text-muted-foreground shrink-0 w-8">Time</Label>
+          <Input
+            type="time"
+            value={timeStr}
+            onChange={handleTimeChange}
+            className="h-8 flex-1"
+          />
+          {value && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground"
+              onClick={() => { onChange(null); setOpen(false); }}
+            >
+              <X className="h-3.5 w-3.5" />
+            </Button>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/web/src/components/ui/dialog.jsx b/apps/web/src/components/ui/dialog.jsx
new file mode 100644
index 0000000..50ce863
--- /dev/null
+++ b/apps/web/src/components/ui/dialog.jsx
@@ -0,0 +1,153 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({
+  ...props
+}) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-[inherit] data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}>
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button variant="ghost" className="absolute top-2 right-2" size="icon-sm">
+              <XIcon />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props} />
+  );
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}>
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("font-heading text-base leading-none font-medium", className)}
+      {...props} />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/apps/web/src/components/ui/direction.jsx b/apps/web/src/components/ui/direction.jsx
new file mode 100644
index 0000000..f130aa6
--- /dev/null
+++ b/apps/web/src/components/ui/direction.jsx
@@ -0,0 +1,20 @@
+"use client"
+
+import * as React from "react"
+import { Direction } from "radix-ui"
+
+function DirectionProvider({
+  dir,
+  direction,
+  children
+}) {
+  return (
+    <Direction.DirectionProvider dir={direction ?? dir}>
+      {children}
+    </Direction.DirectionProvider>
+  );
+}
+
+const useDirection = Direction.useDirection
+
+export { DirectionProvider, useDirection }
diff --git a/apps/web/src/components/ui/drawer.jsx b/apps/web/src/components/ui/drawer.jsx
new file mode 100644
index 0000000..b6d65c9
--- /dev/null
+++ b/apps/web/src/components/ui/drawer.jsx
@@ -0,0 +1,130 @@
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+function Drawer({
+  ...props
+}) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerTrigger({
+  ...props
+}) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({
+  ...props
+}) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({
+  ...props
+}) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}>
+        <div
+          className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHeader({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function DrawerFooter({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props} />
+  );
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("font-heading text-base font-medium text-foreground", className)}
+      {...props} />
+  );
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props} />
+  );
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/apps/web/src/components/ui/dropdown-menu.jsx b/apps/web/src/components/ui/dropdown-menu.jsx
new file mode 100644
index 0000000..ff9cbc0
--- /dev/null
+++ b/apps/web/src/components/ui/dropdown-menu.jsx
@@ -0,0 +1,244 @@
+"use client"
+
+import * as React from "react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function DropdownMenu({
+  ...props
+}) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}) {
+  return (<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />);
+}
+
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return (<DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />);
+}
+
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={cn(
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props} />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}) {
+  return (<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />);
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7",
+
+        // destructive variant
+        "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:*:[svg]:text-destructive",
+
+        // shared disabled state
+        "data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}>
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}) {
+  return (<DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />);
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}>
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props} />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function DropdownMenuSub({
+  ...props
+}) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}>
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/apps/web/src/components/ui/empty.jsx b/apps/web/src/components/ui/empty.jsx
new file mode 100644
index 0000000..c351958
--- /dev/null
+++ b/apps/web/src/components/ui/empty.jsx
@@ -0,0 +1,110 @@
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+function Empty({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function EmptyHeader({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn("flex max-w-sm flex-col items-center gap-2", className)}
+      {...props} />
+  );
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props} />
+  );
+}
+
+function EmptyTitle({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("font-heading text-sm font-medium tracking-tight", className)}
+      {...props} />
+  );
+}
+
+function EmptyDescription({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function EmptyContent({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}
diff --git a/apps/web/src/components/ui/field.jsx b/apps/web/src/components/ui/field.jsx
new file mode 100644
index 0000000..e59eb8d
--- /dev/null
+++ b/apps/web/src/components/ui/field.jsx
@@ -0,0 +1,230 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({
+  className,
+  ...props
+}) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function FieldGroup({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      )}
+      {...props} />
+  );
+}
+
+const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
+  variants: {
+    orientation: {
+      vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+      horizontal:
+        "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      responsive:
+        "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+})
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props} />
+  );
+}
+
+function FieldContent({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className)}
+      {...props} />
+  );
+}
+
+function FieldLabel({
+  className,
+  ...props
+}) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function FieldTitle({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function FieldDescription({
+  className,
+  ...props
+}) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}>
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content">
+          {children}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map((error, index) =>
+          error?.message && <li key={index}>{error.message}</li>)}
+      </ul>
+    );
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}>
+      {content}
+    </div>
+  );
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}
diff --git a/apps/web/src/components/ui/hover-card.jsx b/apps/web/src/components/ui/hover-card.jsx
new file mode 100644
index 0000000..9dc4bfa
--- /dev/null
+++ b/apps/web/src/components/ui/hover-card.jsx
@@ -0,0 +1,39 @@
+import * as React from "react"
+import { HoverCard as HoverCardPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({
+  ...props
+}) {
+  return (<HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />);
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props} />
+    </HoverCardPrimitive.Portal>
+  );
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/apps/web/src/components/ui/input-group.jsx b/apps/web/src/components/ui/input-group.jsx
new file mode 100644
index 0000000..fe916a7
--- /dev/null
+++ b/apps/web/src/components/ui/input-group.jsx
@@ -0,0 +1,150 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+function InputGroup({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        className
+      )}
+      {...props} />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+        "inline-end":
+          "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+        "block-start":
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end":
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props} />
+  );
+}
+
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: "",
+      "icon-xs":
+        "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+    },
+  },
+  defaultVariants: {
+    size: "xs",
+  },
+})
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props} />
+  );
+}
+
+function InputGroupText({
+  className,
+  ...props
+}) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}
diff --git a/apps/web/src/components/ui/input-otp.jsx b/apps/web/src/components/ui/input-otp.jsx
new file mode 100644
index 0000000..c48f0fb
--- /dev/null
+++ b/apps/web/src/components/ui/input-otp.jsx
@@ -0,0 +1,84 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+
+import { cn } from "@/lib/utils"
+import { MinusIcon } from "lucide-react"
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "cn-input-otp flex items-center has-disabled:opacity-50",
+        containerClassName
+      )}
+      spellCheck={false}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props} />
+  );
+}
+
+function InputOTPGroup({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn(
+        "flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}>
+      {char}
+      {hasFakeCaret && (
+        <div
+          className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InputOTPSeparator({
+  ...props
+}) {
+  return (
+    <div
+      data-slot="input-otp-separator"
+      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+      role="separator"
+      {...props}>
+      <MinusIcon />
+    </div>
+  );
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/apps/web/src/components/ui/input.jsx b/apps/web/src/components/ui/input.jsx
new file mode 100644
index 0000000..ae5b90a
--- /dev/null
+++ b/apps/web/src/components/ui/input.jsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({
+  className,
+  type,
+  ...props
+}) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export { Input }
diff --git a/apps/web/src/components/ui/item.jsx b/apps/web/src/components/ui/item.jsx
new file mode 100644
index 0000000..5592117
--- /dev/null
+++ b/apps/web/src/components/ui/item.jsx
@@ -0,0 +1,200 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+function ItemGroup({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn(
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-2", className)}
+      {...props} />
+  );
+}
+
+const itemVariants = cva(
+  "group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50",
+      },
+      size: {
+        default: "gap-2.5 px-3 py-2.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "div"
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props} />
+  );
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props} />
+  );
+}
+
+function ItemContent({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function ItemTitle({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function ItemDescription({
+  className,
+  ...props
+}) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function ItemActions({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props} />
+  );
+}
+
+function ItemHeader({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn("flex basis-full items-center justify-between gap-2", className)}
+      {...props} />
+  );
+}
+
+function ItemFooter({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn("flex basis-full items-center justify-between gap-2", className)}
+      {...props} />
+  );
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}
diff --git a/apps/web/src/components/ui/kbd.jsx b/apps/web/src/components/ui/kbd.jsx
new file mode 100644
index 0000000..84adafd
--- /dev/null
+++ b/apps/web/src/components/ui/kbd.jsx
@@ -0,0 +1,30 @@
+import { cn } from "@/lib/utils"
+
+function Kbd({
+  className,
+  ...props
+}) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function KbdGroup({
+  className,
+  ...props
+}) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props} />
+  );
+}
+
+export { Kbd, KbdGroup }
diff --git a/apps/web/src/components/ui/label.jsx b/apps/web/src/components/ui/label.jsx
new file mode 100644
index 0000000..056846f
--- /dev/null
+++ b/apps/web/src/components/ui/label.jsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export { Label }
diff --git a/apps/web/src/components/ui/menubar.jsx b/apps/web/src/components/ui/menubar.jsx
new file mode 100644
index 0000000..b0c37d1
--- /dev/null
+++ b/apps/web/src/components/ui/menubar.jsx
@@ -0,0 +1,256 @@
+"use client"
+
+import * as React from "react"
+import { Menubar as MenubarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function Menubar({
+  className,
+  ...props
+}) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn("flex h-8 items-center gap-0.5 rounded-lg border p-[3px]", className)}
+      {...props} />
+  );
+}
+
+function MenubarMenu({
+  ...props
+}) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
+}
+
+function MenubarGroup({
+  ...props
+}) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
+}
+
+function MenubarPortal({
+  ...props
+}) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
+}
+
+function MenubarRadioGroup({
+  ...props
+}) {
+  return (<MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />);
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+          className
+        )}
+        {...props} />
+    </MenubarPortal>
+  );
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/menubar-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      checked={checked}
+      {...props}>
+      <span
+        className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  );
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}>
+      <span
+        className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  );
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn("px-1.5 py-1 text-sm font-medium data-inset:pl-7", className)}
+      {...props} />
+  );
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props} />
+  );
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function MenubarSub({
+  ...props
+}) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}>
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </MenubarPrimitive.SubTrigger>
+  );
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        "z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}
diff --git a/apps/web/src/components/ui/native-select.jsx b/apps/web/src/components/ui/native-select.jsx
new file mode 100644
index 0000000..786d6bb
--- /dev/null
+++ b/apps/web/src/components/ui/native-select.jsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon } from "lucide-react"
+
+function NativeSelect({
+  className,
+  size = "default",
+  ...props
+}) {
+  return (
+    <div
+      className={cn(
+        "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+        className
+      )}
+      data-slot="native-select-wrapper"
+      data-size={size}>
+      <select
+        data-slot="native-select"
+        data-size={size}
+        className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+        {...props} />
+      <ChevronDownIcon
+        className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
+        aria-hidden="true"
+        data-slot="native-select-icon" />
+    </div>
+  );
+}
+
+function NativeSelectOption({
+  className,
+  ...props
+}) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props} />
+  );
+}
+
+function NativeSelectOptGroup({
+  className,
+  ...props
+}) {
+  return (
+    <optgroup
+      data-slot="native-select-optgroup"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props} />
+  );
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }
diff --git a/apps/web/src/components/ui/navigation-menu.jsx b/apps/web/src/components/ui/navigation-menu.jsx
new file mode 100644
index 0000000..4b5149b
--- /dev/null
+++ b/apps/web/src/components/ui/navigation-menu.jsx
@@ -0,0 +1,151 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon } from "lucide-react"
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}>
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  );
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn("group flex flex-1 list-none items-center justify-center gap-0", className)}
+      {...props} />
+  );
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props} />
+  );
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}>
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
+        aria-hidden="true" />
+    </NavigationMenuPrimitive.Trigger>
+  );
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "top-0 left-0 w-full p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      className={cn("absolute top-full left-0 isolate z-50 flex justify-center")}>
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 duration-100 md:w-(--radix-navigation-menu-viewport-width) data-open:animate-in data-open:zoom-in-90 data-closed:animate-out data-closed:zoom-out-90",
+          className
+        )}
+        {...props} />
+    </div>
+  );
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+        className
+      )}
+      {...props}>
+      <div
+        className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  );
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}
diff --git a/apps/web/src/components/ui/pagination.jsx b/apps/web/src/components/ui/pagination.jsx
new file mode 100644
index 0000000..6af4873
--- /dev/null
+++ b/apps/web/src/components/ui/pagination.jsx
@@ -0,0 +1,121 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Pagination({
+  className,
+  ...props
+}) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props} />
+  );
+}
+
+function PaginationContent({
+  className,
+  ...props
+}) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex items-center gap-0.5", className)}
+      {...props} />
+  );
+}
+
+function PaginationItem({
+  ...props
+}) {
+  return <li data-slot="pagination-item" {...props} />;
+}
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}) {
+  return (
+    <Button
+      asChild
+      variant={isActive ? "outline" : "ghost"}
+      size={size}
+      className={cn(className)}>
+      <a
+        aria-current={isActive ? "page" : undefined}
+        data-slot="pagination-link"
+        data-active={isActive}
+        {...props} />
+    </Button>
+  );
+}
+
+function PaginationPrevious({
+  className,
+  text = "Previous",
+  ...props
+}) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("pl-1.5!", className)}
+      {...props}>
+      <ChevronLeftIcon data-icon="inline-start" />
+      <span className="hidden sm:block">{text}</span>
+    </PaginationLink>
+  );
+}
+
+function PaginationNext({
+  className,
+  text = "Next",
+  ...props
+}) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("pr-1.5!", className)}
+      {...props}>
+      <span className="hidden sm:block">{text}</span>
+      <ChevronRightIcon data-icon="inline-end" />
+    </PaginationLink>
+  );
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn(
+        "flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}>
+      <MoreHorizontalIcon />
+      <span className="sr-only">More pages</span>
+    </span>
+  );
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}
diff --git a/apps/web/src/components/ui/phone-input.jsx b/apps/web/src/components/ui/phone-input.jsx
new file mode 100644
index 0000000..43c2098
--- /dev/null
+++ b/apps/web/src/components/ui/phone-input.jsx
@@ -0,0 +1,183 @@
+import * as React from "react"
+import { CheckIcon, ChevronsUpDown } from "lucide-react"
+import * as RPNInput from "react-phone-number-input"
+import flags from "react-phone-number-input/flags"
+
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import { Input } from "@/components/ui/input"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { cn } from "@/lib/utils"
+
+const PhoneInput = React.forwardRef(
+  ({ className, onChange, value, ...props }, ref) => {
+    return (
+      <RPNInput.default
+        ref={ref}
+        className={cn("flex", className)}
+        flagComponent={FlagComponent}
+        countrySelectComponent={CountrySelect}
+        inputComponent={InputComponent}
+        smartCaret={false}
+        value={value || undefined}
+        /**
+         * react-phone-number-input fires onChange as undefined when the
+         * field is emptied — coerce to "" so react-hook-form's required
+         * check still fires correctly.
+         */
+        onChange={(value) => onChange?.(value || "")}
+        {...props}
+      />
+    )
+  },
+)
+PhoneInput.displayName = "PhoneInput"
+
+const InputComponent = React.forwardRef(({ className, ...props }, ref) => (
+  <Input
+    className={cn("rounded-e-lg rounded-s-none", className)}
+    {...props}
+    ref={ref}
+  />
+))
+InputComponent.displayName = "InputComponent"
+
+const CountrySelect = ({
+  disabled,
+  value: selectedCountry,
+  options: countryList,
+  onChange,
+}) => {
+  const scrollAreaRef = React.useRef(null)
+  const [searchValue, setSearchValue] = React.useState("")
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  const handleSelectComplete = React.useCallback(() => setIsOpen(false), [])
+
+  return (
+    <Popover
+      open={isOpen}
+      modal
+      onOpenChange={(open) => {
+        setIsOpen(open)
+        open && setSearchValue("")
+      }}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          className="flex gap-1 rounded-e-none rounded-s-lg border-r-0 px-3 focus:z-10"
+          disabled={disabled}
+        >
+          <FlagComponent
+            country={selectedCountry}
+            countryName={selectedCountry}
+          />
+          <ChevronsUpDown
+            className={cn(
+              "-mr-2 size-4 opacity-50",
+              disabled ? "hidden" : "opacity-100",
+            )}
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[320px] p-0">
+        <Command>
+          <CommandInput
+            value={searchValue}
+            onValueChange={(value) => {
+              setSearchValue(value)
+              setTimeout(() => {
+                if (scrollAreaRef.current) {
+                  const viewportElement = scrollAreaRef.current.querySelector(
+                    "[data-radix-scroll-area-viewport]",
+                  )
+                  if (viewportElement) {
+                    viewportElement.scrollTop = 0
+                  }
+                }
+              }, 0)
+            }}
+            placeholder="Search country..."
+          />
+          <CommandList>
+            <ScrollArea ref={scrollAreaRef} className="h-72">
+              <CommandEmpty>No country found.</CommandEmpty>
+              <CommandGroup>
+                {countryList.map(({ value, label }) =>
+                  value ? (
+                    <CountrySelectOption
+                      key={value}
+                      country={value}
+                      countryName={label}
+                      selectedCountry={selectedCountry}
+                      onChange={onChange}
+                      onSelectComplete={handleSelectComplete}
+                    />
+                  ) : null,
+                )}
+              </CommandGroup>
+            </ScrollArea>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+const CountrySelectOption = React.memo(function CountrySelectOption({
+  country,
+  countryName,
+  selectedCountry,
+  onChange,
+  onSelectComplete,
+}) {
+  const handleSelect = () => {
+    onChange(country)
+    onSelectComplete()
+  }
+
+  return (
+    <CommandItem
+      value={countryName}
+      className="flex items-center justify-between gap-2"
+      onSelect={handleSelect}
+    >
+      <div className="flex items-center flex-1 gap-2">
+        <FlagComponent country={country} countryName={countryName} />
+        <span className="text-sm w-54 truncate">{countryName}</span>
+      </div>
+      <div className="whitespace-nowrap flex min-w-0">
+        <span className="text-sm text-foreground/50">{`+${RPNInput.getCountryCallingCode(country)}`}</span>
+        <CheckIcon
+          className={`size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}`}
+        />
+      </div>
+    </CommandItem>
+  )
+})
+
+const FlagComponent = React.memo(function FlagComponent({ country, countryName }) {
+  const Flag = flags[country]
+
+  return (
+    <span className="flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20 [&_svg:not([class*='size-'])]:size-full">
+      {Flag && <Flag title={countryName} />}
+    </span>
+  )
+})
+
+export { PhoneInput }
diff --git a/apps/web/src/components/ui/popover.jsx b/apps/web/src/components/ui/popover.jsx
new file mode 100644
index 0000000..e3e8cc8
--- /dev/null
+++ b/apps/web/src/components/ui/popover.jsx
@@ -0,0 +1,89 @@
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props} />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({
+  ...props
+}) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+function PopoverHeader({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-0.5 text-sm", className)}
+      {...props} />
+  );
+}
+
+function PopoverTitle({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props} />
+  );
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props} />
+  );
+}
+
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}
diff --git a/apps/web/src/components/ui/progress.jsx b/apps/web/src/components/ui/progress.jsx
new file mode 100644
index 0000000..ca6bc6d
--- /dev/null
+++ b/apps/web/src/components/ui/progress.jsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
+        className
+      )}
+      {...props}>
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="size-full flex-1 bg-primary transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }} />
+    </ProgressPrimitive.Root>
+  );
+}
+
+export { Progress }
diff --git a/apps/web/src/components/ui/radio-group.jsx b/apps/web/src/components/ui/radio-group.jsx
new file mode 100644
index 0000000..d2e77df
--- /dev/null
+++ b/apps/web/src/components/ui/radio-group.jsx
@@ -0,0 +1,40 @@
+import * as React from "react"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid w-full gap-2", className)}
+      {...props} />
+  );
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}>
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="flex size-4 items-center justify-center">
+        <span
+          className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/apps/web/src/components/ui/resizable.jsx b/apps/web/src/components/ui/resizable.jsx
new file mode 100644
index 0000000..df5f77d
--- /dev/null
+++ b/apps/web/src/components/ui/resizable.jsx
@@ -0,0 +1,45 @@
+"use client"
+
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      className={cn("flex h-full w-full aria-[orientation=vertical]:flex-col", className)}
+      {...props} />
+  );
+}
+
+function ResizablePanel({
+  ...props
+}) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className
+      )}
+      {...props}>
+      {withHandle && (
+        <div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" />
+      )}
+    </ResizablePrimitive.Separator>
+  );
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
diff --git a/apps/web/src/components/ui/scroll-area.jsx b/apps/web/src/components/ui/scroll-area.jsx
new file mode 100644
index 0000000..f6fecfb
--- /dev/null
+++ b/apps/web/src/components/ui/scroll-area.jsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn("relative", className)} {...props}>
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1">
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      )}
+      {...props}>
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border" />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/apps/web/src/components/ui/select.jsx b/apps/web/src/components/ui/select.jsx
new file mode 100644
index 0000000..12dae73
--- /dev/null
+++ b/apps/web/src/components/ui/select.jsx
@@ -0,0 +1,184 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+function Select({
+  ...props
+}) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  className,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props} />
+  );
+}
+
+function SelectValue({
+  ...props
+}) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}>
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        data-align-trigger={position === "item-aligned"}
+        className={cn(
+          "relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}>
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          data-position={position}
+          className={cn(
+            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
+            position === "popper" && ""
+          )}>
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props} />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}>
+      <span
+        className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="pointer-events-none" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props} />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}>
+      <ChevronUpIcon />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}>
+      <ChevronDownIcon />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/apps/web/src/components/ui/separator.jsx b/apps/web/src/components/ui/separator.jsx
new file mode 100644
index 0000000..3116fdd
--- /dev/null
+++ b/apps/web/src/components/ui/separator.jsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export { Separator }
diff --git a/apps/web/src/components/ui/sheet.jsx b/apps/web/src/components/ui/sheet.jsx
new file mode 100644
index 0000000..91531e0
--- /dev/null
+++ b/apps/web/src/components/ui/sheet.jsx
@@ -0,0 +1,136 @@
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({
+  ...props
+}) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({
+  ...props
+}) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+  ...props
+}) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({
+  ...props
+}) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          className
+        )}
+        {...props}>
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close data-slot="sheet-close" asChild>
+            <Button variant="ghost" className="absolute top-3 right-3" size="icon-sm">
+              <XIcon />
+              <span className="sr-only">Close</span>
+            </Button>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-0.5 p-4", className)}
+      {...props} />
+  );
+}
+
+function SheetFooter({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props} />
+  );
+}
+
+function SheetTitle({
+  className,
+  ...props
+}) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("font-heading text-base font-medium text-foreground", className)}
+      {...props} />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props} />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/apps/web/src/components/ui/sidebar.jsx b/apps/web/src/components/ui/sidebar.jsx
new file mode 100644
index 0000000..d971e6b
--- /dev/null
+++ b/apps/web/src/components/ui/sidebar.jsx
@@ -0,0 +1,657 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { PanelLeftIcon } from "lucide-react"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+const SidebarContext = React.createContext(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback((value) => {
+    const openState = typeof value === "function" ? value(open) : value
+    if (setOpenProp) {
+      setOpenProp(openState)
+    } else {
+      _setOpen(openState)
+    }
+
+    // This sets the cookie to keep the sidebar state.
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+  }, [setOpenProp, open])
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo(() => ({
+    state,
+    open,
+    setOpen,
+    isMobile,
+    openMobile,
+    setOpenMobile,
+    toggleSidebar,
+  }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar])
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        data-slot="sidebar-wrapper"
+        style={
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            ...style
+          }
+        }
+        className={cn(
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+          className
+        )}
+        {...props}>
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  );
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className
+        )}
+        {...props}>
+        {children}
+      </div>
+    );
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE
+            }
+          }
+          side={side}>
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <div
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar">
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )} />
+      <div
+        data-slot="sidebar-container"
+        data-side={side}
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}>
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon-sm"
+      className={cn(className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}>
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+}
+
+function SidebarRail({
+  className,
+  ...props
+}) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function SidebarInset({
+  className,
+  ...props
+}) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function SidebarInput({
+  className,
+  ...props
+}) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("h-8 w-full bg-background shadow-none", className)}
+      {...props} />
+  );
+}
+
+function SidebarHeader({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props} />
+  );
+}
+
+function SidebarFooter({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props} />
+  );
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props} />
+  );
+}
+
+function SidebarContent({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function SidebarGroup({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props} />
+  );
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props} />
+  );
+}
+
+function SidebarMenu({
+  className,
+  ...props
+}) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-0", className)}
+      {...props} />
+  );
+}
+
+function SidebarMenuItem({
+  className,
+  ...props
+}) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props} />
+  );
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props} />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip} />
+    </Tooltip>
+  );
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}) {
+  // Random width between 50 to 90%.
+  const [width] = React.useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  })
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}>
+      {showIcon && (
+        <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width
+          }
+        } />
+    </div>
+  );
+}
+
+function SidebarMenuSub({
+  className,
+  ...props
+}) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props} />
+  );
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/apps/web/src/components/ui/skeleton.jsx b/apps/web/src/components/ui/skeleton.jsx
new file mode 100644
index 0000000..38345a7
--- /dev/null
+++ b/apps/web/src/components/ui/skeleton.jsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props} />
+  );
+}
+
+export { Skeleton }
diff --git a/apps/web/src/components/ui/slider.jsx b/apps/web/src/components/ui/slider.jsx
new file mode 100644
index 0000000..ad3e66a
--- /dev/null
+++ b/apps/web/src/components/ui/slider.jsx
@@ -0,0 +1,52 @@
+"use client"
+
+import * as React from "react"
+import { Slider as SliderPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}) {
+  const _values = React.useMemo(() =>
+    Array.isArray(value)
+      ? value
+      : Array.isArray(defaultValue)
+        ? defaultValue
+        : [min, max], [value, defaultValue, min, max])
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col",
+        className
+      )}
+      {...props}>
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className="relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1">
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className="absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full" />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50" />
+      ))}
+    </SliderPrimitive.Root>
+  );
+}
+
+export { Slider }
diff --git a/apps/web/src/components/ui/sonner.jsx b/apps/web/src/components/ui/sonner.jsx
new file mode 100644
index 0000000..8b203ad
--- /dev/null
+++ b/apps/web/src/components/ui/sonner.jsx
@@ -0,0 +1,52 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner";
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({
+  ...props
+}) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme}
+      className="toaster group"
+      closeButton
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Loader2Icon className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+          "--toast-close-button-start": "unset",
+          "--toast-close-button-end": "0",
+          "--toast-close-button-transform": "translate(35%, -35%)"
+        }
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props} />
+  );
+}
+
+export { Toaster }
diff --git a/apps/web/src/components/ui/spinner.jsx b/apps/web/src/components/ui/spinner.jsx
new file mode 100644
index 0000000..0d4e0e2
--- /dev/null
+++ b/apps/web/src/components/ui/spinner.jsx
@@ -0,0 +1,17 @@
+import { cn } from "@/lib/utils"
+import { Loader2Icon } from "lucide-react"
+
+function Spinner({
+  className,
+  ...props
+}) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props} />
+  );
+}
+
+export { Spinner }
diff --git a/apps/web/src/components/ui/switch.jsx b/apps/web/src/components/ui/switch.jsx
new file mode 100644
index 0000000..022d99c
--- /dev/null
+++ b/apps/web/src/components/ui/switch.jsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}>
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground" />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch }
diff --git a/apps/web/src/components/ui/table.jsx b/apps/web/src/components/ui/table.jsx
new file mode 100644
index 0000000..5128be4
--- /dev/null
+++ b/apps/web/src/components/ui/table.jsx
@@ -0,0 +1,121 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({
+  className,
+  ...props
+}) {
+  return (
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props} />
+    </div>
+  );
+}
+
+function TableHeader({
+  className,
+  ...props
+}) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props} />
+  );
+}
+
+function TableBody({
+  className,
+  ...props
+}) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props} />
+  );
+}
+
+function TableFooter({
+  className,
+  ...props
+}) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+      {...props} />
+  );
+}
+
+function TableRow({
+  className,
+  ...props
+}) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function TableHead({
+  className,
+  ...props
+}) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function TableCell({
+  className,
+  ...props
+}) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props} />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/apps/web/src/components/ui/tabs.jsx b/apps/web/src/components/ui/tabs.jsx
new file mode 100644
index 0000000..1b9a8db
--- /dev/null
+++ b/apps/web/src/components/ui/tabs.jsx
@@ -0,0 +1,82 @@
+"use client"
+
+import * as React from "react"
+import { cva } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn("group/tabs flex gap-2 data-horizontal:flex-col", className)}
+      {...props} />
+  );
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props} />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props} />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/apps/web/src/components/ui/textarea.jsx b/apps/web/src/components/ui/textarea.jsx
new file mode 100644
index 0000000..decf453
--- /dev/null
+++ b/apps/web/src/components/ui/textarea.jsx
@@ -0,0 +1,20 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({
+  className,
+  ...props
+}) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export { Textarea }
diff --git a/apps/web/src/components/ui/toggle-group.jsx b/apps/web/src/components/ui/toggle-group.jsx
new file mode 100644
index 0000000..58889b6
--- /dev/null
+++ b/apps/web/src/components/ui/toggle-group.jsx
@@ -0,0 +1,75 @@
+"use client";
+import * as React from "react"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+  orientation: "horizontal",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  orientation = "horizontal",
+  children,
+  ...props
+}) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      data-orientation={orientation}
+      style={{
+        "--gap": spacing
+      }}
+      className={cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
+        className
+      )}
+      {...props}>
+      <ToggleGroupContext.Provider value={{ variant, size, spacing, orientation }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  );
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}>
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/apps/web/src/components/ui/toggle.jsx b/apps/web/src/components/ui/toggle.jsx
new file mode 100644
index 0000000..add1a66
--- /dev/null
+++ b/apps/web/src/components/ui/toggle.jsx
@@ -0,0 +1,43 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+import { Toggle as TogglePrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted",
+      },
+      size: {
+        default:
+          "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props} />
+  );
+}
+
+export { Toggle, toggleVariants }
diff --git a/apps/web/src/components/ui/tooltip.jsx b/apps/web/src/components/ui/tooltip.jsx
new file mode 100644
index 0000000..b761e12
--- /dev/null
+++ b/apps/web/src/components/ui/tooltip.jsx
@@ -0,0 +1,51 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return (<TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />);
+}
+
+function Tooltip({
+  ...props
+}) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({
+  ...props
+}) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}>
+        {children}
+        <TooltipPrimitive.Arrow
+          className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
diff --git a/apps/web/src/contexts/AdminAdvertisementContext.jsx b/apps/web/src/contexts/AdminAdvertisementContext.jsx
new file mode 100644
index 0000000..8528d92
--- /dev/null
+++ b/apps/web/src/contexts/AdminAdvertisementContext.jsx
@@ -0,0 +1,259 @@
+import { createContext, useCallback, useContext, useState } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const AdvertisementsContext = createContext(null);
+
+export function useAdvertisements() {
+    const ctx = useContext(AdvertisementsContext);
+    if (!ctx) throw new Error("useAdvertisements must be used within an AdvertisementsProvider");
+    return ctx;
+}
+
+// ─── Initial States ────────────────────────────────────────────────────────────
+
+const PAGINATION_INIT = {
+    page: 1,
+    limit: 10,
+    totalRecords: 0,
+    totalPages: 0,
+    hasPrevPage: false,
+    hasNextPage: false,
+};
+
+export function AdvertisementsProvider({ children }) {
+    const [advertisements, setAdvertisements] = useState([]);
+    const [attributes, setAttributes] = useState([]);
+    const [pagination, setPagination] = useState(PAGINATION_INIT);
+    const [selectedAdvertisement, setSelectedAdvertisement] = useState(null);
+    const [loading, setLoading] = useState(false);
+
+    const request = useCallback(async (fn) => {
+        setLoading(true);
+        try {
+            return await fn();
+        } catch (err) {
+            const message = err?.response?.data?.message ?? "Something went wrong.";
+            toast(message);
+            return null;
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    // ─── GET /api/admin/advertisements ────────────────────────────────────────
+    const fetchAdvertisements = useCallback(
+        ({ page = 1, limit = 10, filters = [], sort = [] } = {}) =>
+            request(async () => {
+                const { data } = await api.get("/admin/advertisements", {
+                    params: {
+                        page, limit,
+                        filters: filters.length ? JSON.stringify(filters) : undefined,
+                        sort: sort.length ? JSON.stringify(sort) : undefined,
+                    },
+                });
+                const result = data?.data;
+                setAdvertisements(result?.data ?? []);
+                setPagination(result?.pagination ?? PAGINATION_INIT);
+                setAttributes(result.attributes);
+                return data.data;
+            }),
+        [request]
+    );
+
+    // ─── GET /api/admin/advertisements/:advertisementId ───────────────────────
+    const fetchAdvertisement = useCallback(
+        (advertisementId) =>
+            request(async () => {
+                const res = await api.get(`/admin/advertisements/${advertisementId}`);
+                setSelectedAdvertisement(res.data?.data?.data ?? null);
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── GET /api/admin/advertisements/archived ────────────────────────────────
+    const fetchArchivedAdvertisements = useCallback(
+        ({ page = 1, limit = 10, filters = [], sort = [] } = {}) =>
+            request(async () => {
+                const { data } = await api.get("/admin/advertisements/archived", {
+                    params: {
+                        page, limit,
+                        filters: filters.length ? JSON.stringify(filters) : undefined,
+                        sort: sort.length ? JSON.stringify(sort) : undefined,
+                    },
+                });
+                const final_data = data?.data;
+                setAdvertisements(final_data?.data ?? []);
+                setPagination(final_data?.pagination ?? PAGINATION_INIT);
+                setAttributes(final_data.attributes);
+                return data;
+            }),
+        [request]
+    );
+
+    // ─── POST /api/admin/advertisements ────────────────────────────────────────
+    const createAdvertisement = useCallback(
+        (fields) =>
+            request(async () => {
+                const res = await api.post("/admin/advertisements", fields);
+                const advertisement = res.data?.data?.data ?? null;
+                if (advertisement) {
+                    setAdvertisements((prev) => [advertisement, ...prev]);
+                    toast("Ad created successfully.");
+                }
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── PATCH /api/admin/advertisements/:advertisementId ─────────────────────
+    const updateAdvertisement = useCallback(
+        (advertisementId, fields) =>
+            request(async () => {
+                const res = await api.patch(`/admin/advertisements/${advertisementId}`, fields);
+                const advertisement = res.data?.data?.data ?? null;
+                if (advertisement) {
+                    setAdvertisements((prev) => prev.map((a) => (a.advertisement_id === advertisementId ? advertisement : a)));
+                    setSelectedAdvertisement(advertisement);
+                    toast("Ad updated successfully.");
+                }
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── PATCH /api/admin/advertisements/:advertisementId/reorder ─────────────
+    const reorderAdvertisement = useCallback(
+        (advertisementId, direction) =>
+            request(async () => {
+                const res = await api.patch(`/admin/advertisements/${advertisementId}/reorder`, { direction });
+                const updates = res.data?.data?.updates ?? [];
+                if (updates.length) {
+                    const orderById = new Map(updates.map((u) => [u.advertisement_id, u.order]));
+                    setAdvertisements((prev) => prev.map((a) =>
+                        orderById.has(a.advertisement_id) ? { ...a, order: orderById.get(a.advertisement_id) } : a
+                    ));
+                }
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── DELETE /api/admin/advertisements/:advertisementId ────────────────────
+    const archiveAdvertisement = useCallback(
+        (advertisementId, { deletedBy } = {}) =>
+            request(async () => {
+                const res = await api.delete(`/admin/advertisements/${advertisementId}`, {
+                    data: { deletedBy },
+                });
+                setAdvertisements((prev) => prev.filter((a) => a.advertisement_id !== advertisementId));
+                setSelectedAdvertisement((prev) => (prev?.advertisement_id === advertisementId ? null : prev));
+                toast("Ad archived.");
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── DELETE /api/admin/advertisements/bulk ─────────────────────────────────
+    const archiveAdvertisements = useCallback(
+        ({ ids }, { deletedBy } = {}) =>
+            request(async () => {
+                const res = await api.delete("/admin/advertisements/bulk", {
+                    data: { ids, deletedBy },
+                });
+                setAdvertisements((prev) => prev.filter((a) => !ids.includes(a.advertisement_id)));
+                toast(`${ids.length} ad(s) archived.`);
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── PATCH /api/admin/advertisements/:advertisementId/restore ─────────────
+    const restoreAdvertisement = useCallback(
+        (advertisementId) =>
+            request(async () => {
+                const res = await api.patch(`/admin/advertisements/${advertisementId}/restore`);
+                const advertisement = res.data?.data?.data ?? null;
+                if (advertisement) {
+                    setAdvertisements((prev) => prev.filter((a) => a.advertisement_id !== advertisementId));
+                    toast("Ad restored.");
+                }
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── PATCH /api/admin/advertisements/bulk-restore ──────────────────────────
+    const restoreAdvertisements = useCallback(
+        ({ ids }) =>
+            request(async () => {
+                const res = await api.patch("/admin/advertisements/bulk-restore", { ids });
+                setAdvertisements((prev) => prev.filter((a) => !ids.includes(a.advertisement_id)));
+                toast(`${ids.length} ad(s) restored.`);
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── DELETE /api/admin/advertisements/:advertisementId/permanent ──────────
+    const permanentlyDeleteAdvertisement = useCallback(
+        (advertisementId) =>
+            request(async () => {
+                const res = await api.delete(`/admin/advertisements/${advertisementId}/permanent`);
+                setAdvertisements((prev) => prev.filter((a) => a.advertisement_id !== advertisementId));
+                toast("Ad permanently deleted.");
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── DELETE /api/admin/advertisements/bulk/permanent ───────────────────────
+    const permanentlyDeleteAdvertisements = useCallback(
+        ({ ids }) =>
+            request(async () => {
+                const res = await api.delete("/admin/advertisements/bulk/permanent", { data: { ids } });
+                setAdvertisements((prev) => prev.filter((a) => !ids.includes(a.advertisement_id)));
+                toast(`${ids.length} ad(s) permanently deleted.`);
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── GET /api/admin/advertisements/field-values ────────────────────────────
+    const fetchAdvertisementFieldValues = useCallback(
+        (field) =>
+            request(async () => {
+                const res = await api.get("/admin/advertisements/field-values", { params: { field } });
+                return res.data?.data;
+            }),
+        [request]
+    );
+
+    return (
+        <AdvertisementsContext.Provider value={{
+            advertisements,
+            attributes,
+            pagination,
+            selectedAdvertisement,
+            loading,
+            setPagination,
+            setSelectedAdvertisement,
+            fetchAdvertisements,
+            fetchAdvertisement,
+            fetchArchivedAdvertisements,
+            createAdvertisement,
+            updateAdvertisement,
+            reorderAdvertisement,
+            archiveAdvertisement,
+            archiveAdvertisements,
+            restoreAdvertisement,
+            restoreAdvertisements,
+            permanentlyDeleteAdvertisement,
+            permanentlyDeleteAdvertisements,
+            fetchAdvertisementFieldValues
+        }}>
+            {children}
+        </AdvertisementsContext.Provider>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/contexts/AdminAssetsContext.jsx b/apps/web/src/contexts/AdminAssetsContext.jsx
new file mode 100644
index 0000000..b528bde
--- /dev/null
+++ b/apps/web/src/contexts/AdminAssetsContext.jsx
@@ -0,0 +1,404 @@
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+import api from "@/utils/api.util";
+import { presignAssetUpload, uploadPresigned } from "@/utils/presignedUpload.util";
+import { toast } from "sonner";
+
+const AssetsContext = createContext(null);
+
+// Split from AssetsContext on purpose: mediaTokens is the one piece of state
+// every AssetPickerSheet instance needs (to resolve its own thumbnails), but
+// it has nothing to do with the table-page state (assets/pagination/
+// attributes/loading) that also lives in AssetsContext. Without the split,
+// a picker subscribing to useAssets() would re-render any time the admin
+// Assets table's list state changed too, even though it never reads it.
+const MediaTokensContext = createContext(null);
+
+export function useAssets() {
+    const ctx = useContext(AssetsContext);
+    if (!ctx) throw new Error("useAssets must be used within an AssetsProvider");
+    return ctx;
+}
+
+export function useMediaTokens() {
+    const ctx = useContext(MediaTokensContext);
+    if (!ctx) throw new Error("useMediaTokens must be used within an AssetsProvider");
+    return ctx;
+}
+
+// ─── Initial States ────────────────────────────────────────────────────────────
+const PAGINATION_INIT = {
+    page: 1,
+    limit: 10,
+    totalRecords: 0,
+    totalPages: 0,
+    hasPrevPage: false,
+    hasNextPage: false,
+};
+
+// No Redis yet — these caches are plain in-memory (per browser tab, cleared on
+// refresh) to absorb the repeated open/close traffic pickers like
+// AssetPickerSheet generate against Postgres and the media-token endpoint.
+const LIST_CACHE_TTL_MS = 20_000; // short: just enough to survive rapid open/close flapping
+const MEDIA_TOKEN_TTL_MS = 30 * 60 * 1000; // mirrors TOKEN_TTL_SEC in media.controller.js
+const MEDIA_TOKEN_REFRESH_MARGIN_MS = 2 * 60 * 1000; // re-mint a bit before real expiry
+
+const cacheKeyFor = (scope, { page, limit, filters, sort }) =>
+    `${scope}:${JSON.stringify({ page, limit, filters, sort })}`;
+
+export function AssetsProvider({ children }) {
+    const [assets, setAssets] = useState([]);
+    const [attributes, setAttributes] = useState([]);
+    const [pagination, setPagination] = useState(PAGINATION_INIT);
+    const [selectedAsset, setSelectedAsset] = useState(null);
+    const [loading, setLoading] = useState(false);
+
+    // { [asset_id]: { token, thumbnail_url, issuedAt } } — shared across every
+    // picker instance so tokens survive sheet open/close for their full TTL.
+    const [mediaTokens, setMediaTokens] = useState({});
+    const mediaTokensRef = useRef({});
+    const listCacheRef = useRef(new Map());
+
+    const invalidateListCache = () => listCacheRef.current.clear();
+
+    // Seeds mediaTokens from stream_token/thumbnail_url fields the backend now
+    // embeds directly in S3 rows of GET /admin/assets — so getMediaTokens (called
+    // right after fetchAssets by pickers/tables) finds them already cached and
+    // skips the batch round-trip instead of re-requesting tokens it just got.
+    const seedMediaTokensFromRows = (rows = []) => {
+        const issuedAt = Date.now();
+        const next = {};
+        for (const row of rows) {
+            if (row.stream_token) {
+                next[String(row.asset_id)] = { token: row.stream_token, thumbnail_url: row.thumbnail_url ?? null, issuedAt };
+            }
+        }
+        if (Object.keys(next).length) {
+            mediaTokensRef.current = { ...mediaTokensRef.current, ...next };
+            setMediaTokens(mediaTokensRef.current);
+        }
+    };
+
+    const request = useCallback(async (fn) => {
+        setLoading(true);
+        try {
+            return await fn();
+        } catch (err) {
+            const message = err?.response?.data?.message || err.message || "Something went wrong.";
+            toast(message);
+            return null;
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    // ─── GET /api/admin/assets (shared, cached) ──────────────────────────────
+    // Cached per (page, limit, filters, sort) for LIST_CACHE_TTL_MS so repeated
+    // callers (the table page, every mounted picker) don't re-hit Postgres for
+    // the same query within the TTL window. Pass force: true to bypass the
+    // cache. Returns the resolved { assets, pagination, attributes, raw } and
+    // seeds mediaTokens as a side effect — does NOT touch assets/pagination/
+    // attributes/loading state, so callers decide where the result lives.
+    const resolveAssetsQuery = useCallback(
+        async ({ page = 1, limit = 10, filters = [], sort = [], force = false } = {}) => {
+            const key = cacheKeyFor("assets", { page, limit, filters, sort });
+            const cached = listCacheRef.current.get(key);
+            if (!force && cached && Date.now() - cached.fetchedAt < LIST_CACHE_TTL_MS) {
+                seedMediaTokensFromRows(cached.assets);
+                return cached;
+            }
+
+            const { data } = await api.get("/admin/assets", {
+                params: {
+                    page, limit,
+                    filters: filters.length ? JSON.stringify(filters) : undefined,
+                    sort: sort.length ? JSON.stringify(sort) : undefined,
+                },
+            });
+
+            const result = data?.data;
+            const resolved = {
+                assets: result?.data ?? [],
+                pagination: result?.pagination ?? PAGINATION_INIT,
+                attributes: result.attributes,
+                raw: data.data,
+                fetchedAt: Date.now(),
+            };
+
+            seedMediaTokensFromRows(resolved.assets);
+            listCacheRef.current.set(key, resolved);
+
+            return resolved;
+        },
+        []
+    );
+
+    // Shared-state variant — used by the admin Assets table page. Applies the
+    // resolved query directly onto the provider's assets/pagination/attributes/
+    // loading state.
+    const fetchAssets = useCallback(
+        (query = {}) =>
+            request(async () => {
+                const resolved = await resolveAssetsQuery(query);
+                setAssets(resolved.assets);
+                setPagination(resolved.pagination);
+                setAttributes(resolved.attributes);
+                return resolved.raw;
+            }),
+        [request, resolveAssetsQuery]
+    );
+
+    // Instance-local variant — used by AssetPickerSheet (and any other caller
+    // that needs its own independent list/pagination/loading rather than the
+    // single shared slice above). Multiple pickers can be mounted at once
+    // (one per media block on a page); sharing state here would mean opening
+    // one picker re-renders and stomps the list of every other mounted one.
+    const fetchAssetsList = useCallback(
+        async (query = {}) => {
+            try {
+                const resolved = await resolveAssetsQuery(query);
+                return { assets: resolved.assets, pagination: resolved.pagination };
+            } catch (err) {
+                const message = err?.response?.data?.message || err.message || "Something went wrong.";
+                toast(message);
+                return { assets: [], pagination: PAGINATION_INIT };
+            }
+        },
+        [resolveAssetsQuery]
+    );
+
+    // ─── POST /api/admin/media/tokens (batch) ────────────────────────────────
+    // Skips any asset_id whose cached token is still within its TTL (minus a
+    // safety margin) instead of re-minting a fresh JWT/presigned URL every time
+    // a picker reopens. Shared across all picker instances via context state.
+    const getMediaTokens = useCallback((assetIds = []) => {
+        const now = Date.now();
+        const missing = assetIds
+            .map(String)
+            .filter((id) => {
+                const cached = mediaTokensRef.current[id];
+                return !cached || (now - cached.issuedAt) > (MEDIA_TOKEN_TTL_MS - MEDIA_TOKEN_REFRESH_MARGIN_MS);
+            });
+
+        if (!missing.length) return Promise.resolve(mediaTokensRef.current);
+
+        return api.post("/admin/media/tokens", { asset_ids: missing }).then(({ data }) => {
+            const tokens     = data.data?.tokens     ?? {};
+            const thumbnails = data.data?.thumbnails ?? {};
+            const issuedAt   = Date.now();
+
+            const next = {};
+            for (const [id, token] of Object.entries(tokens)) {
+                next[id] = { token, thumbnail_url: thumbnails[id] ?? null, issuedAt };
+            }
+
+            mediaTokensRef.current = { ...mediaTokensRef.current, ...next };
+            setMediaTokens(mediaTokensRef.current);
+            return mediaTokensRef.current;
+        });
+    }, []);
+
+    // ─── GET /api/admin/assets/:assetId ───────────────────────────────────────
+    const fetchAsset = useCallback(
+        (assetId) =>
+            request(async () => {
+                const res = await api.get(`/admin/assets/${assetId}`);
+                setSelectedAsset(res.data?.data?.data ?? null);
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── GET /api/admin/assets/archived ───────────────────────────────────────
+    const fetchArchivedAssets = useCallback(
+        ({ page = 1, limit = 10, filters = [], sort = [] } = {}) =>
+            request(async () => {
+                const { data } = await api.get("/admin/assets/archived", {
+                    params: {
+                        page, limit,
+                        filters: filters.length ? JSON.stringify(filters) : undefined,
+                        sort: sort.length ? JSON.stringify(sort) : undefined,
+                    },
+                });
+                const final_data = data?.data;
+
+                setAssets(final_data?.data ?? []);
+                setPagination(final_data?.pagination ?? PAGINATION_INIT);
+                setAttributes(final_data.attributes);
+                return data;
+            }),
+        [request]
+    );
+
+    // ─── PATCH /api/admin/assets/:assetId ────────────────────────────────────
+    //
+    // A replacement file (video thumbnail, or an image/audio asset's main
+    // file) goes out the same presigned direct-to-storage path as
+    // uploadAsset() above — this backend never buffers it. The PATCH body
+    // itself is plain JSON either way (storage_key when a file was replaced).
+    const updateAsset = useCallback(
+        (assetId, fields, file = null) =>
+            request(async () => {
+                let filePayload = {};
+                if (file) {
+                    const presigned = await presignAssetUpload(file);
+                    await uploadPresigned(file, presigned);
+                    filePayload = {
+                        storage_key: presigned.key,
+                        original_name: file.name,
+                        mimetype: file.type || undefined,
+                    };
+                }
+
+                const res = await api.patch(`/admin/assets/${assetId}`, { ...fields, ...filePayload });
+
+                const asset = res.data?.data?.data ?? null;
+                if (asset) {
+                    setAssets((prev) => prev.map((a) => (a.asset_id === assetId ? asset : a)));
+                    setSelectedAsset(asset);
+                    invalidateListCache();
+                    toast("File updated successfully.");
+                }
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── DELETE /api/admin/assets/:assetId ───────────────────────────────────
+    const archiveAsset = useCallback(
+        (assetId, { deletedBy } = {}) =>
+            request(async () => {
+                const res = await api.delete(`/admin/assets/${assetId}`, {
+                    data: { deletedBy },
+                });
+                setAssets((prev) => prev.filter((a) => a.asset_id !== assetId));
+                setSelectedAsset((prev) => (prev?.asset_id === assetId ? null : prev));
+                invalidateListCache();
+                toast("File archived.");
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── DELETE /api/admin/assets/bulk ───────────────────────────────────────
+    const archiveAssets = useCallback(
+        ({ ids }, { deletedBy } = {}) =>
+            request(async () => {
+                const res = await api.delete("/admin/assets/bulk", {
+                    data: { ids, deletedBy },
+                });
+                setAssets((prev) => prev.filter((a) => !ids.includes(a.asset_id)));
+                invalidateListCache();
+                toast(`${ids.length} file(s) archived.`);
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── PATCH /api/admin/assets/:assetId/restore ────────────────────────────
+    const restoreAsset = useCallback(
+        (assetId) =>
+            request(async () => {
+                const res = await api.patch(`/admin/assets/${assetId}/restore`);
+                const asset = res.data?.data?.data ?? null;
+                if (asset) {
+                    setAssets((prev) => prev.filter((a) => a.asset_id !== assetId));
+                    invalidateListCache();
+                    toast("File restored.");
+                }
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── PATCH /api/admin/assets/bulk-restore ────────────────────────────────
+    const restoreAssets = useCallback(
+        ({ ids }) =>
+            request(async () => {
+                const res = await api.patch("/admin/assets/bulk-restore", { ids });
+                setAssets((prev) => prev.filter((a) => !ids.includes(a.asset_id)));
+                invalidateListCache();
+                toast(`${ids.length} file(s) restored.`);
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── DELETE /api/admin/assets/:assetId/permanent ─────────────────────────
+    const permanentlyDeleteAsset = useCallback(
+        (assetId) =>
+            request(async () => {
+                const res = await api.delete(`/admin/assets/${assetId}/permanent`);
+                setAssets((prev) => prev.filter((a) => a.asset_id !== assetId));
+                setSelectedAsset((prev) => (prev?.asset_id === assetId ? null : prev));
+                invalidateListCache();
+                toast("File permanently deleted.");
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── DELETE /api/admin/assets/bulk/permanent ─────────────────────────────
+    const permanentlyDeleteAssets = useCallback(
+        ({ ids }) =>
+            request(async () => {
+                const res = await api.delete("/admin/assets/bulk/permanent", {
+                    data: { ids },
+                });
+                setAssets((prev) => prev.filter((a) => !ids.includes(a.asset_id)));
+                invalidateListCache();
+                toast(`${ids.length} file(s) permanently deleted.`);
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── GET /api/admin/assets/field-values ──────────────────────────────────────
+    const fetchAssetFieldValues = useCallback(
+        (field) =>
+            request(async () => {
+                const res = await api.get("/admin/assets/field-values", { params: { field } });
+                return res.data?.data;
+            }),
+        [request]
+    );
+
+    const value = useMemo(() => ({
+        assets,
+        attributes,
+        pagination,
+        selectedAsset,
+        loading,
+        setPagination,
+        setSelectedAsset,
+        fetchAssets,
+        fetchAssetsList,
+        fetchAsset,
+        fetchArchivedAssets,
+        updateAsset,
+        archiveAsset,
+        archiveAssets,
+        restoreAsset,
+        restoreAssets,
+        permanentlyDeleteAsset,
+        permanentlyDeleteAssets,
+        fetchAssetFieldValues
+    }), [
+        assets, attributes, pagination, selectedAsset, loading,
+        fetchAssets, fetchAssetsList, fetchAsset, fetchArchivedAssets,
+        updateAsset, archiveAsset, archiveAssets, restoreAsset, restoreAssets,
+        permanentlyDeleteAsset, permanentlyDeleteAssets, fetchAssetFieldValues,
+    ]);
+
+    const mediaTokensValue = useMemo(() => ({
+        mediaTokens,
+        getMediaTokens,
+    }), [mediaTokens, getMediaTokens]);
+
+    return (
+        <MediaTokensContext.Provider value={mediaTokensValue}>
+            <AssetsContext.Provider value={value}>
+                {children}
+            </AssetsContext.Provider>
+        </MediaTokensContext.Provider>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/contexts/AdminCategoriesContext.jsx b/apps/web/src/contexts/AdminCategoriesContext.jsx
new file mode 100644
index 0000000..ecb110d
--- /dev/null
+++ b/apps/web/src/contexts/AdminCategoriesContext.jsx
@@ -0,0 +1,164 @@
+import { createContext, useCallback, useContext, useState } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const AdminCategoriesContext = createContext(null);
+
+export function AdminCategoriesProvider({ children }) {
+  const [categories, setCategories] = useState([]);
+  const [category,   setCategory]   = useState(null);
+  const [categoryAttributes, setCategoryAttributes] = useState([]);
+  const [categoryPagination, setCategoryPagination] = useState({ page: 1, limit: 10, totalPages: 1, totalRecords: 0 });
+  const [loading,    setLoading]     = useState(false);
+
+  const fetchCategories = useCallback(async ({ page = 1, limit = 10, filters = [], sort = [], archived = false } = {}) => {
+    setLoading(true);
+    try {
+      const { data } = await api.get("/admin/categories", {
+        params: { page, limit, filters: JSON.stringify(filters), sort: JSON.stringify(sort), archived },
+      });
+      setCategories(data.data?.data ?? []);
+      setCategoryAttributes(data.data?.attributes ?? []);
+      setCategoryPagination({
+        page:         data.data?.pagination?.page         ?? page,
+        limit:        data.data?.pagination?.limit        ?? limit,
+        totalPages:   data.data?.pagination?.totalPages   ?? 1,
+        totalRecords: data.data?.pagination?.totalRecords ?? 0,
+      });
+    } catch { toast("Could not load categories."); }
+    finally { setLoading(false); }
+  }, []);
+
+  const fetchCategory = useCallback(async (id) => {
+    setLoading(true);
+    try {
+      const { data } = await api.get(`/admin/categories/${id}`);
+      setCategory(data.data ?? null);
+      return data.data;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not load category.");
+      return null;
+    } finally { setLoading(false); }
+  }, []);
+
+  const createCategory = useCallback(async (payload) => {
+    setLoading(true);
+    try {
+      const { data } = await api.post("/admin/categories", payload);
+      toast("Category created.");
+      return data.data;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not create category.");
+      return null;
+    } finally { setLoading(false); }
+  }, []);
+
+  const updateCategory = useCallback(async (id, payload) => {
+    setLoading(true);
+    try {
+      const { data } = await api.put(`/admin/categories/${id}`, payload);
+      setCategory(data.data ?? null);
+      toast("Category updated.");
+      return data.data;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not update category.");
+      return null;
+    } finally { setLoading(false); }
+  }, []);
+
+  const archiveCategory = useCallback(async (id) => {
+    setLoading(true);
+    try {
+      await api.delete(`/admin/categories/${id}`);
+      toast("Category archived.");
+      return true;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not archive category.");
+      return false;
+    } finally { setLoading(false); }
+  }, []);
+
+  const restoreCategory = useCallback(async (id) => {
+    setLoading(true);
+    try {
+      await api.post(`/admin/categories/${id}/restore`);
+      toast("Category restored.");
+      return true;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not restore category.");
+      return false;
+    } finally { setLoading(false); }
+  }, []);
+
+  const bulkArchiveCategories = useCallback(async (ids) => {
+    setLoading(true);
+    try {
+      await api.delete("/admin/categories/bulk", { data: { ids } });
+      toast("Categories archived.");
+      return true;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not archive categories.");
+      return false;
+    } finally { setLoading(false); }
+  }, []);
+
+  const bulkRestoreCategories = useCallback(async (ids) => {
+    setLoading(true);
+    try {
+      await api.post("/admin/categories/bulk-restore", { ids });
+      toast("Categories restored.");
+      return true;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not restore categories.");
+      return false;
+    } finally { setLoading(false); }
+  }, []);
+
+  const fetchCategoryPermanentDeleteImpact = useCallback(async (id) => {
+    try {
+      const { data } = await api.get(`/admin/categories/${id}/permanent-delete-impact`);
+      return [{ label: "course(s) linked to this category", count: data.data?.course_count ?? 0 }];
+    } catch {
+      return [];
+    }
+  }, []);
+
+  const permanentlyDeleteCategory = useCallback(async (id) => {
+    setLoading(true);
+    try {
+      await api.delete(`/admin/categories/${id}/permanent`);
+      toast("Category permanently deleted.");
+      return true;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not permanently delete category.");
+      return false;
+    } finally { setLoading(false); }
+  }, []);
+
+  const bulkPermanentlyDeleteCategories = useCallback(async (ids) => {
+    setLoading(true);
+    try {
+      await api.delete("/admin/categories/bulk/permanent", { data: { ids } });
+      toast("Categories permanently deleted.");
+      return true;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not permanently delete categories.");
+      return false;
+    } finally { setLoading(false); }
+  }, []);
+
+  return (
+    <AdminCategoriesContext.Provider value={{
+      categories, category, categoryAttributes, categoryPagination, setCategoryPagination, loading,
+      fetchCategories, fetchCategory,
+      createCategory, updateCategory,
+      archiveCategory, restoreCategory,
+      bulkArchiveCategories, bulkRestoreCategories,
+      fetchCategoryPermanentDeleteImpact, permanentlyDeleteCategory, bulkPermanentlyDeleteCategories,
+    }}>
+      {children}
+    </AdminCategoriesContext.Provider>
+  );
+}
+
+export const useCategories = () => useContext(AdminCategoriesContext);
diff --git a/apps/web/src/contexts/AdminCourseReadingProgressContext.jsx b/apps/web/src/contexts/AdminCourseReadingProgressContext.jsx
new file mode 100644
index 0000000..e757bef
--- /dev/null
+++ b/apps/web/src/contexts/AdminCourseReadingProgressContext.jsx
@@ -0,0 +1,88 @@
+/***********************************************************************************************************************************************************************
+ * File Name    : AdminCourseReadingProgressContext.jsx
+ * Type         : Context / Provider
+ * Description  : Admin context for course reading progress.
+ *
+ *                fetchCourseReadingProgress(courseId)
+ *                  → GET /admin/courses/:courseId/reading-progress
+ *                  → returns one summary entry per user
+ *
+ *                fetchUserReadingProgress(courseId, userId)
+ *                  → GET /admin/courses/:courseId/reading-progress/users/:userId
+ *                  → returns unit + lesson breakdown for a single user (loaded on expand)
+ *                  → cached in detailCache so repeated expands don't re-fetch
+ *
+ * Used by: CourseReadingProgressList.jsx (inside ViewCourse admin page)
+ ***********************************************************************************************************************************************************************/
+import { createContext, useCallback, useContext, useState } from 'react';
+import api from '@/utils/api.util';
+import { toast } from 'sonner';
+
+const AdminCourseReadingProgressContext = createContext(null);
+
+export function useAdminCourseReadingProgress() {
+    const ctx = useContext(AdminCourseReadingProgressContext);
+    if (!ctx) throw new Error('useAdminCourseReadingProgress must be used within AdminCourseReadingProgressProvider');
+    return ctx;
+}
+
+export function AdminCourseReadingProgressProvider({ children }) {
+    const [progressList,  setProgressList]  = useState([]);
+    const [listLoading,   setListLoading]   = useState(false);
+
+    // { [userId]: unitBreakdown[] } — populated lazily on row expand
+    const [detailCache,   setDetailCache]   = useState({});
+    const [detailLoading, setDetailLoading] = useState(false);
+
+    // ── Summary list ──────────────────────────────────────────────────────────
+
+    const fetchCourseReadingProgress = useCallback(async (courseId) => {
+        setListLoading(true);
+        try {
+            const { data } = await api.get(`/admin/courses/${courseId}/reading-progress`);
+            setProgressList(data.data ?? []);
+            setDetailCache({});
+        } catch (err) {
+            toast(err?.response?.data?.message ?? 'Could not load reading progress.');
+        } finally {
+            setListLoading(false);
+        }
+    }, []);
+
+    // ── Per-user detail (lazy, cached) ────────────────────────────────────────
+
+    const fetchUserReadingProgress = useCallback(async (courseId, userId) => {
+        if (detailCache[userId]) return detailCache[userId];
+        setDetailLoading(true);
+        try {
+            const { data } = await api.get(`/admin/courses/${courseId}/reading-progress/users/${userId}`);
+            const breakdown = data.data ?? [];
+            setDetailCache((prev) => ({ ...prev, [userId]: breakdown }));
+            return breakdown;
+        } catch (err) {
+            toast(err?.response?.data?.message ?? 'Could not load user progress.');
+            return null;
+        } finally {
+            setDetailLoading(false);
+        }
+    }, [detailCache]);
+
+    const resetProgress = useCallback(() => {
+        setProgressList([]);
+        setDetailCache({});
+    }, []);
+
+    return (
+        <AdminCourseReadingProgressContext.Provider value={{
+            progressList,
+            listLoading,
+            detailCache,
+            detailLoading,
+            fetchCourseReadingProgress,
+            fetchUserReadingProgress,
+            resetProgress,
+        }}>
+            {children}
+        </AdminCourseReadingProgressContext.Provider>
+    );
+}
diff --git a/apps/web/src/contexts/AdminCoursesContext.jsx b/apps/web/src/contexts/AdminCoursesContext.jsx
new file mode 100644
index 0000000..583c257
--- /dev/null
+++ b/apps/web/src/contexts/AdminCoursesContext.jsx
@@ -0,0 +1,1432 @@
+import { createContext, useCallback, useContext, useState } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const CoursesContext = createContext(null);
+
+export function useCourses() {
+  const ctx = useContext(CoursesContext);
+  if (!ctx) throw new Error("useCourses must be used within a CoursesProvider");
+  return ctx;
+}
+
+// ─── Initial States ───────────────────────────────────────────────────────────
+
+const PAGINATION_INIT = {
+  page: 1,
+  limit: 10,
+  totalRecords: 0,
+  totalPages: 0,
+  hasPrevPage: false,
+  hasNextPage: false,
+};
+
+const BASE = "/admin/courses";
+
+// Junction revamp — unit-scoped endpoints resolve either through a course
+// (/admin/courses/:courseId/units/:unitId) or straight against the standalone
+// unit library (/admin/units/:unitId) when no courseId is in scope. This lets
+// the quiz builder and unit pages run identically in both contexts.
+const unitBase = (courseId, unitId) =>
+  courseId != null && courseId !== ""
+    ? `${BASE}/${courseId}/units/${unitId}`
+    : `/admin/units/${unitId}`;
+
+// Lesson-scoped endpoints resolve through a unit when one is in scope,
+// otherwise straight against the standalone lesson library (/admin/lessons/:id).
+const lessonBase = (courseId, unitId, lessonId) =>
+  unitId != null && unitId !== ""
+    ? `${unitBase(courseId, unitId)}/lessons/${lessonId}`
+    : `/admin/lessons/${lessonId}`;
+
+// ─── Provider ─────────────────────────────────────────────────────────────────
+
+export function CoursesProvider({ children }) {
+
+  // ─── State ────────────────────────────────────────────────────────────────
+  const [courses, setCourses] = useState([]);
+  const [course, setCourse] = useState(null);
+  const [units, setUnits] = useState([]);
+  const [unit, setUnit] = useState(null);
+  const [lessons, setLessons] = useState([]);
+  const [lesson, setLesson] = useState(null);
+  const [lessonPage, setLessonPage] = useState(null);
+  const [prerequisites, setPrerequisites] = useState([]);
+  const [requirements, setRequirements] = useState([]);
+  const [quiz, setQuiz] = useState(null);
+  const [questions, setQuestions] = useState([]);
+  const [assessment, setAssessment] = useState(null);
+  const [completions, setCompletions] = useState(null);   // { summary, completions[] }
+  const [sessions, setSessions]       = useState(null);   // { summary, sessions[] }
+  const [attributes, setAttributes] = useState([]);
+  const [pagination, setPagination] = useState(PAGINATION_INIT);
+  const [loading, setLoading] = useState(false);
+
+  // ─── Request wrapper ──────────────────────────────────────────────────────
+  const request = useCallback(async (fn) => {
+    setLoading(true);
+    try {
+      return await fn();
+    } catch (err) {
+      const message = err?.response?.data?.message ?? "Something went wrong.";
+      if (err.status === 404 && message) toast(message);
+      else toast(message);
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // ─── Paginated GET helper ─────────────────────────────────────────────────
+  const paginatedGet = useCallback(
+    (url, setter, params = {}) =>
+      request(async () => {
+        const { filters, sort, ...rest } = params;
+        const { data } = await api.get(url, {
+          params: {
+            ...rest,
+            ...(filters?.length ? { filters: JSON.stringify(filters) } : {}),
+            ...(sort?.length ? { sort: JSON.stringify(sort) } : {}),
+          },
+        });
+        const final_data = data?.data;
+        setter(final_data?.data ?? []);
+        setPagination(final_data?.pagination ?? PAGINATION_INIT);
+        if (final_data?.attributes?.length) setAttributes(final_data.attributes);
+        return data;
+      }),
+    [request],
+  );
+
+  // =========================================================================
+  // COURSES
+  // =========================================================================
+
+  const fetchCourses = useCallback(
+    (params = {}) => paginatedGet(BASE, setCourses, params),
+    [paginatedGet],
+  );
+
+  const fetchCourse = useCallback(
+    (courseId) =>
+      request(async () => {
+        const { data } = await api.get(`${BASE}/${courseId}`);
+        const result = data?.data?.data ?? null;
+        setCourse(result);
+        setUnits(result?.units ?? []);
+        setPrerequisites(result?.prerequisites ?? []);
+        setAssessment(result?.assessment ?? null);
+        return data;
+      }),
+    [request],
+  );
+
+  const createCourse = useCallback(
+    (payload) =>
+      request(async () => {
+        const { data } = await api.post(BASE, payload);
+        const course = data?.data?.data ?? null;
+        if (course) {
+          setCourses((prev) => [course, ...prev]);
+          toast("Course created successfully.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  // Single-shot Add Course wizard submit — course + objectives + badge +
+  // achievements + the whole units/lessons roadmap in one write, so the
+  // wizard never has to fire a request per step (and per unit/lesson click).
+  const createCourseFull = useCallback(
+    (payload) =>
+      request(async () => {
+        const { data } = await api.post(`${BASE}/full`, payload);
+        const course = data?.data?.data ?? null;
+        if (course) {
+          setCourses((prev) => [course, ...prev]);
+          toast("Course created successfully.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  const updateCourse = useCallback(
+    (courseId, payload) =>
+      request(async () => {
+        const { data } = await api.put(`${BASE}/${courseId}`, payload);
+        const course = data?.data?.data ?? null;
+        if (course) {
+          setCourses((prev) => prev.map((c) => (c.course_id === courseId ? course : c)));
+          setCourse(course);
+          toast("Course updated successfully.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  const reorderCourses = useCallback(
+    (courseIds) =>
+      request(async () => {
+        await api.put(`${BASE}/order`, { course_ids: courseIds });
+        return true;
+      }),
+    [request],
+  );
+
+  const archiveCourse = useCallback(
+    (courseId) =>
+      request(async () => {
+        const { data } = await api.delete(`${BASE}/${courseId}`);
+        setCourses((prev) => prev.filter((c) => c.course_id !== courseId));
+        setCourse((prev) => (prev?.course_id === courseId ? null : prev));
+        toast("Course archived.");
+        return data;
+      }),
+    [request],
+  );
+
+  const archiveCourses = useCallback(
+    ({ ids }) =>
+      request(async () => {
+        const { data } = await api.delete(`${BASE}/bulk`, { data: { ids } });
+        setCourses((prev) => prev.filter((c) => !ids.includes(c.course_id)));
+        toast("Courses archived.");
+        return data;
+      }),
+    [request],
+  );
+
+  // ── Course Archives & Restore ─────────────────────────────────────────────
+
+  const fetchArchivedCourses = useCallback(
+    (params = {}) => paginatedGet(`${BASE}/archives`, setCourses, params),
+    [paginatedGet],
+  );
+
+  const fetchArchivedCourse = useCallback(
+    (courseId) =>
+      request(async () => {
+        const { data } = await api.get(`${BASE}/archives/${courseId}`);
+        const result = data?.data?.data ?? null;
+        setCourse(result);
+        return data;
+      }),
+    [request],
+  );
+
+  const restoreCourse = useCallback(
+    (courseId) =>
+      request(async () => {
+        const { data } = await api.patch(`${BASE}/${courseId}/restore`);
+        const result = data?.data?.data ?? null;
+        if (result) {
+          setCourses((prev) => prev.filter((c) => c.course_id !== courseId));
+          toast("Course restored.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  const restoreCourses = useCallback(
+    ({ ids }) =>
+      request(async () => {
+        const { data } = await api.patch(`${BASE}/restore/bulk`, { ids });
+        setCourses((prev) => prev.filter((c) => !ids.includes(c.course_id)));
+        toast("Courses restored.");
+        return data;
+      }),
+    [request],
+  );
+
+  const permanentlyDeleteCourse = useCallback(
+    (courseId) =>
+      request(async () => {
+        const { data } = await api.delete(`${BASE}/${courseId}/permanent`);
+        setCourses((prev) => prev.filter((c) => c.course_id !== courseId));
+        setCourse((prev) => (prev?.course_id === courseId ? null : prev));
+        toast("Course permanently deleted.");
+        return data;
+      }),
+    [request],
+  );
+
+  const permanentlyDeleteCourses = useCallback(
+    ({ ids }) =>
+      request(async () => {
+        const { data } = await api.delete(`${BASE}/bulk/permanent`, { data: { ids } });
+        setCourses((prev) => prev.filter((c) => !ids.includes(c.course_id)));
+        toast("Courses permanently deleted.");
+        return data;
+      }),
+    [request],
+  );
+
+  const fetchCoursePermanentDeleteImpact = useCallback(
+    (courseId) =>
+      request(async () => {
+        const { data } = await api.get(`${BASE}/${courseId}/permanent-delete-impact`);
+        const { unitCount, lessonCount } = data?.data ?? {};
+        return [
+          { label: "unit(s)", count: unitCount ?? 0 },
+          { label: "lesson(s)", count: lessonCount ?? 0 },
+        ];
+      }),
+    [request],
+  );
+
+  // =========================================================================
+  // PREREQUISITES
+  // =========================================================================
+
+  const fetchPrerequisites = useCallback(
+    (courseId) =>
+      request(async () => {
+        const { data } = await api.get(`${BASE}/${courseId}/prerequisites`);
+        const result = data?.data?.data ?? [];
+        setPrerequisites(result);
+        return data;
+      }),
+    [request],
+  );
+
+  const syncPrerequisites = useCallback(
+    (courseId, prerequisites) =>
+      request(async () => {
+        const { data } = await api.put(`${BASE}/${courseId}/prerequisites`, { prerequisites });
+        setPrerequisites(prerequisites);
+        toast("Prerequisites updated.");
+        return data;
+      }),
+    [request],
+  );
+
+  // Flat lists for the prerequisite picker's Course/Unit/Lesson selectors —
+  // same endpoints AdminTaskContext uses for the Task requirement picker.
+  const fetchCoursesFlat = useCallback(
+    () => request(async () => {
+      const { data } = await api.get(`${BASE}/flat`);
+      return data?.data ?? [];
+    }),
+    [request],
+  );
+
+  const fetchUnitsFlat = useCallback(
+    () => request(async () => {
+      const { data } = await api.get(`${BASE}/units-flat`);
+      return data?.data ?? [];
+    }),
+    [request],
+  );
+
+  const fetchLessonsFlat = useCallback(
+    () => request(async () => {
+      const { data } = await api.get(`${BASE}/lessons-flat`);
+      return data?.data ?? [];
+    }),
+    [request],
+  );
+
+  // =========================================================================
+  // UNITS
+  // =========================================================================
+
+  const fetchUnits = useCallback(
+    (courseId, params = {}) => {
+      const mergeQuiz = (incoming) =>
+        setUnits((prev) => {
+          if (!prev.length) return incoming;
+          const prevMap = Object.fromEntries(prev.map((u) => [u.unit_id, u]));
+          return incoming.map((u) => {
+            const old = prevMap[u.unit_id];
+            return {
+              ...u,
+              quiz:    u.quiz    ?? old?.quiz    ?? null,
+              quiz_id: u.quiz_id ?? old?.quiz_id ?? null,
+            };
+          });
+        });
+      return paginatedGet(`${BASE}/${courseId}/units`, mergeQuiz, params);
+    },
+    [paginatedGet],
+  );
+
+  const fetchUnit = useCallback(
+    (courseId, unitId) =>
+      request(async () => {
+        const { data } = await api.get(`${unitBase(courseId, unitId)}`);
+        const result = data?.data?.data ?? null;
+        setUnit(result);
+        setLessons(result?.lessons ?? []);
+        setQuiz(result?.quiz ?? null);
+        return data;
+      }),
+    [request],
+  );
+
+  const createUnit = useCallback(
+    (courseId, payload) =>
+      request(async () => {
+        const { data } = await api.post(`${BASE}/${courseId}/units`, payload);
+        const unit = data?.data?.data ?? null;
+        if (unit) {
+          setUnits((prev) => [...prev, unit]);
+          toast("Unit created successfully.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  const updateUnit = useCallback(
+    (courseId, unitId, payload) =>
+      request(async () => {
+        const { data } = await api.put(`${unitBase(courseId, unitId)}`, payload);
+        const unit = data?.data?.data ?? null;
+        if (unit) {
+          setUnits((prev) => prev.map((u) => (u.unit_id === unitId ? unit : u)));
+          setUnit(unit);
+          toast("Unit updated successfully.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  const archiveUnit = useCallback(
+    (courseId, unitId) =>
+      request(async () => {
+        const { data } = await api.delete(`${unitBase(courseId, unitId)}`);
+        setUnits((prev) => prev.filter((u) => u.unit_id !== unitId));
+        setUnit((prev) => (prev?.unit_id === unitId ? null : prev));
+        toast("Unit archived.");
+        return data;
+      }),
+    [request],
+  );
+
+  const archiveUnits = useCallback(
+    (courseId, { ids }) =>
+      request(async () => {
+        const { data } = await api.delete(`${BASE}/${courseId}/units/bulk`, { data: { ids } });
+        setUnits((prev) => prev.filter((u) => !ids.includes(u.unit_id)));
+        toast("Units archived.");
+        return data;
+      }),
+    [request],
+  );
+
+  // ── Unit Archives & Restore ───────────────────────────────────────────────
+
+  const fetchArchivedUnits = useCallback(
+    (courseId, params = {}) =>
+      paginatedGet(`${BASE}/${courseId}/units/archives`, setUnits, params),
+    [paginatedGet],
+  );
+
+  const fetchArchivedUnit = useCallback(
+    (courseId, unitId) =>
+      request(async () => {
+        const { data } = await api.get(`${BASE}/${courseId}/units/archives/${unitId}`);
+        const result = data?.data?.data ?? null;
+        setUnit(result);
+        return data;
+      }),
+    [request],
+  );
+
+  const restoreUnit = useCallback(
+    (courseId, unitId) =>
+      request(async () => {
+        const { data } = await api.patch(`${unitBase(courseId, unitId)}/restore`);
+        const result = data?.data?.data ?? null;
+        if (result) {
+          setUnits((prev) => prev.filter((u) => u.unit_id !== unitId));
+          toast("Unit restored.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  const restoreUnits = useCallback(
+    (courseId, { ids }) =>
+      request(async () => {
+        const { data } = await api.patch(`${BASE}/${courseId}/units/restore/bulk`, { ids } );
+        setUnits((prev) => prev.filter((u) => !ids.includes(u.unit_id)));
+        toast("Units restored.");
+        return data;
+      }),
+    [request],
+  );
+
+  const permanentlyDeleteUnit = useCallback(
+    (courseId, unitId) =>
+      request(async () => {
+        const { data } = await api.delete(`${unitBase(courseId, unitId)}/permanent`);
+        setUnits((prev) => prev.filter((u) => u.unit_id !== unitId));
+        setUnit((prev) => (prev?.unit_id === unitId ? null : prev));
+        toast("Unit permanently deleted.");
+        return data;
+      }),
+    [request],
+  );
+
+  const permanentlyDeleteUnits = useCallback(
+    (courseId, { ids }) =>
+      request(async () => {
+        const { data } = await api.delete(`${BASE}/${courseId}/units/bulk/permanent`, { data: { ids } });
+        setUnits((prev) => prev.filter((u) => !ids.includes(u.unit_id)));
+        toast("Units permanently deleted.");
+        return data;
+      }),
+    [request],
+  );
+
+  const fetchUnitPermanentDeleteImpact = useCallback(
+    (courseId, unitId) =>
+      request(async () => {
+        const { data } = await api.get(`${unitBase(courseId, unitId)}/permanent-delete-impact`);
+        const { lessonCount } = data?.data ?? {};
+        return [{ label: "lesson(s)", count: lessonCount ?? 0 }];
+      }),
+    [request],
+  );
+
+  // =========================================================================
+  // UNIT QUIZ
+  // =========================================================================
+
+  const fetchQuiz = useCallback(
+    (courseId, unitId) =>
+      request(async () => {
+        const { data } = await api.get(`${unitBase(courseId, unitId)}/quiz`);
+        const result = data?.data?.data ?? null;
+        setQuiz(result);
+        setQuestions(result?.questions ?? []);
+        return data;
+      }),
+    [request],
+  );
+
+  const createQuiz = useCallback(
+    (courseId, unitId, payload) =>
+      request(async () => {
+        const { data } = await api.post(`${unitBase(courseId, unitId)}/quiz`, payload);
+        const result = data?.data?.data ?? null;
+        if (result) {
+          setQuiz(result);
+          toast("Quiz created.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  const updateQuiz = useCallback(
+    (courseId, unitId, quizId, payload) =>
+      request(async () => {
+        const { data } = await api.patch(`${unitBase(courseId, unitId)}/quiz/${quizId}`, payload);
+        const result = data?.data?.data ?? null;
+        if (result) {
+          setQuiz(result);
+          toast("Quiz updated.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  const deleteQuiz = useCallback(
+    (courseId, unitId, quizId, deletedBy) =>
+      request(async () => {
+        const { data } = await api.delete(`${unitBase(courseId, unitId)}/quiz/${quizId}`, { data: { deletedBy } });
+        setQuiz(null);
+        setQuestions([]);
+        toast("Quiz archived.");
+        return data;
+      }),
+    [request],
+  );
+
+  // ── Quiz Archives & Restore ───────────────────────────────────────────────
+
+  const fetchArchivedQuiz = useCallback(
+    (courseId, unitId) =>
+      request(async () => {
+        const { data } = await api.get(`${unitBase(courseId, unitId)}/quiz/archives`);
+        const result = data?.data?.data ?? null;
+        setQuiz(result);
+        return data;
+      }),
+    [request],
+  );
+
+  const restoreQuiz = useCallback(
+    (courseId, unitId, quizId, restoredBy) =>
+      request(async () => {
+        const { data } = await api.patch(`${unitBase(courseId, unitId)}/quiz/${quizId}/restore`, { restoredBy });
+        const result = data?.data?.data ?? null;
+        if (result) {
+          setQuiz(result);
+          toast("Quiz restored.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  // =========================================================================
+  // QUIZ QUESTIONS
+  // =========================================================================
+
+  const fetchQuizQuestions = useCallback(
+    (courseId, unitId, quizId) =>
+      request(async () => {
+        const { data } = await api.get(`${unitBase(courseId, unitId)}/quiz/${quizId}/questions`);
+        const result = data?.data?.data ?? [];
+        setQuestions(result);
+        return data;
+      }),
+    [request],
+  );
+
+  const createQuizQuestion = useCallback(
+    (courseId, unitId, quizId, payload) =>
+      request(async () => {
+        const { data } = await api.post(`${unitBase(courseId, unitId)}/quiz/${quizId}/questions`, payload);
+        const result = data?.data?.data ?? null;
+        if (result) {
+          setQuestions((prev) => [...prev, result]);
+          toast("Question added.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  const updateQuizQuestion = useCallback(
+    (courseId, unitId, quizId, questionId, payload) =>
+      request(async () => {
+        const { data } = await api.patch(`${unitBase(courseId, unitId)}/quiz/${quizId}/questions/${questionId}`, payload);
+        const result = data?.data?.data ?? null;
+        if (result) {
+          setQuestions((prev) => prev.map((q) => (q.question_id === questionId ? result : q)));
+          toast("Question updated.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  const bulkSyncQuizQuestions = useCallback(
+    (courseId, unitId, quizId, questions, updatedBy, confirmFullReplace = false) =>
+      request(async () => {
+        const { data } = await api.put(`${unitBase(courseId, unitId)}/quiz/${quizId}/questions/bulk-sync`, { questions, updatedBy, confirmFullReplace });
+        const result = data?.data?.data ?? [];
+        setQuestions(result);
+        toast("Quiz saved.");
+        return data;
+      }),
+    [request],
+  );
+
+  const deleteQuizQuestion = useCallback(
+    (courseId, unitId, quizId, questionId, deletedBy) =>
+      request(async () => {
+        const { data } = await api.delete(`${unitBase(courseId, unitId)}/quiz/${quizId}/questions/${questionId}`, { data: { deletedBy } });
+        setQuestions((prev) => prev.filter((q) => q.question_id !== questionId));
+        toast("Question archived.");
+        return data;
+      }),
+    [request],
+  );
+
+  const bulkArchiveQuizQuestions = useCallback(
+    (courseId, unitId, quizId, ids, deletedBy) =>
+      request(async () => {
+        const { data } = await api.delete(`${unitBase(courseId, unitId)}/quiz/${quizId}/questions/bulk`, { data: { ids, deletedBy } });
+        setQuestions((prev) => prev.filter((q) => !ids.includes(q.question_id)));
+        toast("Questions archived.");
+        return data;
+      }),
+    [request],
+  );
+
+  // ── Quiz Question Archives & Restore ─────────────────────────────────────
+
+  const fetchArchivedQuizQuestion = useCallback(
+    (courseId, unitId, quizId, questionId) =>
+      request(async () => {
+        const { data } = await api.get(`${unitBase(courseId, unitId)}/quiz/${quizId}/questions/archives/${questionId}`);
+        return data;
+      }),
+    [request],
+  );
+
+  const restoreQuizQuestion = useCallback(
+    (courseId, unitId, quizId, questionId, restoredBy) =>
+      request(async () => {
+        const { data } = await api.patch(`${unitBase(courseId, unitId)}/quiz/${quizId}/questions/${questionId}/restore`, { restoredBy });
+        toast("Question restored.");
+        return data;
+      }),
+    [request],
+  );
+
+  const bulkRestoreQuizQuestions = useCallback(
+    (courseId, unitId, quizId, ids, restoredBy) =>
+      request(async () => {
+        const { data } = await api.patch(`${unitBase(courseId, unitId)}/quiz/${quizId}/questions/restore/bulk`, { ids, restoredBy });
+        toast("Questions restored.");
+        return data;
+      }),
+    [request],
+  );
+
+  // =========================================================================
+  // LESSONS
+  // =========================================================================
+
+  const fetchLessons = useCallback(
+    (courseId, unitId, params = {}) =>
+      paginatedGet(`${unitBase(courseId, unitId)}/lessons`, setLessons, params),
+    [paginatedGet],
+  );
+
+  const fetchLesson = useCallback(
+    (courseId, unitId, lessonId) =>
+      request(async () => {
+        const { data } = await api.get(`${lessonBase(courseId, unitId, lessonId)}`);
+        const result = data?.data?.data ?? null;
+        setLesson(result);
+        setLessonPage(result?.page ?? null);
+        return data;
+      }),
+    [request],
+  );
+
+  const createLesson = useCallback(
+    (courseId, unitId, payload) =>
+      request(async () => {
+        const { data } = await api.post(`${unitBase(courseId, unitId)}/lessons`, payload);
+        const lesson = data?.data?.data ?? null;
+        if (lesson) {
+          setLessons((prev) => [...prev, lesson]);
+          toast("Lesson created successfully.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  const updateLesson = useCallback(
+    (courseId, unitId, lessonId, payload) =>
+      request(async () => {
+        const { data } = await api.put(`${lessonBase(courseId, unitId, lessonId)}`, payload);
+        const lesson = data?.data?.data ?? null;
+        if (lesson) {
+          setLessons((prev) => prev.map((l) => (l.lesson_id === lessonId ? lesson : l)));
+          setLesson(lesson);
+          toast("Lesson updated successfully.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  const archiveLesson = useCallback(
+    (courseId, unitId, lessonId) =>
+      request(async () => {
+        const { data } = await api.delete(`${lessonBase(courseId, unitId, lessonId)}`);
+        setLessons((prev) => prev.filter((l) => l.lesson_id !== lessonId));
+        setLesson((prev) => (prev?.lesson_id === lessonId ? null : prev));
+        toast("Lesson archived.");
+        return data;
+      }),
+    [request],
+  );
+
+  const archiveLessons = useCallback(
+    (courseId, unitId, { ids }) =>
+      request(async () => {
+        const { data } = await api.delete(`${unitBase(courseId, unitId)}/lessons/bulk`, { data: { ids } });
+        setLessons((prev) => prev.filter((l) => !ids.includes(l.lesson_id)));
+        toast("Lessons archived.");
+        return data;
+      }),
+    [request],
+  );
+
+  // ── Lesson Archives & Restore ─────────────────────────────────────────────
+
+  const fetchArchivedLessons = useCallback(
+    (courseId, unitId, params = {}) =>
+      paginatedGet(`${unitBase(courseId, unitId)}/lessons/archives`, setLessons, params),
+    [paginatedGet],
+  );
+
+  const fetchArchivedLesson = useCallback(
+    (courseId, unitId, lessonId) =>
+      request(async () => {
+        const { data } = await api.get(`${unitBase(courseId, unitId)}/lessons/archives/${lessonId}`);
+        const result = data?.data?.data ?? null;
+        setLesson(result);
+        return data;
+      }),
+    [request],
+  );
+
+  const restoreLesson = useCallback(
+    (courseId, unitId, lessonId) =>
+      request(async () => {
+        const { data } = await api.patch(`${lessonBase(courseId, unitId, lessonId)}/restore`);
+        const result = data?.data?.data ?? null;
+        if (result) {
+          setLessons((prev) => prev.filter((l) => l.lesson_id !== lessonId));
+          toast("Lesson restored.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  const restoreLessons = useCallback(
+    (courseId, unitId, { ids }) =>
+      request(async () => {
+        const { data } = await api.patch(`${unitBase(courseId, unitId)}/lessons/restore/bulk`, { ids });
+        setLessons((prev) => prev.filter((l) => !ids.includes(l.lesson_id)));
+        toast("Lessons restored.");
+        return data;
+      }),
+    [request],
+  );
+
+  const permanentlyDeleteLesson = useCallback(
+    (courseId, unitId, lessonId) =>
+      request(async () => {
+        const { data } = await api.delete(`${lessonBase(courseId, unitId, lessonId)}/permanent`);
+        setLessons((prev) => prev.filter((l) => l.lesson_id !== lessonId));
+        setLesson((prev) => (prev?.lesson_id === lessonId ? null : prev));
+        toast("Lesson permanently deleted.");
+        return data;
+      }),
+    [request],
+  );
+
+  const permanentlyDeleteLessons = useCallback(
+    (courseId, unitId, { ids }) =>
+      request(async () => {
+        const { data } = await api.delete(`${unitBase(courseId, unitId)}/lessons/bulk/permanent`, { data: { ids } });
+        setLessons((prev) => prev.filter((l) => !ids.includes(l.lesson_id)));
+        toast("Lessons permanently deleted.");
+        return data;
+      }),
+    [request],
+  );
+
+  // =========================================================================
+  // LESSON PAGE
+  // =========================================================================
+
+  const fetchLessonPage = useCallback(
+    (courseId, unitId, lessonId) =>
+      request(async () => {
+        const { data } = await api.get(`${lessonBase(courseId, unitId, lessonId)}/page`);
+        const page = data?.data?.data ?? null;
+        setLessonPage(page);
+        return data;
+      }),
+    [request],
+  );
+
+  const saveLessonPage = useCallback(
+    (courseId, unitId, lessonId, payload) =>
+      request(async () => {
+        const { data } = await api.put(`${lessonBase(courseId, unitId, lessonId)}/page`, payload);
+        const page = data?.data?.data ?? null;
+        if (page) {
+          setLessonPage(page);
+          toast("Lesson page saved.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  // =========================================================================
+  // COURSE ASSESSMENT
+  // =========================================================================
+
+  const fetchAssessment = useCallback(
+    (courseId) =>
+      request(async () => {
+        const { data } = await api.get(`${BASE}/${courseId}/assessment`);
+        const result = data?.data?.data ?? null;
+        setAssessment(result);
+        setQuestions(result?.questions ?? []);
+        return data;
+      }),
+    [request],
+  );
+
+  const createAssessment = useCallback(
+    (courseId, payload) =>
+      request(async () => {
+        const { data } = await api.post(`${BASE}/${courseId}/assessment`, payload);
+        const result = data?.data?.data ?? null;
+        if (result) {
+          setAssessment(result);
+          toast("Assessment created.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  const updateAssessment = useCallback(
+    (courseId, assessmentId, payload) =>
+      request(async () => {
+        const { data } = await api.patch(`${BASE}/${courseId}/assessment/${assessmentId}`, payload);
+        const result = data?.data?.data ?? null;
+        if (result) {
+          setAssessment(result);
+          toast("Assessment updated.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  const deleteAssessment = useCallback(
+    (courseId, assessmentId, deletedBy) =>
+      request(async () => {
+        const { data } = await api.delete(`${BASE}/${courseId}/assessment/${assessmentId}`, { data: { deletedBy } });
+        setAssessment(null);
+        setQuestions([]);
+        toast("Assessment archived.");
+        return data;
+      }),
+    [request],
+  );
+
+  // ── Assessment Archives & Restore ─────────────────────────────────────────
+
+  const fetchArchivedAssessment = useCallback(
+    (courseId) =>
+      request(async () => {
+        const { data } = await api.get(`${BASE}/${courseId}/assessment/archives`);
+        const result = data?.data?.data ?? null;
+        setAssessment(result);
+        return data;
+      }),
+    [request],
+  );
+
+  const restoreAssessment = useCallback(
+    (courseId, assessmentId, restoredBy) =>
+      request(async () => {
+        const { data } = await api.patch(`${BASE}/${courseId}/assessment/${assessmentId}/restore`, { restoredBy });
+        const result = data?.data?.data ?? null;
+        if (result) {
+          setAssessment(result);
+          toast("Assessment restored.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  // =========================================================================
+  // ASSESSMENT QUESTIONS
+  // =========================================================================
+
+  const fetchAssessmentQuestions = useCallback(
+    (courseId, assessmentId) =>
+      request(async () => {
+        const { data } = await api.get(`${BASE}/${courseId}/assessment/${assessmentId}/questions`);
+        const result = data?.data?.data ?? [];
+        setQuestions(result);
+        return data;
+      }),
+    [request],
+  );
+
+  const createAssessmentQuestion = useCallback(
+    (courseId, assessmentId, payload) =>
+      request(async () => {
+        const { data } = await api.post(`${BASE}/${courseId}/assessment/${assessmentId}/questions`, payload);
+        const result = data?.data?.data ?? null;
+        if (result) {
+          setQuestions((prev) => [...prev, result]);
+          toast("Question added.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  const updateAssessmentQuestion = useCallback(
+    (courseId, assessmentId, questionId, payload) =>
+      request(async () => {
+        const { data } = await api.patch(`${BASE}/${courseId}/assessment/${assessmentId}/questions/${questionId}`, payload);
+        const result = data?.data?.data ?? null;
+        if (result) {
+          setQuestions((prev) => prev.map((q) => (q.question_id === questionId ? result : q)));
+          toast("Question updated.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  const bulkSyncAssessmentQuestions = useCallback(
+    (courseId, assessmentId, questions, updatedBy, confirmFullReplace = false) =>
+      request(async () => {
+        const { data } = await api.put(`${BASE}/${courseId}/assessment/${assessmentId}/questions/bulk-sync`, { questions, updatedBy, confirmFullReplace });
+        const result = data?.data?.data ?? [];
+        setQuestions(result);
+        toast("Assessment saved.");
+        return data;
+      }),
+    [request],
+  );
+
+  const deleteAssessmentQuestion = useCallback(
+    (courseId, assessmentId, questionId, deletedBy) =>
+      request(async () => {
+        const { data } = await api.delete(`${BASE}/${courseId}/assessment/${assessmentId}/questions/${questionId}`, { data: { deletedBy } });
+        setQuestions((prev) => prev.filter((q) => q.question_id !== questionId));
+        toast("Question archived.");
+        return data;
+      }),
+    [request],
+  );
+
+  const bulkArchiveAssessmentQuestions = useCallback(
+    (courseId, assessmentId, ids, deletedBy) =>
+      request(async () => {
+        const { data } = await api.delete(`${BASE}/${courseId}/assessment/${assessmentId}/questions/bulk`, { data: { ids, deletedBy } });
+        setQuestions((prev) => prev.filter((q) => !ids.includes(q.question_id)));
+        toast("Questions archived.");
+        return data;
+      }),
+    [request],
+  );
+
+  // ── Assessment Question Archives & Restore ────────────────────────────────
+
+  const fetchArchivedAssessmentQuestion = useCallback(
+    (courseId, assessmentId, questionId) =>
+      request(async () => {
+        const { data } = await api.get(`${BASE}/${courseId}/assessment/${assessmentId}/questions/archives/${questionId}`);
+        return data;
+      }),
+    [request],
+  );
+
+  const restoreAssessmentQuestion = useCallback(
+    (courseId, assessmentId, questionId, restoredBy) =>
+      request(async () => {
+        const { data } = await api.patch(`${BASE}/${courseId}/assessment/${assessmentId}/questions/${questionId}/restore`, { restoredBy });
+        toast("Question restored.");
+        return data;
+      }),
+    [request],
+  );
+
+  const bulkRestoreAssessmentQuestions = useCallback(
+    (courseId, assessmentId, ids, restoredBy) =>
+      request(async () => {
+        const { data } = await api.patch(`${BASE}/${courseId}/assessment/${assessmentId}/questions/restore/bulk`, { ids, restoredBy });
+        toast("Questions restored.");
+        return data;
+      }),
+    [request],
+  );
+
+  // =========================================================================
+  // COMPLETIONS & SESSIONS
+  // =========================================================================
+
+  const fetchQuizCompletions = useCallback(
+    (courseId, unitId, quizId) =>
+      request(async () => {
+        setCompletions(null);
+        const { data } = await api.get(`${unitBase(courseId, unitId)}/quiz/${quizId}/completions`);
+        setCompletions(data?.data ?? null);
+        return data;
+      }),
+    [request],
+  );
+
+  const fetchAssessmentCompletions = useCallback(
+    (courseId, assessmentId) =>
+      request(async () => {
+        setCompletions(null);
+        const { data } = await api.get(`${BASE}/${courseId}/assessment/${assessmentId}/completions`);
+        setCompletions(data?.data ?? null);
+        return data;
+      }),
+    [request],
+  );
+
+  const fetchAssessmentSessions = useCallback(
+    (courseId, assessmentId) =>
+      request(async () => {
+        setSessions(null);
+        const { data } = await api.get(`${BASE}/${courseId}/assessment/${assessmentId}/sessions`);
+        setSessions(data?.data ?? null);
+        return data;
+      }),
+    [request],
+  );
+
+  // =========================================================================
+  // COURSE PRODUCT & CATEGORIES
+  // =========================================================================
+
+  const fetchCourseProduct = useCallback(
+    (courseId) => request(async () => {
+      const { data } = await api.get(`/admin/products/courses/${courseId}/product`);
+      return data.data ?? null;
+    }), [request],
+  );
+
+  const saveCourseProduct = useCallback(
+    (courseId, payload) => request(async () => {
+      const { data } = await api.put(`/admin/products/courses/${courseId}/product`, payload);
+      toast("Product listing saved.");
+      return data.data ?? null;
+    }), [request],
+  );
+
+  const removeCourseProduct = useCallback(
+    (courseId) => request(async () => {
+      await api.delete(`/admin/products/courses/${courseId}/product`);
+      toast("Product listing removed.");
+      return true;
+    }), [request],
+  );
+
+  const fetchCourseCategories = useCallback(
+    (courseId) => request(async () => {
+      const { data } = await api.get(`/admin/products/courses/${courseId}/categories`);
+      return data.data ?? [];
+    }), [request],
+  );
+
+  const syncCourseCategories = useCallback(
+    (courseId, categoryIds) => request(async () => {
+      const { data } = await api.post(`/admin/products/courses/${courseId}/categories`, { category_ids: categoryIds });
+      toast("Categories updated.");
+      return data.data ?? [];
+    }), [request],
+  );
+
+  const fetchInstructors = useCallback(
+    (courseId) => request(async () => {
+      const { data } = await api.get(`${BASE}/${courseId}/instructors`);
+      return data.data ?? [];
+    }), [request],
+  );
+
+  const syncInstructors = useCallback(
+    (courseId, instructors) => request(async () => {
+      await api.put(`${BASE}/${courseId}/instructors`, { instructors });
+      toast("Instructors updated.");
+    }), [request],
+  );
+
+  const fetchCourseAchievements = useCallback(
+    (courseId) => request(async () => {
+      const { data } = await api.get(`${BASE}/${courseId}/achievements`);
+      return (data?.data?.data ?? []).map((r) => r.achievement_key);
+    }), [request],
+  );
+
+  const syncCourseAchievements = useCallback(
+    (courseId, achievement_keys) => request(async () => {
+      await api.put(`${BASE}/${courseId}/achievements`, { achievement_keys });
+      toast("Rewards updated.");
+    }), [request],
+  );
+
+  const fetchCourseFieldValues = useCallback(
+    (field) =>
+      request(async () => {
+        const { data } = await api.get(`${BASE}/field-values`, { params: { field } });
+        const result = data?.data ?? [];
+        return result;
+      }),
+    [request],
+  );
+
+  const fetchUnitFieldValues = useCallback(
+    (courseId, field) =>
+      request(async () => {
+        const { data } = await api.get(`${BASE}/${courseId}/field-values`, { params: { field } });
+        const result = data?.data ?? [];
+        return result;
+      }),
+    [request],
+  );
+
+  const fetchLessonFieldValues = useCallback(
+    (courseId, unitId, field) =>
+      request(async () => {
+        const { data } = await api.get(`${unitBase(courseId, unitId)}/field-values`, { params: { field } });
+        const result = data?.data ?? [];
+        return result;
+      }),
+    [request],
+  );
+
+  // =========================================================================
+  // COMPLETION REQUIREMENTS
+  // =========================================================================
+
+  const fetchCourseRequirements = useCallback(
+    (courseId) =>
+      request(async () => {
+        const { data } = await api.get(`${BASE}/${courseId}/requirements`);
+        const result = data?.data ?? [];
+        setRequirements(result);
+        return result;
+      }),
+    [request],
+  );
+
+  const syncCourseRequirements = useCallback(
+    (courseId, requirements) =>
+      request(async () => {
+        const { data } = await api.put(`${BASE}/${courseId}/requirements`, { requirements });
+        const result = data?.data ?? [];
+        setRequirements(result);
+        toast("Completion requirements updated.");
+        return result;
+      }),
+    [request],
+  );
+
+  const fetchUnitRequirements = useCallback(
+    (courseId, unitId) =>
+      request(async () => {
+        const { data } = await api.get(`${unitBase(courseId, unitId)}/requirements`);
+        const result = data?.data ?? [];
+        setRequirements(result);
+        return result;
+      }),
+    [request],
+  );
+
+  const syncUnitRequirements = useCallback(
+    (courseId, unitId, requirements) =>
+      request(async () => {
+        const { data } = await api.put(`${unitBase(courseId, unitId)}/requirements`, { requirements });
+        const result = data?.data ?? [];
+        setRequirements(result);
+        toast("Completion requirements updated.");
+        return result;
+      }),
+    [request],
+  );
+
+  const fetchLessonRequirements = useCallback(
+    (courseId, unitId, lessonId) =>
+      request(async () => {
+        const { data } = await api.get(`${lessonBase(courseId, unitId, lessonId)}/requirements`);
+        const result = data?.data ?? [];
+        setRequirements(result);
+        return result;
+      }),
+    [request],
+  );
+
+  const syncLessonRequirements = useCallback(
+    (courseId, unitId, lessonId, requirements) =>
+      request(async () => {
+        const { data } = await api.put(`${lessonBase(courseId, unitId, lessonId)}/requirements`, { requirements });
+        const result = data?.data ?? [];
+        setRequirements(result);
+        toast("Completion requirements updated.");
+        return result;
+      }),
+    [request],
+  );
+
+  // ─── Provider value ───────────────────────────────────────────────────────
+  return (
+    <CoursesContext.Provider value={{
+      // ── state ──────────────────────────────────────────────────────────────
+      courses, course,
+      units, unit,
+      lessons, lesson,
+      lessonPage,
+      prerequisites,
+      requirements,
+      quiz,
+      questions,
+      assessment,
+      attributes,
+      pagination,
+      loading,
+
+      // ── setters ────────────────────────────────────────────────────────────
+      setCourse,
+      setUnit,
+      setLesson,
+      setLessonPage,
+      setPrerequisites,
+      setRequirements,
+      setQuiz,
+      setQuestions,
+      setAssessment,
+      setPagination,
+
+      // ── courses ────────────────────────────────────────────────────────────
+      fetchCourses,
+      fetchCourse,
+      createCourse,
+      createCourseFull,
+      updateCourse,
+      reorderCourses,
+      archiveCourse,
+      archiveCourses,
+
+      // ── course archives & restore ──────────────────────────────────────────
+      fetchArchivedCourses,
+      fetchArchivedCourse,
+      restoreCourse,
+      restoreCourses,
+      permanentlyDeleteCourse,
+      permanentlyDeleteCourses,
+      fetchCoursePermanentDeleteImpact,
+
+      // ── prerequisites ──────────────────────────────────────────────────────
+      fetchPrerequisites,
+      syncPrerequisites,
+      fetchCoursesFlat,
+      fetchUnitsFlat,
+      fetchLessonsFlat,
+
+      // ── completion requirements ────────────────────────────────────────────
+      fetchCourseRequirements,
+      syncCourseRequirements,
+      fetchUnitRequirements,
+      syncUnitRequirements,
+      fetchLessonRequirements,
+      syncLessonRequirements,
+
+      // ── units ──────────────────────────────────────────────────────────────
+      fetchUnits,
+      fetchUnit,
+      createUnit,
+      updateUnit,
+      archiveUnit,
+      archiveUnits,
+
+      // ── unit archives & restore ────────────────────────────────────────────
+      fetchArchivedUnits,
+      fetchArchivedUnit,
+      restoreUnit,
+      restoreUnits,
+      permanentlyDeleteUnit,
+      permanentlyDeleteUnits,
+      fetchUnitPermanentDeleteImpact,
+
+      // ── unit quiz ──────────────────────────────────────────────────────────
+      fetchQuiz,
+      createQuiz,
+      updateQuiz,
+      deleteQuiz,
+
+      // ── quiz archives & restore ────────────────────────────────────────────
+      fetchArchivedQuiz,
+      restoreQuiz,
+
+      // ── quiz questions ─────────────────────────────────────────────────────
+      fetchQuizQuestions,
+      createQuizQuestion,
+      updateQuizQuestion,
+      deleteQuizQuestion,
+      bulkArchiveQuizQuestions,
+      bulkSyncQuizQuestions,
+
+      // ── quiz question archives & restore ───────────────────────────────────
+      fetchArchivedQuizQuestion,
+      restoreQuizQuestion,
+      bulkRestoreQuizQuestions,
+
+      // ── lessons ────────────────────────────────────────────────────────────
+      fetchLessons,
+      fetchLesson,
+      createLesson,
+      updateLesson,
+      archiveLesson,
+      archiveLessons,
+
+      // ── lesson archives & restore ──────────────────────────────────────────
+      fetchArchivedLessons,
+      fetchArchivedLesson,
+      restoreLesson,
+      restoreLessons,
+      permanentlyDeleteLesson,
+      permanentlyDeleteLessons,
+
+      // ── lesson page ────────────────────────────────────────────────────────
+      fetchLessonPage,
+      saveLessonPage,
+
+      // ── completions & sessions ─────────────────────────────────────────────
+      completions, sessions,
+      fetchQuizCompletions,
+      fetchAssessmentCompletions,
+      fetchAssessmentSessions,
+
+      // ── assessment ─────────────────────────────────────────────────────────
+      fetchAssessment,
+      createAssessment,
+      updateAssessment,
+      deleteAssessment,
+
+      // ── assessment archives & restore ──────────────────────────────────────
+      fetchArchivedAssessment,
+      restoreAssessment,
+
+      // ── assessment questions ───────────────────────────────────────────────
+      fetchAssessmentQuestions,
+      createAssessmentQuestion,
+      updateAssessmentQuestion,
+      deleteAssessmentQuestion,
+      bulkArchiveAssessmentQuestions,
+      bulkSyncAssessmentQuestions,
+
+      // ── assessment question archives & restore ─────────────────────────────
+      fetchArchivedAssessmentQuestion,
+      restoreAssessmentQuestion,
+      bulkRestoreAssessmentQuestions,
+
+      // ── fetch field values ─────────────────────────────
+      fetchCourseFieldValues,
+      fetchUnitFieldValues,
+      fetchLessonFieldValues,
+
+      // ── course product & categories ────────────────────
+      fetchCourseProduct,
+      saveCourseProduct,
+      removeCourseProduct,
+      fetchCourseCategories,
+      syncCourseCategories,
+      fetchInstructors,
+      syncInstructors,
+      fetchCourseAchievements,
+      syncCourseAchievements,
+    }}>
+      {children}
+    </CoursesContext.Provider>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/contexts/AdminDashboardContext.jsx b/apps/web/src/contexts/AdminDashboardContext.jsx
new file mode 100644
index 0000000..33b1185
--- /dev/null
+++ b/apps/web/src/contexts/AdminDashboardContext.jsx
@@ -0,0 +1,64 @@
+import { createContext, useCallback, useContext, useState } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const AdminDashboardContext = createContext(null);
+
+export function useDashboard() {
+    const ctx = useContext(AdminDashboardContext);
+    if (!ctx) throw new Error("useDashboard must be used within a DashboardProvider");
+    return ctx;
+}
+
+export function AdminDashboardProvider({ children }) {
+    const [usersDashboard,  setUsersDashboard]  = useState(null);
+    const [groupsDashboard, setGroupsDashboard] = useState(null);
+    const [loading, setLoading] = useState(false);
+
+    const request = useCallback(async (fn) => {
+        setLoading(true);
+        try {
+            return await fn();
+        } catch (err) {
+            const message = err?.response?.data?.message ?? "Something went wrong.";
+            toast(message);
+            return null;
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    // ─── GET /api/admin/dashboard/users ───────────────────────────────────────
+    const fetchUsersDashboard = useCallback(
+        () =>
+            request(async () => {
+                const res = await api.get("/admin/dashboard/users");
+                setUsersDashboard(res.data?.data ?? null);
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── GET /api/admin/dashboard/groups ──────────────────────────────────────
+    const fetchGroupsDashboard = useCallback(
+        () =>
+            request(async () => {
+                const res = await api.get("/admin/dashboard/groups");
+                setGroupsDashboard(res.data?.data ?? null);
+                return res.data;
+            }),
+        [request]
+    );
+
+    return (
+        <AdminDashboardContext.Provider value={{
+            usersDashboard,
+            groupsDashboard,
+            loading,
+            fetchUsersDashboard,
+            fetchGroupsDashboard,
+        }}>
+            {children}
+        </AdminDashboardContext.Provider>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/contexts/AdminLibraryContext.jsx b/apps/web/src/contexts/AdminLibraryContext.jsx
new file mode 100644
index 0000000..e973efc
--- /dev/null
+++ b/apps/web/src/contexts/AdminLibraryContext.jsx
@@ -0,0 +1,478 @@
+// ─── AdminLibraryContext.jsx ───────────────────────────────────────────────────
+// Standalone Units & Lessons libraries (junction revamp).
+// Units and Lessons run independently of Courses:
+//   /admin/units    → unit library CRUD + lesson attach/detach/reorder + quiz
+//   /admin/lessons  → lesson library CRUD + page content
+// Course membership stays under /admin/courses/:courseId/units (AdminCoursesContext).
+
+import { createContext, useCallback, useContext, useState } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const LibraryContext = createContext(null);
+
+export function useLibrary() {
+  const ctx = useContext(LibraryContext);
+  if (!ctx) throw new Error("useLibrary must be used within a LibraryProvider");
+  return ctx;
+}
+
+const PAGINATION_INIT = {
+  page: 1,
+  limit: 10,
+  totalRecords: 0,
+  totalPages: 0,
+  hasPrevPage: false,
+  hasNextPage: false,
+};
+
+const UNITS_BASE   = "/admin/units";
+const LESSONS_BASE = "/admin/lessons";
+
+export function LibraryProvider({ children }) {
+
+  // ─── State ────────────────────────────────────────────────────────────────
+  const [units, setUnits] = useState([]);
+  const [unit, setUnit] = useState(null);
+  const [unitsFlat, setUnitsFlat] = useState([]);
+  const [lessons, setLessons] = useState([]);
+  const [lesson, setLesson] = useState(null);
+  const [lessonsFlat, setLessonsFlat] = useState([]);
+  const [attributes, setAttributes] = useState([]);
+  const [pagination, setPagination] = useState(PAGINATION_INIT);
+  const [loading, setLoading] = useState(false);
+
+  // ─── Request wrapper ──────────────────────────────────────────────────────
+  const request = useCallback(async (fn) => {
+    setLoading(true);
+    try {
+      return await fn();
+    } catch (err) {
+      const message = err?.response?.data?.message ?? "Something went wrong.";
+      toast(message);
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // ─── Paginated GET helper ─────────────────────────────────────────────────
+  const paginatedGet = useCallback(
+    (url, setter, params = {}) =>
+      request(async () => {
+        const { filters, sort, ...rest } = params;
+        const { data } = await api.get(url, {
+          params: {
+            ...rest,
+            ...(filters?.length ? { filters: JSON.stringify(filters) } : {}),
+            ...(sort?.length ? { sort: JSON.stringify(sort) } : {}),
+          },
+        });
+        const final_data = data?.data;
+        setter(final_data?.data ?? []);
+        setPagination(final_data?.pagination ?? PAGINATION_INIT);
+        if (final_data?.attributes?.length) setAttributes(final_data.attributes);
+        return data;
+      }),
+    [request],
+  );
+
+  // =========================================================================
+  // UNIT LIBRARY
+  // =========================================================================
+
+  const fetchUnits = useCallback(
+    (params = {}) => paginatedGet(UNITS_BASE, setUnits, params),
+    [paginatedGet],
+  );
+
+  const fetchUnitsFlat = useCallback(
+    () =>
+      request(async () => {
+        const { data } = await api.get(`${UNITS_BASE}/flat`);
+        setUnitsFlat(data?.data ?? []);
+        return data;
+      }),
+    [request],
+  );
+
+  const fetchUnit = useCallback(
+    (unitId) =>
+      request(async () => {
+        const { data } = await api.get(`${UNITS_BASE}/${unitId}`);
+        const result = data?.data?.data ?? null;
+        setUnit(result);
+        return data;
+      }),
+    [request],
+  );
+
+  const createUnit = useCallback(
+    (payload) =>
+      request(async () => {
+        const { data } = await api.post(UNITS_BASE, payload);
+        const created = data?.data?.data ?? null;
+        if (created) toast("Unit created successfully.");
+        return data;
+      }),
+    [request],
+  );
+
+  // One consolidated call — creates the unit, its lessons, their objectives
+  // and page-builder blocks, and attaches them, in a single request.
+  const createUnitFull = useCallback(
+    (payload) =>
+      request(async () => {
+        const { data } = await api.post(`${UNITS_BASE}/full`, payload);
+        const created = data?.data?.data ?? null;
+        if (created) toast("Unit created successfully.");
+        return data;
+      }),
+    [request],
+  );
+
+  const updateUnit = useCallback(
+    (unitId, payload) =>
+      request(async () => {
+        const { data } = await api.put(`${UNITS_BASE}/${unitId}`, payload);
+        const updated = data?.data?.data ?? null;
+        if (updated) {
+          setUnit(updated);
+          toast("Unit updated successfully.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  const archiveUnit = useCallback(
+    (unitId) =>
+      request(async () => {
+        const { data } = await api.delete(`${UNITS_BASE}/${unitId}`);
+        toast("Unit archived.");
+        return data;
+      }),
+    [request],
+  );
+
+  const archiveUnits = useCallback(
+    ({ ids }) =>
+      request(async () => {
+        const { data } = await api.delete(`${UNITS_BASE}/bulk`, { data: { ids } });
+        toast(data?.message ?? "Units archived.");
+        return data;
+      }),
+    [request],
+  );
+
+  const fetchArchivedUnits = useCallback(
+    (params = {}) => paginatedGet(`${UNITS_BASE}/archives`, setUnits, params),
+    [paginatedGet],
+  );
+
+  const restoreUnit = useCallback(
+    (unitId) =>
+      request(async () => {
+        const { data } = await api.patch(`${UNITS_BASE}/${unitId}/restore`, {});
+        toast("Unit restored.");
+        return data;
+      }),
+    [request],
+  );
+
+  const restoreUnits = useCallback(
+    ({ ids }) =>
+      request(async () => {
+        const { data } = await api.patch(`${UNITS_BASE}/restore/bulk`, { ids });
+        toast(data?.message ?? "Units restored.");
+        return data;
+      }),
+    [request],
+  );
+
+  const permanentlyDeleteUnit = useCallback(
+    (unitId) =>
+      request(async () => {
+        const { data } = await api.delete(`${UNITS_BASE}/${unitId}/permanent`);
+        toast("Unit permanently deleted.");
+        return data;
+      }),
+    [request],
+  );
+
+  const permanentlyDeleteUnits = useCallback(
+    ({ ids }) =>
+      request(async () => {
+        const { data } = await api.delete(`${UNITS_BASE}/bulk/permanent`, { data: { ids } });
+        toast(data?.message ?? "Units permanently deleted.");
+        return data;
+      }),
+    [request],
+  );
+
+  const fetchUnitArchiveImpact = useCallback(
+    (unitId) =>
+      request(async () => {
+        const { data } = await api.get(`${UNITS_BASE}/${unitId}/archive-impact`);
+        return data?.data ?? null;
+      }),
+    [request],
+  );
+
+  const fetchUnitPermanentDeleteImpact = useCallback(
+    (unitId) =>
+      request(async () => {
+        const { data } = await api.get(`${UNITS_BASE}/${unitId}/permanent-delete-impact`);
+        return data?.data ?? null;
+      }),
+    [request],
+  );
+
+  const fetchUnitFieldValues = useCallback(
+    (field) =>
+      request(async () => {
+        const { data } = await api.get(`${UNITS_BASE}/field-values`, { params: { field } });
+        return data?.data ?? [];
+      }),
+    [request],
+  );
+
+  // ── Unit ⇄ Lesson membership ────────────────────────────────────────────
+
+  const attachLessonsToUnit = useCallback(
+    (unitId, lessonIds) =>
+      request(async () => {
+        const { data } = await api.post(`${UNITS_BASE}/${unitId}/lessons`, { lesson_ids: lessonIds });
+        toast(data?.message ?? "Lessons attached.");
+        return data;
+      }),
+    [request],
+  );
+
+  const detachLessonFromUnit = useCallback(
+    (unitId, lessonId) =>
+      request(async () => {
+        const { data } = await api.delete(`${UNITS_BASE}/${unitId}/lessons/${lessonId}`);
+        toast("Lesson detached.");
+        return data;
+      }),
+    [request],
+  );
+
+  const detachUnitFromCourse = useCallback(
+    (unitId, courseId) =>
+      request(async () => {
+        const { data } = await api.delete(`/admin/courses/${courseId}/units/${unitId}`);
+        toast("Detached from course.");
+        return data;
+      }),
+    [request],
+  );
+
+  const attachUnitToCourses = useCallback(
+    (unitId, courseIds) =>
+      request(async () => {
+        await Promise.all(
+          courseIds.map((courseId) => api.post(`/admin/courses/${courseId}/units/attach`, { unit_ids: [unitId] }))
+        );
+        toast(`Attached to ${courseIds.length} course${courseIds.length === 1 ? "" : "s"}.`);
+      }),
+    [request],
+  );
+
+  const attachLessonToUnits = useCallback(
+    (lessonId, unitIds) =>
+      request(async () => {
+        await Promise.all(
+          unitIds.map((unitId) => api.post(`${UNITS_BASE}/${unitId}/lessons`, { lesson_ids: [lessonId] }))
+        );
+        toast(`Attached to ${unitIds.length} unit${unitIds.length === 1 ? "" : "s"}.`);
+      }),
+    [request],
+  );
+
+  const reorderUnitLessons = useCallback(
+    (unitId, lessonIds) =>
+      request(async () => {
+        const { data } = await api.put(`${UNITS_BASE}/${unitId}/lessons/order`, { lesson_ids: lessonIds });
+        toast("Lesson order updated.");
+        return data;
+      }),
+    [request],
+  );
+
+  // =========================================================================
+  // LESSON LIBRARY
+  // =========================================================================
+
+  const fetchLessons = useCallback(
+    (params = {}) => paginatedGet(LESSONS_BASE, setLessons, params),
+    [paginatedGet],
+  );
+
+  const fetchLessonsFlat = useCallback(
+    () =>
+      request(async () => {
+        const { data } = await api.get(`${LESSONS_BASE}/flat`);
+        setLessonsFlat(data?.data ?? []);
+        return data;
+      }),
+    [request],
+  );
+
+  const fetchLesson = useCallback(
+    (lessonId) =>
+      request(async () => {
+        const { data } = await api.get(`${LESSONS_BASE}/${lessonId}`);
+        const result = data?.data?.data ?? null;
+        setLesson(result);
+        return data;
+      }),
+    [request],
+  );
+
+  const createLesson = useCallback(
+    (payload) =>
+      request(async () => {
+        const { data } = await api.post(LESSONS_BASE, payload);
+        const created = data?.data?.data ?? null;
+        if (created) toast("Lesson created successfully.");
+        return data;
+      }),
+    [request],
+  );
+
+  const updateLesson = useCallback(
+    (lessonId, payload) =>
+      request(async () => {
+        const { data } = await api.put(`${LESSONS_BASE}/${lessonId}`, payload);
+        const updated = data?.data?.data ?? null;
+        if (updated) {
+          setLesson(updated);
+          toast("Lesson updated successfully.");
+        }
+        return data;
+      }),
+    [request],
+  );
+
+  const saveLessonPage = useCallback(
+    (lessonId, payload) =>
+      request(async () => {
+        const { data } = await api.put(`${LESSONS_BASE}/${lessonId}/page`, payload);
+        return data;
+      }),
+    [request],
+  );
+
+  const archiveLesson = useCallback(
+    (lessonId) =>
+      request(async () => {
+        const { data } = await api.delete(`${LESSONS_BASE}/${lessonId}`);
+        toast("Lesson archived.");
+        return data;
+      }),
+    [request],
+  );
+
+  const archiveLessons = useCallback(
+    ({ ids }) =>
+      request(async () => {
+        const { data } = await api.delete(`${LESSONS_BASE}/bulk`, { data: { ids } });
+        toast(data?.message ?? "Lessons archived.");
+        return data;
+      }),
+    [request],
+  );
+
+  const fetchArchivedLessons = useCallback(
+    (params = {}) => paginatedGet(`${LESSONS_BASE}/archives`, setLessons, params),
+    [paginatedGet],
+  );
+
+  const restoreLesson = useCallback(
+    (lessonId) =>
+      request(async () => {
+        const { data } = await api.patch(`${LESSONS_BASE}/${lessonId}/restore`, {});
+        toast("Lesson restored.");
+        return data;
+      }),
+    [request],
+  );
+
+  const restoreLessons = useCallback(
+    ({ ids }) =>
+      request(async () => {
+        const { data } = await api.patch(`${LESSONS_BASE}/restore/bulk`, { ids });
+        toast(data?.message ?? "Lessons restored.");
+        return data;
+      }),
+    [request],
+  );
+
+  const permanentlyDeleteLesson = useCallback(
+    (lessonId) =>
+      request(async () => {
+        const { data } = await api.delete(`${LESSONS_BASE}/${lessonId}/permanent`);
+        toast("Lesson permanently deleted.");
+        return data;
+      }),
+    [request],
+  );
+
+  const permanentlyDeleteLessons = useCallback(
+    ({ ids }) =>
+      request(async () => {
+        const { data } = await api.delete(`${LESSONS_BASE}/bulk/permanent`, { data: { ids } });
+        toast(data?.message ?? "Lessons permanently deleted.");
+        return data;
+      }),
+    [request],
+  );
+
+  const fetchLessonPermanentDeleteImpact = useCallback(
+    (lessonId) =>
+      request(async () => {
+        const { data } = await api.get(`${LESSONS_BASE}/${lessonId}/permanent-delete-impact`);
+        return data?.data ?? null;
+      }),
+    [request],
+  );
+
+  const fetchLessonFieldValues = useCallback(
+    (field) =>
+      request(async () => {
+        const { data } = await api.get(`${LESSONS_BASE}/field-values`, { params: { field } });
+        return data?.data ?? [];
+      }),
+    [request],
+  );
+
+  // ─── Value ────────────────────────────────────────────────────────────────
+  const value = {
+    // shared table state
+    attributes, pagination, setPagination, loading,
+
+    // unit library
+    units, unit, unitsFlat,
+    fetchUnits, fetchUnitsFlat, fetchUnit, createUnit, createUnitFull, updateUnit,
+    archiveUnit, archiveUnits, fetchArchivedUnits,
+    restoreUnit, restoreUnits,
+    permanentlyDeleteUnit, permanentlyDeleteUnits,
+    fetchUnitArchiveImpact, fetchUnitPermanentDeleteImpact,
+    fetchUnitFieldValues,
+    attachLessonsToUnit, detachLessonFromUnit, detachUnitFromCourse, attachUnitToCourses, reorderUnitLessons,
+    attachLessonToUnits,
+
+    // lesson library
+    lessons, lesson, lessonsFlat,
+    fetchLessons, fetchLessonsFlat, fetchLesson, createLesson, updateLesson, saveLessonPage,
+    archiveLesson, archiveLessons, fetchArchivedLessons,
+    restoreLesson, restoreLessons,
+    permanentlyDeleteLesson, permanentlyDeleteLessons,
+    fetchLessonPermanentDeleteImpact,
+    fetchLessonFieldValues,
+  };
+
+  return <LibraryContext.Provider value={value}>{children}</LibraryContext.Provider>;
+}
diff --git a/apps/web/src/contexts/AdminNotificationBroadcastContext.jsx b/apps/web/src/contexts/AdminNotificationBroadcastContext.jsx
new file mode 100644
index 0000000..8c0eb80
--- /dev/null
+++ b/apps/web/src/contexts/AdminNotificationBroadcastContext.jsx
@@ -0,0 +1,247 @@
+import { createContext, useCallback, useContext, useState } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const NotificationBroadcastsContext = createContext(null);
+
+export function useNotificationBroadcasts() {
+    const ctx = useContext(NotificationBroadcastsContext);
+    if (!ctx) throw new Error("useNotificationBroadcasts must be used within a NotificationBroadcastsProvider");
+    return ctx;
+}
+
+// ─── Initial States ────────────────────────────────────────────────────────────
+
+const PAGINATION_INIT = {
+    page: 1,
+    limit: 10,
+    totalRecords: 0,
+    totalPages: 0,
+    hasPrevPage: false,
+    hasNextPage: false,
+};
+
+export function NotificationBroadcastsProvider({ children }) {
+    const [broadcasts, setBroadcasts] = useState([]);
+    const [attributes, setAttributes] = useState([]);
+    const [pagination, setPagination] = useState(PAGINATION_INIT);
+    const [selectedBroadcast, setSelectedBroadcast] = useState(null);
+    const [loading, setLoading] = useState(false);
+
+    const request = useCallback(async (fn) => {
+        setLoading(true);
+        try {
+            return await fn();
+        } catch (err) {
+            const message = err?.response?.data?.message ?? "Something went wrong.";
+            toast(message);
+            return null;
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    // ─── GET /api/admin/announcements ─────────────────────────────────────────
+    const fetchBroadcasts = useCallback(
+        ({ page = 1, limit = 10, filters = [], sort = [] } = {}) =>
+            request(async () => {
+                const { data } = await api.get("/admin/announcements", {
+                    params: {
+                        page, limit,
+                        filters: filters.length ? JSON.stringify(filters) : undefined,
+                        sort: sort.length ? JSON.stringify(sort) : undefined,
+                    },
+                });
+                const result = data?.data;
+                setBroadcasts(result?.data ?? []);
+                setPagination(result?.pagination ?? PAGINATION_INIT);
+                setAttributes(result.attributes);
+                return data.data;
+            }),
+        [request]
+    );
+
+    // ─── GET /api/admin/announcements/:broadcastId ───────────────────────────
+    const fetchBroadcast = useCallback(
+        (broadcastId) =>
+            request(async () => {
+                const res = await api.get(`/admin/announcements/${broadcastId}`);
+                setSelectedBroadcast(res.data?.data?.data ?? null);
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── GET /api/admin/announcements/archived ────────────────────────────────
+    const fetchArchivedBroadcasts = useCallback(
+        ({ page = 1, limit = 10, filters = [], sort = [] } = {}) =>
+            request(async () => {
+                const { data } = await api.get("/admin/announcements/archived", {
+                    params: {
+                        page, limit,
+                        filters: filters.length ? JSON.stringify(filters) : undefined,
+                        sort: sort.length ? JSON.stringify(sort) : undefined,
+                    },
+                });
+                const final_data = data?.data;
+                setBroadcasts(final_data?.data ?? []);
+                setPagination(final_data?.pagination ?? PAGINATION_INIT);
+                setAttributes(final_data.attributes);
+                return data;
+            }),
+        [request]
+    );
+
+    // ─── POST /api/admin/announcements ────────────────────────────────────────
+    const createBroadcast = useCallback(
+        (fields) =>
+            request(async () => {
+                const res = await api.post("/admin/announcements", fields);
+                const broadcast = res.data?.data?.data ?? null;
+                if (broadcast) {
+                    setBroadcasts((prev) => [broadcast, ...prev]);
+                    toast("Alert created.");
+                }
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── PATCH /api/admin/announcements/:broadcastId ─────────────────────────
+    const updateBroadcast = useCallback(
+        (broadcastId, fields) =>
+            request(async () => {
+                const res = await api.patch(`/admin/announcements/${broadcastId}`, fields);
+                const broadcast = res.data?.data?.data ?? null;
+                if (broadcast) {
+                    setBroadcasts((prev) => prev.map((b) => (b.broadcast_id === broadcastId ? broadcast : b)));
+                    setSelectedBroadcast(broadcast);
+                    toast("Alert updated.");
+                }
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── PATCH /api/admin/announcements/:broadcastId/send ────────────────────
+    const sendBroadcast = useCallback(
+        (broadcastId) =>
+            request(async () => {
+                const res = await api.patch(`/admin/announcements/${broadcastId}/send`);
+                const broadcast = res.data?.data?.data ?? null;
+                if (broadcast) {
+                    setBroadcasts((prev) => prev.map((b) => (b.broadcast_id === broadcastId ? broadcast : b)));
+                    setSelectedBroadcast(broadcast);
+                    toast("Alert sent.");
+                }
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── DELETE /api/admin/announcements/:broadcastId ────────────────────────
+    const archiveBroadcast = useCallback(
+        (broadcastId, { deletedBy } = {}) =>
+            request(async () => {
+                const res = await api.delete(`/admin/announcements/${broadcastId}`, {
+                    data: { deletedBy },
+                });
+                setBroadcasts((prev) => prev.filter((b) => b.broadcast_id !== broadcastId));
+                setSelectedBroadcast((prev) => (prev?.broadcast_id === broadcastId ? null : prev));
+                toast("Alert archived.");
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── DELETE /api/admin/announcements/bulk ─────────────────────────────────
+    const archiveBroadcasts = useCallback(
+        ({ ids }, { deletedBy } = {}) =>
+            request(async () => {
+                const res = await api.delete("/admin/announcements/bulk", {
+                    data: { ids, deletedBy },
+                });
+                setBroadcasts((prev) => prev.filter((b) => !ids.includes(b.broadcast_id)));
+                toast(`${ids.length} alert(s) archived.`);
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── PATCH /api/admin/announcements/:broadcastId/restore ─────────────────
+    const restoreBroadcast = useCallback(
+        (broadcastId) =>
+            request(async () => {
+                const res = await api.patch(`/admin/announcements/${broadcastId}/restore`);
+                const broadcast = res.data?.data?.data ?? null;
+                if (broadcast) {
+                    setBroadcasts((prev) => prev.filter((b) => b.broadcast_id !== broadcastId));
+                    toast("Alert restored.");
+                }
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── PATCH /api/admin/announcements/bulk-restore ──────────────────────────
+    const restoreBroadcasts = useCallback(
+        ({ ids }) =>
+            request(async () => {
+                const res = await api.patch("/admin/announcements/bulk-restore", { ids });
+                setBroadcasts((prev) => prev.filter((b) => !ids.includes(b.broadcast_id)));
+                toast(`${ids.length} alert(s) restored.`);
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── DELETE /api/admin/announcements/:broadcastId/permanent ──────────────
+    const permanentlyDeleteBroadcast = useCallback(
+        (broadcastId) =>
+            request(async () => {
+                const res = await api.delete(`/admin/announcements/${broadcastId}/permanent`);
+                setBroadcasts((prev) => prev.filter((b) => b.broadcast_id !== broadcastId));
+                toast("Alert permanently deleted.");
+                return res.data;
+            }),
+        [request]
+    );
+
+    // ─── DELETE /api/admin/announcements/bulk/permanent ──────────────────────
+    const permanentlyDeleteBroadcasts = useCallback(
+        ({ ids }) =>
+            request(async () => {
+                const res = await api.delete("/admin/announcements/bulk/permanent", { data: { ids } });
+                setBroadcasts((prev) => prev.filter((b) => !ids.includes(b.broadcast_id)));
+                toast(`${ids.length} alert(s) permanently deleted.`);
+                return res.data;
+            }),
+        [request]
+    );
+
+    return (
+        <NotificationBroadcastsContext.Provider value={{
+            broadcasts,
+            attributes,
+            pagination,
+            selectedBroadcast,
+            loading,
+            setPagination,
+            setSelectedBroadcast,
+            fetchBroadcasts,
+            fetchBroadcast,
+            fetchArchivedBroadcasts,
+            createBroadcast,
+            updateBroadcast,
+            sendBroadcast,
+            archiveBroadcast,
+            archiveBroadcasts,
+            restoreBroadcast,
+            restoreBroadcasts,
+            permanentlyDeleteBroadcast,
+            permanentlyDeleteBroadcasts,
+        }}>
+            {children}
+        </NotificationBroadcastsContext.Provider>
+    );
+}
diff --git a/apps/web/src/contexts/AdminNotificationContext.jsx b/apps/web/src/contexts/AdminNotificationContext.jsx
new file mode 100644
index 0000000..34978f2
--- /dev/null
+++ b/apps/web/src/contexts/AdminNotificationContext.jsx
@@ -0,0 +1,101 @@
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import api from "@/utils/api.util";
+
+const AdminNotificationContext = createContext(null);
+
+const POLL_INTERVAL = 60_000; // 60 seconds
+
+export function useAdminNotifications() {
+    const ctx = useContext(AdminNotificationContext);
+    if (!ctx) throw new Error("useAdminNotifications must be used within AdminNotificationProvider");
+    return ctx;
+}
+
+export function AdminNotificationProvider({ children }) {
+    const [notifications, setNotifications] = useState([]);
+    const [unseenCount, setUnseenCount]     = useState(0);
+    const [stickyAnnouncements, setStickyAnnouncements] = useState([]);
+    const [loading, setLoading]             = useState(false);
+    const intervalRef = useRef(null);
+
+    const fetchUnseen = useCallback(async () => {
+        try {
+            const res = await api.get("/admin/notifications/unseen");
+            setUnseenCount(res.data?.data?.count ?? 0);
+        } catch {
+            // silent — badge simply stays at last known count
+        }
+    }, []);
+
+    const fetchStickyAnnouncement = useCallback(async () => {
+        try {
+            const res = await api.get("/admin/notifications/sticky");
+            setStickyAnnouncements(res.data?.data?.announcements ?? []);
+        } catch {
+            // silent
+        }
+    }, []);
+
+    const fetchNotifications = useCallback(async () => {
+        setLoading(true);
+        try {
+            const res = await api.get("/admin/notifications?limit=20");
+            const rows = res.data?.data?.notifications ?? [];
+            setNotifications(rows);
+            setUnseenCount(rows.filter(n => !n.seen).length);
+        } catch {
+            // silent
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    const markSeen = useCallback(async (id) => {
+        try {
+            await api.patch(`/admin/notifications/${id}/seen`);
+            setNotifications(prev =>
+                prev.map(n => n.notification_id === id ? { ...n, seen: true } : n)
+            );
+            setUnseenCount(prev => Math.max(0, prev - 1));
+            setStickyAnnouncements(prev => prev.filter(a => a.notification_id !== id));
+        } catch {
+            // silent
+        }
+    }, []);
+
+    const markAllSeen = useCallback(async () => {
+        try {
+            await api.patch("/admin/notifications/seen-all");
+            setNotifications(prev => prev.map(n => ({ ...n, seen: true })));
+            setUnseenCount(0);
+            setStickyAnnouncements([]);
+        } catch {
+            // silent
+        }
+    }, []);
+
+    // Initial load + start polling unseen count + sticky announcement
+    useEffect(() => {
+        fetchUnseen();
+        fetchStickyAnnouncement();
+        intervalRef.current = setInterval(() => {
+            fetchUnseen();
+            fetchStickyAnnouncement();
+        }, POLL_INTERVAL);
+        return () => clearInterval(intervalRef.current);
+    }, [fetchUnseen, fetchStickyAnnouncement]);
+
+    return (
+        <AdminNotificationContext.Provider value={{
+            notifications,
+            unseenCount,
+            stickyAnnouncements,
+            loading,
+            fetchNotifications,
+            markSeen,
+            markAllSeen,
+        }}>
+            {children}
+        </AdminNotificationContext.Provider>
+    );
+}
diff --git a/apps/web/src/contexts/AdminTaskContext.jsx b/apps/web/src/contexts/AdminTaskContext.jsx
new file mode 100644
index 0000000..c712954
--- /dev/null
+++ b/apps/web/src/contexts/AdminTaskContext.jsx
@@ -0,0 +1,705 @@
+/***********************************************************************************************************************************************************************
+ * File Name    : AdminTaskContext.jsx
+ * Type         : Context / Provider
+ * Description  : Admin task management context.
+ *                Covers: task lists (list, get, create, update, archive, restore, bulk archive, bulk restore)
+ *                        tasks (list, get, create, update, archive, restore, bulk archive, bulk restore)
+ *                        task list groups (list assigned, assign, unassign)
+ *                        task completions (list, get, list by user, archive, restore, bulk archive, bulk restore)
+ ***********************************************************************************************************************************************************************/
+import { createContext, useCallback, useContext, useState } from 'react';
+import api from '@/utils/api.util';
+import { toast } from 'sonner';
+
+const BASE = '/admin/task-lists';
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+const AdminTaskContext = createContext(null);
+
+export function useAdminTask() {
+    const ctx = useContext(AdminTaskContext);
+    if (!ctx) throw new Error('useAdminTask must be used within an AdminTaskProvider');
+    return ctx;
+}
+
+// ─── Provider ─────────────────────────────────────────────────────────────────
+export function AdminTaskProvider({ children }) {
+
+    // ── Task List state ───────────────────────────────────────────────────────
+    const [taskLists, setTaskLists]   = useState([]);
+    const [taskList,  setTaskList]    = useState(null);
+
+    // ── Task state ────────────────────────────────────────────────────────────
+    const [tasks, setTasks] = useState([]);
+    const [task,  setTask]  = useState(null);
+
+    // ── Task List Groups state ────────────────────────────────────────────────
+    const [taskListGroups, setTaskListGroups] = useState([]);
+
+    // ── Completion state ──────────────────────────────────────────────────────
+    const [completions, setCompletions] = useState([]);
+    const [completion,  setCompletion]  = useState(null);
+
+    // ── Shared (task lists + tasks) ───────────────────────────────────────────
+    const [attributes, setAttributes]   = useState([]);
+    const [pagination, setPagination]   = useState({ page: 1, limit: 10, totalRecords: 0, totalPages: 1 });
+    const [loading,    setLoading]      = useState(false);
+
+    // ── Completion-specific (separate to avoid conflicts) ─────────────────────
+    const [completionPagination, setCompletionPagination] = useState({ page: 1, limit: 10, totalRecords: 0, totalPages: 1 });
+    const [completionLoading,    setCompletionLoading]    = useState(false);
+    const [completionAttributes, setCompletionAttributes] = useState([]);
+
+    // ─── Generic request wrappers ─────────────────────────────────────────────
+    const request = useCallback(async (fn) => {
+        setLoading(true);
+        try {
+            return await fn();
+        } catch (err) {
+            const message = err?.response?.data?.message ?? 'Something went wrong.';
+            toast(message);
+            return null;
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    const completionRequest = useCallback(async (fn) => {
+        setCompletionLoading(true);
+        try {
+            return await fn();
+        } catch (err) {
+            const message = err?.response?.data?.message ?? 'Something went wrong.';
+            toast(message);
+            return null;
+        } finally {
+            setCompletionLoading(false);
+        }
+    }, []);
+
+    // ══════════════════════════════════════════════════════════════════════════
+    // TASK LISTS
+    // ══════════════════════════════════════════════════════════════════════════
+
+    const fetchTaskLists = useCallback(
+        ({ page = 1, limit = 10, filters = [], sort = [] } = {}) =>
+            request(async () => {
+                const res = await api.get(BASE, {
+                    params: {
+                        page, limit,
+                        filters: JSON.stringify(filters),
+                        sort: JSON.stringify(sort),
+                    },
+                });
+                const { data, attributes: attrs, pagination: pg } = res.data?.data ?? {};
+                setTaskLists(data ?? []);
+                setAttributes(attrs ?? []);
+                setPagination(pg ?? { page: 1, limit: 10, totalRecords: 0, totalPages: 1 });
+            }),
+        [request]
+    );
+
+    const fetchTaskList = useCallback(
+        (taskListId) =>
+            request(async () => {
+                const res = await api.get(`${BASE}/${taskListId}`);
+                const taskListData = res.data?.data ?? null;
+                setTaskList(taskListData);
+                if (taskListData?.groups) setTaskListGroups(taskListData.groups);
+                return taskListData;
+            }),
+        [request]
+    );
+
+    const fetchArchivedTaskLists = useCallback(
+        ({ page = 1, limit = 10, filters = [], sort = [] } = {}) =>
+            request(async () => {
+                const res = await api.get(`${BASE}/archived`, {
+                    params: {
+                        page, limit,
+                        filters: JSON.stringify(filters),
+                        sort: JSON.stringify(sort),
+                    },
+                });
+                const { data, attributes: attrs, pagination: pg } = res.data?.data ?? {};
+                setTaskLists(data ?? []);
+                setAttributes(attrs ?? []);
+                setPagination(pg ?? { page: 1, limit: 10, totalRecords: 0, totalPages: 1 });
+            }),
+        [request]
+    );
+
+    const createTaskList = useCallback(
+        (payload) =>
+            request(async () => {
+                const res = await api.post(BASE, payload);
+                toast('Task list created.');
+                return res.data?.data ?? null;
+            }),
+        [request]
+    );
+
+    const updateTaskList = useCallback(
+        (taskListId, payload) =>
+            request(async () => {
+                const res = await api.patch(`${BASE}/${taskListId}`, payload);
+                toast('Task list updated.');
+                return res.data?.data ?? null;
+            }),
+        [request]
+    );
+
+    const archiveTaskList = useCallback(
+        (taskListId) =>
+            request(async () => {
+                await api.delete(`${BASE}/${taskListId}`);
+                toast('Task list archived.');
+                return true;
+            }),
+        [request]
+    );
+
+    const restoreTaskList = useCallback(
+        (taskListId) =>
+            request(async () => {
+                await api.patch(`${BASE}/${taskListId}/restore`);
+                toast('Task list restored.');
+                return true;
+            }),
+        [request]
+    );
+
+    const bulkArchiveTaskLists = useCallback(
+        (ids) =>
+            request(async () => {
+                await api.post(`${BASE}/bulk-archive`, { ids });
+                toast(`${ids.length} task list(s) archived.`);
+                return true;
+            }),
+        [request]
+    );
+
+    const bulkRestoreTaskLists = useCallback(
+        (ids) =>
+            request(async () => {
+                await api.post(`${BASE}/bulk-restore`, { ids });
+                toast(`${ids.length} task list(s) restored.`);
+                return true;
+            }),
+        [request]
+    );
+
+    const permanentlyDeleteTaskList = useCallback(
+        (taskListId) =>
+            request(async () => {
+                await api.delete(`${BASE}/${taskListId}/permanent`);
+                toast('Task list permanently deleted.');
+                return true;
+            }),
+        [request]
+    );
+
+    const bulkPermanentlyDeleteTaskLists = useCallback(
+        (ids) =>
+            request(async () => {
+                await api.post(`${BASE}/bulk-delete`, { ids });
+                toast(`${ids.length} task list(s) permanently deleted.`);
+                return true;
+            }),
+        [request]
+    );
+
+    const fetchTaskListPermanentDeleteImpact = useCallback(
+        (taskListId) =>
+            request(async () => {
+                const res = await api.get(`${BASE}/${taskListId}/permanent-delete-impact`);
+                const { taskCount, completionCount } = res.data?.data ?? {};
+                return [
+                    { label: "task(s)", count: taskCount ?? 0 },
+                    { label: "task completion record(s)", count: completionCount ?? 0 },
+                ];
+            }),
+        [request]
+    );
+
+    const fetchTaskListFieldValues = useCallback(
+        (field) =>
+            request(async () => {
+                const res = await api.get(`${BASE}/field-values`, { params: { field } });
+                return res.data?.data ?? [];
+            }),
+        [request]
+    );
+
+    // ══════════════════════════════════════════════════════════════════════════
+    // TASK LIST GROUPS
+    // ══════════════════════════════════════════════════════════════════════════
+
+    const fetchTaskListGroups = useCallback(
+        (taskListId) =>
+            request(async () => {
+                const res = await api.get(`${BASE}/${taskListId}/groups`);
+                const groups = res.data?.data ?? [];
+                setTaskListGroups(groups);
+                return groups;
+            }),
+        [request]
+    );
+
+    const assignGroups = useCallback(
+        (taskListId, groupIds) =>
+            request(async () => {
+                const res = await api.post(`${BASE}/${taskListId}/groups/assign`, {
+                    group_ids: groupIds,
+                });
+                const result = res.data?.data ?? {};
+                if (result.assigned_ids?.length) {
+                    toast(`${result.assigned_ids.length} group(s) assigned.`);
+                } else {
+                    toast('All selected groups were already assigned.');
+                }
+                return result;
+            }),
+        [request]
+    );
+
+    const unassignGroups = useCallback(
+        (taskListId, groupIds) =>
+            request(async () => {
+                const res = await api.post(`${BASE}/${taskListId}/groups/unassign`, {
+                    group_ids: groupIds,
+                });
+                const result = res.data?.data ?? {};
+                toast(`${result.unassigned_ids?.length ?? 0} group(s) unassigned.`);
+                return result;
+            }),
+        [request]
+    );
+
+    // Replaces the full assigned-group set in one call — used when editing a task
+    // list's groups so an add+remove edit only costs one sensitiveOpsLimiter hit.
+    const syncGroups = useCallback(
+        (taskListId, groupIds) =>
+            request(async () => {
+                const res = await api.put(`${BASE}/${taskListId}/groups`, {
+                    group_ids: groupIds,
+                });
+                const result = res.data?.data ?? {};
+                toast('Assigned groups updated.');
+                return result;
+            }),
+        [request]
+    );
+
+    // ══════════════════════════════════════════════════════════════════════════
+    // TASKS
+    // ══════════════════════════════════════════════════════════════════════════
+
+    const fetchTasks = useCallback(
+        (taskListId, { page = 1, limit = 10, filters = [], sort = [] } = {}) =>
+            request(async () => {
+                const res = await api.get(`${BASE}/${taskListId}/tasks`, {
+                    params: {
+                        page, limit,
+                        filters: JSON.stringify(filters),
+                        sort: JSON.stringify(sort),
+                    },
+                });
+                const { data, attributes: attrs, pagination: pg } = res.data?.data ?? {};
+                setTasks(data ?? []);
+                setAttributes(attrs ?? []);
+                setPagination(pg ?? { page: 1, limit: 10, totalRecords: 0, totalPages: 1 });
+            }),
+        [request]
+    );
+
+    // Flat, unpaginated sibling-task list — used by the prerequisite picker.
+    // Deliberately does not touch tasks/pagination/attributes state (unlike
+    // fetchTasks) so it can be called from a page that isn't the tasks table.
+    const fetchTasksFlat = useCallback(
+        (taskListId) =>
+            request(async () => {
+                const res = await api.get(`${BASE}/${taskListId}/tasks`, { params: { limit: 1000 } });
+                const { data } = res.data?.data ?? {};
+                return data ?? [];
+            }),
+        [request]
+    );
+
+    const fetchArchivedTasks = useCallback(
+        (taskListId, { page = 1, limit = 10, filters = [], sort = [] } = {}) =>
+            request(async () => {
+                const res = await api.get(`${BASE}/${taskListId}/tasks/archived`, {
+                    params: {
+                        page, limit,
+                        filters: JSON.stringify(filters),
+                        sort: JSON.stringify(sort),
+                    },
+                });
+                const { data, attributes: attrs, pagination: pg } = res.data?.data ?? {};
+                setTasks(data ?? []);
+                setAttributes(attrs ?? []);
+                setPagination(pg ?? { page: 1, limit: 10, totalRecords: 0, totalPages: 1 });
+            }),
+        [request]
+    );
+
+    const fetchTask = useCallback(
+        (taskListId, taskId) =>
+            request(async () => {
+                const res = await api.get(`${BASE}/${taskListId}/tasks/${taskId}`);
+                const taskData = res.data?.data ?? null;
+                setTask(taskData);
+                return taskData;
+            }),
+        [request]
+    );
+
+    const warnPreCompleted = (warnings) => {
+        if (!warnings?.length) return;
+        const total = warnings.reduce((sum, w) => sum + w.completedCount, 0);
+        toast.warning(
+            `${total} assignee completion(s) already satisfy ${warnings.length} requirement(s) added — no action needed, they won't need to redo it.`
+        );
+    };
+
+    const createTask = useCallback(
+        (taskListId, payload) =>
+            request(async () => {
+                const res = await api.post(`${BASE}/${taskListId}/tasks`, payload);
+                toast('Task created.');
+                warnPreCompleted(res.data?.data?.warnings);
+                return res.data?.data ?? null;
+            }),
+        [request]
+    );
+
+    // Batches Task + TaskRequirement creation into one request — used by the
+    // Create Task List wizard so queuing N tasks costs one request instead of N.
+    const createTasksBulk = useCallback(
+        (taskListId, tasks) =>
+            request(async () => {
+                const res = await api.post(`${BASE}/${taskListId}/tasks/bulk`, { tasks });
+                const data = res.data?.data ?? null;
+                toast(`${data?.tasks?.length ?? tasks.length} task(s) created.`);
+                warnPreCompleted(data?.warnings);
+                return data?.tasks ?? null;
+            }),
+        [request]
+    );
+
+    const updateTask = useCallback(
+        (taskListId, taskId, payload) =>
+            request(async () => {
+                const res = await api.patch(`${BASE}/${taskListId}/tasks/${taskId}`, payload);
+                toast('Task updated.');
+                warnPreCompleted(res.data?.data?.warnings);
+                return res.data?.data ?? null;
+            }),
+        [request]
+    );
+
+    const archiveTask = useCallback(
+        (taskListId, taskId) =>
+            request(async () => {
+                await api.delete(`${BASE}/${taskListId}/tasks/${taskId}`);
+                toast('Task archived.');
+                return true;
+            }),
+        [request]
+    );
+
+    // PATCH /admin/task-lists/:taskListId/tasks/order  { task_ids: [orderedIds] }
+    const reorderTasks = useCallback(
+        (taskListId, taskIds) =>
+            request(async () => {
+                await api.patch(`${BASE}/${taskListId}/tasks/order`, { task_ids: taskIds });
+                return true;
+            }),
+        [request]
+    );
+
+    const restoreTask = useCallback(
+        (taskListId, taskId) =>
+            request(async () => {
+                await api.patch(`${BASE}/${taskListId}/tasks/${taskId}/restore`);
+                toast('Task restored.');
+                return true;
+            }),
+        [request]
+    );
+
+    const bulkArchiveTasks = useCallback(
+        (taskListId, ids) =>
+            request(async () => {
+                await api.post(`${BASE}/${taskListId}/tasks/bulk-archive`, { ids });
+                toast(`${ids.length} task(s) archived.`);
+                return true;
+            }),
+        [request]
+    );
+
+    const bulkRestoreTasks = useCallback(
+        (taskListId, ids) =>
+            request(async () => {
+                await api.post(`${BASE}/${taskListId}/tasks/bulk-restore`, { ids });
+                toast(`${ids.length} task(s) restored.`);
+                return true;
+            }),
+        [request]
+    );
+
+    const permanentlyDeleteTask = useCallback(
+        (taskListId, taskId) =>
+            request(async () => {
+                await api.delete(`${BASE}/${taskListId}/tasks/${taskId}/permanent`);
+                toast('Task permanently deleted.');
+                return true;
+            }),
+        [request]
+    );
+
+    const bulkPermanentlyDeleteTasks = useCallback(
+        (taskListId, ids) =>
+            request(async () => {
+                await api.post(`${BASE}/${taskListId}/tasks/bulk-delete`, { ids });
+                toast(`${ids.length} task(s) permanently deleted.`);
+                return true;
+            }),
+        [request]
+    );
+
+    const fetchTaskFieldValues = useCallback(
+        (taskListId, field) =>
+            request(async () => {
+                const res = await api.get(`${BASE}/${taskListId}/tasks/field-values`, {
+                    params: { field },
+                });
+                return res.data?.data ?? [];
+            }),
+        [request]
+    );
+
+    // ── Flat lists for RequirementBuilder course/unit/lesson selectors ────────
+    const fetchCoursesFlat = useCallback(
+        () => request(async () => {
+            const res = await api.get('/admin/courses/flat');
+            return res.data?.data ?? [];
+        }),
+        [request]
+    );
+
+    // Units/lessons are standalone entities that may sit under 0..N
+    // courses (junction revamp) — each row now carries a `courses[]` binding
+    // array instead of a single course_title/order_index pair, and
+    // RequirementBuilder's ContentPicker builds its own search string from it,
+    // so no client-side `_search` precomputation is needed here anymore.
+    const fetchUnitsFlat = useCallback(
+        () => request(async () => {
+            const res = await api.get('/admin/courses/units-flat');
+            return res.data?.data ?? [];
+        }),
+        [request]
+    );
+
+    const fetchLessonsFlat = useCallback(
+        () => request(async () => {
+            const res = await api.get('/admin/courses/lessons-flat');
+            return res.data?.data ?? [];
+        }),
+        [request]
+    );
+
+    // ══════════════════════════════════════════════════════════════════════════
+    // TASK COMPLETIONS
+    // ══════════════════════════════════════════════════════════════════════════
+
+    // ─── GET ALL ──────────────────────────────────────────────────────────────
+    // GET /admin/task-lists/:taskListId/tasks/:taskId/completions
+    const fetchCompletions = useCallback(
+        (taskListId, taskId, { page = 1, limit = 10, filters = [], sort = [] } = {}) =>
+            completionRequest(async () => {
+                const res = await api.get(`${BASE}/${taskListId}/tasks/${taskId}/completions`, {
+                    params: {
+                        page, limit,
+                        filters: JSON.stringify(filters),
+                        sort: JSON.stringify(sort),
+                    },
+                });
+                const { data, attributes: attrs, pagination: pg } = res.data?.data ?? {};
+                setCompletions(data ?? []);
+                setCompletionAttributes(attrs ?? []);
+                setCompletionPagination(pg ?? { page: 1, limit: 10, totalRecords: 0, totalPages: 1 });
+            }),
+        [completionRequest]
+    );
+
+    // ─── GET ONE ──────────────────────────────────────────────────────────────
+    // GET /admin/task-lists/:taskListId/tasks/:taskId/completions/:completionId
+    const fetchCompletion = useCallback(
+        (taskListId, taskId, completionId) =>
+            completionRequest(async () => {
+                const res = await api.get(
+                    `${BASE}/${taskListId}/tasks/${taskId}/completions/${completionId}`
+                );
+                const data = res.data?.data ?? null;
+                setCompletion(data);
+                return data;
+            }),
+        [completionRequest]
+    );
+
+    // ─── REVIEW ───────────────────────────────────────────────────────────────
+    // PATCH /admin/task-lists/:taskListId/tasks/:taskId/completions/:completionId/review
+    const reviewSubmission = useCallback(
+        (taskListId, taskId, completionId, { status, review_note }) =>
+            completionRequest(async () => {
+                const res = await api.patch(
+                    `${BASE}/${taskListId}/tasks/${taskId}/completions/${completionId}/review`,
+                    { status, review_note }
+                );
+                const data = res.data?.data ?? null;
+                setCompletion(data);
+                setCompletions((prev) => prev.map((c) => (c.completion_id === completionId ? { ...c, ...data } : c)));
+                toast(`Submission ${status}.`);
+                return data;
+            }),
+        [completionRequest]
+    );
+
+    // ─── GET BY USER ──────────────────────────────────────────────────────────
+    // GET /admin/task-lists/:taskListId/tasks/:taskId/completions/user/:userId
+    const fetchCompletionsByUser = useCallback(
+        (taskListId, taskId, userId, { page = 1, limit = 10, filters = [], sort = [] } = {}) =>
+            completionRequest(async () => {
+                const res = await api.get(
+                    `${BASE}/${taskListId}/tasks/${taskId}/completions/user/${userId}`,
+                    {
+                        params: {
+                            page, limit,
+                            filters: JSON.stringify(filters),
+                            sort: JSON.stringify(sort),
+                        },
+                    }
+                );
+                const { data, attributes: attrs, pagination: pg } = res.data?.data ?? {};
+                setCompletions(data ?? []);
+                setCompletionAttributes(attrs ?? []);
+                setCompletionPagination(pg ?? { page: 1, limit: 10, totalRecords: 0, totalPages: 1 });
+            }),
+        [completionRequest]
+    );
+
+    // ─── ARCHIVE ──────────────────────────────────────────────────────────────
+    const archiveCompletion = useCallback(
+        (taskListId, taskId, completionId) =>
+            completionRequest(async () => {
+                await api.delete(
+                    `${BASE}/${taskListId}/tasks/${taskId}/completions/${completionId}`
+                );
+                toast('Completion archived.');
+                return true;
+            }),
+        [completionRequest]
+    );
+
+    // ─── RESTORE ──────────────────────────────────────────────────────────────
+    const restoreCompletion = useCallback(
+        (taskListId, taskId, completionId) =>
+            completionRequest(async () => {
+                await api.patch(
+                    `${BASE}/${taskListId}/tasks/${taskId}/completions/${completionId}/restore`
+                );
+                toast('Completion restored.');
+                return true;
+            }),
+        [completionRequest]
+    );
+
+    // ─── BULK ARCHIVE ─────────────────────────────────────────────────────────
+    const bulkArchiveCompletions = useCallback(
+        (taskListId, taskId, ids) =>
+            completionRequest(async () => {
+                await api.post(
+                    `${BASE}/${taskListId}/tasks/${taskId}/completions/bulk-archive`,
+                    { ids }
+                );
+                toast(`${ids.length} completion(s) archived.`);
+                return true;
+            }),
+        [completionRequest]
+    );
+
+    // ─── BULK RESTORE ─────────────────────────────────────────────────────────
+    const bulkRestoreCompletions = useCallback(
+        (taskListId, taskId, ids) =>
+            completionRequest(async () => {
+                await api.post(
+                    `${BASE}/${taskListId}/tasks/${taskId}/completions/bulk-restore`,
+                    { ids }
+                );
+                toast(`${ids.length} completion(s) restored.`);
+                return true;
+            }),
+        [completionRequest]
+    );
+
+    // ─────────────────────────────────────────────────────────────────────────
+    return (
+        <AdminTaskContext.Provider value={{
+            // ── Task List state ───────────────────────────────────────────────
+            taskLists, taskList,
+            // ── Task state ────────────────────────────────────────────────────
+            tasks, task,
+            // ── Task List Groups state ────────────────────────────────────────
+            taskListGroups, setTaskListGroups,
+            // ── Completion state ──────────────────────────────────────────────
+            completions, completion,
+            // ── Shared state ──────────────────────────────────────────────────
+            attributes, setAttributes,
+            pagination, setPagination,
+            loading,
+            // ── Completion-specific state ─────────────────────────────────────
+            completionPagination, setCompletionPagination,
+            completionLoading,
+            completionAttributes, setCompletionAttributes,
+
+            // ── Task List actions ─────────────────────────────────────────────
+            fetchTaskLists, fetchTaskList, fetchArchivedTaskLists,
+            createTaskList, updateTaskList,
+            archiveTaskList, restoreTaskList,
+            bulkArchiveTaskLists, bulkRestoreTaskLists,
+            permanentlyDeleteTaskList, bulkPermanentlyDeleteTaskLists,
+            fetchTaskListPermanentDeleteImpact,
+            fetchTaskListFieldValues,
+
+            // ── Task List Group actions ───────────────────────────────────────
+            fetchTaskListGroups,
+            assignGroups,
+            unassignGroups,
+            syncGroups,
+
+            // ── Task actions ──────────────────────────────────────────────────
+            fetchTasks, fetchTask, fetchTasksFlat, fetchArchivedTasks,
+            createTask, createTasksBulk, updateTask,
+            archiveTask, restoreTask,
+            bulkArchiveTasks, bulkRestoreTasks,
+            permanentlyDeleteTask, bulkPermanentlyDeleteTasks,
+            reorderTasks,
+            fetchTaskFieldValues,
+
+            // ── Completion actions ────────────────────────────────────────────
+            fetchCompletions, fetchCompletion, fetchCompletionsByUser,
+            archiveCompletion, restoreCompletion,
+            bulkArchiveCompletions, bulkRestoreCompletions,
+
+            // ── Flat lists for RequirementBuilder ────────────────────────────
+            fetchCoursesFlat, fetchUnitsFlat, fetchLessonsFlat,
+
+            // ── Review workflow ───────────────────────────────────────────────
+            reviewSubmission,
+        }}>
+            {children}
+        </AdminTaskContext.Provider>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/contexts/AdminTierCategoriesContext.jsx b/apps/web/src/contexts/AdminTierCategoriesContext.jsx
new file mode 100644
index 0000000..6440f1e
--- /dev/null
+++ b/apps/web/src/contexts/AdminTierCategoriesContext.jsx
@@ -0,0 +1,76 @@
+import { createContext, useCallback, useContext, useState } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const AdminTierCategoriesContext = createContext(null);
+
+export function useAdminTierCategories() {
+    const ctx = useContext(AdminTierCategoriesContext);
+    if (!ctx) throw new Error("useAdminTierCategories must be used inside AdminTierCategoriesProvider");
+    return ctx;
+}
+
+export function AdminTierCategoriesProvider({ children }) {
+    const [categories, setCategories] = useState([]);
+    const [category,   setCategory]   = useState(null);
+    const [loading,    setLoading]     = useState(false);
+
+    const request = useCallback(async (fn) => {
+        setLoading(true);
+        try { return await fn(); }
+        catch (err) {
+            toast(err?.response?.data?.message ?? "Something went wrong.");
+            return null;
+        } finally { setLoading(false); }
+    }, []);
+
+    const fetchCategories = useCallback(() =>
+        request(async () => {
+            const { data } = await api.get("/admin/tiers/categories");
+            setCategories(data.data ?? []);
+            return data.data;
+        }), [request]);
+
+    const fetchCategory = useCallback((id) =>
+        request(async () => {
+            const { data } = await api.get(`/admin/tiers/categories/${id}`);
+            setCategory(data.data ?? null);
+            return data.data;
+        }), [request]);
+
+    const createCategory = useCallback((payload) =>
+        request(async () => {
+            const { data } = await api.post("/admin/tiers/categories", payload);
+            toast("Subscription category created.");
+            return data.data;
+        }), [request]);
+
+    const updateCategory = useCallback((id, payload) =>
+        request(async () => {
+            const { data } = await api.put(`/admin/tiers/categories/${id}`, payload);
+            setCategories((prev) =>
+                prev.map((c) => (String(c.tier_category_id) === String(id) ? data.data : c))
+            );
+            if (category && String(category.tier_category_id) === String(id)) setCategory(data.data);
+            toast("Subscription category updated.");
+            return data.data;
+        }), [request, category]);
+
+    const deleteCategory = useCallback((id) =>
+        request(async () => {
+            await api.delete(`/admin/tiers/categories/${id}`);
+            setCategories((prev) => prev.filter((c) => String(c.tier_category_id) !== String(id)));
+            toast("Subscription category deleted.");
+            return true;
+        }), [request]);
+
+    return (
+        <AdminTierCategoriesContext.Provider value={{
+            categories, category, loading,
+            fetchCategories, fetchCategory,
+            createCategory, updateCategory, deleteCategory,
+        }}>
+            {children}
+        </AdminTierCategoriesContext.Provider>
+    );
+}
diff --git a/apps/web/src/contexts/AdminTierPoliciesContext.jsx b/apps/web/src/contexts/AdminTierPoliciesContext.jsx
new file mode 100644
index 0000000..606a04f
--- /dev/null
+++ b/apps/web/src/contexts/AdminTierPoliciesContext.jsx
@@ -0,0 +1,60 @@
+import { createContext, useCallback, useContext, useState } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const AdminTierPoliciesContext = createContext(null);
+
+export function useAdminTierPolicies() {
+    const ctx = useContext(AdminTierPoliciesContext);
+    if (!ctx) throw new Error("useAdminTierPolicies must be used inside AdminTierPoliciesProvider");
+    return ctx;
+}
+
+export function AdminTierPoliciesProvider({ children }) {
+    const [systemBadges, setSystemBadges] = useState([]);
+    const [loading,      setLoading]      = useState(false);
+
+    const request = useCallback(async (fn) => {
+        setLoading(true);
+        try {
+            return await fn();
+        } catch (err) {
+            const message = err?.response?.data?.message ?? "Something went wrong.";
+            toast(message);
+            return null;
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    // ─── System Badges ────────────────────────────────────────────────────────────
+    const fetchSystemBadges = useCallback(() =>
+        request(async () => {
+            const { data } = await api.get("/admin/tiers/system-badges");
+            setSystemBadges(data.data ?? []);
+            return data.data;
+        }), [request]);
+
+    // payload = { asset_id, label, description, information, active_from, active_until }
+    const saveSystemBadge = useCallback((key, payload) =>
+        request(async () => {
+            const { data } = await api.put(`/admin/tiers/system-badges/${key}`, payload);
+            setSystemBadges((prev) => {
+                const idx = prev.findIndex((b) => b.key === key);
+                return idx >= 0
+                    ? prev.map((b) => (b.key === key ? data.data : b))
+                    : [...prev, data.data];
+            });
+            toast("Badge saved.");
+            return data.data;
+        }), [request]);
+
+    return (
+        <AdminTierPoliciesContext.Provider value={{
+            systemBadges, loading,
+            fetchSystemBadges, saveSystemBadge,
+        }}>
+            {children}
+        </AdminTierPoliciesContext.Provider>
+    );
+}
diff --git a/apps/web/src/contexts/AdminTiersContext.jsx b/apps/web/src/contexts/AdminTiersContext.jsx
new file mode 100644
index 0000000..8c28b2f
--- /dev/null
+++ b/apps/web/src/contexts/AdminTiersContext.jsx
@@ -0,0 +1,257 @@
+import { createContext, useContext, useState, useCallback } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const AdminTiersContext = createContext(null);
+
+export function AdminTiersProvider({ children }) {
+
+  const [plans,             setPlans]             = useState([]);
+  const [plan,              setPlan]              = useState(null);
+  const [payments,          setPayments]          = useState([]);
+  const [payment,           setPayment]           = useState(null);
+  const [userTiers,         setUserTiers]         = useState([]);
+  const [planAttributes,    setPlanAttributes]    = useState([]);
+  const [paymentAttributes, setPaymentAttributes] = useState([]);
+  const [planPagination,    setPlanPagination]    = useState({ page: 1, limit: 10, totalPages: 1, totalRecords: 0 });
+  const [paymentPagination, setPaymentPagination] = useState({ page: 1, limit: 10, totalPages: 1, totalRecords: 0 });
+  const [loading,           setLoading]           = useState(false);
+
+  // ─── Plans ────────────────────────────────────────────────────────────────
+
+  const fetchPlans = useCallback(async ({ page = 1, limit = 10, filters = [], sort = [], archived = false } = {}) => {
+    setLoading(true);
+    try {
+      const { data } = await api.get("/admin/tiers", {
+        params: { page, limit, filters: JSON.stringify(filters), sort: JSON.stringify(sort), archived },
+      });
+      setPlans(data.data?.data ?? []);
+      setPlanAttributes(data.data?.attributes ?? []);
+      setPlanPagination({
+        page:         data.data?.pagination?.page         ?? page,
+        limit:        data.data?.pagination?.limit        ?? limit,
+        totalPages:   data.data?.pagination?.totalPages   ?? 1,
+        totalRecords: data.data?.pagination?.totalRecords ?? 0,
+      });
+    } catch { toast("Could not load plans."); }
+    finally { setLoading(false); }
+  }, []);
+
+  const fetchPlan = useCallback(async (id) => {
+    setLoading(true);
+    try {
+      const { data } = await api.get(`/admin/tiers/${id}`);
+      setPlan(data.data ?? null);
+    } catch { toast("Could not load plan."); }
+    finally { setLoading(false); }
+  }, []);
+
+  const createPlan = useCallback(async (payload) => {
+    setLoading(true);
+    try {
+      const { data } = await api.post("/admin/tiers", payload);
+      toast("Plan created.");
+      return data.data;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not create plan.");
+      return null;
+    } finally { setLoading(false); }
+  }, []);
+
+  const updatePlan = useCallback(async (id, payload) => {
+    setLoading(true);
+    try {
+      const { data } = await api.put(`/admin/tiers/${id}`, payload);
+      toast("Plan updated.");
+      return data.data;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not update plan.");
+      return null;
+    } finally { setLoading(false); }
+  }, []);
+
+  // Archiving always force-revokes current subscribers' access (no refund) —
+  // handled entirely server-side, not an opt-in from here.
+  const deletePlan = useCallback(async (id) => {
+    setLoading(true);
+    try {
+      await api.delete(`/admin/tiers/${id}`);
+      toast("Plan archived. Subscriber access has been revoked.");
+      return true;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not archive plan.");
+      return false;
+    } finally { setLoading(false); }
+  }, []);
+
+  const restorePlan = useCallback(async (id) => {
+    setLoading(true);
+    try {
+      await api.post(`/admin/tiers/${id}/restore`);
+      toast("Plan restored.");
+      return true;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not restore plan.");
+      return false;
+    } finally { setLoading(false); }
+  }, []);
+
+  const bulkDeletePlans = useCallback(async (ids) => {
+    setLoading(true);
+    try {
+      await api.post("/admin/tiers/bulk/archive", { ids });
+      toast("Plans archived. Subscriber access has been revoked.");
+      return true;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not archive plans.");
+      return false;
+    } finally { setLoading(false); }
+  }, []);
+
+  const bulkRestorePlans = useCallback(async (ids) => {
+    setLoading(true);
+    try {
+      await api.post("/admin/tiers/bulk/restore", { ids });
+      toast("Plans restored.");
+      return true;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not restore plans.");
+      return false;
+    } finally { setLoading(false); }
+  }, []);
+
+  const permanentlyDeletePlan = useCallback(async (id) => {
+    setLoading(true);
+    try {
+      await api.delete(`/admin/tiers/${id}/permanent`);
+      toast("Plan permanently deleted.");
+      return true;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not permanently delete plan.");
+      return false;
+    } finally { setLoading(false); }
+  }, []);
+
+  const bulkPermanentlyDeletePlans = useCallback(async (ids) => {
+    setLoading(true);
+    try {
+      await api.post("/admin/tiers/bulk/permanent-delete", { ids });
+      toast("Plans permanently deleted.");
+      return true;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not permanently delete plans.");
+      return false;
+    } finally { setLoading(false); }
+  }, []);
+
+  // Permanently deleting an archived plan now also auto-revokes any remaining
+  // active subscribers (no refund) and deletes payment records — both are
+  // automatic consequences of the delete action, not separate opt-ins.
+  const fetchPlanPermanentDeleteImpact = useCallback(async (id) => {
+    try {
+      const { data } = await api.get(`/admin/tiers/${id}/permanent-delete-impact`);
+      const { active_subscriber_count, payment_count } = data?.data ?? {};
+      return [
+        { label: "active subscriber(s) — access will be revoked, no refund", count: active_subscriber_count ?? 0 },
+        { label: "payment record(s) on file — will be permanently deleted along with the plan", count: payment_count ?? 0 },
+      ];
+    } catch {
+      return [];
+    }
+  }, []);
+
+  // ─── User Tiers ───────────────────────────────────────────────────────────
+
+  const fetchUserTiers = useCallback(async (userId) => {
+    setLoading(true);
+    try {
+      const { data } = await api.get(`/admin/tiers/users/${userId}/tiers`);
+      setUserTiers(data.data ?? []);
+    } catch { toast("Could not load user subscriptions."); }
+    finally { setLoading(false); }
+  }, []);
+
+  const grantTier = useCallback(async (payload) => {
+    setLoading(true);
+    try {
+      await api.post("/admin/tiers/users/tiers/grant", payload);
+      toast("Subscription granted.");
+      return true;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not grant subscription.");
+      return false;
+    } finally { setLoading(false); }
+  }, []);
+
+  const revokeTier = useCallback(async (tid) => {
+    setLoading(true);
+    try {
+      await api.patch(`/admin/tiers/users/tiers/${tid}/revoke`);
+      toast("Subscription revoked.");
+      return true;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not revoke subscription.");
+      return false;
+    } finally { setLoading(false); }
+  }, []);
+
+  // ─── Payments ─────────────────────────────────────────────────────────────
+
+  const fetchPayments = useCallback(async ({ page = 1, limit = 10, filters = [], sort = [] } = {}) => {
+    setLoading(true);
+    try {
+      const { data } = await api.get("/admin/tiers/payments", {
+        params: { page, limit, filters: JSON.stringify(filters), sort: JSON.stringify(sort) },
+      });
+      setPayments(data.data?.data ?? []);
+      setPaymentAttributes(data.data?.attributes ?? []);
+      setPaymentPagination({
+        page:         data.data?.pagination?.page         ?? page,
+        limit:        data.data?.pagination?.limit        ?? limit,
+        totalPages:   data.data?.pagination?.totalPages   ?? 1,
+        totalRecords: data.data?.pagination?.totalRecords ?? 0,
+      });
+    } catch { toast("Could not load payments."); }
+    finally { setLoading(false); }
+  }, []);
+
+  const fetchPayment = useCallback(async (id) => {
+    setLoading(true);
+    try {
+      const { data } = await api.get(`/admin/tiers/payments/${id}`);
+      setPayment(data.data ?? null);
+    } catch { toast("Could not load payment."); }
+    finally { setLoading(false); }
+  }, []);
+
+  return (
+    <AdminTiersContext.Provider value={{
+      // State
+      plans, plan,
+      payments, payment,
+      userTiers,
+      planAttributes, paymentAttributes,
+      planPagination, setPlanPagination,
+      paymentPagination, setPaymentPagination,
+      loading,
+
+      // Plan actions
+      fetchPlans, fetchPlan,
+      createPlan, updatePlan,
+      deletePlan, restorePlan,
+      bulkDeletePlans, bulkRestorePlans,
+      permanentlyDeletePlan, bulkPermanentlyDeletePlans, fetchPlanPermanentDeleteImpact,
+
+      // User tier actions
+      fetchUserTiers, grantTier, revokeTier,
+
+      // Payment actions
+      fetchPayments, fetchPayment,
+
+    }}>
+      {children}
+    </AdminTiersContext.Provider>
+  );
+}
+
+export const useTiers = () => useContext(AdminTiersContext);
\ No newline at end of file
diff --git a/apps/web/src/contexts/AdminUserContext.jsx b/apps/web/src/contexts/AdminUserContext.jsx
new file mode 100644
index 0000000..a0ec457
--- /dev/null
+++ b/apps/web/src/contexts/AdminUserContext.jsx
@@ -0,0 +1,451 @@
+import { createContext, useContext, useState, useCallback } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const UserContext = createContext(null);
+
+export const useUsers = () => {
+  const ctx = useContext(UserContext);
+  if (!ctx) throw new Error("useUsers must be used inside UserProvider");
+  return ctx;
+};
+
+const PAGINATION_INIT = {
+  page: 1,
+  limit: 10,
+  totalRecords: 0,
+  totalPages: 0,
+  hasPrevPage: false,
+  hasNextPage: false,
+};
+
+const BASE = "/admin";
+
+export const UserProvider = ({ children }) => {
+  const [users, setUsers] = useState([]);
+  const [user, setUser] = useState(null);
+  const [sessions, setSessions] = useState([]);
+  const [achievements, setAchievements] = useState([]);
+  const [achievementsLoading, setAchievementsLoading] = useState(false);
+  const [pagination, setPagination] = useState(PAGINATION_INIT);
+  const [attributes, setAttributes] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [activity, setActivity] = useState([]);
+  const [activityPagination, setActivityPagination] = useState(PAGINATION_INIT);
+  const [activityLoading, setActivityLoading] = useState(false);
+  const [bans, setBans] = useState([]);
+  const [bansLoading, setBansLoading] = useState(false);
+
+  const request = useCallback(async (fn) => {
+    setLoading(true);
+    setError(null);
+    try {
+      return await fn();
+    } catch (err) {
+      const message = err?.response?.data?.message || err.message || "Something went wrong.";
+      setError(message);
+      toast(message);
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // ─── GET /api/admin/users ──────────────────────────────────────────────────
+  const fetchUsers = useCallback(
+    ({ page = 1, limit = 10, filters = [], sort = [] } = {}) =>
+      request(async () => {
+        const { data } = await api.get(`${BASE}/users`, {
+          params: {
+            page, limit,
+            filters: filters.length ? JSON.stringify(filters) : undefined,
+            sort:    sort.length    ? JSON.stringify(sort)    : undefined,
+          },
+        });
+        const final_data = data?.data;
+        setUsers(final_data?.data ?? []);
+        setPagination(final_data?.pagination ?? PAGINATION_INIT);
+        setAttributes(final_data?.attributes ?? []);
+        return data?.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /api/admin/users/archived ────────────────────────────────────────
+  const fetchArchivedUsers = useCallback(
+    ({ page = 1, limit = 10, filters = [], sort = [] } = {}) =>
+      request(async () => {
+        const { data } = await api.get(`${BASE}/users/archived`, {
+          params: {
+            page, limit,
+            filters: filters.length ? JSON.stringify(filters) : undefined,
+            sort:    sort.length    ? JSON.stringify(sort)    : undefined,
+          },
+        });
+        const final_data = data?.data;
+        setUsers(final_data?.data ?? []);
+        setPagination(final_data?.pagination ?? PAGINATION_INIT);
+        setAttributes(final_data?.attributes ?? []);
+        return data?.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /api/admin/users/:id ─────────────────────────────────────────────
+  const fetchUser = useCallback(
+    (userId) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/users/${userId}`);
+        setUser(res.data?.data ?? null);
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── POST /api/admin/users/staff ──────────────────────────────────────────
+  const addStaffUser = useCallback(
+    (payload) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/users/staff`, payload);
+        toast("Staff user added successfully.");
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── PUT /api/admin/users/:id ─────────────────────────────────────────────
+  const updateUser = useCallback(
+    (userId, payload) =>
+      request(async () => {
+        const res = await api.put(`${BASE}/users/${userId}`, payload);
+        setUsers((prev) =>
+          prev.map((u) => (u.user_id === userId ? { ...u, ...res.data?.data } : u))
+        );
+        toast("User updated successfully.");
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── DELETE /api/admin/users/:id ──────────────────────────────────────────
+  const deactivateUser = useCallback(
+    (userId) =>
+      request(async () => {
+        const res = await api.delete(`${BASE}/users/${userId}`);
+        setUsers((prev) =>
+          prev.map((u) => (u.user_id === userId ? { ...u, is_active: false } : u))
+        );
+        toast("User deactivated.");
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── DELETE /api/admin/users/bulk ─────────────────────────────────────────
+  const deactivateUsers = useCallback(
+    ({ ids }) =>
+      request(async () => {
+        const res = await api.delete(`${BASE}/users/bulk`, { data: { ids } });
+        const { deactivated_ids } = res.data?.data ?? {};
+        if (deactivated_ids?.length) {
+          setUsers((prev) =>
+            prev.map((u) =>
+              deactivated_ids.includes(u.user_id) ? { ...u, is_active: false } : u
+            )
+          );
+          toast(`${deactivated_ids.length} user(s) deactivated.`);
+        }
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── POST /api/admin/users/:id/restore ────────────────────────────────────
+  const restoreUser = useCallback(
+    (userId) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/users/${userId}/restore`);
+        setUsers((prev) =>
+          prev.map((u) => (u.user_id === userId ? { ...u, is_active: true } : u))
+        );
+        toast("User restored.");
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── POST /api/admin/users/bulk/restore ───────────────────────────────────
+  const restoreUsers = useCallback(
+    ({ ids }) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/users/bulk/restore`, { ids });
+        const { restored_ids } = res.data?.data ?? {};
+        if (restored_ids?.length) {
+          setUsers((prev) =>
+            prev.map((u) =>
+              restored_ids.includes(u.user_id) ? { ...u, is_active: true } : u
+            )
+          );
+          toast(`${restored_ids.length} user(s) restored.`);
+        }
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── DELETE /api/admin/users/:id/permanent ────────────────────────────────
+  const permanentlyDeleteUser = useCallback(
+    (userId) =>
+      request(async () => {
+        const res = await api.delete(`${BASE}/users/${userId}/permanent`);
+        setUsers((prev) => prev.filter((u) => u.user_id !== userId));
+        toast("User permanently deleted.");
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── DELETE /api/admin/users/bulk/permanent ───────────────────────────────
+  const permanentlyDeleteUsers = useCallback(
+    ({ ids }) =>
+      request(async () => {
+        const res = await api.delete(`${BASE}/users/bulk/permanent`, { data: { ids } });
+        const { deleted_ids } = res.data?.data ?? {};
+        if (deleted_ids?.length) {
+          setUsers((prev) => prev.filter((u) => !deleted_ids.includes(u.user_id)));
+          toast(`${deleted_ids.length} user(s) permanently deleted.`);
+        }
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /api/admin/users/:id/sessions ────────────────────────────────────
+  const fetchUserSessions = useCallback(
+    (userId) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/users/${userId}/sessions`);
+        setSessions(res.data?.data ?? []);
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── DELETE /api/admin/users/:id/sessions/:sid ────────────────────────────
+  const terminateSession = useCallback(
+    (userId, sessionId) =>
+      request(async () => {
+        const res = await api.delete(`${BASE}/users/${userId}/sessions/${sessionId}`);
+        setSessions((prev) =>
+          prev.map((s) => (s.session_id === sessionId ? { ...s, is_active: false } : s))
+        );
+        toast("Session terminated.");
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /api/admin/activity ──────────────────────────────────────────────
+  const fetchActivity = useCallback(
+    ({ page = 1, limit = 20, action = undefined, from = undefined, to = undefined } = {}) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/activity`, { params: { page, limit, action, from, to } });
+        const d = res.data?.data;
+        setActivity(d?.activities ?? []);
+        setActivityPagination({
+          page:         d?.page        ?? 1,
+          limit,
+          totalRecords: d?.total       ?? 0,
+          totalPages:   d?.totalPages  ?? 0,
+          hasPrevPage:  (d?.page ?? 1) > 1,
+          hasNextPage:  (d?.page ?? 1) < (d?.totalPages ?? 0),
+        });
+        return d;
+      }),
+    [request]
+  );
+
+  // ─── GET /api/admin/users/:id/activity ────────────────────────────────────
+  const fetchUserActivity = useCallback(
+    async (userId, { page = 1, limit = 20, action = undefined, from = undefined, to = undefined } = {}) => {
+      setActivityLoading(true);
+      try {
+        const res = await api.get(`${BASE}/users/${userId}/activity`, { params: { page, limit, action, from, to } });
+        const d = res.data?.data;
+        setActivity(d?.activities ?? []);
+        setActivityPagination({
+          page:         d?.page        ?? 1,
+          limit,
+          totalRecords: d?.total       ?? 0,
+          totalPages:   d?.totalPages  ?? 0,
+          hasPrevPage:  (d?.page ?? 1) > 1,
+          hasNextPage:  (d?.page ?? 1) < (d?.totalPages ?? 0),
+        });
+        return d;
+      } catch (err) {
+        toast(err?.response?.data?.message ?? "Could not load activity.");
+        return null;
+      } finally {
+        setActivityLoading(false);
+      }
+    },
+    []
+  );
+
+  // ─── GET /api/admin/users/field-values ────────────────────────────────────
+  const fetchUserFieldValues = useCallback(
+    (field) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/users/field-values`, { params: { field } });
+        return res.data?.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /api/admin/users/:id/achievements ────────────────────────────────
+  const fetchUserAchievements = useCallback(async (userId) => {
+    setAchievementsLoading(true);
+    try {
+      const res = await api.get(`${BASE}/users/${userId}/achievements`);
+      setAchievements(res.data?.data ?? []);
+      return res.data?.data;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not load achievements.");
+      return [];
+    } finally {
+      setAchievementsLoading(false);
+    }
+  }, []);
+
+  // ─── POST /api/admin/users/:id/ban ────────────────────────────────────────
+  const banUser = useCallback(
+    (userId, payload) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/users/${userId}/ban`, payload);
+        setUsers((prev) =>
+          prev.map((u) => (u.user_id === userId ? { ...u, is_banned: true } : u))
+        );
+        if (user?.user_id === userId) setUser((prev) => prev ? { ...prev, is_banned: true } : prev);
+        toast("User banned successfully.");
+        return res.data;
+      }),
+    [request, user]
+  );
+
+  // ─── POST /api/admin/users/:id/unban ──────────────────────────────────────
+  const unbanUser = useCallback(
+    (userId, payload) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/users/${userId}/unban`, payload);
+        setUsers((prev) =>
+          prev.map((u) => (u.user_id === userId ? { ...u, is_banned: false } : u))
+        );
+        if (user?.user_id === userId) setUser((prev) => prev ? { ...prev, is_banned: false } : prev);
+        toast("User unbanned successfully.");
+        return res.data;
+      }),
+    [request, user]
+  );
+
+  // ─── POST /api/admin/users/:id/make-admin ─────────────────────────────────
+  const makeAdmin = useCallback(
+    (userId) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/users/${userId}/make-admin`, {});
+        setUsers((prev) =>
+          prev.map((u) => (u.user_id === userId ? { ...u, acc_type: "admin" } : u))
+        );
+        if (user?.user_id === userId) setUser((prev) => prev ? { ...prev, acc_type: "admin" } : prev);
+        toast("User promoted to Administrator.");
+        return res.data;
+      }),
+    [request, user]
+  );
+
+  // ─── POST /api/admin/users/:id/demote-admin ───────────────────────────────
+  const demoteAdmin = useCallback(
+    (userId) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/users/${userId}/demote-admin`, {});
+        setUsers((prev) =>
+          prev.map((u) => (u.user_id === userId ? { ...u, acc_type: "user" } : u))
+        );
+        if (user?.user_id === userId) setUser((prev) => prev ? { ...prev, acc_type: "user" } : prev);
+        toast("Administrator access removed.");
+        return res.data;
+      }),
+    [request, user]
+  );
+
+  // ─── POST /api/admin/users/bulk/ban ───────────────────────────────────────
+  const bulkBanUsers = useCallback(
+    ({ ids, ...payload }) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/users/bulk/ban`, { ids, ...payload });
+        const { banned_ids } = res.data?.data ?? {};
+        if (banned_ids?.length) {
+          setUsers((prev) =>
+            prev.map((u) => (banned_ids.includes(u.user_id) ? { ...u, is_banned: true } : u))
+          );
+          toast(`${banned_ids.length} user(s) banned.`);
+        }
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── POST /api/admin/users/bulk/unban ─────────────────────────────────────
+  const bulkUnbanUsers = useCallback(
+    ({ ids, lift_reason } = {}) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/users/bulk/unban`, { ids, lift_reason });
+        const { unbanned_ids } = res.data?.data ?? {};
+        if (unbanned_ids?.length) {
+          setUsers((prev) =>
+            prev.map((u) => (unbanned_ids.includes(u.user_id) ? { ...u, is_banned: false } : u))
+          );
+          toast(`${unbanned_ids.length} user(s) unbanned.`);
+        }
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /api/admin/users/:id/bans ────────────────────────────────────────
+  const fetchUserBans = useCallback(async (userId) => {
+    setBansLoading(true);
+    try {
+      const res = await api.get(`${BASE}/users/${userId}/bans`);
+      setBans(res.data?.data ?? []);
+      return res.data?.data;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not load ban history.");
+      return [];
+    } finally {
+      setBansLoading(false);
+    }
+  }, []);
+
+  return (
+    <UserContext.Provider value={{
+      users, user, sessions, achievements, achievementsLoading, pagination, attributes, loading, error,
+      activity, activityPagination, activityLoading,
+      bans, bansLoading,
+      setPagination,
+      fetchUsers, fetchArchivedUsers, fetchUser,
+      addStaffUser, updateUser,
+      deactivateUser, deactivateUsers,
+      restoreUser, restoreUsers,
+      permanentlyDeleteUser, permanentlyDeleteUsers,
+      fetchUserSessions, terminateSession,
+      fetchUserFieldValues,
+      fetchUserAchievements,
+      fetchActivity, fetchUserActivity,
+      banUser, unbanUser, bulkBanUsers, bulkUnbanUsers, fetchUserBans,
+      makeAdmin, demoteAdmin,
+    }}>
+      {children}
+    </UserContext.Provider>
+  );
+};
\ No newline at end of file
diff --git a/apps/web/src/contexts/AdminUserGroupContext.jsx b/apps/web/src/contexts/AdminUserGroupContext.jsx
new file mode 100644
index 0000000..b32405a
--- /dev/null
+++ b/apps/web/src/contexts/AdminUserGroupContext.jsx
@@ -0,0 +1,278 @@
+import { createContext, useCallback, useContext, useState } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const BASE = "/admin";
+const UserGroupContext = createContext(null);
+
+export function useUserGroups() {
+  const ctx = useContext(UserGroupContext);
+  if (!ctx) throw new Error("useUserGroups must be used within a UserGroupProvider");
+  return ctx;
+}
+
+export function UserGroupProvider({ children }) {
+  const [groups, setGroups] = useState([]);
+  const [group, setGroup] = useState(null);
+  const [members, setMembers] = useState([]);
+  const [usersIn, setUsersIn] = useState([]);
+  const [usersNotIn, setUsersNotIn] = useState([]);
+  const [attributes, setAttributes] = useState([]);
+  const [pagination, setPagination] = useState({ page: 1, limit: 10, total: 0, totalPages: 1 });
+  const [loading, setLoading] = useState(false);
+
+  const request = useCallback(async (fn) => {
+    setLoading(true);
+    try {
+      return await fn();
+    } catch (err) {
+      const message = err?.response?.data?.message ?? "Something went wrong.";
+      toast(message);
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // ─── GET /api/admin/groups ─────────────────────────────────────────────────
+  const fetchGroups = useCallback(
+    ({ page = 1, limit = 10, filters = [], sort = [] } = {}) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/groups`, {
+          params: { page, limit, filters: JSON.stringify(filters), sort: JSON.stringify(sort) },
+        });
+        const { data, attributes: attrs, pagination: pg } = res.data?.data ?? {};
+        setGroups(data ?? []);
+        setAttributes(attrs ?? []);
+        setPagination(pg ?? { page, limit, total: 0, totalPages: 1 });
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /api/admin/groups/archived ───────────────────────────────────────
+  const fetchArchivedGroups = useCallback(
+    ({ page = 1, limit = 10, filters = [], sort = [] } = {}) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/groups/archived`, {
+          params: { page, limit, filters: JSON.stringify(filters), sort: JSON.stringify(sort) },
+        });
+        const { data, attributes: attrs, pagination: pg } = res.data?.data ?? {};
+        setGroups(data ?? []);
+        setAttributes(attrs ?? []);
+        setPagination(pg ?? { page, limit, total: 0, totalPages: 1 });
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /api/admin/groups/:gid ───────────────────────────────────────────
+  const fetchGroup = useCallback(
+    (gid, paginationParams = {}) =>
+      request(async () => {
+        const { page = 1, limit = 10, filters = [], sort = [] } = paginationParams;
+        const res = await api.get(`${BASE}/groups/${gid}`, {
+          params: { page, limit, filters: JSON.stringify(filters), sort: JSON.stringify(sort) },
+        });
+        const { group: g, members: m } = res.data?.data ?? {};
+        setGroup(g ?? null);
+        setMembers(m?.data ?? []);
+        setPagination(m?.pagination ?? { page, limit, total: 0, totalPages: 1 });
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /api/admin/groups/:gid/users ─────────────────────────────────────
+  const fetchUsersInGroup = useCallback(
+    (gid) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/groups/${gid}/users`);
+        setUsersIn(res.data?.data ?? []);
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /api/admin/groups/:gid/users/add ─────────────────────────────────
+  const fetchUsersNotInGroup = useCallback(
+    (gid) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/groups/${gid}/users/add`);
+        setUsersNotIn(res.data?.data ?? []);
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /api/admin/groups/field-values ───────────────────────────────────
+  const fetchGroupFieldValues = useCallback(
+    (field) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/groups/field-values`, { params: { field } });
+        return res.data?.data;
+      }),
+    [request]
+  );
+
+  // ─── POST /api/admin/groups ────────────────────────────────────────────────
+  const createGroup = useCallback(
+    ({ name, description, group_code }) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/groups`, { name, description, group_code });
+        setGroups((prev) => [res.data?.data, ...prev]);
+        toast("Group created successfully.");
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── PUT /api/admin/groups/:gid ───────────────────────────────────────────
+  const updateGroup = useCallback(
+    (gid, { name, description, group_code }) =>
+      request(async () => {
+        const res = await api.put(`${BASE}/groups/${gid}`, { name, description, group_code });
+        setGroups((prev) =>
+          prev.map((g) => (g.group_id === gid ? { ...g, ...res.data?.data } : g))
+        );
+        setGroup((prev) => (prev?.group_id === gid ? { ...prev, ...res.data?.data } : prev));
+        toast("Group updated successfully.");
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── PATCH /api/admin/groups/:gid/deactivate ──────────────────────────────
+  const deactivateGroup = useCallback(
+    (gid) =>
+      request(async () => {
+        const res = await api.patch(`${BASE}/groups/${gid}/deactivate`);
+        setGroups((prev) =>
+          prev.map((g) => (g.group_id === gid ? { ...g, is_active: false } : g))
+        );
+        toast("Group deactivated.");
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── DELETE /api/admin/groups/bulk ────────────────────────────────────────
+  const deactivateGroups = useCallback(
+    ({ ids }) =>
+      request(async () => {
+        const res = await api.delete(`${BASE}/groups/bulk`, { data: { ids } });
+        const { deactivated_ids } = res.data?.data ?? {};
+        if (deactivated_ids?.length) {
+          setGroups((prev) =>
+            prev.map((g) =>
+              deactivated_ids.includes(g.group_id) ? { ...g, is_active: false } : g
+            )
+          );
+          toast(`${deactivated_ids.length} group(s) deactivated.`);
+        }
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── PATCH /api/admin/groups/:gid/restore ─────────────────────────────────
+  const restoreGroup = useCallback(
+    (gid) =>
+      request(async () => {
+        const res = await api.patch(`${BASE}/groups/${gid}/restore`);
+        setGroups((prev) =>
+          prev.map((g) => (g.group_id === gid ? { ...g, is_active: true } : g))
+        );
+        toast("Group restored.");
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── POST /api/admin/groups/bulk/restore ──────────────────────────────────
+  const restoreGroups = useCallback(
+    ({ ids }) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/groups/bulk/restore`, { ids });
+        const { restored_ids } = res.data?.data ?? {};
+        if (restored_ids?.length) {
+          setGroups((prev) =>
+            prev.map((g) =>
+              restored_ids.includes(g.group_id) ? { ...g, is_active: true } : g
+            )
+          );
+          toast(`${restored_ids.length} group(s) restored.`);
+        }
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── DELETE /api/admin/groups/:gid/permanent ──────────────────────────────
+  const permanentlyDeleteGroup = useCallback(
+    (gid) =>
+      request(async () => {
+        const res = await api.delete(`${BASE}/groups/${gid}/permanent`);
+        setGroups((prev) => prev.filter((g) => g.group_id !== gid));
+        toast("Group permanently deleted.");
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── DELETE /api/admin/groups/bulk/permanent ──────────────────────────────
+  const permanentlyDeleteGroups = useCallback(
+    ({ ids }) =>
+      request(async () => {
+        const res = await api.delete(`${BASE}/groups/bulk/permanent`, { data: { ids } });
+        const { deleted_ids } = res.data?.data ?? {};
+        if (deleted_ids?.length) {
+          setGroups((prev) => prev.filter((g) => !deleted_ids.includes(g.group_id)));
+          toast(`${deleted_ids.length} group(s) permanently deleted.`);
+        }
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── POST /api/admin/groups/:gid/users ────────────────────────────────────
+  const addUsersToGroup = useCallback(
+    (gid, user_ids) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/groups/${gid}/users`, { user_ids });
+        setUsersNotIn((prev) => prev.filter((u) => !user_ids.includes(u.user_id)));
+        toast("Users added to group.");
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── DELETE /api/admin/groups/:gid/users ──────────────────────────────────
+  const removeUsersFromGroup = useCallback(
+    (gid, user_ids) =>
+      request(async () => {
+        const res = await api.delete(`${BASE}/groups/${gid}/users`, { data: { user_ids } });
+        setMembers((prev) => prev.filter((u) => !user_ids.includes(u.user_id)));
+        setUsersIn((prev) => prev.filter((u) => !user_ids.includes(u.user_id)));
+        toast("Users removed from group.");
+        return res.data;
+      }),
+    [request]
+  );
+
+  return (
+    <UserGroupContext.Provider value={{
+      groups, group, members, usersIn, usersNotIn, attributes, pagination, loading,
+      setPagination,
+      fetchGroups, fetchArchivedGroups, fetchGroup,
+      fetchUsersInGroup, fetchUsersNotInGroup, fetchGroupFieldValues,
+      createGroup, updateGroup,
+      deactivateGroup, deactivateGroups,
+      restoreGroup, restoreGroups,
+      permanentlyDeleteGroup, permanentlyDeleteGroups,
+      addUsersToGroup, removeUsersFromGroup,
+    }}>
+      {children}
+    </UserGroupContext.Provider>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/contexts/AuthContext.jsx b/apps/web/src/contexts/AuthContext.jsx
new file mode 100644
index 0000000..6d62788
--- /dev/null
+++ b/apps/web/src/contexts/AuthContext.jsx
@@ -0,0 +1,188 @@
+// contexts/AuthContext.jsx
+import { createContext, useContext, useState, useCallback, useRef } from 'react'
+import api from '../utils/api.util'
+
+const AuthContext = createContext(null)
+
+export const decodeToken = (token) => JSON.parse(atob(token.split('.')[1]))
+
+export function AuthProvider({ children }) {
+  const [accessToken, _setAccessToken] = useState(null)
+  const [user, setUser] = useState(null)
+  const [sessionId, setSessionId] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [sessionRestored, setSessionRestored] = useState(false)
+  const [authError, setAuthError] = useState(null)
+
+  const isRestoring = useRef(false)
+  const accessTokenRef = useRef(null)
+
+  const setAccessToken = useCallback((token) => {
+    accessTokenRef.current = token
+    _setAccessToken(token)
+  }, [])
+
+  // Shared by verifyOTP, restoreSession, and login's trusted-device fast path
+  // — anywhere the backend hands back a fully-authenticated session in one shot.
+  const applySession = useCallback((data) => {
+    setAccessToken(data.accessToken)
+    setUser(data.user)
+    setSessionId(data.session_id ?? null)
+  }, [setAccessToken])
+
+  // ── Login ──────────────────────────────────────────────────────────────────
+  // Credentials get you an OTP — unless this device already cleared one
+  // recently and its trust window is still valid, in which case the backend
+  // returns otpRequired:false along with a full session, same shape as
+  // verifyOTP's response.
+  const login = useCallback(async ({ email, password, group_code }) => {
+    setAuthError(null)
+    try {
+      const { data } = await api.post('/auth/login', { email, password, ...(group_code ? { group_code } : {}) })
+      if (data.data.otpRequired === false) {
+        applySession(data.data)
+        return { success: true, otpRequired: false, user: data.data.user }
+      }
+      return { success: true, otpRequired: true, email: data.data.email }
+    } catch (err) {
+      const message = err.response?.data?.message || 'Login failed. Please try again.'
+      const errors  = err.response?.data?.errors  ?? null
+      setAuthError(message)
+      return { success: false, message, errors }
+    }
+  }, [applySession])
+
+  // ── Register ───────────────────────────────────────────────────────────────
+  const register = useCallback(async (payload) => {
+    setAuthError(null)
+    try {
+      await api.post('/auth/register', payload)
+      return { success: true }
+    } catch (err) {
+      const message = err.response?.data?.message || 'Registration failed. Please try again.'
+      const errors  = err.response?.data?.errors  ?? null
+      setAuthError(message)
+      return { success: false, message, errors }
+    }
+  }, [])
+
+  // ── Verify OTP (auto-login) ────────────────────────────────────────────────
+  const verifyOTP = useCallback(async ({ email, otp }) => {
+    setAuthError(null)
+    try {
+      const { data } = await api.post('/auth/verify-otp', { email, otp })
+      applySession(data.data)
+      return { success: true, user: data.data.user }
+    } catch (err) {
+      const message = err.response?.data?.message || 'OTP verification failed.'
+      setAuthError(message)
+      return { success: false, message }
+    }
+  }, [applySession])
+
+  // ── Resend OTP ─────────────────────────────────────────────────────────────
+  const resendOTP = useCallback(async ({ email }) => {
+    try {
+      await api.post('/auth/resend-otp', { email })
+      return { success: true }
+    } catch (err) {
+      const message = err.response?.data?.message || 'Could not resend OTP.'
+      return { success: false, message }
+    }
+  }, [])
+
+  // ── Forgot password (request OTP) ─────────────────────────────────────────
+  const forgotPassword = useCallback(async ({ email }) => {
+    try {
+      const { data } = await api.post('/auth/forgot-password', { email })
+      return { success: true, email: data.data.email }
+    } catch (err) {
+      const message = err.response?.data?.message || 'Could not process request.'
+      const isGoogleAccount = err.response?.data?.errors?.google === true
+      return { success: false, message, isGoogleAccount }
+    }
+  }, [])
+
+  // ── Verify reset OTP (step 2 — does not change the password) ──────────────
+  const verifyResetOtp = useCallback(async ({ email, otp }) => {
+    try {
+      await api.post('/auth/verify-reset-otp', { email, otp })
+      return { success: true }
+    } catch (err) {
+      const message = err.response?.data?.message || 'Verification failed.'
+      return { success: false, message }
+    }
+  }, [])
+
+  // ── Reset password (OTP + new password in one step) ───────────────────────
+  const resetPassword = useCallback(async ({ email, otp, new_password }) => {
+    try {
+      await api.post('/auth/reset-password', { email, otp, new_password })
+      return { success: true }
+    } catch (err) {
+      const message = err.response?.data?.message || 'Password reset failed.'
+      return { success: false, message }
+    }
+  }, [])
+
+  // ── Logout ─────────────────────────────────────────────────────────────────
+  const logout = useCallback(async () => {
+    try {
+      await api.post('/auth/logout', { session_id: sessionId })
+    } catch (_) {
+      // ignore
+    } finally {
+      setAccessToken(null)
+      setUser(null)
+      setSessionId(null)
+    }
+  }, [sessionId])
+
+  // ── Restore session ────────────────────────────────────────────────────────
+  const restoreSession = useCallback(async () => {
+    if (isRestoring.current) return { success: false }
+    isRestoring.current = true
+
+    try {
+      if (accessTokenRef.current) return { success: true }
+      const { data } = await api.post('/auth/refresh')
+      applySession(data.data)
+      return { success: true, user: data.data.user }
+    } catch (_) {
+      setAccessToken(null)
+      setUser(null)
+      setSessionId(null)
+      return { success: false }
+    } finally {
+      setLoading(false)
+    }
+  }, [applySession])
+
+  return (
+    <AuthContext.Provider value={{
+      accessToken,
+      accessTokenRef,
+      setAccessToken,
+      user,
+      setUser,
+      sessionId,
+      login,
+      register,
+      verifyOTP,
+      resendOTP,
+      forgotPassword,
+      verifyResetOtp,
+      resetPassword,
+      logout,
+      loading,
+      sessionRestored,
+      restoreSession,
+      authError,
+      setAuthError,
+    }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export const useAuth = () => useContext(AuthContext)
\ No newline at end of file
diff --git a/apps/web/src/contexts/ClientAdvertisementContext.jsx b/apps/web/src/contexts/ClientAdvertisementContext.jsx
new file mode 100644
index 0000000..d2488cb
--- /dev/null
+++ b/apps/web/src/contexts/ClientAdvertisementContext.jsx
@@ -0,0 +1,249 @@
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import api from "@/utils/api.util";
+import ResponsiveModal from "@/components/generic/ResponsiveModal";
+import { Button } from "@/components/ui/button";
+import { useProfile } from "@/contexts/ProfileProvider";
+
+const ClientAdvertisementsContext = createContext(null);
+
+// After this many clicks on the same ad in one browser session, further clicks
+// are held behind a confirmation dialog instead of following through straight
+// away — guards against accidental/rapid repeat clicks inflating ad clicks.
+const CLICK_LIMIT = 3;
+const CLICK_STORAGE_KEY = "ad_click_counts";
+
+function loadClickCounts() {
+    try {
+        return JSON.parse(sessionStorage.getItem(CLICK_STORAGE_KEY)) || {};
+    } catch {
+        return {};
+    }
+}
+
+export function useClientAdvertisements() {
+    const ctx = useContext(ClientAdvertisementsContext);
+    if (!ctx) throw new Error("useClientAdvertisements must be used within a ClientAdvertisementsProvider");
+    return ctx;
+}
+
+export function ClientAdvertisementsProvider({ children }) {
+    const navigate = useNavigate();
+    const { profile, getProfile } = useProfile();
+
+    // Keyed by placement so multiple slots on the same page (e.g. dashboard.hero +
+    // dashboard.popup) can be fetched independently without clobbering each other.
+    const [advertisements, setAdvertisements] = useState({});
+    const [loading, setLoading] = useState({});
+
+    // Keyed by placement, holds the full list for carousel-style slots (e.g.
+    // dashboard.hero) — separate from `advertisements` above, which only ever
+    // holds the single highest-priority ad per placement.
+    const [adLists, setAdLists] = useState({});
+    const [listLoading, setListLoading] = useState({});
+    const [clickCounts, setClickCounts] = useState(loadClickCounts);
+    const [pendingClick, setPendingClick] = useState(null); // { ad, cta } awaiting confirmation
+
+    // Ad fetches must know the real preference before deciding visibility — never
+    // assume "show" as a default just because profile hasn't loaded yet. profileRef
+    // always holds the latest profile so even a stale fetch-function reference
+    // (captured by a page's mount-only effect) reads current data when it runs.
+    const profileRef = useRef(profile);
+    useEffect(() => { profileRef.current = profile; }, [profile]);
+
+    const profileFetchRef = useRef(null);
+    const ensureProfile = useCallback(async () => {
+        if (profileRef.current) return profileRef.current;
+        if (!profileFetchRef.current) {
+            profileFetchRef.current = getProfile().finally(() => { profileFetchRef.current = null; });
+        }
+        const fresh = await profileFetchRef.current;
+        profileRef.current = fresh;
+        return fresh;
+    }, [getProfile]);
+
+    // Gated by the Settings → Advertisements "Other ads" toggle.
+    const resolveVisibility = (profileData, ad) => {
+        if (!ad) return ad;
+        const showOtherAds = profileData?.personal_info?.show_other_ads ?? true;
+        return showOtherAds ? ad : null;
+    };
+
+    // ─── GET /api/client/advertisements/active?placement=dashboard.hero ───────
+    const getActiveAdvertisement = useCallback(
+        async (placement) => {
+            setLoading((prev) => ({ ...prev, [placement]: true }));
+            try {
+                const [currentProfile, { data }] = await Promise.all([
+                    ensureProfile(),
+                    api.get("/client/advertisements/active", { params: { placement } }),
+                ]);
+                const ad = resolveVisibility(currentProfile, data?.data?.data ?? null);
+                setAdvertisements((prev) => ({ ...prev, [placement]: ad }));
+                return ad;
+            } catch {
+                setAdvertisements((prev) => ({ ...prev, [placement]: null }));
+                return null;
+            } finally {
+                setLoading((prev) => ({ ...prev, [placement]: false }));
+            }
+        },
+        [ensureProfile]
+    );
+
+    // ─── GET /api/client/advertisements/active-batch?placements=a,b,c ─────────
+    // Resolves several placements in one round-trip — use for any page that
+    // needs more than one simultaneous slot.
+    const getActiveAdvertisements = useCallback(
+        async (placements) => {
+            if (!placements?.length) return {};
+            setLoading((prev) => {
+                const next = { ...prev };
+                placements.forEach((p) => { next[p] = true; });
+                return next;
+            });
+            try {
+                const [currentProfile, { data }] = await Promise.all([
+                    ensureProfile(),
+                    api.get("/client/advertisements/active-batch", {
+                        params: { placements: placements.join(",") },
+                    }),
+                ]);
+                const raw = data?.data?.data ?? {};
+                const result = Object.fromEntries(
+                    Object.entries(raw).map(([placement, ad]) => [placement, resolveVisibility(currentProfile, ad)])
+                );
+                setAdvertisements((prev) => ({ ...prev, ...result }));
+                return result;
+            } catch {
+                const fallback = Object.fromEntries(placements.map((p) => [p, null]));
+                setAdvertisements((prev) => ({ ...prev, ...fallback }));
+                return fallback;
+            } finally {
+                setLoading((prev) => {
+                    const next = { ...prev };
+                    placements.forEach((p) => { next[p] = false; });
+                    return next;
+                });
+            }
+        },
+        [ensureProfile]
+    );
+
+    // ─── GET /api/client/advertisements/active-list?placement=dashboard.hero ──
+    // Resolves every live ad for one placement — use for carousel-style slots
+    // that rotate through several ads instead of showing just the winner.
+    const getActiveAdvertisementList = useCallback(
+        async (placement, limit) => {
+            setListLoading((prev) => ({ ...prev, [placement]: true }));
+            try {
+                const [currentProfile, { data }] = await Promise.all([
+                    ensureProfile(),
+                    api.get("/client/advertisements/active-list", { params: { placement, limit } }),
+                ]);
+                const raw = data?.data?.data ?? [];
+                const list = raw
+                    .map((ad) => resolveVisibility(currentProfile, ad))
+                    .filter(Boolean);
+                setAdLists((prev) => ({ ...prev, [placement]: list }));
+                return list;
+            } catch {
+                setAdLists((prev) => ({ ...prev, [placement]: [] }));
+                return [];
+            } finally {
+                setListLoading((prev) => ({ ...prev, [placement]: false }));
+            }
+        },
+        [ensureProfile]
+    );
+
+    // ─── POST /api/client/advertisements/:advertisementId/click ───────────────
+    // Fire-and-forget — never await this on a navigation-blocking path.
+    const trackClick = useCallback(
+        (advertisementId) => {
+            if (!advertisementId) return;
+            api.post(`/client/advertisements/${advertisementId}/click`).catch(() => {});
+        },
+        []
+    );
+
+    // Tracks the click then follows the link: the CTA's own link wins if present,
+    // else the ad's redirect_link, else its internal Page Builder landing page
+    // (/ads/:uuid) if one was authored. External links open in a new tab.
+    const goToCta = useCallback(
+        (ad, cta) => {
+            trackClick(ad?.advertisement_id);
+            const link = cta?.link || ad?.redirect_link || (ad?.landing_page ? `/ads/${ad.uuid}` : null);
+            if (!link) return;
+            if (/^https?:\/\//.test(link)) {
+                window.open(link, "_blank", "noopener,noreferrer");
+            } else {
+                navigate(link);
+            }
+        },
+        [navigate, trackClick]
+    );
+
+    // ─── CTA click guard ────────────────────────────────────────────────────
+    // Shared onCtaClick for every ad block (Banner/Hero/Sidebar/Popup). Counts
+    // clicks per advertisement for the browser session; once the limit is
+    // exceeded, hold the click behind a confirmation dialog instead of
+    // silently continuing.
+    const handleAdCtaClick = useCallback(
+        (ad, cta) => {
+            const id = ad?.advertisement_id;
+            if (!id) {
+                goToCta(ad, cta);
+                return;
+            }
+
+            const nextCount = (clickCounts[id] || 0) + 1;
+            setClickCounts((prev) => {
+                const next = { ...prev, [id]: nextCount };
+                sessionStorage.setItem(CLICK_STORAGE_KEY, JSON.stringify(next));
+                return next;
+            });
+
+            if (nextCount <= CLICK_LIMIT) {
+                goToCta(ad, cta);
+            } else {
+                setPendingClick({ ad, cta });
+            }
+        },
+        [clickCounts, goToCta]
+    );
+
+    const confirmPendingClick = () => {
+        if (pendingClick) goToCta(pendingClick.ad, pendingClick.cta);
+        setPendingClick(null);
+    };
+
+    return (
+        <ClientAdvertisementsContext.Provider value={{
+            advertisements,
+            loading,
+            getActiveAdvertisement,
+            getActiveAdvertisements,
+            adLists,
+            listLoading,
+            getActiveAdvertisementList,
+            trackClick,
+            handleAdCtaClick,
+        }}>
+            {children}
+
+            <ResponsiveModal
+                open={!!pendingClick}
+                onOpenChange={(open) => { if (!open) setPendingClick(null); }}
+                title="Continue to this ad?"
+                description="You've clicked this advertisement several times already. Confirm you'd like to keep visiting it."
+                footer={
+                    <>
+                        <Button variant="outline" onClick={() => setPendingClick(null)}>Cancel</Button>
+                        <Button onClick={confirmPendingClick}>Continue</Button>
+                    </>
+                }
+            />
+        </ClientAdvertisementsContext.Provider>
+    );
+}
diff --git a/apps/web/src/contexts/ClientCourseReadingProgressContext.jsx b/apps/web/src/contexts/ClientCourseReadingProgressContext.jsx
new file mode 100644
index 0000000..c83ff06
--- /dev/null
+++ b/apps/web/src/contexts/ClientCourseReadingProgressContext.jsx
@@ -0,0 +1,209 @@
+/***********************************************************************************************************************************************************************
+ * File Name    : ClientCourseReadingProgressContext.jsx
+ * Type         : Context / Provider
+ * Description  : Tracks a user's reading progress through a course (course → unit → lesson).
+ *
+ *                Progress is stored as a flat map for O(1) lookups:
+ *                  progressMap : { [reference_id (uuid)]: 'in_progress' | 'completed' }
+ *
+ *                Optimistic updates are applied immediately on UPSERT;
+ *                the map is reconciled with the server response for all three levels
+ *                (lesson / unit / course) after each call.
+ *
+ *                completedTasks is set when the server returns tasks whose all read
+ *                requirements are now satisfied — UnitList watches this for toasts.
+ *
+ *                Used by: UnitList.jsx (sidebar indicators + scroll-triggered completion)
+ ***********************************************************************************************************************************************************************/
+import { createContext, useCallback, useContext, useState } from 'react';
+import api from '@/utils/api.util';
+import { toast } from 'sonner';
+
+const CourseReadingProgressContext = createContext(null);
+
+export function useCourseReadingProgress() {
+    const ctx = useContext(CourseReadingProgressContext);
+    if (!ctx) throw new Error('useCourseReadingProgress must be used within a CourseReadingProgressProvider');
+    return ctx;
+}
+
+export function CourseReadingProgressProvider({ children }) {
+    // { [reference_id]: 'in_progress' | 'completed' }
+    const [progressMap,    setProgressMap]    = useState({});
+    const [summary,        setSummary]        = useState(null); // { lessons_total, lessons_completed, percent, status }
+    const [loading,        setLoading]        = useState(false);
+    // Tasks whose all read requirements just became complete — consumed by UnitList for toasts
+    const [completedTasks, setCompletedTasks] = useState([]);
+
+    // ─── Lookup helpers ───────────────────────────────────────────────────────
+
+    const isRead = useCallback(
+        (referenceId) => !!progressMap[referenceId],
+        [progressMap]
+    );
+
+    const isCompleted = useCallback(
+        (referenceId) => progressMap[referenceId] === 'completed',
+        [progressMap]
+    );
+
+    // ─── Fetch full progress snapshot ─────────────────────────────────────────
+
+    const fetchCourseProgress = useCallback(async (courseId) => {
+        setLoading(true);
+        try {
+            const { data } = await api.get(`/client/courses/${courseId}/progress`);
+            const rows = data.data ?? [];
+            setProgressMap(
+                Object.fromEntries(rows.map((r) => [r.reference_id, r.status]))
+            );
+            return rows;
+        } catch (err) {
+            toast(err?.response?.data?.message ?? 'Could not load course progress.');
+            return null;
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    // ─── Fetch compact progress summary (course-level % complete) ─────────────
+
+    const fetchCourseProgressSummary = useCallback(async (courseId) => {
+        try {
+            const { data } = await api.get(`/client/courses/${courseId}/progress/summary`);
+            const result = data.data ?? null;
+            setSummary(result);
+            return result;
+        } catch (err) {
+            console.error('[COURSE PROGRESS SUMMARY]', err);
+            return null;
+        }
+    }, []);
+
+    // ─── UPSERT lesson progress ───────────────────────────────────────────────
+
+    const upsertLessonProgress = useCallback(async (courseId, unitId, lessonId, lessonUuid, status) => {
+        // Optimistic update — lesson only
+        setProgressMap((prev) => ({ ...prev, [lessonUuid]: status }));
+
+        try {
+            const { data } = await api.post(
+                `/client/courses/${courseId}/units/${unitId}/lessons/${lessonId}/progress`,
+                { status }
+            );
+
+            const result = data.data ?? {};
+
+            // Reconcile all three levels from server
+            setProgressMap((prev) => {
+                const next = { ...prev };
+                if (result.lesson) next[result.lesson.reference_id] = result.lesson.status;
+                if (result.unit)   next[result.unit.reference_id]   = result.unit.status;
+                if (result.course) next[result.course.reference_id] = result.course.status;
+                return next;
+            });
+
+            // Signal any tasks that just had all read requirements completed
+            if (result.completed_tasks?.length) {
+                setCompletedTasks(result.completed_tasks);
+            }
+
+            return result;
+        } catch (err) {
+            // Rollback optimistic update
+            setProgressMap((prev) => {
+                const next = { ...prev };
+                delete next[lessonUuid];
+                return next;
+            });
+            toast(err?.response?.data?.message ?? 'Could not update progress.');
+            return null;
+        }
+    }, []);
+
+    // ─── Watch-percent progress (video/audio) ────────────────────────────────
+
+    const upsertWatchProgress = useCallback(async (courseId, unitId, lessonId, percent, meta = {}) => {
+        try {
+            const { data } = await api.post(
+                `/client/courses/${courseId}/units/${unitId}/lessons/${lessonId}/watch-progress`,
+                { percent, block_id: meta.blockId ?? null, block_type: meta.blockType ?? null }
+            );
+            const result = data.data ?? {};
+            if (result.cascade) {
+                setProgressMap((prev) => {
+                    const next = { ...prev };
+                    if (result.cascade.lesson) next[result.cascade.lesson.reference_id] = result.cascade.lesson.status;
+                    if (result.cascade.unit)   next[result.cascade.unit.reference_id]   = result.cascade.unit.status;
+                    if (result.cascade.course) next[result.cascade.course.reference_id] = result.cascade.course.status;
+                    return next;
+                });
+                if (result.cascade.completed_tasks?.length) {
+                    setCompletedTasks(result.cascade.completed_tasks);
+                }
+            }
+            return result;
+        } catch (err) {
+            console.error('[WATCH PROGRESS]', err);
+            return null;
+        }
+    }, []);
+
+    // ─── Manual "mark complete" ───────────────────────────────────────────────
+
+    const markComplete = useCallback(async (courseId, unitId, lessonId) => {
+        try {
+            const { data } = await api.post(
+                `/client/courses/${courseId}/units/${unitId}/lessons/${lessonId}/mark-complete`
+            );
+            const result = data.data ?? {};
+            setProgressMap((prev) => {
+                const next = { ...prev };
+                if (result.lesson) next[result.lesson.reference_id] = result.lesson.status;
+                if (result.unit)   next[result.unit.reference_id]   = result.unit.status;
+                if (result.course) next[result.course.reference_id] = result.course.status;
+                return next;
+            });
+            if (result.completed_tasks?.length) {
+                setCompletedTasks(result.completed_tasks);
+            }
+            toast('Lesson marked complete.');
+            return result;
+        } catch (err) {
+            toast(err?.response?.data?.message ?? 'Could not mark lesson complete.');
+            return null;
+        }
+    }, []);
+
+    // ─── Clear completed tasks signal after consumption ───────────────────────
+
+    const clearCompletedTasks = useCallback(() => setCompletedTasks([]), []);
+
+    // ─── Reset — call when leaving a course ──────────────────────────────────
+
+    const resetProgress = useCallback(() => {
+        setProgressMap({});
+        setSummary(null);
+        setCompletedTasks([]);
+    }, []);
+
+    return (
+        <CourseReadingProgressContext.Provider value={{
+            progressMap,
+            summary,
+            loading,
+            isRead,
+            isCompleted,
+            fetchCourseProgress,
+            fetchCourseProgressSummary,
+            upsertLessonProgress,
+            upsertWatchProgress,
+            markComplete,
+            completedTasks,
+            clearCompletedTasks,
+            resetProgress,
+        }}>
+            {children}
+        </CourseReadingProgressContext.Provider>
+    );
+}
diff --git a/apps/web/src/contexts/ClientCoursesContext.jsx b/apps/web/src/contexts/ClientCoursesContext.jsx
new file mode 100644
index 0000000..1c3168b
--- /dev/null
+++ b/apps/web/src/contexts/ClientCoursesContext.jsx
@@ -0,0 +1,256 @@
+import { createContext, useCallback, useContext, useState } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+import { usePurchases } from "@/hooks/usePurchases";
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+
+const ClientCoursesContext = createContext(null);
+
+// ─── Provider ─────────────────────────────────────────────────────────────────
+
+export function ClientCoursesProvider({ children }) {
+  // ── List state
+  const [courses, setCourses] = useState([]);
+  const [coursesLoading, setCoursesLoading] = useState(false);
+
+  // ── Detail state
+  const [course, setCourse] = useState(null);
+  const [courseLoading, setCourseLoading] = useState(false);
+  const [courseBlocked, setCourseBlocked] = useState(false); // true = 403, prompt upgrade
+
+  // ── Unit state
+  const [unit, setUnit] = useState(null);
+  const [unitLoading, setUnitLoading] = useState(false);
+
+  // ── Lesson state
+  const [lesson, setLesson] = useState(null);
+  const [lessonLoading, setLessonLoading] = useState(false);
+
+  // ── Quiz state
+  const [quiz, setQuiz] = useState(null);
+  const [quizLoading, setQuizLoading] = useState(false);
+
+  // ── Assessment state
+  const [assessment, setAssessment] = useState(null);
+  const [assessmentLoading, setAssessmentLoading] = useState(false);
+
+  // ─── Actions ────────────────────────────────────────────────────────────────
+
+  const getCourses = useCallback(async () => {
+    setCoursesLoading(true);
+    try {
+      const { data } = await api.get("/client/courses");
+      setCourses(data.data ?? []);
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not load courses.");
+    } finally {
+      setCoursesLoading(false);
+    }
+  }, []);
+
+  const getCourse = useCallback(async (courseId) => {
+    setCourseLoading(true);
+    setCourseBlocked(false);
+    try {
+      const { data } = await api.get(`/client/courses/${courseId}`);
+      setCourse(data.data ?? null);
+    } catch (err) {
+      if (err?.response?.status === 403) {
+        setCourseBlocked(true); // let the UI show an upgrade prompt
+        setCourse(err.response.data?.item ?? null); // trimmed shell — title/description/etc.
+      } else {
+        toast(err?.response?.data?.message ?? "Could not load course.");
+      }
+    } finally {
+      setCourseLoading(false);
+    }
+  }, []);
+
+  const getUnit = useCallback(async (courseId, unitId) => {
+    setUnitLoading(true);
+    try {
+      const { data } = await api.get(`/client/courses/${courseId}/units/${unitId}`);
+      setUnit(data.data ?? null);
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not load unit.");
+    } finally {
+      setUnitLoading(false);
+    }
+  }, []);
+
+  const getLesson = useCallback(async (courseId, unitId, lessonId) => {
+    setLessonLoading(true);
+    try {
+      const { data } = await api.get(
+        `/client/courses/${courseId}/units/${unitId}/lessons/${lessonId}`
+      );
+      setLesson(data.data ?? null);
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not load lesson.");
+    } finally {
+      setLessonLoading(false);
+    }
+  }, []);
+
+  const getUnitQuiz = useCallback(async (courseId, unitId) => {
+    setQuizLoading(true);
+    try {
+      const { data } = await api.get(
+        `/client/courses/${courseId}/units/${unitId}/quiz`
+      );
+      setQuiz(data.data ?? null);
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not load quiz.");
+    } finally {
+      setQuizLoading(false);
+    }
+  }, []);
+
+  const getCourseAssessment = useCallback(async (courseId) => {
+    setAssessmentLoading(true);
+    try {
+      const { data } = await api.get(`/client/courses/${courseId}/assessment`);
+      setAssessment(data.data ?? null);
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not load assessment.");
+    } finally {
+      setAssessmentLoading(false);
+    }
+  }, []);
+
+  const submitUnitQuiz = useCallback(async (courseId, unitId, quizId, answers) => {
+    try {
+      const { data } = await api.post(
+        `/client/courses/${courseId}/units/${unitId}/quiz/${quizId}/submit`,
+        { answers }
+      );
+      return data.data ?? null;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not submit quiz.");
+      return null;
+    }
+  }, []);
+
+  const startCourseAssessment = useCallback(async (courseId, assessmentId) => {
+    try {
+      const { data } = await api.post(`/client/courses/${courseId}/assessment/${assessmentId}/start`);
+      return data.data ?? null;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not start assessment.");
+      return null;
+    }
+  }, []);
+
+  const saveDraft = useCallback(async (courseId, assessmentId, answers) => {
+    try {
+      await api.patch(`/client/courses/${courseId}/assessment/${assessmentId}/draft`, { answers });
+    } catch { /* silent — draft saves are best-effort */ }
+  }, []);
+
+  const saveQuizDraft = useCallback(async (courseId, unitId, quizId, answers) => {
+    try {
+      await api.patch(`/client/courses/${courseId}/units/${unitId}/quiz/${quizId}/draft`, { answers });
+    } catch { /* silent — draft saves are best-effort */ }
+  }, []);
+
+  const refreshAssessmentSession = useCallback(async (courseId, assessmentId) => {
+    try {
+      const { data } = await api.get(`/client/courses/${courseId}/assessment/${assessmentId}/session`);
+      return data.data ?? null;
+    } catch { return null; }
+  }, []);
+
+  const submitCourseAssessment = useCallback(async (courseId, assessmentId, answers, sessionId) => {
+    try {
+      const { data } = await api.post(
+        `/client/courses/${courseId}/assessment/${assessmentId}/submit`,
+        { answers, ...(sessionId ? { session_id: sessionId } : {}) }
+      );
+      return data.data ?? null;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not submit assessment.");
+      return null;
+    }
+  }, []);
+
+  // ─── Course Purchases ───────────────────────────────────────────────────────
+
+  const [purchases,        setPurchases]        = useState([]);
+  const [purchasesLoading, setPurchasesLoading] = useState(false);
+  const { purchaseLoading, createOrder: createCourseOrder, captureOrder: captureCourseOrder, cancelOrder: cancelCourseOrder } = usePurchases();
+
+  const getMyPurchases = useCallback(async () => {
+    setPurchasesLoading(true);
+    try {
+      const { data } = await api.get("/client/course-purchases");
+      setPurchases(data.data ?? []);
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not load purchases.");
+    } finally { setPurchasesLoading(false); }
+  }, []);
+
+  // ─── Reset helpers ──────────────────────────────────────────────────────────
+
+  const resetCourse = useCallback(() => { setCourse(null); setCourseBlocked(false); }, []);
+  const resetUnit = useCallback(() => setUnit(null), []);
+  const resetLesson = useCallback(() => setLesson(null), []);
+  const resetQuiz = useCallback(() => setQuiz(null), []);
+  const resetAssessment = useCallback(() => setAssessment(null), []);
+
+  // ─── Value ──────────────────────────────────────────────────────────────────
+
+  const value = {
+    // state
+    courses, coursesLoading,
+    course, courseLoading, courseBlocked,
+    unit, unitLoading,
+    lesson, lessonLoading,
+    quiz, quizLoading,
+    assessment, assessmentLoading,
+
+    // actions
+    getCourses,
+    getCourse,
+    getUnit,
+    getLesson,
+    getUnitQuiz,
+    getCourseAssessment,
+    startCourseAssessment,
+    saveDraft,
+    saveQuizDraft,
+    refreshAssessmentSession,
+    submitUnitQuiz,
+    submitCourseAssessment,
+
+    // purchases
+    purchases, purchasesLoading, purchaseLoading,
+    getMyPurchases,
+    createCourseOrder,
+    captureCourseOrder,
+    cancelCourseOrder,
+
+    // resets
+    resetCourse,
+    resetUnit,
+    resetLesson,
+    resetQuiz,
+    resetAssessment,
+  };
+
+  return (
+    <ClientCoursesContext.Provider value={value}>
+      {children}
+    </ClientCoursesContext.Provider>
+  );
+}
+
+// ─── Hook ─────────────────────────────────────────────────────────────────────
+
+export function useClientCourses() {
+  const ctx = useContext(ClientCoursesContext);
+  if (!ctx) throw new Error("useClientCourses must be used within ClientCoursesProvider");
+  return ctx;
+}
+
+export default ClientCoursesContext;
\ No newline at end of file
diff --git a/apps/web/src/contexts/ClientGroupContext.jsx b/apps/web/src/contexts/ClientGroupContext.jsx
new file mode 100644
index 0000000..0ae3724
--- /dev/null
+++ b/apps/web/src/contexts/ClientGroupContext.jsx
@@ -0,0 +1,75 @@
+/***********************************************************************************************************************************************************************
+ * File Name    : GroupContext.jsx
+ * Type         : Context / Provider
+ * Description  : Client group context.
+ *                Covers: fetching the current user's groups and a single group detail.
+ *                Used by: GroupList.jsx
+ ***********************************************************************************************************************************************************************/
+import { createContext, useCallback, useContext, useState } from 'react';
+import api from '@/utils/api.util';
+import { toast } from 'sonner';
+
+const BASE = '/client/groups';
+
+const GroupContext = createContext(null);
+
+export function useGroup() {
+    const ctx = useContext(GroupContext);
+    if (!ctx) throw new Error('useGroup must be used within a GroupProvider');
+    return ctx;
+}
+
+export function GroupProvider({ children }) {
+    const [groups,  setGroups]  = useState([]);
+    const [group,   setGroup]   = useState(null);
+    const [loading, setLoading] = useState(false);
+
+    const request = useCallback(async (fn) => {
+        setLoading(true);
+        try {
+            return await fn();
+        } catch (err) {
+            const message = err?.response?.data?.message ?? 'Something went wrong.';
+            toast(message);
+            return null;
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    // ─── GET MY GROUPS ────────────────────────────────────────────────────────
+    // GET /client/groups
+    const fetchGroups = useCallback(
+        () =>
+            request(async () => {
+                const res = await api.get(BASE);
+                const data = res.data?.data ?? [];
+                setGroups(data);
+                return data;
+            }),
+        [request]
+    );
+
+    // ─── GET ONE GROUP ────────────────────────────────────────────────────────
+    // GET /client/groups/:groupId
+    const fetchGroup = useCallback(
+        (groupId) =>
+            request(async () => {
+                const res = await api.get(`${BASE}/${groupId}`);
+                const data = res.data?.data ?? null;
+                setGroup(data);
+                return data;
+            }),
+        [request]
+    );
+
+    return (
+        <GroupContext.Provider value={{
+            groups, group,
+            loading,
+            fetchGroups, fetchGroup,
+        }}>
+            {children}
+        </GroupContext.Provider>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/contexts/ClientLibraryContext.jsx b/apps/web/src/contexts/ClientLibraryContext.jsx
new file mode 100644
index 0000000..fcc124b
--- /dev/null
+++ b/apps/web/src/contexts/ClientLibraryContext.jsx
@@ -0,0 +1,267 @@
+// ─── ClientLibraryContext.jsx ───────────────────────────────────────────────
+// Standalone Unit / Lesson browsing (junction revamp). Units run independently
+// of Courses — this context drives the /units grid, /units/:uuid detail page,
+// and /units/:uuid/read reader.
+
+import { createContext, useCallback, useContext, useState } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const ClientLibraryContext = createContext(null);
+
+export function useLibrary() {
+  const ctx = useContext(ClientLibraryContext);
+  if (!ctx) throw new Error("useLibrary must be used within a ClientLibraryProvider");
+  return ctx;
+}
+
+export function ClientLibraryProvider({ children }) {
+  // ── List state
+  const [units, setUnits] = useState([]);
+  const [unitsLoading, setUnitsLoading] = useState(false);
+  const [lessons, setLessons] = useState([]);
+  const [lessonsLoading, setLessonsLoading] = useState(false);
+
+  // ── Detail state — GET /client/units/:uuid/lessons returns unit + lessons + quiz in one call
+  const [unitDetail, setUnitDetail] = useState(null);
+  const [unitDetailLoading, setUnitDetailLoading] = useState(false);
+  const [unitBlocked, setUnitBlocked] = useState(false);
+  const [unitBlockedInfo, setUnitBlockedInfo] = useState(null); // { message, course }
+
+  // ── Lesson state (standalone reader)
+  const [lesson, setLesson] = useState(null);
+  const [lessonLoading, setLessonLoading] = useState(false);
+
+  // ── Quiz state
+  const [quiz, setQuiz] = useState(null);
+  const [quizLoading, setQuizLoading] = useState(false);
+
+  // ─── Actions ────────────────────────────────────────────────────────────
+
+  const getUnits = useCallback(async () => {
+    setUnitsLoading(true);
+    try {
+      const { data } = await api.get("/client/units");
+      setUnits(data.data ?? []);
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not load units.");
+    } finally {
+      setUnitsLoading(false);
+    }
+  }, []);
+
+  const getLessons = useCallback(async () => {
+    setLessonsLoading(true);
+    try {
+      const { data } = await api.get("/client/lessons");
+      setLessons(data.data ?? []);
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not load lessons.");
+    } finally {
+      setLessonsLoading(false);
+    }
+  }, []);
+
+  const getUnitDetail = useCallback(async (uuid) => {
+    setUnitDetailLoading(true);
+    setUnitBlocked(false);
+    setUnitBlockedInfo(null);
+    try {
+      const { data } = await api.get(`/client/units/${uuid}/lessons`);
+      setUnitDetail(data.data ?? null);
+    } catch (err) {
+      if (err?.response?.status === 403) {
+        setUnitBlocked(true);
+        setUnitBlockedInfo(err.response.data ?? null);
+      } else {
+        toast(err?.response?.data?.message ?? "Could not load unit.");
+      }
+    } finally {
+      setUnitDetailLoading(false);
+    }
+  }, []);
+
+  const getLesson = useCallback(async (uuid) => {
+    setLessonLoading(true);
+    try {
+      const { data } = await api.get(`/client/lessons/${uuid}`);
+      setLesson(data.data ?? null);
+    } catch (err) {
+      if (err?.response?.status === 403) {
+        setUnitBlocked(true);
+        setUnitBlockedInfo(err.response.data ?? null);
+      } else {
+        toast(err?.response?.data?.message ?? "Could not load lesson.");
+      }
+    } finally {
+      setLessonLoading(false);
+    }
+  }, []);
+
+  const getUnitQuiz = useCallback(async (uuid) => {
+    setQuizLoading(true);
+    try {
+      const { data } = await api.get(`/client/units/${uuid}/quiz`);
+      setQuiz(data.data ?? null);
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not load quiz.");
+    } finally {
+      setQuizLoading(false);
+    }
+  }, []);
+
+  const submitUnitQuiz = useCallback(async (uuid, quizId, answers) => {
+    try {
+      const { data } = await api.post(`/client/units/${uuid}/quiz/${quizId}/submit`, { answers });
+      return data.data ?? null;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not submit quiz.");
+      return null;
+    }
+  }, []);
+
+  const saveUnitQuizDraft = useCallback(async (uuid, quizId, answers) => {
+    try {
+      await api.patch(`/client/units/${uuid}/quiz/${quizId}/draft`, { answers });
+    } catch { /* silent — draft saves are best-effort */ }
+  }, []);
+
+  // Writes lesson progress, then locally patches unitDetail so the reader/detail
+  // page updates without a full refetch (matched by numeric lesson_id — the
+  // response is keyed by id, not uuid).
+  const upsertLessonProgress = useCallback(async (lessonUuid, status, unitUuid) => {
+    try {
+      const { data } = await api.post(`/client/lessons/${lessonUuid}/progress`, {
+        status,
+        ...(unitUuid ? { unit_uuid: unitUuid } : {}),
+      });
+      const result = data.data ?? null;
+
+      // Trust the server's evaluated status for both lesson and unit — no local
+      // re-derivation (previously `lessons.every(status === 'completed')` here,
+      // which drifted from the consolidated evaluator once per-lesson completion
+      // requirements could be configured; the server already ran that same
+      // evaluator via recomputeCascade and returned the authoritative result).
+      setUnitDetail((prev) => {
+        if (!prev || !result?.lesson) return prev;
+        const nextLessons = prev.lessons.map((l) =>
+          l.lesson_id === result.lesson.lesson_id
+            ? { ...l, status: result.lesson.status, completed_at: status === "completed" ? new Date().toISOString() : l.completed_at }
+            : l
+        );
+        const is_completed = result.unit ? result.unit.status === "completed" : prev.is_completed;
+        return { ...prev, lessons: nextLessons, is_completed };
+      });
+
+      return result;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not update progress.");
+      return null;
+    }
+  }, []);
+
+  // Reports watch/listen playback progress for watch_percent / watch_video / listen_audio
+  // completion requirements — safe to call unconditionally for any standalone lesson (the
+  // backend no-ops when none of those types is configured on it). Fires frequently while
+  // playback is running (throttled ~3s by the block itself), so failures are swallowed
+  // rather than toasted — the next tick, or onEnded's final 100% call, catches up.
+  const upsertWatchProgress = useCallback(async (lessonUuid, unitUuid, percent, meta = {}) => {
+    try {
+      const { data } = await api.post(`/client/lessons/${lessonUuid}/watch-progress`, {
+        percent,
+        ...(unitUuid ? { unit_uuid: unitUuid } : {}),
+        ...(meta.blockId   ? { block_id: meta.blockId }     : {}),
+        ...(meta.blockType ? { block_type: meta.blockType } : {}),
+      });
+      const result = data.data ?? null;
+      const cascadeLesson = result?.cascade?.lesson;
+      const cascadeUnit   = result?.cascade?.unit;
+
+      setUnitDetail((prev) => {
+        if (!prev || !cascadeLesson) return prev;
+        const nextLessons = prev.lessons.map((l) =>
+          l.lesson_id === cascadeLesson.lesson_id
+            ? { ...l, status: cascadeLesson.status }
+            : l
+        );
+        const is_completed = cascadeUnit ? cascadeUnit.status === "completed" : prev.is_completed;
+        return { ...prev, lessons: nextLessons, is_completed };
+      });
+
+      return result;
+    } catch {
+      return null;
+    }
+  }, []);
+
+  // Self-report completion for the manual_complete completion requirement type —
+  // mirrors upsertLessonProgress's result shape (result.lesson/result.unit, not the
+  // result.cascade wrapper upsertWatchProgress gets from recordWatchProgress).
+  const markComplete = useCallback(async (lessonUuid, unitUuid) => {
+    try {
+      const { data } = await api.post(`/client/lessons/${lessonUuid}/mark-complete`, {
+        ...(unitUuid ? { unit_uuid: unitUuid } : {}),
+      });
+      const result = data.data ?? null;
+
+      setUnitDetail((prev) => {
+        if (!prev || !result?.lesson) return prev;
+        const nextLessons = prev.lessons.map((l) =>
+          l.lesson_id === result.lesson.lesson_id
+            ? { ...l, status: result.lesson.status, completed_at: new Date().toISOString() }
+            : l
+        );
+        const is_completed = result.unit ? result.unit.status === "completed" : prev.is_completed;
+        return { ...prev, lessons: nextLessons, is_completed };
+      });
+
+      return result;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not mark lesson complete.");
+      return null;
+    }
+  }, []);
+
+  // ─── Resets ─────────────────────────────────────────────────────────────
+
+  const resetUnitDetail = useCallback(() => {
+    setUnitDetail(null);
+    setUnitBlocked(false);
+    setUnitBlockedInfo(null);
+  }, []);
+  const resetLesson = useCallback(() => setLesson(null), []);
+  const resetQuiz = useCallback(() => setQuiz(null), []);
+
+  // ─── Value ──────────────────────────────────────────────────────────────
+
+  const value = {
+    units, unitsLoading,
+    lessons, lessonsLoading,
+    unitDetail, unitDetailLoading, unitBlocked, unitBlockedInfo,
+    lesson, lessonLoading,
+    quiz, quizLoading,
+
+    getUnits,
+    getLessons,
+    getUnitDetail,
+    getLesson,
+    getUnitQuiz,
+    submitUnitQuiz,
+    saveUnitQuizDraft,
+    upsertLessonProgress,
+    upsertWatchProgress,
+    markComplete,
+
+    resetUnitDetail,
+    resetLesson,
+    resetQuiz,
+  };
+
+  return (
+    <ClientLibraryContext.Provider value={value}>
+      {children}
+    </ClientLibraryContext.Provider>
+  );
+}
+
+export default ClientLibraryContext;
diff --git a/apps/web/src/contexts/ClientNotificationContext.jsx b/apps/web/src/contexts/ClientNotificationContext.jsx
new file mode 100644
index 0000000..bcbd1a2
--- /dev/null
+++ b/apps/web/src/contexts/ClientNotificationContext.jsx
@@ -0,0 +1,145 @@
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import api from "@/utils/api.util";
+
+const ClientNotificationContext = createContext(null);
+
+const POLL_INTERVAL_NORMAL = 60_000;
+const POLL_INTERVAL_FAST   = 10_000;
+
+export function useClientNotifications() {
+    const ctx = useContext(ClientNotificationContext);
+    if (!ctx) throw new Error("useClientNotifications must be used within ClientNotificationProvider");
+    return ctx;
+}
+
+const DEFAULT_PAGINATION = { page: 1, limit: 10, pages: 1, total: 0 };
+
+export function ClientNotificationProvider({ children }) {
+    const [notifications, setNotifications] = useState([]);
+    const [unseenCount, setUnseenCount]     = useState(0);
+    const [stickyAnnouncements, setStickyAnnouncements] = useState([]);
+    const [loading, setLoading]             = useState(false);
+    const [pagination, setPagination]       = useState(DEFAULT_PAGINATION);
+    const intervalRef   = useRef(null);
+    const pollSpeedRef  = useRef(POLL_INTERVAL_NORMAL);
+
+    const fetchUnseen = useCallback(async () => {
+        try {
+            const res = await api.get("/client/notifications/unseen");
+            setUnseenCount(res.data?.data?.count ?? 0);
+        } catch {
+            // silent — badge stays at last known count
+        }
+    }, []);
+
+    const fetchStickyAnnouncement = useCallback(async () => {
+        try {
+            const res = await api.get("/client/notifications/sticky");
+            setStickyAnnouncements(res.data?.data?.announcements ?? []);
+        } catch {
+            // silent
+        }
+    }, []);
+
+    const poll = useCallback(async () => {
+        await Promise.allSettled([fetchUnseen(), fetchStickyAnnouncement()]);
+    }, [fetchUnseen, fetchStickyAnnouncement]);
+
+    const fetchNotifications = useCallback(async (page = 1, limit = 10) => {
+        setLoading(true);
+        try {
+            const res  = await api.get(`/client/notifications?limit=${limit}&page=${page}`);
+            const rows = res.data?.data?.notifications ?? [];
+            const pag  = res.data?.data?.pagination ?? { page, limit, pages: 1, total: rows.length };
+            setNotifications(rows);
+            setPagination({ ...pag, pages: Math.max(1, pag.pages) });
+        } catch {
+            // silent
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    const clearAll = useCallback(async () => {
+        try {
+            await api.delete("/client/notifications/clear-all");
+            setNotifications([]);
+            setUnseenCount(0);
+            setPagination(DEFAULT_PAGINATION);
+            setStickyAnnouncements([]);
+            return true;
+        } catch {
+            return false;
+        }
+    }, []);
+
+    const markSeen = useCallback(async (id) => {
+        try {
+            await api.patch(`/client/notifications/${id}/seen`);
+            setNotifications(prev =>
+                prev.map(n => n.notification_id === id ? { ...n, seen: true } : n)
+            );
+
+            setStickyAnnouncements(prev => prev.filter(a => a.notification_id !== id));
+
+            // Re-sync badge + sticky immediately (handles cases where the marked
+            // row isn't present in the currently loaded notifications page).
+            await Promise.allSettled([fetchUnseen(), fetchStickyAnnouncement()]);
+        } catch {
+            // silent
+        }
+    }, [fetchUnseen, fetchStickyAnnouncement]);
+
+    const markAllSeen = useCallback(async () => {
+        try {
+            await api.patch("/client/notifications/seen-all");
+            setNotifications(prev => prev.map(n => ({ ...n, seen: true })));
+            setUnseenCount(0);
+            setStickyAnnouncements([]);
+        } catch {
+            // silent
+        }
+    }, []);
+
+    const restartPoll = useCallback((interval) => {
+        clearInterval(intervalRef.current);
+        intervalRef.current = setInterval(poll, interval);
+    }, [poll]);
+
+    // Speed up polling while a student is mid-assessment; restore when done
+    const accelerate = useCallback(() => {
+        if (pollSpeedRef.current === POLL_INTERVAL_FAST) return;
+        pollSpeedRef.current = POLL_INTERVAL_FAST;
+        restartPoll(POLL_INTERVAL_FAST);
+    }, [restartPoll]);
+
+    const decelerate = useCallback(() => {
+        if (pollSpeedRef.current === POLL_INTERVAL_NORMAL) return;
+        pollSpeedRef.current = POLL_INTERVAL_NORMAL;
+        restartPoll(POLL_INTERVAL_NORMAL);
+    }, [restartPoll]);
+
+    useEffect(() => {
+        poll();
+        intervalRef.current = setInterval(poll, POLL_INTERVAL_NORMAL);
+        return () => clearInterval(intervalRef.current);
+    }, [poll]);
+
+    return (
+        <ClientNotificationContext.Provider value={{
+            notifications,
+            unseenCount,
+            stickyAnnouncements,
+            loading,
+            pagination,
+            fetchNotifications,
+            markSeen,
+            markAllSeen,
+            clearAll,
+            accelerate,
+            decelerate,
+        }}>
+            {children}
+        </ClientNotificationContext.Provider>
+    );
+}
diff --git a/apps/web/src/contexts/ClientTaskContext.jsx b/apps/web/src/contexts/ClientTaskContext.jsx
new file mode 100644
index 0000000..7940eb6
--- /dev/null
+++ b/apps/web/src/contexts/ClientTaskContext.jsx
@@ -0,0 +1,188 @@
+/***********************************************************************************************************************************************************************
+ * File Name    : TaskContext.jsx
+ * Type         : Context / Provider
+ * Description  : Client task context.
+ *                Covers: task lists for a group (with status filter), single task list,
+ *                        single task with requirements + latest completion,
+ *                        completion history, and task completion (submit).
+ *                Used by: GroupList.jsx (task lists), ViewTaskDetails.jsx (task + completions)
+ ***********************************************************************************************************************************************************************/
+import { createContext, useCallback, useContext, useState } from 'react';
+import api from '@/utils/api.util';
+import { toast } from 'sonner';
+
+const BASE = '/client/groups';
+
+const TaskContext = createContext(null);
+
+export function useTask() {
+    const ctx = useContext(TaskContext);
+    if (!ctx) throw new Error('useTask must be used within a TaskProvider');
+    return ctx;
+}
+
+export function TaskProvider({ children }) {
+    // ── Task List state ───────────────────────────────────────────────────────
+    const [taskLists, setTaskLists] = useState([]);
+    const [taskList, setTaskList] = useState(null);
+
+    // ── Task state ────────────────────────────────────────────────────────────
+    const [task, setTask] = useState(null);
+
+    // ── Completion state ──────────────────────────────────────────────────────
+    // latest_completion is embedded in task from getTask — kept separately
+    // so the submit action can update it without refetching the whole task.
+    const [completions, setCompletions] = useState([]);  // full history
+    const [latestCompletion, setLatestCompletion] = useState(null);
+
+    // ── Shared ────────────────────────────────────────────────────────────────
+    const [loading, setLoading] = useState(false);
+    const [completionLoading, setCompletionLoading] = useState(false);
+
+    const request = useCallback(async (fn) => {
+        setLoading(true);
+        try {
+            return await fn();
+        } catch (err) {
+            const message = err?.response?.data?.message ?? 'Something went wrong.';
+            toast(message);
+            return null;
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    const completionRequest = useCallback(async (fn) => {
+        setCompletionLoading(true);
+        try {
+            return await fn();
+        } catch (err) {
+            const message = err?.response?.data?.message ?? 'Something went wrong.';
+            toast(message);
+            return null;
+        } finally {
+            setCompletionLoading(false);
+        }
+    }, []);
+
+    // ══════════════════════════════════════════════════════════════════════════
+    // TASK LISTS
+    // ══════════════════════════════════════════════════════════════════════════
+
+    // ─── GET TASK LISTS FOR GROUP ─────────────────────────────────────────────
+    // GET /client/groups/:groupId/task-lists?status=ongoing|done|overdue
+    const fetchTaskLists = useCallback(
+        (groupId, { status } = {}) =>
+            request(async () => {
+                const res = await api.get(`${BASE}/${groupId}/task-lists`, {
+                    params: status ? { status } : {},
+                });
+                const data = res.data?.data ?? [];
+                setTaskLists(data);
+                return data;
+            }),
+        [request]
+    );
+
+    // ─────────────────────────────────────────────────────────────────────────────
+    // PATCH: fetchTaskList in TaskContext.jsx (client) — add params support
+    // ─────────────────────────────────────────────────────────────────────────────
+
+    const fetchTaskList = useCallback(
+        (groupId, taskListId, params = {}) =>
+            request(async () => {
+                const res = await api.get(`${BASE}/${groupId}/task-lists/${taskListId}`, { params });
+                const data = res.data?.data ?? null;
+                setTaskList(data);
+                return data;
+            }),
+        [request]
+    );
+
+    // ══════════════════════════════════════════════════════════════════════════
+    // TASKS
+    // ══════════════════════════════════════════════════════════════════════════
+
+    // ─── GET ONE TASK ─────────────────────────────────────────────────────────
+    // GET /client/groups/:groupId/task-lists/:taskListId/tasks/:taskId
+    // Response includes requirements[] and latest_completion
+    const fetchTask = useCallback(
+        (groupId, taskListId, taskId) =>
+            request(async () => {
+                const res = await api.get(
+                    `${BASE}/${groupId}/task-lists/${taskListId}/tasks/${taskId}`
+                );
+                const data = res.data?.data ?? null;
+                setTask(data);
+                // Seed latest completion from the embedded payload
+                if (data?.latest_completion !== undefined) {
+                    setLatestCompletion(data.latest_completion);
+                }
+                return data;
+            }),
+        [request]
+    );
+
+    // ══════════════════════════════════════════════════════════════════════════
+    // COMPLETIONS
+    // ══════════════════════════════════════════════════════════════════════════
+
+    // ─── GET MY COMPLETION HISTORY ────────────────────────────────────────────
+    // GET /client/groups/:groupId/task-lists/:taskListId/tasks/:taskId/completions
+    const fetchCompletions = useCallback(
+        (groupId, taskListId, taskId) =>
+            completionRequest(async () => {
+                const res = await api.get(
+                    `${BASE}/${groupId}/task-lists/${taskListId}/tasks/${taskId}/completions`
+                );
+                const data = res.data?.data ?? [];
+                setCompletions(data);
+                // Keep latest in sync
+                if (data.length) setLatestCompletion(data[0]);
+                return data;
+            }),
+        [completionRequest]
+    );
+
+    // ─── COMPLETE TASK (SUBMIT) ───────────────────────────────────────────────
+    // POST /client/groups/:groupId/task-lists/:taskListId/tasks/:taskId/completions
+    // Body: { note?: string, files: [{ file_url, file_name, file_size?, mime_type? }] }
+    const completeTask = useCallback(
+        (groupId, taskListId, taskId, payload) =>
+            completionRequest(async () => {
+                const res = await api.post(
+                    `${BASE}/${groupId}/task-lists/${taskListId}/tasks/${taskId}/completions`,
+                    payload
+                );
+                const data = res.data?.data ?? null;
+                toast('Task submitted successfully.');
+                // Immediately update latest completion so UI reflects the new state
+                setLatestCompletion(data);
+                // Prepend to history if it's already loaded
+                setCompletions((prev) => (prev.length ? [data, ...prev] : prev));
+                return data;
+            }),
+        [completionRequest]
+    );
+
+    return (
+        <TaskContext.Provider value={{
+            // ── State ─────────────────────────────────────────────────────────
+            taskLists, taskList,
+            task,
+            completions, latestCompletion,
+            loading, completionLoading,
+
+            // ── Task List actions ─────────────────────────────────────────────
+            fetchTaskLists, fetchTaskList,
+
+            // ── Task actions ──────────────────────────────────────────────────
+            fetchTask,
+
+            // ── Completion actions ────────────────────────────────────────────
+            fetchCompletions, completeTask,
+        }}>
+            {children}
+        </TaskContext.Provider>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/contexts/ClientTaskProgressContext.jsx b/apps/web/src/contexts/ClientTaskProgressContext.jsx
new file mode 100644
index 0000000..3fd06f6
--- /dev/null
+++ b/apps/web/src/contexts/ClientTaskProgressContext.jsx
@@ -0,0 +1,271 @@
+/***********************************************************************************************************************************************************************
+ * File Name    : TaskProgressContext.jsx
+ * Type         : Context / Provider
+ * Description  : Client task progress context.
+ *                Covers: fetching the full progress snapshot for a task,
+ *                        UPSERT link visits, and UPSERT lesson/unit/course progress.
+ *
+ *                Progress is stored locally as two maps for O(1) lookups by the blocks:
+ *                  visitedMap  : { [requirement_id]: visited_at }
+ *                  progressMap : { [`${requirement_id}:${reference_id}`]: { completed, completed_at } }
+ *
+ *                Used by: ViewTaskDetails.jsx, ViewRequirement.jsx,
+ *                         VisitLink block, ReadCourse block, ReadUnit block, ReadLesson block
+ ***********************************************************************************************************************************************************************/
+import { createContext, useCallback, useContext, useState } from 'react';
+import api from '@/utils/api.util';
+import { toast } from 'sonner';
+
+const BASE = '/client/groups';
+
+const TaskProgressContext = createContext(null);
+
+export function useTaskProgress() {
+    const ctx = useContext(TaskProgressContext);
+    if (!ctx) throw new Error('useTaskProgress must be used within a TaskProgressProvider');
+    return ctx;
+}
+
+export function TaskProgressProvider({ children }) {
+    // ── Raw arrays from API ───────────────────────────────────────────────────
+    const [linkVisits, setLinkVisits] = useState([]);
+    const [progress,   setProgress]   = useState([]);
+
+    // ── Derived lookup maps (rebuilt on every fetch/upsert) ───────────────────
+    // visitedMap  : { [requirement_id]: visited_at }
+    const [visitedMap,  setVisitedMap]  = useState({});
+    // progressMap : { [`${requirement_id}:${reference_id}`]: { completed, completed_at } }
+    const [progressMap, setProgressMap] = useState({});
+
+    const [loading, setLoading] = useState(false);
+
+    const request = useCallback(async (fn) => {
+        setLoading(true);
+        try {
+            return await fn();
+        } catch (err) {
+            const message = err?.response?.data?.message ?? 'Something went wrong.';
+            toast(message);
+            return null;
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    // ─── Helpers to rebuild maps ──────────────────────────────────────────────
+    const buildVisitedMap = (visits) =>
+        Object.fromEntries(visits.map((v) => [v.requirement_id, v.visited_at]));
+
+    const buildProgressMap = (rows) =>
+        Object.fromEntries(
+            rows.map((r) => [
+                `${r.requirement_id}:${r.reference_id}`,
+                { completed: r.completed, completed_at: r.completed_at },
+            ])
+        );
+
+    // ─── Convenience checkers exposed to blocks ───────────────────────────────
+    // isVisited(requirement_id) → boolean
+    const isVisited = useCallback(
+        (requirementId) => !!visitedMap[requirementId],
+        [visitedMap]
+    );
+
+    // isCompleted(requirement_id, reference_id) → boolean
+    const isCompleted = useCallback(
+        (requirementId, referenceId) =>
+            !!progressMap[`${requirementId}:${referenceId}`]?.completed,
+        [progressMap]
+    );
+
+    // getProgress(requirement_id, reference_id) → { completed, completed_at } | null
+    const getProgress = useCallback(
+        (requirementId, referenceId) =>
+            progressMap[`${requirementId}:${referenceId}`] ?? null,
+        [progressMap]
+    );
+
+    // ══════════════════════════════════════════════════════════════════════════
+    // FETCH FULL PROGRESS SNAPSHOT
+    // ══════════════════════════════════════════════════════════════════════════
+
+    // GET /client/groups/:groupId/task-lists/:taskListId/tasks/:taskId/progress
+    // Called once on ViewTaskDetails mount — seeds both maps.
+    const fetchProgress = useCallback(
+        (groupId, taskListId, taskId) =>
+            request(async () => {
+                const res = await api.get(
+                    `${BASE}/${groupId}/task-lists/${taskListId}/tasks/${taskId}/progress`
+                );
+                const { link_visits = [], progress: rows = [] } = res.data?.data ?? {};
+
+                setLinkVisits(link_visits);
+                setProgress(rows);
+                setVisitedMap(buildVisitedMap(link_visits));
+                setProgressMap(buildProgressMap(rows));
+
+                return { link_visits, progress: rows };
+            }),
+        [request]
+    );
+
+    // ══════════════════════════════════════════════════════════════════════════
+    // VISIT LINK (UPSERT)
+    // ══════════════════════════════════════════════════════════════════════════
+
+    // POST /client/groups/:groupId/task-lists/:taskListId/tasks/:taskId/requirements/:requirementId/visit
+    // Optimistically updates visitedMap before the request resolves.
+    const visitLink = useCallback(
+        (groupId, taskListId, taskId, requirementId) =>
+            request(async () => {
+                const now = new Date().toISOString();
+
+                // Optimistic update
+                setVisitedMap((prev) => ({ ...prev, [requirementId]: now }));
+
+                const res = await api.post(
+                    `${BASE}/${groupId}/task-lists/${taskListId}/tasks/${taskId}/requirements/${requirementId}/visit`
+                );
+
+                const { visited_at } = res.data?.data ?? {};
+
+                // Reconcile with server timestamp
+                setVisitedMap((prev) => ({ ...prev, [requirementId]: visited_at ?? now }));
+
+                return res.data?.data;
+            }),
+        [request]
+    );
+
+    // ══════════════════════════════════════════════════════════════════════════
+    // UNVISIT LINK (DELETE)
+    // ══════════════════════════════════════════════════════════════════════════
+
+    const unvisitLink = useCallback(
+        (groupId, taskListId, taskId, requirementId) =>
+            request(async () => {
+                // Optimistic update — remove from visited map
+                setVisitedMap((prev) => {
+                    const next = { ...prev };
+                    delete next[requirementId];
+                    return next;
+                });
+
+                const res = await api.delete(
+                    `${BASE}/${groupId}/task-lists/${taskListId}/tasks/${taskId}/requirements/${requirementId}/visit`
+                );
+
+                return res.data?.data;
+            }),
+        [request]
+    );
+
+    // ══════════════════════════════════════════════════════════════════════════
+    // UPDATE LESSON PROGRESS (UPSERT — derives unit + course)
+    // ══════════════════════════════════════════════════════════════════════════
+
+    // POST /client/groups/:groupId/task-lists/:taskListId/tasks/:taskId/requirements/:requirementId/progress
+    // Body: { reference_id, completed, unit_requirement_id?, course_requirement_id? }
+    //
+    // After a successful upsert, rebuilds progressMap locally so all blocks
+    // re-render immediately without a full refetch.
+    const updateLessonProgress = useCallback(
+        (groupId, taskListId, taskId, requirementId, {
+            reference_id,
+            completed,
+            unit_requirement_id,
+            course_requirement_id,
+            // These are needed to derive + patch the map locally for unit/course
+            unit_reference_id,
+            course_reference_id,
+            // All sibling lesson rows so we can derive locally without a refetch
+            siblingLessons = [],
+            siblingUnits   = [],
+        }) =>
+            request(async () => {
+                const now = new Date().toISOString();
+
+                // ── Optimistic lesson update ──────────────────────────────────
+                const lessonKey = `${requirementId}:${reference_id}`;
+                setProgressMap((prev) => ({
+                    ...prev,
+                    [lessonKey]: { completed: !!completed, completed_at: completed ? now : null },
+                }));
+
+                const res = await api.post(
+                    `${BASE}/${groupId}/task-lists/${taskListId}/tasks/${taskId}/requirements/${requirementId}/progress`,
+                    {
+                        reference_id,
+                        completed,
+                        unit_requirement_id,
+                        course_requirement_id,
+                    }
+                );
+
+                // ── Derive unit completion locally ────────────────────────────
+                if (unit_requirement_id && unit_reference_id && siblingLessons.length) {
+                    // Build updated lesson states (merge optimistic change into siblings)
+                    const updatedLessons = siblingLessons.map((l) =>
+                        l.reference_id === reference_id
+                            ? { ...l, completed: !!completed }
+                            : l
+                    );
+                    const unitDone = updatedLessons.every((l) => l.completed);
+                    const unitKey  = `${unit_requirement_id}:${unit_reference_id}`;
+
+                    setProgressMap((prev) => ({
+                        ...prev,
+                        [unitKey]: { completed: unitDone, completed_at: unitDone ? now : null },
+                    }));
+
+                    // ── Derive course completion locally ──────────────────────
+                    if (course_requirement_id && course_reference_id && siblingUnits.length) {
+                        const updatedUnits = siblingUnits.map((u) =>
+                            u.unit_reference_id === unit_reference_id
+                                ? { ...u, completed: unitDone }
+                                : u
+                        );
+                        const courseDone = updatedUnits.every((u) => u.completed);
+                        const courseKey  = `${course_requirement_id}:${course_reference_id}`;
+
+                        setProgressMap((prev) => ({
+                            ...prev,
+                            [courseKey]: { completed: courseDone, completed_at: courseDone ? now : null },
+                        }));
+                    }
+                }
+
+                return res.data?.data;
+            }),
+        [request]
+    );
+
+    // ── Reset — call when navigating away from a task ─────────────────────────
+    const resetProgress = useCallback(() => {
+        setLinkVisits([]);
+        setProgress([]);
+        setVisitedMap({});
+        setProgressMap({});
+    }, []);
+
+    return (
+        <TaskProgressContext.Provider value={{
+            // ── Raw state ─────────────────────────────────────────────────────
+            linkVisits, progress,
+            // ── Lookup maps ───────────────────────────────────────────────────
+            visitedMap, progressMap,
+            // ── Convenience checkers ──────────────────────────────────────────
+            isVisited, isCompleted, getProgress,
+            // ── Loading ───────────────────────────────────────────────────────
+            loading,
+            // ── Actions ───────────────────────────────────────────────────────
+            fetchProgress,
+            visitLink,
+            unvisitLink,
+            updateLessonProgress,
+            resetProgress,
+        }}>
+            {children}
+        </TaskProgressContext.Provider>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/contexts/ClientTiersProvider.jsx b/apps/web/src/contexts/ClientTiersProvider.jsx
new file mode 100644
index 0000000..81aac36
--- /dev/null
+++ b/apps/web/src/contexts/ClientTiersProvider.jsx
@@ -0,0 +1,246 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const ClientTiersContext = createContext(null);
+
+export function ClientTiersProvider({ children }) {
+  // ── My tier
+  const [myTier,        setMyTier]        = useState(null);
+  const [tierLoading,   setTierLoading]   = useState(false);
+  const expiryTimerRef                    = useRef(null);
+
+  // ── Tier history
+  const [tierHistory,        setTierHistory]        = useState([]);
+  const [tierHistoryLoading, setTierHistoryLoading] = useState(false);
+
+  // ── Plans
+  const [plans,        setPlans]        = useState([]);
+  const [plansLoading, setPlansLoading] = useState(false);
+
+  // ── Checkout
+  const [checkoutLoading, setCheckoutLoading] = useState(false);
+  const [promoLoading,    setPromoLoading]    = useState(false);
+
+  // ── My payments
+  const [payments,        setPayments]        = useState([]);
+  const [paymentsLoading, setPaymentsLoading] = useState(false);
+
+  // ── System badges
+  const [systemBadges,        setSystemBadges]        = useState([]);
+  const [systemBadgesLoading, setSystemBadgesLoading] = useState(false);
+
+  // ── Tier categories (public, for badge colours)
+  const [tierCategories, setTierCategories] = useState([]);
+
+  // ─── Actions ────────────────────────────────────────────────────────────────
+
+  const getMyTier = useCallback(async ({ silent = false } = {}) => {
+    if (!silent) setTierLoading(true);
+    try {
+      const { data } = await api.get("/client/tiers/me");
+      const tier = data.data ?? null;
+      // Don't let a null response (e.g. stale browser-cache 304) overwrite a
+      // known-active tier — this prevents the "Free" flash after an upgrade.
+      setMyTier(prev => (tier === null && prev?.status === 'active') ? prev : tier);
+      if (tier?.just_expired) {
+        toast("Your subscription has expired. You've been moved to the Free plan.");
+      }
+    } catch (err) {
+      if (!silent) toast(err?.response?.data?.message ?? "Could not load subscription.");
+    } finally {
+      if (!silent) setTierLoading(false);
+    }
+  }, []);
+
+  // ── Single-shot expiry timer: fires exactly at expires_at, then re-fetches ──
+  useEffect(() => {
+    clearTimeout(expiryTimerRef.current);
+    if (!myTier?.expires_at || myTier.status !== "active") return;
+
+    const ms = new Date(myTier.expires_at).getTime() - Date.now();
+    if (ms <= 0) {
+      // Already past — fetch immediately (safety net, should rarely hit)
+      getMyTier({ silent: true });
+      return;
+    }
+
+    expiryTimerRef.current = setTimeout(() => {
+      getMyTier({ silent: true });
+    }, ms);
+
+    return () => clearTimeout(expiryTimerRef.current);
+  }, [myTier?.expires_at, myTier?.status, getMyTier]);
+
+  const getMyTierHistory = useCallback(async () => {
+    setTierHistoryLoading(true);
+    try {
+      const { data } = await api.get("/client/tiers/me/history");
+      setTierHistory(data.data ?? []);
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not load subscription history.");
+    } finally {
+      setTierHistoryLoading(false);
+    }
+  }, []);
+
+  const getPlans = useCallback(async () => {
+    setPlansLoading(true);
+    try {
+      const { data } = await api.get("/client/tiers/plans");
+      setPlans(data.data ?? []);
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not load plans.");
+    } finally {
+      setPlansLoading(false);
+    }
+  }, []);
+
+  // Returns { valid, code, type, value, discount, reason } from the server
+  const validatePromo = useCallback(async (plan_id, code) => {
+    setPromoLoading(true);
+    try {
+      const { data } = await api.post('/client/tiers/promos/validate', { plan_id, code });
+      return data.data ?? { valid: false, reason: 'No response from server.' };
+    } catch (err) {
+      return { valid: false, reason: err?.response?.data?.message ?? 'Invalid promo code.' };
+    } finally {
+      setPromoLoading(false);
+    }
+  }, []);
+
+  // Returns { payment_id, order_id, approval_url, amount, currency, ... } or null
+  const createOrder = useCallback(async (plan_id, promo_code = null) => {
+    setCheckoutLoading(true);
+    try {
+      const payload = { plan_id };
+      if (promo_code) payload.promo_code = promo_code;
+      const { data } = await api.post("/client/tiers/checkout/order", payload);
+      return data.data ?? null;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not create order.");
+      return null;
+    } finally {
+      setCheckoutLoading(false);
+    }
+  }, []);
+
+  // order_id = PayPal order ID returned from ?token= query param on redirect back
+  const captureOrder = useCallback(async (order_id) => {
+    setCheckoutLoading(true);
+    try {
+      const { data } = await api.post("/client/tiers/checkout/capture", { order_id });
+      toast(data.message ?? "Payment successful. Subscription activated.");
+      setMyTier({ tier: data.data?.tier, expires_at: data.data?.expires_at, status: "active" });
+      // Refresh from server so the browser cache holds fresh Premium data — prevents
+      // subsequent getMyTier() calls from getting a stale 304 with the old Free/null response.
+      getMyTier({ silent: true });
+      return data.data ?? null;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Payment capture failed.");
+      return null;
+    } finally {
+      setCheckoutLoading(false);
+    }
+  }, [getMyTier]);
+
+  const cancelOrder = useCallback(async (order_id) => {
+    if (!order_id) return false;
+    try {
+      await api.post("/client/tiers/checkout/cancel", { order_id });
+      return true;
+    } catch (err) {
+      // Silent — cancellation failure shouldn't interrupt UX
+      console.error("[CANCEL ORDER]", err);
+      return false;
+    }
+  }, []);
+
+  const getMyPayments = useCallback(async () => {
+    setPaymentsLoading(true);
+    try {
+      const { data } = await api.get("/client/tiers/me/payments");
+      setPayments(data.data ?? []);
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not load payment history.");
+    } finally {
+      setPaymentsLoading(false);
+    }
+  }, []);
+
+  const getSystemBadges = useCallback(async () => {
+    setSystemBadgesLoading(true);
+    try {
+      const { data } = await api.get("/client/tiers/system-badges");
+      setSystemBadges(data.data ?? []);
+    } catch (err) {
+      console.error("[CLIENT TIERS] system badges fetch failed", err);
+    } finally {
+      setSystemBadgesLoading(false);
+    }
+  }, []);
+
+  const getTierCategories = useCallback(async () => {
+    try {
+      const { data } = await api.get("/client/tiers/categories");
+      setTierCategories(data.data ?? []);
+    } catch (err) {
+      console.error("[CLIENT TIERS] tier categories fetch failed", err);
+    }
+  }, []);
+
+  // slug → category object — stable reference; only recomputes when tierCategories array changes
+  const tierMap = useMemo(
+    () => Object.fromEntries(tierCategories.map((c) => [c.slug, c])),
+    [tierCategories]
+  );
+
+  // ─── Reset helpers ──────────────────────────────────────────────────────────
+
+  const resetMyTier   = useCallback(() => setMyTier(null),  []);
+  const resetPayments = useCallback(() => setPayments([]),   []);
+
+  // ─── Value ──────────────────────────────────────────────────────────────────
+
+  const value = {
+    // state
+    myTier,         tierLoading,
+    tierHistory,    tierHistoryLoading,
+    plans,          plansLoading,
+                    checkoutLoading,
+    payments,       paymentsLoading,
+    systemBadges,   systemBadgesLoading,
+    tierCategories, tierMap,
+
+    // actions
+    getMyTier,
+    getMyTierHistory,
+    getPlans,
+    validatePromo,  promoLoading,
+    createOrder,
+    captureOrder,
+    cancelOrder,
+    getMyPayments,
+    getSystemBadges,
+    getTierCategories,
+
+    // resets
+    resetMyTier,
+    resetPayments,
+  };
+
+  return (
+    <ClientTiersContext.Provider value={value}>
+      {children}
+    </ClientTiersContext.Provider>
+  );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useClientTiers() {
+  const ctx = useContext(ClientTiersContext);
+  if (!ctx) throw new Error("useClientTiers must be used within ClientTiersProvider");
+  return ctx;
+}
+
+export default ClientTiersContext;
\ No newline at end of file
diff --git a/apps/web/src/contexts/DateTimePreferenceContext.jsx b/apps/web/src/contexts/DateTimePreferenceContext.jsx
new file mode 100644
index 0000000..9353ae3
--- /dev/null
+++ b/apps/web/src/contexts/DateTimePreferenceContext.jsx
@@ -0,0 +1,32 @@
+import { createContext, useContext, useState, useCallback } from 'react';
+
+const STORAGE_KEY = 'tz-preference';
+
+const DateTimePreferenceContext = createContext(null);
+
+export function DateTimePreferenceProvider({ children }) {
+  const [timezone, setTimezoneState] = useState(
+    () => localStorage.getItem(STORAGE_KEY) === 'UTC' ? 'UTC' : 'local'
+  );
+
+  const setTimezone = useCallback((tz) => {
+    localStorage.setItem(STORAGE_KEY, tz);
+    setTimezoneState(tz);
+  }, []);
+
+  const toggleTimezone = useCallback(() => {
+    setTimezone(timezone === 'local' ? 'UTC' : 'local');
+  }, [timezone, setTimezone]);
+
+  return (
+    <DateTimePreferenceContext.Provider value={{ timezone, setTimezone, toggleTimezone }}>
+      {children}
+    </DateTimePreferenceContext.Provider>
+  );
+}
+
+export function useDateTimePreference() {
+  const ctx = useContext(DateTimePreferenceContext);
+  if (!ctx) throw new Error('useDateTimePreference must be used inside DateTimePreferenceProvider');
+  return ctx;
+}
diff --git a/apps/web/src/contexts/MetadataContext.jsx b/apps/web/src/contexts/MetadataContext.jsx
new file mode 100644
index 0000000..ac2dc5b
--- /dev/null
+++ b/apps/web/src/contexts/MetadataContext.jsx
@@ -0,0 +1,43 @@
+import { Helmet } from 'react-helmet-async'
+import { useLocation } from 'react-router-dom'
+
+const APP_NAME    = 'STARR | Philproperties'
+const DEFAULT_DESC = 'This is still in development phase. Come back soon.'
+const DEFAULT_KW   = 'philproperties, online courses, sales training'
+const DEFAULT_IMG  = 'https://95306gu5u4.ufs.sh/f/uBRuoG2BEPFD7KSEgHPf2HyENZzXqhfcGpQsYtIMT9F5RWUC'
+
+export function PageMeta({ title, description, keywords, ogImage, ogType = 'website' }) {
+  const { pathname } = useLocation()
+  const url  = `${window.location.origin}${pathname}`
+  const t    = title       ?? APP_NAME
+  const desc = description ?? DEFAULT_DESC
+  const kw   = keywords    ?? DEFAULT_KW
+  const img  = ogImage     ?? DEFAULT_IMG
+
+  return (
+    <Helmet>
+      <title>{t}</title>
+      <meta name="description"        content={desc} />
+      <meta name="keywords"           content={kw} />
+      <meta property="og:title"       content={t} />
+      <meta property="og:description" content={desc} />
+      <meta property="og:type"        content={ogType} />
+      <meta property="og:url"         content={url} />
+      <meta property="og:image"       content={img} />
+      <meta name="twitter:card"        content="summary_large_image" />
+      <meta name="twitter:title"       content={t} />
+      <meta name="twitter:description" content={desc} />
+      <meta name="twitter:image"       content={img} />
+    </Helmet>
+  )
+}
+
+// Backward-compat shim — Login and Register still use this
+export function MetadataProvider({ children, value = {} }) {
+  return (
+    <>
+      <PageMeta {...value} />
+      {children}
+    </>
+  )
+}
diff --git a/apps/web/src/contexts/ProfileProvider.jsx b/apps/web/src/contexts/ProfileProvider.jsx
new file mode 100644
index 0000000..fffa8ed
--- /dev/null
+++ b/apps/web/src/contexts/ProfileProvider.jsx
@@ -0,0 +1,193 @@
+import { createContext, useCallback, useContext, useState } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+import { useAuth } from "@/contexts/AuthContext";
+import { resolveAssetSrc } from "@/utils/media.util";
+
+const ProfileContext = createContext(null);
+
+export function ProfileProvider({ children, apiBase = '/client' }) {
+  const { setUser, user: authUser } = useAuth();
+
+  // ── Profile state
+  const [profile,        setProfile]        = useState(null);
+  const [profileLoading, setProfileLoading] = useState(false);
+
+  // ── Sessions state
+  const [sessions,        setSessions]        = useState([]);
+  const [sessionsLoading, setSessionsLoading] = useState(false);
+  const [revokingId,      setRevokingId]      = useState(null);
+
+  // ── Achievements state
+  const [achievements,        setAchievements]        = useState([]);
+  const [achievementsLoading, setAchievementsLoading] = useState(false);
+
+  // ── Avatar state
+  const [avatarLoading, setAvatarLoading] = useState(false);
+
+  // ─── Actions ──────────────────────────────────────────────────────────────
+
+  const getProfile = useCallback(async () => {
+    setProfileLoading(true);
+    try {
+      const { data } = await api.get(`${apiBase}/profile`);
+      const fresh = data.data ?? null;
+      setProfile(fresh);
+      return fresh;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not load profile.");
+      return null;
+    } finally {
+      setProfileLoading(false);
+    }
+  }, [apiBase]);
+
+  const updateProfile = useCallback(async (personal_info) => {
+    setProfileLoading(true);
+    try {
+      const { data } = await api.put(`${apiBase}/profile`, { personal_info });
+      setProfile(data.data ?? null);
+      setUser((prev) => ({ ...prev, ...data.data }));
+      toast(data.message ?? "Profile updated.");
+      return { success: true, data: data.data };
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not update profile.");
+      return { success: false };
+    } finally {
+      setProfileLoading(false);
+    }
+  }, [apiBase, setUser]);
+
+  const getSessions = useCallback(async () => {
+    setSessionsLoading(true);
+    try {
+      const { data } = await api.get(`${apiBase}/sessions`);
+      setSessions(data.data ?? []);
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not load sessions.");
+    } finally {
+      setSessionsLoading(false);
+    }
+  }, [apiBase]);
+
+  const revokeSession = useCallback(async (sessionId) => {
+    setRevokingId(sessionId);
+    try {
+      await api.delete(`${apiBase}/sessions/${sessionId}`);
+      setSessions((prev) => prev.filter((s) => s.session_id !== sessionId));
+      toast("Session revoked.");
+      return { success: true };
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not revoke session.");
+      return { success: false };
+    } finally {
+      setRevokingId(null);
+    }
+  }, [apiBase]);
+
+  const uploadAvatar = useCallback(async (file) => {
+    const formData = new FormData();
+    formData.append('avatar', file);
+    setAvatarLoading(true);
+    try {
+      const { data } = await api.post(`${apiBase}/profile/avatar`, formData);
+      setProfile(data.data ?? null);
+      setUser((prev) => ({ ...prev, personal_info: data.data?.personal_info }));
+      toast('Avatar updated.');
+      return { success: true };
+    } catch (err) {
+      toast(err?.response?.data?.message ?? 'Could not update avatar.');
+      return { success: false };
+    } finally {
+      setAvatarLoading(false);
+    }
+  }, [apiBase, setUser]);
+
+  const deleteAvatar = useCallback(async () => {
+    setAvatarLoading(true);
+    try {
+      await api.delete(`${apiBase}/profile/avatar`);
+      setProfile((prev) => prev
+        ? { ...prev, personal_info: { ...(prev.personal_info ?? {}), avatar: null } }
+        : prev
+      );
+      setUser((prev) => ({
+        ...prev,
+        personal_info: { ...(prev?.personal_info ?? {}), avatar: null },
+      }));
+      toast('Avatar removed.');
+      return { success: true };
+    } catch (err) {
+      toast(err?.response?.data?.message ?? 'Could not remove avatar.');
+      return { success: false };
+    } finally {
+      setAvatarLoading(false);
+    }
+  }, [apiBase, setUser]);
+
+  const getAchievements = useCallback(async () => {
+    setAchievementsLoading(true);
+    try {
+      const { data } = await api.get(`${apiBase}/achievements`);
+      setAchievements(data.data ?? []);
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not load achievements.");
+    } finally {
+      setAchievementsLoading(false);
+    }
+  }, [apiBase]);
+
+  // ─── Derived helpers ───────────────────────────────────────────────────────
+
+  const pi = profile?.personal_info ?? authUser?.personal_info;
+
+  const fullName   = pi?.name?.full_name   ?? "";
+  const givenName  = pi?.name?.given_name  ?? "";
+  const lastName   = pi?.name?.last_name   ?? "";
+  const avatarUrl  = resolveAssetSrc(pi?.avatar) ?? "";
+  const occupation = pi?.occupation        ?? "";
+
+  // ─── Reset helpers ─────────────────────────────────────────────────────────
+
+  const resetProfile      = useCallback(() => setProfile(null),       []);
+  const resetSessions     = useCallback(() => setSessions([]),         []);
+  const resetAchievements = useCallback(() => setAchievements([]),     []);
+
+  // ─── Value ────────────────────────────────────────────────────────────────
+
+  const value = {
+    // state
+    profile,        profileLoading,
+    sessions,       sessionsLoading,  revokingId,
+    achievements,   achievementsLoading,
+
+    // derived
+    fullName, givenName, lastName, avatarUrl, occupation,
+
+    // avatar
+    avatarLoading,
+    uploadAvatar, deleteAvatar,
+
+    // actions
+    getProfile, updateProfile,
+    getSessions, revokeSession,
+    getAchievements,
+
+    // resets
+    resetProfile, resetSessions, resetAchievements,
+  };
+
+  return (
+    <ProfileContext.Provider value={value}>
+      {children}
+    </ProfileContext.Provider>
+  );
+}
+
+export function useProfile() {
+  const ctx = useContext(ProfileContext);
+  if (!ctx) throw new Error("useProfile must be used within ProfileProvider");
+  return ctx;
+}
+
+export default ProfileContext;
\ No newline at end of file
diff --git a/apps/web/src/contexts/StaffGroupContext.jsx b/apps/web/src/contexts/StaffGroupContext.jsx
new file mode 100644
index 0000000..1553035
--- /dev/null
+++ b/apps/web/src/contexts/StaffGroupContext.jsx
@@ -0,0 +1,181 @@
+import { createContext, useContext, useState, useCallback } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const StaffGroupContext = createContext(null);
+
+export const useStaffGroups = () => {
+  const ctx = useContext(StaffGroupContext);
+  if (!ctx) throw new Error("useStaffGroups must be used inside StaffGroupProvider");
+  return ctx;
+};
+
+const BASE = "/staff";
+
+const PAGINATION_INIT = {
+  page: 1,
+  limit: 10,
+  totalRecords: 0,
+  totalPages: 0,
+  hasPrevPage: false,
+  hasNextPage: false,
+};
+
+export const StaffGroupProvider = ({ children }) => {
+  const [groups,  setGroups]  = useState([]);
+  const [group,   setGroup]   = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error,   setError]   = useState(null);
+
+  // ── Members pagination state ───────────────────────────────────────────────
+  const [members,           setMembers]           = useState([]);
+  const [memberAttributes,  setMemberAttributes]  = useState([]);
+  const [memberPagination,  setMemberPagination]  = useState(PAGINATION_INIT);
+  const [membersLoading,    setMembersLoading]    = useState(false);
+
+  const request = useCallback(async (fn) => {
+    setLoading(true);
+    setError(null);
+    try {
+      return await fn();
+    } catch (err) {
+      const message = err?.response?.data?.message || err.message || "Something went wrong.";
+      setError(message);
+      toast(message);
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Lightweight wrapper for members-specific loading flag
+  // so it doesn't block the whole page when paginating/filtering
+  const membersRequest = useCallback(async (fn) => {
+    setMembersLoading(true);
+    try {
+      return await fn();
+    } catch (err) {
+      const message = err?.response?.data?.message || err.message || "Something went wrong.";
+      toast(message);
+      return null;
+    } finally {
+      setMembersLoading(false);
+    }
+  }, []);
+
+  // ─── GET /api/staff/groups ────────────────────────────────────────────────
+  const fetchMyGroups = useCallback(
+    () =>
+      request(async () => {
+        const res = await api.get(`${BASE}/groups`);
+        setGroups(res.data?.data ?? []);
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /api/staff/groups/:group_id ─────────────────────────────────────
+  const fetchGroupById = useCallback(
+    (groupId) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/groups/${groupId}`);
+        setGroup(res.data?.data ?? null);
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /api/staff/groups/by-code/:group_code ───────────────────────────
+  const fetchGroupByCode = useCallback(
+    (groupCode) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/groups/by-code/${groupCode}`);
+        setGroup(res.data?.data ?? null);
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /api/staff/groups/:group_id/members ─────────────────────────────
+  // Paginated, searchable, filterable — mirrors the paginate() pattern.
+  // params: { page, limit, search, filters, sort }
+  const fetchGroupMembers = useCallback(
+    (groupId, params = {}) =>
+      membersRequest(async () => {
+        const res = await api.get(`${BASE}/groups/${groupId}/members`, {
+          params: {
+            page:    params.page    ?? 1,
+            limit:   params.limit   ?? 10,
+            search:  params.search  ?? undefined,
+            filters: params.filters?.length
+              ? JSON.stringify(params.filters)
+              : undefined,
+            sort: params.sort?.length
+              ? JSON.stringify(params.sort)
+              : undefined,
+          },
+        });
+
+        const payload = res.data?.data;
+
+        setMembers(payload.data            ?? []);
+        setMemberAttributes(payload?.attributes ?? []);
+        setMemberPagination({
+          page:       payload?.page        ?? 1,
+          limit:      payload?.limit       ?? 10,
+          total:      payload?.total       ?? 0,
+          totalPages: payload?.totalPages  ?? 1,
+        });
+
+        return res.data;
+      }),
+    [membersRequest]
+  );
+
+  // ─── GET /api/staff/groups/:group_id/members/field-values ────────────────
+  // Fetches distinct values for a given column — used by FilterSheet.
+  // column:  the column id (e.g. "acc_type", "is_active")
+  // params:  forwarded query params (search, page, limit, etc.)
+  const fetchGroupMemberFieldValues = useCallback(
+    (groupId, column, params = {}) =>
+      membersRequest(async () => {
+        const res = await api.get(
+          `${BASE}/groups/${groupId}/members/field-values`,
+          {
+            params: {
+              column,
+              page:   params.page  ?? 1,
+              limit:  params.limit ?? 20,
+              search: params.search ?? undefined,
+            },
+          }
+        );
+        return res.data?.data;
+      }),
+    [membersRequest]
+  );
+
+  return (
+    <StaffGroupContext.Provider
+      value={{
+        // Groups
+        groups, group, loading, error,
+        setGroup,
+        fetchMyGroups,
+        fetchGroupById,
+        fetchGroupByCode,
+
+        // Members (paginated)
+        members,
+        memberAttributes,
+        memberPagination,
+        setMemberPagination,
+        membersLoading,
+        fetchGroupMembers,
+        fetchGroupMemberFieldValues,
+      }}
+    >
+      {children}
+    </StaffGroupContext.Provider>
+  );
+};
\ No newline at end of file
diff --git a/apps/web/src/contexts/StaffScoreContext.jsx b/apps/web/src/contexts/StaffScoreContext.jsx
new file mode 100644
index 0000000..1744160
--- /dev/null
+++ b/apps/web/src/contexts/StaffScoreContext.jsx
@@ -0,0 +1,93 @@
+import { createContext, useContext, useState, useCallback } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const StaffScoreContext = createContext(null);
+
+export const useStaffScores = () => {
+  const ctx = useContext(StaffScoreContext);
+  if (!ctx) throw new Error("useStaffScores must be used inside StaffScoreProvider");
+  return ctx;
+};
+
+const BASE = "/staff";
+
+export const StaffScoreProvider = ({ children }) => {
+  const [progress, setProgress]       = useState(null);   // task list completion matrix
+  const [quizScores, setQuizScores]   = useState(null);   // quiz attempt scores per user
+  const [assessScores, setAssessScores] = useState(null); // assessment attempt scores per user
+  const [loading, setLoading]         = useState(false);
+  const [error, setError]             = useState(null);
+
+  const request = useCallback(async (fn) => {
+    setLoading(true);
+    setError(null);
+    try {
+      return await fn();
+    } catch (err) {
+      const message = err?.response?.data?.message || err.message || "Something went wrong.";
+      setError(message);
+      toast(message);
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // ─── GET /api/staff/progress/task-list/:task_list_id ─────────────────────
+  // Completion matrix: all members × all tasks in the task list.
+  // Response shape: { data: [{ user, tasks: [{ task, completion }], completed_count, total_tasks }] }
+  const fetchTaskListProgress = useCallback(
+    (taskListId) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/progress/task-list/${taskListId}`);
+        setProgress(res.data ?? null);
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /api/staff/scores/quiz/:quiz_id ─────────────────────────────────
+  // Unit quiz scores for all members in the staff's groups.
+  // Response shape: { quiz, data: [{ user, attempts, best_score, latest }] }
+  const fetchQuizScores = useCallback(
+    (quizId) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/scores/quiz/${quizId}`);
+        setQuizScores(res.data ?? null);
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /api/staff/scores/assessment/:assessment_id ─────────────────────
+  // Course assessment scores for all members in the staff's groups.
+  // Response shape: { assessment, data: [{ user, attempts, best_score, latest }] }
+  const fetchAssessmentScores = useCallback(
+    (assessmentId) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/scores/assessment/${assessmentId}`);
+        setAssessScores(res.data ?? null);
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── Clear helpers ────────────────────────────────────────────────────────
+  // Useful when navigating away from a scores page to avoid stale data.
+  const clearProgress     = useCallback(() => setProgress(null), []);
+  const clearQuizScores   = useCallback(() => setQuizScores(null), []);
+  const clearAssessScores = useCallback(() => setAssessScores(null), []);
+
+  return (
+    <StaffScoreContext.Provider value={{
+      progress, quizScores, assessScores, loading, error,
+      fetchTaskListProgress,
+      fetchQuizScores,
+      fetchAssessmentScores,
+      clearProgress, clearQuizScores, clearAssessScores,
+    }}>
+      {children}
+    </StaffScoreContext.Provider>
+  );
+};
diff --git a/apps/web/src/contexts/StaffTaskContext.jsx b/apps/web/src/contexts/StaffTaskContext.jsx
new file mode 100644
index 0000000..4c73129
--- /dev/null
+++ b/apps/web/src/contexts/StaffTaskContext.jsx
@@ -0,0 +1,418 @@
+/***********************************************************************************************************************************************************************
+ * File Name: StaffTaskContext.jsx
+ * Type of Program: Context
+ * Description: Staff task management context — aligned to the updated tasks.ctrl.js.
+ *              Supports pagination, archive/restore, bulk ops, and filter field values
+ *              to match the DataTable-based TaskListsPage.
+ ***********************************************************************************************************************************************************************/
+import { createContext, useContext, useState, useCallback } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const StaffTaskContext = createContext(null);
+
+export const useStaffTasks = () => {
+  const ctx = useContext(StaffTaskContext);
+  if (!ctx) throw new Error("useStaffTasks must be used inside StaffTaskProvider");
+  return ctx;
+};
+
+const BASE = "/staff";
+
+const PAGINATION_INIT = {
+  page: 1,
+  limit: 10,
+  totalRecords: 0,
+  totalPages: 0,
+  hasPrevPage: false,
+  hasNextPage: false,
+};
+
+export const StaffTaskProvider = ({ children }) => {
+  // ── Task Lists ──────────────────────────────────────────────────────────────
+  const [taskLists,   setTaskLists]   = useState([]);
+  const [taskList,    setTaskList]    = useState(null);
+  const [attributes,  setAttributes]  = useState([]);
+  const [pagination,  setPagination]  = useState(PAGINATION_INIT);
+
+  // ── Tasks ───────────────────────────────────────────────────────────────────
+  const [tasks,       setTasks]       = useState([]);
+  const [task,        setTask]        = useState(null);
+  const [taskAttrs,   setTaskAttrs]   = useState([]);
+  const [taskPagination, setTaskPagination] = useState(PAGINATION_INIT);
+
+  const [loading,     setLoading]     = useState(false);
+  const [error,       setError]       = useState(null);
+
+  // ── Internal request wrapper ────────────────────────────────────────────────
+  const request = useCallback(async (fn) => {
+    setLoading(true);
+    setError(null);
+    try {
+      return await fn();
+    } catch (err) {
+      const message = err?.response?.data?.message || err.message || "Something went wrong.";
+      setError(message);
+      toast(message);
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // ── Build query params from DataTable fetch args ────────────────────────────
+  const buildParams = ({ page, limit, filters, sort, archived } = {}) => ({
+    ...(page    && { page }),
+    ...(limit   && { limit }),
+    ...(archived !== undefined && { archived }),
+    ...(filters?.length && { filters: JSON.stringify(filters) }),
+    ...(sort?.length    && { sort:    JSON.stringify(sort) }),
+  });
+
+  // ════════════════════════════════════════════════════════════════════════════
+  // TASK LISTS
+  // ════════════════════════════════════════════════════════════════════════════
+
+  // ─── GET /staff/task-lists ───────────────────────────────────────────────
+  const fetchTaskLists = useCallback(
+    (args = {}) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/task-lists`, { params: buildParams(args) });
+        const { data, attributes, pagination } = res.data?.data;
+        
+        setTaskLists(data ?? []);
+        setAttributes(attributes ?? []);
+        setPagination(pagination  ?? null);
+
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /staff/task-lists/archived ──────────────────────────────────────
+  const fetchArchivedTaskLists = useCallback(
+    (args = {}) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/task-lists/archived`, { params: buildParams(args) });
+        const payload = res.data?.data;
+        setTaskLists(payload?.rows   ?? payload ?? []);
+        setAttributes(payload?.attributes ?? []);
+        setPagination(payload?.pagination  ?? null);
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /staff/task-lists/field-values ──────────────────────────────────
+  const fetchTaskListFieldValues = useCallback(
+    (field, args = {}) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/task-lists/field-values`, {
+          params: { field, ...buildParams(args) },
+        });
+        return res.data?.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /staff/task-lists/:taskListId ───────────────────────────────────
+  const fetchTaskList = useCallback(
+    (taskListId) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/task-lists/${taskListId}`);
+        setTaskList(res.data?.data ?? null);
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── POST /staff/task-lists ──────────────────────────────────────────────
+  // body: { name, description, group_ids: ["27", "28"] }
+  const addTaskList = useCallback(
+    (payload) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/task-lists`, payload);
+        const created = res.data?.data;
+        if (created) setTaskLists((prev) => [created, ...prev]);
+        toast("Task list created.");
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── PUT /staff/task-lists/:taskListId ───────────────────────────────────
+  const updateTaskList = useCallback(
+    (taskListId, payload) =>
+      request(async () => {
+        const res = await api.put(`${BASE}/task-lists/${taskListId}`, payload);
+        const updated = res.data?.data;
+        if (updated) {
+          setTaskLists((prev) =>
+            prev.map((tl) => (tl.task_list_id === taskListId ? { ...tl, ...updated } : tl))
+          );
+          if (taskList?.task_list_id === taskListId)
+            setTaskList((prev) => ({ ...prev, ...updated }));
+        }
+        toast("Task list updated.");
+        return res.data;
+      }),
+    [request, taskList]
+  );
+
+  // ─── POST /staff/task-lists/:taskListId/archive ──────────────────────────
+  const archiveTaskList = useCallback(
+    (taskListId) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/task-lists/${taskListId}/archive`);
+        setTaskLists((prev) => prev.filter((tl) => tl.task_list_id !== taskListId));
+        if (taskList?.task_list_id === taskListId) setTaskList(null);
+        toast("Task list archived.");
+        return res.data;
+      }),
+    [request, taskList]
+  );
+
+  // ─── POST /staff/task-lists/:taskListId/restore ──────────────────────────
+  const restoreTaskList = useCallback(
+    (taskListId) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/task-lists/${taskListId}/restore`);
+        setTaskLists((prev) => prev.filter((tl) => tl.task_list_id !== taskListId));
+        toast("Task list restored.");
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── POST /staff/task-lists/bulk-archive ─────────────────────────────────
+  const bulkArchiveTaskLists = useCallback(
+    (ids) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/task-lists/bulk-archive`, { ids });
+        const { archived_ids = [] } = res.data?.data ?? {};
+        setTaskLists((prev) =>
+          prev.filter((tl) => !archived_ids.includes(tl.task_list_id))
+        );
+        toast(`${archived_ids.length} task list(s) archived.`);
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── POST /staff/task-lists/bulk-restore ─────────────────────────────────
+  const bulkRestoreTaskLists = useCallback(
+    (ids) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/task-lists/bulk-restore`, { ids });
+        const { restored_ids = [] } = res.data?.data ?? {};
+        setTaskLists((prev) =>
+          prev.filter((tl) => !restored_ids.includes(tl.task_list_id))
+        );
+        toast(`${restored_ids.length} task list(s) restored.`);
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ════════════════════════════════════════════════════════════════════════════
+  // TASKS
+  // ════════════════════════════════════════════════════════════════════════════
+
+  // ─── GET /staff/task-lists/:taskListId/tasks ─────────────────────────────
+  const fetchTasks = useCallback(
+    (taskListId, args = {}) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/task-lists/${taskListId}/tasks`, {
+          params: buildParams(args),
+        });
+        const payload = res.data?.data;
+        setTasks(payload?.rows        ?? payload ?? []);
+        setTaskAttrs(payload?.attributes  ?? []);
+        setTaskPagination(payload?.pagination ?? null);
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /staff/task-lists/:taskListId/tasks/archived ────────────────────
+  const fetchArchivedTasks = useCallback(
+    (taskListId, args = {}) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/task-lists/${taskListId}/tasks/archived`, {
+          params: buildParams(args),
+        });
+        const payload = res.data?.data;
+        setTasks(payload?.rows        ?? payload ?? []);
+        setTaskAttrs(payload?.attributes  ?? []);
+        setTaskPagination(payload?.pagination ?? null);
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /staff/task-lists/:taskListId/tasks/field-values ────────────────
+  const fetchTaskFieldValues = useCallback(
+    (taskListId, field, args = {}) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/task-lists/${taskListId}/tasks/field-values`, {
+          params: { field, ...buildParams(args) },
+        });
+        return res.data?.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /staff/task-lists/:taskListId/tasks/:taskId ─────────────────────
+  const fetchTask = useCallback(
+    (taskListId, taskId) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/task-lists/${taskListId}/tasks/${taskId}`);
+        setTask(res.data?.data ?? null);
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── POST /staff/task-lists/:taskListId/tasks ────────────────────────────
+  // body: { name, description, deadline, requirements: [{ type, ...fields }] }
+  const addTask = useCallback(
+    (taskListId, payload) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/task-lists/${taskListId}/tasks`, payload);
+        const created = res.data?.data;
+        if (created) {
+          setTasks((prev) => [...prev, created]);
+          setTaskLists((prev) =>
+            prev.map((tl) =>
+              tl.task_list_id === taskListId
+                ? { ...tl, tasks: [...(tl.tasks ?? []), created] }
+                : tl
+            )
+          );
+        }
+        toast("Task created.");
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── PUT /staff/task-lists/:taskListId/tasks/:taskId ─────────────────────
+  const updateTask = useCallback(
+    (taskListId, taskId, payload) =>
+      request(async () => {
+        const res = await api.put(`${BASE}/task-lists/${taskListId}/tasks/${taskId}`, payload);
+        const updated = res.data?.data;
+        if (updated) {
+          setTasks((prev) =>
+            prev.map((t) => (t.task_id === taskId ? { ...t, ...updated } : t))
+          );
+          setTaskLists((prev) =>
+            prev.map((tl) =>
+              tl.task_list_id === taskListId
+                ? {
+                    ...tl,
+                    tasks: tl.tasks?.map((t) =>
+                      t.task_id === taskId ? { ...t, ...updated } : t
+                    ),
+                  }
+                : tl
+            )
+          );
+          if (task?.task_id === taskId) setTask((prev) => ({ ...prev, ...updated }));
+        }
+        toast("Task updated.");
+        return res.data;
+      }),
+    [request, task]
+  );
+
+  // ─── POST /staff/task-lists/:taskListId/tasks/:taskId/archive ────────────
+  const archiveTask = useCallback(
+    (taskListId, taskId) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/task-lists/${taskListId}/tasks/${taskId}/archive`);
+        setTasks((prev) => prev.filter((t) => t.task_id !== taskId));
+        setTaskLists((prev) =>
+          prev.map((tl) =>
+            tl.task_list_id === taskListId
+              ? { ...tl, tasks: tl.tasks?.filter((t) => t.task_id !== taskId) }
+              : tl
+          )
+        );
+        toast("Task archived.");
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── POST /staff/task-lists/:taskListId/tasks/:taskId/restore ────────────
+  const restoreTask = useCallback(
+    (taskListId, taskId) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/task-lists/${taskListId}/tasks/${taskId}/restore`);
+        setTasks((prev) => prev.filter((t) => t.task_id !== taskId));
+        toast("Task restored.");
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── POST /staff/task-lists/:taskListId/tasks/bulk-archive ───────────────
+  const bulkArchiveTasks = useCallback(
+    (taskListId, ids) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/task-lists/${taskListId}/tasks/bulk-archive`, { ids });
+        const { archived_ids = [] } = res.data?.data ?? {};
+        setTasks((prev) => prev.filter((t) => !archived_ids.includes(t.task_id)));
+        toast(`${archived_ids.length} task(s) archived.`);
+        return res.data;
+      }),
+    [request]
+  );
+
+  // ─── POST /staff/task-lists/:taskListId/tasks/bulk-restore ───────────────
+  const bulkRestoreTasks = useCallback(
+    (taskListId, ids) =>
+      request(async () => {
+        const res = await api.post(`${BASE}/task-lists/${taskListId}/tasks/bulk-restore`, { ids });
+        const { restored_ids = [] } = res.data?.data ?? {};
+        setTasks((prev) => prev.filter((t) => !restored_ids.includes(t.task_id)));
+        toast(`${restored_ids.length} task(s) restored.`);
+        return res.data;
+      }),
+    [request]
+  );
+
+  return (
+    <StaffTaskContext.Provider
+      value={{
+        // ── Task List state
+        taskLists, taskList, attributes, pagination, 
+        setPagination, setTaskList,
+
+        // ── Task List actions
+        fetchTaskLists, fetchArchivedTaskLists, fetchTaskListFieldValues,
+        fetchTaskList,
+        addTaskList, updateTaskList,
+        archiveTaskList, restoreTaskList,
+        bulkArchiveTaskLists, bulkRestoreTaskLists,
+
+        // ── Task state
+        tasks, task, taskAttrs, taskPagination,
+        setTask,
+
+        // ── Task actions
+        fetchTasks, fetchArchivedTasks, fetchTaskFieldValues,
+        fetchTask,
+        addTask, updateTask,
+        archiveTask, restoreTask,
+        bulkArchiveTasks, bulkRestoreTasks,
+
+        // ── Shared
+        loading, error,
+      }}
+    >
+      {children}
+    </StaffTaskContext.Provider>
+  );
+};
\ No newline at end of file
diff --git a/apps/web/src/contexts/StaffUserContext.jsx b/apps/web/src/contexts/StaffUserContext.jsx
new file mode 100644
index 0000000..a6cd0ec
--- /dev/null
+++ b/apps/web/src/contexts/StaffUserContext.jsx
@@ -0,0 +1,92 @@
+import { createContext, useContext, useState, useCallback } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const StaffUserContext = createContext(null);
+
+export const useStaffUsers = () => {
+  const ctx = useContext(StaffUserContext);
+  if (!ctx) throw new Error("useStaffUsers must be used inside StaffUserProvider");
+  return ctx;
+};
+
+const PAGINATION_INIT = {
+  page: 1,
+  limit: 10,
+  totalRecords: 0,
+  totalPages: 0,
+  hasPrevPage: false,
+  hasNextPage: false,
+};
+
+const BASE = "/staff";
+
+export const StaffUserProvider = ({ children }) => {
+  const [users, setUsers]           = useState([]);
+  const [user, setUser]             = useState(null);
+  const [pagination, setPagination] = useState(PAGINATION_INIT);
+  const [attributes, setAttributes] = useState([]);
+  const [loading, setLoading]       = useState(false);
+  const [error, setError]           = useState(null);
+
+  const request = useCallback(async (fn) => {
+    setLoading(true);
+    setError(null);
+    try {
+      return await fn();
+    } catch (err) {
+      const message = err?.response?.data?.message || err.message || "Something went wrong.";
+      setError(message);
+      toast(message);
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // ─── GET /api/staff/users ─────────────────────────────────────────────────
+  // Returns users scoped to the logged-in staff member's groups.
+  // Optional query: group_id or group_code to filter to one group.
+  const fetchUsers = useCallback(
+    ({ page = 1, limit = 10, group_id, group_code, filters = [], sort = [] } = {}) =>
+      request(async () => {
+        const { data } = await api.get(`${BASE}/users`, {
+          params: {
+            page, limit,
+            ...(group_id   && { group_id }),
+            ...(group_code && { group_code }),
+            filters: filters.length ? JSON.stringify(filters) : undefined,
+            sort:    sort.length    ? JSON.stringify(sort)    : undefined,
+          },
+        });
+        const final_data = data?.data;
+        setUsers(final_data?.data ?? []);
+        setPagination(final_data?.pagination ?? PAGINATION_INIT);
+        setAttributes(final_data?.attributes ?? []);
+        return data?.data;
+      }),
+    [request]
+  );
+
+  // ─── GET /api/staff/users/:user_id ───────────────────────────────────────
+  // Returns a single user profile — only if they share a group with the staff member.
+  const fetchUser = useCallback(
+    (userId) =>
+      request(async () => {
+        const res = await api.get(`${BASE}/users/${userId}`);
+        setUser(res.data?.data ?? null);
+        return res.data;
+      }),
+    [request]
+  );
+
+  return (
+    <StaffUserContext.Provider value={{
+      users, user, pagination, attributes, loading, error,
+      setPagination,
+      fetchUsers, fetchUser,
+    }}>
+      {children}
+    </StaffUserContext.Provider>
+  );
+};
diff --git a/apps/web/src/contexts/ThemeContext.jsx b/apps/web/src/contexts/ThemeContext.jsx
new file mode 100644
index 0000000..0f64fb3
--- /dev/null
+++ b/apps/web/src/contexts/ThemeContext.jsx
@@ -0,0 +1,80 @@
+/**
+ * ╔══════════════════════════════════════════════════════════════════════════════╗
+ * ║                                ThemeContext.jsx                              ║
+ * ╠══════════════════════════════════════════════════════════════════════════════╣
+ * ║  Author        : rgrgogu                                                     ║
+ * ║  Date Created  : May 5, 2026                                                 ║
+ * ║  Date Modified : May 24, 2026 (by Kenneth Obsequio @lash0000)                ║
+ * ╠══════════════════════════════════════════════════════════════════════════════╣
+ * ║  Changelog                                                                   ║
+ * ║  - Added: 'system' theme support                                             ║
+ * ╚══════════════════════════════════════════════════════════════════════════════╝
+ */
+
+import { createContext, useContext, useEffect, useState } from 'react';
+
+const ThemeProviderContext = createContext({
+  theme: 'system',
+  toggleTheme: () => null,
+  setTheme: () => null,
+});
+
+function getSystemTheme() {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = 'vite-ui-theme',
+}) {
+  const [theme, setThemeState] = useState(() => {
+    return localStorage.getItem(storageKey) || defaultTheme;
+  });
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    const applied = theme === 'system' ? getSystemTheme() : theme;
+
+    root.classList.remove('light', 'dark');
+    root.classList.add(applied);
+    localStorage.setItem(storageKey, theme);
+
+    if (theme === 'system') {
+      const media = window.matchMedia('(prefers-color-scheme: dark)');
+      const handler = (e) => {
+        root.classList.remove('light', 'dark');
+        root.classList.add(e.matches ? 'dark' : 'light');
+      };
+      media.addEventListener('change', handler);
+      return () => media.removeEventListener('change', handler);
+    }
+  }, [theme]);
+
+  const value = {
+    theme,
+    toggleTheme: () => {
+      const newTheme = theme === 'light' ? 'dark' : 'light';
+      setThemeState(newTheme);
+    },
+    setTheme: (newTheme) => {
+      if (['light', 'dark', 'system'].includes(newTheme)) {
+        setThemeState(newTheme);
+      }
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeProviderContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
\ No newline at end of file
diff --git a/apps/web/src/contexts/UploadQueueContext.jsx b/apps/web/src/contexts/UploadQueueContext.jsx
new file mode 100644
index 0000000..0bb9b25
--- /dev/null
+++ b/apps/web/src/contexts/UploadQueueContext.jsx
@@ -0,0 +1,196 @@
+// contexts/UploadQueueContext.jsx
+//
+// Global, app-shell-mounted upload queue shared by both Add File (single)
+// and Add Assets Bulk (multi-file drop zone). Lives above the router (see
+// AdminProvider.jsx) so an in-flight upload survives navigating away from
+// either page — the floating UploadProgressToast reads the same state from
+// anywhere in /admin.
+//
+// Every job — whether it's part of an initial addBatch() or a single retry —
+// uploads directly to storage via its own presigned PUT (see
+// presignedUpload.util.js), then finalizes with its own POST /admin/assets
+// call — the same per-file isolation as before (a dropped connection can
+// only ever affect the one job riding it), now with the added benefit that
+// the file's bytes never pass through this backend's memory at all, no
+// matter how large the file is. uploadOne() below is shared by both the
+// initial run and retries; runBatch() just fans it out over a small worker
+// pool so a big batch doesn't fire 20 uploads at once (MAX_CONCURRENT
+// mirrors the Garage-edge Caddy's own concurrent-upload cap, so the
+// frontend doesn't just relocate the pile-up into tripping that limit
+// instead).
+
+import { createContext, useCallback, useContext, useRef, useState } from "react";
+import { nanoid } from "nanoid";
+import api from "@/utils/api.util";
+import { validateAssetFile } from "@/utils/assetUpload.util";
+import { presignAssetUpload, uploadPresigned } from "@/utils/presignedUpload.util";
+
+const MAX_CONCURRENT = 3;
+
+const UploadQueueContext = createContext(null);
+
+export function useUploadQueue() {
+    const ctx = useContext(UploadQueueContext);
+    if (!ctx) throw new Error("useUploadQueue must be used within an UploadQueueProvider");
+    return ctx;
+}
+
+const baseNameOf = (filename = "") => filename.replace(/\.[^.]+$/, "");
+
+export function UploadQueueProvider({ children }) {
+    const [jobs, setJobs] = useState([]);
+    const onSettledRef = useRef(new Map()); // batchId -> callback
+
+    const patchJobs = useCallback((ids, patch) => {
+        const idSet = new Set(ids);
+        setJobs((prev) => prev.map((j) => (idSet.has(j.id) ? { ...j, ...(typeof patch === "function" ? patch(j) : patch) } : j)));
+    }, []);
+
+    // ─── Upload exactly one job: presign -> direct PUT -> finalize ─────────
+    // Shared by the initial batch run and single-job retries — a dropped
+    // connection here can only ever fail the one job riding it, never its
+    // batch-mates. Same isolation guarantee as before, plus the file's bytes
+    // now go straight to storage instead of buffering through the backend.
+    const uploadOne = useCallback(async (job) => {
+        try {
+            const [presigned, thumbPresigned] = await Promise.all([
+                presignAssetUpload(job.file),
+                job.thumbnail ? presignAssetUpload(job.thumbnail) : Promise.resolve(null),
+            ]);
+            const storage_key = presigned.key;
+
+            await Promise.all([
+                uploadPresigned(job.file, presigned, (pct) => patchJobs([job.id], { progress: pct })),
+                thumbPresigned ? uploadPresigned(job.thumbnail, thumbPresigned) : Promise.resolve(),
+            ]);
+
+            // display_name/description are never collected from the user anymore
+            // (Add File and Add Assets Bulk both dropped those fields) — every
+            // job's display_name is derived from its filename here.
+            const display_name = job.meta.display_name || baseNameOf(job.name);
+
+            const { data } = await api.post("/admin/assets", {
+                ...job.meta,
+                storage_key,
+                thumbnail_storage_key: thumbPresigned?.key,
+                original_name: job.name,
+                display_name,
+                // Fallback only — the backend prefers storage's own
+                // Content-Type, this just covers the rare case a browser
+                // sent the PUT with no Content-Type at all (empty File.type).
+                mimetype: job.mime || undefined,
+            });
+            const asset = data?.data?.data;
+            patchJobs([job.id], { status: "uploaded", progress: 100, asset, error: null });
+            return { id: job.id, name: job.name, status: "uploaded", asset };
+        } catch (err) {
+            // No sonner toast() here — the floating widget (see
+            // UploadProgressToast) already surfaces this via the job's own
+            // failed status; addBatch()'s onSettled callback gets this same
+            // result too, for callers (e.g. Add File) that want their own toast.
+            const message = err?.response?.data?.message ?? "Upload failed.";
+            patchJobs([job.id], { status: "failed", progress: 100, error: message });
+            return { id: job.id, name: job.name, status: "failed", error: message };
+        }
+    }, [patchJobs]);
+
+    // ─── Run a batch through a small fixed-size worker pool ────────────────
+    // One POST per file (uploadOne) fanned out over MAX_CONCURRENT workers,
+    // instead of one request for the whole batch — isolates a dropped
+    // connection to the single job it was carrying instead of failing every
+    // job in the batch (which is what used to happen).
+    const runBatch = useCallback(async (batchId, batchJobs) => {
+        const ids = batchJobs.map((j) => j.id);
+        patchJobs(ids, { status: "uploading", progress: 0 });
+
+        const results = new Array(batchJobs.length);
+        let next = 0;
+        const worker = async () => {
+            while (next < batchJobs.length) {
+                const i = next++;
+                results[i] = await uploadOne(batchJobs[i]);
+            }
+        };
+        await Promise.all(
+            Array.from({ length: Math.min(MAX_CONCURRENT, batchJobs.length) }, worker)
+        );
+
+        onSettledRef.current.get(batchId)?.(results);
+        onSettledRef.current.delete(batchId);
+    }, [patchJobs, uploadOne]);
+
+    // items: (File | { file: File, thumbnail?: File })[] — a plain File is what
+    // the bulk drop zone passes; Add Asset (single) passes the { file,
+    // thumbnail } shape so its optional video/audio thumbnail rides along
+    // with the same job. meta: { is_public, storage_provider, createdBy }
+    // source: "single" | "bulk" — both flows share this one queue (and the
+    // floating UploadProgressToast) so an upload survives navigation either
+    // way, but Add Assets Bulk only lists jobs tagged "bulk" on its own page
+    // (see AddAssetsBulk.jsx) so a lone Add File upload doesn't show up
+    // there looking like a bulk batch that was never actually started.
+    const addBatch = useCallback((items, meta, { onSettled, source = "bulk" } = {}) => {
+        const batchId = nanoid();
+        const newJobs = items.map((item) => {
+            const file = item instanceof File ? item : item.file;
+            const thumbnail = item instanceof File ? undefined : item.thumbnail;
+            const { ok, reason } = validateAssetFile(file);
+            return {
+                id: nanoid(),
+                batchId,
+                source,
+                file,
+                thumbnail,
+                name: file.name,
+                size: file.size,
+                mime: file.type,
+                status: ok ? "queued" : "invalid",
+                progress: ok ? 0 : 100,
+                error: ok ? null : reason,
+                asset: null,
+                meta,
+            };
+        });
+
+        setJobs((prev) => [...prev, ...newJobs]);
+
+        const uploadable = newJobs.filter((j) => j.status === "queued");
+        if (onSettled) {
+            if (uploadable.length) onSettledRef.current.set(batchId, onSettled);
+            else onSettled();
+        }
+        if (uploadable.length) runBatch(batchId, uploadable);
+
+        return batchId;
+    }, [runBatch]);
+
+    // ─── Retry a single failed job ──────────────────────────────────────────
+    const retryJob = useCallback(async (jobId) => {
+        let target = null;
+        setJobs((prev) => prev.map((j) => {
+            if (j.id !== jobId) return j;
+            target = j;
+            return { ...j, status: "uploading", progress: 0, error: null };
+        }));
+        if (!target) return;
+        await uploadOne(target);
+    }, [uploadOne]);
+
+    const removeJob = useCallback((jobId) => {
+        setJobs((prev) => prev.filter((j) => j.id !== jobId || j.status === "uploading"));
+    }, []);
+
+    // source: restricts the clear to that source's finished jobs only, so
+    // clicking "Clear finished" on the Bulk page can't wipe out a still-shown
+    // Add File (single) entry in the floating toast, and vice versa.
+    const clearFinished = useCallback((source) => {
+        setJobs((prev) => prev.filter((j) =>
+            j.status === "uploading" || j.status === "queued" || (source && j.source !== source)
+        ));
+    }, []);
+
+    return (
+        <UploadQueueContext.Provider value={{ jobs, addBatch, retryJob, removeJob, clearFinished }}>
+            {children}
+        </UploadQueueContext.Provider>
+    );
+}
diff --git a/apps/web/src/contexts/provider/AdminProvider.jsx b/apps/web/src/contexts/provider/AdminProvider.jsx
new file mode 100644
index 0000000..ee92c14
--- /dev/null
+++ b/apps/web/src/contexts/provider/AdminProvider.jsx
@@ -0,0 +1,52 @@
+// ─── AdminProvider.jsx ─────────────────────────────────────────────────────────
+import { AssetsProvider } from "../AdminAssetsContext";
+import { UploadQueueProvider } from "../UploadQueueContext";
+import { AdminDashboardProvider } from "../AdminDashboardContext"
+import { UserProvider } from "../AdminUserContext";
+import { UserGroupProvider } from "../AdminUserGroupContext";
+import { CoursesProvider } from "../AdminCoursesContext";
+import { LibraryProvider } from "../AdminLibraryContext";
+import { AdminTaskProvider } from "../AdminTaskContext";
+import { AdminTiersProvider } from "../AdminTiersContext";
+import { AdminCategoriesProvider } from "../AdminCategoriesContext";
+import { ProfileProvider } from "../ProfileProvider";
+import { AdvertisementsProvider } from "../AdminAdvertisementContext";
+import { NotificationBroadcastsProvider } from "../AdminNotificationBroadcastContext";
+import { AdminNotificationProvider } from "../AdminNotificationContext"
+import { AdminCourseReadingProgressProvider } from "../AdminCourseReadingProgressContext";
+
+export const AdminProvider = ({ children }) => {
+  return (
+    <AdminNotificationProvider>
+      <AdminDashboardProvider>
+        <ProfileProvider apiBase="/admin">
+          <AssetsProvider>
+          <UploadQueueProvider>
+            <AdvertisementsProvider>
+              <NotificationBroadcastsProvider>
+                <UserProvider>
+                  <UserGroupProvider>
+                    <AdminTiersProvider>
+                      <AdminCategoriesProvider>
+                        <CoursesProvider>
+                          <LibraryProvider>
+                            <AdminCourseReadingProgressProvider>
+                              <AdminTaskProvider>
+                                {children}
+                              </AdminTaskProvider>
+                            </AdminCourseReadingProgressProvider>
+                          </LibraryProvider>
+                        </CoursesProvider>
+                      </AdminCategoriesProvider>
+                    </AdminTiersProvider>
+                  </UserGroupProvider>
+                </UserProvider>
+              </NotificationBroadcastsProvider>
+            </AdvertisementsProvider>
+          </UploadQueueProvider>
+          </AssetsProvider>
+        </ProfileProvider>
+      </AdminDashboardProvider>
+    </AdminNotificationProvider>
+  );
+};
diff --git a/apps/web/src/contexts/provider/ClientProvider.jsx b/apps/web/src/contexts/provider/ClientProvider.jsx
new file mode 100644
index 0000000..96bbd3d
--- /dev/null
+++ b/apps/web/src/contexts/provider/ClientProvider.jsx
@@ -0,0 +1,37 @@
+import { ClientCoursesProvider } from "../ClientCoursesContext"
+import { ClientLibraryProvider } from "../ClientLibraryContext"
+import { ClientTiersProvider } from "../ClientTiersProvider"
+import { ProfileProvider } from "../ProfileProvider"
+import { TaskProgressProvider } from "../ClientTaskProgressContext"
+import { TaskProvider } from "../ClientTaskContext"
+import { GroupProvider } from "../ClientGroupContext"
+import { ClientAdvertisementsProvider } from "../ClientAdvertisementContext"
+import { ClientNotificationProvider } from "../ClientNotificationContext"
+import { CourseReadingProgressProvider } from "../ClientCourseReadingProgressContext"
+
+
+export const ClientProvider = ({ children }) => {
+    return (
+        <ClientNotificationProvider>
+            <ProfileProvider>
+                <ClientAdvertisementsProvider>
+                    <ClientCoursesProvider>
+                        <ClientLibraryProvider>
+                            <CourseReadingProgressProvider>
+                                <ClientTiersProvider>
+                                    <TaskProgressProvider>
+                                        <TaskProvider>
+                                            <GroupProvider>
+                                                {children}
+                                            </GroupProvider>
+                                        </TaskProvider>
+                                    </TaskProgressProvider>
+                                </ClientTiersProvider>
+                            </CourseReadingProgressProvider>
+                        </ClientLibraryProvider>
+                    </ClientCoursesProvider>
+                </ClientAdvertisementsProvider>
+            </ProfileProvider>
+        </ClientNotificationProvider>
+    )
+}
\ No newline at end of file
diff --git a/apps/web/src/contexts/provider/StaffProvider.jsx b/apps/web/src/contexts/provider/StaffProvider.jsx
new file mode 100644
index 0000000..130f49b
--- /dev/null
+++ b/apps/web/src/contexts/provider/StaffProvider.jsx
@@ -0,0 +1,25 @@
+// ─── StaffProviders.jsx ───────────────────────────────────────────────────────
+// Wrap all staff contexts together so you only need one import in your router.
+//
+// Usage in App.jsx / layout:
+//   import { StaffProviders } from "@/contexts/staff";
+//   <StaffProviders><StaffLayout /></StaffProviders>
+
+import { StaffUserProvider }  from "../StaffUserContext";
+import { StaffGroupProvider } from "../StaffGroupContext";
+import { StaffTaskProvider }  from "../StaffTaskContext";
+import { StaffScoreProvider } from "../StaffScoreContext";
+
+export function StaffProviders({ children }) {
+  return (
+    <StaffUserProvider>
+      <StaffGroupProvider>
+        <StaffTaskProvider>
+          <StaffScoreProvider>
+            {children}
+          </StaffScoreProvider>
+        </StaffTaskProvider>
+      </StaffGroupProvider>
+    </StaffUserProvider>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/data/activity.data.js b/apps/web/src/data/activity.data.js
new file mode 100644
index 0000000..0e382c5
--- /dev/null
+++ b/apps/web/src/data/activity.data.js
@@ -0,0 +1,168 @@
+// Action registry — label + badge colour per action key
+
+export const ACTION_CONFIG = {
+  // ── Auth ────────────────────────────────────────────────────────────────────
+  login:            { label: "Logged In",           group: "auth"     },
+  logout:           { label: "Logged Out",          group: "auth"     },
+  register:         { label: "Registered",          group: "auth"     },
+  password_change:  { label: "Changed Password",    group: "auth"     },
+
+  // ── Profile ─────────────────────────────────────────────────────────────────
+  update_profile:   { label: "Updated Profile",     group: "profile"  },
+  revoke_session:   { label: "Revoked Session",     group: "profile"  },
+
+  // ── Learning ────────────────────────────────────────────────────────────────
+  lesson_read:      { label: "Read Lesson",         group: "learn"    },
+  submit_task:      { label: "Submitted Task",      group: "learn"    },
+  visit_link:       { label: "Visited Link",        group: "learn"    },
+
+  // ── User management ─────────────────────────────────────────────────────────
+  create_staff:      { label: "Created Staff",       group: "mgmt"    },
+  update_user:       { label: "Updated User",        group: "mgmt"    },
+  deactivate_user:   { label: "Deactivated User",    group: "danger"  },
+  restore_user:      { label: "Restored User",       group: "success" },
+  terminate_session: { label: "Terminated Session",  group: "danger"  },
+  set_user_status:   { label: "Set User Status",     group: "mgmt"    },
+
+  // ── Courses ─────────────────────────────────────────────────────────────────
+  create_course:         { label: "Created Course",         group: "course" },
+  update_course:         { label: "Updated Course",         group: "course" },
+  archive_course:        { label: "Archived Course",        group: "course" },
+  restore_course:        { label: "Restored Course",        group: "course" },
+  bulk_archive_courses:  { label: "Bulk Archived Courses",  group: "course" },
+  bulk_restore_courses:  { label: "Bulk Restored Courses",  group: "course" },
+  sync_prerequisites:    { label: "Synced Prerequisites",   group: "course" },
+  sync_instructors:      { label: "Synced Instructors",     group: "course" },
+
+  // ── Units ───────────────────────────────────────────────────────────────────
+  create_unit:         { label: "Created Unit",         group: "course" },
+  update_unit:         { label: "Updated Unit",         group: "course" },
+  archive_unit:        { label: "Archived Unit",        group: "course" },
+  restore_unit:        { label: "Restored Unit",        group: "course" },
+  bulk_archive_units:  { label: "Bulk Archived Units",  group: "course" },
+  bulk_restore_units:  { label: "Bulk Restored Units",  group: "course" },
+
+  // ── Lessons ─────────────────────────────────────────────────────────────────
+  create_lesson:         { label: "Created Lesson",         group: "course" },
+  update_lesson:         { label: "Updated Lesson",         group: "course" },
+  archive_lesson:        { label: "Archived Lesson",        group: "course" },
+  restore_lesson:        { label: "Restored Lesson",        group: "course" },
+  bulk_archive_lessons:  { label: "Bulk Archived Lessons",  group: "course" },
+  bulk_restore_lessons:  { label: "Bulk Restored Lessons",  group: "course" },
+  upsert_lesson_page:    { label: "Updated Lesson Page",    group: "course" },
+
+  // ── Quizzes ─────────────────────────────────────────────────────────────────
+  create_quiz:  { label: "Created Quiz",  group: "course" },
+  update_quiz:  { label: "Updated Quiz",  group: "course" },
+  archive_quiz: { label: "Archived Quiz", group: "course" },
+  restore_quiz: { label: "Restored Quiz", group: "course" },
+
+  // ── Questions ───────────────────────────────────────────────────────────────
+  create_question:         { label: "Created Question",         group: "course" },
+  update_question:         { label: "Updated Question",         group: "course" },
+  archive_question:        { label: "Archived Question",        group: "course" },
+  restore_question:        { label: "Restored Question",        group: "course" },
+  bulk_archive_questions:  { label: "Bulk Archived Questions",  group: "course" },
+  bulk_restore_questions:  { label: "Bulk Restored Questions",  group: "course" },
+
+  // ── Assessments ─────────────────────────────────────────────────────────────
+  create_assessment:  { label: "Created Assessment",  group: "course" },
+  update_assessment:  { label: "Updated Assessment",  group: "course" },
+  archive_assessment: { label: "Archived Assessment", group: "course" },
+  restore_assessment: { label: "Restored Assessment", group: "course" },
+
+  // ── Task Lists ──────────────────────────────────────────────────────────────
+  create_task_list:         { label: "Created Task List",         group: "task" },
+  update_task_list:         { label: "Updated Task List",         group: "task" },
+  archive_task_list:        { label: "Archived Task List",        group: "task" },
+  restore_task_list:        { label: "Restored Task List",        group: "task" },
+  bulk_archive_task_lists:  { label: "Bulk Archived Task Lists",  group: "task" },
+  bulk_restore_task_lists:  { label: "Bulk Restored Task Lists",  group: "task" },
+  assign_groups:            { label: "Assigned Groups",           group: "task" },
+  unassign_groups:          { label: "Unassigned Groups",         group: "task" },
+
+  // ── Tasks ───────────────────────────────────────────────────────────────────
+  create_task:        { label: "Created Task",        group: "task" },
+  update_task:        { label: "Updated Task",        group: "task" },
+  archive_task:       { label: "Archived Task",       group: "task" },
+  restore_task:       { label: "Restored Task",       group: "task" },
+  bulk_archive_tasks: { label: "Bulk Archived Tasks", group: "task" },
+  bulk_restore_tasks: { label: "Bulk Restored Tasks", group: "task" },
+
+  // ── Task Completions ────────────────────────────────────────────────────────
+  archive_completion:         { label: "Archived Completion",         group: "task" },
+  restore_completion:         { label: "Restored Completion",         group: "task" },
+  bulk_archive_completions:   { label: "Bulk Archived Completions",   group: "task" },
+  bulk_restore_completions:   { label: "Bulk Restored Completions",   group: "task" },
+
+  // ── Groups ──────────────────────────────────────────────────────────────────
+  create_group:          { label: "Created Group",            group: "grp" },
+  update_group:          { label: "Updated Group",            group: "grp" },
+  deactivate_group:      { label: "Deactivated Group",        group: "grp" },
+  restore_group:         { label: "Restored Group",           group: "grp" },
+  bulk_deactivate_groups:{ label: "Bulk Deactivated Groups",  group: "grp" },
+  bulk_restore_groups:   { label: "Bulk Restored Groups",     group: "grp" },
+  add_user_to_group:     { label: "Added User to Group",      group: "grp" },
+  remove_user_from_group:{ label: "Removed User from Group",  group: "grp" },
+
+  // ── Subscriptions ───────────────────────────────────────────────────────────
+  create_tier_plan:         { label: "Created Subscription",         group: "commerce" },
+  update_tier_plan:         { label: "Updated Subscription",         group: "commerce" },
+  archive_tier_plan:        { label: "Archived Subscription",        group: "commerce" },
+  restore_tier_plan:        { label: "Restored Subscription",        group: "commerce" },
+  bulk_archive_tier_plans:  { label: "Bulk Archived Subscriptions",  group: "commerce" },
+  bulk_restore_tier_plans:  { label: "Bulk Restored Subscriptions",  group: "commerce" },
+  sync_plan_courses:        { label: "Synced Plan Courses",       group: "commerce" },
+  grant_tier:               { label: "Granted Subscription",              group: "success"  },
+  revoke_tier:              { label: "Revoked Subscription",              group: "danger"   },
+
+  // ── Products & Categories ───────────────────────────────────────────────────
+  upsert_course_product:  { label: "Set Course Product",       group: "commerce" },
+  remove_course_product:  { label: "Removed Course Product",   group: "commerce" },
+  sync_course_categories: { label: "Synced Course Categories", group: "commerce" },
+  create_category:        { label: "Created Category",         group: "commerce" },
+  update_category:        { label: "Updated Category",         group: "commerce" },
+  archive_category:       { label: "Archived Category",        group: "commerce" },
+  restore_category:       { label: "Restored Category",        group: "commerce" },
+
+  // ── Files ───────────────────────────────────────────────────────────────────
+  upload_asset:       { label: "Uploaded File",        group: "content" },
+  update_asset:       { label: "Updated File",         group: "content" },
+  archive_asset:      { label: "Archived File",        group: "content" },
+  restore_asset:      { label: "Restored File",        group: "content" },
+  bulk_archive_assets:{ label: "Bulk Archived Files",  group: "content" },
+  bulk_restore_assets:{ label: "Bulk Restored Files",  group: "content" },
+
+  // ── Advertisements ──────────────────────────────────────────────────────────
+  create_advertisement:        { label: "Created Ad",              group: "content" },
+  update_advertisement:        { label: "Updated Ad",              group: "content" },
+  archive_advertisement:       { label: "Archived Ad",             group: "content" },
+  restore_advertisement:       { label: "Restored Ad",             group: "content" },
+  bulk_archive_advertisements: { label: "Bulk Archived Ads",       group: "content" },
+  bulk_restore_advertisements: { label: "Bulk Restored Ads",       group: "content" },
+};
+
+// Badge class per group
+const GROUP_STYLES = {
+  auth:     "bg-blue-50    text-blue-700    border-blue-200    dark:bg-blue-950    dark:text-blue-300    dark:border-blue-800",
+  profile:  "bg-violet-50  text-violet-700  border-violet-200  dark:bg-violet-950  dark:text-violet-300  dark:border-violet-800",
+  learn:    "bg-teal-50    text-teal-700    border-teal-200    dark:bg-teal-950    dark:text-teal-300    dark:border-teal-800",
+  mgmt:     "bg-orange-50  text-orange-700  border-orange-200  dark:bg-orange-950  dark:text-orange-300  dark:border-orange-800",
+  danger:   "bg-red-50     text-red-700     border-red-200     dark:bg-red-950     dark:text-red-300     dark:border-red-800",
+  success:  "bg-green-50   text-green-700   border-green-200   dark:bg-green-950   dark:text-green-300   dark:border-green-800",
+  course:   "bg-amber-50   text-amber-700   border-amber-200   dark:bg-amber-950   dark:text-amber-300   dark:border-amber-800",
+  task:     "bg-indigo-50  text-indigo-700  border-indigo-200  dark:bg-indigo-950  dark:text-indigo-300  dark:border-indigo-800",
+  grp:      "bg-sky-50     text-sky-700     border-sky-200     dark:bg-sky-950     dark:text-sky-300     dark:border-sky-800",
+  commerce: "bg-rose-50    text-rose-700    border-rose-200    dark:bg-rose-950    dark:text-rose-300    dark:border-rose-800",
+  content:  "bg-slate-100  text-slate-600   border-slate-200   dark:bg-slate-800   dark:text-slate-400   dark:border-slate-700",
+};
+
+const FALLBACK = "bg-muted text-muted-foreground border-border";
+
+export function getActionBadge(action) {
+  const cfg = ACTION_CONFIG[action];
+  return {
+    label:     cfg?.label     ?? action,
+    className: cfg ? (GROUP_STYLES[cfg.group] ?? FALLBACK) : FALLBACK,
+  };
+}
diff --git a/apps/web/src/data/adminDashboard.data.jsx b/apps/web/src/data/adminDashboard.data.jsx
new file mode 100644
index 0000000..2f93090
--- /dev/null
+++ b/apps/web/src/data/adminDashboard.data.jsx
@@ -0,0 +1,26 @@
+// Centralizes all icon maps, link maps, and chart link maps for the
+// admin dashboard. To add a new section (e.g. Tasks), just add a new
+// export block here and import it in UsersDashboard.jsx.
+
+import {
+  Users, UserCheck, UserMinus, ShieldCheck,
+  Archive, Layers,
+} from "lucide-react";
+
+// ─── Users ───────────────────────────────────────────────────────────────────
+
+export const USER_STAT_MAP = {
+  total:    { label: "Total Users",  icon: <Users       className="size-5 text-muted-foreground" /> },
+  active:   { label: "Active",       icon: <UserCheck   className="size-5 text-green-500" /> },
+  inactive: { label: "Inactive",     icon: <UserMinus   className="size-5 text-red-400" /> },
+  verified: { label: "Verified",     icon: <ShieldCheck className="size-5 text-blue-500" /> },
+  archived: { label: "Archived",     icon: <Archive     className="size-5 text-muted-foreground" /> },
+};
+
+// ─── User Groups ──────────────────────────────────────────────────────────────
+
+export const GROUP_STAT_MAP = {
+  total:    { label: "Total Groups", icon: <Layers    className="size-5 text-muted-foreground" /> },
+  active:   { label: "Active",       icon: <UserCheck className="size-5 text-green-500" /> },
+  inactive: { label: "Inactive",     icon: <UserMinus className="size-5 text-red-400" /> },
+};
\ No newline at end of file
diff --git a/apps/web/src/data/adminTiles.data.js b/apps/web/src/data/adminTiles.data.js
new file mode 100644
index 0000000..58d21b1
--- /dev/null
+++ b/apps/web/src/data/adminTiles.data.js
@@ -0,0 +1,56 @@
+import { Users, GitFork, FolderOpen, BookText, BookCheck, FileText, ListCheck, ShieldCheck, Megaphone, Bell, Cog } from "lucide-react";
+
+export const ADMIN_SECTIONS = [
+    {
+        id: "section-users",
+        tab: "User Management",
+        title: "User Management",
+        description: "Manage people across different systems",
+        tiles: [
+            { key: "users", label: "Users", icon: Users, link: "/admin/users" },
+            { key: "user-groups", label: "User Groups", icon: GitFork, link: "/admin/groups" },
+
+        ],
+    },
+    {
+        id: "section-resources",
+        tab: "Resource Management",
+        title: "Resource Management",
+        description: "It includes files management and subscriptions.",
+        tiles: [
+            { key: "assets", label: "Files", icon: FolderOpen, link: "/admin/assets" },
+            { key: "tiers", label: "Subscriptions", icon: ShieldCheck, link: "/admin/tiers/plans" },
+        ],
+    },
+    {
+        id: "section-courses",
+        tab: "Content Management",
+        title: "Content Management",
+        description: "Manage tasks and courses",
+        tiles: [
+            { key: "courses", label: "Courses", icon: BookText, link: "/admin/courses" },
+            { key: "units", label: "Units", icon: BookCheck, link: "/admin/units" },
+            { key: "lessons", label: "Lessons", icon: FileText, link: "/admin/lessons" },
+            { key: "tasks", label: "Tasks", icon: ListCheck, link: "/admin/taskList" },
+        ],
+    },
+    {
+        id: "section-site",
+        tab: "Site Content",
+        title: "Site Content",
+        description: "Manage public-facing content",
+        tiles: [
+            { key: "advertisements", label: "Ads", icon: Megaphone, link: "/admin/advertisements" },
+            { key: "notifications", label: "Alerts", icon: Bell, link: "/admin/announcements" },
+        ],
+    },
+    {
+        id: "section-system",
+        tab: "System",
+        title: "System",
+        description: "Background jobs and automation",
+        tiles: [
+            { key: "jobs", label: "Jobs", icon: Cog, link: "/admin/jobs" },
+        ],
+    },
+];
\ No newline at end of file
diff --git a/apps/web/src/data/advertisement.data.js b/apps/web/src/data/advertisement.data.js
new file mode 100644
index 0000000..7e300a4
--- /dev/null
+++ b/apps/web/src/data/advertisement.data.js
@@ -0,0 +1,44 @@
+// data/advertisements.data.js
+import { Megaphone, Image } from "lucide-react";
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+// Drives: filter dropdown options, type badge label/icon on each card,
+// and which fields the Add/Edit form shows (hero needs headline/description/ctas,
+// banner is closer to image-only).
+
+export const ADVERTISEMENT_TYPES = [
+    { value: "hero",    label: "Hero",    icon: Megaphone,   description: "Large featured banner with headline, description, and CTAs" },
+    { value: "banner",  label: "Banner",  icon: Image,       description: "Simple image banner" },
+];
+
+export const ADVERTISEMENT_TYPE_MAP = Object.fromEntries(
+    ADVERTISEMENT_TYPES.map((t) => [t.value, t])
+);
+
+// ─── Statuses ───────────────────────────────────────────────────────────────
+// Drives: filter dropdown options, status badge color/label on each card.
+
+export const ADVERTISEMENT_STATUSES = [
+    { value: "draft",     label: "Draft",     badgeClass: "bg-muted text-muted-foreground" },
+    { value: "active",    label: "Active",    badgeClass: "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400" },
+    { value: "scheduled", label: "Scheduled", badgeClass: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400" },
+    { value: "expired",   label: "Expired",   badgeClass: "bg-muted text-muted-foreground" },
+];
+
+export const ADVERTISEMENT_STATUS_MAP = Object.fromEntries(
+    ADVERTISEMENT_STATUSES.map((s) => [s.value, s])
+);
+
+// Filterable subset for the main (non-archived) list. "expired" is excluded —
+// the expire_advertisements cron sweeps any ad past its end_date into the
+// Archived table within a minute, so this list will practically never hold
+// one; offering it as a filter here just returns an empty result.
+export const ADVERTISEMENT_FILTERABLE_STATUSES = ADVERTISEMENT_STATUSES.filter(
+    (s) => s.value !== "expired"
+);
+
+// Max number of CTAs allowed per advertisement (matches backend normalizeCtas slice(0,2))
+export const MAX_CTAS = 2;
+
+// Max number of badge label chips allowed per advertisement (matches backend normalizeBadgeLabels slice(0,2))
+export const MAX_BADGE_LABELS = 2;
\ No newline at end of file
diff --git a/apps/web/src/data/cronPresets.data.js b/apps/web/src/data/cronPresets.data.js
new file mode 100644
index 0000000..709ef43
--- /dev/null
+++ b/apps/web/src/data/cronPresets.data.js
@@ -0,0 +1,34 @@
+// data/cronPresets.data.js
+// Mirrors backend data/cronPresets.data.js — the only schedule options the UI offers.
+
+export const CRON_PRESET_OPTIONS = [
+    { value: "every_minute",  label: "Every minute" },
+    { value: "every_5_min",   label: "Every 5 minutes" },
+    { value: "every_15_min",  label: "Every 15 minutes" },
+    { value: "hourly",        label: "Hourly" },
+    { value: "every_6_hours", label: "Every 6 hours" },
+    { value: "daily",         label: "Daily at midnight" },
+];
+
+export const CRON_PRESET_MAP = Object.fromEntries(
+    CRON_PRESET_OPTIONS.map((p) => [p.value, p])
+);
+
+// job_name -> friendly copy (label/description come from the API too, but this
+// is used as a fallback and for the settings icon).
+export const JOB_LABELS = {
+    taskOverdue:       { label: "Task Alerts (Admin)", description: "Automatically marks expired tasks as overdue or completed, and notifies admins." },
+    userNotifications: { label: "Task Alerts (Users)", description: "Notifies affected users when their tasks are automatically marked overdue or completed." },
+    issueCertificates: { label: "Certificate Issued", description: "Notifies users when a course certificate is ready." },
+    expireUserTiers:   { label: "Subscription Expired", description: "Notifies users when their subscription expires." },
+};
+
+// The only jobs that support a configurable target_status, and the values it accepts.
+export const TARGET_STATUS_OPTIONS = [
+    { value: "overdue",   label: "Overdue" },
+    { value: "completed", label: "Completed" },
+];
+
+export const TARGET_STATUS_MAP = Object.fromEntries(
+    TARGET_STATUS_OPTIONS.map((s) => [s.value, s])
+);
diff --git a/apps/web/src/data/landingPage.data.js b/apps/web/src/data/landingPage.data.js
new file mode 100644
index 0000000..141ddac
--- /dev/null
+++ b/apps/web/src/data/landingPage.data.js
@@ -0,0 +1,6 @@
+import { Mail, Globe } from "lucide-react";
+
+export const ContactData = [
+    { id: 1, icon: Mail, label: "Email:", value: "info@philproperties.ph" },
+    { id: 2, icon: Globe, label: "Website:", value: "philproperties.ph" },
+]
\ No newline at end of file
diff --git a/apps/web/src/data/notificationBroadcast.data.js b/apps/web/src/data/notificationBroadcast.data.js
new file mode 100644
index 0000000..78b4482
--- /dev/null
+++ b/apps/web/src/data/notificationBroadcast.data.js
@@ -0,0 +1,32 @@
+// data/notificationBroadcast.data.js
+import { Shield, Users, Megaphone, ListCheck, BookText, ShieldCheck } from "lucide-react";
+
+// ─── Target types ─────────────────────────────────────────────────────────────
+// Drives: target select in the Add form, target badge on each card.
+// needsTarget: true means the form must also show a picker for target_id.
+
+export const TARGET_TYPE_OPTIONS = [
+    { value: "admin",     label: "Admins",         icon: Shield,      description: "Visible only in the admin notification bell", needsTarget: false },
+    { value: "user",      label: "Users",          icon: Users,       description: "Sent to every active user", needsTarget: false },
+    { value: "both",      label: "Admins & Users", icon: Megaphone,   description: "Sent to admins and every active user", needsTarget: false },
+    { value: "task_list", label: "Task List",      icon: ListCheck,   description: "Sent to everyone assigned to a specific task list", needsTarget: true },
+    { value: "course",    label: "Course",         icon: BookText,    description: "Sent to everyone with access to a specific course", needsTarget: true },
+    { value: "tier_plan", label: "Subscription",      icon: ShieldCheck, description: "Sent to everyone currently on a specific subscription plan", needsTarget: true },
+];
+
+export const TARGET_TYPE_MAP = Object.fromEntries(
+    TARGET_TYPE_OPTIONS.map((a) => [a.value, a])
+);
+
+// ─── Statuses ───────────────────────────────────────────────────────────────
+// Drives: filter dropdown options, status badge color/label on each card.
+
+export const BROADCAST_STATUSES = [
+    { value: "draft",    label: "Draft",    badgeClass: "bg-muted text-muted-foreground" },
+    { value: "sent",     label: "Sent",     badgeClass: "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400" },
+    { value: "archived", label: "Archived", badgeClass: "bg-muted text-muted-foreground" },
+];
+
+export const BROADCAST_STATUS_MAP = Object.fromEntries(
+    BROADCAST_STATUSES.map((s) => [s.value, s])
+);
diff --git a/apps/web/src/data/notificationTemplateStatus.data.js b/apps/web/src/data/notificationTemplateStatus.data.js
new file mode 100644
index 0000000..45756b9
--- /dev/null
+++ b/apps/web/src/data/notificationTemplateStatus.data.js
@@ -0,0 +1,12 @@
+// A template is "sent" once it has a live title/message — that's the only
+// content services/notificationTemplate.service.js's renderNotification() ever
+// reads on the backend. Editing a sent template writes to draft_title/
+// draft_message instead, so "pending changes" means there's a draft sitting on
+// top of the live version. Mirrors emailTemplateStatus.data.js.
+export const hasPendingChanges = (t) =>
+    t?.status === "sent" && (t?.draft_title != null || t?.draft_message != null);
+
+export const STATUS_META = {
+    draft: { label: "Draft", badgeClass: "bg-muted text-muted-foreground border-border" },
+    sent:  { label: "Sent",  badgeClass: "bg-emerald-100 text-emerald-700 border-emerald-400 dark:bg-emerald-900/40 dark:text-emerald-400 dark:border-emerald-700" },
+};
diff --git a/apps/web/src/data/placement.data.js b/apps/web/src/data/placement.data.js
new file mode 100644
index 0000000..207eec2
--- /dev/null
+++ b/apps/web/src/data/placement.data.js
@@ -0,0 +1,24 @@
+// data/placement.data.js
+//
+// Mirrors the backend placement registry (models/advertisements/advertisements.placements.js
+// in new_starr). Each entry is a page + position slot; the format (hero/banner/popup/sidebar)
+// is derived from the placement, never chosen independently. Keep this list in sync with the
+// backend registry when adding a new placement — same pattern as ADVERTISEMENT_TYPES already
+// mirroring the backend type ENUM.
+
+export const PLACEMENTS = [
+    { key: "dashboard.hero",         format: "hero",    page: "dashboard",      pageLabel: "Dashboard",      slotLabel: "Hero (top of page)" },
+    { key: "tier_plans.banner",      format: "banner",  page: "tier_plans",     pageLabel: "Subscriptions",     slotLabel: "Banner (above plan cards)" },
+    { key: "course_details.banner",  format: "banner",  page: "course_details", pageLabel: "Course Details", slotLabel: "Banner (below hero)" },
+];
+
+export const PLACEMENT_MAP = Object.fromEntries(PLACEMENTS.map((p) => [p.key, p]));
+
+// Grouped by page — powers the cascading Page → Position picker in Add/EditAdvertisement.
+export const AD_PAGES = Object.values(
+    PLACEMENTS.reduce((acc, p) => {
+        if (!acc[p.page]) acc[p.page] = { page: p.page, pageLabel: p.pageLabel, placements: [] };
+        acc[p.page].placements.push(p);
+        return acc;
+    }, {})
+);
diff --git a/apps/web/src/data/placementLayouts.data.js b/apps/web/src/data/placementLayouts.data.js
new file mode 100644
index 0000000..fdd3818
--- /dev/null
+++ b/apps/web/src/data/placementLayouts.data.js
@@ -0,0 +1,44 @@
+// data/placementLayouts.data.js
+//
+// Declarative "wireframe recipe" per placement — powers <PlacementSkeleton />
+// in the advertisement creation wizard so admins can see roughly where their
+// ad will land before saving. Keys mirror PLACEMENTS in placement.data.js.
+// Adding a new placement: add one entry here, nothing else needs to change.
+//
+// Block kinds:
+//   nav      — thin top bar stand-in
+//   bar      — a rounded block; `size` controls height (sm/md/lg/xl);
+//              `highlight: true` marks it as the ad slot, `label` names it
+//   filters  — a row of small pill shapes
+//   grid     — a row of small equal boxes (card grid stand-in)
+//   list     — a couple of thin stacked rows (table/list stand-in)
+//   row      — a flex row of `columns`, each rendered like a `bar`
+//
+// `overlay` (optional, top-level) renders the base `blocks` dimmed with a
+// centered floating highlighted box on top — used for popups.
+
+export const PLACEMENT_LAYOUTS = {
+    "dashboard.hero": {
+        blocks: [
+            { kind: "nav" },
+            { kind: "bar", size: "xl", highlight: true, label: "Hero" },
+            { kind: "list", label: "My Groups" },
+            { kind: "grid", label: "Courses" },
+        ],
+    },
+    "course_details.banner": {
+        blocks: [
+            { kind: "nav" },
+            { kind: "bar", size: "lg", label: "Course hero" },
+            { kind: "bar", size: "sm", highlight: true, label: "Banner" },
+            { kind: "list", label: "Course content" },
+        ],
+    },
+    "tier_plans.banner": {
+        blocks: [
+            { kind: "nav" },
+            { kind: "bar", size: "md", highlight: true, label: "Banner" },
+            { kind: "grid", label: "Plan cards" },
+        ],
+    },
+};
diff --git a/apps/web/src/data/profile.data.js b/apps/web/src/data/profile.data.js
new file mode 100644
index 0000000..5cfdde8
--- /dev/null
+++ b/apps/web/src/data/profile.data.js
@@ -0,0 +1,13 @@
+// ─── Config ───────────────────────────────────────────────────────────────────
+export const ROLE_CONFIG = {
+  admin: { label: 'Administrator', variant: 'destructive' },
+  staff: { label: 'Staff', variant: 'secondary' },
+  client: { label: 'Client', variant: 'default' },
+  user:  { label: 'Client', variant: 'default' },  // ← add this
+}
+
+export const AVATAR_COLORS = {
+  admin:  'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
+  staff:  'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
+  client: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
+}
\ No newline at end of file
diff --git a/apps/web/src/hooks/use-mobile.js b/apps/web/src/hooks/use-mobile.js
new file mode 100644
index 0000000..9c47a0d
--- /dev/null
+++ b/apps/web/src/hooks/use-mobile.js
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange);
+  }, [])
+
+  return !!isMobile
+}
diff --git a/apps/web/src/hooks/useAssetFetchState.js b/apps/web/src/hooks/useAssetFetchState.js
new file mode 100644
index 0000000..f9043e8
--- /dev/null
+++ b/apps/web/src/hooks/useAssetFetchState.js
@@ -0,0 +1,33 @@
+// hooks/useAssetFetchState.js
+//
+// Fetches a single asset by id and reports a render-safe status for the
+// admin ViewXAsset pages. Guards the ~1s window where AssetsContext's
+// shared selectedAsset still holds the *previous* asset (from an earlier
+// /view/*/:assetId navigation) while the new fetch is in flight — without
+// this, the stale asset (and its already-resolved preview image/token)
+// briefly renders under the new URL before the real data arrives.
+import { useEffect, useState } from "react";
+import { useAssets } from "@/contexts/AdminAssetsContext";
+
+export function useAssetFetchState(assetId) {
+    const { selectedAsset, loading, fetchAsset } = useAssets();
+    const [fetchedAssetId, setFetchedAssetId] = useState(null);
+
+    useEffect(() => {
+        if (!assetId) return;
+        let active = true;
+        fetchAsset(assetId).finally(() => {
+            if (active) setFetchedAssetId(assetId);
+        });
+        return () => { active = false; };
+    }, [assetId, fetchAsset]);
+
+    const isCurrent = !!selectedAsset && String(selectedAsset.asset_id) === String(assetId);
+    const hasAttemptedCurrent = fetchedAssetId === assetId;
+
+    return {
+        asset: isCurrent ? selectedAsset : null,
+        loading: loading || (!isCurrent && !hasAttemptedCurrent),
+        notFound: !loading && hasAttemptedCurrent && !isCurrent,
+    };
+}
diff --git a/apps/web/src/hooks/useAssetPreviewSrc.js b/apps/web/src/hooks/useAssetPreviewSrc.js
new file mode 100644
index 0000000..8f52a01
--- /dev/null
+++ b/apps/web/src/hooks/useAssetPreviewSrc.js
@@ -0,0 +1,64 @@
+// hooks/useAssetPreviewSrc.js
+//
+// React binding around utils/media.util.js's resolveAssetSrc/fetchAssetPreviewSrc.
+// Replaces the duplicated useState+useEffect token-resolution block that used
+// to live in each admin ViewXAsset page.
+//
+// Always resolves a preview regardless of is_public — admins need to see the
+// real asset to manage it. (The download-only-no-preview treatment is a
+// client-facing concept, not an admin one — see downloadAsset()/saveBlob() in
+// media.util.js for the download affordance, used alongside the preview here.)
+import { useEffect, useState } from "react";
+import { resolveAssetSrc, fetchAssetPreviewSrc } from "@/utils/media.util";
+
+export function useAssetPreviewSrc(asset, { scope = "admin" } = {}) {
+    const [src, setSrc] = useState(null);
+    const [thumbnailUrl, setThumbnailUrl] = useState(null);
+    const [loading, setLoading] = useState(false);
+
+    // Callers pass a fresh object literal on every render (built from a
+    // content prop), so the effect below keys off these primitive fields
+    // instead of `asset` itself — depending on the object reference would
+    // re-fire the effect (and its setState calls) on every render, looping
+    // forever since each firing produces a new src ("" vs null) that never
+    // stabilizes.
+    //
+    // stream_token must be carried through: getAsset()/getAssets() already
+    // embed a valid token on S3-backed rows (attachStreamTokens), and
+    // resolveAssetSrc() checks it first. Dropping it here forced every
+    // preview — on every View/Edit asset page — through the async
+    // fetchAssetPreviewSrc() mint round-trip even when a usable token was
+    // already sitting on the asset, which is most of the visible ~1s delay
+    // before the real image/video appears.
+    const { asset_id, storage_provider, file_url, thumbnail_url, stream_token } = asset ?? {};
+
+    useEffect(() => {
+        setSrc(null);
+        setThumbnailUrl(null);
+
+        if (!asset_id && !file_url && !thumbnail_url) return;
+
+        const currentAsset = { asset_id, storage_provider, file_url, thumbnail_url, stream_token };
+
+        const fastSrc = resolveAssetSrc(currentAsset);
+        if (fastSrc) {
+            setSrc(fastSrc);
+            setThumbnailUrl(thumbnail_url ?? null);
+            return;
+        }
+
+        let cancelled = false;
+        setLoading(true);
+        fetchAssetPreviewSrc(currentAsset, { scope }).then((result) => {
+            if (cancelled) return;
+            setSrc(result.src);
+            setThumbnailUrl(result.thumbnailUrl);
+        }).finally(() => {
+            if (!cancelled) setLoading(false);
+        });
+
+        return () => { cancelled = true; };
+    }, [asset_id, storage_provider, file_url, thumbnail_url, stream_token, scope]);
+
+    return { src, thumbnailUrl, loading };
+}
diff --git a/apps/web/src/hooks/useDateFormat.js b/apps/web/src/hooks/useDateFormat.js
new file mode 100644
index 0000000..d7943d7
--- /dev/null
+++ b/apps/web/src/hooks/useDateFormat.js
@@ -0,0 +1,37 @@
+import { useDateTimePreference } from '@/contexts/DateTimePreferenceContext';
+import {
+  fmtDate,
+  fmtDateTime,
+  fmtDateShort,
+  fmtTime,
+  fmtCurrency,
+  fmtNumber,
+  fmtISO,
+} from '@/utils/datetime.util';
+
+/**
+ * Returns bound date/time formatters that automatically apply the user's
+ * timezone preference (Local or UTC) from DateTimePreferenceContext.
+ *
+ * Usage:
+ *   const { fmtDate, fmtDateTime } = useDateFormat()
+ *   <span>{fmtDateTime(row.createdAt)}</span>
+ *
+ * fmtCurrency, fmtNumber, and fmtISO are also returned but are not
+ * affected by the timezone preference.
+ */
+export function useDateFormat() {
+  const { timezone } = useDateTimePreference();
+  const opts = { timezone };
+
+  return {
+    fmtDate:      (v) => fmtDate(v, opts),
+    fmtDateTime:  (v) => fmtDateTime(v, opts),
+    fmtDateShort: (v) => fmtDateShort(v, opts),
+    fmtTime:      (v) => fmtTime(v, opts),
+    fmtCurrency:  (v, currency) => fmtCurrency(v, currency),
+    fmtNumber:    (v, decimals) => fmtNumber(v, { minimumFractionDigits: decimals }),
+    fmtISO,
+    timezone,
+  };
+}
diff --git a/apps/web/src/hooks/useDetectedCountry.js b/apps/web/src/hooks/useDetectedCountry.js
new file mode 100644
index 0000000..9ab15ef
--- /dev/null
+++ b/apps/web/src/hooks/useDetectedCountry.js
@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react'
+
+const COUNTRY_API_URL = import.meta.env.VITE_COUNTRY_API_URL
+const FALLBACK_COUNTRY = 'PH'
+
+/**
+ * Detects the caller's ISO 3166-1 alpha-2 country code via VITE_COUNTRY_API_URL
+ * (defaults to the free hosted https://api.country.is — self-hostable at
+ * https://github.com/lineofflight/country). Falls back to FALLBACK_COUNTRY
+ * if the endpoint is unset, unreachable, or returns no country.
+ */
+export function useDetectedCountry() {
+  const [country, setCountry] = useState(FALLBACK_COUNTRY)
+
+  useEffect(() => {
+    if (!COUNTRY_API_URL) return
+
+    let cancelled = false
+
+    fetch(COUNTRY_API_URL)
+      .then((res) => (res.ok ? res.json() : Promise.reject(res.status)))
+      .then((data) => {
+        if (!cancelled && data?.country) setCountry(data.country)
+      })
+      .catch(() => {})
+
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  return country
+}
diff --git a/apps/web/src/hooks/useMediaWatchGuard.js b/apps/web/src/hooks/useMediaWatchGuard.js
new file mode 100644
index 0000000..715ad29
--- /dev/null
+++ b/apps/web/src/hooks/useMediaWatchGuard.js
@@ -0,0 +1,125 @@
+import { useRef, useCallback, useMemo, useEffect } from "react";
+
+// How many progress checkpoints we aim to spread across a clip's duration,
+// clamped between a floor (never chattier than this even for tiny clips) and
+// a ceiling (routine polling shouldn't exceed roughly once a minute).
+const MIN_INTERVAL_MS    = 8000;
+const MAX_INTERVAL_MS    = 60000;
+const CHECKPOINTS_TARGET = 4;
+
+function computeThrottleMs(durationSeconds) {
+    if (!durationSeconds) return MIN_INTERVAL_MS; // duration not known yet — stay conservative
+    return Math.min(MAX_INTERVAL_MS, Math.max(MIN_INTERVAL_MS, (durationSeconds * 1000) / CHECKPOINTS_TARGET));
+}
+
+// Shared anti-skip guard for VideoBlock/AudioBlock's watch-progress tracking.
+//
+// Tracks the furthest point actually reached during normal forward playback
+// (never during a seek) so seek targets can be clamped to "rewind only, never
+// skip ahead" — a scrub/keyboard-seek/programmatic currentTime write past that
+// point snaps back instead of landing. This is a client-side UX deterrent only;
+// the server independently re-validates elapsed wall-clock time per sample
+// (see recordWatchProgress) since a direct API call bypasses this entirely.
+//
+// The seek-cap only applies when `antiSkipEnabled` is true — the caller passes
+// this based on whether the lesson actually has a watch_percent/watch_video/
+// listen_audio completion requirement configured. Without one there's nothing
+// being enforced, so seeking is left completely free (default: disabled).
+//
+// Routine progress reports are throttled at an interval scaled to the clip's
+// own duration (~4 checkpoints across it, capped at once a minute) rather than
+// a flat interval, so short clips still get meaningful checkpoints while long
+// ones don't spam the endpoint. Pausing or backgrounding the tab immediately
+// flushes the last-known percent regardless of the throttle, so genuine
+// partial progress is never silently lost just because a short clip ended
+// before its first scheduled checkpoint. This reporting (and the resume-seed
+// it feeds) stays unconditional regardless of antiSkipEnabled, since it also
+// backs the always-on resume-position feature.
+export function useMediaWatchGuard({ onWatchProgress, antiSkipEnabled = false } = {}) {
+    const lastReportRef = useRef(0);
+    const maxReachedRef = useRef(0);
+    const lastPctRef    = useRef(0);
+    const durationRef   = useRef(0);
+    const seekingRef    = useRef(false);
+    const playSeededRef = useRef(false);
+
+    // Call on asset change (new src) to drop all guard state for the new media.
+    const reset = useCallback(() => {
+        lastReportRef.current = 0;
+        maxReachedRef.current = 0;
+        lastPctRef.current    = 0;
+        durationRef.current   = 0;
+        seekingRef.current    = false;
+        playSeededRef.current = false;
+    }, []);
+
+    // A tiny epsilon tolerates scrubber rounding / re-clicking the current spot.
+    const EPSILON = 0.75;
+    const clampSeekTarget = useCallback((target) => (
+        !antiSkipEnabled || target <= maxReachedRef.current + EPSILON ? target : maxReachedRef.current
+    ), [antiSkipEnabled]);
+
+    const markSeeking = useCallback(() => { seekingRef.current = true; }, []);
+    const markSeeked  = useCallback(() => { seekingRef.current = false; }, []);
+
+    // Call once metadata resolves — drives the adaptive throttle interval.
+    const setDuration = useCallback((durationSeconds) => {
+        durationRef.current = durationSeconds || 0;
+    }, []);
+
+    // Wire into the timeupdate handler — only advances the furthest-reached
+    // marker while actually playing forward, not mid-seek. Always records the
+    // latest percent (regardless of seek state) so pause/hidden flushes have
+    // an honest "last known position" to report even mid-seek.
+    const trackTimeUpdate = useCallback((currentTime, duration) => {
+        if (!seekingRef.current) maxReachedRef.current = Math.max(maxReachedRef.current, currentTime);
+        if (duration) lastPctRef.current = (currentTime / duration) * 100;
+    }, []);
+
+    // Unconditionally reports and resets the throttle window — used for
+    // pause/tab-hidden flushes and the initial play-start baseline, where
+    // waiting for the routine throttle would risk losing the sample entirely.
+    const flush = useCallback((pct) => {
+        if (!onWatchProgress) return;
+        lastReportRef.current = Date.now();
+        onWatchProgress(pct);
+    }, [onWatchProgress]);
+
+    const maybeReport = useCallback((pct) => {
+        if (!onWatchProgress) return;
+        const now = Date.now();
+        if (now - lastReportRef.current > computeThrottleMs(durationRef.current)) {
+            lastReportRef.current = now;
+            onWatchProgress(pct);
+        }
+    }, [onWatchProgress]);
+
+    // Seeds the server's wall-clock baseline the moment playback first starts,
+    // so the first real throttled sample has an honest elapsed-time reference
+    // rather than being compared against a progress row created lazily on
+    // whatever percent happens to be reported first.
+    const reportPlayStart = useCallback((pct) => {
+        if (playSeededRef.current) return;
+        playSeededRef.current = true;
+        flush(pct);
+    }, [flush]);
+
+    // Tab backgrounded (switched away, minimized, etc.) — flush the last known
+    // position immediately rather than risk it never being reported at all,
+    // since 'visibilitychange' → hidden reliably fires before actual unload
+    // (unlike beforeunload/unload, which browsers may cancel requests around).
+    useEffect(() => {
+        const onVisibilityChange = () => {
+            if (document.visibilityState === "hidden") flush(lastPctRef.current);
+        };
+        document.addEventListener("visibilitychange", onVisibilityChange);
+        return () => document.removeEventListener("visibilitychange", onVisibilityChange);
+    }, [flush]);
+
+    // Memoized so the returned object itself is referentially stable (all of the
+    // functions inside are already useCallback-stable) — lets callers safely list
+    // `guard` in effect/useCallback dependency arrays without re-running on every render.
+    return useMemo(() => (
+        { clampSeekTarget, trackTimeUpdate, markSeeking, markSeeked, maybeReport, flush, reportPlayStart, setDuration, reset }
+    ), [clampSeekTarget, trackTimeUpdate, markSeeking, markSeeked, maybeReport, flush, reportPlayStart, setDuration, reset]);
+}
diff --git a/apps/web/src/hooks/usePurchases.js b/apps/web/src/hooks/usePurchases.js
new file mode 100644
index 0000000..fb84ee0
--- /dev/null
+++ b/apps/web/src/hooks/usePurchases.js
@@ -0,0 +1,43 @@
+import { useCallback, useState } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+// Generic individual-purchase API (PayPal order/capture/cancel) — a Product's
+// purchasable_type/purchasable_id already carries its target (course, unit,
+// or lesson) server-side, so this hook doesn't need to know which either.
+// Endpoint paths are historically "course-purchases" (predates Units/Lessons
+// being individually purchasable) but the rows and this API are generic.
+export function usePurchases() {
+  const [purchaseLoading, setPurchaseLoading] = useState(false);
+
+  const createOrder = useCallback(async (productId) => {
+    setPurchaseLoading(true);
+    try {
+      const { data } = await api.post("/client/course-purchases/order", { product_id: productId });
+      return data.data ?? null;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not create order.");
+      return null;
+    } finally { setPurchaseLoading(false); }
+  }, []);
+
+  const captureOrder = useCallback(async (orderId) => {
+    setPurchaseLoading(true);
+    try {
+      const { data } = await api.post("/client/course-purchases/capture", { order_id: orderId });
+      toast("Purchase confirmed! You now have access.");
+      return data.data ?? null;
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not capture payment.");
+      return null;
+    } finally { setPurchaseLoading(false); }
+  }, []);
+
+  const cancelOrder = useCallback(async (orderId) => {
+    try {
+      await api.post("/client/course-purchases/cancel", { order_id: orderId });
+    } catch { /* silent */ }
+  }, []);
+
+  return { purchaseLoading, createOrder, captureOrder, cancelOrder };
+}
diff --git a/apps/web/src/hooks/useUnsavedChangesGuard.jsx b/apps/web/src/hooks/useUnsavedChangesGuard.jsx
new file mode 100644
index 0000000..2c37726
--- /dev/null
+++ b/apps/web/src/hooks/useUnsavedChangesGuard.jsx
@@ -0,0 +1,73 @@
+// hooks/useUnsavedChangesGuard.js
+//
+// One-call gate for "leave this page?" confirmations across the admin side.
+// Covers every way a user can leave: in-app <Link>/navigate() calls, the
+// browser's own Back/Forward buttons (both go through the router as POP
+// navigations since router.jsx uses createBrowserRouter), and hard navigation
+// (refresh/close tab/typed URL) via beforeunload.
+//
+// Usage:
+//   const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty);
+//   ...
+//   const handleFinish = async () => {
+//     const ok = await save();
+//     if (!ok) return;
+//     bypassOnce(); // don't gate the navigate we're about to do ourselves
+//     navigate("/somewhere");
+//   };
+//   ...
+//   return <div>...{unsavedChangesDialog}</div>;
+import { useCallback, useEffect, useRef } from "react";
+import { useBlocker } from "react-router-dom";
+import { UnsavedChangesDialog } from "@/components/generic/Dialogs/UnsavedChangesDialog";
+
+export function useUnsavedChangesGuard(hasUnsavedChanges, dialogProps = {}) {
+  const bypassRef = useRef(false);
+
+  const blocker = useBlocker(
+    useCallback(
+      ({ currentLocation, nextLocation }) =>
+        hasUnsavedChanges &&
+        !bypassRef.current &&
+        currentLocation.pathname !== nextLocation.pathname,
+      [hasUnsavedChanges]
+    )
+  );
+
+  useEffect(() => {
+    if (!hasUnsavedChanges) return;
+    const handler = (e) => {
+      e.preventDefault();
+      e.returnValue = "";
+    };
+    window.addEventListener("beforeunload", handler);
+    return () => window.removeEventListener("beforeunload", handler);
+  }, [hasUnsavedChanges]);
+
+  const confirmLeave = useCallback(() => {
+    if (blocker.state === "blocked") blocker.proceed();
+  }, [blocker]);
+
+  const cancelLeave = useCallback(() => {
+    if (blocker.state === "blocked") blocker.reset();
+  }, [blocker]);
+
+  // Call right before an intentional programmatic navigate() (e.g. after a
+  // successful save) so that navigation isn't gated by its own guard.
+  const bypassOnce = useCallback(() => { bypassRef.current = true; }, []);
+
+  return {
+    isBlocked: blocker.state === "blocked",
+    confirmLeave,
+    cancelLeave,
+    bypassOnce,
+    dialog: (
+      <UnsavedChangesDialog
+        open={blocker.state === "blocked"}
+        onConfirm={confirmLeave}
+        onCancel={cancelLeave}
+        {...dialogProps}
+      />
+    ),
+  };
+}
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
new file mode 100644
index 0000000..afec459
--- /dev/null
+++ b/apps/web/src/index.css
@@ -0,0 +1,713 @@
+/**
+* ╔══════════════════════════════════════════════════════════════════════════════╗
+* ║                                  index.css                                   ║
+* ╠══════════════════════════════════════════════════════════════════════════════╣
+* ║  Author        : rgrgogu                                                     ║
+* ║  Date Created  : Oct. 10, 2025                                               ║
+* ║  Date Modified : May 31, 2026 (by Kenneth Obsequio)                          ║
+* ╠══════════════════════════════════════════════════════════════════════════════╣
+* ║  Changelog                                                                   ║
+* ║  - Added: 'system' theme support                                             ║
+* ║  - Added: @import "shadcn/tailwind.css" support from docs                    ║
+* ╚══════════════════════════════════════════════════════════════════════════════╝
+*/
+
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "./styles/typeset.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  /* From myself */
+  --font-geist: "Instrument Sans", sans-serif;
+  --font-tier-ads: "Abril Fatface", serif;
+
+  --breakpoint-xs: 320px;
+
+  /* white fixed */
+  --motion-card-hover: oklch(0.985 0 0);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --animate-rippling: rippling var(--duration) ease-out;
+  --animate-pulse: pulse var(--duration) ease-out infinite;
+  /** from https://github.com/shadcn-ui/ui/issues/2053 **/
+  --animate-collapsible-down: collapsible-down 0.2s ease-out;
+  --animate-collapsible-up: collapsible-up 0.2s ease-out;
+
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+      opacity: 0;
+    }
+
+    to {
+      height: var(--radix-collapsible-content-height);
+      opacity: 1;
+    }
+  }
+
+  @keyframes collapsible-up {
+    from {
+      height: var(--radix-collapsible-content-height);
+      opacity: 1;
+    }
+
+    to {
+      height: 0;
+      opacity: 0;
+    }
+  }
+
+  @keyframes rippling {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      transform: scale(2);
+      opacity: 0;
+    }
+  }
+
+  @keyframes pulse {
+
+    0%,
+    100% {
+      boxShadow: 0 0 0 0 var(--pulse-color);
+    }
+
+    50% {
+      boxShadow: 0 0 0 8px var(--pulse-color);
+    }
+  }
+
+  @keyframes pulse {
+
+    0%,
+    100% {
+      boxShadow: 0 0 0 0 var(--pulse-color);
+    }
+
+    50% {
+      boxShadow: 0 0 0 8px var(--pulse-color);
+    }
+  }
+
+  --animate-aurora: aurora 60s linear infinite;
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning: var(--warning);
+  --color-success-foreground: var(--success-foreground);
+  --color-success: var(--success);
+  --color-info-foreground: var(--info-foreground);
+  --color-info: var(--info);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  @keyframes aurora {
+    from {
+      backgroundPosition: 50% 50%, 50% 50%;
+    }
+
+    to {
+      backgroundPosition: 350% 50%, 350% 50%;
+    }
+  }
+}
+
+:root {
+  --radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.2617 0.0575 259.89);
+  --primary-foreground: oklch(0.97 0.014 254.604);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.623 0.214 259.815);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.623 0.214 259.815);
+  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.623 0.214 259.815);
+  --destructive-foreground: var(--color-red-700);
+  --info: var(--color-blue-500);
+  --info-foreground: var(--color-blue-700);
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-700);
+  --warning: var(--color-amber-500);
+  --warning-foreground: var(--color-amber-700);
+}
+
+.dark {
+  --background: oklch(0.17 0.035 278);
+  --foreground: oklch(0.97 0.01 280);
+  --card: oklch(0.2 0.045 280);
+  --card-foreground: oklch(0.97 0.01 280);
+  --popover: oklch(0.2 0.045 280);
+  --popover-foreground: oklch(0.97 0.01 280);
+  --primary: oklch(0.63 0.25 302);
+  --primary-green: oklch(79.2% 0.209 151.711);
+  --primary-foreground: oklch(0.98 0.012 302);
+  --secondary: oklch(0.25 0.04 280);
+  --secondary-foreground: oklch(0.97 0.01 280);
+  --muted: oklch(0.22 0.035 280);
+  --muted-foreground: oklch(0.68 0.03 280);
+  --accent: oklch(0.28 0.06 285);
+  --accent-foreground: oklch(0.97 0.01 280);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(0.55 0.08 280 / 15%);
+  --input: oklch(0.55 0.08 280 / 20%);
+  --ring: oklch(0.63 0.25 302);
+  --chart-1: oklch(0.63 0.25 302);
+  --chart-2: oklch(0.68 0.28 330);
+  --chart-3: oklch(0.62 0.21 260);
+  --chart-4: oklch(0.7 0.18 200);
+  --chart-5: oklch(0.75 0.19 70);
+  --sidebar: oklch(0.13 0.03 280);
+  --sidebar-foreground: oklch(0.97 0.01 280);
+  --sidebar-primary: oklch(0.63 0.25 302);
+  --sidebar-primary-foreground: oklch(0.98 0.012 302);
+  --sidebar-accent: oklch(0.22 0.05 280);
+  --sidebar-accent-foreground: oklch(0.97 0.01 280);
+  --sidebar-border: oklch(0.55 0.08 280 / 12%);
+  --sidebar-ring: oklch(0.63 0.25 302);
+  --destructive-foreground: var(--color-red-400);
+  --info: var(--color-blue-500);
+  --info-foreground: var(--color-blue-400);
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-400);
+  --warning: var(--color-amber-500);
+  --warning-foreground: var(--color-amber-400);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    font-family: var(--font-geist);
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  /* Suppress Edge/IE's native password reveal & clear icons so they don't overlap our custom eye toggle */
+  input[type="password"]::-ms-reveal,
+  input[type="password"]::-ms-clear {
+    display: none;
+  }
+}
+
+/* Admin route: hardcoded violet accent for dark mode (temporary, reuses existing .dark violet tokens) */
+.dark #philproperties-admin {
+  --primary: oklch(0.63 0.25 302);
+  --primary-foreground: oklch(0.98 0.012 302);
+  --ring: oklch(0.63 0.25 302);
+  --sidebar-ring: oklch(0.63 0.25 302);
+}
+
+/* For our Tier Plans call */
+.tier_plans_banner {
+  background-color: hsla(173, 77%, 83%, 1);
+  background-image: radial-gradient(circle at 5% 1%, hsla(250, 76%, 61%, 1) 7%, transparent 84%), radial-gradient(circle at 7% 81%, hsla(184, 91%, 91%, 1) 16%, transparent 53%), radial-gradient(circle at 11% 29%, hsla(213, 97%, 75%, 1) 8%, transparent 74%), radial-gradient(circle at 39% 52%, hsla(149, 93%, 64%, 1) 6%, transparent 68%), radial-gradient(circle at 90% 50%, hsla(118, 94%, 89%, 1) 2%, transparent 85%);
+  background-blend-mode: normal, normal, normal, normal, normal;
+}
+
+.dark .tier_plans_banner {
+  --x-0: 93%;
+  --y-0: 93%;
+  --c-0: hsla(212, 0%, 0%, 1);
+  --y-1: 9%;
+  --x-1: 26%;
+  --c-1: hsla(212, 0%, 0%, 1);
+  --c-2: hsla(257, 91%, 27%, 0.35);
+  --x-2: 15%;
+  --y-2: 79%;
+  --c-3: hsla(212, 100%, 50%, 0.5);
+  --y-3: 104%;
+  --x-3: 40%;
+  --x-4: 0%;
+  --y-4: 60%;
+  --c-4: hsla(224, 72%, 36%, 1);
+  --c-5: hsla(248, 52%, 24%, 1);
+  --y-5: 37%;
+  --x-5: 92%;
+  --c-6: hsla(212, 100%, 50%, 0.19);
+  --y-6: 16%;
+  --x-6: 101%;
+  --y-7: 13%;
+  --x-7: 90%;
+  --c-7: hsla(227, 98%, 53%, 1);
+  --c-8: hsla(166, 71%, 60%, 0.32);
+  --x-8: 104%;
+  --y-8: 56%;
+  --x-9: 97%;
+  --y-9: 19%;
+  --c-9: hsla(219, 83%, 23%, 0.18);
+  background-color: hsla(305, 0%, 0%, 1);
+  background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)), radial-gradient(circle at var(--x-5) var(--y-5), var(--c-5) var(--s-start-5), transparent var(--s-end-5)), radial-gradient(circle at var(--x-6) var(--y-6), var(--c-6) var(--s-start-6), transparent var(--s-end-6)), radial-gradient(circle at var(--x-7) var(--y-7), var(--c-7) var(--s-start-7), transparent var(--s-end-7)), radial-gradient(circle at var(--x-8) var(--y-8), var(--c-8) var(--s-start-8), transparent var(--s-end-8)), radial-gradient(circle at var(--x-9) var(--y-9), var(--c-9) var(--s-start-9), transparent var(--s-end-9));
+  animation: tier_anim 10s linear infinite alternate;
+  background-blend-mode: normal, normal, normal, normal, normal, normal, normal, normal, normal, normal;
+  will-change: transform, opacity;
+  contain: paint;
+}
+
+@keyframes tier_anim {
+  0% {
+    --x-0: 93%;
+    --y-0: 93%;
+    --s-start-0: 14.489998991212337%;
+    --s-end-0: 72%;
+    --c-0: hsla(212, 0%, 0%, 1);
+    --y-1: 9%;
+    --x-1: 26%;
+    --s-start-1: 0%;
+    --s-end-1: 45%;
+    --c-1: hsla(212, 0%, 0%, 1);
+    --s-start-2: 2.9253667596993065%;
+    --s-end-2: 22.388851682060018%;
+    --c-2: hsla(257, 91%, 27%, 0.35);
+    --x-2: 15%;
+    --y-2: 79%;
+    --s-start-3: 3.985353824694249%;
+    --s-end-3: 47.580278608924694%;
+    --c-3: hsla(212, 100%, 50%, 0.5);
+    --y-3: 104%;
+    --x-3: 40%;
+    --x-4: 0%;
+    --y-4: 60%;
+    --s-start-4: 2.391200382592061%;
+    --s-end-4: 29.307684556768592%;
+    --c-4: hsla(224, 72%, 36%, 1);
+    --s-start-5: 2.9253667596993065%;
+    --s-end-5: 22.388851682060018%;
+    --c-5: hsla(248, 52%, 24%, 1);
+    --y-5: 37%;
+    --x-5: 92%;
+    --s-start-6: 13.173642363290591%;
+    --s-end-6: 31.747336520355095%;
+    --c-6: hsla(212, 100%, 50%, 0.19);
+    --y-6: 16%;
+    --x-6: 101%;
+    --y-7: 13%;
+    --x-7: 90%;
+    --s-start-7: 1%;
+    --s-end-7: 31%;
+    --c-7: hsla(227, 98%, 53%, 1);
+    --s-start-8: 3.985353824694249%;
+    --s-end-8: 13.103042116379756%;
+    --c-8: hsla(166, 71%, 60%, 0.32);
+    --x-8: 104%;
+    --y-8: 56%;
+    --x-9: 97%;
+    --y-9: 19%;
+    --s-start-9: 18.597054544690312%;
+    --s-end-9: 31%;
+    --c-9: hsla(219, 83%, 23%, 0.18);
+  }
+
+  100% {
+    --x-0: 7%;
+    --y-0: 9%;
+    --s-start-0: 2.391200382592061%;
+    --s-end-0: 43.902064173373226%;
+    --c-0: hsla(306, 0%, 0%, 1);
+    --y-1: 93%;
+    --x-1: 96%;
+    --s-start-1: 9%;
+    --s-end-1: 54.805582404585024%;
+    --c-1: hsla(306, 0%, 0%, 1);
+    --s-start-2: 3%;
+    --s-end-2: 26.722813338714598%;
+    --c-2: hsla(166, 72%, 60%, 1);
+    --x-2: -2%;
+    --y-2: 103%;
+    --s-start-3: 2.391200382592061%;
+    --s-end-3: 32.0689540200964%;
+    --c-3: hsla(180, 100%, 50%, 0.26);
+    --y-3: 82%;
+    --x-3: 33%;
+    --x-4: 37%;
+    --y-4: 81%;
+    --s-start-4: 4.40642490323111%;
+    --s-end-4: 37.23528104246256%;
+    --c-4: hsla(212, 88%, 26%, 0.58);
+    --s-start-5: 3%;
+    --s-end-5: 32.537089799783296%;
+    --c-5: hsla(271, 98%, 53%, 0.31);
+    --y-5: 99%;
+    --x-5: 54%;
+    --s-start-6: 6%;
+    --s-end-6: 42.501105312974815%;
+    --c-6: hsla(262, 100%, 50%, 0.15);
+    --y-6: 43%;
+    --x-6: 104%;
+    --y-7: -16%;
+    --x-7: 104%;
+    --s-start-7: 5%;
+    --s-end-7: 13.10107024898374%;
+    --c-7: hsla(298, 36%, 23%, 1);
+    --s-start-8: 2.391200382592061%;
+    --s-end-8: 27.141813016850573%;
+    --c-8: hsla(180, 100%, 50%, 0.11);
+    --x-8: 97%;
+    --y-8: 30%;
+    --x-9: 78%;
+    --y-9: 4%;
+    --s-start-9: 5%;
+    --s-end-9: 21.32164536610654%;
+    --c-9: hsla(219, 83%, 23%, 0.59);
+  }
+}
+
+@property --x-0 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 93%
+}
+
+@property --y-0 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 93%
+}
+
+@property --s-start-0 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 14.489998991212337%
+}
+
+@property --s-end-0 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 72%
+}
+
+@property --c-0 {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: hsla(212, 0%, 0%, 1)
+}
+
+@property --y-1 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 9%
+}
+
+@property --x-1 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 26%
+}
+
+@property --s-start-1 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 0%
+}
+
+@property --s-end-1 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 45%
+}
+
+@property --c-1 {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: hsla(212, 0%, 0%, 1)
+}
+
+@property --s-start-2 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 2.9253667596993065%
+}
+
+@property --s-end-2 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 22.388851682060018%
+}
+
+@property --c-2 {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: hsla(257, 91%, 27%, 0.35)
+}
+
+@property --x-2 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 15%
+}
+
+@property --y-2 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 79%
+}
+
+@property --s-start-3 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 3.985353824694249%
+}
+
+@property --s-end-3 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 47.580278608924694%
+}
+
+@property --c-3 {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: hsla(212, 100%, 50%, 0.5)
+}
+
+@property --y-3 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 104%
+}
+
+@property --x-3 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 40%
+}
+
+@property --x-4 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 0%
+}
+
+@property --y-4 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 60%
+}
+
+@property --s-start-4 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 2.391200382592061%
+}
+
+@property --s-end-4 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 29.307684556768592%
+}
+
+@property --c-4 {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: hsla(224, 72%, 36%, 1)
+}
+
+@property --s-start-5 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 2.9253667596993065%
+}
+
+@property --s-end-5 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 22.388851682060018%
+}
+
+@property --c-5 {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: hsla(248, 52%, 24%, 1)
+}
+
+@property --y-5 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 37%
+}
+
+@property --x-5 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 92%
+}
+
+@property --s-start-6 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 13.173642363290591%
+}
+
+@property --s-end-6 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 31.747336520355095%
+}
+
+@property --c-6 {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: hsla(212, 100%, 50%, 0.19)
+}
+
+@property --y-6 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 16%
+}
+
+@property --x-6 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 101%
+}
+
+@property --y-7 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 13%
+}
+
+@property --x-7 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 90%
+}
+
+@property --s-start-7 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 1%
+}
+
+@property --s-end-7 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 31%
+}
+
+@property --c-7 {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: hsla(227, 98%, 53%, 1)
+}
+
+@property --s-start-8 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 3.985353824694249%
+}
+
+@property --s-end-8 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 13.103042116379756%
+}
+
+@property --c-8 {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: hsla(166, 71%, 60%, 0.32)
+}
+
+@property --x-8 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 104%
+}
+
+@property --y-8 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 56%
+}
+
+@property --x-9 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 97%
+}
+
+@property --y-9 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 19%
+}
+
+@property --s-start-9 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 18.597054544690312%
+}
+
+@property --s-end-9 {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 31%
+}
+
+@property --c-9 {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: hsla(219, 83%, 23%, 0.18)
+}
\ No newline at end of file
diff --git a/apps/web/src/lib/utils.js b/apps/web/src/lib/utils.js
new file mode 100644
index 0000000..b20bf01
--- /dev/null
+++ b/apps/web/src/lib/utils.js
@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
diff --git a/apps/web/src/main.jsx b/apps/web/src/main.jsx
new file mode 100644
index 0000000..af4624b
--- /dev/null
+++ b/apps/web/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  // <StrictMode>
+    <App />
+  // </StrictMode>,
+)
diff --git a/apps/web/src/modules/admin/components/AdminSideTabs.jsx b/apps/web/src/modules/admin/components/AdminSideTabs.jsx
new file mode 100644
index 0000000..726f9e1
--- /dev/null
+++ b/apps/web/src/modules/admin/components/AdminSideTabs.jsx
@@ -0,0 +1,73 @@
+import { Tabs, TabsList, TabsTrigger, } from "@/components/custom/original-tabs";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { useNavigate, useLocation } from "react-router-dom";
+import { useState, useEffect } from "react";
+import { cn } from "@/lib/utils";
+
+export default function AdminSideTabs() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const path = location.pathname;
+
+  const tabItems = [
+    { value: "tab-1", label: "Dashboard", paths: ["/admin"] },
+    { value: "tab-2", label: "User Management", paths: ["users"] },
+    { value: "tab-3", label: "Content Management", paths: ["content", "courses", "units", "lessons"] },
+    { value: "tab-5", label: "Site Content", paths: ["contents"] },
+  ]
+
+  const getTabValue = () => {
+    // ← exact match for /admin only
+    const isDashboard = path === '/admin'
+    if (isDashboard) return "tab-1"
+
+    const found = tabItems.slice(1).find(item =>
+      item.paths.some(p => p && path.includes(p))
+    )
+    return found ? found.value : ""
+  }
+
+  const [value, setValue] = useState(getTabValue());
+
+  const handleTabChange = (val) => {
+    setValue(val)
+    const tab = tabItems.find(t => t.value === val)
+    const primaryPath = tab?.paths?.[0]
+
+    // ← no adminId, just /admin/users etc.
+    const targetPath = primaryPath && primaryPath !== '/admin'
+      ? `/admin/${primaryPath}`
+      : `/admin`
+
+    navigate(targetPath)
+  }
+
+  useEffect(() => {
+    setValue(getTabValue());
+  }, [path]);
+
+  return (
+    <div className="w-full">
+      <Tabs value={value} onValueChange={handleTabChange}>
+        <ScrollArea className="max-w-full overflow-x-auto border-b w-full">
+          <TabsList
+            className={cn(
+              "bg-background rounded-none justify-start mx-2 my-1 flex gap-1"
+            )}
+          >
+            {tabItems.map((tab) => (
+              <TabsTrigger
+                key={tab.value}
+                value={tab.value}
+                className="data-[state=active]:bg-muted data-[state=active]:shadow-none hover:bg-muted text-muted-foreground data-[state=active]:text-foreground"
+              >
+                {tab.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+      </Tabs>
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/advertisements/ArchivedAdvertisementsTable.jsx b/apps/web/src/modules/admin/components/advertisements/ArchivedAdvertisementsTable.jsx
new file mode 100644
index 0000000..68d5c2f
--- /dev/null
+++ b/apps/web/src/modules/admin/components/advertisements/ArchivedAdvertisementsTable.jsx
@@ -0,0 +1,200 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+
+import api from "@/utils/api.util";
+import { useAdvertisements } from "@/contexts/AdminAdvertisementContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { RestoreDialog } from "@/components/generic/Dialogs/RestoreDialog";
+import { PermanentDeleteDialog } from "@/components/generic/Dialogs/PermanentDeleteDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/advertisements/archive/columns.config";
+import { buildToolbarActions }             from "../../config/advertisements/archive/toolbar.config";
+import { buildRowActions }                 from "../../config/advertisements/archive/rowActions.config";
+import { buildSelectionActions }           from "../../config/advertisements/archive/selection.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function ArchivedAdvertisementsTable() {
+    const [restoreTarget, setRestoreTarget] = useState(null);
+    const [restoreIds,    setRestoreIds]    = useState(null);
+    const [deleteTarget,  setDeleteTarget]  = useState(null);
+    const [deleteIds,     setDeleteIds]     = useState(null);
+
+    const tableRefsRef = useRef({
+        getFilters:     () => [],
+        getSort:        () => [],
+        resetSelection: () => {},
+        setFilters:     () => {},
+    });
+
+    const navigate = useNavigate();
+    const { fmtDateTime } = useDateFormat();
+    const { user: currentUser } = useAuth();
+
+    const {
+        advertisements, attributes, pagination, setPagination, loading,
+        fetchArchivedAdvertisements, restoreAdvertisement, restoreAdvertisements,
+        permanentlyDeleteAdvertisement, permanentlyDeleteAdvertisements,
+        fetchAdvertisementFieldValues,
+    } = useAdvertisements();
+
+    useEffect(() => {
+        fetchArchivedAdvertisements({ page: 1, limit: pagination?.limit ?? 10 });
+    }, []);
+
+    const handleRefsReady = (refs) => {
+        tableRefsRef.current = refs;
+    };
+
+    const exportConfig = {
+        allData:   advertisements,
+        attributes,
+        filename:  `${getTimestamp()}_ArchivedAds`,
+        sheetName: "Archived Ads",
+        generatedBy: formatGeneratedBy(currentUser),
+    };
+
+    const rowActions = buildRowActions({
+        onRestore: (row) => setRestoreTarget(row),
+        onDelete:  (row) => setDeleteTarget(row),
+    });
+
+    // "Remove Expired" — the expireAdvertisements cron already auto-archives
+    // (soft-deletes) any ad past its end_date and stamps status: 'expired' on
+    // it before doing so, so this only ever targets naturally-expired ads,
+    // never ones an admin manually archived while still active/scheduled.
+    const handleRemoveExpired = async () => {
+        const { data } = await api.get("/admin/advertisements/archived", {
+            params: { page: 1, limit: 1000, filters: JSON.stringify([{ id: "status", value: "expired" }]) },
+        });
+        const ids = (data?.data?.data ?? []).map((a) => a.advertisement_id);
+        if (!ids.length) {
+            toast("No expired advertisements to remove.");
+            return;
+        }
+        setDeleteIds(ids);
+    };
+
+    const toolbarActions = buildToolbarActions({
+        fetchAdvertisements: fetchArchivedAdvertisements,
+        pagination,
+        exportConfig,
+        navigate,
+        getFilters:       () => tableRefsRef.current.getFilters(),
+        getSort:          () => tableRefsRef.current.getSort(),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+        onRemoveExpired:  handleRemoveExpired,
+    });
+
+    const selectionActions = buildSelectionActions({
+        exportConfig,
+        onSingleRestore: (row) => setRestoreTarget(row),
+        onBulkRestore:   (ids) => setRestoreIds(ids),
+        onSingleDelete:  (row) => setDeleteTarget(row),
+        onBulkDelete:    (ids) => setDeleteIds(ids),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const columns = useMemo(
+        () => buildDataColumns(attributes, rowActions, fmtDateTime),
+        [attributes, fmtDateTime]
+    );
+
+    const handleRestoreSuccess = () => {
+        setRestoreTarget(null);
+        setRestoreIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedAdvertisements({ page: 1, limit: pagination?.limit ?? 10 });
+    };
+
+    const handleDeleteSuccess = () => {
+        setDeleteTarget(null);
+        setDeleteIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedAdvertisements({ page: 1, limit: pagination?.limit ?? 10 });
+    };
+
+    return (
+        <>
+            <DataTable
+                title="Archived Ads"
+                data={advertisements}
+                columns={columns}
+                attributes={attributes}
+                pagination={pagination}
+                setPagination={setPagination}
+                loading={loading}
+                onFetch={fetchArchivedAdvertisements}
+                onFetchFilterData={fetchAdvertisementFieldValues}
+                onRefsReady={handleRefsReady}
+                renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+                    <FilterSheet
+                        open={open}
+                        onOpenChange={onOpenChange}
+                        column={column}
+                        attr={attr}
+                        data={data}
+                        loading={loading}
+                    />
+                )}
+                columnPinning={columnPinning}
+                toolbarActions={toolbarActions}
+                selectionActions={selectionActions}
+                recordLabel="archived ad"
+                emptyMessage="No archived ads found."
+            />
+
+            {/* ── Single restore ── */}
+            <RestoreDialog
+                open={!!restoreTarget}
+                onOpenChange={(v) => !v && setRestoreTarget(null)}
+                entity={restoreTarget}
+                entityLabel="Ad"
+                getName={(a) => a?.headline ?? a?.badge_labels?.[0] ?? "this ad"}
+                onRestore={(a) => restoreAdvertisement(a?.advertisement_id)}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+
+            {/* ── Bulk restore ── */}
+            <RestoreDialog
+                open={!!restoreIds}
+                onOpenChange={(v) => !v && setRestoreIds(null)}
+                ids={restoreIds ?? []}
+                entityLabel="Ad"
+                onRestore={(ids) => restoreAdvertisements(ids)}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+
+            {/* ── Single permanent delete ── */}
+            <PermanentDeleteDialog
+                open={!!deleteTarget}
+                onOpenChange={(v) => !v && setDeleteTarget(null)}
+                entity={deleteTarget}
+                entityLabel="Ad"
+                getName={(a) => a?.headline ?? a?.badge_labels?.[0] ?? "this ad"}
+                onDelete={(a) => permanentlyDeleteAdvertisement(a?.advertisement_id)}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+
+            {/* ── Bulk permanent delete ── */}
+            <PermanentDeleteDialog
+                open={!!deleteIds}
+                onOpenChange={(v) => !v && setDeleteIds(null)}
+                ids={deleteIds ?? []}
+                entityLabel="Ad"
+                onDelete={(ids) => permanentlyDeleteAdvertisements(ids)}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+        </>
+    );
+}
diff --git a/apps/web/src/modules/admin/components/assets/ArchivedAssetsTable.jsx b/apps/web/src/modules/admin/components/assets/ArchivedAssetsTable.jsx
new file mode 100644
index 0000000..9216633
--- /dev/null
+++ b/apps/web/src/modules/admin/components/assets/ArchivedAssetsTable.jsx
@@ -0,0 +1,179 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useAssets } from "@/contexts/AdminAssetsContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { RestoreDialog } from "@/components/generic/Dialogs/RestoreDialog";
+import { PermanentDeleteDialog } from "@/components/generic/Dialogs/PermanentDeleteDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/assets/archive/columns.config";
+import { buildToolbarActions }             from "../../config/assets/archive/toolbar.config";
+import { buildRowActions }                 from "../../config/assets/archive/rowActions.config";
+import { buildSelectionActions }           from "../../config/assets/archive/selection.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function ArchivedAssetsTable() {
+    const [restoreTarget, setRestoreTarget] = useState(null);
+    const [restoreIds,    setRestoreIds]    = useState(null);
+    const [deleteTarget,  setDeleteTarget]  = useState(null);
+    const [deleteIds,     setDeleteIds]     = useState(null);
+
+    const tableRefsRef = useRef({
+        getFilters:     () => [],
+        getSort:        () => [],
+        resetSelection: () => {},
+        setFilters:     () => {},
+    });
+
+    const navigate = useNavigate();
+
+    const { user: currentUser } = useAuth();
+
+    const {
+        assets, attributes, pagination, setPagination, loading,
+        fetchArchivedAssets, restoreAsset, restoreAssets, fetchAssetFieldValues,
+        permanentlyDeleteAsset, permanentlyDeleteAssets
+    } = useAssets();
+
+    useEffect(() => {
+        fetchArchivedAssets({ page: 1, limit: pagination?.limit ?? 10 });
+    }, []);
+
+    const handleRefsReady = (refs) => {
+        tableRefsRef.current = refs;
+    };
+
+    const exportConfig = {
+        allData:   assets,
+        attributes,
+        filename:  `${getTimestamp()}_ArchivedFiles`,
+        sheetName: "Archived Files",
+        generatedBy: formatGeneratedBy(currentUser),
+    };
+
+    const rowActions = buildRowActions({
+        onRestore: (row) => setRestoreTarget(row),
+        onDelete:  (row) => setDeleteTarget(row),
+    });
+
+    const toolbarActions = buildToolbarActions({
+        fetchAssets: fetchArchivedAssets,
+        pagination,
+        exportConfig,
+        navigate,
+        getFilters:       () => tableRefsRef.current.getFilters(),
+        getSort:          () => tableRefsRef.current.getSort(),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const selectionActions = buildSelectionActions({
+        exportConfig,
+        onSingleRestore: (row) => setRestoreTarget(row),
+        onBulkRestore:   (ids) => setRestoreIds(ids),
+        onSingleDelete:  (row) => setDeleteTarget(row),
+        onBulkDelete:    (ids) => setDeleteIds(ids),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const columns = useMemo(
+        () => buildDataColumns(attributes, rowActions),
+        [attributes]
+    );
+
+    const handleRestoreSuccess = () => {
+        setRestoreTarget(null);
+        setRestoreIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedAssets({ page: 1, limit: pagination?.limit ?? 10 });
+    };
+
+    const handleDeleteSuccess = () => {
+        setDeleteTarget(null);
+        setDeleteIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedAssets({ page: 1, limit: pagination?.limit ?? 10 });
+    };
+
+    return (
+        <>
+            <DataTable
+                title="Archived Files"
+                data={assets}
+                columns={columns}
+                attributes={attributes}
+                pagination={pagination}
+                setPagination={setPagination}
+                loading={loading}
+                onFetch={fetchArchivedAssets}
+                onFetchFilterData={fetchAssetFieldValues}
+                onRefsReady={handleRefsReady}
+                renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+                    <FilterSheet
+                        open={open}
+                        onOpenChange={onOpenChange}
+                        column={column}
+                        attr={attr}
+                        data={data}
+                        loading={loading}
+                    />
+                )}
+                columnPinning={columnPinning}
+                toolbarActions={toolbarActions}
+                selectionActions={selectionActions}
+                recordLabel="archived file"
+                emptyMessage="No archived files found."
+            />
+
+            {/* ── Single restore ── */}
+            <RestoreDialog
+                open={!!restoreTarget}
+                onOpenChange={(v) => !v && setRestoreTarget(null)}
+                entity={restoreTarget}
+                entityLabel="File"
+                getName={(a) => a?.display_name ?? a?.original_name}
+                onRestore={(a) => restoreAsset(a?.asset_id)}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+
+            {/* ── Bulk restore ── */}
+            <RestoreDialog
+                open={!!restoreIds}
+                onOpenChange={(v) => !v && setRestoreIds(null)}
+                ids={restoreIds ?? []}
+                entityLabel="File"
+                onRestore={(ids) => restoreAssets(ids)}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+
+            {/* ── Single permanent delete ── */}
+            <PermanentDeleteDialog
+                open={!!deleteTarget}
+                onOpenChange={(v) => !v && setDeleteTarget(null)}
+                entity={deleteTarget}
+                entityLabel="File"
+                getName={(a) => a?.display_name ?? a?.original_name}
+                onDelete={(a) => permanentlyDeleteAsset(a?.asset_id)}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+
+            {/* ── Bulk permanent delete ── */}
+            <PermanentDeleteDialog
+                open={!!deleteIds}
+                onOpenChange={(v) => !v && setDeleteIds(null)}
+                ids={deleteIds ?? []}
+                entityLabel="File"
+                onDelete={(ids) => permanentlyDeleteAssets(ids)}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+        </>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/components/assets/AssetsTable.jsx b/apps/web/src/modules/admin/components/assets/AssetsTable.jsx
new file mode 100644
index 0000000..cfc6a85
--- /dev/null
+++ b/apps/web/src/modules/admin/components/assets/AssetsTable.jsx
@@ -0,0 +1,148 @@
+// modules/admin/components/assets/AssetsTable.jsx
+
+import { useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useAssets } from "@/contexts/AdminAssetsContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/assets/columns.config";
+import { buildToolbarActions } from "../../config/assets/toolbar.config";
+import { buildSelectionActions } from "../../config/assets/selection.config";
+import { buildRowActions } from "../../config/assets/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function AssetsTable() {
+    const [archiveTarget, setArchiveTarget] = useState(null);
+    const [archiveIds, setArchiveIds] = useState(null);
+
+    const tableRefsRef = useRef({
+        getFilters: () => [],
+        getSort: () => [],
+        resetSelection: () => { },
+        setFilters: () => { },
+    });
+
+    const navigate = useNavigate();
+
+    const { user: currentUser } = useAuth();
+
+    const {
+        assets, attributes, pagination, setPagination, loading,
+        fetchAssets, archiveAsset, archiveAssets, fetchAssetFieldValues
+    } = useAssets();
+
+    const handleRefsReady = (refs) => {
+        tableRefsRef.current = refs;
+    };
+
+    const exportConfig = {
+        allData: assets,
+        attributes,
+        filename: `${getTimestamp()}_Files`,
+        sheetName: "Files",
+        generatedBy: formatGeneratedBy(currentUser),
+    };
+
+    const resolveViewPath = (row) => {
+        switch (row.file_type) {
+            case "video": return `view/video/${row.asset_id}`;
+            case "image": return `view/image/${row.asset_id}`;
+            case "document": return `view/document/${row.asset_id}`;
+            case "audio": return `view/audio/${row.asset_id}`;
+            default: return `view/image/${row.asset_id}`;
+        }
+    };
+
+    const rowActions = buildRowActions({
+        onView: (row) => navigate(resolveViewPath(row)),
+        onArchive: (row) => setArchiveTarget(row),
+    });
+
+    const toolbarActions = buildToolbarActions({
+        fetchAssets, pagination, exportConfig, navigate,
+        getFilters: () => tableRefsRef.current.getFilters(),
+        getSort: () => tableRefsRef.current.getSort(),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const selectionActions = buildSelectionActions({
+        exportConfig,
+        onArchive: (row) => setArchiveTarget(row),
+        onArchiveMany: (ids) => setArchiveIds(ids),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const columns = useMemo(
+        () => buildDataColumns(attributes, rowActions),
+        [attributes]
+    );
+
+    const handleArchiveSuccess = () => {
+        setArchiveTarget(null);
+        setArchiveIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchAssets({ page: 1, limit: pagination?.limit ?? 10 });
+    };
+
+    return (
+        <>
+            <DataTable
+                title="Files"
+                data={assets}
+                columns={columns}
+                attributes={attributes}
+                pagination={pagination}
+                setPagination={setPagination}
+                loading={loading}
+                onFetch={fetchAssets}
+                onFetchFilterData={fetchAssetFieldValues}
+                onRefsReady={handleRefsReady}
+                renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+                    <FilterSheet
+                        open={open}
+                        onOpenChange={onOpenChange}
+                        column={column}
+                        attr={attr}
+                        data={data}
+                        loading={loading}
+                    />
+                )}
+                columnPinning={columnPinning}
+                toolbarActions={toolbarActions}
+                selectionActions={selectionActions}
+                recordLabel="file"
+                emptyMessage="No files match the current filters."
+            />
+
+            {/* ── Single archive ── */}
+            <ArchiveDialog
+                open={!!archiveTarget}
+                onOpenChange={(v) => !v && setArchiveTarget(null)}
+                entity={archiveTarget}
+                entityLabel="File"
+                getName={(a) => a?.display_name ?? a?.original_name}
+                onArchive={(a) => archiveAsset(a?.asset_id)}
+                loading={loading}
+                onSuccess={handleArchiveSuccess}
+            />
+
+            {/* ── Bulk archive ── */}
+            <ArchiveDialog
+                open={!!archiveIds}
+                onOpenChange={(v) => !v && setArchiveIds(null)}
+                ids={archiveIds ?? []}
+                entityLabel="File"
+                onArchive={(ids) => archiveAssets(ids)}
+                loading={loading}
+                onSuccess={handleArchiveSuccess}
+            />
+        </>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/components/categories/ArchivedCategoriesTable.jsx b/apps/web/src/modules/admin/components/categories/ArchivedCategoriesTable.jsx
new file mode 100644
index 0000000..e5fe9d7
--- /dev/null
+++ b/apps/web/src/modules/admin/components/categories/ArchivedCategoriesTable.jsx
@@ -0,0 +1,152 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useCategories } from "@/contexts/AdminCategoriesContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { PermanentDeleteDialog } from "@/components/generic/Dialogs/PermanentDeleteDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/categories/columns.config";
+import { buildToolbarActions } from "../../config/categories/archive/toolbar.config";
+import { buildSelectionActions } from "../../config/categories/archive/selection.config";
+import { buildRowActions } from "../../config/categories/archive/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function ArchivedCategoriesTable() {
+  const navigate = useNavigate();
+  const { user: currentUser } = useAuth();
+
+  const {
+    categories, categoryAttributes, categoryPagination, setCategoryPagination,
+    loading, fetchCategories, restoreCategory, bulkRestoreCategories,
+    fetchCategoryPermanentDeleteImpact, permanentlyDeleteCategory, bulkPermanentlyDeleteCategories,
+  } = useCategories();
+
+  const [deleteTarget, setDeleteTarget] = useState(null);
+  const [deleteIds,    setDeleteIds]    = useState(null);
+
+  const tableRefsRef = useRef({
+    getFilters:     () => [],
+    getSort:        () => [],
+    resetSelection: () => {},
+    tableInstance:  null,
+  });
+
+  const handleRefsReady = (refs) => { tableRefsRef.current = refs; };
+
+  const fetchArchived = useCallback(
+    (params) => fetchCategories({ ...params, archived: true }),
+    [fetchCategories]
+  );
+
+  const refetch = () => {
+    tableRefsRef.current.resetSelection?.();
+    fetchArchived({
+      page:    1,
+      limit:   categoryPagination?.limit ?? 10,
+      filters: tableRefsRef.current.getFilters(),
+      sort:    tableRefsRef.current.getSort(),
+    });
+  };
+
+  const rowActions = buildRowActions({
+    onRestore: async (row) => { await restoreCategory(row.id); refetch(); },
+    onDelete:  (row) => setDeleteTarget(row),
+  });
+
+  const exportConfig = useMemo(() => ({
+    allData:     categories,
+    attributes:  categoryAttributes,
+    filename:    `${getTimestamp()}_ArchivedCategories`,
+    sheetName:   "Archived Categories",
+    generatedBy: formatGeneratedBy(currentUser),
+  }), [categories, categoryAttributes, currentUser]);
+
+  const toolbarActions = buildToolbarActions({
+    fetchCategories: fetchArchived,
+    pagination: categoryPagination,
+    exportConfig,
+    navigate,
+    getFilters:       () => tableRefsRef.current.getFilters(),
+    getSort:          () => tableRefsRef.current.getSort(),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const selectionActions = buildSelectionActions({
+    onRestore:     async (row) => { await restoreCategory(row.id); refetch(); },
+    onRestoreMany: async (ids) => { await bulkRestoreCategories(ids); refetch(); },
+    onDelete:      (row) => setDeleteTarget(row),
+    onDeleteMany:  (ids) => setDeleteIds(ids),
+  });
+
+  const columns = useMemo(
+    () => buildDataColumns(categoryAttributes, rowActions),
+    [categoryAttributes, rowActions]
+  );
+
+  const handleDeleteSuccess = () => {
+    setDeleteTarget(null);
+    setDeleteIds(null);
+    refetch();
+  };
+
+  return (
+    <>
+      <DataTable
+        title="Archived Categories"
+        data={categories}
+        columns={columns}
+        attributes={categoryAttributes}
+        pagination={categoryPagination}
+        setPagination={setCategoryPagination}
+        loading={loading}
+        onFetch={fetchArchived}
+        onFetchFilterData={async () => []}
+        onRefsReady={handleRefsReady}
+        renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+          <FilterSheet
+            open={open}
+            onOpenChange={onOpenChange}
+            column={column}
+            attr={attr}
+            data={data}
+            loading={loading}
+          />
+        )}
+        columnPinning={columnPinning}
+        toolbarActions={toolbarActions}
+        selectionActions={selectionActions}
+        recordLabel="category"
+        emptyMessage="No archived categories."
+      />
+
+      {/* Single permanent delete */}
+      <PermanentDeleteDialog
+        open={!!deleteTarget}
+        onOpenChange={(v) => !v && setDeleteTarget(null)}
+        entity={deleteTarget}
+        entityLabel="Category"
+        getName={(r) => r?.name}
+        onDelete={(entity) => permanentlyDeleteCategory(entity?.id)}
+        onImpactCheck={() => fetchCategoryPermanentDeleteImpact(deleteTarget?.id)}
+        loading={loading}
+        onSuccess={handleDeleteSuccess}
+      />
+
+      {/* Bulk permanent delete */}
+      <PermanentDeleteDialog
+        open={!!deleteIds}
+        onOpenChange={(v) => !v && setDeleteIds(null)}
+        ids={deleteIds ?? []}
+        entityLabel="Category"
+        onDelete={({ ids }) => bulkPermanentlyDeleteCategories(ids)}
+        loading={loading}
+        onSuccess={handleDeleteSuccess}
+      />
+    </>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/categories/CategoriesTable.jsx b/apps/web/src/modules/admin/components/categories/CategoriesTable.jsx
new file mode 100644
index 0000000..2fc6407
--- /dev/null
+++ b/apps/web/src/modules/admin/components/categories/CategoriesTable.jsx
@@ -0,0 +1,108 @@
+import { useMemo, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useCategories } from "@/contexts/AdminCategoriesContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+
+import { buildDataColumns, columnPinning } from "../../config/categories/columns.config";
+import { buildToolbarActions } from "../../config/categories/toolbar.config";
+import { buildSelectionActions } from "../../config/categories/selection.config";
+import { buildRowActions } from "../../config/categories/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function CategoriesTable() {
+  const navigate = useNavigate();
+  const { user: currentUser } = useAuth();
+
+  const {
+    categories, categoryAttributes, categoryPagination, setCategoryPagination,
+    loading, fetchCategories, archiveCategory, bulkArchiveCategories,
+  } = useCategories();
+
+  const tableRefsRef = useRef({
+    getFilters:     () => [],
+    getSort:        () => [],
+    resetSelection: () => {},
+    tableInstance:  null,
+  });
+
+  const handleRefsReady = (refs) => { tableRefsRef.current = refs; };
+
+  const refetch = () => {
+    tableRefsRef.current.resetSelection?.();
+    fetchCategories({
+      page:    1,
+      limit:   categoryPagination?.limit ?? 10,
+      filters: tableRefsRef.current.getFilters(),
+      sort:    tableRefsRef.current.getSort(),
+    });
+  };
+
+  const rowActions = buildRowActions({
+    navigate,
+    onArchive: async (row) => { await archiveCategory(row.id); refetch(); },
+  });
+
+  const exportConfig = useMemo(() => ({
+    allData:     categories,
+    attributes:  categoryAttributes,
+    filename:    `${getTimestamp()}_Categories`,
+    sheetName:   "Categories",
+    generatedBy: formatGeneratedBy(currentUser),
+  }), [categories, categoryAttributes, currentUser]);
+
+  const toolbarActions = buildToolbarActions({
+    fetchCategories,
+    pagination: categoryPagination,
+    exportConfig,
+    navigate,
+    getFilters:       () => tableRefsRef.current.getFilters(),
+    getSort:          () => tableRefsRef.current.getSort(),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const selectionActions = buildSelectionActions({
+    onArchive:     async (row) => { await archiveCategory(row.id); refetch(); },
+    onArchiveMany: async (ids) => { await bulkArchiveCategories(ids); refetch(); },
+  });
+
+  const columns = useMemo(
+    () => buildDataColumns(categoryAttributes, rowActions),
+    [categoryAttributes, rowActions]
+  );
+
+  return (
+    <DataTable
+      title="Categories"
+      data={categories}
+      columns={columns}
+      attributes={categoryAttributes}
+      pagination={categoryPagination}
+      setPagination={setCategoryPagination}
+      loading={loading}
+      onFetch={fetchCategories}
+      onFetchFilterData={async () => []}
+      onRefsReady={handleRefsReady}
+      renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+        <FilterSheet
+          open={open}
+          onOpenChange={onOpenChange}
+          column={column}
+          attr={attr}
+          data={data}
+          loading={loading}
+        />
+      )}
+      columnPinning={columnPinning}
+      toolbarActions={toolbarActions}
+      selectionActions={selectionActions}
+      recordLabel="category"
+      emptyMessage="No categories yet. Add one to get started."
+    />
+  );
+}
diff --git a/apps/web/src/modules/admin/components/courses/AchievementsBuilder.jsx b/apps/web/src/modules/admin/components/courses/AchievementsBuilder.jsx
new file mode 100644
index 0000000..cc4a220
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/AchievementsBuilder.jsx
@@ -0,0 +1,103 @@
+// modules/admin/components/courses/AchievementsBuilder.jsx
+// The "Achievements" sub-section of the Rewards step: pick an existing
+// achievement from the registry or define a new one — same New/Attach
+// pattern as RoadmapBuilder's Units section. A course carries at most one
+// achievement.
+
+import { useState } from "react";
+import * as LucideIcons from "lucide-react";
+import { Plus, Link2, Trophy, BadgeCheck, Trash2 } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import AttachAchievementDialog from "./AttachAchievementDialog";
+import CreateAchievementDialog from "./CreateAchievementDialog";
+
+export default function AchievementsBuilder({ achievementKeys, onAchievementKeysChange, registry, onRegistryChange }) {
+  const [attachOpen, setAttachOpen] = useState(false);
+  const [createOpen, setCreateOpen] = useState(false);
+
+  const selected = registry.find((a) => a.key === achievementKeys[0]) ?? null;
+
+  const handleAttach = (key) => onAchievementKeysChange([key]);
+
+  const handleCreated = (achievement) => {
+    onRegistryChange([...registry, achievement]);
+    onAchievementKeysChange([achievement.key]);
+  };
+
+  const declineAchievement = () => {
+    onAchievementKeysChange([]);
+  };
+
+  return (
+    <div className="border-t pt-4">
+      <div className="flex items-start justify-between gap-3 pb-3 mb-3 border-b">
+        <div className="space-y-0.5">
+          <h2 className="text-sm font-semibold">Achievements</h2>
+          <p className="text-xs text-muted-foreground">
+            Attach an existing achievement from the registry, or define a new one from scratch.
+          </p>
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+
+          <Button type="button" variant="outline" size="sm" onClick={() => setAttachOpen(true)}>
+            <Link2 /> Select
+          </Button>
+          <Button type="button" variant="outline" size="sm" onClick={() => setCreateOpen(true)}>
+            <Plus /> Create
+          </Button>
+        </div>
+      </div>
+
+      {!selected ? (
+        <div className="flex flex-col items-center justify-center gap-2 py-8 text-center">
+          <Trophy className="h-7 w-7 text-muted-foreground" />
+          <p className="text-sm font-medium">No achievement selected</p>
+          <Button type="button" variant="ghost" size="sm" className="text-muted-foreground" onClick={declineAchievement}>
+            Actually, skip achievements
+          </Button>
+        </div>
+      ) : (
+        <div className="rounded-md border px-3 py-2.5 flex items-center gap-3">
+          {(() => {
+            const Icon = LucideIcons[selected.icon] ?? Trophy;
+            return <Icon className="h-4 w-4 text-muted-foreground shrink-0" />;
+          })()}
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium truncate">{selected.label}</p>
+            {selected.description && (
+              <p className="text-xs text-muted-foreground truncate">{selected.description}</p>
+            )}
+          </div>
+          <Badge variant="outline" className="text-[10px] shrink-0 capitalize gap-1">
+            {selected.type === "badge" ? <Trophy className="h-2.5 w-2.5" /> : <BadgeCheck className="h-2.5 w-2.5" />}
+            {selected.type}
+          </Badge>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="text-muted-foreground hover:text-destructive shrink-0 h-7 w-7"
+            onClick={() => onAchievementKeysChange([])}
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
+      )}
+
+      <AttachAchievementDialog
+        open={attachOpen}
+        onOpenChange={setAttachOpen}
+        registry={registry}
+        selectedKey={achievementKeys[0] ?? null}
+        onAttach={handleAttach}
+      />
+      <CreateAchievementDialog
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        onCreated={handleCreated}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/courses/ArchivedCourseTable.jsx b/apps/web/src/modules/admin/components/courses/ArchivedCourseTable.jsx
new file mode 100644
index 0000000..a215eba
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/ArchivedCourseTable.jsx
@@ -0,0 +1,177 @@
+import { useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { RestoreDialog } from "@/components/generic/Dialogs/RestoreDialog";
+import { PermanentDeleteDialog } from "@/components/generic/Dialogs/PermanentDeleteDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/courses/archive/columns.config";
+import { buildToolbarActions } from "../../config/courses/archive/toolbar.config";
+import { buildSelectionActions } from "../../config/courses/archive/selection.config";
+import { buildRowActions } from "../../config/courses/archive/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function ArchivedCoursesTable() {
+    const [restoreTarget, setRestoreTarget] = useState(null);
+    const [restoreIds, setRestoreIds] = useState(null);
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const [deleteIds, setDeleteIds] = useState(null);
+
+    const tableRefsRef = useRef({
+        getFilters: () => [],
+        getSort: () => [],
+        resetSelection: () => { },
+        setFilters: () => { },
+    });
+
+    const navigate = useNavigate();
+
+    const { user: currentUser } = useAuth();
+
+    const {
+        courses, attributes, pagination, setPagination, loading, fetchArchivedCourses,
+        restoreCourse, restoreCourses,
+        permanentlyDeleteCourse, permanentlyDeleteCourses, fetchCoursePermanentDeleteImpact,
+    } = useCourses();
+
+    const handleRefsReady = (refs) => {
+        tableRefsRef.current = refs;
+    };
+
+    const exportConfig = {
+        allData: courses,
+        attributes,
+        filename: `${getTimestamp()}_ArchivedCourses`,
+        sheetName: "Archived Courses",
+        generatedBy: formatGeneratedBy(currentUser),
+    };
+
+    const rowActions = useMemo(() => buildRowActions({
+        navigate,
+        onRestore: (row) => setRestoreTarget(row),
+        onDelete: (row) => setDeleteTarget(row),
+    }), []);
+
+    const toolbarActions = buildToolbarActions({
+        fetchArchivedCourses,
+        pagination,
+        exportConfig,
+        navigate,
+        getFilters: () => tableRefsRef.current.getFilters(),
+        getSort: () => tableRefsRef.current.getSort(),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const selectionActions = buildSelectionActions({
+        exportConfig,
+        restoreCourse:  (row) => setRestoreTarget(row),  // single
+        restoreCourses: (ids) => setRestoreIds(ids),      // bulk
+        deleteCourse:  (row) => setDeleteTarget(row),
+        deleteCourses: (ids) => setDeleteIds(ids),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const columns = useMemo(
+        () => buildDataColumns(attributes, rowActions),
+        [attributes]
+    );
+
+    const handleRestoreSuccess = () => {
+        setRestoreTarget(null);
+        setRestoreIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedCourses({ page: 1, limit: pagination?.limit ?? 10 });
+    };
+
+    const handleDeleteSuccess = () => {
+        setDeleteTarget(null);
+        setDeleteIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedCourses({ page: 1, limit: pagination?.limit ?? 10 });
+    };
+
+    return (
+        <>
+            <DataTable
+                title="Archived Courses"
+                data={courses}
+                columns={columns}
+                attributes={attributes}
+                pagination={pagination}
+                setPagination={setPagination}
+                loading={loading}
+                onFetch={fetchArchivedCourses}
+                onFetchFilterData={() => []}
+                onRefsReady={handleRefsReady}
+                renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+                    <FilterSheet
+                        open={open}
+                        onOpenChange={onOpenChange}
+                        column={column}
+                        attr={attr}
+                        data={data}
+                        loading={loading}
+                    />
+                )}
+                columnPinning={columnPinning}
+                toolbarActions={toolbarActions}
+                selectionActions={selectionActions}
+                recordLabel="course"
+                emptyMessage="No courses found."
+            />
+
+            {/* Single restore */}
+            <RestoreDialog
+                open={!!restoreTarget}
+                onOpenChange={(v) => !v && setRestoreTarget(null)}
+                entity={restoreTarget}
+                entityLabel="Course"
+                getName={(c) => c?.title}
+                onRestore={(c) => restoreCourse(c?.course_id)}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+
+            {/* Bulk restore */}
+            <RestoreDialog
+                open={!!restoreIds}
+                onOpenChange={(v) => !v && setRestoreIds(null)}
+                ids={restoreIds ?? []}
+                entityLabel="Course"
+                onRestore={restoreCourses}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+
+            {/* Single permanent delete */}
+            <PermanentDeleteDialog
+                open={!!deleteTarget}
+                onOpenChange={(v) => !v && setDeleteTarget(null)}
+                entity={deleteTarget}
+                entityLabel="Course"
+                getName={(c) => c?.title}
+                onDelete={(c) => permanentlyDeleteCourse(c?.course_id)}
+                onImpactCheck={() => fetchCoursePermanentDeleteImpact(deleteTarget?.course_id)}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+
+            {/* Bulk permanent delete */}
+            <PermanentDeleteDialog
+                open={!!deleteIds}
+                onOpenChange={(v) => !v && setDeleteIds(null)}
+                ids={deleteIds ?? []}
+                entityLabel="Course"
+                onDelete={permanentlyDeleteCourses}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+        </>
+    );
+}
diff --git a/apps/web/src/modules/admin/components/courses/ArchivedLessonsTable.jsx b/apps/web/src/modules/admin/components/courses/ArchivedLessonsTable.jsx
new file mode 100644
index 0000000..a490339
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/ArchivedLessonsTable.jsx
@@ -0,0 +1,183 @@
+import { useMemo, useRef, useState, useEffect, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { RestoreDialog } from "@/components/generic/Dialogs/RestoreDialog";
+import { PermanentDeleteDialog } from "@/components/generic/Dialogs/PermanentDeleteDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/courses/lessons/archive/columns.config";
+import { buildToolbarActions } from "../../config/courses/lessons/archive/toolbar.config";
+import { buildSelectionActions } from "../../config/courses/lessons/archive/selection.config";
+import { buildRowActions } from "../../config/courses/lessons/archive/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function ArchivedLessonsTable({ courseId, unitId }) {
+    const [restoreTarget, setRestoreTarget] = useState(null);
+    const [restoreIds, setRestoreIds] = useState(null);
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const [deleteIds, setDeleteIds] = useState(null);
+
+    const tableRefsRef = useRef({
+        getFilters: () => [],
+        getSort: () => [],
+        resetSelection: () => { },
+        setFilters: () => { },
+    });
+
+    const navigate = useNavigate();
+
+    const { user: currentUser } = useAuth();
+
+    const {
+        course, unit, lessons, attributes, pagination, setPagination, loading,
+        fetchArchivedLessons, restoreLesson, restoreLessons, fetchLessonFieldValues,
+        permanentlyDeleteLesson, permanentlyDeleteLessons
+    } = useCourses();
+
+    const handleRefsReady = (refs) => {
+        tableRefsRef.current = refs;
+    };
+
+    const exportConfig = {
+        allData: lessons,
+        attributes,
+        filename: `${getTimestamp()}_${course?.title}_${unit?.title}_Lessons`,
+        sheetName: "Archived Lessons",
+        generatedBy: formatGeneratedBy(currentUser),
+    };
+
+    const handleFetch = useCallback(
+        (params) => fetchArchivedLessons(courseId, unitId, params),
+        [courseId, unitId]
+    );
+
+    const rowActions = useMemo(() => buildRowActions({
+        navigate,
+        onRestore: (row) => setRestoreTarget(row),
+        onDelete: (row) => setDeleteTarget(row),
+    }), [courseId, unitId]);
+
+    const toolbarActions = buildToolbarActions({
+        fetchArchivedLessons: (params) => fetchArchivedLessons(courseId, unitId, params),
+        pagination,
+        exportConfig,
+        navigate,
+        courseId,
+        unitId,
+        getFilters: () => tableRefsRef.current.getFilters(),
+        getSort: () => tableRefsRef.current.getSort(),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const selectionActions = buildSelectionActions({
+        exportConfig,
+        restoreLesson: (row) => setRestoreTarget(row),  // single
+        restoreLessons: (ids) => setRestoreIds(ids),      // bulk
+        deleteLesson: (row) => setDeleteTarget(row),
+        deleteLessons: (ids) => setDeleteIds(ids),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const columns = useMemo(
+        () => buildDataColumns(attributes, rowActions),
+        [attributes, rowActions]
+    );
+
+    const handleRestoreSuccess = () => {
+        setRestoreTarget(null);
+        setRestoreIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedLessons(courseId, unitId, { page: 1, limit: pagination?.limit ?? 10 });
+    };
+
+    const handleDeleteSuccess = () => {
+        setDeleteTarget(null);
+        setDeleteIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedLessons(courseId, unitId, { page: 1, limit: pagination?.limit ?? 10 });
+    };
+
+    return (
+        <>
+            <DataTable
+                title="Archived Lessons"
+                data={lessons}
+                columns={columns}
+                attributes={attributes}
+                pagination={pagination}
+                setPagination={setPagination}
+                loading={loading}
+                onFetch={handleFetch}
+                onFetchFilterData={(field) => fetchLessonFieldValues(courseId, unitId, field)}
+                onRefsReady={handleRefsReady}
+                renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+                    <FilterSheet
+                        open={open}
+                        onOpenChange={onOpenChange}
+                        column={column}
+                        attr={attr}
+                        data={data}
+                        loading={loading}
+                    />
+                )}
+                columnPinning={columnPinning}
+                toolbarActions={toolbarActions}
+                selectionActions={selectionActions}
+                recordLabel="lesson"
+                emptyMessage="No lessons found."
+            />
+
+            {/* Single restore */}
+            <RestoreDialog
+                open={!!restoreTarget}
+                onOpenChange={(v) => !v && setRestoreTarget(null)}
+                entity={restoreTarget}
+                entityLabel="Lesson"
+                getName={(c) => c?.title}
+                onRestore={(c) => restoreLesson(courseId, unitId, c?.lesson_id)}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+
+            {/* Bulk restore */}
+            <RestoreDialog
+                open={!!restoreIds}
+                onOpenChange={(v) => !v && setRestoreIds(null)}
+                ids={restoreIds ?? []}
+                entityLabel="Lesson"
+                onRestore={(ids) => restoreLessons(courseId, unitId, ids)}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+
+            {/* Single permanent delete */}
+            <PermanentDeleteDialog
+                open={!!deleteTarget}
+                onOpenChange={(v) => !v && setDeleteTarget(null)}
+                entity={deleteTarget}
+                entityLabel="Lesson"
+                getName={(c) => c?.title}
+                onDelete={(c) => permanentlyDeleteLesson(courseId, unitId, c?.lesson_id)}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+
+            {/* Bulk permanent delete */}
+            <PermanentDeleteDialog
+                open={!!deleteIds}
+                onOpenChange={(v) => !v && setDeleteIds(null)}
+                ids={deleteIds ?? []}
+                entityLabel="Lesson"
+                onDelete={(ids) => permanentlyDeleteLessons(courseId, unitId, ids)}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+        </>
+    );
+}
diff --git a/apps/web/src/modules/admin/components/courses/ArchivedUnitsTable.jsx b/apps/web/src/modules/admin/components/courses/ArchivedUnitsTable.jsx
new file mode 100644
index 0000000..137c20c
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/ArchivedUnitsTable.jsx
@@ -0,0 +1,182 @@
+import { useMemo, useRef, useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { RestoreDialog } from "@/components/generic/Dialogs/RestoreDialog";
+import { PermanentDeleteDialog } from "@/components/generic/Dialogs/PermanentDeleteDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/courses/units/archive/columns.config";
+import { buildToolbarActions } from "../../config/courses/units/archive/toolbar.config";
+import { buildSelectionActions } from "../../config/courses/units/archive/selection.config";
+import { buildRowActions } from "../../config/courses/units/archive/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function ArchivedUnitsTable({ courseId }) {
+    const [restoreTarget, setRestoreTarget] = useState(null);
+    const [restoreIds, setRestoreIds] = useState(null);
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const [deleteIds, setDeleteIds] = useState(null);
+
+    const tableRefsRef = useRef({
+        getFilters: () => [],
+        getSort: () => [],
+        resetSelection: () => { },
+        setFilters: () => { },
+    });
+
+    const navigate = useNavigate();
+
+    const { user: currentUser } = useAuth();
+
+    const {
+        course, units, attributes, pagination, setPagination, loading,
+        fetchArchivedUnits, restoreUnit, restoreUnits, fetchUnitFieldValues,
+        permanentlyDeleteUnit, permanentlyDeleteUnits, fetchUnitPermanentDeleteImpact,
+    } = useCourses();
+
+    const handleRefsReady = (refs) => {
+        tableRefsRef.current = refs;
+    };
+
+    const exportConfig = {
+        allData: units,
+        attributes,
+        filename: `${getTimestamp()}_${course?.title}_ArchivedUnits`,
+        sheetName: "Archived Units",
+        generatedBy: formatGeneratedBy(currentUser),
+    };
+
+    const handleFetch = useCallback(
+        (params) => fetchArchivedUnits(courseId, params),
+        [courseId]
+    );
+
+    const rowActions = useMemo(() => buildRowActions({
+        onRestore: (row) => setRestoreTarget(row),
+        onDelete: (row) => setDeleteTarget(row),
+    }), [courseId]);
+
+    const toolbarActions = buildToolbarActions({
+        fetchArchivedUnits: (params) => fetchArchivedUnits(courseId, params),
+        pagination,
+        exportConfig,
+        navigate,
+        courseId,
+        getFilters: () => tableRefsRef.current.getFilters(),
+        getSort: () => tableRefsRef.current.getSort(),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const selectionActions = buildSelectionActions({
+        exportConfig,
+        restoreUnit: (row) => setRestoreTarget(row),  // single
+        restoreUnits: (ids) => setRestoreIds(ids),      // bulk
+        deleteUnit: (row) => setDeleteTarget(row),
+        deleteUnits: (ids) => setDeleteIds(ids),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const columns = useMemo(
+        () => buildDataColumns(attributes, rowActions),
+        [attributes]
+    );
+
+    const handleRestoreSuccess = () => {
+        setRestoreTarget(null);
+        setRestoreIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedUnits(courseId, { page: 1, limit: pagination?.limit ?? 10 });
+    };
+
+    const handleDeleteSuccess = () => {
+        setDeleteTarget(null);
+        setDeleteIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedUnits(courseId, { page: 1, limit: pagination?.limit ?? 10 });
+    };
+
+    return (
+        <>
+            <DataTable
+                title="Archvied Units"
+                data={units}
+                columns={columns}
+                attributes={attributes}
+                pagination={pagination}
+                setPagination={setPagination}
+                loading={loading}
+                onFetch={handleFetch}
+                onFetchFilterData={(field) => fetchUnitFieldValues(courseId, field)}
+                onRefsReady={handleRefsReady}
+                renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+                    <FilterSheet
+                        open={open}
+                        onOpenChange={onOpenChange}
+                        column={column}
+                        attr={attr}
+                        data={data}
+                        loading={loading}
+                    />
+                )}
+                columnPinning={columnPinning}
+                toolbarActions={toolbarActions}
+                selectionActions={selectionActions}
+                recordLabel="unit"
+                emptyMessage="No units found."
+            />
+
+            {/* Single restore */}
+            <RestoreDialog
+                open={!!restoreTarget}
+                onOpenChange={(v) => !v && setRestoreTarget(null)}
+                entity={restoreTarget}
+                entityLabel="Unit"
+                getName={(c) => c?.title}
+                onRestore={(c) => restoreUnit(courseId, c?.unit_id)}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+
+            {/* Bulk restore */}
+            <RestoreDialog
+                open={!!restoreIds}
+                onOpenChange={(v) => !v && setRestoreIds(null)}
+                ids={restoreIds ?? []}
+                entityLabel="Unit"
+                onRestore={(ids) => restoreUnits(courseId, ids)}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+
+            {/* Single permanent delete */}
+            <PermanentDeleteDialog
+                open={!!deleteTarget}
+                onOpenChange={(v) => !v && setDeleteTarget(null)}
+                entity={deleteTarget}
+                entityLabel="Unit"
+                getName={(c) => c?.title}
+                onDelete={(c) => permanentlyDeleteUnit(courseId, c?.unit_id)}
+                onImpactCheck={() => fetchUnitPermanentDeleteImpact(courseId, deleteTarget?.unit_id)}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+
+            {/* Bulk permanent delete */}
+            <PermanentDeleteDialog
+                open={!!deleteIds}
+                onOpenChange={(v) => !v && setDeleteIds(null)}
+                ids={deleteIds ?? []}
+                entityLabel="Unit"
+                onDelete={(ids) => permanentlyDeleteUnits(courseId, ids)}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+        </>
+    );
+}
diff --git a/apps/web/src/modules/admin/components/courses/AssessmentEditor.jsx b/apps/web/src/modules/admin/components/courses/AssessmentEditor.jsx
new file mode 100644
index 0000000..12825b0
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/AssessmentEditor.jsx
@@ -0,0 +1,804 @@
+import { useEffect, useRef, useState } from "react";
+import { Plus, Save, ClipboardList, ChevronUp, ChevronDown, AlertTriangle, Trash2, X } from "lucide-react";
+
+import { toast } from "sonner";
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Spinner } from "@/components/ui/spinner";
+import { Checkbox } from "@/components/ui/checkbox";
+import { cn } from "@/lib/utils";
+import { QuestionCard, makeQuestion } from "./QuestionEditor";
+import api from "@/utils/api.util";
+
+// ── Dirty-check snapshot ──────────────────────────────────────────────────────
+
+function snapAssessment({ title, passingScore, timeLimit, isRequired, maxQuestions, maxAttempts, cooldownHours, shuffleQuestions, questions }) {
+  return JSON.stringify({
+    title, passingScore, timeLimit, isRequired, maxQuestions, maxAttempts, cooldownHours, shuffleQuestions,
+    questions: questions.map((q) => ({
+      question_id: q.question_id ?? null,
+      question:    q.question,
+      type:        q.type,
+      points:      q.points ?? 1,
+      options:     (q.options ?? []).map((o) => ({
+        option_id:  o.option_id ?? null,
+        text:       o.text,
+        is_correct: o.is_correct,
+      })),
+    })),
+  });
+}
+
+// ── Server row → form state ──────────────────────────────────────────────────
+
+function toFormState(a) {
+  return {
+    title:            a?.title ?? "",
+    passingScore:     a?.passing_score ?? 70,
+    timeLimit:        a?.time_limit_minutes ?? "",
+    isRequired:       a?.is_required === true || a?.is_required === 1,
+    maxQuestions:     a?.max_questions ?? "",
+    maxAttempts:      a?.max_attempts ?? 3,
+    cooldownHours:    a?.cooldown_hours ?? 24,
+    shuffleQuestions: a?.shuffle_questions === true || a?.shuffle_questions === 1,
+    questions:        (a?.questions ?? []).map((q) => ({ ...q, _tempId: q.question_id, options: q.options ?? [] })),
+  };
+}
+
+// ── Validation ────────────────────────────────────────────────────────────────
+
+function validate(questions) {
+  const errors = {};
+  questions.forEach((q, i) => {
+    const qErr = {};
+    if (!q.question?.trim()) qErr.question = "Question text is required.";
+    const correctCount = q.options.filter((o) => o.is_correct).length;
+    if (correctCount === 0) qErr.options = "At least one correct answer is required.";
+    if (q.options.some((o) => !o.text?.trim())) qErr.options = "All option texts are required.";
+    if (Object.keys(qErr).length) errors[i] = qErr;
+  });
+  return errors;
+}
+
+// ── Jump to input ─────────────────────────────────────────────────────────────
+
+function JumpToInput({ max, onJump }) {
+  const [val, setVal] = useState("");
+
+  const handleJump = () => {
+    const n = parseInt(val, 10);
+    if (!isNaN(n) && n >= 1 && n <= max) {
+      onJump(n - 1);
+      setVal("");
+    }
+  };
+
+  return (
+    <div className="flex gap-1">
+      <Input
+        type="number"
+        min={1}
+        max={max}
+        value={val}
+        onChange={(e) => setVal(e.target.value)}
+        onKeyDown={(e) => e.key === "Enter" && handleJump()}
+        placeholder={`1–${max}`}
+        className="h-7 text-xs"
+      />
+      <Button
+        type="button"
+        size="sm"
+        variant="outline"
+        className="h-7 px-2 text-xs shrink-0"
+        onClick={handleJump}
+      >
+        Go
+      </Button>
+    </div>
+  );
+}
+
+// ── Question Navigator ────────────────────────────────────────────────────────
+
+const TYPE_LABEL = {
+  multiple_choice: "MC",
+  multi_select: "MS",
+  true_false: "TF",
+};
+
+function QuestionNavigator({ questions, activeIndex, onJump, onMove, navItemRefs, navContainerRef, errors }) {
+  return (
+    <div className="flex flex-col rounded-lg border bg-card overflow-hidden">
+
+      {/* Header */}
+      <div className="px-3 py-3 border-b shrink-0">
+        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+          Questions
+        </p>
+        <p className="text-xs text-muted-foreground mt-0.5">
+          {questions.length} total
+        </p>
+      </div>
+
+      {/* Scrollable list */}
+      <div ref={navContainerRef} className="max-h-96 overflow-y-auto py-2">
+        {questions.length === 0 ? (
+          <p className="text-xs text-muted-foreground text-center py-8 px-3">
+            No questions yet.
+          </p>
+        ) : (
+          <div className="space-y-0.5 px-2">
+            {questions.map((q, i) => {
+              const isActive = i === activeIndex;
+              const hasError = !!errors?.[i];
+              const typeLabel = TYPE_LABEL[q.type] ?? "Q";
+
+              return (
+                <div
+                  key={q._tempId ?? q.question_id ?? i}
+                  ref={(el) => (navItemRefs.current[i] = el)}
+                  onClick={() => onJump(i)}
+                  className={cn(
+                    "group flex items-center gap-1.5 rounded-md px-2 py-1.5 cursor-pointer transition-colors",
+                    isActive
+                      ? "bg-primary/10 text-primary"
+                      : hasError
+                        ? "bg-destructive/10 text-destructive hover:bg-destructive/20"
+                        : "hover:bg-muted text-foreground"
+                  )}
+                >
+                  {/* Number badge */}
+                  <span className={cn(
+                    "flex h-5 w-5 shrink-0 items-center justify-center rounded text-[10px] font-semibold",
+                    isActive
+                      ? "bg-primary text-primary-foreground"
+                      : hasError
+                        ? "bg-destructive text-destructive-foreground"
+                        : "bg-muted-foreground/20 text-muted-foreground"
+                  )}>
+                    {i + 1}
+                  </span>
+
+                  {/* Type */}
+                  <span className="text-[10px] font-medium text-muted-foreground shrink-0 w-5">
+                    {typeLabel}
+                  </span>
+
+                  {/* Question preview */}
+                  <span className="flex-1 text-xs truncate min-w-0">
+                    {q.question?.trim()
+                      ? q.question.trim()
+                      : <span className="italic text-muted-foreground">Untitled</span>
+                    }
+                  </span>
+
+                  {/* Move buttons — show on hover */}
+                  <div className="hidden group-hover:flex items-center gap-0.5 shrink-0">
+                    <button
+                      type="button"
+                      onClick={(e) => { e.stopPropagation(); onMove(i, "up"); }}
+                      disabled={i === 0}
+                      className="h-4 w-4 flex items-center justify-center rounded hover:bg-muted-foreground/20 disabled:opacity-30 transition-colors"
+                    >
+                      <ChevronUp className="h-3 w-3" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={(e) => { e.stopPropagation(); onMove(i, "down"); }}
+                      disabled={i === questions.length - 1}
+                      className="h-4 w-4 flex items-center justify-center rounded hover:bg-muted-foreground/20 disabled:opacity-30 transition-colors"
+                    >
+                      <ChevronDown className="h-3 w-3" />
+                    </button>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Jump to — only when enough questions */}
+      {questions.length > 5 && (
+        <div className="px-3 py-3 border-t shrink-0 space-y-1.5">
+          <p className="text-xs text-muted-foreground">Jump to question</p>
+          <JumpToInput max={questions.length} onJump={onJump} />
+        </div>
+      )}
+
+    </div>
+  );
+}
+
+// ── Main ──────────────────────────────────────────────────────────────────────
+
+export default function AssessmentEditor({ courseId, onSaved, onCancel }) {
+  const {
+    createAssessment, updateAssessment,
+    bulkSyncAssessmentQuestions,
+    loading,
+  } = useCourses();
+
+  const [localAssessment, setLocalAssessment] = useState(null);
+  const { user } = useAuth();
+
+  const DRAFT_KEY = `draftAssessment_${courseId}`;
+  const [draftInfo, setDraftInfo] = useState(null); // { savedAt } — non-null while an unsaved local draft exists
+
+  const [initializing, setInitializing] = useState(true);
+  const [questions, setQuestions] = useState([]);
+  const [errors, setErrors] = useState({});
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const [title, setTitle] = useState("");
+  const [passingScore, setPassingScore] = useState(70);
+  const [timeLimit, setTimeLimit] = useState("");
+  const [isRequired, setIsRequired] = useState(false);
+  const [maxQuestions, setMaxQuestions] = useState("");
+  const [maxAttempts, setMaxAttempts] = useState(3);
+  const [cooldownHours, setCooldownHours] = useState(24);
+  const [shuffleQuestions, setShuffleQuestions] = useState(false);
+
+  // ── Update confirmation dialog ─────────────────────────────────────────────
+  const [confirmOpen, setConfirmOpen]           = useState(false);
+  const [inProgressCount, setInProgressCount]   = useState(0);
+  const [confirmLoading, setConfirmLoading]      = useState(false);
+  const pendingSaveRef   = useRef(null); // stores the meta+questions payload until confirmed
+  const initialSnapshot  = useRef(null);
+  const originalQuestionIdsRef = useRef([]); // ids loaded from the server — used to detect a full-pool wipe on save
+
+  const questionRefs = useRef([]);
+  const navItemRefs = useRef([]);
+  const navContainerRef = useRef(null);
+
+  // ── Fetch — silently treat 404 as "no assessment yet" (create mode) ─────────
+  useEffect(() => {
+    (async () => {
+      try {
+        const { data } = await api.get(`/admin/courses/${courseId}/assessment`);
+        const result = data?.data?.data ?? null;
+        setLocalAssessment(result);
+      } catch (err) {
+        if (err?.response?.status !== 404) {
+          toast(err?.response?.data?.message ?? "Could not load assessment.");
+        }
+      } finally {
+        setInitializing(false);
+      }
+    })();
+  }, [courseId]);
+
+  // ── Seed ──────────────────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!localAssessment) return;
+    const s = toFormState(localAssessment);
+    setTitle(s.title); setPassingScore(s.passingScore); setTimeLimit(s.timeLimit); setIsRequired(s.isRequired);
+    setMaxQuestions(s.maxQuestions); setMaxAttempts(s.maxAttempts); setCooldownHours(s.cooldownHours);
+    setShuffleQuestions(s.shuffleQuestions); setQuestions(s.questions);
+    initialSnapshot.current = snapAssessment(s);
+    originalQuestionIdsRef.current = s.questions.map((q) => q.question_id).filter(Boolean);
+  }, [localAssessment]);
+
+  // ── Restore an unsaved local draft (survives a reload before Save Assessment) ─
+  useEffect(() => {
+    if (initializing) return;
+    const raw = localStorage.getItem(DRAFT_KEY);
+    if (!raw) return;
+    try {
+      const draft = JSON.parse(raw);
+      if (!draft?.questions) return;
+      setTitle(draft.title ?? "");
+      setPassingScore(draft.passingScore ?? 70);
+      setTimeLimit(draft.timeLimit ?? "");
+      setIsRequired(draft.isRequired ?? false);
+      setMaxQuestions(draft.maxQuestions ?? "");
+      setMaxAttempts(draft.maxAttempts ?? 3);
+      setCooldownHours(draft.cooldownHours ?? 24);
+      setShuffleQuestions(draft.shuffleQuestions ?? false);
+      setQuestions(draft.questions ?? []);
+      setDraftInfo({ savedAt: draft.savedAt });
+      toast("Restored an unsaved draft from this browser.");
+    } catch {
+      localStorage.removeItem(DRAFT_KEY);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initializing]);
+
+  // ── Scroll to keep active nav item visible ─────────────────────────────────
+  useEffect(() => {
+    const item = navItemRefs.current[activeIndex];
+    const container = navContainerRef.current;
+    if (!item || !container) return;
+
+    const itemTop = item.offsetTop;
+    const itemBottom = itemTop + item.offsetHeight;
+    const viewTop = container.scrollTop;
+    const viewBottom = viewTop + container.clientHeight;
+
+    if (itemTop < viewTop) {
+      container.scrollTop = itemTop;
+    } else if (itemBottom > viewBottom) {
+      container.scrollTop = itemBottom - container.clientHeight;
+    }
+  }, [activeIndex]);
+
+  // ── IntersectionObserver — highlight nav as user scrolls ──────────────────
+  useEffect(() => {
+    if (!questions.length) return;
+    const observers = [];
+
+    questionRefs.current.forEach((el, i) => {
+      if (!el) return;
+      const observer = new IntersectionObserver(
+        ([entry]) => { if (entry.isIntersecting) setActiveIndex(i); },
+        { rootMargin: "-20% 0px -70% 0px", threshold: 0 }
+      );
+      observer.observe(el);
+      observers.push(observer);
+    });
+
+    return () => observers.forEach((o) => o.disconnect());
+  }, [questions.length]);
+
+  // ── Scroll helper — a generous scroll-margin-top on each question keeps it
+  //    clear of the page's sticky navbar/tab-bar above without needing to
+  //    measure their heights.
+  const scrollToQuestion = (index) => {
+    questionRefs.current[index]?.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
+
+  // ── Question actions ───────────────────────────────────────────────────────
+  const addQuestion = (type = "multiple_choice") => {
+    setQuestions((prev) => {
+      const next = [...prev, { ...makeQuestion(type), order_index: prev.length }];
+      setTimeout(() => {
+        const idx = next.length - 1;
+        setActiveIndex(idx);
+        scrollToQuestion(idx);
+      }, 50);
+      return next;
+    });
+  };
+
+  const updateQuestion = (index, updated) => {
+    setQuestions((prev) => prev.map((q, i) => i === index ? updated : q));
+    setErrors((prev) => { const e = { ...prev }; delete e[index]; return e; });
+  };
+
+  const removeQuestion = (index) => {
+    setQuestions((prev) => prev.filter((_, i) => i !== index));
+    setActiveIndex((prev) => Math.max(0, prev >= index ? prev - 1 : prev));
+  };
+
+  const moveQuestion = (index, direction) => {
+    setQuestions((prev) => {
+      const next = [...prev];
+      const swapIndex = direction === "up" ? index - 1 : index + 1;
+      if (swapIndex < 0 || swapIndex >= next.length) return prev;
+      [next[index], next[swapIndex]] = [next[swapIndex], next[index]];
+      return next;
+    });
+    const newIndex = direction === "up" ? index - 1 : index + 1;
+    setActiveIndex(newIndex);
+    setTimeout(() => scrollToQuestion(newIndex), 50);
+  };
+
+  const jumpTo = (index) => {
+    setActiveIndex(index);
+    scrollToQuestion(index);
+  };
+
+  const totalPoints = questions.reduce((sum, q) => sum + (q.points ?? 1), 0);
+
+  // ── Dirty tracking ─────────────────────────────────────────────────────────
+  const isDirty = initialSnapshot.current === null
+    ? questions.length > 0
+    : snapAssessment({ title, passingScore, timeLimit, isRequired, maxQuestions, maxAttempts, cooldownHours, shuffleQuestions, questions }) !== initialSnapshot.current;
+
+  const { dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty);
+
+  // ── Auto-save unsaved changes to localStorage as a draft ───────────────────
+  useEffect(() => {
+    if (initializing) return;
+    const timer = setTimeout(() => {
+      if (isDirty) {
+        const payload = { title, passingScore, timeLimit, isRequired, maxQuestions, maxAttempts, cooldownHours, shuffleQuestions, questions, savedAt: Date.now() };
+        try {
+          localStorage.setItem(DRAFT_KEY, JSON.stringify(payload));
+          setDraftInfo({ savedAt: payload.savedAt });
+        } catch {
+          // localStorage full/unavailable — draft persistence is best-effort only.
+        }
+      } else {
+        localStorage.removeItem(DRAFT_KEY);
+        setDraftInfo(null);
+      }
+    }, 400);
+    return () => clearTimeout(timer);
+  }, [initializing, isDirty, title, passingScore, timeLimit, isRequired, maxQuestions, maxAttempts, cooldownHours, shuffleQuestions, questions, DRAFT_KEY]);
+
+  // ── Clear draft — discards the local draft and reverts to the last loaded state ─
+  const handleClearDraft = () => {
+    localStorage.removeItem(DRAFT_KEY);
+    setDraftInfo(null);
+    const s = toFormState(localAssessment);
+    setTitle(s.title); setPassingScore(s.passingScore); setTimeLimit(s.timeLimit); setIsRequired(s.isRequired);
+    setMaxQuestions(s.maxQuestions); setMaxAttempts(s.maxAttempts); setCooldownHours(s.cooldownHours);
+    setShuffleQuestions(s.shuffleQuestions); setQuestions(s.questions);
+    setErrors({});
+    toast("Draft cleared.");
+  };
+
+  // ── Save ───────────────────────────────────────────────────────────────────
+  const handleSave = async () => {
+    const errs = validate(questions);
+    if (Object.keys(errs).length) {
+      setErrors(errs);
+      jumpTo(parseInt(Object.keys(errs)[0], 10));
+      return;
+    }
+
+    const assessmentId = localAssessment?.assessment_id;
+    const meta = {
+      title: title || "Course Assessment",
+      passing_score: passingScore,
+      time_limit_minutes: timeLimit ? parseInt(timeLimit) : null,
+      is_required: isRequired,
+      max_questions: maxQuestions ? parseInt(maxQuestions) : null,
+      max_attempts:      parseInt(maxAttempts) || 3,
+      cooldown_hours:    parseInt(cooldownHours) || 24,
+      shuffle_questions: shuffleQuestions,
+      updatedBy: user?.user_id,
+      createdBy: user?.user_id,
+    };
+
+    // New assessment — no students can be in progress yet, save directly.
+    if (!assessmentId) {
+      await executeSave(null, meta);
+      return;
+    }
+
+    // Existing assessment — fetch in_progress count then show mandatory confirmation.
+    setConfirmLoading(true);
+    try {
+      const { data } = await api.get(`/admin/courses/${courseId}/assessment/${assessmentId}/sessions`);
+      const count = (data?.data?.sessions ?? []).filter((s) => s.status === 'in_progress').length;
+      setInProgressCount(count);
+    } catch {
+      setInProgressCount(0);
+    } finally {
+      setConfirmLoading(false);
+    }
+    pendingSaveRef.current = { assessmentId, meta };
+    setConfirmOpen(true);
+  };
+
+  const executeSave = async (assessmentId, meta) => {
+    let id = assessmentId;
+    if (!id) {
+      const res = await createAssessment(courseId, meta);
+      // res is the raw response body: { status, message, data: { data: assessment } }
+      // (createAssessment() itself unwraps the same object as data?.data?.data to get
+      // the assessment row — this needs the same two levels, not three).
+      id = res?.data?.data?.assessment_id;
+      if (!id) return;
+      setLocalAssessment((prev) => ({ ...prev, assessment_id: id }));
+    } else {
+      await updateAssessment(courseId, id, meta);
+    }
+
+    // A save that keeps none of the previously-loaded question ids would archive the
+    // entire existing pool in one call — could be a deliberate "start over", but is
+    // exactly the signature of a stale/incomplete state bug. Require explicit confirmation.
+    const retainedIds = questions.map((q) => q.question_id).filter(Boolean);
+    const wipesPool = originalQuestionIdsRef.current.length > 0 && retainedIds.length === 0;
+    if (wipesPool && !window.confirm(
+      `This will permanently remove all ${originalQuestionIdsRef.current.length} existing question(s) from this assessment. Continue?`
+    )) {
+      return;
+    }
+
+    await bulkSyncAssessmentQuestions(courseId, id, questions, user?.user_id, wipesPool);
+
+    initialSnapshot.current = snapAssessment({ title, passingScore, timeLimit, isRequired, maxQuestions, maxAttempts, cooldownHours, shuffleQuestions, questions });
+    localStorage.removeItem(DRAFT_KEY);
+    setDraftInfo(null);
+    onSaved?.();
+  };
+
+  const handleConfirmSave = async () => {
+    const { assessmentId, meta } = pendingSaveRef.current ?? {};
+    if (!assessmentId) return;
+    await executeSave(assessmentId, meta);
+    pendingSaveRef.current = null;
+    setConfirmOpen(false);
+  };
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+  return (
+    <div className="space-y-4">
+
+      {/* ── Toolbar ── */}
+      <div className="flex items-center gap-2 rounded-lg border bg-card px-4 py-3">
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-semibold flex items-center gap-1.5">
+            <ClipboardList className="h-4 w-4 text-muted-foreground" />
+            {localAssessment ? "Modify Assessment" : "Create Assessment"}
+          </p>
+          <p className="text-xs text-muted-foreground">
+            {questions.length} question{questions.length !== 1 ? "s" : ""} · {totalPoints} total point{totalPoints !== 1 ? "s" : ""}
+          </p>
+        </div>
+        {draftInfo && (
+          <div className="hidden sm:flex items-center gap-3 text-xs text-muted-foreground">
+            <span className="inline-flex items-center gap-1.5 text-sm">
+              <span className="size-2 rounded-full bg-amber-500" />
+              Draft saved {new Date(draftInfo.savedAt).toLocaleTimeString()}
+            </span>
+            <Button type="button" variant="outline" size="sm" onClick={handleClearDraft}>
+              <Trash2 className="h-3.5 w-3.5" />
+              Clear draft
+            </Button>
+          </div>
+        )}
+        {onCancel && (
+          <Button type="button" variant="ghost" size="sm" onClick={onCancel}>
+            <X className="h-3.5 w-3.5 mr-1" />
+            Cancel
+          </Button>
+        )}
+        <Button onClick={handleSave} disabled={loading || confirmLoading || !isDirty}>
+          {(loading || confirmLoading) ? <Spinner className="h-4 w-4 mr-2" /> : <Save className="h-4 w-4 mr-2" />}
+          Save Assessment
+        </Button>
+      </div>
+
+      {/* ── Split layout ── */}
+      <div className="flex flex-col lg:flex-row gap-6 items-start">
+
+        {/* LEFT — Navigator (desktop only) */}
+        <div className="hidden lg:block w-64 shrink-0">
+          <QuestionNavigator
+            questions={questions}
+            activeIndex={activeIndex}
+            onJump={jumpTo}
+            onMove={moveQuestion}
+            navItemRefs={navItemRefs}
+            navContainerRef={navContainerRef}
+            errors={errors}
+          />
+        </div>
+
+        {/* RIGHT — Main content */}
+        <div className="flex-1 min-w-0 w-full">
+          {initializing ? (
+            <div className="flex items-center justify-center py-20">
+              <Spinner className="h-6 w-6" />
+            </div>
+          ) : (
+            <div className="space-y-6 pb-16">
+
+              {/* ── Settings ── */}
+              <div className="rounded-lg border bg-card p-6 space-y-5">
+                <p className="text-sm font-medium">Settings</p>
+
+                <div className="space-y-1.5">
+                  <Label>Title</Label>
+                  <Input
+                    value={title}
+                    onChange={(e) => setTitle(e.target.value)}
+                    placeholder="Course Assessment"
+                  />
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label>Passing Score (%)</Label>
+                    <Input
+                      type="number"
+                      min={0}
+                      max={100}
+                      value={passingScore}
+                      onChange={(e) => setPassingScore(parseInt(e.target.value) || 0)}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label>
+                      Time Limit{" "}
+                      <span className="text-muted-foreground font-normal text-xs">(mins, blank = none)</span>
+                    </Label>
+                    <Input
+                      type="number"
+                      min={1}
+                      value={timeLimit}
+                      onChange={(e) => setTimeLimit(e.target.value)}
+                      placeholder="No limit"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label>
+                      Max Questions{" "}
+                      <span className="text-muted-foreground font-normal text-xs">(blank = show all)</span>
+                    </Label>
+                    <Input
+                      type="number" min={1} max={questions.length || undefined}
+                      value={maxQuestions}
+                      onChange={(e) => setMaxQuestions(e.target.value)}
+                      placeholder={`All (${questions.length})`}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label>
+                      Max Failed Attempts{" "}
+                      <span className="text-muted-foreground font-normal text-xs">before cooldown</span>
+                    </Label>
+                    <Input
+                      type="number" min={1}
+                      value={maxAttempts}
+                      onChange={(e) => setMaxAttempts(e.target.value)}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label>
+                      Cooldown{" "}
+                      <span className="text-muted-foreground font-normal text-xs">(hours after max fails)</span>
+                    </Label>
+                    <Input
+                      type="number" min={1}
+                      value={cooldownHours}
+                      onChange={(e) => setCooldownHours(e.target.value)}
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-1">
+                  <div className="flex items-center gap-3">
+                    <Checkbox id="assessment_required" checked={isRequired === true} disabled />
+                    <Label htmlFor="assessment_required" className="text-muted-foreground">
+                      Required to complete course
+                    </Label>
+                  </div>
+                  <p className="text-xs text-muted-foreground pl-7">
+                    Derived from this course's Completion Requirements — add or remove a "Pass the Quiz"
+                    requirement on the Requirements step of the course editor to change this.
+                  </p>
+                </div>
+
+                <div className="flex items-center gap-3">
+                  <Checkbox
+                    id="assessment_shuffle"
+                    checked={shuffleQuestions === true}
+                    onCheckedChange={(val) => setShuffleQuestions(val)}
+                  />
+                  <Label htmlFor="assessment_shuffle" className="cursor-pointer">
+                    Shuffle question order for each attempt
+                  </Label>
+                </div>
+              </div>
+
+              {maxQuestions && parseInt(maxQuestions) < questions.length && (
+                <p className="text-xs text-muted-foreground bg-muted rounded-md px-3 py-2">
+                  Takers will see <strong>{maxQuestions}</strong> randomly selected questions
+                  out of <strong>{questions.length}</strong> in the pool.
+                </p>
+              )}
+
+              {/* ── Questions ── */}
+              <div className="space-y-4">
+                {questions.length === 0 ? (
+                  <div className="rounded-lg border border-dashed bg-card p-12 flex flex-col items-center gap-3 text-center">
+                    <ClipboardList className="h-8 w-8 text-muted-foreground/40" />
+                    <p className="text-sm text-muted-foreground">
+                      No questions yet. Add one below.
+                    </p>
+                  </div>
+                ) : (
+                  questions.map((q, i) => (
+                    <div
+                      key={q._tempId ?? q.question_id ?? i}
+                      ref={(el) => (questionRefs.current[i] = el)}
+                      style={{ scrollMarginTop: "calc(var(--navbar-h, 64px) + 180px)" }}
+                      onClick={() => setActiveIndex(i)}
+                    >
+                      <QuestionCard
+                        question={q}
+                        index={i}
+                        onChange={(updated) => updateQuestion(i, updated)}
+                        onRemove={() => removeQuestion(i)}
+                        error={errors[i]}
+                      />
+                    </div>
+                  ))
+                )}
+              </div>
+
+              {/* ── Add question ── */}
+              <div className="rounded-lg border bg-card p-4">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium mb-3">
+                  Add Question
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  {[
+                    { type: "multiple_choice", label: "Multiple Choice" },
+                    { type: "multi_select", label: "Multi Select" },
+                    { type: "true_false", label: "True / False" },
+                  ].map(({ type, label }) => (
+                    <Button
+                      key={type}
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() => addQuestion(type)}
+                    >
+                      <Plus className="h-3.5 w-3.5 mr-1" />
+                      {label}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* ── Update confirmation dialog ── */}
+      {confirmOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
+          <div className="bg-background rounded-xl border shadow-xl w-full max-w-md p-6 space-y-5">
+            <div className="flex items-start gap-3">
+              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-amber-500/10">
+                <AlertTriangle className="h-5 w-5 text-amber-500" />
+              </div>
+              <div>
+                <h2 className="text-base font-semibold">Save Assessment Changes?</h2>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Changes will take effect immediately for all students.
+                </p>
+              </div>
+            </div>
+
+            {inProgressCount > 0 && (
+              <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 px-4 py-3 flex items-center gap-2">
+                <AlertTriangle className="h-4 w-4 text-amber-500 shrink-0" />
+                <p className="text-sm text-amber-700 dark:text-amber-400 font-medium">
+                  {inProgressCount} student{inProgressCount !== 1 ? "s are" : " is"} currently taking this assessment.
+                  Saving now will affect their ongoing session.
+                </p>
+              </div>
+            )}
+
+            <ul className="text-sm text-muted-foreground space-y-1 pl-1">
+              <li>• New passing score applies to future submissions only.</li>
+              <li>• Changing the time limit does not affect already-started sessions.</li>
+              <li>• Adding or removing questions affects any student not yet on that question.</li>
+            </ul>
+
+            <div className="flex gap-3 justify-end pt-1">
+              <Button
+                variant="outline"
+                onClick={() => { setConfirmOpen(false); pendingSaveRef.current = null; }}
+                disabled={loading}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleConfirmSave}
+                disabled={loading}
+              >
+                {loading ? <Spinner className="h-4 w-4 mr-2" /> : null}
+                Save Anyway
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {unsavedChangesDialog}
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/courses/AssessmentOverview.jsx b/apps/web/src/modules/admin/components/courses/AssessmentOverview.jsx
new file mode 100644
index 0000000..831a053
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/AssessmentOverview.jsx
@@ -0,0 +1,470 @@
+import { useEffect, useState } from "react";
+import {
+  ClipboardList, NotebookPen,
+  CheckCircle2, Circle, Users, Activity,
+  ChevronDown, ChevronUp,
+} from "lucide-react";
+import { toast } from "sonner";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import api from "@/utils/api.util";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function InfoRow({ label, children }) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <span className="text-xs text-muted-foreground uppercase tracking-wide">{label}</span>
+      <span className="text-sm font-medium">{children ?? <span className="italic text-muted-foreground">—</span>}</span>
+    </div>
+  );
+}
+
+function SectionCard({ title, children }) {
+  return (
+    <div className="rounded-lg border bg-card p-5 space-y-4">
+      {title && (<><h2 className="text-sm font-semibold">{title}</h2><Separator /></>)}
+      {children}
+    </div>
+  );
+}
+
+function StatCard({ label, value, color = "default" }) {
+  const colors = {
+    default: "bg-card border",
+    green:   "bg-green-500/5  border-green-500/20",
+    red:     "bg-red-500/5    border-red-500/20",
+    blue:    "bg-blue-500/5   border-blue-500/20",
+    amber:   "bg-amber-500/5  border-amber-500/20",
+  };
+  return (
+    <div className={`rounded-lg border p-4 text-center ${colors[color]}`}>
+      <p className="text-2xl font-bold">{value ?? 0}</p>
+      <p className="text-xs text-muted-foreground mt-0.5">{label}</p>
+    </div>
+  );
+}
+
+const TYPE_LABELS = {
+  multiple_choice: "Multiple Choice",
+  multi_select:    "Multi Select",
+  true_false:      "True / False",
+};
+
+function QuestionView({ question, index }) {
+  return (
+    <div className="rounded-lg border bg-card p-5 space-y-3">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex items-start gap-2 min-w-0">
+          <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-muted text-xs font-semibold text-muted-foreground mt-0.5">
+            {index + 1}
+          </span>
+          <p className="text-sm font-medium leading-snug">
+            {question.question?.trim() || <span className="italic text-muted-foreground">Untitled</span>}
+          </p>
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          <Badge variant="outline" className="text-xs">{TYPE_LABELS[question.type] ?? question.type}</Badge>
+          <span className="text-xs text-muted-foreground whitespace-nowrap">
+            {question.points ?? 1} pt{(question.points ?? 1) !== 1 ? "s" : ""}
+          </span>
+        </div>
+      </div>
+      {question.type === "multi_select" && (() => {
+        const cnt = (question.options ?? []).filter((o) => o.is_correct).length;
+        return cnt > 0 ? (
+          <p className="text-xs font-medium text-blue-600 dark:text-blue-400 pl-8">
+            Students select {cnt} answer{cnt !== 1 ? "s" : ""}
+          </p>
+        ) : null;
+      })()}
+      <ul className="space-y-1.5 pl-8">
+        {(question.options ?? []).map((opt, oi) => (
+          <li key={opt.option_id ?? oi} className="flex items-center gap-2 text-sm">
+            {opt.is_correct ? (
+              <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />
+            ) : (
+              <Circle className="h-4 w-4 text-muted-foreground/40 shrink-0" />
+            )}
+            <span className={opt.is_correct ? "font-medium text-green-700 dark:text-green-400" : "text-muted-foreground"}>
+              {opt.text}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+// ─── Completions tab ──────────────────────────────────────────────────────────
+
+function CompletionRow({ row }) {
+  const { fmtDate, fmtDateTime } = useDateFormat();
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <tr
+        className="border-b transition-colors hover:bg-muted/40 cursor-pointer"
+        onClick={() => setOpen((v) => !v)}
+      >
+        <td className="px-4 py-3">
+          <div>
+            <div className="flex items-center gap-1.5">
+              <p className="text-sm font-medium">{row.full_name ?? "Unknown User"}</p>
+              {row.deleted && (
+                <Badge variant="outline" className="text-[10px] px-1.5 py-0 h-[18px] leading-none text-muted-foreground border-muted-foreground/30 shrink-0">
+                  Deleted
+                </Badge>
+              )}
+            </div>
+            <p className="text-xs text-muted-foreground">{row.email ?? "—"}</p>
+          </div>
+        </td>
+        <td className="px-4 py-3 text-center text-sm">{row.attempt_count}</td>
+        <td className="px-4 py-3 text-center">
+          <span className="text-sm font-semibold">{row.best_score}%</span>
+        </td>
+        <td className="px-4 py-3 text-center">
+          {row.passed ? (
+            <Badge className="bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20">Passed</Badge>
+          ) : (
+            <Badge variant="outline" className="text-red-600 dark:text-red-400 border-red-500/20">Not yet</Badge>
+          )}
+        </td>
+        <td className="px-4 py-3 text-xs text-muted-foreground whitespace-nowrap">
+          {row.latest_at ? fmtDate(row.latest_at) : "—"}
+        </td>
+        <td className="px-4 py-3 text-center">
+          {open ? <ChevronUp className="h-4 w-4 mx-auto text-muted-foreground" /> : <ChevronDown className="h-4 w-4 mx-auto text-muted-foreground" />}
+        </td>
+      </tr>
+      {open && (
+        <tr className="bg-muted/30">
+          <td colSpan={6} className="px-6 py-3">
+            <table className="w-full text-xs">
+              <thead>
+                <tr className="text-muted-foreground border-b">
+                  <th className="text-left py-1 font-medium">Attempt</th>
+                  <th className="text-center py-1 font-medium">Score</th>
+                  <th className="text-center py-1 font-medium">Points</th>
+                  <th className="text-center py-1 font-medium">Result</th>
+                  <th className="text-left py-1 font-medium">Date</th>
+                </tr>
+              </thead>
+              <tbody>
+                {(row.attempts ?? []).map((a) => (
+                  <tr key={a.attempt_id} className="border-b border-border/50 last:border-0">
+                    <td className="py-1.5 text-muted-foreground">#{a.attempt_number}</td>
+                    <td className="py-1.5 text-center font-semibold">{a.score}%</td>
+                    <td className="py-1.5 text-center text-muted-foreground">{a.earned_points}/{a.total_points}</td>
+                    <td className="py-1.5 text-center">
+                      {a.passed
+                        ? <span className="text-green-600 dark:text-green-400 font-medium">Pass</span>
+                        : <span className="text-red-500 font-medium">Fail</span>}
+                    </td>
+                    <td className="py-1.5 text-muted-foreground">{fmtDateTime(a.createdAt)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </td>
+        </tr>
+      )}
+    </>
+  );
+}
+
+function CompletionsTab({ completions, loading }) {
+  if (loading) return <div className="space-y-3">{[...Array(3)].map((_, i) => <Skeleton key={i} className="h-12 w-full rounded-lg" />)}</div>;
+
+  if (!completions) return (
+    <div className="rounded-lg border border-dashed bg-card p-12 text-center">
+      <p className="text-sm text-muted-foreground">No data yet.</p>
+    </div>
+  );
+
+  const { summary, completions: rows } = completions;
+
+  return (
+    <div className="space-y-5">
+      <div className="grid grid-cols-2 sm:grid-cols-5 gap-3">
+        <StatCard label="Total Takers"    value={summary.total_takers}   />
+        <StatCard label="Passed"          value={summary.passed_count}   color="green" />
+        <StatCard label="Failed"          value={summary.failed_count}   color="red"   />
+        <StatCard label="Pass Rate"       value={`${summary.pass_rate}%`} color="blue" />
+        <StatCard label="Avg Score"       value={`${summary.avg_score}%`} />
+      </div>
+
+      {rows.length === 0 ? (
+        <div className="rounded-lg border border-dashed bg-card p-10 text-center">
+          <p className="text-sm text-muted-foreground">No one has attempted this assessment yet.</p>
+        </div>
+      ) : (
+        <div className="rounded-lg border bg-card overflow-hidden">
+          <table className="w-full">
+            <thead className="bg-muted/50 border-b">
+              <tr>
+                <th className="text-left px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide">Student</th>
+                <th className="text-center px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide">Attempts</th>
+                <th className="text-center px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide">Best Score</th>
+                <th className="text-center px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide">Status</th>
+                <th className="text-left px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide">Last Attempt</th>
+                <th className="w-8" />
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row) => <CompletionRow key={row.user_id} row={row} />)}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Sessions tab ─────────────────────────────────────────────────────────────
+
+const SESSION_BADGE = {
+  completed:   "bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20",
+  expired:     "bg-red-500/10   text-red-600   dark:text-red-400   border-red-500/20",
+  in_progress: "bg-amber-500/10 text-amber-700 dark:text-amber-400 border-amber-500/20",
+};
+
+function fmtDuration(secs) {
+  if (secs == null) return "—";
+  if (secs < 60) return `${secs}s`;
+  const m = Math.floor(secs / 60);
+  const s = secs % 60;
+  return s > 0 ? `${m}m ${s}s` : `${m}m`;
+}
+
+function SessionsTab({ sessions, loading }) {
+  const { fmtDateTime } = useDateFormat();
+  if (loading) return <div className="space-y-3">{[...Array(4)].map((_, i) => <Skeleton key={i} className="h-10 w-full rounded-lg" />)}</div>;
+
+  if (!sessions) return (
+    <div className="rounded-lg border border-dashed bg-card p-12 text-center">
+      <p className="text-sm text-muted-foreground">No data yet.</p>
+    </div>
+  );
+
+  const { summary, sessions: rows } = sessions;
+
+  return (
+    <div className="space-y-5">
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+        <StatCard label="Total Sessions"  value={summary.total}       />
+        <StatCard label="Completed"       value={summary.completed}   color="green" />
+        <StatCard label="Expired"         value={summary.expired}     color="red"   />
+        <StatCard label="In Progress"     value={summary.in_progress} color="amber" />
+      </div>
+
+      {rows.length === 0 ? (
+        <div className="rounded-lg border border-dashed bg-card p-10 text-center">
+          <p className="text-sm text-muted-foreground">No sessions recorded yet.</p>
+        </div>
+      ) : (
+        <div className="rounded-lg border bg-card overflow-hidden">
+          <table className="w-full">
+            <thead className="bg-muted/50 border-b">
+              <tr>
+                <th className="text-left px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide">Student</th>
+                <th className="text-center px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide">Status</th>
+                <th className="text-left px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide">Started</th>
+                <th className="text-left px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide">Expires At</th>
+                <th className="text-center px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide">Time Spent</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((s) => (
+                <tr key={s.session_id} className="border-b last:border-0 hover:bg-muted/30 transition-colors">
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-1.5">
+                      <p className="text-sm font-medium">{s.full_name ?? "Unknown User"}</p>
+                      {s.deleted && (
+                        <Badge variant="outline" className="text-[10px] px-1.5 py-0 h-[18px] leading-none text-muted-foreground border-muted-foreground/30 shrink-0">
+                          Deleted
+                        </Badge>
+                      )}
+                    </div>
+                    <p className="text-xs text-muted-foreground">{s.email ?? "—"}</p>
+                  </td>
+                  <td className="px-4 py-3 text-center">
+                    <Badge className={SESSION_BADGE[s.status] ?? ""}>
+                      {s.status === 'in_progress' ? 'In Progress' : s.status.charAt(0).toUpperCase() + s.status.slice(1)}
+                    </Badge>
+                  </td>
+                  <td className="px-4 py-3 text-xs text-muted-foreground whitespace-nowrap">
+                    {fmtDateTime(s.started_at)}
+                  </td>
+                  <td className="px-4 py-3 text-xs text-muted-foreground whitespace-nowrap">
+                    {s.expires_at ? fmtDateTime(s.expires_at) : "—"}
+                  </td>
+                  <td className="px-4 py-3 text-center text-sm">{fmtDuration(s.time_spent_seconds)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="space-y-4">
+      <Skeleton className="h-32 w-full rounded-lg" />
+      {[...Array(3)].map((_, i) => <Skeleton key={i} className="h-24 w-full rounded-lg" />)}
+    </div>
+  );
+}
+
+// ─── Main ──────────────────────────────────────────────────────────────────────
+
+const TABS = [
+  { key: "questions",    label: "Questions",    icon: ClipboardList },
+  { key: "completions",  label: "Completions",  icon: Users         },
+  { key: "sessions",     label: "Sessions",     icon: Activity      },
+];
+
+export default function AssessmentOverview({ courseId, onModify }) {
+  const {
+    fetchAssessmentCompletions, fetchAssessmentSessions,
+    completions, sessions,
+    loading,
+  } = useCourses();
+
+  const [localAssessment, setLocalAssessment] = useState(null);
+  const [initializing, setInitializing] = useState(true);
+  const [activeTab, setActiveTab] = useState("questions");
+
+  useEffect(() => {
+    (async () => {
+      setInitializing(true);
+      try {
+        const { data } = await api.get(`/admin/courses/${courseId}/assessment`);
+        setLocalAssessment(data?.data?.data ?? null);
+      } catch (err) {
+        if (err?.response?.status !== 404) {
+          toast(err?.response?.data?.message ?? "Could not load assessment.");
+        }
+      } finally {
+        setInitializing(false);
+      }
+    })();
+  }, [courseId]);
+
+  // Lazy-load completions/sessions the first time each tab is opened
+  useEffect(() => {
+    if (!localAssessment?.assessment_id) return;
+    if (activeTab === "completions") fetchAssessmentCompletions(courseId, localAssessment.assessment_id);
+    if (activeTab === "sessions")    fetchAssessmentSessions(courseId, localAssessment.assessment_id);
+  }, [activeTab, localAssessment?.assessment_id]);
+
+  const questions   = localAssessment?.questions ?? [];
+  const totalPoints = questions.reduce((sum, q) => sum + (q.points ?? 1), 0);
+
+  return (
+    <div className="space-y-5">
+
+      {/* ── Toolbar ── */}
+      <div className="flex items-center gap-2 rounded-lg border bg-card px-4 py-3">
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-semibold flex items-center gap-1.5">
+            <ClipboardList className="h-4 w-4 text-muted-foreground" />
+            Assessment
+          </p>
+          {localAssessment && (
+            <p className="text-xs text-muted-foreground">
+              {questions.length} question{questions.length !== 1 ? "s" : ""} · {totalPoints} total point{totalPoints !== 1 ? "s" : ""}
+            </p>
+          )}
+        </div>
+        {localAssessment && (
+          <Button variant="outline" size="sm" onClick={onModify}>
+            <NotebookPen className="h-4 w-4 mr-2" />
+            Modify Assessment
+          </Button>
+        )}
+      </div>
+
+      {/* ── Sub-tabs ── */}
+      {localAssessment && (
+        <div className="flex gap-1 border-b">
+          {TABS.map(({ key, label, icon: Icon }) => (
+            <button
+              key={key}
+              onClick={() => setActiveTab(key)}
+              className={`flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors
+                ${activeTab === key
+                  ? "border-primary text-primary"
+                  : "border-transparent text-muted-foreground hover:text-foreground"}`}
+            >
+              <Icon className="h-3.5 w-3.5" />
+              {label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* ── Content ── */}
+      {initializing || (loading && !localAssessment) ? (
+        <LoadingSkeleton />
+      ) : !localAssessment ? (
+        <div className="rounded-lg border border-dashed bg-card p-12 flex flex-col items-center gap-3 text-center">
+          <ClipboardList className="h-8 w-8 text-muted-foreground/40" />
+          <p className="text-sm text-muted-foreground">No assessment has been created for this course yet.</p>
+          <Button size="sm" variant="outline" onClick={onModify}>
+            <NotebookPen className="h-4 w-4 mr-2" />
+            Create Assessment
+          </Button>
+        </div>
+      ) : activeTab === "questions" ? (
+        <>
+          <SectionCard title="Settings">
+            <div className="grid grid-cols-2 gap-4">
+              <InfoRow label="Title">{localAssessment.title || "Course Assessment"}</InfoRow>
+              <InfoRow label="Required">
+                <Badge variant={localAssessment.is_required ? "default" : "secondary"} className="mt-0.5">
+                  {localAssessment.is_required ? "Required" : "Optional"}
+                </Badge>
+              </InfoRow>
+              <InfoRow label="Passing Score">{localAssessment.passing_score ?? 70}%</InfoRow>
+              <InfoRow label="Time Limit">
+                {localAssessment.time_limit_minutes ? `${localAssessment.time_limit_minutes} mins` : "No limit"}
+              </InfoRow>
+              <InfoRow label="Questions in Pool">{questions.length}</InfoRow>
+              <InfoRow label="Max Shown per Attempt">
+                {localAssessment.max_questions ? `${localAssessment.max_questions} (random)` : `All (${questions.length})`}
+              </InfoRow>
+              <InfoRow label="Total Points">{totalPoints}</InfoRow>
+              <InfoRow label="Max Failed Attempts">{localAssessment.max_attempts ?? 3}</InfoRow>
+              <InfoRow label="Cooldown After Fails">{localAssessment.cooldown_hours ?? 24}h</InfoRow>
+            </div>
+          </SectionCard>
+
+          <div className="space-y-3">
+            <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground px-1">Questions</p>
+            {questions.length === 0 ? (
+              <div className="rounded-lg border border-dashed bg-card p-10 flex flex-col items-center gap-2 text-center">
+                <p className="text-sm text-muted-foreground">No questions added yet.</p>
+              </div>
+            ) : (
+              questions.map((q, i) => <QuestionView key={q.question_id ?? i} question={q} index={i} />)
+            )}
+          </div>
+        </>
+      ) : activeTab === "completions" ? (
+        <CompletionsTab completions={completions} loading={loading} />
+      ) : (
+        <SessionsTab sessions={sessions} loading={loading} />
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/courses/AttachAchievementDialog.jsx b/apps/web/src/modules/admin/components/courses/AttachAchievementDialog.jsx
new file mode 100644
index 0000000..e435946
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/AttachAchievementDialog.jsx
@@ -0,0 +1,107 @@
+// modules/admin/components/courses/AttachAchievementDialog.jsx
+// Pick a single achievement from the global registry — the attach-existing
+// counterpart to CreateAchievementDialog's create-new flow. A course carries
+// at most one achievement, so selection behaves like a radio, not a checklist.
+
+import { useEffect, useMemo, useState } from "react";
+import { Search, Link2, Trophy, BadgeCheck } from "lucide-react";
+import * as LucideIcons from "lucide-react";
+
+import {
+  Dialog, DialogContent, DialogDescription, DialogFooter,
+  DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
+export default function AttachAchievementDialog({ open, onOpenChange, registry = [], selectedKey, onAttach }) {
+  const [query, setQuery] = useState("");
+  const [picked, setPicked] = useState(null);
+
+  useEffect(() => {
+    if (open) {
+      setQuery("");
+      setPicked(selectedKey ?? null);
+    }
+  }, [open, selectedKey]);
+
+  const candidates = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return registry
+      .filter((a) => a.is_active !== false)
+      .filter((a) => !q || a.label?.toLowerCase().includes(q));
+  }, [registry, query]);
+
+  const handleAttach = () => {
+    if (!picked) return;
+    onAttach(picked);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Link2 className="h-4 w-4" /> Attach Achievement
+          </DialogTitle>
+          <DialogDescription>
+            Pick one achievement from the registry to award learners who complete this course.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="relative">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search achievements..."
+            className="pl-8"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+        </div>
+
+        <ScrollArea className="h-64 rounded-md border">
+          {candidates.length === 0 ? (
+            <p className="text-sm text-muted-foreground text-center py-10">
+              {query ? "No achievements match your search." : "No achievements in the registry yet."}
+            </p>
+          ) : (
+            <RadioGroup value={picked ?? ""} onValueChange={setPicked} className="divide-y gap-0">
+              {candidates.map((a) => {
+                const Icon = LucideIcons[a.icon] ?? Trophy;
+                return (
+                  <label
+                    key={a.key}
+                    htmlFor={`ach-${a.key}`}
+                    className="flex items-center gap-3 px-3 py-2.5 hover:bg-muted/60 cursor-pointer"
+                  >
+                    <RadioGroupItem value={a.key} id={`ach-${a.key}`} />
+                    <Icon className="h-4 w-4 text-muted-foreground shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium truncate">{a.label}</p>
+                      {a.description && (
+                        <p className="text-xs text-muted-foreground truncate">{a.description}</p>
+                      )}
+                    </div>
+                    <Badge variant="outline" className="text-[10px] shrink-0 capitalize gap-1">
+                      {a.type === "badge" ? <Trophy className="h-2.5 w-2.5" /> : <BadgeCheck className="h-2.5 w-2.5" />}
+                      {a.type}
+                    </Badge>
+                  </label>
+                );
+              })}
+            </RadioGroup>
+          )}
+        </ScrollArea>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
+          <Button onClick={handleAttach} disabled={!picked}>Attach</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/courses/CompletionRequirementBuilder.jsx b/apps/web/src/modules/admin/components/courses/CompletionRequirementBuilder.jsx
new file mode 100644
index 0000000..14ebf85
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/CompletionRequirementBuilder.jsx
@@ -0,0 +1,178 @@
+import { useEffect, useState } from "react";
+import { Plus, Trash2, GripVertical, BookOpenCheck, Save, Info } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
+import { Spinner } from "@/components/ui/spinner";
+import { TYPE_DEFS, DEFAULT_BEHAVIOR_TEXT } from "./completionRequirementTypes";
+
+function createRequirement(type) {
+  return { _key: crypto.randomUUID(), type, min_percent: 100, button_label: "", is_required: true };
+}
+
+/**
+ * Self-contained editor for one entity's CompletionRequirement rows — fetches on mount,
+ * saves via its own button (matches EditCourse.jsx's per-section-save convention, not a
+ * bundled page-level submit). Works for both nested (courseId present) and standalone
+ * library (courseId omitted) entities — fetchFn/syncFn + args resolve that server-side.
+ */
+export default function CompletionRequirementBuilder({ entityType, fetchFn, syncFn, args = [] }) {
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [dirty, setDirty] = useState(false);
+
+  useEffect(() => {
+    let active = true;
+    fetchFn(...args).then((rows) => {
+      if (!active) return;
+      setItems((rows ?? []).map((r) => ({ _key: crypto.randomUUID(), ...r })));
+      setLoading(false);
+      setDirty(false);
+    });
+    return () => { active = false; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...args]);
+
+  const availableTypes = Object.entries(TYPE_DEFS)
+    .filter(([, def]) => def.entityTypes.includes(entityType))
+    .map(([value, def]) => ({ value, ...def }));
+
+  const usedTypes = new Set(items.map((i) => i.type));
+  const addableTypes = availableTypes.filter((t) => !usedTypes.has(t.value));
+
+  const update = (key, patch) => {
+    setItems((prev) => prev.map((i) => (i._key === key ? { ...i, ...patch } : i)));
+    setDirty(true);
+  };
+  const addItem = (type) => {
+    setItems((prev) => [...prev, createRequirement(type)]);
+    setDirty(true);
+  };
+  const removeItem = (key) => {
+    setItems((prev) => prev.filter((i) => i._key !== key));
+    setDirty(true);
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    const clean = items.map(({ _key, ...r }) => r);
+    const result = await syncFn(...args, clean);
+    if (result) {
+      setItems(result.map((r) => ({ _key: crypto.randomUUID(), ...r })));
+      setDirty(false);
+    }
+    setSaving(false);
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-8 text-muted-foreground">
+        <Spinner className="size-5" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {items.length === 0 && (
+        <p className="flex items-start gap-2 text-sm text-muted-foreground py-4 px-3 border border-dashed rounded-lg">
+          <Info className="size-4 shrink-0 mt-0.5" />
+          <span>
+            No completion requirements configured — by default, {DEFAULT_BEHAVIOR_TEXT[entityType]}.
+            Add a requirement below to override this.
+          </span>
+        </p>
+      )}
+
+      {items.map((item, idx) => {
+        const def = TYPE_DEFS[item.type];
+        const Icon = def?.icon ?? BookOpenCheck;
+        return (
+          <Card key={item._key}>
+            <CardContent className="pt-4 pb-4 space-y-3">
+              <div className="flex items-center gap-2">
+                <GripVertical className="h-4 w-4 text-muted-foreground shrink-0" />
+                <Badge variant="outline" className="text-xs gap-1 shrink-0">
+                  <Icon className="h-3 w-3" />
+                  {idx + 1}
+                </Badge>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium truncate">{def?.label ?? item.type}</p>
+                  <p className="text-xs text-muted-foreground truncate">{def?.describe(entityType)}</p>
+                </div>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 shrink-0 text-destructive hover:text-destructive"
+                  onClick={() => removeItem(item._key)}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+
+              {item.type === "watch_percent" && (
+                <div className="pl-7 flex items-center gap-2 max-w-48">
+                  <Input
+                    type="number"
+                    min={1}
+                    max={100}
+                    value={item.min_percent ?? 100}
+                    onChange={(e) => update(item._key, { min_percent: Math.min(100, Math.max(1, parseInt(e.target.value) || 1)) })}
+                    className="h-8 text-sm"
+                  />
+                  <Label className="text-xs text-muted-foreground whitespace-nowrap">% watched required</Label>
+                </div>
+              )}
+
+              {item.type === "manual_complete" && (
+                <div className="pl-7 space-y-1 max-w-64">
+                  <Label className="text-xs">Button label (optional)</Label>
+                  <Input
+                    placeholder='Defaults to "Mark Complete"'
+                    value={item.button_label ?? ""}
+                    onChange={(e) => update(item._key, { button_label: e.target.value })}
+                    className="h-8 text-sm"
+                  />
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        );
+      })}
+
+      {addableTypes.length > 0 && (
+        <Select value="" onValueChange={(v) => addItem(v)}>
+          <SelectTrigger className="h-9 w-full text-sm">
+            <span className="flex items-center gap-2 text-muted-foreground">
+              <Plus className="h-4 w-4" />
+              Add Requirement
+            </span>
+          </SelectTrigger>
+          <SelectContent position="popper" sideOffset={4}>
+            {addableTypes.map((t) => (
+              <SelectItem key={t.value} value={t.value}>
+                <span className="flex items-center gap-2">
+                  <t.icon className="h-3.5 w-3.5" />
+                  {t.label}
+                </span>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )}
+
+      <div className="flex justify-end pt-1">
+        <Button type="button" size="sm" className="gap-2" onClick={handleSave} disabled={saving || !dirty}>
+          {saving ? <Spinner className="size-4" /> : <Save className="size-4" />}
+          Save Requirements
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/courses/CourseAssessmentPanel.jsx b/apps/web/src/modules/admin/components/courses/CourseAssessmentPanel.jsx
new file mode 100644
index 0000000..ac39b78
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/CourseAssessmentPanel.jsx
@@ -0,0 +1,31 @@
+import { useState } from "react";
+import AssessmentOverview from "./AssessmentOverview";
+import AssessmentEditor from "./AssessmentEditor";
+
+export default function CourseAssessmentPanel({ courseId }) {
+  const [mode, setMode] = useState("overview"); // "overview" | "edit"
+  const [overviewKey, setOverviewKey] = useState(0); // bump to force AssessmentOverview to refetch
+
+  const backToOverview = () => {
+    setOverviewKey((k) => k + 1);
+    setMode("overview");
+  };
+
+  if (mode === "edit") {
+    return (
+      <AssessmentEditor
+        courseId={courseId}
+        onSaved={backToOverview}
+        onCancel={backToOverview}
+      />
+    );
+  }
+
+  return (
+    <AssessmentOverview
+      key={overviewKey}
+      courseId={courseId}
+      onModify={() => setMode("edit")}
+    />
+  );
+}
diff --git a/apps/web/src/modules/admin/components/courses/CourseBadge.jsx b/apps/web/src/modules/admin/components/courses/CourseBadge.jsx
new file mode 100644
index 0000000..43aa8f8
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/CourseBadge.jsx
@@ -0,0 +1,174 @@
+const BADGE_GRADIENTS = {
+  // ── Original 12 ──────────────────────────────────────────────────────────────
+  purple:   "linear-gradient(145deg, #a855f7cc 0%, #7e22cebf 55%, #3b0764b3 100%)",
+  green:    "linear-gradient(145deg, #4ade80cc 0%, #15803dbf 55%, #14532db3 100%)",
+  rose:     "linear-gradient(145deg, #fb7185cc 0%, #be123cbf 55%, #4c0519b3 100%)",
+  amber:    "linear-gradient(145deg, #fbbf24cc 0%, #d97706bf 55%, #78350fb3 100%)",
+  sky:      "linear-gradient(145deg, #38bdf8cc 0%, #0369a1bf 55%, #0c4a6eb3 100%)",
+  indigo:   "linear-gradient(145deg, #818cf8cc 0%, #4338cabf 55%, #1e1b4bb3 100%)",
+  teal:     "linear-gradient(145deg, #2dd4bfcc 0%, #0f766ebf 55%, #042f2eb3 100%)",
+  orange:   "linear-gradient(145deg, #fb923ccc 0%, #c2410cbf 55%, #431407b3 100%)",
+  pink:     "linear-gradient(145deg, #f472b6cc 0%, #be185dbf 55%, #500724b3 100%)",
+  cyan:     "linear-gradient(145deg, #22d3eecc 0%, #0e7490bf 55%, #083344b3 100%)",
+  lime:     "linear-gradient(145deg, #a3e635cc 0%, #4d7c0fbf 55%, #1a2e05b3 100%)",
+  slate:    "linear-gradient(145deg, #94a3b8cc 0%, #475569bf 55%, #0f172ab3 100%)",
+  // ── Extended 18 ──────────────────────────────────────────────────────────────
+  red:      "linear-gradient(145deg, #f87171cc 0%, #b91c1cbf 55%, #450a0ab3 100%)",
+  yellow:   "linear-gradient(145deg, #fde047cc 0%, #a16207bf 55%, #3d1f00b3 100%)",
+  violet:   "linear-gradient(145deg, #a78bfacc 0%, #6d28d9bf 55%, #2e1065b3 100%)",
+  fuchsia:  "linear-gradient(145deg, #e879f9cc 0%, #a21cafbf 55%, #4a044eb3 100%)",
+  emerald:  "linear-gradient(145deg, #34d399cc 0%, #047857bf 55%, #064e3bb3 100%)",
+  blue:     "linear-gradient(145deg, #60a5facc 0%, #1d4ed8bf 55%, #1e3a8ab3 100%)",
+  zinc:     "linear-gradient(145deg, #a1a1aacc 0%, #3f3f46bf 55%, #18181bb3 100%)",
+  stone:    "linear-gradient(145deg, #d6d3d1cc 0%, #57534ebf 55%, #1c1917b3 100%)",
+  brown:    "linear-gradient(145deg, #d97706cc 0%, #7c2d12bf 55%, #1c0902b3 100%)",
+  gold:     "linear-gradient(145deg, #fcd34dcc 0%, #b45309bf 55%, #451a03b3 100%)",
+  navy:     "linear-gradient(145deg, #93c5fdcc 0%, #1e40afbf 55%, #0f172ab3 100%)",
+  forest:   "linear-gradient(145deg, #86efaccc 0%, #166534bf 55%, #052e16b3 100%)",
+  wine:     "linear-gradient(145deg, #fda4afcc 0%, #9f1239bf 55%, #3b0014b3 100%)",
+  charcoal: "linear-gradient(145deg, #9ca3afcc 0%, #374151bf 55%, #111827b3 100%)",
+  midnight: "linear-gradient(145deg, #818cf8cc 0%, #312e81bf 55%, #0d0c1db3 100%)",
+  lavender: "linear-gradient(145deg, #ddd6fecc 0%, #7c3aedbf 55%, #2e1065b3 100%)",
+  salmon:   "linear-gradient(145deg, #fca5a5cc 0%, #e11d48bf 55%, #4c0519b3 100%)",
+  mint:     "linear-gradient(145deg, #a7f3d0cc 0%, #059669bf 55%, #022c22b3 100%)",
+};
+
+const SOLID_GRADIENTS = {
+  // ── Original 12 ──────────────────────────────────────────────────────────────
+  purple:   "linear-gradient(145deg, #a855f7 0%, #7e22ce 55%, #3b0764 100%)",
+  green:    "linear-gradient(145deg, #4ade80 0%, #15803d 55%, #14532d 100%)",
+  rose:     "linear-gradient(145deg, #fb7185 0%, #be123c 55%, #4c0519 100%)",
+  amber:    "linear-gradient(145deg, #fbbf24 0%, #d97706 55%, #78350f 100%)",
+  sky:      "linear-gradient(145deg, #38bdf8 0%, #0369a1 55%, #0c4a6e 100%)",
+  indigo:   "linear-gradient(145deg, #818cf8 0%, #4338ca 55%, #1e1b4b 100%)",
+  teal:     "linear-gradient(145deg, #2dd4bf 0%, #0f766e 55%, #042f2e 100%)",
+  orange:   "linear-gradient(145deg, #fb923c 0%, #c2410c 55%, #431407 100%)",
+  pink:     "linear-gradient(145deg, #f472b6 0%, #be185d 55%, #500724 100%)",
+  cyan:     "linear-gradient(145deg, #22d3ee 0%, #0e7490 55%, #083344 100%)",
+  lime:     "linear-gradient(145deg, #a3e635 0%, #4d7c0f 55%, #1a2e05 100%)",
+  slate:    "linear-gradient(145deg, #94a3b8 0%, #475569 55%, #0f172a 100%)",
+  // ── Extended 18 ──────────────────────────────────────────────────────────────
+  red:      "linear-gradient(145deg, #f87171 0%, #b91c1c 55%, #450a0a 100%)",
+  yellow:   "linear-gradient(145deg, #fde047 0%, #a16207 55%, #3d1f00 100%)",
+  violet:   "linear-gradient(145deg, #a78bfa 0%, #6d28d9 55%, #2e1065 100%)",
+  fuchsia:  "linear-gradient(145deg, #e879f9 0%, #a21caf 55%, #4a044e 100%)",
+  emerald:  "linear-gradient(145deg, #34d399 0%, #047857 55%, #064e3b 100%)",
+  blue:     "linear-gradient(145deg, #60a5fa 0%, #1d4ed8 55%, #1e3a8a 100%)",
+  zinc:     "linear-gradient(145deg, #a1a1aa 0%, #3f3f46 55%, #18181b 100%)",
+  stone:    "linear-gradient(145deg, #d6d3d1 0%, #57534e 55%, #1c1917 100%)",
+  brown:    "linear-gradient(145deg, #d97706 0%, #7c2d12 55%, #1c0902 100%)",
+  gold:     "linear-gradient(145deg, #fcd34d 0%, #b45309 55%, #451a03 100%)",
+  navy:     "linear-gradient(145deg, #93c5fd 0%, #1e40af 55%, #0f172a 100%)",
+  forest:   "linear-gradient(145deg, #86efac 0%, #166534 55%, #052e16 100%)",
+  wine:     "linear-gradient(145deg, #fda4af 0%, #9f1239 55%, #3b0014 100%)",
+  charcoal: "linear-gradient(145deg, #9ca3af 0%, #374151 55%, #111827 100%)",
+  midnight: "linear-gradient(145deg, #818cf8 0%, #312e81 55%, #0d0c1d 100%)",
+  lavender: "linear-gradient(145deg, #ddd6fe 0%, #7c3aed 55%, #2e1065 100%)",
+  salmon:   "linear-gradient(145deg, #fca5a5 0%, #e11d48 55%, #4c0519 100%)",
+  mint:     "linear-gradient(145deg, #a7f3d0 0%, #059669 55%, #022c22 100%)",
+};
+
+export default function CourseBadge({ title = "Course Title", level, color = "purple", imageUrl, mini = false }) {
+  const levelLabel = level
+    ? `${level.charAt(0).toUpperCase()}${level.slice(1)} Level`
+    : null;
+
+  // ── Mini variant: just the gradient + logo mark, no text/line ──────────────
+  if (mini) {
+    return (
+      <div className="relative w-12 h-12 rounded-xl overflow-hidden flex-shrink-0 select-none shadow-md">
+        {imageUrl ? (
+          <>
+            <div
+              className="absolute inset-0"
+              style={{
+                backgroundImage: `url(${imageUrl})`,
+                backgroundSize: "cover",
+                backgroundPosition: "center",
+              }}
+            />
+            <div
+              className="absolute inset-0"
+              style={{ background: BADGE_GRADIENTS[color] ?? BADGE_GRADIENTS.purple }}
+            />
+          </>
+        ) : (
+          <div
+            className="absolute inset-0"
+            style={{ background: SOLID_GRADIENTS[color] ?? SOLID_GRADIENTS.purple }}
+          />
+        )}
+        {/* HIDE OUR LOGO */}
+        {/* <div className="relative h-full flex items-center justify-center">
+          <img src="/philpro-white-single.png" alt="Philpro" className="h-5 w-5 object-contain drop-shadow" />
+        </div> */}
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative w-44 h-48 rounded-2xl overflow-hidden flex-shrink-0 select-none shadow-lg">
+
+      {/* ── Layer 1: Background — image when set, solid gradient otherwise ── */}
+      {imageUrl ? (
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundImage: `url(${imageUrl})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+          }}
+        />
+      ) : (
+        <div
+          className="absolute inset-0"
+          style={{ background: SOLID_GRADIENTS[color] ?? SOLID_GRADIENTS.purple }}
+        />
+      )}
+
+      {/* ── Layer 2: Gradient colour overlay on top of the image ── */}
+      {imageUrl && (
+        <div
+          className="absolute inset-0"
+          style={{ background: BADGE_GRADIENTS[color] ?? BADGE_GRADIENTS.purple }}
+        />
+      )}
+
+      {/* ── Layer 3: Soft glow in the upper-right corner (always present) ── */}
+      <div
+        className="absolute -top-6 -right-6 w-28 h-28 rounded-full pointer-events-none"
+        style={{
+          background: "radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%)",
+        }}
+      />
+
+      {/* ── Layer 4: Content ── */}
+      <div className="relative flex flex-col justify-between h-full p-3.5">
+        <div className="flex-1 flex flex-col justify-center gap-1.5 pr-2">
+          <p className="text-white font-bold text-sm leading-snug line-clamp-4 drop-shadow">
+            {title}
+          </p>
+          {levelLabel && (
+            <p className="text-white/60 text-[9.5px] font-semibold uppercase tracking-widest drop-shadow">
+              {levelLabel}
+            </p>
+          )}
+        </div>
+
+        <div>
+          <div className="border-t border-white/20 mb-2" />
+          <div className="flex items-center justify-between gap-2">
+            <img
+              src="/philpro-white-single.png"
+              alt="Philpro"
+              className="h-5 object-contain drop-shadow"
+            />
+            <span className="text-white/75 text-[8.5px] font-bold uppercase tracking-[0.12em] text-right leading-tight drop-shadow">
+              Course<br />Completion
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/courses/CourseInstructorPicker.jsx b/apps/web/src/modules/admin/components/courses/CourseInstructorPicker.jsx
new file mode 100644
index 0000000..d6f6850
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/CourseInstructorPicker.jsx
@@ -0,0 +1,167 @@
+import { useState, useEffect, useCallback } from "react";
+import { UserPlus, Check, ChevronsUpDown, Loader2 } from "lucide-react";
+import api from "@/utils/api.util";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+
+const ROLE_COLORS = {
+  admin: "bg-red-100 text-red-700 border-red-200",
+  staff: "bg-green-100 text-green-700 border-green-200",
+};
+
+function getFullName(u) {
+  return u?.personal_info?.name?.full_name?.trim() || u?.email || "Unknown";
+}
+
+/**
+ * Props:
+ *   added       — current instructor list [{ user_id, display_name, ... }]
+ *   onAdd(inst) — called with { user_id, display_name } to add one instructor
+ *   onToggleLinked(user_id) — remove a linked user by their user_id
+ */
+export default function CourseInstructorPicker({ added = [], onAdd, onToggleLinked }) {
+  const [open,          setOpen]          = useState(false);
+  const [users,         setUsers]         = useState([]);
+  const [loadingUsers,  setLoadingUsers]  = useState(false);
+  const [externalName,  setExternalName]  = useState("");
+
+  const linkedIds = new Set(added.filter(i => i.user_id).map(i => String(i.user_id)));
+
+  const loadUsers = useCallback(async () => {
+    if (users.length) return;
+    setLoadingUsers(true);
+    try {
+      const { data } = await api.get("/admin/users", {
+        params: { limit: 200 },
+      });
+      const rows = data?.data?.data ?? [];
+      setUsers(rows.filter(u => u.acc_type === "staff" || u.acc_type === "admin"));
+    } catch {
+      // silently ignore — user can still add external
+    } finally {
+      setLoadingUsers(false);
+    }
+  }, [users.length]);
+
+  useEffect(() => {
+    if (open) loadUsers();
+  }, [open, loadUsers]);
+
+  const toggleUser = (u) => {
+    const uid = String(u.user_id);
+    if (linkedIds.has(uid)) {
+      onToggleLinked(u.user_id);
+    } else {
+      onAdd({ user_id: u.user_id, display_name: getFullName(u) });
+    }
+  };
+
+  const addExternal = () => {
+    const name = externalName.trim();
+    if (!name) return;
+    onAdd({ user_id: null, display_name: name });
+    setExternalName("");
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild className="w-full">
+        <Button type="button" variant="outline" size="sm" className="w-full justify-between">
+          <span className="flex items-center gap-1.5">
+            <UserPlus className="h-3.5 w-3.5" />
+            Add Instructor
+          </span>
+          <ChevronsUpDown className="h-3 w-3 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+        <Command>
+          <CommandInput placeholder="Search by name or email…" />
+          <CommandList>
+
+            {/* ── Staff / Admin accounts ── */}
+            <CommandGroup heading="Staff & Admin Accounts">
+              {loadingUsers && (
+                <CommandItem disabled>
+                  <Loader2 className="h-3.5 w-3.5 mr-2 animate-spin" />
+                  Loading users…
+                </CommandItem>
+              )}
+              {!loadingUsers && users.length === 0 && (
+                <CommandEmpty>No staff or admin accounts found.</CommandEmpty>
+              )}
+              {users.map((u) => {
+                const uid     = String(u.user_id);
+                const checked = linkedIds.has(uid);
+                const name    = getFullName(u);
+                return (
+                  <CommandItem
+                    key={uid}
+                    value={`${name} ${u.email}`}
+                    onSelect={() => toggleUser(u)}
+                    className="gap-2"
+                  >
+                    <Checkbox checked={checked} className="pointer-events-none" />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm truncate">{name}</p>
+                      <p className="text-xs text-muted-foreground truncate">{u.email}</p>
+                    </div>
+                    <Badge
+                      variant="outline"
+                      className={`text-[10px] shrink-0 ${ROLE_COLORS[u.acc_type] ?? ""}`}
+                    >
+                      {u.acc_type}
+                    </Badge>
+                    {checked && <Check className="h-3.5 w-3.5 text-primary shrink-0" />}
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+
+            <CommandSeparator />
+
+            {/* ── External (no account) ── */}
+            <CommandGroup heading="External (no account)">
+              <div className="px-2 py-1.5 flex gap-2">
+                <Input
+                  placeholder="Display name"
+                  value={externalName}
+                  onChange={(e) => setExternalName(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), addExternal())}
+                  className="h-8 text-sm"
+                />
+                <Button
+                  type="button"
+                  size="sm"
+                  className="h-8 px-3 shrink-0"
+                  disabled={!externalName.trim()}
+                  onClick={addExternal}
+                >
+                  Add
+                </Button>
+              </div>
+            </CommandGroup>
+
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/courses/CoursePrerequisiteBuilder.jsx b/apps/web/src/modules/admin/components/courses/CoursePrerequisiteBuilder.jsx
new file mode 100644
index 0000000..089ae06
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/CoursePrerequisiteBuilder.jsx
@@ -0,0 +1,217 @@
+import { useState } from 'react';
+import { Plus, Trash2, GripVertical, ChevronsUpDown, BookOpen, Layers, FileText, Link2, Unlink } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '@/components/ui/command';
+
+// ─── Prerequisite type config ──────────────────────────────────────────────────
+// idKey is the numeric FK field each flat list carries (course_id/unit_id/
+// lesson_id) — CoursePrerequisite.ref_id is a BIGINT FK, not a uuid, so the
+// picker must select on the numeric id even though the list is keyed/searched
+// by uuid for React purposes.
+const REF_TYPES = [
+    { value: 'course', label: 'Course', icon: BookOpen, idKey: 'course_id' },
+    { value: 'unit',   label: 'Unit',   icon: Layers,   idKey: 'unit_id' },
+    { value: 'lesson', label: 'Lesson', icon: FileText, idKey: 'lesson_id' },
+];
+const TYPE_MAP = Object.fromEntries(REF_TYPES.map((t) => [t.value, t]));
+
+// ─── Course binding indicator (units/lessons may sit under 0..N courses) ──────
+function BindingLine({ courses = [] }) {
+    if (!courses.length) {
+        return (
+            <span className="flex items-center gap-1 text-xs italic text-muted-foreground truncate">
+                <Unlink className="size-3 shrink-0" />
+                Standalone
+            </span>
+        );
+    }
+    return (
+        <span className="flex items-center gap-1 text-xs text-muted-foreground truncate">
+            <Link2 className="size-3 shrink-0" />
+            <span className="truncate">{courses.map((c) => c.title).join(', ')}</span>
+        </span>
+    );
+}
+
+// ─── Custom content picker — own Dialog rather than an anchored Popover ───────
+function ContentPicker({ value, options, idKey, placeholder = 'Select…', dialogTitle, onSelect, renderTrigger, renderItem }) {
+    const [open, setOpen] = useState(false);
+    const selected = options.find((o) => String(o[idKey]) === String(value));
+
+    const searchValue = (o) => {
+        const courseNames = (o.courses ?? []).map((c) => c.title).join(' ');
+        return `${o.title ?? ''} ${courseNames}`.trim() || String(o[idKey]);
+    };
+
+    return (
+        <>
+            <Button
+                type="button"
+                variant="outline"
+                role="combobox"
+                aria-expanded={open}
+                className="h-auto min-h-8 w-full justify-between text-sm font-normal py-1.5 px-3"
+                onClick={() => setOpen(true)}
+            >
+                {selected
+                    ? renderTrigger(selected)
+                    : <span className="text-muted-foreground">{placeholder}</span>}
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+
+            <Dialog open={open} onOpenChange={setOpen}>
+                <DialogContent className="top-[15%] translate-y-0 flex flex-col max-h-[70vh] overflow-hidden rounded-xl! p-0 gap-0 sm:max-w-md">
+                    <DialogHeader className="px-4 pt-4 pb-3 border-b pr-10">
+                        <DialogTitle className="text-sm">{dialogTitle ?? placeholder}</DialogTitle>
+                    </DialogHeader>
+                    <Command className="flex-1 min-h-0 rounded-none! bg-transparent p-0" loop>
+                        <CommandInput placeholder="Search…" />
+                        <CommandList className="max-h-[50vh]">
+                            <CommandEmpty>No results found.</CommandEmpty>
+                            <CommandGroup>
+                                {options.map((o) => (
+                                    <CommandItem
+                                        key={o[idKey]}
+                                        value={searchValue(o)}
+                                        onSelect={() => { onSelect(o); setOpen(false); }}
+                                        className="p-0"
+                                    >
+                                        {renderItem(o)}
+                                    </CommandItem>
+                                ))}
+                            </CommandGroup>
+                        </CommandList>
+                    </Command>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+}
+
+function createPrereq(type = 'course') {
+    return { _key: crypto.randomUUID(), ref_type: type, ref_id: '', title: '' };
+}
+
+// ─── CoursePrerequisiteBuilder ─────────────────────────────────────────────────
+// value: [{ prereq_id?, ref_type, ref_id, title? }]
+export default function CoursePrerequisiteBuilder({ value = [], onChange, courses = [], units = [], lessons = [], excludeCourseId }) {
+    const [items, setItems] = useState(
+        value.length > 0
+            ? value.map((v) => ({ _key: crypto.randomUUID(), ...v }))
+            : []
+    );
+
+    const filteredCourses = courses.filter((c) => String(c.course_id) !== String(excludeCourseId));
+    const optionsFor = { course: filteredCourses, unit: units, lesson: lessons };
+
+    const emit = (next) => {
+        setItems(next);
+        onChange?.(next.map(({ _key, ...r }) => r));
+    };
+
+    const addItem = () => emit([...items, createPrereq('course')]);
+    const removeItem = (key) => emit(items.filter((i) => i._key !== key));
+    const updateItem = (key, patch) =>
+        emit(items.map((i) => (i._key === key ? { ...i, ...patch } : i)));
+
+    return (
+        <div className="space-y-3">
+            {items.length === 0 && (
+                <p className="text-sm text-muted-foreground text-center py-6 border border-dashed rounded-lg">
+                    No prerequisites added. Learners can start this course freely.
+                </p>
+            )}
+
+            {items.map((item, idx) => {
+                const typeDef = TYPE_MAP[item.ref_type];
+                const Icon = typeDef?.icon ?? BookOpen;
+                const options = optionsFor[item.ref_type] ?? [];
+
+                return (
+                    <Card key={item._key}>
+                        <CardContent className="pt-4 pb-4 space-y-3">
+                            <div className="flex items-center gap-2">
+                                <GripVertical className="h-4 w-4 text-muted-foreground shrink-0" />
+                                <Badge variant="outline" className="text-xs gap-1 shrink-0">
+                                    <Icon className="h-3 w-3" />
+                                    {idx + 1}
+                                </Badge>
+
+                                <Select
+                                    value={item.ref_type}
+                                    onValueChange={(v) => updateItem(item._key, { ref_type: v, ref_id: '', title: '' })}
+                                >
+                                    <SelectTrigger className="h-8 text-sm w-32 shrink-0">
+                                        <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {REF_TYPES.map((t) => (
+                                            <SelectItem key={t.value} value={t.value}>
+                                                <span className="flex items-center gap-2">
+                                                    <t.icon className="h-3.5 w-3.5" />
+                                                    {t.label}
+                                                </span>
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+
+                                <div className="flex-1 min-w-0">
+                                    <ContentPicker
+                                        value={item.ref_id}
+                                        options={options}
+                                        idKey={typeDef.idKey}
+                                        placeholder={`Select a ${typeDef.label.toLowerCase()}`}
+                                        dialogTitle={`Select a ${typeDef.label.toLowerCase()}`}
+                                        onSelect={(o) => updateItem(item._key, { ref_id: o[typeDef.idKey], title: o.title })}
+                                        renderTrigger={(o) => (
+                                            <div className="flex items-center gap-2 min-w-0 flex-1">
+                                                {item.ref_type !== 'course' && (
+                                                    <div className="flex flex-col items-start flex-1 min-w-0">
+                                                        <BindingLine courses={o.courses} />
+                                                        <span className="text-sm leading-tight truncate">{o.title}</span>
+                                                    </div>
+                                                )}
+                                                {item.ref_type === 'course' && (
+                                                    <span className="flex-1 truncate text-sm">{o.title}</span>
+                                                )}
+                                            </div>
+                                        )}
+                                        renderItem={(o) => (
+                                            <div className="flex items-center gap-2 px-3 py-2 w-full">
+                                                <div className="flex flex-col flex-1 min-w-0">
+                                                    <span className="text-sm leading-tight truncate">{o.title}</span>
+                                                    {item.ref_type !== 'course' && <BindingLine courses={o.courses} />}
+                                                </div>
+                                            </div>
+                                        )}
+                                    />
+                                </div>
+
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className="h-8 w-8 shrink-0 text-destructive hover:text-destructive"
+                                    onClick={() => removeItem(item._key)}
+                                >
+                                    <Trash2 className="h-4 w-4" />
+                                </Button>
+                            </div>
+                        </CardContent>
+                    </Card>
+                );
+            })}
+
+            <Button type="button" variant="outline" size="sm" className="w-full gap-2" onClick={addItem}>
+                <Plus className="h-4 w-4" />
+                Add Prerequisite
+            </Button>
+        </div>
+    );
+}
diff --git a/apps/web/src/modules/admin/components/courses/CourseReadingProgressList.jsx b/apps/web/src/modules/admin/components/courses/CourseReadingProgressList.jsx
new file mode 100644
index 0000000..a3f4696
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/CourseReadingProgressList.jsx
@@ -0,0 +1,378 @@
+import { useEffect, useState, useMemo } from 'react';
+import {
+    CheckCircle2, Circle, BookOpen, Users, Search, RefreshCcw, AlertTriangle
+} from 'lucide-react';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Separator } from '@/components/ui/separator';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+    Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose,
+} from '@/components/ui/dialog';
+import { TablePagination } from '@/components/generic/Table/TablePagination';
+import { useAdminCourseReadingProgress } from '@/contexts/AdminCourseReadingProgressContext';
+import { useDateFormat } from '@/hooks/useDateFormat';
+import { streamUrl } from '@/utils/media.util';
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function StatusBadge({ status }) {
+    if (!status) return <Badge variant="outline" className="text-muted-foreground text-xs">Not started</Badge>;
+    return status === 'completed'
+        ? <Badge variant="outline" className="text-emerald-600 border-emerald-400 text-xs">Completed</Badge>
+        : <Badge><RefreshCcw />In Progress</Badge>;
+}
+
+function ProgressBar({ value, total, className = '' }) {
+    const pct = total > 0 ? Math.round((value / total) * 100) : 0;
+    return (
+        <div className={`flex items-center gap-2 ${className}`}>
+            <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
+                <div
+                    className="h-full bg-emerald-500 transition-all duration-300"
+                    style={{ width: `${pct}%` }}
+                />
+            </div>
+            <span className="text-xs text-muted-foreground tabular-nums whitespace-nowrap">
+                {value} / {total}
+            </span>
+        </div>
+    );
+}
+
+// Only relevant once reading is fully done but the course still isn't 'completed' —
+// i.e. a still-unpassed unit quiz and/or course assessment is what's blocking it.
+function PendingNotice({ entry }) {
+    const readingDone = entry.lessons_total > 0 && entry.lessons_completed === entry.lessons_total;
+    if (!readingDone || entry.course_status === 'completed') return null;
+    if (!entry.quizzes_pending && !entry.assessment_pending) return null;
+
+    const parts = [];
+    if (entry.quizzes_pending > 0) {
+        parts.push(`${entry.quizzes_pending} quiz${entry.quizzes_pending === 1 ? '' : 'zes'} needed`);
+    }
+    if (entry.assessment_pending) parts.push('Assessment needed');
+
+    return (
+        <p className="flex items-center gap-1.5 text-xs text-amber-700 dark:text-amber-400">
+            <AlertTriangle className="size-3.5 shrink-0" />
+            {parts.join(' · ')}
+        </p>
+    );
+}
+
+function UserAvatar({ name, email, avatarUrl }) {
+    const initials = name
+        ? name.split(' ').map((n) => n[0]).slice(0, 2).join('').toUpperCase()
+        : (email?.[0] ?? '?').toUpperCase();
+    return (
+        <Avatar className="size-9 shrink-0">
+            <AvatarImage src={avatarUrl ?? undefined} alt={name ?? email} />
+            <AvatarFallback className="text-xs font-semibold bg-secondary text-secondary-foreground">
+                {initials}
+            </AvatarFallback>
+        </Avatar>
+    );
+}
+
+// ─── Dialog: full breakdown for one user ─────────────────────────────────────
+
+function UserDetailDialog({ open, onOpenChange, entry, courseId }) {
+    const { detailCache, detailLoading, fetchUserReadingProgress } = useAdminCourseReadingProgress();
+    const { fmtDate, fmtDateShort } = useDateFormat();
+    const breakdown = entry ? detailCache[entry.user_id] : null;
+
+    useEffect(() => {
+        if (open && entry && !breakdown) {
+            fetchUserReadingProgress(courseId, entry.user_id);
+        }
+    }, [open, entry]);
+
+    const lastSeen = entry?.last_accessed_at ? fmtDate(entry.last_accessed_at) : '—';
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-lg">
+                <DialogHeader>
+                    <div className="flex items-center gap-3">
+                        {entry && <UserAvatar name={entry.user.full_name} email={entry.user.email} avatarUrl={streamUrl(entry.user.avatar_stream_token)} />}
+                        <div className="min-w-0">
+                            <DialogTitle className="truncate">
+                                {entry?.user.full_name ?? <span className="italic text-muted-foreground">No name</span>}
+                            </DialogTitle>
+                            <DialogDescription className="truncate">{entry?.user.email}</DialogDescription>
+                        </div>
+                    </div>
+                </DialogHeader>
+
+                {/* ── Meta strip ── */}
+                {entry && (
+                    <div className="flex items-center gap-3 flex-wrap">
+                        <StatusBadge status={entry.course_status} />
+                        <span className="text-xs">Last seen {lastSeen}</span>
+                        <span className="text-xs text-muted-foreground ml-auto">
+                            {entry.lessons_completed} / {entry.lessons_total} lessons
+                        </span>
+                    </div>
+                )}
+
+                {entry && <PendingNotice entry={entry} />}
+
+                {/* ── Progress bar ── */}
+                {entry && (
+                    <ProgressBar value={entry.lessons_completed} total={entry.lessons_total} />
+                )}
+
+                <Separator />
+
+                {/* ── Unit / lesson breakdown — fills remaining height and scrolls ── */}
+                <ScrollArea className="max-h-[50vh] pr-2">
+                    {detailLoading && !breakdown ? (
+                        <div className="space-y-3 py-1">
+                            {[...Array(4)].map((_, i) => (
+                                <div key={i} className="space-y-1.5">
+                                    <Skeleton className="h-4 w-48" />
+                                    <Skeleton className="h-3 w-36 ml-5" />
+                                    <Skeleton className="h-3 w-40 ml-5" />
+                                </div>
+                            ))}
+                        </div>
+                    ) : breakdown?.length ? (
+                        <div className="space-y-4 py-1">
+                            {breakdown.map((unit, ui) => (
+                                <div key={unit.unit_id} className="space-y-2">
+                                    {/* Unit header */}
+                                    <div className="flex items-center gap-2">
+                                        {unit.status === 'completed'
+                                            ? <CheckCircle2 className="size-4 text-emerald-500 shrink-0" />
+                                            : unit.status === 'in_progress'
+                                                ? <Circle className="size-4 text-amber-400 shrink-0" />
+                                                : <Circle className="size-4 text-muted-foreground/30 shrink-0" />
+                                        }
+                                        <span className="text-sm font-semibold truncate flex-1">
+                                            Unit {ui + 1}: {unit.title}
+                                        </span>
+                                        {unit.status && <StatusBadge status={unit.status} />}
+                                    </div>
+
+                                    {/* Lesson rows */}
+                                    <div className="ml-6 space-y-1.5 border-l pl-3">
+                                        {unit.lessons.map((lesson) => (
+                                            <div key={lesson.lesson_id} className="flex items-center gap-2">
+                                                {lesson.status === 'completed'
+                                                    ? <CheckCircle2 className="size-3 text-emerald-500 shrink-0" />
+                                                    : lesson.status === 'in_progress'
+                                                        ? <Circle className="size-3 text-amber-400 shrink-0" />
+                                                        : <Circle className="size-3 text-muted-foreground/25 shrink-0" />
+                                                }
+                                                <span className={`text-xs truncate flex-1 ${lesson.status ? 'text-foreground' : 'text-muted-foreground'}`}>
+                                                    {lesson.title}
+                                                </span>
+                                                {lesson.status === 'completed' && lesson.completed_at && (
+                                                    <span className="text-xs text-muted-foreground whitespace-nowrap shrink-0">
+                                                        {fmtDateShort(lesson.completed_at)}
+                                                    </span>
+                                                )}
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    ) : (
+                        <p className="text-sm text-muted-foreground py-4 text-center">No lesson data available.</p>
+                    )}
+                </ScrollArea>
+
+                <DialogFooter showCloseButton>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
+
+// ─── User summary card ────────────────────────────────────────────────────────
+
+function UserCard({ entry, onOpen }) {
+    const { fmtDate } = useDateFormat();
+    const lastSeen = entry.last_accessed_at ? fmtDate(entry.last_accessed_at) : '—';
+
+    return (
+        <button
+            type="button"
+            onClick={() => onOpen(entry)}
+            className="bg-background w-full text-left border rounded-lg p-4 flex items-center gap-3 hover:bg-accent/10 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+            <UserAvatar name={entry.user.full_name} email={entry.user.email} avatarUrl={streamUrl(entry.user.avatar_stream_token)} />
+
+            <div className="flex-1 min-w-0 space-y-1">
+                <div className="flex items-center gap-2 min-w-0">
+                    <span className="text-sm font-medium truncate flex-1">
+                        {entry.user.full_name ?? <span className="italic text-muted-foreground">No name</span>}
+                    </span>
+                    <StatusBadge status={entry.course_status} />
+                </div>
+                <p className="text-xs text-muted-foreground truncate">{entry.user.email}</p>
+                <PendingNotice entry={entry} />
+                <ProgressBar value={entry.lessons_completed} total={entry.lessons_total} />
+                <p className="text-xs">Last seen {lastSeen}</p>
+            </div>
+        </button>
+    );
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
+
+export default function CourseReadingProgressList({ courseId }) {
+    const { progressList, listLoading, fetchCourseReadingProgress } = useAdminCourseReadingProgress();
+
+    const [searchInput, setSearchInput] = useState('');
+    const [query, setQuery] = useState('');
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [dialogEntry, setDialogEntry] = useState(null);
+
+    useEffect(() => {
+        fetchCourseReadingProgress(courseId);
+    }, [courseId]);
+
+    const handleSearchSubmit = (e) => {
+        e.preventDefault();
+        setQuery(searchInput.trim());
+        setPage(1);
+    };
+
+    // ── Filter ────────────────────────────────────────────────────────────────
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q) return progressList;
+        return progressList.filter((e) =>
+            e.user.full_name?.toLowerCase().includes(q) ||
+            e.user.email?.toLowerCase().includes(q)
+        );
+    }, [progressList, query]);
+
+    // ── Paginate ──────────────────────────────────────────────────────────────
+    const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+    const paginated = filtered.slice((page - 1) * pageSize, page * pageSize);
+    const pagination = {
+        page,
+        limit: pageSize,
+        totalPages,
+        totalRecords: filtered.length,
+        hasPrevPage: page > 1,
+        hasNextPage: page < totalPages,
+    };
+
+    const handlePageChange = (p) => setPage(p);
+    const handlePageSizeChange = (size) => { setPageSize(size); setPage(1); };
+
+    const completedCount = progressList.filter((e) => e.course_status === 'completed').length;
+    const inProgressCount = progressList.length - completedCount;
+
+    // ── Loading skeleton ──────────────────────────────────────────────────────
+    if (listLoading) {
+        return (
+            <div className="space-y-3">
+                <Skeleton className="h-9 w-full rounded-md" />
+                {[...Array(4)].map((_, i) => (
+                    <div key={i} className="border rounded-lg p-4 flex items-center gap-3">
+                        <Skeleton className="size-9 rounded-full shrink-0" />
+                        <div className="flex-1 space-y-2">
+                            <Skeleton className="h-3.5 w-40" />
+                            <Skeleton className="h-3 w-56" />
+                            <Skeleton className="h-1.5 w-full rounded-full" />
+                        </div>
+                        <Skeleton className="h-5 w-20 rounded-full shrink-0" />
+                    </div>
+                ))}
+            </div>
+        );
+    }
+
+    // ── Empty state ───────────────────────────────────────────────────────────
+    if (!progressList.length) {
+        return (
+            <div className="flex flex-col items-center justify-center py-10 text-center gap-2">
+                <BookOpen className="size-8 text-muted-foreground/40" />
+                <p className="text-sm text-muted-foreground">No students have started reading this course yet.</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-4">
+            {/* ── Summary strip ── */}
+            <div className="flex items-center gap-4 flex-wrap text-sm">
+                <span className="flex items-center gap-1.5">
+                    <Users className="size-3.5" />
+                    {progressList.length} enrolled
+                </span>
+                <span className="flex items-center gap-1.5">
+                    <CheckCircle2 className="size-3.5 text-emerald-500" />
+                    {completedCount} completed
+                </span>
+                <span className="flex items-center gap-1.5">
+                    <Circle className="size-3.5 text-amber-400" />
+                    {inProgressCount} in progress
+                </span>
+            </div>
+
+            {/* ── Search ── */}
+            <form onSubmit={handleSearchSubmit} className="flex items-center gap-2">
+                <div className="relative flex-1">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground pointer-events-none" />
+                    <Input
+                        placeholder="Search by name or email…"
+                        value={searchInput}
+                        onChange={(e) => setSearchInput(e.target.value.slice(0, 50))}
+                        maxLength={50}
+                        className="bg-background pl-9 pr-16"
+                    />
+                    <span className={`absolute right-3 top-1/2 -translate-y-1/2 text-xs tabular-nums pointer-events-none ${searchInput.length >= 50 ? 'text-destructive' : 'text-muted-foreground'}`}>
+                        {searchInput.length}/50
+                    </span>
+                </div>
+                <Button type="submit" variant="outline" className="shrink-0">
+                    <Search className="size-4" />
+                    Search
+                </Button>
+            </form>
+
+            {/* ── List ── */}
+            {filtered.length === 0 ? (
+                <p className="text-sm text-muted-foreground text-center py-6">No results for "{query}".</p>
+            ) : (
+                <div className="space-y-2">
+                    {paginated.map((entry) => (
+                        <UserCard
+                            key={entry.user_id}
+                            entry={entry}
+                            onOpen={setDialogEntry}
+                        />
+                    ))}
+                </div>
+            )}
+
+            {/* ── Pagination ── */}
+            <TablePagination
+                pagination={pagination}
+                onPageChange={handlePageChange}
+                rowCount={paginated.length}
+                onPageSizeChange={handlePageSizeChange}
+                recordLabel="student"
+            />
+
+            {/* ── Detail Dialog ── */}
+            <UserDetailDialog
+                open={!!dialogEntry}
+                onOpenChange={(v) => { if (!v) setDialogEntry(null); }}
+                entry={dialogEntry}
+                courseId={courseId}
+            />
+        </div>
+    );
+}
diff --git a/apps/web/src/modules/admin/components/courses/CourseTable.jsx b/apps/web/src/modules/admin/components/courses/CourseTable.jsx
new file mode 100644
index 0000000..41d9a20
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/CourseTable.jsx
@@ -0,0 +1,176 @@
+import { useMemo, useRef, useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import api from "@/utils/api.util";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/courses/columns.config";
+import { buildToolbarActions } from "../../config/courses/toolbar.config";
+import { buildSelectionActions } from "../../config/courses/selection.config";
+import { buildRowActions } from "../../config/courses/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function CoursesTable() {
+  const [archiveTarget, setArchiveTarget] = useState(null);
+  const [archiveIds, setArchiveIds] = useState(null);
+
+  const tableRefsRef = useRef({
+    getFilters: () => [],
+    getSort: () => [],
+    resetSelection: () => { },
+    setFilters: () => { },
+  });
+
+  const navigate = useNavigate();
+
+  const { user: currentUser } = useAuth();
+
+  const { courses, attributes, pagination, setPagination, loading, fetchCourses, reorderCourses, archiveCourse, archiveCourses, fetchCourseFieldValues } = useCourses();
+
+  const handleRefsReady = (refs) => {
+    tableRefsRef.current = refs;
+  };
+
+  const [tierCategories, setTierCategories] = useState([]);
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => setTierCategories(data.data ?? []))
+      .catch(() => {});
+  }, []);
+  const tierMap = useMemo(
+    () => Object.fromEntries(tierCategories.map((c) => [c.slug, c])),
+    [tierCategories]
+  );
+
+  const exportConfig = {
+    allData: courses,
+    attributes,
+    filename: `${getTimestamp()}_Courses`,
+    sheetName: "Courses",
+    generatedBy: formatGeneratedBy(currentUser),
+  };
+
+  // Reorder — swaps this row with its neighbor in the currently displayed
+  // (order_index-sorted) list, then persists the new order_index set.
+  const handleMove = async (row, direction) => {
+    const idx = courses.findIndex((c) => c.course_id === row.course_id);
+    const swapIdx = idx + direction;
+    if (idx < 0 || swapIdx < 0 || swapIdx >= courses.length) return;
+
+    const reordered = [...courses];
+    [reordered[idx], reordered[swapIdx]] = [reordered[swapIdx], reordered[idx]];
+
+    const ok = await reorderCourses(reordered.map((c) => c.course_id));
+    if (ok) fetchCourses({ page: 1, limit: pagination?.limit ?? 10 });
+  };
+
+  const rowActions = buildRowActions({
+    onView: (row) => navigate(`/admin/courses/${row.course_id}/view`),
+    onEdit: (row) => navigate(`/admin/courses/${row.course_id}/edit`),
+    onArchive: (row) => setArchiveTarget(row),
+    onMoveUp: (row) => handleMove(row, -1),
+    onMoveDown: (row) => handleMove(row, 1),
+    courses,
+  });
+
+  const toolbarActions = buildToolbarActions({
+    fetchCourses,
+    pagination,
+    exportConfig,
+    navigate,
+    getFilters: () => tableRefsRef.current.getFilters(),
+    getSort: () => tableRefsRef.current.getSort(),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const selectionActions = buildSelectionActions({
+    exportConfig,
+    onArchive: (row) => setArchiveTarget(row),
+    onArchiveMany: (ids) => setArchiveIds(ids),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const columns = useMemo(
+    () => buildDataColumns(attributes, rowActions, tierMap),
+    [attributes, rowActions, tierMap]
+  );
+
+  const handleArchiveSuccess = () => {
+    setArchiveTarget(null);
+    setArchiveIds(null);
+    tableRefsRef.current.resetSelection?.();
+    fetchCourses({ page: 1, limit: pagination?.limit ?? 10 });
+  };
+
+  return (
+    <>
+      <DataTable
+        title="Courses"
+        data={courses}
+        columns={columns}
+        attributes={attributes}
+        pagination={pagination}
+        setPagination={setPagination}
+        loading={loading}
+        onFetch={fetchCourses}
+        onFetchFilterData={fetchCourseFieldValues}
+        onRefsReady={handleRefsReady}
+        renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+          <FilterSheet
+            open={open}
+            onOpenChange={onOpenChange}
+            column={column}
+            attr={attr}
+            data={data}
+            loading={loading}
+          />
+        )}
+        columnPinning={columnPinning}
+        toolbarActions={toolbarActions}
+        selectionActions={selectionActions}
+        recordLabel="course"
+        emptyMessage="No courses found."
+      />
+
+      {/* ── Single archive ── */}
+      <ArchiveDialog
+        open={!!archiveTarget}
+        onOpenChange={(v) => !v && setArchiveTarget(null)}
+        entity={archiveTarget}
+        entityLabel="Course"
+        getName={(c) => c?.title}
+        onArchive={(c) => archiveCourse(c?.course_id)}
+        loading={loading}
+        onSuccess={handleArchiveSuccess}
+        onImpactCheck={async () => {
+          const { data } = await api.get(
+            `/admin/courses/${archiveTarget?.course_id}/archive-impact`
+          );
+          const { activeCount, totalCount } = data?.data ?? {};
+          return [
+            { label: "student(s) are currently taking this course", count: activeCount ?? 0 },
+            { label: "student(s) have progress in this course", count: totalCount ?? 0 },
+          ];
+        }}
+      />
+
+      {/* ── Bulk archive ── */}
+      <ArchiveDialog
+        open={!!archiveIds}
+        onOpenChange={(v) => !v && setArchiveIds(null)}
+        ids={archiveIds ?? []}
+        entityLabel="Course"
+        onArchive={(ids) => archiveCourses(ids)}
+        loading={loading}
+        onSuccess={handleArchiveSuccess}
+      />
+    </>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/courses/CreateAchievementDialog.jsx b/apps/web/src/modules/admin/components/courses/CreateAchievementDialog.jsx
new file mode 100644
index 0000000..76faf0d
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/CreateAchievementDialog.jsx
@@ -0,0 +1,179 @@
+// modules/admin/components/courses/CreateAchievementDialog.jsx
+// Lightweight "define a brand-new achievement and select it for this course"
+// dialog — the create-new counterpart to AttachAchievementDialog's
+// attach-existing flow. Achievements are a global registry (not per-course
+// drafts), so this posts immediately instead of deferring to wizard finish.
+
+import { useEffect, useState } from "react";
+import { X } from "lucide-react";
+
+import { BADGE_ICON_OPTIONS } from "@/modules/admin/pages/tiers/EditTierCategory";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Spinner } from "@/components/ui/spinner";
+import { Switch } from "@/components/ui/switch";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+const TRIGGER_OPTIONS = [
+  { value: "auth",    label: "Auth (registration / login)" },
+  { value: "tier",    label: "Subscription (plan purchase)" },
+  { value: "course",  label: "Course (lessons / quizzes)" },
+  { value: "profile", label: "Profile completion" },
+  { value: "social",  label: "Social (referrals / community)" },
+  { value: "manual",  label: "Manual (admin-granted only)" },
+];
+
+const emptyForm = { key: "", type: "badge", label: "", description: "", icon: null, trigger: "manual", is_active: true };
+
+export default function CreateAchievementDialog({ open, onOpenChange, onCreated }) {
+  const [form, setForm] = useState(emptyForm);
+  const [errors, setErrors] = useState({});
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (open) { setForm(emptyForm); setErrors({}); }
+  }, [open]);
+
+  const set = (field) => (value) => setForm((prev) => ({ ...prev, [field]: value }));
+
+  const validate = () => {
+    const e = {};
+    if (!form.key.trim()) e.key = "Key is required.";
+    else if (!/^[a-z0-9_]+$/.test(form.key)) e.key = "Key must be lowercase letters, numbers or underscores.";
+    if (!form.label.trim()) e.label = "Label is required.";
+    setErrors(e);
+    return !Object.keys(e).length;
+  };
+
+  const handleCreate = async () => {
+    if (!validate()) return;
+    setLoading(true);
+    try {
+      const { data } = await api.post("/admin/achievements", {
+        key: form.key.trim(),
+        type: form.type,
+        label: form.label.trim(),
+        description: form.description.trim() || null,
+        icon: form.icon || null,
+        trigger: form.trigger || null,
+        is_active: form.is_active,
+      });
+      toast("Achievement created.");
+      onCreated?.(data.data);
+      onOpenChange(false);
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not create achievement.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>New Achievement</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 max-h-[70vh] overflow-y-auto pr-1">
+          <div className="space-y-1.5">
+            <Label htmlFor="ach_key">Key <span className="text-destructive">*</span></Label>
+            <Input
+              id="ach_key"
+              value={form.key}
+              onChange={(e) => set("key")(e.target.value.toLowerCase())}
+              placeholder="e.g. course_marathon"
+            />
+            <p className="text-xs text-muted-foreground">Lowercase, no spaces. Cannot be changed after creation.</p>
+            {errors.key && <p className="text-sm text-destructive">{errors.key}</p>}
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="ach_label">Label <span className="text-destructive">*</span></Label>
+            <Input id="ach_label" value={form.label} onChange={(e) => set("label")(e.target.value)} placeholder="e.g. Course Marathon" />
+            {errors.label && <p className="text-sm text-destructive">{errors.label}</p>}
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="ach_description">Description</Label>
+            <Textarea id="ach_description" rows={2} value={form.description} onChange={(e) => set("description")(e.target.value)} placeholder="What does a learner do to earn this?" />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-1.5">
+              <Label>Type</Label>
+              <Select value={form.type} onValueChange={set("type")}>
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="badge">Badge</SelectItem>
+                  <SelectItem value="milestone">Milestone</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label>Trigger</Label>
+              <Select value={form.trigger} onValueChange={set("trigger")}>
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {TRIGGER_OPTIONS.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label>Icon</Label>
+            <div className="flex flex-wrap gap-2">
+              <button
+                type="button"
+                onClick={() => set("icon")(null)}
+                className={`flex items-center justify-center w-8 h-8 rounded-lg border-2 text-xs text-muted-foreground transition-all ${!form.icon ? "border-foreground bg-muted scale-105" : "border-border hover:border-muted-foreground"}`}
+                title="No icon"
+              >
+                <X className="size-3.5" />
+              </button>
+              {BADGE_ICON_OPTIONS.map(({ name, icon: Icon }) => {
+                const selected = form.icon === name;
+                return (
+                  <button
+                    key={name}
+                    type="button"
+                    title={name}
+                    onClick={() => set("icon")(name)}
+                    className={`flex items-center justify-center w-8 h-8 rounded-lg border-2 transition-all ${selected ? "bg-secondary text-secondary-foreground border-foreground scale-105" : "border-border hover:border-muted-foreground"}`}
+                  >
+                    <Icon className="size-4" />
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <Switch id="ach_is_active" checked={form.is_active} onCheckedChange={set("is_active")} />
+            <Label htmlFor="ach_is_active">Active</Label>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="outline" disabled={loading}>Cancel</Button>
+          </DialogClose>
+          <Button type="button" onClick={handleCreate} disabled={loading}>
+            {loading && <Spinner className="h-4 w-4 mr-2" />}
+            Create Achievement
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/courses/CreateLessonDialog.jsx b/apps/web/src/modules/admin/components/courses/CreateLessonDialog.jsx
new file mode 100644
index 0000000..f07d19b
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/CreateLessonDialog.jsx
@@ -0,0 +1,145 @@
+// modules/admin/components/courses/CreateLessonDialog.jsx
+// Lightweight "create a brand-new lesson and attach it to this unit" dialog —
+// the create-new counterpart to AttachLessonsDialog's attach-existing flow.
+
+import { useEffect } from "react";
+import { useForm, useFieldArray } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Plus, Trash2 } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Spinner } from "@/components/ui/spinner";
+
+const schema = z.object({
+  title: z.string().min(1, "Title is required."),
+  description: z.string().optional(),
+  order: z.coerce.number().min(0).default(0),
+  objectives: z.array(z.object({ value: z.string().min(1, "Objective cannot be empty.") })).default([]),
+});
+
+export default function CreateLessonDialog({ open, onOpenChange, courseId, unitId, nextOrder = 0, onCreated, draftMode = false }) {
+  const { createLesson, loading } = useCourses();
+  const { user } = useAuth();
+
+  const { register, handleSubmit, reset, control, formState: { errors } } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { title: "", description: "", order: nextOrder, objectives: [] },
+  });
+
+  const { fields, append, remove } = useFieldArray({ control, name: "objectives" });
+
+  useEffect(() => {
+    if (open) reset({ title: "", description: "", order: nextOrder, objectives: [] });
+  }, [open, nextOrder, reset]);
+
+  const onValid = async (values) => {
+    const objectives = values.objectives.map((o) => o.value);
+
+    if (draftMode) {
+      onCreated?.({
+        lesson_id: null,
+        key: crypto.randomUUID(),
+        title: values.title,
+        description: values.description,
+        order_index: values.order,
+        objectives,
+      });
+      onOpenChange(false);
+      return;
+    }
+
+    const result = await createLesson(courseId, unitId, {
+      ...values,
+      objectives,
+      createdBy: user?.user_id,
+    });
+    const lesson = result?.data?.data ?? null;
+    if (!lesson) return;
+    onCreated?.(lesson);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[440px]">
+        <DialogHeader>
+          <DialogTitle>New Lesson</DialogTitle>
+        </DialogHeader>
+
+        <form
+          onSubmit={(e) => {
+            // Dialog content is portalled out of the DOM, but React still bubbles
+            // synthetic events through the React tree — without this, submitting
+            // here also fires the wizard's outer <form onSubmit>, advancing the step.
+            e.stopPropagation();
+            handleSubmit(onValid)(e);
+          }}
+          className="space-y-4"
+        >
+          <div className="space-y-1.5">
+            <Label htmlFor="lesson_title">
+              Title <span className="text-destructive">*</span>
+            </Label>
+            <Input id="lesson_title" placeholder="e.g. Welcome to the Course" {...register("title")} />
+            {errors.title && <p className="text-sm text-destructive">{errors.title.message}</p>}
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="lesson_description">Description</Label>
+            <Textarea id="lesson_description" placeholder="Optional lesson description" rows={3} {...register("description")} />
+          </div>
+
+          <div className="space-y-1.5 max-w-[120px]">
+            <Label htmlFor="lesson_order">Order</Label>
+            <Input id="lesson_order" type="number" min={0} {...register("order")} />
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label className="text-xs text-muted-foreground">Objectives</Label>
+              <Button type="button" variant="outline" size="sm" onClick={() => append({ value: "" })}>
+                <Plus className="h-3.5 w-3.5 mr-1" /> Add
+              </Button>
+            </div>
+            {fields.map((field, index) => (
+              <div key={field.id} className="flex items-start gap-2">
+                <div className="flex-1 space-y-1">
+                  <Input placeholder={`Objective ${index + 1}`} {...register(`objectives.${index}.value`)} />
+                  {errors.objectives?.[index]?.value && (
+                    <p className="text-xs text-destructive">{errors.objectives[index].value.message}</p>
+                  )}
+                </div>
+                <Button
+                  type="button" variant="ghost" size="icon"
+                  className="mt-0.5 text-muted-foreground hover:text-destructive"
+                  onClick={() => remove(index)}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button type="button" variant="outline" disabled={loading}>Cancel</Button>
+            </DialogClose>
+            <Button type="submit" disabled={loading}>
+              {loading && <Spinner className="h-4 w-4 mr-2" />}
+              Create Lesson
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/courses/CreateUnitDialog.jsx b/apps/web/src/modules/admin/components/courses/CreateUnitDialog.jsx
new file mode 100644
index 0000000..b442011
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/CreateUnitDialog.jsx
@@ -0,0 +1,162 @@
+// modules/admin/components/courses/CreateUnitDialog.jsx
+// Lightweight "create a brand-new unit and attach it to this course" dialog —
+// the create-new counterpart to AttachUnitsDialog's attach-existing flow.
+// Two steps (Details -> Completion Requirements) to match the other two
+// create-unit surfaces (AddUnit.jsx, AddLibraryUnit.jsx) — same capability,
+// just condensed into a dialog since this one runs inline in a wizard.
+
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ChevronLeft } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Spinner } from "@/components/ui/spinner";
+import DraftRequirementsEditor from "./DraftRequirementsEditor";
+
+const schema = z.object({
+  title: z.string().min(1, "Title is required."),
+  description: z.string().optional(),
+  order: z.coerce.number().min(0).default(0),
+});
+
+export default function CreateUnitDialog({ open, onOpenChange, courseId, nextOrder = 0, onCreated, draftMode = false }) {
+  const { createUnit, syncUnitRequirements, loading } = useCourses();
+  const { user } = useAuth();
+
+  const [step, setStep] = useState(0);
+  const [requirements, setRequirements] = useState([]);
+
+  const { register, handleSubmit, trigger, reset, formState: { errors } } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { title: "", description: "", order: nextOrder },
+  });
+
+  useEffect(() => {
+    if (open) {
+      reset({ title: "", description: "", order: nextOrder });
+      setStep(0);
+      setRequirements([]);
+    }
+  }, [open, nextOrder, reset]);
+
+  const handleNext = async () => {
+    const valid = await trigger();
+    if (valid) setStep(1);
+  };
+
+  const onValid = async (values) => {
+    const clean = requirements.map(({ _key, ...r }) => r);
+
+    if (draftMode) {
+      onCreated?.({
+        unit_id: null,
+        key: crypto.randomUUID(),
+        title: values.title,
+        description: values.description,
+        order_index: values.order,
+        lessons: [],
+        requirements: clean,
+      });
+      onOpenChange(false);
+      return;
+    }
+
+    const result = await createUnit(courseId, { ...values, createdBy: user?.user_id });
+    const unit = result?.data?.data ?? null;
+    if (!unit) return;
+
+    if (clean.length > 0) {
+      await syncUnitRequirements(courseId, unit.unit_id, clean);
+    }
+
+    onCreated?.(unit);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[440px]">
+        <DialogHeader>
+          <DialogTitle>New Unit</DialogTitle>
+          <DialogDescription>
+            Creates a new unit in the shared Units Library and attaches it to this course.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form
+          onSubmit={(e) => {
+            // Dialog content is portalled out of the DOM, but React still bubbles
+            // synthetic events through the React tree — without this, submitting
+            // here also fires the wizard's outer <form onSubmit>, advancing the step.
+            e.stopPropagation();
+            handleSubmit(onValid)(e);
+          }}
+          className="space-y-4"
+        >
+          {step === 0 && (
+            <>
+              <div className="space-y-1.5">
+                <Label htmlFor="unit_title">
+                  Title <span className="text-destructive">*</span>
+                </Label>
+                <Input id="unit_title" placeholder="e.g. Getting Started" {...register("title")} />
+                {errors.title && <p className="text-sm text-destructive">{errors.title.message}</p>}
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="unit_description">Description</Label>
+                <Textarea id="unit_description" placeholder="Optional unit description" rows={3} {...register("description")} />
+              </div>
+
+              <div className="space-y-1.5 max-w-[120px]">
+                <Label htmlFor="unit_order">Order</Label>
+                <Input id="unit_order" type="number" min={0} {...register("order")} />
+              </div>
+            </>
+          )}
+
+          {step === 1 && (
+            <div className="space-y-3">
+              <p className="text-sm text-muted-foreground">
+                Configure how learners complete this unit — optional, sensible defaults apply automatically.
+              </p>
+              <DraftRequirementsEditor entityType="unit" items={requirements} onChange={setRequirements} />
+            </div>
+          )}
+
+          <DialogFooter>
+            {step === 0 ? (
+              <>
+                <DialogClose asChild>
+                  <Button type="button" variant="outline" disabled={loading}>Cancel</Button>
+                </DialogClose>
+                <Button type="button" onClick={handleNext}>Next</Button>
+              </>
+            ) : (
+              <>
+                <Button type="button" variant="outline" onClick={() => setStep(0)} disabled={loading}>
+                  <ChevronLeft className="h-4 w-4 mr-1" />
+                  Back
+                </Button>
+                <Button type="submit" disabled={loading}>
+                  {loading && <Spinner className="h-4 w-4 mr-2" />}
+                  Create Unit
+                </Button>
+              </>
+            )}
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/courses/DraftRequirementsEditor.jsx b/apps/web/src/modules/admin/components/courses/DraftRequirementsEditor.jsx
new file mode 100644
index 0000000..90c7454
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/DraftRequirementsEditor.jsx
@@ -0,0 +1,166 @@
+import { Plus, Trash2, GripVertical, BookOpenCheck, ListChecks, Info } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
+import { TYPE_DEFS, DEFAULT_BEHAVIOR_TEXT } from "./completionRequirementTypes";
+
+function createRequirement(type) {
+  return { _key: crypto.randomUUID(), type, min_percent: 100, button_label: "", is_required: true };
+}
+
+/**
+ * Draft-only requirements editor for creation wizards — no fetch, no
+ * independent save. The parent wizard holds `items` in local state and only
+ * persists them (via its own sync call) together with the rest of the entity
+ * when the wizard's final Create/Finish action fires — the entity doesn't
+ * exist yet while this renders, so there's nothing to fetch or save against
+ * until then. Mirrors CompletionRequirementBuilder's item UI, minus the
+ * loading/save plumbing that assumes an already-existing entity.
+ */
+export default function DraftRequirementsEditor({ entityType, items, onChange, blockTypes }) {
+  // blockTypes (optional) — the actual block types currently on this lesson's page
+  // (e.g. ["video", "text"]). When provided, requirement types that need a specific
+  // block (watch_video needs "video", listen_audio needs "audio") only show up once
+  // that block actually exists — "detection" rather than always offering them.
+  const availableTypes = Object.entries(TYPE_DEFS)
+    .filter(([, def]) => def.entityTypes.includes(entityType))
+    .filter(([, def]) => !blockTypes || !def.requiresBlockTypes || def.requiresBlockTypes.some((bt) => blockTypes.includes(bt)))
+    .map(([value, def]) => ({ value, ...def }));
+
+  const usedTypes = new Set(items.map((i) => i.type));
+  const addableTypes = availableTypes.filter((t) => !usedTypes.has(t.value));
+
+  const update = (key, patch) => onChange(items.map((i) => (i._key === key ? { ...i, ...patch } : i)));
+  const addItem = (type) => onChange([...items, createRequirement(type)]);
+  const removeItem = (key) => onChange(items.filter((i) => i._key !== key));
+
+  return (
+    <div className="space-y-3">
+      {items.length === 0 && (
+        <p className="flex items-start gap-2 text-sm text-muted-foreground py-4 px-3 border border-dashed rounded-lg">
+          <Info className="size-4 shrink-0 mt-0.5" />
+          <span>
+            No completion requirements configured — by default, {DEFAULT_BEHAVIOR_TEXT[entityType]}.
+            Add a requirement below to override this.
+          </span>
+        </p>
+      )}
+
+      {items.map((item, idx) => {
+        const def = TYPE_DEFS[item.type];
+        const Icon = def?.icon ?? BookOpenCheck;
+        return (
+          <Card key={item._key}>
+            <CardContent className="pt-4 pb-4 space-y-3">
+              <div className="flex items-center gap-2">
+                <GripVertical className="h-4 w-4 text-muted-foreground shrink-0" />
+                <Badge variant="outline" className="text-xs gap-1 shrink-0">
+                  <Icon className="h-3 w-3" />
+                  {idx + 1}
+                </Badge>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium truncate">{def?.label ?? item.type}</p>
+                  <p className="text-xs text-muted-foreground truncate">{def?.describe(entityType)}</p>
+                </div>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 shrink-0 text-destructive hover:text-destructive"
+                  onClick={() => removeItem(item._key)}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+
+              {item.type === "watch_percent" && (
+                <div className="pl-7 flex items-center gap-2 max-w-48">
+                  <Input
+                    type="number"
+                    min={1}
+                    max={100}
+                    value={item.min_percent ?? 100}
+                    onChange={(e) => update(item._key, { min_percent: Math.min(100, Math.max(1, parseInt(e.target.value) || 1)) })}
+                    className="h-8 text-sm"
+                  />
+                  <Label className="text-xs text-muted-foreground whitespace-nowrap">% watched required</Label>
+                </div>
+              )}
+
+              {item.type === "manual_complete" && (
+                <div className="pl-7 space-y-1 max-w-64">
+                  <Label className="text-xs">Button label (optional)</Label>
+                  <Input
+                    placeholder='Defaults to "Mark Complete"'
+                    value={item.button_label ?? ""}
+                    onChange={(e) => update(item._key, { button_label: e.target.value })}
+                    className="h-8 text-sm"
+                  />
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        );
+      })}
+
+      {addableTypes.length > 0 && (
+        <Select value="" onValueChange={(v) => addItem(v)}>
+          <SelectTrigger className="h-9 w-full text-sm">
+            <span className="flex items-center gap-2 text-muted-foreground">
+              <Plus className="h-4 w-4" />
+              Add Requirement
+            </span>
+          </SelectTrigger>
+          <SelectContent position="popper" sideOffset={4}>
+            {addableTypes.map((t) => (
+              <SelectItem key={t.value} value={t.value}>
+                <span className="flex items-center gap-2">
+                  <t.icon className="h-3.5 w-3.5" />
+                  {t.label}
+                </span>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Read-only summary of a draft requirements array for a wizard's Review step
+ * — reads directly from local state (no fetch), since nothing has been
+ * persisted yet at that point.
+ */
+export function DraftRequirementsSummary({ entityType, items }) {
+  const describeValue = (r) => {
+    if (r.type === "watch_percent") return `${r.min_percent}% watched`;
+    if (r.type === "manual_complete") return r.button_label || "Mark Complete";
+    return "Required";
+  };
+
+  return (
+    <div className="border border-border rounded-lg p-4 space-y-1">
+      <div className="flex items-center gap-2 mb-3">
+        <ListChecks className="h-4 w-4 text-muted-foreground" />
+        <span className="text-sm font-medium">Completion Requirements</span>
+      </div>
+      {items.length === 0 ? (
+        <p className="text-sm text-muted-foreground">
+          None added — default behavior applies ({DEFAULT_BEHAVIOR_TEXT[entityType]}).
+        </p>
+      ) : (
+        items.map((r) => (
+          <div key={r._key ?? r.type} className="flex justify-between py-1.5 text-sm">
+            <span className="text-muted-foreground min-w-[140px]">{TYPE_DEFS[r.type]?.label ?? r.type}</span>
+            <span className="text-foreground text-right">{describeValue(r)}</span>
+          </div>
+        ))
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/courses/LessonsPreview.jsx b/apps/web/src/modules/admin/components/courses/LessonsPreview.jsx
new file mode 100644
index 0000000..587e22b
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/LessonsPreview.jsx
@@ -0,0 +1,235 @@
+/* A similar strategy to BlockList.jsx so this will applies 
+to Client side */
+
+import { Eye, ImageIcon, VideoIcon, ZoomIn } from "lucide-react";
+import { PhotoProvider, PhotoView } from "react-photo-view";
+import { VideoBlock } from "@/components/generic/Blocks/Client/VideoBlock";
+import { TextVideoBlock } from "@/components/generic/Blocks/Client/TextVideoBlock";
+import { TextImageBlock } from "@/components/generic/Blocks/Client/TextImageBlock";
+import { ImageBlock } from "@/components/generic/Blocks/Client/ImageBlock";
+import { TextBlock } from "@/components/generic/Blocks/Client/TextBlock";
+import { AudioBlock } from "@/components/generic/Blocks/Client/AudioBlock";
+import { CodeBlock } from "@/components/generic/Blocks/Client/CodeBlock";
+import { MarkdownBlock } from "@/components/generic/Blocks/Client/MarkdownBlock";
+
+export function LessonHeader({ lesson }) {
+    if (!lesson) return null;
+    return (
+        <div className="space-y-3 pb-2 sm:space-y-4">
+            <div>
+                <h1 className="text-2xl font-bold leading-tight mb-1 sm:text-3xl sm:leading-[1.2]">
+                    {lesson.title}
+                </h1>
+                {lesson.description && (
+                    <p className="mt-1 leading-relaxed text-sm text-muted-foreground sm:text-base sm:leading-[1.75] sm:text-justify">
+                        {lesson.description}
+                    </p>
+                )}
+            </div>
+
+            {lesson.objectives?.length > 0 && (
+                <div className="rounded-lg border p-3 space-y-2 sm:p-4 sm:space-y-3">
+                    <div className="flex items-center gap-2">
+                        <div className="h-7 w-7 rounded-md bg-green-100 flex items-center justify-center shrink-0 sm:h-8 sm:w-8">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                className="h-3.5 w-3.5 text-green-600 sm:h-4 sm:w-4"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth={2}
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                            >
+                                <circle cx="12" cy="12" r="10" />
+                                <circle cx="12" cy="12" r="6" />
+                                <circle cx="12" cy="12" r="2" />
+                            </svg>
+                        </div>
+                        <p className="text-xs font-semibold sm:text-sm">Objective</p>
+                    </div>
+                    <ul className="space-y-1 list-disc list-inside sm:space-y-1.5">
+                        {lesson.objectives.map((o) => (
+                            <li key={o.objective_id} className="text-xs text-muted-foreground sm:text-sm">
+                                {o.text}
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
+        </div>
+    );
+}
+
+// ─── Zoomable image wrapper ───────────────────────────────────────────────────
+// Must be rendered inside a <PhotoProvider>. Shows a subtle zoom hint on hover.
+
+export function ZoomableImage({ url, alt }) {
+    if (!url) return null;
+    return (
+        <PhotoView src={url}>
+            <div className="relative group cursor-zoom-in">
+                <img
+                    src={url}
+                    alt={alt ?? ""}
+                    className="w-full rounded-md object-cover aspect-video"
+                    draggable={false}
+                />
+                {/* Zoom hint badge — fades in on hover */}
+                <div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
+                    <div className="flex items-center gap-1 bg-secondary text-sm px-2 py-1 rounded-full border">
+                        <ZoomIn className="size-4" />
+                        <span>Zoom</span>
+                    </div>
+                </div>
+            </div>
+        </PhotoView>
+    );
+}
+
+export function PreviewImage({ url, alt }) {
+    if (!url) {
+        return (
+            <div className="flex items-center justify-center aspect-video rounded-lg border border-dashed text-xs text-muted-foreground bg-muted/20 gap-1.5">
+                <ImageIcon className="h-4 w-4" />
+                No image
+            </div>
+        );
+    }
+    return <ZoomableImage url={url} alt={alt} />;
+}
+
+export function PreviewVideo({ url, thumb }) {
+    if (!url) {
+        return (
+            <div className="flex items-center justify-center aspect-video rounded-lg border border-dashed text-xs text-muted-foreground bg-muted/20 gap-1.5">
+                <VideoIcon className="h-4 w-4" />
+                No video
+            </div>
+        );
+    }
+    return (
+        <div className="relative rounded-md overflow-hidden aspect-video bg-muted">
+            {thumb ? (
+                <img src={thumb} alt="Video thumbnail" className="w-full h-full object-cover" />
+            ) : (
+                <div className="w-full h-full flex items-center justify-center">
+                    <VideoIcon className="h-8 w-8 text-muted-foreground/40 sm:h-10 sm:w-10" />
+                </div>
+            )}
+            <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+                <div className="h-8 w-8 rounded-full bg-black/50 flex items-center justify-center sm:h-10 sm:w-10">
+                    <VideoIcon className="h-4 w-4 text-white sm:h-5 sm:w-5" />
+                </div>
+            </div>
+            <div className="absolute bottom-0 inset-x-0 bg-black/60 px-2 py-1">
+                <p className="text-white text-[9px] truncate sm:text-[10px]">{url}</p>
+            </div>
+        </div>
+    );
+}
+
+// onWatchProgress(percent, { blockId, blockType }) — only meaningful for video/audio
+// blocks; optional, undefined in admin preview mode (only the client reader passes it,
+// for watch_percent/watch_video/listen_audio tracking). PreviewBlock (not VideoBlock/
+// AudioBlock themselves) attaches the block's own id/type to each call, since a lesson
+// can have several blocks of the same type and watch_video/listen_audio need to know
+// which specific one just reported progress.
+export function PreviewBlock({ block, onWatchProgress, resumeMap, antiSkipEnabled }) {
+    const { id, type, content } = block;
+    const withBlockMeta = onWatchProgress
+        ? (percent) => onWatchProgress(percent, { blockId: id, blockType: type })
+        : undefined;
+    const resumePercent = resumeMap?.[id];
+
+    switch (type) {
+        case "text":
+            return <TextBlock blockId={id} content={content} readOnly />;
+        case "image":
+            return <ImageBlock content={content} readOnly />;
+        case "text-image":
+            return <TextImageBlock blockId={id} content={content} readOnly />;
+        case "video":
+            return <VideoBlock content={content} readOnly onWatchProgress={withBlockMeta} resumePercent={resumePercent} antiSkipEnabled={antiSkipEnabled} />;
+        case "text-video":
+            return <TextVideoBlock blockId={id} content={content} readOnly onWatchProgress={withBlockMeta} resumePercent={resumePercent} antiSkipEnabled={antiSkipEnabled} />;
+        case "audio":
+            return <AudioBlock content={content} onWatchProgress={withBlockMeta} resumePercent={resumePercent} antiSkipEnabled={antiSkipEnabled} />;
+        case "code":
+            return <CodeBlock content={content} />;
+        case "markdown":
+            return <MarkdownBlock content={content} />;
+        default:
+            return null;
+    }
+}
+
+// ─── PreviewContent ───────────────────────────────────────────────────────────
+// PhotoProvider wraps ALL blocks so images across the whole lesson share
+// one lightbox session — users can swipe between them naturally.
+
+// Only these completion-requirement types gate video/audio behind the anti-skip
+// seek-cap — everything else (or no requirement configured) allows free seeking.
+const WATCH_TYPE_REQUIREMENTS = ["watch_percent", "watch_video", "listen_audio"];
+
+export function PreviewContent({ lesson, blocks, empty = "No content yet.", showHeader = true, onWatchProgress }) {
+    const resumeMap = lesson?.resume_positions;
+    const antiSkipEnabled = WATCH_TYPE_REQUIREMENTS.includes(lesson?.completion?.type);
+    return (
+        <PhotoProvider
+            speed={() => 300}
+            easing={(type) => (type === 2 ? "cubic-bezier(0.36, 0, 0.66, -0.56)" : "cubic-bezier(0.34, 1.56, 0.64, 1)")}
+            toolbarRender={({ onScale, scale, rotate, onRotate }) => (
+                <div className="flex items-center gap-3 px-2">
+                    <button
+                        onClick={() => onScale(scale + 0.5)}
+                        className="text-white/80 hover:text-white transition-colors"
+                        title="Zoom in"
+                    >
+                        <ZoomIn className="h-5 w-5" />
+                    </button>
+                </div>
+            )}
+        >
+            {showHeader && <LessonHeader lesson={lesson} />}
+            {blocks.length === 0 ? (
+                <div className="flex flex-col items-center justify-center gap-2 py-10 text-sm text-muted-foreground sm:py-16">
+                    <Eye className="h-6 w-6 opacity-20 sm:h-8 sm:w-8" />
+                    <p>{empty}</p>
+                </div>
+            ) : (
+                <div className="space-y-4 sm:space-y-5">
+                    {blocks.map((block) => (
+                        <div key={block.id}>
+                            <PreviewBlock block={block} onWatchProgress={onWatchProgress} resumeMap={resumeMap} antiSkipEnabled={antiSkipEnabled} />
+                        </div>
+                    ))}
+                </div>
+            )}
+        </PhotoProvider>
+    );
+}
+
+export function PreviewChrome({ title, children, showChrome = true }) {
+    if (!showChrome) {
+        return <>{children}</>;
+    }
+
+    return (
+        <div className="rounded-xl border bg-card shadow-sm overflow-hidden">
+            <div className="flex items-center gap-1.5 px-3 py-2 bg-muted/60 border-b">
+                <span className="hidden h-2.5 w-2.5 rounded-full bg-red-400    sm:inline-block" />
+                <span className="hidden h-2.5 w-2.5 rounded-full bg-yellow-400 sm:inline-block" />
+                <span className="hidden h-2.5 w-2.5 rounded-full bg-green-400  sm:inline-block" />
+                <div className="flex-1 sm:mx-3 h-5 rounded bg-background/60 border text-[10px]
+                                flex items-center px-2 text-muted-foreground/60 truncate">
+                    {title ?? "Lesson Preview"}
+                </div>
+                <Eye className="h-3.5 w-3.5 text-muted-foreground/60 shrink-0" />
+            </div>
+            <div className="p-3 sm:p-5">
+                {children}
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/components/courses/LessonsTable.jsx b/apps/web/src/modules/admin/components/courses/LessonsTable.jsx
new file mode 100644
index 0000000..8b4e768
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/LessonsTable.jsx
@@ -0,0 +1,158 @@
+import { useMemo, useRef, useState, useCallback, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import api from "@/utils/api.util";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/courses/lessons/columns.config";
+import { buildToolbarActions } from "../../config/courses/lessons/toolbar.config";
+import { buildSelectionActions } from "../../config/courses/lessons/selection.config";
+import { buildRowActions } from "../../config/courses/lessons/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function LessonsTable({ courseId, unitId }) {
+  const [archiveTarget, setArchiveTarget] = useState(null);
+  const [archiveIds, setArchiveIds] = useState(null);
+
+  const tableRefsRef = useRef({
+    getFilters: () => [],
+    getSort: () => [],
+    resetSelection: () => { },
+    setFilters: () => { },
+  });
+
+  const navigate = useNavigate();
+
+  const { user: currentUser } = useAuth();
+
+  const {
+    course, unit, lessons, attributes, pagination, setPagination, loading,
+    fetchLessons, archiveLesson, archiveLessons, fetchLessonFieldValues
+  } = useCourses();
+
+  const handleRefsReady = (refs) => {
+    tableRefsRef.current = refs;
+  };
+
+  const [tierCategories, setTierCategories] = useState([]);
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => setTierCategories(data.data ?? []))
+      .catch(() => {});
+  }, []);
+  const tierMap = useMemo(
+    () => Object.fromEntries(tierCategories.map((c) => [c.slug, c])),
+    [tierCategories]
+  );
+
+  const exportConfig = {
+    allData: lessons,
+    attributes,
+    filename: `${getTimestamp()}_${course?.title}_${unit?.title}_Lessons`,
+    sheetName: "Lessons",
+    generatedBy: formatGeneratedBy(currentUser),
+  };
+
+  const handleFetch = useCallback(
+    (params) => fetchLessons(courseId, unitId, params),
+    [courseId, unitId]
+  );
+
+  const rowActions = useMemo(() => buildRowActions({
+    onView: (row) => navigate(`/admin/courses/${courseId}/units/${unitId}/lessons/${row.lesson_id}/view`),
+    onArchive: (row) => setArchiveTarget(row),
+  }), [courseId, unitId]);
+
+  const toolbarActions = buildToolbarActions({
+    fetchLessons: (params) => fetchLessons(courseId, unitId, params),
+    pagination,
+    exportConfig,
+    navigate,
+    courseId,
+    unitId,
+    getFilters: () => tableRefsRef.current.getFilters(),
+    getSort: () => tableRefsRef.current.getSort(),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const selectionActions = buildSelectionActions({
+    exportConfig,
+    onArchive: (row) => setArchiveTarget(row),
+    onArchiveMany: (ids) => setArchiveIds(ids),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const columns = useMemo(
+    () => buildDataColumns(attributes, rowActions, tierMap, unit?.subscription, course?.subscription),
+    [attributes, rowActions, tierMap, unit?.subscription, course?.subscription]
+  );
+
+  const handleArchiveSuccess = () => {
+    setArchiveTarget(null);
+    setArchiveIds(null);
+    tableRefsRef.current.resetSelection?.();
+    fetchLessons(courseId, unitId, { page: 1, limit: pagination?.limit ?? 10 });
+  };
+
+  return (
+    <>
+      <DataTable
+        title="Lessons"
+        data={lessons}
+        columns={columns}
+        attributes={attributes}
+        pagination={pagination}
+        setPagination={setPagination}
+        loading={loading}
+        onFetch={handleFetch}
+        onFetchFilterData={(field) => fetchLessonFieldValues(courseId, unitId, field)}
+        onRefsReady={handleRefsReady}
+        renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+          <FilterSheet
+            open={open}
+            onOpenChange={onOpenChange}
+            column={column}
+            attr={attr}
+            data={data}
+            loading={loading}
+          />
+        )}
+        columnPinning={columnPinning}
+        toolbarActions={toolbarActions}
+        selectionActions={selectionActions}
+        recordLabel="lesson"
+        emptyMessage="No lessons found."
+      />
+
+      {/* ── Single archive ── */}
+      <ArchiveDialog
+        open={!!archiveTarget}
+        onOpenChange={(v) => !v && setArchiveTarget(null)}
+        entity={archiveTarget}
+        entityLabel="Lesson"
+        getName={(c) => c?.title}
+        onArchive={(c) => archiveLesson(courseId, unitId, c?.lesson_id)}
+        loading={loading}
+        onSuccess={handleArchiveSuccess}
+      />
+
+      {/* ── Bulk archive ── */}
+      <ArchiveDialog
+        open={!!archiveIds}
+        onOpenChange={(v) => !v && setArchiveIds(null)}
+        ids={archiveIds ?? []}
+        entityLabel="Lesson"
+        onArchive={(ids) => archiveLessons(courseId, unitId, ids)}
+        loading={loading}
+        onSuccess={handleArchiveSuccess}
+      />
+    </>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/courses/QuestionEditor.jsx b/apps/web/src/modules/admin/components/courses/QuestionEditor.jsx
new file mode 100644
index 0000000..c8dca7b
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/QuestionEditor.jsx
@@ -0,0 +1,281 @@
+import { useState } from "react";
+import { Plus, Trash2, GripVertical, CheckCircle2, Circle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+const QUESTION_TYPES = [
+  { value: "true_false",       label: "True / False" },
+  { value: "multiple_choice",  label: "Multiple Choice (1 correct)" },
+  { value: "multi_select",     label: "Multi Select (multiple correct)" },
+];
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+// ── Single Option Row ─────────────────────────────────────────────────────────
+function OptionRow({ option, index, questionType, onUpdate, onRemove, onToggleCorrect }) {
+  const isCorrect = option.is_correct;
+
+  return (
+    <div className={cn(
+      "flex items-center gap-2 rounded-lg border px-3 py-2 transition-colors",
+      isCorrect ? "border-green-300 bg-green-50/60" : "border-border bg-background"
+    )}>
+      <GripVertical className="h-4 w-4 text-muted-foreground/40 shrink-0" />
+
+      {/* Correct toggle */}
+      <button
+        type="button"
+        onClick={() => onToggleCorrect(index)}
+        className="shrink-0"
+        title={isCorrect ? "Mark as incorrect" : "Mark as correct"}
+      >
+        {isCorrect
+          ? <CheckCircle2 className="h-4 w-4 text-green-600" />
+          : <Circle className="h-4 w-4 text-muted-foreground" />
+        }
+      </button>
+
+      <Input
+        value={option.text}
+        onChange={(e) => onUpdate(index, { ...option, text: e.target.value })}
+        placeholder={`Option ${index + 1}`}
+        className="flex-1 border-0 shadow-none focus-visible:ring-0 p-0 h-auto text-sm"
+      />
+
+      <button
+        type="button"
+        onClick={() => onRemove(index)}
+        className="shrink-0 text-muted-foreground hover:text-destructive transition-colors"
+      >
+        <Trash2 className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  );
+}
+
+// ── Question Card ─────────────────────────────────────────────────────────────
+export function QuestionCard({ question, index, onChange, onRemove, error }) {
+  const updateField = (field, value) => onChange({ ...question, [field]: value });
+
+  const updateOption = (i, updated) => {
+    const options = [...question.options];
+    options[i] = updated;
+    onChange({ ...question, options });
+  };
+
+  const toggleCorrect = (i) => {
+    const options = question.options.map((o, idx) => {
+      if (question.type === "multiple_choice" || question.type === "true_false") {
+        // single correct — deselect all others
+        return { ...o, is_correct: idx === i };
+      }
+      // multi_select — toggle individual
+      return idx === i ? { ...o, is_correct: !o.is_correct } : o;
+    });
+    onChange({ ...question, options });
+  };
+
+  const addOption = () => {
+    onChange({
+      ...question,
+      options: [
+        ...question.options,
+        { text: "", is_correct: false, order_index: question.options.length },
+      ],
+    });
+  };
+
+  const removeOption = (i) => {
+    onChange({
+      ...question,
+      options: question.options.filter((_, idx) => idx !== i),
+    });
+  };
+
+  const handleTypeChange = (type) => {
+    // Reset options based on type
+    const defaultOptions =
+      type === "true_false"
+        ? [
+            { text: "True",  is_correct: true,  order_index: 0 },
+            { text: "False", is_correct: false, order_index: 1 },
+          ]
+        : question.options.map((o) => ({ ...o, is_correct: false }));
+
+    onChange({ ...question, type, options: defaultOptions });
+  };
+
+  const correctCount = question.options.filter((o) => o.is_correct).length;
+
+  return (
+    <div className="rounded-xl border bg-card shadow-sm overflow-hidden">
+      {/* Card header */}
+      <div className="flex items-center justify-between px-4 py-3 bg-muted/40 border-b">
+        <div className="flex items-center gap-2">
+          <span className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-semibold">
+            {index + 1}
+          </span>
+          <Select value={question.type} onValueChange={handleTypeChange}>
+            <SelectTrigger className="h-7 text-xs border-0 bg-transparent shadow-none w-auto gap-1 px-1">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {QUESTION_TYPES.map((t) => (
+                <SelectItem key={t.value} value={t.value} className="text-xs">
+                  {t.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Badge variant="secondary" className="text-xs">
+            {question.points ?? 1} pt{(question.points ?? 1) !== 1 ? "s" : ""}
+          </Badge>
+          {correctCount > 0 && (
+            <Badge variant="outline" className="text-xs text-green-600 border-green-300">
+              {correctCount} correct
+            </Badge>
+          )}
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onClick={onRemove}
+          className="h-7 w-7 text-muted-foreground hover:text-destructive"
+        >
+          <Trash2 className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+
+      <div className="p-4 space-y-4">
+        {/* Question text */}
+        <div className="space-y-1.5">
+          <Label className="text-xs text-muted-foreground uppercase tracking-wide">Question</Label>
+          <Textarea
+            value={question.question}
+            onChange={(e) => updateField("question", e.target.value)}
+            placeholder="Enter your question here…"
+            rows={2}
+            className="resize-none"
+          />
+          <FieldError message={error?.question} />
+        </div>
+
+        {/* Options */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label className="text-xs text-muted-foreground uppercase tracking-wide">
+                Options
+                <span className="ml-1 normal-case text-muted-foreground/60">
+                  — click circle to mark correct
+                </span>
+              </Label>
+              {question.type === "multi_select" && correctCount > 0 && (
+                <p className="text-xs text-blue-600 dark:text-blue-400">
+                  Students must select {correctCount} answer{correctCount !== 1 ? "s" : ""}
+                </p>
+              )}
+            </div>
+            {question.type !== "true_false" && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={addOption}
+                className="h-6 text-xs gap-1"
+              >
+                <Plus className="h-3 w-3" />
+                Add option
+              </Button>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            {question.options.map((option, i) => (
+              <OptionRow
+                key={i}
+                option={option}
+                index={i}
+                questionType={question.type}
+                onUpdate={updateOption}
+                onRemove={removeOption}
+                onToggleCorrect={toggleCorrect}
+              />
+            ))}
+          </div>
+          <FieldError message={error?.options} />
+        </div>
+
+        {/* Points + Explanation row */}
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-1.5">
+            <Label className="text-xs text-muted-foreground uppercase tracking-wide">Points</Label>
+            <Input
+              type="number"
+              min={1}
+              value={question.points ?? 1}
+              onChange={(e) => updateField("points", parseInt(e.target.value) || 1)}
+              className="h-8 text-sm"
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label className="text-xs text-muted-foreground uppercase tracking-wide">
+              Explanation <span className="normal-case text-muted-foreground/60">(optional)</span>
+            </Label>
+            <Input
+              value={question.explanation ?? ""}
+              onChange={(e) => updateField("explanation", e.target.value)}
+              placeholder="Shown after answer"
+              className="h-8 text-sm"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Make a blank question ─────────────────────────────────────────────────────
+export function makeQuestion(type = "multiple_choice") {
+  const defaultOptions = {
+    true_false: [
+      { text: "True",  is_correct: true,  order_index: 0 },
+      { text: "False", is_correct: false, order_index: 1 },
+    ],
+    multiple_choice: [
+      { text: "", is_correct: true,  order_index: 0 },
+      { text: "", is_correct: false, order_index: 1 },
+      { text: "", is_correct: false, order_index: 2 },
+    ],
+    multi_select: [
+      { text: "", is_correct: true,  order_index: 0 },
+      { text: "", is_correct: true,  order_index: 1 },
+      { text: "", is_correct: false, order_index: 2 },
+    ],
+  };
+
+  return {
+    _tempId:     crypto.randomUUID(),
+    type,
+    question:    "",
+    explanation: "",
+    points:      1,
+    order_index: 0,
+    options:     defaultOptions[type] ?? [],
+  };
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/components/courses/RoadmapBuilder.jsx b/apps/web/src/modules/admin/components/courses/RoadmapBuilder.jsx
new file mode 100644
index 0000000..e013ade
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/RoadmapBuilder.jsx
@@ -0,0 +1,306 @@
+// modules/admin/components/courses/RoadmapBuilder.jsx
+// The "Roadmap" step content for AddCourse: compose a course's units — and
+// each unit's lessons — by attaching existing library content or creating
+// new items inline. Fully controlled/draft: nothing here ever calls the API.
+// All picks just mutate the `units` array the parent wizard holds in memory;
+// the whole roadmap is written in one shot when the wizard is finished.
+
+import { useState, useMemo } from "react";
+import {
+  ChevronRight, ChevronDown, Plus, Link2, Trash2, BookOpen, AlertTriangle,
+} from "lucide-react";
+
+import { useLibrary } from "@/contexts/AdminLibraryContext";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
+  AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import AttachUnitsDialog from "../library/AttachUnitsDialog";
+import AttachLessonsDialog from "../library/AttachLessonsDialog";
+import CreateUnitDialog from "./CreateUnitDialog";
+import CreateLessonDialog from "./CreateLessonDialog";
+
+export default function RoadmapBuilder({ units, onUnitsChange }) {
+  const { unitsFlat, lessonsFlat } = useLibrary();
+
+  const [expanded, setExpanded] = useState(() => new Set());
+
+  const [createUnitOpen, setCreateUnitOpen] = useState(false);
+  const [attachUnitOpen, setAttachUnitOpen] = useState(false);
+  const [createLessonUnitKey, setCreateLessonUnitKey] = useState(null);
+  const [attachLessonUnitKey, setAttachLessonUnitKey] = useState(null);
+  const [removeUnitTarget, setRemoveUnitTarget] = useState(null);
+  const [removeLessonTarget, setRemoveLessonTarget] = useState(null);
+
+  const toggleExpand = (key) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+
+  const attachedUnitIds = useMemo(
+    () => units.map((u) => u.unit_id).filter(Boolean),
+    [units]
+  );
+
+  const handleAttachUnits = (unitIds) => {
+    const picked = unitIds
+      .map((id) => unitsFlat.find((u) => u.unit_id === id))
+      .filter(Boolean)
+      .map((u) => ({
+        key: crypto.randomUUID(),
+        unit_id: u.unit_id,
+        title: u.title,
+        description: u.description ?? "",
+        existing_lesson_count: u.lesson_count ?? 0,
+        lessons: [],
+      }));
+    onUnitsChange([...units, ...picked]);
+  };
+
+  const handleUnitCreated = (draftUnit) => {
+    onUnitsChange([...units, draftUnit]);
+    setExpanded((prev) => new Set(prev).add(draftUnit.key));
+  };
+
+  const handleAttachLessons = (unitKey, lessonIds) => {
+    const picked = lessonIds
+      .map((id) => lessonsFlat.find((l) => l.lesson_id === id))
+      .filter(Boolean)
+      .map((l) => ({
+        key: crypto.randomUUID(),
+        lesson_id: l.lesson_id,
+        title: l.title,
+        description: l.description ?? "",
+        objectives: [],
+      }));
+    onUnitsChange(units.map((u) =>
+      u.key === unitKey ? { ...u, lessons: [...u.lessons, ...picked] } : u
+    ));
+  };
+
+  const handleLessonCreated = (unitKey, draftLesson) => {
+    onUnitsChange(units.map((u) =>
+      u.key === unitKey ? { ...u, lessons: [...u.lessons, draftLesson] } : u
+    ));
+  };
+
+  const confirmRemoveUnit = () => {
+    if (!removeUnitTarget) return;
+    onUnitsChange(units.filter((u) => u.key !== removeUnitTarget.key));
+    setRemoveUnitTarget(null);
+  };
+
+  const confirmRemoveLesson = () => {
+    if (!removeLessonTarget) return;
+    const { unitKey, lesson } = removeLessonTarget;
+    onUnitsChange(units.map((u) =>
+      u.key === unitKey ? { ...u, lessons: u.lessons.filter((l) => l.key !== lesson.key) } : u
+    ));
+    setRemoveLessonTarget(null);
+  };
+
+  const attachLessonUnit = units.find((u) => u.key === attachLessonUnitKey);
+
+  return (
+    <div className="rounded-lg border bg-card p-6 space-y-5">
+      <div className="flex items-start justify-between gap-3 pb-1 border-b">
+        <div className="space-y-0.5">
+          <h2 className="text-sm font-semibold">Course Roadmap</h2>
+          <p className="text-xs text-muted-foreground">
+            Add units to structure this course. Attach existing library units to reuse content, or create new ones from scratch.
+          </p>
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          <Button type="button" variant="outline" size="sm" onClick={() => setAttachUnitOpen(true)}>
+            <Link2 className="h-3.5 w-3.5 mr-1.5" /> Select
+          </Button>
+          <Button type="button" variant="outline" size="sm" onClick={() => setCreateUnitOpen(true)}>
+            <Plus className="h-3.5 w-3.5 mr-1.5" /> Create
+          </Button>
+
+        </div>
+      </div>
+
+      {units.length === 0 ? (
+        <div className="flex flex-col items-center justify-center gap-3 py-10 text-center">
+          <BookOpen className="h-8 w-8 text-muted-foreground" />
+          <p className="text-sm font-medium">No units yet</p>
+
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {units.map((unit, index) => {
+            const isOpen = expanded.has(unit.key);
+            const isAttached = !!unit.unit_id;
+            return (
+              <div key={unit.key} className="rounded-md border">
+                <div className="flex items-center gap-2 px-3 py-2.5">
+                  <button
+                    type="button"
+                    onClick={() => toggleExpand(unit.key)}
+                    className="flex items-center gap-2 flex-1 min-w-0 text-left"
+                  >
+                    {isOpen ? (
+                      <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />
+                    ) : (
+                      <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
+                    )}
+                    <span className="text-xs text-muted-foreground shrink-0">{index + 1}</span>
+                    <span className="text-sm font-medium truncate">{unit.title}</span>
+                    {isAttached ? (
+                      <Badge variant="outline" className="text-[10px] shrink-0">
+                        {unit.existing_lesson_count} existing lesson{unit.existing_lesson_count === 1 ? "" : "s"}
+                      </Badge>
+                    ) : (
+                      <Badge variant="secondary" className="text-[10px] shrink-0">new</Badge>
+                    )}
+                    {unit.lessons.length > 0 && (
+                      <Badge variant="outline" className="text-[10px] shrink-0">
+                        +{unit.lessons.length} added
+                      </Badge>
+                    )}
+                  </button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="text-muted-foreground hover:text-destructive shrink-0"
+                    onClick={() => setRemoveUnitTarget(unit)}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+
+                {isOpen && (
+                  <div className="border-t bg-muted/30 px-3 py-3 space-y-2">
+                    {isAttached && (
+                      <p className="text-xs text-muted-foreground py-1">
+                        This unit already has {unit.existing_lesson_count} lesson{unit.existing_lesson_count === 1 ? "" : "s"} in the library. Any lessons you add below are appended on top.
+                      </p>
+                    )}
+                    {unit.lessons.length === 0 && !isAttached && (
+                      <p className="text-xs text-muted-foreground py-1">No lessons in this unit yet.</p>
+                    )}
+                    {unit.lessons.map((lesson, lIndex) => (
+                      <div key={lesson.key} className="flex items-center gap-2 pl-1">
+                        <span className="text-xs text-muted-foreground w-4 shrink-0">{lIndex + 1}.</span>
+                        <span className="text-sm flex-1 truncate">{lesson.title}</span>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="h-7 w-7 text-muted-foreground hover:text-destructive shrink-0"
+                          onClick={() => setRemoveLessonTarget({ unitKey: unit.key, lesson })}
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </Button>
+                      </div>
+                    ))}
+                    <div className="flex items-center gap-2 pt-1">
+                      <Button
+                        type="button" variant="outline" size="sm" className="h-7 text-xs"
+                        onClick={() => setAttachLessonUnitKey(unit.key)}
+                      >
+                        <Link2 className="h-3 w-3 mr-1" /> Select Lesson
+                      </Button>
+                      <Button
+                        type="button" variant="outline" size="sm" className="h-7 text-xs"
+                        onClick={() => setCreateLessonUnitKey(unit.key)}
+                      >
+                        <Plus className="h-3 w-3 mr-1" /> Create Lesson
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {units.length === 0 && (
+        <div className="flex items-center gap-2 text-xs text-amber-700 dark:text-amber-400">
+          <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
+          Add at least one unit so learners have content to see.
+        </div>
+      )}
+
+      {/* ── Create / Attach dialogs (draft mode — nothing here hits the API) ── */}
+      <CreateUnitDialog
+        open={createUnitOpen}
+        onOpenChange={setCreateUnitOpen}
+        nextOrder={units.length}
+        onCreated={handleUnitCreated}
+        draftMode
+      />
+      <AttachUnitsDialog
+        open={attachUnitOpen}
+        onOpenChange={setAttachUnitOpen}
+        attachedUnitIds={attachedUnitIds}
+        onAttach={handleAttachUnits}
+      />
+      <CreateLessonDialog
+        open={!!createLessonUnitKey}
+        onOpenChange={(v) => !v && setCreateLessonUnitKey(null)}
+        nextOrder={(units.find((u) => u.key === createLessonUnitKey)?.lessons ?? []).length}
+        onCreated={(lesson) => handleLessonCreated(createLessonUnitKey, lesson)}
+        draftMode
+      />
+      <AttachLessonsDialog
+        open={!!attachLessonUnitKey}
+        onOpenChange={(v) => !v && setAttachLessonUnitKey(null)}
+        attachedLessonIds={(attachLessonUnit?.lessons ?? []).map((l) => l.lesson_id).filter(Boolean)}
+        onAttach={(lessonIds) => handleAttachLessons(attachLessonUnitKey, lessonIds)}
+      />
+
+      {/* ── Remove confirmations ── */}
+      <AlertDialog open={!!removeUnitTarget} onOpenChange={(v) => !v && setRemoveUnitTarget(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remove unit from roadmap</AlertDialogTitle>
+            <AlertDialogDescription>
+              Remove <span className="font-medium text-foreground">{removeUnitTarget?.title}</span> from this course's
+              roadmap? Nothing has been saved yet, so this just drops it from the draft.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmRemoveUnit}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Remove
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <AlertDialog open={!!removeLessonTarget} onOpenChange={(v) => !v && setRemoveLessonTarget(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remove lesson from unit</AlertDialogTitle>
+            <AlertDialogDescription>
+              Remove <span className="font-medium text-foreground">{removeLessonTarget?.lesson?.title}</span> from this
+              unit? Nothing has been saved yet, so this just drops it from the draft.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmRemoveLesson}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Remove
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/courses/UnitsTable.jsx b/apps/web/src/modules/admin/components/courses/UnitsTable.jsx
new file mode 100644
index 0000000..f5b9533
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/UnitsTable.jsx
@@ -0,0 +1,168 @@
+import { useMemo, useRef, useState, useCallback, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import api from "@/utils/api.util";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/courses/units/columns.config";
+import { buildToolbarActions } from "../../config/courses/units/toolbar.config";
+import { buildSelectionActions } from "../../config/courses/units/selection.config";
+import { buildRowActions } from "../../config/courses/units/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function UnitsTable({ courseId, returnTo }) {
+  const [archiveTarget, setArchiveTarget] = useState(null);
+  const [archiveIds, setArchiveIds] = useState(null);
+
+  const tableRefsRef = useRef({
+    getFilters: () => [],
+    getSort: () => [],
+    resetSelection: () => { },
+    setFilters: () => { },
+  });
+
+  const navigate = useNavigate();
+
+  const { user: currentUser } = useAuth();
+
+  const {
+    course, units, attributes, pagination, setPagination, loading,
+    fetchUnits, archiveUnit, archiveUnits, fetchUnitFieldValues
+  } = useCourses();
+
+  const handleRefsReady = (refs) => {
+    tableRefsRef.current = refs;
+  };
+
+  const [tierCategories, setTierCategories] = useState([]);
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => setTierCategories(data.data ?? []))
+      .catch(() => {});
+  }, []);
+  const tierMap = useMemo(
+    () => Object.fromEntries(tierCategories.map((c) => [c.slug, c])),
+    [tierCategories]
+  );
+
+  const exportConfig = {
+    allData: units,
+    attributes,
+    filename: `${getTimestamp()}_${course?.title}_Units`,
+    sheetName: "Units",
+    generatedBy: formatGeneratedBy(currentUser),
+  };
+
+  const handleFetch = useCallback(
+    (params) => fetchUnits(courseId, params),
+    [courseId]
+  );
+
+  const rowActions = useMemo(() => buildRowActions({
+    onView: (row) => navigate(`/admin/courses/${courseId}/units/${row.unit_id}/view`),
+    onArchive: (row) => setArchiveTarget(row),
+  }), [courseId]);
+
+  const toolbarActions = buildToolbarActions({
+    fetchUnits: (params) => fetchUnits(courseId, params),
+    pagination,
+    exportConfig,
+    navigate,
+    courseId,
+    returnTo,
+    getFilters: () => tableRefsRef.current.getFilters(),
+    getSort: () => tableRefsRef.current.getSort(),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const selectionActions = buildSelectionActions({
+    exportConfig,
+    onArchive: (row) => setArchiveTarget(row),
+    onArchiveMany: (ids) => setArchiveIds(ids),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const columns = useMemo(
+    () => buildDataColumns(attributes, rowActions, tierMap, course?.subscription),
+    [attributes, rowActions, tierMap, course?.subscription]
+  );
+
+  const handleArchiveSuccess = () => {
+    setArchiveTarget(null);
+    setArchiveIds(null);
+    tableRefsRef.current.resetSelection?.();
+    fetchUnits(courseId, { page: 1, limit: pagination?.limit ?? 10 });
+  };
+
+  return (
+    <>
+      <DataTable
+        title="Units"
+        data={units}
+        columns={columns}
+        attributes={attributes}
+        pagination={pagination}
+        setPagination={setPagination}
+        loading={loading}
+        onFetch={handleFetch}
+        onFetchFilterData={(field) => fetchUnitFieldValues(courseId, field)}
+        onRefsReady={handleRefsReady}
+        renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+          <FilterSheet
+            open={open}
+            onOpenChange={onOpenChange}
+            column={column}
+            attr={attr}
+            data={data}
+            loading={loading}
+          />
+        )}
+        columnPinning={columnPinning}
+        toolbarActions={toolbarActions}
+        selectionActions={selectionActions}
+        recordLabel="unit"
+        emptyMessage="No units found."
+      />
+
+      {/* ── Single archive ── */}
+      <ArchiveDialog
+        open={!!archiveTarget}
+        onOpenChange={(v) => !v && setArchiveTarget(null)}
+        entity={archiveTarget}
+        entityLabel="Unit"
+        getName={(c) => c?.title}
+        onArchive={(c) => archiveUnit(courseId, c?.unit_id)}
+        loading={loading}
+        onSuccess={handleArchiveSuccess}
+        onImpactCheck={async () => {
+          const { data } = await api.get(
+            `/admin/courses/${courseId}/units/${archiveTarget?.unit_id}/archive-impact`
+          );
+          const { completionCount, progressCount } = data?.data ?? {};
+          return [
+            { label: "student(s) have completed this unit", count: completionCount ?? 0 },
+            { label: "student(s) have reading progress in this unit", count: progressCount ?? 0 },
+          ];
+        }}
+      />
+
+      {/* ── Bulk archive ── */}
+      <ArchiveDialog
+        open={!!archiveIds}
+        onOpenChange={(v) => !v && setArchiveIds(null)}
+        ids={archiveIds ?? []}
+        entityLabel="Unit"
+        onArchive={(ids) => archiveUnits(courseId, ids)}
+        loading={loading}
+        onSuccess={handleArchiveSuccess}
+      />
+    </>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/courses/completionRequirementTypes.js b/apps/web/src/modules/admin/components/courses/completionRequirementTypes.js
new file mode 100644
index 0000000..d200a68
--- /dev/null
+++ b/apps/web/src/modules/admin/components/courses/completionRequirementTypes.js
@@ -0,0 +1,67 @@
+import { BookOpenCheck, ClipboardCheck, PlayCircle, Video, Headphones, MousePointerClick } from "lucide-react";
+
+// ─── Requirement type config ──────────────────────────────────────────────────
+// Mirrors utils/courses/completion_requirements.registry.js's VALID_ENTITY_TYPES
+// on the backend — keep in sync if a new type is added there.
+// Split out of CompletionRequirementBuilder.jsx (rather than exported from
+// there) so both it and other views (e.g. wizard Review steps) can import
+// these without tripping the react-refresh/only-export-components rule,
+// which requires component files to export components only.
+export const TYPE_DEFS = {
+  read_all_content: {
+    label: "Read / View All Content",
+    icon: BookOpenCheck,
+    entityTypes: ["course", "unit", "lesson"],
+    describe: (entityType) =>
+      entityType === "lesson"
+        ? "Learner must read through this lesson's content."
+        : entityType === "unit"
+          ? "Every lesson in this unit must be completed."
+          : "Every unit in this course must be completed.",
+  },
+  pass_quiz: {
+    label: "Pass the Quiz",
+    icon: ClipboardCheck,
+    entityTypes: ["unit", "course"],
+    describe: (entityType) =>
+      entityType === "unit"
+        ? "Learner must pass this unit's quiz."
+        : "Learner must pass the course's final assessment.",
+  },
+  watch_percent: {
+    label: "Watch % of Video/Audio",
+    icon: PlayCircle,
+    entityTypes: ["lesson"],
+    // Either block type satisfies this one — it's one aggregate percent across
+    // whichever is playing, unlike watch_video/listen_audio below. text-video counts
+    // as video — same <video> element under the hood, just paired with text.
+    requiresBlockTypes: ["video", "audio", "text-video"],
+    describe: () => "Learner must watch at least the configured percentage of the lesson's video/audio content.",
+  },
+  watch_video: {
+    label: "Finish Watching the Full Video",
+    icon: Video,
+    entityTypes: ["lesson"],
+    requiresBlockTypes: ["video", "text-video"],
+    describe: () => "Learner must watch every video block on this lesson all the way through (100%).",
+  },
+  listen_audio: {
+    label: "Finish Listening to the Full Audio",
+    icon: Headphones,
+    entityTypes: ["lesson"],
+    requiresBlockTypes: ["audio"],
+    describe: () => "Learner must listen to every audio block on this lesson all the way through (100%).",
+  },
+  manual_complete: {
+    label: 'Manual "Mark Complete"',
+    icon: MousePointerClick,
+    entityTypes: ["course", "unit", "lesson"],
+    describe: () => "Learner clicks a button to self-report completion — no automatic tracking.",
+  },
+};
+
+export const DEFAULT_BEHAVIOR_TEXT = {
+  lesson: "the learner reading through the content marks it complete",
+  unit: "every lesson in the unit must be completed",
+  course: "every unit must be completed and the course assessment (if any) must be passed",
+};
diff --git a/apps/web/src/modules/admin/components/library/ArchivedLessonLibraryTable.jsx b/apps/web/src/modules/admin/components/library/ArchivedLessonLibraryTable.jsx
new file mode 100644
index 0000000..ac72a4f
--- /dev/null
+++ b/apps/web/src/modules/admin/components/library/ArchivedLessonLibraryTable.jsx
@@ -0,0 +1,176 @@
+import { useMemo, useRef, useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useLibrary } from "@/contexts/AdminLibraryContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { RestoreDialog } from "@/components/generic/Dialogs/RestoreDialog";
+import { PermanentDeleteDialog } from "@/components/generic/Dialogs/PermanentDeleteDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/library/lessons/columns.config";
+import { buildArchivedToolbarActions } from "../../config/library/lessons/toolbar.config";
+import { buildArchivedSelectionActions } from "../../config/library/lessons/selection.config";
+import { buildArchivedRowActions } from "../../config/library/lessons/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function ArchivedLessonLibraryTable() {
+  const [restoreTarget, setRestoreTarget] = useState(null);
+  const [restoreIds, setRestoreIds] = useState(null);
+  const [deleteTarget, setDeleteTarget] = useState(null);
+  const [deleteIds, setDeleteIds] = useState(null);
+
+  const tableRefsRef = useRef({
+    getFilters: () => [],
+    getSort: () => [],
+    resetSelection: () => { },
+    setFilters: () => { },
+  });
+
+  const navigate = useNavigate();
+
+  const { user: currentUser } = useAuth();
+
+  const {
+    lessons, attributes, pagination, setPagination, loading,
+    fetchArchivedLessons, restoreLesson, restoreLessons,
+    permanentlyDeleteLesson, permanentlyDeleteLessons,
+    fetchLessonFieldValues, fetchLessonPermanentDeleteImpact,
+  } = useLibrary();
+
+  const handleRefsReady = (refs) => {
+    tableRefsRef.current = refs;
+  };
+
+  const exportConfig = {
+    allData: lessons,
+    attributes,
+    filename: `${getTimestamp()}_ArchivedLessonLibrary`,
+    sheetName: "Archived Lessons",
+    generatedBy: formatGeneratedBy(currentUser),
+  };
+
+  const handleFetch = useCallback((params) => fetchArchivedLessons(params), [fetchArchivedLessons]);
+
+  const rowActions = useMemo(() => buildArchivedRowActions({
+    onRestore: (row) => setRestoreTarget(row),
+    onDelete: (row) => setDeleteTarget(row),
+  }), []);
+
+  const toolbarActions = buildArchivedToolbarActions({
+    fetchArchivedLessons,
+    pagination,
+    exportConfig,
+    navigate,
+    getFilters: () => tableRefsRef.current.getFilters(),
+    getSort: () => tableRefsRef.current.getSort(),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const selectionActions = buildArchivedSelectionActions({
+    exportConfig,
+    onRestore: (row) => setRestoreTarget(row),
+    onRestoreMany: (ids) => setRestoreIds(ids),
+    onDelete: (row) => setDeleteTarget(row),
+    onDeleteMany: (ids) => setDeleteIds(ids),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const columns = useMemo(
+    () => buildDataColumns(attributes, rowActions),
+    [attributes, rowActions]
+  );
+
+  const refresh = () => {
+    setRestoreTarget(null);
+    setRestoreIds(null);
+    setDeleteTarget(null);
+    setDeleteIds(null);
+    tableRefsRef.current.resetSelection?.();
+    fetchArchivedLessons({ page: 1, limit: pagination?.limit ?? 10 });
+  };
+
+  return (
+    <>
+      <DataTable
+        title="Archived Lessons"
+        data={lessons}
+        columns={columns}
+        attributes={attributes}
+        pagination={pagination}
+        setPagination={setPagination}
+        loading={loading}
+        onFetch={handleFetch}
+        onFetchFilterData={(field) => fetchLessonFieldValues(field)}
+        onRefsReady={handleRefsReady}
+        renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+          <FilterSheet
+            open={open}
+            onOpenChange={onOpenChange}
+            column={column}
+            attr={attr}
+            data={data}
+            loading={loading}
+          />
+        )}
+        columnPinning={columnPinning}
+        toolbarActions={toolbarActions}
+        selectionActions={selectionActions}
+        recordLabel="lesson"
+        emptyMessage="No archived lessons."
+      />
+
+      {/* ── Restore ── */}
+      <RestoreDialog
+        open={!!restoreTarget}
+        onOpenChange={(v) => !v && setRestoreTarget(null)}
+        entity={restoreTarget}
+        entityLabel="Lesson"
+        getName={(l) => l?.title}
+        onRestore={(l) => restoreLesson(l?.lesson_id)}
+        loading={loading}
+        onSuccess={refresh}
+      />
+      <RestoreDialog
+        open={!!restoreIds}
+        onOpenChange={(v) => !v && setRestoreIds(null)}
+        ids={restoreIds ?? []}
+        entityLabel="Lesson"
+        onRestore={(ids) => restoreLessons(ids)}
+        loading={loading}
+        onSuccess={refresh}
+      />
+
+      {/* ── Permanent delete ── */}
+      <PermanentDeleteDialog
+        open={!!deleteTarget}
+        onOpenChange={(v) => !v && setDeleteTarget(null)}
+        entity={deleteTarget}
+        entityLabel="Lesson"
+        getName={(l) => l?.title}
+        onDelete={(l) => permanentlyDeleteLesson(l?.lesson_id)}
+        loading={loading}
+        onSuccess={refresh}
+        onImpactCheck={async () => {
+          const impact = await fetchLessonPermanentDeleteImpact(deleteTarget?.lesson_id);
+          const { unitCount } = impact?.data ?? impact ?? {};
+          return [
+            { label: "unit attachment(s) will be removed", count: unitCount ?? 0 },
+          ];
+        }}
+      />
+      <PermanentDeleteDialog
+        open={!!deleteIds}
+        onOpenChange={(v) => !v && setDeleteIds(null)}
+        ids={deleteIds ?? []}
+        entityLabel="Lesson"
+        onDelete={(ids) => permanentlyDeleteLessons(ids)}
+        loading={loading}
+        onSuccess={refresh}
+      />
+    </>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/library/ArchivedUnitLibraryTable.jsx b/apps/web/src/modules/admin/components/library/ArchivedUnitLibraryTable.jsx
new file mode 100644
index 0000000..5ce5ac9
--- /dev/null
+++ b/apps/web/src/modules/admin/components/library/ArchivedUnitLibraryTable.jsx
@@ -0,0 +1,177 @@
+import { useMemo, useRef, useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useLibrary } from "@/contexts/AdminLibraryContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { RestoreDialog } from "@/components/generic/Dialogs/RestoreDialog";
+import { PermanentDeleteDialog } from "@/components/generic/Dialogs/PermanentDeleteDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/library/units/columns.config";
+import { buildArchivedToolbarActions } from "../../config/library/units/toolbar.config";
+import { buildArchivedSelectionActions } from "../../config/library/units/selection.config";
+import { buildArchivedRowActions } from "../../config/library/units/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function ArchivedUnitLibraryTable() {
+  const [restoreTarget, setRestoreTarget] = useState(null);
+  const [restoreIds, setRestoreIds] = useState(null);
+  const [deleteTarget, setDeleteTarget] = useState(null);
+  const [deleteIds, setDeleteIds] = useState(null);
+
+  const tableRefsRef = useRef({
+    getFilters: () => [],
+    getSort: () => [],
+    resetSelection: () => { },
+    setFilters: () => { },
+  });
+
+  const navigate = useNavigate();
+
+  const { user: currentUser } = useAuth();
+
+  const {
+    units, attributes, pagination, setPagination, loading,
+    fetchArchivedUnits, restoreUnit, restoreUnits,
+    permanentlyDeleteUnit, permanentlyDeleteUnits,
+    fetchUnitFieldValues, fetchUnitPermanentDeleteImpact,
+  } = useLibrary();
+
+  const handleRefsReady = (refs) => {
+    tableRefsRef.current = refs;
+  };
+
+  const exportConfig = {
+    allData: units,
+    attributes,
+    filename: `${getTimestamp()}_ArchivedUnitLibrary`,
+    sheetName: "Archived Units",
+    generatedBy: formatGeneratedBy(currentUser),
+  };
+
+  const handleFetch = useCallback((params) => fetchArchivedUnits(params), [fetchArchivedUnits]);
+
+  const rowActions = useMemo(() => buildArchivedRowActions({
+    onRestore: (row) => setRestoreTarget(row),
+    onDelete: (row) => setDeleteTarget(row),
+  }), []);
+
+  const toolbarActions = buildArchivedToolbarActions({
+    fetchArchivedUnits,
+    pagination,
+    exportConfig,
+    navigate,
+    getFilters: () => tableRefsRef.current.getFilters(),
+    getSort: () => tableRefsRef.current.getSort(),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const selectionActions = buildArchivedSelectionActions({
+    exportConfig,
+    onRestore: (row) => setRestoreTarget(row),
+    onRestoreMany: (ids) => setRestoreIds(ids),
+    onDelete: (row) => setDeleteTarget(row),
+    onDeleteMany: (ids) => setDeleteIds(ids),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const columns = useMemo(
+    () => buildDataColumns(attributes, rowActions),
+    [attributes, rowActions]
+  );
+
+  const refresh = () => {
+    setRestoreTarget(null);
+    setRestoreIds(null);
+    setDeleteTarget(null);
+    setDeleteIds(null);
+    tableRefsRef.current.resetSelection?.();
+    fetchArchivedUnits({ page: 1, limit: pagination?.limit ?? 10 });
+  };
+
+  return (
+    <>
+      <DataTable
+        title="Archived Units"
+        data={units}
+        columns={columns}
+        attributes={attributes}
+        pagination={pagination}
+        setPagination={setPagination}
+        loading={loading}
+        onFetch={handleFetch}
+        onFetchFilterData={(field) => fetchUnitFieldValues(field)}
+        onRefsReady={handleRefsReady}
+        renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+          <FilterSheet
+            open={open}
+            onOpenChange={onOpenChange}
+            column={column}
+            attr={attr}
+            data={data}
+            loading={loading}
+          />
+        )}
+        columnPinning={columnPinning}
+        toolbarActions={toolbarActions}
+        selectionActions={selectionActions}
+        recordLabel="unit"
+        emptyMessage="No archived units."
+      />
+
+      {/* ── Restore ── */}
+      <RestoreDialog
+        open={!!restoreTarget}
+        onOpenChange={(v) => !v && setRestoreTarget(null)}
+        entity={restoreTarget}
+        entityLabel="Unit"
+        getName={(u) => u?.title}
+        onRestore={(u) => restoreUnit(u?.unit_id)}
+        loading={loading}
+        onSuccess={refresh}
+      />
+      <RestoreDialog
+        open={!!restoreIds}
+        onOpenChange={(v) => !v && setRestoreIds(null)}
+        ids={restoreIds ?? []}
+        entityLabel="Unit"
+        onRestore={(ids) => restoreUnits(ids)}
+        loading={loading}
+        onSuccess={refresh}
+      />
+
+      {/* ── Permanent delete ── */}
+      <PermanentDeleteDialog
+        open={!!deleteTarget}
+        onOpenChange={(v) => !v && setDeleteTarget(null)}
+        entity={deleteTarget}
+        entityLabel="Unit"
+        getName={(u) => u?.title}
+        onDelete={(u) => permanentlyDeleteUnit(u?.unit_id)}
+        loading={loading}
+        onSuccess={refresh}
+        onImpactCheck={async () => {
+          const impact = await fetchUnitPermanentDeleteImpact(deleteTarget?.unit_id);
+          const { lessonCount, courseCount } = impact?.data ?? impact ?? {};
+          return [
+            { label: "lesson attachment(s) will be removed", count: lessonCount ?? 0 },
+            { label: "course attachment(s) will be removed", count: courseCount ?? 0 },
+          ];
+        }}
+      />
+      <PermanentDeleteDialog
+        open={!!deleteIds}
+        onOpenChange={(v) => !v && setDeleteIds(null)}
+        ids={deleteIds ?? []}
+        entityLabel="Unit"
+        onDelete={(ids) => permanentlyDeleteUnits(ids)}
+        loading={loading}
+        onSuccess={refresh}
+      />
+    </>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/library/AttachCoursesDialog.jsx b/apps/web/src/modules/admin/components/library/AttachCoursesDialog.jsx
new file mode 100644
index 0000000..94e1ed2
--- /dev/null
+++ b/apps/web/src/modules/admin/components/library/AttachCoursesDialog.jsx
@@ -0,0 +1,125 @@
+// AttachCoursesDialog — pick existing Courses and attach this Unit to them.
+// Mirror of AttachUnitsDialog, run in the opposite direction: a unit can be
+// attached to more than one course, so selection is multi-select here too.
+
+import { useEffect, useMemo, useState } from "react";
+import { Search, Link2 } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import {
+  Dialog, DialogContent, DialogDescription, DialogFooter,
+  DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Spinner } from "@/components/ui/spinner";
+import { formatDuration } from "@/utils/timestamp.util";
+
+export default function AttachCoursesDialog({ open, onOpenChange, attachedCourseIds = [], onAttach, loading }) {
+  const { fetchCoursesFlat, loading: coursesLoading } = useCourses();
+  const [courses, setCourses] = useState([]);
+  const [query, setQuery] = useState("");
+  const [selected, setSelected] = useState([]);
+
+  useEffect(() => {
+    if (open) {
+      setSelected([]);
+      setQuery("");
+      fetchCoursesFlat().then((c) => setCourses(c ?? []));
+    }
+  }, [open, fetchCoursesFlat]);
+
+  const attachedSet = useMemo(
+    () => new Set(attachedCourseIds.map(String)),
+    [attachedCourseIds]
+  );
+
+  const candidates = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return (courses ?? [])
+      .filter((c) => !attachedSet.has(String(c.course_id)))
+      .filter((c) => !q || c.title?.toLowerCase().includes(q));
+  }, [courses, attachedSet, query]);
+
+  const toggle = (courseId) =>
+    setSelected((prev) =>
+      prev.includes(courseId) ? prev.filter((id) => id !== courseId) : [...prev, courseId]
+    );
+
+  const handleAttach = async () => {
+    if (!selected.length) return;
+    await onAttach(selected);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Link2 className="h-4 w-4" /> Select Courses
+          </DialogTitle>
+          <DialogDescription>
+            Attach this unit to one or more existing courses without copying it.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="relative">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search courses..."
+            className="pl-8"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+        </div>
+
+        <ScrollArea className="h-64 rounded-md border">
+          {coursesLoading ? (
+            <div className="flex items-center justify-center h-full py-10">
+              <Spinner className="h-5 w-5" />
+            </div>
+          ) : candidates.length === 0 ? (
+            <p className="text-sm text-muted-foreground text-center py-10">
+              {query ? "No courses match your search." : "This unit is already attached to every course."}
+            </p>
+          ) : (
+            <div className="divide-y">
+              {candidates.map((c) => (
+                <label
+                  key={c.course_id}
+                  className="flex items-center gap-3 px-3 py-2.5 hover:bg-muted/60 cursor-pointer"
+                >
+                  <Checkbox
+                    checked={selected.includes(c.course_id)}
+                    onCheckedChange={() => toggle(c.course_id)}
+                  />
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium w-64 truncate" title={c.title}>
+                      {c.title}
+                    </p>
+                    <p className="text-xs text-muted-foreground truncate">
+                      {formatDuration(c.duration_seconds ?? 0)}
+                    </p>
+                  </div>
+                </label>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
+            Cancel
+          </Button>
+          <Button onClick={handleAttach} disabled={loading || !selected.length}>
+            {loading && <Spinner className="h-4 w-4 mr-2" />}
+            Attach {selected.length > 0 ? `(${selected.length})` : ""}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/library/AttachLessonToUnitsDialog.jsx b/apps/web/src/modules/admin/components/library/AttachLessonToUnitsDialog.jsx
new file mode 100644
index 0000000..3e70dbf
--- /dev/null
+++ b/apps/web/src/modules/admin/components/library/AttachLessonToUnitsDialog.jsx
@@ -0,0 +1,124 @@
+// AttachLessonToUnitsDialog — pick existing Units and attach this Lesson to them.
+// Reverse direction of AttachLessonsDialog: unit_lessons has no exclusivity,
+// so a Lesson can freely belong to several Units at once (multi-select).
+
+import { useEffect, useMemo, useState } from "react";
+import { Search, Link2 } from "lucide-react";
+
+import { useLibrary } from "@/contexts/AdminLibraryContext";
+import {
+  Dialog, DialogContent, DialogDescription, DialogFooter,
+  DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Spinner } from "@/components/ui/spinner";
+import { formatDuration } from "@/utils/timestamp.util";
+
+export default function AttachLessonToUnitsDialog({ open, onOpenChange, attachedUnitIds = [], onAttach, loading }) {
+  const { unitsFlat, fetchUnitsFlat, loading: libraryLoading } = useLibrary();
+  const [query, setQuery] = useState("");
+  const [selected, setSelected] = useState([]);
+
+  useEffect(() => {
+    if (open) {
+      setSelected([]);
+      setQuery("");
+      fetchUnitsFlat();
+    }
+  }, [open, fetchUnitsFlat]);
+
+  const attachedSet = useMemo(
+    () => new Set(attachedUnitIds.map(String)),
+    [attachedUnitIds]
+  );
+
+  const candidates = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return (unitsFlat ?? [])
+      .filter((u) => !attachedSet.has(String(u.unit_id)))
+      .filter((u) => !q || u.title?.toLowerCase().includes(q));
+  }, [unitsFlat, attachedSet, query]);
+
+  const toggle = (unitId) =>
+    setSelected((prev) =>
+      prev.includes(unitId) ? prev.filter((id) => id !== unitId) : [...prev, unitId]
+    );
+
+  const handleAttach = async () => {
+    if (!selected.length) return;
+    await onAttach(selected);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Link2 className="h-4 w-4" /> Select Units
+          </DialogTitle>
+          <DialogDescription>
+            Attach this lesson to one or more existing units without copying it.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="relative">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search units..."
+            className="pl-8"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+        </div>
+
+        <ScrollArea className="h-64 rounded-md border">
+          {libraryLoading ? (
+            <div className="flex items-center justify-center h-full py-10">
+              <Spinner className="h-5 w-5" />
+            </div>
+          ) : candidates.length === 0 ? (
+            <p className="text-sm text-muted-foreground text-center py-10">
+              {query ? "No units match your search." : "This lesson is already attached to every unit."}
+            </p>
+          ) : (
+            <div className="divide-y">
+              {candidates.map((u) => (
+                <label
+                  key={u.unit_id}
+                  className="flex items-center gap-3 px-3 py-2.5 hover:bg-muted/60 cursor-pointer"
+                >
+                  <Checkbox
+                    checked={selected.includes(u.unit_id)}
+                    onCheckedChange={() => toggle(u.unit_id)}
+                  />
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium w-64 truncate" title={u.title}>
+                      {u.title}
+                    </p>
+                    <p className="text-xs text-muted-foreground truncate">
+                      {formatDuration(u.duration_seconds ?? 0)}
+                    </p>
+                  </div>
+                </label>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
+            Cancel
+          </Button>
+          <Button onClick={handleAttach} disabled={loading || !selected.length}>
+            {loading && <Spinner className="h-4 w-4 mr-2" />}
+            Attach {selected.length > 0 ? `(${selected.length})` : ""}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/library/AttachLessonsDialog.jsx b/apps/web/src/modules/admin/components/library/AttachLessonsDialog.jsx
new file mode 100644
index 0000000..8f8dbe1
--- /dev/null
+++ b/apps/web/src/modules/admin/components/library/AttachLessonsDialog.jsx
@@ -0,0 +1,206 @@
+// AttachLessonsDialog — pick existing library Lessons and attach them to a Unit.
+// Junction revamp: attaching creates unit_lessons rows; the Lessons stay standalone.
+//
+// Clicking a row previews that lesson's existing Page Builder blocks on the right,
+// independent of the checkbox — so admins can see what they're attaching before
+// committing. Preview fetches go through `api` directly rather than the shared
+// AdminLibraryContext `fetchLesson`, since that setter writes into a single global
+// `lesson` slot that other mounted pages may depend on.
+
+import { useEffect, useMemo, useState } from "react";
+import { Search, Link2, Eye } from "lucide-react";
+
+import { useLibrary } from "@/contexts/AdminLibraryContext";
+import api from "@/utils/api.util";
+import {
+  Dialog, DialogContent, DialogDescription, DialogFooter,
+  DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Spinner } from "@/components/ui/spinner";
+import { formatDuration } from "@/utils/timestamp.util";
+import { PreviewChrome, PreviewContent } from "../courses/LessonsPreview";
+
+export default function AttachLessonsDialog({ open, onOpenChange, attachedLessonIds = [], onAttach, loading }) {
+  const { lessonsFlat, fetchLessonsFlat, loading: libraryLoading } = useLibrary();
+  const [query, setQuery] = useState("");
+  const [selected, setSelected] = useState([]);
+
+  const [previewLessonId, setPreviewLessonId] = useState(null);
+  const [previewLoading, setPreviewLoading] = useState(false);
+  const [previewCache, setPreviewCache] = useState({});
+
+  useEffect(() => {
+    if (open) {
+      setSelected([]);
+      setQuery("");
+      setPreviewLessonId(null);
+      setPreviewCache({});
+      fetchLessonsFlat();
+    }
+  }, [open, fetchLessonsFlat]);
+
+  useEffect(() => {
+    if (!previewLessonId || previewLessonId in previewCache) return;
+    let cancelled = false;
+    setPreviewLoading(true);
+    api.get(`/admin/lessons/${previewLessonId}`)
+      .then((resp) => {
+        if (cancelled) return;
+        setPreviewCache((prev) => ({ ...prev, [previewLessonId]: resp.data?.data?.data ?? null }));
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setPreviewCache((prev) => ({ ...prev, [previewLessonId]: null }));
+      })
+      .finally(() => {
+        if (!cancelled) setPreviewLoading(false);
+      });
+    return () => { cancelled = true; };
+  }, [previewLessonId, previewCache]);
+
+  const previewLesson = previewLessonId ? previewCache[previewLessonId] : null;
+  const previewBlocks = previewLesson?.page?.blocks ?? [];
+
+  const attachedSet = useMemo(
+    () => new Set(attachedLessonIds.map(String)),
+    [attachedLessonIds]
+  );
+
+  const candidates = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return (lessonsFlat ?? [])
+      .filter((l) => !attachedSet.has(String(l.lesson_id)))
+      .filter((l) => !q || l.title?.toLowerCase().includes(q));
+  }, [lessonsFlat, attachedSet, query]);
+
+  const toggle = (lessonId) =>
+    setSelected((prev) =>
+      prev.includes(lessonId) ? prev.filter((id) => id !== lessonId) : [...prev, lessonId]
+    );
+
+  const handleAttach = async () => {
+    if (!selected.length) return;
+    await onAttach(selected);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-3xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Link2 className="h-4 w-4" /> Select Lessons
+          </DialogTitle>
+          <DialogDescription>
+            Lessons live independently in the library — attaching adds them to this unit without copying.
+            Click a lesson to preview its content.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4 sm:grid-cols-[280px_1fr]">
+          <div className="space-y-2 min-w-0">
+            <div className="relative">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search lessons..."
+                className="pl-8"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+              />
+            </div>
+
+            <ScrollArea className="h-80 rounded-md border">
+              {libraryLoading ? (
+                <div className="flex items-center justify-center h-full py-10">
+                  <Spinner className="h-5 w-5" />
+                </div>
+              ) : candidates.length === 0 ? (
+                <p className="text-sm text-muted-foreground text-center py-10 px-3">
+                  {query ? "No lessons match your search." : "Every library lesson is already attached."}
+                </p>
+              ) : (
+                <div className="divide-y">
+                  {candidates.map((l) => (
+                    <div
+                      key={l.lesson_id}
+                      onClick={() => {
+                        toggle(l.lesson_id);
+                        setPreviewLessonId(l.lesson_id);
+                      }}
+                      className={`flex items-center gap-3 px-3 py-2.5 cursor-pointer select-none hover:bg-muted/60 ${
+                        previewLessonId === l.lesson_id ? "bg-muted" : ""
+                      }`}
+                    >
+                      <Checkbox
+                        checked={selected.includes(l.lesson_id)}
+                        onCheckedChange={() => {
+                          toggle(l.lesson_id);
+                          setPreviewLessonId(l.lesson_id);
+                        }}
+                        onClick={(e) => e.stopPropagation()}
+                      />
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium truncate">{l.title}</p>
+                        <p className="text-xs text-muted-foreground truncate">
+                          {formatDuration(l.duration_seconds ?? 0)}
+                        </p>
+                      </div>
+                      {Number(l.unit_count) > 0 ? (
+                        <Badge variant="secondary" className="text-xs shrink-0">
+                          {l.unit_count}
+                        </Badge>
+                      ) : (
+                        <Badge variant="outline" className="text-xs shrink-0 text-muted-foreground">new</Badge>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </ScrollArea>
+          </div>
+
+          <div className="min-w-0">
+            <ScrollArea className="h-80 rounded-md border">
+              <div className="p-3">
+                {!previewLessonId ? (
+                  <div className="flex flex-col items-center justify-center gap-2 h-64 text-sm text-muted-foreground">
+                    <Eye className="h-6 w-6 opacity-20" />
+                    <p>Click a lesson to preview its content.</p>
+                  </div>
+                ) : previewLoading ? (
+                  <div className="flex items-center justify-center h-64">
+                    <Spinner className="h-5 w-5" />
+                  </div>
+                ) : (
+                  <PreviewChrome title={previewLesson?.title}>
+                    <PreviewContent
+                      lesson={previewLesson}
+                      blocks={previewBlocks}
+                      showHeader={false}
+                      empty="No content blocks yet."
+                    />
+                  </PreviewChrome>
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
+            Cancel
+          </Button>
+          <Button onClick={handleAttach} disabled={loading || !selected.length}>
+            {loading && <Spinner className="h-4 w-4 mr-2" />}
+            Select {selected.length > 0 ? `(${selected.length})` : ""}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/library/AttachUnitsDialog.jsx b/apps/web/src/modules/admin/components/library/AttachUnitsDialog.jsx
new file mode 100644
index 0000000..762630a
--- /dev/null
+++ b/apps/web/src/modules/admin/components/library/AttachUnitsDialog.jsx
@@ -0,0 +1,141 @@
+// AttachUnitsDialog — pick existing library Units and attach them to a Course.
+// Junction revamp: attaching creates course_units rows; the Units stay standalone.
+
+import { useEffect, useMemo, useState } from "react";
+import { Search, Link2 } from "lucide-react";
+
+import { useLibrary } from "@/contexts/AdminLibraryContext";
+import {
+  Dialog, DialogContent, DialogDescription, DialogFooter,
+  DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Spinner } from "@/components/ui/spinner";
+import { formatDuration } from "@/utils/timestamp.util";
+
+export default function AttachUnitsDialog({ open, onOpenChange, attachedUnitIds = [], onAttach, loading }) {
+  const { unitsFlat, fetchUnitsFlat, loading: libraryLoading } = useLibrary();
+  const [query, setQuery] = useState("");
+  const [selected, setSelected] = useState([]);
+
+  useEffect(() => {
+    if (open) {
+      setSelected([]);
+      setQuery("");
+      fetchUnitsFlat();
+    }
+  }, [open, fetchUnitsFlat]);
+
+  const attachedSet = useMemo(
+    () => new Set(attachedUnitIds.map(String)),
+    [attachedUnitIds]
+  );
+
+  const candidates = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return (unitsFlat ?? [])
+      .filter((u) => !attachedSet.has(String(u.unit_id)))
+      .filter((u) => !q || u.title?.toLowerCase().includes(q));
+  }, [unitsFlat, attachedSet, query]);
+
+  const toggle = (unitId) => {
+    setSelected((prev) =>
+      prev.includes(unitId) ? prev.filter((id) => id !== unitId) : [...prev, unitId]
+    );
+  };
+
+  const duplicatingCount = useMemo(
+    () => candidates.filter((u) => selected.includes(u.unit_id) && Number(u.course_count) > 0).length,
+    [candidates, selected]
+  );
+
+  const handleAttach = async () => {
+    if (!selected.length) return;
+    await onAttach(selected);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Link2 className="h-4 w-4" /> Select Units
+          </DialogTitle>
+          <DialogDescription>
+            Units live independently in the library — attaching adds them to this course without copying.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="relative">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search units..."
+            className="pl-8"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+        </div>
+
+        <ScrollArea className="h-64 rounded-md border">
+          {libraryLoading ? (
+            <div className="flex items-center justify-center h-full py-10">
+              <Spinner className="h-5 w-5" />
+            </div>
+          ) : candidates.length === 0 ? (
+            <p className="text-sm text-muted-foreground text-center py-10">
+              {query ? "No units match your search." : "Every library unit is already attached."}
+            </p>
+          ) : (
+            <div className="divide-y">
+              {candidates.map((u) => {
+                const blocked = Number(u.course_count) > 0;
+                const isSelected = selected.includes(u.unit_id);
+                return (
+                  <label
+                    key={u.unit_id}
+                    title={blocked ? `Currently in "${u.course_title}" — selecting it will attach a copy to this course.` : undefined}
+                    className="flex items-center gap-3 px-3 py-2.5 hover:bg-muted/60 cursor-pointer"
+                  >
+                    <Checkbox
+                      checked={isSelected}
+                      onCheckedChange={() => toggle(u.unit_id)}
+                    />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium w-64 truncate" title={u.title}>
+                        {u.title}
+                      </p>
+                      <p className="text-xs text-muted-foreground truncate">
+                        {u.lesson_count ?? 0} lesson{(u.lesson_count ?? 0) === 1 ? "" : "s"} · {formatDuration(u.duration_seconds ?? 0)}
+                      </p>
+                    </div>
+                  </label>
+                );
+              })}
+            </div>
+          )}
+        </ScrollArea>
+
+        {duplicatingCount > 0 && (
+          <p className="text-xs text-amber-700 dark:text-amber-400">
+            {duplicatingCount} of the selected unit{duplicatingCount !== 1 ? "s are" : " is"} already in another course
+            — attaching will create {duplicatingCount !== 1 ? "copies" : "a copy"} of {duplicatingCount !== 1 ? "them" : "it"} here.
+          </p>
+        )}
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
+            Cancel
+          </Button>
+          <Button onClick={handleAttach} disabled={loading || !selected.length}>
+            {loading && <Spinner className="h-4 w-4 mr-2" />}
+            {duplicatingCount > 0 ? "Attach & Duplicate" : "Attach"} {selected.length > 0 ? `(${selected.length})` : ""}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/library/LessonLibraryTable.jsx b/apps/web/src/modules/admin/components/library/LessonLibraryTable.jsx
new file mode 100644
index 0000000..259ea90
--- /dev/null
+++ b/apps/web/src/modules/admin/components/library/LessonLibraryTable.jsx
@@ -0,0 +1,157 @@
+import { useMemo, useRef, useState, useCallback, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useLibrary } from "@/contexts/AdminLibraryContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/library/lessons/columns.config";
+import { buildToolbarActions } from "../../config/library/lessons/toolbar.config";
+import { buildSelectionActions } from "../../config/library/lessons/selection.config";
+import { buildRowActions } from "../../config/library/lessons/rowActions.config";
+
+import api from "@/utils/api.util";
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function LessonLibraryTable() {
+  const [archiveTarget, setArchiveTarget] = useState(null);
+  const [archiveIds, setArchiveIds] = useState(null);
+
+  const tableRefsRef = useRef({
+    getFilters: () => [],
+    getSort: () => [],
+    resetSelection: () => { },
+    setFilters: () => { },
+  });
+
+  const navigate = useNavigate();
+
+  const { user: currentUser } = useAuth();
+
+  const {
+    lessons, attributes, pagination, setPagination, loading,
+    fetchLessons, archiveLesson, archiveLessons,
+    fetchLessonFieldValues,
+  } = useLibrary();
+
+  const handleRefsReady = (refs) => {
+    tableRefsRef.current = refs;
+  };
+
+  const [tierCategories, setTierCategories] = useState([]);
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => setTierCategories(data.data ?? []))
+      .catch(() => {});
+  }, []);
+  const tierMap = useMemo(
+    () => Object.fromEntries(tierCategories.map((c) => [c.slug, c])),
+    [tierCategories]
+  );
+
+  const exportConfig = {
+    allData: lessons,
+    attributes,
+    filename: `${getTimestamp()}_LessonLibrary`,
+    sheetName: "Lessons",
+    generatedBy: formatGeneratedBy(currentUser),
+  };
+
+  const handleFetch = useCallback((params) => fetchLessons(params), [fetchLessons]);
+
+  const rowActions = useMemo(() => buildRowActions({
+    onView: (row) => navigate(`/admin/lessons/${row.lesson_id}/view`),
+    onEdit: (row) => navigate(`/admin/lessons/${row.lesson_id}/edit`),
+    onBuildPage: (row) => navigate(`/admin/lessons/${row.lesson_id}/page`),
+    onViewPage: (row) => navigate(`/admin/lessons/${row.lesson_id}/page/view`),
+    onArchive: (row) => setArchiveTarget(row),
+  }), [navigate]);
+
+  const toolbarActions = buildToolbarActions({
+    fetchLessons,
+    pagination,
+    exportConfig,
+    navigate,
+    getFilters: () => tableRefsRef.current.getFilters(),
+    getSort: () => tableRefsRef.current.getSort(),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const selectionActions = buildSelectionActions({
+    exportConfig,
+    onArchive: (row) => setArchiveTarget(row),
+    onArchiveMany: (ids) => setArchiveIds(ids),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const columns = useMemo(
+    () => buildDataColumns(attributes, rowActions, tierMap),
+    [attributes, rowActions, tierMap]
+  );
+
+  const handleArchiveSuccess = () => {
+    setArchiveTarget(null);
+    setArchiveIds(null);
+    tableRefsRef.current.resetSelection?.();
+    fetchLessons({ page: 1, limit: pagination?.limit ?? 10 });
+  };
+
+  return (
+    <>
+      <DataTable
+        title="Lesson Library"
+        data={lessons}
+        columns={columns}
+        attributes={attributes}
+        pagination={pagination}
+        setPagination={setPagination}
+        loading={loading}
+        onFetch={handleFetch}
+        onFetchFilterData={(field) => fetchLessonFieldValues(field)}
+        onRefsReady={handleRefsReady}
+        renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+          <FilterSheet
+            open={open}
+            onOpenChange={onOpenChange}
+            column={column}
+            attr={attr}
+            data={data}
+            loading={loading}
+          />
+        )}
+        columnPinning={columnPinning}
+        toolbarActions={toolbarActions}
+        selectionActions={selectionActions}
+        recordLabel="lesson"
+        emptyMessage="No lessons in the library yet."
+      />
+
+      {/* ── Single archive ── */}
+      <ArchiveDialog
+        open={!!archiveTarget}
+        onOpenChange={(v) => !v && setArchiveTarget(null)}
+        entity={archiveTarget}
+        entityLabel="Lesson"
+        getName={(l) => l?.title}
+        onArchive={(l) => archiveLesson(l?.lesson_id)}
+        loading={loading}
+        onSuccess={handleArchiveSuccess}
+      />
+
+      {/* ── Bulk archive ── */}
+      <ArchiveDialog
+        open={!!archiveIds}
+        onOpenChange={(v) => !v && setArchiveIds(null)}
+        ids={archiveIds ?? []}
+        entityLabel="Lesson"
+        onArchive={(ids) => archiveLessons(ids)}
+        loading={loading}
+        onSuccess={handleArchiveSuccess}
+      />
+    </>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/library/UnitLibraryTable.jsx b/apps/web/src/modules/admin/components/library/UnitLibraryTable.jsx
new file mode 100644
index 0000000..e9a1383
--- /dev/null
+++ b/apps/web/src/modules/admin/components/library/UnitLibraryTable.jsx
@@ -0,0 +1,167 @@
+import { useMemo, useRef, useState, useCallback, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useLibrary } from "@/contexts/AdminLibraryContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/library/units/columns.config";
+import { buildToolbarActions } from "../../config/library/units/toolbar.config";
+import { buildSelectionActions } from "../../config/library/units/selection.config";
+import { buildRowActions } from "../../config/library/units/rowActions.config";
+
+import api from "@/utils/api.util";
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function UnitLibraryTable() {
+  const [archiveTarget, setArchiveTarget] = useState(null);
+  const [archiveIds, setArchiveIds] = useState(null);
+
+  const tableRefsRef = useRef({
+    getFilters: () => [],
+    getSort: () => [],
+    resetSelection: () => { },
+    setFilters: () => { },
+  });
+
+  const navigate = useNavigate();
+
+  const { user: currentUser } = useAuth();
+
+  const {
+    units, attributes, pagination, setPagination, loading,
+    fetchUnits, archiveUnit, archiveUnits,
+    fetchUnitFieldValues, fetchUnitArchiveImpact,
+  } = useLibrary();
+
+  const handleRefsReady = (refs) => {
+    tableRefsRef.current = refs;
+  };
+
+  const [tierCategories, setTierCategories] = useState([]);
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => setTierCategories(data.data ?? []))
+      .catch(() => {});
+  }, []);
+  const tierMap = useMemo(
+    () => Object.fromEntries(tierCategories.map((c) => [c.slug, c])),
+    [tierCategories]
+  );
+
+  const exportConfig = {
+    allData: units,
+    attributes,
+    filename: `${getTimestamp()}_UnitLibrary`,
+    sheetName: "Units",
+    generatedBy: formatGeneratedBy(currentUser),
+  };
+
+  const handleFetch = useCallback((params) => fetchUnits(params), [fetchUnits]);
+
+  const rowActions = useMemo(() => buildRowActions({
+    onView: (row) => navigate(`/admin/units/${row.unit_id}/view`),
+    onEdit: (row) => navigate(`/admin/units/${row.unit_id}/edit`),
+    onManageLessons: (row) => navigate(`/admin/units/${row.unit_id}/view`),
+    onQuiz: (row) => navigate(`/admin/units/${row.unit_id}/quiz/edit`),
+    onViewQuiz: (row) => navigate(`/admin/units/${row.unit_id}/quiz/view`),
+    onArchive: (row) => setArchiveTarget(row),
+  }), [navigate]);
+
+  const toolbarActions = buildToolbarActions({
+    fetchUnits,
+    pagination,
+    exportConfig,
+    navigate,
+    getFilters: () => tableRefsRef.current.getFilters(),
+    getSort: () => tableRefsRef.current.getSort(),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const selectionActions = buildSelectionActions({
+    exportConfig,
+    onArchive: (row) => setArchiveTarget(row),
+    onArchiveMany: (ids) => setArchiveIds(ids),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const columns = useMemo(
+    () => buildDataColumns(attributes, rowActions, tierMap),
+    [attributes, rowActions, tierMap]
+  );
+
+  const handleArchiveSuccess = () => {
+    setArchiveTarget(null);
+    setArchiveIds(null);
+    tableRefsRef.current.resetSelection?.();
+    fetchUnits({ page: 1, limit: pagination?.limit ?? 10 });
+  };
+
+  return (
+    <>
+      <DataTable
+        title="Unit Library"
+        data={units}
+        columns={columns}
+        attributes={attributes}
+        pagination={pagination}
+        setPagination={setPagination}
+        loading={loading}
+        onFetch={handleFetch}
+        onFetchFilterData={(field) => fetchUnitFieldValues(field)}
+        onRefsReady={handleRefsReady}
+        renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+          <FilterSheet
+            open={open}
+            onOpenChange={onOpenChange}
+            column={column}
+            attr={attr}
+            data={data}
+            loading={loading}
+          />
+        )}
+        columnPinning={columnPinning}
+        toolbarActions={toolbarActions}
+        selectionActions={selectionActions}
+        recordLabel="unit"
+        emptyMessage="No units in the library yet."
+      />
+
+      {/* ── Single archive ── */}
+      <ArchiveDialog
+        open={!!archiveTarget}
+        onOpenChange={(v) => !v && setArchiveTarget(null)}
+        entity={archiveTarget}
+        entityLabel="Unit"
+        getName={(u) => u?.title}
+        onArchive={(u) => archiveUnit(u?.unit_id)}
+        loading={loading}
+        onSuccess={handleArchiveSuccess}
+        onImpactCheck={async () => {
+          const impact = await fetchUnitArchiveImpact(archiveTarget?.unit_id);
+          const { completionCount, progressCount, courseCount } = impact?.data ?? impact ?? {};
+          return [
+            { label: "student(s) have completed this unit", count: completionCount ?? 0 },
+            { label: "student(s) have reading progress in this unit", count: progressCount ?? 0 },
+            { label: "course(s) currently include this unit", count: courseCount ?? 0 },
+          ];
+        }}
+      />
+
+      {/* ── Bulk archive ── */}
+      <ArchiveDialog
+        open={!!archiveIds}
+        onOpenChange={(v) => !v && setArchiveIds(null)}
+        ids={archiveIds ?? []}
+        entityLabel="Unit"
+        onArchive={(ids) => archiveUnits(ids)}
+        loading={loading}
+        onSuccess={handleArchiveSuccess}
+      />
+    </>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/notifications/ArchivedNotificationBroadcastsTable.jsx b/apps/web/src/modules/admin/components/notifications/ArchivedNotificationBroadcastsTable.jsx
new file mode 100644
index 0000000..06b441a
--- /dev/null
+++ b/apps/web/src/modules/admin/components/notifications/ArchivedNotificationBroadcastsTable.jsx
@@ -0,0 +1,179 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useNotificationBroadcasts } from "@/contexts/AdminNotificationBroadcastContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { RestoreDialog } from "@/components/generic/Dialogs/RestoreDialog";
+import { PermanentDeleteDialog } from "@/components/generic/Dialogs/PermanentDeleteDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/notifications/archive/columns.config";
+import { buildToolbarActions }             from "../../config/notifications/archive/toolbar.config";
+import { buildRowActions }                 from "../../config/notifications/archive/rowActions.config";
+import { buildSelectionActions }           from "../../config/notifications/archive/selection.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function ArchivedNotificationBroadcastsTable() {
+    const [restoreTarget, setRestoreTarget] = useState(null);
+    const [restoreIds,    setRestoreIds]    = useState(null);
+    const [deleteTarget,  setDeleteTarget]  = useState(null);
+    const [deleteIds,     setDeleteIds]     = useState(null);
+
+    const tableRefsRef = useRef({
+        getFilters:     () => [],
+        getSort:        () => [],
+        resetSelection: () => {},
+        setFilters:     () => {},
+    });
+
+    const navigate = useNavigate();
+
+    const { user: currentUser } = useAuth();
+
+    const {
+        broadcasts, attributes, pagination, setPagination, loading,
+        fetchArchivedBroadcasts, restoreBroadcast, restoreBroadcasts,
+        permanentlyDeleteBroadcast, permanentlyDeleteBroadcasts,
+    } = useNotificationBroadcasts();
+
+    useEffect(() => {
+        fetchArchivedBroadcasts({ page: 1, limit: pagination?.limit ?? 10 });
+    }, []);
+
+    const handleRefsReady = (refs) => {
+        tableRefsRef.current = refs;
+    };
+
+    const exportConfig = {
+        allData:   broadcasts,
+        attributes,
+        filename:  `${getTimestamp()}_ArchivedNotificationBroadcasts`,
+        sheetName: "Archived Alerts",
+        generatedBy: formatGeneratedBy(currentUser),
+    };
+
+    const rowActions = buildRowActions({
+        onRestore: (row) => setRestoreTarget(row),
+        onDelete:  (row) => setDeleteTarget(row),
+    });
+
+    const toolbarActions = buildToolbarActions({
+        fetchBroadcasts: fetchArchivedBroadcasts,
+        pagination,
+        exportConfig,
+        navigate,
+        getFilters:       () => tableRefsRef.current.getFilters(),
+        getSort:          () => tableRefsRef.current.getSort(),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const selectionActions = buildSelectionActions({
+        exportConfig,
+        onSingleRestore: (row) => setRestoreTarget(row),
+        onBulkRestore:   (ids) => setRestoreIds(ids),
+        onSingleDelete:  (row) => setDeleteTarget(row),
+        onBulkDelete:    (ids) => setDeleteIds(ids),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const columns = useMemo(
+        () => buildDataColumns(attributes, rowActions),
+        [attributes]
+    );
+
+    const handleRestoreSuccess = () => {
+        setRestoreTarget(null);
+        setRestoreIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedBroadcasts({ page: 1, limit: pagination?.limit ?? 10 });
+    };
+
+    const handleDeleteSuccess = () => {
+        setDeleteTarget(null);
+        setDeleteIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedBroadcasts({ page: 1, limit: pagination?.limit ?? 10 });
+    };
+
+    return (
+        <>
+            <DataTable
+                title="Archived Alerts"
+                data={broadcasts}
+                columns={columns}
+                attributes={attributes}
+                pagination={pagination}
+                setPagination={setPagination}
+                loading={loading}
+                onFetch={fetchArchivedBroadcasts}
+                onFetchFilterData={() => Promise.resolve([])}
+                onRefsReady={handleRefsReady}
+                renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+                    <FilterSheet
+                        open={open}
+                        onOpenChange={onOpenChange}
+                        column={column}
+                        attr={attr}
+                        data={data}
+                        loading={loading}
+                    />
+                )}
+                columnPinning={columnPinning}
+                toolbarActions={toolbarActions}
+                selectionActions={selectionActions}
+                recordLabel="archived alert"
+                emptyMessage="No archived alerts found."
+            />
+
+            {/* ── Single restore ── */}
+            <RestoreDialog
+                open={!!restoreTarget}
+                onOpenChange={(v) => !v && setRestoreTarget(null)}
+                entity={restoreTarget}
+                entityLabel="Alert"
+                getName={(b) => b?.title ?? "this alert"}
+                onRestore={(b) => restoreBroadcast(b?.broadcast_id)}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+
+            {/* ── Bulk restore ── */}
+            <RestoreDialog
+                open={!!restoreIds}
+                onOpenChange={(v) => !v && setRestoreIds(null)}
+                ids={restoreIds ?? []}
+                entityLabel="Alert"
+                onRestore={(ids) => restoreBroadcasts(ids)}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+
+            {/* ── Single permanent delete ── */}
+            <PermanentDeleteDialog
+                open={!!deleteTarget}
+                onOpenChange={(v) => !v && setDeleteTarget(null)}
+                entity={deleteTarget}
+                entityLabel="Alert"
+                getName={(b) => b?.title ?? "this alert"}
+                onDelete={(b) => permanentlyDeleteBroadcast(b?.broadcast_id)}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+
+            {/* ── Bulk permanent delete ── */}
+            <PermanentDeleteDialog
+                open={!!deleteIds}
+                onOpenChange={(v) => !v && setDeleteIds(null)}
+                ids={deleteIds ?? []}
+                entityLabel="Alert"
+                onDelete={(ids) => permanentlyDeleteBroadcasts(ids)}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+        </>
+    );
+}
diff --git a/apps/web/src/modules/admin/components/task/ArchiveTaskListTable.jsx b/apps/web/src/modules/admin/components/task/ArchiveTaskListTable.jsx
new file mode 100644
index 0000000..636a9eb
--- /dev/null
+++ b/apps/web/src/modules/admin/components/task/ArchiveTaskListTable.jsx
@@ -0,0 +1,187 @@
+import { useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useAdminTask } from "@/contexts/AdminTaskContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { RestoreDialog } from "@/components/generic/Dialogs/RestoreDialog";
+import { PermanentDeleteDialog } from "@/components/generic/Dialogs/PermanentDeleteDialog";
+
+import { buildDataColumns, columnPinning } from "@/modules/admin/config/task_list/archive/columns.config";
+import { buildToolbarActions } from "@/modules/admin/config/task_list/archive/toolbar.config";
+import { buildSelectionActions } from "@/modules/admin/config/task_list/archive/selection.config";
+import { buildRowActions } from "@/modules/admin/config/task_list/archive/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function ArchiveTaskListTable() {
+    const navigate = useNavigate();
+
+    const { user: currentUser } = useAuth();
+
+    const {
+        taskLists, attributes, pagination, loading,
+        fetchArchivedTaskLists,
+        restoreTaskList,
+        bulkRestoreTaskLists,
+        permanentlyDeleteTaskList,
+        bulkPermanentlyDeleteTaskLists,
+        fetchTaskListPermanentDeleteImpact,
+    } = useAdminTask();
+
+    const [restoreTarget, setRestoreTarget] = useState(null);
+    const [restoreIds, setRestoreIds] = useState(null);
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const [deleteIds, setDeleteIds] = useState(null);
+
+    const tableRefsRef = useRef({
+        getFilters: () => [],
+        getSort: () => [],
+        resetSelection: () => { },
+        tableInstance: null,
+    });
+
+    const handleRefsReady = (refs) => {
+        tableRefsRef.current = refs;
+    };
+
+    const handleSuccess = () => {
+        setRestoreTarget(null);
+        setRestoreIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedTaskLists({
+            page: 1,
+            limit: pagination?.limit ?? 10,
+            filters: tableRefsRef.current.getFilters(),
+            sort: tableRefsRef.current.getSort(),
+        });
+    };
+
+    const handleDeleteSuccess = () => {
+        setDeleteTarget(null);
+        setDeleteIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedTaskLists({
+            page: 1,
+            limit: pagination?.limit ?? 10,
+            filters: tableRefsRef.current.getFilters(),
+            sort: tableRefsRef.current.getSort(),
+        });
+    };
+
+    const exportConfig = {
+        allData: taskLists,
+        attributes,
+        filename: `${getTimestamp()}_ArchivedTaskLists`,
+        sheetName: "Archived Task Lists",
+        generatedBy: formatGeneratedBy(currentUser),
+    };
+
+    const rowActions = buildRowActions({
+        navigate,
+        onRestore: (row) => setRestoreTarget(row),
+        onDelete: (row) => setDeleteTarget(row),
+    });
+
+    const toolbarActions = buildToolbarActions({
+        getSort: () => tableRefsRef.current.getSort(),
+        fetchArchivedTaskLists,
+        pagination,
+        exportConfig,
+        getFilters: () => tableRefsRef.current.getFilters(),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const selectionActions = buildSelectionActions({
+        exportConfig,
+        onBulkRestore: (ids) => setRestoreIds(ids),
+        onBulkDelete: (ids) => setDeleteIds(ids),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const columns = useMemo(
+        () => buildDataColumns(attributes, rowActions),
+        [attributes, rowActions]
+    );
+
+    return (
+        <>
+            <DataTable
+                title="Archived Task Lists"
+                data={taskLists}
+                columns={columns}
+                attributes={attributes}
+                pagination={pagination}
+                loading={loading}
+                onFetch={fetchArchivedTaskLists}
+                onFetchFilterData={() => []}
+                onRefsReady={handleRefsReady}
+                renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+                    <FilterSheet
+                        open={open}
+                        onOpenChange={onOpenChange}
+                        column={column}
+                        attr={attr}
+                        data={data}
+                        loading={loading}
+                    />
+                )}
+                columnPinning={columnPinning}
+                toolbarActions={toolbarActions}
+                selectionActions={selectionActions}
+                recordLabel="archived task list"
+                emptyMessage="No archived task lists found."
+            />
+
+            {/* Single restore */}
+            <RestoreDialog
+                open={!!restoreTarget}
+                onOpenChange={(v) => !v && setRestoreTarget(null)}
+                entity={restoreTarget}
+                entityLabel="Task List"
+                getName={(r) => r?.name}
+                onRestore={(r) => restoreTaskList(r?.task_list_id)}
+                loading={loading}
+                onSuccess={handleSuccess}
+            />
+
+            {/* Bulk restore */}
+            <RestoreDialog
+                open={!!restoreIds}
+                onOpenChange={(v) => !v && setRestoreIds(null)}
+                ids={restoreIds ?? []}
+                entityLabel="Task List"
+                onRestore={({ ids }) => bulkRestoreTaskLists(ids)}
+                loading={loading}
+                onSuccess={handleSuccess}
+            />
+
+            {/* Single permanent delete */}
+            <PermanentDeleteDialog
+                open={!!deleteTarget}
+                onOpenChange={(v) => !v && setDeleteTarget(null)}
+                entity={deleteTarget}
+                entityLabel="Task List"
+                getName={(r) => r?.name}
+                onDelete={(r) => permanentlyDeleteTaskList(r?.task_list_id)}
+                onImpactCheck={() => fetchTaskListPermanentDeleteImpact(deleteTarget?.task_list_id)}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+
+            {/* Bulk permanent delete */}
+            <PermanentDeleteDialog
+                open={!!deleteIds}
+                onOpenChange={(v) => !v && setDeleteIds(null)}
+                ids={deleteIds ?? []}
+                entityLabel="Task List"
+                onDelete={({ ids }) => bulkPermanentlyDeleteTaskLists(ids)}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+        </>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/components/task/ArchiveTaskTable.jsx b/apps/web/src/modules/admin/components/task/ArchiveTaskTable.jsx
new file mode 100644
index 0000000..b6af938
--- /dev/null
+++ b/apps/web/src/modules/admin/components/task/ArchiveTaskTable.jsx
@@ -0,0 +1,299 @@
+import { useMemo, useRef, useState, useCallback, useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+
+import { useAdminTask } from "@/contexts/AdminTaskContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { RestoreDialog } from "@/components/generic/Dialogs/RestoreDialog";
+import { PermanentDeleteDialog } from "@/components/generic/Dialogs/PermanentDeleteDialog";
+
+import { buildDataColumns, columnPinning } from "@/modules/admin/config/task_list/task/archive/columns.config";
+import { buildToolbarActions } from "@/modules/admin/config/task_list/task/archive/toolbar.config";
+import { buildSelectionActions } from "@/modules/admin/config/task_list/task/archive/selection.config";
+import { buildRowActions } from "@/modules/admin/config/task_list/task/archive/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { formatDate } from "@/utils/table.util";
+import { ListTodo, Users } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Badge } from "@/components/ui/badge";
+
+export default function ArchivedTaskTable() {
+    const navigate = useNavigate();
+    const { taskListId } = useParams();
+
+    const { user: currentUser } = useAuth();
+
+    const {
+        taskList, tasks, attributes, pagination, loading,
+        fetchTaskList, fetchArchivedTasks, fetchTaskFieldValues,
+        restoreTask,
+        bulkRestoreTasks,
+        permanentlyDeleteTask,
+        bulkPermanentlyDeleteTasks,
+    } = useAdminTask();
+
+    const [restoreTarget, setRestoreTarget] = useState(null);
+    const [restoreIds, setRestoreIds] = useState(null);
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const [deleteIds, setDeleteIds] = useState(null);
+    const [showGroupsDialog, setShowGroupsDialog] = useState(false);
+
+    const tableRefsRef = useRef({
+        getFilters: () => [],
+        getSort: () => [],
+        resetSelection: () => { },
+        tableInstance: null,
+    });
+
+    useEffect(() => {
+        fetchTaskList(taskListId);
+        fetchArchivedTasks(taskListId, { page: 1, limit: 10 });
+    }, [taskListId]);
+
+    const handleRefsReady = (refs) => {
+        tableRefsRef.current = refs;
+    };
+
+    // ── Stable fetch callback — won't change on every render ─────────────────
+    const handleFetch = useCallback(
+        (params) => fetchArchivedTasks(taskListId, params),
+        [taskListId]
+    );
+
+    const handleSuccess = () => {
+        setRestoreTarget(null);
+        setRestoreIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedTasks(taskListId, {
+            page: 1,
+            limit: pagination?.limit ?? 10,
+            filters: tableRefsRef.current.getFilters(),
+            sort: tableRefsRef.current.getSort(),
+        });
+    };
+
+    const handleDeleteSuccess = () => {
+        setDeleteTarget(null);
+        setDeleteIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedTasks(taskListId, {
+            page: 1,
+            limit: pagination?.limit ?? 10,
+            filters: tableRefsRef.current.getFilters(),
+            sort: tableRefsRef.current.getSort(),
+        });
+    };
+
+    const exportConfig = useMemo(() => ({
+        allData: tasks,
+        attributes,
+        filename: `${getTimestamp()}_ArchivedTasks`,
+        sheetName: "Archived Tasks",
+        generatedBy: formatGeneratedBy(currentUser),
+    }), [tasks, attributes, currentUser]);
+
+    const rowActions = useMemo(() => buildRowActions({
+        navigate,
+        onRestore: (row) => setRestoreTarget(row),
+        onDelete: (row) => setDeleteTarget(row),
+    }), [navigate]);
+
+    const toolbarActions = useMemo(() => buildToolbarActions({
+        fetchArchivedTasks: handleFetch, taskListId,
+        navigate, pagination, exportConfig,
+        getFilters: () => tableRefsRef.current.getFilters(),
+        getSort: () => tableRefsRef.current.getSort(),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    }), [taskListId, navigate, handleFetch, pagination, exportConfig]);
+
+    const selectionActions = useMemo(() => buildSelectionActions({
+        exportConfig,
+        onBulkRestore: (ids) => setRestoreIds(ids),  // ← was onRestoreMany
+        onBulkDelete: (ids) => setDeleteIds(ids),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    }), [exportConfig]);
+
+    const columns = useMemo(
+        () => buildDataColumns(attributes, rowActions),
+        [attributes, rowActions]
+    );
+
+    const assignedGroups = taskList?.groups ?? [];
+    const totalTasks = pagination?.totalRecords ?? 0;
+    const hasOverflow = assignedGroups.length > 1;
+    const formattedCreated = taskList?.createdAt ? formatDate(taskList.createdAt) : '—';
+    const formattedUpdated = taskList?.updatedAt ? formatDate(taskList.updatedAt) : '—';
+
+    return (
+        <>
+
+            {/* ── Detail card ───────────────────────────────────────────────── */}
+            <div className="bg-card border rounded-xl p-5 flex flex-col gap-4 w-full mb-4">
+                <div className="flex items-start justify-between gap-4">
+                    <div className="flex flex-col gap-1 min-w-0">
+                        {taskList
+                            ? <h1 className="text-lg font-medium leading-none">{taskList.name}</h1>
+                            : <Skeleton className="h-5 w-48" />
+                        }
+                        {taskList
+                            ? <p className="text-sm text-muted-foreground mt-1">{taskList.description ?? '—'}</p>
+                            : <Skeleton className="h-4 w-72 mt-1" />
+                        }
+                    </div>
+                </div>
+
+                <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                    <div className="bg-muted rounded-lg px-3 py-2">
+                        <span className="block text-[11px] uppercase tracking-wide text-muted-foreground mb-1">Tasks</span>
+                        <span className="text-sm font-medium flex items-center gap-1.5">
+                            <ListTodo className="size-3.5 text-muted-foreground" />
+                            {taskList ? totalTasks : <Skeleton className="h-4 w-8 inline-block" />}
+                        </span>
+                    </div>
+
+                    <div className="bg-muted rounded-lg px-3 py-2">
+                        <span className="block text-[11px] uppercase tracking-wide text-muted-foreground mb-1">Groups</span>
+                        {taskList ? (
+                            taskList.group_count > 0 ? (
+                                <div className="font-medium flex items-center gap-2">
+                                    <Users className="size-3.5 text-muted-foreground shrink-0" />
+                                    <span className="text-sm font-medium">{taskList.group_count}</span>
+                                    {hasOverflow && (
+                                        <button
+                                            type="button"
+                                            onClick={() => setShowGroupsDialog(true)}
+                                            className="text-xs text-primary hover:underline underline-offset-2 shrink-0"
+                                        >
+                                            +{taskList.group_count - 1} more
+                                        </button>
+                                    )}
+                                </div>
+                            ) : <span className="text-sm font-medium">0</span>
+                        ) : <Skeleton className="h-4 w-8 inline-block" />}
+                    </div>
+
+                    <div className="bg-muted rounded-lg px-3 py-2">
+                        <span className="block text-[11px] uppercase tracking-wide text-muted-foreground mb-1">Created</span>
+                        <span className="text-sm font-medium">
+                            {taskList ? formattedCreated : <Skeleton className="h-4 w-20 inline-block" />}
+                        </span>
+                    </div>
+
+                    <div className="bg-muted rounded-lg px-3 py-2">
+                        <span className="block text-[11px] uppercase tracking-wide text-muted-foreground mb-1">Last Updated</span>
+                        <span className="text-sm font-medium">
+                            {taskList ? formattedUpdated : <Skeleton className="h-4 w-20 inline-block" />}
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+
+            <DataTable
+                title="Archived Tasks"
+                data={tasks}
+                columns={columns}
+                attributes={attributes}
+                pagination={pagination}
+                loading={loading}
+                onFetch={handleFetch}
+                onFetchFilterData={(field) => fetchTaskFieldValues(taskListId, field)}
+                onRefsReady={handleRefsReady}
+                renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+                    <FilterSheet
+                        open={open}
+                        onOpenChange={onOpenChange}
+                        column={column}
+                        attr={attr}
+                        data={data}
+                        loading={loading}
+                    />
+                )}
+                columnPinning={columnPinning}
+                toolbarActions={toolbarActions}
+                selectionActions={selectionActions}
+                recordLabel="archived task"
+                emptyMessage="No archived tasks found."
+            />
+
+            {/* Single restore */}
+            <RestoreDialog
+                open={!!restoreTarget}
+                onOpenChange={(v) => !v && setRestoreTarget(null)}
+                entity={restoreTarget}
+                entityLabel="Task"
+                getName={(r) => r?.name}
+                onRestore={(r) => restoreTask(taskListId, r?.task_id)}
+                loading={loading}
+                onSuccess={handleSuccess}
+            />
+
+            {/* Bulk restore */}
+            <RestoreDialog
+                open={!!restoreIds}
+                onOpenChange={(v) => !v && setRestoreIds(null)}
+                ids={restoreIds ?? []}
+                entityLabel="Task"
+                onRestore={({ ids }) => bulkRestoreTasks(taskListId, ids)}
+                loading={loading}
+                onSuccess={handleSuccess}
+            />
+
+            {/* Single permanent delete */}
+            <PermanentDeleteDialog
+                open={!!deleteTarget}
+                onOpenChange={(v) => !v && setDeleteTarget(null)}
+                entity={deleteTarget}
+                entityLabel="Task"
+                getName={(r) => r?.name}
+                onDelete={(r) => permanentlyDeleteTask(taskListId, r?.task_id)}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+
+            {/* Bulk permanent delete */}
+            <PermanentDeleteDialog
+                open={!!deleteIds}
+                onOpenChange={(v) => !v && setDeleteIds(null)}
+                ids={deleteIds ?? []}
+                entityLabel="Task"
+                onDelete={({ ids }) => bulkPermanentlyDeleteTasks(taskListId, ids)}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+
+            <Dialog open={showGroupsDialog} onOpenChange={setShowGroupsDialog}>
+                <DialogContent className="max-w-sm">
+                    <DialogHeader>
+                        <DialogTitle className="flex items-center gap-2">
+                            <Users className="h-4 w-4 text-muted-foreground" />
+                            Assigned Groups
+                            <Badge variant="secondary" className="ml-1 text-xs">
+                                {assignedGroups.length}
+                            </Badge>
+                        </DialogTitle>
+                    </DialogHeader>
+                    <div className="flex flex-wrap gap-2 pt-1">
+                        {assignedGroups.map((g) => (
+                            <Badge key={g.group_id} variant="secondary" className="gap-1.5 text-xs py-1 px-2">
+                                <Users className="h-3 w-3" />
+                                {g.name}
+                            </Badge>
+                        ))}
+                    </div>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/components/task/TaskListTable.jsx b/apps/web/src/modules/admin/components/task/TaskListTable.jsx
new file mode 100644
index 0000000..4a9a402
--- /dev/null
+++ b/apps/web/src/modules/admin/components/task/TaskListTable.jsx
@@ -0,0 +1,197 @@
+import { useMemo, useRef, useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useAdminTask } from "@/contexts/AdminTaskContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
+import { RestoreDialog } from "@/components/generic/Dialogs/RestoreDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/task_list/columns.config";
+import { buildToolbarActions } from "../../config/task_list/toolbar.config";
+import { buildSelectionActions } from "../../config/task_list/selection.config";
+import { buildRowActions } from "../../config/task_list/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function TaskListTable() {
+    const navigate = useNavigate();
+
+    const { user: currentUser } = useAuth();
+
+    const {
+        taskLists, attributes, pagination, loading,
+        fetchTaskLists, fetchArchivedTaskLists, fetchTaskListFieldValues,
+        archiveTaskList, restoreTaskList,
+        bulkArchiveTaskLists, bulkRestoreTaskLists,
+    } = useAdminTask();
+
+    const [showArchived, setShowArchived] = useState(false);
+    const [archiveTarget, setArchiveTarget] = useState(null);
+    const [restoreTarget, setRestoreTarget] = useState(null);
+    const [archiveIds, setArchiveIds] = useState(null);
+    const [restoreIds, setRestoreIds] = useState(null);
+
+    const tableRefsRef = useRef({
+        getFilters: () => [],
+        getSort: () => [],
+        resetSelection: () => { },
+        tableInstance: null,
+    });
+
+    const handleRefsReady = (refs) => {
+        tableRefsRef.current = refs;
+    };
+
+    // ── Toggle archived view ──────────────────────────────────────────────────
+    const handleToggleArchived = useCallback(() => {
+        const next = !showArchived;
+        setShowArchived(next);
+        fetchTaskLists({
+            page: 1,
+            limit: pagination?.limit ?? 10,
+            filters: tableRefsRef.current.getFilters(),
+            sort: tableRefsRef.current.getSort(),
+            archived: next,
+        });
+    }, [showArchived, pagination, fetchTaskLists, fetchArchivedTaskLists]);
+
+    // ── Refetch helper ────────────────────────────────────────────────────────
+    const handleSuccess = () => {
+        setArchiveTarget(null);
+        setRestoreTarget(null);
+        setArchiveIds(null);
+        setRestoreIds(null);
+        tableRefsRef.current.resetSelection?.();
+        const fetcher = showArchived ? fetchArchivedTaskLists : fetchTaskLists;
+        fetcher({
+            page: 1,
+            limit: pagination?.limit ?? 10,
+            filters: tableRefsRef.current.getFilters(),
+            sort: tableRefsRef.current.getSort(),
+        });
+    };
+
+    // ── Export config ─────────────────────────────────────────────────────────
+    const exportConfig = useMemo(() => ({
+        allData: taskLists,
+        attributes,
+        filename: `${getTimestamp()}_TaskLists`,
+        sheetName: "Task Lists",
+        generatedBy: formatGeneratedBy(currentUser),
+    }), [taskLists, attributes, currentUser]);
+
+    // ── Row actions ───────────────────────────────────────────────────────────
+    const rowActions = buildRowActions({
+        navigate,
+        onArchive: (row) => setArchiveTarget(row),
+        onRestore: (row) => setRestoreTarget(row),
+        showArchived,
+    });
+
+    // ── Toolbar ───────────────────────────────────────────────────────────────
+    const toolbarActions = buildToolbarActions({
+        fetchTaskLists, fetchArchivedTaskLists, pagination, navigate,
+        exportConfig,
+        showArchived,
+        onToggleArchived: handleToggleArchived,
+        getFilters: () => tableRefsRef.current.getFilters(),
+        getSort: () => tableRefsRef.current.getSort(),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    // ── Selection ─────────────────────────────────────────────────────────────
+    const selectionActions = buildSelectionActions({
+        exportConfig,
+        showArchived,
+        onBulkArchive: (ids) => setArchiveIds(ids),
+        onBulkRestore: (ids) => setRestoreIds(ids),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    // ── Columns ───────────────────────────────────────────────────────────────
+    const columns = useMemo(
+        () => buildDataColumns(attributes, rowActions),
+        [attributes, rowActions]
+    );
+
+    return (
+        <>
+            <DataTable
+                title="Task Lists"
+                data={taskLists}
+                columns={columns}
+                attributes={attributes}
+                pagination={pagination}
+                loading={loading}
+                onFetch={fetchTaskLists}
+                onFetchFilterData={fetchTaskListFieldValues}
+                onRefsReady={handleRefsReady}
+                renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+                    <FilterSheet
+                        open={open}
+                        onOpenChange={onOpenChange}
+                        column={column}
+                        attr={attr}
+                        data={data}
+                        loading={loading}
+                    />
+                )}
+                columnPinning={columnPinning}
+                toolbarActions={toolbarActions}
+                selectionActions={selectionActions}
+                recordLabel="task list"
+                emptyMessage="No task lists found."
+            />
+
+            {/* Single archive */}
+            <ArchiveDialog
+                open={!!archiveTarget}
+                onOpenChange={(v) => !v && setArchiveTarget(null)}
+                entity={archiveTarget}
+                entityLabel="Task List"
+                getName={(r) => r?.name}
+                onArchive={(entity) => archiveTaskList(entity?.task_list_id)}
+                loading={loading}
+                onSuccess={handleSuccess}
+            />
+
+            {/* Single restore */}
+            <RestoreDialog
+                open={!!restoreTarget}
+                onOpenChange={(v) => !v && setRestoreTarget(null)}
+                entity={restoreTarget}
+                entityLabel="Task List"
+                getName={(r) => r?.name}
+                onRestore={(entity) => restoreTaskList(entity?.task_list_id)}
+                loading={loading}
+                onSuccess={handleSuccess}
+            />
+
+            {/* Bulk archive */}
+            <ArchiveDialog
+                open={!!archiveIds}
+                onOpenChange={(v) => !v && setArchiveIds(null)}
+                ids={archiveIds ?? []}
+                entityLabel="Task List"
+                onArchive={({ ids }) => bulkArchiveTaskLists(ids)}
+                loading={loading}
+                onSuccess={handleSuccess}
+            />
+
+            {/* Bulk restore */}
+            <RestoreDialog
+                open={!!restoreIds}
+                onOpenChange={(v) => !v && setRestoreIds(null)}
+                ids={restoreIds ?? []}
+                entityLabel="Task List"
+                onRestore={({ ids }) => bulkRestoreTaskLists(ids)}
+                loading={loading}
+                onSuccess={handleSuccess}
+            />
+        </>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/components/task_list/TasksTable.jsx b/apps/web/src/modules/admin/components/task_list/TasksTable.jsx
new file mode 100644
index 0000000..f3d7253
--- /dev/null
+++ b/apps/web/src/modules/admin/components/task_list/TasksTable.jsx
@@ -0,0 +1,234 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useAdminTask } from '@/contexts/AdminTaskContext';
+import { useAuth } from '@/contexts/AuthContext';
+
+import DataTable from '@/components/generic/Table/DataTable';
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { ArchiveDialog } from '@/components/generic/Dialogs/ArchiveDialog';
+import { RestoreDialog } from '@/components/generic/Dialogs/RestoreDialog';
+import { Spinner } from '@/components/ui/spinner';
+import {
+    AlertDialog, AlertDialogAction, AlertDialogCancel,
+    AlertDialogContent, AlertDialogDescription,
+    AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { TriangleAlert } from 'lucide-react';
+
+import { buildDataColumns, columnPinning } from '@/modules/admin/config/task_list/task/columns.config';
+import { buildToolbarActions } from '@/modules/admin/config/task_list/task/toolbar.config';
+import { buildSelectionActions } from '@/modules/admin/config/task_list/task/selection.config';
+import { buildRowActions } from '@/modules/admin/config/task_list/task/rowActions.config';
+import { getTimestamp } from '@/utils/timestamp.util';
+import { formatGeneratedBy } from '@/utils/generatedBy.util';
+
+export default function TasksTable({ taskListId }) {
+    const navigate = useNavigate();
+
+    const { user: currentUser } = useAuth();
+
+    const {
+        tasks, attributes, pagination, loading,
+        fetchTasks, fetchArchivedTasks,
+        archiveTask, restoreTask, fetchTaskFieldValues,
+        bulkArchiveTasks, bulkRestoreTasks, reorderTasks,
+    } = useAdminTask();
+
+    const [showArchived, setShowArchived] = useState(false);
+    const [archiveTarget, setArchiveTarget] = useState(null);
+    const [restoreTarget, setRestoreTarget] = useState(null);
+    const [bulkArchiveIds, setBulkArchiveIds] = useState(null);
+    const [bulkRestoreIds, setBulkRestoreIds] = useState(null);
+
+    const tableRefsRef = useRef({
+        getFilters: () => [], getSort: () => [], resetSelection: () => { }, tableInstance: null,
+    });
+
+    useEffect(() => {
+        fetchTasks(taskListId, { page: 1, limit: 10 });
+    }, [taskListId]);
+
+    const handleRefsReady = (refs) => { tableRefsRef.current = refs; };
+
+    const handleFetch = useCallback((params) => {
+        const fetcher = showArchived ? fetchArchivedTasks : fetchTasks;
+        return fetcher(taskListId, params);
+    }, [fetchTasks, fetchArchivedTasks, taskListId, showArchived]);
+
+    const handleToggleArchived = () => {
+        const next = !showArchived;
+        setShowArchived(next);
+        const fetcher = next ? fetchArchivedTasks : fetchTasks;
+        fetcher(taskListId, {
+            page: 1,
+            limit: pagination?.limit ?? 10,
+            filters: tableRefsRef.current.getFilters(),
+            sort: tableRefsRef.current.getSort(),
+        });
+    };
+
+    const afterMutation = () => {
+        tableRefsRef.current.resetSelection?.();
+        const fetcher = showArchived ? fetchArchivedTasks : fetchTasks;
+        fetcher(taskListId, {
+            page: 1,
+            limit: pagination?.limit ?? 10,
+            filters: tableRefsRef.current.getFilters(),
+            sort: tableRefsRef.current.getSort(),
+        });
+    };
+
+    const exportConfig = useMemo(() => ({
+        allData: tasks,
+        attributes,
+        filename: `${getTimestamp()}_Tasks`,
+        sheetName: "Tasks",
+        generatedBy: formatGeneratedBy(currentUser),
+    }), [tasks, attributes, currentUser]);
+
+    // ── Reorder — swaps this row with its neighbor in the currently displayed
+    // (unfiltered/default-sorted) list, then persists the new order_index set.
+    const handleMove = async (row, direction) => {
+        const idx = tasks.findIndex((t) => t.task_id === row.task_id);
+        const swapIdx = idx + direction;
+        if (idx < 0 || swapIdx < 0 || swapIdx >= tasks.length) return;
+
+        const reordered = [...tasks];
+        [reordered[idx], reordered[swapIdx]] = [reordered[swapIdx], reordered[idx]];
+
+        const ok = await reorderTasks(taskListId, reordered.map((t) => t.task_id));
+        if (ok) afterMutation();
+    };
+
+    const rowActions = buildRowActions({
+        navigate,
+        taskListId,
+        onArchive: (row) => setArchiveTarget(row),
+        onRestore: (row) => setRestoreTarget(row),
+        onMoveUp: (row) => handleMove(row, -1),
+        onMoveDown: (row) => handleMove(row, 1),
+        showArchived,
+        tasks,
+    });
+
+    const toolbarActions = buildToolbarActions({
+        fetchTasks, fetchArchivedTasks, taskListId,
+        pagination, navigate, exportConfig,
+        showArchived, onToggleArchived: handleToggleArchived,
+        getFilters: () => tableRefsRef.current.getFilters(),
+        getSort: () => tableRefsRef.current.getSort(),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const selectionActions = buildSelectionActions({
+        showArchived,
+        onBulkArchive: (ids) => setBulkArchiveIds(ids),
+        onBulkRestore: (ids) => setBulkRestoreIds(ids),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const columns = useMemo(() => buildDataColumns(attributes, rowActions), [attributes, rowActions]);
+
+    return (
+        <>
+            <DataTable
+                columns={columns}
+                data={tasks}
+                pagination={pagination}
+                loading={loading}
+                onFetch={handleFetch}
+                onFetchFilterData={(field) => fetchTaskFieldValues(taskListId, field)}
+                toolbarActions={toolbarActions}
+                selectionActions={selectionActions}
+                columnPinning={columnPinning}
+                onRefsReady={handleRefsReady}
+                recordLabel="task"
+                emptyMessage="No tasks in this list yet."
+                renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+                    <FilterSheet
+                        open={open}
+                        onOpenChange={onOpenChange}
+                        column={column}
+                        attr={attr}
+                        data={data}
+                        loading={loading}
+                    />
+                )}
+            />
+
+            {/* ── Single archive ────────────────────────────────────────────── */}
+            <AlertDialog open={!!archiveTarget} onOpenChange={(v) => !v && setArchiveTarget(null)}>
+                <AlertDialogContent className="sm:max-w-sm">
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>Archive Task</AlertDialogTitle>
+                        <AlertDialogDescription asChild>
+                            <div className="space-y-3">
+                                <p>
+                                    Are you sure you want to archive{' '}
+                                    <span className="font-medium text-foreground">{archiveTarget?.name}</span>?
+                                    This will deactivate the record immediately.
+                                </p>
+                                <div className="flex items-start gap-2 rounded-md border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/40 px-3 py-2.5 text-amber-800 dark:text-amber-300 text-sm">
+                                    <TriangleAlert className="size-4 mt-0.5 shrink-0" />
+                                    <p>
+                                        Check if users have already completed this task before archiving.
+                                        Review the <span className="font-medium">Completions</span> tab to avoid losing track of submitted work.
+                                    </p>
+                                </div>
+                            </div>
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel disabled={loading}>Cancel</AlertDialogCancel>
+                        <AlertDialogAction
+                            disabled={loading}
+                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                            onClick={async () => {
+                                const ok = await archiveTask(taskListId, archiveTarget?.task_id);
+                                if (ok) { setArchiveTarget(null); afterMutation(); }
+                            }}
+                        >
+                            {loading && <Spinner className="size-4 mr-2" />}
+                            Archive
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+
+            {/* ── Single restore ────────────────────────────────────────────── */}
+            <RestoreDialog
+                open={!!restoreTarget}
+                onOpenChange={(v) => !v && setRestoreTarget(null)}
+                entity={restoreTarget}
+                entityLabel="Task"
+                getName={(r) => r?.name}
+                onRestore={(entity) => restoreTask(taskListId, entity?.task_id)}
+                loading={loading}
+                onSuccess={afterMutation}
+            />
+
+            {/* ── Bulk archive ──────────────────────────────────────────────── */}
+            <ArchiveDialog
+                open={!!bulkArchiveIds}
+                onOpenChange={(v) => !v && setBulkArchiveIds(null)}
+                ids={bulkArchiveIds ?? []}
+                entityLabel="Task"
+                onArchive={({ ids }) => bulkArchiveTasks(taskListId, ids)}
+                loading={loading}
+                onSuccess={afterMutation}
+            />
+
+            {/* ── Bulk restore ──────────────────────────────────────────────── */}
+            <RestoreDialog
+                open={!!bulkRestoreIds}
+                onOpenChange={(v) => !v && setBulkRestoreIds(null)}
+                ids={bulkRestoreIds ?? []}
+                entityLabel="Task"
+                onRestore={({ ids }) => bulkRestoreTasks(taskListId, ids)}
+                loading={loading}
+                onSuccess={afterMutation}
+            />
+        </>
+    );
+}
diff --git a/apps/web/src/modules/admin/components/tiers/ArchivedTierPlansTable.jsx b/apps/web/src/modules/admin/components/tiers/ArchivedTierPlansTable.jsx
new file mode 100644
index 0000000..e53a6f7
--- /dev/null
+++ b/apps/web/src/modules/admin/components/tiers/ArchivedTierPlansTable.jsx
@@ -0,0 +1,190 @@
+import { useMemo, useRef, useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useTiers } from "@/contexts/AdminTiersContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { RestoreDialog } from "@/components/generic/Dialogs/RestoreDialog";
+import { PermanentDeleteDialog } from "@/components/generic/Dialogs/PermanentDeleteDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/tiers/plans/archive/columns.config";
+import { buildToolbarActions } from "../../config/tiers/plans/archive/toolbar.config";
+import { buildSelectionActions } from "../../config/tiers/plans/archive/selection.config";
+import { buildRowActions } from "../../config/tiers/plans/archive/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function ArchivedTierPlansTable() {
+  const navigate = useNavigate();
+
+  const { user: currentUser } = useAuth();
+
+  const {
+    plans, planAttributes, planPagination, setPlanPagination,
+    loading, fetchPlans, restorePlan, bulkRestorePlans,
+    permanentlyDeletePlan, bulkPermanentlyDeletePlans, fetchPlanPermanentDeleteImpact,
+  } = useTiers();
+
+  const [restoreTarget, setRestoreTarget] = useState(null);
+  const [restoreIds,    setRestoreIds]    = useState(null);
+  const [deleteTarget,  setDeleteTarget]  = useState(null);
+  const [deleteIds,     setDeleteIds]     = useState(null);
+
+  const tableRefsRef = useRef({
+    getFilters:     () => [],
+    getSort:        () => [],
+    resetSelection: () => {},
+    tableInstance:  null,
+  });
+
+  const handleRefsReady = (refs) => { tableRefsRef.current = refs; };
+
+  const fetchArchived = useCallback(
+    (params) => fetchPlans({ ...params, archived: true }),
+    [fetchPlans]
+  );
+
+  const exportConfig = useMemo(() => ({
+    allData:    plans,
+    attributes: planAttributes,
+    filename:   `${getTimestamp()}_ArchivedTierPlans`,
+    sheetName:  "Archived Subscriptions",
+    generatedBy: formatGeneratedBy(currentUser),
+  }), [plans, planAttributes, currentUser]);
+
+  const rowActions = buildRowActions({
+    navigate,
+    onRestore: (row) => setRestoreTarget(row),
+    onDelete: (row) => setDeleteTarget(row),
+  });
+
+  const toolbarActions = buildToolbarActions({
+    fetchPlans: fetchArchived,
+    pagination:       planPagination,
+    exportConfig,
+    navigate,
+    getFilters:       () => tableRefsRef.current.getFilters(),
+    getSort:          () => tableRefsRef.current.getSort(),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const selectionActions = buildSelectionActions({
+    exportConfig,
+    onRestore:        (row) => setRestoreTarget(row),
+    onRestoreMany:    (ids) => setRestoreIds(ids),
+    onDelete:         (row) => setDeleteTarget(row),
+    onDeleteMany:     (ids) => setDeleteIds(ids),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const columns = useMemo(
+    () => buildDataColumns(planAttributes, rowActions),
+    [planAttributes, rowActions]
+  );
+
+  const handleRestoreSuccess = () => {
+    setRestoreTarget(null);
+    setRestoreIds(null);
+    tableRefsRef.current.resetSelection?.();
+    fetchArchived({
+      page:    1,
+      limit:   planPagination?.limit ?? 10,
+      filters: tableRefsRef.current.getFilters(),
+      sort:    tableRefsRef.current.getSort(),
+    });
+  };
+
+  const handleDeleteSuccess = () => {
+    setDeleteTarget(null);
+    setDeleteIds(null);
+    tableRefsRef.current.resetSelection?.();
+    fetchArchived({
+      page:    1,
+      limit:   planPagination?.limit ?? 10,
+      filters: tableRefsRef.current.getFilters(),
+      sort:    tableRefsRef.current.getSort(),
+    });
+  };
+
+  return (
+    <>
+      <DataTable
+        title="Archived Plans"
+        data={plans}
+        columns={columns}
+        attributes={planAttributes}
+        pagination={planPagination}
+        setPagination={setPlanPagination}
+        loading={loading}
+        onFetch={fetchArchived}
+        onFetchFilterData={async () => []}
+        onRefsReady={handleRefsReady}
+        renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+          <FilterSheet
+            open={open}
+            onOpenChange={onOpenChange}
+            column={column}
+            attr={attr}
+            data={data}
+            loading={loading}
+          />
+        )}
+        columnPinning={columnPinning}
+        toolbarActions={toolbarActions}
+        selectionActions={selectionActions}
+        recordLabel="plan"
+        emptyMessage="No archived plans found."
+      />
+
+      <RestoreDialog
+        open={!!restoreTarget}
+        onOpenChange={(v) => !v && setRestoreTarget(null)}
+        entity={restoreTarget}
+        entityLabel="Plan"
+        getName={(r) => r?.label}
+        onRestore={(entity) => restorePlan(entity?.plan_id)}
+        loading={loading}
+        onSuccess={handleRestoreSuccess}
+      />
+
+      <RestoreDialog
+        open={!!restoreIds}
+        onOpenChange={(v) => !v && setRestoreIds(null)}
+        ids={restoreIds ?? []}
+        entityLabel="Plan"
+        onRestore={({ ids }) => bulkRestorePlans(ids)}
+        loading={loading}
+        onSuccess={handleRestoreSuccess}
+      />
+
+      {/* Single permanent delete — also auto-revokes any remaining active
+          subscribers (no refund) and deletes payment records, both handled
+          server-side as part of the delete itself. */}
+      <PermanentDeleteDialog
+        open={!!deleteTarget}
+        onOpenChange={(v) => !v && setDeleteTarget(null)}
+        entity={deleteTarget}
+        entityLabel="Plan"
+        getName={(r) => r?.label}
+        onDelete={(entity) => permanentlyDeletePlan(entity?.plan_id)}
+        onImpactCheck={() => fetchPlanPermanentDeleteImpact(deleteTarget?.plan_id)}
+        loading={loading}
+        onSuccess={handleDeleteSuccess}
+      />
+
+      {/* Bulk permanent delete */}
+      <PermanentDeleteDialog
+        open={!!deleteIds}
+        onOpenChange={(v) => !v && setDeleteIds(null)}
+        ids={deleteIds ?? []}
+        entityLabel="Plan"
+        onDelete={({ ids }) => bulkPermanentlyDeletePlans(ids)}
+        loading={loading}
+        onSuccess={handleDeleteSuccess}
+      />
+    </>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/tiers/BundlesCell.jsx b/apps/web/src/modules/admin/components/tiers/BundlesCell.jsx
new file mode 100644
index 0000000..e4a73a7
--- /dev/null
+++ b/apps/web/src/modules/admin/components/tiers/BundlesCell.jsx
@@ -0,0 +1,27 @@
+// BundlesCell — Tier Plans table cell showing the bundled content count for a
+// plan. A bundle is single-type (Tier Plans v2), so only one of
+// courseCount/unitCount/lessonCount is ever non-zero — show that one.
+
+import { BookOpen, Book, BookOpenCheck } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+
+const BUNDLE_KINDS = [
+  { key: "courseCount", icon: BookOpen,      singular: "course", plural: "courses" },
+  { key: "unitCount",   icon: Book,          singular: "unit",   plural: "units" },
+  { key: "lessonCount", icon: BookOpenCheck, singular: "lesson", plural: "lessons" },
+];
+
+export default function BundlesCell({ plan }) {
+  const active = BUNDLE_KINDS.find((k) => parseInt(plan[k.key] ?? 0, 10) > 0) ?? BUNDLE_KINDS[0];
+  const count = parseInt(plan[active.key] ?? 0, 10);
+  const Icon = active.icon;
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <Icon className="h-3.5 w-3.5 text-muted-foreground" />
+      <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+        {count} {count === 1 ? active.singular : active.plural}
+      </Badge>
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/tiers/CoursePicker.jsx b/apps/web/src/modules/admin/components/tiers/CoursePicker.jsx
new file mode 100644
index 0000000..21e07c9
--- /dev/null
+++ b/apps/web/src/modules/admin/components/tiers/CoursePicker.jsx
@@ -0,0 +1,173 @@
+import { useState, useEffect, useMemo } from "react";
+import { ChevronsUpDown, BookOpen } from "lucide-react";
+import api from "@/utils/api.util";
+import { Button }    from "@/components/ui/button";
+import { Checkbox }  from "@/components/ui/checkbox";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandInput, CommandEmpty, CommandList, CommandItem } from "@/components/ui/command";
+import { Skeleton }  from "@/components/ui/skeleton";
+
+/**
+ * CoursePicker
+ *
+ * Props:
+ *   subscription  — tier slug ("premium"). Null/undefined = hidden.
+ *   selectedIds   — Set<string> of selected course_id strings (managed by parent)
+ *   onChange      — (Set<string>) => void
+ *
+ * A course may already belong to any number of other plans — that's allowed
+ * (Tier Plans v2, silent duplication across bundles is intentional), so
+ * there's no conflict state to surface or resolve here.
+ *
+ * AddPlan starts with no courses selected; the admin picks specific ones
+ * directly in the dropdown. EditPlan preserves whatever was already assigned.
+ */
+export function CoursePicker({ subscription, selectedIds, onChange }) {
+    const [courses,      setCourses]      = useState([]);
+    const [loading,      setLoading]      = useState(false);
+    const [popoverOpen,  setPopoverOpen]  = useState(false);
+    const [search,       setSearch]       = useState("");
+
+    useEffect(() => {
+        if (!subscription) { setCourses([]); return; }
+        setLoading(true);
+        setSearch("");
+
+        api.get(`/admin/courses/by-subscription?slug=${encodeURIComponent(subscription)}`)
+            .then(({ data }) => {
+                const loaded = data.data ?? [];
+                setCourses(loaded);
+                // AddPlan starts with none selected; EditPlan keeps its existing selection as-is.
+            })
+            .catch(() => setCourses([]))
+            .finally(() => setLoading(false));
+    }, [subscription]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const filtered = useMemo(() => {
+        const q = search.toLowerCase();
+        if (!q) return courses;
+        return courses.filter(
+            (c) =>
+                c.title?.toLowerCase().includes(q) ||
+                c.description?.toLowerCase().includes(q)
+        );
+    }, [courses, search]);
+
+    const toggle = (id) => {
+        const next = new Set(selectedIds);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        onChange(next);
+    };
+
+    const checkAll = () => onChange(new Set(courses.map((c) => String(c.course_id))));
+    const resetAll = () => onChange(new Set());
+
+    const total         = courses.length;
+    const selectedCount = selectedIds.size;
+
+    if (!subscription) return null;
+
+    return (
+        <div className="space-y-4">
+
+            {loading ? (
+                <div className="flex gap-2">
+                    <Skeleton className="h-8 w-full" />
+                </div>
+            ) : total === 0 ? (
+                <div className="flex items-center gap-2 rounded-lg border border-dashed p-4 text-sm text-muted-foreground">
+                    <BookOpen className="size-4 shrink-0" />
+                    No <span className="capitalize mx-1 font-medium">{subscription}</span> courses found. Add courses with this subscription first.
+                </div>
+            ) : (
+                <div className="space-y-1.5">
+                    <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+                        <PopoverTrigger asChild>
+                            <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                className="w-full justify-between gap-2"
+                            >
+                                {selectedCount === 0
+                                    ? "No courses selected"
+                                    : `${selectedCount} of ${total} course${total !== 1 ? "s" : ""} selected`
+                                }
+                                <ChevronsUpDown className="size-4 opacity-50 shrink-0" />
+                            </Button>
+                        </PopoverTrigger>
+
+                        <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+                            <Command shouldFilter={false}>
+                                <CommandInput
+                                    placeholder="Search courses…"
+                                    value={search}
+                                    onValueChange={setSearch}
+                                />
+                                <CommandList>
+                                    {filtered.length === 0 ? (
+                                        <CommandEmpty>No courses match your search.</CommandEmpty>
+                                    ) : (
+                                        <ScrollArea className="h-64">
+                                            {filtered.map((course) => {
+                                                const id       = String(course.course_id);
+                                                const checked  = selectedIds.has(id);
+                                                return (
+                                                    <CommandItem
+                                                        key={id}
+                                                        value={id}
+                                                        onSelect={() => toggle(id)}
+                                                        className="flex items-start gap-3 px-3 py-2.5 cursor-pointer"
+                                                    >
+                                                        <Checkbox
+                                                            checked={checked}
+                                                            onCheckedChange={() => toggle(id)}
+                                                            className="mt-0.5 shrink-0"
+                                                            onClick={(e) => e.stopPropagation()}
+                                                        />
+                                                        <div className="flex flex-col gap-0.5 min-w-0">
+                                                            <span className="text-sm font-medium leading-snug">{course.title}</span>
+                                                            {course.description && (
+                                                                <span className="text-xs text-muted-foreground line-clamp-1">
+                                                                    {course.description}
+                                                                </span>
+                                                            )}
+                                                        </div>
+                                                    </CommandItem>
+                                                );
+                                            })}
+                                        </ScrollArea>
+                                    )}
+                                </CommandList>
+
+                                {/* Popover footer */}
+                                <div className="border-t px-3 py-2 flex items-center justify-between gap-2">
+                                    <span className="text-xs text-muted-foreground">
+                                        {selectedCount} of {total} selected
+                                    </span>
+                                    <div className="flex items-center gap-2">
+                                        <Checkbox
+                                            checked={selectedCount === total ? true : selectedCount > 0 ? "indeterminate" : false}
+                                            onCheckedChange={(v) => v ? checkAll() : resetAll()}
+                                        />
+                                        <span className="text-xs text-muted-foreground select-none">
+                                            {selectedCount === total ? "Deselect all" : "Select all"}
+                                        </span>
+                                    </div>
+                                </div>
+                            </Command>
+                        </PopoverContent>
+                    </Popover>
+
+                    {selectedCount === 0 && (
+                        <p className="text-xs text-muted-foreground">
+                            Select at least one course to bundle with this plan.
+                        </p>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/apps/web/src/modules/admin/components/tiers/CurrencyPicker.jsx b/apps/web/src/modules/admin/components/tiers/CurrencyPicker.jsx
new file mode 100644
index 0000000..6812313
--- /dev/null
+++ b/apps/web/src/modules/admin/components/tiers/CurrencyPicker.jsx
@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { ChevronsUpDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Command, CommandEmpty, CommandGroup,
+  CommandInput, CommandItem, CommandList,
+} from "@/components/ui/command";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+export function CurrencyPicker({ value, currencies, onValueChange }) {
+  const [open, setOpen] = useState(false);
+
+  const selected = currencies.find((c) => c.code === value);
+  const label = selected ? `${selected.code} — ${selected.name}` : "Select currency";
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between font-normal"
+        >
+          <span className="truncate">{label}</span>
+          <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="w-[--radix-popover-trigger-width] p-0"
+      >
+        <Command>
+          <CommandInput placeholder="Search currency…" />
+          <ScrollArea className="h-64">
+            <CommandList className="max-h-none">
+              <CommandEmpty>No currency found.</CommandEmpty>
+              <CommandGroup>
+                {currencies.map((c) => (
+                  <CommandItem
+                    key={c.code}
+                    value={`${c.code} ${c.name}`}
+                    data-checked={value === c.code}
+                    onSelect={() => {
+                      onValueChange(c.code);
+                      setOpen(false);
+                    }}
+                  >
+                    {c.code} — {c.name}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </ScrollArea>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/web/src/modules/admin/components/tiers/LessonPicker.jsx b/apps/web/src/modules/admin/components/tiers/LessonPicker.jsx
new file mode 100644
index 0000000..c2cadd5
--- /dev/null
+++ b/apps/web/src/modules/admin/components/tiers/LessonPicker.jsx
@@ -0,0 +1,171 @@
+import { useState, useEffect, useMemo } from "react";
+import { ChevronsUpDown, FileText } from "lucide-react";
+import api from "@/utils/api.util";
+import { Button }    from "@/components/ui/button";
+import { Checkbox }  from "@/components/ui/checkbox";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandInput, CommandEmpty, CommandList, CommandItem } from "@/components/ui/command";
+import { Skeleton }  from "@/components/ui/skeleton";
+
+/**
+ * LessonPicker — mirrors CoursePicker.jsx exactly, for bundling standalone
+ * Lessons (their own `subscription` field) into a tier plan.
+ *
+ * Props: same contract as CoursePicker (subscription, selectedIds, onChange)
+ * — see CoursePicker.jsx for the full doc comment, not repeated here.
+ * A lesson may already belong to any number of other plans — that's
+ * allowed (Tier Plans v2, silent duplication across bundles is intentional),
+ * so there's no conflict state to surface or resolve here.
+ *
+ * AddPlan starts with no lessons selected; the admin picks specific ones
+ * directly in the dropdown. EditPlan preserves whatever was already assigned.
+ */
+export function LessonPicker({ subscription, selectedIds, onChange }) {
+    const [lessons,      setLessons]      = useState([]);
+    const [loading,      setLoading]      = useState(false);
+    const [popoverOpen,  setPopoverOpen]  = useState(false);
+    const [search,       setSearch]       = useState("");
+
+    useEffect(() => {
+        if (!subscription) { setLessons([]); return; }
+        setLoading(true);
+        setSearch("");
+
+        api.get(`/admin/lessons/by-subscription?slug=${encodeURIComponent(subscription)}`)
+            .then(({ data }) => {
+                const loaded = data.data ?? [];
+                setLessons(loaded);
+                // AddPlan starts with none selected; EditPlan keeps its existing selection as-is.
+            })
+            .catch(() => setLessons([]))
+            .finally(() => setLoading(false));
+    }, [subscription]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const filtered = useMemo(() => {
+        const q = search.toLowerCase();
+        if (!q) return lessons;
+        return lessons.filter(
+            (l) =>
+                l.title?.toLowerCase().includes(q) ||
+                l.description?.toLowerCase().includes(q)
+        );
+    }, [lessons, search]);
+
+    const toggle = (id) => {
+        const next = new Set(selectedIds);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        onChange(next);
+    };
+
+    const checkAll = () => onChange(new Set(lessons.map((l) => String(l.lesson_id))));
+    const resetAll = () => onChange(new Set());
+
+    const total         = lessons.length;
+    const selectedCount = selectedIds.size;
+
+    if (!subscription) return null;
+
+    return (
+        <div className="space-y-4">
+
+            {loading ? (
+                <div className="flex gap-2">
+                    <Skeleton className="h-8 w-full" />
+                </div>
+            ) : total === 0 ? (
+                <div className="flex items-center gap-2 rounded-lg border border-dashed p-4 text-sm text-muted-foreground">
+                    <FileText className="size-4 shrink-0" />
+                    No <span className="capitalize mx-1 font-medium">{subscription}</span> lessons found. Add lessons with this subscription first.
+                </div>
+            ) : (
+                <div className="space-y-1.5">
+                    <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+                        <PopoverTrigger asChild>
+                            <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                className="w-full justify-between gap-2"
+                            >
+                                {selectedCount === 0
+                                    ? "No lessons selected"
+                                    : `${selectedCount} of ${total} lesson${total !== 1 ? "s" : ""} selected`
+                                }
+                                <ChevronsUpDown className="size-4 opacity-50 shrink-0" />
+                            </Button>
+                        </PopoverTrigger>
+
+                        <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+                            <Command shouldFilter={false}>
+                                <CommandInput
+                                    placeholder="Search lessons…"
+                                    value={search}
+                                    onValueChange={setSearch}
+                                />
+                                <CommandList>
+                                    {filtered.length === 0 ? (
+                                        <CommandEmpty>No lessons match your search.</CommandEmpty>
+                                    ) : (
+                                        <ScrollArea className="h-64">
+                                            {filtered.map((lesson) => {
+                                                const id       = String(lesson.lesson_id);
+                                                const checked  = selectedIds.has(id);
+                                                return (
+                                                    <CommandItem
+                                                        key={id}
+                                                        value={id}
+                                                        onSelect={() => toggle(id)}
+                                                        className="flex items-start gap-3 px-3 py-2.5 cursor-pointer"
+                                                    >
+                                                        <Checkbox
+                                                            checked={checked}
+                                                            onCheckedChange={() => toggle(id)}
+                                                            className="mt-0.5 shrink-0"
+                                                            onClick={(e) => e.stopPropagation()}
+                                                        />
+                                                        <div className="flex flex-col gap-0.5 min-w-0">
+                                                            <span className="text-sm font-medium leading-snug">{lesson.title}</span>
+                                                            {lesson.description && (
+                                                                <span className="text-xs text-muted-foreground line-clamp-1">
+                                                                    {lesson.description}
+                                                                </span>
+                                                            )}
+                                                        </div>
+                                                    </CommandItem>
+                                                );
+                                            })}
+                                        </ScrollArea>
+                                    )}
+                                </CommandList>
+
+                                {/* Popover footer */}
+                                <div className="border-t px-3 py-2 flex items-center justify-between gap-2">
+                                    <span className="text-xs text-muted-foreground">
+                                        {selectedCount} of {total} selected
+                                    </span>
+                                    <div className="flex items-center gap-2">
+                                        <Checkbox
+                                            checked={selectedCount === total ? true : selectedCount > 0 ? "indeterminate" : false}
+                                            onCheckedChange={(v) => v ? checkAll() : resetAll()}
+                                        />
+                                        <span className="text-xs text-muted-foreground select-none">
+                                            {selectedCount === total ? "Deselect all" : "Select all"}
+                                        </span>
+                                    </div>
+                                </div>
+                            </Command>
+                        </PopoverContent>
+                    </Popover>
+
+                    {selectedCount === 0 && (
+                        <p className="text-xs text-muted-foreground">
+                            Select at least one lesson to bundle with this plan.
+                        </p>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/apps/web/src/modules/admin/components/tiers/PaymentsTable.jsx b/apps/web/src/modules/admin/components/tiers/PaymentsTable.jsx
new file mode 100644
index 0000000..18624e0
--- /dev/null
+++ b/apps/web/src/modules/admin/components/tiers/PaymentsTable.jsx
@@ -0,0 +1,109 @@
+import { useMemo, useRef, useCallback, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTiers } from "@/contexts/AdminTiersContext";
+import { useAuth } from "@/contexts/AuthContext";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import api from "@/utils/api.util";
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { buildDataColumns, columnPinning } from "../../config/tiers/payments/columns.config";
+import { buildToolbarActions } from "../../config/tiers/payments/toolbar.config";
+import { buildSelectionActions } from "../../config/tiers/payments/selection.config";
+import { buildRowActions } from "../../config/tiers/payments/rowActions.config";
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function PaymentsTable({ planId = null }) {
+  const tableRefsRef = useRef({
+    getFilters: () => [],
+    getSort: () => [],
+    resetSelection: () => { },
+    setFilters: () => { },
+  });
+
+  const navigate = useNavigate();
+  const { fmtDateTime } = useDateFormat();
+  const { user: currentUser } = useAuth();
+
+  const {
+    payments, paymentAttributes,
+    paymentPagination, setPaymentPagination,
+    loading, fetchPayments,
+  } = useTiers();
+
+  const [tierCategories, setTierCategories] = useState([]);
+  const tierMap = useMemo(() => Object.fromEntries(tierCategories.map((c) => [c.slug, c])), [tierCategories]);
+
+  useEffect(() => {
+    api.get("/admin/tiers/categories").then(({ data }) => setTierCategories(data.data ?? [])).catch(() => {});
+  }, []);
+
+  const exportConfig = {
+    allData: payments,
+    attributes: paymentAttributes,
+    filename: `${getTimestamp()}_Payments`,
+    sheetName: "Payments",
+    generatedBy: formatGeneratedBy(currentUser),
+  };
+
+  const rowActions = useMemo(() => buildRowActions({
+    onView: (row) => navigate(`/admin/tiers/payments/${row.payment_id}/view`),
+  }), []);
+
+  const toolbarActions = buildToolbarActions({
+    fetchPayments,
+    pagination: paymentPagination,
+    exportConfig,
+    getFilters: () => tableRefsRef.current.getFilters(),
+    getSort: () => tableRefsRef.current.getSort(),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const selectionActions = buildSelectionActions({
+    exportConfig,
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const columns = useMemo(
+    () => buildDataColumns(paymentAttributes, rowActions, fmtDateTime, tierMap),
+    [paymentAttributes, fmtDateTime, tierMap]
+  );
+
+  // Pass planId as a locked filter to DataTable's onFetch
+  const handleFetch = useCallback((params = {}) => {
+    const baseFilters = planId
+      ? [{ id: "plan_id", value: planId }, ...(params.filters ?? [])]
+      : (params.filters ?? []);
+    fetchPayments({ ...params, filters: baseFilters });
+  }, [planId, fetchPayments]);
+
+  return (
+    <DataTable
+      title="Payments"
+      data={payments}
+      columns={columns}
+      attributes={paymentAttributes}
+      pagination={paymentPagination}
+      setPagination={setPaymentPagination}
+      loading={loading}
+      onFetch={handleFetch}
+      onFetchFilterData={async () => []}
+      onRefsReady={(refs) => { tableRefsRef.current = refs; }}
+      renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+        <FilterSheet
+          open={open}
+          onOpenChange={onOpenChange}
+          column={column}
+          attr={attr}
+          data={data}
+          loading={loading}
+        />
+      )}
+      columnPinning={columnPinning}
+      toolbarActions={toolbarActions}
+      selectionActions={selectionActions}
+      recordLabel="payment"
+      emptyMessage="No payments found."
+    />
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/components/tiers/TierPlansTable.jsx b/apps/web/src/modules/admin/components/tiers/TierPlansTable.jsx
new file mode 100644
index 0000000..5cba14a
--- /dev/null
+++ b/apps/web/src/modules/admin/components/tiers/TierPlansTable.jsx
@@ -0,0 +1,173 @@
+import { useMemo, useRef, useState, useEffect } from "react";
+import { useNavigate, Link } from "react-router-dom";
+import { Layers } from "lucide-react";
+
+import { useTiers } from "@/contexts/AdminTiersContext";
+import { useAuth } from "@/contexts/AuthContext";
+import api from "@/utils/api.util";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/tiers/plans/columns.config";
+import { buildToolbarActions } from "../../config/tiers/plans/toolbar.config";
+import { buildSelectionActions } from "../../config/tiers/plans/selection.config";
+import { buildRowActions } from "../../config/tiers/plans/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function TierPlansTable() {
+  const navigate = useNavigate();
+
+  const { user: currentUser } = useAuth();
+
+  const {
+    plans, planAttributes, planPagination, setPlanPagination,
+    loading, fetchPlans, deletePlan, bulkDeletePlans,
+  } = useTiers();
+
+  const [hasAvailableCategories, setHasAvailableCategories] = useState(true);
+
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => {
+        const available = (data.data ?? []).filter((c) => !c.is_default && c.is_active);
+        setHasAvailableCategories(available.length > 0);
+      })
+      .catch(() => {});
+  }, []);
+
+  const [archiveTarget, setArchiveTarget] = useState(null);
+  const [archiveIds,    setArchiveIds]    = useState(null);
+
+  const tableRefsRef = useRef({
+    getFilters:     () => [],
+    getSort:        () => [],
+    resetSelection: () => {},
+    tableInstance:  null,
+  });
+
+  const handleRefsReady = (refs) => { tableRefsRef.current = refs; };
+
+  const handleSuccess = () => {
+    setArchiveTarget(null);
+    setArchiveIds(null);
+    tableRefsRef.current.resetSelection?.();
+    fetchPlans({
+      page:    1,
+      limit:   planPagination?.limit ?? 10,
+      filters: tableRefsRef.current.getFilters(),
+      sort:    tableRefsRef.current.getSort(),
+    });
+  };
+
+  const exportConfig = useMemo(() => ({
+    allData:   plans,
+    attributes: planAttributes,
+    filename:  `${getTimestamp()}_TierPlans`,
+    sheetName: "Subscriptions",
+    generatedBy: formatGeneratedBy(currentUser),
+  }), [plans, planAttributes, currentUser]);
+
+  const rowActions = buildRowActions({
+    navigate,
+    onArchive: (row) => setArchiveTarget(row),
+  });
+
+  const toolbarActions = buildToolbarActions({
+    fetchPlans,
+    pagination:             planPagination,
+    exportConfig,
+    navigate,
+    hasAvailableCategories,
+    getFilters:             () => tableRefsRef.current.getFilters(),
+    getSort:                () => tableRefsRef.current.getSort(),
+    getTableInstance:       () => tableRefsRef.current.tableInstance,
+  });
+
+  const selectionActions = buildSelectionActions({
+    exportConfig,
+    onArchive:        (row) => setArchiveTarget(row),
+    onArchiveMany:    (ids) => setArchiveIds(ids),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const columns = useMemo(
+    () => buildDataColumns(planAttributes, rowActions),
+    [planAttributes, rowActions]
+  );
+
+  return (
+    <>
+      {!hasAvailableCategories && (
+        <div className="rounded-lg border bg-card p-4 flex items-start gap-3 mb-4">
+          <Layers className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
+          <p className="text-sm text-muted-foreground">
+            No subscription categories defined.{" "}
+            <Link to="/admin/tiers/categories/add" className="underline text-primary font-medium">
+              Add a subscription category
+            </Link>{" "}
+            before creating plans.
+          </p>
+        </div>
+      )}
+      <DataTable
+        title="Subscriptions"
+        data={plans}
+        columns={columns}
+        attributes={planAttributes}
+        pagination={planPagination}
+        setPagination={setPlanPagination}
+        loading={loading}
+        onFetch={fetchPlans}
+        onFetchFilterData={async () => []}
+        onRefsReady={handleRefsReady}
+        renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+          <FilterSheet
+            open={open}
+            onOpenChange={onOpenChange}
+            column={column}
+            attr={attr}
+            data={data}
+            loading={loading}
+          />
+        )}
+        columnPinning={columnPinning}
+        toolbarActions={toolbarActions}
+        selectionActions={selectionActions}
+        recordLabel="plan"
+        emptyMessage="No subscriptions found."
+      />
+
+      {/* Single archive — always force-revokes current subscribers' access (no refund), handled server-side */}
+      <ArchiveDialog
+        open={!!archiveTarget}
+        onOpenChange={(v) => !v && setArchiveTarget(null)}
+        entity={archiveTarget}
+        entityLabel="Plan"
+        getName={(r) => r?.label}
+        onArchive={(entity) => deletePlan(entity?.plan_id)}
+        loading={loading}
+        onSuccess={handleSuccess}
+        onImpactCheck={async () => {
+          const { data } = await api.get(`/admin/tiers/${archiveTarget?.plan_id}/impact`);
+          return [{ label: "active subscriber(s) on this plan — access will be revoked, no refund", count: data.data?.active_subscriber_count ?? 0 }];
+        }}
+      />
+
+      {/* Bulk archive */}
+      <ArchiveDialog
+        open={!!archiveIds}
+        onOpenChange={(v) => !v && setArchiveIds(null)}
+        ids={archiveIds ?? []}
+        entityLabel="Plan"
+        onArchive={({ ids }) => bulkDeletePlans(ids)}
+        loading={loading}
+        onSuccess={handleSuccess}
+      />
+
+    </>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/components/tiers/UnitPicker.jsx b/apps/web/src/modules/admin/components/tiers/UnitPicker.jsx
new file mode 100644
index 0000000..8e2c63a
--- /dev/null
+++ b/apps/web/src/modules/admin/components/tiers/UnitPicker.jsx
@@ -0,0 +1,171 @@
+import { useState, useEffect, useMemo } from "react";
+import { ChevronsUpDown, BookOpen } from "lucide-react";
+import api from "@/utils/api.util";
+import { Button }    from "@/components/ui/button";
+import { Checkbox }  from "@/components/ui/checkbox";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandInput, CommandEmpty, CommandList, CommandItem } from "@/components/ui/command";
+import { Skeleton }  from "@/components/ui/skeleton";
+
+/**
+ * UnitPicker — mirrors CoursePicker.jsx exactly, for bundling standalone
+ * Units (their own `subscription` field) into a tier plan.
+ *
+ * Props: same contract as CoursePicker (subscription, selectedIds, onChange)
+ * — see CoursePicker.jsx for the full doc comment, not repeated here.
+ * A unit may already belong to any number of other plans — that's
+ * allowed (Tier Plans v2, silent duplication across bundles is intentional),
+ * so there's no conflict state to surface or resolve here.
+ *
+ * AddPlan starts with no units selected; the admin picks specific ones
+ * directly in the dropdown. EditPlan preserves whatever was already assigned.
+ */
+export function UnitPicker({ subscription, selectedIds, onChange }) {
+    const [units,        setUnits]        = useState([]);
+    const [loading,      setLoading]      = useState(false);
+    const [popoverOpen,  setPopoverOpen]  = useState(false);
+    const [search,       setSearch]       = useState("");
+
+    useEffect(() => {
+        if (!subscription) { setUnits([]); return; }
+        setLoading(true);
+        setSearch("");
+
+        api.get(`/admin/units/by-subscription?slug=${encodeURIComponent(subscription)}`)
+            .then(({ data }) => {
+                const loaded = data.data ?? [];
+                setUnits(loaded);
+                // AddPlan starts with none selected; EditPlan keeps its existing selection as-is.
+            })
+            .catch(() => setUnits([]))
+            .finally(() => setLoading(false));
+    }, [subscription]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const filtered = useMemo(() => {
+        const q = search.toLowerCase();
+        if (!q) return units;
+        return units.filter(
+            (u) =>
+                u.title?.toLowerCase().includes(q) ||
+                u.description?.toLowerCase().includes(q)
+        );
+    }, [units, search]);
+
+    const toggle = (id) => {
+        const next = new Set(selectedIds);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        onChange(next);
+    };
+
+    const checkAll = () => onChange(new Set(units.map((u) => String(u.unit_id))));
+    const resetAll = () => onChange(new Set());
+
+    const total         = units.length;
+    const selectedCount = selectedIds.size;
+
+    if (!subscription) return null;
+
+    return (
+        <div className="space-y-4">
+
+            {loading ? (
+                <div className="flex gap-2">
+                    <Skeleton className="h-8 w-full" />
+                </div>
+            ) : total === 0 ? (
+                <div className="flex items-center gap-2 rounded-lg border border-dashed p-4 text-sm text-muted-foreground">
+                    <BookOpen className="size-4 shrink-0" />
+                    No <span className="capitalize mx-1 font-medium">{subscription}</span> units found. Add units with this subscription first.
+                </div>
+            ) : (
+                <div className="space-y-1.5">
+                    <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+                        <PopoverTrigger asChild>
+                            <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                className="w-full justify-between gap-2"
+                            >
+                                {selectedCount === 0
+                                    ? "No units selected"
+                                    : `${selectedCount} of ${total} unit${total !== 1 ? "s" : ""} selected`
+                                }
+                                <ChevronsUpDown className="size-4 opacity-50 shrink-0" />
+                            </Button>
+                        </PopoverTrigger>
+
+                        <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+                            <Command shouldFilter={false}>
+                                <CommandInput
+                                    placeholder="Search units…"
+                                    value={search}
+                                    onValueChange={setSearch}
+                                />
+                                <CommandList>
+                                    {filtered.length === 0 ? (
+                                        <CommandEmpty>No units match your search.</CommandEmpty>
+                                    ) : (
+                                        <ScrollArea className="h-64">
+                                            {filtered.map((unit) => {
+                                                const id       = String(unit.unit_id);
+                                                const checked  = selectedIds.has(id);
+                                                return (
+                                                    <CommandItem
+                                                        key={id}
+                                                        value={id}
+                                                        onSelect={() => toggle(id)}
+                                                        className="flex items-start gap-3 px-3 py-2.5 cursor-pointer"
+                                                    >
+                                                        <Checkbox
+                                                            checked={checked}
+                                                            onCheckedChange={() => toggle(id)}
+                                                            className="mt-0.5 shrink-0"
+                                                            onClick={(e) => e.stopPropagation()}
+                                                        />
+                                                        <div className="flex flex-col gap-0.5 min-w-0">
+                                                            <span className="text-sm font-medium leading-snug">{unit.title}</span>
+                                                            {unit.description && (
+                                                                <span className="text-xs text-muted-foreground line-clamp-1">
+                                                                    {unit.description}
+                                                                </span>
+                                                            )}
+                                                        </div>
+                                                    </CommandItem>
+                                                );
+                                            })}
+                                        </ScrollArea>
+                                    )}
+                                </CommandList>
+
+                                {/* Popover footer */}
+                                <div className="border-t px-3 py-2 flex items-center justify-between gap-2">
+                                    <span className="text-xs text-muted-foreground">
+                                        {selectedCount} of {total} selected
+                                    </span>
+                                    <div className="flex items-center gap-2">
+                                        <Checkbox
+                                            checked={selectedCount === total ? true : selectedCount > 0 ? "indeterminate" : false}
+                                            onCheckedChange={(v) => v ? checkAll() : resetAll()}
+                                        />
+                                        <span className="text-xs text-muted-foreground select-none">
+                                            {selectedCount === total ? "Deselect all" : "Select all"}
+                                        </span>
+                                    </div>
+                                </div>
+                            </Command>
+                        </PopoverContent>
+                    </Popover>
+
+                    {selectedCount === 0 && (
+                        <p className="text-xs text-muted-foreground">
+                            Select at least one unit to bundle with this plan.
+                        </p>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/apps/web/src/modules/admin/components/user_groups/AddGroupDialog.jsx b/apps/web/src/modules/admin/components/user_groups/AddGroupDialog.jsx
new file mode 100644
index 0000000..b9cb51d
--- /dev/null
+++ b/apps/web/src/modules/admin/components/user_groups/AddGroupDialog.jsx
@@ -0,0 +1,144 @@
+// modules/admin/components/user_groups/AddGroupDialog.jsx
+
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { Input }    from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button }   from "@/components/ui/button";
+import { Label }    from "@/components/ui/label";
+
+const schema = z.object({
+  name:        z.string().min(1, "Name is required."),
+  description: z.string().min(1, "Description is required."),
+  group_code:  z
+    .string()
+    .max(50, "Group code must be 50 characters or less.")
+    .regex(/^[A-Z0-9\-]*$/, "Only uppercase letters, numbers, and hyphens allowed.")
+    .optional()
+    .or(z.literal("")),
+});
+
+/**
+ * Dialog for creating a new group.
+ * Matches context: createGroup({ name, description, group_code })
+ *
+ * group_code is optional — if left blank the backend auto-generates one.
+ *
+ * @param {Object}   props
+ * @param {boolean}  props.open
+ * @param {Function} props.onOpenChange
+ * @param {Function} props.onSubmit      Called with { name, description, group_code? }
+ * @param {boolean}  [props.loading]
+ */
+export function AddGroupDialog({ open, onOpenChange, onSubmit, loading }) {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm({
+    resolver:      zodResolver(schema),
+    defaultValues: { name: "", description: "", group_code: "" },
+  });
+
+  async function onValid({ name, description, group_code }) {
+    await onSubmit({
+      name,
+      description,
+      // omit group_code entirely if blank — backend will auto-generate
+      ...(group_code ? { group_code } : {}),
+    });
+    reset();
+  }
+
+  function handleClose() {
+    reset();
+    onOpenChange(false);
+  }
+
+  // Auto-uppercase as user types
+  function handleGroupCodeChange(e) {
+    setValue("group_code", e.target.value.toUpperCase().replace(/[^A-Z0-9\-]/g, ""), {
+      shouldValidate: true,
+    });
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[440px]">
+        <DialogHeader>
+          <DialogTitle>Add group</DialogTitle>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit(onValid)} className="space-y-4">
+          <div className="space-y-1.5">
+            <Label htmlFor="name">
+              Name <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="name"
+              placeholder="Group name"
+              {...register("name")}
+            />
+            {errors.name && (
+              <p className="text-sm text-destructive">{errors.name.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="description">
+              Description <span className="text-destructive">*</span>
+            </Label>
+            <Textarea
+              id="description"
+              placeholder="Brief description of this group"
+              className="resize-none"
+              rows={3}
+              {...register("description")}
+            />
+            {errors.description && (
+              <p className="text-sm text-destructive">{errors.description.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="group_code" className="flex items-center gap-2">
+              Group code
+              <span className="text-xs font-normal text-muted-foreground">(auto-generated if blank)</span>
+            </Label>
+            <Input
+              id="group_code"
+              placeholder="e.g. SALES-2025"
+              {...register("group_code")}
+              onChange={handleGroupCodeChange}
+            />
+            {errors.group_code && (
+              <p className="text-sm text-destructive">{errors.group_code.message}</p>
+            )}
+          </div>
+
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button type="button" variant="outline" disabled={loading}>Cancel</Button>
+            </DialogClose>
+            <Button type="submit" disabled={loading}>
+              {loading ? "Creating..." : "Add group"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/components/user_groups/ArchiveGroupTable.jsx b/apps/web/src/modules/admin/components/user_groups/ArchiveGroupTable.jsx
new file mode 100644
index 0000000..17afe44
--- /dev/null
+++ b/apps/web/src/modules/admin/components/user_groups/ArchiveGroupTable.jsx
@@ -0,0 +1,165 @@
+import { useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useUserGroups } from "@/contexts/AdminUserGroupContext";
+import { useAuth } from "@/contexts/AuthContext";
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { RestoreDialog } from "@/components/generic/Dialogs/RestoreDialog";
+import { PermanentDeleteDialog } from "@/components/generic/Dialogs/PermanentDeleteDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/user_groups/archive/columns.config";
+import { buildToolbarActions } from "../../config/user_groups/archive/toolbar.config";
+import { buildSelectionActions } from "../../config/user_groups/archive/selection.config";
+import { buildRowActions } from "../../config/user_groups/archive/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function ArchiveGroupTable() {
+    const [restoreTarget, setRestoreTarget] = useState(null);  // single: row object
+    const [restoreIds,    setRestoreIds]    = useState(null);  // bulk: array of ids
+    const [deleteTarget,  setDeleteTarget]  = useState(null);
+    const [deleteIds,     setDeleteIds]     = useState(null);
+    const tableRefsRef = useRef({ getFilters: () => [], getSort: () => [], resetSelection: () => {} });
+    const navigate = useNavigate();
+    const { user: currentUser } = useAuth();
+
+    const {
+        groups,
+        attributes,
+        pagination,
+        setPagination,
+        loading,
+        fetchGroupFieldValues,
+        fetchArchivedGroups,
+        restoreGroup,
+        restoreGroups,
+        permanentlyDeleteGroup,
+        permanentlyDeleteGroups,
+    } = useUserGroups();
+
+    const exportConfig = {
+        allData:   groups,
+        attributes,
+        filename:  `${getTimestamp()}_ArchivedUserGroups`,
+        sheetName: "ArchivedUserGroups",
+        generatedBy: formatGeneratedBy(currentUser),
+    };
+
+    const rowActions = buildRowActions({
+        navigate,
+        onRestore: (row) => setRestoreTarget(row),
+        onDelete: (row) => setDeleteTarget(row),
+    });
+
+    const toolbarActions = buildToolbarActions({
+        fetchArchivedGroups, pagination, exportConfig, navigate,
+        getFilters: () => tableRefsRef.current.getFilters(),
+        getSort:    () => tableRefsRef.current.getSort(),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const selectionActions = buildSelectionActions({
+        exportConfig,
+        restoreGroup:  (row) => setRestoreTarget(row),  // single
+        restoreGroups: (ids) => setRestoreIds(ids),      // bulk
+        deleteGroup:  (row) => setDeleteTarget(row),
+        deleteGroups: (ids) => setDeleteIds(ids),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const columns = useMemo(() => buildDataColumns(attributes, rowActions), [attributes]);
+
+    const handleRestoreSuccess = () => {
+        setRestoreTarget(null);
+        setRestoreIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedGroups({ page: 1, limit: pagination.limit });
+    };
+
+    const handleDeleteSuccess = () => {
+        setDeleteTarget(null);
+        setDeleteIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedGroups({ page: 1, limit: pagination.limit });
+    };
+
+    return (
+        <>
+            <DataTable
+                title="User Groups"
+                data={groups}
+                columns={columns}
+                attributes={attributes}
+                pagination={pagination}
+                setPagination={setPagination}
+                loading={loading}
+                onFetch={fetchArchivedGroups}
+                onFetchFilterData={fetchGroupFieldValues}
+                onRefsReady={(refs) => tableRefsRef.current = refs}
+                renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+                    <FilterSheet
+                        open={open}
+                        onOpenChange={onOpenChange}
+                        column={column}
+                        attr={attr}
+                        data={data}
+                        loading={loading}
+                    />
+                )}
+                columnPinning={columnPinning}
+                toolbarActions={toolbarActions}
+                selectionActions={selectionActions}
+                recordLabel="group"
+                emptyMessage="No archived groups match the current filters."
+            />
+
+            {/* Single restore */}
+            <RestoreDialog
+                open={!!restoreTarget}
+                onOpenChange={(v) => !v && setRestoreTarget(null)}
+                entity={restoreTarget}
+                entityLabel="Group"
+                getName={(g) => g?.name}
+                onRestore={(g) => restoreGroup(g?.group_id)}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+
+            {/* Bulk restore */}
+            <RestoreDialog
+                open={!!restoreIds}
+                onOpenChange={(v) => !v && setRestoreIds(null)}
+                ids={restoreIds ?? []}
+                entityLabel="Group"
+                onRestore={restoreGroups}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+
+            {/* Single permanent delete */}
+            <PermanentDeleteDialog
+                open={!!deleteTarget}
+                onOpenChange={(v) => !v && setDeleteTarget(null)}
+                entity={deleteTarget}
+                entityLabel="Group"
+                getName={(g) => g?.name}
+                onDelete={(g) => permanentlyDeleteGroup(g?.group_id)}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+
+            {/* Bulk permanent delete */}
+            <PermanentDeleteDialog
+                open={!!deleteIds}
+                onOpenChange={(v) => !v && setDeleteIds(null)}
+                ids={deleteIds ?? []}
+                entityLabel="Group"
+                onDelete={permanentlyDeleteGroups}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+        </>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/components/user_groups/EditGroupDialog.jsx b/apps/web/src/modules/admin/components/user_groups/EditGroupDialog.jsx
new file mode 100644
index 0000000..88e185b
--- /dev/null
+++ b/apps/web/src/modules/admin/components/user_groups/EditGroupDialog.jsx
@@ -0,0 +1,139 @@
+// modules/admin/components/user_groups/EditGroupDialog.jsx
+
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { Input }    from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button }   from "@/components/ui/button";
+import { Label }    from "@/components/ui/label";
+
+const schema = z.object({
+  name:        z.string().min(1, "Name is required."),
+  description: z.string().min(1, "Description is required."),
+  group_code:  z
+    .string()
+    .min(1, "Group code is required.")
+    .max(50, "Group code must be 50 characters or less.")
+    .regex(/^[A-Z0-9\-]+$/, "Only uppercase letters, numbers, and hyphens allowed."),
+});
+
+/**
+ * Dialog for editing a group's name, description, and group_code.
+ * Matches context: updateGroup(gid, { name, description, group_code })
+ *
+ * `group` is the full row object from the table — pre-fills all fields.
+ * `values` re-syncs whenever `group` prop changes.
+ *
+ * @param {Object}   props
+ * @param {boolean}  props.open
+ * @param {Function} props.onOpenChange
+ * @param {Object}   props.group          Row object: { group_id, name, description, group_code, ... }
+ * @param {Function} props.onSubmit       Called with { name, description, group_code }
+ * @param {boolean}  [props.loading]
+ */
+export function EditGroupDialog({ open, onOpenChange, group, onSubmit, loading }) {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    setValue,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(schema),
+    values: {
+      name:        group?.name        ?? "",
+      description: group?.description ?? "",
+      group_code:  group?.group_code  ?? "",
+    },
+  });
+
+  async function onValid(values) {
+    await onSubmit(values);
+  }
+
+  function handleClose() {
+    reset();
+    onOpenChange(false);
+  }
+
+  // Auto-uppercase as user types
+  function handleGroupCodeChange(e) {
+    setValue("group_code", e.target.value.toUpperCase().replace(/[^A-Z0-9\-]/g, ""), {
+      shouldValidate: true,
+    });
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[440px]">
+        <DialogHeader>
+          <DialogTitle>Edit group</DialogTitle>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit(onValid)} className="space-y-4">
+          <div className="space-y-1.5">
+            <Label htmlFor="edit-name">
+              Name <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="edit-name"
+              {...register("name")}
+            />
+            {errors.name && (
+              <p className="text-sm text-destructive">{errors.name.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="edit-description">
+              Description <span className="text-destructive">*</span>
+            </Label>
+            <Textarea
+              id="edit-description"
+              className="resize-none"
+              rows={3}
+              {...register("description")}
+            />
+            {errors.description && (
+              <p className="text-sm text-destructive">{errors.description.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="edit-group_code">
+              Group code <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="edit-group_code"
+              placeholder="e.g. SALES-2025"
+              {...register("group_code")}
+              onChange={handleGroupCodeChange}
+            />
+            {errors.group_code && (
+              <p className="text-sm text-destructive">{errors.group_code.message}</p>
+            )}
+          </div>
+
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button type="button" variant="outline" disabled={loading}>Cancel</Button>
+            </DialogClose>
+            <Button type="submit" disabled={loading}>
+              {loading ? "Saving..." : "Save changes"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/components/user_groups/GroupTable.jsx b/apps/web/src/modules/admin/components/user_groups/GroupTable.jsx
new file mode 100644
index 0000000..8f5e552
--- /dev/null
+++ b/apps/web/src/modules/admin/components/user_groups/GroupTable.jsx
@@ -0,0 +1,210 @@
+// modules/admin/components/user_groups/GroupTable.jsx
+
+import { useMemo, useRef, useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useUserGroups } from "@/contexts/AdminUserGroupContext";
+import { useDashboard } from "@/contexts/AdminDashboardContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
+import { TableDashboard } from "@/components/generic/Dashboard/TableDashboard";
+import { AddGroupDialog } from "./AddGroupDialog";
+import { EditGroupDialog } from "./EditGroupDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/user_groups/columns.config";
+import { buildToolbarActions } from "../../config/user_groups/toolbar.config";
+import { buildSelectionActions } from "../../config/user_groups/selection.config";
+import { buildRowActions } from "../../config/user_groups/rowActions.config";
+
+import { GROUP_STAT_MAP } from "@/data/adminDashboard.data";
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function GroupTable() {
+  const [createOpen, setCreateOpen] = useState(false);
+  const [editTarget, setEditTarget] = useState(null);
+  const [archiveTarget, setArchiveTarget] = useState(null);
+  const [archiveIds, setArchiveIds] = useState(null);
+
+  const tableRefsRef = useRef({
+    getFilters: () => [],
+    getSort: () => [],
+    resetSelection: () => { },
+    setFilters: () => { },
+  });
+
+  const navigate = useNavigate();
+
+  const { user: currentUser } = useAuth();
+
+  const {
+    groups, attributes, pagination, setPagination, loading,
+    fetchGroups, fetchGroupFieldValues,
+    createGroup, updateGroup, deactivateGroup, deactivateGroups,
+  } = useUserGroups();
+
+  const { groupsDashboard, fetchGroupsDashboard } = useDashboard();
+
+  useEffect(() => {
+    fetchGroupsDashboard();
+  }, []);
+
+  // ─── Keep activeFilters in sync for highlight ─────────────────────────────
+  const handleRefsReady = (refs) => {
+    tableRefsRef.current = refs; // ← no override needed
+  };
+
+  const exportConfig = {
+    allData: groups,
+    attributes,
+    filename: `${getTimestamp()}_UserGroups`,
+    sheetName: "UserGroups",
+    generatedBy: formatGeneratedBy(currentUser),
+  };
+
+  const rowActions = buildRowActions({
+    navigate,
+    onEdit: (row) => setEditTarget(row),
+    onArchive: (row) => setArchiveTarget(row),
+  });
+
+  const toolbarActions = buildToolbarActions({
+    fetchGroups, pagination, exportConfig, navigate,
+    onAddGroup: () => setCreateOpen(true),
+    getFilters: () => tableRefsRef.current.getFilters(),
+    getSort: () => tableRefsRef.current.getSort(),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const selectionActions = buildSelectionActions({
+    exportConfig,
+    archiveGroup: (row) => setArchiveTarget(row),
+    archiveGroups: (ids) => setArchiveIds(ids),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const columns = useMemo(
+    () => buildDataColumns(attributes, rowActions),
+    [attributes],
+  );
+
+  const handleArchiveSuccess = () => {
+    setArchiveTarget(null);
+    setArchiveIds(null);
+    tableRefsRef.current.resetSelection?.();
+    fetchGroups({ page: 1, limit: pagination.limit });
+    fetchGroupsDashboard();
+  };
+
+  // ─── Attach filterId/filterValue (or onClick) to each stat ────────────────
+  // "inactive" groups are effectively archived groups (deactivateGroup sets
+  // is_active=false and soft-deletes in the same action), so route straight
+  // to the archived groups page instead of toggling an in-table filter.
+  const dashboardStats = (groupsDashboard?.stats ?? []).map((s) => ({
+    ...s,
+    filterId: s.key === "active" ? "is_active" : null,
+    filterValue: s.key === "active" ? ["true"] : null,
+    onClick: s.key === "inactive" ? () => navigate("/admin/groups/archived") : undefined,
+  }));
+
+  // ─── top_groups bar has no filterable column in this table ────────────────
+  const dashboardBreakdowns = (groupsDashboard?.breakdowns ?? []).map((b) => ({
+    ...b,
+    filterId: null,
+  }));
+
+  return (
+    <>
+      {/* ── Dashboard strip ── */}
+      {groupsDashboard && (   // ← was dashboard?.groups
+        <TableDashboard
+          stats={dashboardStats}
+          breakdowns={dashboardBreakdowns}
+          statMap={GROUP_STAT_MAP}
+          tableRefsRef={tableRefsRef}
+        />
+      )}
+
+      {/* ── Data table ── */}
+      <DataTable
+        title="User Groups"
+        data={groups}
+        columns={columns}
+        attributes={attributes}
+        pagination={pagination}
+        setPagination={setPagination}
+        loading={loading}
+        onFetch={fetchGroups}
+        onFetchFilterData={fetchGroupFieldValues}
+        onRefsReady={handleRefsReady}
+        renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+          <FilterSheet
+            open={open}
+            onOpenChange={onOpenChange}
+            column={column}
+            attr={attr}
+            data={data}
+            loading={loading}
+          />
+        )}
+        columnPinning={columnPinning}
+        toolbarActions={toolbarActions}
+        selectionActions={selectionActions}
+        recordLabel="group"
+        emptyMessage="No user groups match the current filters."
+      />
+
+      {/* Add group */}
+      <AddGroupDialog
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        loading={loading}
+        onSubmit={async (values) => {
+          await createGroup(values);
+          setCreateOpen(false);
+          fetchGroups({ page: 1, limit: pagination.limit });
+          fetchGroupsDashboard();
+        }}
+      />
+
+      {/* Edit group */}
+      <EditGroupDialog
+        open={!!editTarget}
+        onOpenChange={(v) => !v && setEditTarget(null)}
+        group={editTarget}
+        loading={loading}
+        onSubmit={async (values) => {
+          await updateGroup(editTarget?.group_id, values);
+          setEditTarget(null);
+          fetchGroups({ page: 1, limit: pagination.limit });
+        }}
+      />
+
+      {/* Single archive */}
+      <ArchiveDialog
+        open={!!archiveTarget}
+        onOpenChange={(v) => !v && setArchiveTarget(null)}
+        entity={archiveTarget}
+        entityLabel="Group"
+        getName={(g) => g?.name}
+        onArchive={(g) => deactivateGroup(g?.group_id)}
+        loading={loading}
+        onSuccess={handleArchiveSuccess}
+      />
+
+      {/* Bulk archive */}
+      <ArchiveDialog
+        open={!!archiveIds}
+        onOpenChange={(v) => !v && setArchiveIds(null)}
+        ids={archiveIds ?? []}
+        entityLabel="Group"
+        onArchive={deactivateGroups}
+        loading={loading}
+        onSuccess={handleArchiveSuccess}
+      />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/components/users/ArchiveUserTable.jsx b/apps/web/src/modules/admin/components/users/ArchiveUserTable.jsx
new file mode 100644
index 0000000..1420a53
--- /dev/null
+++ b/apps/web/src/modules/admin/components/users/ArchiveUserTable.jsx
@@ -0,0 +1,164 @@
+import { useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useUsers } from "@/contexts/AdminUserContext";
+import { useAuth } from "@/contexts/AuthContext";
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { RestoreDialog } from "@/components/generic/Dialogs/RestoreDialog";
+import { PermanentDeleteDialog } from "@/components/generic/Dialogs/PermanentDeleteDialog";
+
+import { buildUserColumns, columnPinning } from "../../config/users/archive/columns.config";
+import { buildToolbarActions } from "../../config/users/archive/toolbar.config";
+import { buildSelectionActions } from "../../config/users/archive/selection.config";
+import { buildRowActions } from "../../config/users/archive/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function ArchiveGroupTable() {
+    const [restoreTarget, setRestoreTarget] = useState(null);   // single: row object
+    const [restoreIds, setRestoreIds] = useState(null);          // bulk: array of ids
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const [deleteIds, setDeleteIds] = useState(null);
+    const tableRefsRef = useRef({ getFilters: () => [], getSort: () => [], resetSelection: () => { } });
+    const navigate = useNavigate();
+    const { user: currentUser } = useAuth();
+
+    const {
+        users,
+        attributes,
+        pagination,
+        setPagination,
+        loading,
+        fetchArchivedUsers,
+        fetchUserFieldValues,
+        restoreUser,
+        restoreUsers,
+        permanentlyDeleteUser,
+        permanentlyDeleteUsers
+    } = useUsers();
+
+    // Shared export config — passed into toolbar + selection configs
+    const exportConfig = {
+        allData: users,
+        attributes,
+        filename: `${getTimestamp()}_ArchivedUserGroups`,
+        sheetName: "ArchivedUserGroups",
+        generatedBy: formatGeneratedBy(currentUser),
+    };
+
+    const rowActions = buildRowActions({
+        navigate,
+        onRestore: (row) => setRestoreTarget(row),
+        onDelete: (row) => setDeleteTarget(row),
+    });
+    const toolbarActions = buildToolbarActions({
+        fetchArchivedUsers, pagination, exportConfig, navigate,
+        getFilters: () => tableRefsRef.current.getFilters(),
+        getSort: () => tableRefsRef.current.getSort(),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+    const selectionActions = buildSelectionActions({
+        exportConfig,
+        restoreUser: (row) => setRestoreTarget(row),
+        restoreUsers: (ids) => setRestoreIds(ids),
+        onDeleteUser: (row) => setDeleteTarget(row),
+        onDeleteUsers: (ids) => setDeleteIds(ids),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const columns = useMemo(() => buildUserColumns(attributes, rowActions), [attributes]);
+
+    const handleRestoreSuccess = () => {
+        setRestoreTarget(null);
+        setRestoreIds(null);
+        tableRefsRef.current.resetSelection?.();   // ← clear selection
+        fetchArchivedUsers({ page: 1, limit: pagination.limit });
+    };
+
+    const handleDeleteSuccess = () => {
+        setDeleteTarget(null);
+        setDeleteIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedUsers({ page: 1, limit: pagination.limit });
+    };
+
+    return (
+        <>
+            <DataTable
+                title="Archived Users"
+                data={users}
+                columns={columns}
+                attributes={attributes}
+                pagination={pagination}
+                setPagination={setPagination}
+                loading={loading}
+                onFetch={fetchArchivedUsers}
+                onFetchFilterData={fetchUserFieldValues}
+                onRefsReady={(refs) => tableRefsRef.current = refs}
+                renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+                    <FilterSheet
+                        open={open}
+                        onOpenChange={onOpenChange}
+                        column={column}
+                        attr={attr}
+                        data={data}
+                        loading={loading}
+                    />
+                )}
+                columnPinning={columnPinning}
+                toolbarActions={toolbarActions}
+                selectionActions={selectionActions}
+                recordLabel="user"
+                emptyMessage="No users match the current filters."
+            />
+
+            {/* Single restore */}
+            <RestoreDialog
+                open={!!restoreTarget}
+                onOpenChange={(v) => !v && setRestoreTarget(null)}
+                entity={restoreTarget}
+                entityLabel="User"
+                getName={(u) => u?.personal_info?.name?.full_name ?? u?.email}
+                onRestore={(u) => restoreUser(u?.user_id)}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+
+            {/* Bulk restore */}
+            <RestoreDialog
+                open={!!restoreIds}
+                onOpenChange={(v) => !v && setRestoreIds(null)}
+                ids={restoreIds ?? []}
+                entityLabel="User"
+                onRestore={restoreUsers}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+
+            {/* Single permanent delete */}
+            <PermanentDeleteDialog
+                open={!!deleteTarget}
+                onOpenChange={(v) => !v && setDeleteTarget(null)}
+                entity={deleteTarget}
+                entityLabel="User"
+                getName={(u) => u?.personal_info?.name?.full_name ?? u?.email}
+                onDelete={(u) => permanentlyDeleteUser(u?.user_id)}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+
+            {/* Bulk permanent delete */}
+            <PermanentDeleteDialog
+                open={!!deleteIds}
+                onOpenChange={(v) => !v && setDeleteIds(null)}
+                ids={deleteIds ?? []}
+                entityLabel="User"
+                onDelete={permanentlyDeleteUsers}
+                loading={loading}
+                onSuccess={handleDeleteSuccess}
+            />
+        </>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/components/users/UserTable.jsx b/apps/web/src/modules/admin/components/users/UserTable.jsx
new file mode 100644
index 0000000..2489da8
--- /dev/null
+++ b/apps/web/src/modules/admin/components/users/UserTable.jsx
@@ -0,0 +1,281 @@
+// modules/admin/components/users/UsersTable.jsx
+
+import { useMemo, useRef, useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useUsers } from "@/contexts/AdminUserContext";
+import { useDashboard } from "@/contexts/AdminDashboardContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
+import { BanUserDialog } from "@/components/generic/Dialogs/BanUserDialog";
+import { UnbanDialog } from "@/components/generic/Dialogs/UnbanDialog";
+import { MakeAdminDialog } from "@/components/generic/Dialogs/MakeAdminDialog";
+import { DemoteAdminDialog } from "@/components/generic/Dialogs/DemoteAdminDialog";
+import { TableDashboard } from "@/components/generic/Dashboard/TableDashboard";
+
+import { buildDataColumns, columnPinning } from "../../config/users/columns.config";
+import { buildToolbarActions } from "../../config/users/toolbar.config";
+import { buildSelectionActions } from "../../config/users/selection.config";
+import { buildRowActions } from "../../config/users/rowActions.config";
+
+import { USER_STAT_MAP } from "@/data/adminDashboard.data";
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function UsersTable() {
+    const [archiveTarget, setArchiveTarget] = useState(null);
+    const [archiveIds, setArchiveIds] = useState(null);
+    const [banTarget, setBanTarget] = useState(null);
+    const [banIds, setBanIds] = useState(null);
+    const [unbanTarget, setUnbanTarget] = useState(null);
+    const [unbanIds, setUnbanIds] = useState(null);
+    const [makeAdminTarget, setMakeAdminTarget] = useState(null);
+    const [demoteAdminTarget, setDemoteAdminTarget] = useState(null);
+
+    const tableRefsRef = useRef({
+        getFilters: () => [],
+        getSort: () => [],
+        resetSelection: () => { },
+        setFilters: () => { },
+    });
+
+    const navigate = useNavigate();
+
+    const { user: currentUser } = useAuth();
+
+    const {
+        users, attributes, pagination, setPagination, loading,
+        fetchUsers, fetchUserFieldValues, deactivateUser, deactivateUsers,
+        banUser, unbanUser, bulkBanUsers, bulkUnbanUsers, makeAdmin, demoteAdmin,
+    } = useUsers();
+
+    const { usersDashboard, fetchUsersDashboard } = useDashboard();
+
+    useEffect(() => {
+        fetchUsersDashboard();
+    }, []);
+
+    // ─── Keep activeFilters in sync so TableDashboard can highlight active ────
+    const handleRefsReady = (refs) => {
+        tableRefsRef.current = refs; // ← just store directly, no override needed
+    };
+
+    const exportConfig = {
+        allData: users,
+        attributes,
+        filename: `${getTimestamp()}_Users`,
+        sheetName: "Users",
+        title: "Users",
+        generatedBy: formatGeneratedBy(currentUser),
+    };
+
+    const rowActions = buildRowActions({
+        navigate,
+        onArchive:   (row) => setArchiveTarget(row),
+        onBan:       (row) => setBanTarget(row),
+        onUnban:     (row) => setUnbanTarget(row),
+        onMakeAdmin:   (row) => setMakeAdminTarget(row),
+        onDemoteAdmin: (row) => setDemoteAdminTarget(row),
+        currentUserId: currentUser?.user_id,
+    });
+    const toolbarActions = buildToolbarActions({
+        fetchUsers, pagination, exportConfig, navigate,
+        getFilters: () => tableRefsRef.current.getFilters(),
+        getSort: () => tableRefsRef.current.getSort(),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+    const selectionActions = buildSelectionActions({
+        exportConfig,
+        archiveUser:  (row) => setArchiveTarget(row),
+        archiveUsers: (ids) => setArchiveIds(ids),
+        banUsers:     (ids) => setBanIds(ids),
+        unbanUsers:   (ids) => setUnbanIds(ids),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const columns = useMemo(() => buildDataColumns(attributes, rowActions), [attributes]);
+
+    const handleArchiveSuccess = () => {
+        setArchiveTarget(null);
+        setArchiveIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchUsers({ page: 1, limit: pagination.limit });
+        fetchUsersDashboard();
+    };
+
+    const handleBanSuccess = () => {
+        setBanTarget(null);
+        setBanIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchUsers({ page: 1, limit: pagination.limit });
+    };
+
+    const handleUnbanSuccess = () => {
+        setUnbanTarget(null);
+        setUnbanIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchUsers({ page: 1, limit: pagination.limit });
+    };
+
+    const handleMakeAdminSuccess = () => {
+        setMakeAdminTarget(null);
+        fetchUsers({ page: 1, limit: pagination.limit });
+    };
+
+    const handleDemoteAdminSuccess = () => {
+        setDemoteAdminTarget(null);
+        fetchUsers({ page: 1, limit: pagination.limit });
+    };
+
+    // ─── Attach filterId/filterValue (or onClick) to each stat ────────────────
+    const statsWithFilter = (usersDashboard?.stats ?? []).map((s) => ({
+        ...s,
+        filterId: s.key === "active" ? "is_active" : null,
+        filterValue: s.key === "active" ? ["true"] : null,
+        onClick: s.key === "inactive" ? () => navigate("/admin/users/archived") : undefined,
+    }));
+
+    // ─── Attach filterId to each breakdown so clicking a slice filters ────────
+    const dashboardBreakdowns = (usersDashboard?.breakdowns ?? []).map((b) => ({
+        ...b,
+        filterId: b.key === "acc_type" ? "acc_type"
+            : b.key === "reg_type" ? "reg_type"
+                : null,
+    }));
+
+    return (
+        <>
+            {/* ── Dashboard strip ── */}
+            {usersDashboard && (
+                <TableDashboard
+                    stats={statsWithFilter}
+                    breakdowns={dashboardBreakdowns}
+                    statMap={USER_STAT_MAP}
+                    tableRefsRef={tableRefsRef}
+                />
+            )}
+
+            {/* ── Data table ── */}
+            <DataTable
+                title="Users"
+                data={users}
+                columns={columns}
+                attributes={attributes}
+                pagination={pagination}
+                setPagination={setPagination}
+                loading={loading}
+                onFetch={fetchUsers}
+                onFetchFilterData={fetchUserFieldValues}
+                onRefsReady={handleRefsReady}
+                renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+                    <FilterSheet
+                        open={open}
+                        onOpenChange={onOpenChange}
+                        column={column}
+                        attr={attr}
+                        data={data}
+                        loading={loading}
+                    />
+                )}
+                columnPinning={columnPinning}
+                toolbarActions={toolbarActions}
+                selectionActions={selectionActions}
+                recordLabel="user"
+                emptyMessage="No users match the current filters."
+                enableRowSelection={(row) => row.original.user_id !== currentUser?.user_id}
+            />
+
+            {/* Single archive */}
+            <ArchiveDialog
+                open={!!archiveTarget}
+                onOpenChange={(v) => !v && setArchiveTarget(null)}
+                entity={archiveTarget}
+                entityLabel="User"
+                getName={(u) => u?.personal_info?.name?.full_name ?? u?.email}
+                onArchive={(u) => deactivateUser(u?.user_id)}
+                loading={loading}
+                onSuccess={handleArchiveSuccess}
+            />
+
+            {/* Bulk archive */}
+            <ArchiveDialog
+                open={!!archiveIds}
+                onOpenChange={(v) => !v && setArchiveIds(null)}
+                ids={archiveIds ?? []}
+                entityLabel="User"
+                onArchive={deactivateUsers}
+                loading={loading}
+                onSuccess={handleArchiveSuccess}
+            />
+
+            {/* Single ban */}
+            <BanUserDialog
+                open={!!banTarget}
+                onOpenChange={(v) => !v && setBanTarget(null)}
+                entity={banTarget}
+                entityLabel="User"
+                getName={(u) => u?.personal_info?.name?.full_name ?? u?.email}
+                onBan={(payload) => banUser(banTarget?.user_id, payload)}
+                loading={loading}
+                onSuccess={handleBanSuccess}
+            />
+
+            {/* Bulk ban */}
+            <BanUserDialog
+                open={!!banIds}
+                onOpenChange={(v) => !v && setBanIds(null)}
+                ids={banIds ?? []}
+                entityLabel="User"
+                onBan={(payload) => bulkBanUsers({ ids: banIds, ...payload })}
+                loading={loading}
+                onSuccess={handleBanSuccess}
+            />
+
+            {/* Single unban */}
+            <UnbanDialog
+                open={!!unbanTarget}
+                onOpenChange={(v) => !v && setUnbanTarget(null)}
+                entity={unbanTarget}
+                entityLabel="User"
+                getName={(u) => u?.personal_info?.name?.full_name ?? u?.email}
+                onUnban={(payload) => unbanUser(unbanTarget?.user_id, payload)}
+                loading={loading}
+                onSuccess={handleUnbanSuccess}
+            />
+
+            {/* Bulk unban */}
+            <UnbanDialog
+                open={!!unbanIds}
+                onOpenChange={(v) => !v && setUnbanIds(null)}
+                ids={unbanIds ?? []}
+                entityLabel="User"
+                onUnban={(payload) => bulkUnbanUsers({ ids: unbanIds, ...payload })}
+                loading={loading}
+                onSuccess={handleUnbanSuccess}
+            />
+
+            {/* Make admin */}
+            <MakeAdminDialog
+                open={!!makeAdminTarget}
+                onOpenChange={(v) => !v && setMakeAdminTarget(null)}
+                entity={makeAdminTarget}
+                onMakeAdmin={(u) => makeAdmin(u?.user_id)}
+                loading={loading}
+                onSuccess={handleMakeAdminSuccess}
+            />
+
+            {/* Demote admin */}
+            <DemoteAdminDialog
+                open={!!demoteAdminTarget}
+                onOpenChange={(v) => !v && setDemoteAdminTarget(null)}
+                entity={demoteAdminTarget}
+                onDemoteAdmin={(u) => demoteAdmin(u?.user_id)}
+                loading={loading}
+                onSuccess={handleDemoteAdminSuccess}
+            />
+        </>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/advertisements/archive/columns.config.jsx b/apps/web/src/modules/admin/config/advertisements/archive/columns.config.jsx
new file mode 100644
index 0000000..1dfbbc8
--- /dev/null
+++ b/apps/web/src/modules/admin/config/advertisements/archive/columns.config.jsx
@@ -0,0 +1,39 @@
+// config/advertisements/archive/columns.config.jsx
+
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+const DATE_TIME_FIELDS = ["start_date", "end_date", "createdAt", "updatedAt", "deletedAt"];
+
+/**
+ * Builds the full column array for the Archived Advertisements table.
+ *
+ * @param {Array}    attributes  Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions  Row-level kebab action definitions
+ * @param {Function} [fmtDateTime] - date+time formatter (from useDateFormat), falls back to a plain locale string
+ * @returns {Array}              TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions, fmtDateTime = (v) => v ? new Date(v).toLocaleString() : "—") {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+
+  // Ad scheduling is time-sensitive — the default date-only cell renderer
+  // drops the time-of-day, so these fields get an explicit date+time cell.
+  const cellOverrides = Object.fromEntries(
+    DATE_TIME_FIELDS.map((field) => [
+      field,
+      (info) => <span className="text-xs text-muted-foreground">{fmtDateTime(info.getValue())}</span>,
+    ])
+  );
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Ad Actions" }),
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/advertisements/archive/rowActions.config.jsx b/apps/web/src/modules/admin/config/advertisements/archive/rowActions.config.jsx
new file mode 100644
index 0000000..d245e8a
--- /dev/null
+++ b/apps/web/src/modules/admin/config/advertisements/archive/rowActions.config.jsx
@@ -0,0 +1,26 @@
+// config/advertisements/archive/rowActions.config.jsx
+import { RotateCcw, Trash2 } from "lucide-react";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.onRestore  (row) => void  — open restore dialog
+ * @param {Function} deps.onDelete   (row) => void  — open permanent-delete dialog
+ */
+export function buildRowActions({ onRestore, onDelete }) {
+    return [
+        {
+            key: "restore",
+            label: "Restore",
+            className: "text-emerald-600 focus:text-emerald-600",
+            icon: <RotateCcw className="h-3.5 w-3.5" />,
+            onClick: (row) => onRestore(row),
+        },
+        {
+            key: "delete",
+            label: "Delete",
+            className: "text-destructive focus:text-destructive",
+            icon: <Trash2 className="h-3.5 w-3.5" />,
+            onClick: (row) => onDelete(row),
+        },
+    ];
+}
diff --git a/apps/web/src/modules/admin/config/advertisements/archive/selection.config.jsx b/apps/web/src/modules/admin/config/advertisements/archive/selection.config.jsx
new file mode 100644
index 0000000..0174ac4
--- /dev/null
+++ b/apps/web/src/modules/admin/config/advertisements/archive/selection.config.jsx
@@ -0,0 +1,43 @@
+// config/advertisements/archive/selection.config.jsx
+import { Download, ArchiveRestore, Trash2 } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({ exportConfig, onSingleRestore, onBulkRestore, onSingleDelete, onBulkDelete, getTableInstance }) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows: rows,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+    {
+      key: "restore-selected",
+      label: "Restore",
+      icon: <ArchiveRestore className="h-3.5 w-3.5" />,
+      className: "text-emerald-600 border-emerald-600/40 hover:bg-emerald-600/10 hover:text-emerald-700",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.advertisement_id);
+        ids.length === 1
+          ? onSingleRestore(rows[0])
+          : onBulkRestore(ids);
+      },
+    },
+    {
+      key: "delete-selected",
+      label: "Delete",
+      icon: <Trash2 className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.advertisement_id);
+        ids.length === 1
+          ? onSingleDelete(rows[0])
+          : onBulkDelete(ids);
+      },
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/advertisements/archive/toolbar.config.jsx b/apps/web/src/modules/admin/config/advertisements/archive/toolbar.config.jsx
new file mode 100644
index 0000000..87f1554
--- /dev/null
+++ b/apps/web/src/modules/admin/config/advertisements/archive/toolbar.config.jsx
@@ -0,0 +1,51 @@
+// config/advertisements/archive/toolbar.config.jsx
+import { RefreshCw, Download, Ban } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.fetchAdvertisements
+ * @param {Object}   deps.pagination
+ * @param {Object}   deps.exportConfig
+ * @param {Function} deps.navigate
+ * @param {Function} deps.getFilters
+ * @param {Function} deps.getSort
+ * @param {Function} deps.getTableInstance
+ * @param {Function} [deps.onRemoveExpired]  - triggers the "Remove Expired" bulk-purge flow
+ */
+export function buildToolbarActions({ fetchAdvertisements, pagination, exportConfig, navigate, getFilters, getSort, getTableInstance, onRemoveExpired }) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      icon: <RefreshCw className="h-3.5 w-3.5" />,
+      label: "Refresh",
+      onClick: () =>
+        fetchAdvertisements({
+          page: 1,
+          limit: pagination.limit,
+          filters: getFilters(),
+          sort: getSort(),
+        }),
+    },
+    {
+      key: "export",
+      type: "button",
+      icon: <Download className="h-3.5 w-3.5" />,
+      label: "Export",
+      onClick: (table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+    ...(onRemoveExpired ? [{
+      key: "remove-expired",
+      type: "button",
+      icon: <Ban className="h-3.5 w-3.5" />,
+      label: "Remove Expired",
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: onRemoveExpired,
+    }] : []),
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/assets/archive/columns.config.jsx b/apps/web/src/modules/admin/config/assets/archive/columns.config.jsx
new file mode 100644
index 0000000..6106ff2
--- /dev/null
+++ b/apps/web/src/modules/admin/config/assets/archive/columns.config.jsx
@@ -0,0 +1,51 @@
+// config/columns.config.jsx
+// Column definitions and pinning config for the Users table.
+
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { Badge } from "@/components/ui/badge";
+import { Users } from "lucide-react";
+import { formatFileSize } from "@/utils/format.util";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+// ─── Custom cell overrides ────────────────────────────────────────────────────
+const cellOverrides = {
+  // memberCount: (info) => {
+  //   const count = parseInt(info.getValue() ?? 0, 10);
+  //   return (
+  //     <div className="flex items-center gap-1.5">
+  //       <Users className="h-3.5 w-3.5 text-muted-foreground" />
+  //       <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+  //         {count} {count === 1 ? "member" : "members"}
+  //       </Badge>
+  //     </div>
+  //   );
+  // },
+  file_size: (info) => (
+    <span className="font-mono text-xs font-semibold text-muted-foreground">
+      {formatFileSize(info.getValue()) ?? "-"}
+    </span>
+  ),
+};
+
+/**
+ * Builds the full column array for the Users table.
+ *
+ * @param {Array}    attributes  Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions  Row-level kebab action definitions
+ * @returns {Array}              TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "File Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/assets/archive/rowActions.config.jsx b/apps/web/src/modules/admin/config/assets/archive/rowActions.config.jsx
new file mode 100644
index 0000000..8e913b2
--- /dev/null
+++ b/apps/web/src/modules/admin/config/assets/archive/rowActions.config.jsx
@@ -0,0 +1,28 @@
+// modules/admin/config/assets/rowActions.config.jsx
+import { RotateCcw, Trash2 } from "lucide-react";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.onView     (row) → void  — navigate to view page
+ * @param {Function} deps.onEdit     (row) → void  — navigate to edit page
+ * @param {Function} deps.onArchive  (row) → void  — open archive dialog
+ */
+export function buildRowActions({ onRestore, onDelete }) {
+    return [
+        {
+            key: "restore",
+            label: "Restore",
+            className: "text-emerald-600 focus:text-emerald-600",
+            icon: <RotateCcw className="h-3.5 w-3.5" />,
+            onClick: (row) => onRestore(row),
+            hidden: (row) => row.is_active,
+        },
+        {
+            key: "delete",
+            label: "Delete",
+            className: "text-destructive focus:text-destructive",
+            icon: <Trash2 className="h-3.5 w-3.5" />,
+            onClick: (row) => onDelete(row),
+        },
+    ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/assets/archive/selection.config.jsx b/apps/web/src/modules/admin/config/assets/archive/selection.config.jsx
new file mode 100644
index 0000000..e74fdc7
--- /dev/null
+++ b/apps/web/src/modules/admin/config/assets/archive/selection.config.jsx
@@ -0,0 +1,43 @@
+// config/assets/archive/selection.config.jsx
+import { Download, ArchiveRestore, Trash2 } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({ exportConfig, onSingleRestore, onBulkRestore, onSingleDelete, onBulkDelete, getTableInstance }) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows: rows,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+    {
+      key: "restore-selected",
+      label: "Restore",
+      icon: <ArchiveRestore className="h-3.5 w-3.5" />,
+      className: "text-emerald-600 border-emerald-600/40 hover:bg-emerald-600/10 hover:text-emerald-700",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.asset_id);
+        ids.length === 1
+          ? onSingleRestore(rows[0])
+          : onBulkRestore(ids);
+      },
+    },
+    {
+      key: "delete-selected",
+      label: "Delete",
+      icon: <Trash2 className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.asset_id);
+        ids.length === 1
+          ? onSingleDelete(rows[0])
+          : onBulkDelete(ids);
+      },
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/assets/archive/toolbar.config.jsx b/apps/web/src/modules/admin/config/assets/archive/toolbar.config.jsx
new file mode 100644
index 0000000..0e2f24c
--- /dev/null
+++ b/apps/web/src/modules/admin/config/assets/archive/toolbar.config.jsx
@@ -0,0 +1,42 @@
+// ─── config/toolbar.config.jsx ────────────────────────────────────────────────
+import { RefreshCw, Download, Plus, Archive } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.fetchAssets
+ * @param {Object}   deps.pagination
+ * @param {Object}   deps.exportConfig
+ * @param {Function} deps.navigate
+ * @param {Function} deps.getFilters
+ * @param {Function} deps.getSort
+ * @param {Function} deps.getTableInstance
+ */
+export function buildToolbarActions({ fetchAssets, pagination, exportConfig, navigate, getFilters, getSort, getTableInstance }) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      icon: <RefreshCw className="h-3.5 w-3.5" />,
+      label: "Refresh",
+      onClick: () =>
+        fetchAssets({
+          page: 1,
+          limit: pagination.limit,
+          filters: getFilters(),
+          sort: getSort(),
+        }),
+    },
+    {
+      key: "export",
+      type: "button",
+      icon: <Download className="h-3.5 w-3.5" />,
+      label: "Export",
+      onClick: (table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/assets/columns.config.jsx b/apps/web/src/modules/admin/config/assets/columns.config.jsx
new file mode 100644
index 0000000..6106ff2
--- /dev/null
+++ b/apps/web/src/modules/admin/config/assets/columns.config.jsx
@@ -0,0 +1,51 @@
+// config/columns.config.jsx
+// Column definitions and pinning config for the Users table.
+
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { Badge } from "@/components/ui/badge";
+import { Users } from "lucide-react";
+import { formatFileSize } from "@/utils/format.util";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+// ─── Custom cell overrides ────────────────────────────────────────────────────
+const cellOverrides = {
+  // memberCount: (info) => {
+  //   const count = parseInt(info.getValue() ?? 0, 10);
+  //   return (
+  //     <div className="flex items-center gap-1.5">
+  //       <Users className="h-3.5 w-3.5 text-muted-foreground" />
+  //       <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+  //         {count} {count === 1 ? "member" : "members"}
+  //       </Badge>
+  //     </div>
+  //   );
+  // },
+  file_size: (info) => (
+    <span className="font-mono text-xs font-semibold text-muted-foreground">
+      {formatFileSize(info.getValue()) ?? "-"}
+    </span>
+  ),
+};
+
+/**
+ * Builds the full column array for the Users table.
+ *
+ * @param {Array}    attributes  Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions  Row-level kebab action definitions
+ * @returns {Array}              TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "File Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/assets/rowActions.config.jsx b/apps/web/src/modules/admin/config/assets/rowActions.config.jsx
new file mode 100644
index 0000000..5a90569
--- /dev/null
+++ b/apps/web/src/modules/admin/config/assets/rowActions.config.jsx
@@ -0,0 +1,27 @@
+// modules/admin/config/assets/rowActions.config.jsx
+
+import { Eye, Archive } from "lucide-react";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.onView     (row) → void  — navigate to view page
+ * @param {Function} deps.onArchive  (row) → void  — open archive dialog
+ */
+export function buildRowActions({ onView, onArchive }) {
+    return [
+        {
+            key:     "view",
+            label:   "View Info",
+            icon:    <Eye className="h-3.5 w-3.5" />,
+            onClick: (row) => onView(row),
+        },
+        {
+            key:       "archive",
+            label:     "Archive",
+            icon:      <Archive className="h-3.5 w-3.5" />,
+            className: "text-destructive",
+            onClick:   (row) => onArchive(row),
+            separator: true
+        },
+    ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/assets/selection.config.jsx b/apps/web/src/modules/admin/config/assets/selection.config.jsx
new file mode 100644
index 0000000..39643d8
--- /dev/null
+++ b/apps/web/src/modules/admin/config/assets/selection.config.jsx
@@ -0,0 +1,38 @@
+// config/selection.config.jsx
+import { Download, Archive, Trash2 } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+/**
+ * @param {Object}   deps
+ * @param {Object}   deps.exportConfig
+ * @param {Function} deps.onArchive        (row)  → void  single archive dialog
+ * @param {Function} deps.onArchiveMany    (ids[]) → void  bulk archive dialog
+ * @param {Function} deps.getTableInstance
+ */
+export function buildSelectionActions({ exportConfig, onArchive, onArchiveMany, getTableInstance, }) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows: rows,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+    {
+      key: "archive-selected",
+      label: "Archive",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.asset_id);
+        ids.length === 1
+          ? onArchive(rows[0])
+          : onArchiveMany(ids);
+      },
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/assets/toolbar.config.jsx b/apps/web/src/modules/admin/config/assets/toolbar.config.jsx
new file mode 100644
index 0000000..59ed456
--- /dev/null
+++ b/apps/web/src/modules/admin/config/assets/toolbar.config.jsx
@@ -0,0 +1,69 @@
+// ─── config/toolbar.config.jsx ────────────────────────────────────────────────
+import { RefreshCw, Download, Plus, Archive, UploadCloud } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.fetchAssets
+ * @param {Object}   deps.pagination
+ * @param {Object}   deps.exportConfig
+ * @param {Function} deps.navigate
+ * @param {Function} deps.getFilters
+ * @param {Function} deps.getSort
+ * @param {Function} deps.getTableInstance
+ */
+export function buildToolbarActions({ fetchAssets, pagination, exportConfig, navigate, getFilters, getSort, getTableInstance }) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      icon: <RefreshCw className="h-3.5 w-3.5" />,
+      label: "Refresh",
+      onClick: () =>
+        fetchAssets({
+          page: 1,
+          limit: pagination.limit,
+          filters: getFilters(),
+          sort: getSort(),
+        }),
+    },
+    {
+      key: "export",
+      type: "button",
+      icon: <Download className="h-3.5 w-3.5" />,
+      label: "Export",
+      onClick: (table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+    {
+      key: "add-asset",
+      type: "button",
+      icon: <Plus className="h-3.5 w-3.5" />,
+      label: "Add File",
+      variant: "default",
+      className: "text-primary-foreground",
+      onClick: () => navigate("add"),
+    },
+    {
+      key: "bulk-upload",
+      type: "button",
+      icon: <UploadCloud className="h-3.5 w-3.5" />,
+      label: "Bulk Upload",
+      variant: "secondary",
+      className: "border border-border",
+      onClick: () => navigate("add/bulk"),
+    },
+    {
+      key: "archived-users",
+      type: "button",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      label: "Archived Files",
+      variant: "secondary",
+      className: "border border-border",
+      onClick: () => navigate("/admin/assets/archived"),
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/categories/archive/rowActions.config.jsx b/apps/web/src/modules/admin/config/categories/archive/rowActions.config.jsx
new file mode 100644
index 0000000..ab1411a
--- /dev/null
+++ b/apps/web/src/modules/admin/config/categories/archive/rowActions.config.jsx
@@ -0,0 +1,21 @@
+import { RotateCcw, Trash2 } from "lucide-react";
+
+export function buildRowActions({ onRestore, onDelete }) {
+  return [
+    {
+      key:       "restore",
+      label:     "Restore",
+      icon:      <RotateCcw className="h-3.5 w-3.5" />,
+      className: "text-emerald-600",
+      onClick:   (row) => onRestore(row),
+    },
+    {
+      key:       "delete",
+      label:     "Delete",
+      icon:      <Trash2 className="h-3.5 w-3.5" />,
+      className: "text-destructive focus:text-destructive",
+      onClick:   (row) => onDelete(row),
+      separator: true,
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/categories/archive/selection.config.jsx b/apps/web/src/modules/admin/config/categories/archive/selection.config.jsx
new file mode 100644
index 0000000..905c1b3
--- /dev/null
+++ b/apps/web/src/modules/admin/config/categories/archive/selection.config.jsx
@@ -0,0 +1,26 @@
+import { RotateCcw, Trash2 } from "lucide-react";
+
+export function buildSelectionActions({ onRestore, onRestoreMany, onDelete, onDeleteMany }) {
+  return [
+    {
+      key:       "restore-selected",
+      label:     "Restore",
+      icon:      <RotateCcw className="h-3.5 w-3.5" />,
+      className: "text-emerald-600 border-emerald-200 hover:bg-emerald-50",
+      onClick:   (rows) => {
+        const ids = rows.map((r) => r.id);
+        ids.length === 1 ? onRestore(rows[0]) : onRestoreMany(ids);
+      },
+    },
+    {
+      key:       "delete-selected",
+      label:     "Delete",
+      icon:      <Trash2 className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick:   (rows) => {
+        const ids = rows.map((r) => r.id);
+        ids.length === 1 ? onDelete(rows[0]) : onDeleteMany(ids);
+      },
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/categories/archive/toolbar.config.jsx b/apps/web/src/modules/admin/config/categories/archive/toolbar.config.jsx
new file mode 100644
index 0000000..adce119
--- /dev/null
+++ b/apps/web/src/modules/admin/config/categories/archive/toolbar.config.jsx
@@ -0,0 +1,41 @@
+import { RefreshCw, Download, ArchiveRestore } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({ fetchCategories, pagination, exportConfig, navigate, getFilters, getSort, getTableInstance }) {
+  return [
+    {
+      key:     "refresh",
+      type:    "button",
+      label:   "Refresh",
+      icon:    <RefreshCw className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => fetchCategories({
+        page:     1,
+        limit:    pagination?.limit ?? 10,
+        filters:  getFilters(),
+        sort:     getSort(),
+        archived: true,
+      }),
+    },
+    {
+      key:     "export",
+      type:    "button",
+      label:   "Export",
+      icon:    <Download className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => exportTableToExcel({
+        ...exportConfig,
+        tableInstance: getTableInstance(),
+      }),
+    },
+    {
+      key:       "active",
+      type:      "button",
+      label:     "Active Categories",
+      icon:      <ArchiveRestore className="h-3.5 w-3.5" />,
+      variant:   "secondary",
+      className: "border border-border",
+      onClick:   () => navigate("/admin/courses/categories"),
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/categories/columns.config.jsx b/apps/web/src/modules/admin/config/categories/columns.config.jsx
new file mode 100644
index 0000000..e9db3ff
--- /dev/null
+++ b/apps/web/src/modules/admin/config/categories/columns.config.jsx
@@ -0,0 +1,19 @@
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+  const dataColumns = buildColumns(visibleAttributes);
+
+  return [
+    buildSelectionColumn(),
+    ...dataColumns,
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Category Actions" }),
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/categories/rowActions.config.jsx b/apps/web/src/modules/admin/config/categories/rowActions.config.jsx
new file mode 100644
index 0000000..bc1efad
--- /dev/null
+++ b/apps/web/src/modules/admin/config/categories/rowActions.config.jsx
@@ -0,0 +1,20 @@
+import { Pencil, Trash2 } from "lucide-react";
+
+export function buildRowActions({ navigate, onArchive }) {
+  return [
+    {
+      key:     "edit",
+      label:   "Edit",
+      icon:    <Pencil className="h-3.5 w-3.5" />,
+      onClick: (row) => navigate(`/admin/courses/categories/${row.id}/edit`),
+    },
+    {
+      key:       "archive",
+      label:     "Archive",
+      icon:      <Trash2 className="h-3.5 w-3.5" />,
+      className: "text-destructive",
+      onClick:   (row) => onArchive(row),
+      separator: true,
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/categories/selection.config.jsx b/apps/web/src/modules/admin/config/categories/selection.config.jsx
new file mode 100644
index 0000000..29db9a9
--- /dev/null
+++ b/apps/web/src/modules/admin/config/categories/selection.config.jsx
@@ -0,0 +1,16 @@
+import { Archive } from "lucide-react";
+
+export function buildSelectionActions({ onArchive, onArchiveMany }) {
+  return [
+    {
+      key:       "archive-selected",
+      label:     "Archive",
+      icon:      <Archive className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick:   (rows) => {
+        const ids = rows.map((r) => r.id);
+        ids.length === 1 ? onArchive(rows[0]) : onArchiveMany(ids);
+      },
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/categories/toolbar.config.jsx b/apps/web/src/modules/admin/config/categories/toolbar.config.jsx
new file mode 100644
index 0000000..e2d215f
--- /dev/null
+++ b/apps/web/src/modules/admin/config/categories/toolbar.config.jsx
@@ -0,0 +1,48 @@
+import { Plus, RefreshCw, Download, Archive } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({ fetchCategories, pagination, exportConfig, navigate, getFilters, getSort, getTableInstance }) {
+  return [
+    {
+      key:     "refresh",
+      type:    "button",
+      label:   "Refresh",
+      icon:    <RefreshCw className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => fetchCategories({
+        page:    1,
+        limit:   pagination?.limit ?? 10,
+        filters: getFilters(),
+        sort:    getSort(),
+      }),
+    },
+    {
+      key:     "export",
+      type:    "button",
+      label:   "Export",
+      icon:    <Download className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => exportTableToExcel({
+        ...exportConfig,
+        tableInstance: getTableInstance(),
+      }),
+    },
+    {
+      key:     "create",
+      type:    "button",
+      label:   "Add Category",
+      icon:    <Plus className="h-3.5 w-3.5" />,
+      variant: "default",
+      onClick: () => navigate("/admin/courses/categories/add"),
+    },
+    {
+      key:       "archived",
+      type:      "button",
+      label:     "Archived",
+      icon:      <Archive className="h-3.5 w-3.5" />,
+      variant:   "secondary",
+      className: "border border-border",
+      onClick:   () => navigate("/admin/courses/categories/archived"),
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/courses/archive/columns.config.jsx b/apps/web/src/modules/admin/config/courses/archive/columns.config.jsx
new file mode 100644
index 0000000..25a1d56
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/archive/columns.config.jsx
@@ -0,0 +1,70 @@
+// config/columns.config.jsx
+// Column definitions and pinning config for the Users table.
+
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { Badge } from "@/components/ui/badge";
+import { Book, BookOpenCheck, Clock } from "lucide-react";
+import { formatDuration } from "@/utils/timestamp.util";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+
+// ─── Custom cell overrides ────────────────────────────────────────────────────
+const cellOverrides = {
+  unitCount: (info) => {
+    const count = parseInt(info.getValue() ?? 0, 10);
+    return (
+      <div className="flex items-center gap-1.5">
+        <Book className="h-3.5 w-3.5 text-muted-foreground" />
+        <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+          {count} {count === 1 ? "unit" : "units"}
+        </Badge>
+      </div>
+    );
+  },
+  lessonCount: (info) => {
+    const count = parseInt(info.getValue() ?? 0, 10);
+    return (
+      <div className="flex items-center gap-1.5">
+        <BookOpenCheck className="h-3.5 w-3.5 text-muted-foreground" />
+        <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+          {count} {count === 1 ? "lesson" : "lessons"}
+        </Badge>
+      </div>
+    );
+  },
+  duration_seconds: (info) => {
+    const seconds = parseInt(info.getValue() ?? 0, 10);
+
+    return (
+      <div className="flex items-center gap-1.5">
+        <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+        <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+          {formatDuration(seconds)}
+        </Badge>
+      </div>
+    );
+  },
+};
+
+/**
+ * Builds the full column array for the Users table.
+ *
+ * @param {Array}    attributes  Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions  Row-level kebab action definitions
+ * @returns {Array}              TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Course Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/courses/archive/rowActions.config.jsx b/apps/web/src/modules/admin/config/courses/archive/rowActions.config.jsx
new file mode 100644
index 0000000..9282afd
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/archive/rowActions.config.jsx
@@ -0,0 +1,27 @@
+// modules/admin/config/assets/rowActions.config.jsx
+import { RotateCcw, Trash2 } from "lucide-react";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.onView     (row) → void  — navigate to view page
+ * @param {Function} deps.onEdit     (row) → void  — navigate to edit page
+ * @param {Function} deps.onArchive  (row) → void  — open archive dialog
+ */
+export function buildRowActions({ onRestore, onDelete }) {
+    return [
+        {
+            key: "restore",
+            label: "Restore",
+            className: "text-emerald-600 focus:text-emerald-600",
+            icon: <RotateCcw className="h-3.5 w-3.5" />,
+            onClick: (row) => onRestore(row),
+        },
+        {
+            key: "delete",
+            label: "Delete",
+            className: "text-destructive focus:text-destructive",
+            icon: <Trash2 className="h-3.5 w-3.5" />,
+            onClick: (row) => onDelete(row),
+        },
+    ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/courses/archive/selection.config.jsx b/apps/web/src/modules/admin/config/courses/archive/selection.config.jsx
new file mode 100644
index 0000000..4777a84
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/archive/selection.config.jsx
@@ -0,0 +1,43 @@
+// config/assets/archive/selection.config.jsx
+import { Download, ArchiveRestore, Trash2 } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({ exportConfig, restoreCourse, restoreCourses, deleteCourse, deleteCourses, getTableInstance }) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows: rows,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+    {
+      key: "restore-selected",
+      label: "Restore",
+      icon: <ArchiveRestore className="h-3.5 w-3.5" />,
+      className: "text-emerald-600 border-emerald-600/40 hover:bg-emerald-600/10 hover:text-emerald-700",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.course_id);
+        ids.length === 1
+          ? restoreCourse(rows[0])
+          : restoreCourses(ids);
+      },
+    },
+    {
+      key: "delete-selected",
+      label: "Delete",
+      icon: <Trash2 className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.course_id);
+        ids.length === 1
+          ? deleteCourse(rows[0])
+          : deleteCourses(ids);
+      },
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/courses/archive/toolbar.config.jsx b/apps/web/src/modules/admin/config/courses/archive/toolbar.config.jsx
new file mode 100644
index 0000000..2f9c594
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/archive/toolbar.config.jsx
@@ -0,0 +1,39 @@
+import { Plus, RefreshCw, Download, Archive } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({
+  fetchArchivedCourses,
+  pagination,
+  exportConfig,
+  navigate,
+  getFilters,
+  getSort,
+  getTableInstance,
+}) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      label: "Refresh",
+      icon: <RefreshCw className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => fetchArchivedCourses({
+        page: 1,
+        limit: pagination?.limit ?? 10,
+        filters: getFilters(),
+        sort: getSort(),
+      }),
+    },
+    {
+      key: "export",
+      type: "button",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => exportTableToExcel({
+        ...exportConfig,
+        tableInstance: getTableInstance(),
+      }),
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/courses/columns.config.jsx b/apps/web/src/modules/admin/config/courses/columns.config.jsx
new file mode 100644
index 0000000..2983b0e
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/columns.config.jsx
@@ -0,0 +1,89 @@
+// config/columns.config.jsx
+// Column definitions and pinning config for the Users table.
+
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { Badge } from "@/components/ui/badge";
+import { Book, BookOpenCheck, Clock, Tag } from "lucide-react";
+import * as LucideIcons from "lucide-react";
+import { formatDuration } from "@/utils/timestamp.util";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+
+// ─── Custom cell overrides ────────────────────────────────────────────────────
+function buildCellOverrides(tierMap) {
+  return {
+  unitCount: (info) => {
+    const count = parseInt(info.getValue() ?? 0, 10);
+    return (
+      <div className="flex items-center gap-1.5">
+        <Book className="h-3.5 w-3.5 text-muted-foreground" />
+        <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+          {count} {count === 1 ? "unit" : "units"}
+        </Badge>
+      </div>
+    );
+  },
+  lessonCount: (info) => {
+    const count = parseInt(info.getValue() ?? 0, 10);
+    return (
+      <div className="flex items-center gap-1.5">
+        <BookOpenCheck className="h-3.5 w-3.5 text-muted-foreground" />
+        <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+          {count} {count === 1 ? "lesson" : "lessons"}
+        </Badge>
+      </div>
+    );
+  },
+  duration_seconds: (info) => {
+    const seconds = parseInt(info.getValue() ?? 0, 10);
+
+    return (
+      <div className="flex items-center gap-1.5">
+        <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+        <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+          {formatDuration(seconds)}
+        </Badge>
+      </div>
+    );
+  },
+  subscription: (info) => {
+    const slug = info.getValue();
+    if (!slug) return <span className="text-muted-foreground/40">-</span>;
+
+    const { label, cls } = resolveTierBadge(slug, tierMap);
+    const Icon = LucideIcons[tierMap[slug]?.badge_icon] ?? Tag;
+    return (
+      <Badge className={cls}>
+        <Icon className="size-3" />
+        {label}
+      </Badge>
+    );
+  },
+  };
+}
+
+/**
+ * Builds the full column array for the Users table.
+ *
+ * @param {Array}    attributes  Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions  Row-level kebab action definitions
+ * @param {Object}   tierMap     slug → tier category, for colored Subscription badges
+ * @returns {Array}              TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions, tierMap = {}) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+  const cellOverrides = buildCellOverrides(tierMap);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Course Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/courses/lessons/archive/columns.config.jsx b/apps/web/src/modules/admin/config/courses/lessons/archive/columns.config.jsx
new file mode 100644
index 0000000..8f51e87
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/lessons/archive/columns.config.jsx
@@ -0,0 +1,47 @@
+// config/columns.config.jsx
+// Column definitions and pinning config for the Users table.
+
+import { Badge } from "@/components/ui/badge";
+import { Clock } from "lucide-react";
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { formatDuration } from "@/utils/timestamp.util";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+// ─── Custom cell overrides ────────────────────────────────────────────────────
+const cellOverrides = {
+  duration_seconds: (info) => {
+    const seconds = parseInt(info.getValue() ?? 0, 10);
+
+    return (
+      <div className="flex items-center gap-1.5">
+        <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+        <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+          {formatDuration(seconds)}
+        </Badge>
+      </div>
+    );
+  },
+};
+
+/**
+ * Builds the full column array for the Users table.
+ *
+ * @param {Array}    attributes  Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions  Row-level kebab action definitions
+ * @returns {Array}              TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Lesson Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/courses/lessons/archive/rowActions.config.jsx b/apps/web/src/modules/admin/config/courses/lessons/archive/rowActions.config.jsx
new file mode 100644
index 0000000..9282afd
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/lessons/archive/rowActions.config.jsx
@@ -0,0 +1,27 @@
+// modules/admin/config/assets/rowActions.config.jsx
+import { RotateCcw, Trash2 } from "lucide-react";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.onView     (row) → void  — navigate to view page
+ * @param {Function} deps.onEdit     (row) → void  — navigate to edit page
+ * @param {Function} deps.onArchive  (row) → void  — open archive dialog
+ */
+export function buildRowActions({ onRestore, onDelete }) {
+    return [
+        {
+            key: "restore",
+            label: "Restore",
+            className: "text-emerald-600 focus:text-emerald-600",
+            icon: <RotateCcw className="h-3.5 w-3.5" />,
+            onClick: (row) => onRestore(row),
+        },
+        {
+            key: "delete",
+            label: "Delete",
+            className: "text-destructive focus:text-destructive",
+            icon: <Trash2 className="h-3.5 w-3.5" />,
+            onClick: (row) => onDelete(row),
+        },
+    ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/courses/lessons/archive/selection.config.jsx b/apps/web/src/modules/admin/config/courses/lessons/archive/selection.config.jsx
new file mode 100644
index 0000000..7664878
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/lessons/archive/selection.config.jsx
@@ -0,0 +1,43 @@
+// config/assets/archive/selection.config.jsx
+import { Download, ArchiveRestore, Trash2 } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({ exportConfig, restoreLesson, restoreLessons, deleteLesson, deleteLessons, getTableInstance }) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows: rows,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+    {
+      key: "restore-selected",
+      label: "Restore",
+      icon: <ArchiveRestore className="h-3.5 w-3.5" />,
+      className: "text-emerald-600 border-emerald-600/40 hover:bg-emerald-600/10 hover:text-emerald-700",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.lesson_id);
+        ids.length === 1
+          ? restoreLesson(rows[0])
+          : restoreLessons(ids);
+      },
+    },
+    {
+      key: "delete-selected",
+      label: "Delete",
+      icon: <Trash2 className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.lesson_id);
+        ids.length === 1
+          ? deleteLesson(rows[0])
+          : deleteLessons(ids);
+      },
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/courses/lessons/archive/toolbar.config.jsx b/apps/web/src/modules/admin/config/courses/lessons/archive/toolbar.config.jsx
new file mode 100644
index 0000000..1ed4935
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/lessons/archive/toolbar.config.jsx
@@ -0,0 +1,39 @@
+import { Plus, RefreshCw, Download, Archive } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({
+  fetchArchivedLessons,
+  pagination,
+  exportConfig,
+  navigate,
+  getFilters,
+  getSort,
+  getTableInstance,
+}) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      label: "Refresh",
+      icon: <RefreshCw className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => fetchArchivedLessons({
+        page: 1,
+        limit: pagination?.limit ?? 10,
+        filters: getFilters(),
+        sort: getSort(),
+      }),
+    },
+    {
+      key: "export",
+      type: "button",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => exportTableToExcel({
+        ...exportConfig,
+        tableInstance: getTableInstance(),
+      }),
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/courses/lessons/columns.config.jsx b/apps/web/src/modules/admin/config/courses/lessons/columns.config.jsx
new file mode 100644
index 0000000..8183960
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/lessons/columns.config.jsx
@@ -0,0 +1,68 @@
+// config/columns.config.jsx
+// Column definitions and pinning config for the Users table.
+
+import { Badge } from "@/components/ui/badge";
+import { Clock, Tag } from "lucide-react";
+import * as LucideIcons from "lucide-react";
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { formatDuration } from "@/utils/timestamp.util";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+// ─── Custom cell overrides ────────────────────────────────────────────────────
+function buildCellOverrides(tierMap, unitSubscription, courseSubscription) {
+  return {
+  duration_seconds: (info) => {
+    const seconds = parseInt(info.getValue() ?? 0, 10);
+
+    return (
+      <div className="flex items-center gap-1.5">
+        <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+        <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+          {formatDuration(seconds)}
+        </Badge>
+      </div>
+    );
+  },
+  subscription: (info) => {
+    const slug = info.getValue() || unitSubscription || courseSubscription;
+    if (!slug) return <span className="text-muted-foreground/40">-</span>;
+
+    const { label, cls } = resolveTierBadge(slug, tierMap);
+    const Icon = LucideIcons[tierMap[slug]?.badge_icon] ?? Tag;
+    return (
+      <Badge className={cls}>
+        <Icon className="size-3" />
+        {label}
+      </Badge>
+    );
+  },
+  };
+}
+
+/**
+ * Builds the full column array for the Users table.
+ *
+ * @param {Array}    attributes         Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions         Row-level kebab action definitions
+ * @param {Object}   tierMap            slug → tier category, for colored Subscription badges
+ * @param {string}   unitSubscription   Parent unit's tier, used when the lesson has no direct tier of its own
+ * @param {string}   courseSubscription Parent course's tier, used when neither the lesson nor the unit has one
+ * @returns {Array}                     TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions, tierMap = {}, unitSubscription = null, courseSubscription = null) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+  const cellOverrides = buildCellOverrides(tierMap, unitSubscription, courseSubscription);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Lesson Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/courses/lessons/rowActions.config.jsx b/apps/web/src/modules/admin/config/courses/lessons/rowActions.config.jsx
new file mode 100644
index 0000000..9610654
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/lessons/rowActions.config.jsx
@@ -0,0 +1,20 @@
+import { Eye, Archive } from "lucide-react";
+
+export function buildRowActions({ onView, onArchive }) {
+  return [
+    {
+      key: "view",
+      label: "View Lesson",
+      icon: <Eye className="h-3.5 w-3.5" />,
+      onClick: (row) => onView(row),
+    },
+    {
+      key: "archive",
+      label: "Archive",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      className: "text-destructive",
+      onClick: (row) => onArchive(row),
+      separator: true
+    },
+  ]
+}
diff --git a/apps/web/src/modules/admin/config/courses/lessons/selection.config.jsx b/apps/web/src/modules/admin/config/courses/lessons/selection.config.jsx
new file mode 100644
index 0000000..b82b721
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/lessons/selection.config.jsx
@@ -0,0 +1,30 @@
+import { Download, Archive } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({ exportConfig, onArchive, onArchiveMany, getTableInstance }) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows: rows,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+    {
+      key: "archive-selected",
+      label: "Archive",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.lesson_id);
+        ids.length === 1
+          ? onArchive(rows[0])
+          : onArchiveMany(ids);
+      },
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/courses/lessons/toolbar.config.jsx b/apps/web/src/modules/admin/config/courses/lessons/toolbar.config.jsx
new file mode 100644
index 0000000..d9c02c4
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/lessons/toolbar.config.jsx
@@ -0,0 +1,62 @@
+// config/courses/lessons/toolbar.config.jsx
+
+import { Plus, RefreshCw, Download, Archive } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({
+  fetchLessons,
+  pagination,
+  exportConfig,
+  navigate,
+  courseId,
+  unitId,
+  getFilters,
+  getSort,
+  getTableInstance,
+}) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      label: "Refresh",
+      icon: <RefreshCw className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => fetchLessons({
+        page: 1,
+        limit: pagination?.limit ?? 10,
+        filters: getFilters(),
+        sort: getSort(),
+      }),
+    },
+    {
+      key: "export",
+      type: "button",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => exportTableToExcel({
+        ...exportConfig,
+        tableInstance: getTableInstance(),
+      }),
+    },
+    {
+      key: "create",
+      type: "button",
+      label: "New Lesson",
+      icon: <Plus className="h-3.5 w-3.5" />,
+      variant: "default",
+      onClick: () => navigate(
+        `/admin/courses/${courseId}/units/${unitId}/lessons/add`
+      ),
+    },
+     {
+      key: "archived-lessons",
+      type: "button",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      label: "Archived Lessons",
+      variant: "secondary",
+      className: "border border-border",
+      onClick: () => navigate(`/admin/courses/${courseId}/units/${unitId}/lessons/archived`),
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/courses/rowActions.config.jsx b/apps/web/src/modules/admin/config/courses/rowActions.config.jsx
new file mode 100644
index 0000000..832c812
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/rowActions.config.jsx
@@ -0,0 +1,35 @@
+import { Eye, Archive, ArrowUp, ArrowDown } from "lucide-react";
+
+export function buildRowActions({ onView, onEdit, onArchive, onMoveUp, onMoveDown, courses = [] }) {
+  return [
+    {
+      key: "view",
+      label: "View Info",
+      icon: <Eye className="h-3.5 w-3.5" />,
+      onClick: (row) => onView(row),
+    },
+    {
+      key: "move-up",
+      label: "Move Up",
+      icon: <ArrowUp className="h-3.5 w-3.5" />,
+      onClick: (row) => onMoveUp(row),
+      separator: true,
+      disabled: (row) => courses.findIndex((c) => c.course_id === row.course_id) <= 0,
+    },
+    {
+      key: "move-down",
+      label: "Move Down",
+      icon: <ArrowDown className="h-3.5 w-3.5" />,
+      onClick: (row) => onMoveDown(row),
+      disabled: (row) => courses.findIndex((c) => c.course_id === row.course_id) >= courses.length - 1,
+    },
+    {
+      key: "archive",
+      label: "Archive Course",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      className: "text-destructive",
+      onClick: (row) => onArchive(row),
+      separator: true,
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/courses/selection.config.jsx b/apps/web/src/modules/admin/config/courses/selection.config.jsx
new file mode 100644
index 0000000..47e1fad
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/selection.config.jsx
@@ -0,0 +1,30 @@
+import { Download, Archive } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({ exportConfig, onArchive, onArchiveMany, getTableInstance }) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows: rows,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+    {
+      key: "archive-selected",
+      label: "Archive",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.course_id);
+        ids.length === 1
+          ? onArchive(rows[0])
+          : onArchiveMany(ids);
+      },
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/courses/toolbar.config.jsx b/apps/web/src/modules/admin/config/courses/toolbar.config.jsx
new file mode 100644
index 0000000..e6f7fc8
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/toolbar.config.jsx
@@ -0,0 +1,64 @@
+import { Plus, RefreshCw, Download, Archive, ArrowUpAZIcon } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({
+  fetchCourses,
+  pagination,
+  exportConfig,
+  navigate,
+  getFilters,
+  getSort,
+  getTableInstance,
+}) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      label: "Refresh",
+      icon: <RefreshCw className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => fetchCourses({
+        page: 1,
+        limit: pagination?.limit ?? 10,
+        filters: getFilters(),
+        sort: getSort(),
+      }),
+    },
+    {
+      key: "export",
+      type: "button",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => exportTableToExcel({
+        ...exportConfig,
+        tableInstance: getTableInstance(),
+      }),
+    },
+    {
+      key: "create",
+      type: "button",
+      label: "New Course",
+      icon: <Plus className="h-3.5 w-3.5" />,
+      variant: "default",
+      onClick: () => navigate("/admin/courses/add"),
+    },
+    {
+      key: "categories",
+      type: "button",
+      label: "Categories",
+      icon: <ArrowUpAZIcon className="h-3.5 w-3.5" />,
+      variant: "default",
+      onClick: () => navigate("/admin/courses/categories"),
+    },
+    {
+      key: "archived-courses",
+      type: "button",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      label: "Archived Courses",
+      variant: "secondary",
+      className: "border border-border",
+      onClick: () => navigate("/admin/courses/archived"),
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/courses/units/archive/columns.config.jsx b/apps/web/src/modules/admin/config/courses/units/archive/columns.config.jsx
new file mode 100644
index 0000000..1edd8bf
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/units/archive/columns.config.jsx
@@ -0,0 +1,47 @@
+// config/columns.config.jsx
+// Column definitions and pinning config for the Users table.
+
+import { Badge } from "@/components/ui/badge";
+import { Clock } from "lucide-react";
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { formatDuration } from "@/utils/timestamp.util";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+// ─── Custom cell overrides ────────────────────────────────────────────────────
+const cellOverrides = {
+  duration_seconds: (info) => {
+    const seconds = parseInt(info.getValue() ?? 0, 10);
+
+    return (
+      <div className="flex items-center gap-1.5">
+        <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+        <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+          {formatDuration(seconds)}
+        </Badge>
+      </div>
+    );
+  },
+};
+
+/**
+ * Builds the full column array for the Users table.
+ *
+ * @param {Array}    attributes  Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions  Row-level kebab action definitions
+ * @returns {Array}              TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Unit Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/courses/units/archive/rowActions.config.jsx b/apps/web/src/modules/admin/config/courses/units/archive/rowActions.config.jsx
new file mode 100644
index 0000000..9282afd
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/units/archive/rowActions.config.jsx
@@ -0,0 +1,27 @@
+// modules/admin/config/assets/rowActions.config.jsx
+import { RotateCcw, Trash2 } from "lucide-react";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.onView     (row) → void  — navigate to view page
+ * @param {Function} deps.onEdit     (row) → void  — navigate to edit page
+ * @param {Function} deps.onArchive  (row) → void  — open archive dialog
+ */
+export function buildRowActions({ onRestore, onDelete }) {
+    return [
+        {
+            key: "restore",
+            label: "Restore",
+            className: "text-emerald-600 focus:text-emerald-600",
+            icon: <RotateCcw className="h-3.5 w-3.5" />,
+            onClick: (row) => onRestore(row),
+        },
+        {
+            key: "delete",
+            label: "Delete",
+            className: "text-destructive focus:text-destructive",
+            icon: <Trash2 className="h-3.5 w-3.5" />,
+            onClick: (row) => onDelete(row),
+        },
+    ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/courses/units/archive/selection.config.jsx b/apps/web/src/modules/admin/config/courses/units/archive/selection.config.jsx
new file mode 100644
index 0000000..d0c5c68
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/units/archive/selection.config.jsx
@@ -0,0 +1,43 @@
+// config/assets/archive/selection.config.jsx
+import { Download, ArchiveRestore, Trash2 } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({ exportConfig, restoreUnit, restoreUnits, deleteUnit, deleteUnits, getTableInstance }) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows: rows,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+    {
+      key: "restore-selected",
+      label: "Restore",
+      icon: <ArchiveRestore className="h-3.5 w-3.5" />,
+      className: "text-emerald-600 border-emerald-600/40 hover:bg-emerald-600/10 hover:text-emerald-700",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.unit_id);
+        ids.length === 1
+          ? restoreUnit(rows[0])
+          : restoreUnits(ids);
+      },
+    },
+    {
+      key: "delete-selected",
+      label: "Delete",
+      icon: <Trash2 className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.unit_id);
+        ids.length === 1
+          ? deleteUnit(rows[0])
+          : deleteUnits(ids);
+      },
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/courses/units/archive/toolbar.config.jsx b/apps/web/src/modules/admin/config/courses/units/archive/toolbar.config.jsx
new file mode 100644
index 0000000..8214d57
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/units/archive/toolbar.config.jsx
@@ -0,0 +1,39 @@
+import { Plus, RefreshCw, Download, Archive } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({
+  fetchArchivedUnits,
+  pagination,
+  exportConfig,
+  navigate,
+  getFilters,
+  getSort,
+  getTableInstance,
+}) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      label: "Refresh",
+      icon: <RefreshCw className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => fetchArchivedUnits({
+        page: 1,
+        limit: pagination?.limit ?? 10,
+        filters: getFilters(),
+        sort: getSort(),
+      }),
+    },
+    {
+      key: "export",
+      type: "button",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => exportTableToExcel({
+        ...exportConfig,
+        tableInstance: getTableInstance(),
+      }),
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/courses/units/columns.config.jsx b/apps/web/src/modules/admin/config/courses/units/columns.config.jsx
new file mode 100644
index 0000000..612810e
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/units/columns.config.jsx
@@ -0,0 +1,67 @@
+// config/columns.config.jsx
+// Column definitions and pinning config for the Users table.
+
+import { Badge } from "@/components/ui/badge";
+import { Clock, Tag } from "lucide-react";
+import * as LucideIcons from "lucide-react";
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { formatDuration } from "@/utils/timestamp.util";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+// ─── Custom cell overrides ────────────────────────────────────────────────────
+function buildCellOverrides(tierMap, courseSubscription) {
+  return {
+  duration_seconds: (info) => {
+    const seconds = parseInt(info.getValue() ?? 0, 10);
+
+    return (
+      <div className="flex items-center gap-1.5">
+        <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+        <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+          {formatDuration(seconds)}
+        </Badge>
+      </div>
+    );
+  },
+  subscription: (info) => {
+    const slug = info.getValue() || courseSubscription;
+    if (!slug) return <span className="text-muted-foreground/40">-</span>;
+
+    const { label, cls } = resolveTierBadge(slug, tierMap);
+    const Icon = LucideIcons[tierMap[slug]?.badge_icon] ?? Tag;
+    return (
+      <Badge className={cls}>
+        <Icon className="size-3" />
+        {label}
+      </Badge>
+    );
+  },
+  };
+}
+
+/**
+ * Builds the full column array for the Users table.
+ *
+ * @param {Array}    attributes         Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions         Row-level kebab action definitions
+ * @param {Object}   tierMap            slug → tier category, for colored Subscription badges
+ * @param {string}   courseSubscription Parent course's tier, used when the unit has no direct tier of its own
+ * @returns {Array}                     TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions, tierMap = {}, courseSubscription = null) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+  const cellOverrides = buildCellOverrides(tierMap, courseSubscription);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Unit Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/courses/units/rowActions.config.jsx b/apps/web/src/modules/admin/config/courses/units/rowActions.config.jsx
new file mode 100644
index 0000000..137bed4
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/units/rowActions.config.jsx
@@ -0,0 +1,20 @@
+import { Eye, Archive } from "lucide-react";
+
+export function buildRowActions({ onView, onArchive }) {
+  return [
+    {
+      key: "view",
+      label: "View Info",
+      icon: <Eye className="h-3.5 w-3.5" />,
+      onClick: (row) => onView(row),
+    },
+    {
+      key: "archive",
+      label: "Archive",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      className: "text-destructive",
+      onClick: (row) => onArchive(row),
+      separator: true,
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/courses/units/selection.config.jsx b/apps/web/src/modules/admin/config/courses/units/selection.config.jsx
new file mode 100644
index 0000000..f157213
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/units/selection.config.jsx
@@ -0,0 +1,30 @@
+import { Download, Archive } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({ exportConfig, onArchive, onArchiveMany, getTableInstance }) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows: rows,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+    {
+      key: "archive-selected",
+      label: "Archive",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.unit_id);
+        ids.length === 1
+          ? onArchive(rows[0])
+          : onArchiveMany(ids);
+      },
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/courses/units/toolbar.config.jsx b/apps/web/src/modules/admin/config/courses/units/toolbar.config.jsx
new file mode 100644
index 0000000..a54302b
--- /dev/null
+++ b/apps/web/src/modules/admin/config/courses/units/toolbar.config.jsx
@@ -0,0 +1,58 @@
+import { Plus, RefreshCw, Download, Archive } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({
+  fetchUnits,
+  pagination,
+  exportConfig,
+  navigate,
+  courseId,
+  returnTo,
+  getFilters,
+  getSort,
+  getTableInstance,
+}) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      label: "Refresh",
+      icon: <RefreshCw className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => fetchUnits({
+        page: 1,
+        limit: pagination?.limit ?? 10,
+        filters: getFilters(),
+        sort: getSort(),
+      }),
+    },
+    {
+      key: "export",
+      type: "button",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => exportTableToExcel({
+        ...exportConfig,
+        tableInstance: getTableInstance(),
+      }),
+    },
+    {
+      key: "create",
+      type: "button",
+      label: "New Unit",
+      icon: <Plus className="h-3.5 w-3.5" />,
+      variant: "default",
+      onClick: () => navigate(`/admin/courses/${courseId}/units/add`, returnTo ? { state: { returnTo } } : undefined),
+    },
+    {
+      key: "archived-units",
+      type: "button",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      label: "Archived Units",
+      variant: "secondary",
+      className: "border border-border",
+      onClick: () => navigate(`/admin/courses/${courseId}/units/archived`),
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/library/lessons/columns.config.jsx b/apps/web/src/modules/admin/config/library/lessons/columns.config.jsx
new file mode 100644
index 0000000..18c1a78
--- /dev/null
+++ b/apps/web/src/modules/admin/config/library/lessons/columns.config.jsx
@@ -0,0 +1,83 @@
+// config/library/lessons/columns.config.jsx
+// Column definitions and pinning for the standalone Lesson Library table.
+
+import { Badge } from "@/components/ui/badge";
+import { Clock, Layers, Tag } from "lucide-react";
+import * as LucideIcons from "lucide-react";
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { formatDuration } from "@/utils/timestamp.util";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+function buildCellOverrides(tierMap) {
+  return {
+  title: (info) => {
+    const inUnit = parseInt(info.row.original.unit_count ?? 0, 10) > 0;
+    return (
+      <div className="flex items-center gap-1.5 min-w-0">
+        {inUnit && (
+          <Badge variant="secondary" className="gap-1 text-[10px] font-medium shrink-0">
+            <Layers className="h-3 w-3" />
+            Unit
+          </Badge>
+        )}
+        <span className="block truncate max-w-56 text-sm" title={info.getValue()}>
+          {info.getValue()}
+        </span>
+      </div>
+    );
+  },
+  duration_seconds: (info) => {
+    const seconds = parseInt(info.getValue() ?? 0, 10);
+    return (
+      <div className="flex items-center gap-1.5">
+        <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+        <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+          {formatDuration(seconds)}
+        </Badge>
+      </div>
+    );
+  },
+  course_count: (info) => {
+    const n = parseInt(info.getValue() ?? 0, 10);
+    return (
+      <Badge variant="secondary" className="text-xs tabular-nums">
+        {n} course{n === 1 ? "" : "s"}
+      </Badge>
+    );
+  },
+  subscription: (info) => {
+    const own = info.getValue();
+    // Not gated directly — fall back to the tier(s) inherited from any
+    // affiliated course(s) instead of showing a bare "-".
+    const slug = own || info.row.original.course_subscription;
+    if (!slug) return <span className="text-muted-foreground/40">-</span>;
+
+    const { label, cls } = resolveTierBadge(slug, tierMap);
+    const Icon = LucideIcons[tierMap[slug]?.badge_icon] ?? Tag;
+    return (
+      <Badge className={cls}>
+        <Icon className="size-3" />
+        {label}
+      </Badge>
+    );
+  },
+  };
+}
+
+export function buildDataColumns(attributes, rowActions, tierMap = {}) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+  const cellOverrides = buildCellOverrides(tierMap);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Lesson Actions" }),
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/library/lessons/rowActions.config.jsx b/apps/web/src/modules/admin/config/library/lessons/rowActions.config.jsx
new file mode 100644
index 0000000..c626883
--- /dev/null
+++ b/apps/web/src/modules/admin/config/library/lessons/rowActions.config.jsx
@@ -0,0 +1,66 @@
+// config/library/lessons/rowActions.config.jsx
+// Row actions for the Lesson Library (active + archived variants).
+
+import {
+  Eye, Archive, Pencil, FileText, LayoutTemplate,
+  ArchiveRestore, Trash2,
+} from "lucide-react";
+
+export function buildRowActions({ onView, onEdit, onBuildPage, onViewPage, onArchive }) {
+  return [
+    {
+      key: "view",
+      label: "View Info",
+      icon: <Eye className="h-3.5 w-3.5" />,
+      onClick: (row) => onView(row),
+    },
+    // {
+    //   key: "edit",
+    //   label: "Edit Lesson",
+    //   icon: <Pencil className="h-3.5 w-3.5" />,
+    //   onClick: (row) => onEdit(row),
+    // },
+    // {
+    //   key: "build_page",
+    //   label: "Page Builder",
+    //   icon: <LayoutTemplate className="h-3.5 w-3.5" />,
+    //   className: "text-sky-700 hover:text-sky-600",
+    //   onClick: (row) => onBuildPage(row),
+    //   separator: true,
+    // },
+    // {
+    //   key: "view_page",
+    //   label: "View Page",
+    //   icon: <FileText className="h-3.5 w-3.5" />,
+    //   className: "text-sky-700 hover:text-sky-600",
+    //   onClick: (row) => onViewPage(row),
+    // },
+    {
+      key: "archive",
+      label: "Archive",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      className: "text-destructive",
+      onClick: (row) => onArchive(row),
+      separator: true,
+    },
+  ];
+}
+
+export function buildArchivedRowActions({ onRestore, onDelete }) {
+  return [
+    {
+      key: "restore",
+      label: "Restore",
+      icon: <ArchiveRestore className="h-3.5 w-3.5" />,
+      onClick: (row) => onRestore(row),
+    },
+    {
+      key: "delete",
+      label: "Delete Permanently",
+      icon: <Trash2 className="h-3.5 w-3.5" />,
+      className: "text-destructive",
+      onClick: (row) => onDelete(row),
+      separator: true,
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/library/lessons/selection.config.jsx b/apps/web/src/modules/admin/config/library/lessons/selection.config.jsx
new file mode 100644
index 0000000..efea486
--- /dev/null
+++ b/apps/web/src/modules/admin/config/library/lessons/selection.config.jsx
@@ -0,0 +1,66 @@
+// config/library/lessons/selection.config.jsx
+// Bulk selection actions for the Lesson Library (active + archived variants).
+
+import { Download, Archive, ArchiveRestore, Trash2 } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({ exportConfig, onArchive, onArchiveMany, getTableInstance }) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows: rows,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+    {
+      key: "archive-selected",
+      label: "Archive",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.lesson_id);
+        ids.length === 1 ? onArchive(rows[0]) : onArchiveMany(ids);
+      },
+    },
+  ];
+}
+
+export function buildArchivedSelectionActions({ exportConfig, onRestore, onRestoreMany, onDelete, onDeleteMany, getTableInstance }) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows: rows,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+    {
+      key: "restore-selected",
+      label: "Restore",
+      icon: <ArchiveRestore className="h-3.5 w-3.5" />,
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.lesson_id);
+        ids.length === 1 ? onRestore(rows[0]) : onRestoreMany(ids);
+      },
+    },
+    {
+      key: "delete-selected",
+      label: "Delete Permanently",
+      icon: <Trash2 className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.lesson_id);
+        ids.length === 1 ? onDelete(rows[0]) : onDeleteMany(ids);
+      },
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/library/lessons/toolbar.config.jsx b/apps/web/src/modules/admin/config/library/lessons/toolbar.config.jsx
new file mode 100644
index 0000000..9e90bfb
--- /dev/null
+++ b/apps/web/src/modules/admin/config/library/lessons/toolbar.config.jsx
@@ -0,0 +1,96 @@
+// config/library/lessons/toolbar.config.jsx
+// Toolbar actions for the Lesson Library (active + archived variants).
+
+import { Plus, RefreshCw, Download, Archive, ArrowLeft } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({
+  fetchLessons,
+  pagination,
+  exportConfig,
+  navigate,
+  getFilters,
+  getSort,
+  getTableInstance,
+}) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      label: "Refresh",
+      icon: <RefreshCw className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => fetchLessons({
+        page: 1,
+        limit: pagination?.limit ?? 10,
+        filters: getFilters(),
+        sort: getSort(),
+      }),
+    },
+    {
+      key: "export",
+      type: "button",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => exportTableToExcel({
+        ...exportConfig,
+        tableInstance: getTableInstance(),
+      }),
+    },
+    {
+      key: "create",
+      type: "button",
+      label: "New Lesson",
+      icon: <Plus className="h-3.5 w-3.5" />,
+      variant: "default",
+      onClick: () => navigate("/admin/lessons/add"),
+    },
+    {
+      key: "archived-lessons",
+      type: "button",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      label: "Archived Lessons",
+      variant: "secondary",
+      className: "border border-border",
+      onClick: () => navigate("/admin/lessons/archived"),
+    },
+  ];
+}
+
+export function buildArchivedToolbarActions({
+  fetchArchivedLessons,
+  pagination,
+  exportConfig,
+  navigate,
+  getFilters,
+  getSort,
+  getTableInstance,
+}) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      label: "Refresh",
+      icon: <RefreshCw className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => fetchArchivedLessons({
+        page: 1,
+        limit: pagination?.limit ?? 10,
+        filters: getFilters(),
+        sort: getSort(),
+      }),
+    },
+    {
+      key: "export",
+      type: "button",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => exportTableToExcel({
+        ...exportConfig,
+        tableInstance: getTableInstance(),
+      }),
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/library/units/columns.config.jsx b/apps/web/src/modules/admin/config/library/units/columns.config.jsx
new file mode 100644
index 0000000..0a0fda8
--- /dev/null
+++ b/apps/web/src/modules/admin/config/library/units/columns.config.jsx
@@ -0,0 +1,80 @@
+// config/library/units/columns.config.jsx
+// Column definitions and pinning for the standalone Unit Library table.
+
+import { Badge } from "@/components/ui/badge";
+import { Clock, GraduationCap, Tag } from "lucide-react";
+import * as LucideIcons from "lucide-react";
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { formatDuration } from "@/utils/timestamp.util";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+function buildCellOverrides(tierMap) {
+  return {
+    title: (info) => {
+      const inCourse = parseInt(info.row.original.course_count ?? 0, 10) > 0;
+      return (
+        <div className="flex items-center gap-1.5 min-w-0">
+          {inCourse && (
+            <Badge variant="secondary" className="gap-1 text-[10px] font-medium shrink-0">
+              <GraduationCap className="h-3 w-3" />
+              Course
+            </Badge>
+          )}
+          <span className="block truncate max-w-56 text-sm" title={info.getValue()}>
+            {info.getValue()}
+          </span>
+        </div>
+      );
+    },
+    duration_seconds: (info) => {
+      const seconds = parseInt(info.getValue() ?? 0, 10);
+      return (
+        <div className="flex items-center gap-1.5">
+          <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+          <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+            {formatDuration(seconds)}
+          </Badge>
+        </div>
+      );
+    },
+    lesson_count: (info) => (
+      <Badge variant="outline" className="text-xs tabular-nums">
+        {info.getValue() ?? 0} lesson{(info.getValue() ?? 0) === 1 ? "" : "s"}
+      </Badge>
+    ),
+    subscription: (info) => {
+      const own = info.getValue();
+      // Not gated directly — fall back to the tier(s) inherited from any
+      // affiliated course(s) instead of showing a bare "-".
+      const slug = own || info.row.original.course_subscription;
+      if (!slug) return <span className="text-muted-foreground/40">-</span>;
+
+      const { label, cls } = resolveTierBadge(slug, tierMap);
+      const Icon = LucideIcons[tierMap[slug]?.badge_icon] ?? Tag;
+      return (
+        <Badge className={cls}>
+          <Icon className="size-3" />
+          {label}
+        </Badge>
+      );
+    },
+  };
+}
+
+export function buildDataColumns(attributes, rowActions, tierMap = {}) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+  const cellOverrides = buildCellOverrides(tierMap);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Unit Actions" }),
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/library/units/rowActions.config.jsx b/apps/web/src/modules/admin/config/library/units/rowActions.config.jsx
new file mode 100644
index 0000000..edcfafe
--- /dev/null
+++ b/apps/web/src/modules/admin/config/library/units/rowActions.config.jsx
@@ -0,0 +1,79 @@
+// config/library/units/rowActions.config.jsx
+// Row actions for the Unit Library (active + archived variants).
+
+import {
+  Eye, Archive, BookCheck, NotebookPen, ClipboardList, PlusCircle,
+  Pencil, ArchiveRestore, Trash2,
+} from "lucide-react";
+
+export function buildRowActions({ onView, onEdit, onManageLessons, onArchive, onQuiz, onViewQuiz }) {
+  return [
+    {
+      key: "view",
+      label: "View Info",
+      icon: <Eye className="h-3.5 w-3.5" />,
+      onClick: (row) => onView(row),
+    },
+    // {
+    //   key: "manage_lessons",
+    //   label: "Manage Lessons",
+    //   icon: <BookCheck className="h-3.5 w-3.5" />,
+    //   className: "text-sky-700 hover:text-sky-600",
+    //   onClick: (row) => onManageLessons(row),
+    //   separator: true,
+    // },
+    // {
+    //   key: "create_quiz",
+    //   label: "Create Quiz",
+    //   icon: <PlusCircle className="h-3.5 w-3.5" />,
+    //   className: "text-purple-700 hover:text-purple-600",
+    //   onClick: (row) => onQuiz(row),
+    //   hidden: (row) => !!(row.quiz_id || row.quiz),
+    //   separator: true,
+    // },
+    // {
+    //   key: "view_quiz",
+    //   label: "View Quiz",
+    //   icon: <ClipboardList className="h-3.5 w-3.5" />,
+    //   className: "text-purple-700 hover:text-purple-600",
+    //   onClick: (row) => onViewQuiz(row),
+    //   hidden: (row) => !(row.quiz_id || row.quiz),
+    //   separator: true,
+    // },
+    // {
+    //   key: "modify_quiz",
+    //   label: "Modify Quiz",
+    //   icon: <NotebookPen className="h-3.5 w-3.5" />,
+    //   className: "text-purple-700 hover:text-purple-600",
+    //   onClick: (row) => onQuiz(row),
+    //   hidden: (row) => !(row.quiz_id || row.quiz),
+    // },
+    {
+      key: "archive",
+      label: "Archive",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      className: "text-destructive",
+      onClick: (row) => onArchive(row),
+      separator: true,
+    },
+  ];
+}
+
+export function buildArchivedRowActions({ onRestore, onDelete }) {
+  return [
+    {
+      key: "restore",
+      label: "Restore",
+      icon: <ArchiveRestore className="h-3.5 w-3.5" />,
+      onClick: (row) => onRestore(row),
+    },
+    {
+      key: "delete",
+      label: "Delete Permanently",
+      icon: <Trash2 className="h-3.5 w-3.5" />,
+      className: "text-destructive",
+      onClick: (row) => onDelete(row),
+      separator: true,
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/library/units/selection.config.jsx b/apps/web/src/modules/admin/config/library/units/selection.config.jsx
new file mode 100644
index 0000000..e7e1100
--- /dev/null
+++ b/apps/web/src/modules/admin/config/library/units/selection.config.jsx
@@ -0,0 +1,66 @@
+// config/library/units/selection.config.jsx
+// Bulk selection actions for the Unit Library (active + archived variants).
+
+import { Download, Archive, ArchiveRestore, Trash2 } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({ exportConfig, onArchive, onArchiveMany, getTableInstance }) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows: rows,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+    {
+      key: "archive-selected",
+      label: "Archive",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.unit_id);
+        ids.length === 1 ? onArchive(rows[0]) : onArchiveMany(ids);
+      },
+    },
+  ];
+}
+
+export function buildArchivedSelectionActions({ exportConfig, onRestore, onRestoreMany, onDelete, onDeleteMany, getTableInstance }) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows: rows,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+    {
+      key: "restore-selected",
+      label: "Restore",
+      icon: <ArchiveRestore className="h-3.5 w-3.5" />,
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.unit_id);
+        ids.length === 1 ? onRestore(rows[0]) : onRestoreMany(ids);
+      },
+    },
+    {
+      key: "delete-selected",
+      label: "Delete Permanently",
+      icon: <Trash2 className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.unit_id);
+        ids.length === 1 ? onDelete(rows[0]) : onDeleteMany(ids);
+      },
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/library/units/toolbar.config.jsx b/apps/web/src/modules/admin/config/library/units/toolbar.config.jsx
new file mode 100644
index 0000000..ce4b414
--- /dev/null
+++ b/apps/web/src/modules/admin/config/library/units/toolbar.config.jsx
@@ -0,0 +1,105 @@
+// config/library/units/toolbar.config.jsx
+// Toolbar actions for the Unit Library (active + archived variants).
+
+import { Plus, RefreshCw, Download, Archive, ArrowLeft } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({
+  fetchUnits,
+  pagination,
+  exportConfig,
+  navigate,
+  getFilters,
+  getSort,
+  getTableInstance,
+}) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      label: "Refresh",
+      icon: <RefreshCw className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => fetchUnits({
+        page: 1,
+        limit: pagination?.limit ?? 10,
+        filters: getFilters(),
+        sort: getSort(),
+      }),
+    },
+    {
+      key: "export",
+      type: "button",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => exportTableToExcel({
+        ...exportConfig,
+        tableInstance: getTableInstance(),
+      }),
+    },
+    {
+      key: "create",
+      type: "button",
+      label: "New Unit",
+      icon: <Plus className="h-3.5 w-3.5" />,
+      variant: "default",
+      onClick: () => navigate("/admin/units/add"),
+    },
+    {
+      key: "archived-units",
+      type: "button",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      label: "Archived Units",
+      variant: "secondary",
+      className: "border border-border",
+      onClick: () => navigate("/admin/units/archived"),
+    },
+  ];
+}
+
+export function buildArchivedToolbarActions({
+  fetchArchivedUnits,
+  pagination,
+  exportConfig,
+  navigate,
+  getFilters,
+  getSort,
+  getTableInstance,
+}) {
+  return [
+    {
+      key: "back",
+      type: "button",
+      label: "Back to Units",
+      icon: <ArrowLeft className="h-3.5 w-3.5" />,
+      variant: "secondary",
+      className: "border border-border",
+      onClick: () => navigate("/admin/units"),
+    },
+    {
+      key: "refresh",
+      type: "button",
+      label: "Refresh",
+      icon: <RefreshCw className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => fetchArchivedUnits({
+        page: 1,
+        limit: pagination?.limit ?? 10,
+        filters: getFilters(),
+        sort: getSort(),
+      }),
+    },
+    {
+      key: "export",
+      type: "button",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => exportTableToExcel({
+        ...exportConfig,
+        tableInstance: getTableInstance(),
+      }),
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/notifications/archive/columns.config.jsx b/apps/web/src/modules/admin/config/notifications/archive/columns.config.jsx
new file mode 100644
index 0000000..9298460
--- /dev/null
+++ b/apps/web/src/modules/admin/config/notifications/archive/columns.config.jsx
@@ -0,0 +1,29 @@
+// config/notifications/archive/columns.config.jsx
+
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+const cellOverrides = {};
+
+/**
+ * Builds the full column array for the Archived Notification Broadcasts table.
+ *
+ * @param {Array}    attributes  Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions  Row-level kebab action definitions
+ * @returns {Array}              TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Notification Actions" }),
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/notifications/archive/rowActions.config.jsx b/apps/web/src/modules/admin/config/notifications/archive/rowActions.config.jsx
new file mode 100644
index 0000000..93b9e9e
--- /dev/null
+++ b/apps/web/src/modules/admin/config/notifications/archive/rowActions.config.jsx
@@ -0,0 +1,26 @@
+// config/notifications/archive/rowActions.config.jsx
+import { RotateCcw, Trash2 } from "lucide-react";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.onRestore  (row) => void  — open restore dialog
+ * @param {Function} deps.onDelete   (row) => void  — open permanent-delete dialog
+ */
+export function buildRowActions({ onRestore, onDelete }) {
+    return [
+        {
+            key: "restore",
+            label: "Restore",
+            className: "text-emerald-600 focus:text-emerald-600",
+            icon: <RotateCcw className="h-3.5 w-3.5" />,
+            onClick: (row) => onRestore(row),
+        },
+        {
+            key: "delete",
+            label: "Delete",
+            className: "text-destructive focus:text-destructive",
+            icon: <Trash2 className="h-3.5 w-3.5" />,
+            onClick: (row) => onDelete(row),
+        },
+    ];
+}
diff --git a/apps/web/src/modules/admin/config/notifications/archive/selection.config.jsx b/apps/web/src/modules/admin/config/notifications/archive/selection.config.jsx
new file mode 100644
index 0000000..30e0afd
--- /dev/null
+++ b/apps/web/src/modules/admin/config/notifications/archive/selection.config.jsx
@@ -0,0 +1,43 @@
+// config/notifications/archive/selection.config.jsx
+import { Download, ArchiveRestore, Trash2 } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({ exportConfig, onSingleRestore, onBulkRestore, onSingleDelete, onBulkDelete, getTableInstance }) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows: rows,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+    {
+      key: "restore-selected",
+      label: "Restore",
+      icon: <ArchiveRestore className="h-3.5 w-3.5" />,
+      className: "text-emerald-600 border-emerald-600/40 hover:bg-emerald-600/10 hover:text-emerald-700",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.broadcast_id);
+        ids.length === 1
+          ? onSingleRestore(rows[0])
+          : onBulkRestore(ids);
+      },
+    },
+    {
+      key: "delete-selected",
+      label: "Delete",
+      icon: <Trash2 className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.broadcast_id);
+        ids.length === 1
+          ? onSingleDelete(rows[0])
+          : onBulkDelete(ids);
+      },
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/notifications/archive/toolbar.config.jsx b/apps/web/src/modules/admin/config/notifications/archive/toolbar.config.jsx
new file mode 100644
index 0000000..fb6c823
--- /dev/null
+++ b/apps/web/src/modules/admin/config/notifications/archive/toolbar.config.jsx
@@ -0,0 +1,42 @@
+// config/notifications/archive/toolbar.config.jsx
+import { RefreshCw, Download } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.fetchBroadcasts
+ * @param {Object}   deps.pagination
+ * @param {Object}   deps.exportConfig
+ * @param {Function} deps.navigate
+ * @param {Function} deps.getFilters
+ * @param {Function} deps.getSort
+ * @param {Function} deps.getTableInstance
+ */
+export function buildToolbarActions({ fetchBroadcasts, pagination, exportConfig, navigate, getFilters, getSort, getTableInstance }) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      icon: <RefreshCw className="h-3.5 w-3.5" />,
+      label: "Refresh",
+      onClick: () =>
+        fetchBroadcasts({
+          page: 1,
+          limit: pagination.limit,
+          filters: getFilters(),
+          sort: getSort(),
+        }),
+    },
+    {
+      key: "export",
+      type: "button",
+      icon: <Download className="h-3.5 w-3.5" />,
+      label: "Export",
+      onClick: (table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/task_list/archive/columns.config.jsx b/apps/web/src/modules/admin/config/task_list/archive/columns.config.jsx
new file mode 100644
index 0000000..e495bfd
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/archive/columns.config.jsx
@@ -0,0 +1,43 @@
+// config/columns.config.jsx
+// Column definitions and pinning config for the Task List table.
+
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+const cellOverrides = {
+  // memberCount: (info) => {
+  //   const count = parseInt(info.getValue() ?? 0, 10);
+  //   return (
+  //     <div className="flex items-center gap-1.5">
+  //       <Users className="h-3.5 w-3.5 text-muted-foreground" />
+  //       <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+  //         {count} {count === 1 ? "member" : "members"}
+  //       </Badge>
+  //     </div>
+  //   );
+  // },
+};
+
+
+/**
+ * Builds the full column array for the Users table.
+ *
+ * @param {Array}    attributes  Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions  Row-level kebab action definitions
+ * @returns {Array}              TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "User Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/task_list/archive/rowActions.config.jsx b/apps/web/src/modules/admin/config/task_list/archive/rowActions.config.jsx
new file mode 100644
index 0000000..57aa6e4
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/archive/rowActions.config.jsx
@@ -0,0 +1,25 @@
+import { RotateCcw, Eye, Trash2 } from "lucide-react";
+
+export function buildRowActions({ navigate, onRestore, onDelete }) {
+    return [
+        // {
+        //     key: "view",
+        //     label: "View",
+        //     icon: <Eye className="size-4" />,
+        //     onClick: (row) => navigate(`/admin/taskList/${row.task_list_id}/view`),
+        // },
+        {
+            key: "restore",
+            label: "Restore",
+            icon: <RotateCcw className="size-4" />,
+            onClick: (row) => onRestore(row),
+        },
+        {
+            key: "delete",
+            label: "Delete",
+            className: "text-destructive focus:text-destructive",
+            icon: <Trash2 className="size-4" />,
+            onClick: (row) => onDelete(row),
+        },
+    ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/task_list/archive/selection.config.jsx b/apps/web/src/modules/admin/config/task_list/archive/selection.config.jsx
new file mode 100644
index 0000000..065ba8d
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/archive/selection.config.jsx
@@ -0,0 +1,44 @@
+import { Download, RotateCcw, Trash2 } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({
+    exportConfig,
+    onBulkRestore,
+    onBulkDelete,
+    getTableInstance,
+}) {
+    return [
+        {
+            key: "export-selected",
+            label: "Export",
+            icon: <Download className="h-3.5 w-3.5" />,
+            onClick: (rows, table) =>
+                exportTableToExcel({
+                    ...exportConfig,
+                    selectedRows: rows,
+                    tableInstance: table ?? getTableInstance?.(),
+                }),
+        },
+        {
+            key: "restore-selected",
+            label: "Restore Selected",
+            icon: <RotateCcw className="h-3.5 w-3.5" />,
+            onClick: (rows) => {
+                const ids = rows.map((r) => r.task_list_id).filter(Boolean);
+                if (!ids.length) return;
+                onBulkRestore?.(ids);
+            },
+        },
+        {
+            key: "delete-selected",
+            label: "Delete Selected",
+            icon: <Trash2 className="h-3.5 w-3.5" />,
+            className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+            onClick: (rows) => {
+                const ids = rows.map((r) => r.task_list_id).filter(Boolean);
+                if (!ids.length) return;
+                onBulkDelete?.(ids);
+            },
+        },
+    ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/task_list/archive/toolbar.config.jsx b/apps/web/src/modules/admin/config/task_list/archive/toolbar.config.jsx
new file mode 100644
index 0000000..d73ea08
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/archive/toolbar.config.jsx
@@ -0,0 +1,38 @@
+import { RefreshCw, Download } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({
+    fetchArchivedTaskLists,
+    pagination,
+    exportConfig,
+    getFilters,
+    getSort,
+    getTableInstance,
+}) {
+    return [
+        {
+            key: "refresh",
+            type: "button",
+            icon: <RefreshCw className="size-4" />,
+            label: "Refresh",
+            onClick: () =>
+                fetchArchivedTaskLists({
+                    page: 1,
+                    limit: pagination?.limit ?? 10,
+                    filters: getFilters?.() ?? [],
+                    sort: getSort?.() ?? [],
+                }),
+        },
+        {
+            key: "export",
+            type: "button",
+            icon: <Download className="size-4" />,
+            label: "Export",
+            onClick: (table) =>
+                exportTableToExcel({
+                    ...exportConfig,
+                    tableInstance: table ?? getTableInstance?.(),
+                }),
+        },
+    ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/task_list/columns.config.jsx b/apps/web/src/modules/admin/config/task_list/columns.config.jsx
new file mode 100644
index 0000000..e495bfd
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/columns.config.jsx
@@ -0,0 +1,43 @@
+// config/columns.config.jsx
+// Column definitions and pinning config for the Task List table.
+
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+const cellOverrides = {
+  // memberCount: (info) => {
+  //   const count = parseInt(info.getValue() ?? 0, 10);
+  //   return (
+  //     <div className="flex items-center gap-1.5">
+  //       <Users className="h-3.5 w-3.5 text-muted-foreground" />
+  //       <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+  //         {count} {count === 1 ? "member" : "members"}
+  //       </Badge>
+  //     </div>
+  //   );
+  // },
+};
+
+
+/**
+ * Builds the full column array for the Users table.
+ *
+ * @param {Array}    attributes  Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions  Row-level kebab action definitions
+ * @returns {Array}              TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "User Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/task_list/rowActions.config.jsx b/apps/web/src/modules/admin/config/task_list/rowActions.config.jsx
new file mode 100644
index 0000000..94ed169
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/rowActions.config.jsx
@@ -0,0 +1,21 @@
+import { Eye, Archive, ArchiveRestore } from "lucide-react";
+
+export function buildRowActions({ navigate, onArchive, onRestore, showArchived }) {
+  return [
+    {
+      key: "view",
+      label: "View Info",
+      icon: <Eye className="size-4" />,
+      onClick: (row) => navigate(`${row.task_list_id}/view`),
+    },
+    {
+      key: "archive",
+      label: "Archive",
+      className: "text-destructive focus:text-destructive",
+      icon: <Archive className="size-4" />,
+      onClick: (row) => onArchive(row),
+      hidden: () => showArchived,
+      separator: true,
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/task_list/selection.config.jsx b/apps/web/src/modules/admin/config/task_list/selection.config.jsx
new file mode 100644
index 0000000..47b32a4
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/selection.config.jsx
@@ -0,0 +1,48 @@
+// config/selection.config.jsx
+import { Download, Archive, RotateCcw } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+/**
+ * @param {Object} deps
+ * @param {Object} deps.exportConfig
+ * @param {boolean} deps.showArchived
+ * @param {Function} deps.onBulkArchive
+ * @param {Function} deps.onBulkRestore
+ * @param {Function} deps.getTableInstance
+ */
+export function buildSelectionActions({
+  exportConfig,
+  showArchived,
+  onBulkArchive,
+  onBulkRestore,
+  getTableInstance,
+}) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows: rows,
+          tableInstance: table ?? getTableInstance?.(),
+        }),
+    },
+    {
+      key: showArchived ? "restore-selected" : "archive-selected",
+      label: showArchived ? "Restore" : "Archive",
+      icon: showArchived ? (
+        <RotateCcw className="h-3.5 w-3.5" />
+      ) : (
+        <Archive className="h-3.5 w-3.5" />
+      ),
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.task_list_id).filter(Boolean);
+        if (!ids.length) return;
+        showArchived ? onBulkRestore?.(ids) : onBulkArchive?.(ids);
+      },
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/task_list/task/archive/columns.config.jsx b/apps/web/src/modules/admin/config/task_list/task/archive/columns.config.jsx
new file mode 100644
index 0000000..d5901f6
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/task/archive/columns.config.jsx
@@ -0,0 +1,42 @@
+// config/columns.config.jsx
+// Column definitions and pinning config for the Archived Tasks table.
+
+import { format } from "date-fns";
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+// ─── Custom cell overrides ────────────────────────────────────────────────────
+const cellOverrides = {
+  deadline: (info) => {
+    const value = info.getValue();
+    if (!value) return <span className="text-muted-foreground/40">-</span>;
+    return (
+      <span className="text-xs text-muted-foreground">
+        {format(new Date(value), "MMMM d, yyyy: h:mma")}
+      </span>
+    );
+  },
+};
+
+/**
+ * Builds the full column array for the Archived Tasks table.
+ *
+ * @param {Array}    attributes  Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions  Row-level kebab action definitions
+ * @returns {Array}              TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Task Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/task_list/task/archive/rowActions.config.jsx b/apps/web/src/modules/admin/config/task_list/task/archive/rowActions.config.jsx
new file mode 100644
index 0000000..30a49e9
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/task/archive/rowActions.config.jsx
@@ -0,0 +1,31 @@
+// config/rowActions.config.jsx
+// Per-row kebab menu action definitions for the Users table.
+//
+// Each onClick receives the row's data object from buildRowActionsColumn.
+
+import { RotateCcw, Trash2 } from "lucide-react";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.navigate     React Router navigate
+ * @param {Function} deps.archiveUser  Archive handler from useManagement
+ * @returns {Array}  rowActions
+ */
+export function buildRowActions({ navigate, onRestore, onDelete }) {
+  return [
+    {
+      key: "restore",
+      label: "Restore",
+      icon: <RotateCcw className="size-4" />,
+      onClick: (row) => onRestore(row),
+      hidden: (row) => row.is_active,
+    },
+    {
+      key: "delete",
+      label: "Delete",
+      className: "text-destructive focus:text-destructive",
+      icon: <Trash2 className="size-4" />,
+      onClick: (row) => onDelete(row),
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/task_list/task/archive/selection.config.jsx b/apps/web/src/modules/admin/config/task_list/task/archive/selection.config.jsx
new file mode 100644
index 0000000..014ca00
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/task/archive/selection.config.jsx
@@ -0,0 +1,44 @@
+import { Download, RotateCcw, Trash2 } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({
+    exportConfig,
+    onBulkRestore,
+    onBulkDelete,
+    getTableInstance,
+}) {
+    return [
+        {
+            key: "export-selected",
+            label: "Export",
+            icon: <Download className="h-3.5 w-3.5" />,
+            onClick: (rows, table) =>
+                exportTableToExcel({
+                    ...exportConfig,
+                    selectedRows: rows,
+                    tableInstance: table ?? getTableInstance?.(),
+                }),
+        },
+        {
+            key: "restore-selected",
+            label: "Restore Selected",
+            icon: <RotateCcw className="h-3.5 w-3.5" />,
+            onClick: (rows) => {
+                const ids = rows.map((r) => r.task_id).filter(Boolean);
+                if (!ids.length) return;
+                onBulkRestore?.(ids);
+            },
+        },
+        {
+            key: "delete-selected",
+            label: "Delete Selected",
+            icon: <Trash2 className="h-3.5 w-3.5" />,
+            className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+            onClick: (rows) => {
+                const ids = rows.map((r) => r.task_id).filter(Boolean);
+                if (!ids.length) return;
+                onBulkDelete?.(ids);
+            },
+        },
+    ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/task_list/task/archive/toolbar.config.jsx b/apps/web/src/modules/admin/config/task_list/task/archive/toolbar.config.jsx
new file mode 100644
index 0000000..131935e
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/task/archive/toolbar.config.jsx
@@ -0,0 +1,39 @@
+import { RefreshCw, Download } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({
+    fetchArchivedTasks,
+    taskListId,
+    pagination,
+    exportConfig,
+    getFilters,
+    getSort,
+    getTableInstance,
+}) {
+    return [
+        {
+            key: "refresh",
+            type: "button",
+            icon: <RefreshCw className="size-4" />,
+            label: "Refresh",
+            onClick: () =>
+                fetchArchivedTasks(taskListId, {
+                    page: 1,
+                    limit: pagination?.limit ?? 10,
+                    filters: getFilters?.() ?? [],
+                    sort: getSort?.() ?? [],
+                }),
+        },
+        {
+            key: "export",
+            type: "button",
+            icon: <Download className="size-4" />,
+            label: "Export",
+            onClick: (table) =>
+                exportTableToExcel({
+                    ...exportConfig,
+                    tableInstance: table ?? getTableInstance?.(),
+                }),
+        },
+    ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/task_list/task/columns.config.jsx b/apps/web/src/modules/admin/config/task_list/task/columns.config.jsx
new file mode 100644
index 0000000..4e5c8bb
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/task/columns.config.jsx
@@ -0,0 +1,42 @@
+// config/columns.config.jsx
+// Column definitions and pinning config for the Tasks table.
+
+import { format } from "date-fns";
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+// ─── Custom cell overrides ────────────────────────────────────────────────────
+const cellOverrides = {
+  deadline: (info) => {
+    const value = info.getValue();
+    if (!value) return <span className="text-muted-foreground/40">-</span>;
+    return (
+      <span className="text-xs text-muted-foreground">
+        {format(new Date(value), "MMMM d, yyyy: h:mma")}
+      </span>
+    );
+  },
+};
+
+/**
+ * Builds the full column array for the Tasks table.
+ *
+ * @param {Array}    attributes  Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions  Row-level kebab action definitions
+ * @returns {Array}              TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Task Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/task_list/task/rowActions.config.jsx b/apps/web/src/modules/admin/config/task_list/task/rowActions.config.jsx
new file mode 100644
index 0000000..ae0efe4
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/task/rowActions.config.jsx
@@ -0,0 +1,38 @@
+import { Eye, Archive, ArchiveRestore, Info, NotebookPen, ArrowUp, ArrowDown } from "lucide-react";
+
+export function buildRowActions({ navigate, taskListId, onArchive, onRestore, onMoveUp, onMoveDown, showArchived, tasks = [] }) {
+  return [
+    {
+      key: "view",
+      label: "View Info",
+      icon: <Eye className="size-4" />,
+      onClick: (row) => navigate(`/admin/taskList/${taskListId}/tasks/${row.task_id}/view`),
+    },
+    {
+      key: "move-up",
+      label: "Move Up",
+      icon: <ArrowUp className="size-4" />,
+      onClick: (row) => onMoveUp(row),
+      hidden: () => showArchived,
+      separator: true,
+      disabled: (row) => tasks.findIndex((t) => t.task_id === row.task_id) <= 0,
+    },
+    {
+      key: "move-down",
+      label: "Move Down",
+      icon: <ArrowDown className="size-4" />,
+      onClick: (row) => onMoveDown(row),
+      hidden: () => showArchived,
+      disabled: (row) => tasks.findIndex((t) => t.task_id === row.task_id) >= tasks.length - 1,
+    },
+    {
+      key: "archive",
+      label: "Archive",
+      className: "text-destructive focus:text-destructive",
+      icon: <Archive className="size-4" />,
+      onClick: (row) => onArchive(row),
+      hidden: () => showArchived,
+      separator: true,
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/task_list/task/selection.config.jsx b/apps/web/src/modules/admin/config/task_list/task/selection.config.jsx
new file mode 100644
index 0000000..b43e466
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/task/selection.config.jsx
@@ -0,0 +1,39 @@
+import { Download, Archive, RotateCcw } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({
+    exportConfig,
+    showArchived,
+    onBulkArchive,
+    onBulkRestore,
+    getTableInstance,
+}) {
+    return [
+        {
+            key: "export-selected",
+            label: "Export",
+            icon: <Download className="h-3.5 w-3.5" />,
+            onClick: (rows, table) =>
+                exportTableToExcel({
+                    ...exportConfig,
+                    selectedRows: rows,
+                    tableInstance: table ?? getTableInstance?.(),
+                }),
+        },
+        {
+            key: showArchived ? "restore-selected" : "archive-selected",
+            label: showArchived ? "Restore" : "Archive",
+            icon: showArchived ? (
+                <RotateCcw className="h-3.5 w-3.5" />
+            ) : (
+                <Archive className="h-3.5 w-3.5" />
+            ),
+            className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+            onClick: (rows) => {
+                const ids = rows.map((r) => r.task_id).filter(Boolean);
+                if (!ids.length) return;
+                showArchived ? onBulkRestore?.(ids) : onBulkArchive?.(ids);
+            },
+        },
+    ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/task_list/task/toolbar.config.jsx b/apps/web/src/modules/admin/config/task_list/task/toolbar.config.jsx
new file mode 100644
index 0000000..3700598
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/task/toolbar.config.jsx
@@ -0,0 +1,63 @@
+import { RefreshCw, Download, Plus, Archive } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({
+    fetchTasks,
+    fetchArchivedTasks,
+    taskListId,
+    pagination,
+    exportConfig,
+    navigate,
+    showArchived,
+    onToggleArchived,
+    getFilters,
+    getSort,
+    getTableInstance,
+}) {
+    return [
+        {
+            key: "refresh",
+            type: "button",
+            icon: <RefreshCw className="size-4" />,
+            label: "Refresh",
+            onClick: () => {
+                const fetcher = showArchived ? fetchArchivedTasks : fetchTasks;
+                fetcher(taskListId, {
+                    page: 1,
+                    limit: pagination?.limit ?? 10,
+                    filters: getFilters?.() ?? [],
+                    sort: getSort?.() ?? [],
+                });
+            },
+        },
+        {
+            key: "export",
+            type: "button",
+            icon: <Download className="size-4" />,
+            label: "Export",
+            onClick: (table) =>
+                exportTableToExcel({
+                    ...exportConfig,
+                    tableInstance: table ?? getTableInstance?.(),
+                }),
+        },
+        {
+            key: "add-task",
+            type: "button",
+            icon: <Plus className="size-4" />,
+            label: "Create Task",
+            variant: "default",
+            className: "text-primary-foreground",
+            onClick: () => navigate(`/admin/taskList/${taskListId}/tasks/create`),
+        },
+        {
+            key: "toggle-archived-task",
+            type: "button",
+            icon: <Archive className="size-4" />,
+            label: showArchived ? "Active Tasks" : "Archived Tasks",
+            variant: "secondary",
+            className: "border border-border",
+            onClick: () => navigate(`/admin/taskList/${taskListId}/tasks/archived`),
+        },
+    ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/task_list/task_completion/columns.config.jsx b/apps/web/src/modules/admin/config/task_list/task_completion/columns.config.jsx
new file mode 100644
index 0000000..645c314
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/task_completion/columns.config.jsx
@@ -0,0 +1,48 @@
+// config/task_completion/columns.config.jsx
+// Column definitions and pinning config for the TaskCompletions table.
+import { format } from "date-fns";
+import { buildColumns, longTextCell } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+// ─── Shared 12-hour timestamp formatter ───────────────────────────────────────
+const formatTimestamp = (value) => {
+  if (!value) return <span className="text-muted-foreground/40">-</span>;
+  return (
+    <span className="text-xs text-muted-foreground">
+      {format(new Date(value), "MMM d, yyyy · h:mm a")}
+    </span>
+  );
+};
+
+// ─── Custom cell overrides ────────────────────────────────────────────────────
+const cellOverrides = {
+  completion_id: longTextCell("Completion ID"),
+  task_id:       longTextCell("Task ID"),
+  note:          longTextCell("Note"),
+  submitted_at:  (info) => formatTimestamp(info.getValue()),
+  createdAt:     (info) => formatTimestamp(info.getValue()),
+  updatedAt:     (info) => formatTimestamp(info.getValue()),
+};
+
+/**
+ * Builds the full column array for the TaskCompletions table.
+ *
+ * @param {Array}    attributes  Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions  Row-level kebab action definitions
+ * @returns {Array}              TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Completion Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/task_list/task_completion/rowActions.config.jsx b/apps/web/src/modules/admin/config/task_list/task_completion/rowActions.config.jsx
new file mode 100644
index 0000000..2f5f0fd
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/task_completion/rowActions.config.jsx
@@ -0,0 +1,38 @@
+// config/task_completion/rowActions.config.jsx
+import { Eye, Archive, RotateCcw, ShieldCheck } from "lucide-react";
+
+export function buildRowActions({ navigate, taskListId, taskId, onArchive, onRestore, onReview, showArchived }) {
+    return [
+        {
+            key: "view",
+            label: "View",
+            icon: <Eye className="size-4" />,
+            onClick: (row) => navigate(`/admin/taskList/${taskListId}/tasks/${taskId}/completions/${row.completion_id}/view`),
+        },
+        {
+            key: "review",
+            label: "Review",
+            icon: <ShieldCheck className="size-4" />,
+            onClick: (row) => onReview(row),
+            hidden: (row) => showArchived || row.status !== "submitted",
+        },
+        {
+            key: "archive",
+            label: "Archive",
+            className: "text-destructive focus:text-destructive",
+            icon: <Archive className="size-4" />,
+            onClick: (row) => onArchive(row),
+            hidden: () => showArchived,
+            separator: true,
+        },
+        {
+            key: "restore",
+            label: "Restore",
+            className: "text-green-600 focus:text-green-600",
+            icon: <RotateCcw className="size-4" />,
+            onClick: (row) => onRestore(row),
+            hidden: () => !showArchived,
+            separator: true,
+        },
+    ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/task_list/task_completion/selection.config.jsx b/apps/web/src/modules/admin/config/task_list/task_completion/selection.config.jsx
new file mode 100644
index 0000000..5aa277e
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/task_completion/selection.config.jsx
@@ -0,0 +1,40 @@
+// config/task_completion/selection.config.jsx
+import { Download, Archive, RotateCcw } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({
+    exportConfig,
+    showArchived,
+    onBulkArchive,
+    onBulkRestore,
+    getTableInstance,
+}) {
+    return [
+        {
+            key: "export-selected",
+            label: "Export",
+            icon: <Download className="h-3.5 w-3.5" />,
+            onClick: (rows, table) =>
+                exportTableToExcel({
+                    ...exportConfig,
+                    selectedRows: rows,
+                    tableInstance: table ?? getTableInstance?.(),
+                }),
+        },
+        {
+            key: showArchived ? "restore-selected" : "archive-selected",
+            label: showArchived ? "Restore" : "Archive",
+            icon: showArchived ? (
+                <RotateCcw className="h-3.5 w-3.5" />
+            ) : (
+                <Archive className="h-3.5 w-3.5" />
+            ),
+            className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+            onClick: (rows) => {
+                const ids = rows.map((r) => r.completion_id).filter(Boolean);
+                if (!ids.length) return;
+                showArchived ? onBulkRestore?.(ids) : onBulkArchive?.(ids);
+            },
+        },
+    ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/task_list/task_completion/toolbar.config.jsx b/apps/web/src/modules/admin/config/task_list/task_completion/toolbar.config.jsx
new file mode 100644
index 0000000..c6aad33
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/task_completion/toolbar.config.jsx
@@ -0,0 +1,53 @@
+// config/task_completion/toolbar.config.jsx
+import { RefreshCw, Download, Archive } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({
+    fetchCompletions,
+    taskListId,
+    taskId,
+    pagination,
+    exportConfig,
+    showArchived,
+    onToggleArchived,
+    getFilters,
+    getSort,
+    getTableInstance,
+}) {
+    return [
+        {
+            key: "refresh",
+            type: "button",
+            icon: <RefreshCw className="size-4" />,
+            label: "Refresh",
+            onClick: () => {
+                fetchCompletions(taskListId, taskId, {
+                    page: 1,
+                    limit: pagination?.limit ?? 10,
+                    filters: getFilters?.() ?? [],
+                    sort: getSort?.() ?? [],
+                });
+            },
+        },
+        {
+            key: "export",
+            type: "button",
+            icon: <Download className="size-4" />,
+            label: "Export",
+            onClick: (table) =>
+                exportTableToExcel({
+                    ...exportConfig,
+                    tableInstance: table ?? getTableInstance?.(),
+                }),
+        },
+        {
+            key: "toggle-archived",
+            type: "button",
+            icon: <Archive className="size-4" />,
+            label: showArchived ? "Active" : "Archived",
+            variant: "secondary",
+            className: "border border-border",
+            onClick: onToggleArchived,
+        },
+    ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/task_list/toolbar.config.jsx b/apps/web/src/modules/admin/config/task_list/toolbar.config.jsx
new file mode 100644
index 0000000..3305c07
--- /dev/null
+++ b/apps/web/src/modules/admin/config/task_list/toolbar.config.jsx
@@ -0,0 +1,63 @@
+// ─── config/task_list/toolbar.config.jsx ─────────────────────────────────────
+import { RefreshCw, Download, Plus, Archive } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({
+  fetchTaskLists,
+  fetchArchivedTaskLists,
+  pagination,
+  exportConfig,
+  navigate,
+  showArchived,
+  onToggleArchived,
+  getFilters,
+  getSort,
+  getTableInstance,
+}) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      icon: <RefreshCw className="size-4" />,
+      label: "Refresh",
+      onClick: () => {
+        const fetcher = showArchived ? fetchArchivedTaskLists : fetchTaskLists;
+        fetcher({
+          page: 1,
+          limit: pagination?.limit ?? 10,
+          filters: getFilters?.() ?? [],
+          sort: getSort?.() ?? [],
+        });
+      },
+    },
+    {
+      key: "export",
+      type: "button",
+      icon: <Download className="size-4" />,
+      label: "Export",
+      onClick: (table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          tableInstance: table ?? getTableInstance?.(),
+        }),
+    },
+    {
+      key: "add-task-list",
+      type: "button",
+      icon: <Plus className="size-4" />,
+      label: "Create Task List",
+      variant: "default",
+      className: "text-primary-foreground",
+      onClick: () => navigate(`/admin/taskList/create`),
+    },
+    {
+      key: "toggle-archived",
+      type: "button",
+      icon: <Archive className="size-4" />,
+      label: showArchived ? "Active Task Lists" : "Archived Task Lists",
+      variant: "secondary",
+      className: "border border-border",
+      onClick: () => navigate("/admin/taskList/archived"),
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/tiers/payments/columns.config.jsx b/apps/web/src/modules/admin/config/tiers/payments/columns.config.jsx
new file mode 100644
index 0000000..ee88519
--- /dev/null
+++ b/apps/web/src/modules/admin/config/tiers/payments/columns.config.jsx
@@ -0,0 +1,59 @@
+import { Badge } from "@/components/ui/badge";
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+
+export const columnPinning = {
+  right: ["actions"],
+  left:  [],
+};
+
+const STATUS_BADGE = {
+  pending:   "secondary",
+  completed: "default",
+  failed:    "destructive",
+  cancelled: "outline",
+  expired:   "outline",
+  refunded:  "outline",
+};
+
+export function buildDataColumns(attributes, rowActions, fmtDateTime = (v) => v ? new Date(v).toLocaleString() : "—", tierMap = {}) {
+  const cellOverrides = {
+    user_full_name: (info) => (
+      <span className="text-sm font-medium">{info.getValue() ?? "—"}</span>
+    ),
+    "user.email": (info) => (
+      <span className="text-sm">{info.getValue() ?? "—"}</span>
+    ),
+    amount: (info) => {
+      const row = info.row.original;
+      return (
+        <span className="text-sm font-medium">
+          {row.currency} {Number(info.getValue()).toFixed(2)}
+        </span>
+      );
+    },
+    status: (info) => (
+      <Badge variant={STATUS_BADGE[info.getValue()] ?? "outline"} className="capitalize">
+        {info.getValue()}
+      </Badge>
+    ),
+    "plan.tier": (info) => {
+      const { cls, label } = resolveTierBadge(info.getValue(), tierMap);
+      return <Badge className={`${cls} capitalize`}>{label}</Badge>;
+    },
+    paid_at: (info) => (
+      <span className="text-sm text-muted-foreground">
+        {fmtDateTime(info.getValue())}
+      </span>
+    ),
+  };
+
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Payment Actions" }),
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/tiers/payments/rowActions.config.jsx b/apps/web/src/modules/admin/config/tiers/payments/rowActions.config.jsx
new file mode 100644
index 0000000..ab0582c
--- /dev/null
+++ b/apps/web/src/modules/admin/config/tiers/payments/rowActions.config.jsx
@@ -0,0 +1,12 @@
+import { Eye } from "lucide-react";
+
+export function buildRowActions({ onView }) {
+  return [
+    {
+      key:     "view",
+      label:   "View Payment",
+      icon:    <Eye className="h-3.5 w-3.5" />,
+      onClick: (row) => onView(row),
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/tiers/payments/selection.config.jsx b/apps/web/src/modules/admin/config/tiers/payments/selection.config.jsx
new file mode 100644
index 0000000..9b03ff4
--- /dev/null
+++ b/apps/web/src/modules/admin/config/tiers/payments/selection.config.jsx
@@ -0,0 +1,18 @@
+import { Download } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({ exportConfig, getTableInstance }) {
+  return [
+    {
+      key:     "export-selected",
+      label:   "Export",
+      icon:    <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows:  rows,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/tiers/payments/toolbar.config.jsx b/apps/web/src/modules/admin/config/tiers/payments/toolbar.config.jsx
new file mode 100644
index 0000000..0f28749
--- /dev/null
+++ b/apps/web/src/modules/admin/config/tiers/payments/toolbar.config.jsx
@@ -0,0 +1,38 @@
+import { RefreshCw, Download } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({
+  fetchPayments,
+  pagination,
+  exportConfig,
+  getFilters,
+  getSort,
+  getTableInstance,
+}) {
+  return [
+    {
+      key:     "refresh",
+      type:    "button",
+      label:   "Refresh",
+      icon:    <RefreshCw className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => fetchPayments({
+        page:    1,
+        limit:   pagination?.limit ?? 10,
+        filters: getFilters(),
+        sort:    getSort(),
+      }),
+    },
+    {
+      key:     "export",
+      type:    "button",
+      label:   "Export",
+      icon:    <Download className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => exportTableToExcel({
+        ...exportConfig,
+        tableInstance: getTableInstance(),
+      }),
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/tiers/plans/archive/columns.config.jsx b/apps/web/src/modules/admin/config/tiers/plans/archive/columns.config.jsx
new file mode 100644
index 0000000..5c90b95
--- /dev/null
+++ b/apps/web/src/modules/admin/config/tiers/plans/archive/columns.config.jsx
@@ -0,0 +1,53 @@
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { Badge } from "@/components/ui/badge";
+import { Clock } from "lucide-react";
+import { formatDuration } from "@/utils/timestamp.util";
+import BundlesCell from "@/modules/admin/components/tiers/BundlesCell";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+const cellOverrides = {
+  duration_seconds: (info) => {
+    const seconds = parseInt(info.getValue() ?? 0, 10);
+    return (
+      <div className="flex items-center gap-1.5">
+        <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+        <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+          {formatDuration(seconds)}
+        </Badge>
+      </div>
+    );
+  },
+};
+
+const EXCLUDED_FIELDS = ["duration_unit", "courseCount", "unitCount", "lessonCount", "bundleCount"];
+
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden && !EXCLUDED_FIELDS.includes(a.field));
+  const dataColumns = buildColumns(visibleAttributes, { cellOverrides });
+
+  const labelIndex = dataColumns.findIndex((c) => c.id === "label");
+  dataColumns.splice(labelIndex + 1, 0, {
+    id: "bundleCount",
+    header: "Bundles",
+    accessorFn: (row) => (row.courseCount ?? 0) + (row.unitCount ?? 0) + (row.lessonCount ?? 0),
+    enableSorting: true,
+    enableColumnFilter: false,
+    meta: {
+      label: "Bundles",
+      exportValue: (row) => `${row.courseCount ?? 0} course(s), ${row.unitCount ?? 0} unit(s), ${row.lessonCount ?? 0} lesson(s)`,
+    },
+    cell: ({ row }) => <BundlesCell plan={row.original} />,
+  });
+
+  return [
+    buildSelectionColumn(),
+    ...dataColumns,
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Plan Actions" }),
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/tiers/plans/archive/rowActions.config.jsx b/apps/web/src/modules/admin/config/tiers/plans/archive/rowActions.config.jsx
new file mode 100644
index 0000000..6999477
--- /dev/null
+++ b/apps/web/src/modules/admin/config/tiers/plans/archive/rowActions.config.jsx
@@ -0,0 +1,27 @@
+import { Eye, RotateCcw, Trash2 } from "lucide-react";
+
+export function buildRowActions({ navigate, onRestore, onDelete }) {
+  return [
+    {
+      key:     "view",
+      label:   "View Plan",
+      icon:    <Eye className="h-3.5 w-3.5" />,
+      onClick: (row) => navigate(`/admin/tiers/plans/${row.plan_id}/view`),
+    },
+    {
+      key:       "restore",
+      label:     "Restore",
+      icon:      <RotateCcw className="h-3.5 w-3.5" />,
+      className: "text-emerald-600",
+      onClick:   (row) => onRestore(row),
+      separator: true,
+    },
+    {
+      key:       "delete",
+      label:     "Delete",
+      icon:      <Trash2 className="h-3.5 w-3.5" />,
+      className: "text-destructive focus:text-destructive",
+      onClick:   (row) => onDelete(row),
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/tiers/plans/archive/selection.config.jsx b/apps/web/src/modules/admin/config/tiers/plans/archive/selection.config.jsx
new file mode 100644
index 0000000..a28d16c
--- /dev/null
+++ b/apps/web/src/modules/admin/config/tiers/plans/archive/selection.config.jsx
@@ -0,0 +1,45 @@
+import { Download, ArchiveRestore, Trash2 } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({
+  exportConfig,
+  onRestore,
+  onRestoreMany,
+  onDelete,
+  onDeleteMany,
+  getTableInstance,
+}) {
+  return [
+    {
+      key:     "export-selected",
+      label:   "Export",
+      icon:    <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows:  rows,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+    {
+      key:       "restore-selected",
+      label:     "Restore",
+      icon:      <ArchiveRestore className="h-3.5 w-3.5" />,
+      className: "text-emerald-600 border-emerald-600/40 hover:bg-emerald-600/10 hover:text-emerald-700",
+      onClick:   (rows) => {
+        const ids = rows.map((r) => r.plan_id);
+        ids.length === 1 ? onRestore(rows[0]) : onRestoreMany(ids);
+      },
+    },
+    {
+      key:       "delete-selected",
+      label:     "Delete",
+      icon:      <Trash2 className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick:   (rows) => {
+        const ids = rows.map((r) => r.plan_id);
+        ids.length === 1 ? onDelete(rows[0]) : onDeleteMany(ids);
+      },
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/tiers/plans/archive/toolbar.config.jsx b/apps/web/src/modules/admin/config/tiers/plans/archive/toolbar.config.jsx
new file mode 100644
index 0000000..c1527cf
--- /dev/null
+++ b/apps/web/src/modules/admin/config/tiers/plans/archive/toolbar.config.jsx
@@ -0,0 +1,49 @@
+import { RefreshCw, Download, ArchiveRestore } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({
+  fetchPlans,
+  pagination,
+  exportConfig,
+  navigate,
+  getFilters,
+  getSort,
+  getTableInstance,
+}) {
+  return [
+    {
+      key:     "refresh",
+      type:    "button",
+      label:   "Refresh",
+      icon:    <RefreshCw className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => fetchPlans({
+        page:     1,
+        limit:    pagination?.limit ?? 10,
+        filters:  getFilters(),
+        sort:     getSort(),
+        archived: true,
+      }),
+    },
+    {
+      key:     "export",
+      type:    "button",
+      label:   "Export",
+      icon:    <Download className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => exportTableToExcel({
+        ...exportConfig,
+        tableInstance: getTableInstance(),
+      }),
+    },
+    {
+      key:     "active-plans",
+      type:    "button",
+      label:   "Active Plans",
+      icon:    <ArchiveRestore className="h-3.5 w-3.5" />,
+      variant: "secondary",
+      className: "border border-border",
+      onClick: () => navigate("/admin/tiers/plans"),
+    },
+  ];
+}
diff --git a/apps/web/src/modules/admin/config/tiers/plans/columns.config.jsx b/apps/web/src/modules/admin/config/tiers/plans/columns.config.jsx
new file mode 100644
index 0000000..8f8fb0e
--- /dev/null
+++ b/apps/web/src/modules/admin/config/tiers/plans/columns.config.jsx
@@ -0,0 +1,89 @@
+// config/columns.config.jsx
+// Column definitions and pinning config for the Users table.
+
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { Badge } from "@/components/ui/badge";
+import { Clock } from "lucide-react";
+import { formatDuration } from "@/utils/timestamp.util";
+import BundlesCell from "@/modules/admin/components/tiers/BundlesCell";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+const UNIT_TO_DAYS = { minute: 1 / 1440, hour: 1 / 24, day: 1, month: 30, year: 365 };
+
+function fmtPlanDuration(days, unit) {
+  if (!days) return "—";
+  const multiplier = UNIT_TO_DAYS[unit] ?? 1;
+  const value = Math.round((days / multiplier) * 1000) / 1000;
+  const label = unit ?? "day";
+  return `${value} ${label}${value !== 1 ? "s" : ""}`;
+}
+
+// ─── Custom cell overrides ────────────────────────────────────────────────────
+const cellOverrides = {
+  duration_days: (info) => {
+    const days = info.getValue();
+    const unit = info.row.original.duration_unit;
+    return (
+      <div className="flex items-center gap-1.5">
+        <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+        <span className="text-sm tabular-nums">{fmtPlanDuration(days, unit)}</span>
+      </div>
+    );
+  },
+  duration_seconds: (info) => {
+    const seconds = parseInt(info.getValue() ?? 0, 10);
+
+    return (
+      <div className="flex items-center gap-1.5">
+        <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+        <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+          {formatDuration(seconds)}
+        </Badge>
+      </div>
+    );
+  },
+  
+};
+
+/**
+ * Builds the full column array for the Users table.
+ *
+ * @param {Array}    attributes  Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions  Row-level kebab action definitions
+ * @returns {Array}              TanStack column definitions
+ */
+const EXCLUDED_FIELDS = ["duration_unit", "courseCount", "unitCount", "lessonCount", "bundleCount"];
+
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden && !EXCLUDED_FIELDS.includes(a.field));
+  const dataColumns = buildColumns(visibleAttributes, { cellOverrides });
+
+  const labelIndex = dataColumns.findIndex((c) => c.id === "label");
+  dataColumns.splice(labelIndex + 1, 0, {
+    id: "bundleCount",
+    header: "Bundles",
+    accessorFn: (row) => (row.courseCount ?? 0) + (row.unitCount ?? 0) + (row.lessonCount ?? 0),
+    enableSorting: true,
+    enableColumnFilter: false,
+    meta: {
+      label: "Bundles",
+      exportValue: (row) => `${row.courseCount ?? 0} course(s), ${row.unitCount ?? 0} unit(s), ${row.lessonCount ?? 0} lesson(s)`,
+    },
+    cell: ({ row }) => <BundlesCell plan={row.original} />,
+  });
+
+  return [
+    buildSelectionColumn(),
+    ...dataColumns,
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Course Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/tiers/plans/rowActions.config.jsx b/apps/web/src/modules/admin/config/tiers/plans/rowActions.config.jsx
new file mode 100644
index 0000000..2fde923
--- /dev/null
+++ b/apps/web/src/modules/admin/config/tiers/plans/rowActions.config.jsx
@@ -0,0 +1,20 @@
+import { Eye, Archive } from "lucide-react";
+
+export function buildRowActions({ navigate, onArchive }) {
+  return [
+    {
+      key:     "view",
+      label:   "View Plan",
+      icon:    <Eye className="h-3.5 w-3.5" />,
+      onClick: (row) => navigate(`/admin/tiers/plans/${row.plan_id}/view`),
+    },
+    {
+      key:       "archive",
+      label:     "Archive",
+      icon:      <Archive className="h-3.5 w-3.5" />,
+      className: "text-destructive",
+      onClick:   (row) => onArchive(row),
+      separator: true,
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/tiers/plans/selection.config.jsx b/apps/web/src/modules/admin/config/tiers/plans/selection.config.jsx
new file mode 100644
index 0000000..75ba94e
--- /dev/null
+++ b/apps/web/src/modules/admin/config/tiers/plans/selection.config.jsx
@@ -0,0 +1,33 @@
+import { Download, Archive } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({
+  exportConfig,
+  onArchive,
+  onArchiveMany,
+  getTableInstance,
+}) {
+  return [
+    {
+      key:     "export-selected",
+      label:   "Export",
+      icon:    <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows:  rows,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+    {
+      key:       "archive-selected",
+      label:     "Archive",
+      icon:      <Archive className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick:   (rows) => {
+        const ids = rows.map((r) => r.plan_id);
+        ids.length === 1 ? onArchive(rows[0]) : onArchiveMany(ids);
+      },
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/tiers/plans/toolbar.config.jsx b/apps/web/src/modules/admin/config/tiers/plans/toolbar.config.jsx
new file mode 100644
index 0000000..e81a88a
--- /dev/null
+++ b/apps/web/src/modules/admin/config/tiers/plans/toolbar.config.jsx
@@ -0,0 +1,66 @@
+import { Plus, RefreshCw, Download, Archive, Layers } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({
+  fetchPlans,
+  pagination,
+  exportConfig,
+  navigate,
+  hasAvailableCategories,
+  getFilters,
+  getSort,
+  getTableInstance,
+}) {
+  return [
+    {
+      key:     "refresh",
+      type:    "button",
+      label:   "Refresh",
+      icon:    <RefreshCw className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => fetchPlans({
+        page:    1,
+        limit:   pagination?.limit ?? 10,
+        filters: getFilters(),
+        sort:    getSort(),
+      }),
+    },
+    {
+      key:     "export",
+      type:    "button",
+      label:   "Export",
+      icon:    <Download className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => exportTableToExcel({
+        ...exportConfig,
+        tableInstance: getTableInstance(),
+      }),
+    },
+    {
+      key:     "categories",
+      type:    "button",
+      label:   "Subscription Categories",
+      icon:    <Layers className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => navigate("/admin/tiers/categories"),
+    },
+    {
+      key:     "create",
+      type:    "button",
+      label:   "New Plan",
+      icon:    <Plus className="h-3.5 w-3.5" />,
+      variant: "default",
+      hidden:  !hasAvailableCategories,
+      onClick: () => navigate("/admin/tiers/plans/add"),
+    },
+    {
+      key:       "archived-plans",
+      type:      "button",
+      icon:      <Archive className="h-3.5 w-3.5" />,
+      label:     "Archived Plans",
+      variant:   "secondary",
+      className: "border border-border",
+      onClick:   () => navigate("/admin/tiers/plans/archived"),
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/user_groups/archive/columns.config.jsx b/apps/web/src/modules/admin/config/user_groups/archive/columns.config.jsx
new file mode 100644
index 0000000..cc113da
--- /dev/null
+++ b/apps/web/src/modules/admin/config/user_groups/archive/columns.config.jsx
@@ -0,0 +1,45 @@
+// config/columns.config.jsx
+// Column definitions and pinning config for the Users table.
+
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { Badge } from "@/components/ui/badge";
+import { Users } from "lucide-react";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+// ─── Custom cell overrides ────────────────────────────────────────────────────
+const cellOverrides = {
+  memberCount: (info) => {
+    const count = parseInt(info.getValue() ?? 0, 10);
+    return (
+      <div className="flex items-center gap-1.5">
+        <Users className="h-3.5 w-3.5 text-muted-foreground" />
+        <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+          {count} {count === 1 ? "member" : "members"}
+        </Badge>
+      </div>
+    );
+  },
+};
+
+/**
+ * Builds the full column array for the Users table.
+ *
+ * @param {Array}    attributes  Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions  Row-level kebab action definitions
+ * @returns {Array}              TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Group Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/user_groups/archive/rowActions.config.jsx b/apps/web/src/modules/admin/config/user_groups/archive/rowActions.config.jsx
new file mode 100644
index 0000000..586fd16
--- /dev/null
+++ b/apps/web/src/modules/admin/config/user_groups/archive/rowActions.config.jsx
@@ -0,0 +1,32 @@
+// config/rowActions.config.jsx
+// Per-row kebab menu action definitions for the Users table.
+//
+// Each onClick receives the row's data object from buildRowActionsColumn.
+
+import { RotateCcw, Trash2 } from "lucide-react";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.navigate     React Router navigate
+ * @param {Function} deps.archiveUser  Archive handler from useManagement
+ * @returns {Array}  rowActions
+ */
+export function buildRowActions({ navigate, onRestore, onDelete }) {
+  return [
+    {
+      key: "restore",
+      label: "Restore",
+      className: "text-emerald-600 focus:text-emerald-600",
+      icon: <RotateCcw className="h-3.5 w-3.5" />,
+      onClick: (row) => onRestore(row),
+      hidden: (row) => row.is_active,
+    },
+    {
+      key: "delete",
+      label: "Delete",
+      className: "text-destructive focus:text-destructive",
+      icon: <Trash2 className="h-3.5 w-3.5" />,
+      onClick: (row) => onDelete(row),
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/user_groups/archive/selection.config.jsx b/apps/web/src/modules/admin/config/user_groups/archive/selection.config.jsx
new file mode 100644
index 0000000..db9be66
--- /dev/null
+++ b/apps/web/src/modules/admin/config/user_groups/archive/selection.config.jsx
@@ -0,0 +1,47 @@
+// config/selection.config.jsx
+import { Download, ArchiveRestore, Trash2 } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+/**
+ * @param {Object}   deps
+ * @param {Object}   deps.exportConfig  { allData, attributes, filename, sheetName }
+ * @param {Function} deps.archiveUser   Archive handler from useManagement
+ * @param {Function} deps.deleteUser    Delete handler from useManagement
+ */
+export function buildSelectionActions({ exportConfig, restoreGroup, restoreGroups, deleteGroup, deleteGroups, getTableInstance }) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({ ...exportConfig, selectedRows: rows, tableInstance: table ?? getTableInstance(), }),
+    },
+    {
+      key: "restore-selected",
+      label: "Restore",
+      icon: <ArchiveRestore className="h-3.5 w-3.5" />,
+      className:
+        "text-emerald-600 border-emerald-600/40 hover:bg-emerald-600/10 hover:text-emerald-700",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.group_id);
+        ids.length === 1
+          ? restoreGroup(rows[0])           // opens single dialog
+          : restoreGroups(ids);             // opens bulk dialog
+      },
+    },
+    {
+      key: "delete-selected",
+      label: "Delete",
+      icon: <Trash2 className="h-3.5 w-3.5" />,
+      className:
+        "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.group_id);
+        ids.length === 1
+          ? deleteGroup(rows[0])
+          : deleteGroups(ids);
+      },
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/user_groups/archive/toolbar.config.jsx b/apps/web/src/modules/admin/config/user_groups/archive/toolbar.config.jsx
new file mode 100644
index 0000000..c56096b
--- /dev/null
+++ b/apps/web/src/modules/admin/config/user_groups/archive/toolbar.config.jsx
@@ -0,0 +1,29 @@
+// ─── config/toolbar.config.jsx ────────────────────────────────────────────────
+import { RefreshCw, Download, UserPlus } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.fetchUsers    Refetch handler from useUsers
+ * @param {Object}   deps.pagination    Current pagination state
+ * @param {Object}   deps.exportConfig  { allData, attributes, filename, sheetName }
+ * @param {Function} deps.navigate      React Router navigate
+ */
+export function buildToolbarActions({ fetchArchivedGroups, pagination, exportConfig, navigate, getFilters, getSort, getTableInstance }) {
+  return [
+    {
+      key:     "refresh",
+      type:    "button",
+      icon:    <RefreshCw className="h-3.5 w-3.5" />,
+      label:   "Refresh",
+      onClick: () => fetchArchivedGroups({ page: 1, limit: pagination.limit, filters: getFilters(), sort: getSort()}),
+    },
+    {
+      key:     "export",
+      type:    "button",
+      icon:    <Download className="h-3.5 w-3.5" />,
+      label:   "Export",
+      onClick: (table) => exportTableToExcel({ ...exportConfig, tableInstance: table ?? getTableInstance(), }),
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/user_groups/columns.config.jsx b/apps/web/src/modules/admin/config/user_groups/columns.config.jsx
new file mode 100644
index 0000000..cc113da
--- /dev/null
+++ b/apps/web/src/modules/admin/config/user_groups/columns.config.jsx
@@ -0,0 +1,45 @@
+// config/columns.config.jsx
+// Column definitions and pinning config for the Users table.
+
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { Badge } from "@/components/ui/badge";
+import { Users } from "lucide-react";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+// ─── Custom cell overrides ────────────────────────────────────────────────────
+const cellOverrides = {
+  memberCount: (info) => {
+    const count = parseInt(info.getValue() ?? 0, 10);
+    return (
+      <div className="flex items-center gap-1.5">
+        <Users className="h-3.5 w-3.5 text-muted-foreground" />
+        <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+          {count} {count === 1 ? "member" : "members"}
+        </Badge>
+      </div>
+    );
+  },
+};
+
+/**
+ * Builds the full column array for the Users table.
+ *
+ * @param {Array}    attributes  Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions  Row-level kebab action definitions
+ * @returns {Array}              TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Group Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/user_groups/rowActions.config.jsx b/apps/web/src/modules/admin/config/user_groups/rowActions.config.jsx
new file mode 100644
index 0000000..eae57bf
--- /dev/null
+++ b/apps/web/src/modules/admin/config/user_groups/rowActions.config.jsx
@@ -0,0 +1,39 @@
+// config/rowActions.config.jsx
+// Per-row kebab menu action definitions for the Users table.
+//
+// Each onClick receives the row's data object from buildRowActionsColumn.
+
+import { Eye, Pencil, Archive } from "lucide-react";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.navigate     React Router navigate
+ * @param {Function} deps.archiveUser  Archive handler from useManagement
+ * @returns {Array}  rowActions
+ */
+export function buildRowActions({ navigate, onEdit, onArchive }) {
+  return [
+    {
+      key:     "view",
+      label:   "View Info",
+      icon:    <Eye className="h-3.5 w-3.5" />,
+      onClick: (row) => navigate(`view/${row.group_id}`),
+    },
+    {
+      key:     "edit",
+      label:   "Edit Info",
+      icon:    <Pencil className="h-3.5 w-3.5" />,
+      onClick: (row) => onEdit(row),
+    },
+    {
+      key:       "archive",
+      label:     "Archive",
+      className: "text-destructive focus:text-destructive",
+      icon:      <Archive className="h-3.5 w-3.5" />,
+      onClick:   (row) => onArchive(row),
+      hidden:    (row) => !row.is_active,
+      disabled:  (row) => row.group_code === "NOGRP",
+      separator: true,
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/user_groups/selection.config.jsx b/apps/web/src/modules/admin/config/user_groups/selection.config.jsx
new file mode 100644
index 0000000..b5cdc0b
--- /dev/null
+++ b/apps/web/src/modules/admin/config/user_groups/selection.config.jsx
@@ -0,0 +1,35 @@
+// config/selection.config.jsx
+import { Download, Archive, Trash2 } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+/**
+ * @param {Object}   deps
+ * @param {Object}   deps.exportConfig  { allData, attributes, filename, sheetName }
+ * @param {Function} deps.archiveUser   Archive handler from useManagement
+ * @param {Function} deps.deleteUser    Delete handler from useManagement
+ */
+export function buildSelectionActions({ exportConfig, archiveGroup, archiveGroups, getTableInstance }) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({ ...exportConfig, selectedRows: rows, tableInstance: table ?? getTableInstance(), }),
+    },
+    {
+      key: "archive-selected",
+      label: "Archive",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.group_id);
+        ids.length === 1
+          ? archiveGroup(rows[0])   // opens single dialog
+          : archiveGroups(ids);     // opens bulk dialog
+      },
+      hidden: (rows) => rows.every((r) => !r.is_active),
+      disabled: (rows) => rows.some((r) => r.group_code === "NOGRP"),
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/user_groups/toolbar.config.jsx b/apps/web/src/modules/admin/config/user_groups/toolbar.config.jsx
new file mode 100644
index 0000000..fa49f13
--- /dev/null
+++ b/apps/web/src/modules/admin/config/user_groups/toolbar.config.jsx
@@ -0,0 +1,47 @@
+// ─── config/toolbar.config.jsx ────────────────────────────────────────────────
+import { RefreshCw, Download, FolderPlus, Archive } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.fetchUsers    Refetch handler from useUsers
+ * @param {Object}   deps.pagination    Current pagination state
+ * @param {Object}   deps.exportConfig  { allData, attributes, filename, sheetName }
+ * @param {Function} deps.navigate      React Router navigate
+ */
+export function buildToolbarActions({ fetchGroups, pagination, exportConfig, onAddGroup, navigate, getFilters, getSort, getTableInstance }) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      icon: <RefreshCw className="h-3.5 w-3.5" />,
+      label: "Refresh",
+      onClick: () => fetchGroups({ page: 1, limit: pagination.limit, filters: getFilters(), sort: getSort() }),
+    },
+    {
+      key: "export",
+      type: "button",
+      icon: <Download className="h-3.5 w-3.5" />,
+      label: "Export",
+      onClick: (table) => exportTableToExcel({ ...exportConfig, tableInstance: table ?? getTableInstance() }),
+    },
+    {
+      key: "add-group",
+      type: "button",
+      icon: <FolderPlus className="h-3.5 w-3.5" />,
+      label: "Add Group",
+      variant: "default",
+      className: "text-primary-foreground",
+      onClick: () => onAddGroup(),
+    },
+    {
+      key: "archived-groups",
+      type: "button",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      label: "Archived Groups",
+      variant: "secondary",
+      className: "border border-border",
+      onClick: () => navigate("/admin/groups/archived"),
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/user_groups/view/columns.config.jsx b/apps/web/src/modules/admin/config/user_groups/view/columns.config.jsx
new file mode 100644
index 0000000..5af5b77
--- /dev/null
+++ b/apps/web/src/modules/admin/config/user_groups/view/columns.config.jsx
@@ -0,0 +1,45 @@
+// config/columns.config.jsx
+// Column definitions and pinning config for the Users table.
+
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { Badge } from "@/components/ui/badge";
+import { Users } from "lucide-react";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+// ─── Custom cell overrides ────────────────────────────────────────────────────
+const cellOverrides = {
+  // memberCount: (info) => {
+  //   const count = parseInt(info.getValue() ?? 0, 10);
+  //   return (
+  //     <div className="flex items-center gap-1.5">
+  //       <Users className="h-3.5 w-3.5 text-muted-foreground" />
+  //       <Badge variant="secondary" className="text-xs font-medium tabular-nums">
+  //         {count} {count === 1 ? "member" : "members"}
+  //       </Badge>
+  //     </div>
+  //   );
+  // },
+};
+
+/**
+ * Builds the full column array for the Users table.
+ *
+ * @param {Array}    attributes  Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions  Row-level kebab action definitions
+ * @returns {Array}              TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Group Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/user_groups/view/rowActions.config.jsx b/apps/web/src/modules/admin/config/user_groups/view/rowActions.config.jsx
new file mode 100644
index 0000000..a88aebc
--- /dev/null
+++ b/apps/web/src/modules/admin/config/user_groups/view/rowActions.config.jsx
@@ -0,0 +1,33 @@
+// modules/admin/config/user_groups/view/rowActions.config.jsx
+
+import { UserMinus, UserCheck } from "lucide-react";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.onRemove    Opens remove-member confirm dialog
+ * @param {Function} [deps.onAssign]  Opens assign-to-group dialog (NOGRP only)
+ * @param {boolean}  [deps.isNoGroup] Switches to assign mode when viewing NOGRP
+ * @returns {Array}  rowActions
+ */
+export function buildRowActions({ onRemove, onAssign, isNoGroup }) {
+  if (isNoGroup) {
+    return [
+      {
+        key:     "assign",
+        label:   "Assign to Group",
+        icon:    <UserCheck className="h-3.5 w-3.5" />,
+        onClick: (row) => onAssign(row),
+      },
+    ];
+  }
+
+  return [
+    {
+      key:       "remove",
+      label:     "Remove from group",
+      className: "text-destructive focus:text-destructive",
+      icon:      <UserMinus className="h-3.5 w-3.5" />,
+      onClick:   (row) => onRemove(row),
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/user_groups/view/selection.config.jsx b/apps/web/src/modules/admin/config/user_groups/view/selection.config.jsx
new file mode 100644
index 0000000..2625a54
--- /dev/null
+++ b/apps/web/src/modules/admin/config/user_groups/view/selection.config.jsx
@@ -0,0 +1,48 @@
+// modules/admin/config/user_groups/view/selection.config.jsx
+
+import { Download, UserMinus, UserCheck } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+/**
+ * @param {Object}   deps
+ * @param {Object}   deps.exportConfig        { allData, attributes, filename, sheetName }
+ * @param {Function} deps.onRemoveMember      Opens single remove dialog  (row)
+ * @param {Function} deps.onRemoveMembers     Opens bulk remove dialog    (ids[])
+ * @param {Function} [deps.onAssignMembers]   Opens assign dialog         (ids[]) — NOGRP only
+ * @param {boolean}  [deps.isNoGroup]         Switches to assign mode when viewing NOGRP
+ */
+export function buildSelectionActions({ exportConfig, onRemoveMember, onRemoveMembers, onAssignMembers, isNoGroup }) {
+  const actions = [
+    {
+      key:     "export-selected",
+      label:   "Export",
+      icon:    <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({ ...exportConfig, selectedRows: rows, tableInstance: table }),
+    },
+  ];
+
+  if (isNoGroup) {
+    actions.push({
+      key:     "assign-selected",
+      label:   "Assign to Group",
+      icon:    <UserCheck className="h-3.5 w-3.5" />,
+      onClick: (rows) => onAssignMembers(rows.map((r) => r.user_id)),
+    });
+  } else {
+    actions.push({
+      key:       "remove-selected",
+      label:     "Remove",
+      icon:      <UserMinus className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick:   (rows) => {
+        const ids = rows.map((r) => r.user_id);
+        ids.length === 1
+          ? onRemoveMember(rows[0])
+          : onRemoveMembers(ids);
+      },
+    });
+  }
+
+  return actions;
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/user_groups/view/toolbar.config.jsx b/apps/web/src/modules/admin/config/user_groups/view/toolbar.config.jsx
new file mode 100644
index 0000000..8155fa5
--- /dev/null
+++ b/apps/web/src/modules/admin/config/user_groups/view/toolbar.config.jsx
@@ -0,0 +1,56 @@
+// modules/admin/config/user_groups/view/toolbar.config.jsx
+
+import { RefreshCw, Download, UserPlus } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.fetchGroup    Context fetchGroup(gid, params)
+ * @param {string}   deps.gid           Current group id from useParams
+ * @param {Object}   deps.pagination    Current pagination state
+ * @param {Object}   deps.exportConfig  { allData, attributes, filename, sheetName }
+ * @param {Function} deps.onAddMember   Opens AddMemberSheet
+ * @param {Function} deps.getFilters    Returns active filters from tableRefsRef
+ * @param {Function} deps.getSort       Returns active sort from tableRefsRef
+ */
+export function buildToolbarActions({
+  fetchGroup,
+  gid,
+  pagination,
+  exportConfig,
+  onAddMember,
+  getFilters,
+  getSort,
+}) {
+  return [
+    {
+      key:     "refresh",
+      type:    "button",
+      icon:    <RefreshCw className="h-3.5 w-3.5" />,
+      label:   "Refresh",
+      onClick: () =>
+        fetchGroup(gid, {
+          page:    1,
+          limit:   pagination.limit,
+          filters: getFilters(),
+          sort:    getSort(),
+        }),
+    },
+    {
+      key:     "export",
+      type:    "button",
+      icon:    <Download className="h-3.5 w-3.5" />,
+      label:   "Export",
+      onClick: (table) => exportTableToExcel({ ...exportConfig, tableInstance: table }),
+    },
+    {
+      key:       "add-member",
+      type:      "button",
+      icon:      <UserPlus className="h-3.5 w-3.5" />,
+      label:     "Add Member",
+      variant:   "default",
+      className: "text-primary-foreground",
+      onClick:   () => onAddMember(),
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/users/archive/columns.config.jsx b/apps/web/src/modules/admin/config/users/archive/columns.config.jsx
new file mode 100644
index 0000000..0d9d223
--- /dev/null
+++ b/apps/web/src/modules/admin/config/users/archive/columns.config.jsx
@@ -0,0 +1,42 @@
+// config/columns.config.jsx
+// Column definitions and pinning config for the Users table.
+
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { OverflowBadges } from "@/components/generic/OverflowBadges";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+const cellOverrides = {
+  groups: (info) => (
+    <OverflowBadges
+      items={info.getValue() ?? []}
+      keyKey="group_id"
+      labelKey="group_code"
+      dialogTitleKey="name"
+      dialogTitle="All groups"
+      badgeClassName="text-xs font-mono"
+    />
+  ),
+};
+
+/**
+ * Builds the full column array for the Users table.
+ *
+ * @param {Array}    attributes  Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions  Row-level kebab action definitions
+ * @returns {Array}              TanStack column definitions
+ */
+export function buildUserColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "User Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/users/archive/rowActions.config.jsx b/apps/web/src/modules/admin/config/users/archive/rowActions.config.jsx
new file mode 100644
index 0000000..586fd16
--- /dev/null
+++ b/apps/web/src/modules/admin/config/users/archive/rowActions.config.jsx
@@ -0,0 +1,32 @@
+// config/rowActions.config.jsx
+// Per-row kebab menu action definitions for the Users table.
+//
+// Each onClick receives the row's data object from buildRowActionsColumn.
+
+import { RotateCcw, Trash2 } from "lucide-react";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.navigate     React Router navigate
+ * @param {Function} deps.archiveUser  Archive handler from useManagement
+ * @returns {Array}  rowActions
+ */
+export function buildRowActions({ navigate, onRestore, onDelete }) {
+  return [
+    {
+      key: "restore",
+      label: "Restore",
+      className: "text-emerald-600 focus:text-emerald-600",
+      icon: <RotateCcw className="h-3.5 w-3.5" />,
+      onClick: (row) => onRestore(row),
+      hidden: (row) => row.is_active,
+    },
+    {
+      key: "delete",
+      label: "Delete",
+      className: "text-destructive focus:text-destructive",
+      icon: <Trash2 className="h-3.5 w-3.5" />,
+      onClick: (row) => onDelete(row),
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/users/archive/selection.config.jsx b/apps/web/src/modules/admin/config/users/archive/selection.config.jsx
new file mode 100644
index 0000000..9cf3749
--- /dev/null
+++ b/apps/web/src/modules/admin/config/users/archive/selection.config.jsx
@@ -0,0 +1,47 @@
+// config/selection.config.jsx
+import { Download, ArchiveRestore, Trash2 } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+/**
+ * @param {Object}   deps
+ * @param {Object}   deps.exportConfig  { allData, attributes, filename, sheetName }
+ * @param {Function} deps.archiveUser   Archive handler from useManagement
+ * @param {Function} deps.deleteUser    Delete handler from useManagement
+ */
+export function buildSelectionActions({ exportConfig, restoreUser, restoreUsers, onDeleteUser, onDeleteUsers, getTableInstance }) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({ ...exportConfig, selectedRows: rows, tableInstance: table ?? getTableInstance() }),
+    },
+    {
+      key: "restore-selected",
+      label: "Restore",
+      icon: <ArchiveRestore className="h-3.5 w-3.5" />,
+      className:
+        "text-emerald-600 border-emerald-600/40 hover:bg-emerald-600/10 hover:text-emerald-700",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.user_id);
+        ids.length === 1
+          ? restoreUser(rows[0])           // opens single dialog
+          : restoreUsers(ids);             // opens bulk dialog
+      },
+    },
+    {
+      key: "delete-selected",
+      label: "Delete",
+      icon: <Trash2 className="h-3.5 w-3.5" />,
+      className:
+        "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.user_id);
+        ids.length === 1
+          ? onDeleteUser(rows[0])
+          : onDeleteUsers(ids);
+      },
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/users/archive/toolbar.config.jsx b/apps/web/src/modules/admin/config/users/archive/toolbar.config.jsx
new file mode 100644
index 0000000..b08a2c5
--- /dev/null
+++ b/apps/web/src/modules/admin/config/users/archive/toolbar.config.jsx
@@ -0,0 +1,29 @@
+// ─── config/toolbar.config.jsx ────────────────────────────────────────────────
+import { RefreshCw, Download, UserPlus } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.fetchUsers    Refetch handler from useUsers
+ * @param {Object}   deps.pagination    Current pagination state
+ * @param {Object}   deps.exportConfig  { allData, attributes, filename, sheetName }
+ * @param {Function} deps.navigate      React Router navigate
+ */
+export function buildToolbarActions({ fetchArchivedUsers, pagination, exportConfig, navigate, getFilters, getSort, getTableInstance }) {
+  return [
+    {
+      key:     "refresh",
+      type:    "button",
+      icon:    <RefreshCw className="h-3.5 w-3.5" />,
+      label:   "Refresh",
+      onClick: () => fetchArchivedUsers({ page: 1, limit: pagination.limit, filters: getFilters(), sort: getSort()}),
+    },
+    {
+      key:     "export",
+      type:    "button",
+      icon:    <Download className="h-3.5 w-3.5" />,
+      label:   "Export",
+      onClick: (table) => exportTableToExcel({ ...exportConfig, tableInstance: table ?? getTableInstance(), }),
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/users/columns.config.jsx b/apps/web/src/modules/admin/config/users/columns.config.jsx
new file mode 100644
index 0000000..7d08adc
--- /dev/null
+++ b/apps/web/src/modules/admin/config/users/columns.config.jsx
@@ -0,0 +1,49 @@
+// config/columns.config.jsx
+// Column definitions and pinning config for the Users table.
+
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { OverflowBadges } from "@/components/generic/OverflowBadges";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+// ─── Custom cell overrides ────────────────────────────────────────────────────
+const cellOverrides = {
+  groups: (info) => (
+    <OverflowBadges
+      items={info.getValue() ?? []}
+      keyKey="group_id"
+      labelKey="group_code"
+      dialogTitleKey="name"
+      dialogTitle="All groups"
+      badgeClassName="text-xs font-mono"
+    />
+  ),
+};
+
+/**
+ * Builds the full column array for the Users table.
+ *
+ * @param {Array}    attributes  Field definitions from the server (drives data columns)
+ * @param {Array}    rowActions  Row-level kebab action definitions
+ * @returns {Array}              TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+
+  const dataColumns = buildColumns(visibleAttributes, { cellOverrides }).map((col) =>
+    // "groups" is a joined association, not a real orderable column on the
+    // Users table — sorting by it would error server-side.
+    col.id === "groups" ? { ...col, enableSorting: false } : col
+  );
+
+  return [
+    buildSelectionColumn(),
+    ...dataColumns,
+    buildRowActionsColumn(rowActions, { dropdownLabel: "User Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/users/rowActions.config.jsx b/apps/web/src/modules/admin/config/users/rowActions.config.jsx
new file mode 100644
index 0000000..843dfe1
--- /dev/null
+++ b/apps/web/src/modules/admin/config/users/rowActions.config.jsx
@@ -0,0 +1,69 @@
+// config/rowActions.config.jsx
+// Per-row kebab menu action definitions for the Users table.
+//
+// Each onClick receives the row's data object from buildRowActionsColumn.
+
+import { Eye, Pencil, Archive, ShieldBan, ShieldCheck, Crown, UserMinus } from "lucide-react";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.navigate       React Router navigate
+ * @param {Function} deps.onArchive      Opens archive dialog
+ * @param {Function} deps.onBan          Opens ban dialog
+ * @param {Function} deps.onUnban        Opens unban dialog
+ * @param {Function} deps.onMakeAdmin    Opens make-admin dialog
+ * @param {Function} deps.onDemoteAdmin  Opens demote-admin dialog
+ * @param {number}   deps.currentUserId  Logged-in admin's own user_id (hides self role-change)
+ * @returns {Array}  rowActions
+ */
+export function buildRowActions({ navigate, onArchive, onBan, onUnban, onMakeAdmin, onDemoteAdmin, currentUserId }) {
+  return [
+    {
+      key: "view",
+      label: "View Info",
+      icon: <Eye className="h-3.5 w-3.5" />,
+      onClick: (row) => navigate(`view/${row.user_id}`),
+    },
+    {
+      key: "make-admin",
+      label: "Make Admin",
+      icon: <Crown className="h-3.5 w-3.5" />,
+      onClick: (row) => onMakeAdmin(row),
+      hidden: (row) => row.acc_type === "admin" || row.user_id === currentUserId,
+      separator: true,
+    },
+    {
+      key: "demote-admin",
+      label: "Demote",
+      icon: <UserMinus className="h-3.5 w-3.5" />,
+      onClick: (row) => onDemoteAdmin(row),
+      hidden: (row) => row.acc_type !== "admin" || row.user_id === currentUserId,
+    },
+    {
+      key: "ban",
+      label: "Ban User",
+      className: "text-destructive focus:text-destructive",
+      icon: <ShieldBan className="h-3.5 w-3.5" />,
+      onClick: (row) => onBan(row),
+      hidden: (row) => !!row.is_banned || !row.is_active || row.user_id === currentUserId,
+      separator: true,
+    },
+    {
+      key: "unban",
+      label: "Unban User",
+      className: "text-emerald-600 focus:text-emerald-600",
+      icon: <ShieldCheck className="h-3.5 w-3.5" />,
+      onClick: (row) => onUnban(row),
+      hidden: (row) => !row.is_banned,
+      separator: true,
+    },
+    {
+      key: "archive",
+      label: "Archive",
+      className: "text-destructive focus:text-destructive",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      onClick: (row) => onArchive(row),
+      hidden: (row) => !row.is_active || row.user_id === currentUserId,
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/users/selection.config.jsx b/apps/web/src/modules/admin/config/users/selection.config.jsx
new file mode 100644
index 0000000..1e32a04
--- /dev/null
+++ b/apps/web/src/modules/admin/config/users/selection.config.jsx
@@ -0,0 +1,46 @@
+// config/selection.config.jsx
+import { Download, Archive, ShieldBan, ShieldCheck } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({ exportConfig, archiveUser, archiveUsers, banUsers, unbanUsers, getTableInstance }) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({ ...exportConfig, selectedRows: rows, tableInstance: table ?? getTableInstance() }),
+    },
+    {
+      key: "ban-selected",
+      label: "Ban",
+      icon: <ShieldBan className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.filter((r) => !r.is_banned).map((r) => r.user_id);
+        if (ids.length) banUsers(ids);
+      },
+      hidden: (rows) => rows.every((r) => r.is_banned || !r.is_active),
+    },
+    {
+      key: "unban-selected",
+      label: "Unban",
+      icon: <ShieldCheck className="h-3.5 w-3.5" />,
+      onClick: (rows) => unbanUsers(rows.map((r) => r.user_id)),
+      disabled: (rows) => !rows.every((r) => r.is_banned),
+    },
+    {
+      key: "archive-selected",
+      label: "Archive",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.user_id);
+        ids.length === 1
+          ? archiveUser(rows[0])
+          : archiveUsers(ids);
+      },
+      hidden: (rows) => rows.every((r) => r.status === "archived"),
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/config/users/toolbar.config.jsx b/apps/web/src/modules/admin/config/users/toolbar.config.jsx
new file mode 100644
index 0000000..86e8233
--- /dev/null
+++ b/apps/web/src/modules/admin/config/users/toolbar.config.jsx
@@ -0,0 +1,56 @@
+// ─── config/toolbar.config.jsx ────────────────────────────────────────────────
+import { RefreshCw, Download, UserPlus, Archive, Activity } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.fetchUsers    Refetch handler from useUsers
+ * @param {Object}   deps.pagination    Current pagination state
+ * @param {Object}   deps.exportConfig  { allData, attributes, filename, sheetName }
+ * @param {Function} deps.navigate      React Router navigate
+ */
+export function buildToolbarActions({ fetchUsers, pagination, exportConfig, navigate, getFilters, getSort, getTableInstance }) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      icon: <RefreshCw className="h-3.5 w-3.5" />,
+      label: "Refresh",
+      onClick: () => fetchUsers({ page: 1, limit: pagination.limit, filters: getFilters(), sort: getSort() }),
+    },
+    {
+      key: "export",
+      type: "button",
+      icon: <Download className="h-3.5 w-3.5" />,
+      label: "Export",
+      onClick: (table) => exportTableToExcel({ ...exportConfig, tableInstance: table ?? getTableInstance(), }),
+    },
+    {
+      key: "add-user",
+      type: "button",
+      icon: <UserPlus className="h-3.5 w-3.5" />,
+      label: "Add Staff",
+      variant: "default",
+      className: "text-primary-foreground",
+      onClick: () => navigate("add/staff"),
+    },
+    {
+      key: "activities",
+      type: "button",
+      icon: <Activity className="h-3.5 w-3.5" />,
+      label: "Activities",
+      variant: "secondary",
+      className: "border border-border",
+      onClick: () => navigate("/admin/activity"),
+    },
+    {
+      key: "archived-users",
+      type: "button",
+      icon: <Archive className="h-3.5 w-3.5" />,
+      label: "Archived Users",
+      variant: "secondary",
+      className: "border border-border",
+      onClick: () => navigate("/admin/users/archived"),
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/layouts/AdminLayout.jsx b/apps/web/src/modules/admin/layouts/AdminLayout.jsx
new file mode 100644
index 0000000..c9c64ad
--- /dev/null
+++ b/apps/web/src/modules/admin/layouts/AdminLayout.jsx
@@ -0,0 +1,109 @@
+/***********************************************************************************************************************************************************************
+* File Name: AdminAppLayout.jsx
+* Type of Program: Layout Route
+* Description: A Layout designated for Admin End-User. 
+* Module: Admin
+* Author: lash0000
+* Date Created: November. 28, 2025
+***********************************************************************************************************************************************************************
+* Change History:
+* DATE                AUTHOR            LOG NUMBER     DESCRIPTION                                                      
+* Oct. 10, 2025       lash0000          001            Initial creation - STAR Phase 1 Project
+***********************************************************************************************************************************************************************/
+import { Outlet, useNavigate } from "react-router-dom"
+import { useRef, useEffect } from "react"
+import { useAuth } from "@/contexts/AuthContext"
+import { AdminProvider } from "@/contexts/provider/AdminProvider"  // ← add
+
+import { TooltipProvider } from "@/components/ui/tooltip"
+import { Badge } from "@/components/ui/badge"
+import { Toaster } from "@/components/ui/sonner"
+import { cn } from "@/lib/utils"
+
+import UserMenu from "@/components/generic/UserMenu"
+import NotificationBell from "@/components/generic/NotificationBell"
+import AdminStickyAnnouncementBar from "@/components/generic/AdminStickyAnnouncementBar"
+import EnvironmentBanner from "@/components/generic/EnvironmentBanner"
+import { isQasEnv } from "@/utils/environment.util"
+import UploadProgressToast from "@/components/generic/UploadProgressToast"
+import { ROLE_CONFIG } from "@/data/profile.data"
+
+const AdminLayout = () => {
+    const { user, logout } = useAuth();
+    const navigate = useNavigate();
+    const headerRef = useRef(null)
+
+    const role = ROLE_CONFIG[user?.acc_type] ?? { label: user?.acc_type, variant: 'outline' }
+
+    useEffect(() => {
+        if (!headerRef.current) return
+        const update = () => {
+            document.documentElement.style.setProperty('--navbar-h', `${headerRef.current.offsetHeight}px`)
+        }
+        update()
+        const ro = new ResizeObserver(update)
+        ro.observe(headerRef.current)
+        return () => ro.disconnect()
+    }, [])
+
+    return (
+        <section id="philproperties-admin" data-vaul-drawer-wrapper className="min-h-screen flex flex-col">
+            <TooltipProvider>
+                {/* AdminProvider wraps header + body so UserMenu can access ProfileProvider */}
+                <AdminProvider>
+                    <div ref={headerRef} className={cn('fixed top-0 z-50 w-full bg-background border-b')} >
+                        {isQasEnv && <EnvironmentBanner />}
+                        <AdminStickyAnnouncementBar />
+                        <div className="w-full flex items-center justify-between xs:px-4 lg:px-5 py-3">
+                            <div className="flex gap-4 items-center">
+                                <div className="w-40 cursor-pointer" onClick={() => navigate("/")}>
+                                    <img src="/philpro-white.png" alt="Philproperties" className="object-cover dark:hidden" />
+                                    <img src="/philpro-dark.png" alt="Philproperties" className="object-cover hidden dark:block" />
+                                </div>
+                                <div>
+                                    <svg
+                                        data-testid="geist-icon"
+                                        height="16"
+                                        width="16"
+                                        viewBox="0 0 16 16"
+                                        strokeLinejoin="round"
+                                        className="xs:hidden sm:block fill-slate-300"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                        <path
+                                            fillRule="evenodd"
+                                            clipRule="evenodd"
+                                            d="M4.01526 15.3939L4.3107 14.7046L10.3107 0.704556L10.6061 0.0151978L11.9849 0.606077L11.6894 1.29544L5.68942 15.2954L5.39398 15.9848L4.01526 15.3939Z"
+                                        />
+                                    </svg>
+                                </div>
+                                <div id="name" className="lg:-ml-1 font-medium text-sm flex items-center gap-2">
+                                    <Badge variant={role.variant} className="xs:hidden md:block capitalize">
+                                        {role.label}
+                                    </Badge>
+                                </div>
+                            </div>
+                            <div className="flex items-center gap-3">
+                                <NotificationBell />
+                                <UserMenu />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div id="main-body" className="bg-background flex-1 flex flex-col" style={{ paddingTop: 'var(--navbar-h)' }}>
+                        <Outlet />
+                        <UploadProgressToast />
+                        <Toaster position="bottom-right" richColors />
+                    </div>
+                </AdminProvider>
+
+                {/* Footer sits outside AdminProvider intentionally */}
+                <footer className="w-full py-4 px-5 text-right text-sm text-muted-foreground bg-background">
+                    © Philproperties, 2026
+                </footer>
+            </TooltipProvider>
+        </section>
+    )
+}
+
+export default AdminLayout
diff --git a/apps/web/src/modules/admin/layouts/NavigationLayout.jsx b/apps/web/src/modules/admin/layouts/NavigationLayout.jsx
new file mode 100644
index 0000000..d780094
--- /dev/null
+++ b/apps/web/src/modules/admin/layouts/NavigationLayout.jsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { Outlet } from 'react-router-dom'
+
+const NavigationLayout = () => {
+  return (
+    <div>
+      <Outlet />
+    </div>
+  )
+}
+
+export default NavigationLayout
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/AdminDashboard.jsx b/apps/web/src/modules/admin/pages/AdminDashboard.jsx
new file mode 100644
index 0000000..893b39c
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/AdminDashboard.jsx
@@ -0,0 +1,56 @@
+// modules/admin/pages/UsersDashboard.jsx
+
+import { Tabs, TabsList, TabsTrigger } from "@/components/custom/original-tabs";
+import { ScrollArea, ScrollBar }       from "@/components/ui/scroll-area";
+import DashboardGrid                   from "@/components/generic/DashboardGrid";
+import { ADMIN_SECTIONS }              from "@/data/adminTiles.data";
+
+function scrollTo(sectionId) {
+    document.getElementById(sectionId)?.scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
+export default function AdminDashboard() {
+    return (
+        <div>
+            {/* ── Fixed tab bar — driven by the same array ── */}
+            <div className="fixed z-10 w-full bg-background border-b" style={{ top: 'var(--navbar-h)' }}>
+                <Tabs defaultValue="">
+                    <ScrollArea className="max-w-full overflow-x-auto w-full">
+                        <TabsList className="bg-background rounded-none justify-start mx-2 my-1 flex gap-1">
+                            {ADMIN_SECTIONS.map((s) => (
+                                <TabsTrigger
+                                    key={s.id}
+                                    value={s.id}
+                                    onClick={() => s.id === ADMIN_SECTIONS[0].id
+                        ? window.scrollTo({ top: 0, behavior: "smooth" })
+                        : scrollTo(s.id)
+                    }
+                                    className="data-[state=active]:bg-muted data-[state=active]:shadow-none hover:bg-muted text-muted-foreground data-[state=active]:text-foreground"
+                                >
+                                    {s.tab}
+                                </TabsTrigger>
+                            ))}
+                        </TabsList>
+                        <ScrollBar orientation="horizontal" />
+                    </ScrollArea>
+                </Tabs>
+            </div>
+
+            {/* ── Sections — same array, one DashboardGrid per entry ── */}
+            <div className="bg-muted/60 xs:pt-10 md:pt-16 xs:pb-4 md:pb-8">
+            {ADMIN_SECTIONS.map((s) => (
+                <div key={s.id} id={s.id} style={{ scrollMarginTop: 'calc(var(--navbar-h) + 40px)' }} className="min-h-64">
+                    {s.tiles.length > 0 ? (
+                        <DashboardGrid sections={[s]} />
+                    ) : (
+                        <div className="px-4 lg:container lg:mx-auto py-10">
+                            <h1 className="text-2xl font-medium tracking-tighter mb-1">{s.title}</h1>
+                            <p className="text-muted-foreground text-sm">No items yet.</p>
+                        </div>
+                    )}
+                </div>
+            ))}
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/activity/ActivityFeed.jsx b/apps/web/src/modules/admin/pages/activity/ActivityFeed.jsx
new file mode 100644
index 0000000..f902bac
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/activity/ActivityFeed.jsx
@@ -0,0 +1,267 @@
+import { useEffect, useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { useUsers } from "@/contexts/AdminUserContext";
+import { House, RefreshCw, ChevronLeft, ChevronRight, ExternalLink } from "lucide-react";
+
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Badge } from "@/components/ui/badge";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { DatePickerButton } from "@/components/generic/DatePickerButton";
+
+import { ACTION_CONFIG, getActionBadge } from "@/data/activity.data";
+import { timeAgo } from "@/utils/timestamp.util";
+import { fmtISO } from "@/utils/datetime.util";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { streamUrl } from "@/utils/media.util";
+
+const BREADCRUMB = [
+  { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+  { label: "Activity Feed" },
+];
+
+const LIMIT = 20;
+
+function toDateStr(d) {
+  if (!d) return undefined;
+  return fmtISO(d);
+}
+
+export default function ActivityFeed() {
+  const navigate = useNavigate();
+  const { fetchActivity, activity, activityPagination, loading } = useUsers();
+
+  const [page, setPage]     = useState(1);
+  const [action, setAction] = useState("all");
+  const [from, setFrom]     = useState(null);
+  const [to, setTo]         = useState(null);
+
+  const load = useCallback(
+    (p = 1) => {
+      fetchActivity({
+        page:   p,
+        limit:  LIMIT,
+        action: action === "all" ? undefined : action,
+        from:   toDateStr(from),
+        to:     toDateStr(to),
+      });
+      setPage(p);
+    },
+    [fetchActivity, action, from, to]
+  );
+
+  useEffect(() => { load(1); }, [action, from, to]);
+
+  return (
+    <section className="bg-muted/60 min-h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 pb-10">
+
+        {/* ─── Header ────────────────────────────────────────────────────── */}
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={BREADCRUMB} />
+        </div>
+
+        <div className="w-full flex flex-col gap-4">
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+            <div>
+              <h1 className="text-xl font-semibold tracking-tight">Activity Feed</h1>
+              <p className="text-sm text-muted-foreground">
+                All user actions across the system — {activityPagination.totalRecords} total
+              </p>
+            </div>
+            <Button variant="outline" size="sm" onClick={() => load(page)} disabled={loading}>
+              <RefreshCw className={`size-4 mr-2 ${loading ? "animate-spin" : ""}`} />
+              Refresh
+            </Button>
+          </div>
+
+          {/* ─── Filters ───────────────────────────────────────────────── */}
+          <div className="flex flex-wrap gap-3 bg-card border rounded-lg p-4">
+            <div className="flex flex-col gap-1 min-w-[180px]">
+              <span className="text-xs text-muted-foreground">Action</span>
+              <Select value={action} onValueChange={setAction}>
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="All actions" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All actions</SelectItem>
+                  {Object.entries(ACTION_CONFIG).map(([key, cfg]) => (
+                    <SelectItem key={key} value={key}>{cfg.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex flex-col gap-1">
+              <span className="text-xs text-muted-foreground">From</span>
+              <DatePickerButton value={from} onChange={setFrom} placeholder="Start date" />
+            </div>
+
+            <div className="flex flex-col gap-1">
+              <span className="text-xs text-muted-foreground">To</span>
+              <DatePickerButton value={to} onChange={setTo} placeholder="End date" disabled={from ? { before: from } : undefined} />
+            </div>
+
+            {(action !== "all" || from || to) && (
+              <div className="flex items-end">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 text-xs"
+                  onClick={() => { setAction("all"); setFrom(null); setTo(null); }}
+                >
+                  Clear filters
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {/* ─── Table ─────────────────────────────────────────────────── */}
+          <div className="bg-card border rounded-lg overflow-hidden">
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead className="border-b bg-muted/40">
+                  <tr>
+                    <th className="text-left px-4 py-3 font-medium text-muted-foreground text-xs uppercase tracking-wide">User</th>
+                    <th className="text-left px-4 py-3 font-medium text-muted-foreground text-xs uppercase tracking-wide">Role</th>
+                    <th className="text-left px-4 py-3 font-medium text-muted-foreground text-xs uppercase tracking-wide">Action</th>
+                    <th className="text-left px-4 py-3 font-medium text-muted-foreground text-xs uppercase tracking-wide">Entity</th>
+                    <th className="text-left px-4 py-3 font-medium text-muted-foreground text-xs uppercase tracking-wide">Time</th>
+                    <th className="px-4 py-3" />
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-border">
+                  {loading ? (
+                    [...Array(8)].map((_, i) => (
+                      <tr key={i}>
+                        <td className="px-4 py-3"><Skeleton className="h-4 w-36" /></td>
+                        <td className="px-4 py-3"><Skeleton className="h-4 w-16" /></td>
+                        <td className="px-4 py-3"><Skeleton className="h-5 w-24 rounded-full" /></td>
+                        <td className="px-4 py-3"><Skeleton className="h-4 w-20" /></td>
+                        <td className="px-4 py-3"><Skeleton className="h-4 w-20" /></td>
+                        <td className="px-4 py-3" />
+                      </tr>
+                    ))
+                  ) : activity.length === 0 ? (
+                    <tr>
+                      <td colSpan={6} className="px-4 py-12 text-center text-muted-foreground text-sm">
+                        No activity found.
+                      </td>
+                    </tr>
+                  ) : (
+                    activity.map((row) => (
+                      <ActivityRow
+                        key={row.activity_id}
+                        row={row}
+                        onViewUser={() => navigate(`/admin/users/view/${row.user_id}`)}
+                      />
+                    ))
+                  )}
+                </tbody>
+              </table>
+            </div>
+
+            {/* ─── Pagination ────────────────────────────────────────── */}
+            <div className="flex items-center justify-between px-4 py-3 border-t bg-muted/20 text-sm text-muted-foreground">
+              <span>
+                {activityPagination.totalRecords > 0
+                  ? `Page ${activityPagination.page} of ${activityPagination.totalPages} · ${activityPagination.totalRecords} total`
+                  : "No results"}
+              </span>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline" size="icon" className="h-7 w-7"
+                  disabled={!activityPagination.hasPrevPage || loading}
+                  onClick={() => load(activityPagination.page - 1)}
+                >
+                  <ChevronLeft className="size-4" />
+                </Button>
+                <Button
+                  variant="outline" size="icon" className="h-7 w-7"
+                  disabled={!activityPagination.hasNextPage || loading}
+                  onClick={() => load(activityPagination.page + 1)}
+                >
+                  <ChevronRight className="size-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+// ─── Row ──────────────────────────────────────────────────────────────────────
+function initials(name, email) {
+  if (name) return name.split(" ").map((n) => n[0]).slice(0, 2).join("").toUpperCase();
+  return (email?.[0] ?? "?").toUpperCase();
+}
+
+function ActivityRow({ row, onViewUser }) {
+  const { fmtDateTime } = useDateFormat();
+  const { label, className } = getActionBadge(row.action);
+  const ts = row.created_at;
+  const displayName = row.full_name ?? row.email ?? `User #${row.user_id}`;
+
+  return (
+    <tr className="hover:bg-muted/30 transition-colors">
+      <td className="px-4 py-3">
+        <div className="flex items-center gap-3">
+          <Avatar size="sm" className="shrink-0">
+            <AvatarImage src={streamUrl(row.avatar_stream_token) ?? undefined} alt={row.full_name ?? row.email} />
+            <AvatarFallback className="text-xs font-semibold bg-secondary text-secondary-foreground">
+              {initials(row.full_name, row.email)}
+            </AvatarFallback>
+          </Avatar>
+          <div className="flex flex-col min-w-0">
+            <span className="font-medium text-sm truncate max-w-[200px]">{displayName}</span>
+            {row.full_name && (
+              <span className="text-xs text-muted-foreground truncate max-w-[200px]">{row.email}</span>
+            )}
+          </div>
+        </div>
+      </td>
+      <td className="px-4 py-3">
+        <Badge variant="outline" className="capitalize text-xs">{row.acc_type ?? "—"}</Badge>
+      </td>
+      <td className="px-4 py-3">
+        <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border ${className}`}>
+          {label}
+        </span>
+      </td>
+      <td className="px-4 py-3 text-muted-foreground text-xs">
+        {row.entity_type
+          ? <span className="capitalize">{row.entity_type}{row.entity_id ? ` #${row.entity_id}` : ""}</span>
+          : <span className="text-muted-foreground/50">—</span>}
+      </td>
+      <td className="px-4 py-3 text-xs whitespace-nowrap">
+        {ts ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="text-muted-foreground cursor-default">{fmtDateTime(ts)}</span>
+            </TooltipTrigger>
+            <TooltipContent side="left">
+              {timeAgo(ts)}
+            </TooltipContent>
+          </Tooltip>
+        ) : (
+          <span className="text-muted-foreground/50">—</span>
+        )}
+      </td>
+      <td className="px-4 py-3">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="outline" size="sm" className="opacity-50 hover:opacity-100" onClick={onViewUser}>
+              <ExternalLink />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>View user</TooltipContent>
+        </Tooltip>
+      </td>
+    </tr>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/activity/UserActivityPage.jsx b/apps/web/src/modules/admin/pages/activity/UserActivityPage.jsx
new file mode 100644
index 0000000..660a91e
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/activity/UserActivityPage.jsx
@@ -0,0 +1,229 @@
+import { useEffect, useState, useCallback } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { useUsers } from "@/contexts/AdminUserContext";
+import { House, ArrowLeft, RefreshCw, ChevronLeft, ChevronRight } from "lucide-react";
+
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { DatePickerButton } from "@/components/generic/DatePickerButton";
+
+import { ACTION_CONFIG, getActionBadge } from "@/data/activity.data";
+import { timeAgo } from "@/utils/timestamp.util";
+import { fmtISO } from "@/utils/datetime.util";
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+const LIMIT = 20;
+
+function toDateStr(d) {
+  if (!d) return undefined;
+  return fmtISO(d);
+}
+
+export default function UserActivityPage() {
+  const { userId } = useParams();
+  const navigate   = useNavigate();
+  const { user, fetchUser, fetchUserActivity, activity, activityPagination, activityLoading } = useUsers();
+
+  const [page, setPage]     = useState(1);
+  const [action, setAction] = useState("all");
+  const [from, setFrom]     = useState(null);
+  const [to, setTo]         = useState(null);
+
+  const load = useCallback(
+    (p = 1) => {
+      fetchUserActivity(userId, {
+        page:   p,
+        limit:  LIMIT,
+        action: action === "all" ? undefined : action,
+        from:   toDateStr(from),
+        to:     toDateStr(to),
+      });
+      setPage(p);
+    },
+    [fetchUserActivity, userId, action, from, to]
+  );
+
+  useEffect(() => { fetchUser(userId); }, [userId]);
+  useEffect(() => { load(1); }, [action, from, to, userId]);
+
+  const displayName = user?.personal_info?.name?.full_name ?? user?.email ?? `User #${userId}`;
+
+  const breadcrumb = [
+    { label: "Home",    icon: <House className="size-4" />, to: "/admin" },
+    { label: "Users",   to: "/admin/users" },
+    { label: displayName, to: `/admin/users/view/${userId}` },
+    { label: "Activity" },
+  ];
+
+  return (
+    <section className="bg-muted/60 min-h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 pb-10">
+
+        {/* ─── Header ──────────────────────────────────────────────────── */}
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={breadcrumb} />
+        </div>
+
+        <div className="w-full flex flex-col gap-4">
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex items-center gap-3">
+              <Button variant="ghost" size="icon" onClick={() => navigate(`/admin/users/view/${userId}`)}>
+                <ArrowLeft className="size-4" />
+              </Button>
+              <div>
+                <h1 className="text-xl font-semibold tracking-tight">Activity — {displayName}</h1>
+                <p className="text-sm text-muted-foreground">
+                  {activityPagination.totalRecords} event{activityPagination.totalRecords !== 1 ? "s" : ""} recorded
+                </p>
+              </div>
+            </div>
+            <Button variant="outline" size="sm" onClick={() => load(page)} disabled={activityLoading}>
+              <RefreshCw className={`size-4 mr-2 ${activityLoading ? "animate-spin" : ""}`} />
+              Refresh
+            </Button>
+          </div>
+
+          {/* ─── Filter ──────────────────────────────────────────────── */}
+          <div className="flex flex-wrap items-end gap-3 bg-card border rounded-lg p-4">
+            <div className="flex flex-col gap-1 min-w-[180px]">
+              <span className="text-xs text-muted-foreground">Filter by action</span>
+              <Select value={action} onValueChange={setAction}>
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="All actions" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All actions</SelectItem>
+                  {Object.entries(ACTION_CONFIG).map(([key, cfg]) => (
+                    <SelectItem key={key} value={key}>{cfg.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex flex-col gap-1">
+              <span className="text-xs text-muted-foreground">From</span>
+              <DatePickerButton value={from} onChange={setFrom} placeholder="Start date" />
+            </div>
+
+            <div className="flex flex-col gap-1">
+              <span className="text-xs text-muted-foreground">To</span>
+              <DatePickerButton value={to} onChange={setTo} placeholder="End date" disabled={from ? { before: from } : undefined} />
+            </div>
+
+            {(action !== "all" || from || to) && (
+              <div className="flex items-end">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 text-xs"
+                  onClick={() => { setAction("all"); setFrom(null); setTo(null); }}
+                >
+                  Clear filters
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {/* ─── Timeline ────────────────────────────────────────────── */}
+          <div className="bg-card border rounded-lg overflow-hidden">
+            {activityLoading ? (
+              <div className="p-6 space-y-4">
+                {[...Array(6)].map((_, i) => (
+                  <div key={i} className="flex items-center gap-4">
+                    <Skeleton className="h-5 w-24 rounded-full shrink-0" />
+                    <Skeleton className="h-4 w-20" />
+                    <Skeleton className="h-4 w-28 ml-auto" />
+                  </div>
+                ))}
+              </div>
+            ) : activity.length === 0 ? (
+              <div className="px-6 py-12 text-center text-muted-foreground text-sm">
+                No activity recorded{action !== "all" ? " for this filter" : ""}.
+              </div>
+            ) : (
+              <div className="divide-y divide-border">
+                {activity.map((row) => (
+                  <ActivityItem key={row.activity_id} row={row} />
+                ))}
+              </div>
+            )}
+
+            {/* ─── Pagination ──────────────────────────────────────── */}
+            <div className="flex items-center justify-between px-4 py-3 border-t bg-muted/20 text-sm text-muted-foreground">
+              <span>
+                {activityPagination.totalRecords > 0
+                  ? `Page ${activityPagination.page} of ${activityPagination.totalPages} · ${activityPagination.totalRecords} total`
+                  : "No results"}
+              </span>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline" size="icon" className="h-7 w-7"
+                  disabled={!activityPagination.hasPrevPage || activityLoading}
+                  onClick={() => load(activityPagination.page - 1)}
+                >
+                  <ChevronLeft className="size-4" />
+                </Button>
+                <Button
+                  variant="outline" size="icon" className="h-7 w-7"
+                  disabled={!activityPagination.hasNextPage || activityLoading}
+                  onClick={() => load(activityPagination.page + 1)}
+                >
+                  <ChevronRight className="size-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+// ─── Item ──────────────────────────────────────────────────────────────────────
+function ActivityItem({ row }) {
+  const { fmtDateTime } = useDateFormat();
+  const { label, className } = getActionBadge(row.action);
+  const ts = row.created_at;
+
+  return (
+    <div className="flex items-center gap-3 px-5 py-3 hover:bg-muted/30 transition-colors">
+      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border shrink-0 ${className}`}>
+        {label}
+      </span>
+
+      {row.entity_type ? (
+        <span className="text-xs text-muted-foreground capitalize">
+          {row.entity_type}{row.entity_id ? ` #${row.entity_id}` : ""}
+        </span>
+      ) : (
+        <span className="text-xs text-muted-foreground/40">—</span>
+      )}
+
+      {row.details && Object.keys(row.details).length > 0 && (
+        <span className="text-xs text-muted-foreground hidden sm:inline truncate max-w-xs">
+          {Object.entries(row.details)
+            .map(([k, v]) => `${k}: ${v}`)
+            .join(" · ")}
+        </span>
+      )}
+
+      <span className="ml-auto text-xs whitespace-nowrap shrink-0">
+        {ts ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="text-muted-foreground cursor-default">{fmtDateTime(ts)}</span>
+            </TooltipTrigger>
+            <TooltipContent side="left">
+              {timeAgo(ts)}
+            </TooltipContent>
+          </Tooltip>
+        ) : (
+          <span className="text-muted-foreground/40">—</span>
+        )}
+      </span>
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/advertisements/AddAdvertisement.jsx b/apps/web/src/modules/admin/pages/advertisements/AddAdvertisement.jsx
new file mode 100644
index 0000000..4a348a1
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/advertisements/AddAdvertisement.jsx
@@ -0,0 +1,537 @@
+// modules/admin/pages/advertisements/AddAdvertisement.jsx
+
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+    House, Plus, Trash2, ImagePlus, MapPin, FileText,
+    CalendarClock, Check, ChevronLeft, ChevronRight,
+} from "lucide-react";
+
+import { useAdvertisements } from "@/contexts/AdminAdvertisementContext";
+import { useAuth } from "@/contexts/AuthContext";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { resolveAssetSrc } from "@/utils/media.util";
+import { isValidLink, LINK_ERROR } from "@/utils/link.util";
+import { cn } from "@/lib/utils";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+import { Switch } from "@/components/ui/switch";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { DateTimePicker } from "@/components/ui/date-time-picker";
+import { AssetPickerSheet } from "@/components/generic/AssetPickerSheet";
+import { PlacementSkeleton } from "@/components/generic/PlacementSkeleton";
+import { AdvertisementPreview } from "@/components/admin/advertisements/AdvertisementPreview";
+
+import { MAX_BADGE_LABELS } from "@/data/advertisement.data";
+import { PLACEMENTS, PLACEMENT_MAP } from "@/data/placement.data";
+
+// ─── Schema ─────────────────────────────────────────────────────────────────
+// Every ad now carries the same mandatory shape — badge label(s), headline,
+// description, image, and a single link — no more Image Only / Text with
+// Image split (that toggle produced misleading results: Banner's "Text with
+// Image" mode didn't even show the image).
+
+const schema = z.object({
+    placement:     z.string().min(1, "Placement is required."),
+    badge_labels:  z.array(z.string().min(1)).min(1, "At least one badge label is required.").max(MAX_BADGE_LABELS, `A maximum of ${MAX_BADGE_LABELS} badges is allowed.`).default([]),
+    headline:      z.string().min(1, "Headline is required."),
+    description:   z.string().min(1, "Description is required.").max(100, "Description must be 100 characters or fewer."),
+    image_asset_id: z.union([z.string(), z.number()]).refine((v) => v !== null && v !== undefined && v !== "", "Image is required."),
+    redirect_link: z.string().min(1, "Link is required.").refine(isValidLink, LINK_ERROR),
+    start_date: z.string().optional(),
+    end_date:   z.string().optional(),
+    is_active:  z.boolean().default(true),
+});
+
+// ─── Steps ────────────────────────────────────────────────────────────────────
+const ALL_STEPS = [
+    { id: "placement",    label: "Placement",           icon: MapPin,         description: "Choose where this ad appears — Dashboard, Subscriptions, or Course Details." },
+    { id: "content",      label: "Content",             icon: FileText,       description: "Badge labels, headline, description, image, and link for this ad." },
+    { id: "scheduling",   label: "Scheduling & Display", icon: CalendarClock,  description: "Start/end dates and draft/active status." },
+    { id: "review",       label: "Review",               icon: Check,          description: "Confirm everything before creating this ad." },
+];
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+function FieldError({ message }) {
+    if (!message) return null;
+    return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+// ─── Stepper header ─────────────────────────────────────────────────────────
+
+function Stepper({ steps, stepIndex }) {
+    return (
+        <div className="flex items-center gap-0">
+            {steps.map((s, i) => {
+                const Icon     = s.icon;
+                const isActive = stepIndex === i;
+                const isDone   = stepIndex > i;
+
+                // "contents" drops this wrapper out of layout so the node and its
+                // trailing line become direct siblings in the outer flex row — that
+                // way every line shares the leftover space equally (flex-1), instead
+                // of being sized off its own step's (possibly short) label width.
+                return (
+                    <div key={s.id} className="contents">
+                        <div className="flex flex-col items-center gap-1 shrink-0">
+                            <div className={cn(
+                                "h-8 w-8 rounded-full flex items-center justify-center border transition-colors shrink-0",
+                                isDone   && "bg-emerald-600 border-emerald-600 text-white",
+                                isActive && "border-primary bg-primary text-primary-foreground",
+                                !isActive && !isDone && "border-border bg-background text-muted-foreground"
+                            )}>
+                                {isDone ? <Check className="h-4 w-4" /> : <Icon className="h-4 w-4" />}
+                            </div>
+                            <span className={cn(
+                                "text-[11px] font-medium whitespace-nowrap hidden sm:block",
+                                isActive ? "text-foreground"  : "text-muted-foreground",
+                                isDone   ? "text-emerald-600" : ""
+                            )}>
+                                {s.label}
+                            </span>
+                        </div>
+                        {i < steps.length - 1 && (
+                            <div className={cn(
+                                "flex-1 h-px mx-2 mb-4 transition-colors",
+                                stepIndex > i ? "bg-emerald-600" : "bg-border"
+                            )} />
+                        )}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
+
+// ─── Step 1: Placement ──────────────────────────────────────────────────────
+
+function StepPlacement({ placement, setValue, errors, format }) {
+    return (
+        <div className="space-y-5">
+            <div>
+                <Label className="mb-1.5 block">Placement</Label>
+                <Select
+                    value={placement || undefined}
+                    onValueChange={(v) => setValue("placement", v, { shouldValidate: true })}
+                >
+                    <SelectTrigger>
+                        <SelectValue placeholder="Select a placement" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {PLACEMENTS.map((p) => (
+                            <SelectItem key={p.key} value={p.key}>{p.pageLabel}</SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                <FieldError message={errors.placement?.message} />
+            </div>
+
+            {placement && (
+                <div>
+                    <p className="text-xs text-muted-foreground mb-2">
+                        Preview — the highlighted area is roughly where this ad will appear.
+                    </p>
+                    <PlacementSkeleton placement={placement} />
+                    <p className="text-xs text-muted-foreground mt-2">
+                        Format: <span className="font-medium text-foreground capitalize">{format}</span> — determined by the placement above.
+                    </p>
+                </div>
+            )}
+        </div>
+    );
+}
+
+// ─── Step 2: Content ────────────────────────────────────────────────────────
+
+function StepImagePicker({ selectedAsset, imageUrl, setPickerOpen }) {
+    return selectedAsset ? (
+        <div
+            className="relative rounded-lg overflow-hidden cursor-pointer border h-36 group"
+            onClick={() => setPickerOpen(true)}
+        >
+            <img
+                src={imageUrl || resolveAssetSrc(selectedAsset)}
+                alt={selectedAsset.display_name}
+                className="w-full h-full object-cover"
+            />
+            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center">
+                <span className="text-white text-sm opacity-0 group-hover:opacity-100">Change image</span>
+            </div>
+        </div>
+    ) : (
+        <button
+            type="button"
+            onClick={() => setPickerOpen(true)}
+            className="w-full h-36 rounded-lg border border-dashed flex flex-col items-center justify-center gap-2 text-muted-foreground hover:bg-muted/50 transition-colors"
+        >
+            <ImagePlus className="size-5" />
+            <span className="text-sm">Select an image</span>
+        </button>
+    );
+}
+
+function StepContent({
+    register, errors, setValue, watch, description,
+    selectedAsset, imageUrl, setPickerOpen, format,
+}) {
+    const badgeLabelFields = watch("badge_labels") ?? [];
+    const appendBadgeLabel = () => setValue("badge_labels", [...badgeLabelFields, ""], { shouldValidate: true, shouldDirty: true });
+    const removeBadgeLabel = (index) => setValue("badge_labels", badgeLabelFields.filter((_, i) => i !== index), { shouldValidate: true, shouldDirty: true });
+
+    return (
+        <div className="space-y-5">
+            <div>
+                <Label className="mb-1.5 block">Badge labels</Label>
+                <div className="space-y-2">
+                    {badgeLabelFields.map((_, index) => (
+                        <div key={index} className="flex gap-2 items-start">
+                            <div className="flex-1">
+                                <Input placeholder="e.g. Ad" {...register(`badge_labels.${index}`)} />
+                                <FieldError message={errors.badge_labels?.[index]?.message} />
+                            </div>
+                            <Button type="button" variant="ghost" size="icon" onClick={() => removeBadgeLabel(index)} aria-label="Remove">
+                                <Trash2 className="size-4" />
+                            </Button>
+                        </div>
+                    ))}
+                    {badgeLabelFields.length < MAX_BADGE_LABELS ? (
+                        <Button type="button" variant="outline" size="sm" onClick={appendBadgeLabel}>
+                            <Plus className="size-3.5" />
+                            Add badge label
+                        </Button>
+                    ) : (
+                        <p className="text-xs text-muted-foreground">Maximum of {MAX_BADGE_LABELS} badges reached.</p>
+                    )}
+                </div>
+                <FieldError message={errors.badge_labels?.message} />
+            </div>
+
+            <div>
+                <Label className="mb-1.5 block">Headline</Label>
+                <Input placeholder="e.g. Discover the World Top Designers" {...register("headline")} />
+                <FieldError message={errors.headline?.message} />
+            </div>
+
+            <div>
+                <Label className="mb-1.5 block">Description</Label>
+                <Textarea rows={3} placeholder="Supporting text under the headline" {...register("description")} />
+                <div className="flex justify-between items-start mt-1">
+                    <FieldError message={errors.description?.message} />
+                    <span className={`text-xs ml-auto ${(description?.length ?? 0) > 100 ? "text-destructive" : "text-muted-foreground"}`}>
+                        {description?.length ?? 0}/100
+                    </span>
+                </div>
+            </div>
+
+            <div>
+                <Label className="mb-1.5 block">Image</Label>
+                <StepImagePicker selectedAsset={selectedAsset} imageUrl={imageUrl} setPickerOpen={setPickerOpen} />
+                <FieldError message={errors.image_asset_id?.message} />
+            </div>
+
+            <div>
+                <Label className="mb-1.5 block">Link</Label>
+                <Input placeholder="e.g. /courses or https://example.com" {...register("redirect_link")} />
+                <FieldError message={errors.redirect_link?.message} />
+                <p className="text-xs text-muted-foreground mt-1.5">
+                    Where clicking this ad goes to.
+                </p>
+            </div>
+
+            <Separator />
+
+            <AdvertisementPreview
+                format={format}
+                badgeLabels={badgeLabelFields}
+                headline={watch("headline")}
+                description={watch("description")}
+                imageSrc={imageUrl || (selectedAsset ? resolveAssetSrc(selectedAsset) : null)}
+            />
+        </div>
+    );
+}
+
+// ─── Step 3: Scheduling & Display ───────────────────────────────────────────
+
+function StepScheduling({ watch, setValue }) {
+    const isActive = watch("is_active");
+
+    return (
+        <div className="space-y-5">
+            <div className="grid grid-cols-2 gap-3">
+                <div>
+                    <Label className="mb-1.5 block">Start date</Label>
+                    <DateTimePicker
+                        value={watch("start_date") || null}
+                        onChange={(iso) => setValue("start_date", iso ?? "", { shouldValidate: true })}
+                        placeholder="No start date"
+                    />
+                </div>
+                <div>
+                    <Label className="mb-1.5 block">End date</Label>
+                    <DateTimePicker
+                        value={watch("end_date") || null}
+                        onChange={(iso) => setValue("end_date", iso ?? "", { shouldValidate: true })}
+                        placeholder="No end date"
+                    />
+                </div>
+            </div>
+            <Separator />
+            <div>
+                <Label className="mb-1.5 block">Status</Label>
+                <div className="flex items-center justify-between border rounded-md px-3 h-9">
+                    <span className="text-sm">{isActive ? "Active" : "Draft"}</span>
+                    <Switch
+                        checked={isActive}
+                        onCheckedChange={(v) => setValue("is_active", v)}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// ─── Step 5: Review ─────────────────────────────────────────────────────────
+
+function SummaryRow({ label, value }) {
+    if (!value) return null;
+    return (
+        <div className="flex justify-between py-1.5 text-sm gap-4">
+            <span className="text-muted-foreground min-w-[110px] shrink-0">{label}</span>
+            <span className="text-foreground text-right break-words">{value}</span>
+        </div>
+    );
+}
+
+function StepReview({ data, selectedAsset, imageUrl }) {
+    const { fmtDateTime } = useDateFormat();
+    const placementMeta = PLACEMENT_MAP[data.placement];
+
+    return (
+        <div className="space-y-4">
+            <div className="border rounded-lg p-4 space-y-1">
+                <div className="flex items-center gap-2 mb-2">
+                    <MapPin className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-sm font-medium">Placement</span>
+                    {placementMeta && <Badge variant="secondary" className="ml-auto capitalize">{placementMeta.format}</Badge>}
+                </div>
+                <SummaryRow label="Page" value={placementMeta?.pageLabel} />
+            </div>
+
+            <div className="border rounded-lg p-4 space-y-1">
+                <p className="text-sm font-medium mb-2">Content</p>
+                <SummaryRow label="Badges"      value={(data.badge_labels ?? []).filter(Boolean).join(", ")} />
+                <SummaryRow label="Headline"    value={data.headline} />
+                <SummaryRow label="Description" value={data.description} />
+            </div>
+
+            <div className="border rounded-lg p-4 space-y-1">
+                <p className="text-sm font-medium mb-2">Image</p>
+                {selectedAsset ? (
+                    <img
+                        src={imageUrl || resolveAssetSrc(selectedAsset)}
+                        alt={selectedAsset.display_name}
+                        className="h-24 rounded border object-cover"
+                    />
+                ) : (
+                    <p className="text-sm text-muted-foreground">No image selected.</p>
+                )}
+            </div>
+
+            <div className="border rounded-lg p-4 space-y-1">
+                <p className="text-sm font-medium mb-2">Link</p>
+                <SummaryRow label="Goes to" value={data.redirect_link} />
+            </div>
+
+            <div className="border rounded-lg p-4 space-y-1">
+                <p className="text-sm font-medium mb-2">Scheduling & display</p>
+                <SummaryRow label="Start date" value={data.start_date ? fmtDateTime(data.start_date) : null} />
+                <SummaryRow label="End date"   value={data.end_date ? fmtDateTime(data.end_date) : null} />
+                <SummaryRow label="Status"     value={data.is_active ? "Active" : "Draft"} />
+            </div>
+        </div>
+    );
+}
+
+// ─── Page ───────────────────────────────────────────────────────────────────
+
+export default function AddAdvertisement() {
+    const navigate = useNavigate();
+    const { createAdvertisement, loading } = useAdvertisements();
+    const { user } = useAuth();
+
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const [selectedAsset, setSelectedAsset] = useState(null);
+    const [imagePreviewUrl, setImagePreviewUrl] = useState(null);
+    const [step, setStep] = useState(0);
+
+    const {
+        register,
+        handleSubmit,
+        trigger,
+        getValues,
+        watch,
+        setValue,
+        formState: { errors, isDirty },
+    } = useForm({
+        resolver: zodResolver(schema),
+        defaultValues: {
+            placement: undefined,
+            badge_labels: [],
+            headline: "",
+            description: "",
+            image_asset_id: null,
+            redirect_link: "",
+            start_date: "",
+            end_date: "",
+            is_active: true,
+        },
+    });
+
+    // selectedAsset lives outside the form and its setValue() call doesn't pass
+    // shouldDirty, so isDirty alone would miss it.
+    const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(
+        isDirty || !!selectedAsset
+    );
+
+    const placement = watch("placement");
+    const description = watch("description");
+    const format = PLACEMENT_MAP[placement]?.format;
+
+    const steps = ALL_STEPS;
+    const stepIndex = Math.min(step, steps.length - 1);
+    const current = steps[stepIndex];
+
+    const breadcrumbItems = [
+        { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+        { label: "Ads", to: "/admin/advertisements" },
+        { label: "New" },
+    ];
+
+    // Validate only the current step's fields before advancing
+    const handleNext = async () => {
+        let fields = [];
+        if (current.id === "placement") fields = ["placement"];
+        else if (current.id === "content") fields = ["badge_labels", "headline", "description", "image_asset_id", "redirect_link"];
+
+        const valid = fields.length ? await trigger(fields) : true;
+        if (valid) setStep((s) => Math.min(s + 1, steps.length - 1));
+    };
+
+    const handleBack = () => setStep((s) => Math.max(s - 1, 0));
+
+    // Called manually — no <form> tag so Enter/click on earlier steps can't accidentally submit
+    const handleCreate = handleSubmit(async (values) => {
+        const payload = {
+            ...values,
+            start_date: values.start_date || null,
+            end_date:   values.end_date   || null,
+            createdBy:  user?.user_id ?? null,
+        };
+
+        const res = await createAdvertisement(payload);
+        if (res) { bypassOnce(); navigate("/admin/advertisements"); }
+    });
+
+    return (
+        <section className="bg-muted h-full">
+            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-center px-4">
+                <div className="flex flex-col gap-2 my-6 w-full">
+                    <AppBreadcrumb items={breadcrumbItems} />
+                </div>
+
+                <div className="w-full max-w-2xl pb-10 space-y-6">
+                    <div>
+                        <h1 className="text-2xl font-semibold tracking-tight mb-1">New advertisement</h1>
+                        <p className="text-sm text-muted-foreground">Create a hero or banner placement.</p>
+                    </div>
+
+                    <Stepper steps={steps} stepIndex={stepIndex} />
+
+                    <div className="rounded-lg border bg-card p-6 min-h-[360px]">
+                        <div className="space-y-0.5 pb-4 mb-1 border-b">
+                            <h2 className="text-sm font-semibold">{current.label}</h2>
+                            <p className="text-xs text-muted-foreground">{current.description}</p>
+                        </div>
+
+                        {current.id === "placement" && (
+                            <StepPlacement
+                                placement={placement}
+                                setValue={setValue}
+                                errors={errors}
+                                format={format}
+                            />
+                        )}
+                        {current.id === "content" && (
+                            <StepContent
+                                register={register}
+                                errors={errors}
+                                setValue={setValue}
+                                watch={watch}
+                                description={description}
+                                selectedAsset={selectedAsset}
+                                imageUrl={imagePreviewUrl}
+                                setPickerOpen={setPickerOpen}
+                                format={format}
+                            />
+                        )}
+                        {current.id === "scheduling" && (
+                            <StepScheduling watch={watch} setValue={setValue} />
+                        )}
+                        {current.id === "review" && (
+                            <StepReview data={getValues()} selectedAsset={selectedAsset} imageUrl={imagePreviewUrl} />
+                        )}
+                    </div>
+
+                    <div className="flex justify-between gap-2">
+                        <Button
+                            type="button"
+                            variant="outline"
+                            onClick={stepIndex === 0 ? () => navigate("/admin/advertisements") : handleBack}
+                            disabled={loading}
+                        >
+                            <ChevronLeft className="size-4" />
+                            {stepIndex === 0 ? "Cancel" : "Back"}
+                        </Button>
+
+                        {stepIndex === steps.length - 1 ? (
+                            <Button type="button" onClick={handleCreate} disabled={loading}>
+                                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                                Create advertisement
+                            </Button>
+                        ) : (
+                            <Button type="button" onClick={handleNext}>
+                                Next
+                                <ChevronRight className="size-4" />
+                            </Button>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            <AssetPickerSheet
+                open={pickerOpen}
+                onOpenChange={setPickerOpen}
+                fileType="image"
+                onSelect={(asset, resolvedUrl) => {
+                    setSelectedAsset(asset);
+                    setImagePreviewUrl(resolvedUrl ?? null);
+                    setValue("image_asset_id", asset.asset_id, { shouldValidate: true });
+                }}
+            />
+
+            {unsavedChangesDialog}
+        </section>
+    );
+}
diff --git a/apps/web/src/modules/admin/pages/advertisements/AdvertisementList.jsx b/apps/web/src/modules/admin/pages/advertisements/AdvertisementList.jsx
new file mode 100644
index 0000000..133f9aa
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/advertisements/AdvertisementList.jsx
@@ -0,0 +1,350 @@
+// modules/admin/pages/advertisements/AdvertisementList.jsx
+
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { House, Plus, Search, Megaphone, ListOrdered, Edit, Trash2, Archive, ArrowUp, ArrowDown } from "lucide-react";
+
+import { useAdvertisements } from "@/contexts/AdminAdvertisementContext";
+import { resolveAssetSrc } from "@/utils/media.util";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Spinner } from "@/components/ui/spinner";
+import {
+    AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
+    AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+
+import { ADVERTISEMENT_TYPES, ADVERTISEMENT_TYPE_MAP, ADVERTISEMENT_FILTERABLE_STATUSES, ADVERTISEMENT_STATUS_MAP } from "@/data/advertisement.data";
+import { PLACEMENTS, PLACEMENT_MAP } from "@/data/placement.data";
+import { TablePagination } from "@/components/generic/Table/TablePagination";
+
+const DEFAULT_PAGE_SIZE = 10;
+
+export default function AdvertisementList() {
+    const navigate = useNavigate();
+    const { advertisements, pagination, loading, fetchAdvertisements, archiveAdvertisement, reorderAdvertisement } = useAdvertisements();
+
+    const [typeFilter, setTypeFilter] = useState("all");
+    const [statusFilter, setStatusFilter] = useState("all");
+    const [searchInput, setSearchInput] = useState("");
+    const [search, setSearch] = useState("");
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+
+    const buildFilters = () => {
+        const filters = [];
+        if (typeFilter !== "all")   filters.push({ id: "type",     value: typeFilter });
+        if (statusFilter !== "all") filters.push({ id: "status",   value: statusFilter });
+        if (search.trim())         filters.push({ id: "headline", value: search.trim() });
+        return filters;
+    };
+
+    // Single source of truth for fetching — filter setters below always pair
+    // their state update with setPage(1) in the same handler so this only
+    // ever fires once per change (no separate "reset page" effect racing it).
+    useEffect(() => {
+        fetchAdvertisements({ page, limit: pageSize, filters: buildFilters() });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [typeFilter, statusFilter, search, page, pageSize]);
+
+    const handleTypeFilter = (v) => { setTypeFilter(v); setPage(1); };
+    const handleStatusFilter = (v) => { setStatusFilter(v); setPage(1); };
+    const runSearch = () => { setSearch(searchInput); setPage(1); };
+    const handlePageSizeChange = (size) => { setPageSize(size); setPage(1); };
+
+    const items = [
+        { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+        { label: "Ads" },
+    ];
+
+    const total       = pagination?.totalRecords ?? advertisements.length;
+    const activeCount = advertisements.filter((a) => a.status === "active").length;
+    const scheduledCount = advertisements.filter((a) => a.status === "scheduled").length;
+
+    async function handleArchive(advertisementId) {
+        await archiveAdvertisement(advertisementId);
+    }
+
+    async function handleReorder(advertisementId, direction) {
+        await reorderAdvertisement(advertisementId, direction);
+    }
+
+    // Ads grouped by placement (order matters only within a placement — it's
+    // what the live site uses to pick which ad wins that slot), sorted by
+    // `order` ASC. Any ad whose placement isn't in the known registry falls
+    // into a trailing "Unassigned" group instead of disappearing.
+    const knownPlacementKeys = new Set(PLACEMENTS.map((p) => p.key));
+    const groups = [
+        ...PLACEMENTS.map((p) => ({ key: p.key, heading: `${p.pageLabel} — ${p.slotLabel}` })),
+        { key: null, heading: "Unassigned placement" },
+    ].map(({ key, heading }) => ({
+        key, heading,
+        ads: advertisements
+            .filter((a) => (key ? a.placement === key : !knownPlacementKeys.has(a.placement)))
+            .sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
+    })).filter((g) => g.ads.length > 0);
+
+    return (
+        <section className="bg-muted h-full">
+            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+                <div className="flex flex-col gap-2 my-6 w-full">
+                    <AppBreadcrumb items={items} />
+                </div>
+
+                <div className="w-full flex flex-col gap-6 pb-10">
+
+                    {/* ── Header ─────────────────────────────────────────────────── */}
+                    <div className="flex items-center justify-between flex-wrap gap-3">
+                        <div>
+                            <h1 className="text-2xl font-semibold tracking-tight">Ads</h1>
+                            <p className="text-sm text-muted-foreground">Manage public-facing hero and banner placements</p>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <Button variant="outline" onClick={() => navigate("/admin/advertisements/archived")}>
+                                <Archive className="size-4" />
+                                Archived
+                            </Button>
+                            <Button onClick={() => navigate("/admin/advertisements/add")}>
+                                <Plus className="size-4" />
+                                New ad
+                            </Button>
+                        </div>
+                    </div>
+
+                    {/* ── Stat cards ─────────────────────────────────────────────── */}
+                    <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+                        <StatCard label="Total ads"  value={total} />
+                        <StatCard label="Active"     value={activeCount}    tone="success" />
+                        <StatCard label="Scheduled"  value={scheduledCount} tone="info" />
+                    </div>
+
+                    {/* ── Filters ────────────────────────────────────────────────── */}
+                    <div className="flex items-center gap-2 flex-wrap">
+                        <Select value={typeFilter} onValueChange={handleTypeFilter}>
+                            <SelectTrigger className="w-[150px] bg-background">
+                                <SelectValue placeholder="All types" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="all">All types</SelectItem>
+                                {ADVERTISEMENT_TYPES.map((t) => (
+                                    <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+
+                        <Select value={statusFilter} onValueChange={handleStatusFilter}>
+                            <SelectTrigger className="w-[150px] bg-background">
+                                <SelectValue placeholder="All statuses" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="all">All statuses</SelectItem>
+                                {ADVERTISEMENT_FILTERABLE_STATUSES.map((s) => (
+                                    <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+
+                        <div className="flex items-center gap-2 flex-1 min-w-[160px]">
+                            <div className="relative w-64">
+                                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+                                <Input
+                                    placeholder="Search ads..."
+                                    className="pl-8 bg-background"
+                                    value={searchInput}
+                                    onChange={(e) => setSearchInput(e.target.value)}
+                                    onKeyDown={(e) => { if (e.key === "Enter") runSearch(); }}
+                                />
+                            </div>
+                            <Button variant="outline" size="icon" className="shrink-0 bg-background" onClick={runSearch} aria-label="Search">
+                                <Search className="size-4" />
+                            </Button>
+                        </div>
+                    </div>
+
+                    {/* ── Grid ───────────────────────────────────────────────────── */}
+                    {loading ? (
+                        <div className="flex items-center justify-center py-20">
+                            <Spinner className="size-6" />
+                        </div>
+                    ) : advertisements.length === 0 ? (
+                        <EmptyState onCreate={() => navigate("/admin/advertisements/add")} />
+                    ) : (
+                        <>
+                            <div className="flex flex-col gap-6">
+                                {groups.map((group) => (
+                                    <div key={group.key ?? "unassigned"} className="flex flex-col gap-3">
+                                        <h2 className="text-sm font-semibold text-muted-foreground">{group.heading}</h2>
+                                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                                            {group.ads.map((ad, index) => (
+                                                <AdvertisementCard
+                                                    key={ad.advertisement_id}
+                                                    ad={ad}
+                                                    position={index + 1}
+                                                    onView={() => navigate(`/admin/advertisements/${ad.advertisement_id}/view`)}
+                                                    onEdit={() => navigate(`/admin/advertisements/${ad.advertisement_id}/edit`)}
+                                                    onArchive={() => handleArchive(ad.advertisement_id)}
+                                                    canMoveUp={index > 0}
+                                                    canMoveDown={index < group.ads.length - 1}
+                                                    onMoveUp={() => handleReorder(ad.advertisement_id, "up")}
+                                                    onMoveDown={() => handleReorder(ad.advertisement_id, "down")}
+                                                />
+                                            ))}
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+
+                            <div className="bg-background rounded-lg border">
+                                <TablePagination
+                                    pagination={pagination}
+                                    onPageChange={setPage}
+                                    onPageSizeChange={handlePageSizeChange}
+                                    rowCount={advertisements.length}
+                                    recordLabel="ad"
+                                />
+                            </div>
+                        </>
+                    )}
+                </div>
+            </div>
+        </section>
+    );
+}
+
+// ─── Stat card ──────────────────────────────────────────────────────────────
+
+function StatCard({ label, value, tone = "default" }) {
+    const toneClass = {
+        default: "text-foreground",
+        success: "text-green-600 dark:text-green-400",
+        info:    "text-blue-600 dark:text-blue-400",
+        muted:   "text-muted-foreground",
+    }[tone];
+
+    return (
+        <div className="bg-background rounded-lg border p-4">
+            <p className="text-sm text-muted-foreground mb-1">{label}</p>
+            <p className={`text-2xl font-semibold ${toneClass}`}>{value}</p>
+        </div>
+    );
+}
+
+// ─── Advertisement card ─────────────────────────────────────────────────────
+
+function AdvertisementCard({ ad, position, onView, onEdit, onArchive, canMoveUp, canMoveDown, onMoveUp, onMoveDown }) {
+    const { fmtDateTime } = useDateFormat();
+    const typeMeta      = ADVERTISEMENT_TYPE_MAP[ad.type] ?? {};
+    const statusMeta    = ADVERTISEMENT_STATUS_MAP[ad.status] ?? {};
+    const placementMeta = PLACEMENT_MAP[ad.placement] ?? null;
+    const TypeIcon       = typeMeta.icon ?? Megaphone;
+
+    const previewSrc = resolveAssetSrc(ad.image) || ad.image_url || null;
+    const isDimmed   = ad.status === "expired" || ad.status === "archived";
+
+    const dateRange = formatDateRange(ad.start_date, ad.end_date, fmtDateTime);
+
+    return (
+        <div className={`bg-background rounded-lg border overflow-hidden flex flex-col ${isDimmed ? "opacity-70" : ""}`}>
+            <button
+                type="button"
+                onClick={onView}
+                className="h-32 bg-muted dark:bg-purple-950 relative flex items-center justify-center w-full text-left cursor-pointer"
+                aria-label="View ad details"
+            >
+                {previewSrc ? (
+                    <img src={previewSrc} alt={ad.headline || ad.type} className="w-full h-full object-cover" />
+                ) : (
+                    <Megaphone className="size-7" />
+                )}
+
+                <span className={`absolute top-2 left-2 text-xs font-medium px-2 py-0.5 rounded-md ${statusMeta.badgeClass ?? "bg-muted text-muted-foreground"}`}>
+                    {statusMeta.label ?? ad.status}
+                </span>
+                <span className="absolute top-2 right-2 flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-md bg-black/55 text-white">
+                    <TypeIcon className="size-3" />
+                    {typeMeta.label ?? ad.type}
+                </span>
+            </button>
+
+            <div className="p-3 flex flex-col gap-2 flex-1">
+                <button type="button" onClick={onView} className="text-left">
+                    <p className="text-sm font-medium leading-snug truncate hover:underline">{ad.headline || ad.badge_labels?.[0] || "Untitled ad"}</p>
+                    {placementMeta ? (
+                        <p className="text-xs text-muted-foreground mt-0.5 truncate">{placementMeta.pageLabel} — {placementMeta.slotLabel}</p>
+                    ) : (
+                        <p className="text-xs text-amber-600 dark:text-amber-400 mt-0.5">Unassigned placement</p>
+                    )}
+                    {dateRange && <p className="text-xs text-muted-foreground mt-0.5">{dateRange}</p>}
+                </button>
+
+                <div className="mt-auto flex items-center justify-between text-xs text-muted-foreground pt-2">
+                    <span className="flex items-center gap-1">
+                        <ListOrdered className="size-3.5" />
+                        Order #{position}
+                    </span>
+                    <div className="flex gap-1">
+                        <Button variant="ghost" size="icon" className="size-7" onClick={onMoveUp} disabled={!canMoveUp} aria-label="Move up">
+                            <ArrowUp className="size-3.5" />
+                        </Button>
+                        <Button variant="ghost" size="icon" className="size-7" onClick={onMoveDown} disabled={!canMoveDown} aria-label="Move down">
+                            <ArrowDown className="size-3.5" />
+                        </Button>
+                        <Button variant="ghost" size="icon" className="size-7" onClick={onEdit} aria-label="Edit">
+                            <Edit className="size-3.5" />
+                        </Button>
+                        <AlertDialog>
+                            <AlertDialogTrigger asChild>
+                                <Button variant="ghost" size="icon" className="size-7" aria-label="Delete">
+                                    <Trash2 className="size-3.5" />
+                                </Button>
+                            </AlertDialogTrigger>
+                            <AlertDialogContent>
+                                <AlertDialogHeader>
+                                    <AlertDialogTitle>Archive this ad?</AlertDialogTitle>
+                                    <AlertDialogDescription>
+                                        "{ad.headline || ad.badge_labels?.[0] || "This ad"}" will be moved to archived ads. You can restore it later.
+                                    </AlertDialogDescription>
+                                </AlertDialogHeader>
+                                <AlertDialogFooter>
+                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                    <AlertDialogAction onClick={onArchive}>Archive</AlertDialogAction>
+                                </AlertDialogFooter>
+                            </AlertDialogContent>
+                        </AlertDialog>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// ─── Empty state ────────────────────────────────────────────────────────────
+
+function EmptyState({ onCreate }) {
+    return (
+        <div className="flex flex-col items-center justify-center gap-3 py-20 text-center border rounded-lg bg-background">
+            <Megaphone className="size-8 text-muted-foreground" />
+            <div>
+                <p className="font-medium">No ads yet</p>
+                <p className="text-sm text-muted-foreground">Create your first hero or banner placement.</p>
+            </div>
+            <Button onClick={onCreate}>
+                <Plus className="size-4" />
+                New ad
+            </Button>
+        </div>
+    );
+}
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+function formatDateRange(start, end, fmtDate) {
+    if (!start && !end) return null;
+    if (start && end) return `${fmtDate(start)} - ${fmtDate(end)}`;
+    if (start)         return `Starts ${fmtDate(start)}`;
+    if (end)            return `Ends ${fmtDate(end)}`;
+    return null;
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/advertisements/ArchivedAdvertisementList.jsx b/apps/web/src/modules/admin/pages/advertisements/ArchivedAdvertisementList.jsx
new file mode 100644
index 0000000..896c852
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/advertisements/ArchivedAdvertisementList.jsx
@@ -0,0 +1,26 @@
+import { House } from "lucide-react";
+
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import ArchivedAdvertisementsTable from "../../components/advertisements/ArchivedAdvertisementsTable";
+
+export default function ArchivedAdvertisementList() {
+    const items = [
+        { label: "Home", icon: <House className="size-4" />, to: `/admin` },
+        { label: "Ads", to: `/admin/advertisements` },
+        { label: "Archived" },
+    ];
+
+    return (
+        <section className="bg-muted h-full">
+            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+                <div className="flex flex-col gap-2 my-6">
+                    <AppBreadcrumb items={items} />
+                </div>
+
+                <div className="w-full">
+                    <ArchivedAdvertisementsTable />
+                </div>
+            </div>
+        </section>
+    );
+}
diff --git a/apps/web/src/modules/admin/pages/advertisements/EditAdvertisement.jsx b/apps/web/src/modules/admin/pages/advertisements/EditAdvertisement.jsx
new file mode 100644
index 0000000..04d0564
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/advertisements/EditAdvertisement.jsx
@@ -0,0 +1,367 @@
+// modules/admin/pages/advertisements/EditAdvertisement.jsx
+
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { House, Plus, Trash2, ImagePlus } from "lucide-react";
+
+import { useAdvertisements } from "@/contexts/AdminAdvertisementContext";
+import { useAuth } from "@/contexts/AuthContext";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+import { resolveAssetSrc } from "@/utils/media.util";
+import { isValidLink, LINK_ERROR } from "@/utils/link.util";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+import { Switch } from "@/components/ui/switch";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { DateTimePicker } from "@/components/ui/date-time-picker";
+import { AssetPickerSheet } from "@/components/generic/AssetPickerSheet";
+import { AdvertisementPreview } from "@/components/admin/advertisements/AdvertisementPreview";
+
+import { MAX_BADGE_LABELS } from "@/data/advertisement.data";
+import { PLACEMENTS, PLACEMENT_MAP } from "@/data/placement.data";
+
+// ─── Schema ─────────────────────────────────────────────────────────────────
+// Every ad now carries the same mandatory shape — badge label(s), headline,
+// description, image, and a single link — no more Image Only / Text with
+// Image split (that toggle produced misleading results: Banner's "Text with
+// Image" mode didn't even show the image).
+
+const schema = z.object({
+    placement:     z.string().min(1, "Placement is required."),
+    badge_labels:  z.array(z.string().min(1)).min(1, "At least one badge label is required.").max(MAX_BADGE_LABELS, `A maximum of ${MAX_BADGE_LABELS} badges is allowed.`).default([]),
+    headline:      z.string().min(1, "Headline is required."),
+    description:   z.string().min(1, "Description is required.").max(100, "Description must be 100 characters or fewer."),
+    image_asset_id: z.union([z.string(), z.number()]).refine((v) => v !== null && v !== undefined && v !== "", "Image is required."),
+    redirect_link: z.string().min(1, "Link is required.").refine(isValidLink, LINK_ERROR),
+    start_date: z.string().optional(),
+    end_date:   z.string().optional(),
+    is_active:  z.boolean().default(true),
+});
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+function FieldError({ message }) {
+    if (!message) return null;
+    return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+function SectionCard({ title, description, children }) {
+    return (
+        <div className="rounded-lg border bg-card p-6 space-y-5">
+            {(title || description) && (
+                <div className="space-y-0.5 pb-1 border-b">
+                    {title       && <h2 className="text-sm font-semibold">{title}</h2>}
+                    {description && <p className="text-xs text-muted-foreground">{description}</p>}
+                </div>
+            )}
+            {children}
+        </div>
+    );
+}
+
+// ─── Page ───────────────────────────────────────────────────────────────────
+
+export default function EditAdvertisement() {
+    const navigate = useNavigate();
+    const { advertisementId } = useParams();
+    const { fetchAdvertisement, updateAdvertisement, loading } = useAdvertisements();
+    const { user } = useAuth();
+
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const [selectedAsset, setSelectedAsset] = useState(null);
+    const [imagePreviewUrl, setImagePreviewUrl] = useState(null);
+    // Gates the form's first paint until the fetched advertisement has been
+    // applied via reset(). Without this, fields briefly mount with their empty
+    // defaultValues before the fetch resolves.
+    const [ready, setReady] = useState(false);
+
+    const {
+        register,
+        handleSubmit,
+        reset,
+        watch,
+        setValue,
+        formState: { errors, isDirty },
+    } = useForm({
+        resolver: zodResolver(schema),
+        defaultValues: {
+            placement: undefined,
+            badge_labels: [],
+            headline: "",
+            description: "",
+            image_asset_id: null,
+            redirect_link: "",
+            start_date: "",
+            end_date: "",
+            is_active: true,
+        },
+    });
+
+    const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty);
+
+    const placement = watch("placement");
+    const description = watch("description");
+    const badgeLabelFields = watch("badge_labels") ?? [];
+    const appendBadgeLabel = () => setValue("badge_labels", [...badgeLabelFields, ""], { shouldValidate: true, shouldDirty: true });
+    const removeBadgeLabel = (index) => setValue("badge_labels", badgeLabelFields.filter((_, i) => i !== index), { shouldValidate: true, shouldDirty: true });
+    const format = PLACEMENT_MAP[placement]?.format;
+
+    const breadcrumbItems = [
+        { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+        { label: "Ads", to: "/admin/advertisements" },
+        { label: "Edit" },
+    ];
+
+    // ─── Load existing advertisement data ────────────────────────────────────
+    useEffect(() => {
+        (async () => {
+            const res = await fetchAdvertisement(advertisementId);
+            const ad = res?.data?.data ?? null;
+            if (!ad) return;
+
+            if (ad.image) {
+                setSelectedAsset(ad.image);
+                // ad.image already carries a stream_token for S3-backed assets
+                // (minted server-side in controllers/admin/advertisements.controller.js)
+                // — no separate token round-trip needed.
+                setImagePreviewUrl(resolveAssetSrc(ad.image));
+            }
+
+            reset({
+                placement:      ad.placement ?? undefined,
+                badge_labels:   ad.badge_labels ?? [],
+                headline:       ad.headline ?? "",
+                description:    ad.description ?? "",
+                image_asset_id: ad.image?.asset_id ?? null,
+                redirect_link:  ad.redirect_link ?? "",
+                start_date:     ad.start_date ?? "",
+                end_date:       ad.end_date ?? "",
+                is_active:      ad.is_active ?? true,
+            });
+
+            setReady(true);
+        })();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [advertisementId]);
+
+    const onSubmit = async (values) => {
+        if (!isDirty) { bypassOnce(); return navigate("/admin/advertisements"); }
+
+        const payload = {
+            ...values,
+            start_date: values.start_date || null,
+            end_date:   values.end_date   || null,
+            updatedBy:  user?.user_id ?? null,
+        };
+
+        const res = await updateAdvertisement(advertisementId, payload);
+        if (res) { bypassOnce(); navigate("/admin/advertisements"); }
+    };
+
+    if (!ready) {
+        return (
+            <section className="bg-muted h-full">
+                <div className="flex items-center justify-center py-32">
+                    <Spinner className="size-6" />
+                </div>
+            </section>
+        );
+    }
+
+    return (
+        <section className="bg-muted h-full">
+            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-center px-4">
+                <div className="flex flex-col gap-2 my-6 w-full">
+                    <AppBreadcrumb items={breadcrumbItems} />
+                </div>
+
+                <div className="w-full max-w-2xl pb-10">
+                    <h1 className="text-2xl font-semibold tracking-tight mb-1">Edit advertisement</h1>
+                    <p className="text-sm text-muted-foreground mb-6">Update this hero or banner placement.</p>
+
+                    <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+
+                        <SectionCard>
+                            <AdvertisementPreview
+                                format={format}
+                                badgeLabels={badgeLabelFields}
+                                headline={watch("headline")}
+                                description={watch("description")}
+                                imageSrc={imagePreviewUrl || (selectedAsset ? resolveAssetSrc(selectedAsset) : null)}
+                            />
+                        </SectionCard>
+
+                        <SectionCard title="Placement" description="Where this advertisement will appear.">
+                            <div>
+                                <Label className="mb-1.5 block">Placement</Label>
+                                <Select
+                                    value={placement || undefined}
+                                    onValueChange={(v) => setValue("placement", v, { shouldValidate: true, shouldDirty: true })}
+                                >
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Select a placement" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {PLACEMENTS.map((p) => (
+                                            <SelectItem key={p.key} value={p.key}>{p.pageLabel}</SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                                <FieldError message={errors.placement?.message} />
+                            </div>
+
+                            {format && (
+                                <p className="text-xs text-muted-foreground">
+                                    Format: <span className="font-medium text-foreground capitalize">{format}</span> — determined by the placement above.
+                                </p>
+                            )}
+                        </SectionCard>
+
+                        <SectionCard title="Content" description="Badge labels, headline, and description shown on the ad.">
+                            <div>
+                                <Label className="mb-1.5 block">Badge labels</Label>
+                                <div className="space-y-2">
+                                    {badgeLabelFields.map((_, index) => (
+                                        <div key={index} className="flex gap-2 items-start">
+                                            <div className="flex-1">
+                                                <Input placeholder="e.g. Ad" {...register(`badge_labels.${index}`)} />
+                                                <FieldError message={errors.badge_labels?.[index]?.message} />
+                                            </div>
+                                            <Button type="button" variant="ghost" size="icon" onClick={() => removeBadgeLabel(index)} aria-label="Remove">
+                                                <Trash2 className="size-4" />
+                                            </Button>
+                                        </div>
+                                    ))}
+                                    {badgeLabelFields.length < MAX_BADGE_LABELS ? (
+                                        <Button type="button" variant="outline" size="sm" onClick={appendBadgeLabel}>
+                                            <Plus className="size-3.5" />
+                                            Add badge label
+                                        </Button>
+                                    ) : (
+                                        <p className="text-xs text-muted-foreground">Maximum of {MAX_BADGE_LABELS} badges reached.</p>
+                                    )}
+                                </div>
+                                <FieldError message={errors.badge_labels?.message} />
+                            </div>
+                            <div>
+                                <Label className="mb-1.5 block">Headline</Label>
+                                <Input placeholder="e.g. Discover the World Top Designers" {...register("headline")} />
+                                <FieldError message={errors.headline?.message} />
+                            </div>
+                            <div>
+                                <Label className="mb-1.5 block">Description</Label>
+                                <Textarea rows={3} placeholder="Supporting text under the headline" {...register("description")} />
+                                <div className="flex justify-between items-start mt-1">
+                                    <FieldError message={errors.description?.message} />
+                                    <span className={`text-xs ml-auto ${(description?.length ?? 0) > 100 ? "text-destructive" : "text-muted-foreground"}`}>
+                                        {description?.length ?? 0}/100
+                                    </span>
+                                </div>
+                            </div>
+                        </SectionCard>
+
+                        <SectionCard title="Image" description="Choose an existing file from File Management.">
+                            {selectedAsset ? (
+                                <div
+                                    className="relative rounded-lg overflow-hidden cursor-pointer border h-36 group"
+                                    onClick={() => setPickerOpen(true)}
+                                >
+                                    <img
+                                        src={imagePreviewUrl || resolveAssetSrc(selectedAsset)}
+                                        alt={selectedAsset.display_name}
+                                        className="w-full h-full object-cover"
+                                    />
+                                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center">
+                                        <span className="text-white text-sm opacity-0 group-hover:opacity-100">Change image</span>
+                                    </div>
+                                </div>
+                            ) : (
+                                <button
+                                    type="button"
+                                    onClick={() => setPickerOpen(true)}
+                                    className="w-full h-36 rounded-lg border border-dashed flex flex-col items-center justify-center gap-2 text-muted-foreground hover:bg-muted/50 transition-colors"
+                                >
+                                    <ImagePlus className="size-5" />
+                                    <span className="text-sm">Select an image</span>
+                                </button>
+                            )}
+                            <FieldError message={errors.image_asset_id?.message} />
+                        </SectionCard>
+
+                        <SectionCard title="Link" description="Where clicking this ad goes to.">
+                            <div>
+                                <Label className="mb-1.5 block">Link</Label>
+                                <Input placeholder="e.g. /courses or https://example.com" {...register("redirect_link")} />
+                                <FieldError message={errors.redirect_link?.message} />
+                            </div>
+                        </SectionCard>
+
+                        <SectionCard title="Scheduling" description="Optional start and end dates for this placement.">
+                            <div className="grid grid-cols-2 gap-3">
+                                <div>
+                                    <Label className="mb-1.5 block">Start date</Label>
+                                    <DateTimePicker
+                                        value={watch("start_date") || null}
+                                        onChange={(iso) => setValue("start_date", iso ?? "", { shouldDirty: true })}
+                                        placeholder="No start date"
+                                    />
+                                </div>
+                                <div>
+                                    <Label className="mb-1.5 block">End date</Label>
+                                    <DateTimePicker
+                                        value={watch("end_date") || null}
+                                        onChange={(iso) => setValue("end_date", iso ?? "", { shouldDirty: true })}
+                                        placeholder="No end date"
+                                    />
+                                </div>
+                            </div>
+                        </SectionCard>
+
+                        <SectionCard title="Display" description="Draft/active switch.">
+                            <div>
+                                <Label className="mb-1.5 block">Status</Label>
+                                <div className="flex items-center justify-between border rounded-md px-3 h-9">
+                                    <span className="text-sm">{watch("is_active") ? "Active" : "Draft"}</span>
+                                    <Switch
+                                        checked={watch("is_active")}
+                                        onCheckedChange={(v) => setValue("is_active", v, { shouldDirty: true })}
+                                    />
+                                </div>
+                            </div>
+                        </SectionCard>
+
+                        <div className="flex justify-end gap-2 pt-2">
+                            <Button type="button" variant="outline" onClick={() => navigate("/admin/advertisements")} disabled={loading}>
+                                Cancel
+                            </Button>
+                            <Button type="submit" disabled={loading}>
+                                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                                Save changes
+                            </Button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            <AssetPickerSheet
+                open={pickerOpen}
+                onOpenChange={setPickerOpen}
+                fileType="image"
+                onSelect={(asset, resolvedUrl) => {
+                    setSelectedAsset(asset);
+                    setImagePreviewUrl(resolvedUrl ?? null);
+                    setValue("image_asset_id", asset.asset_id, { shouldValidate: true, shouldDirty: true });
+                }}
+            />
+
+            {unsavedChangesDialog}
+        </section>
+    );
+}
diff --git a/apps/web/src/modules/admin/pages/advertisements/ViewAdvertisement.jsx b/apps/web/src/modules/admin/pages/advertisements/ViewAdvertisement.jsx
new file mode 100644
index 0000000..18dddeb
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/advertisements/ViewAdvertisement.jsx
@@ -0,0 +1,212 @@
+// modules/admin/pages/advertisements/ViewAdvertisement.jsx
+
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { House, Edit, ArrowLeft, Megaphone, MousePointerClick, ExternalLink } from "lucide-react";
+
+import { useAdvertisements } from "@/contexts/AdminAdvertisementContext";
+import { resolveAssetSrc } from "@/utils/media.util";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Spinner } from "@/components/ui/spinner";
+
+import { AdvertisementPreview } from "@/components/admin/advertisements/AdvertisementPreview";
+
+import { ADVERTISEMENT_TYPE_MAP, ADVERTISEMENT_STATUS_MAP } from "@/data/advertisement.data";
+import { PLACEMENT_MAP } from "@/data/placement.data";
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+function SectionCard({ title, description, children }) {
+    return (
+        <div className="rounded-lg border bg-card p-6 space-y-4">
+            {(title || description) && (
+                <div className="space-y-0.5 pb-1 border-b">
+                    {title       && <h2 className="text-sm font-semibold">{title}</h2>}
+                    {description && <p className="text-xs text-muted-foreground">{description}</p>}
+                </div>
+            )}
+            {children}
+        </div>
+    );
+}
+
+function Field({ label, children }) {
+    return (
+        <div>
+            <p className="text-xs text-muted-foreground mb-0.5">{label}</p>
+            <div className="text-sm">{children}</div>
+        </div>
+    );
+}
+
+// ─── Page ───────────────────────────────────────────────────────────────────
+
+export default function ViewAdvertisement() {
+    const navigate = useNavigate();
+    const { advertisementId } = useParams();
+    const { fetchAdvertisement, loading } = useAdvertisements();
+    const { fmtDateTime } = useDateFormat();
+
+    const [advertisement, setAdvertisement] = useState(null);
+
+    useEffect(() => {
+        (async () => {
+            const res = await fetchAdvertisement(advertisementId);
+            setAdvertisement(res?.data?.data ?? null);
+        })();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [advertisementId]);
+
+    const breadcrumbItems = [
+        { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+        { label: "Ads", to: "/admin/advertisements" },
+        { label: "View" },
+    ];
+
+    if (loading && !advertisement) {
+        return (
+            <section className="bg-muted h-full">
+                <div className="flex items-center justify-center py-32">
+                    <Spinner className="size-6" />
+                </div>
+            </section>
+        );
+    }
+
+    if (!advertisement) {
+        return (
+            <section className="bg-muted h-full">
+                <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+                    <div className="flex flex-col gap-2 my-6 w-full">
+                        <AppBreadcrumb items={breadcrumbItems} />
+                    </div>
+                    <p className="text-sm text-muted-foreground">Ad not found.</p>
+                </div>
+            </section>
+        );
+    }
+
+    const typeMeta      = ADVERTISEMENT_TYPE_MAP[advertisement.type] ?? {};
+    const statusMeta    = ADVERTISEMENT_STATUS_MAP[advertisement.status] ?? {};
+    const placementMeta = PLACEMENT_MAP[advertisement.placement] ?? null;
+    const TypeIcon       = typeMeta.icon ?? Megaphone;
+
+    const previewSrc = resolveAssetSrc(advertisement.image) || advertisement.image_url || null;
+    const ctas = Array.isArray(advertisement.ctas) ? advertisement.ctas : [];
+
+    return (
+        <section className="bg-muted h-full">
+            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-center px-4">
+                <div className="flex flex-col gap-2 my-6 w-full">
+                    <AppBreadcrumb items={breadcrumbItems} />
+                </div>
+
+                <div className="w-full max-w-2xl pb-10 space-y-5">
+
+                    {/* ── Header ─────────────────────────────────────────────────── */}
+                    <div className="flex items-center justify-between flex-wrap gap-3">
+                        <div className="flex items-center gap-2">
+                            <Button variant="ghost" size="icon" onClick={() => navigate("/admin/advertisements")} aria-label="Back">
+                                <ArrowLeft className="size-4" />
+                            </Button>
+                            <div>
+                                <h1 className="text-xl font-semibold tracking-tight">
+                                    {advertisement.headline || advertisement.badge_labels?.[0] || "Untitled ad"}
+                                </h1>
+                                <div className="flex items-center gap-1.5 mt-1 flex-wrap">
+                                    <Badge variant="secondary" className="gap-1">
+                                        <TypeIcon className="size-3" />
+                                        {typeMeta.label ?? advertisement.type}
+                                    </Badge>
+                                    <Badge variant={advertisement.status === "active" ? "default" : "secondary"}>
+                                        {statusMeta.label ?? advertisement.status}
+                                    </Badge>
+                                    {placementMeta ? (
+                                        <Badge variant="outline">
+                                            {placementMeta.pageLabel} — {placementMeta.slotLabel}
+                                        </Badge>
+                                    ) : (
+                                        <Badge variant="outline" className="border-amber-400 text-amber-700 dark:text-amber-400">
+                                            Unassigned placement
+                                        </Badge>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                        <Button onClick={() => navigate(`/admin/advertisements/${advertisementId}/edit`)}>
+                            <Edit className="size-4" />
+                            Edit
+                        </Button>
+                    </div>
+
+                    {/* ── Preview ────────────────────────────────────────────────── */}
+                    <SectionCard>
+                        <AdvertisementPreview
+                            format={advertisement.type}
+                            badgeLabels={advertisement.badge_labels}
+                            headline={advertisement.headline}
+                            description={advertisement.description}
+                            imageSrc={previewSrc}
+                        />
+                    </SectionCard>
+
+                    {/* ── Content ────────────────────────────────────────────────── */}
+                    <SectionCard title="Content">
+                        <Field label="Badge labels">{(advertisement.badge_labels ?? []).join(", ") || "—"}</Field>
+                        <Field label="Headline">{advertisement.headline || "—"}</Field>
+                        <Field label="Description">{advertisement.description || "—"}</Field>
+                    </SectionCard>
+
+                    {/* ── Calls to action ────────────────────────────────────────── */}
+                    {ctas.length > 0 && (
+                        <SectionCard title="Calls to action">
+                            <div className="flex flex-col gap-2">
+                                {ctas.map((cta, i) => (
+                                    <div key={i} className="flex items-center justify-between text-sm border rounded-md px-3 py-2">
+                                        <span className="font-medium">{cta.label}</span>
+                                        <a href={cta.link} target="_blank" rel="noreferrer" className="text-muted-foreground flex items-center gap-1 hover:text-foreground">
+                                            {cta.link}
+                                            <ExternalLink className="size-3" />
+                                        </a>
+                                    </div>
+                                ))}
+                            </div>
+                        </SectionCard>
+                    )}
+
+                    {/* ── Scheduling & display ──────────────────────────────────── */}
+                    <SectionCard title="Scheduling & display">
+                        <div className="grid grid-cols-2 gap-4">
+                            <Field label="Start date">{fmtDateTime(advertisement.start_date)}</Field>
+                            <Field label="End date">{fmtDateTime(advertisement.end_date)}</Field>
+                            <Field label="Order">{advertisement.order ?? 0}</Field>
+                            <Field label="Active">{advertisement.is_active ? "Yes" : "No"}</Field>
+                        </div>
+                    </SectionCard>
+
+                    {/* ── Metrics ────────────────────────────────────────────────── */}
+                    <SectionCard title="Metrics">
+                        <div className="flex items-center gap-2 text-sm">
+                            <MousePointerClick className="size-4 text-muted-foreground" />
+                            <span className="font-medium">{advertisement.click_count ?? 0}</span>
+                            <span className="text-muted-foreground">clicks</span>
+                        </div>
+                    </SectionCard>
+
+                    {/* ── Audit ──────────────────────────────────────────────────── */}
+                    <SectionCard title="Audit">
+                        <div className="grid grid-cols-2 gap-4">
+                            <Field label="Created by">{advertisement.creator?.full_name || "—"}</Field>
+                            <Field label="Created at">{fmtDateTime(advertisement.createdAt)}</Field>
+                            <Field label="Last updated by">{advertisement.updater?.full_name || "—"}</Field>
+                            <Field label="Last updated at">{fmtDateTime(advertisement.updatedAt)}</Field>
+                        </div>
+                    </SectionCard>
+                </div>
+            </div>
+        </section>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/assets/AddAsset.jsx b/apps/web/src/modules/admin/pages/assets/AddAsset.jsx
new file mode 100644
index 0000000..29350e8
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/assets/AddAsset.jsx
@@ -0,0 +1,351 @@
+// modules/admin/pages/assets/AddAsset.jsx
+
+import { useState, useRef } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useForm, Controller } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { toast } from "sonner";
+import { ArrowLeft, ArrowRight, UploadCloud, X, FileVideo, FileText, Image, FileAudio } from "lucide-react";
+
+import { useAssets } from "@/contexts/AdminAssetsContext";
+import { useUploadQueue } from "@/contexts/UploadQueueContext";
+import { useAuth } from "@/contexts/AuthContext";
+import { MAX_ASSET_FILE_SIZE_SINGLE, MAX_ASSET_FILE_SIZE_SINGLE_LABEL } from "@/utils/assetUpload.util";
+import { formatFileSize } from "@/utils/format.util";
+import { isQasEnv, QAS_UPLOAD_LIMIT_MB } from "@/utils/environment.util";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+
+// ─── Derive file_type from MIME type ──────────────────────────────────────────
+
+function resolveFileType(mimeType = "") {
+    if (mimeType.startsWith("video/"))  return "video";
+    if (mimeType.startsWith("image/"))  return "image";
+    if (mimeType.startsWith("audio/"))  return "audio";
+    if (mimeType.startsWith("application/") || mimeType.startsWith("text/")) return "document";
+    return "document";
+}
+
+// ─── Schema ───────────────────────────────────────────────────────────────────
+
+const schema = z.object({
+    is_public:        z.enum(["true", "false"]),
+    storage_provider: z.enum(["chibisafe", "local", "s3"]),
+});
+
+// ─── File type icon ───────────────────────────────────────────────────────────
+
+function FileTypeIcon({ mimeType = "" }) {
+    if (mimeType.startsWith("video/")) return <FileVideo className="h-10 w-10 text-blue-400" />;
+    if (mimeType.startsWith("image/")) return <Image className="h-10 w-10 text-green-400" />;
+    if (mimeType.startsWith("audio/")) return <FileAudio className="h-10 w-10 text-purple-400" />;
+    return <FileText className="h-10 w-10 text-orange-400" />;
+}
+
+// ─── Drop zone ────────────────────────────────────────────────────────────────
+
+function DropZone({ label, accept, file, onFile, onClear, error }) {
+    const inputRef = useRef(null);
+
+    return (
+        <div
+            onDragOver={(e) => e.preventDefault()}
+            onDrop={(e) => { e.preventDefault(); const f = e.dataTransfer.files[0]; if (f) onFile(f); }}
+            onClick={() => !file && inputRef.current?.click()}
+            className={[
+                "rounded-lg border-2 border-dashed transition-colors cursor-pointer",
+                error ? "border-destructive/60 bg-destructive/5" : "",
+                file ? "border-border bg-muted/30 cursor-default" : "",
+                !file && !error ? "border-muted-foreground/30 hover:border-primary/50 hover:bg-muted/20" : "",
+            ].join(" ")}
+        >
+            <input
+                ref={inputRef}
+                type="file"
+                accept={accept}
+                className="hidden"
+                onChange={(e) => { if (e.target.files[0]) onFile(e.target.files[0]); }}
+            />
+            {file ? (
+                <div className="flex items-center gap-3 p-4">
+                    <FileTypeIcon mimeType={file.type} />
+                    <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium truncate">{file.name}</p>
+                        <p className="text-xs text-muted-foreground">
+                            {formatFileSize(file.size)} · {file.type}
+                        </p>
+                    </div>
+                    <Button
+                        type="button" variant="ghost" size="icon"
+                        onClick={(e) => { e.stopPropagation(); onClear(); }}
+                    >
+                        <X className="h-4 w-4" />
+                    </Button>
+                </div>
+            ) : (
+                <div className="flex flex-col items-center justify-center gap-2 py-10 px-4">
+                    <UploadCloud className="h-8 w-8 text-muted-foreground/50" />
+                    <p className="text-sm text-muted-foreground text-center">
+                        Drag & drop or <span className="text-primary font-medium">browse</span> to upload
+                        <br />
+                        <span className="text-xs">{label}</span>
+                    </p>
+                </div>
+            )}
+        </div>
+    );
+}
+
+// ─── Field error ──────────────────────────────────────────────────────────────
+
+function FieldError({ message }) {
+    if (!message) return null;
+    return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function AddAsset() {
+    const navigate = useNavigate();
+    const { fetchAssets } = useAssets();
+    const { addBatch } = useUploadQueue();
+    const { user } = useAuth();
+
+    const fileRef      = useRef(null);
+    const thumbnailRef = useRef(null);
+    const [thumbKey, setThumbKey] = useState(0);
+
+    const {
+        control,
+        handleSubmit,
+        setValue,
+        watch,
+        setError,
+        clearErrors,
+        formState: { errors, isDirty },
+    } = useForm({
+        resolver: zodResolver(schema),
+        defaultValues: {
+            is_public:        "false",
+            storage_provider: "s3", // ← changed from "chibisafe"
+        },
+    });
+
+    const file    = watch("_file");
+    const isVideo = file?.type?.startsWith("video/");
+    const isAudio = file?.type?.startsWith("audio/");
+
+    // setValue("_file", ...) doesn't mark isDirty (no shouldDirty), so a
+    // picked-but-unsubmitted file wouldn't otherwise be caught by the guard.
+    const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty || !!file);
+
+    // ── Auto-derive file_type from MIME ───────────────────────────────────────
+    const fileType = file ? resolveFileType(file.type) : null;
+
+    const setFile = (f) => {
+        if (f.size > MAX_ASSET_FILE_SIZE_SINGLE) {
+            setError("_file", { message: `File exceeds the ${MAX_ASSET_FILE_SIZE_SINGLE_LABEL} size limit.` });
+            return;
+        }
+        fileRef.current = f;
+        setValue("_file", f);
+        clearErrors("_file");
+    };
+
+    const setThumbnail = (f) => {
+        thumbnailRef.current = f;
+        setValue("_thumbnail", f);
+        clearErrors("_thumbnail");
+    };
+
+    // Fire-and-forget: the job goes on the same global UploadQueueContext the
+    // Bulk flow uses, so it keeps uploading in the background no matter where
+    // you navigate to next — a single sonner toast.promise() tracks it
+    // through loading -> success/error instead of a dedicated widget.
+    const onSubmit = (data) => {
+        if (!fileRef.current) {
+            setError("_file", { message: "A file is required." });
+            return;
+        }
+
+        const fileName = fileRef.current.name;
+        const uploadPromise = new Promise((resolve, reject) => {
+            addBatch(
+                [{ file: fileRef.current, thumbnail: thumbnailRef.current ?? undefined }],
+                {
+                    is_public:        data.is_public === "true",
+                    storage_provider: data.storage_provider,
+                    createdBy:        user?.user_id,
+                },
+                {
+                    source: "single",
+                    onSettled: ([result]) => {
+                        fetchAssets({ force: true });
+                        if (result?.status === "uploaded") resolve(result);
+                        else reject(new Error(result?.error || "Upload failed."));
+                    },
+                }
+            );
+        });
+
+        toast.promise(uploadPromise, {
+            loading: `Uploading ${fileName}…`,
+            success: (result) => `${result.name} uploaded successfully.`,
+            error: (err) => err.message || "Upload failed.",
+        });
+
+        bypassOnce();
+        navigate("/admin/assets");
+    };
+
+    return (
+        <div className="max-w-2xl mx-auto px-4 py-6 space-y-6">
+
+            {/* ── Header ── */}
+            <div className="flex items-center gap-3">
+                <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/admin/assets")}>
+                    <ArrowLeft className="h-4 w-4" />
+                </Button>
+                <div>
+                    <h1 className="text-xl font-semibold">Add File</h1>
+                    <p className="text-sm text-muted-foreground">Upload a new file to the file library.</p>
+                </div>
+            </div>
+
+            <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+                <div className="rounded-lg border bg-card p-6 space-y-5">
+
+                    {/* ── File ── */}
+                    <div className="space-y-1.5">
+                        <Label>File <span className="text-destructive">*</span></Label>
+                        <DropZone
+                            label="Images, videos, audio, documents"
+                            accept="image/*,video/*,audio/*,application/*,text/*"
+                            file={fileRef.current}
+                            onFile={setFile}
+                            onClear={() => {
+                                fileRef.current = null;
+                                setValue("_file", null);
+                                clearErrors("_file");
+                            }}
+                            error={errors._file?.message}
+                        />
+                        <FieldError message={errors._file?.message} />
+                        {isQasEnv && (
+                            <p className="text-xs text-amber-600">
+                                Self-hosted staging environment — uploads over {QAS_UPLOAD_LIMIT_MB}MB may fail (Cloudflare limit).
+                            </p>
+                        )}
+                        <Link
+                            to="/admin/assets/add/bulk"
+                            className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
+                        >
+                            Uploading multiple files? Use Bulk Upload <ArrowRight className="h-3 w-3" />
+                        </Link>
+                    </div>
+
+                    {/* ── Thumbnail (optional for both video and audio) ── */}
+                    {(isVideo || isAudio) && (
+                        <div className="space-y-1.5">
+                            <Label>
+                                Thumbnail{" "}
+                                <span className="text-muted-foreground text-xs">
+                                    (optional — {isVideo ? "video preview" : "album / cover art"})
+                                </span>
+                            </Label>
+                            <DropZone
+                                key={thumbKey}
+                                label="JPEG, PNG"
+                                accept="image/*"
+                                file={thumbnailRef.current}
+                                onFile={setThumbnail}
+                                onClear={() => {
+                                    thumbnailRef.current = null;
+                                    setValue("_thumbnail", null);
+                                    clearErrors("_thumbnail");
+                                    setThumbKey((k) => k + 1);
+                                }}
+                                error={errors._thumbnail?.message}
+                            />
+                            <FieldError message={errors._thumbnail?.message} />
+                        </div>
+                    )}
+
+                    {/* ── File Type · Access · Storage (one row) ── */}
+                    <div className="grid grid-cols-3 gap-4">
+
+                        {/* File Type — auto-derived, disabled */}
+                        <div className="space-y-1.5">
+                            <Label>File Type</Label>
+                            <Select value={fileType ?? ""} disabled>
+                                <SelectTrigger className="disabled:opacity-60 disabled:cursor-not-allowed">
+                                    <SelectValue placeholder="Auto-detected" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="avatar">Avatar</SelectItem>
+                                    <SelectItem value="image">Image</SelectItem>
+                                    <SelectItem value="video">Video</SelectItem>
+                                    <SelectItem value="audio">Audio</SelectItem>
+                                    <SelectItem value="document">Document</SelectItem>
+                                </SelectContent>
+                            </Select>
+                            <p className="text-xs text-muted-foreground">Detected from file</p>
+                        </div>
+
+                        {/* Access */}
+                        <div className="space-y-1.5">
+                            <Label>Access</Label>
+                            <Controller
+                                name="is_public"
+                                control={control}
+                                render={({ field }) => (
+                                    <Select value={field.value} onValueChange={field.onChange}>
+                                        <SelectTrigger><SelectValue /></SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="false">Private</SelectItem>
+                                            <SelectItem value="true">Public</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                )}
+                            />
+                        </div>
+
+                        {/* Storage Provider — TEMPORARY: locked to S3 (see zrok tunnel note above; revert after VPS migration) */}
+                        <div className="space-y-1.5">
+                            <Label>Storage</Label>
+                            <Select value="s3" disabled>
+                                <SelectTrigger className="disabled:opacity-60 disabled:cursor-not-allowed"><SelectValue /></SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="s3">S3</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+
+                    </div>
+
+                </div>
+
+                {/* ── Actions ── */}
+                <div className="flex justify-end gap-3">
+                    <Button type="button" variant="outline" onClick={() => navigate("/admin/assets")}>
+                        Cancel
+                    </Button>
+                    <Button type="submit">
+                        Upload Asset
+                    </Button>
+                </div>
+            </form>
+
+            {unsavedChangesDialog}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/assets/AddAssetsBulk.jsx b/apps/web/src/modules/admin/pages/assets/AddAssetsBulk.jsx
new file mode 100644
index 0000000..480bf10
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/assets/AddAssetsBulk.jsx
@@ -0,0 +1,229 @@
+// modules/admin/pages/assets/AddAssetsBulk.jsx
+
+import { useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+    ArrowLeft, UploadCloud, X, RotateCcw, FileVideo, FileText, Image, FileAudio,
+    CheckCircle2, XCircle, AlertTriangle, Loader2, Trash2,
+} from "lucide-react";
+
+import { useAssets } from "@/contexts/AdminAssetsContext";
+import { useUploadQueue } from "@/contexts/UploadQueueContext";
+import { useAuth } from "@/contexts/AuthContext";
+import { formatFileSize } from "@/utils/format.util";
+import { isQasEnv, QAS_UPLOAD_LIMIT_MB } from "@/utils/environment.util";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+
+// ─── File type icon ───────────────────────────────────────────────────────────
+
+function FileTypeIcon({ mime = "" }) {
+    if (mime.startsWith("video/")) return <FileVideo className="h-8 w-8 text-blue-400 shrink-0" />;
+    if (mime.startsWith("image/")) return <Image className="h-8 w-8 text-green-400 shrink-0" />;
+    if (mime.startsWith("audio/")) return <FileAudio className="h-8 w-8 text-purple-400 shrink-0" />;
+    return <FileText className="h-8 w-8 text-orange-400 shrink-0" />;
+}
+
+// ─── Drop zone ────────────────────────────────────────────────────────────────
+
+function DropZone({ onFiles }) {
+    const inputRef = useRef(null);
+    const [dragOver, setDragOver] = useState(false);
+
+    return (
+        <div
+            onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
+            onDragLeave={() => setDragOver(false)}
+            onDrop={(e) => {
+                e.preventDefault();
+                setDragOver(false);
+                if (e.dataTransfer.files?.length) onFiles([...e.dataTransfer.files]);
+            }}
+            onClick={() => inputRef.current?.click()}
+            className={[
+                "rounded-lg border-2 border-dashed cursor-pointer transition-colors",
+                dragOver ? "border-primary/60 bg-primary/5" : "border-muted-foreground/30 hover:border-primary/50 hover:bg-muted/20",
+            ].join(" ")}
+        >
+            <input
+                ref={inputRef}
+                type="file"
+                multiple
+                className="hidden"
+                onChange={(e) => {
+                    if (e.target.files?.length) onFiles([...e.target.files]);
+                    e.target.value = "";
+                }}
+            />
+            <div className="flex flex-col items-center justify-center gap-2 py-10 px-4">
+                <UploadCloud className="h-8 w-8 text-muted-foreground/50" />
+                <p className="text-sm text-muted-foreground text-center">
+                    Drag & drop or <span className="text-primary font-medium">browse</span> to upload
+                    <br />
+                    <span className="text-xs">Images, videos, audio, documents — multiple files allowed</span>
+                </p>
+            </div>
+        </div>
+    );
+}
+
+// ─── File row ─────────────────────────────────────────────────────────────────
+
+function FileRow({ job, onRetry, onRemove }) {
+    const isUploading = job.status === "uploading" || job.status === "queued";
+    const isFailed = job.status === "failed" || job.status === "invalid";
+    const isUploaded = job.status === "uploaded";
+
+    const barClass = isUploaded ? "[&>div]:bg-green-500" : isFailed ? "[&>div]:bg-destructive" : "";
+
+    return (
+        <div className="flex items-center gap-3 p-4 border rounded-lg bg-card">
+            <FileTypeIcon mime={job.mime} />
+            <div className="flex-1 min-w-0 space-y-1.5">
+                <div className="flex items-center justify-between gap-2">
+                    <p className="text-sm font-medium truncate">{job.name}</p>
+                    <span className="text-xs text-muted-foreground shrink-0">{formatFileSize(job.size)}</span>
+                </div>
+                <Progress value={job.progress} className={barClass} />
+                <div className="flex items-center gap-1.5 text-xs">
+                    {isUploading && <><Loader2 className="h-3 w-3 animate-spin text-muted-foreground" /><span className="text-muted-foreground">{job.status === "queued" ? "Queued" : "Uploading…"}</span></>}
+                    {isUploaded && <><CheckCircle2 className="h-3 w-3 text-green-500" /><span className="text-green-600">Uploaded</span></>}
+                    {job.status === "failed" && <><XCircle className="h-3 w-3 text-destructive" /><span className="text-destructive">Upload failed</span></>}
+                    {job.status === "invalid" && <><AlertTriangle className="h-3 w-3 text-destructive" /><span className="text-destructive">Rejected</span></>}
+                </div>
+                {isFailed && job.error && <p className="text-xs text-destructive">{job.error}</p>}
+            </div>
+            <div className="flex items-center gap-1 shrink-0">
+                {job.status === "failed" && (
+                    <Button type="button" variant="ghost" size="sm" onClick={() => onRetry(job.id)}>
+                        <RotateCcw className="h-3.5 w-3.5 mr-1" /> Retry
+                    </Button>
+                )}
+                <Button
+                    type="button" variant="ghost" size="icon"
+                    disabled={job.status === "uploading"}
+                    onClick={() => onRemove(job.id)}
+                >
+                    <X className="h-4 w-4" />
+                </Button>
+            </div>
+        </div>
+    );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function AddAssetsBulk() {
+    const navigate = useNavigate();
+    const { fetchAssets } = useAssets();
+    const { jobs: allJobs, addBatch, retryJob, removeJob, clearFinished } = useUploadQueue();
+    const { user } = useAuth();
+
+    // Add File (single) shares this same queue so its upload survives
+    // navigation too — but it's a separate flow the user never asked to
+    // batch, so it shouldn't appear here looking like part of a bulk run.
+    const jobs = allJobs.filter((j) => j.source === "bulk");
+
+    const [isPublic, setIsPublic] = useState("false");
+    // TEMPORARY: locked to S3 (see zrok tunnel note; revert after VPS migration)
+    const storageProvider = "s3";
+
+    const total = jobs.length;
+    const done = jobs.filter((j) => j.status === "uploaded").length;
+    const failed = jobs.filter((j) => j.status === "failed" || j.status === "invalid").length;
+
+    const handleFiles = (files) => {
+        addBatch(files, {
+            is_public: isPublic === "true",
+            storage_provider: storageProvider,
+            createdBy: user?.user_id,
+        }, {
+            onSettled: () => fetchAssets({ force: true }),
+            source: "bulk",
+        });
+    };
+
+    return (
+        <div className="max-w-2xl mx-auto px-4 py-6 space-y-6">
+
+            {/* ── Header ── */}
+            <div className="flex items-center gap-3">
+                <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/admin/assets")}>
+                    <ArrowLeft className="h-4 w-4" />
+                </Button>
+                <div>
+                    <h1 className="text-xl font-semibold">Uploading Files</h1>
+                    <p className="text-sm text-muted-foreground">
+                        {total ? `${total} file${total === 1 ? "" : "s"} · ${done} done · ${failed} failed` : "Upload one or more files to the file library."}
+                    </p>
+                </div>
+            </div>
+
+            {/* ── Batch settings ── */}
+            <div className="rounded-lg border bg-card p-4 flex items-center gap-4">
+                <div className="flex-1 space-y-1.5">
+                    <label className="text-sm font-medium">Access</label>
+                    <Select value={isPublic} onValueChange={setIsPublic}>
+                        <SelectTrigger><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="false">Private</SelectItem>
+                            <SelectItem value="true">Public</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+                <div className="flex-1 space-y-1.5">
+                    <label className="text-sm font-medium">Storage</label>
+                    {/* TEMPORARY: locked to S3 (see zrok tunnel note; revert after VPS migration) */}
+                    <Select value={storageProvider} disabled>
+                        <SelectTrigger className="disabled:opacity-60 disabled:cursor-not-allowed"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="s3">S3</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+                <p className="text-xs text-muted-foreground max-w-[12rem] self-end pb-2">
+                    Applies to files added below. Video thumbnails and per-asset details can be edited afterward.
+                </p>
+            </div>
+
+            {/* ── Drop zone ── */}
+            <DropZone onFiles={handleFiles} />
+            {isQasEnv && (
+                <p className="text-xs text-amber-600">
+                    Self-hosted staging environment — uploads over {QAS_UPLOAD_LIMIT_MB}MB may fail (Cloudflare limit).
+                </p>
+            )}
+
+            {/* ── File list ── */}
+            {total > 0 && (
+                <div className="space-y-3">
+                    <div className="flex items-center justify-between">
+                        <span className="text-sm font-medium text-muted-foreground">Files</span>
+                        {(done > 0 || failed > 0) && (
+                            <Button type="button" variant="ghost" size="sm" onClick={() => clearFinished("bulk")}>
+                                <Trash2 className="h-3.5 w-3.5 mr-1" /> Clear finished
+                            </Button>
+                        )}
+                    </div>
+                    {jobs.map((job) => (
+                        <FileRow key={job.id} job={job} onRetry={retryJob} onRemove={removeJob} />
+                    ))}
+                </div>
+            )}
+
+            {/* ── Actions ── */}
+            <div className="flex justify-end">
+                <Button type="button" variant="outline" onClick={() => navigate("/admin/assets")}>
+                    Done
+                </Button>
+            </div>
+        </div>
+    );
+}
diff --git a/apps/web/src/modules/admin/pages/assets/ArchivedAssets.jsx b/apps/web/src/modules/admin/pages/assets/ArchivedAssets.jsx
new file mode 100644
index 0000000..19f86ef
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/assets/ArchivedAssets.jsx
@@ -0,0 +1,26 @@
+import { House } from "lucide-react";
+
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import ArchivedAssetsTable from "../../components/assets/ArchivedAssetsTable";
+
+export default function ArchivedAssetList() {
+    const items = [
+        { label: "Home", icon: <House className="size-4" />, to: `/admin` },
+        { label: "Files", to: `/admin/assets` },
+        { label: "Archived" },
+    ];
+
+    return (
+        <section className="bg-muted h-full">
+            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+                <div className="flex flex-col gap-2 my-6">
+                    <AppBreadcrumb items={items} />
+                </div>
+
+                <div className="w-full">
+                    <ArchivedAssetsTable />
+                </div>
+            </div>
+        </section>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/assets/AssetList.jsx b/apps/web/src/modules/admin/pages/assets/AssetList.jsx
new file mode 100644
index 0000000..82c1651
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/assets/AssetList.jsx
@@ -0,0 +1,25 @@
+import { House } from "lucide-react";
+
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import AssetsTable from "../../components/assets/AssetsTable";
+
+export default function AssetList() {
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: `/admin` },
+    { label: "Files" },
+  ]
+
+  return (
+    <section className="bg-muted h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6 ">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full">
+          <AssetsTable />
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/assets/EditAsset.jsx b/apps/web/src/modules/admin/pages/assets/EditAsset.jsx
new file mode 100644
index 0000000..e51b5b2
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/assets/EditAsset.jsx
@@ -0,0 +1,351 @@
+// modules/admin/pages/assets/EditAsset.jsx
+
+import { useEffect, useRef, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useForm, Controller } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft, UploadCloud, X, FileVideo, FileText, Image, RefreshCw } from "lucide-react";
+
+import { useAssets } from "@/contexts/AdminAssetsContext";
+import { useAssetPreviewSrc } from "@/hooks/useAssetPreviewSrc";
+import { formatFileSize } from "@/utils/format.util";
+import { useAuth } from "@/contexts/AuthContext";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+import { Badge } from "@/components/ui/badge";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+
+// ─── Schema ───────────────────────────────────────────────────────────────────
+
+const schema = z.object({
+    display_name: z.string().min(1, "Display name is required."),
+    description: z.string().optional(),
+    is_public: z.enum(["true", "false"]),
+});
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function FileTypeIcon({ mimeType = "" }) {
+    if (mimeType?.startsWith("video/")) return <FileVideo className="h-10 w-10 text-blue-400" />;
+    if (mimeType?.startsWith("image/")) return <Image className="h-10 w-10 text-green-400" />;
+    return <FileText className="h-10 w-10 text-orange-400" />;
+}
+
+function FieldError({ message }) {
+    if (!message) return null;
+    return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+
+// ─── Thumbnail Drop Zone ──────────────────────────────────────────────────────
+
+function ThumbnailDropZone({ currentUrl, newFile, onFile, onClear, error }) {
+    const inputRef = useRef(null);
+
+    const preview = newFile
+        ? URL.createObjectURL(newFile)
+        : currentUrl ?? null;
+
+    return (
+        <div
+            onDragOver={(e) => e.preventDefault()}
+            onDrop={(e) => { e.preventDefault(); const f = e.dataTransfer.files[0]; if (f) onFile(f); }}
+            onClick={() => !newFile && inputRef.current?.click()}
+            className={[
+                "relative rounded-lg border-2 border-dashed transition-colors overflow-hidden",
+                error ? "border-destructive/60 bg-destructive/5" : "",
+                newFile ? "border-border cursor-default" : "",
+                !newFile && !error ? "border-muted-foreground/30 hover:border-primary/50 hover:bg-muted/20 cursor-pointer" : "",
+            ].join(" ")}
+        >
+            <input
+                ref={inputRef}
+                type="file"
+                accept="image/*"
+                className="hidden"
+                onChange={(e) => { if (e.target.files[0]) onFile(e.target.files[0]); }}
+            />
+
+            {preview ? (
+                <div className="relative">
+                    <img
+                        src={preview}
+                        alt="Thumbnail preview"
+                        className="w-full object-contain"
+                    />
+                    {/* overlay actions */}
+                    <div className="absolute inset-0 bg-black/40 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                        <Button
+                            type="button"
+                            size="sm"
+                            variant="secondary"
+                            onClick={(e) => { e.stopPropagation(); inputRef.current?.click(); }}
+                        >
+                            <RefreshCw className="h-3.5 w-3.5 mr-1.5" />
+                            Replace
+                        </Button>
+                        {newFile && (
+                            <Button
+                                type="button"
+                                size="sm"
+                                variant="destructive"
+                                onClick={(e) => { e.stopPropagation(); onClear(); }}
+                            >
+                                <X className="h-3.5 w-3.5 mr-1.5" />
+                                Remove
+                            </Button>
+                        )}
+                    </div>
+                    {newFile && (
+                        <Badge className="absolute top-2 right-2 bg-primary text-primary-foreground text-xs">
+                            New
+                        </Badge>
+                    )}
+                </div>
+            ) : (
+                <div className="flex flex-col items-center justify-center gap-2 py-10 px-4">
+                    <UploadCloud className="h-8 w-8 text-muted-foreground/50" />
+                    <p className="text-sm text-muted-foreground text-center">
+                        Drag & drop or <span className="text-primary font-medium">browse</span> to upload
+                        <br />
+                        <span className="text-xs">JPEG, PNG</span>
+                    </p>
+                </div>
+            )}
+        </div>
+    );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function EditAsset() {
+    const navigate = useNavigate();
+    const { assetId } = useParams();
+    const { fetchAsset, updateAsset, loading } = useAssets();
+    const { user } = useAuth();
+
+    const thumbnailRef = useRef(null);
+    const [thumbKey, setThumbKey] = useState(0);
+    const [initializing, setInitializing] = useState(true);
+    const [asset, setAsset] = useState(null); // ← local, always fresh
+
+    const {
+        register,
+        control,
+        handleSubmit,
+        reset,
+        formState: { errors, isDirty },
+    } = useForm({
+        resolver: zodResolver(schema),
+        defaultValues: {
+            display_name: "",
+            description:  "",
+            is_public:    "false",
+        },
+    });
+
+    useEffect(() => {
+        (async () => {
+            const res = await fetchAsset(assetId);
+            const fetched = res?.data?.data ?? null;
+            if (!fetched) return;
+            setAsset(fetched);
+            reset({
+                display_name: fetched.display_name ?? "",
+                description:  fetched.description  ?? "",
+                is_public:    fetched.is_public ? "true" : "false",
+            });
+            setInitializing(false);
+        })();
+    }, [assetId]);
+
+    const isVideo            = asset?.file_type === "video";
+    const hasThumbnailChange = !!thumbnailRef.current;
+
+    // asset.file_url is redacted to null for S3-stored assets (see
+    // redactS3Url in assets.controller.js) — resolve the real preview src
+    // the same way ViewImageAsset.jsx does instead of reading it raw.
+    const { src: previewSrc } = useAssetPreviewSrc(asset, { scope: "admin" });
+
+    const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty || hasThumbnailChange);
+
+    const onSubmit = async (data) => {
+        const result = await updateAsset(
+            assetId,
+            {
+                display_name: data.display_name,
+                description:  data.description ?? "",
+                is_public:    data.is_public === "true",
+                updatedBy:    user?.user_id,
+                ...(isVideo && hasThumbnailChange ? { is_thumbnail: true } : {}),
+            },
+            hasThumbnailChange ? thumbnailRef.current : null,
+        );
+
+        if (!result) return;
+        bypassOnce();
+        navigate("/admin/assets");
+    };
+
+    if (initializing) {
+        return (
+            <div className="flex items-center justify-center h-64">
+                <Spinner className="h-6 w-6" />
+            </div>
+        );
+    }
+
+    if (!asset) {
+        return (
+            <div className="max-w-2xl mx-auto px-4 py-6">
+                <p className="text-sm text-muted-foreground">File not found.</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="max-w-2xl mx-auto px-4 py-6 space-y-6">
+
+            {/* ── Header ── */}
+            <div className="flex items-center gap-3">
+                <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/admin/assets")}>
+                    <ArrowLeft className="h-4 w-4" />
+                </Button>
+                <div>
+                    <h1 className="text-xl font-semibold">Edit File</h1>
+                    <p className="text-sm text-muted-foreground truncate max-w-sm">
+                        {asset.original_name}
+                    </p>
+                </div>
+            </div>
+
+            <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+
+                {/* ── Current file info (read-only) ── */}
+                <div className="rounded-lg border bg-muted/30 p-4">
+                    <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">
+                        File Info
+                    </p>
+                    <div className="flex items-center gap-3">
+                        <FileTypeIcon mimeType={asset.mime_type} />
+                        <div className="flex-1 min-w-0 space-y-1">
+                            <p className="text-sm font-medium truncate">{asset.original_name}</p>
+                            <div className="flex items-center gap-2 flex-wrap">
+                                <Badge variant="secondary" className="text-xs">{asset.file_type}</Badge>
+                                <Badge variant="outline" className="text-xs">{asset.extension?.toUpperCase()}</Badge>
+                                <span className="text-xs text-muted-foreground">{formatFileSize(asset.file_size) ?? "—"}</span>
+                                {asset.resolution && (
+                                    <span className="text-xs text-muted-foreground">{asset.resolution}</span>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* ── Editable fields ── */}
+                <div className="rounded-lg border bg-card p-6 space-y-5">
+
+                    {/* ── Thumbnail (video or image) ── */}
+                    {(isVideo || asset.file_type === "image" || asset.file_type === "avatar") && (
+                        <div className="space-y-1.5">
+                            <Label>
+                                Thumbnail
+                                {isVideo && <span className="text-muted-foreground text-xs ml-1">(optional replacement)</span>}
+                            </Label>
+                            <ThumbnailDropZone
+                                key={thumbKey}
+                                currentUrl={asset.file_type === "video" ? asset.thumbnail_url : previewSrc}
+                                newFile={thumbnailRef.current}
+                                onFile={(f) => {
+                                    thumbnailRef.current = f;
+                                    setThumbKey((k) => k + 1);
+                                }}
+                                onClear={() => {
+                                    thumbnailRef.current = null;
+                                    setThumbKey((k) => k + 1);
+                                }}
+                                error={null}
+                            />
+                        </div>
+                    )}
+
+                    {/* ── Display Name ── */}
+                    <div className="space-y-1.5">
+                        <Label htmlFor="display_name">
+                            Display Name <span className="text-destructive">*</span>
+                        </Label>
+                        <Input
+                            id="display_name"
+                            placeholder="Friendly name for this file"
+                            {...register("display_name")}
+                        />
+                        <FieldError message={errors.display_name?.message} />
+                    </div>
+
+                    {/* ── Description ── */}
+                    <div className="space-y-1.5">
+                        <Label htmlFor="description">Description</Label>
+                        <Textarea
+                            id="description"
+                            placeholder="Optional description"
+                            rows={3}
+                            {...register("description")}
+                        />
+                    </div>
+
+                    {/* ── Access ── */}
+                    <div className="space-y-1.5 max-w-[200px]">
+                        <Label>Access</Label>
+                        <Controller
+                            name="is_public"
+                            control={control}
+                            render={({ field }) => (
+                                <Select value={field.value} onValueChange={field.onChange}>
+                                    <SelectTrigger><SelectValue /></SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="false">Private</SelectItem>
+                                        <SelectItem value="true">Public</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            )}
+                        />
+                    </div>
+
+                </div>
+
+                {/* ── Actions ── */}
+                <div className="flex justify-end gap-3">
+                    <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => navigate("/admin/assets")}
+                        disabled={loading}
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        type="submit"
+                        disabled={loading || (!isDirty && !hasThumbnailChange)}
+                    >
+                        {loading && <Spinner className="h-4 w-4 mr-2" />}
+                        Save Changes
+                    </Button>
+                </div>
+
+            </form>
+
+            {unsavedChangesDialog}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/assets/ViewAudioAsset.jsx b/apps/web/src/modules/admin/pages/assets/ViewAudioAsset.jsx
new file mode 100644
index 0000000..037253b
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/assets/ViewAudioAsset.jsx
@@ -0,0 +1,134 @@
+// modules/admin/pages/assets/ViewAudioAsset.jsx
+
+import { useParams, useNavigate } from "react-router-dom";
+import { ArrowLeft, Lock, Globe, Music2, Pencil } from "lucide-react";
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+import { useAssetFetchState } from "@/hooks/useAssetFetchState";
+import { useAssetPreviewSrc } from "@/hooks/useAssetPreviewSrc";
+import { formatFileSize } from "@/utils/format.util";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { AudioBlock } from "@/components/generic/Blocks/Admin/AudioBlock";
+import { MediaFallback } from "@/components/generic/MediaFallback";
+import AssetPageLoader from "@/components/generic/AssetLoader";
+
+// ─── Shared meta row (same pattern as other viewers) ─────────────────────────
+
+function MetaRow({ label, value }) {
+    if (!value && value !== 0) return null;
+    return (
+        <div className="flex items-start gap-3 py-2">
+            <span className="text-muted-foreground text-sm w-36 shrink-0">{label}</span>
+            <span className="text-sm font-medium break-all">{String(value)}</span>
+        </div>
+    );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function ViewAudioAsset() {
+    const { assetId } = useParams();
+    const navigate = useNavigate();
+    const { fmtDateTime } = useDateFormat();
+
+    const { asset: selectedAsset, loading, notFound } = useAssetFetchState(assetId);
+    const { src: streamUrl, thumbnailUrl } = useAssetPreviewSrc(selectedAsset, { scope: "admin" });
+
+    if (loading) {
+        return <AssetPageLoader />;
+    }
+
+    if (notFound) {
+        return (
+            <div className="flex flex-col items-center justify-center h-96 gap-3 text-muted-foreground">
+                <p>File not found.</p>
+                <Button variant="outline" onClick={() => navigate("/admin/assets")}>Go Back</Button>
+            </div>
+        );
+    }
+
+    const a = selectedAsset;
+
+    const audioContent = {
+        url: streamUrl,
+        title: a.display_name ?? a.original_name,
+        artist: a.description ?? "",
+        thumbnail: thumbnailUrl ?? a.thumbnail_url ?? null,
+        tag: a.extension?.toUpperCase() ?? "",
+    };
+
+    return (
+        <div className="max-w-7xl mx-auto px-4 py-6 space-y-6">
+
+            {/* ── Header ── */}
+            <div className="flex items-center gap-3">
+                <Button variant="ghost" size="icon" onClick={() => navigate("/admin/assets")}>
+                    <ArrowLeft className="h-4 w-4" />
+                </Button>
+                <div className="flex-1 min-w-0">
+                    <h1 className="text-xl font-semibold truncate">{a.display_name ?? a.original_name}</h1>
+                    <p className="text-sm text-muted-foreground">{a.mime_type}</p>
+                </div>
+                <Button variant="outline" onClick={() => navigate(`/admin/assets/edit/${a.asset_id}`)}>
+                    <Pencil className="h-3.5 w-3.5" />
+                    Edit Info
+                </Button>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+
+                {/* ── Audio player ── */}
+                <div className="lg:col-span-3 space-y-4">
+                    {streamUrl ? (
+                        <AudioBlock content={audioContent} />
+                    ) : (
+                        <MediaFallback className="size-full" />
+                    )}
+                </div>
+
+                {/* ── Metadata panel ── */}
+                <div className="lg:col-span-2 space-y-4">
+                    <div className="rounded-lg border bg-card p-4 space-y-1">
+                        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">File Info</p>
+                        <MetaRow label="Original Name" value={a.original_name} />
+                        <MetaRow label="Extension" value={a.extension} />
+                        <MetaRow label="File Size" value={formatFileSize(a.file_size)} />
+                        <MetaRow label="MIME Type" value={a.mime_type} />
+                        <Separator className="my-2" />
+                        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Storage</p>
+                        <MetaRow label="Provider" value={a.storage_provider} />
+                        <MetaRow label="Bucket" value={a.storage_bucket} />
+                        <MetaRow label="Key" value={a.storage_key} />
+                        <Separator className="my-2" />
+                        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Access</p>
+                        <div className="flex items-center gap-2 py-1">
+                            {a.is_public
+                                ? <><Globe className="h-3.5 w-3.5 text-green-500" /><Badge variant="outline" className="text-green-600 border-green-400">Public</Badge></>
+                                : <><Lock className="h-3.5 w-3.5 text-yellow-500" /><Badge variant="outline" className="text-yellow-600 border-yellow-400">Private</Badge></>
+                            }
+                        </div>
+                        <MetaRow label="Access Level" value={a.access_level} />
+                        <MetaRow label="Owner Type" value={a.owner_type} />
+                        <MetaRow label="Owner ID" value={a.owner_id} />
+                        <Separator className="my-2" />
+                        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Timestamps</p>
+                        <MetaRow label="Created By" value={a.creator?.full_name ?? a.createdBy} />
+                        <MetaRow label="Created" value={a.createdAt ? fmtDateTime(a.createdAt) : null} />
+                        <MetaRow label="Modified By" value={a.updater?.full_name ?? a.updatedBy} />
+                        <MetaRow label="Modified" value={a.updatedAt ? fmtDateTime(a.updatedAt) : null} />
+                    </div>
+
+                    {a.description && (
+                        <div className="rounded-lg border bg-card p-4">
+                            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Description</p>
+                            <p className="text-sm text-foreground">{a.description}</p>
+                        </div>
+                    )}
+                </div>
+
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/assets/ViewDocumentAsset.jsx b/apps/web/src/modules/admin/pages/assets/ViewDocumentAsset.jsx
new file mode 100644
index 0000000..5277a57
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/assets/ViewDocumentAsset.jsx
@@ -0,0 +1,146 @@
+// modules/admin/pages/assets/ViewDocumentAsset.jsx
+
+import { useParams, useNavigate } from "react-router-dom";
+import { ArrowLeft, Lock, Globe, FileText, Pencil } from "lucide-react";
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+import { useAssetFetchState } from "@/hooks/useAssetFetchState";
+import { useAssetPreviewSrc } from "@/hooks/useAssetPreviewSrc";
+import { formatFileSize } from "@/utils/format.util";
+import { Badge }     from "@/components/ui/badge";
+import { Button }    from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import FileZoomViewer from "@/components/generic/FileZoomViewer";
+import AssetPageLoader from "@/components/generic/AssetLoader";
+
+function MetaRow({ label, value }) {
+    if (!value && value !== 0) return null;
+    return (
+        <div className="flex items-start gap-3 py-2">
+            <span className="text-muted-foreground text-sm w-36 shrink-0">{label}</span>
+            <span className="text-sm font-medium break-all">{String(value)}</span>
+        </div>
+    );
+}
+
+const PREVIEWABLE = ["pdf", "txt", "html", "htm", "csv", "md"];
+
+export default function ViewDocumentAsset() {
+    const { assetId } = useParams();
+    const navigate    = useNavigate();
+    const { fmtDateTime } = useDateFormat();
+
+    const { asset: selectedAsset, loading, notFound } = useAssetFetchState(assetId);
+    const { src: streamUrl, loading: previewLoading } = useAssetPreviewSrc(selectedAsset, { scope: "admin" });
+
+    if (loading) {
+        return <AssetPageLoader />;
+    }
+
+    if (notFound) {
+        return (
+            <div className="flex flex-col items-center justify-center h-96 gap-3 text-muted-foreground">
+                <p>File not found.</p>
+                <Button variant="outline" onClick={() => navigate("/admin/assets")}>Go Back</Button>
+            </div>
+        );
+    }
+
+    const a = selectedAsset;
+    const ext = (a.extension ?? "").toLowerCase();
+    const canPreview = PREVIEWABLE.includes(ext);
+    const isPdf = ext === "pdf";
+
+    return (
+        <div className="max-w-7xl mx-auto px-4 py-6 space-y-6">
+
+            {/* ── Header ── */}
+            <div className="flex items-center gap-3">
+                <Button variant="ghost" size="icon" onClick={() => navigate("/admin/assets")}>
+                    <ArrowLeft className="h-4 w-4" />
+                </Button>
+                <div className="flex-1 min-w-0">
+                    <h1 className="text-xl font-semibold truncate">{a.display_name ?? a.original_name}</h1>
+                    <p className="text-sm text-muted-foreground">{a.mime_type}</p>
+                </div>
+                <Button variant="outline" onClick={() => navigate(`/admin/assets/edit/${a.asset_id}`)}>
+                    <Pencil className="h-3.5 w-3.5" />
+                    Edit Info
+                </Button>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+
+                {/* ── Document preview ── */}
+                <div className="lg:col-span-3">
+                    {isPdf ? (
+                        <div className="rounded-lg border overflow-hidden">
+                            <FileZoomViewer
+                                src={streamUrl}
+                                mimeType={a.mime_type}
+                                fileName={a.display_name ?? a.original_name}
+                                loading={previewLoading}
+                            />
+                        </div>
+                    ) : canPreview && streamUrl ? (
+                        <div className="rounded-lg border overflow-hidden bg-white" style={{ height: 600 }}>
+                            <iframe
+                                src={streamUrl}
+                                title={a.display_name ?? a.original_name}
+                                className="w-full h-full"
+                                // sandbox="allow-scripts allow-same-origin"
+                            />
+                        </div>
+                    ) : (
+                        <div className="rounded-lg border bg-muted/30 flex flex-col items-center justify-center gap-4 py-20">
+                            <FileText className="h-16 w-16 text-muted-foreground/40" />
+                            <p className="text-muted-foreground text-sm">
+                                Preview not available for this file type.
+                            </p>
+                        </div>
+                    )}
+                </div>
+
+                {/* ── Metadata panel ── */}
+                <div className="lg:col-span-2 space-y-4">
+                    <div className="rounded-lg border bg-card p-4 space-y-1">
+                        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">File Info</p>
+                        <MetaRow label="Original Name" value={a.original_name} />
+                        <MetaRow label="Extension"     value={a.extension} />
+                        <MetaRow label="File Size"     value={formatFileSize(a.file_size)} />
+                        <MetaRow label="MIME Type"     value={a.mime_type} />
+                        <Separator className="my-2" />
+                        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Storage</p>
+                        <MetaRow label="Provider"      value={a.storage_provider} />
+                        <MetaRow label="Bucket"        value={a.storage_bucket} />
+                        <MetaRow label="Key"           value={a.storage_key} />
+                        <Separator className="my-2" />
+                        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Access</p>
+                        <div className="flex items-center gap-2 py-1">
+                            {a.is_public
+                                ? <><Globe className="h-3.5 w-3.5 text-green-500" /><Badge variant="outline" className="text-green-600 border-green-400">Public</Badge></>
+                                : <><Lock  className="h-3.5 w-3.5 text-yellow-500" /><Badge variant="outline" className="text-yellow-600 border-yellow-400">Private</Badge></>
+                            }
+                        </div>
+                        <MetaRow label="Access Level"  value={a.access_level} />
+                        <MetaRow label="Owner Type"    value={a.owner_type} />
+                        <MetaRow label="Owner ID"      value={a.owner_id} />
+                        <Separator className="my-2" />
+                        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Timestamps</p>
+                        <MetaRow label="Created By"    value={a.creator?.full_name ?? a.createdBy} />
+                        <MetaRow label="Created"       value={a.createdAt ? fmtDateTime(a.createdAt) : null} />
+                        <MetaRow label="Modified By"   value={a.updater?.full_name ?? a.updatedBy} />
+                        <MetaRow label="Modified"      value={a.updatedAt ? fmtDateTime(a.updatedAt) : null} />
+                    </div>
+
+                    {a.description && (
+                        <div className="rounded-lg border bg-card p-4">
+                            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Description</p>
+                            <p className="text-sm text-foreground">{a.description}</p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/assets/ViewImageAsset.jsx b/apps/web/src/modules/admin/pages/assets/ViewImageAsset.jsx
new file mode 100644
index 0000000..801735f
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/assets/ViewImageAsset.jsx
@@ -0,0 +1,139 @@
+// modules/admin/pages/assets/ViewImageAsset.jsx
+
+import { useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { ArrowLeft, Lock, Globe, Pencil, Download } from "lucide-react";
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+import { useAssetFetchState } from "@/hooks/useAssetFetchState";
+import { useAssetPreviewSrc } from "@/hooks/useAssetPreviewSrc";
+import { formatFileSize } from "@/utils/format.util";
+import { downloadAsset } from "@/utils/media.util";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import FileZoomViewer from "@/components/generic/FileZoomViewer";
+import AssetPageLoader from "@/components/generic/AssetLoader";
+
+
+function MetaRow({ label, value }) {
+  if (!value && value !== 0) return null;
+  return (
+    <div className="flex items-start gap-3 py-2">
+      <span className="text-muted-foreground text-sm w-36 shrink-0">{label}</span>
+      <span className="text-sm font-medium break-all">{String(value)}</span>
+    </div>
+  );
+}
+
+export default function ViewImageAsset() {
+  const { assetId } = useParams();
+  const navigate = useNavigate();
+  const { fmtDateTime } = useDateFormat();
+
+  const { asset: selectedAsset, loading, notFound } = useAssetFetchState(assetId);
+  const { src: streamUrl, loading: previewLoading } = useAssetPreviewSrc(selectedAsset, { scope: "admin" });
+  const [downloading, setDownloading] = useState(false);
+
+  async function handleDownload() {
+    setDownloading(true);
+    try {
+      await downloadAsset(selectedAsset, { scope: "admin" });
+    } finally {
+      setDownloading(false);
+    }
+  }
+
+  if (loading) {
+    return <AssetPageLoader />;
+  }
+
+  if (notFound) {
+    return (
+      <div className="flex flex-col items-center justify-center h-96 gap-3 text-muted-foreground">
+        <p>File not found.</p>
+        <Button variant="outline" onClick={() => navigate("/admin/assets")}>Go Back</Button>
+      </div>
+    );
+  }
+
+  const a = selectedAsset;
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-6 space-y-6">
+
+      {/* ── Header ── */}
+      <div className="flex items-center gap-3">
+        <Button variant="ghost" size="icon" onClick={() => navigate("/admin/assets")}>
+          <ArrowLeft className="h-4 w-4" />
+        </Button>
+        <div className="flex-1 min-w-0">
+          <h1 className="text-xl font-semibold truncate">{a.display_name ?? a.original_name}</h1>
+          <p className="text-sm text-muted-foreground">{a.mime_type}</p>
+        </div>
+        <Button variant="outline" className="hidden" onClick={handleDownload} disabled={downloading}>
+          <Download className="h-3.5 w-3.5" />
+          {downloading ? "Downloading…" : "Download"}
+        </Button>
+        <Button variant="outline" onClick={() => navigate(`/admin/assets/edit/${a.asset_id}`)}>
+          <Pencil className="h-3.5 w-3.5" />
+          Edit Info
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+
+        {/* ── Image preview ── */}
+        <div className="lg:col-span-3 rounded-lg border overflow-hidden">
+          <FileZoomViewer
+            src={streamUrl}
+            mimeType={a.mime_type}
+            fileName={a.display_name ?? a.original_name}
+            loading={previewLoading}
+          />
+        </div>
+
+        {/* ── Metadata panel ── */}
+        <div className="lg:col-span-2 space-y-4">
+          <div className="rounded-lg border bg-card p-4 space-y-1">
+            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">File Info</p>
+            <MetaRow label="Original Name" value={a.original_name} />
+            <MetaRow label="Extension" value={a.extension} />
+            <MetaRow label="File Size" value={formatFileSize(a.file_size)} />
+            <MetaRow label="Resolution" value={a.resolution} />
+            <MetaRow label="Dimensions" value={a.width && a.height ? `${a.width} × ${a.height}` : null} />
+            <Separator className="my-2" />
+            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Storage</p>
+            <MetaRow label="Provider" value={a.storage_provider} />
+            <MetaRow label="Bucket" value={a.storage_bucket} />
+            <MetaRow label="Key" value={a.storage_key} />
+            <Separator className="my-2" />
+            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Access</p>
+            <div className="flex items-center gap-2 py-1">
+              {a.is_public
+                ? <><Globe className="h-3.5 w-3.5 text-green-500" /><Badge variant="outline" className="text-green-600 border-green-400">Public</Badge></>
+                : <><Lock className="h-3.5 w-3.5 text-yellow-500" /><Badge variant="outline" className="text-yellow-600 border-yellow-400">Private</Badge></>
+              }
+            </div>
+            <MetaRow label="Access Level" value={a.access_level} />
+            <MetaRow label="Owner Type" value={a.owner_type} />
+            <MetaRow label="Owner ID" value={a.owner_id} />
+            <Separator className="my-2" />
+            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Timestamps</p>
+            <MetaRow label="Created By" value={a.creator?.full_name ?? a.createdBy} />
+            <MetaRow label="Created" value={a.createdAt ? fmtDateTime(a.createdAt) : null} />
+            <MetaRow label="Modified By" value={a.updater?.full_name ?? a.updatedBy} />
+            <MetaRow label="Modified" value={a.updatedAt ? fmtDateTime(a.updatedAt) : null} />
+          </div>
+
+          {a.description && (
+            <div className="rounded-lg border bg-card p-4">
+              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Description</p>
+              <p className="text-sm text-foreground">{a.description}</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/assets/ViewVideoAsset.jsx b/apps/web/src/modules/admin/pages/assets/ViewVideoAsset.jsx
new file mode 100644
index 0000000..eef9065
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/assets/ViewVideoAsset.jsx
@@ -0,0 +1,147 @@
+// modules/admin/pages/assets/ViewVideoAsset.jsx
+
+import { useParams, useNavigate } from "react-router-dom";
+import { ArrowLeft, Lock, Globe, Pencil } from "lucide-react";
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+import { useAssetFetchState } from "@/hooks/useAssetFetchState";
+import { formatFileSize, formatPlayerTime } from "@/utils/format.util";
+import { Badge }     from "@/components/ui/badge";
+import { Button }    from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { VideoBlock } from "@/components/generic/Blocks/Admin/VideoBlock";
+import { TranscodeStatusBanner } from "@/components/generic/TranscodeStatusBanner";
+import AssetPageLoader from "@/components/generic/AssetLoader";
+
+function MetaRow({ label, value }) {
+    if (!value && value !== 0) return null;
+    return (
+        <div className="flex items-start gap-3 py-2">
+            <span className="text-muted-foreground text-sm w-36 shrink-0">{label}</span>
+            <span className="text-sm font-medium break-all">{String(value)}</span>
+        </div>
+    );
+}
+
+export default function ViewVideoAsset() {
+    const { assetId } = useParams();
+    const navigate    = useNavigate();
+    const { fmtDateTime } = useDateFormat();
+
+    const { asset: selectedAsset, loading, notFound } = useAssetFetchState(assetId);
+
+    if (loading) {
+        return <AssetPageLoader />;
+    }
+
+    if (notFound) {
+        return (
+            <div className="flex flex-col items-center justify-center h-96 gap-3 text-muted-foreground">
+                <p>File not found.</p>
+                <Button variant="outline" onClick={() => navigate("/admin/assets")}>Go Back</Button>
+            </div>
+        );
+    }
+
+    const a = selectedAsset;
+
+    return (
+        <div className="max-w-7xl mx-auto px-4 py-6 space-y-6">
+
+            {/* ── Header ── */}
+            <div className="flex items-center gap-3">
+                <Button variant="ghost" size="icon" onClick={() => navigate("/admin/assets")}>
+                    <ArrowLeft className="h-4 w-4" />
+                </Button>
+                <div className="flex-1 min-w-0">
+                    <h1 className="text-xl font-semibold truncate">{a.display_name ?? a.original_name}</h1>
+                    <p className="text-sm text-muted-foreground">{a.mime_type}</p>
+                </div>
+                <Button variant="outline" onClick={() => navigate(`/admin/assets/edit/${a.asset_id}`)}>
+                    <Pencil className="h-3.5 w-3.5" />
+                    Edit Info
+                </Button>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+
+                {/* ── Video player ── */}
+                <div className="lg:col-span-3 space-y-3">
+                    <TranscodeStatusBanner status={a.transcode_status} />
+                    <VideoBlock
+                        readOnly
+                        onUpdate={() => {}}
+                        content={{
+                            asset_id:         a.asset_id,
+                            storage_provider: a.storage_provider,
+                            url:              a.file_url,
+                            thumbnail_url:    a.thumbnail_url,
+                            title:            a.display_name ?? a.original_name,
+                            tag:              a.extension?.toUpperCase() ?? "",
+                        }}
+                    />
+
+                    {/* Thumbnail strip */}
+                    {a.thumbnail_url && (
+                        <div className="rounded-lg border overflow-hidden bg-muted/30">
+                            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground px-3 py-2">Thumbnail</p>
+                            <img
+                                src={a.thumbnail_url}
+                                alt="Thumbnail"
+                                className="w-full max-h-40 object-cover"
+                                draggable={false}
+                                onContextMenu={(e) => e.preventDefault()}
+                            />
+                        </div>
+                    )}
+                </div>
+
+                {/* ── Metadata panel ── */}
+                <div className="lg:col-span-2 space-y-4">
+                    <div className="rounded-lg border bg-card p-4 space-y-1">
+                        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Video Info</p>
+                        <MetaRow label="Original Name" value={a.original_name} />
+                        <MetaRow label="Extension"     value={a.extension} />
+                        <MetaRow label="File Size"     value={formatFileSize(a.file_size)} />
+                        <MetaRow label="Resolution"    value={a.resolution} />
+                        <MetaRow label="Dimensions"    value={a.width && a.height ? `${a.width} × ${a.height}` : null} />
+                        <MetaRow label="Duration"      value={a.duration == null ? null : formatPlayerTime(a.duration)} />
+                        <MetaRow label="Frame Rate"    value={a.frame_rate ? `${a.frame_rate} fps` : null} />
+                        <MetaRow label="Bitrate"       value={a.bitrate ? `${a.bitrate} kbps` : null} />
+                        <MetaRow label="Video Codec"   value={a.video_codec} />
+                        <MetaRow label="Audio Codec"   value={a.audio_codec} />
+                        <Separator className="my-2" />
+                        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Storage</p>
+                        <MetaRow label="Provider"      value={a.storage_provider} />
+                        <MetaRow label="Bucket"        value={a.storage_bucket} />
+                        <MetaRow label="Key"           value={a.storage_key} />
+                        <Separator className="my-2" />
+                        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Access</p>
+                        <div className="flex items-center gap-2 py-1">
+                            {a.is_public
+                                ? <><Globe className="h-3.5 w-3.5 text-green-500" /><Badge variant="outline" className="text-green-600 border-green-400">Public</Badge></>
+                                : <><Lock  className="h-3.5 w-3.5 text-yellow-500" /><Badge variant="outline" className="text-yellow-600 border-yellow-400">Private</Badge></>
+                            }
+                        </div>
+                        <MetaRow label="Access Level"  value={a.access_level} />
+                        <MetaRow label="Owner Type"    value={a.owner_type} />
+                        <MetaRow label="Owner ID"      value={a.owner_id} />
+                        <Separator className="my-2" />
+                        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Timestamps</p>
+                        <MetaRow label="Created By"    value={a.creator?.full_name ?? a.createdBy} />
+                        <MetaRow label="Created"       value={a.createdAt ? fmtDateTime(a.createdAt) : null} />
+                        <MetaRow label="Modified By"   value={a.updater?.full_name ?? a.updatedBy} />
+                        <MetaRow label="Modified"      value={a.updatedAt ? fmtDateTime(a.updatedAt) : null} />
+                    </div>
+
+                    {a.description && (
+                        <div className="rounded-lg border bg-card p-4">
+                            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Description</p>
+                            <p className="text-sm text-foreground">{a.description}</p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/categories/AddCategory.jsx b/apps/web/src/modules/admin/pages/categories/AddCategory.jsx
new file mode 100644
index 0000000..d51584d
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/categories/AddCategory.jsx
@@ -0,0 +1,117 @@
+import { useNavigate } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft, House } from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Switch } from "@/components/ui/switch";
+import { Spinner } from "@/components/ui/spinner";
+import { useCategories } from "@/contexts/AdminCategoriesContext";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+
+const schema = z.object({
+  name:        z.string().min(1, "Name is required."),
+  description: z.string().optional(),
+  is_active:   z.boolean().default(true),
+});
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+function SectionCard({ title, children }) {
+  return (
+    <div className="rounded-lg border bg-card p-6 space-y-5">
+      {title && <div className="pb-1 border-b"><h2 className="text-sm font-semibold">{title}</h2></div>}
+      {children}
+    </div>
+  );
+}
+
+export default function AddCategory() {
+  const navigate = useNavigate();
+  const { createCategory, loading } = useCategories();
+
+  const { register, handleSubmit, watch, setValue, formState: { errors, isDirty } } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { name: "", description: "", is_active: true },
+  });
+
+  const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty);
+
+  const onSubmit = async (values) => {
+    const result = await createCategory(values);
+    if (!result) return;
+    bypassOnce();
+    navigate("/admin/courses/categories");
+  };
+
+  return (
+    <section className="bg-muted/60 min-h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
+        <div className="w-full max-w-2xl mx-auto">
+
+          <div className="flex flex-col gap-2 mb-6">
+            <AppBreadcrumb items={[
+              { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+              { label: "Categories", to: "/admin/courses/categories" },
+              { label: "Add Category" },
+            ]} />
+          </div>
+
+          <div className="flex items-center gap-3 mb-6">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/admin/courses/categories")}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Add Category</h1>
+              <p className="text-sm text-muted-foreground">Create a new course category.</p>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+            <SectionCard title="Category Details">
+              <div className="space-y-1.5">
+                <Label htmlFor="name">Name <span className="text-destructive">*</span></Label>
+                <Input id="name" placeholder="e.g. Real Estate" {...register("name")} />
+                <FieldError message={errors.name?.message} />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="description">Description</Label>
+                <Textarea id="description" placeholder="Optional description" rows={3} {...register("description")} />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div>
+                  <Label>Active</Label>
+                  <p className="text-xs text-muted-foreground">Visible to learners when browsing.</p>
+                </div>
+                <Switch
+                  checked={watch("is_active")}
+                  onCheckedChange={(v) => setValue("is_active", v, { shouldDirty: true })}
+                />
+              </div>
+            </SectionCard>
+
+            <div className="flex justify-end gap-3 pt-1">
+              <Button type="button" variant="outline" onClick={() => navigate("/admin/courses/categories")} disabled={loading}>Cancel</Button>
+              <Button type="submit" disabled={loading}>
+                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                Create Category
+              </Button>
+            </div>
+          </form>
+
+        </div>
+      </div>
+
+      {unsavedChangesDialog}
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/categories/ArchivedCategoryList.jsx b/apps/web/src/modules/admin/pages/categories/ArchivedCategoryList.jsx
new file mode 100644
index 0000000..70f53e0
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/categories/ArchivedCategoryList.jsx
@@ -0,0 +1,24 @@
+import { House } from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import ArchivedCategoriesTable from "../../components/categories/ArchivedCategoriesTable";
+
+const BREADCRUMB = [
+  { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+  { label: "Categories", to: "/admin/courses/categories" },
+  { label: "Archived" },
+];
+
+export default function ArchivedCategoryList() {
+  return (
+    <section className="bg-muted/60 min-h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
+        <div className="flex flex-col gap-2 mb-6">
+          <AppBreadcrumb items={BREADCRUMB} />
+        </div>
+        <div className="w-full">
+          <ArchivedCategoriesTable />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/categories/CategoryList.jsx b/apps/web/src/modules/admin/pages/categories/CategoryList.jsx
new file mode 100644
index 0000000..7012da1
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/categories/CategoryList.jsx
@@ -0,0 +1,23 @@
+import { House } from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import CategoriesTable from "../../components/categories/CategoriesTable";
+
+const BREADCRUMB = [
+  { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+  { label: "Categories" },
+];
+
+export default function CategoryList() {
+  return (
+    <section className="bg-muted/60 min-h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
+        <div className="flex flex-col gap-2 mb-6">
+          <AppBreadcrumb items={BREADCRUMB} />
+        </div>
+        <div className="w-full">
+          <CategoriesTable />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/categories/EditCategory.jsx b/apps/web/src/modules/admin/pages/categories/EditCategory.jsx
new file mode 100644
index 0000000..dea8e0d
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/categories/EditCategory.jsx
@@ -0,0 +1,128 @@
+import { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft, House } from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Switch } from "@/components/ui/switch";
+import { Spinner } from "@/components/ui/spinner";
+import { useCategories } from "@/contexts/AdminCategoriesContext";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+
+const schema = z.object({
+  name:        z.string().min(1, "Name is required."),
+  description: z.string().optional(),
+  is_active:   z.boolean().default(true),
+});
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+function SectionCard({ title, children }) {
+  return (
+    <div className="rounded-lg border bg-card p-6 space-y-5">
+      {title && <div className="pb-1 border-b"><h2 className="text-sm font-semibold">{title}</h2></div>}
+      {children}
+    </div>
+  );
+}
+
+export default function EditCategory() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const { fetchCategory, updateCategory, loading } = useCategories();
+
+  const { register, handleSubmit, reset, watch, setValue, formState: { errors, isDirty } } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { name: "", description: "", is_active: true },
+  });
+
+  useEffect(() => {
+    (async () => {
+      const cat = await fetchCategory(id);
+      if (!cat) return;
+      reset({ name: cat.name ?? "", description: cat.description ?? "", is_active: cat.is_active ?? true });
+    })();
+  }, [id]);
+
+  const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty);
+
+  const onSubmit = async (values) => {
+    if (!isDirty) { bypassOnce(); return navigate("/admin/courses/categories"); }
+    const result = await updateCategory(id, values);
+    if (!result) return;
+    bypassOnce();
+    navigate("/admin/courses/categories");
+  };
+
+  return (
+    <section className="bg-muted/60 min-h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
+        <div className="w-full max-w-2xl mx-auto">
+
+          <div className="flex flex-col gap-2 mb-6">
+            <AppBreadcrumb items={[
+              { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+              { label: "Categories", to: "/admin/courses/categories" },
+              { label: "Edit Category" },
+            ]} />
+          </div>
+
+          <div className="flex items-center gap-3 mb-6">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/admin/courses/categories")}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Edit Category</h1>
+              <p className="text-sm text-muted-foreground">Update category details.</p>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+            <SectionCard title="Category Details">
+              <div className="space-y-1.5">
+                <Label htmlFor="name">Name <span className="text-destructive">*</span></Label>
+                <Input id="name" {...register("name")} />
+                <FieldError message={errors.name?.message} />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="description">Description</Label>
+                <Textarea id="description" rows={3} {...register("description")} />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div>
+                  <Label>Active</Label>
+                  <p className="text-xs text-muted-foreground">Visible to learners when browsing.</p>
+                </div>
+                <Switch
+                  checked={watch("is_active")}
+                  onCheckedChange={(v) => setValue("is_active", v, { shouldDirty: true })}
+                />
+              </div>
+            </SectionCard>
+
+            <div className="flex justify-end gap-3 pt-1">
+              <Button type="button" variant="outline" onClick={() => navigate("/admin/courses/categories")} disabled={loading}>Cancel</Button>
+              <Button type="submit" disabled={loading || !isDirty}>
+                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                Save Changes
+              </Button>
+            </div>
+          </form>
+
+        </div>
+      </div>
+
+      {unsavedChangesDialog}
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/courses/AddCourse.jsx b/apps/web/src/modules/admin/pages/courses/AddCourse.jsx
new file mode 100644
index 0000000..9f60651
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/courses/AddCourse.jsx
@@ -0,0 +1,804 @@
+import { useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { useForm, useFieldArray, useWatch } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  ArrowLeft, ArrowRight, Plus, Trash2, BadgeCheck,
+  Check, X, ImagePlus, Palette, BookOpen,
+} from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import api from "@/utils/api.util";
+import { PageMeta } from "@/contexts/MetadataContext";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import CourseBadge from "@/modules/admin/components/courses/CourseBadge";
+import RoadmapBuilder from "@/modules/admin/components/courses/RoadmapBuilder";
+import AchievementsBuilder from "@/modules/admin/components/courses/AchievementsBuilder";
+import CoursePrerequisiteBuilder from "@/modules/admin/components/courses/CoursePrerequisiteBuilder";
+import { TIER_COLOR_OPTIONS } from "@/utils/tierColors";
+import { AssetPickerSheet } from "@/components/generic/AssetPickerSheet";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+
+// ─── Schema ───────────────────────────────────────────────────────────────────
+
+const schema = z.object({
+  title: z.string().min(1, "Title is required."),
+  description: z.string().optional(),
+  course_code: z.string().min(1, "Course Code is required."),
+  level: z.enum(["beginner", "intermediate", "advanced"]).optional(),
+  subscription: z.string().min(1, "Subscription is required.").default("free"),
+  status: z.enum(["draft", "published", "unpublished"]).default("draft"),
+  objectives: z.array(z.object({ text: z.string().min(1, "Objective cannot be empty.") }))
+    .min(1, "At least one learning objective is required."),
+  roles: z.array(z.object({ text: z.string().min(1, "Role cannot be empty.") })).default([]),
+  achievement_keys: z.array(z.string()).max(1).default([]),
+});
+
+// ─── Steps config ─────────────────────────────────────────────────────────────
+
+const STEPS = [
+  { label: "Basic Info", description: "Title, level & objectives" },
+  { label: "Roadmap",    description: "Units, lessons & prerequisites" },
+  { label: "Rewards",    description: "Badge & achievements"      },
+  { label: "Review",     description: "Confirm & create"          },
+];
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+function SectionCard({ title, description, children }) {
+  return (
+    <div className="rounded-lg border bg-card p-6 space-y-5">
+      {(title || description) && (
+        <div className="space-y-0.5 pb-1 border-b">
+          {title && <h2 className="text-sm font-semibold">{title}</h2>}
+          {description && <p className="text-xs text-muted-foreground">{description}</p>}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}
+
+function StepIndicator({ steps, current, onStepClick }) {
+  return (
+    <div className="flex items-start w-full mb-8">
+      {steps.flatMap((step, i) => {
+        const items = [
+          <button
+            key={`step-${i}`}
+            type="button"
+            onClick={() => onStepClick(i)}
+            className="flex flex-col items-center gap-1.5 shrink-0 group"
+          >
+            <div
+              className={[
+                "w-8 h-8 rounded-full border-2 flex items-center justify-center text-sm font-semibold transition-all group-hover:opacity-80",
+                i < current
+                  ? "bg-primary border-primary text-primary-foreground"
+                  : i === current
+                  ? "border-primary text-primary"
+                  : "border-border text-muted-foreground",
+              ].join(" ")}
+            >
+              {i < current ? <Check className="h-4 w-4" /> : i + 1}
+            </div>
+            <p
+              className={[
+                "text-[11px] font-medium text-center leading-tight whitespace-nowrap",
+                i === current ? "text-foreground" : "text-muted-foreground",
+              ].join(" ")}
+            >
+              {step.label}
+            </p>
+          </button>,
+        ];
+        if (i < steps.length - 1) {
+          items.push(
+            <div
+              key={`line-${i}`}
+              className={[
+                "flex-1 h-px mt-4 mx-2 shrink",
+                i < current ? "bg-primary" : "bg-border",
+              ].join(" ")}
+            />
+          );
+        }
+        return items;
+      })}
+    </div>
+  );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function AddCourse() {
+  const navigate = useNavigate();
+  const { createCourseFull, loading, fetchCoursesFlat, fetchUnitsFlat, fetchLessonsFlat } = useCourses();
+  const { user } = useAuth();
+
+  const [currentStep, setCurrentStep] = useState(0);
+  const [roadmapUnits, setRoadmapUnits] = useState([]);
+  const [prerequisites, setPrerequisites] = useState([]);
+  const [tierCategories, setTierCategories] = useState([]);
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => setTierCategories((data.data ?? []).filter((c) => c.is_active)))
+      .catch(() => {});
+  }, []);
+
+  const [flatCourses, setFlatCourses] = useState([]);
+  const [flatUnits, setFlatUnits] = useState([]);
+  const [flatLessons, setFlatLessons] = useState([]);
+  useEffect(() => {
+    (async () => {
+      const [c, u, l] = await Promise.all([fetchCoursesFlat(), fetchUnitsFlat(), fetchLessonsFlat()]);
+      setFlatCourses(c ?? []);
+      setFlatUnits(u ?? []);
+      setFlatLessons(l ?? []);
+    })();
+  }, []);
+
+  const [badgeColor, setBadgeColor] = useState("purple");
+  const [badgeImageUrl, setBadgeImageUrl] = useState(null);
+  const [badgeAssetId, setBadgeAssetId] = useState(null);
+  const [assetPickerOpen, setAssetPickerOpen] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    setValue,
+    getValues,
+    trigger,
+    formState: { errors, isDirty },
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      title: "",
+      description: "",
+      course_code: "",
+      level: "beginner",
+      subscription: "free",
+      status: "draft",
+      objectives: [],
+      roles: [],
+      achievement_keys: [],
+    },
+  });
+
+  const { fields: objectiveFields, append: appendObjective, remove: removeObjective, insert: insertObjective } =
+    useFieldArray({ control, name: "objectives" });
+
+  const handleObjectivePaste = (e, index) => {
+    const text = e.clipboardData.getData("text");
+    const lines = text.split(/\r\n|\r|\n/).map((l) => l.trim()).filter(Boolean);
+    if (lines.length <= 1) return;
+    e.preventDefault();
+    setValue(`objectives.${index}.text`, lines[0], { shouldDirty: true, shouldValidate: true });
+    lines.slice(1).forEach((line, i) => {
+      insertObjective(index + 1 + i, { text: line });
+    });
+  };
+  const { fields: roleFields, append: appendRole, remove: removeRole } =
+    useFieldArray({ control, name: "roles" });
+
+  const currentAchKeys   = useWatch({ control, name: "achievement_keys" });
+  const watchedTitle     = useWatch({ control, name: "title" });
+  const watchedDescription = useWatch({ control, name: "description" });
+  const watchedCourseCode  = useWatch({ control, name: "course_code" });
+  const watchedLevel     = useWatch({ control, name: "level" });
+  const watchedSubscr    = useWatch({ control, name: "subscription" });
+  const watchedStatus    = useWatch({ control, name: "status" });
+  const watchedObjectives = useWatch({ control, name: "objectives" });
+  const watchedRoles      = useWatch({ control, name: "roles" });
+
+  const [achievementRegistry, setAchievementRegistry] = useState([]);
+  useEffect(() => {
+    api.get("/admin/achievements")
+      .then(({ data }) => setAchievementRegistry((data.data ?? []).filter((a) => a.is_active)))
+      .catch(() => setAchievementRegistry([]));
+  }, []);
+
+  const selectedAchievement = achievementRegistry.find((a) => a.key === currentAchKeys[0]) ?? null;
+  const totalLessons = roadmapUnits.reduce(
+    (sum, u) => sum + u.lessons.length + (u.existing_lesson_count ?? 0),
+    0
+  );
+
+  // Roadmap/badge/achievement selections live outside react-hook-form, so
+  // isDirty alone won't catch them — fold them in by hand.
+  const hasUnsavedChanges =
+    isDirty ||
+    roadmapUnits.length > 0 ||
+    prerequisites.length > 0 ||
+    currentAchKeys.length > 0 ||
+    !!badgeImageUrl ||
+    badgeColor !== "purple";
+
+  const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(hasUnsavedChanges);
+
+  // Nothing here writes to the API until Finish — Basic Info just validates
+  // and advances, Roadmap is held as local draft state (see roadmapUnits),
+  // and Finish fires the whole course + roadmap + rewards in one request.
+  const onBasicInfoSubmit = () => {
+    setCurrentStep((s) => s + 1);
+  };
+
+  // Guards the step indicator: jumping straight to Roadmap/Rewards must not
+  // bypass the Basic Info required fields, so re-validate before honoring
+  // any click that leaves step 0.
+  const goToStep = async (target) => {
+    if (target > 0) {
+      const valid = await trigger(["title", "course_code", "objectives"]);
+      if (!valid) {
+        setCurrentStep(0);
+        return;
+      }
+    }
+    if (target > 1 && roadmapUnits.length === 0) {
+      setCurrentStep(1);
+      return;
+    }
+    setCurrentStep(target);
+  };
+
+  const handleFinish = async () => {
+    const values = getValues();
+
+    const result = await createCourseFull({
+      title: values.title,
+      description: values.description,
+      course_code: values.course_code || null,
+      level: values.level || null,
+      subscription: values.subscription,
+      status: values.status,
+      objectives: values.objectives.map((o) => o.text),
+      roles: values.roles.map((r) => r.text),
+      // Drop rows where a type was picked but no item was actually selected —
+      // sending an empty ref_id fails at the DB level.
+      prerequisites: prerequisites
+        .filter((p) => p.ref_id !== "" && p.ref_id != null)
+        .map(({ ref_type, ref_id }) => ({ ref_type, ref_id })),
+      achievement_keys: currentAchKeys,
+      badge_color: badgeColor,
+      badge_asset_id: badgeAssetId ?? null,
+      badge_image_url: badgeImageUrl ?? null,
+      units: roadmapUnits.map((u) => ({
+        unit_id: u.unit_id,
+        title: u.title,
+        description: u.description,
+        requirements: u.requirements ?? [],
+        lessons: u.lessons.map((l) => ({
+          lesson_id: l.lesson_id,
+          title: l.title,
+          description: l.description,
+          objectives: l.objectives ?? [],
+        })),
+      })),
+      createdBy: user?.user_id ?? null,
+    });
+
+    const newCourse = result?.data?.data ?? null;
+    if (!newCourse) return;
+    bypassOnce();
+    navigate(`/admin/courses/${newCourse.course_id}/view`);
+  };
+
+  return (
+    <div className="flex flex-col min-h-screen bg-muted/60">
+      <PageMeta title="Add Course - STARR" description="Create a new training course." />
+
+      {/* ── Sticky header ── */}
+      <div
+        className="sticky z-20 shrink-0 border-b bg-white/70 dark:bg-zinc-900/70 backdrop-blur-md"
+        style={{ top: "var(--navbar-h)" }}
+      >
+        <div className="lg:container lg:mx-auto lg:px-6 px-4">
+          <div className="flex items-center gap-3 py-3">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/admin/courses")}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div className="flex-1 min-w-0">
+              <h1 className="text-xl font-semibold leading-tight flex items-center gap-2">
+                <BookOpen className="h-5 w-5 text-muted-foreground" />
+                Add Course
+              </h1>
+              <p className="text-sm text-muted-foreground">Create a new training course.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ── Content ── */}
+      <div className="lg:container lg:mx-auto lg:px-6 px-4 py-6">
+        <div className="max-w-2xl mx-auto">
+
+          <StepIndicator steps={STEPS} current={currentStep} onStepClick={goToStep} />
+
+          <form onSubmit={handleSubmit(onBasicInfoSubmit)} className="space-y-5">
+
+            {/* ── Step 0: Basic Info ── */}
+            {currentStep === 0 && (
+              <>
+                <SectionCard title="Basic Information">
+                  <div className="space-y-1.5">
+                    <Label htmlFor="title">
+                      Title <span className="text-destructive">*</span>
+                    </Label>
+                    <Input id="title" placeholder="e.g. Introduction to Real Estate" {...register("title")} />
+                    <FieldError message={errors.title?.message} />
+                  </div>
+
+                  <div className="space-y-1.5">
+                    <Label htmlFor="description">Description</Label>
+                    <Textarea id="description" placeholder="Optional course description" rows={3} {...register("description")} />
+                  </div>
+
+                  <div className="space-y-1.5">
+                    <Label htmlFor="course_code">
+                      Course Code <span className="text-destructive">*</span>
+                    </Label>
+                    <Input id="course_code" placeholder="e.g. RE-101" {...register("course_code")} />
+                    <FieldError message={errors.course_code?.message} />
+                  </div>
+                </SectionCard>
+
+                <SectionCard title="Settings">
+                  <div className="grid grid-cols-3 gap-4">
+                    <div className="space-y-1.5">
+                      <Label>Level</Label>
+                      <Select
+                        value={watchedLevel ?? ""}
+                        onValueChange={(val) => setValue("level", val, { shouldDirty: true })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select level" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="beginner">Beginner</SelectItem>
+                          <SelectItem value="intermediate">Intermediate</SelectItem>
+                          <SelectItem value="advanced">Advanced</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <FieldError message={errors.level?.message} />
+                    </div>
+
+                    <div className="space-y-1.5">
+                      <Label>Subscription</Label>
+                      <Select
+                        value={watchedSubscr ?? "free"}
+                        onValueChange={(val) => setValue("subscription", val, { shouldDirty: true })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select subscription" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {tierCategories.map((c) => (
+                            <SelectItem key={c.slug} value={c.slug}>
+                              {c.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <FieldError message={errors.subscription?.message} />
+                    </div>
+
+                    <div className="space-y-1.5">
+                      <Label>Status</Label>
+                      <Select
+                        value={watchedStatus ?? "draft"}
+                        onValueChange={(val) => setValue("status", val, { shouldDirty: true })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select status" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="draft">Draft</SelectItem>
+                          <SelectItem value="published">Published</SelectItem>
+                          <SelectItem value="unpublished">Unpublished</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <FieldError message={errors.status?.message} />
+                    </div>
+                  </div>
+                </SectionCard>
+
+                <SectionCard
+                  title="Learning Objectives"
+                  description="What will learners be able to do after completing this course? At least one is required."
+                >
+                  <div className="space-y-2">
+                    <FieldError message={errors.objectives?.message} />
+                    {objectiveFields.map((field, index) => (
+                      <div key={field.id} className="flex items-start gap-2">
+                        <div className="flex-1 space-y-1">
+                          <Input
+                            placeholder={`Objective ${index + 1}`}
+                            {...register(`objectives.${index}.text`)}
+                            onPaste={(e) => handleObjectivePaste(e, index)}
+                          />
+                          <FieldError message={errors.objectives?.[index]?.text?.message} />
+                        </div>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="mt-0.5 text-muted-foreground hover:text-destructive"
+                          onClick={() => removeObjective(index)}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    ))}
+
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="w-full mt-1"
+                      onClick={() => appendObjective({ text: "" })}
+                    >
+                      <Plus className="h-4 w-4 mr-2" />
+                      Add Objective
+                    </Button>
+                  </div>
+                </SectionCard>
+
+                <SectionCard
+                  title="Course Roles"
+                  description="Who is this course intended for? e.g. Sales Agent, Property Manager."
+                >
+                  <div className="space-y-2">
+                    {roleFields.map((field, index) => (
+                      <div key={field.id} className="flex items-start gap-2">
+                        <div className="flex-1 space-y-1">
+                          <Input
+                            placeholder={`Role ${index + 1}`}
+                            {...register(`roles.${index}.text`)}
+                          />
+                          <FieldError message={errors.roles?.[index]?.text?.message} />
+                        </div>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="mt-0.5 text-muted-foreground hover:text-destructive"
+                          onClick={() => removeRole(index)}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    ))}
+
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="w-full mt-1"
+                      onClick={() => appendRole({ text: "" })}
+                    >
+                      <Plus className="h-4 w-4 mr-2" />
+                      Add Role
+                    </Button>
+                  </div>
+                </SectionCard>
+              </>
+            )}
+
+            {/* ── Step 1: Roadmap ── */}
+            {currentStep === 1 && (
+              <>
+                <RoadmapBuilder units={roadmapUnits} onUnitsChange={setRoadmapUnits} />
+
+                <SectionCard
+                  title="Prerequisites"
+                  description="What a learner must complete before starting this course."
+                >
+                  <CoursePrerequisiteBuilder
+                    value={prerequisites}
+                    onChange={setPrerequisites}
+                    courses={flatCourses}
+                    units={flatUnits}
+                    lessons={flatLessons}
+                  />
+                </SectionCard>
+              </>
+            )}
+
+            {/* ── Step 2: Rewards ── */}
+            {currentStep === 2 && (
+              <SectionCard
+                title="Rewards"
+                description="Badge and achievements awarded to learners who complete this course."
+              >
+                {/* Completion Badge */}
+                <div>
+                  <p className="text-xs font-medium mb-3 text-muted-foreground uppercase tracking-wide">Completion Badge</p>
+                  <div className="flex items-start gap-4">
+                    <CourseBadge
+                      title={watchedTitle || "Course Title"}
+                      level={watchedLevel}
+                      color={badgeColor}
+                      imageUrl={badgeImageUrl}
+                    />
+                    <div className="flex-1 flex flex-col gap-3">
+                      <div className="flex flex-col gap-1 text-xs text-muted-foreground">
+                        <div className="flex items-center gap-1.5">
+                          <span className="font-medium text-foreground">Label:</span> Course Completion
+                        </div>
+                        <div className="flex items-center gap-1.5">
+                          <span className="font-medium text-foreground">Trigger:</span> Pass course assessment
+                        </div>
+                        <div className="flex items-center gap-1.5 pb-0.5">
+                          <span className="font-medium text-foreground">Type:</span> Milestone achievement
+                        </div>
+                        <Badge className="self-start bg-green-100 text-green-700 border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700 gap-1 text-xs">
+                          <BadgeCheck className="size-3" /> Mandatory
+                        </Badge>
+                      </div>
+
+                      <div className="space-y-1.5">
+                        <p className="text-[10px] font-medium text-muted-foreground uppercase tracking-wide flex items-center gap-1">
+                          <Palette className="h-3 w-3" /> Color
+                        </p>
+                        <div className="flex flex-wrap gap-1.5">
+                          {TIER_COLOR_OPTIONS.map((opt) => (
+                            <button
+                              key={opt.key}
+                              type="button"
+                              title={opt.label}
+                              onClick={() => setBadgeColor(opt.key)}
+                              className={[
+                                "w-5 h-5 rounded-full border-2 transition-all",
+                                badgeColor === opt.key
+                                  ? "border-foreground scale-110 shadow-sm"
+                                  : "border-transparent hover:border-muted-foreground/50",
+                              ].join(" ")}
+                              style={{ backgroundColor: opt.swatch }}
+                            />
+                          ))}
+                        </div>
+                      </div>
+
+                      <div className="space-y-1.5">
+                        <p className="text-[10px] font-medium text-muted-foreground uppercase tracking-wide flex items-center gap-1">
+                          <ImagePlus className="h-3 w-3" /> Image <span className="normal-case font-normal">(optional)</span>
+                        </p>
+                        <div className="flex items-center gap-2">
+                          {badgeImageUrl && (
+                            <div className="w-8 h-8 rounded-md border bg-muted flex items-center justify-center overflow-hidden shrink-0">
+                              <img src={badgeImageUrl} alt="" className="w-6 h-6 object-contain" />
+                            </div>
+                          )}
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={() => setAssetPickerOpen(true)}
+                            className="h-7 text-xs"
+                          >
+                            <ImagePlus className="h-3 w-3 mr-1" />
+                            {badgeImageUrl ? "Change" : "Pick from files"}
+                          </Button>
+                          {badgeImageUrl && (
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="sm"
+                              className="h-7 text-xs text-destructive hover:text-destructive"
+                              onClick={() => { setBadgeImageUrl(null); setBadgeAssetId(null); }}
+                            >
+                              <X className="h-3 w-3 mr-1" /> Remove
+                            </Button>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <AchievementsBuilder
+                  achievementKeys={currentAchKeys}
+                  onAchievementKeysChange={(keys) => setValue("achievement_keys", keys, { shouldDirty: true })}
+                  registry={achievementRegistry}
+                  onRegistryChange={setAchievementRegistry}
+                />
+              </SectionCard>
+            )}
+
+            {/* ── Step 3: Review ── */}
+            {currentStep === 3 && (
+              <>
+                <SectionCard
+                  title="Basic Info"
+                  description="Confirm everything looks right before creating the course."
+                >
+                  <div className="grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
+                    <div>
+                      <p className="text-xs text-muted-foreground">Title</p>
+                      <p className="font-medium">{watchedTitle || "—"}</p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground">Course Code</p>
+                      <p className="font-medium">{watchedCourseCode || "—"}</p>
+                    </div>
+                    <div className="col-span-2">
+                      <p className="text-xs text-muted-foreground">Description</p>
+                      <p className="font-medium">{watchedDescription || "—"}</p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground">Level</p>
+                      <p className="font-medium capitalize">{watchedLevel || "—"}</p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground">Subscription</p>
+                      <p className="font-medium capitalize">{watchedSubscr || "—"}</p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground">Status</p>
+                      <Badge variant="outline" className="capitalize">{watchedStatus}</Badge>
+                    </div>
+                  </div>
+
+                  <div className="border-t pt-4">
+                    <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">
+                      Learning Objectives
+                    </p>
+                    {!watchedObjectives?.length ? (
+                      <p className="text-sm text-muted-foreground">None added.</p>
+                    ) : (
+                      <ul className="list-disc list-inside space-y-1 text-sm">
+                        {watchedObjectives.map((o, i) => (
+                          <li key={i}>{o.text}</li>
+                        ))}
+                      </ul>
+                    )}
+                  </div>
+
+                  <div className="border-t pt-4">
+                    <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">
+                      Course Roles
+                    </p>
+                    {!watchedRoles?.length ? (
+                      <p className="text-sm text-muted-foreground">None added.</p>
+                    ) : (
+                      <div className="flex flex-wrap gap-1.5">
+                        {watchedRoles.map((r, i) => (
+                          <Badge key={i} variant="secondary">{r.text}</Badge>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </SectionCard>
+
+                <SectionCard
+                  title="Roadmap"
+                  description={`${roadmapUnits.length} unit${roadmapUnits.length === 1 ? "" : "s"} · ${totalLessons} lesson${totalLessons === 1 ? "" : "s"} added · ${prerequisites.length} prerequisite${prerequisites.length === 1 ? "" : "s"}.`}
+                >
+                  {roadmapUnits.length === 0 ? (
+                    <p className="text-sm text-muted-foreground">No units added.</p>
+                  ) : (
+                    <div className="space-y-1.5">
+                      {roadmapUnits.map((u, index) => {
+                        const lessonCount = u.lessons.length + (u.existing_lesson_count ?? 0);
+                        return (
+                          <div key={u.key} className="rounded-md border px-3 py-2 flex items-center gap-2">
+                            <span className="text-xs text-muted-foreground shrink-0">{index + 1}</span>
+                            <span className="text-sm font-medium truncate flex-1 min-w-0">{u.title}</span>
+                            <Badge variant="outline" className="text-[10px] shrink-0">
+                              {lessonCount} lesson{lessonCount === 1 ? "" : "s"}
+                            </Badge>
+                            {!u.unit_id && (
+                              <Badge variant="secondary" className="text-[10px] shrink-0">new</Badge>
+                            )}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+
+                  {prerequisites.length > 0 && (
+                    <div className="border-t pt-3 mt-1">
+                      <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">
+                        Prerequisites
+                      </p>
+                      <div className="flex flex-wrap gap-1.5">
+                        {prerequisites.map((p, i) => (
+                          <Badge key={i} variant="outline" className="capitalize gap-1">
+                            {p.ref_type}: {p.title || `#${p.ref_id}`}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </SectionCard>
+
+                <SectionCard title="Rewards">
+                  <div className="flex items-center gap-4">
+                    <CourseBadge
+                      title={watchedTitle || "Course Title"}
+                      level={watchedLevel}
+                      color={badgeColor}
+                      imageUrl={badgeImageUrl}
+                    />
+                    <div className="text-sm">
+                      <p className="text-xs text-muted-foreground mb-1">Achievement</p>
+                      {selectedAchievement ? (
+                        <Badge variant="outline">{selectedAchievement.label}</Badge>
+                      ) : (
+                        <p className="text-muted-foreground">None selected</p>
+                      )}
+                    </div>
+                  </div>
+                </SectionCard>
+              </>
+            )}
+
+            {/* Asset picker (always mounted) */}
+            <AssetPickerSheet
+              open={assetPickerOpen}
+              onOpenChange={setAssetPickerOpen}
+              fileType="image"
+              onSelect={(asset, resolvedUrl) => {
+                setBadgeImageUrl(resolvedUrl ?? null);
+                setBadgeAssetId(asset.asset_id);
+              }}
+            />
+
+            {/* ── Step navigation ── */}
+            <div className="flex items-center justify-between pt-2 pb-6">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => currentStep > 0 ? setCurrentStep((s) => s - 1) : navigate("/admin/courses")}
+              >
+                <ArrowLeft className="h-4 w-4 mr-2" />
+                {currentStep === 0 ? "Cancel" : "Back"}
+              </Button>
+
+              {currentStep === 0 ? (
+                <Button type="submit" disabled={loading}>
+                  {loading && <Spinner className="h-4 w-4 mr-2" />}
+                  Next
+                  <ArrowRight className="h-4 w-4 ml-2" />
+                </Button>
+              ) : currentStep < STEPS.length - 1 ? (
+                <Button
+                  type="button"
+                  onClick={() => setCurrentStep((s) => s + 1)}
+                  disabled={currentStep === 1 && roadmapUnits.length === 0}
+                >
+                  Next
+                  <ArrowRight className="h-4 w-4 ml-2" />
+                </Button>
+              ) : (
+                <Button type="button" disabled={loading} onClick={handleFinish}>
+                  {loading && <Spinner className="h-4 w-4 mr-2" />}
+                  Finish
+                </Button>
+              )}
+            </div>
+
+          </form>
+        </div>
+      </div>
+
+      {unsavedChangesDialog}
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/courses/ArchivedCourseList.jsx b/apps/web/src/modules/admin/pages/courses/ArchivedCourseList.jsx
new file mode 100644
index 0000000..abf4740
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/courses/ArchivedCourseList.jsx
@@ -0,0 +1,26 @@
+import { House } from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import ArchivedCoursesTable from "../../components/courses/ArchivedCourseTable";
+import { PageMeta } from "@/contexts/MetadataContext";
+
+export default function ArchivedCourseList() {
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Courses", to: "/admin/courses" },
+    { label: "Archived" },
+  ];
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title="Archived Courses - STARR" description="View archived training courses." />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+        <div className="w-full">
+          <ArchivedCoursesTable />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/courses/CourseList.jsx b/apps/web/src/modules/admin/pages/courses/CourseList.jsx
new file mode 100644
index 0000000..402eee1
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/courses/CourseList.jsx
@@ -0,0 +1,45 @@
+import { House, Layers } from "lucide-react";
+import { Link } from "react-router-dom";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import CoursesTable from "../../components/courses/CourseTable";
+import { PageMeta } from "@/contexts/MetadataContext";
+
+export default function CourseList() {
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Courses" },
+  ];
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title="Courses - STARR" description="Browse and manage your training courses." />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+        <div className="w-full space-y-4">
+          {/* <div className="flex items-start gap-3 rounded-lg border bg-card p-4 text-sm">
+            <Layers className="h-4 w-4 mt-0.5 shrink-0 text-muted-foreground" />
+            <p className="text-muted-foreground">
+              Courses are organized under <span className="font-medium text-foreground">Subscriptions</span> — each course's{" "}
+              <span className="font-medium text-foreground">Subscription</span> value determines which plan bundle it belongs to.{" "}
+              <Link to="/admin/tiers/plans" className="text-primary hover:underline font-medium">
+                Manage Subscriptions
+              </Link>
+              {" "}· Units and Lessons now run independently — build them once in the{" "}
+              <Link to="/admin/units" className="text-primary hover:underline font-medium">
+                Units Library
+              </Link>
+              {" "}and{" "}
+              <Link to="/admin/lessons" className="text-primary hover:underline font-medium">
+                Lessons Library
+              </Link>
+              , then attach them to any course.
+            </p>
+          </div> */}
+          <CoursesTable />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/courses/EditCourse.jsx b/apps/web/src/modules/admin/pages/courses/EditCourse.jsx
new file mode 100644
index 0000000..52f9cf0
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/courses/EditCourse.jsx
@@ -0,0 +1,1321 @@
+import { useEffect, useState, useCallback } from "react";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { useForm, useFieldArray, useWatch } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  ArrowLeft, ArrowRight, Plus, Trash2, Save, BadgeCheck, GripVertical,
+  Tag, ChevronsUpDown, Check, X, Trophy, ImagePlus, Palette, BookOpen,
+} from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import CourseBadge from "@/modules/admin/components/courses/CourseBadge";
+import { TIER_COLOR_OPTIONS } from "@/utils/tierColors";
+import { AssetPickerSheet } from "@/components/generic/AssetPickerSheet";
+import { PageMeta } from "@/contexts/MetadataContext";
+import CourseInstructorPicker from "@/modules/admin/components/courses/CourseInstructorPicker";
+import UnitsTable from "@/modules/admin/components/courses/UnitsTable";
+import CoursePrerequisiteBuilder from "@/modules/admin/components/courses/CoursePrerequisiteBuilder";
+import { useCategories } from "@/contexts/AdminCategoriesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import api from "@/utils/api.util";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+import CompletionRequirementBuilder from "@/modules/admin/components/courses/CompletionRequirementBuilder";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+import { Switch } from "@/components/ui/switch";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import {
+  Popover, PopoverContent, PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList,
+} from "@/components/ui/command";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+// ─── Schema ───────────────────────────────────────────────────────────────────
+
+const schema = z.object({
+  title: z.string().min(1, "Title is required."),
+  description: z.string().optional(),
+  course_code: z.string().optional(),
+  level: z.enum(["beginner", "intermediate", "advanced"]).optional(),
+  subscription: z.string().min(1, "Subscription is required.").default("free"),
+  status: z.enum(["draft", "published", "unpublished"]).default("draft"),
+  objectives: z
+    .array(z.object({ text: z.string().min(1, "Objective cannot be empty.") }))
+    .default([]),
+  roles: z
+    .array(z.object({ text: z.string().min(1, "Role cannot be empty.") }))
+    .default([]),
+});
+
+// ─── Steps config ─────────────────────────────────────────────────────────────
+
+const STEPS = [
+  { label: "Basic Info",     description: "Title, level & objectives" },
+  { label: "Units",          description: "Roadmap for this course"   },
+  { label: "Categories",     description: "Tags & instructors"         },
+  { label: "Rewards",        description: "Badge & achievements"       },
+  { label: "Requirements",   description: "Prerequisites & completion"  },
+  { label: "Pricing",        description: "Product listing"            },
+];
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+function SectionCard({ title, description, children }) {
+  return (
+    <div className="rounded-lg border bg-card p-6 space-y-5">
+      {(title || description) && (
+        <div className="space-y-0.5 pb-1 border-b">
+          {title && <h2 className="text-sm font-semibold">{title}</h2>}
+          {description && <p className="text-xs text-muted-foreground">{description}</p>}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}
+
+function StepIndicator({ steps, current, onStepClick }) {
+  return (
+    <div className="flex items-start w-full mb-8">
+      {steps.flatMap((step, i) => {
+        const items = [
+          <button
+            key={`step-${i}`}
+            type="button"
+            onClick={() => onStepClick(i)}
+            className="flex flex-col items-center gap-1.5 shrink-0 group"
+          >
+            <div
+              className={[
+                "w-8 h-8 rounded-full border-2 flex items-center justify-center text-sm font-semibold transition-all group-hover:opacity-80",
+                i < current
+                  ? "bg-primary border-primary text-primary-foreground"
+                  : i === current
+                  ? "border-primary text-primary"
+                  : "border-border text-muted-foreground",
+              ].join(" ")}
+            >
+              {i < current ? <Check className="h-4 w-4" /> : i + 1}
+            </div>
+            <p
+              className={[
+                "text-[11px] font-medium text-center leading-tight whitespace-nowrap",
+                i === current ? "text-foreground" : "text-muted-foreground",
+              ].join(" ")}
+            >
+              {step.label}
+            </p>
+          </button>,
+        ];
+        if (i < steps.length - 1) {
+          items.push(
+            <div
+              key={`line-${i}`}
+              className={[
+                "flex-1 h-px mt-4 mx-2 shrink",
+                i < current ? "bg-primary" : "bg-border",
+              ].join(" ")}
+            />
+          );
+        }
+        return items;
+      })}
+    </div>
+  );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function EditCourse() {
+  const navigate = useNavigate();
+  const { courseId } = useParams();
+  const {
+    fetchCourse, updateCourse,
+    fetchCourseProduct, saveCourseProduct, removeCourseProduct,
+    fetchCourseCategories, syncCourseCategories,
+    fetchInstructors, syncInstructors,
+    fetchCourseAchievements, syncCourseAchievements,
+    fetchCourseRequirements, syncCourseRequirements,
+    fetchPrerequisites, syncPrerequisites,
+    fetchCoursesFlat, fetchUnitsFlat, fetchLessonsFlat,
+    loading, course,
+  } = useCourses();
+  const { categories: allCategories, fetchCategories } = useCategories();
+  const { user } = useAuth();
+
+  const [searchParams] = useSearchParams();
+  const initialStep = Math.min(
+    Math.max(Number(searchParams.get("step")) || 0, 0),
+    STEPS.length - 1,
+  );
+  const [currentStep, setCurrentStep] = useState(initialStep);
+
+  // ─── Tier categories ──────────────────────────────────────────────────────
+  const [tierCategories, setTierCategories] = useState([]);
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => setTierCategories((data.data ?? []).filter((c) => c.is_active)))
+      .catch(() => {});
+  }, []);
+
+  // ─── Categories state ─────────────────────────────────────────────────────
+  const [selectedCategoryIds, setSelectedCategoryIds] = useState([]);
+  const [categoriesDirty, setCategoriesDirty] = useState(false);
+  const [categoriesLoading, setCategoriesLoading] = useState(false);
+  const [catOpen, setCatOpen] = useState(false);
+
+  // ─── Instructors state ────────────────────────────────────────────────────
+  const [instructors, setInstructors] = useState([]);
+  const [instructorsDirty, setInstructorsDirty] = useState(false);
+  const [instructorsLoading, setInstructorsLoading] = useState(false);
+
+  // ─── Prerequisites state ──────────────────────────────────────────────────
+  const [prerequisites, setPrerequisites] = useState([]);
+  const [prereqDirty, setPrereqDirty] = useState(false);
+  const [prereqLoading, setPrereqLoading] = useState(false);
+  const [flatCourses, setFlatCourses] = useState([]);
+  const [flatUnits, setFlatUnits] = useState([]);
+  const [flatLessons, setFlatLessons] = useState([]);
+  useEffect(() => {
+    (async () => {
+      const [c, u, l] = await Promise.all([fetchCoursesFlat(), fetchUnitsFlat(), fetchLessonsFlat()]);
+      setFlatCourses(c ?? []);
+      setFlatUnits(u ?? []);
+      setFlatLessons(l ?? []);
+    })();
+  }, []);
+
+  // ─── Achievements state ───────────────────────────────────────────────────
+  const [selectedAchievementKeys, setSelectedAchievementKeys] = useState([]);
+  const [achievementsDirty, setAchievementsDirty] = useState(false);
+  const [achievementsLoading, setAchievementsLoading] = useState(false);
+  const [achOpen, setAchOpen] = useState(false);
+  const [achievementRegistry, setAchievementRegistry] = useState([]);
+  useEffect(() => {
+    api.get("/admin/achievements")
+      .then(({ data }) => setAchievementRegistry((data.data ?? []).filter((a) => a.is_active)))
+      .catch(() => setAchievementRegistry([]));
+  }, []);
+
+  // ─── Badge state ──────────────────────────────────────────────────────────
+  const [badgeColor, setBadgeColor] = useState("purple");
+  const [badgeImageUrl, setBadgeImageUrl] = useState(null);
+  const [badgeAssetId, setBadgeAssetId] = useState(null);
+  const [badgeDirty, setBadgeDirty] = useState(false);
+  const [badgeLoading, setBadgeLoading] = useState(false);
+  const [assetPickerOpen, setAssetPickerOpen] = useState(false);
+
+  // ─── Product state ────────────────────────────────────────────────────────
+  const [product, setProduct] = useState(null);
+  const [productDirty, setProductDirty] = useState(false);
+  const [productLoading, setProductLoading] = useState(false);
+  const [productForm, setProductForm] = useState({
+    name: "", price: "", currency: "USD", access_days: "", is_active: true,
+  });
+
+  const {
+    register, handleSubmit, reset, control, setValue,
+    formState: { errors, isDirty },
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      title: "", description: "", course_code: "",
+      level: undefined, subscription: "free", status: "draft", objectives: [], roles: [],
+    },
+  });
+
+  const { fields: objectiveFields, append: appendObjective, remove: removeObjective, insert: insertObjective } =
+    useFieldArray({ control, name: "objectives" });
+
+  const handleObjectivePaste = (e, index) => {
+    const text = e.clipboardData.getData("text");
+    const lines = text.split(/\r\n|\r|\n/).map((l) => l.trim()).filter(Boolean);
+    if (lines.length <= 1) return;
+    e.preventDefault();
+    setValue(`objectives.${index}.text`, lines[0], { shouldDirty: true, shouldValidate: true });
+    lines.slice(1).forEach((line, i) => {
+      insertObjective(index + 1 + i, { text: line });
+    });
+  };
+  const { fields: roleFields, append: appendRole, remove: removeRole } =
+    useFieldArray({ control, name: "roles" });
+
+  // Each section (Categories, Instructors, Badge, Achievements, Product) tracks
+  // its own dirty flag already (see handleDone below) — fold them in here too
+  // so leaving the wizard early (Back/Cancel/browser back) is gated the same
+  // way "Done" already flushes them.
+  const hasUnsavedChanges =
+    isDirty ||
+    categoriesDirty ||
+    instructorsDirty ||
+    badgeDirty ||
+    achievementsDirty ||
+    productDirty ||
+    prereqDirty;
+
+  const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(hasUnsavedChanges);
+
+  const watchedTitle        = useWatch({ control, name: "title" });
+  const watchedLevel        = useWatch({ control, name: "level" });
+  const watchedSubscription = useWatch({ control, name: "subscription" });
+  const watchedStatus       = useWatch({ control, name: "status" });
+
+  // ─── Load data ────────────────────────────────────────────────────────────
+  useEffect(() => {
+    (async () => {
+      const res = await fetchCourse(courseId);
+      const c = res?.data?.data ?? null;
+      if (!c) return;
+
+      reset({
+        title: c.title ?? "",
+        description: c.description ?? "",
+        course_code: c.course_code ?? "",
+        level: c.level ?? undefined,
+        subscription: c.subscription ?? "free",
+        status: c.status ?? "draft",
+        objectives: (c.objectives ?? []).map((o) => ({
+          objective_id: o.objective_id ?? null,
+          text: o.text ?? "",
+        })),
+        roles: (c.roles ?? []).map((r) => ({
+          role_id: r.role_id ?? null,
+          text: r.text ?? "",
+        })),
+      });
+      setBadgeColor(c.badge_color ?? "purple");
+      setBadgeAssetId(c.badge_asset_id ?? null);
+
+      if (c.badge_asset_id) {
+        api.post("/admin/media/token", { asset_id: c.badge_asset_id })
+          .then(({ data }) => {
+            const STREAM_BASE = `${import.meta.env.VITE_API_URL}/client/media/stream`;
+            const thumbUrl = data.data?.thumbnail_url;
+            const token    = data.data?.token;
+            setBadgeImageUrl(thumbUrl ?? (token ? `${STREAM_BASE}/${token}` : null));
+          })
+          .catch(() => setBadgeImageUrl(c.badge_image_url ?? null));
+      } else {
+        setBadgeImageUrl(c.badge_image_url ?? null);
+      }
+    })();
+
+    (async () => {
+      await fetchCategories();
+      const [cats, prod, insts, achKeys, prereqRes] = await Promise.all([
+        fetchCourseCategories(courseId),
+        fetchCourseProduct(courseId),
+        fetchInstructors(courseId),
+        fetchCourseAchievements(courseId),
+        fetchPrerequisites(courseId),
+      ]);
+      setSelectedCategoryIds((cats ?? []).map((c) => String(c.id)));
+      setPrerequisites(prereqRes?.data?.data ?? []);
+      if (prod) {
+        setProduct(prod);
+        setProductForm({
+          name: prod.name ?? "",
+          price: prod.price ?? "",
+          currency: prod.currency ?? "USD",
+          access_days: prod.access_days ?? "",
+          is_active: prod.is_active ?? true,
+        });
+      }
+      setInstructors(
+        (insts?.data ?? []).map((i) => ({
+          _key: i.id ?? crypto.randomUUID(),
+          user_id: i.user_id ?? null,
+          display_name: i.display_name ?? "",
+          order_index: i.order_index ?? 0,
+        }))
+      );
+      setSelectedAchievementKeys(achKeys ?? []);
+    })();
+  }, [courseId]);
+
+  // ─── Category handlers ────────────────────────────────────────────────────
+  const toggleCategory = useCallback((id) => {
+    setSelectedCategoryIds((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+    );
+    setCategoriesDirty(true);
+  }, []);
+
+  const handleSaveCategories = async () => {
+    setCategoriesLoading(true);
+    await syncCourseCategories(courseId, selectedCategoryIds);
+    setCategoriesDirty(false);
+    setCategoriesLoading(false);
+  };
+
+  // ─── Product handlers ─────────────────────────────────────────────────────
+  const handleProductChange = (field, value) => {
+    setProductForm((prev) => ({ ...prev, [field]: value }));
+    setProductDirty(true);
+  };
+
+  const handleSaveProduct = async () => {
+    if (!productForm.price) return;
+    setProductLoading(true);
+    const saved = await saveCourseProduct(courseId, {
+      name: productForm.name || null,
+      price: Number(productForm.price),
+      currency: productForm.currency || "USD",
+      access_days: productForm.access_days ? Number(productForm.access_days) : null,
+      is_active: productForm.is_active,
+    });
+    if (saved) { setProduct(saved); setProductDirty(false); }
+    setProductLoading(false);
+  };
+
+  const handleRemoveProduct = async () => {
+    setProductLoading(true);
+    await removeCourseProduct(courseId);
+    setProduct(null);
+    setProductForm({ name: "", price: "", currency: "USD", access_days: "", is_active: true });
+    setProductDirty(false);
+    setProductLoading(false);
+  };
+
+  // ─── Instructor handlers ──────────────────────────────────────────────────
+  const addInstructor = useCallback(({ user_id, display_name }) => {
+    setInstructors((prev) => [
+      ...prev,
+      { _key: crypto.randomUUID(), user_id: user_id ?? null, display_name, order_index: prev.length },
+    ]);
+    setInstructorsDirty(true);
+  }, []);
+
+  const removeInstructor = useCallback((key) => {
+    setInstructors((prev) =>
+      prev.filter((i) => i._key !== key).map((i, idx) => ({ ...i, order_index: idx }))
+    );
+    setInstructorsDirty(true);
+  }, []);
+
+  const removeLinkedInstructor = useCallback((userId) => {
+    setInstructors((prev) =>
+      prev.filter((i) => i.user_id !== userId).map((i, idx) => ({ ...i, order_index: idx }))
+    );
+    setInstructorsDirty(true);
+  }, []);
+
+  const updateDisplayName = useCallback((key, value) => {
+    setInstructors((prev) =>
+      prev.map((i) => i._key === key ? { ...i, display_name: value } : i)
+    );
+    setInstructorsDirty(true);
+  }, []);
+
+  const handleSaveInstructors = async () => {
+    setInstructorsLoading(true);
+    await syncInstructors(
+      courseId,
+      instructors.map(({ user_id, display_name, order_index }) => ({ user_id, display_name, order_index }))
+    );
+    setInstructorsDirty(false);
+    setInstructorsLoading(false);
+  };
+
+  // ─── Badge handlers ───────────────────────────────────────────────────────
+  const handleSaveBadge = async () => {
+    setBadgeLoading(true);
+    await updateCourse(courseId, {
+      badge_color: badgeColor,
+      badge_asset_id: badgeAssetId,
+      badge_image_url: badgeImageUrl,
+      updatedBy: user?.user_id ?? null,
+    });
+    setBadgeDirty(false);
+    setBadgeLoading(false);
+  };
+
+  // ─── Achievement handlers ─────────────────────────────────────────────────
+  const toggleAchievement = (key) => {
+    setSelectedAchievementKeys((prev) => {
+      if (prev.includes(key)) return prev.filter((k) => k !== key);
+      return [key];
+    });
+    setAchievementsDirty(true);
+  };
+
+  const handleSaveAchievements = async () => {
+    setAchievementsLoading(true);
+    await syncCourseAchievements(courseId, selectedAchievementKeys);
+    setAchievementsDirty(false);
+    setAchievementsLoading(false);
+  };
+
+  // ─── Prerequisite handlers ────────────────────────────────────────────────
+  const handlePrerequisitesChange = useCallback((next) => {
+    setPrerequisites(next);
+    setPrereqDirty(true);
+  }, []);
+
+  const handleSavePrerequisites = async () => {
+    setPrereqLoading(true);
+    // Drop rows where the admin picked a type but never actually selected an
+    // item from the picker — sending an empty ref_id fails at the DB level.
+    const complete = prerequisites
+      .filter((p) => p.ref_id !== "" && p.ref_id != null)
+      .map(({ ref_type, ref_id }) => ({ ref_type, ref_id }));
+    await syncPrerequisites(courseId, complete);
+    setPrereqDirty(false);
+    setPrereqLoading(false);
+  };
+
+  // ─── Form submit (step 0 → step 1) ───────────────────────────────────────
+  const saveBasicInfo = async (values) => {
+    const payload = {
+      ...values,
+      objectives: values.objectives?.map((o, i) => ({
+        objective_id: o.objective_id ?? null,
+        text: o.text,
+        order_index: i,
+      })) ?? [],
+      roles: values.roles?.map((r, i) => ({
+        role_id: r.role_id ?? null,
+        text: r.text,
+        order_index: i,
+      })) ?? [],
+      level: values.level || null,
+      course_code: values.course_code || null,
+      updatedBy: user?.user_id ?? null,
+    };
+    return updateCourse(courseId, payload);
+  };
+
+  const onSubmit = async (values) => {
+    if (isDirty) {
+      const result = await saveBasicInfo(values);
+      if (!result) return;
+    }
+    setCurrentStep(1);
+  };
+
+  // ─── Done — persists any unsaved section before leaving the wizard ───────
+  //
+  // Each section (Categories, Instructors, Badge, Achievements, Product) has
+  // its own "Save X" button and dirty flag, so it's easy to edit a section,
+  // skip its save button, and hit "Done" — which previously just navigated
+  // away and silently discarded that section's changes. Flush every dirty
+  // section here instead of trusting the user caught every save button.
+  const [doneLoading, setDoneLoading] = useState(false);
+  const handleDone = async () => {
+    setDoneLoading(true);
+    try {
+      if (isDirty) {
+        let valid = true;
+        await handleSubmit(
+          async (values) => { valid = !!(await saveBasicInfo(values)); },
+          () => { valid = false; setCurrentStep(0); },
+        )();
+        if (!valid) return;
+      }
+      if (categoriesDirty)   await handleSaveCategories();
+      if (instructorsDirty)  await handleSaveInstructors();
+      if (badgeDirty)        await handleSaveBadge();
+      if (achievementsDirty) await handleSaveAchievements();
+      if (productDirty && productForm.price) await handleSaveProduct();
+      if (prereqDirty) await handleSavePrerequisites();
+
+      bypassOnce();
+      navigate(`/admin/courses/${courseId}/view`);
+    } finally {
+      setDoneLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col min-h-screen bg-muted/60">
+      <PageMeta title={course ? `Edit: ${course.title} - STARR` : undefined} />
+
+      {/* ── Sticky header ── */}
+      <div
+        className="sticky z-20 shrink-0 border-b bg-white/70 dark:bg-zinc-900/70 backdrop-blur-md"
+        style={{ top: "var(--navbar-h)" }}
+      >
+        <div className="lg:container lg:mx-auto lg:px-6 px-4">
+          <div className="flex items-center gap-3 py-3">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate(`/admin/courses/${courseId}/view`)}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div className="flex-1 min-w-0">
+              <h1 className="text-xl font-semibold leading-tight flex items-center gap-2">
+                <BookOpen className="h-5 w-5 text-muted-foreground" />
+                Edit Course
+              </h1>
+              {course && (
+                <p className="text-sm text-muted-foreground">
+                  {course.course_code ? `${course.course_code} — ` : ""}{course.title}
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ── Content ── */}
+      <div className="lg:container lg:mx-auto lg:px-6 px-4 py-6">
+        <div className="max-w-2xl mx-auto">
+
+          <StepIndicator steps={STEPS} current={currentStep} onStepClick={setCurrentStep} />
+
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+
+            {/* ── Step 0: Basic Info ── */}
+            {currentStep === 0 && (
+              <>
+                <SectionCard title="Basic Information">
+                  <div className="space-y-1.5">
+                    <Label htmlFor="title">
+                      Title <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      id="title"
+                      placeholder="e.g. Introduction to Real Estate"
+                      {...register("title")}
+                    />
+                    <FieldError message={errors.title?.message} />
+                  </div>
+
+                  <div className="space-y-1.5">
+                    <Label htmlFor="description">Description</Label>
+                    <Textarea
+                      id="description"
+                      placeholder="Optional course description"
+                      rows={3}
+                      {...register("description")}
+                    />
+                  </div>
+
+                  <div className="space-y-1.5">
+                    <Label htmlFor="course_code">Course Code</Label>
+                    <Input
+                      id="course_code"
+                      placeholder="e.g. RE-101"
+                      {...register("course_code")}
+                    />
+                    <FieldError message={errors.course_code?.message} />
+                  </div>
+                </SectionCard>
+
+                <SectionCard title="Settings">
+                  <div className="grid grid-cols-3 gap-4">
+                    <div className="space-y-1.5">
+                      <Label>Level</Label>
+                      <Select
+                        value={watchedLevel ?? ""}
+                        onValueChange={(val) => setValue("level", val, { shouldDirty: true })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select level" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="beginner">Beginner</SelectItem>
+                          <SelectItem value="intermediate">Intermediate</SelectItem>
+                          <SelectItem value="advanced">Advanced</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <FieldError message={errors.level?.message} />
+                    </div>
+
+                    <div className="space-y-1.5">
+                      <Label>Subscription</Label>
+                      <Select
+                        value={watchedSubscription ?? "free"}
+                        onValueChange={(val) => setValue("subscription", val, { shouldDirty: true })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select subscription" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {tierCategories.map((c) => (
+                            <SelectItem key={c.slug} value={c.slug}>
+                              {c.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <FieldError message={errors.subscription?.message} />
+                    </div>
+
+                    <div className="space-y-1.5">
+                      <Label>Status</Label>
+                      <Select
+                        value={watchedStatus ?? "draft"}
+                        onValueChange={(val) => setValue("status", val, { shouldDirty: true })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select status" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="draft">Draft</SelectItem>
+                          <SelectItem value="published">Published</SelectItem>
+                          <SelectItem value="unpublished">Unpublished</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <FieldError message={errors.status?.message} />
+                    </div>
+                  </div>
+                </SectionCard>
+
+                <SectionCard
+                  title="Learning Objectives"
+                  description="What will learners be able to do after completing this course?"
+                >
+                  <div className="space-y-2">
+                    {objectiveFields.map((field, index) => (
+                      <div key={field.id} className="flex items-start gap-2">
+                        <div className="flex-1 space-y-1">
+                          <Input
+                            placeholder={`Objective ${index + 1}`}
+                            {...register(`objectives.${index}.text`)}
+                            onPaste={(e) => handleObjectivePaste(e, index)}
+                          />
+                          <FieldError message={errors.objectives?.[index]?.text?.message} />
+                        </div>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="mt-0.5 text-muted-foreground hover:text-destructive"
+                          onClick={() => removeObjective(index)}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    ))}
+
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="w-full mt-1"
+                      onClick={() => appendObjective({ text: "" })}
+                    >
+                      <Plus className="h-4 w-4 mr-2" />
+                      Add Objective
+                    </Button>
+                  </div>
+                </SectionCard>
+
+                <SectionCard
+                  title="Course Roles"
+                  description="Who is this course intended for? e.g. Sales Agent, Property Manager."
+                >
+                  <div className="space-y-2">
+                    {roleFields.map((field, index) => (
+                      <div key={field.id} className="flex items-start gap-2">
+                        <div className="flex-1 space-y-1">
+                          <Input
+                            placeholder={`Role ${index + 1}`}
+                            {...register(`roles.${index}.text`)}
+                          />
+                          <FieldError message={errors.roles?.[index]?.text?.message} />
+                        </div>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="mt-0.5 text-muted-foreground hover:text-destructive"
+                          onClick={() => removeRole(index)}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    ))}
+
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="w-full mt-1"
+                      onClick={() => appendRole({ text: "" })}
+                    >
+                      <Plus className="h-4 w-4 mr-2" />
+                      Add Role
+                    </Button>
+                  </div>
+                </SectionCard>
+              </>
+            )}
+
+            {/* ── Step 1: Units ── */}
+            {currentStep === 1 && (
+              <SectionCard
+                title="Units"
+                description="This course's roadmap. Units live independently in the shared Units Library — creating one here attaches it automatically, and attaching an existing one reuses it without copying."
+              >
+                <UnitsTable courseId={courseId} returnTo={`/admin/courses/${courseId}/edit?step=1`} />
+              </SectionCard>
+            )}
+
+            {/* ── Step 2: Categories & Instructors ── */}
+            {currentStep === 2 && (
+              <>
+                <SectionCard title="Categories" description="Assign this course to one or more categories for browsing.">
+                  {selectedCategoryIds.length > 0 && (
+                    <div className="flex flex-wrap gap-1.5">
+                      {allCategories
+                        .filter((c) => selectedCategoryIds.includes(String(c.id)))
+                        .map((cat) => (
+                          <Badge key={cat.id} variant="secondary" className="gap-1 pr-1">
+                            {cat.name}
+                            <button
+                              type="button"
+                              className="ml-0.5 rounded-full hover:bg-muted"
+                              onClick={() => toggleCategory(String(cat.id))}
+                            >
+                              <X className="h-3 w-3" />
+                            </button>
+                          </Badge>
+                        ))}
+                    </div>
+                  )}
+
+                  {allCategories.length === 0 ? (
+                    <p className="text-sm text-muted-foreground">
+                      No categories yet.{" "}
+                      <button
+                        type="button"
+                        className="underline"
+                        onClick={() => navigate("/admin/courses/categories/add")}
+                      >
+                        Add one
+                      </button>.
+                    </p>
+                  ) : (
+                    <Popover open={catOpen} onOpenChange={setCatOpen}>
+                      <PopoverTrigger asChild className="w-full">
+                        <Button type="button" variant="outline" size="sm" className="w-full justify-between">
+                          <span className="flex items-center gap-1.5">
+                            <Tag className="h-3.5 w-3.5" />
+                            {selectedCategoryIds.length > 0
+                              ? `${selectedCategoryIds.length} selected`
+                              : "Select categories"}
+                          </span>
+                          <ChevronsUpDown className="h-3 w-3 text-muted-foreground" />
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+                        <Command>
+                          <CommandInput placeholder="Search categories…" />
+                          <CommandList>
+                            <CommandEmpty>No categories found.</CommandEmpty>
+                            <CommandGroup>
+                              {allCategories.map((cat) => {
+                                const checked = selectedCategoryIds.includes(String(cat.id));
+                                return (
+                                  <CommandItem
+                                    key={cat.id}
+                                    value={cat.name}
+                                    onSelect={() => toggleCategory(String(cat.id))}
+                                    className="gap-2"
+                                  >
+                                    <Checkbox checked={checked} className="pointer-events-none" />
+                                    <span className="flex-1 text-sm">{cat.name}</span>
+                                    {!cat.is_active && (
+                                      <Badge variant="secondary" className="text-[10px]">Inactive</Badge>
+                                    )}
+                                    {checked && <Check className="h-3.5 w-3.5 text-primary shrink-0" />}
+                                  </CommandItem>
+                                );
+                              })}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
+                  )}
+
+                  <div className="flex justify-end pt-2 border-t">
+                    <Button
+                      type="button"
+                      size="sm"
+                      disabled={!categoriesDirty || categoriesLoading}
+                      onClick={handleSaveCategories}
+                    >
+                      {categoriesLoading && <Spinner className="h-3 w-3 mr-1.5" />}
+                      <Save className="h-3 w-3 mr-1.5" />
+                      Save Categories
+                    </Button>
+                  </div>
+                </SectionCard>
+
+                <SectionCard
+                  title="Course Instructors"
+                  description="These names appear on the certificate. Link a staff or admin account for audit trail, or enter a display name only for external speakers."
+                >
+                  <div className="space-y-2">
+                    {instructors.length === 0 && (
+                      <p className="text-sm text-muted-foreground">No instructors added yet.</p>
+                    )}
+                    {instructors.map((inst) => (
+                      <div key={inst._key} className="flex items-center gap-2">
+                        <GripVertical className="h-4 w-4 text-muted-foreground shrink-0" />
+                        <Input
+                          value={inst.display_name}
+                          placeholder="Display name on certificate"
+                          onChange={(e) => updateDisplayName(inst._key, e.target.value)}
+                          className="flex-1"
+                        />
+                        {inst.user_id && (
+                          <Badge variant="outline" className="text-xs shrink-0 bg-blue-50 text-blue-700 border-blue-200">
+                            Linked
+                          </Badge>
+                        )}
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="text-muted-foreground hover:text-destructive shrink-0"
+                          onClick={() => removeInstructor(inst._key)}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+
+                  <CourseInstructorPicker
+                    added={instructors}
+                    onAdd={addInstructor}
+                    onToggleLinked={removeLinkedInstructor}
+                  />
+
+                  <div className="flex justify-end pt-2 border-t">
+                    <Button
+                      type="button"
+                      size="sm"
+                      disabled={!instructorsDirty || instructorsLoading}
+                      onClick={handleSaveInstructors}
+                    >
+                      {instructorsLoading && <Spinner className="h-3 w-3 mr-1.5" />}
+                      <Save className="h-3 w-3 mr-1.5" />
+                      Save Instructors
+                    </Button>
+                  </div>
+                </SectionCard>
+              </>
+            )}
+
+            {/* ── Step 3: Rewards ── */}
+            {currentStep === 3 && (
+              <SectionCard
+                title="Rewards"
+                description="Badge and achievements awarded to learners who complete this course."
+              >
+                {/* Completion Badge */}
+                <div>
+                  <p className="text-xs font-medium mb-3 text-muted-foreground uppercase tracking-wide">Completion Badge</p>
+                  <div className="flex items-start gap-4">
+                    <CourseBadge
+                      title={watchedTitle || "Course Title"}
+                      level={watchedLevel}
+                      color={badgeColor}
+                      imageUrl={badgeImageUrl}
+                    />
+                    <div className="flex-1 flex flex-col gap-3">
+                      <div className="flex flex-col gap-1 text-xs text-muted-foreground">
+                        <div className="flex items-center gap-1.5">
+                          <span className="font-medium text-foreground">Label:</span> Course Completion
+                        </div>
+                        <div className="flex items-center gap-1.5">
+                          <span className="font-medium text-foreground">Trigger:</span> Pass course assessment
+                        </div>
+                        <div className="flex items-center gap-1.5 pb-0.5">
+                          <span className="font-medium text-foreground">Type:</span> Milestone achievement
+                        </div>
+                        <Badge className="self-start bg-green-100 text-green-700 border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700 gap-1 text-xs">
+                          <BadgeCheck className="size-3" /> Mandatory
+                        </Badge>
+                      </div>
+
+                      <div className="space-y-1.5">
+                        <p className="text-[10px] font-medium text-muted-foreground uppercase tracking-wide flex items-center gap-1">
+                          <Palette className="h-3 w-3" /> Color
+                        </p>
+                        <div className="flex flex-wrap gap-1.5">
+                          {TIER_COLOR_OPTIONS.map((opt) => (
+                            <button
+                              key={opt.key}
+                              type="button"
+                              title={opt.label}
+                              onClick={() => { setBadgeColor(opt.key); setBadgeDirty(true); }}
+                              className={[
+                                "w-5 h-5 rounded-full border-2 transition-all",
+                                badgeColor === opt.key
+                                  ? "border-foreground scale-110 shadow-sm"
+                                  : "border-transparent hover:border-muted-foreground/50",
+                              ].join(" ")}
+                              style={{ backgroundColor: opt.swatch }}
+                            />
+                          ))}
+                        </div>
+                      </div>
+
+                      <div className="space-y-1.5">
+                        <p className="text-[10px] font-medium text-muted-foreground uppercase tracking-wide flex items-center gap-1">
+                          <ImagePlus className="h-3 w-3" /> Image <span className="normal-case font-normal">(optional)</span>
+                        </p>
+                        <div className="flex items-center gap-2">
+                          {badgeImageUrl && (
+                            <div className="w-8 h-8 rounded-md border bg-muted flex items-center justify-center overflow-hidden shrink-0">
+                              <img src={badgeImageUrl} alt="" className="w-6 h-6 object-contain" />
+                            </div>
+                          )}
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={() => setAssetPickerOpen(true)}
+                            className="h-7 text-xs"
+                          >
+                            <ImagePlus className="h-3 w-3 mr-1" />
+                            {badgeImageUrl ? "Change" : "Pick from files"}
+                          </Button>
+                          {badgeImageUrl && (
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="sm"
+                              className="h-7 text-xs text-destructive hover:text-destructive"
+                              onClick={() => { setBadgeImageUrl(null); setBadgeAssetId(null); setBadgeDirty(true); }}
+                            >
+                              <X className="h-3 w-3 mr-1" /> Remove
+                            </Button>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end pt-3 mt-1 border-t">
+                    <Button
+                      type="button"
+                      size="sm"
+                      disabled={!badgeDirty || badgeLoading}
+                      onClick={handleSaveBadge}
+                    >
+                      {badgeLoading && <Spinner className="h-3 w-3 mr-1.5" />}
+                      <Save className="h-3 w-3 mr-1.5" />
+                      Save Badge
+                    </Button>
+                  </div>
+                </div>
+
+                {/* Achievements */}
+                <div className="border-t pt-4">
+                  <div className="flex items-center justify-between mb-2">
+                    <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Achievements</p>
+                    <span className="text-[10px] text-muted-foreground">{selectedAchievementKeys.length > 0 ? "1 selected" : "none selected"}</span>
+                  </div>
+
+                  {selectedAchievementKeys.length > 0 && (
+                    <div className="flex flex-wrap gap-1.5 mb-2">
+                      {selectedAchievementKeys.map((key) => {
+                        const ach = achievementRegistry.find((a) => a.key === key);
+                        return (
+                          <Badge key={key} variant="secondary" className="gap-1 pr-1">
+                            {ach?.label ?? key}
+                            <button
+                              type="button"
+                              className="ml-0.5 rounded-full hover:bg-muted"
+                              onClick={() => toggleAchievement(key)}
+                            >
+                              <X className="h-3 w-3" />
+                            </button>
+                          </Badge>
+                        );
+                      })}
+                    </div>
+                  )}
+
+                  <Popover open={achOpen} onOpenChange={setAchOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        className="w-full justify-between"
+                      >
+                        <span className="flex items-center gap-1.5">
+                          <Trophy className="h-3.5 w-3.5" />
+                          {selectedAchievementKeys.length > 0
+                            ? "Change achievement"
+                            : "Select achievement"}
+                        </span>
+                        <ChevronsUpDown className="h-3 w-3 text-muted-foreground" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+                      <Command>
+                        <CommandInput placeholder="Search achievements…" />
+                        <CommandList className="max-h-none">
+                          <CommandEmpty>No achievements found.</CommandEmpty>
+                          <CommandGroup>
+                            <ScrollArea className="h-64">
+                              {achievementRegistry.map((ach) => {
+                                const checked = selectedAchievementKeys.includes(ach.key);
+                                return (
+                                  <CommandItem
+                                    key={ach.key}
+                                    value={ach.label}
+                                    onSelect={() => {
+                                      toggleAchievement(ach.key);
+                                      setAchOpen(false);
+                                    }}
+                                    className="gap-2 items-start py-2"
+                                  >
+                                    <Checkbox checked={checked} className="pointer-events-none mt-0.5 shrink-0" />
+                                    <div className="flex-1 min-w-0">
+                                      <div className="flex items-center gap-1.5 flex-wrap">
+                                        <span className="text-xs font-medium">{ach.label}</span>
+                                        <Badge variant="outline" className="text-[9px] px-1 py-0 gap-0.5 capitalize">
+                                          {ach.type === "badge"
+                                            ? <Trophy className="h-2.5 w-2.5" />
+                                            : <BadgeCheck className="h-2.5 w-2.5" />
+                                          }
+                                          {ach.type}
+                                        </Badge>
+                                      </div>
+                                      <p className="text-[10px] text-muted-foreground leading-snug mt-0.5">{ach.description}</p>
+                                    </div>
+                                    {checked && <Check className="h-3.5 w-3.5 text-primary shrink-0 mt-0.5" />}
+                                  </CommandItem>
+                                );
+                              })}
+                            </ScrollArea>
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+
+                  <div className="flex justify-end pt-3 mt-1 border-t">
+                    <Button
+                      type="button"
+                      size="sm"
+                      disabled={!achievementsDirty || achievementsLoading}
+                      onClick={handleSaveAchievements}
+                    >
+                      {achievementsLoading && <Spinner className="h-3 w-3 mr-1.5" />}
+                      <Save className="h-3 w-3 mr-1.5" />
+                      Save Achievements
+                    </Button>
+                  </div>
+                </div>
+              </SectionCard>
+            )}
+
+            {/* ── Step 4: Prerequisites & Completion Requirements ── */}
+            {currentStep === 4 && (
+              <>
+                <SectionCard
+                  title="Prerequisites"
+                  description="What a learner must complete before starting this course."
+                >
+                  <CoursePrerequisiteBuilder
+                    value={prerequisites}
+                    onChange={handlePrerequisitesChange}
+                    courses={flatCourses}
+                    units={flatUnits}
+                    lessons={flatLessons}
+                    excludeCourseId={courseId}
+                  />
+
+                  <div className="flex justify-end pt-2 border-t">
+                    <Button
+                      type="button"
+                      size="sm"
+                      disabled={!prereqDirty || prereqLoading}
+                      onClick={handleSavePrerequisites}
+                    >
+                      {prereqLoading && <Spinner className="h-3 w-3 mr-1.5" />}
+                      <Save className="h-3 w-3 mr-1.5" />
+                      Save Prerequisites
+                    </Button>
+                  </div>
+                </SectionCard>
+
+                <SectionCard
+                  title="Completion Requirements"
+                  description="What a learner must do for this course to count as complete."
+                >
+                  <CompletionRequirementBuilder
+                    entityType="course"
+                    fetchFn={fetchCourseRequirements}
+                    syncFn={syncCourseRequirements}
+                    args={[courseId]}
+                  />
+                </SectionCard>
+              </>
+            )}
+
+            {/* ── Step 5: Pricing ── */}
+            {currentStep === 5 && (
+              <SectionCard
+                title="Product Listing"
+                description="Allow learners to purchase this course individually via PayPal."
+              >
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5 col-span-2">
+                    <Label htmlFor="prod_name">Listing Name</Label>
+                    <Input
+                      id="prod_name"
+                      placeholder="e.g. Real Estate Fundamentals"
+                      value={productForm.name}
+                      onChange={(e) => handleProductChange("name", e.target.value)}
+                    />
+                    <p className="text-xs text-muted-foreground">Defaults to course title if left blank.</p>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label htmlFor="prod_price">Price <span className="text-destructive">*</span></Label>
+                    <Input
+                      id="prod_price"
+                      type="number"
+                      step="0.01"
+                      min={0}
+                      placeholder="0.00"
+                      value={productForm.price}
+                      onChange={(e) => handleProductChange("price", e.target.value)}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label htmlFor="prod_currency">Currency</Label>
+                    <Input
+                      id="prod_currency"
+                      maxLength={3}
+                      placeholder="USD"
+                      value={productForm.currency}
+                      onChange={(e) => handleProductChange("currency", e.target.value.toUpperCase())}
+                    />
+                  </div>
+                  <div className="space-y-1.5 col-span-2">
+                    <Label htmlFor="prod_access">Access Duration (days)</Label>
+                    <Input
+                      id="prod_access"
+                      type="number"
+                      min={1}
+                      placeholder="Leave blank for lifetime access"
+                      value={productForm.access_days}
+                      onChange={(e) => handleProductChange("access_days", e.target.value)}
+                    />
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between pt-1">
+                  <div>
+                    <Label>Listed for Purchase</Label>
+                    <p className="text-xs text-muted-foreground">Show "Buy this course" button to learners.</p>
+                  </div>
+                  <Switch
+                    checked={productForm.is_active}
+                    onCheckedChange={(v) => handleProductChange("is_active", v)}
+                  />
+                </div>
+
+                <div className="flex items-center justify-between pt-2 border-t">
+                  {product && (
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="outline"
+                      className="text-destructive border-destructive/50 hover:bg-destructive/5"
+                      disabled={productLoading}
+                      onClick={handleRemoveProduct}
+                    >
+                      {productLoading && <Spinner className="h-3 w-3 mr-1.5" />}
+                      Remove Listing
+                    </Button>
+                  )}
+                  <Button
+                    type="button"
+                    size="sm"
+                    className="ml-auto"
+                    disabled={!productDirty || productLoading || !productForm.price}
+                    onClick={handleSaveProduct}
+                  >
+                    {productLoading && <Spinner className="h-3 w-3 mr-1.5" />}
+                    <Save className="h-3 w-3 mr-1.5" />
+                    {product ? "Update Listing" : "Create Listing"}
+                  </Button>
+                </div>
+              </SectionCard>
+            )}
+
+            {/* Asset picker (always mounted) */}
+            <AssetPickerSheet
+              open={assetPickerOpen}
+              onOpenChange={setAssetPickerOpen}
+              fileType="image"
+              onSelect={(asset, resolvedUrl) => {
+                setBadgeImageUrl(resolvedUrl ?? null);
+                setBadgeAssetId(asset.asset_id);
+                setBadgeDirty(true);
+              }}
+            />
+
+            {/* ── Step navigation ── */}
+            <div className="flex items-center justify-between pt-2 pb-6">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => currentStep > 0 ? setCurrentStep((s) => s - 1) : navigate(`/admin/courses/${courseId}/view`)}
+              >
+                <ArrowLeft className="h-4 w-4 mr-2" />
+                {currentStep === 0 ? "Cancel" : "Back"}
+              </Button>
+
+              <div className="flex items-center gap-2">
+                {currentStep < STEPS.length - 1 && (
+                  currentStep === 0 && isDirty ? (
+                    <Button type="submit" disabled={loading}>
+                      {loading && <Spinner className="h-4 w-4 mr-2" />}
+                      Save & Continue
+                      <ArrowRight className="h-4 w-4 ml-2" />
+                    </Button>
+                  ) : (
+                    <Button type="button" onClick={() => setCurrentStep((s) => s + 1)}>
+                      Next
+                      <ArrowRight className="h-4 w-4 ml-2" />
+                    </Button>
+                  )
+                )}
+
+                <Button
+                  type="button"
+                  variant="outline"
+                  disabled={doneLoading}
+                  onClick={handleDone}
+                >
+                  {doneLoading ? <Spinner className="h-4 w-4 mr-2" /> : <Check className="h-4 w-4 mr-2" />}
+                  Done
+                </Button>
+              </div>
+            </div>
+
+          </form>
+        </div>
+      </div>
+
+      {unsavedChangesDialog}
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/courses/ViewCourse.jsx b/apps/web/src/modules/admin/pages/courses/ViewCourse.jsx
new file mode 100644
index 0000000..cec8496
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/courses/ViewCourse.jsx
@@ -0,0 +1,439 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  ArrowLeft, Pencil, Clock, BookOpen, Layers,
+  BadgeCheck, Tag, Star, Lock, ListChecks, BarChart2,
+  Trophy, Users, Award, ClipboardList,
+} from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { PageMeta } from "@/contexts/MetadataContext";
+import CourseReadingProgressList from "../../components/courses/CourseReadingProgressList";
+import UnitsTable from "../../components/courses/UnitsTable";
+import CourseAssessmentPanel from "../../components/courses/CourseAssessmentPanel";
+import CourseBadge from "@/modules/admin/components/courses/CourseBadge";
+import api from "@/utils/api.util";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Separator } from "@/components/ui/separator";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function InfoRow({ label, children }) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <span className="text-xs text-muted-foreground uppercase tracking-wide">{label}</span>
+      <span className="text-sm font-medium">{children ?? <span className="text-muted-foreground italic">—</span>}</span>
+    </div>
+  );
+}
+
+function SectionCard({ icon: Icon, title, children }) {
+  return (
+    <div className="rounded-lg border bg-card p-5 space-y-4">
+      <div className="flex items-center gap-2">
+        {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+        <h2 className="text-sm font-semibold">{title}</h2>
+      </div>
+      <Separator />
+      {children}
+    </div>
+  );
+}
+
+const LEVEL_BADGE = {
+  beginner: "secondary",
+  intermediate: "outline",
+  advanced: "destructive",
+};
+
+const SUBSCRIPTION_BADGE = {
+  free: "secondary",
+};
+
+function LoadingSkeleton() {
+  return (
+    <div className="space-y-5">
+      <Skeleton className="h-8 w-64" />
+      <Skeleton className="h-4 w-40" />
+      <div className="grid grid-cols-2 gap-4">
+        {[...Array(4)].map((_, i) => <Skeleton key={i} className="h-12 w-full" />)}
+      </div>
+      <Skeleton className="h-32 w-full" />
+      <Skeleton className="h-32 w-full" />
+    </div>
+  );
+}
+
+// ─── Tab: Course Details ───────────────────────────────────────────────────────
+
+function CourseDetailsTab({ course, loading, instructors, achievementKeys, achievementRegistry, badgeImageUrl }) {
+  const { fmtDateTime } = useDateFormat();
+
+  if (loading && !course) return <LoadingSkeleton />;
+  if (!course) return <div className="text-sm text-muted-foreground">Course not found.</div>;
+
+  return (
+    <div className="space-y-5">
+      <SectionCard icon={BookOpen} title="Basic Information">
+        <div className="space-y-4">
+          <InfoRow label="Title">{course.title}</InfoRow>
+
+          {course.description && (
+            <InfoRow label="Description">
+              <span className="whitespace-pre-wrap text-sm font-normal text-foreground">
+                {course.description}
+              </span>
+            </InfoRow>
+          )}
+
+          <div className="grid grid-cols-2 gap-4">
+            <InfoRow label="Course Code">
+              {course.course_code ?? <span className="text-muted-foreground italic text-sm">—</span>}
+            </InfoRow>
+            <InfoRow label="Order Index">{course.order_index ?? 0}</InfoRow>
+          </div>
+        </div>
+      </SectionCard>
+
+      <SectionCard icon={Tag} title="Settings">
+        <div className="grid grid-cols-2 gap-4">
+          <InfoRow label="Level">
+            {course.level ? (
+              <Badge variant={LEVEL_BADGE[course.level] ?? "outline"} className="capitalize mt-0.5">
+                {course.level}
+              </Badge>
+            ) : null}
+          </InfoRow>
+
+          <InfoRow label="Subscription">
+            <Badge variant={SUBSCRIPTION_BADGE[course.subscription] ?? "outline"} className="capitalize mt-0.5">
+              {course.subscription ?? "free"}
+            </Badge>
+          </InfoRow>
+        </div>
+      </SectionCard>
+
+      <SectionCard icon={Clock} title="Duration & Stats">
+        <div className="grid grid-cols-3 gap-4">
+          <InfoRow label="Duration">
+            {course.duration_formatted ?? (course.duration_seconds ? `${course.duration_seconds}s` : "—")}
+          </InfoRow>
+          <InfoRow label="Units">
+            <div className="flex items-center gap-1.5 mt-0.5">
+              <Layers className="h-3.5 w-3.5 text-muted-foreground" />
+              {course.unitCount ?? course.units?.length ?? 0}
+            </div>
+          </InfoRow>
+          <InfoRow label="Lessons">
+            <div className="flex items-center gap-1.5 mt-0.5">
+              <BookOpen className="h-3.5 w-3.5 text-muted-foreground" />
+              {course.lessonCount ?? 0}
+            </div>
+          </InfoRow>
+        </div>
+      </SectionCard>
+
+      {course.objectives?.length > 0 && (
+        <SectionCard icon={ListChecks} title="Learning Objectives">
+          <ul className="space-y-2">
+            {course.objectives.map((obj, i) => (
+              <li key={obj.objective_id ?? i} className="flex items-start gap-2 text-sm">
+                <BadgeCheck className="h-4 w-4 text-primary mt-0.5 shrink-0" />
+                {obj.text}
+              </li>
+            ))}
+          </ul>
+        </SectionCard>
+      )}
+
+      <SectionCard icon={Users} title="Course Instructors">
+        {instructors.length === 0 ? (
+          <p className="text-sm text-muted-foreground italic">No instructors assigned.</p>
+        ) : (
+          <ul className="space-y-3">
+            {instructors.map((inst, i) => {
+              const fullName = inst.user?.personal_info?.name?.full_name ?? null;
+              const email = inst.user?.email ?? null;
+              return (
+                <li key={inst.id ?? i} className="flex items-center gap-3">
+                  <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center shrink-0">
+                    <Users className="h-3.5 w-3.5 text-muted-foreground" />
+                  </div>
+                  <div className="min-w-0">
+                    <p className="text-sm font-medium leading-tight">{inst.display_name}</p>
+                    {(fullName || email) && (
+                      <p className="text-xs text-muted-foreground truncate">
+                        {fullName ?? email}
+                      </p>
+                    )}
+                  </div>
+                  <Badge variant="outline" className="ml-auto text-[10px] shrink-0">
+                    #{i + 1}
+                  </Badge>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </SectionCard>
+
+      <SectionCard icon={Award} title="Rewards">
+        <div className="space-y-5">
+          <div>
+            <p className="text-xs text-muted-foreground uppercase tracking-wide mb-3">Completion Badge</p>
+            <div className="flex items-start gap-4">
+              <CourseBadge
+                title={course.title}
+                level={course.level}
+                color={course.badge_color ?? "purple"}
+                imageUrl={badgeImageUrl}
+              />
+              <div className="flex flex-col gap-1.5 text-xs text-muted-foreground pt-1">
+                <div><span className="font-medium text-foreground">Label:</span> Course Completion</div>
+                <div><span className="font-medium text-foreground">Trigger:</span> Pass course assessment</div>
+                <div><span className="font-medium text-foreground">Type:</span> Milestone achievement</div>
+                <div><span className="font-medium text-foreground">Color:</span> <span className="capitalize">{course.badge_color ?? "purple"}</span></div>
+                <Badge className="self-start mt-1 bg-green-100 text-green-700 border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700 gap-1 text-xs">
+                  <BadgeCheck className="size-3" /> Mandatory
+                </Badge>
+              </div>
+            </div>
+          </div>
+
+          <div className="border-t pt-4">
+            <p className="text-xs text-muted-foreground uppercase tracking-wide mb-3">
+              Achievements
+              <span className="ml-2 normal-case font-normal">({achievementKeys.length}/3)</span>
+            </p>
+            {achievementKeys.length === 0 ? (
+              <p className="text-sm text-muted-foreground italic">No achievements assigned.</p>
+            ) : (
+              <ul className="space-y-2">
+                {achievementKeys.map((key) => {
+                  const ach = achievementRegistry.find((a) => a.key === key);
+                  return (
+                    <li key={key} className="flex items-start gap-2.5 text-sm">
+                      <div className="mt-0.5 shrink-0">
+                        {ach?.type === "badge"
+                          ? <Trophy className="h-4 w-4 text-amber-500" />
+                          : <BadgeCheck className="h-4 w-4 text-primary" />
+                        }
+                      </div>
+                      <div className="min-w-0">
+                        <span className="font-medium">{ach?.label ?? key}</span>
+                        {ach?.description && (
+                          <p className="text-xs text-muted-foreground leading-snug mt-0.5">{ach.description}</p>
+                        )}
+                      </div>
+                      <Badge variant="outline" className="ml-auto text-[9px] capitalize shrink-0 mt-0.5">
+                        {ach?.type ?? "badge"}
+                      </Badge>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </div>
+        </div>
+      </SectionCard>
+
+      {course.prerequisites?.length > 0 && (
+        <SectionCard icon={Star} title="Prerequisites">
+          <ul className="space-y-2">
+            {course.prerequisites.map((p, i) => (
+              <li key={p.prereq_id ?? i} className="flex items-center gap-2 text-sm">
+                <Badge variant="outline" className="capitalize text-xs">{p.ref_type}</Badge>
+                <span>{p.title ?? `Untitled (ID: ${p.ref_id})`}</span>
+              </li>
+            ))}
+          </ul>
+        </SectionCard>
+      )}
+
+      {course.roles?.length > 0 && (
+        <SectionCard icon={Users} title="Course Roles">
+          <div className="flex flex-wrap gap-1.5">
+            {course.roles.map((r, i) => (
+              <Badge key={r.role_id ?? i} variant="secondary">{r.text}</Badge>
+            ))}
+          </div>
+        </SectionCard>
+      )}
+
+      {course.assessment && (
+        <SectionCard icon={Lock} title="Final Assessment">
+          <div className="grid grid-cols-2 gap-4">
+            <InfoRow label="Title">{course.assessment.title ?? "Untitled Assessment"}</InfoRow>
+            <InfoRow label="Passing Score">{course.assessment.passing_score ?? 70}%</InfoRow>
+            <InfoRow label="Time Limit">
+              {course.assessment.time_limit_minutes
+                ? `${course.assessment.time_limit_minutes} mins`
+                : "No limit"}
+            </InfoRow>
+          </div>
+        </SectionCard>
+      )}
+
+      <SectionCard icon={BadgeCheck} title="Audit">
+        <div className="grid grid-cols-2 gap-4">
+          <InfoRow label="Created By">{course.creator?.full_name ?? course.createdBy ?? "—"}</InfoRow>
+          <InfoRow label="Updated By">{course.updater?.full_name ?? course.updatedBy ?? "—"}</InfoRow>
+          <InfoRow label="Created At">
+            {course.createdAt ? fmtDateTime(course.createdAt) : "—"}
+          </InfoRow>
+          <InfoRow label="Updated At">
+            {course.updatedAt ? fmtDateTime(course.updatedAt) : "—"}
+          </InfoRow>
+        </div>
+      </SectionCard>
+    </div>
+  );
+}
+
+// ─── Tabs config ───────────────────────────────────────────────────────────────
+
+const TABS = [
+  { key: "details", label: "Course Details", icon: BookOpen },
+  { key: "assessment", label: "Assessment", icon: ClipboardList },
+  { key: "units", label: "Units", icon: Layers },
+  { key: "progress", label: "Reading Progress", icon: BarChart2 },
+];
+
+const WIDE_TABS = new Set(["units", "assessment"]);
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function ViewCourse() {
+  const navigate = useNavigate();
+  const { courseId } = useParams();
+  const { fetchCourse, course, loading } = useCourses();
+
+  const [activeTab, setActiveTab] = useState("details");
+  const [instructors, setInstructors] = useState([]);
+  const [achievementKeys, setAchievementKeys] = useState([]);
+  const [achievementRegistry, setAchievementRegistry] = useState([]);
+  const [badgeImageUrl, setBadgeImageUrl] = useState(null);
+
+  useEffect(() => {
+    fetchCourse(courseId);
+
+    api.get(`/admin/courses/${courseId}/instructors`)
+      .then(({ data }) => setInstructors(data.data?.data ?? data.data ?? []))
+      .catch(() => { });
+
+    api.get(`/admin/courses/${courseId}/achievements`)
+      .then(({ data }) => {
+        const rows = data?.data?.data ?? [];
+        setAchievementKeys(rows.map((r) => r.achievement_key));
+      })
+      .catch(() => { });
+
+    api.get("/admin/achievements")
+      .then(({ data }) => setAchievementRegistry(data.data ?? []))
+      .catch(() => { });
+  }, [courseId]);
+
+  useEffect(() => {
+    if (!course?.badge_asset_id) {
+      setBadgeImageUrl(course?.badge_image_url ?? null);
+      return;
+    }
+    const STREAM_BASE = `${import.meta.env.VITE_API_URL}/client/media/stream`;
+    api.post("/admin/media/token", { asset_id: course.badge_asset_id })
+      .then(({ data }) => {
+        const thumbUrl = data.data?.thumbnail_url;
+        const token = data.data?.token;
+        setBadgeImageUrl(thumbUrl ?? (token ? `${STREAM_BASE}/${token}` : null));
+      })
+      .catch(() => setBadgeImageUrl(course.badge_image_url ?? null));
+  }, [course?.badge_asset_id, course?.badge_image_url]);
+
+  return (
+    <div className="flex flex-col min-h-screen bg-muted/60">
+      <PageMeta title={course ? `${course.title} - STARR` : undefined} description={course?.description} />
+
+      {/* ── Sticky header ── */}
+      <div
+        className="sticky z-20 shrink-0 border-b bg-white/70 dark:bg-zinc-900/70 backdrop-blur-md"
+        style={{ top: "var(--navbar-h)" }}
+      >
+        <div className="lg:container lg:mx-auto lg:px-6 px-4">
+          <div className="flex items-center gap-3 py-3">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/admin/courses")}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div className="flex-1 min-w-0">
+              <h1 className="text-xl font-semibold leading-tight flex items-center gap-2">
+                <BookOpen className="h-5 w-5 text-muted-foreground" />
+                View Course
+              </h1>
+              {course && (
+                <p className="text-sm text-muted-foreground capitalize">
+                  {course.course_code ? `${course.course_code} — ` : ""}{course.title}
+                </p>
+              )}
+            </div>
+            {activeTab === "details" && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => navigate(`/admin/courses/${courseId}/edit`)}
+                disabled={loading}
+              >
+                <Pencil className="h-4 w-4 mr-2" />
+                Edit Course
+              </Button>
+            )}
+          </div>
+
+          {/* Underline tabs */}
+          <div className="flex gap-1 pb-0 -mb-px">
+            {TABS.map(({ key, label, icon: Icon }) => (
+              <button
+                key={key}
+                onClick={() => setActiveTab(key)}
+                className={[
+                  "flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors",
+                  activeTab === key
+                    ? "border-primary text-primary"
+                    : "border-transparent text-muted-foreground hover:text-foreground",
+                ].join(" ")}
+              >
+                <Icon className="h-3.5 w-3.5" />
+                {label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* ── Content ── */}
+      <div className="lg:container lg:mx-auto lg:px-6 px-4 py-6">
+        <div className={WIDE_TABS.has(activeTab) ? "pb-16" : "max-w-3xl mx-auto pb-16"}>
+          {activeTab === "details" && (
+            <CourseDetailsTab
+              course={course}
+              loading={loading}
+              instructors={instructors}
+              achievementKeys={achievementKeys}
+              achievementRegistry={achievementRegistry}
+              badgeImageUrl={badgeImageUrl}
+            />
+          )}
+          {activeTab === "progress" && (
+            <CourseReadingProgressList courseId={courseId} />
+          )}
+          {activeTab === "units" && (
+            <UnitsTable courseId={courseId} />
+          )}
+          {activeTab === "assessment" && (
+            <CourseAssessmentPanel courseId={courseId} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/courses/lessons/AddLesson.jsx b/apps/web/src/modules/admin/pages/courses/lessons/AddLesson.jsx
new file mode 100644
index 0000000..634b432
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/courses/lessons/AddLesson.jsx
@@ -0,0 +1,486 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useForm, useFieldArray, useWatch } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { nanoid } from "nanoid";
+import {
+  ChevronLeft, ChevronRight, Check,
+  FileText, LayoutTemplate, ListChecks,
+  Plus, Trash2, Link2,
+} from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import { cn } from "@/lib/utils";
+import api from "@/utils/api.util";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import {
+  Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription,
+  DrawerFooter, DrawerClose,
+} from "@/components/ui/drawer";
+import { BlockList, DEFAULT_CONTENT } from "@/components/generic/BlockList";
+import { AddBlockMenu } from "@/components/generic/AddBlockMenu";
+import { PreviewContent, PreviewChrome } from "../../../components/courses/LessonsPreview";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+import DraftRequirementsEditor from "@/modules/admin/components/courses/DraftRequirementsEditor";
+import AttachLessonsDialog from "@/modules/admin/components/library/AttachLessonsDialog";
+
+function makeBlock(type) {
+  return { id: nanoid(), type, content: { ...DEFAULT_CONTENT[type] } };
+}
+
+const schema = z.object({
+  title: z.string().min(1, "Title is required."),
+  description: z.string().optional(),
+  order: z.coerce.number().min(0).default(0),
+  subscription: z.string().optional(),
+  objectives: z.array(
+    z.object({ value: z.string().min(1, "Objective cannot be empty.") })
+  ).optional(),
+  blocks: z.array(z.any()).optional(),
+});
+
+const STEPS = [
+  { id: 0, label: "Details",      icon: FileText },
+  { id: 1, label: "Page Builder", icon: LayoutTemplate },
+  { id: 2, label: "Completion Requirements", icon: ListChecks },
+];
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+// ─── Step 1 — Details ───────────────────────────────────────────────────────────
+function StepDetails({ register, errors, control, setValue, tierCategories }) {
+  const { fields, append, remove, insert, update } = useFieldArray({ control, name: "objectives" });
+  const watchedSubscr = useWatch({ control, name: "subscription" });
+  const defaultTierSlug = tierCategories.find((c) => c.is_default)?.slug || "free";
+
+  const handleObjectivePaste = (e, index) => {
+    const text = e.clipboardData.getData("text");
+    const lines = text.split(/\r\n|\r|\n/).map((l) => l.trim()).filter(Boolean);
+    if (lines.length <= 1) return;
+    e.preventDefault();
+    update(index, { value: lines[0] });
+    lines.slice(1).forEach((line, i) => {
+      insert(index + 1 + i, { value: line });
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="rounded-lg border bg-card p-6 space-y-5">
+        <div className="space-y-1.5">
+          <Label htmlFor="title">Title <span className="text-destructive">*</span></Label>
+          <Input id="title" placeholder="Lesson title" {...register("title")} />
+          <FieldError message={errors.title?.message} />
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="description">Description</Label>
+          <Textarea id="description" placeholder="Optional description" rows={3} {...register("description")} />
+        </div>
+
+        <div className="space-y-1.5 max-w-[120px]">
+          <Label htmlFor="order">Order</Label>
+          <Input id="order" type="number" min={0} {...register("order")} />
+        </div>
+
+        <div className="space-y-1.5">
+          <Label>Subscription</Label>
+          <Select
+            value={watchedSubscr || defaultTierSlug}
+            onValueChange={(val) => setValue("subscription", val, { shouldDirty: true })}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="No subscription gate" />
+            </SelectTrigger>
+            <SelectContent>
+              {tierCategories.map((c) => (
+                <SelectItem key={c.slug} value={c.slug}>
+                  {c.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <p className="text-xs text-muted-foreground">
+            Optional. Gates this lesson directly, independent of the unit it's attached to.
+          </p>
+        </div>
+      </div>
+
+      {/* Objectives */}
+      <div className="rounded-lg border bg-card p-6 space-y-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm font-medium">Objectives</p>
+            <p className="text-xs text-muted-foreground">What learners will achieve from this lesson.</p>
+          </div>
+          <Button type="button" variant="outline" size="sm" onClick={() => append({ value: "" })}>
+            <Plus className="h-4 w-4 mr-1" />
+            Add
+          </Button>
+        </div>
+
+        {fields.length === 0 && (
+          <p className="text-sm text-muted-foreground text-center py-4">
+            No objectives yet. Click Add to get started.
+          </p>
+        )}
+
+        <div className="space-y-3">
+          {fields.map((field, index) => (
+            <div key={field.id} className="flex items-start gap-2">
+              <div className="flex-1 space-y-1">
+                <Input
+                  placeholder={`Objective ${index + 1}`}
+                  {...register(`objectives.${index}.value`)}
+                  onPaste={(e) => handleObjectivePaste(e, index)}
+                />
+                <FieldError message={errors.objectives?.[index]?.value?.message} />
+              </div>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                onClick={() => remove(index)}
+                className="text-muted-foreground hover:text-destructive mt-0.5"
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Step 2 — Page Builder ──────────────────────────────────────────────────────
+function StepPageBuilder({ control, setValue, getValues }) {
+  const title = useWatch({ control, name: "title" });
+  const description = useWatch({ control, name: "description" });
+  const blocks = useWatch({ control, name: "blocks" }) ?? [];
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  const setBlocks = (updater) => {
+    const next = typeof updater === "function" ? updater(getValues("blocks") ?? []) : updater;
+    setValue("blocks", next, { shouldDirty: true });
+  };
+
+  const addBlock    = (type) => setBlocks((prev) => [...prev, makeBlock(type)]);
+  const updateBlock = (id, content) => setBlocks((prev) => prev.map((b) => (b.id === id ? { ...b, content } : b)));
+  const deleteBlock = (id) => setBlocks((prev) => prev.filter((b) => b.id !== id));
+  const moveBlock   = (id, direction) => setBlocks((prev) => {
+    const index = prev.findIndex((b) => b.id === id);
+    const swapIndex = direction === "up" ? index - 1 : index + 1;
+    if (swapIndex < 0 || swapIndex >= prev.length) return prev;
+    const next = [...prev];
+    [next[index], next[swapIndex]] = [next[swapIndex], next[index]];
+    return next;
+  });
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between border border-border rounded-lg p-4">
+        <div>
+          <p className="text-sm font-medium">{title || "Untitled lesson"}</p>
+          <p className="text-xs text-muted-foreground">
+            {blocks.length} block{blocks.length !== 1 ? "s" : ""}
+          </p>
+        </div>
+        <Button type="button" variant="outline" size="sm" onClick={() => setDrawerOpen(true)}>
+          <LayoutTemplate className="h-4 w-4 mr-1.5" />
+          Open Page Builder
+        </Button>
+      </div>
+
+      <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} shouldScaleBackground>
+        <DrawerContent className="data-[vaul-drawer-direction=bottom]:max-h-[90vh]">
+          <DrawerHeader className="border-b text-left">
+            <DrawerTitle>Page Builder</DrawerTitle>
+            <DrawerDescription>{title || "Untitled lesson"}</DrawerDescription>
+          </DrawerHeader>
+
+          <div className="flex-1 overflow-y-auto p-4">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+                  Editor
+                  {blocks.length > 0 && (
+                    <span className="text-xs font-normal">· {blocks.length} block{blocks.length !== 1 ? "s" : ""}</span>
+                  )}
+                </div>
+                <BlockList blocks={blocks} onUpdate={updateBlock} onMove={moveBlock} onDelete={deleteBlock} />
+                <AddBlockMenu onAdd={addBlock} />
+              </div>
+
+              <div className="space-y-3">
+                <div className="text-sm font-medium text-muted-foreground">Live Preview</div>
+                <PreviewChrome title={title}>
+                  <div className="p-6 space-y-5 min-h-[300px]">
+                    <PreviewContent
+                      lesson={{ title, description }}
+                      blocks={blocks}
+                      empty="Your content will appear here as you build."
+                    />
+                  </div>
+                </PreviewChrome>
+              </div>
+            </div>
+          </div>
+
+          <DrawerFooter className="border-t flex-row justify-end">
+            <DrawerClose asChild>
+              <Button type="button">Done</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  );
+}
+
+// ─── Main Page ──────────────────────────────────────────────────────────────────
+export default function AddLesson() {
+  const navigate = useNavigate();
+  const { courseId, unitId } = useParams();
+  const {
+    createLesson, saveLessonPage, fetchUnit, fetchCourse, unit, course, loading,
+    syncLessonRequirements,
+  } = useCourses();
+  const { user } = useAuth();
+
+  const [mode, setMode] = useState(null); // null | "create" — the wizard only shows once "Create" is chosen
+  const [step, setStep] = useState(0);
+  const [requirements, setRequirements] = useState([]);
+  const [attachOpen, setAttachOpen] = useState(false);
+
+  const [tierCategories, setTierCategories] = useState([]);
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => setTierCategories((data.data ?? []).filter((c) => c.is_active)))
+      .catch(() => {});
+  }, []);
+
+  const {
+    register, control, trigger, getValues, setValue,
+    formState: { errors, isDirty },
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { title: "", description: "", order: 0, subscription: "free", objectives: [], blocks: [] },
+    mode: "onTouched",
+  });
+
+  const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty || requirements.length > 0);
+
+  useEffect(() => {
+    fetchUnit(courseId, unitId);
+    if (!course || String(course.course_id) !== String(courseId)) {
+      fetchCourse(courseId);
+    }
+  }, [courseId, unitId]);
+
+  const handleNext = async () => {
+    const valid = await trigger(["title", "description", "order", "objectives"]);
+    if (valid) setStep((s) => Math.min(s + 1, 2));
+  };
+
+  const handleBack = () => {
+    if (step === 0) navigate(`/admin/courses/${courseId}/units/${unitId}/lessons`);
+    else setStep((s) => s - 1);
+  };
+
+  // The one and only persistence point — nothing is created until this final
+  // click at Requirements (the last step), which is purely a draft form
+  // until now. No <form> tag wraps the wizard, so this is invoked manually.
+  const handleCreate = async () => {
+    const valid = await trigger();
+    if (!valid) return;
+
+    const data = getValues();
+    const payload = {
+      title: data.title,
+      description: data.description || null,
+      order: data.order,
+      subscription: data.subscription || (tierCategories.find((c) => c.is_default)?.slug || "free"),
+      objectives: data.objectives?.map((o) => o.value) ?? [],
+      createdBy: user?.user_id,
+    };
+    const result = await createLesson(courseId, unitId, payload);
+    const newLessonId = result?.data?.data?.lesson_id;
+    if (!newLessonId) return;
+
+    if ((data.blocks ?? []).length > 0) {
+      await saveLessonPage(courseId, unitId, newLessonId, { blocks: data.blocks, updatedBy: user?.user_id });
+    }
+
+    if (requirements.length > 0) {
+      const clean = requirements.map(({ _key, ...r }) => r);
+      await syncLessonRequirements(courseId, unitId, newLessonId, clean);
+    }
+
+    bypassOnce();
+    navigate(`/admin/courses/${courseId}/units/${unitId}/lessons`);
+  };
+
+  const handleAttachLessons = async (lessonIds) => {
+    for (const lesson_id of lessonIds) {
+      await api.post(`/admin/courses/${courseId}/units/${unitId}/lessons`, { lesson_id });
+    }
+    bypassOnce();
+    navigate(`/admin/courses/${courseId}/units/${unitId}/lessons`);
+  };
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title={unit ? `Add Lesson – ${unit.title} - STARR` : undefined} />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-center px-4 py-10">
+
+        <div className="w-full max-w-3xl mx-auto space-y-6">
+          <div className="flex items-center gap-3">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              onClick={() => (mode === "create" && step > 0 ? setStep(0) : handleBack())}
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Create Lesson</h1>
+              <p className="text-sm text-muted-foreground">
+                Creates a new lesson in the shared Lessons Library and attaches it to
+                {unit ? ` "${unit.title}"` : " this unit"} — affiliated with
+                {course ? ` "${course.title}"` : " this course"}.
+              </p>
+            </div>
+          </div>
+
+          {/* Select existing vs. create new */}
+          <div className="flex items-start justify-between gap-3 pb-3 border-b border-border">
+            <p className="text-xs text-muted-foreground">
+              Attach an existing library lesson to reuse its content, or create a new one from scratch.
+            </p>
+            <div className="flex items-center gap-2 shrink-0">
+              <Button type="button" variant="outline" size="sm" onClick={() => setAttachOpen(true)}>
+                <Link2 className="h-3.5 w-3.5 mr-1.5" /> Select
+              </Button>
+              <Button type="button" variant="outline" size="sm" onClick={() => setMode("create")}>
+                <Plus className="h-3.5 w-3.5 mr-1.5" /> Create
+              </Button>
+            </div>
+          </div>
+
+          {mode === "create" && (
+            <>
+              {/* Stepper */}
+              <div className="flex items-center gap-0">
+                {STEPS.map((s, i) => {
+                  const Icon = s.icon;
+                  const isActive = step === i;
+                  const isDone = step > i;
+
+                  return (
+                    <div key={s.id} className="flex items-center flex-1 last:flex-none">
+                      <div className="flex flex-col items-center gap-1">
+                        <div className={cn(
+                          "h-8 w-8 rounded-full flex items-center justify-center border transition-colors",
+                          isDone   && "bg-emerald-600 border-emerald-600 text-white",
+                          isActive && "border-primary bg-primary text-primary-foreground",
+                          !isActive && !isDone && "border-border bg-background text-muted-foreground"
+                        )}>
+                          {isDone ? <Check className="h-4 w-4" /> : <Icon className="h-4 w-4" />}
+                        </div>
+                        <span className={cn(
+                          "text-[11px] font-medium whitespace-nowrap hidden sm:block",
+                          isActive ? "text-foreground"  : "text-muted-foreground",
+                          isDone   ? "text-emerald-600" : ""
+                        )}>
+                          {s.label}
+                        </span>
+                      </div>
+                      {i < STEPS.length - 1 && (
+                        <div className={cn(
+                          "flex-1 h-px mx-2 mb-4 transition-colors",
+                          step > i ? "bg-emerald-600" : "bg-border"
+                        )} />
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* Step content */}
+              <div>
+                {step === 0 && (
+                  <StepDetails register={register} errors={errors} control={control} setValue={setValue} tierCategories={tierCategories} />
+                )}
+
+                {step === 1 && (
+                  <StepPageBuilder control={control} setValue={setValue} getValues={getValues} />
+                )}
+
+                {step === 2 && (
+                  <div className="rounded-lg border bg-card p-6 space-y-4">
+                    <p className="text-sm text-muted-foreground">
+                      Configure how learners complete this lesson — optional, sensible defaults apply automatically. This is created together with the rest of the lesson when you finish.
+                    </p>
+                    <DraftRequirementsEditor
+                      entityType="lesson"
+                      items={requirements}
+                      onChange={setRequirements}
+                      blockTypes={(getValues("blocks") ?? []).map((b) => b.type)}
+                    />
+                  </div>
+                )}
+              </div>
+
+              <div className="flex justify-between gap-3">
+                <Button type="button" variant="outline" onClick={handleBack} disabled={loading}>
+                  <ChevronLeft className="h-4 w-4 mr-1" />
+                  {step === 0 ? "Cancel" : "Back"}
+                </Button>
+
+                {step < 2 ? (
+                  <Button type="button" onClick={handleNext}>
+                    Next
+                    <ChevronRight className="h-4 w-4 ml-1" />
+                  </Button>
+                ) : (
+                  // Only the true final step (Requirements) actually persists
+                  // anything — the lesson, its page content, and any draft
+                  // requirements are all created together in one shot here.
+                  <Button type="button" onClick={handleCreate} disabled={loading}>
+                    {loading && <Spinner className="h-4 w-4 mr-2" />}
+                    Create Lesson
+                  </Button>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {unsavedChangesDialog}
+
+      <AttachLessonsDialog
+        open={attachOpen}
+        onOpenChange={setAttachOpen}
+        attachedLessonIds={unit?.lessons?.map((l) => l.lesson_id) ?? []}
+        onAttach={handleAttachLessons}
+        loading={loading}
+      />
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/courses/lessons/ArchivedLessonsList.jsx b/apps/web/src/modules/admin/pages/courses/lessons/ArchivedLessonsList.jsx
new file mode 100644
index 0000000..bf5a8cb
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/courses/lessons/ArchivedLessonsList.jsx
@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, House } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import ArchivedLessonsTable from "../../../components/courses/ArchivedLessonsTable";
+
+export default function ArchivedLessonsList() {
+  const navigate = useNavigate();
+  const { courseId, unitId } = useParams();
+  const { fetchCourse, fetchUnit, course, unit, loading } = useCourses();
+  const [initializing, setInitializing] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      await fetchCourse(courseId)
+      await fetchUnit(courseId, unitId);
+      setInitializing(false);
+    })();
+  }, [courseId, unitId]);
+
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Courses", to: "/admin/courses" },
+    { label: course?.title, to: `/admin/courses/${courseId}/units` },
+    { label: unit?.title ?? "...", to: `/admin/courses/${courseId}/units/${unitId}/lessons` },
+    { label: "Archived" }
+  ];
+
+  // Replace the loading check
+  if (initializing) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <Spinner className="h-6 w-6" />
+      </div>
+    );
+  }
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title={unit ? `Archived Lessons – ${unit.title} - STARR` : undefined} />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full space-y-6">
+
+          {/* ── Lessons ── */}
+          <ArchivedLessonsTable courseId={courseId} unitId={unitId} />
+
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/courses/lessons/EditLesson.jsx b/apps/web/src/modules/admin/pages/courses/lessons/EditLesson.jsx
new file mode 100644
index 0000000..a236460
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/courses/lessons/EditLesson.jsx
@@ -0,0 +1,254 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useForm, useFieldArray, useWatch } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft, House, Plus, Trash2 } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import api from "@/utils/api.util";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+import CompletionRequirementBuilder from "@/modules/admin/components/courses/CompletionRequirementBuilder";
+
+const schema = z.object({
+  title: z.string().min(1, "Title is required."),
+  description: z.string().optional(),
+  order: z.coerce.number().min(0).default(0),
+  subscription: z.string().optional(),
+  objectives: z.array(
+    z.object({ value: z.string().min(1, "Objective cannot be empty.") })
+  ).optional(),
+});
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+export default function EditLesson() {
+  const navigate = useNavigate();
+  const { courseId, unitId, lessonId } = useParams();
+  const { fetchLesson, updateLesson, fetchCourse, fetchUnit, course, unit, loading, fetchLessonRequirements, syncLessonRequirements } = useCourses();
+  const { user } = useAuth();
+  const [lessonTitle, setLessonTitle] = useState("");
+
+  const [tierCategories, setTierCategories] = useState([]);
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => setTierCategories((data.data ?? []).filter((c) => c.is_active)))
+      .catch(() => {});
+  }, []);
+
+  const { register, handleSubmit, reset, control, setValue, formState: { errors, isDirty } } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { title: "", description: "", order: 0, subscription: "free", objectives: [] },
+  });
+
+  const watchedSubscr = useWatch({ control, name: "subscription" });
+  const defaultTierSlug = tierCategories.find((c) => c.is_default)?.slug || "free";
+
+  const { fields, append, remove, insert, update } = useFieldArray({ control, name: "objectives" });
+
+  const handleObjectivePaste = (e, index) => {
+    const text = e.clipboardData.getData("text");
+    const lines = text.split(/\r\n|\r|\n/).map((l) => l.trim()).filter(Boolean);
+    if (lines.length <= 1) return;
+    e.preventDefault();
+    update(index, { value: lines[0] });
+    lines.slice(1).forEach((line, i) => {
+      insert(index + 1 + i, { value: line });
+    });
+  };
+
+  const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty);
+
+  useEffect(() => {
+    (async () => {
+      const res = await fetchLesson(courseId, unitId, lessonId);
+      const lesson = res?.data?.data ?? null;
+      if (!lesson) return;
+      setLessonTitle(lesson.title ?? "");
+      reset({
+        title: lesson.title ?? "",
+        description: lesson.description ?? "",
+        order: lesson.order ?? 0,
+        subscription: lesson.subscription || defaultTierSlug,
+        objectives: lesson.objectives?.map((v) => ({ value: v.text })) ?? [],
+      });
+    })();
+    fetchUnit(courseId, unitId);
+    if (!course || String(course.course_id) !== String(courseId)) {
+      fetchCourse(courseId);
+    }
+  }, [courseId, unitId, lessonId]);
+
+  const onSubmit = async (data) => {
+    if (!isDirty) { bypassOnce(); return navigate(`/admin/courses/${courseId}/units/${unitId}/lessons/${lessonId}/view`); }
+    const result = await updateLesson(courseId, unitId, lessonId, {
+      ...data,
+      subscription: data.subscription || defaultTierSlug,
+      objectives: data.objectives?.map((o, i) => ({
+        objective_id: o.objective_id ?? null,
+        text: o.value,
+        order_index: i,
+      })) ?? [],
+      updatedBy: user?.user_id,
+    });
+    if (!result) return;
+    bypassOnce();
+    navigate(`/admin/courses/${courseId}/units/${unitId}/lessons/${lessonId}/view`);
+  };
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title={lessonTitle ? `Edit: ${lessonTitle} - STARR` : undefined} />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-center px-4 py-10">
+
+        <div className="w-full max-w-2xl">
+          <div className="flex items-center gap-3 mb-6">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate(`/admin/courses/${courseId}/units/${unitId}/lessons/${lessonId}/view`)}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Edit Lesson</h1>
+              <p className="text-sm text-muted-foreground">
+                Lessons live in the shared Library — changes here apply everywhere this
+                lesson is used, not just{unit ? ` "${unit.title}"` : " this unit"}
+                {course ? ` (${course.title})` : ""}.
+              </p>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <div className="rounded-lg border bg-card p-6 space-y-5">
+
+              <div className="space-y-1.5">
+                <Label htmlFor="title">Title <span className="text-destructive">*</span></Label>
+                <Input id="title" placeholder="Lesson title" {...register("title")} />
+                <FieldError message={errors.title?.message} />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="description">Description</Label>
+                <Textarea id="description" placeholder="Optional description" rows={3} {...register("description")} />
+              </div>
+
+              <div className="space-y-1.5 max-w-[120px]">
+                <Label htmlFor="order">Order</Label>
+                <Input id="order" type="number" min={0} {...register("order")} />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label>Subscription</Label>
+                <Select
+                  value={watchedSubscr || defaultTierSlug}
+                  onValueChange={(val) => setValue("subscription", val, { shouldDirty: true })}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="No subscription gate" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {tierCategories.map((c) => (
+                      <SelectItem key={c.slug} value={c.slug}>
+                        {c.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <p className="text-xs text-muted-foreground">
+                  Optional. Gates this lesson directly, independent of the unit it's attached to.
+                </p>
+              </div>
+
+            </div>
+
+            {/* Objectives */}
+            <div className="rounded-lg border bg-card p-6 space-y-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium">Objectives</p>
+                  <p className="text-xs text-muted-foreground">What learners will achieve from this lesson.</p>
+                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => append({ value: "" })}
+                >
+                  <Plus className="h-4 w-4 mr-1" />
+                  Add
+                </Button>
+              </div>
+
+              {fields.length === 0 && (
+                <p className="text-sm text-muted-foreground text-center py-4">
+                  No objectives yet. Click Add to get started.
+                </p>
+              )}
+
+              <div className="space-y-3">
+                {fields.map((field, index) => (
+                  <div key={field.id} className="flex items-start gap-2">
+                    <div className="flex-1 space-y-1">
+                      <Input
+                        placeholder={`Objective ${index + 1}`}
+                        {...register(`objectives.${index}.value`)}
+                        onPaste={(e) => handleObjectivePaste(e, index)}
+                      />
+                      <FieldError message={errors.objectives?.[index]?.value?.message} />
+                    </div>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => remove(index)}
+                      className="text-muted-foreground hover:text-destructive mt-0.5"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-3">
+              <Button type="button" variant="outline" onClick={() => navigate(`/admin/courses/${courseId}/units/${unitId}/lessons/${lessonId}/view`)} disabled={loading}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={loading || !isDirty}>
+                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                Save Changes
+              </Button>
+            </div>
+          </form>
+
+          <div className="rounded-lg border bg-card p-6 space-y-4 mt-6">
+            <div>
+              <h2 className="text-sm font-semibold">Completion Requirements</h2>
+              <p className="text-xs text-muted-foreground">What a learner must do for this lesson to count as complete.</p>
+            </div>
+            <CompletionRequirementBuilder
+              entityType="lesson"
+              fetchFn={fetchLessonRequirements}
+              syncFn={syncLessonRequirements}
+              args={[courseId, unitId, lessonId]}
+            />
+          </div>
+        </div>
+      </div>
+
+      {unsavedChangesDialog}
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/courses/lessons/LessonPageBuilder.jsx b/apps/web/src/modules/admin/pages/courses/lessons/LessonPageBuilder.jsx
new file mode 100644
index 0000000..cfaaf0d
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/courses/lessons/LessonPageBuilder.jsx
@@ -0,0 +1,265 @@
+// pages/admin/LessonPageBuilder.jsx
+
+import { useEffect, useRef, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, Save, Pencil, Monitor, Eye, EyeOff, X } from "lucide-react";
+import { nanoid } from "nanoid";
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { BlockList, DEFAULT_CONTENT } from "@/components/generic/BlockList";
+import { AddBlockMenu } from "@/components/generic/AddBlockMenu";
+import { cn } from "@/lib/utils";
+import { PreviewContent, PreviewChrome } from "../../../components/courses/LessonsPreview";
+
+function makeBlock(type) {
+  return {
+    id: nanoid(),
+    type,
+    content: { ...DEFAULT_CONTENT[type] },
+  };
+}
+
+export default function LessonPageBuilder() {
+  const navigate = useNavigate();
+  const { courseId, unitId, lessonId } = useParams();
+  const { fetchLesson, saveLessonPage, course, unit, lesson, lessonPage, loading } = useCourses();
+  const { user } = useAuth();
+
+  // Junction revamp — this builder runs course-scoped AND from the standalone
+  // Lesson Library (/admin/lessons/:lessonId/page, no :courseId/:unitId params).
+  const pageViewPath = unitId
+    ? `/admin/courses/${courseId}/units/${unitId}/lessons/${lessonId}/page/view`
+    : `/admin/lessons/${lessonId}/page/view`;
+
+  const [blocks, setBlocks] = useState([]);
+  const [initializing, setInitializing] = useState(true);
+  const [previewVisible, setPreviewVisible] = useState(true);
+  const [previewOpen, setPreviewOpen] = useState(false);
+
+  const headerRef = useRef(null);
+  const editorPaneRef = useRef(null);
+  const blocksSeeded = useRef(false);
+
+  useEffect(() => {
+    // The builder stays mounted across lesson navigations (route param change
+    // only), so local editor state must be reset by hand here — otherwise the
+    // previous lesson's blocks leak into the next lesson's editor.
+    (async () => {
+      setInitializing(true);
+      setBlocks([]);
+      blocksSeeded.current = false;
+      await fetchLesson(courseId, unitId, lessonId);
+      setInitializing(false);
+    })();
+  }, [courseId, unitId, lessonId]);
+
+  useEffect(() => {
+    if (lessonPage?.blocks?.length && !blocksSeeded.current) {
+      setBlocks(lessonPage.blocks);
+      blocksSeeded.current = true;
+    }
+  }, [lessonPage]);
+
+  useEffect(() => {
+    if (!headerRef.current) return;
+    const update = () => {
+      document.documentElement.style.setProperty(
+        "--builder-h",
+        `${headerRef.current.offsetHeight}px`
+      );
+    };
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+
+  useEffect(() => {
+    const el = editorPaneRef.current;
+    if (!el) return;
+    const applyHeight = () => {
+      if (window.innerWidth >= 1024 && previewVisible) {
+        el.style.height = `calc(100vh - var(--navbar-h) - var(--builder-h, 0px))`;
+      } else {
+        el.style.height = "auto";
+      }
+    };
+    applyHeight();
+    window.addEventListener("resize", applyHeight);
+    return () => window.removeEventListener("resize", applyHeight);
+  }, [previewVisible]);
+
+  const addBlock    = (type) => setBlocks((prev) => [...prev, makeBlock(type)]);
+  const updateBlock = (id, content) => setBlocks((prev) => prev.map((b) => b.id === id ? { ...b, content } : b));
+  const deleteBlock = (id) => setBlocks((prev) => prev.filter((b) => b.id !== id));
+  const moveBlock   = (id, direction) => {
+    setBlocks((prev) => {
+      const index = prev.findIndex((b) => b.id === id);
+      const swapIndex = direction === "up" ? index - 1 : index + 1;
+      if (swapIndex < 0 || swapIndex >= prev.length) return prev;
+      const next = [...prev];
+      [next[index], next[swapIndex]] = [next[swapIndex], next[index]];
+      return next;
+    });
+  };
+
+  const handleSave = async () => {
+    const result = await saveLessonPage(courseId, unitId, lessonId, {
+      blocks,
+      updatedBy: user?.user_id,
+    });
+    if (!result) return;
+    navigate(pageViewPath);
+  };
+
+  const editorStyle = previewVisible
+    ? { top: "calc(var(--navbar-h) + var(--builder-h, 0px))" }
+    : undefined;
+
+  return (
+    <div className="flex flex-col min-h-screen bg-muted/60">
+      <PageMeta title={lesson ? `Page Builder – ${lesson.title} - STARR` : undefined} />
+
+      {/* ── Sticky builder header ── */}
+      <div
+        ref={headerRef}
+        className="sticky z-20 shrink-0 border-b bg-white/70 dark:bg-zinc-900/70 backdrop-blur-md"
+        style={{ top: "var(--navbar-h)" }}
+      >
+        <div className="lg:container lg:mx-auto lg:px-6 px-4">
+          <div className="flex items-center gap-3 py-3">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div className="flex-1 min-w-0">
+              <h1 className="text-xl font-semibold leading-tight">Page Builder</h1>
+              <p className="text-sm text-muted-foreground truncate">{lesson?.title}</p>
+            </div>
+            <div className="flex items-center gap-2 shrink-0">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setPreviewVisible((v) => !v)}
+                className="hidden lg:inline-flex gap-2"
+              >
+                {previewVisible
+                  ? <><EyeOff className="h-4 w-4" /> Hide Preview</>
+                  : <><Eye    className="h-4 w-4" /> Show Preview</>
+                }
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setPreviewOpen(true)}
+                className="lg:hidden gap-2"
+              >
+                <Eye className="h-4 w-4" />
+                Preview
+              </Button>
+              <Button type="button" variant="outline" onClick={() => navigate(-1)} disabled={loading}>
+                Cancel
+              </Button>
+              <Button onClick={handleSave} disabled={loading}>
+                {loading ? <Spinner className="h-4 w-4 mr-2" /> : <Save className="h-4 w-4 mr-2" />}
+                Save Page
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ── Split pane ── */}
+      <div className="flex flex-1 lg:container lg:mx-auto lg:px-6 px-0 w-full items-start">
+
+        {/* LEFT — Editor */}
+        <div
+          className={cn(
+            "w-full border-r",
+            previewVisible ? "lg:w-[40%] lg:shrink-0 lg:sticky" : "lg:w-full"
+          )}
+          style={editorStyle}
+        >
+          <div
+            className={cn(
+              "flex flex-col gap-3 p-4 pb-10",
+              previewVisible && "lg:overflow-y-auto"
+            )}
+            ref={editorPaneRef}
+          >
+            <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground pt-1">
+              <Pencil className="h-4 w-4" />
+              Editor
+              {blocks.length > 0 && (
+                <span className="text-xs font-normal">
+                  · {blocks.length} block{blocks.length !== 1 ? "s" : ""}
+                </span>
+              )}
+            </div>
+            {initializing ? (
+              <div className="flex items-center justify-center py-20">
+                <Spinner className="h-6 w-6" />
+              </div>
+            ) : (
+              <>
+                <BlockList blocks={blocks} onUpdate={updateBlock} onMove={moveBlock} onDelete={deleteBlock} />
+                <AddBlockMenu onAdd={addBlock} />
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* RIGHT — Live Preview (desktop only) */}
+        {previewVisible && (
+          <div className="hidden lg:flex flex-1 flex-col gap-3 p-4 pb-10">
+            <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground pt-1">
+              <Monitor className="h-4 w-4" />
+              Live Preview
+            </div>
+            <PreviewChrome title={lesson?.title}>
+              <div className="p-6 space-y-5 min-h-[300px]">
+                <PreviewContent
+                  lesson={lesson}
+                  blocks={blocks}
+                  empty="Your content will appear here as you build."
+                />
+              </div>
+            </PreviewChrome>
+          </div>
+        )}
+
+      </div>
+
+      {/* ── Mobile preview bottom sheet ── */}
+      {previewOpen && (
+        <div className="lg:hidden fixed inset-0 z-40 flex flex-col">
+          <div className="flex-1 bg-black/50" onClick={() => setPreviewOpen(false)} />
+          <div className="bg-background rounded-t-2xl border-t shadow-xl flex flex-col max-h-[85dvh]">
+            <div className="flex items-center justify-between px-4 pt-4 pb-3 border-b shrink-0">
+              <div className="flex items-center gap-2 text-sm font-medium">
+                <Monitor className="h-4 w-4 text-muted-foreground" />
+                Live Preview
+              </div>
+              <Button type="button" variant="ghost" size="icon" onClick={() => setPreviewOpen(false)}>
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+            <div className="overflow-y-auto flex-1 p-4">
+              <PreviewChrome title={lesson?.title}>
+                <div className="p-4 space-y-4 min-h-[200px]">
+                  <PreviewContent
+                    lesson={lesson}
+                    blocks={blocks}
+                    empty="No content yet."
+                  />
+                </div>
+              </PreviewChrome>
+            </div>
+          </div>
+        </div>
+      )}
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/courses/lessons/LessonsList.jsx b/apps/web/src/modules/admin/pages/courses/lessons/LessonsList.jsx
new file mode 100644
index 0000000..61d8173
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/courses/lessons/LessonsList.jsx
@@ -0,0 +1,110 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, House } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { PageMeta } from "@/contexts/MetadataContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import LessonsTable from "../../../components/courses/LessonsTable";
+
+export default function LessonsList() {
+  const navigate = useNavigate();
+  const { courseId, unitId } = useParams();
+  const { fetchCourse, fetchUnit, course, unit, loading } = useCourses();
+  const { fmtDate } = useDateFormat();
+  const [initializing, setInitializing] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      if (!course || String(course.course_id) !== String(courseId)) {
+        await fetchCourse(courseId);
+      }
+      await fetchUnit(courseId, unitId);
+      setInitializing(false);
+    })();
+  }, [courseId, unitId]);
+
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Courses", to: "/admin/courses" },
+    { label: course?.title, to: `/admin/courses/${courseId}/units` },
+    { label: unit?.title ?? "..." },
+  ];
+
+  // Replace the loading check
+  if (initializing) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <Spinner className="h-6 w-6" />
+      </div>
+    );
+  }
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title={unit ? `Lessons – ${unit.title} - STARR` : undefined} />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full space-y-6">
+
+          {/* ── Unit header ── */}
+          <div className="bg-card rounded-xl border p-6 space-y-4">
+            {/* Title + Status */}
+            <div>
+              <h6 className="text-xs tracking-widest mb-1">UNIT</h6>
+              <div className="flex items-center gap-2">
+                <h1 className="text-xl font-semibold">{unit?.title}</h1>
+                <span
+                  className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${!unit?.deletedBy ? "bg-green-100 text-green-700" : "bg-red-100 text-red-600"
+                    }`}
+                >
+                  {!unit?.deletedBy ? "Active" : "Inactive"}
+                </span>
+              </div>
+              {unit?.description && (
+                <p className="text-sm text-muted-foreground mt-0.5">{unit.description}</p>
+              )}
+              <p className="text-xs text-muted-foreground mt-1.5">
+                Affiliated with course: <span className="font-medium text-foreground">{course?.title ?? "—"}</span>
+              </p>
+            </div>
+
+            {/* Stats row */}
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Lessons</p>
+                <p className="font-semibold text-sm">{unit?.lessons?.length}</p>
+              </div>
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Order</p>
+                <p className="font-semibold text-sm">{unit?.order_index}</p>
+              </div>
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Created</p>
+                <p className="font-semibold text-sm">
+                  {unit?.createdAt ? fmtDate(unit.createdAt) : '—'}
+                </p>
+              </div>
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Last Updated</p>
+                <p className="font-semibold text-sm">
+                  {unit?.updatedAt ? fmtDate(unit.updatedAt) : '—'}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* ── Lessons ── */}
+          <LessonsTable courseId={courseId} unitId={unitId} />
+
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/courses/lessons/ViewLesson.jsx b/apps/web/src/modules/admin/pages/courses/lessons/ViewLesson.jsx
new file mode 100644
index 0000000..c29ff15
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/courses/lessons/ViewLesson.jsx
@@ -0,0 +1,226 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  Pencil, ArrowLeft, Clock, ListChecks, Info, FileText, SquarePlus, SquareChartGantt,
+} from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { PageMeta } from "@/contexts/MetadataContext";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Spinner } from "@/components/ui/spinner";
+
+function InfoField({ label, value }) {
+  return (
+    <div className="space-y-1">
+      <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">{label}</p>
+      <p className="text-sm font-medium">{value ?? "—"}</p>
+    </div>
+  );
+}
+
+// ─── Tabs ─────────────────────────────────────────────────────────────────────
+
+const TABS = [
+  { key: "details", label: "Lesson Details", icon: Info },
+  { key: "content",  label: "Content",        icon: FileText },
+];
+
+// ─── Details tab ──────────────────────────────────────────────────────────────
+
+function LessonDetailsTab({ lesson, fmtDate }) {
+  return (
+    <div className="space-y-6">
+      {/* Stats row */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+        <div className="bg-card rounded-lg border p-3 space-y-1">
+          <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Order</p>
+          <p className="font-semibold text-sm">#{lesson?.order_index ?? 0}</p>
+        </div>
+        <div className="bg-card rounded-lg border p-3 space-y-1">
+          <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium flex items-center gap-1">
+            <Clock className="h-3 w-3" /> Duration
+          </p>
+          <p className="font-semibold text-sm">{lesson?.duration_formatted ?? "0 mins"}</p>
+        </div>
+        <div className="bg-card rounded-lg border p-3 space-y-1">
+          <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Created</p>
+          <p className="font-semibold text-sm">{fmtDate(lesson?.createdAt)}</p>
+        </div>
+        <div className="bg-card rounded-lg border p-3 space-y-1">
+          <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Last Updated</p>
+          <p className="font-semibold text-sm">{fmtDate(lesson?.updatedAt)}</p>
+        </div>
+      </div>
+
+      {/* Details */}
+      <div className="rounded-lg border bg-card p-6 space-y-5">
+        <InfoField label="Title" value={lesson?.title} />
+        <InfoField label="Description" value={lesson?.description || "No description provided."} />
+        <InfoField label="Unit" value={lesson?.unit?.title} />
+      </div>
+
+      {/* Objectives */}
+      <div className="rounded-lg border bg-card p-6 space-y-4">
+        <div className="flex items-center gap-2">
+          <ListChecks className="h-4 w-4 text-muted-foreground" />
+          <p className="text-sm font-medium">Objectives</p>
+          <Badge variant="secondary" className="ml-auto">{lesson?.objectives?.length ?? 0}</Badge>
+        </div>
+
+        {lesson?.objectives?.length === 0 || !lesson?.objectives ? (
+          <p className="text-sm text-muted-foreground text-center py-4">No objectives defined.</p>
+        ) : (
+          <ul className="space-y-2">
+            {lesson.objectives.map((obj, i) => (
+              <li key={obj.objective_id} className="flex items-start gap-3 text-sm">
+                <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-medium">
+                  {i + 1}
+                </span>
+                <span>{obj.text}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── Content tab ──────────────────────────────────────────────────────────────
+
+function LessonContentTab({ lesson, courseId, unitId, lessonId }) {
+  const navigate = useNavigate();
+  const hasContent = !!lesson?.duration_seconds;
+
+  if (!hasContent) {
+    return (
+      <div className="rounded-lg border border-dashed bg-card p-12 flex flex-col items-center gap-3 text-center">
+        <FileText className="h-8 w-8 text-muted-foreground/40" />
+        <p className="text-sm text-muted-foreground">No content has been created for this lesson yet.</p>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => navigate(`/admin/courses/${courseId}/units/${unitId}/lessons/${lessonId}/page`)}
+        >
+          <SquarePlus className="h-4 w-4 mr-2" />
+          Create Content
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-lg border bg-card p-6 space-y-4">
+      <div className="flex items-center justify-between gap-4 flex-wrap">
+        <div>
+          <p className="text-sm font-medium">{lesson.title}</p>
+          <p className="text-xs text-muted-foreground">{lesson.duration_formatted ?? "0 mins"} of content</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => navigate(`/admin/courses/${courseId}/units/${unitId}/lessons/${lessonId}/page/view`)}
+          >
+            <SquareChartGantt className="h-4 w-4 mr-2" />
+            View Content
+          </Button>
+          <Button
+            size="sm"
+            onClick={() => navigate(`/admin/courses/${courseId}/units/${unitId}/lessons/${lessonId}/page`)}
+          >
+            <SquarePlus className="h-4 w-4 mr-2" />
+            Modify Content
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function ViewLesson() {
+  const navigate = useNavigate();
+  const { courseId, unitId, lessonId } = useParams();
+  const { fetchLesson } = useCourses();
+  const { fmtDate } = useDateFormat();
+  const [lesson, setLesson] = useState(null);
+  const [initializing, setInitializing] = useState(true);
+  const [activeTab, setActiveTab] = useState("details");
+
+  useEffect(() => {
+    (async () => {
+      const res = await fetchLesson(courseId, unitId, lessonId);
+      setLesson(res?.data?.data ?? null);
+      setInitializing(false);
+    })();
+  }, [courseId, unitId, lessonId]);
+
+  if (initializing) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <Spinner className="h-6 w-6" />
+      </div>
+    );
+  }
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title={lesson ? `${lesson.title} - STARR` : undefined} />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-center px-4 py-10">
+        <div className="w-full max-w-2xl space-y-6">
+
+          {/* Header */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Button type="button" variant="ghost" size="icon" onClick={() => navigate(`/admin/courses/${courseId}/units/${unitId}/lessons`)}>
+                <ArrowLeft className="h-4 w-4" />
+              </Button>
+              <div>
+                <h1 className="text-xl font-semibold">{lesson?.title}</h1>
+                <p className="text-sm text-muted-foreground">Lesson details.</p>
+              </div>
+            </div>
+            {activeTab === "details" && (
+              <Button
+                type="button"
+                onClick={() => navigate(`/admin/courses/${courseId}/units/${unitId}/lessons/${lessonId}/edit`)}
+              >
+                <Pencil className="h-4 w-4 mr-2" />
+                Edit
+              </Button>
+            )}
+          </div>
+
+          {/* Tabs */}
+          <div className="flex gap-1 pb-0 -mb-px border-b">
+            {TABS.map(({ key, label, icon: Icon }) => (
+              <button
+                key={key}
+                onClick={() => setActiveTab(key)}
+                className={[
+                  "flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors",
+                  activeTab === key
+                    ? "border-primary text-primary"
+                    : "border-transparent text-muted-foreground hover:text-foreground",
+                ].join(" ")}
+              >
+                <Icon className="h-3.5 w-3.5" />
+                {label}
+              </button>
+            ))}
+          </div>
+
+          {activeTab === "details" && <LessonDetailsTab lesson={lesson} fmtDate={fmtDate} />}
+          {activeTab === "content" && (
+            <LessonContentTab lesson={lesson} courseId={courseId} unitId={unitId} lessonId={lessonId} />
+          )}
+
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/courses/lessons/ViewLessonPage.jsx b/apps/web/src/modules/admin/pages/courses/lessons/ViewLessonPage.jsx
new file mode 100644
index 0000000..cc5b1a2
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/courses/lessons/ViewLessonPage.jsx
@@ -0,0 +1,96 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { PreviewContent, PreviewChrome } from "../../../components/courses/LessonsPreview";
+
+export default function ViewLessonPage() {
+  const navigate = useNavigate();
+  const { courseId, unitId, lessonId } = useParams();
+
+  // Junction revamp — runs course-scoped AND from the standalone Lesson Library.
+  const builderPath = unitId
+    ? `/admin/courses/${courseId}/units/${unitId}/lessons/${lessonId}/page`
+    : `/admin/lessons/${lessonId}/page`;
+  const { fetchLesson, lesson, lessonPage } = useCourses();
+  const [initializing, setInitializing] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      await fetchLesson(courseId, unitId, lessonId);
+      setInitializing(false);
+    })();
+  }, [courseId, unitId, lessonId]);
+
+  const blocks = lessonPage?.blocks ?? [];
+
+  return (
+    <div className="flex flex-col min-h-screen bg-muted/60">
+      <PageMeta title={lesson ? `${lesson.title} – Page - STARR` : undefined} />
+
+      {/* Sticky header */}
+      <div
+        className="sticky z-20 shrink-0 border-b bg-white/70 dark:bg-zinc-900/70 backdrop-blur-md"
+        style={{ top: "var(--navbar-h)" }}
+      >
+        <div className="lg:container lg:mx-auto lg:px-6 px-4">
+          <div className="flex items-center gap-3 py-3">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div className="flex-1 min-w-0">
+              <h1 className="text-xl font-semibold leading-tight">Page Preview</h1>
+              <p className="text-sm text-muted-foreground truncate">{lesson?.title}</p>
+            </div>
+            <Button
+              type="button"
+              onClick={() => navigate(builderPath)}
+            >
+              Edit Page
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="lg:container lg:mx-auto lg:px-6 px-4 py-8">
+        <div className="max-w-6xl mx-auto">
+          <PreviewChrome title={lesson?.title}>
+            <div className="p-8 space-y-6 min-h-[400px]">
+              {initializing ? (
+                <div className="flex items-center justify-center py-20">
+                  <Spinner className="h-6 w-6" />
+                </div>
+              ) : (
+                <>
+                  <PreviewContent
+                    lesson={lesson}
+                    blocks={blocks}
+                    empty="No content blocks yet."
+                  />
+                  {blocks.length === 0 && (
+                    <div className="flex justify-center pt-2">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => navigate(builderPath)}
+                      >
+                        Go to Page Builder
+                      </Button>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          </PreviewChrome>
+        </div>
+      </div>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/courses/units/AddUnit.jsx b/apps/web/src/modules/admin/pages/courses/units/AddUnit.jsx
new file mode 100644
index 0000000..5c651be
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/courses/units/AddUnit.jsx
@@ -0,0 +1,277 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams, useLocation } from "react-router-dom";
+import { useForm, useWatch } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ChevronLeft, ChevronRight, Check, FileText, ListChecks, Link2, Plus } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import { cn } from "@/lib/utils";
+import api from "@/utils/api.util";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+import DraftRequirementsEditor from "@/modules/admin/components/courses/DraftRequirementsEditor";
+import AttachUnitsDialog from "@/modules/admin/components/library/AttachUnitsDialog";
+
+const schema = z.object({
+  title: z.string().min(1, "Title is required."),
+  description: z.string().optional(),
+  order: z.coerce.number().min(0).default(0),
+  subscription: z.string().optional(),
+});
+
+const STEPS = [
+  { id: 0, label: "Details", icon: FileText },
+  { id: 1, label: "Completion Requirements", icon: ListChecks },
+];
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+export default function AddUnit() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { courseId } = useParams();
+  const { createUnit, fetchCourse, course, loading, syncUnitRequirements } = useCourses();
+  const { user } = useAuth();
+
+  const backTarget = location.state?.returnTo ?? `/admin/courses/${courseId}/units`;
+
+  const [mode, setMode] = useState(null); // null | "create" — the Details/Requirements form only shows once "Create" is chosen
+  const [step, setStep] = useState(0);
+  const [requirements, setRequirements] = useState([]);
+  const [attachOpen, setAttachOpen] = useState(false);
+
+  const [tierCategories, setTierCategories] = useState([]);
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => setTierCategories((data.data ?? []).filter((c) => c.is_active)))
+      .catch(() => {});
+  }, []);
+
+  const { register, trigger, getValues, control, setValue, formState: { errors, isDirty } } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { title: "", description: "", order: 0, subscription: "free" },
+  });
+
+  const watchedSubscr = useWatch({ control, name: "subscription" });
+  const defaultTierSlug = tierCategories.find((c) => c.is_default)?.slug || "free";
+
+  const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty || requirements.length > 0);
+
+  useEffect(() => {
+    fetchCourse(courseId);
+  }, [courseId]);
+
+  const handleNext = async () => {
+    const valid = await trigger();
+    if (valid) setStep(1);
+  };
+
+  // The one and only persistence point — nothing is created until this final
+  // click at Requirements (the last step), which is purely a draft form
+  // until now.
+  const handleCreate = async () => {
+    const values = getValues();
+    const result = await createUnit(courseId, { ...values, subscription: values.subscription || defaultTierSlug, createdBy: user?.user_id });
+    const newUnitId = result?.data?.data?.unit_id;
+    if (!newUnitId) return;
+
+    if (requirements.length > 0) {
+      const clean = requirements.map(({ _key, ...r }) => r);
+      await syncUnitRequirements(courseId, newUnitId, clean);
+    }
+
+    bypassOnce();
+    navigate(backTarget);
+  };
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title={course ? `Add Unit – ${course.title} - STARR` : undefined} />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-center px-4 py-10">
+
+        <div className="w-full max-w-2xl mx-auto space-y-6">
+          <div className="flex items-center gap-3">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              onClick={() => (mode === "create" && step > 0 ? setStep(0) : navigate(backTarget))}
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Create Unit</h1>
+              <p className="text-sm text-muted-foreground">
+                Creates a new unit in the shared Units Library and attaches it to this course.
+              </p>
+            </div>
+          </div>
+
+          {/* Select existing vs. create new */}
+          <div className="flex items-start justify-between gap-3 pb-3 border-b border-border">
+            <p className="text-xs text-muted-foreground">
+              Attach an existing library unit to reuse its content, or create a new one from scratch.
+            </p>
+            <div className="flex items-center gap-2 shrink-0">
+              <Button type="button" variant="outline" size="sm" onClick={() => setAttachOpen(true)}>
+                <Link2 className="h-3.5 w-3.5 mr-1.5" /> Select
+              </Button>
+              <Button type="button" variant="outline" size="sm" onClick={() => setMode("create")}>
+                <Plus className="h-3.5 w-3.5 mr-1.5" /> Create
+              </Button>
+            </div>
+          </div>
+
+          {mode === "create" && (
+            <>
+              {/* Stepper */}
+              <div className="flex items-center gap-0">
+                {STEPS.map((s, i) => {
+                  const Icon = s.icon;
+                  const isActive = step === i;
+                  const isDone = step > i;
+
+                  return (
+                    <div key={s.id} className="flex items-center flex-1 last:flex-none">
+                      <div className="flex flex-col items-center gap-1">
+                        <div className={cn(
+                          "h-8 w-8 rounded-full flex items-center justify-center border transition-colors",
+                          isDone   && "bg-emerald-600 border-emerald-600 text-white",
+                          isActive && "border-primary bg-primary text-primary-foreground",
+                          !isActive && !isDone && "border-border bg-background text-muted-foreground"
+                        )}>
+                          {isDone ? <Check className="h-4 w-4" /> : <Icon className="h-4 w-4" />}
+                        </div>
+                        <span className={cn(
+                          "text-[11px] font-medium whitespace-nowrap hidden sm:block",
+                          isActive ? "text-foreground"  : "text-muted-foreground",
+                          isDone   ? "text-emerald-600" : ""
+                        )}>
+                          {s.label}
+                        </span>
+                      </div>
+                      {i < STEPS.length - 1 && (
+                        <div className={cn(
+                          "flex-1 h-px mx-2 mb-4 transition-colors",
+                          step > i ? "bg-emerald-600" : "bg-border"
+                        )} />
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* Step content */}
+              <div className="rounded-lg border bg-card p-6 space-y-5">
+                {step === 0 && (
+                  <div className="space-y-5">
+                    <div className="space-y-1.5">
+                      <Label htmlFor="title">Title <span className="text-destructive">*</span></Label>
+                      <Input id="title" placeholder="Unit title" {...register("title")} />
+                      <FieldError message={errors.title?.message} />
+                    </div>
+
+                    <div className="space-y-1.5">
+                      <Label htmlFor="description">Description</Label>
+                      <Textarea id="description" placeholder="Optional description" rows={3} {...register("description")} />
+                    </div>
+
+                    <div className="space-y-1.5 max-w-[120px]">
+                      <Label htmlFor="order">Order</Label>
+                      <Input id="order" type="number" min={0} {...register("order")} />
+                    </div>
+
+                    <div className="space-y-1.5">
+                      <Label>Subscription</Label>
+                      <Select
+                        value={watchedSubscr || defaultTierSlug}
+                        onValueChange={(val) => setValue("subscription", val, { shouldDirty: true })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="No subscription gate" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {tierCategories.map((c) => (
+                            <SelectItem key={c.slug} value={c.slug}>
+                              {c.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <p className="text-xs text-muted-foreground">
+                        Optional. Gates this unit directly, independent of the course it's attached to.
+                      </p>
+                    </div>
+                  </div>
+                )}
+
+                {step === 1 && (
+                  <div className="space-y-4">
+                    <p className="text-sm text-muted-foreground">
+                      Configure how learners complete this unit — optional, sensible defaults apply automatically. This is created together with the rest of the unit when you finish.
+                    </p>
+                    <DraftRequirementsEditor entityType="unit" items={requirements} onChange={setRequirements} />
+                  </div>
+                )}
+              </div>
+
+              <div className="flex justify-between gap-3">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => (step === 0 ? navigate(backTarget) : setStep(0))}
+                  disabled={loading}
+                >
+                  <ChevronLeft className="h-4 w-4 mr-1" />
+                  {step === 0 ? "Cancel" : "Back"}
+                </Button>
+
+                {step === 0 ? (
+                  <Button type="button" onClick={handleNext}>
+                    Next
+                    <ChevronRight className="h-4 w-4 ml-1" />
+                  </Button>
+                ) : (
+                  // Only the true final step (Requirements) actually persists
+                  // anything — the unit and any draft requirements are created
+                  // together in one shot here.
+                  <Button type="button" onClick={handleCreate} disabled={loading}>
+                    {loading && <Spinner className="h-4 w-4 mr-2" />}
+                    Create Unit
+                  </Button>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {unsavedChangesDialog}
+
+      <AttachUnitsDialog
+        open={attachOpen}
+        onOpenChange={setAttachOpen}
+        attachedUnitIds={course?.units?.map((u) => u.unit_id) ?? []}
+        onAttach={async (unitIds) => {
+          await api.post(`/admin/courses/${courseId}/units/attach`, { unit_ids: unitIds });
+          bypassOnce();
+          navigate(backTarget);
+        }}
+        loading={loading}
+      />
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/courses/units/ArchivedUnitsList.jsx b/apps/web/src/modules/admin/pages/courses/units/ArchivedUnitsList.jsx
new file mode 100644
index 0000000..29eaff6
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/courses/units/ArchivedUnitsList.jsx
@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, House, Plus } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Spinner } from "@/components/ui/spinner";
+import ArchivedUnitsTable from "../../../components/courses/ArchivedUnitsTable";
+import { Badge } from "@/components/ui/badge";
+
+export default function ArchivedUnitsList() {
+    const navigate = useNavigate();
+    const { courseId } = useParams();
+    const { fetchCourse, course, loading } = useCourses();
+    const [initializing, setInitializing] = useState(true);
+
+    useEffect(() => {
+        (async () => {
+            await fetchCourse(courseId);
+            setInitializing(false);
+        })();
+    }, [courseId]);
+
+    const items = [
+        { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+        { label: "Courses", to: "/admin/courses" },
+        { label: course?.title ?? "...", to: `/admin/courses/${courseId}/units` },
+        { label: "Archived" }
+    ];
+
+    // Replace the loading check
+    if (initializing) {
+        return (
+            <div className="flex items-center justify-center h-64">
+                <Spinner className="h-6 w-6" />
+            </div>
+        );
+    }
+
+    return (
+        <section className="bg-muted h-full">
+            <PageMeta title={course ? `Archived Units – ${course.title} - STARR` : undefined} />
+            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+                <div className="flex flex-col gap-2 my-6">
+                    <AppBreadcrumb items={items} />
+                </div>
+
+                <div className="w-full space-y-6">
+
+
+                    {/* ── Units ── */}
+                    <ArchivedUnitsTable courseId={courseId} />
+
+                </div>
+            </div>
+        </section>
+    );
+}
diff --git a/apps/web/src/modules/admin/pages/courses/units/EditUnit.jsx b/apps/web/src/modules/admin/pages/courses/units/EditUnit.jsx
new file mode 100644
index 0000000..8f36baf
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/courses/units/EditUnit.jsx
@@ -0,0 +1,177 @@
+import { useState, useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useForm, useWatch } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft, House } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import api from "@/utils/api.util";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+import CompletionRequirementBuilder from "@/modules/admin/components/courses/CompletionRequirementBuilder";
+
+const schema = z.object({
+  title: z.string().min(1, "Title is required."),
+  description: z.string().optional(),
+  order: z.coerce.number().min(0).default(0),
+  subscription: z.string().optional(),
+});
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+export default function EditUnit() {
+  const [unitTitle, setUnitTitle] = useState("");
+  const { courseId, unitId } = useParams();
+  const { fetchUnit, updateUnit, fetchCourse, course, loading, fetchUnitRequirements, syncUnitRequirements } = useCourses();
+  const { user } = useAuth();
+  const navigate = useNavigate();
+
+  const [tierCategories, setTierCategories] = useState([]);
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => setTierCategories((data.data ?? []).filter((c) => c.is_active)))
+      .catch(() => {});
+  }, []);
+
+  const { register, handleSubmit, reset, control, setValue, formState: { errors, isDirty } } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { title: "", description: "", order: 0, subscription: "free" },
+  });
+
+  const watchedSubscr = useWatch({ control, name: "subscription" });
+  const defaultTierSlug = tierCategories.find((c) => c.is_default)?.slug || "free";
+
+  useEffect(() => {
+    (async () => {
+      const res = await fetchUnit(courseId, unitId);
+      const unit = res?.data?.data ?? null;
+      if (!unit) return;
+      reset({
+        title: unit.title ?? "",
+        description: unit.description ?? "",
+        order: unit.order ?? 0,
+        subscription: unit.subscription || defaultTierSlug,
+      });
+      setUnitTitle(unit.title ?? "");
+    })();
+    if (!course || String(course.course_id) !== String(courseId)) {
+      fetchCourse(courseId);
+    }
+  }, [courseId, unitId]);
+
+
+  const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty);
+
+  const onSubmit = async (data) => {
+    if (!isDirty) { bypassOnce(); return navigate(`/admin/courses/${courseId}/units/${unitId}/view`); }
+    const result = await updateUnit(courseId, unitId, { ...data, subscription: data.subscription || defaultTierSlug, updatedBy: user?.user_id });
+    if (!result) return;
+    bypassOnce();
+    navigate(`/admin/courses/${courseId}/units/${unitId}/view`);
+  };
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title={unitTitle ? `Edit: ${unitTitle} - STARR` : undefined} />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-center px-4 py-10">
+
+        <div className="w-full max-w-2xl mx-auto">
+          <div className="flex items-center gap-3 mb-6">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate(`/admin/courses/${courseId}/units/${unitId}/view`)}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Edit Unit</h1>
+              <p className="text-sm text-muted-foreground">
+                Units live in the shared Library — changes here apply everywhere this unit
+                is used{course ? `, not just "${course.title}"` : ""}.
+              </p>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <div className="rounded-lg border bg-card p-6 space-y-5">
+
+              <div className="space-y-1.5">
+                <Label htmlFor="title">Title <span className="text-destructive">*</span></Label>
+                <Input id="title" placeholder="Unit title" {...register("title")} />
+                <FieldError message={errors.title?.message} />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="description">Description</Label>
+                <Textarea id="description" placeholder="Optional description" rows={3} {...register("description")} />
+              </div>
+
+              <div className="space-y-1.5 max-w-[120px]">
+                <Label htmlFor="order">Order</Label>
+                <Input id="order" type="number" min={0} {...register("order")} />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label>Subscription</Label>
+                <Select
+                  value={watchedSubscr || defaultTierSlug}
+                  onValueChange={(val) => setValue("subscription", val, { shouldDirty: true })}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="No subscription gate" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {tierCategories.map((c) => (
+                      <SelectItem key={c.slug} value={c.slug}>
+                        {c.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <p className="text-xs text-muted-foreground">
+                  Optional. Gates this unit directly, independent of the course it's attached to.
+                </p>
+              </div>
+
+            </div>
+
+            <div className="flex justify-end gap-3">
+              <Button type="button" variant="outline" onClick={() => navigate(`/admin/courses/${courseId}/units/${unitId}/view`)} disabled={loading}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={loading || !isDirty}>
+                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                Save Changes
+              </Button>
+            </div>
+          </form>
+
+          <div className="rounded-lg border bg-card p-6 space-y-4 mt-6">
+            <div>
+              <h2 className="text-sm font-semibold">Completion Requirements</h2>
+              <p className="text-xs text-muted-foreground">What a learner must do for this unit to count as complete.</p>
+            </div>
+            <CompletionRequirementBuilder
+              entityType="unit"
+              fetchFn={fetchUnitRequirements}
+              syncFn={syncUnitRequirements}
+              args={[courseId, unitId]}
+            />
+          </div>
+        </div>
+      </div>
+
+      {unsavedChangesDialog}
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/courses/units/ModifyQuiz.jsx b/apps/web/src/modules/admin/pages/courses/units/ModifyQuiz.jsx
new file mode 100644
index 0000000..ff0d70d
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/courses/units/ModifyQuiz.jsx
@@ -0,0 +1,716 @@
+import { useEffect, useRef, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, House, Plus, Save, HelpCircle, ChevronUp, ChevronDown, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import api from "@/utils/api.util";
+import { PageMeta } from "@/contexts/MetadataContext";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Spinner } from "@/components/ui/spinner";
+import { cn } from "@/lib/utils";
+import { QuestionCard, makeQuestion } from "../../../components/courses/QuestionEditor";
+
+// ── Validation ────────────────────────────────────────────────────────────────
+
+function validate(questions) {
+  const errors = {};
+  questions.forEach((q, i) => {
+    const qErr = {};
+    if (!q.question?.trim()) qErr.question = "Question text is required.";
+    const correctCount = q.options.filter((o) => o.is_correct).length;
+    if (correctCount === 0) qErr.options = "At least one correct answer is required.";
+    if (q.options.some((o) => !o.text?.trim())) qErr.options = "All option texts are required.";
+    if (Object.keys(qErr).length) errors[i] = qErr;
+  });
+  return errors;
+}
+
+// ── Dirty-check snapshot (stable fields only, strips internal _tempId) ────────
+
+function snapQuiz({ title, passingScore, isRequired, maxQuestions, shuffleQuestions, questions }) {
+  return JSON.stringify({
+    title, passingScore, isRequired, maxQuestions, shuffleQuestions,
+    questions: questions.map((q) => ({
+      question_id: q.question_id ?? null,
+      question:    q.question,
+      type:        q.type,
+      points:      q.points ?? 1,
+      options:     (q.options ?? []).map((o) => ({
+        option_id: o.option_id ?? null,
+        text:      o.text,
+        is_correct: o.is_correct,
+      })),
+    })),
+  });
+}
+
+// ── Server row → form state ──────────────────────────────────────────────────
+
+function toFormState(q) {
+  return {
+    title:            q?.title ?? "",
+    passingScore:     q?.passing_score ?? 70,
+    isRequired:       q?.is_required === true || q?.is_required === 1,
+    maxQuestions:     q?.max_questions ?? "",
+    shuffleQuestions: q?.shuffle_questions === true || q?.shuffle_questions === 1,
+    questions:        (q?.questions ?? []).map((qq) => ({ ...qq, _tempId: qq.question_id, options: qq.options ?? [] })),
+  };
+}
+
+// ── Jump to input ─────────────────────────────────────────────────────────────
+
+function JumpToInput({ max, onJump }) {
+  const [val, setVal] = useState("");
+
+  const handleJump = () => {
+    const n = parseInt(val, 10);
+    if (!isNaN(n) && n >= 1 && n <= max) {
+      onJump(n - 1);
+      setVal("");
+    }
+  };
+
+  return (
+    <div className="flex gap-1">
+      <Input
+        type="number"
+        min={1}
+        max={max}
+        value={val}
+        onChange={(e) => setVal(e.target.value)}
+        onKeyDown={(e) => e.key === "Enter" && handleJump()}
+        placeholder={`1–${max}`}
+        className="h-7 text-xs"
+      />
+      <Button
+        type="button"
+        size="sm"
+        variant="outline"
+        className="h-7 px-2 text-xs shrink-0"
+        onClick={handleJump}
+      >
+        Go
+      </Button>
+    </div>
+  );
+}
+
+// ── Question Navigator ────────────────────────────────────────────────────────
+
+const TYPE_LABEL = {
+  multiple_choice: "MC",
+  multi_select: "MS",
+  true_false: "TF",
+};
+
+function QuestionNavigator({ questions, activeIndex, onJump, onMove, navItemRefs, navContainerRef, errors }) {
+  return (
+    <div className="flex flex-col h-full">
+
+      <div className="px-3 py-3 border-b shrink-0">
+        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+          Questions
+        </p>
+        <p className="text-xs text-muted-foreground mt-0.5">
+          {questions.length} total
+        </p>
+      </div>
+
+      <div ref={navContainerRef} className="flex-1 overflow-y-auto py-2">
+        {questions.length === 0 ? (
+          <p className="text-xs text-muted-foreground text-center py-8 px-3">
+            No questions yet.
+          </p>
+        ) : (
+          <div className="space-y-0.5 px-2">
+            {questions.map((q, i) => {
+              const isActive = i === activeIndex;
+              const hasError = !!errors?.[i];
+              const typeLabel = TYPE_LABEL[q.type] ?? "Q";
+
+              return (
+                <div
+                  key={q._tempId ?? q.question_id ?? i}
+                  ref={(el) => (navItemRefs.current[i] = el)}
+                  onClick={() => onJump(i)}
+                  className={cn(
+                    "group flex items-center gap-1.5 rounded-md px-2 py-1.5 cursor-pointer transition-colors",
+                    isActive
+                      ? "bg-primary/10 text-primary"
+                      : hasError
+                        ? "bg-destructive/10 text-destructive hover:bg-destructive/20"
+                        : "hover:bg-muted text-foreground"
+                  )}
+                >
+                  <span className={cn(
+                    "flex h-5 w-5 shrink-0 items-center justify-center rounded text-[10px] font-semibold",
+                    isActive
+                      ? "bg-primary text-primary-foreground"
+                      : hasError
+                        ? "bg-destructive text-destructive-foreground"
+                        : "bg-muted-foreground/20 text-muted-foreground"
+                  )}>
+                    {i + 1}
+                  </span>
+
+                  <span className="text-[10px] font-medium text-muted-foreground shrink-0 w-5">
+                    {typeLabel}
+                  </span>
+
+                  <span className="flex-1 text-xs truncate min-w-0">
+                    {q.question?.trim()
+                      ? q.question.trim()
+                      : <span className="italic text-muted-foreground">Untitled</span>
+                    }
+                  </span>
+
+                  <div className="hidden group-hover:flex items-center gap-0.5 shrink-0">
+                    <button
+                      type="button"
+                      onClick={(e) => { e.stopPropagation(); onMove(i, "up"); }}
+                      disabled={i === 0}
+                      className="h-4 w-4 flex items-center justify-center rounded hover:bg-muted-foreground/20 disabled:opacity-30 transition-colors"
+                    >
+                      <ChevronUp className="h-3 w-3" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={(e) => { e.stopPropagation(); onMove(i, "down"); }}
+                      disabled={i === questions.length - 1}
+                      className="h-4 w-4 flex items-center justify-center rounded hover:bg-muted-foreground/20 disabled:opacity-30 transition-colors"
+                    >
+                      <ChevronDown className="h-3 w-3" />
+                    </button>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {questions.length > 5 && (
+        <div className="px-3 py-3 border-t shrink-0 space-y-1.5">
+          <p className="text-xs text-muted-foreground">Jump to question</p>
+          <JumpToInput max={questions.length} onJump={onJump} />
+        </div>
+      )}
+
+    </div>
+  );
+}
+
+// ── Main Page ─────────────────────────────────────────────────────────────────
+
+export default function ModifyQuiz() {
+  const navigate = useNavigate();
+  const { courseId, unitId } = useParams();
+  const {
+    createQuiz, updateQuiz,
+    bulkSyncQuizQuestions,
+    course, unit, loading,
+  } = useCourses();
+
+  const [localQuiz, setLocalQuiz] = useState(null);
+  const { user } = useAuth();
+
+  const DRAFT_KEY = `draftQuiz_${courseId ?? "lib"}_${unitId}`;
+  const [draftInfo, setDraftInfo] = useState(null); // { savedAt } — non-null while an unsaved local draft exists
+
+  const [initializing, setInitializing] = useState(true);
+  const [questions, setQuestions] = useState([]);
+  const [errors, setErrors] = useState({});
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const [title, setTitle] = useState("");
+  const [passingScore, setPassingScore] = useState(70);
+  const [isRequired, setIsRequired] = useState(false);
+  const [maxQuestions, setMaxQuestions] = useState("");
+  const [shuffleQuestions, setShuffleQuestions] = useState(false);
+
+  const questionRefs     = useRef([]);
+  const navItemRefs      = useRef([]);
+  const navContainerRef  = useRef(null);
+  const headerRef        = useRef(null);
+  const initialSnapshot  = useRef(null);
+  const originalQuestionIdsRef = useRef([]); // ids loaded from the server — used to detect a full-pool wipe on save
+
+  // Junction revamp — this builder runs course-scoped AND from the standalone
+  // Unit Library (/admin/units/:unitId/quiz/edit, no :courseId param).
+  const scopeBase = courseId
+    ? `/admin/courses/${courseId}/units/${unitId}`
+    : `/admin/units/${unitId}`;
+
+  const breadcrumbItems = courseId
+    ? [
+        { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+        { label: "Courses", to: "/admin/courses" },
+        { label: course?.title ?? "…", to: `/admin/courses/${courseId}` },
+        { label: unit?.title ?? "…", to: `/admin/courses/${courseId}/units/${unitId}` },
+        { label: "Quiz" },
+      ]
+    : [
+        { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+        { label: "Units Library", to: "/admin/units" },
+        { label: unit?.title ?? "…", to: `/admin/units/${unitId}/view` },
+        { label: "Quiz" },
+      ];
+
+  // ── Fetch — silently treat 404 as "no quiz yet" (create mode) ─────────────
+  useEffect(() => {
+    (async () => {
+      try {
+        const { data } = await api.get(`${scopeBase}/quiz`);
+        const result = data?.data?.data ?? null;
+        setLocalQuiz(result);
+      } catch (err) {
+        if (err?.response?.status !== 404) {
+          toast(err?.response?.data?.message ?? "Could not load quiz.");
+        }
+        // 404 → no quiz yet, stay in create mode with localQuiz = null
+      } finally {
+        setInitializing(false);
+      }
+    })();
+  }, [courseId, unitId]);
+
+  // ── Seed form from fetched quiz ────────────────────────────────────────────
+  useEffect(() => {
+    if (!localQuiz) return;
+    const s = toFormState(localQuiz);
+    setTitle(s.title); setPassingScore(s.passingScore); setIsRequired(s.isRequired);
+    setMaxQuestions(s.maxQuestions); setShuffleQuestions(s.shuffleQuestions); setQuestions(s.questions);
+    initialSnapshot.current = snapQuiz(s);
+    originalQuestionIdsRef.current = s.questions.map((q) => q.question_id).filter(Boolean);
+  }, [localQuiz]);
+
+  // ── Restore an unsaved local draft (survives a reload before Save Quiz) ────
+  useEffect(() => {
+    if (initializing) return;
+    const raw = localStorage.getItem(DRAFT_KEY);
+    if (!raw) return;
+    try {
+      const draft = JSON.parse(raw);
+      if (!draft?.questions) return;
+      setTitle(draft.title ?? "");
+      setPassingScore(draft.passingScore ?? 70);
+      setIsRequired(draft.isRequired ?? false);
+      setMaxQuestions(draft.maxQuestions ?? "");
+      setShuffleQuestions(draft.shuffleQuestions ?? false);
+      setQuestions(draft.questions ?? []);
+      setDraftInfo({ savedAt: draft.savedAt });
+      toast("Restored an unsaved draft from this browser.");
+    } catch {
+      localStorage.removeItem(DRAFT_KEY);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initializing]);
+
+  // ── Measure sticky header → --quiz-h ──────────────────────────────────────
+  useEffect(() => {
+    if (!headerRef.current) return;
+    const update = () => {
+      document.documentElement.style.setProperty(
+        "--quiz-h",
+        `${headerRef.current.offsetHeight}px`
+      );
+    };
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+
+  // ── Scroll active nav item into view ──────────────────────────────────────
+  useEffect(() => {
+    const item = navItemRefs.current[activeIndex];
+    const container = navContainerRef.current;
+    if (!item || !container) return;
+
+    const itemTop = item.offsetTop;
+    const itemBottom = itemTop + item.offsetHeight;
+    const viewTop = container.scrollTop;
+    const viewBottom = viewTop + container.clientHeight;
+
+    if (itemTop < viewTop) {
+      container.scrollTop = itemTop;
+    } else if (itemBottom > viewBottom) {
+      container.scrollTop = itemBottom - container.clientHeight;
+    }
+  }, [activeIndex]);
+
+  // ── IntersectionObserver — highlight nav as user scrolls ──────────────────
+  useEffect(() => {
+    if (!questions.length) return;
+    const observers = [];
+
+    questionRefs.current.forEach((el, i) => {
+      if (!el) return;
+      const observer = new IntersectionObserver(
+        ([entry]) => { if (entry.isIntersecting) setActiveIndex(i); },
+        { rootMargin: "-20% 0px -70% 0px", threshold: 0 }
+      );
+      observer.observe(el);
+      observers.push(observer);
+    });
+
+    return () => observers.forEach((o) => o.disconnect());
+  }, [questions.length]);
+
+  // ── Scroll helper with sticky offset ──────────────────────────────────────
+  const scrollToQuestion = (index) => {
+    const el = questionRefs.current[index];
+    if (!el) return;
+    const navbarH = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--navbar-h") || "0", 10);
+    const quizH = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--quiz-h") || "0", 10);
+    const offset = navbarH + quizH + 16;
+    const top = el.getBoundingClientRect().top + window.scrollY - offset;
+    window.scrollTo({ top, behavior: "smooth" });
+  };
+
+  // ── Question actions ───────────────────────────────────────────────────────
+  const addQuestion = (type = "multiple_choice") => {
+    setQuestions((prev) => {
+      const next = [...prev, { ...makeQuestion(type), order_index: prev.length }];
+      setTimeout(() => {
+        const idx = next.length - 1;
+        setActiveIndex(idx);
+        scrollToQuestion(idx);
+      }, 50);
+      return next;
+    });
+  };
+
+  const updateQuestion = (index, updated) => {
+    setQuestions((prev) => prev.map((q, i) => i === index ? updated : q));
+    setErrors((prev) => { const e = { ...prev }; delete e[index]; return e; });
+  };
+
+  const removeQuestion = (index) => {
+    setQuestions((prev) => prev.filter((_, i) => i !== index));
+    setActiveIndex((prev) => Math.max(0, prev >= index ? prev - 1 : prev));
+  };
+
+  const moveQuestion = (index, direction) => {
+    setQuestions((prev) => {
+      const next = [...prev];
+      const swapIndex = direction === "up" ? index - 1 : index + 1;
+      if (swapIndex < 0 || swapIndex >= next.length) return prev;
+      [next[index], next[swapIndex]] = [next[swapIndex], next[index]];
+      return next;
+    });
+    const newIndex = direction === "up" ? index - 1 : index + 1;
+    setActiveIndex(newIndex);
+    setTimeout(() => scrollToQuestion(newIndex), 50);
+  };
+
+  const jumpTo = (index) => {
+    setActiveIndex(index);
+    scrollToQuestion(index);
+  };
+
+  const totalPoints = questions.reduce((sum, q) => sum + (q.points ?? 1), 0);
+
+  // ── Dirty tracking ─────────────────────────────────────────────────────────
+  const isDirty = initialSnapshot.current === null
+    ? questions.length > 0  // new quiz — enable once they've added a question
+    : snapQuiz({ title, passingScore, isRequired, maxQuestions, shuffleQuestions, questions }) !== initialSnapshot.current;
+
+  // ── Auto-save unsaved changes to localStorage as a draft ───────────────────
+  useEffect(() => {
+    if (initializing) return;
+    const timer = setTimeout(() => {
+      if (isDirty) {
+        const payload = { title, passingScore, isRequired, maxQuestions, shuffleQuestions, questions, savedAt: Date.now() };
+        try {
+          localStorage.setItem(DRAFT_KEY, JSON.stringify(payload));
+          setDraftInfo({ savedAt: payload.savedAt });
+        } catch {
+          // localStorage full/unavailable — draft persistence is best-effort only.
+        }
+      } else {
+        localStorage.removeItem(DRAFT_KEY);
+        setDraftInfo(null);
+      }
+    }, 400);
+    return () => clearTimeout(timer);
+  }, [initializing, isDirty, title, passingScore, isRequired, maxQuestions, shuffleQuestions, questions, DRAFT_KEY]);
+
+  // ── Clear draft — discards the local draft and reverts to the last loaded state ─
+  const handleClearDraft = () => {
+    localStorage.removeItem(DRAFT_KEY);
+    setDraftInfo(null);
+    const s = toFormState(localQuiz);
+    setTitle(s.title); setPassingScore(s.passingScore); setIsRequired(s.isRequired);
+    setMaxQuestions(s.maxQuestions); setShuffleQuestions(s.shuffleQuestions); setQuestions(s.questions);
+    setErrors({});
+    toast("Draft cleared.");
+  };
+
+  // ── Save ───────────────────────────────────────────────────────────────────
+  const handleSave = async () => {
+    const errs = validate(questions);
+    if (Object.keys(errs).length) {
+      setErrors(errs);
+      jumpTo(parseInt(Object.keys(errs)[0], 10));
+      return;
+    }
+
+    let quizId = localQuiz?.quiz_id;
+    const meta = {
+      title: title || "Unit Quiz",
+      passing_score: passingScore,
+      is_required:       isRequired,
+      max_questions:     maxQuestions ? parseInt(maxQuestions) : null,
+      shuffle_questions: shuffleQuestions,
+      updatedBy: user?.user_id,
+      createdBy: user?.user_id,
+    };
+
+    if (!quizId) {
+      const res = await createQuiz(courseId, unitId, meta);
+      // res is the raw response body: { status, message, data: { data: quiz } }
+      // (createQuiz() itself unwraps the same object as data?.data?.data to get
+      // the quiz row — this needs the same two levels, not three).
+      quizId = res?.data?.data?.quiz_id;
+      if (!quizId) return;
+      setLocalQuiz((prev) => ({ ...prev, quiz_id: quizId }));
+    } else {
+      await updateQuiz(courseId, unitId, quizId, meta);
+    }
+
+    // A save that keeps none of the previously-loaded question ids would archive the
+    // entire existing pool in one call — could be a deliberate "start over", but is
+    // exactly the signature of a stale/incomplete state bug. Require explicit confirmation.
+    const retainedIds = questions.map((q) => q.question_id).filter(Boolean);
+    const wipesPool = originalQuestionIdsRef.current.length > 0 && retainedIds.length === 0;
+    if (wipesPool && !window.confirm(
+      `This will permanently remove all ${originalQuestionIdsRef.current.length} existing question(s) from this quiz. Continue?`
+    )) {
+      return;
+    }
+
+    await bulkSyncQuizQuestions(courseId, unitId, quizId, questions, user?.user_id, wipesPool);
+
+    initialSnapshot.current = snapQuiz({ title, passingScore, isRequired, maxQuestions, shuffleQuestions, questions });
+    localStorage.removeItem(DRAFT_KEY);
+    setDraftInfo(null);
+    navigate(`${scopeBase}/view`);
+  };
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+  return (
+    <div className="flex flex-col min-h-screen bg-muted/60">
+      <PageMeta title={unit ? `${unit.title} – Quiz - STARR` : undefined} />
+
+      {/* ── Sticky header ── */}
+      <div
+        ref={headerRef}
+        className="sticky z-20 shrink-0 border-b bg-white/70 dark:bg-zinc-900/70 backdrop-blur-md"
+        style={{ top: "var(--navbar-h)" }}
+      >
+        <div className="lg:container lg:mx-auto lg:px-6 px-4">
+          <div className="flex items-center gap-3 py-3">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate(`${scopeBase}/view`)}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div className="flex-1 min-w-0">
+              <h1 className="text-xl font-semibold leading-tight flex items-center gap-2">
+                <HelpCircle className="h-5 w-5 text-muted-foreground" />
+                Unit Quiz
+              </h1>
+              <p className="text-sm text-muted-foreground">
+                {questions.length} question{questions.length !== 1 ? "s" : ""} · {totalPoints} total point{totalPoints !== 1 ? "s" : ""}
+              </p>
+            </div>
+            {draftInfo && (
+              <div className="hidden sm:flex items-center gap-2 text-xs text-muted-foreground">
+                <span className="inline-flex items-center gap-1.5">
+                  <span className="h-1.5 w-1.5 rounded-full bg-amber-500" />
+                  Draft saved {new Date(draftInfo.savedAt).toLocaleTimeString()}
+                </span>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 px-2 text-xs text-muted-foreground hover:text-destructive"
+                  onClick={handleClearDraft}
+                >
+                  <Trash2 className="h-3.5 w-3.5 mr-1" />
+                  Clear draft
+                </Button>
+              </div>
+            )}
+            <Button onClick={handleSave} disabled={loading || !isDirty}>
+              {loading ? <Spinner className="h-4 w-4 mr-2" /> : <Save className="h-4 w-4 mr-2" />}
+              Save Quiz
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* ── Split layout ── */}
+      <div className="flex flex-1 lg:container lg:mx-auto lg:px-6 px-0 w-full items-start">
+
+        {/* LEFT — Navigator */}
+        <div
+          className="hidden lg:flex flex-col w-60 shrink-0 border-r bg-background"
+          style={{
+            position: "sticky",
+            top: `calc(var(--navbar-h) + var(--quiz-h, 0px))`,
+            height: `calc(100vh - var(--navbar-h) - var(--quiz-h, 0px))`,
+          }}
+        >
+          <QuestionNavigator
+            questions={questions}
+            activeIndex={activeIndex}
+            onJump={jumpTo}
+            onMove={moveQuestion}
+            navItemRefs={navItemRefs}
+            navContainerRef={navContainerRef}
+            errors={errors}
+          />
+        </div>
+
+        {/* RIGHT — Content */}
+        <div className="flex-1 min-w-0 px-4 lg:px-8 py-6">
+          {initializing ? (
+            <div className="flex items-center justify-center py-20">
+              <Spinner className="h-6 w-6" />
+            </div>
+          ) : (
+            <div className="max-w-2xl space-y-6 pb-16">
+
+              {/* Settings */}
+              <div className="rounded-lg border bg-card p-6 space-y-5">
+                <p className="text-sm font-medium">Settings</p>
+
+                <div className="space-y-1.5">
+                  <Label>Title</Label>
+                  <Input
+                    value={title}
+                    onChange={(e) => setTitle(e.target.value)}
+                    placeholder="Unit Quiz"
+                  />
+                </div>
+
+                <div className="space-y-1.5 max-w-[200px]">
+                  <Label>Passing Score (%)</Label>
+                  <Input
+                    type="number"
+                    min={0}
+                    max={100}
+                    value={passingScore}
+                    onChange={(e) => setPassingScore(parseInt(e.target.value) || 0)}
+                  />
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label>
+                    Max Questions{" "}
+                    <span className="text-muted-foreground font-normal text-xs">(blank = show all)</span>
+                  </Label>
+                  <Input
+                    type="number" min={1} max={questions.length || undefined}
+                    value={maxQuestions}
+                    onChange={(e) => setMaxQuestions(e.target.value)}
+                    placeholder={`All (${questions.length})`}
+                  />
+                </div>
+
+                <div className="space-y-1">
+                  <div className="flex items-center gap-3">
+                    <Checkbox id="quiz_required" checked={isRequired === true} disabled />
+                    <Label htmlFor="quiz_required" className="text-muted-foreground">
+                      Required to proceed to next unit
+                    </Label>
+                  </div>
+                  <p className="text-xs text-muted-foreground pl-7">
+                    Derived from this unit's Completion Requirements — add or remove a "Pass the Quiz"
+                    requirement on the unit's Edit page to change this.
+                  </p>
+                </div>
+
+                <div className="flex items-center gap-3">
+                  <Checkbox
+                    id="quiz_shuffle"
+                    checked={shuffleQuestions === true}
+                    onCheckedChange={(val) => setShuffleQuestions(val)}
+                  />
+                  <Label htmlFor="quiz_shuffle" className="cursor-pointer">
+                    Shuffle question order for each attempt
+                  </Label>
+                </div>
+              </div>
+
+              {maxQuestions && parseInt(maxQuestions) < questions.length && (
+                <p className="text-xs text-muted-foreground bg-muted rounded-md px-3 py-2">
+                  Takers will see <strong>{maxQuestions}</strong> randomly selected questions
+                  out of <strong>{questions.length}</strong> in the pool.
+                </p>
+              )}
+
+              {/* Questions */}
+              <div className="space-y-4">
+                {questions.length === 0 ? (
+                  <div className="rounded-lg border border-dashed bg-card p-12 flex flex-col items-center gap-3 text-center">
+                    <HelpCircle className="h-8 w-8 text-muted-foreground/40" />
+                    <p className="text-sm text-muted-foreground">
+                      No questions yet. Add one below.
+                    </p>
+                  </div>
+                ) : (
+                  questions.map((q, i) => (
+                    <div
+                      key={q._tempId ?? q.question_id ?? i}
+                      ref={(el) => (questionRefs.current[i] = el)}
+                      onClick={() => setActiveIndex(i)}
+                    >
+                      <QuestionCard
+                        question={q}
+                        index={i}
+                        onChange={(updated) => updateQuestion(i, updated)}
+                        onRemove={() => removeQuestion(i)}
+                        error={errors[i]}
+                      />
+                    </div>
+                  ))
+                )}
+              </div>
+
+              {/* Add question */}
+              <div className="rounded-lg border bg-card p-4">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium mb-3">
+                  Add Question
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  {[
+                    { type: "multiple_choice", label: "Multiple Choice" },
+                    { type: "multi_select", label: "Multi Select" },
+                    { type: "true_false", label: "True / False" },
+                  ].map(({ type, label }) => (
+                    <Button
+                      key={type}
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() => addQuestion(type)}
+                    >
+                      <Plus className="h-3.5 w-3.5 mr-1" />
+                      {label}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/courses/units/UnitsList.jsx b/apps/web/src/modules/admin/pages/courses/units/UnitsList.jsx
new file mode 100644
index 0000000..bfb1125
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/courses/units/UnitsList.jsx
@@ -0,0 +1,107 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, House, Plus } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { PageMeta } from "@/contexts/MetadataContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Spinner } from "@/components/ui/spinner";
+import UnitsTable from "../../../components/courses/UnitsTable";
+import { Badge } from "@/components/ui/badge";
+
+export default function UnitsList() {
+  const navigate = useNavigate();
+  const { courseId } = useParams();
+  const { fetchCourse, course, loading } = useCourses();
+  const { fmtDate } = useDateFormat();
+  const [initializing, setInitializing] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      if (!course || String(course.course_id) !== String(courseId)) {
+        await fetchCourse(courseId);
+      }
+      setInitializing(false);
+    })();
+  }, [courseId]);
+
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Courses", to: "/admin/courses" },
+    { label: course?.title ?? "..." },
+  ];
+
+  // Replace the loading check
+  if (initializing) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <Spinner className="h-6 w-6" />
+      </div>
+    );
+  }
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title={course ? `Units - ${course.title} - STARR` : undefined} />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full space-y-6">
+
+          {/* ── Course header ── */}
+          <div className="bg-card rounded-xl border p-6 space-y-4">
+            {/* Title + Status */}
+            <div>
+              <h6 className="text-xs tracking-widest mb-1">COURSE</h6>
+              <div className="flex items-center gap-2">
+                <h1 className="text-xl font-semibold">{course?.title}</h1>
+                <span
+                  className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${!course.deletedBy
+                    ? "bg-green-100 text-green-700"
+                    : "bg-red-100 text-red-600"
+                    }`}
+                >
+                  {!course.deletedBy ? "Active" : "Inactive"}
+                </span>
+              </div>
+              {course?.description && (
+                <p className="text-sm text-muted-foreground mt-0.5">{course.description}</p>
+              )}
+            </div>
+
+            {/* Stats row */}
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Level</p>
+                <p className="font-semibold text-sm capitalize">{course?.level}</p>
+              </div>
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Units</p>
+                <p className="font-semibold text-sm">{course?.units.length}</p>
+              </div>
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Created</p>
+                <p className="font-semibold text-sm">
+                  {course?.createdAt ? fmtDate(course.createdAt) : '—'}
+                </p>
+              </div>
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Last Updated</p>
+                <p className="font-semibold text-sm">
+                  {course?.updatedAt ? fmtDate(course.updatedAt) : '—'}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* ── Units ── */}
+          <UnitsTable courseId={courseId} />
+
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/courses/units/ViewUnit.jsx b/apps/web/src/modules/admin/pages/courses/units/ViewUnit.jsx
new file mode 100644
index 0000000..70024da
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/courses/units/ViewUnit.jsx
@@ -0,0 +1,194 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  Pencil, ArrowLeft, Info, BookCheck, ClipboardList, NotebookPen, Eye, HelpCircle,
+} from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { Skeleton } from "@/components/ui/skeleton";
+import LessonsTable from "../../../components/courses/LessonsTable";
+
+// ─── Tabs ─────────────────────────────────────────────────────────────────────
+
+const TABS = [
+  { key: "details", label: "Unit Details", icon: Info },
+  { key: "lessons", label: "Lessons",      icon: BookCheck },
+  { key: "quiz",    label: "Quiz",         icon: ClipboardList },
+];
+
+const WIDE_TABS = new Set(["lessons"]);
+
+// ─── Details tab ──────────────────────────────────────────────────────────────
+
+function UnitDetailsTab({ unit }) {
+  return (
+    <div className="rounded-lg border bg-card p-6 space-y-5">
+      <div className="space-y-1">
+        <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Title</p>
+        <p className="text-sm font-medium">{unit?.title ?? "—"}</p>
+      </div>
+
+      <div className="space-y-1">
+        <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Description</p>
+        <p className="text-sm text-muted-foreground">{unit?.description || "No description provided."}</p>
+      </div>
+
+      <div className="space-y-1">
+        <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Order</p>
+        <p className="text-sm font-medium">{unit?.order ?? 0}</p>
+      </div>
+    </div>
+  );
+}
+
+// ─── Quiz tab ─────────────────────────────────────────────────────────────────
+
+function UnitQuizTab({ courseId, unitId }) {
+  const navigate = useNavigate();
+  const { fetchQuiz, quiz, loading } = useCourses();
+
+  useEffect(() => {
+    fetchQuiz(courseId, unitId);
+  }, [courseId, unitId]);
+
+  if (loading && !quiz) {
+    return <Skeleton className="h-32 w-full rounded-lg" />;
+  }
+
+  if (!quiz) {
+    return (
+      <div className="rounded-lg border border-dashed bg-card p-12 flex flex-col items-center gap-3 text-center">
+        <HelpCircle className="h-8 w-8 text-muted-foreground/40" />
+        <p className="text-sm text-muted-foreground">No quiz has been created for this unit yet.</p>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => navigate(`/admin/courses/${courseId}/units/${unitId}/quiz/edit`)}
+        >
+          <NotebookPen className="h-4 w-4 mr-2" />
+          Create Quiz
+        </Button>
+      </div>
+    );
+  }
+
+  const questions = quiz.questions ?? [];
+  const totalPoints = questions.reduce((sum, q) => sum + (q.points ?? 1), 0);
+
+  return (
+    <div className="rounded-lg border bg-card p-6 space-y-4">
+      <div className="flex items-center justify-between gap-4 flex-wrap">
+        <div>
+          <p className="text-sm font-medium">{quiz.title || "Unit Quiz"}</p>
+          <p className="text-xs text-muted-foreground">
+            {questions.length} question{questions.length !== 1 ? "s" : ""} · {totalPoints} total point{totalPoints !== 1 ? "s" : ""}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => navigate(`/admin/courses/${courseId}/units/${unitId}/quiz/view`)}
+          >
+            <Eye className="h-4 w-4 mr-2" />
+            View Quiz
+          </Button>
+          <Button
+            size="sm"
+            onClick={() => navigate(`/admin/courses/${courseId}/units/${unitId}/quiz/edit`)}
+          >
+            <NotebookPen className="h-4 w-4 mr-2" />
+            Modify Quiz
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function ViewUnit() {
+  const navigate = useNavigate();
+  const { courseId, unitId } = useParams();
+  const { fetchUnit } = useCourses();
+  const [unit, setUnit] = useState(null);
+  const [initializing, setInitializing] = useState(true);
+  const [activeTab, setActiveTab] = useState("details");
+
+  useEffect(() => {
+    (async () => {
+      const res = await fetchUnit(courseId, unitId);
+      setUnit(res?.data?.data ?? null);
+      setInitializing(false);
+    })();
+  }, [courseId, unitId]);
+
+  if (initializing) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <Spinner className="h-6 w-6" />
+      </div>
+    );
+  }
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title={unit ? `${unit.title} - STARR` : undefined} />
+
+      <div className="sticky z-20 shrink-0 border-b bg-white/70 dark:bg-zinc-900/70 backdrop-blur-md" style={{ top: "var(--navbar-h)" }}>
+        <div className="lg:container lg:mx-auto lg:px-6 px-4">
+          <div className="flex items-center justify-between py-3">
+            <div className="flex items-center gap-3">
+              <Button type="button" variant="ghost" size="icon" onClick={() => navigate(`/admin/courses/${courseId}/units`)}>
+                <ArrowLeft className="h-4 w-4" />
+              </Button>
+              <div>
+                <h1 className="text-xl font-semibold">Unit Details</h1>
+                <p className="text-sm text-muted-foreground">View unit information.</p>
+              </div>
+            </div>
+            {activeTab === "details" && (
+              <Button
+                type="button"
+                onClick={() => navigate(`/admin/courses/${courseId}/units/${unitId}/edit`)}
+              >
+                <Pencil className="h-4 w-4 mr-2" />
+                Edit
+              </Button>
+            )}
+          </div>
+
+          <div className="flex gap-1 pb-0 -mb-px">
+            {TABS.map(({ key, label, icon: Icon }) => (
+              <button
+                key={key}
+                onClick={() => setActiveTab(key)}
+                className={[
+                  "flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors",
+                  activeTab === key
+                    ? "border-primary text-primary"
+                    : "border-transparent text-muted-foreground hover:text-foreground",
+                ].join(" ")}
+              >
+                <Icon className="h-3.5 w-3.5" />
+                {label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="lg:container lg:mx-auto lg:px-6 px-4 py-6">
+        <div className={WIDE_TABS.has(activeTab) ? "pb-16" : "max-w-2xl mx-auto pb-16"}>
+          {activeTab === "details" && <UnitDetailsTab unit={unit} />}
+          {activeTab === "lessons" && <LessonsTable courseId={courseId} unitId={unitId} />}
+          {activeTab === "quiz" && <UnitQuizTab courseId={courseId} unitId={unitId} />}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/courses/units/ViewUnitQuiz.jsx b/apps/web/src/modules/admin/pages/courses/units/ViewUnitQuiz.jsx
new file mode 100644
index 0000000..f31e691
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/courses/units/ViewUnitQuiz.jsx
@@ -0,0 +1,380 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  ArrowLeft, HelpCircle, NotebookPen,
+  CheckCircle2, Circle, Users,
+  ChevronDown, ChevronUp,
+} from "lucide-react";
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function InfoRow({ label, children }) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <span className="text-xs text-muted-foreground uppercase tracking-wide">{label}</span>
+      <span className="text-sm font-medium">{children ?? <span className="italic text-muted-foreground">—</span>}</span>
+    </div>
+  );
+}
+
+function SectionCard({ title, children }) {
+  return (
+    <div className="rounded-lg border bg-card p-5 space-y-4">
+      {title && (<><h2 className="text-sm font-semibold">{title}</h2><Separator /></>)}
+      {children}
+    </div>
+  );
+}
+
+function StatCard({ label, value, color = "default" }) {
+  const colors = {
+    default: "bg-card border",
+    green:   "bg-green-500/5  border-green-500/20",
+    red:     "bg-red-500/5    border-red-500/20",
+    blue:    "bg-blue-500/5   border-blue-500/20",
+  };
+  return (
+    <div className={`rounded-lg border p-4 text-center ${colors[color]}`}>
+      <p className="text-2xl font-bold">{value ?? 0}</p>
+      <p className="text-xs text-muted-foreground mt-0.5">{label}</p>
+    </div>
+  );
+}
+
+const TYPE_LABELS = {
+  multiple_choice: "Multiple Choice",
+  multi_select:    "Multi Select",
+  true_false:      "True / False",
+};
+
+function QuestionView({ question, index }) {
+  return (
+    <div className="rounded-lg border bg-card p-5 space-y-3">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex items-start gap-2 min-w-0">
+          <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-muted text-xs font-semibold text-muted-foreground mt-0.5">
+            {index + 1}
+          </span>
+          <p className="text-sm font-medium leading-snug">
+            {question.question?.trim() || <span className="italic text-muted-foreground">Untitled</span>}
+          </p>
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          <Badge variant="outline" className="text-xs">{TYPE_LABELS[question.type] ?? question.type}</Badge>
+          <span className="text-xs text-muted-foreground whitespace-nowrap">
+            {question.points ?? 1} pt{(question.points ?? 1) !== 1 ? "s" : ""}
+          </span>
+        </div>
+      </div>
+      {question.type === "multi_select" && (() => {
+        const cnt = (question.options ?? []).filter((o) => o.is_correct).length;
+        return cnt > 0 ? (
+          <p className="text-xs font-medium text-blue-600 dark:text-blue-400 pl-8">
+            Students select {cnt} answer{cnt !== 1 ? "s" : ""}
+          </p>
+        ) : null;
+      })()}
+      <ul className="space-y-1.5 pl-8">
+        {(question.options ?? []).map((opt, oi) => (
+          <li key={opt.option_id ?? oi} className="flex items-center gap-2 text-sm">
+            {opt.is_correct ? (
+              <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />
+            ) : (
+              <Circle className="h-4 w-4 text-muted-foreground/40 shrink-0" />
+            )}
+            <span className={opt.is_correct ? "font-medium text-green-700 dark:text-green-400" : "text-muted-foreground"}>
+              {opt.text}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+// ─── Completions tab ──────────────────────────────────────────────────────────
+
+function CompletionRow({ row }) {
+  const [open, setOpen] = useState(false);
+  const { fmtDate, fmtDateTime } = useDateFormat();
+  return (
+    <>
+      <tr
+        className="border-b transition-colors hover:bg-muted/40 cursor-pointer"
+        onClick={() => setOpen((v) => !v)}
+      >
+        <td className="px-4 py-3">
+          <div>
+            <div className="flex items-center gap-1.5">
+              <p className="text-sm font-medium">{row.full_name ?? "Unknown User"}</p>
+              {row.deleted && (
+                <Badge variant="outline" className="text-[10px] px-1.5 py-0 h-[18px] leading-none text-muted-foreground border-muted-foreground/30 shrink-0">
+                  Deleted
+                </Badge>
+              )}
+            </div>
+            <p className="text-xs text-muted-foreground">{row.email ?? "—"}</p>
+          </div>
+        </td>
+        <td className="px-4 py-3 text-center text-sm">{row.attempt_count}</td>
+        <td className="px-4 py-3 text-center">
+          <span className="text-sm font-semibold">{row.best_score}%</span>
+        </td>
+        <td className="px-4 py-3 text-center">
+          {row.passed ? (
+            <Badge className="bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20">Passed</Badge>
+          ) : (
+            <Badge variant="outline" className="text-red-600 dark:text-red-400 border-red-500/20">Not yet</Badge>
+          )}
+        </td>
+        <td className="px-4 py-3 text-xs text-muted-foreground whitespace-nowrap">
+          {row.latest_at ? fmtDate(row.latest_at) : "—"}
+        </td>
+        <td className="px-4 py-3 text-center">
+          {open ? <ChevronUp className="h-4 w-4 mx-auto text-muted-foreground" /> : <ChevronDown className="h-4 w-4 mx-auto text-muted-foreground" />}
+        </td>
+      </tr>
+      {open && (
+        <tr className="bg-muted/30">
+          <td colSpan={6} className="px-6 py-3">
+            <table className="w-full text-xs">
+              <thead>
+                <tr className="text-muted-foreground border-b">
+                  <th className="text-left py-1 font-medium">Attempt</th>
+                  <th className="text-center py-1 font-medium">Score</th>
+                  <th className="text-center py-1 font-medium">Points</th>
+                  <th className="text-center py-1 font-medium">Result</th>
+                  <th className="text-left py-1 font-medium">Date</th>
+                </tr>
+              </thead>
+              <tbody>
+                {(row.attempts ?? []).map((a) => (
+                  <tr key={a.attempt_id} className="border-b border-border/50 last:border-0">
+                    <td className="py-1.5 text-muted-foreground">#{a.attempt_number}</td>
+                    <td className="py-1.5 text-center font-semibold">{a.score}%</td>
+                    <td className="py-1.5 text-center text-muted-foreground">{a.earned_points}/{a.total_points}</td>
+                    <td className="py-1.5 text-center">
+                      {a.passed
+                        ? <span className="text-green-600 dark:text-green-400 font-medium">Pass</span>
+                        : <span className="text-red-500 font-medium">Fail</span>}
+                    </td>
+                    <td className="py-1.5 text-muted-foreground">{fmtDateTime(a.createdAt)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </td>
+        </tr>
+      )}
+    </>
+  );
+}
+
+function CompletionsTab({ completions, loading }) {
+  if (loading) return <div className="space-y-3">{[...Array(3)].map((_, i) => <Skeleton key={i} className="h-12 w-full rounded-lg" />)}</div>;
+
+  if (!completions) return (
+    <div className="rounded-lg border border-dashed bg-card p-12 text-center">
+      <p className="text-sm text-muted-foreground">No data yet.</p>
+    </div>
+  );
+
+  const { summary, completions: rows } = completions;
+
+  return (
+    <div className="space-y-5">
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+        <StatCard label="Total Takers" value={summary.total_takers}   />
+        <StatCard label="Passed"       value={summary.passed_count}   color="green" />
+        <StatCard label="Failed"       value={summary.failed_count}   color="red"   />
+        <StatCard label="Pass Rate"    value={`${summary.pass_rate}%`} color="blue" />
+      </div>
+
+      {rows.length === 0 ? (
+        <div className="rounded-lg border border-dashed bg-card p-10 text-center">
+          <p className="text-sm text-muted-foreground">No one has attempted this quiz yet.</p>
+        </div>
+      ) : (
+        <div className="rounded-lg border bg-card overflow-hidden">
+          <table className="w-full">
+            <thead className="bg-muted/50 border-b">
+              <tr>
+                <th className="text-left px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide">Student</th>
+                <th className="text-center px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide">Attempts</th>
+                <th className="text-center px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide">Best Score</th>
+                <th className="text-center px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide">Status</th>
+                <th className="text-left px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide">Last Attempt</th>
+                <th className="w-8" />
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row) => <CompletionRow key={row.user_id} row={row} />)}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="space-y-4">
+      <Skeleton className="h-32 w-full rounded-lg" />
+      {[...Array(3)].map((_, i) => <Skeleton key={i} className="h-24 w-full rounded-lg" />)}
+    </div>
+  );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+const TABS = [
+  { key: "questions",   label: "Questions",   icon: HelpCircle },
+  { key: "completions", label: "Completions", icon: Users      },
+];
+
+export default function ViewUnitQuiz() {
+  const navigate = useNavigate();
+  const { courseId, unitId } = useParams();
+
+  // Junction revamp — runs course-scoped AND from the standalone Unit Library.
+  const scopeBase = courseId
+    ? `/admin/courses/${courseId}/units/${unitId}`
+    : `/admin/units/${unitId}`;
+
+  const {
+    fetchQuiz, quiz,
+    fetchQuizCompletions, completions,
+    loading,
+  } = useCourses();
+
+  const [activeTab, setActiveTab] = useState("questions");
+
+  useEffect(() => {
+    fetchQuiz(courseId, unitId);
+  }, [courseId, unitId]);
+
+  useEffect(() => {
+    if (!quiz?.quiz_id) return;
+    if (activeTab === "completions") fetchQuizCompletions(courseId, unitId, quiz.quiz_id);
+  }, [activeTab, quiz?.quiz_id]);
+
+  const questions  = quiz?.questions ?? [];
+  const totalPoints = questions.reduce((sum, q) => sum + (q.points ?? 1), 0);
+
+  return (
+    <div className="flex flex-col min-h-screen bg-muted/60">
+      <PageMeta title={quiz ? `${quiz.title ?? "Quiz"} – View - STARR` : undefined} />
+
+      {/* ── Header ── */}
+      <div
+        className="sticky z-20 shrink-0 border-b bg-white/70 dark:bg-zinc-900/70 backdrop-blur-md"
+        style={{ top: "var(--navbar-h)" }}
+      >
+        <div className="lg:container lg:mx-auto lg:px-6 px-4">
+          <div className="flex items-center gap-3 py-3">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate(`${scopeBase}/view`)}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div className="flex-1 min-w-0">
+              <h1 className="text-xl font-semibold leading-tight flex items-center gap-2">
+                <HelpCircle className="h-5 w-5 text-muted-foreground" />
+                View Quiz
+              </h1>
+              {quiz && (
+                <p className="text-sm text-muted-foreground">
+                  {questions.length} question{questions.length !== 1 ? "s" : ""} · {totalPoints} total point{totalPoints !== 1 ? "s" : ""}
+                </p>
+              )}
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => navigate(`${scopeBase}/quiz/edit`)}
+            >
+              <NotebookPen className="h-4 w-4 mr-2" />
+              Modify Quiz
+            </Button>
+          </div>
+
+          {/* Tabs */}
+          {quiz && (
+            <div className="flex gap-1 pb-0 -mb-px">
+              {TABS.map(({ key, label, icon: Icon }) => (
+                <button
+                  key={key}
+                  onClick={() => setActiveTab(key)}
+                  className={`flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors
+                    ${activeTab === key
+                      ? "border-primary text-primary"
+                      : "border-transparent text-muted-foreground hover:text-foreground"}`}
+                >
+                  <Icon className="h-3.5 w-3.5" />
+                  {label}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* ── Content ── */}
+      <div className="lg:container lg:mx-auto lg:px-6 px-4 py-6">
+        <div className="max-w-3xl mx-auto space-y-5 pb-16">
+          {loading && !quiz ? (
+            <LoadingSkeleton />
+          ) : !quiz ? (
+            <div className="rounded-lg border border-dashed bg-card p-12 flex flex-col items-center gap-3 text-center">
+              <HelpCircle className="h-8 w-8 text-muted-foreground/40" />
+              <p className="text-sm text-muted-foreground">No quiz has been created for this unit yet.</p>
+              <Button size="sm" variant="outline" onClick={() => navigate(`${scopeBase}/quiz/edit`)}>
+                <NotebookPen className="h-4 w-4 mr-2" />
+                Create Quiz
+              </Button>
+            </div>
+          ) : activeTab === "questions" ? (
+            <>
+              <SectionCard title="Settings">
+                <div className="grid grid-cols-2 gap-4">
+                  <InfoRow label="Title">{quiz.title || "Unit Quiz"}</InfoRow>
+                  <InfoRow label="Required">
+                    <Badge variant={quiz.is_required ? "default" : "secondary"} className="mt-0.5">
+                      {quiz.is_required ? "Required" : "Optional"}
+                    </Badge>
+                  </InfoRow>
+                  <InfoRow label="Passing Score">{quiz.passing_score ?? 70}%</InfoRow>
+                  <InfoRow label="Max Shown per Attempt">
+                    {quiz.max_questions ? `${quiz.max_questions} (random)` : `All (${questions.length})`}
+                  </InfoRow>
+                  <InfoRow label="Questions in Pool">{questions.length}</InfoRow>
+                  <InfoRow label="Total Points">{totalPoints}</InfoRow>
+                </div>
+              </SectionCard>
+
+              <div className="space-y-3">
+                <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground px-1">Questions</p>
+                {questions.length === 0 ? (
+                  <div className="rounded-lg border border-dashed bg-card p-10 flex flex-col items-center gap-2 text-center">
+                    <p className="text-sm text-muted-foreground">No questions added yet.</p>
+                  </div>
+                ) : (
+                  questions.map((q, i) => <QuestionView key={q.question_id ?? i} question={q} index={i} />)
+                )}
+              </div>
+            </>
+          ) : (
+            <CompletionsTab completions={completions} loading={loading} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/jobs/Jobs.jsx b/apps/web/src/modules/admin/pages/jobs/Jobs.jsx
new file mode 100644
index 0000000..84bfcb4
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/jobs/Jobs.jsx
@@ -0,0 +1,201 @@
+// modules/admin/pages/jobs/Jobs.jsx
+
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { House, ArrowLeft, Clock } from "lucide-react";
+import { toast } from "sonner";
+
+import api from "@/utils/api.util";
+import { useAuth } from "@/contexts/AuthContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Spinner } from "@/components/ui/spinner";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+import { CRON_PRESET_OPTIONS, JOB_LABELS, TARGET_STATUS_OPTIONS } from "@/data/cronPresets.data";
+
+function SectionCard({ children }) {
+    return <div className="rounded-lg border bg-card p-4">{children}</div>;
+}
+
+export default function Jobs() {
+    const navigate = useNavigate();
+    const { user } = useAuth();
+    const { fmtDateTime } = useDateFormat();
+
+    const [settings, setSettings] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [savingJob, setSavingJob] = useState(null);
+
+    const breadcrumbItems = [
+        { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+        { label: "Jobs" },
+    ];
+
+    async function fetchSettings() {
+        setLoading(true);
+        try {
+            const { data } = await api.get("/admin/announcement-settings");
+            setSettings(data?.data ?? []);
+        } catch (err) {
+            toast(err?.response?.data?.message ?? "Failed to load jobs.");
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    useEffect(() => { fetchSettings(); }, []);
+
+    async function handleToggle(jobName, enabled) {
+        setSavingJob(jobName);
+        try {
+            const { data } = await api.patch(`/admin/announcement-settings/${jobName}`, {
+                enabled,
+                updatedBy: user?.user_id ?? null,
+            });
+            const updated = data?.data?.data;
+            setSettings((prev) => prev.map((s) => (s.job_name === jobName ? { ...s, ...updated } : s)));
+            toast(
+                `${JOB_LABELS[jobName]?.label ?? jobName} ${enabled ? "enabled" : "disabled"}.`
+            );
+        } catch (err) {
+            toast(err?.response?.data?.message ?? "Failed to update setting.");
+        } finally {
+            setSavingJob(null);
+        }
+    }
+
+    async function handlePresetChange(jobName, preset) {
+        setSavingJob(jobName);
+        try {
+            const { data } = await api.patch(`/admin/announcement-settings/${jobName}`, {
+                preset,
+                updatedBy: user?.user_id ?? null,
+            });
+            const updated = data?.data?.data;
+            setSettings((prev) => prev.map((s) => (s.job_name === jobName ? { ...s, ...updated, preset } : s)));
+            toast("Schedule updated — took effect immediately, no restart needed.");
+        } catch (err) {
+            toast(err?.response?.data?.message ?? "Failed to update schedule.");
+        } finally {
+            setSavingJob(null);
+        }
+    }
+
+    async function handleTargetStatusChange(jobName, target_status) {
+        setSavingJob(jobName);
+        try {
+            const { data } = await api.patch(`/admin/announcement-settings/${jobName}`, {
+                target_status,
+                updatedBy: user?.user_id ?? null,
+            });
+            const updated = data?.data?.data;
+            setSettings((prev) => prev.map((s) => (s.job_name === jobName ? { ...s, ...updated, target_status } : s)));
+            toast("Target status updated.");
+        } catch (err) {
+            toast(err?.response?.data?.message ?? "Failed to update target status.");
+        } finally {
+            setSavingJob(null);
+        }
+    }
+
+    return (
+        <section className="bg-muted h-full">
+            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-center px-4">
+                <div className="flex flex-col gap-2 my-6 w-full">
+                    <AppBreadcrumb items={breadcrumbItems} />
+                </div>
+
+                <div className="w-full max-w-2xl pb-10 space-y-5">
+                    <div className="flex items-center gap-2">
+                        <Button variant="ghost" size="icon" onClick={() => navigate("/admin")} aria-label="Back">
+                            <ArrowLeft className="size-4" />
+                        </Button>
+                        <div>
+                            <h1 className="text-xl font-semibold tracking-tight">Jobs</h1>
+                            <p className="text-sm text-muted-foreground">
+                                Toggle and reschedule automatic announcement jobs without a deploy.
+                            </p>
+                        </div>
+                    </div>
+
+                    {loading ? (
+                        <div className="flex items-center justify-center py-20">
+                            <Spinner className="size-6" />
+                        </div>
+                    ) : (
+                        <div className="space-y-3">
+                            {settings.map((s) => {
+                                const meta = JOB_LABELS[s.job_name] ?? {};
+                                const isSaving = savingJob === s.job_name;
+                                return (
+                                    <SectionCard key={s.job_name}>
+                                        <div className="flex items-start justify-between gap-4">
+                                            <div className="flex-1">
+                                                <p className="text-sm font-medium">{meta.label ?? s.label ?? s.job_name}</p>
+                                                <p className="text-xs text-muted-foreground mt-0.5">{meta.description ?? s.description}</p>
+                                                {s.updatedAt && (
+                                                    <p className="text-xs text-muted-foreground mt-1 flex items-center gap-1">
+                                                        <Clock className="size-3" />
+                                                        Last updated {fmtDateTime(s.updatedAt)}
+                                                    </p>
+                                                )}
+                                            </div>
+                                            <Switch
+                                                checked={s.enabled}
+                                                disabled={isSaving}
+                                                onCheckedChange={(v) => handleToggle(s.job_name, v)}
+                                            />
+                                        </div>
+
+                                        <div className="mt-3 flex items-center gap-2">
+                                            <span className="text-xs text-muted-foreground">Runs:</span>
+                                            <Select
+                                                value={s.preset ?? undefined}
+                                                disabled={isSaving}
+                                                onValueChange={(v) => handlePresetChange(s.job_name, v)}
+                                            >
+                                                <SelectTrigger className="w-[180px] h-8 text-xs">
+                                                    <SelectValue placeholder={s.schedule} />
+                                                </SelectTrigger>
+                                                <SelectContent>
+                                                    {CRON_PRESET_OPTIONS.map((p) => (
+                                                        <SelectItem key={p.value} value={p.value}>{p.label}</SelectItem>
+                                                    ))}
+                                                </SelectContent>
+                                            </Select>
+                                            {isSaving && <Spinner className="size-3.5" />}
+                                        </div>
+
+                                        {s.target_status != null && (
+                                            <div className="mt-2 flex items-center gap-2">
+                                                <span className="text-xs text-muted-foreground">Marks tasks as:</span>
+                                                <Select
+                                                    value={s.target_status}
+                                                    disabled={isSaving}
+                                                    onValueChange={(v) => handleTargetStatusChange(s.job_name, v)}
+                                                >
+                                                    <SelectTrigger className="w-[180px] h-8 text-xs">
+                                                        <SelectValue />
+                                                    </SelectTrigger>
+                                                    <SelectContent>
+                                                        {TARGET_STATUS_OPTIONS.map((o) => (
+                                                            <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
+                                                        ))}
+                                                    </SelectContent>
+                                                </Select>
+                                                {isSaving && <Spinner className="size-3.5" />}
+                                            </div>
+                                        )}
+                                    </SectionCard>
+                                );
+                            })}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </section>
+    );
+}
diff --git a/apps/web/src/modules/admin/pages/library/lessons/AddLibraryLesson.jsx b/apps/web/src/modules/admin/pages/library/lessons/AddLibraryLesson.jsx
new file mode 100644
index 0000000..f896780
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/library/lessons/AddLibraryLesson.jsx
@@ -0,0 +1,422 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { useForm, useWatch } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { nanoid } from "nanoid";
+import {
+  ArrowLeft, ChevronLeft, ChevronRight, Check,
+  FileText, LayoutTemplate, ClipboardCheck, ListChecks,
+} from "lucide-react";
+
+import { useLibrary } from "@/contexts/AdminLibraryContext";
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import DraftRequirementsEditor, { DraftRequirementsSummary } from "@/modules/admin/components/courses/DraftRequirementsEditor";
+import { useAuth } from "@/contexts/AuthContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import api from "@/utils/api.util";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import {
+  Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription,
+  DrawerFooter, DrawerClose,
+} from "@/components/ui/drawer";
+import { BlockList, DEFAULT_CONTENT } from "@/components/generic/BlockList";
+import { AddBlockMenu } from "@/components/generic/AddBlockMenu";
+import { PreviewContent, PreviewChrome } from "../../../components/courses/LessonsPreview";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+
+function makeBlock(type) {
+  return { id: nanoid(), type, content: { ...DEFAULT_CONTENT[type] } };
+}
+
+const schema = z.object({
+  title: z.string().min(1, "Title is required."),
+  description: z.string().optional(),
+  subscription: z.string().optional(),
+  blocks: z.array(z.any()).optional(),
+});
+
+const DEFAULT_VALUES = { title: "", description: "", subscription: "free", blocks: [] };
+
+const STEPS = [
+  { id: 0, label: "Lesson",       icon: FileText },
+  { id: 1, label: "Page Builder", icon: LayoutTemplate },
+  { id: 2, label: "Requirements", icon: ListChecks },
+  { id: 3, label: "Review",       icon: ClipboardCheck },
+];
+
+// Fields validated with trigger() before advancing past each step.
+// Empty array means "validate the whole form" (nothing new to check that step).
+const STEP_FIELDS = [["title", "description", "subscription"], [], []];
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+// ─── Step 1 — Lesson ───────────────────────────────────────────────────────────
+function StepLesson({ register, errors, control, setValue, tierCategories }) {
+  const watchedSubscr = useWatch({ control, name: "subscription" });
+  const defaultTierSlug = tierCategories.find((c) => c.is_default)?.slug || "free";
+
+  return (
+    <div className="space-y-5">
+      <div className="space-y-1.5">
+        <Label htmlFor="title">Title <span className="text-destructive">*</span></Label>
+        <Input id="title" placeholder="Lesson title" {...register("title")} />
+        <FieldError message={errors.title?.message} />
+      </div>
+
+      <div className="space-y-1.5">
+        <Label htmlFor="description">Description</Label>
+        <Textarea id="description" placeholder="Optional description" rows={3} {...register("description")} />
+      </div>
+
+      <div className="space-y-1.5">
+        <Label>Subscription</Label>
+        <Select
+          value={watchedSubscr || defaultTierSlug}
+          onValueChange={(val) => setValue("subscription", val, { shouldDirty: true })}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="No subscription gate" />
+          </SelectTrigger>
+          <SelectContent>
+            {tierCategories.map((c) => (
+              <SelectItem key={c.slug} value={c.slug}>
+                {c.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <p className="text-xs text-muted-foreground">
+          Optional. Gates this lesson directly, independent of any unit it may later be attached to.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ─── Step 2 — Page Builder ──────────────────────────────────────────────────────
+function StepPageBuilder({ control, setValue, getValues }) {
+  const title = useWatch({ control, name: "title" });
+  const description = useWatch({ control, name: "description" });
+  const blocks = useWatch({ control, name: "blocks" }) ?? [];
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  const setBlocks = (updater) => {
+    const next = typeof updater === "function" ? updater(getValues("blocks") ?? []) : updater;
+    setValue("blocks", next, { shouldDirty: true });
+  };
+
+  const addBlock    = (type) => setBlocks((prev) => [...prev, makeBlock(type)]);
+  const updateBlock = (id, content) => setBlocks((prev) => prev.map((b) => (b.id === id ? { ...b, content } : b)));
+  const deleteBlock = (id) => setBlocks((prev) => prev.filter((b) => b.id !== id));
+  const moveBlock   = (id, direction) => setBlocks((prev) => {
+    const index = prev.findIndex((b) => b.id === id);
+    const swapIndex = direction === "up" ? index - 1 : index + 1;
+    if (swapIndex < 0 || swapIndex >= prev.length) return prev;
+    const next = [...prev];
+    [next[index], next[swapIndex]] = [next[swapIndex], next[index]];
+    return next;
+  });
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between border border-border rounded-lg p-4">
+        <div>
+          <p className="text-sm font-medium">{title || "Untitled lesson"}</p>
+          <p className="text-xs text-muted-foreground">
+            {blocks.length} block{blocks.length !== 1 ? "s" : ""}
+          </p>
+        </div>
+        <Button type="button" variant="outline" size="sm" onClick={() => setDrawerOpen(true)}>
+          <LayoutTemplate className="h-4 w-4 mr-1.5" />
+          Open Page Builder
+        </Button>
+      </div>
+
+      <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} shouldScaleBackground>
+        <DrawerContent className="data-[vaul-drawer-direction=bottom]:max-h-[90vh]">
+          <DrawerHeader className="border-b text-left">
+            <DrawerTitle>Page Builder</DrawerTitle>
+            <DrawerDescription>{title || "Untitled lesson"}</DrawerDescription>
+          </DrawerHeader>
+
+          <div className="flex-1 overflow-y-auto p-4">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+                  Editor
+                  {blocks.length > 0 && (
+                    <span className="text-xs font-normal">· {blocks.length} block{blocks.length !== 1 ? "s" : ""}</span>
+                  )}
+                </div>
+                <BlockList blocks={blocks} onUpdate={updateBlock} onMove={moveBlock} onDelete={deleteBlock} />
+                <AddBlockMenu onAdd={addBlock} />
+              </div>
+
+              <div className="space-y-3">
+                <div className="text-sm font-medium text-muted-foreground">Live Preview</div>
+                <PreviewChrome title={title}>
+                  <div className="p-6 space-y-5 min-h-[300px]">
+                    <PreviewContent
+                      lesson={{ title, description }}
+                      blocks={blocks}
+                      empty="Your content will appear here as you build."
+                    />
+                  </div>
+                </PreviewChrome>
+              </div>
+            </div>
+          </div>
+
+          <DrawerFooter className="border-t flex-row justify-end">
+            <DrawerClose asChild>
+              <Button type="button">Done</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  );
+}
+
+// ─── Step 3 — Requirements ───────────────────────────────────────────────────────
+function StepRequirements({ requirements, setRequirements, blockTypes }) {
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">
+        Configure how learners complete this lesson — optional, sensible defaults apply automatically. This is created together with the rest of the lesson when you finish.
+      </p>
+      <DraftRequirementsEditor entityType="lesson" items={requirements} onChange={setRequirements} blockTypes={blockTypes} />
+    </div>
+  );
+}
+
+// ─── Step 4 — Review ─────────────────────────────────────────────────────────────
+function SummaryRow({ label, value }) {
+  if (!value) return null;
+  return (
+    <div className="flex justify-between py-1.5 text-sm">
+      <span className="text-muted-foreground min-w-[140px]">{label}</span>
+      <span className="text-foreground text-right">{value}</span>
+    </div>
+  );
+}
+
+function StepReview({ data, attachUnitId, requirements, tierCategories }) {
+  const tierName = tierCategories.find((c) => c.slug === data.subscription)?.name;
+
+  return (
+    <div className="space-y-4">
+      <div className="border border-border rounded-lg p-4 space-y-1">
+        <div className="flex items-center gap-2 mb-3">
+          <FileText className="h-4 w-4 text-muted-foreground" />
+          <span className="text-sm font-medium">Lesson</span>
+        </div>
+        <SummaryRow label="Title" value={data.title} />
+        <SummaryRow label="Description" value={data.description} />
+        <SummaryRow label="Subscription" value={tierName || "Free"} />
+        <SummaryRow label="Page content" value={`${(data.blocks ?? []).length} block(s)`} />
+        {attachUnitId && <SummaryRow label="Attaches to" value="The unit you came from" />}
+      </div>
+
+      <DraftRequirementsSummary entityType="lesson" items={requirements} />
+    </div>
+  );
+}
+
+// ─── Main Page ──────────────────────────────────────────────────────────────────
+export default function AddLibraryLesson() {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { createLesson, saveLessonPage, loading } = useLibrary();
+  const { syncLessonRequirements } = useCourses();
+  const { user } = useAuth();
+
+  // ?unit_id=… → create-and-attach in one call (from the unit lessons manager)
+  const attachUnitId = searchParams.get("unit_id");
+
+  const [step, setStep] = useState(0);
+  const [requirements, setRequirements] = useState([]);
+  const [tierCategories, setTierCategories] = useState([]);
+
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => setTierCategories((data.data ?? []).filter((c) => c.is_active)))
+      .catch(() => {});
+  }, []);
+
+  const {
+    register, control, trigger, getValues, setValue,
+    formState: { errors, isDirty },
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: DEFAULT_VALUES,
+    mode: "onTouched",
+  });
+
+  const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty || requirements.length > 0);
+
+  const handleNext = async () => {
+    const fields = STEP_FIELDS[step];
+    const valid = await trigger(fields.length ? fields : undefined);
+    if (valid) setStep((s) => Math.min(s + 1, STEPS.length - 1));
+  };
+
+  const handleBack = () => {
+    if (step === 0) navigate(attachUnitId ? `/admin/units/${attachUnitId}/view` : "/admin/lessons");
+    else setStep((s) => s - 1);
+  };
+
+  // The one and only persistence point — nothing is created until this final
+  // click at Review, so Requirements (the step before it) is purely a draft
+  // form. No <form> tag wraps the wizard, so this is invoked manually.
+  const handleCreate = async () => {
+    const valid = await trigger();
+    if (!valid) return;
+
+    const data = getValues();
+    const result = await createLesson({
+      title: data.title,
+      description: data.description || null,
+      subscription: data.subscription || (tierCategories.find((c) => c.is_default)?.slug || "free"),
+      ...(attachUnitId ? { unit_id: attachUnitId } : {}),
+      createdBy: user?.user_id,
+    });
+    if (!result) return;
+
+    const lessonId = result?.data?.data?.lesson_id;
+    if (!lessonId) return;
+
+    if ((data.blocks ?? []).length > 0) {
+      await saveLessonPage(lessonId, { blocks: data.blocks, updatedBy: user?.user_id });
+    }
+
+    if (requirements.length > 0) {
+      const clean = requirements.map(({ _key, ...r }) => r);
+      await syncLessonRequirements(null, null, lessonId, clean);
+    }
+
+    bypassOnce();
+    navigate(attachUnitId ? `/admin/units/${attachUnitId}/view` : "/admin/lessons");
+  };
+
+  return (
+    <section className="bg-muted min-h-full">
+      <PageMeta title="Add Lesson - STARR" />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-center px-4 py-10">
+        <div className="w-full max-w-3xl mx-auto space-y-6">
+
+          <div className="flex items-center gap-3">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate(attachUnitId ? `/admin/units/${attachUnitId}/view` : "/admin/lessons")}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Create Lesson</h1>
+              <p className="text-sm text-muted-foreground">
+                {attachUnitId
+                  ? "This lesson will be created and attached to the unit you came from."
+                  : "Lessons are standalone — attach this one to any unit later, or run it on its own."}
+              </p>
+            </div>
+          </div>
+
+          {/* Stepper */}
+          <div className="flex items-center gap-0">
+            {STEPS.map((s, i) => {
+              const Icon = s.icon;
+              const isActive = step === i;
+              const isDone = step > i;
+
+              return (
+                <div key={s.id} className="flex items-center flex-1 last:flex-none">
+                  <div className="flex flex-col items-center gap-1">
+                    <div className={cn(
+                      "h-8 w-8 rounded-full flex items-center justify-center border transition-colors",
+                      isDone   && "bg-emerald-600 border-emerald-600 text-white",
+                      isActive && "border-primary bg-primary text-primary-foreground",
+                      !isActive && !isDone && "border-border bg-background text-muted-foreground"
+                    )}>
+                      {isDone ? <Check className="h-4 w-4" /> : <Icon className="h-4 w-4" />}
+                    </div>
+                    <span className={cn(
+                      "text-[11px] font-medium whitespace-nowrap hidden sm:block",
+                      isActive ? "text-foreground"  : "text-muted-foreground",
+                      isDone   ? "text-emerald-600" : ""
+                    )}>
+                      {s.label}
+                    </span>
+                  </div>
+                  {i < STEPS.length - 1 && (
+                    <div className={cn(
+                      "flex-1 h-px mx-2 mb-4 transition-colors",
+                      step > i ? "bg-emerald-600" : "bg-border"
+                    )} />
+                  )}
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Step content */}
+          <div className="rounded-lg border bg-card p-6 min-h-[320px]">
+            <h2 className="text-base font-medium mb-4">{STEPS[step].label}</h2>
+
+            {step === 0 && (
+              <StepLesson register={register} errors={errors} control={control} setValue={setValue} tierCategories={tierCategories} />
+            )}
+            {step === 1 && (
+              <StepPageBuilder control={control} setValue={setValue} getValues={getValues} />
+            )}
+            {step === 2 && (
+              <StepRequirements
+                requirements={requirements}
+                setRequirements={setRequirements}
+                blockTypes={(getValues("blocks") ?? []).map((b) => b.type)}
+              />
+            )}
+            {step === 3 && (
+              <StepReview data={getValues()} attachUnitId={attachUnitId} requirements={requirements} tierCategories={tierCategories} />
+            )}
+          </div>
+
+          {/* Navigation */}
+          <div className="flex items-center justify-between gap-3">
+            <Button type="button" variant="outline" onClick={handleBack} disabled={loading}>
+              <ChevronLeft className="h-4 w-4 mr-1" />
+              {step === 0 ? "Cancel" : "Back"}
+            </Button>
+
+            {step < STEPS.length - 1 ? (
+              <Button type="button" onClick={handleNext}>
+                Next
+                <ChevronRight className="h-4 w-4 ml-1" />
+              </Button>
+            ) : (
+              // Only the true final step (Review) actually persists anything —
+              // the lesson, its page content, and any draft requirements are
+              // all created together in one shot here.
+              <Button type="button" onClick={handleCreate} disabled={loading}>
+                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                Create Lesson
+              </Button>
+            )}
+          </div>
+
+        </div>
+      </div>
+
+      {unsavedChangesDialog}
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/library/lessons/ArchivedLessonLibraryList.jsx b/apps/web/src/modules/admin/pages/library/lessons/ArchivedLessonLibraryList.jsx
new file mode 100644
index 0000000..6cb6ccc
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/library/lessons/ArchivedLessonLibraryList.jsx
@@ -0,0 +1,26 @@
+import { House } from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import ArchivedLessonLibraryTable from "../../../components/library/ArchivedLessonLibraryTable";
+import { PageMeta } from "@/contexts/MetadataContext";
+
+export default function ArchivedLessonLibraryList() {
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Lessons", to: "/admin/lessons" },
+    { label: "Archived" },
+  ];
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title="Archived Lessons - STARR" />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+        <div className="w-full">
+          <ArchivedLessonLibraryTable />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/library/lessons/EditLibraryLesson.jsx b/apps/web/src/modules/admin/pages/library/lessons/EditLibraryLesson.jsx
new file mode 100644
index 0000000..e8165e7
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/library/lessons/EditLibraryLesson.jsx
@@ -0,0 +1,161 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useForm, useWatch } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft } from "lucide-react";
+
+import { useLibrary } from "@/contexts/AdminLibraryContext";
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import api from "@/utils/api.util";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+import CompletionRequirementBuilder from "@/modules/admin/components/courses/CompletionRequirementBuilder";
+
+const schema = z.object({
+  title: z.string().min(1, "Title is required."),
+  description: z.string().optional(),
+  subscription: z.string().optional(),
+});
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+export default function EditLibraryLesson() {
+  const navigate = useNavigate();
+  const { lessonId } = useParams();
+  const { fetchLesson, updateLesson, lesson, loading } = useLibrary();
+  const { fetchLessonRequirements, syncLessonRequirements } = useCourses();
+  const { user } = useAuth();
+
+  const [tierCategories, setTierCategories] = useState([]);
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => setTierCategories((data.data ?? []).filter((c) => c.is_active)))
+      .catch(() => {});
+  }, []);
+
+  const { register, handleSubmit, reset, control, setValue, formState: { errors, isDirty } } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { title: "", description: "", subscription: "free" },
+  });
+
+  const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty);
+
+  const watchedSubscr = useWatch({ control, name: "subscription" });
+  const defaultTierSlug = tierCategories.find((c) => c.is_default)?.slug || "free";
+
+  useEffect(() => {
+    fetchLesson(lessonId);
+  }, [lessonId]);
+
+  useEffect(() => {
+    if (lesson && String(lesson.lesson_id) === String(lessonId)) {
+      reset({ title: lesson.title ?? "", description: lesson.description ?? "", subscription: lesson.subscription || defaultTierSlug });
+    }
+  }, [lesson, lessonId, reset]);
+
+  const onSubmit = async (data) => {
+    const result = await updateLesson(lessonId, { ...data, subscription: data.subscription || defaultTierSlug, updatedBy: user?.user_id });
+    if (!result) return;
+    bypassOnce();
+    navigate(`/admin/lessons/${lessonId}/view`);
+  };
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title={lesson ? `Edit Lesson – ${lesson.title} - STARR` : undefined} />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-center px-4 py-10">
+
+        <div className="w-full max-w-2xl mx-auto">
+          <div className="flex items-center gap-3 mb-6">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate(`/admin/lessons/${lessonId}/view`)}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Edit Lesson</h1>
+              <p className="text-sm text-muted-foreground">
+                Changes apply everywhere this lesson is attached.
+              </p>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <div className="rounded-lg border bg-card p-6 space-y-5">
+
+              <div className="space-y-1.5">
+                <Label htmlFor="title">Title <span className="text-destructive">*</span></Label>
+                <Input id="title" placeholder="Lesson title" {...register("title")} />
+                <FieldError message={errors.title?.message} />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="description">Description</Label>
+                <Textarea id="description" placeholder="Optional description" rows={3} {...register("description")} />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label>Subscription</Label>
+                <Select
+                  value={watchedSubscr || defaultTierSlug}
+                  onValueChange={(val) => setValue("subscription", val, { shouldDirty: true })}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="No subscription gate" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {tierCategories.map((c) => (
+                      <SelectItem key={c.slug} value={c.slug}>
+                        {c.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <p className="text-xs text-muted-foreground">
+                  Optional. Gates this lesson directly, independent of any unit it may later be attached to.
+                </p>
+              </div>
+
+            </div>
+
+            <div className="flex justify-end gap-3">
+              <Button type="button" variant="outline" onClick={() => navigate(`/admin/lessons/${lessonId}/view`)} disabled={loading}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={loading}>
+                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                Save Changes
+              </Button>
+            </div>
+          </form>
+
+          <div className="rounded-lg border bg-card p-6 space-y-4 mt-6">
+            <div>
+              <h2 className="text-sm font-semibold">Completion Requirements</h2>
+              <p className="text-xs text-muted-foreground">What a learner must do for this lesson to count as complete, wherever it's attached.</p>
+            </div>
+            <CompletionRequirementBuilder
+              entityType="lesson"
+              fetchFn={fetchLessonRequirements}
+              syncFn={syncLessonRequirements}
+              args={[null, null, lessonId]}
+            />
+          </div>
+        </div>
+      </div>
+
+      {unsavedChangesDialog}
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/library/lessons/LessonLibraryList.jsx b/apps/web/src/modules/admin/pages/library/lessons/LessonLibraryList.jsx
new file mode 100644
index 0000000..eede3c7
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/library/lessons/LessonLibraryList.jsx
@@ -0,0 +1,37 @@
+import { House, Layers } from "lucide-react";
+import { Link } from "react-router-dom";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import LessonLibraryTable from "../../../components/library/LessonLibraryTable";
+import { PageMeta } from "@/contexts/MetadataContext";
+
+export default function LessonLibraryList() {
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Lessons" },
+  ];
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title="Lessons Library - STARR" description="Manage standalone lessons — attach them to any unit." />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+        <div className="w-full space-y-4">
+          {/* <div className="flex items-start gap-3 rounded-lg border bg-card p-4 text-sm">
+            <Layers className="h-4 w-4 mt-0.5 shrink-0 text-muted-foreground" />
+            <p className="text-muted-foreground">
+              Lessons run <span className="font-medium text-foreground">independently</span> — build content here once,
+              then attach it to any number of{" "}
+              <Link to="/admin/units" className="text-primary hover:underline font-medium">
+                Units
+              </Link>
+              . Removing a lesson from a unit only detaches it; the lesson stays in this library.
+            </p>
+          </div> */}
+          <LessonLibraryTable />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/library/lessons/ViewLibraryLesson.jsx b/apps/web/src/modules/admin/pages/library/lessons/ViewLibraryLesson.jsx
new file mode 100644
index 0000000..d47c605
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/library/lessons/ViewLibraryLesson.jsx
@@ -0,0 +1,201 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams, Link } from "react-router-dom";
+import {
+  House, Pencil, LayoutTemplate, Clock, BookCheck, Link2, Unlink,
+} from "lucide-react";
+
+import { useLibrary } from "@/contexts/AdminLibraryContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import AttachLessonToUnitsDialog from "../../../components/library/AttachLessonToUnitsDialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Spinner } from "@/components/ui/spinner";
+import { formatDuration } from "@/utils/timestamp.util";
+import { PreviewChrome, PreviewContent } from "../../../components/courses/LessonsPreview";
+
+export default function ViewLibraryLesson() {
+  const navigate = useNavigate();
+  const { lessonId } = useParams();
+  const { fetchLesson, lesson, loading, attachLessonToUnits, detachLessonFromUnit } = useLibrary();
+  const [initializing, setInitializing] = useState(true);
+  const [attachOpen, setAttachOpen] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      await fetchLesson(lessonId);
+      setInitializing(false);
+    })();
+  }, [lessonId]);
+
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Lessons", to: "/admin/lessons" },
+    { label: lesson?.title ?? "..." },
+  ];
+
+  const units = lesson?.units ?? [];
+  const blocks = lesson?.page?.blocks ?? [];
+  const objectives = lesson?.objectives ?? [];
+
+  const handleAttach = async (unitIds) => {
+    await attachLessonToUnits(lessonId, unitIds);
+    fetchLesson(lessonId);
+  };
+
+  const handleDetach = async (unitId) => {
+    await detachLessonFromUnit(unitId, lessonId);
+    fetchLesson(lessonId);
+  };
+
+  if (initializing) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <Spinner className="h-6 w-6" />
+      </div>
+    );
+  }
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title={lesson ? `${lesson.title} - Lessons - STARR` : undefined} />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full space-y-6 pb-10">
+
+          {/* ── Lesson header ── */}
+          <div className="bg-card rounded-xl border p-6 space-y-4">
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <h1 className="text-xl font-semibold">{lesson?.title}</h1>
+                {lesson?.description && (
+                  <p className="text-sm text-muted-foreground mt-0.5">{lesson.description}</p>
+                )}
+              </div>
+              <div className="flex gap-2 shrink-0">
+                {units.length === 0 && (
+                  <Button size="sm" variant="outline" onClick={() => setAttachOpen(true)}>
+                    <Link2 className="h-3.5 w-3.5 mr-1.5" /> Attach to Unit
+                  </Button>
+                )}
+                {units.map((u) => (
+                  <Button
+                    key={u.unit_id}
+                    size="sm"
+                    variant="destructive"
+                    onClick={() => handleDetach(u.unit_id)}
+                    disabled={loading}
+                    title={`Detach from ${u.title} (lesson stays in library)`}
+                  >
+                    <Unlink className="h-3.5 w-3.5 mr-1.5" /> Detach from Unit
+                  </Button>
+                ))}
+                <Button size="sm" variant="outline" onClick={() => navigate(`/admin/lessons/${lessonId}/edit`)}>
+                  <Pencil className="h-3.5 w-3.5 mr-1.5" /> Edit
+                </Button>
+                <Button size="sm" onClick={() => navigate(`/admin/lessons/${lessonId}/page/view`)}>
+                  <LayoutTemplate className="h-3.5 w-3.5 mr-1.5" /> Page Builder
+                </Button>
+              </div>
+            </div>
+
+            {/* Stats row */}
+            <div className="grid grid-cols-2 lg:grid-cols-5 gap-3">
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Blocks</p>
+                <p className="font-semibold text-sm">{blocks.length}</p>
+              </div>
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Duration</p>
+                <p className="font-semibold text-sm flex items-center gap-1">
+                  <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+                  {formatDuration(lesson?.duration_seconds ?? 0)}
+                </p>
+              </div>
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Objectives</p>
+                <p className="font-semibold text-sm">{objectives.length}</p>
+              </div>
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Used In</p>
+                <p className="font-semibold text-sm">
+                  {units.length > 0 ? `${units.length} unit${units.length === 1 ? "" : "s"}` : "Standalone"}
+                </p>
+              </div>
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Subscription</p>
+                <Badge variant={lesson?.subscription ? "outline" : "secondary"} className="capitalize">
+                  {lesson?.subscription ?? "No subscription gate"}
+                </Badge>
+              </div>
+            </div>
+
+            {/* Attached units */}
+            {units.length > 0 && (
+              <div className="flex flex-wrap items-center gap-2 pt-1">
+                <span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Units:</span>
+                {units.map((u) => (
+                  <Link key={u.unit_id} to={`/admin/units/${u.unit_id}/view`}>
+                    <Badge variant="secondary" className="hover:bg-muted cursor-pointer">
+                      <BookCheck className="h-3 w-3 mr-1" /> {u.title}
+                    </Badge>
+                  </Link>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* ── Objectives ── */}
+          {objectives.length > 0 && (
+            <div className="bg-card rounded-xl border p-6 space-y-3">
+              <h2 className="font-semibold">Objectives</h2>
+              <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground">
+                {[...objectives]
+                  .sort((a, b) => (a.order_index ?? 0) - (b.order_index ?? 0))
+                  .map((o) => <li key={o.objective_id}>{o.text}</li>)}
+              </ul>
+            </div>
+          )}
+
+          {/* ── Content preview ── */}
+          <div className="space-y-2">
+            <h2 className="font-semibold px-1">Content</h2>
+            <PreviewChrome title={lesson?.title}>
+              <div className="p-3 sm:p-5 min-h-[200px]">
+                <PreviewContent
+                  lesson={lesson}
+                  blocks={blocks}
+                  showHeader={false}
+                  empty="No content blocks yet."
+                />
+                {blocks.length === 0 && (
+                  <div className="flex justify-center pt-4">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() => navigate(`/admin/lessons/${lessonId}/page`)}
+                    >
+                      Go to Page Builder
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </PreviewChrome>
+          </div>
+        </div>
+      </div>
+
+      <AttachLessonToUnitsDialog
+        open={attachOpen}
+        onOpenChange={setAttachOpen}
+        attachedUnitIds={units.map((u) => u.unit_id)}
+        onAttach={handleAttach}
+        loading={loading}
+      />
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/library/units/AddLibraryUnit.jsx b/apps/web/src/modules/admin/pages/library/units/AddLibraryUnit.jsx
new file mode 100644
index 0000000..b0b749d
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/library/units/AddLibraryUnit.jsx
@@ -0,0 +1,748 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useForm, useFieldArray, useWatch } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { nanoid } from "nanoid";
+import {
+  ArrowLeft, ChevronLeft, ChevronRight, Check,
+  FileText, BookOpen, LayoutTemplate, ClipboardCheck, ListChecks,
+  Plus, Trash2, Link2, Eye,
+} from "lucide-react";
+
+import { useLibrary } from "@/contexts/AdminLibraryContext";
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import DraftRequirementsEditor, { DraftRequirementsSummary } from "@/modules/admin/components/courses/DraftRequirementsEditor";
+import { useAuth } from "@/contexts/AuthContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import api from "@/utils/api.util";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription,
+  DrawerFooter, DrawerClose,
+} from "@/components/ui/drawer";
+import { BlockList, DEFAULT_CONTENT } from "@/components/generic/BlockList";
+import { AddBlockMenu } from "@/components/generic/AddBlockMenu";
+import AttachLessonsDialog from "@/modules/admin/components/library/AttachLessonsDialog";
+import { PreviewContent, PreviewChrome } from "../../../components/courses/LessonsPreview";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+
+function makeBlock(type) {
+  return { id: nanoid(), type, content: { ...DEFAULT_CONTENT[type] } };
+}
+
+// ─── Schema ───────────────────────────────────────────────────────────────────
+const lessonSchema = z.object({
+  title: z.string().min(1, "Title is required."),
+  description: z.string().optional(),
+  objectives: z.array(
+    z.object({ value: z.string().min(1, "Objective cannot be empty.") })
+  ).optional(),
+  blocks: z.array(z.any()).optional(),
+});
+
+const schema = z.object({
+  title: z.string().min(1, "Title is required."),
+  description: z.string().optional(),
+  subscription: z.string().optional(),
+  lessons: z.array(lessonSchema).optional(),
+});
+
+const DEFAULT_VALUES = {
+  title: "",
+  description: "",
+  subscription: "free",
+  lessons: [],
+};
+
+const STEPS = [
+  { id: 0, label: "Create Unit",  icon: FileText },
+  { id: 1, label: "Lessons",      icon: BookOpen },
+  { id: 2, label: "Page Builder", icon: LayoutTemplate },
+  { id: 3, label: "Requirements", icon: ListChecks },
+  { id: 4, label: "Review",       icon: ClipboardCheck },
+];
+
+// Fields validated with trigger() before advancing past each step.
+// Empty array means "validate the whole form" (nothing new to check that step).
+const STEP_FIELDS = [["title", "description", "subscription"], ["lessons"], [], []];
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+// ─── Step 1 — Create Unit ─────────────────────────────────────────────────────
+function StepUnit({ register, errors, control, setValue, tierCategories }) {
+  const watchedSubscr = useWatch({ control, name: "subscription" });
+  const defaultTierSlug = tierCategories.find((c) => c.is_default)?.slug || "free";
+
+  return (
+    <div className="space-y-5">
+      <div className="space-y-1.5">
+        <Label htmlFor="title">Title <span className="text-destructive">*</span></Label>
+        <Input id="title" placeholder="Unit title" {...register("title")} />
+        <FieldError message={errors.title?.message} />
+      </div>
+
+      <div className="space-y-1.5">
+        <Label htmlFor="description">Description</Label>
+        <Textarea id="description" placeholder="Optional description" rows={3} {...register("description")} />
+      </div>
+
+      <div className="space-y-1.5">
+        <Label>Subscription</Label>
+        <Select
+          value={watchedSubscr || defaultTierSlug}
+          onValueChange={(val) => setValue("subscription", val, { shouldDirty: true })}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="No subscription gate" />
+          </SelectTrigger>
+          <SelectContent>
+            {tierCategories.map((c) => (
+              <SelectItem key={c.slug} value={c.slug}>
+                {c.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <p className="text-xs text-muted-foreground">
+          Optional. Gates this unit directly, independent of any course it may later be attached to.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ─── Step 2 — Lessons ──────────────────────────────────────────────────────────
+function LessonObjectives({ control, register, lessonIndex }) {
+  const { fields, append, remove, insert, update } = useFieldArray({ control, name: `lessons.${lessonIndex}.objectives` });
+
+  const handleObjectivePaste = (e, oi) => {
+    const text = e.clipboardData.getData("text");
+    const lines = text.split(/\r\n|\r|\n/).map((l) => l.trim()).filter(Boolean);
+    if (lines.length <= 1) return;
+    e.preventDefault();
+    update(oi, { value: lines[0] });
+    lines.slice(1).forEach((line, i) => {
+      insert(oi + 1 + i, { value: line });
+    });
+  };
+
+  return (
+    <div className="space-y-2">
+      <Label className="text-xs text-muted-foreground uppercase tracking-wide">Objectives</Label>
+      {fields.map((f, oi) => (
+        <div key={f.id} className="flex items-center gap-2">
+          <Input
+            {...register(`lessons.${lessonIndex}.objectives.${oi}.value`)}
+            placeholder="Learning objective"
+            onPaste={(e) => handleObjectivePaste(e, oi)}
+          />
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="text-destructive shrink-0"
+            onClick={() => remove(oi)}
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
+      ))}
+      <Button type="button" variant="outline" size="sm" onClick={() => append({ value: "" })}>
+        <Plus className="h-3.5 w-3.5 mr-1" /> Add Objective
+      </Button>
+    </div>
+  );
+}
+
+function StepLessons({ control, register, errors, existingLessons, onRemoveExisting, onOpenAttach }) {
+  const { fields, append, remove } = useFieldArray({ control, name: "lessons" });
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-start justify-between gap-3 pb-3 border-b border-border">
+        <p className="text-xs text-muted-foreground">
+          Attach existing library lessons to reuse content, or create new ones from scratch.
+        </p>
+        <div className="flex items-center gap-2 shrink-0">
+          <Button type="button" variant="outline" size="sm" onClick={onOpenAttach}>
+            <Link2 className="h-3.5 w-3.5 mr-1.5" /> Select
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => append({ title: "", description: "", objectives: [], blocks: [] })}
+          >
+            <Plus className="h-3.5 w-3.5 mr-1.5" /> Create
+          </Button>
+        </div>
+      </div>
+
+      {fields.length === 0 && existingLessons.length === 0 && (
+        <p className="text-sm text-muted-foreground">
+          No lessons yet. A unit can be created without any, but add one now if you'd like to build its content in this wizard.
+        </p>
+      )}
+
+      {existingLessons.map((l) => (
+        <div key={l.lesson_id} className="border border-border rounded-lg p-4 flex items-center justify-between gap-3">
+          <div className="flex items-center gap-2 min-w-0">
+            <span className="text-sm font-medium truncate">{l.title}</span>
+            <Badge variant="outline" className="text-[10px] shrink-0">existing</Badge>
+          </div>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="text-destructive h-7 px-2 shrink-0"
+            onClick={() => onRemoveExisting(l.lesson_id)}
+          >
+            Remove
+          </Button>
+        </div>
+      ))}
+
+      {fields.map((f, i) => (
+        <div key={f.id} className="border border-border rounded-lg p-4 space-y-3">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium text-muted-foreground">Lesson {i + 1}</span>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="text-destructive h-7 px-2"
+              onClick={() => remove(i)}
+            >
+              Remove
+            </Button>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label>Title <span className="text-destructive">*</span></Label>
+            <Input {...register(`lessons.${i}.title`)} placeholder="Lesson title" />
+            <FieldError message={errors.lessons?.[i]?.title?.message} />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label>Description</Label>
+            <Textarea rows={2} {...register(`lessons.${i}.description`)} placeholder="Optional description" />
+          </div>
+
+          <LessonObjectives control={control} register={register} lessonIndex={i} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── Step 3 — Page Builder ─────────────────────────────────────────────────────
+function StepPageBuilder({ control, setValue, existingLessons }) {
+  const lessons = useWatch({ control, name: "lessons" }) ?? [];
+  const [rawIndex, setActiveIndex] = useState(0);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [viewingExisting, setViewingExisting] = useState(null);
+
+  if (lessons.length === 0 && existingLessons.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        Add at least one lesson in the previous step to build its page content here.
+      </p>
+    );
+  }
+
+  // Clamp instead of syncing via effect — a removed lesson (from the previous
+  // step) can leave rawIndex pointing past the end of the array.
+  const activeIndex = Math.min(rawIndex, lessons.length - 1);
+  const activeLesson = lessons[activeIndex];
+  const blocks = activeLesson?.blocks ?? [];
+
+  const setBlocks = (updater) => {
+    const next = typeof updater === "function" ? updater(blocks) : updater;
+    setValue(`lessons.${activeIndex}.blocks`, next, { shouldDirty: true });
+  };
+
+  const addBlock    = (type) => setBlocks((prev) => [...prev, makeBlock(type)]);
+  const updateBlock = (id, content) => setBlocks((prev) => prev.map((b) => (b.id === id ? { ...b, content } : b)));
+  const deleteBlock = (id) => setBlocks((prev) => prev.filter((b) => b.id !== id));
+  const moveBlock   = (id, direction) => setBlocks((prev) => {
+    const index = prev.findIndex((b) => b.id === id);
+    const swapIndex = direction === "up" ? index - 1 : index + 1;
+    if (swapIndex < 0 || swapIndex >= prev.length) return prev;
+    const next = [...prev];
+    [next[index], next[swapIndex]] = [next[swapIndex], next[index]];
+    return next;
+  });
+
+  return (
+    <div className="space-y-3">
+      {existingLessons.map((l) => (
+        <div key={l.lesson_id} className="flex items-center justify-between border border-border rounded-lg p-4">
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <p className="text-sm font-medium truncate">{l.title}</p>
+              <Badge variant="outline" className="text-[10px] shrink-0">existing</Badge>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {(l.blocks?.length ?? 0)} block{(l.blocks?.length ?? 0) !== 1 ? "s" : ""} · content lives in the Lessons library
+            </p>
+          </div>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => setViewingExisting(l)}
+          >
+            <Eye className="h-4 w-4 mr-1.5" />
+            View Content
+          </Button>
+        </div>
+      ))}
+
+      {lessons.map((l, i) => (
+        <div key={i} className="flex items-center justify-between border border-border rounded-lg p-4">
+          <div>
+            <p className="text-sm font-medium">{l.title || `Lesson ${i + 1}`}</p>
+            <p className="text-xs text-muted-foreground">
+              {(l.blocks?.length ?? 0)} block{(l.blocks?.length ?? 0) !== 1 ? "s" : ""}
+            </p>
+          </div>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => { setActiveIndex(i); setDrawerOpen(true); }}
+          >
+            <LayoutTemplate className="h-4 w-4 mr-1.5" />
+            Open Page Builder
+          </Button>
+        </div>
+      ))}
+
+      <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} shouldScaleBackground>
+        <DrawerContent className="data-[vaul-drawer-direction=bottom]:max-h-[90vh]">
+          <DrawerHeader className="border-b text-left">
+            <DrawerTitle>Page Builder</DrawerTitle>
+            <DrawerDescription>{activeLesson?.title || `Lesson ${activeIndex + 1}`}</DrawerDescription>
+          </DrawerHeader>
+
+          <div className="px-4 pt-3">
+            <Tabs value={String(activeIndex)} onValueChange={(v) => setActiveIndex(Number(v))}>
+              <TabsList className="flex-wrap h-auto">
+                {lessons.map((l, i) => (
+                  <TabsTrigger key={i} value={String(i)} className="gap-1.5">
+                    {l.title || `Lesson ${i + 1}`}
+                    {l.blocks?.length > 0 && (
+                      <Badge variant="secondary" className="text-[10px] px-1.5">{l.blocks.length}</Badge>
+                    )}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+          </div>
+
+          <div className="flex-1 overflow-y-auto p-4">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+                  Editor
+                  {blocks.length > 0 && (
+                    <span className="text-xs font-normal">· {blocks.length} block{blocks.length !== 1 ? "s" : ""}</span>
+                  )}
+                </div>
+                <BlockList blocks={blocks} onUpdate={updateBlock} onMove={moveBlock} onDelete={deleteBlock} />
+                <AddBlockMenu onAdd={addBlock} />
+              </div>
+
+              <div className="space-y-3">
+                <div className="text-sm font-medium text-muted-foreground">Live Preview</div>
+                <PreviewChrome title={activeLesson?.title}>
+                  <div className="p-6 space-y-5 min-h-[300px]">
+                    <PreviewContent
+                      lesson={{
+                        title: activeLesson?.title,
+                        description: activeLesson?.description,
+                        objectives: (activeLesson?.objectives ?? []).map((o, oi) => ({ objective_id: oi, text: o.value })),
+                      }}
+                      blocks={blocks}
+                      empty="Your content will appear here as you build."
+                    />
+                  </div>
+                </PreviewChrome>
+              </div>
+            </div>
+          </div>
+
+          <DrawerFooter className="border-t flex-row justify-end">
+            <DrawerClose asChild>
+              <Button type="button">Done</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+
+      <Drawer open={!!viewingExisting} onOpenChange={(open) => !open && setViewingExisting(null)} shouldScaleBackground>
+        <DrawerContent className="data-[vaul-drawer-direction=bottom]:max-h-[90vh]">
+          <DrawerHeader className="border-b text-left">
+            <DrawerTitle>Page Content</DrawerTitle>
+            <DrawerDescription>{viewingExisting?.title} · attached from the Lessons library</DrawerDescription>
+          </DrawerHeader>
+
+          <div className="flex-1 overflow-y-auto p-4">
+            <PreviewChrome title={viewingExisting?.title}>
+              <div className="p-6 space-y-5 min-h-[300px]">
+                <PreviewContent
+                  lesson={{
+                    title: viewingExisting?.title,
+                    description: viewingExisting?.description,
+                    objectives: viewingExisting?.objectives ?? [],
+                  }}
+                  blocks={viewingExisting?.blocks ?? []}
+                  empty="This lesson has no page content yet."
+                />
+              </div>
+            </PreviewChrome>
+          </div>
+
+          <DrawerFooter className="border-t flex-row justify-end">
+            <DrawerClose asChild>
+              <Button type="button">Close</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  );
+}
+
+// ─── Step 4 — Review ───────────────────────────────────────────────────────────
+function SummaryRow({ label, value }) {
+  if (!value) return null;
+  return (
+    <div className="flex justify-between py-1.5 text-sm">
+      <span className="text-muted-foreground min-w-[140px]">{label}</span>
+      <span className="text-foreground text-right">{value}</span>
+    </div>
+  );
+}
+
+function StepReview({ data, tierCategories, requirements, existingLessons }) {
+  const tierName = tierCategories.find((c) => c.slug === data.subscription)?.name;
+
+  return (
+    <div className="space-y-4">
+      <div className="border border-border rounded-lg p-4 space-y-1">
+        <div className="flex items-center gap-2 mb-3">
+          <FileText className="h-4 w-4 text-muted-foreground" />
+          <span className="text-sm font-medium">Unit</span>
+        </div>
+        <SummaryRow label="Title" value={data.title} />
+        <SummaryRow label="Description" value={data.description} />
+        <SummaryRow label="Subscription" value={tierName || "Free"} />
+      </div>
+
+      {existingLessons.length > 0 && (
+        <div className="border border-border rounded-lg p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <Link2 className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium">Attached from library ({existingLessons.length})</span>
+          </div>
+          {existingLessons.map((l, i) => (
+            <div key={l.lesson_id} className="flex items-center justify-between text-sm border-t border-border pt-2 first:border-t-0 first:pt-0">
+              <span>{i + 1}. {l.title}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {(data.lessons ?? []).length === 0 ? (
+        <p className="text-sm text-muted-foreground">No lessons will be created with this unit.</p>
+      ) : (
+        <div className="border border-border rounded-lg p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <BookOpen className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium">Lessons ({data.lessons.length})</span>
+          </div>
+          {data.lessons.map((l, i) => (
+            <div key={i} className="flex items-center justify-between text-sm border-t border-border pt-2 first:border-t-0 first:pt-0">
+              <span>{i + 1}. {l.title}</span>
+              <span className="text-muted-foreground text-xs">
+                {(l.objectives ?? []).filter((o) => o.value).length} objective(s) · {(l.blocks ?? []).length} block(s)
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <DraftRequirementsSummary entityType="unit" items={requirements} />
+    </div>
+  );
+}
+
+// ─── Step 5 — Requirements ──────────────────────────────────────────────────────
+function StepRequirements({ requirements, setRequirements }) {
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">
+        Configure how learners complete this unit — optional, sensible defaults apply automatically. This is created together with the rest of the unit when you finish.
+      </p>
+      <DraftRequirementsEditor entityType="unit" items={requirements} onChange={setRequirements} />
+    </div>
+  );
+}
+
+// ─── Main Page ──────────────────────────────────────────────────────────────
+export default function AddLibraryUnit() {
+  const navigate = useNavigate();
+  const { createUnitFull, attachLessonsToUnit, lessonsFlat, loading } = useLibrary();
+  const { user } = useAuth();
+
+  const { syncUnitRequirements } = useCourses();
+
+  const [step, setStep] = useState(0);
+  const [requirements, setRequirements] = useState([]);
+  const [tierCategories, setTierCategories] = useState([]);
+  const [existingLessons, setExistingLessons] = useState([]);
+  const [attachLessonsOpen, setAttachLessonsOpen] = useState(false);
+
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => setTierCategories((data.data ?? []).filter((c) => c.is_active)))
+      .catch(() => {});
+  }, []);
+
+  const {
+    register, control, trigger, getValues, setValue,
+    formState: { errors, isDirty },
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: DEFAULT_VALUES,
+    mode: "onTouched",
+  });
+
+  const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty || requirements.length > 0);
+
+  const handleNext = async () => {
+    const fields = STEP_FIELDS[step];
+    const valid = await trigger(fields.length ? fields : undefined);
+    if (valid) setStep((s) => Math.min(s + 1, STEPS.length - 1));
+  };
+
+  const handleBack = () => {
+    if (step === 0) navigate("/admin/units");
+    else setStep((s) => s - 1);
+  };
+
+  // The one and only persistence point — nothing is created until this final
+  // click at Review, so Requirements (the step before it) is purely a draft
+  // form. No <form> tag wraps the wizard, so this is invoked manually.
+  const handleCreate = async () => {
+    const valid = await trigger();
+    if (!valid) return;
+
+    const data = getValues();
+    const payload = {
+      title: data.title,
+      description: data.description || null,
+      subscription: data.subscription || (tierCategories.find((c) => c.is_default)?.slug || "free"),
+      lessons: (data.lessons ?? []).map((l) => ({
+        title: l.title,
+        description: l.description || null,
+        objectives: (l.objectives ?? []).map((o) => o.value).filter(Boolean),
+        blocks: l.blocks ?? [],
+      })),
+      createdBy: user?.user_id,
+    };
+
+    // Single request creates the unit, its lessons, objectives, and page
+    // content in one transaction — no per-lesson/per-page follow-up calls.
+    const result = await createUnitFull(payload);
+    const newUnitId = result?.data?.data?.unit_id;
+    if (!newUnitId) return;
+
+    if (existingLessons.length > 0) {
+      await attachLessonsToUnit(newUnitId, existingLessons.map((l) => l.lesson_id));
+    }
+
+    if (requirements.length > 0) {
+      const clean = requirements.map(({ _key, ...r }) => r);
+      await syncUnitRequirements(null, newUnitId, clean);
+    }
+
+    bypassOnce();
+    navigate("/admin/units");
+  };
+
+  return (
+    <section className="bg-muted min-h-full">
+      <PageMeta title="Add Unit - STARR" />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-center px-4 py-10">
+        <div className="w-full max-w-3xl mx-auto space-y-6">
+
+          <div className="flex items-center gap-3">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/admin/units")}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Create Unit</h1>
+              <p className="text-sm text-muted-foreground">
+                Units are standalone — attach this one to any course later, or run it on its own.
+              </p>
+            </div>
+          </div>
+
+          {/* Stepper */}
+          <div className="flex items-center gap-0">
+            {STEPS.map((s, i) => {
+              const Icon = s.icon;
+              const isActive = step === i;
+              const isDone = step > i;
+
+              return (
+                <div key={s.id} className="flex items-center flex-1 last:flex-none">
+                  <div className="flex flex-col items-center gap-1">
+                    <div className={cn(
+                      "h-8 w-8 rounded-full flex items-center justify-center border transition-colors",
+                      isDone   && "bg-emerald-600 border-emerald-600 text-white",
+                      isActive && "border-primary bg-primary text-primary-foreground",
+                      !isActive && !isDone && "border-border bg-background text-muted-foreground"
+                    )}>
+                      {isDone ? <Check className="h-4 w-4" /> : <Icon className="h-4 w-4" />}
+                    </div>
+                    <span className={cn(
+                      "text-[11px] font-medium whitespace-nowrap hidden sm:block",
+                      isActive ? "text-foreground"  : "text-muted-foreground",
+                      isDone   ? "text-emerald-600" : ""
+                    )}>
+                      {s.label}
+                    </span>
+                  </div>
+                  {i < STEPS.length - 1 && (
+                    <div className={cn(
+                      "flex-1 h-px mx-2 mb-4 transition-colors",
+                      step > i ? "bg-emerald-600" : "bg-border"
+                    )} />
+                  )}
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Step content */}
+          <div className="rounded-lg border bg-card p-6 min-h-[320px]">
+            <h2 className="text-base font-medium mb-4">{STEPS[step].label}</h2>
+
+            {step === 0 && (
+              <StepUnit
+                register={register}
+                errors={errors}
+                control={control}
+                setValue={setValue}
+                tierCategories={tierCategories}
+              />
+            )}
+            {step === 1 && (
+              <StepLessons
+                control={control}
+                register={register}
+                errors={errors}
+                existingLessons={existingLessons}
+                onRemoveExisting={(lessonId) =>
+                  setExistingLessons((prev) => prev.filter((l) => l.lesson_id !== lessonId))
+                }
+                onOpenAttach={() => setAttachLessonsOpen(true)}
+              />
+            )}
+            {step === 2 && (
+              <StepPageBuilder control={control} setValue={setValue} existingLessons={existingLessons} />
+            )}
+            {step === 3 && (
+              <StepRequirements requirements={requirements} setRequirements={setRequirements} />
+            )}
+            {step === 4 && (
+              <StepReview
+                data={getValues()}
+                tierCategories={tierCategories}
+                requirements={requirements}
+                existingLessons={existingLessons}
+              />
+            )}
+          </div>
+
+          {/* Navigation */}
+          <div className="flex items-center justify-between gap-3">
+            <Button type="button" variant="outline" onClick={handleBack} disabled={loading}>
+              <ChevronLeft className="h-4 w-4 mr-1" />
+              {step === 0 ? "Cancel" : "Back"}
+            </Button>
+
+            {step < STEPS.length - 1 ? (
+              <Button type="button" onClick={handleNext}>
+                Next
+                <ChevronRight className="h-4 w-4 ml-1" />
+              </Button>
+            ) : (
+              // Only the true final step (Review) actually persists anything —
+              // the unit, its lessons/page content, and any draft requirements
+              // are all created together in one shot here.
+              <Button type="button" onClick={handleCreate} disabled={loading}>
+                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                Create Unit
+              </Button>
+            )}
+          </div>
+
+        </div>
+      </div>
+
+      <AttachLessonsDialog
+        open={attachLessonsOpen}
+        onOpenChange={setAttachLessonsOpen}
+        attachedLessonIds={existingLessons.map((l) => l.lesson_id)}
+        onAttach={async (lessonIds) => {
+          const picked = lessonIds
+            .map((id) => lessonsFlat.find((l) => l.lesson_id === id))
+            .filter(Boolean);
+
+          // Fetch each lesson's page content so it can be previewed in the
+          // Page Builder step — the flat list used by the picker only carries
+          // title/duration, not blocks.
+          const withContent = await Promise.all(
+            picked.map(async (l) => {
+              try {
+                const { data } = await api.get(`/admin/lessons/${l.lesson_id}`);
+                const full = data?.data?.data;
+                return {
+                  lesson_id: l.lesson_id,
+                  title: l.title,
+                  description: full?.description ?? "",
+                  objectives: full?.objectives ?? [],
+                  blocks: full?.page?.blocks ?? [],
+                };
+              } catch {
+                return { lesson_id: l.lesson_id, title: l.title, blocks: [] };
+              }
+            })
+          );
+
+          setExistingLessons((prev) => [...prev, ...withContent]);
+        }}
+      />
+
+      {unsavedChangesDialog}
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/library/units/ArchivedUnitLibraryList.jsx b/apps/web/src/modules/admin/pages/library/units/ArchivedUnitLibraryList.jsx
new file mode 100644
index 0000000..3b0dcd6
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/library/units/ArchivedUnitLibraryList.jsx
@@ -0,0 +1,26 @@
+import { House } from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import ArchivedUnitLibraryTable from "../../../components/library/ArchivedUnitLibraryTable";
+import { PageMeta } from "@/contexts/MetadataContext";
+
+export default function ArchivedUnitLibraryList() {
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Units", to: "/admin/units" },
+    { label: "Archived" },
+  ];
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title="Archived Units - STARR" />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+        <div className="w-full">
+          <ArchivedUnitLibraryTable />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/library/units/EditLibraryUnit.jsx b/apps/web/src/modules/admin/pages/library/units/EditLibraryUnit.jsx
new file mode 100644
index 0000000..fbb6f53
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/library/units/EditLibraryUnit.jsx
@@ -0,0 +1,161 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useForm, useWatch } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft } from "lucide-react";
+
+import { useLibrary } from "@/contexts/AdminLibraryContext";
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import api from "@/utils/api.util";
+import CompletionRequirementBuilder from "@/modules/admin/components/courses/CompletionRequirementBuilder";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+
+const schema = z.object({
+  title: z.string().min(1, "Title is required."),
+  description: z.string().optional(),
+  subscription: z.string().optional(),
+});
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+export default function EditLibraryUnit() {
+  const navigate = useNavigate();
+  const { unitId } = useParams();
+  const { fetchUnit, updateUnit, unit, loading } = useLibrary();
+  const { fetchUnitRequirements, syncUnitRequirements } = useCourses();
+  const { user } = useAuth();
+
+  const [tierCategories, setTierCategories] = useState([]);
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => setTierCategories((data.data ?? []).filter((c) => c.is_active)))
+      .catch(() => {});
+  }, []);
+
+  const { register, handleSubmit, reset, control, setValue, formState: { errors, isDirty } } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { title: "", description: "", subscription: "free" },
+  });
+
+  const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty);
+
+  const watchedSubscr = useWatch({ control, name: "subscription" });
+  const defaultTierSlug = tierCategories.find((c) => c.is_default)?.slug || "free";
+
+  useEffect(() => {
+    fetchUnit(unitId);
+  }, [unitId]);
+
+  useEffect(() => {
+    if (unit && String(unit.unit_id) === String(unitId)) {
+      reset({ title: unit.title ?? "", description: unit.description ?? "", subscription: unit.subscription || defaultTierSlug });
+    }
+  }, [unit, unitId, reset]);
+
+  const onSubmit = async (data) => {
+    const result = await updateUnit(unitId, { ...data, subscription: data.subscription || defaultTierSlug, updatedBy: user?.user_id });
+    if (!result) return;
+    bypassOnce();
+    navigate(`/admin/units/${unitId}/view`);
+  };
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title={unit ? `Edit Unit – ${unit.title} - STARR` : undefined} />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-center px-4 py-10">
+
+        <div className="w-full max-w-2xl mx-auto">
+          <div className="flex items-center gap-3 mb-6">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate(`/admin/units/${unitId}/view`)}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Edit Unit</h1>
+              <p className="text-sm text-muted-foreground">
+                Changes apply everywhere this unit is attached.
+              </p>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <div className="rounded-lg border bg-card p-6 space-y-5">
+
+              <div className="space-y-1.5">
+                <Label htmlFor="title">Title <span className="text-destructive">*</span></Label>
+                <Input id="title" placeholder="Unit title" {...register("title")} />
+                <FieldError message={errors.title?.message} />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="description">Description</Label>
+                <Textarea id="description" placeholder="Optional description" rows={3} {...register("description")} />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label>Subscription</Label>
+                <Select
+                  value={watchedSubscr || defaultTierSlug}
+                  onValueChange={(val) => setValue("subscription", val, { shouldDirty: true })}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="No subscription gate" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {tierCategories.map((c) => (
+                      <SelectItem key={c.slug} value={c.slug}>
+                        {c.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <p className="text-xs text-muted-foreground">
+                  Optional. Gates this unit directly, independent of any course it may later be attached to.
+                </p>
+              </div>
+
+            </div>
+
+            <div className="flex justify-end gap-3">
+              <Button type="button" variant="outline" onClick={() => navigate(`/admin/units/${unitId}/view`)} disabled={loading}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={loading}>
+                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                Save Changes
+              </Button>
+            </div>
+          </form>
+
+          <div className="rounded-lg border bg-card p-6 space-y-4 mt-6">
+            <div>
+              <h2 className="text-sm font-semibold">Completion Requirements</h2>
+              <p className="text-xs text-muted-foreground">What a learner must do for this unit to count as complete, wherever it's attached.</p>
+            </div>
+            <CompletionRequirementBuilder
+              entityType="unit"
+              fetchFn={fetchUnitRequirements}
+              syncFn={syncUnitRequirements}
+              args={[null, unitId]}
+            />
+          </div>
+        </div>
+      </div>
+
+      {unsavedChangesDialog}
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/library/units/UnitLibraryList.jsx b/apps/web/src/modules/admin/pages/library/units/UnitLibraryList.jsx
new file mode 100644
index 0000000..ca471f9
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/library/units/UnitLibraryList.jsx
@@ -0,0 +1,37 @@
+import { House, Layers } from "lucide-react";
+import { Link } from "react-router-dom";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import UnitLibraryTable from "../../../components/library/UnitLibraryTable";
+import { PageMeta } from "@/contexts/MetadataContext";
+
+export default function UnitLibraryList() {
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Units" },
+  ];
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title="Units Library - STARR" description="Manage standalone units — attach them to any course." />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+        <div className="w-full space-y-4">
+          {/* <div className="flex items-start gap-3 rounded-lg border bg-card p-4 text-sm">
+            <Layers className="h-4 w-4 mt-0.5 shrink-0 text-muted-foreground" />
+            <p className="text-muted-foreground">
+              Units run <span className="font-medium text-foreground">independently</span> — build them here once,
+              then attach them to any number of{" "}
+              <Link to="/admin/courses" className="text-primary hover:underline font-medium">
+                Courses
+              </Link>
+              . Removing a unit from a course only detaches it; the unit stays in this library.
+            </p>
+          </div> */}
+          <UnitLibraryTable />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/library/units/ViewLibraryUnit.jsx b/apps/web/src/modules/admin/pages/library/units/ViewLibraryUnit.jsx
new file mode 100644
index 0000000..91ecb54
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/library/units/ViewLibraryUnit.jsx
@@ -0,0 +1,289 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams, Link } from "react-router-dom";
+import {
+  ArrowLeft, House, Plus, Link2, Unlink, Pencil,
+  ChevronUp, ChevronDown, Clock, ClipboardList, PlusCircle,
+  LayoutTemplate, BookOpen,
+} from "lucide-react";
+
+import { useLibrary } from "@/contexts/AdminLibraryContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import AttachLessonsDialog from "../../../components/library/AttachLessonsDialog";
+import AttachCoursesDialog from "../../../components/library/AttachCoursesDialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Spinner } from "@/components/ui/spinner";
+import { formatDuration } from "@/utils/timestamp.util";
+
+export default function ViewLibraryUnit() {
+  const navigate = useNavigate();
+  const { unitId } = useParams();
+  const {
+    fetchUnit, unit, loading,
+    attachLessonsToUnit, detachLessonFromUnit, detachUnitFromCourse, attachUnitToCourses, reorderUnitLessons,
+  } = useLibrary();
+
+  const [initializing, setInitializing] = useState(true);
+  const [attachOpen, setAttachOpen] = useState(false);
+  const [attachCourseOpen, setAttachCourseOpen] = useState(false);
+  const [descExpanded, setDescExpanded] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      await fetchUnit(unitId);
+      setInitializing(false);
+    })();
+  }, [unitId]);
+
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Units", to: "/admin/units" },
+    { label: unit?.title ?? "..." },
+  ];
+
+  const lessons = unit?.lessons ?? [];
+  const courses = unit?.courses ?? [];
+
+  const moveLesson = async (index, direction) => {
+    const target = index + direction;
+    if (target < 0 || target >= lessons.length) return;
+    const reordered = [...lessons];
+    [reordered[index], reordered[target]] = [reordered[target], reordered[index]];
+    await reorderUnitLessons(unitId, reordered.map((l) => l.lesson_id));
+    fetchUnit(unitId);
+  };
+
+  const handleDetach = async (lessonId) => {
+    await detachLessonFromUnit(unitId, lessonId);
+    fetchUnit(unitId);
+  };
+
+  const handleDetachCourse = async (courseId) => {
+    await detachUnitFromCourse(unitId, courseId);
+    fetchUnit(unitId);
+  };
+
+  const handleAttachCourses = async (courseIds) => {
+    await attachUnitToCourses(unitId, courseIds);
+    fetchUnit(unitId);
+  };
+
+  const handleAttach = async (lessonIds) => {
+    await attachLessonsToUnit(unitId, lessonIds);
+    fetchUnit(unitId);
+  };
+
+  if (initializing) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <Spinner className="h-6 w-6" />
+      </div>
+    );
+  }
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title={unit ? `${unit.title} - Units - STARR` : undefined} />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full space-y-6 pb-10">
+
+          {/* ── Unit header ── */}
+          <div className="bg-card rounded-xl border p-6 space-y-4">
+            <div className="flex items-start justify-between gap-4">
+              <div className="max-w-2xl">
+                <h1 className="text-xl font-semibold">{unit?.title}</h1>
+                {unit?.description && (
+                  <div className="mt-0.5">
+                    <p className={`text-sm text-muted-foreground ${descExpanded ? '' : 'line-clamp-2'}`}>
+                      {unit.description}
+                    </p>
+                    <button
+                      type="button"
+                      onClick={() => setDescExpanded((v) => !v)}
+                      className="text-xs font-medium text-primary hover:underline mt-0.5"
+                    >
+                      {descExpanded ? 'See less' : 'See more'}
+                    </button>
+                  </div>
+                )}
+              </div>
+              <div className="flex gap-2 shrink-0">
+                <Button size="sm" variant="outline" onClick={() => setAttachCourseOpen(true)}>
+                  <Link2 className="h-3.5 w-3.5 mr-1.5" /> Attach to Course
+                </Button>
+                {courses.map((c) => (
+                  <Button
+                    key={c.course_id}
+                    size="sm"
+                    variant="destructive"
+                    onClick={() => handleDetachCourse(c.course_id)}
+                    disabled={loading}
+                    title={`Detach from ${c.title} (unit stays in library)`}
+                  >
+                    <Unlink className="h-3.5 w-3.5 mr-1.5" /> Detach from Course
+                  </Button>
+                ))}
+                <Button size="sm" variant="outline" onClick={() => navigate(`/admin/units/${unitId}/edit`)}>
+                  <Pencil className="h-3.5 w-3.5 mr-1.5" /> Edit
+                </Button>
+                {unit?.quiz ? (
+                  <Button size="sm" variant="outline" onClick={() => navigate(`/admin/units/${unitId}/quiz/view`)}>
+                    <ClipboardList className="h-3.5 w-3.5 mr-1.5" /> View Quiz
+                  </Button>
+                ) : (
+                  <Button size="sm" variant="outline" onClick={() => navigate(`/admin/units/${unitId}/quiz/edit`)}>
+                    <PlusCircle className="h-3.5 w-3.5 mr-1.5" /> Create Quiz
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            {/* Stats row */}
+            <div className="grid grid-cols-2 lg:grid-cols-5 gap-3">
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Lessons</p>
+                <p className="font-semibold text-sm">{lessons.length}</p>
+              </div>
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Duration</p>
+                <p className="font-semibold text-sm">{formatDuration(unit?.duration_seconds ?? 0)}</p>
+              </div>
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Quiz</p>
+                <p className="font-semibold text-sm">{unit?.quiz ? unit.quiz.title || "Unit Quiz" : "None"}</p>
+              </div>
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Used In</p>
+                <p className="font-semibold text-sm">
+                  {courses.length > 0 ? `${courses.length} course${courses.length === 1 ? "" : "s"}` : "Standalone"}
+                </p>
+              </div>
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Subscription</p>
+                <Badge variant={unit?.subscription ? "outline" : "secondary"} className="capitalize">
+                  {unit?.subscription ?? "No subscription gate"}
+                </Badge>
+              </div>
+            </div>
+
+            {/* Attached courses */}
+            {courses.length > 0 && (
+              <div className="flex flex-wrap items-center gap-2 pt-1">
+                <span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Courses:</span>
+                {courses.map((c) => (
+                  <Link key={c.course_id} to={`/admin/courses/${c.course_id}/view`}>
+                    <Badge variant="secondary" className="hover:bg-muted cursor-pointer">
+                      <BookOpen className="h-3 w-3 mr-1" /> {c.title}
+                    </Badge>
+                  </Link>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* ── Lessons manager ── */}
+          <div className="bg-card rounded-xl border">
+            <div className="flex items-center justify-between p-4 border-b">
+              <div>
+                <h2 className="font-semibold">Lessons</h2>
+                <p className="text-xs text-muted-foreground">
+                  It can be standalone too attach existing ones or create new.
+                </p>
+              </div>
+              <div className="flex gap-2">
+                <Button size="sm" variant="outline" onClick={() => setAttachOpen(true)}>
+                  <Link2 className="h-3.5 w-3.5 mr-1.5" /> Select
+                </Button>
+                <Button size="sm" onClick={() => navigate(`/admin/lessons/add?unit_id=${unitId}`)}>
+                  <Plus className="h-3.5 w-3.5 mr-1.5" /> Create
+                </Button>
+              </div>
+            </div>
+
+            {lessons.length === 0 ? (
+              <p className="text-sm text-muted-foreground text-center py-10">
+                No lessons attached yet — attach one from the library or create a new one.
+              </p>
+            ) : (
+              <div className="divide-y">
+                {lessons.map((l, i) => (
+                  <div key={l.lesson_id} className="flex items-center gap-3 px-4 py-3">
+                    <span className="text-xs font-mono text-muted-foreground w-6 text-right shrink-0">
+                      {i + 1}.
+                    </span>
+                    <div className="flex flex-col gap-0.5 shrink-0">
+                      <button
+                        type="button"
+                        className="text-muted-foreground hover:text-foreground disabled:opacity-30"
+                        disabled={i === 0 || loading}
+                        onClick={() => moveLesson(i, -1)}
+                        aria-label="Move up"
+                      >
+                        <ChevronUp className="h-3.5 w-3.5" />
+                      </button>
+                      <button
+                        type="button"
+                        className="text-muted-foreground hover:text-foreground disabled:opacity-30"
+                        disabled={i === lessons.length - 1 || loading}
+                        onClick={() => moveLesson(i, 1)}
+                        aria-label="Move down"
+                      >
+                        <ChevronDown className="h-3.5 w-3.5" />
+                      </button>
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium truncate">{l.title}</p>
+                      {l.description && (
+                        <p className="text-xs w-64 text-muted-foreground truncate">{l.description}</p>
+                      )}
+                    </div>
+                    <Badge variant="secondary" className="text-xs shrink-0 tabular-nums">
+                      <Clock className="h-3 w-3 mr-1" /> {formatDuration(l.duration_seconds ?? 0)}
+                    </Badge>
+                    <Button
+                      size="sm" variant="outline"
+                      onClick={() => navigate(`/admin/lessons/${l.lesson_id}/page`)}
+                     
+                    >
+                      <LayoutTemplate /> Page Builder
+                    </Button>
+                    <Button
+                      size="sm" 
+                      variant="destructive"
+                      onClick={() => handleDetach(l.lesson_id)}
+                      disabled={loading}
+                      title="Detach from unit (lesson stays in library)"
+                    >
+                      <Unlink className="h-3.5 w-3.5" /> Detach
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <AttachLessonsDialog
+        open={attachOpen}
+        onOpenChange={setAttachOpen}
+        attachedLessonIds={lessons.map((l) => l.lesson_id)}
+        onAttach={handleAttach}
+        loading={loading}
+      />
+
+      <AttachCoursesDialog
+        open={attachCourseOpen}
+        onOpenChange={setAttachCourseOpen}
+        attachedCourseIds={courses.map((c) => c.course_id)}
+        onAttach={handleAttachCourses}
+        loading={loading}
+      />
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/notifications/AddNotificationBroadcast.jsx b/apps/web/src/modules/admin/pages/notifications/AddNotificationBroadcast.jsx
new file mode 100644
index 0000000..fede3aa
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/notifications/AddNotificationBroadcast.jsx
@@ -0,0 +1,569 @@
+// modules/admin/pages/notifications/AddNotificationBroadcast.jsx
+
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { House, Check, ArrowLeft, ArrowRight } from "lucide-react";
+
+import { useNotificationBroadcasts } from "@/contexts/AdminNotificationBroadcastContext";
+import { useAuth } from "@/contexts/AuthContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { BroadcastTargetPicker } from "@/components/generic/BroadcastTargetPicker";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { DateTimePicker } from "@/components/ui/date-time-picker";
+
+import { TARGET_TYPE_OPTIONS, TARGET_TYPE_MAP } from "@/data/notificationBroadcast.data";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+import { TIER_COLOR_OPTIONS, getTierColor, getContrastText } from "@/utils/tierColors";
+import { normalizeExternalUrl } from "@/components/generic/notificationDisplay";
+import { isValidLink, LINK_ERROR } from "@/utils/link.util";
+
+// Internal paths ("/course/123") pass through untouched — everything else
+// gets a scheme so the saved URL always matches what goToLink() will open,
+// instead of relying on client-side normalization to paper over a bare
+// "example.com" the admin typed.
+const normalizeLinkUrl = (raw) => (!raw ? null : raw.startsWith("/") ? raw : normalizeExternalUrl(raw));
+
+// ─── Schema ─────────────────────────────────────────────────────────────────
+
+const schema = z.object({
+    title:       z.string().min(1, "Title is required."),
+    message:     z.string().optional(),
+    target_type: z.enum(["admin", "user", "both", "task_list", "course", "tier_plan"], { message: "Please select a target." }),
+    target_id:   z.string().nullable().optional(),
+    show_in_sticky: z.boolean().optional(),
+    show_in_notifications: z.boolean().optional(),
+    link_url:  z.string().trim().optional(),
+    color:      z.string().optional(),
+    start_date: z.string().optional(),
+    end_date:   z.string().optional(),
+}).superRefine((data, ctx) => {
+    if (TARGET_TYPE_MAP[data.target_type]?.needsTarget && !data.target_id) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: "Please select a specific target.",
+            path: ["target_id"],
+        });
+    }
+
+    if (!data.show_in_sticky && !data.show_in_notifications) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: "Select where to show this notification (Sticky or Notifications).",
+            path: ["show_in_sticky"],
+        });
+    }
+
+    if (data.show_in_sticky && data.show_in_notifications) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: "Choose only one: Sticky or Notifications.",
+            path: ["show_in_notifications"],
+        });
+    }
+
+    if (data.show_in_notifications && !data.message?.trim()) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: "Message is required for Notifications alerts.",
+            path: ["message"],
+        });
+    }
+
+    if (data.link_url && !isValidLink(data.link_url)) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: LINK_ERROR,
+            path: ["link_url"],
+        });
+    }
+
+    if (data.start_date && data.end_date && new Date(data.start_date) > new Date(data.end_date)) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: "End date must be after the start date.",
+            path: ["end_date"],
+        });
+    }
+});
+
+// ─── Steps config ───────────────────────────────────────────────────────────
+
+const STEPS = [
+    { label: "Content", description: "What it says & how it's shown" },
+    { label: "Target",  description: "Who receives it" },
+    { label: "Review",  description: "Confirm & save" },
+];
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+function FieldError({ message }) {
+    if (!message) return null;
+    return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+function SectionCard({ title, description, children }) {
+    return (
+        <div className="rounded-lg border bg-card p-6 space-y-5">
+            {(title || description) && (
+                <div className="space-y-0.5 pb-1 border-b">
+                    {title       && <h2 className="text-sm font-semibold">{title}</h2>}
+                    {description && <p className="text-xs text-muted-foreground">{description}</p>}
+                </div>
+            )}
+            {children}
+        </div>
+    );
+}
+
+function StepIndicator({ steps, current, onStepClick }) {
+    return (
+        <div className="flex items-start w-full mb-8">
+            {steps.flatMap((step, i) => {
+                const items = [
+                    <button
+                        key={`step-${i}`}
+                        type="button"
+                        onClick={() => onStepClick(i)}
+                        className="flex flex-col items-center gap-1.5 shrink-0 group"
+                    >
+                        <div
+                            className={[
+                                "w-8 h-8 rounded-full border-2 flex items-center justify-center text-sm font-semibold transition-all group-hover:opacity-80",
+                                i < current
+                                    ? "bg-primary border-primary text-primary-foreground"
+                                    : i === current
+                                    ? "border-primary text-primary"
+                                    : "border-border text-muted-foreground",
+                            ].join(" ")}
+                        >
+                            {i < current ? <Check className="h-4 w-4" /> : i + 1}
+                        </div>
+                        <p
+                            className={[
+                                "text-[11px] font-medium text-center leading-tight whitespace-nowrap",
+                                i === current ? "text-foreground" : "text-muted-foreground",
+                            ].join(" ")}
+                        >
+                            {step.label}
+                        </p>
+                    </button>,
+                ];
+                if (i < steps.length - 1) {
+                    items.push(
+                        <div
+                            key={`line-${i}`}
+                            className={[
+                                "flex-1 h-px mt-4 mx-2 shrink",
+                                i < current ? "bg-primary" : "bg-border",
+                            ].join(" ")}
+                        />
+                    );
+                }
+                return items;
+            })}
+        </div>
+    );
+}
+
+// ─── Page ───────────────────────────────────────────────────────────────────
+
+export default function AddNotificationBroadcast() {
+    const navigate = useNavigate();
+    const { createBroadcast, sendBroadcast, loading } = useNotificationBroadcasts();
+    const { user } = useAuth();
+
+    const [currentStep, setCurrentStep] = useState(0);
+    const [targetLabel, setTargetLabel] = useState(null);
+
+    const {
+        register,
+        handleSubmit,
+        watch,
+        setValue,
+        trigger,
+        formState: { errors, isDirty },
+    } = useForm({
+        resolver: zodResolver(schema),
+        defaultValues: {
+            title: "",
+            message: "",
+            target_type: undefined,
+            target_id: null,
+            show_in_sticky: false,
+            show_in_notifications: true,
+            link_url: "",
+            color: "indigo",
+            start_date: "",
+            end_date: "",
+        },
+    });
+
+    const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty);
+
+    const targetType = watch("target_type");
+    const targetId   = watch("target_id");
+    const needsTarget = TARGET_TYPE_MAP[targetType]?.needsTarget;
+    const showInSticky = watch("show_in_sticky");
+    const showInNotifications = watch("show_in_notifications");
+    const color = watch("color");
+    const startDate = watch("start_date");
+    const endDate = watch("end_date");
+
+    const breadcrumbItems = [
+        { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+        { label: "Alerts", to: "/admin/announcements" },
+        { label: "New" },
+    ];
+
+    // Guards the step indicator: jumping ahead must not bypass required
+    // fields from earlier steps.
+    const goToStep = async (target) => {
+        if (target > 0) {
+            const valid = await trigger(["title", "message", "show_in_sticky", "show_in_notifications", "link_url", "end_date"]);
+            if (!valid) { setCurrentStep(0); return; }
+        }
+        if (target > 1) {
+            const valid = await trigger(["target_type", "target_id"]);
+            if (!valid) { setCurrentStep(1); return; }
+        }
+        setCurrentStep(target);
+    };
+
+    const saveBroadcast = async (values, { publish = false } = {}) => {
+        const payload = {
+            ...values,
+            message: values.message?.trim() || null,
+            target_id: TARGET_TYPE_MAP[values.target_type]?.needsTarget ? values.target_id : null,
+            show_in_sticky: values.show_in_sticky ?? false,
+            show_in_notifications: values.show_in_notifications ?? true,
+            link_url: values.link_url?.trim() ? normalizeLinkUrl(values.link_url.trim()) : null,
+            color: values.show_in_sticky ? (values.color || "indigo") : "indigo",
+            start_date: values.start_date || null,
+            end_date: values.end_date || null,
+            createdBy: user?.user_id ?? null,
+        };
+
+        const res = await createBroadcast(payload);
+        const created = res?.data?.data ?? null;
+        if (!created) return;
+
+        if (publish) {
+            const sent = await sendBroadcast(created.broadcast_id);
+            if (!sent) return;
+        }
+
+        bypassOnce();
+        navigate("/admin/announcements");
+    };
+
+    return (
+        <section className="bg-muted h-full">
+            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-center px-4">
+                <div className="flex flex-col gap-2 my-6 w-full">
+                    <AppBreadcrumb items={breadcrumbItems} />
+                </div>
+
+                <div className="w-full max-w-2xl pb-10">
+                    <h1 className="text-2xl font-semibold tracking-tight mb-1">New Alert</h1>
+                    <p className="text-sm text-muted-foreground mb-6">Compose an alert. It's saved as a draft until you send it.</p>
+
+                    <StepIndicator steps={STEPS} current={currentStep} onStepClick={goToStep} />
+
+                    <form onSubmit={(e) => e.preventDefault()} className="space-y-5">
+
+                        {/* ── Step 0: Content ── */}
+                        {currentStep === 0 && (
+                            <>
+                                <SectionCard title="Content" description="What admins and/or users will see.">
+                                    <div>
+                                        <Label className="mb-1.5 block">Title</Label>
+                                        <Input placeholder="e.g. Scheduled maintenance tonight" {...register("title")} />
+                                        <FieldError message={errors.title?.message} />
+                                    </div>
+                                    {showInNotifications && (
+                                        <div>
+                                            <Label className="mb-1.5 block">Message</Label>
+                                            <Textarea rows={4} placeholder="Full alert text" {...register("message")} />
+                                            <FieldError message={errors.message?.message} />
+                                        </div>
+                                    )}
+                                </SectionCard>
+
+                                <SectionCard title="Display" description="Where clients/admins can see this alert.">
+                                    <div className="space-y-3">
+                                        <div className="flex items-center gap-3">
+                                            <Checkbox
+                                                id="show_in_sticky"
+                                                checked={showInSticky === true}
+                                                onCheckedChange={(v) => {
+                                                    const checked = v === true;
+                                                    setValue("show_in_sticky", checked, { shouldValidate: true, shouldDirty: true });
+                                                    if (checked) setValue("show_in_notifications", false, { shouldValidate: true, shouldDirty: true });
+                                                }}
+                                            />
+                                            <Label htmlFor="show_in_sticky" className="cursor-pointer">
+                                                Show in Sticky Alerts
+                                            </Label>
+                                        </div>
+
+                                        <div className="flex items-center gap-3">
+                                            <Checkbox
+                                                id="show_in_notifications"
+                                                checked={showInNotifications === true}
+                                                onCheckedChange={(v) => {
+                                                    const checked = v === true;
+                                                    setValue("show_in_notifications", checked, { shouldValidate: true, shouldDirty: true });
+                                                    if (checked) setValue("show_in_sticky", false, { shouldValidate: true, shouldDirty: true });
+                                                }}
+                                            />
+                                            <Label htmlFor="show_in_notifications" className="cursor-pointer">
+                                                Show in Notifications
+                                            </Label>
+                                        </div>
+                                    </div>
+
+                                    <div className="grid grid-cols-2 gap-3">
+                                        <div>
+                                            <Label className="mb-1.5 block">Start date</Label>
+                                            <DateTimePicker
+                                                value={startDate || null}
+                                                onChange={(iso) => setValue("start_date", iso ?? "", { shouldValidate: true, shouldDirty: true })}
+                                                placeholder="Show immediately"
+                                            />
+                                        </div>
+                                        <div>
+                                            <Label className="mb-1.5 block">End date</Label>
+                                            <DateTimePicker
+                                                value={endDate || null}
+                                                onChange={(iso) => setValue("end_date", iso ?? "", { shouldValidate: true, shouldDirty: true })}
+                                                placeholder="No end date"
+                                            />
+                                            <FieldError message={errors.end_date?.message} />
+                                        </div>
+                                    </div>
+
+                                    {showInSticky && (
+                                        <div className="space-y-2 pt-1">
+                                            <Label>Sticky banner color</Label>
+                                            <div className="flex flex-wrap gap-1.5">
+                                                {TIER_COLOR_OPTIONS.map((opt) => {
+                                                    const selected = (color || "indigo") === opt.key;
+                                                    return (
+                                                        <button
+                                                            key={opt.key}
+                                                            type="button"
+                                                            title={opt.label}
+                                                            onClick={() => setValue("color", opt.key, { shouldDirty: true })}
+                                                            className={[
+                                                                "w-5 h-5 rounded-full border-2 transition-all",
+                                                                selected
+                                                                    ? "border-foreground scale-110 shadow-sm"
+                                                                    : "border-transparent hover:border-muted-foreground/50",
+                                                            ].join(" ")}
+                                                            style={{ backgroundColor: opt.swatch }}
+                                                        />
+                                                    );
+                                                })}
+                                            </div>
+                                        </div>
+                                    )}
+                                </SectionCard>
+
+                                {showInSticky && (
+                                    <SectionCard title="Link" description="Where the sticky banner goes when someone clicks it. Optional.">
+                                        <div>
+                                            <Label className="mb-1.5 block">Link URL</Label>
+                                            <Input placeholder="https://example.com or /course/123" {...register("link_url")} />
+                                            <FieldError message={errors.link_url?.message} />
+                                            <p className="text-xs text-muted-foreground mt-1.5">
+                                                Internal paths (starting with /) navigate in-app; anything else opens in a new tab. Leave blank for an informational banner with no click action.
+                                            </p>
+                                        </div>
+                                    </SectionCard>
+                                )}
+
+                                {showInSticky && (
+                                    <SectionCard title="Preview" description="What the sticky banner looks like. Clicking it redirects to the link above, if set.">
+                                        <div
+                                            className="w-full flex items-center justify-center rounded-md px-3 py-2 text-sm font-semibold"
+                                            style={{
+                                                backgroundColor: getTierColor(color || "indigo").swatch,
+                                                color: getContrastText(getTierColor(color || "indigo").swatch, color || "indigo"),
+                                            }}
+                                        >
+                                            <span className="truncate">{watch("title") || "Sticky banner preview"}</span>
+                                        </div>
+                                    </SectionCard>
+                                )}
+                            </>
+                        )}
+
+                        {/* ── Step 1: Target ── */}
+                        {currentStep === 1 && (
+                            <SectionCard title="Target" description="Who receives this alert when it's sent.">
+                                <div>
+                                    <Select
+                                        value={targetType}
+                                        onValueChange={(v) => {
+                                            setValue("target_type", v, { shouldValidate: true, shouldDirty: true });
+                                            setValue("target_id", null, { shouldDirty: true });
+                                            setTargetLabel(null);
+                                        }}
+                                    >
+                                        <SelectTrigger>
+                                            <SelectValue placeholder="Select a target" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            {TARGET_TYPE_OPTIONS.map((t) => (
+                                                <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+                                    <FieldError message={errors.target_type?.message} />
+                                    {targetType && (
+                                        <p className="text-xs text-muted-foreground mt-1.5">
+                                            {TARGET_TYPE_MAP[targetType]?.description}
+                                        </p>
+                                    )}
+                                </div>
+
+                                {needsTarget && (
+                                    <div>
+                                        <BroadcastTargetPicker
+                                            targetType={targetType}
+                                            value={targetId}
+                                            onChange={(id) => setValue("target_id", id, { shouldValidate: true, shouldDirty: true })}
+                                            onLabelResolved={setTargetLabel}
+                                        />
+                                        <FieldError message={errors.target_id?.message} />
+                                    </div>
+                                )}
+                            </SectionCard>
+                        )}
+
+                        {/* ── Step 2: Review ── */}
+                        {currentStep === 2 && (
+                            <>
+                                <SectionCard title="Content" description="Confirm everything looks right before saving the draft.">
+                                    <div className="space-y-3 text-sm">
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">Title</p>
+                                            <p className="font-medium">{watch("title") || "—"}</p>
+                                        </div>
+                                        {showInNotifications && (
+                                            <div>
+                                                <p className="text-xs text-muted-foreground">Message</p>
+                                                <p className="font-medium whitespace-pre-wrap">{watch("message") || "—"}</p>
+                                            </div>
+                                        )}
+                                    </div>
+                                </SectionCard>
+
+                                <SectionCard title="Target">
+                                    <div className="flex items-center gap-2 text-sm">
+                                        <Badge variant="outline">{TARGET_TYPE_MAP[targetType]?.label ?? "—"}</Badge>
+                                        {needsTarget && (
+                                            <span className={targetLabel ? "font-medium" : "text-muted-foreground"}>
+                                                {targetLabel ?? (targetId ? "Selected item not found — reselect it" : "No target selected")}
+                                            </span>
+                                        )}
+                                    </div>
+                                </SectionCard>
+
+                                <SectionCard title="Display">
+                                    <div className="grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">Sticky Alerts</p>
+                                            <p className="font-medium">{showInSticky ? "Shown" : "Hidden"}</p>
+                                        </div>
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">Notifications</p>
+                                            <p className="font-medium">{showInNotifications ? "Shown" : "Hidden"}</p>
+                                        </div>
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">Start date</p>
+                                            <p className="font-medium">{startDate ? format(new Date(startDate), "MMM d, yyyy  HH:mm") : "Immediately"}</p>
+                                        </div>
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">End date</p>
+                                            <p className="font-medium">{endDate ? format(new Date(endDate), "MMM d, yyyy  HH:mm") : "No end date"}</p>
+                                        </div>
+                                    </div>
+
+                                    {showInSticky && (
+                                        <>
+                                            <div
+                                                className="w-full flex items-center justify-center rounded-md px-3 py-2 text-sm font-semibold"
+                                                style={{ backgroundColor: getTierColor(color || "indigo").swatch, color: getContrastText(getTierColor(color || "indigo").swatch, color || "indigo") }}
+                                            >
+                                                <span className="truncate">{watch("title") || "Sticky banner preview"}</span>
+                                            </div>
+                                            <p className="text-xs text-muted-foreground">
+                                                {watch("link_url")
+                                                    ? <>Clicking redirects to <span className="font-medium text-foreground">{watch("link_url")}</span>.</>
+                                                    : "No link — informational only, not clickable."}
+                                            </p>
+                                        </>
+                                    )}
+                                </SectionCard>
+                            </>
+                        )}
+
+                        {/* ── Step navigation ── */}
+                        <div className="flex items-center justify-between pt-2 pb-6">
+                            <Button
+                                type="button"
+                                variant="outline"
+                                onClick={() => currentStep > 0 ? setCurrentStep((s) => s - 1) : navigate("/admin/announcements")}
+                                disabled={loading}
+                            >
+                                <ArrowLeft className="h-4 w-4 mr-2" />
+                                {currentStep === 0 ? "Cancel" : "Back"}
+                            </Button>
+
+                            {currentStep < STEPS.length - 1 ? (
+                                <Button type="button" onClick={() => goToStep(currentStep + 1)}>
+                                    Next
+                                    <ArrowRight className="h-4 w-4 ml-2" />
+                                </Button>
+                            ) : (
+                                <div className="flex gap-2">
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        disabled={loading}
+                                        onClick={handleSubmit((values) => saveBroadcast(values, { publish: false }))}
+                                    >
+                                        {loading && <Spinner className="h-4 w-4 mr-2" />}
+                                        Save as draft
+                                    </Button>
+                                    <Button
+                                        type="button"
+                                        disabled={loading}
+                                        onClick={handleSubmit((values) => saveBroadcast(values, { publish: true }))}
+                                    >
+                                        {loading && <Spinner className="h-4 w-4 mr-2" />}
+                                        Publish now
+                                    </Button>
+                                </div>
+                            )}
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            {unsavedChangesDialog}
+        </section>
+    );
+}
diff --git a/apps/web/src/modules/admin/pages/notifications/ArchivedNotificationBroadcastList.jsx b/apps/web/src/modules/admin/pages/notifications/ArchivedNotificationBroadcastList.jsx
new file mode 100644
index 0000000..e70e2c0
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/notifications/ArchivedNotificationBroadcastList.jsx
@@ -0,0 +1,26 @@
+import { House } from "lucide-react";
+
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import ArchivedNotificationBroadcastsTable from "../../components/notifications/ArchivedNotificationBroadcastsTable";
+
+export default function ArchivedNotificationBroadcastList() {
+    const items = [
+        { label: "Home", icon: <House className="size-4" />, to: `/admin` },
+        { label: "Alerts", to: `/admin/announcements` },
+        { label: "Archived" },
+    ];
+
+    return (
+        <section className="bg-muted h-full">
+            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+                <div className="flex flex-col gap-2 my-6">
+                    <AppBreadcrumb items={items} />
+                </div>
+
+                <div className="w-full">
+                    <ArchivedNotificationBroadcastsTable />
+                </div>
+            </div>
+        </section>
+    );
+}
diff --git a/apps/web/src/modules/admin/pages/notifications/EditNotificationBroadcast.jsx b/apps/web/src/modules/admin/pages/notifications/EditNotificationBroadcast.jsx
new file mode 100644
index 0000000..a33b668
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/notifications/EditNotificationBroadcast.jsx
@@ -0,0 +1,627 @@
+// modules/admin/pages/notifications/EditNotificationBroadcast.jsx
+
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { House, Check, ArrowLeft, ArrowRight } from "lucide-react";
+
+import { useNotificationBroadcasts } from "@/contexts/AdminNotificationBroadcastContext";
+import { useAuth } from "@/contexts/AuthContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { BroadcastTargetPicker } from "@/components/generic/BroadcastTargetPicker";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { DateTimePicker } from "@/components/ui/date-time-picker";
+import {
+    AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
+    AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+
+import { TARGET_TYPE_OPTIONS, TARGET_TYPE_MAP } from "@/data/notificationBroadcast.data";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+import { TIER_COLOR_OPTIONS, getTierColor, getContrastText } from "@/utils/tierColors";
+import { normalizeExternalUrl } from "@/components/generic/notificationDisplay";
+import { isValidLink, LINK_ERROR } from "@/utils/link.util";
+
+// Internal paths ("/course/123") pass through untouched — everything else
+// gets a scheme so the saved URL always matches what goToLink() will open,
+// instead of relying on client-side normalization to paper over a bare
+// "example.com" the admin typed.
+const normalizeLinkUrl = (raw) => (!raw ? null : raw.startsWith("/") ? raw : normalizeExternalUrl(raw));
+
+// ─── Schema ─────────────────────────────────────────────────────────────────
+
+const schema = z.object({
+    title:       z.string().min(1, "Title is required."),
+    message:     z.string().optional(),
+    target_type: z.enum(["admin", "user", "both", "task_list", "course", "tier_plan"], { message: "Please select a target." }),
+    target_id:   z.string().nullable().optional(),
+    show_in_sticky: z.boolean().optional(),
+    show_in_notifications: z.boolean().optional(),
+    link_url:  z.string().trim().optional(),
+    color:      z.string().optional(),
+    start_date: z.string().optional(),
+    end_date:   z.string().optional(),
+}).superRefine((data, ctx) => {
+    if (TARGET_TYPE_MAP[data.target_type]?.needsTarget && !data.target_id) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: "Please select a specific target.",
+            path: ["target_id"],
+        });
+    }
+
+    if (!data.show_in_sticky && !data.show_in_notifications) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: "Select where to show this notification (Sticky or Notifications).",
+            path: ["show_in_sticky"],
+        });
+    }
+
+    if (data.show_in_sticky && data.show_in_notifications) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: "Choose only one: Sticky or Notifications.",
+            path: ["show_in_notifications"],
+        });
+    }
+
+    if (data.show_in_notifications && !data.message?.trim()) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: "Message is required for Notifications alerts.",
+            path: ["message"],
+        });
+    }
+
+    if (data.link_url && !isValidLink(data.link_url)) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: LINK_ERROR,
+            path: ["link_url"],
+        });
+    }
+
+    if (data.start_date && data.end_date && new Date(data.start_date) > new Date(data.end_date)) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: "End date must be after the start date.",
+            path: ["end_date"],
+        });
+    }
+});
+
+// ─── Steps config ───────────────────────────────────────────────────────────
+
+const STEPS = [
+    { label: "Content", description: "What it says & how it's shown" },
+    { label: "Target",  description: "Who receives it" },
+    { label: "Review",  description: "Confirm & save" },
+];
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+function FieldError({ message }) {
+    if (!message) return null;
+    return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+function SectionCard({ title, description, children }) {
+    return (
+        <div className="rounded-lg border bg-card p-6 space-y-5">
+            {(title || description) && (
+                <div className="space-y-0.5 pb-1 border-b">
+                    {title       && <h2 className="text-sm font-semibold">{title}</h2>}
+                    {description && <p className="text-xs text-muted-foreground">{description}</p>}
+                </div>
+            )}
+            {children}
+        </div>
+    );
+}
+
+function StepIndicator({ steps, current, onStepClick }) {
+    return (
+        <div className="flex items-start w-full mb-8">
+            {steps.flatMap((step, i) => {
+                const items = [
+                    <button
+                        key={`step-${i}`}
+                        type="button"
+                        onClick={() => onStepClick(i)}
+                        className="flex flex-col items-center gap-1.5 shrink-0 group"
+                    >
+                        <div
+                            className={[
+                                "w-8 h-8 rounded-full border-2 flex items-center justify-center text-sm font-semibold transition-all group-hover:opacity-80",
+                                i < current
+                                    ? "bg-primary border-primary text-primary-foreground"
+                                    : i === current
+                                    ? "border-primary text-primary"
+                                    : "border-border text-muted-foreground",
+                            ].join(" ")}
+                        >
+                            {i < current ? <Check className="h-4 w-4" /> : i + 1}
+                        </div>
+                        <p
+                            className={[
+                                "text-[11px] font-medium text-center leading-tight whitespace-nowrap",
+                                i === current ? "text-foreground" : "text-muted-foreground",
+                            ].join(" ")}
+                        >
+                            {step.label}
+                        </p>
+                    </button>,
+                ];
+                if (i < steps.length - 1) {
+                    items.push(
+                        <div
+                            key={`line-${i}`}
+                            className={[
+                                "flex-1 h-px mt-4 mx-2 shrink",
+                                i < current ? "bg-primary" : "bg-border",
+                            ].join(" ")}
+                        />
+                    );
+                }
+                return items;
+            })}
+        </div>
+    );
+}
+
+// ─── Page ───────────────────────────────────────────────────────────────────
+
+export default function EditNotificationBroadcast() {
+    const navigate = useNavigate();
+    const { broadcastId } = useParams();
+    const { fetchBroadcast, updateBroadcast, sendBroadcast, loading } = useNotificationBroadcasts();
+    const { user } = useAuth();
+
+    const [currentStep, setCurrentStep] = useState(0);
+    const [targetLabel, setTargetLabel] = useState(null);
+    const [broadcastStatus, setBroadcastStatus] = useState("draft");
+
+    const {
+        register,
+        handleSubmit,
+        reset,
+        watch,
+        setValue,
+        trigger,
+        formState: { errors, isDirty },
+    } = useForm({
+        resolver: zodResolver(schema),
+        defaultValues: {
+            title: "",
+            message: "",
+            target_type: undefined,
+            target_id: null,
+            show_in_sticky: false,
+            show_in_notifications: true,
+            link_url: "",
+            color: "indigo",
+            start_date: "",
+            end_date: "",
+        },
+    });
+
+    const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty);
+
+    const targetType = watch("target_type");
+    const targetId   = watch("target_id");
+    const needsTarget = TARGET_TYPE_MAP[targetType]?.needsTarget;
+    const showInSticky = watch("show_in_sticky");
+    const showInNotifications = watch("show_in_notifications");
+    const color = watch("color");
+    const startDate = watch("start_date");
+    const endDate = watch("end_date");
+
+    const breadcrumbItems = [
+        { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+        { label: "Alerts", to: "/admin/announcements" },
+        { label: "Edit" },
+    ];
+
+    // ─── Load existing broadcast data ─────────────────────────────────────────
+    useEffect(() => {
+        (async () => {
+            const res = await fetchBroadcast(broadcastId);
+            const b = res?.data?.data ?? null;
+            if (!b) return;
+
+            reset({
+                title:       b.title ?? "",
+                message:     b.message ?? "",
+                target_type: b.target_type ?? undefined,
+                target_id:   b.target_id ?? null,
+                show_in_sticky: b.show_in_sticky ?? false,
+                show_in_notifications: b.show_in_notifications ?? true,
+                link_url:  b.link_url ?? "",
+                color: b.color ?? "indigo",
+                start_date: b.start_date ?? "",
+                end_date:   b.end_date ?? "",
+            });
+            setBroadcastStatus(b.status ?? "draft");
+            setCurrentStep(0);
+        })();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [broadcastId]);
+
+    // Guards the step indicator: jumping ahead must not bypass required
+    // fields from earlier steps.
+    const goToStep = async (target) => {
+        if (target > 0) {
+            const valid = await trigger(["title", "message", "show_in_sticky", "show_in_notifications", "link_url", "end_date"]);
+            if (!valid) { setCurrentStep(0); return; }
+        }
+        if (target > 1) {
+            const valid = await trigger(["target_type", "target_id"]);
+            if (!valid) { setCurrentStep(1); return; }
+        }
+        setCurrentStep(target);
+    };
+
+    const saveBroadcast = async (values, { publish = false } = {}) => {
+        const payload = {
+            ...values,
+            message: values.message?.trim() || null,
+            target_id: TARGET_TYPE_MAP[values.target_type]?.needsTarget ? values.target_id : null,
+            show_in_sticky: values.show_in_sticky ?? false,
+            show_in_notifications: values.show_in_notifications ?? true,
+            link_url: values.link_url?.trim() ? normalizeLinkUrl(values.link_url.trim()) : null,
+            color: values.show_in_sticky ? (values.color || "indigo") : "indigo",
+            start_date: values.start_date || null,
+            end_date: values.end_date || null,
+            updatedBy: user?.user_id ?? null,
+        };
+
+        const res = await updateBroadcast(broadcastId, payload);
+        if (!res) return;
+
+        if (publish) {
+            const sent = await sendBroadcast(broadcastId);
+            if (!sent) return;
+        }
+
+        bypassOnce();
+        navigate("/admin/announcements");
+    };
+
+    return (
+        <section className="bg-muted h-full">
+            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-center px-4">
+                <div className="flex flex-col gap-2 my-6 w-full">
+                    <AppBreadcrumb items={breadcrumbItems} />
+                </div>
+
+                <div className="w-full max-w-2xl pb-10">
+                    <h1 className="text-2xl font-semibold tracking-tight mb-1">Edit Alert</h1>
+                    <p className="text-sm text-muted-foreground mb-6">
+                        {broadcastStatus === "sent"
+                            ? "This alert has already been sent — changes apply immediately to anyone currently seeing it."
+                            : "It's saved as a draft until you send it."}
+                    </p>
+
+                    <StepIndicator steps={STEPS} current={currentStep} onStepClick={goToStep} />
+
+                    <form onSubmit={(e) => e.preventDefault()} className="space-y-5">
+
+                        {/* ── Step 0: Content ── */}
+                        {currentStep === 0 && (
+                            <>
+                                <SectionCard title="Content" description="What admins and/or users will see.">
+                                    <div>
+                                        <Label className="mb-1.5 block">Title</Label>
+                                        <Input placeholder="e.g. Scheduled maintenance tonight" {...register("title")} />
+                                        <FieldError message={errors.title?.message} />
+                                    </div>
+                                    {showInNotifications && (
+                                        <div>
+                                            <Label className="mb-1.5 block">Message</Label>
+                                            <Textarea rows={4} placeholder="Full alert text" {...register("message")} />
+                                            <FieldError message={errors.message?.message} />
+                                        </div>
+                                    )}
+                                </SectionCard>
+
+                                <SectionCard title="Display" description="Where clients/admins can see this alert.">
+                                    <div className="space-y-3">
+                                        <div className="flex items-center gap-3">
+                                            <Checkbox
+                                                id="show_in_sticky"
+                                                checked={showInSticky === true}
+                                                onCheckedChange={(v) => {
+                                                    const checked = v === true;
+                                                    setValue("show_in_sticky", checked, { shouldValidate: true, shouldDirty: true });
+                                                    if (checked) setValue("show_in_notifications", false, { shouldValidate: true, shouldDirty: true });
+                                                }}
+                                            />
+                                            <Label htmlFor="show_in_sticky" className="cursor-pointer">
+                                                Show in Sticky Alerts
+                                            </Label>
+                                        </div>
+
+                                        <div className="flex items-center gap-3">
+                                            <Checkbox
+                                                id="show_in_notifications"
+                                                checked={showInNotifications === true}
+                                                onCheckedChange={(v) => {
+                                                    const checked = v === true;
+                                                    setValue("show_in_notifications", checked, { shouldValidate: true, shouldDirty: true });
+                                                    if (checked) setValue("show_in_sticky", false, { shouldValidate: true, shouldDirty: true });
+                                                }}
+                                            />
+                                            <Label htmlFor="show_in_notifications" className="cursor-pointer">
+                                                Show in Notifications
+                                            </Label>
+                                        </div>
+                                    </div>
+
+                                    <div className="grid grid-cols-2 gap-3">
+                                        <div>
+                                            <Label className="mb-1.5 block">Start date</Label>
+                                            <DateTimePicker
+                                                value={startDate || null}
+                                                onChange={(iso) => setValue("start_date", iso ?? "", { shouldValidate: true, shouldDirty: true })}
+                                                placeholder="Show immediately"
+                                            />
+                                        </div>
+                                        <div>
+                                            <Label className="mb-1.5 block">End date</Label>
+                                            <DateTimePicker
+                                                value={endDate || null}
+                                                onChange={(iso) => setValue("end_date", iso ?? "", { shouldValidate: true, shouldDirty: true })}
+                                                placeholder="No end date"
+                                            />
+                                            <FieldError message={errors.end_date?.message} />
+                                        </div>
+                                    </div>
+
+                                    {showInSticky && (
+                                        <div className="space-y-2 pt-1">
+                                            <Label>Sticky banner color</Label>
+                                            <div className="flex flex-wrap gap-1.5">
+                                                {TIER_COLOR_OPTIONS.map((opt) => {
+                                                    const selected = (color || "indigo") === opt.key;
+                                                    return (
+                                                        <button
+                                                            key={opt.key}
+                                                            type="button"
+                                                            title={opt.label}
+                                                            onClick={() => setValue("color", opt.key, { shouldDirty: true })}
+                                                            className={[
+                                                                "w-5 h-5 rounded-full border-2 transition-all",
+                                                                selected
+                                                                    ? "border-foreground scale-110 shadow-sm"
+                                                                    : "border-transparent hover:border-muted-foreground/50",
+                                                            ].join(" ")}
+                                                            style={{ backgroundColor: opt.swatch }}
+                                                        />
+                                                    );
+                                                })}
+                                            </div>
+                                        </div>
+                                    )}
+                                </SectionCard>
+
+                                {showInSticky && (
+                                    <SectionCard title="Link" description="Where the sticky banner goes when someone clicks it. Optional.">
+                                        <div>
+                                            <Label className="mb-1.5 block">Link URL</Label>
+                                            <Input placeholder="https://example.com or /course/123" {...register("link_url")} />
+                                            <FieldError message={errors.link_url?.message} />
+                                            <p className="text-xs text-muted-foreground mt-1.5">
+                                                Internal paths (starting with /) navigate in-app; anything else opens in a new tab. Leave blank for an informational banner with no click action.
+                                            </p>
+                                        </div>
+                                    </SectionCard>
+                                )}
+
+                                {showInSticky && (
+                                    <SectionCard title="Preview" description="What the sticky banner looks like. Clicking it redirects to the link above, if set.">
+                                        <div
+                                            className="w-full flex items-center justify-center rounded-md px-3 py-2 text-sm font-semibold"
+                                            style={{
+                                                backgroundColor: getTierColor(color || "indigo").swatch,
+                                                color: getContrastText(getTierColor(color || "indigo").swatch, color || "indigo"),
+                                            }}
+                                        >
+                                            <span className="truncate">{watch("title") || "Sticky banner preview"}</span>
+                                        </div>
+                                    </SectionCard>
+                                )}
+                            </>
+                        )}
+
+                        {/* ── Step 1: Target ── */}
+                        {currentStep === 1 && (
+                            <SectionCard title="Target" description="Who receives this alert when it's sent.">
+                                <div>
+                                    <Select
+                                        value={targetType}
+                                        onValueChange={(v) => {
+                                            setValue("target_type", v, { shouldValidate: true, shouldDirty: true });
+                                            setValue("target_id", null, { shouldDirty: true });
+                                            setTargetLabel(null);
+                                        }}
+                                    >
+                                        <SelectTrigger>
+                                            <SelectValue placeholder="Select a target" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            {TARGET_TYPE_OPTIONS.map((t) => (
+                                                <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+                                    <FieldError message={errors.target_type?.message} />
+                                    {targetType && (
+                                        <p className="text-xs text-muted-foreground mt-1.5">
+                                            {TARGET_TYPE_MAP[targetType]?.description}
+                                        </p>
+                                    )}
+                                </div>
+
+                                {needsTarget && (
+                                    <div>
+                                        <BroadcastTargetPicker
+                                            targetType={targetType}
+                                            value={targetId}
+                                            onChange={(id) => setValue("target_id", id, { shouldValidate: true, shouldDirty: true })}
+                                            onLabelResolved={setTargetLabel}
+                                        />
+                                        <FieldError message={errors.target_id?.message} />
+                                    </div>
+                                )}
+                            </SectionCard>
+                        )}
+
+                        {/* ── Step 2: Review ── */}
+                        {currentStep === 2 && (
+                            <>
+                                <SectionCard title="Content" description="Confirm everything looks right before saving.">
+                                    <div className="space-y-3 text-sm">
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">Title</p>
+                                            <p className="font-medium">{watch("title") || "—"}</p>
+                                        </div>
+                                        {showInNotifications && (
+                                            <div>
+                                                <p className="text-xs text-muted-foreground">Message</p>
+                                                <p className="font-medium whitespace-pre-wrap">{watch("message") || "—"}</p>
+                                            </div>
+                                        )}
+                                    </div>
+                                </SectionCard>
+
+                                <SectionCard title="Target">
+                                    <div className="flex items-center gap-2 text-sm">
+                                        <Badge variant="outline">{TARGET_TYPE_MAP[targetType]?.label ?? "—"}</Badge>
+                                        {needsTarget && (
+                                            <span className={targetLabel ? "font-medium" : "text-muted-foreground"}>
+                                                {targetLabel ?? (targetId ? "Selected item not found — reselect it" : "No target selected")}
+                                            </span>
+                                        )}
+                                    </div>
+                                </SectionCard>
+
+                                <SectionCard title="Display">
+                                    <div className="grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">Sticky Alerts</p>
+                                            <p className="font-medium">{showInSticky ? "Shown" : "Hidden"}</p>
+                                        </div>
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">Notifications</p>
+                                            <p className="font-medium">{showInNotifications ? "Shown" : "Hidden"}</p>
+                                        </div>
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">Start date</p>
+                                            <p className="font-medium">{startDate ? format(new Date(startDate), "MMM d, yyyy  HH:mm") : "Immediately"}</p>
+                                        </div>
+                                        <div>
+                                            <p className="text-xs text-muted-foreground">End date</p>
+                                            <p className="font-medium">{endDate ? format(new Date(endDate), "MMM d, yyyy  HH:mm") : "No end date"}</p>
+                                        </div>
+                                    </div>
+
+                                    {showInSticky && (
+                                        <>
+                                            <div
+                                                className="w-full flex items-center justify-center rounded-md px-3 py-2 text-sm font-semibold"
+                                                style={{ backgroundColor: getTierColor(color || "indigo").swatch, color: getContrastText(getTierColor(color || "indigo").swatch, color || "indigo") }}
+                                            >
+                                                <span className="truncate">{watch("title") || "Sticky banner preview"}</span>
+                                            </div>
+                                            <p className="text-xs text-muted-foreground">
+                                                {watch("link_url")
+                                                    ? <>Clicking redirects to <span className="font-medium text-foreground">{watch("link_url")}</span>.</>
+                                                    : "No link — informational only, not clickable."}
+                                            </p>
+                                        </>
+                                    )}
+                                </SectionCard>
+                            </>
+                        )}
+
+                        {/* ── Step navigation ── */}
+                        <div className="flex items-center justify-between pt-2 pb-6">
+                            <Button
+                                type="button"
+                                variant="outline"
+                                onClick={() => currentStep > 0 ? setCurrentStep((s) => s - 1) : navigate("/admin/announcements")}
+                                disabled={loading}
+                            >
+                                <ArrowLeft className="h-4 w-4 mr-2" />
+                                {currentStep === 0 ? "Cancel" : "Back"}
+                            </Button>
+
+                            {currentStep < STEPS.length - 1 ? (
+                                <Button type="button" onClick={() => goToStep(currentStep + 1)}>
+                                    Next
+                                    <ArrowRight className="h-4 w-4 ml-2" />
+                                </Button>
+                            ) : broadcastStatus === "sent" ? (
+                                <AlertDialog>
+                                    <AlertDialogTrigger asChild>
+                                        <Button type="button" disabled={loading}>
+                                            {loading && <Spinner className="h-4 w-4 mr-2" />}
+                                            Save changes
+                                        </Button>
+                                    </AlertDialogTrigger>
+                                    <AlertDialogContent>
+                                        <AlertDialogHeader>
+                                            <AlertDialogTitle>Save changes to this alert?</AlertDialogTitle>
+                                            <AlertDialogDescription>
+                                                This alert has already been sent — saving will update it immediately for anyone currently seeing it.
+                                            </AlertDialogDescription>
+                                        </AlertDialogHeader>
+                                        <AlertDialogFooter>
+                                            <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                            <AlertDialogAction onClick={handleSubmit((values) => saveBroadcast(values, { publish: false }))}>
+                                                Save changes
+                                            </AlertDialogAction>
+                                        </AlertDialogFooter>
+                                    </AlertDialogContent>
+                                </AlertDialog>
+                            ) : (
+                                <div className="flex gap-2">
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        disabled={loading}
+                                        onClick={handleSubmit((values) => saveBroadcast(values, { publish: false }))}
+                                    >
+                                        {loading && <Spinner className="h-4 w-4 mr-2" />}
+                                        Save as draft
+                                    </Button>
+                                    <Button
+                                        type="button"
+                                        disabled={loading}
+                                        onClick={handleSubmit((values) => saveBroadcast(values, { publish: true }))}
+                                    >
+                                        {loading && <Spinner className="h-4 w-4 mr-2" />}
+                                        Publish now
+                                    </Button>
+                                </div>
+                            )}
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            {unsavedChangesDialog}
+        </section>
+    );
+}
diff --git a/apps/web/src/modules/admin/pages/notifications/NotificationBroadcastList.jsx b/apps/web/src/modules/admin/pages/notifications/NotificationBroadcastList.jsx
new file mode 100644
index 0000000..79bf1c8
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/notifications/NotificationBroadcastList.jsx
@@ -0,0 +1,284 @@
+// modules/admin/pages/notifications/NotificationBroadcastList.jsx
+
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { House, Plus, Search, Megaphone, Send, Edit, Trash2, Users, Archive } from "lucide-react";
+
+import { useNotificationBroadcasts } from "@/contexts/AdminNotificationBroadcastContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { TablePagination } from "@/components/generic/Table/TablePagination";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Spinner } from "@/components/ui/spinner";
+import {
+    AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
+    AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+
+import { TARGET_TYPE_MAP, BROADCAST_STATUSES, BROADCAST_STATUS_MAP } from "@/data/notificationBroadcast.data";
+
+export default function NotificationBroadcastList() {
+    const navigate = useNavigate();
+    const {
+        broadcasts, pagination, loading, fetchBroadcasts, sendBroadcast, archiveBroadcast,
+    } = useNotificationBroadcasts();
+
+    const [statusFilter, setStatusFilter] = useState("all");
+    const [searchInput, setSearchInput] = useState("");
+    const [search, setSearch] = useState("");
+    const [limit, setLimit] = useState(10);
+
+    function buildFilters() {
+        const filters = [];
+        if (statusFilter !== "all") filters.push({ id: "status", value: statusFilter });
+        if (search.trim())          filters.push({ id: "title", value: search.trim() });
+        return filters;
+    }
+
+    useEffect(() => {
+        fetchBroadcasts({ page: 1, limit, filters: buildFilters() });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [statusFilter, search, limit]);
+
+    const items = [
+        { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+        { label: "Alerts" },
+    ];
+
+    const total      = pagination?.totalRecords ?? broadcasts.length;
+    const draftCount = broadcasts.filter((b) => b.status === "draft").length;
+    const sentCount  = broadcasts.filter((b) => b.status === "sent").length;
+
+    async function handleSend(broadcastId) {
+        await sendBroadcast(broadcastId);
+    }
+
+    async function handleArchive(broadcastId) {
+        await archiveBroadcast(broadcastId);
+    }
+
+    return (
+        <section className="bg-muted h-full">
+            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+                <div className="flex flex-col gap-2 my-6 w-full">
+                    <AppBreadcrumb items={items} />
+                </div>
+
+                <div className="w-full flex flex-col gap-6 pb-10">
+
+                    {/* ── Header ─────────────────────────────────────────────────── */}
+                    <div className="flex items-center justify-between flex-wrap gap-3">
+                        <div>
+                            <h1 className="text-2xl font-semibold tracking-tight">Alerts</h1>
+                            <p className="text-sm text-muted-foreground">Compose and send alerts to admins and users</p>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <Button variant="outline" onClick={() => navigate("/admin/announcements/archived")}>
+                                <Archive className="size-4" />
+                                Archived
+                            </Button>
+                            <Button onClick={() => navigate("/admin/announcements/add")}>
+                                <Plus className="size-4" />
+                                New Alert
+                            </Button>
+                        </div>
+                    </div>
+
+                    {/* ── Stat cards ─────────────────────────────────────────────── */}
+                    <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+                        <StatCard label="Total"  value={total} />
+                        <StatCard label="Drafts" value={draftCount} tone="muted" />
+                        <StatCard label="Sent"   value={sentCount}  tone="success" />
+                    </div>
+
+                    {/* ── Filters ────────────────────────────────────────────────── */}
+                    <div className="flex items-center gap-2 flex-wrap">
+                        <Select value={statusFilter} onValueChange={setStatusFilter}>
+                            <SelectTrigger className="w-[150px] bg-background">
+                                <SelectValue placeholder="All statuses" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="all">All statuses</SelectItem>
+                                {BROADCAST_STATUSES.map((s) => (
+                                    <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+
+                        <div className="flex items-center gap-2 flex-1 min-w-[160px]">
+                            <div className="relative w-64">
+                                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+                                <Input
+                                    placeholder="Search alerts..."
+                                    className="pl-8 bg-background text-sm"
+                                    value={searchInput}
+                                    onChange={(e) => setSearchInput(e.target.value)}
+                                    onKeyDown={(e) => { if (e.key === "Enter") setSearch(searchInput); }}
+                                />
+                            </div>
+                            <Button variant="outline" size="icon" className="shrink-0 bg-background" onClick={() => setSearch(searchInput)} aria-label="Search">
+                                <Search className="size-4" />
+                            </Button>
+                        </div>
+                    </div>
+
+                    {/* ── Grid ───────────────────────────────────────────────────── */}
+                    {loading ? (
+                        <div className="flex items-center justify-center py-20">
+                            <Spinner className="size-6" />
+                        </div>
+                    ) : broadcasts.length === 0 ? (
+                        <EmptyState onCreate={() => navigate("/admin/announcements/add")} />
+                    ) : (
+                        <>
+                            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                                {broadcasts.map((b) => (
+                                    <BroadcastCard
+                                        key={b.broadcast_id}
+                                        broadcast={b}
+                                        onView={() => navigate(`/admin/announcements/${b.broadcast_id}/view`)}
+                                        onEdit={() => navigate(`/admin/announcements/${b.broadcast_id}/edit`)}
+                                        onSend={() => handleSend(b.broadcast_id)}
+                                        onArchive={() => handleArchive(b.broadcast_id)}
+                                    />
+                                ))}
+                            </div>
+
+                            <div className="bg-background rounded-lg border">
+                                <TablePagination
+                                    pagination={pagination}
+                                    rowCount={broadcasts.length}
+                                    totalRecords={pagination?.totalRecords}
+                                    recordLabel="alert"
+                                    onPageChange={(page) => fetchBroadcasts({ page, limit, filters: buildFilters() })}
+                                    onPageSizeChange={(size) => setLimit(size)}
+                                />
+                            </div>
+                        </>
+                    )}
+                </div>
+            </div>
+        </section>
+    );
+}
+
+// ─── Stat card ──────────────────────────────────────────────────────────────
+
+function StatCard({ label, value, tone = "default" }) {
+    const toneClass = {
+        default: "text-foreground",
+        success: "text-green-600 dark:text-green-400",
+        muted:   "text-muted-foreground",
+    }[tone];
+
+    return (
+        <div className="bg-background rounded-lg border p-4">
+            <p className="text-sm text-muted-foreground mb-1">{label}</p>
+            <p className={`text-2xl font-semibold ${toneClass}`}>{value}</p>
+        </div>
+    );
+}
+
+// ─── Broadcast card ─────────────────────────────────────────────────────────
+
+function BroadcastCard({ broadcast, onView, onEdit, onSend, onArchive }) {
+    const { fmtDateTime } = useDateFormat();
+    const statusMeta   = BROADCAST_STATUS_MAP[broadcast.status] ?? {};
+    const targetMeta   = TARGET_TYPE_MAP[broadcast.target_type] ?? {};
+    const TargetIcon   = targetMeta.icon ?? Users;
+    const targetText   = broadcast.target_label ? `${targetMeta.label}: ${broadcast.target_label}` : (targetMeta.label ?? broadcast.target_type);
+    const isDraft       = broadcast.status === "draft";
+
+    return (
+        <div className="bg-background rounded-lg border overflow-hidden flex flex-col">
+            <div className="p-3 flex flex-col gap-2 flex-1">
+                <button type="button" onClick={onView} className="text-left">
+                    <div className="flex items-center gap-1.5 mb-1.5">
+                        <span className={`text-xs font-medium px-2 py-0.5 rounded-md ${statusMeta.badgeClass ?? "bg-muted text-muted-foreground"}`}>
+                            {statusMeta.label ?? broadcast.status}
+                        </span>
+                        <span className="flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-md bg-muted text-muted-foreground">
+                            <TargetIcon className="size-3" />
+                            {targetText}
+                        </span>
+                    </div>
+                    <p className="text-sm font-medium leading-snug truncate hover:underline">{broadcast.title || "Untitled alert"}</p>
+                    {broadcast.message && (
+                        <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">{broadcast.message}</p>
+                    )}
+                    {broadcast.sent_at && (
+                        <p className="text-xs text-muted-foreground mt-1.5">
+                            Sent {fmtDateTime(broadcast.sent_at)} &middot; {broadcast.recipient_count ?? 0} recipient(s)
+                        </p>
+                    )}
+                </button>
+
+                <div className="mt-auto flex items-center justify-end gap-1 pt-2">
+                    {isDraft && (
+                        <AlertDialog>
+                            <AlertDialogTrigger asChild>
+                                <Button variant="ghost" size="icon" className="size-7" aria-label="Send">
+                                    <Send className="size-3.5" />
+                                </Button>
+                            </AlertDialogTrigger>
+                            <AlertDialogContent>
+                                    <AlertDialogHeader>
+                                    <AlertDialogTitle>Send this alert?</AlertDialogTitle>
+                                    <AlertDialogDescription>
+                                        "{broadcast.title || "This alert"}" will be delivered to {targetText?.toLowerCase() ?? broadcast.target_type} immediately. This cannot be undone.
+                                    </AlertDialogDescription>
+                                </AlertDialogHeader>
+                                <AlertDialogFooter>
+                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                    <AlertDialogAction onClick={onSend}>Send</AlertDialogAction>
+                                </AlertDialogFooter>
+                            </AlertDialogContent>
+                        </AlertDialog>
+                    )}
+                    <Button variant="ghost" size="icon" className="size-7" onClick={onEdit} aria-label="Edit">
+                        <Edit className="size-3.5" />
+                    </Button>
+                    <AlertDialog>
+                        <AlertDialogTrigger asChild>
+                            <Button variant="ghost" size="icon" className="size-7" aria-label="Delete">
+                                <Trash2 className="size-3.5" />
+                            </Button>
+                        </AlertDialogTrigger>
+                        <AlertDialogContent>
+                            <AlertDialogHeader>
+                                <AlertDialogTitle>Archive this alert?</AlertDialogTitle>
+                                <AlertDialogDescription>
+                                    "{broadcast.title || "This alert"}" will be moved to archived alerts. You can restore it later.
+                                </AlertDialogDescription>
+                            </AlertDialogHeader>
+                            <AlertDialogFooter>
+                                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                <AlertDialogAction onClick={onArchive}>Archive</AlertDialogAction>
+                            </AlertDialogFooter>
+                        </AlertDialogContent>
+                    </AlertDialog>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// ─── Empty state ────────────────────────────────────────────────────────────
+
+function EmptyState({ onCreate }) {
+    return (
+        <div className="flex flex-col items-center justify-center gap-3 py-20 text-center border rounded-lg bg-background">
+            <Megaphone className="size-8 text-muted-foreground" />
+            <div>
+                <p className="font-medium">No alerts yet</p>
+                <p className="text-sm text-muted-foreground">Compose your first alert to admins or users.</p>
+            </div>
+            <Button onClick={onCreate}>
+                <Plus className="size-4" />
+                New Alert
+            </Button>
+        </div>
+    );
+}
diff --git a/apps/web/src/modules/admin/pages/notifications/ViewNotificationBroadcast.jsx b/apps/web/src/modules/admin/pages/notifications/ViewNotificationBroadcast.jsx
new file mode 100644
index 0000000..f56dab7
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/notifications/ViewNotificationBroadcast.jsx
@@ -0,0 +1,235 @@
+// modules/admin/pages/notifications/ViewNotificationBroadcast.jsx
+
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { Edit, ArrowLeft, Send, Users, FileText, BadgeCheck, Megaphone } from "lucide-react";
+
+import { useNotificationBroadcasts } from "@/contexts/AdminNotificationBroadcastContext";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Spinner } from "@/components/ui/spinner";
+import { Separator } from "@/components/ui/separator";
+import {
+    AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
+    AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+
+import { TARGET_TYPE_MAP, BROADCAST_STATUS_MAP } from "@/data/notificationBroadcast.data";
+
+// ─── Shared helpers ─────────────────────────────────────────────────────────
+
+function SectionCard({ icon: Icon, title, children }) {
+    return (
+        <div className="rounded-lg border bg-card p-5 space-y-4">
+            <div className="flex items-center gap-2">
+                {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+                <h2 className="text-sm font-semibold">{title}</h2>
+            </div>
+            <Separator />
+            {children}
+        </div>
+    );
+}
+
+function Field({ label, children }) {
+    return (
+        <div className="flex flex-col gap-0.5">
+            <span className="text-xs text-muted-foreground uppercase tracking-wide">{label}</span>
+            <span className="text-sm font-medium">{children ?? <span className="text-muted-foreground italic">—</span>}</span>
+        </div>
+    );
+}
+
+// ─── Tab: Content ───────────────────────────────────────────────────────────
+
+function ContentTab({ broadcast }) {
+    return (
+        <SectionCard icon={FileText} title="Content">
+            <Field label="Title">{broadcast.title || "—"}</Field>
+            {broadcast.show_in_notifications && (
+                <Field label="Message">
+                    <span className="font-normal">{broadcast.message || "—"}</span>
+                </Field>
+            )}
+        </SectionCard>
+    );
+}
+
+// ─── Tab: Delivery ───────────────────────────────────────────────────────────
+
+function DeliveryTab({ broadcast, targetText, fmtDateTime }) {
+    return (
+        <SectionCard icon={Send} title="Delivery">
+            <div className="grid grid-cols-2 gap-4">
+                <Field label="Target">{targetText}</Field>
+                <Field label="Recipients">{broadcast.recipient_count ?? 0}</Field>
+                <Field label="Sent at">{broadcast.sent_at ? fmtDateTime(broadcast.sent_at) : "Not sent yet"}</Field>
+            </div>
+        </SectionCard>
+    );
+}
+
+// ─── Tab: Audit ───────────────────────────────────────────────────────────────
+
+function AuditTab({ broadcast, fmtDateTime }) {
+    return (
+        <SectionCard icon={BadgeCheck} title="Audit">
+            <div className="grid grid-cols-2 gap-4">
+                <Field label="Created by">{broadcast.creator?.full_name || "—"}</Field>
+                <Field label="Created at">{fmtDateTime(broadcast.createdAt)}</Field>
+                <Field label="Last updated by">{broadcast.updater?.full_name || "—"}</Field>
+                <Field label="Last updated at">{fmtDateTime(broadcast.updatedAt)}</Field>
+            </div>
+        </SectionCard>
+    );
+}
+
+// ─── Tabs config ───────────────────────────────────────────────────────────────
+
+const TABS = [
+    { key: "content",  label: "Content",  icon: FileText },
+    { key: "delivery", label: "Delivery", icon: Send },
+    { key: "audit",    label: "Audit",    icon: BadgeCheck },
+];
+
+// ─── Page ───────────────────────────────────────────────────────────────────
+
+export default function ViewNotificationBroadcast() {
+    const navigate = useNavigate();
+    const { broadcastId } = useParams();
+    const { fetchBroadcast, sendBroadcast, loading } = useNotificationBroadcasts();
+    const { fmtDateTime } = useDateFormat();
+
+    const [broadcast, setBroadcast] = useState(null);
+    const [activeTab, setActiveTab] = useState("content");
+
+    useEffect(() => {
+        (async () => {
+            const res = await fetchBroadcast(broadcastId);
+            setBroadcast(res?.data?.data ?? null);
+        })();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [broadcastId]);
+
+    if (loading && !broadcast) {
+        return (
+            <div className="flex items-center justify-center py-32">
+                <Spinner className="size-6" />
+            </div>
+        );
+    }
+
+    if (!broadcast) {
+        return (
+            <div className="lg:container lg:mx-auto lg:px-6 px-4 py-6">
+                <p className="text-sm text-muted-foreground">Alert not found.</p>
+            </div>
+        );
+    }
+
+    const statusMeta = BROADCAST_STATUS_MAP[broadcast.status] ?? {};
+    const targetMeta = TARGET_TYPE_MAP[broadcast.target_type] ?? {};
+    const TargetIcon = targetMeta.icon ?? Users;
+    const targetText = broadcast.target_label ? `${targetMeta.label}: ${broadcast.target_label}` : (targetMeta.label ?? broadcast.target_type);
+    const isDraft     = broadcast.status === "draft";
+
+    async function handleSend() {
+        const res = await sendBroadcast(broadcastId);
+        if (res) {
+            const refreshed = await fetchBroadcast(broadcastId);
+            setBroadcast(refreshed?.data?.data ?? broadcast);
+        }
+    }
+
+    return (
+        <div className="flex flex-col min-h-screen bg-muted/60">
+
+            {/* ── Sticky header ── */}
+            <div
+                className="sticky z-20 shrink-0 border-b bg-white/70 dark:bg-zinc-900/70 backdrop-blur-md"
+                style={{ top: "var(--navbar-h)" }}
+            >
+                <div className="lg:container lg:mx-auto lg:px-6 px-4">
+                    <div className="flex items-center gap-3 py-3">
+                        <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/admin/announcements")}>
+                            <ArrowLeft className="h-4 w-4" />
+                        </Button>
+                        <div className="flex-1 min-w-0">
+                            <h1 className="text-xl font-semibold leading-tight flex items-center gap-2">
+                                <Megaphone className="h-5 w-5 text-muted-foreground" />
+                                {broadcast.title || "Untitled alert"}
+                            </h1>
+                            <div className="flex items-center gap-1.5 mt-1">
+                                <Badge variant={broadcast.status === "sent" ? "default" : "secondary"}>
+                                    {statusMeta.label ?? broadcast.status}
+                                </Badge>
+                                <Badge variant="secondary" className="gap-1">
+                                    <TargetIcon className="size-3" />
+                                    {targetText}
+                                </Badge>
+                            </div>
+                        </div>
+
+                        <div className="flex items-center gap-2 shrink-0">
+                            {isDraft && (
+                                <AlertDialog>
+                                    <AlertDialogTrigger asChild>
+                                        <Button variant="outline" size="sm">
+                                            <Send className="size-4" />
+                                            Send
+                                        </Button>
+                                    </AlertDialogTrigger>
+                                    <AlertDialogContent>
+                                        <AlertDialogHeader>
+                                            <AlertDialogTitle>Send this alert?</AlertDialogTitle>
+                                            <AlertDialogDescription>
+                                                "{broadcast.title || "This alert"}" will be delivered to {targetText?.toLowerCase() ?? broadcast.target_type} immediately. This cannot be undone.
+                                            </AlertDialogDescription>
+                                        </AlertDialogHeader>
+                                        <AlertDialogFooter>
+                                            <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                            <AlertDialogAction onClick={handleSend}>Send</AlertDialogAction>
+                                        </AlertDialogFooter>
+                                    </AlertDialogContent>
+                                </AlertDialog>
+                            )}
+                            <Button size="sm" onClick={() => navigate(`/admin/announcements/${broadcastId}/edit`)}>
+                                <Edit className="size-4" />
+                                Edit
+                            </Button>
+                        </div>
+                    </div>
+
+                    {/* Underline tabs */}
+                    <div className="flex gap-1 pb-0 -mb-px">
+                        {TABS.map(({ key, label, icon: Icon }) => (
+                            <button
+                                key={key}
+                                onClick={() => setActiveTab(key)}
+                                className={[
+                                    "flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors",
+                                    activeTab === key
+                                        ? "border-primary text-primary"
+                                        : "border-transparent text-muted-foreground hover:text-foreground",
+                                ].join(" ")}
+                            >
+                                <Icon className="h-3.5 w-3.5" />
+                                {label}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+            </div>
+
+            {/* ── Content ── */}
+            <div className="lg:container lg:mx-auto lg:px-6 px-4 py-6">
+                <div className="max-w-3xl mx-auto space-y-5 pb-16">
+                    {activeTab === "content"  && <ContentTab broadcast={broadcast} />}
+                    {activeTab === "delivery" && <DeliveryTab broadcast={broadcast} targetText={targetText} fmtDateTime={fmtDateTime} />}
+                    {activeTab === "audit"    && <AuditTab broadcast={broadcast} fmtDateTime={fmtDateTime} />}
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/apps/web/src/modules/admin/pages/task_list/ArchiveTaskList.jsx b/apps/web/src/modules/admin/pages/task_list/ArchiveTaskList.jsx
new file mode 100644
index 0000000..db3ed06
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/task_list/ArchiveTaskList.jsx
@@ -0,0 +1,24 @@
+import { House } from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import ArchiveTaskListTable from "@/modules/admin/components/task/ArchiveTaskListTable";
+
+export default function ArchiveTaskList() {
+    const items = [
+        { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+        { label: "Task List", to: "/admin/taskList" },
+        { label: "Archived" },
+    ];
+
+    return (
+        <section className="bg-muted h-full">
+            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+                <div className="flex flex-col gap-2 my-6">
+                    <AppBreadcrumb items={items} />
+                </div>
+                <div className="w-full">
+                    <ArchiveTaskListTable />
+                </div>
+            </div>
+        </section>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/task_list/CreateTaskList.jsx b/apps/web/src/modules/admin/pages/task_list/CreateTaskList.jsx
new file mode 100644
index 0000000..5a0564b
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/task_list/CreateTaskList.jsx
@@ -0,0 +1,332 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useAdminTask } from '@/contexts/AdminTaskContext';
+import GroupMultiSelect from '@/components/generic/GroupMultiSelect';
+import TaskQueueStep from './TaskQueueStep';
+import api from '@/utils/api.util';
+import { cn } from '@/lib/utils';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ArrowLeft, ChevronRight, ChevronLeft, Check, FileText, Users, ListChecks, ClipboardList } from 'lucide-react';
+
+// ─── Steps ────────────────────────────────────────────────────────────────────
+const STEPS = [
+    { id: 0, label: 'Details & Groups', icon: FileText },
+    { id: 1, label: 'Tasks',            icon: ListChecks },
+    { id: 2, label: 'Review',           icon: ClipboardList },
+];
+
+// ─── Summary row ──────────────────────────────────────────────────────────────
+function SummaryRow({ label, value }) {
+    if (!value) return null;
+    return (
+        <div className="flex justify-between py-1.5 text-sm gap-4">
+            <span className="text-muted-foreground min-w-[120px] shrink-0">{label}</span>
+            <span className="text-foreground text-right">{value}</span>
+        </div>
+    );
+}
+
+export default function CreateTaskList() {
+    const navigate = useNavigate();
+    const {
+        createTaskList, assignGroups, createTasksBulk,
+        fetchCoursesFlat, fetchUnitsFlat, fetchLessonsFlat,
+        loading,
+    } = useAdminTask();
+
+    const [step, setStep] = useState(0);
+    const [form, setForm] = useState({ name: '', description: '' });
+    const [selectedGroupIds, setSelectedGroupIds] = useState([]);
+    const [allGroups, setAllGroups] = useState([]);
+    const [queuedTasks, setQueuedTasks] = useState([]);
+    const [courses, setCourses] = useState([]);
+    const [units, setUnits]     = useState([]);
+    const [lessons, setLessons] = useState([]);
+    const [errors, setErrors] = useState({});
+
+    // Fetch groups for the review step's summary (names, not just ids)
+    useEffect(() => {
+        api.get('/admin/groups', { params: { limit: 500 } })
+            .then((res) => setAllGroups(res.data?.data?.data ?? res.data?.data ?? []))
+            .catch(() => {});
+    }, []);
+
+    // Fetch flat content lists for the Tasks step's requirement builder
+    useEffect(() => {
+        fetchCoursesFlat().then((d) => d && setCourses(d));
+        fetchUnitsFlat().then((d) => d && setUnits(d));
+        fetchLessonsFlat().then((d) => d && setLessons(d));
+    }, []);
+
+    const validateDetails = () => {
+        const e = {};
+        if (!form.name.trim()) e.name = 'Task list name is required.';
+        setErrors(e);
+        return Object.keys(e).length === 0;
+    };
+
+    const handleNext = () => {
+        if (step === 0 && !validateDetails()) return;
+        setStep((s) => s + 1);
+    };
+
+    const handleBack = () => {
+        if (step === 0) navigate('/admin/taskList');
+        else setStep((s) => s - 1);
+    };
+
+    const handleCreate = async () => {
+        if (!validateDetails()) { setStep(0); return; }
+
+        const created = await createTaskList({
+            name: form.name.trim(),
+            description: form.description.trim() || null,
+        });
+
+        if (!created) return; // createTaskList already toasts on error
+
+        // Assign selected groups if any — non-blocking: navigate regardless
+        if (selectedGroupIds.length > 0) {
+            await assignGroups(created.task_list_id, selectedGroupIds);
+        }
+
+        // Create any queued tasks under the new task list in one batched request —
+        // non-blocking: navigate regardless
+        if (queuedTasks.length > 0) {
+            await createTasksBulk(created.task_list_id, queuedTasks.map((t) => ({
+                name:        t.name.trim(),
+                description: t.description?.trim() || null,
+                deadline:    t.deadline || null,
+                // strip duration_seconds — it's only used for local validation
+                requirements: t.requirements.map((r) => {
+                    const req = { ...r };
+                    delete req.duration_seconds;
+                    return req;
+                }),
+            })));
+        }
+
+        navigate(`/admin/taskList/${created.task_list_id}/view`);
+    };
+
+    const selectedGroupNames = allGroups
+        .filter((g) => selectedGroupIds.includes(g.group_id))
+        .map((g) => g.name);
+
+    return (
+        // ← plain div, no <form> — prevents any accidental submit on button clicks
+        <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
+            <div className="mx-auto w-full lg:w-2xl space-y-6">
+
+                {/* Header */}
+                <div className="flex items-center gap-3">
+                    <Button type="button" variant="ghost" size="icon" onClick={() => navigate('/admin/taskList')}>
+                        <ArrowLeft className="h-4 w-4" />
+                    </Button>
+                    <div>
+                        <h1 className="text-xl font-semibold">Create Task List</h1>
+                        <p className="text-sm text-muted-foreground">View course information.</p>
+                    </div>
+                </div>
+
+                {/* Stepper */}
+                <div className="flex items-center gap-0">
+                    {STEPS.map((s, i) => {
+                        const Icon     = s.icon;
+                        const isActive = step === i;
+                        const isDone   = step > i;
+
+                        return (
+                            <div key={s.id} className="flex items-center flex-1 last:flex-none">
+                                <div className="flex flex-col items-center gap-1">
+                                    <div className={cn(
+                                        'h-8 w-8 rounded-full flex items-center justify-center border transition-colors',
+                                        isDone   && 'bg-emerald-600 border-emerald-600 text-white',
+                                        isActive && 'border-primary bg-primary text-primary-foreground',
+                                        !isActive && !isDone && 'border-border bg-background text-muted-foreground'
+                                    )}>
+                                        {isDone ? <Check className="h-4 w-4" /> : <Icon className="h-4 w-4" />}
+                                    </div>
+                                    <span className={cn(
+                                        'text-[11px] font-medium whitespace-nowrap hidden sm:block',
+                                        isActive ? 'text-foreground'  : 'text-muted-foreground',
+                                        isDone   ? 'text-emerald-600' : ''
+                                    )}>
+                                        {s.label}
+                                    </span>
+                                </div>
+                                {i < STEPS.length - 1 && (
+                                    <div className={cn(
+                                        'flex-1 h-px mx-2 mb-4 transition-colors',
+                                        step > i ? 'bg-emerald-600' : 'bg-border'
+                                    )} />
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+
+                {/* Step content */}
+                <Card>
+                    <CardContent className="space-y-4 min-h-[280px]">
+                        <h2 className="text-base font-medium">{STEPS[step].label}</h2>
+
+                        {/* ── Step 1: Details & Groups ── */}
+                        {step === 0 && (
+                            <div className="space-y-4">
+                                <div className="space-y-3">
+                                    <Label htmlFor="name">Name <span className="text-destructive">*</span></Label>
+                                    <Input
+                                        id="name"
+                                        value={form.name}
+                                        onChange={(e) => setForm({ ...form, name: e.target.value })}
+                                        placeholder="e.g. Onboarding Tasks"
+                                    />
+                                    {errors.name && (
+                                        <p className="text-xs text-destructive">{errors.name}</p>
+                                    )}
+                                </div>
+
+                                <div className="space-y-3">
+                                    <Label htmlFor="description">Description</Label>
+                                    <Textarea
+                                        id="description"
+                                        value={form.description}
+                                        onChange={(e) => setForm({ ...form, description: e.target.value })}
+                                        placeholder="Optional description"
+                                        rows={3}
+                                    />
+                                </div>
+
+                                <div className="space-y-3 border-t border-border pt-4">
+                                    <Label>Assign to Groups <span className="text-destructive">*</span></Label>
+                                    <GroupMultiSelect
+                                        value={selectedGroupIds}
+                                        onChange={setSelectedGroupIds}
+                                        disabled={loading}
+                                        placeholder="Select groups to assign…"
+                                    />
+                                    {selectedGroupIds.length === 0 ? (
+                                        <p className="text-xs text-destructive">
+                                            Select at least one group to continue.
+                                        </p>
+                                    ) : (
+                                        <p className="text-xs text-muted-foreground">
+                                            Members of selected groups will be able to see and complete this task list.
+                                        </p>
+                                    )}
+                                </div>
+                            </div>
+                        )}
+
+                        {/* ── Step 2: Tasks ── */}
+                        {step === 1 && (
+                            <div className="space-y-3">
+                                <p className="text-xs text-muted-foreground -mt-1">
+                                    Optionally add the tasks users will need to complete for this task list.
+                                </p>
+                                <TaskQueueStep
+                                    tasks={queuedTasks}
+                                    onChange={setQueuedTasks}
+                                    courses={courses}
+                                    units={units}
+                                    lessons={lessons}
+                                />
+                            </div>
+                        )}
+
+                        {/* ── Step 3: Review ── */}
+                        {step === 2 && (
+                            <div className="space-y-4">
+                                <div className="border border-border rounded-lg p-4 space-y-1">
+                                    <div className="flex items-center gap-2 mb-2">
+                                        <FileText className="h-4 w-4 text-muted-foreground" />
+                                        <span className="text-sm font-medium">Task List Details</span>
+                                    </div>
+                                    <SummaryRow label="Name"        value={form.name || '—'} />
+                                    <SummaryRow label="Description" value={form.description || '—'} />
+                                </div>
+
+                                <div className="border border-border rounded-lg p-4 space-y-2">
+                                    <div className="flex items-center gap-2">
+                                        <Users className="h-4 w-4 text-muted-foreground" />
+                                        <span className="text-sm font-medium">Assigned Groups</span>
+                                    </div>
+                                    {selectedGroupNames.length > 0 ? (
+                                        <div className="flex flex-wrap gap-1.5 pt-1">
+                                            {selectedGroupNames.map((name) => (
+                                                <Badge key={name} variant="secondary" className="text-xs">{name}</Badge>
+                                            ))}
+                                        </div>
+                                    ) : (
+                                        <p className="text-sm text-muted-foreground">No groups assigned — task list will not be visible to any users yet.</p>
+                                    )}
+                                </div>
+
+                                <div className="border border-border rounded-lg p-4 space-y-2">
+                                    <div className="flex items-center gap-2">
+                                        <ListChecks className="h-4 w-4 text-muted-foreground" />
+                                        <span className="text-sm font-medium">Tasks</span>
+                                        <Badge variant="secondary" className="ml-auto text-xs">{queuedTasks.length}</Badge>
+                                    </div>
+                                    {queuedTasks.length > 0 ? (
+                                        <div className="space-y-1.5 pt-1">
+                                            {queuedTasks.map((t, i) => (
+                                                <div key={t._key} className="flex items-center gap-2 text-sm">
+                                                    <Badge variant="outline" className="text-xs shrink-0">{i + 1}</Badge>
+                                                    <span className="truncate flex-1">{t.name}</span>
+                                                    {t.requirements.length > 0 && (
+                                                        <span className="text-xs text-muted-foreground shrink-0">
+                                                            {t.requirements.length} requirement(s)
+                                                        </span>
+                                                    )}
+                                                </div>
+                                            ))}
+                                        </div>
+                                    ) : (
+                                        <p className="text-sm text-muted-foreground">No tasks added yet — you can add them later from the task list's Tasks tab.</p>
+                                    )}
+                                </div>
+                            </div>
+                        )}
+                    </CardContent>
+                </Card>
+
+                {/* Navigation */}
+                <div className="flex items-center justify-between">
+                    <Button type="button" variant="outline" onClick={handleBack}>
+                        <ChevronLeft className="h-4 w-4 mr-1" />
+                        {step === 0 ? 'Cancel' : 'Back'}
+                    </Button>
+
+                    {step < STEPS.length - 1 ? (
+                        <Button
+                            type="button"
+                            onClick={handleNext}
+                            disabled={step === 0 && selectedGroupIds.length === 0}
+                        >
+                            Next
+                            <ChevronRight className="h-4 w-4 ml-1" />
+                        </Button>
+                    ) : (
+                        <Button
+                            type="button"          // ← type="button", not "submit"
+                            disabled={loading}
+                            onClick={handleCreate} // ← called manually
+                        >
+                            {loading ? 'Creating…' : 'Create Task List'}
+                        </Button>
+                    )}
+                </div>
+
+            </div>
+        </div>
+    );
+}
diff --git a/apps/web/src/modules/admin/pages/task_list/EditTaskList.jsx b/apps/web/src/modules/admin/pages/task_list/EditTaskList.jsx
new file mode 100644
index 0000000..60b757c
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/task_list/EditTaskList.jsx
@@ -0,0 +1,188 @@
+import { useEffect, useState, useMemo } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { useAdminTask } from '@/contexts/AdminTaskContext';
+import GroupMultiSelect from '@/components/generic/GroupMultiSelect';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { ArrowLeft } from 'lucide-react';
+
+export default function EditTaskList() {
+    const navigate = useNavigate();
+    const { taskListId } = useParams();
+    const { fetchTaskList, updateTaskList, syncGroups, loading } = useAdminTask();
+
+    const [form, setForm] = useState(null);
+    const [errors, setErrors] = useState({});
+
+    // ── Original values to diff against ──────────────────────────────────────
+    const [original, setOriginal] = useState(null);
+    const [originalGroupIds, setOriginalGroupIds] = useState([]);
+    const [selectedGroupIds, setSelectedGroupIds] = useState([]);
+
+    useEffect(() => {
+        fetchTaskList(taskListId).then((data) => {
+            if (!data) return;
+
+            const initialForm = {
+                name: data.name ?? '',
+                description: data.description ?? '',
+            };
+
+            setForm(initialForm);
+            setOriginal(initialForm);
+
+            const ids = (data.groups ?? []).map((g) => g.group_id);
+            setOriginalGroupIds(ids);
+            setSelectedGroupIds(ids);
+        });
+    }, [taskListId]);
+
+    // ── Dirty check — true only when something actually changed ───────────────
+    const isDirty = useMemo(() => {
+        if (!form || !original) return false;
+
+        const formChanged =
+            form.name.trim() !== original.name.trim() ||
+            (form.description.trim() || null) !== (original.description.trim() || null);
+
+        const groupsChanged =
+            selectedGroupIds.length !== originalGroupIds.length ||
+            selectedGroupIds.some((id) => !originalGroupIds.includes(id));
+
+        return formChanged || groupsChanged;
+    }, [form, original, selectedGroupIds, originalGroupIds]);
+
+    const validate = () => {
+        const e = {};
+        if (!form?.name?.trim()) e.name = 'Task list name is required.';
+        setErrors(e);
+        return Object.keys(e).length === 0;
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!validate()) return;
+
+        // ── 1. Update name / description ──────────────────────────────────────
+        const updated = await updateTaskList(taskListId, {
+            name: form.name.trim(),
+            description: form.description.trim() || null,
+        });
+
+        if (!updated) return;
+
+        // ── 2. Sync groups (single call — avoids burning two sensitive-op hits) ──
+        const groupsChanged =
+            selectedGroupIds.length !== originalGroupIds.length ||
+            selectedGroupIds.some((id) => !originalGroupIds.includes(id));
+
+        if (groupsChanged) {
+            await syncGroups(taskListId, selectedGroupIds);
+        }
+
+        navigate(`/admin/taskList`);
+    };
+
+    // ── Loading skeleton ──────────────────────────────────────────────────────
+    if (!form) return (
+        <div className="max-w-xl mx-auto py-8 px-4 space-y-4">
+            <Skeleton className="h-8 w-48" />
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-24 w-full" />
+            <Skeleton className="h-10 w-full" />
+        </div>
+    );
+
+    return (
+        <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
+            <div className="mx-auto">
+                <div className="flex gap-2 items-center mb-4">
+                    <Button
+                        variant="ghost"
+                        onClick={() => navigate(`/admin/taskList`)}
+                    >
+                        <ArrowLeft className="size-4" />
+                    </Button>
+                    <div className="space-y-1">
+                        <h1 className="text-xl font-semibold">Edit Task List</h1>
+                        <p className="text-sm text-muted-foreground">Update task list.</p>
+                    </div>
+                </div>
+
+                <Card className="lg:w-2xl">
+                    <CardContent>
+                        <form onSubmit={handleSubmit} className="space-y-4">
+
+                            {/* Name */}
+                            <div className="space-y-1">
+                                <Label htmlFor="name">Name <span className="text-destructive">*</span></Label>
+                                <Input
+                                    id="name"
+                                    value={form.name}
+                                    onChange={(e) => setForm({ ...form, name: e.target.value })}
+                                />
+                                {errors.name && (
+                                    <p className="text-xs text-destructive">{errors.name}</p>
+                                )}
+                            </div>
+
+                            {/* Description */}
+                            <div className="space-y-1">
+                                <Label htmlFor="description">Description</Label>
+                                <Textarea
+                                    id="description"
+                                    value={form.description}
+                                    onChange={(e) => setForm({ ...form, description: e.target.value })}
+                                    rows={3}
+                                />
+                            </div>
+
+                            {/* Groups */}
+                            <div className="space-y-1">
+                                <Label>
+                                    Assigned Groups
+                                    <span className="ml-1.5 text-xs text-muted-foreground font-normal">
+                                        (optional)
+                                    </span>
+                                </Label>
+                                <GroupMultiSelect
+                                    value={selectedGroupIds}
+                                    onChange={setSelectedGroupIds}
+                                    disabled={loading}
+                                    placeholder="Select groups to assign…"
+                                />
+                                <p className="text-xs text-muted-foreground">
+                                    Members of selected groups will be able to see and complete this task list.
+                                </p>
+                            </div>
+
+                            {/* Actions */}
+                            <div className="flex gap-2 justify-end pt-2">
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    onClick={() => navigate(`/admin/taskList`)}
+                                >
+                                    Cancel
+                                </Button>
+                                <Button
+                                    type="submit"
+                                    disabled={loading || !isDirty}
+                                >
+                                    {loading ? 'Saving…' : 'Save Changes'}
+                                </Button>
+                            </div>
+
+                        </form>
+                    </CardContent>
+                </Card>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/task_list/TaskList.jsx b/apps/web/src/modules/admin/pages/task_list/TaskList.jsx
new file mode 100644
index 0000000..e8835aa
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/task_list/TaskList.jsx
@@ -0,0 +1,23 @@
+import { House } from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import TaskListTable from "../../components/task/TaskListTable";
+
+export default function TaskList() {
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Task List" },
+  ];
+
+  return (
+    <section className="bg-muted h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+        <div className="w-full">
+          <TaskListTable />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/task_list/TaskQueueStep.jsx b/apps/web/src/modules/admin/pages/task_list/TaskQueueStep.jsx
new file mode 100644
index 0000000..655f076
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/task_list/TaskQueueStep.jsx
@@ -0,0 +1,191 @@
+import { useState } from 'react';
+import { format, parseISO, isValid } from 'date-fns';
+import { Plus, Pencil, Trash2, ListChecks, Clock } from 'lucide-react';
+
+import RequirementBuilder from './task/RequirementBuilder';
+import { taskSchema } from './task/task.schema';
+import DeadlinePicker from '@/components/generic/DeadlinePicker';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import {
+    Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
+} from '@/components/ui/dialog';
+
+const EMPTY_DRAFT = { name: '', description: '', deadline: '', requirements: [] };
+
+function formattedDeadline(deadline) {
+    if (!deadline) return null;
+    const d = parseISO(deadline);
+    return isValid(d) ? format(d, 'MMM d, yyyy h:mm a') : null;
+}
+
+// ── Queue tasks locally during Create Task List; each is created via createTask
+//    right after the task list itself is created (see CreateTaskList.handleCreate)
+export default function TaskQueueStep({ tasks, onChange, courses, units, lessons }) {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editKey, setEditKey]       = useState(null); // null = adding new
+    const [draft, setDraft]           = useState(EMPTY_DRAFT);
+    const [errors, setErrors]         = useState({});
+
+    const openAdd = () => {
+        setEditKey(null);
+        setDraft(EMPTY_DRAFT);
+        setErrors({});
+        setDialogOpen(true);
+    };
+
+    const openEdit = (t) => {
+        setEditKey(t._key);
+        setDraft({ name: t.name, description: t.description, deadline: t.deadline, requirements: t.requirements });
+        setErrors({});
+        setDialogOpen(true);
+    };
+
+    const removeTask = (key) => onChange(tasks.filter((t) => t._key !== key));
+
+    const handleSave = () => {
+        const result = taskSchema.safeParse(draft);
+        if (!result.success) {
+            const e = {};
+            const issues = result.error.issues;
+            const nameIssue = issues.find((i) => i.path[0] === 'name');
+            if (nameIssue) e.name = nameIssue.message;
+            if (issues.some((i) => i.path[0] === 'requirements')) {
+                e.requirements = 'Some requirements have issues — check above.';
+            }
+            setErrors(e);
+            return;
+        }
+
+        // use result.data — it carries the schema's transforms (e.g. link_url scheme defaulting)
+        const normalizedDraft = { ...draft, requirements: result.data.requirements };
+
+        if (editKey) {
+            onChange(tasks.map((t) => (t._key === editKey ? { ...t, ...normalizedDraft } : t)));
+        } else {
+            onChange([...tasks, { _key: crypto.randomUUID(), ...normalizedDraft }]);
+        }
+        setDialogOpen(false);
+    };
+
+    return (
+        <div className="space-y-3">
+            {tasks.length === 0 && (
+                <p className="text-sm text-muted-foreground text-center py-6 border border-dashed rounded-lg">
+                    No tasks added yet. You can add tasks now or later from the task list's Tasks tab.
+                </p>
+            )}
+
+            {tasks.map((t, idx) => (
+                <Card key={t._key}>
+                    <CardContent className="py-3 flex items-start justify-between gap-3">
+                        <div className="min-w-0 flex-1 space-y-1">
+                            <div className="flex items-center gap-2">
+                                <Badge variant="outline" className="text-xs shrink-0">{idx + 1}</Badge>
+                                <span className="text-sm font-medium truncate">{t.name}</span>
+                            </div>
+                            {t.description && (
+                                <p className="text-xs text-muted-foreground truncate pl-7">{t.description}</p>
+                            )}
+                            <div className="flex items-center gap-3 pl-7 text-xs text-muted-foreground">
+                                {formattedDeadline(t.deadline) && (
+                                    <span className="flex items-center gap-1">
+                                        <Clock className="h-3 w-3" />{formattedDeadline(t.deadline)}
+                                    </span>
+                                )}
+                                {t.requirements.length > 0 && (
+                                    <span className="flex items-center gap-1">
+                                        <ListChecks className="h-3 w-3" />{t.requirements.length} requirement(s)
+                                    </span>
+                                )}
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-1 shrink-0">
+                            <Button type="button" variant="ghost" size="icon" className="h-8 w-8" onClick={() => openEdit(t)}>
+                                <Pencil className="h-4 w-4" />
+                            </Button>
+                            <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="h-8 w-8 text-destructive hover:text-destructive"
+                                onClick={() => removeTask(t._key)}
+                            >
+                                <Trash2 className="h-4 w-4" />
+                            </Button>
+                        </div>
+                    </CardContent>
+                </Card>
+            ))}
+
+            <Button type="button" variant="outline" size="sm" className="w-full gap-2" onClick={openAdd}>
+                <Plus className="h-4 w-4" />
+                Add Task
+            </Button>
+
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                <DialogContent className="sm:max-w-lg max-h-[85vh] overflow-y-auto">
+                    <DialogHeader>
+                        <DialogTitle>{editKey ? 'Edit Task' : 'Add Task'}</DialogTitle>
+                    </DialogHeader>
+
+                    <div className="space-y-4">
+                        <div className="space-y-1">
+                            <Label htmlFor="queuedTaskName">Name <span className="text-destructive">*</span></Label>
+                            <Input
+                                id="queuedTaskName"
+                                value={draft.name}
+                                onChange={(e) => setDraft({ ...draft, name: e.target.value })}
+                                placeholder="e.g. Complete orientation video"
+                            />
+                            {errors.name && <p className="text-xs text-destructive">{errors.name}</p>}
+                        </div>
+
+                        <div className="space-y-1">
+                            <Label htmlFor="queuedTaskDescription">Description</Label>
+                            <Textarea
+                                id="queuedTaskDescription"
+                                value={draft.description}
+                                onChange={(e) => setDraft({ ...draft, description: e.target.value })}
+                                placeholder="Optional task description"
+                                rows={3}
+                            />
+                        </div>
+
+                        <div className="space-y-3">
+                            <Label>Deadline</Label>
+                            <DeadlinePicker
+                                value={draft.deadline}
+                                onChange={(iso) => setDraft({ ...draft, deadline: iso })}
+                            />
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label>Requirements</Label>
+                            <RequirementBuilder
+                                value={draft.requirements}
+                                onChange={(reqs) => setDraft({ ...draft, requirements: reqs })}
+                                courses={courses}
+                                units={units}
+                                lessons={lessons}
+                            />
+                            {errors.requirements && (
+                                <p className="text-xs text-destructive pt-1">{errors.requirements}</p>
+                            )}
+                        </div>
+                    </div>
+
+                    <DialogFooter>
+                        <Button type="button" variant="outline" onClick={() => setDialogOpen(false)}>Cancel</Button>
+                        <Button type="button" onClick={handleSave}>{editKey ? 'Save Task' : 'Add Task'}</Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+}
diff --git a/apps/web/src/modules/admin/pages/task_list/ViewTaskList.jsx b/apps/web/src/modules/admin/pages/task_list/ViewTaskList.jsx
new file mode 100644
index 0000000..57c7105
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/task_list/ViewTaskList.jsx
@@ -0,0 +1,217 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+
+import { useAdminTask } from '@/contexts/AdminTaskContext';
+import { useDateFormat } from '@/hooks/useDateFormat';
+import { PageMeta } from '@/contexts/MetadataContext';
+
+import TasksTable from '../../components/task_list/TasksTable';
+
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Separator } from '@/components/ui/separator';
+import {
+    ArrowLeft, Pencil, Users, ListTodo, Info,
+    NotebookPen, FileText, CalendarClock,
+} from 'lucide-react';
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+function InfoRow({ label, children }) {
+    return (
+        <div className="flex flex-col gap-0.5">
+            <span className="text-xs text-muted-foreground uppercase tracking-wide">{label}</span>
+            <span className="text-sm font-medium">{children ?? <span className="text-muted-foreground italic">—</span>}</span>
+        </div>
+    );
+}
+
+function SectionCard({ icon: Icon, title, children }) {
+    return (
+        <div className="rounded-lg border bg-card p-5 space-y-4">
+            <div className="flex items-center gap-2">
+                {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+                <h2 className="text-sm font-semibold">{title}</h2>
+            </div>
+            <Separator />
+            {children}
+        </div>
+    );
+}
+
+function LoadingSkeleton() {
+    return (
+        <div className="space-y-5">
+            <Skeleton className="h-32 w-full" />
+            <Skeleton className="h-32 w-full" />
+        </div>
+    );
+}
+
+// ─── Tab: Details ───────────────────────────────────────────────────────────
+
+function DetailsTab({ taskList }) {
+    const { fmtDateTime } = useDateFormat();
+
+    if (!taskList) return <LoadingSkeleton />;
+
+    const groups = taskList.groups ?? [];
+    const taskCount = taskList.tasks?.length ?? 0;
+
+    return (
+        <div className="space-y-5">
+            <SectionCard icon={FileText} title="Basic Information">
+                <div className="space-y-4">
+                    <InfoRow label="Name">{taskList.name}</InfoRow>
+                    {taskList.description && (
+                        <InfoRow label="Description">
+                            <span className="whitespace-pre-wrap text-sm font-normal text-foreground">
+                                {taskList.description}
+                            </span>
+                        </InfoRow>
+                    )}
+                </div>
+            </SectionCard>
+
+            <SectionCard icon={ListTodo} title="Stats">
+                <div className="grid grid-cols-2 gap-4">
+                    <InfoRow label="Tasks">
+                        <div className="flex items-center gap-1.5 mt-0.5">
+                            <ListTodo className="h-3.5 w-3.5 text-muted-foreground" />
+                            {taskCount}
+                        </div>
+                    </InfoRow>
+                    <InfoRow label="Groups">
+                        <div className="flex items-center gap-1.5 mt-0.5">
+                            <Users className="h-3.5 w-3.5 text-muted-foreground" />
+                            {taskList.group_count ?? groups.length}
+                        </div>
+                    </InfoRow>
+                </div>
+            </SectionCard>
+
+            <SectionCard icon={Users} title="Assigned Groups">
+                {groups.length > 0 ? (
+                    <div className="flex flex-wrap gap-1.5">
+                        {groups.map((g) => (
+                            <Badge key={g.group_id} variant="secondary">
+                                <Users className="size-3 mr-1" />
+                                {g.name ?? g.group_id}
+                            </Badge>
+                        ))}
+                    </div>
+                ) : (
+                    <p className="text-sm text-muted-foreground">No groups assigned.</p>
+                )}
+            </SectionCard>
+
+            <SectionCard icon={CalendarClock} title="Audit">
+                <div className="grid grid-cols-2 gap-4">
+                    <InfoRow label="Created At">
+                        {taskList.createdAt ? fmtDateTime(taskList.createdAt) : '—'}
+                    </InfoRow>
+                    <InfoRow label="Updated At">
+                        {taskList.updatedAt ? fmtDateTime(taskList.updatedAt) : '—'}
+                    </InfoRow>
+                </div>
+            </SectionCard>
+        </div>
+    );
+}
+
+// ─── Tabs config ────────────────────────────────────────────────────────────
+
+const TABS = [
+    { key: 'details', label: 'Details', icon: Info },
+    { key: 'tasks', label: 'Tasks', icon: NotebookPen },
+];
+
+// ─── Page ───────────────────────────────────────────────────────────────────
+
+export default function ViewTaskList() {
+    const navigate = useNavigate();
+    const { taskListId } = useParams();
+    const [searchParams] = useSearchParams();
+    const { fetchTaskList } = useAdminTask();
+
+    const [taskList, setTaskList] = useState(null);
+    const [activeTab, setActiveTab] = useState(
+        searchParams.get('tab') === 'tasks' ? 'tasks' : 'details'
+    );
+
+    useEffect(() => {
+        fetchTaskList(taskListId).then((data) => {
+            if (!data) return;
+            setTaskList(data);
+        });
+    }, [taskListId]);
+
+    return (
+        <div className="flex flex-col min-h-screen bg-muted/60">
+            <PageMeta title={taskList ? `${taskList.name} - STARR` : undefined} description={taskList?.description} />
+
+            {/* ── Sticky header ── */}
+            <div
+                className="sticky z-20 shrink-0 border-b bg-white/70 dark:bg-zinc-900/70 backdrop-blur-md"
+                style={{ top: 'var(--navbar-h)' }}
+            >
+                <div className="lg:container lg:mx-auto lg:px-6 px-4">
+                    <div className="flex items-center gap-3 py-3">
+                        <Button type="button" variant="ghost" size="icon" onClick={() => navigate('/admin/taskList')}>
+                            <ArrowLeft className="h-4 w-4" />
+                        </Button>
+                        <div className="flex-1 min-w-0">
+                            <h1 className="text-xl font-semibold leading-tight flex items-center gap-2">
+                                <ListTodo className="h-5 w-5 text-muted-foreground" />
+                                View Task List
+                            </h1>
+                            {taskList && (
+                                <p className="text-sm text-muted-foreground">{taskList.name}</p>
+                            )}
+                        </div>
+                        {activeTab === 'details' && (
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => navigate(`/admin/taskList/${taskListId}/edit`)}
+                                disabled={!taskList}
+                            >
+                                <Pencil className="h-4 w-4 mr-2" />
+                                Edit
+                            </Button>
+                        )}
+                    </div>
+
+                    {/* Underline tabs */}
+                    <div className="flex gap-1 pb-0 -mb-px">
+                        {TABS.map(({ key, label, icon: Icon }) => (
+                            <button
+                                key={key}
+                                type="button"
+                                onClick={() => setActiveTab(key)}
+                                className={[
+                                    'flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors',
+                                    activeTab === key
+                                        ? 'border-primary text-primary'
+                                        : 'border-transparent text-muted-foreground hover:text-foreground',
+                                ].join(' ')}
+                            >
+                                <Icon className="h-3.5 w-3.5" />
+                                {label}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+            </div>
+
+            {/* ── Content ── */}
+            <div className="lg:container lg:mx-auto lg:px-6 px-4 py-6">
+                <div className={activeTab === 'tasks' ? 'pb-16' : 'max-w-3xl mx-auto pb-16'}>
+                    {activeTab === 'details' && <DetailsTab taskList={taskList} />}
+                    {activeTab === 'tasks' && <TasksTable taskListId={taskListId} />}
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/apps/web/src/modules/admin/pages/task_list/task/ArchiveTask.jsx b/apps/web/src/modules/admin/pages/task_list/task/ArchiveTask.jsx
new file mode 100644
index 0000000..e4e1612
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/task_list/task/ArchiveTask.jsx
@@ -0,0 +1,27 @@
+import { House } from "lucide-react";
+import { useParams } from "react-router-dom";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import ArchivedTaskTable from "@/modules/admin/components/task/ArchiveTaskTable";
+
+export default function ArchivedTask() {
+    const { taskListId } = useParams();
+    const items = [
+        { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+        { label: "Task List", to: "/admin/taskList" },
+        { label: "Tasks", to: `/admin/taskList/${taskListId}/view?tab=tasks` },
+        { label: "Archived" },
+    ];
+
+    return (
+        <section className="bg-muted h-full">
+            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+                <div className="flex flex-col gap-2 my-6">
+                    <AppBreadcrumb items={items} />
+                </div>
+                <div className="w-full">
+                    <ArchivedTaskTable />
+                </div>
+            </div>
+        </section>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/task_list/task/CreateTask.jsx b/apps/web/src/modules/admin/pages/task_list/task/CreateTask.jsx
new file mode 100644
index 0000000..f5d8cea
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/task_list/task/CreateTask.jsx
@@ -0,0 +1,343 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { format, parseISO, isValid } from 'date-fns';
+
+import { useAdminTask } from '@/contexts/AdminTaskContext';
+import { cn } from '@/lib/utils';
+
+import RequirementBuilder from './RequirementBuilder';
+import { taskSchema, REQUIREMENT_TYPE_META, requirementSummaryText } from './task.schema';
+
+import TaskMultiSelect from '@/components/generic/TaskMultiSelect';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ArrowLeft, ChevronRight, ChevronLeft, Check, FileText, ListChecks, ClipboardList, Link as LinkIcon, Clock } from 'lucide-react';
+import DeadlinePicker from '@/components/generic/DeadlinePicker';
+
+// ─── Steps ────────────────────────────────────────────────────────────────────
+const STEPS = [
+    { id: 0, label: 'Task Details', icon: FileText },
+    { id: 1, label: 'Requirements', icon: ListChecks },
+    { id: 2, label: 'Review',       icon: ClipboardList },
+];
+
+function SummaryRow({ label, value }) {
+    if (!value) return null;
+    return (
+        <div className="flex justify-between py-1.5 text-sm gap-4">
+            <span className="text-muted-foreground min-w-[120px] shrink-0">{label}</span>
+            <span className="text-foreground text-right">{value}</span>
+        </div>
+    );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+export default function CreateTask() {
+    const navigate = useNavigate();
+    const { taskListId } = useParams();
+    const { createTask, fetchCoursesFlat, fetchUnitsFlat, fetchLessonsFlat, fetchTasksFlat, loading } = useAdminTask();
+
+    const [step, setStep] = useState(0);
+    const [form, setForm] = useState({
+        name: '',
+        description: '',
+        deadline: '',
+        requirements: [],
+        prerequisite_task_ids: [],
+    });
+    const [errors, setErrors] = useState({});
+    const [courses, setCourses] = useState([]);
+    const [units, setUnits]     = useState([]);
+    const [lessons, setLessons] = useState([]);
+    const [siblingTasks, setSiblingTasks] = useState([]);
+
+    useEffect(() => {
+        fetchCoursesFlat().then((d) => d && setCourses(d));
+        fetchUnitsFlat().then((d) => d && setUnits(d));
+        fetchLessonsFlat().then((d) => d && setLessons(d));
+        fetchTasksFlat(taskListId).then((d) => d && setSiblingTasks(d));
+    }, []);
+
+    const validateStep = (s) => {
+        const schema = s === 0 ? taskSchema.pick({ name: true }) : taskSchema.pick({ requirements: true });
+        const result = schema.safeParse(form);
+        if (!result.success) {
+            const e = {};
+            const issues = result.error.issues;
+            if (s === 0) {
+                const nameIssue = issues.find((i) => i.path[0] === 'name');
+                if (nameIssue) e.name = nameIssue.message;
+            } else if (issues.some((i) => i.path[0] === 'requirements')) {
+                e.requirements = 'Some requirements have issues — check above.';
+            }
+            setErrors(e);
+            return false;
+        }
+        setErrors({});
+        return true;
+    };
+
+    const handleNext = () => {
+        if (!validateStep(step)) return;
+        setStep((s) => s + 1);
+    };
+
+    const handleBack = () => {
+        if (step === 0) navigate(`/admin/taskList/${taskListId}/view?tab=tasks`);
+        else setStep((s) => s - 1);
+    };
+
+    const handleCreate = async () => {
+        const result = taskSchema.safeParse(form);
+        if (!result.success) {
+            // Route back to whichever step has the problem
+            const issues = result.error.issues;
+            if (issues.some((i) => i.path[0] === 'name')) { setStep(0); validateStep(0); return; }
+            if (issues.some((i) => i.path[0] === 'requirements')) { setStep(1); validateStep(1); return; }
+            return;
+        }
+
+        const created = await createTask(taskListId, {
+            name:         form.name.trim(),
+            description:  form.description.trim() || null,
+            deadline:     form.deadline || null,
+            // use result.data — it carries the schema's transforms (e.g. link_url scheme defaulting)
+            // strip duration_seconds — it's only used for local validation
+            requirements: result.data.requirements.map((r) => {
+                const req = { ...r };
+                delete req.duration_seconds;
+                return req;
+            }),
+            prerequisite_task_ids: form.prerequisite_task_ids,
+        });
+
+        if (created) navigate(`/admin/taskList/${taskListId}/view?tab=tasks`);
+    };
+
+    const formattedDeadline = (() => {
+        if (!form.deadline) return null;
+        const d = parseISO(form.deadline);
+        return isValid(d) ? format(d, 'MMM d, yyyy h:mm a') : null;
+    })();
+
+    return (
+        <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
+            <div className="mx-auto w-full lg:w-2xl space-y-6">
+
+                {/* Header */}
+                <div className="flex items-center gap-3">
+                    <Button variant="ghost" size="icon" onClick={() => navigate(`/admin/taskList/${taskListId}/view?tab=tasks`)}>
+                        <ArrowLeft className="h-4 w-4" />
+                    </Button>
+                    <h1 className="text-xl font-semibold">Create Task</h1>
+                </div>
+
+                {/* Stepper */}
+                <div className="flex items-center gap-0">
+                    {STEPS.map((s, i) => {
+                        const Icon     = s.icon;
+                        const isActive = step === i;
+                        const isDone   = step > i;
+
+                        return (
+                            <div key={s.id} className="flex items-center flex-1 last:flex-none">
+                                <div className="flex flex-col items-center gap-1">
+                                    <div className={cn(
+                                        'h-8 w-8 rounded-full flex items-center justify-center border transition-colors',
+                                        isDone   && 'bg-emerald-600 border-emerald-600 text-white',
+                                        isActive && 'border-primary bg-primary text-primary-foreground',
+                                        !isActive && !isDone && 'border-border bg-background text-muted-foreground'
+                                    )}>
+                                        {isDone ? <Check className="h-4 w-4" /> : <Icon className="h-4 w-4" />}
+                                    </div>
+                                    <span className={cn(
+                                        'text-[11px] font-medium whitespace-nowrap hidden sm:block',
+                                        isActive ? 'text-foreground'  : 'text-muted-foreground',
+                                        isDone   ? 'text-emerald-600' : ''
+                                    )}>
+                                        {s.label}
+                                    </span>
+                                </div>
+                                {i < STEPS.length - 1 && (
+                                    <div className={cn(
+                                        'flex-1 h-px mx-2 mb-4 transition-colors',
+                                        step > i ? 'bg-emerald-600' : 'bg-border'
+                                    )} />
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+
+                {/* ── Step 1: Task Details ── */}
+                {step === 0 && (
+                    <Card>
+                        <CardHeader><CardTitle className="text-base">Task Details</CardTitle></CardHeader>
+                        <CardContent className="space-y-4">
+                            <div className="space-y-1">
+                                <Label htmlFor="name">Name <span className="text-destructive">*</span></Label>
+                                <Input
+                                    id="name"
+                                    value={form.name}
+                                    onChange={(e) => setForm({ ...form, name: e.target.value })}
+                                    placeholder="e.g. Complete orientation video"
+                                />
+                                {errors.name && <p className="text-xs text-destructive">{errors.name}</p>}
+                            </div>
+
+                            <div className="space-y-1">
+                                <Label htmlFor="description">Description</Label>
+                                <Textarea
+                                    id="description"
+                                    value={form.description}
+                                    onChange={(e) => setForm({ ...form, description: e.target.value })}
+                                    placeholder="Optional task description"
+                                    rows={3}
+                                />
+                            </div>
+
+                            <div className="space-y-3">
+                                <Label>Deadline</Label>
+                                <DeadlinePicker
+                                    value={form.deadline}
+                                    onChange={(iso) => setForm({ ...form, deadline: iso })}
+                                    disabled={loading}
+                                />
+                            </div>
+
+                            <div className="space-y-1">
+                                <Label>
+                                    Prerequisite Tasks
+                                    <span className="ml-1.5 text-xs text-muted-foreground font-normal">
+                                        (optional)
+                                    </span>
+                                </Label>
+                                <TaskMultiSelect
+                                    value={form.prerequisite_task_ids}
+                                    onChange={(ids) => setForm({ ...form, prerequisite_task_ids: ids })}
+                                    tasks={siblingTasks}
+                                    disabled={loading}
+                                    placeholder="Select tasks that must be completed first…"
+                                />
+                                <p className="text-xs text-muted-foreground">
+                                    This task stays locked until every selected task is complete. Leave empty for no lock — the task is available immediately.
+                                </p>
+                            </div>
+                        </CardContent>
+                    </Card>
+                )}
+
+                {/* ── Step 2: Requirements ── */}
+                {step === 1 && (
+                    <Card>
+                        <CardHeader>
+                            <CardTitle className="text-base">Requirements</CardTitle>
+                            <p className="text-sm text-muted-foreground">
+                                Define what a user needs to do to complete this task.
+                            </p>
+                        </CardHeader>
+                        <CardContent className="space-y-2">
+                            <RequirementBuilder
+                                value={form.requirements}
+                                onChange={(reqs) => setForm({ ...form, requirements: reqs })}
+                                courses={courses}
+                                units={units}
+                                lessons={lessons}
+                                taskListId={taskListId}
+                            />
+                            {errors.requirements && (
+                                <p className="text-xs text-destructive pt-1">{errors.requirements}</p>
+                            )}
+                        </CardContent>
+                    </Card>
+                )}
+
+                {/* ── Step 3: Review ── */}
+                {step === 2 && (
+                    <div className="space-y-4">
+                        <Card>
+                            <CardContent className="space-y-1 pt-6">
+                                <div className="flex items-center gap-2 mb-2">
+                                    <FileText className="h-4 w-4 text-muted-foreground" />
+                                    <span className="text-sm font-medium">Task Details</span>
+                                </div>
+                                <SummaryRow label="Name"        value={form.name || '—'} />
+                                <SummaryRow label="Description" value={form.description || '—'} />
+                                <SummaryRow
+                                    label="Deadline"
+                                    value={formattedDeadline
+                                        ? <span className="inline-flex items-center gap-1"><Clock className="h-3.5 w-3.5" />{formattedDeadline}</span>
+                                        : 'No deadline'}
+                                />
+                                <SummaryRow
+                                    label="Prerequisites"
+                                    value={form.prerequisite_task_ids.length
+                                        ? siblingTasks
+                                            .filter((t) => form.prerequisite_task_ids.includes(t.task_id))
+                                            .map((t) => t.name)
+                                            .join(', ')
+                                        : null}
+                                />
+                            </CardContent>
+                        </Card>
+
+                        <Card>
+                            <CardContent className="space-y-2 pt-6">
+                                <div className="flex items-center gap-2">
+                                    <ListChecks className="h-4 w-4 text-muted-foreground" />
+                                    <span className="text-sm font-medium">Requirements</span>
+                                    <Badge variant="secondary" className="ml-auto text-xs">{form.requirements.length}</Badge>
+                                </div>
+                                {form.requirements.length === 0 ? (
+                                    <p className="text-sm text-muted-foreground">No requirements added — users will be able to complete this task immediately.</p>
+                                ) : (
+                                    <div className="space-y-2 pt-1">
+                                        {form.requirements.map((req, i) => {
+                                            const meta = REQUIREMENT_TYPE_META[req.type];
+                                            const Icon = meta?.icon ?? LinkIcon;
+                                            return (
+                                                <div key={i} className="flex items-center gap-2 border border-border rounded-lg px-3 py-2">
+                                                    <Badge variant="outline" className="text-xs gap-1 shrink-0">
+                                                        <Icon className="h-3 w-3" />
+                                                        {i + 1}
+                                                    </Badge>
+                                                    <div className="min-w-0 flex-1">
+                                                        <p className="text-sm font-medium truncate">{meta?.label ?? req.type}</p>
+                                                        <p className="text-xs text-muted-foreground truncate">{requirementSummaryText(req)}</p>
+                                                    </div>
+                                                </div>
+                                            );
+                                        })}
+                                    </div>
+                                )}
+                            </CardContent>
+                        </Card>
+                    </div>
+                )}
+
+                {/* Navigation */}
+                <div className="flex items-center justify-between">
+                    <Button type="button" variant="outline" onClick={handleBack}>
+                        <ChevronLeft className="h-4 w-4 mr-1" />
+                        {step === 0 ? 'Cancel' : 'Back'}
+                    </Button>
+
+                    {step < STEPS.length - 1 ? (
+                        <Button type="button" onClick={handleNext}>
+                            Next
+                            <ChevronRight className="h-4 w-4 ml-1" />
+                        </Button>
+                    ) : (
+                        <Button type="button" disabled={loading} onClick={handleCreate}>
+                            {loading ? 'Creating…' : 'Create Task'}
+                        </Button>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/apps/web/src/modules/admin/pages/task_list/task/EditTask.jsx b/apps/web/src/modules/admin/pages/task_list/task/EditTask.jsx
new file mode 100644
index 0000000..1990372
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/task_list/task/EditTask.jsx
@@ -0,0 +1,268 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { useAdminTask } from '@/contexts/AdminTaskContext';
+
+import RequirementBuilder from './RequirementBuilder';
+import { taskSchema } from './task.schema';
+
+import TaskMultiSelect from '@/components/generic/TaskMultiSelect';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import DeadlinePicker from '@/components/generic/DeadlinePicker';
+import {
+    AlertDialog, AlertDialogAction, AlertDialogCancel,
+    AlertDialogContent, AlertDialogDescription,
+    AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { ArrowLeft, TriangleAlert } from 'lucide-react';
+
+// ─────────────────────────────────────────────────────────────────────────────
+const STATUS_OPTIONS = [
+    { value: 'pending', label: 'Pending' },
+    { value: 'in_progress', label: 'In Progress' },
+    { value: 'completed', label: 'Completed' },
+    { value: 'overdue', label: 'Overdue' },
+];
+
+export default function EditTask() {
+    const navigate = useNavigate();
+    const { taskListId, taskId } = useParams();
+    const { fetchTask, updateTask, fetchTasksFlat, fetchCoursesFlat, fetchUnitsFlat, fetchLessonsFlat, loading } = useAdminTask();
+
+    const [form, setForm] = useState(null);
+    const [errors, setErrors] = useState({});
+    const [courses, setCourses] = useState([]);
+    const [units, setUnits] = useState([]);
+    const [lessons, setLessons] = useState([]);
+    const [siblingTasks, setSiblingTasks] = useState([]);
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const initialRequirementsRef = useRef(null);
+
+    useEffect(() => {
+        fetchTask(taskListId, taskId).then((data) => {
+            if (!data) return;
+            const reqs = data.requirements ?? [];
+            initialRequirementsRef.current = JSON.stringify(reqs);
+            setForm({
+                name: data.name ?? '',
+                description: data.description ?? '',
+                deadline: data.deadline ?? '',
+                status: data.status ?? 'pending',
+                requirements: reqs,
+                prerequisite_task_ids: (data.prerequisites ?? []).map((p) => p.task_id),
+            });
+        });
+        fetchCoursesFlat().then((d) => d && setCourses(d));
+        fetchUnitsFlat().then((d) => d && setUnits(d));
+        fetchLessonsFlat().then((d) => d && setLessons(d));
+        fetchTasksFlat(taskListId).then((d) => d && setSiblingTasks(d.filter((t) => t.task_id !== taskId)));
+    }, [taskListId, taskId]);
+
+    const requirementsChanged = () =>
+        JSON.stringify(form?.requirements ?? []) !== initialRequirementsRef.current;
+
+    const validate = () => {
+        const result = taskSchema.safeParse(form ?? {});
+        if (!result.success) {
+            const e = {};
+            const issues = result.error.issues;
+
+            const nameIssue = issues.find((i) => i.path[0] === 'name');
+            if (nameIssue) e.name = nameIssue.message;
+
+            if (issues.some((i) => i.path[0] === 'requirements')) {
+                e.requirements = 'Some requirements have issues — check above.';
+            }
+
+            setErrors(e);
+            return false;
+        }
+        setErrors({});
+        return true;
+    };
+
+    const doSave = async () => {
+        // re-parse to pick up the schema's transforms (e.g. link_url scheme defaulting)
+        const result = taskSchema.safeParse(form);
+        const requirements = (result.success ? result.data.requirements : form.requirements)
+            .map(({ duration_seconds, ...req }) => req);
+
+        const updated = await updateTask(taskListId, taskId, {
+            name:        form.name.trim(),
+            description: form.description.trim() || null,
+            deadline:    form.deadline || null,
+            status:      form.status,
+            requirements,
+            prerequisite_task_ids: form.prerequisite_task_ids ?? [],
+        });
+        if (updated) navigate(`/admin/taskList/${taskListId}/view?tab=tasks`);
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (!validate()) return;
+        if (requirementsChanged()) {
+            setConfirmOpen(true);
+        } else {
+            doSave();
+        }
+    };
+
+    if (!form) return (
+        <div className="max-w-2xl mx-auto py-8 px-4 space-y-4">
+            <Skeleton className="h-8 w-48" />
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-24 w-full" />
+        </div>
+    );
+
+    return (
+        <>
+        <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle className="flex items-center gap-2">
+                        <TriangleAlert className="size-4 text-amber-500" />
+                        Requirements changed
+                    </AlertDialogTitle>
+                    <AlertDialogDescription className="space-y-2 pt-1">
+                        <span className="block">
+                            You've modified the requirements for this task.
+                        </span>
+                        <span className="block">
+                            All users currently assigned to this task will receive a notification
+                            letting them know the requirements have been updated.
+                        </span>
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel>Go back</AlertDialogCancel>
+                    <AlertDialogAction onClick={doSave} disabled={loading}>
+                        {loading ? 'Saving…' : 'Confirm & Save'}
+                    </AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+
+        <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
+            <div className="mx-auto space-y-6">
+                <div className="flex items-center gap-3">
+                    {/** /admin/taskList/${taskListId}/tasks */}
+                    <Button variant="ghost" size="icon" onClick={() => navigate(`/admin/taskList/${taskListId}/tasks/${taskId}/view`)}>
+                        <ArrowLeft className="h-4 w-4" />
+                    </Button>
+                    <h1 className="text-xl font-semibold">Edit Task</h1>
+                </div>
+
+                <form onSubmit={handleSubmit} className="space-y-6">
+                    <Card className="lg:w-2xl">
+                        <CardHeader><CardTitle className="text-base">Task Details</CardTitle></CardHeader>
+                        <CardContent className="space-y-4">
+                            <div className="space-y-1">
+                                <Label htmlFor="name">Name <span className="text-destructive">*</span></Label>
+                                <Input
+                                    id="name"
+                                    value={form.name}
+                                    onChange={(e) => setForm({ ...form, name: e.target.value })}
+                                />
+                                {errors.name && <p className="text-xs text-destructive">{errors.name}</p>}
+                            </div>
+
+                            <div className="space-y-1">
+                                <Label htmlFor="description">Description</Label>
+                                <Textarea
+                                    id="description"
+                                    value={form.description}
+                                    onChange={(e) => setForm({ ...form, description: e.target.value })}
+                                    rows={3}
+                                />
+                            </div>
+
+                            <div className="space-y-3">
+                                <Label>Deadline</Label>
+                                <DeadlinePicker
+                                    value={form.deadline}
+                                    onChange={(iso) => setForm({ ...form, deadline: iso })}
+                                    disabled={loading}
+                                />
+                            </div>
+
+                            <div className="space-y-1">
+                                <Label>Status</Label>
+                                <Select
+                                    value={form.status}
+                                    onValueChange={(v) => setForm({ ...form, status: v })}
+                                >
+                                    <SelectTrigger>
+                                        <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {STATUS_OPTIONS.map((s) => (
+                                            <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-1">
+                                <Label>
+                                    Prerequisite Tasks
+                                    <span className="ml-1.5 text-xs text-muted-foreground font-normal">
+                                        (optional)
+                                    </span>
+                                </Label>
+                                <TaskMultiSelect
+                                    value={form.prerequisite_task_ids ?? []}
+                                    onChange={(ids) => setForm({ ...form, prerequisite_task_ids: ids })}
+                                    tasks={siblingTasks}
+                                    disabled={loading}
+                                    placeholder="Select tasks that must be completed first…"
+                                />
+                                <p className="text-xs text-muted-foreground">
+                                    This task stays locked until every selected task is complete. Leave empty for no lock — the task is available immediately.
+                                </p>
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    <Card>
+                        <CardHeader>
+                            <CardTitle className="text-base">Requirements</CardTitle>
+                            <p className="text-sm text-muted-foreground">Changes here will replace existing requirements.</p>
+                        </CardHeader>
+                        <CardContent className="space-y-2">
+                            <RequirementBuilder
+                                value={form.requirements}
+                                onChange={(reqs) => setForm({ ...form, requirements: reqs })}
+                                courses={courses}
+                                units={units}
+                                lessons={lessons}
+                                taskListId={taskListId}
+                            />
+                            {errors.requirements && (
+                                <p className="text-xs text-destructive pt-1">{errors.requirements}</p>
+                            )}
+                        </CardContent>
+                    </Card>
+
+                    <div className="flex gap-2 justify-end">
+                        {/** /admin/taskList/${taskListId}/tasks */}
+                        <Button type="button" variant="outline" onClick={() => navigate(`/admin/taskList/${taskListId}/tasks/${taskId}/view`)}>
+                            Cancel
+                        </Button>
+                        <Button type="submit" disabled={loading}>
+                            {loading ? 'Saving…' : 'Save Changes'}
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </div>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/task_list/task/RequirementBuilder.jsx b/apps/web/src/modules/admin/pages/task_list/task/RequirementBuilder.jsx
new file mode 100644
index 0000000..eb785a9
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/task_list/task/RequirementBuilder.jsx
@@ -0,0 +1,629 @@
+import { useState, useEffect, useMemo } from 'react';
+import { Plus, Trash2, GripVertical, Link, Upload, BookOpen, Layers, FileText, ChevronsUpDown, Tag, Lock, Clock, AlertTriangle, PenLine, ShieldCheck, Link2, Unlink, History } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Switch } from '@/components/ui/switch';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '@/components/ui/command';
+import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog';
+import { resolveTierBadge } from '@/utils/tierBadge.util';
+import api from '@/utils/api.util';
+
+// ─── Requirement type config ──────────────────────────────────────────────────
+const REQUIREMENT_TYPES = [
+    { value: 'visit_link', label: 'Visit a Link', icon: Link, category: 'Action' },
+    { value: 'upload_file', label: 'Upload a File', icon: Upload, category: 'Action' },
+    { value: 'read_course', label: 'Read a Course', icon: BookOpen, category: 'Content' },
+    { value: 'read_unit', label: 'Read a Unit', icon: Layers, category: 'Content' },
+    { value: 'read_lesson', label: 'Read a Lesson', icon: FileText, category: 'Content' },
+];
+
+// No longer a choosable option (removed from Add Task) — kept here only so
+// TYPE_MAP still resolves the icon/label for requirements created before the
+// removal.
+const LEGACY_REQUIREMENT_TYPE = { value: 'submit_text', label: 'Submit a Response', icon: PenLine, category: 'Action' };
+
+const TYPE_MAP = Object.fromEntries([...REQUIREMENT_TYPES, LEGACY_REQUIREMENT_TYPE].map((t) => [t.value, t]));
+
+const FILE_TYPE_OPTIONS = [
+    { value: 'pdf', label: 'PDF' },
+    { value: 'docx', label: 'DOCX' },
+    { value: 'xlsx', label: 'XLSX' },
+    { value: 'png', label: 'PNG' },
+    { value: 'jpg', label: 'JPG' },
+    { value: 'mp4', label: 'MP4' },
+    { value: 'mp3', label: 'MP3' },
+    { value: 'zip', label: 'ZIP' },
+];
+
+// ─── Duration formatter ───────────────────────────────────────────────────────
+function fmtDuration(seconds) {
+    if (!seconds || seconds <= 0) return null;
+    const h = Math.floor(seconds / 3600);
+    const m = Math.round((seconds % 3600) / 60);
+    if (h > 0 && m > 0) return `${h}h ${m}m`;
+    if (h > 0) return `${h}h`;
+    return `${m}m`;
+}
+
+// ─── Tier badge ───────────────────────────────────────────────────────────────
+function TierBadge({ subscription, tierMap }) {
+    const { rank, label, cls } = resolveTierBadge(subscription ?? 'free', tierMap);
+    return (
+        <Badge className={`${cls}`}>
+            {rank > 0 ? <Lock className="size-2.5" /> : <Tag className="size-2.5" />}
+            {label}
+        </Badge>
+    );
+}
+
+// ─── Course binding indicator ──────────────────────────────────────────────────
+// Units/lessons are standalone entities that may sit under 0..N courses
+// (junction revamp) — these surface that binding in the picker instead of the
+// old single "course_title | Unit N" prefix, which broke once a unit/lesson
+// could belong to several courses or none at all.
+function BindingChip({ courses = [] }) {
+    if (!courses.length) {
+        return (
+            <Badge variant="secondary" className="text-xs gap-1 shrink-0 text-muted-foreground">
+                <Unlink className="size-2.5" />
+                Standalone
+            </Badge>
+        );
+    }
+    return (
+        <span className="flex items-center gap-1 min-w-0 shrink-0">
+            <Badge variant="outline" className="text-xs gap-1 shrink-0 max-w-28">
+                <Link2 className="size-2.5 shrink-0" />
+                <span className="truncate">{courses[0].title}</span>
+            </Badge>
+            {courses.length > 1 && (
+                <Badge variant="outline" className="text-xs shrink-0">+{courses.length - 1}</Badge>
+            )}
+        </span>
+    );
+}
+
+function BindingLine({ courses = [] }) {
+    if (!courses.length) {
+        return (
+            <span className="flex items-center gap-1 text-xs italic text-muted-foreground min-w-0">
+                <Unlink className="size-3 shrink-0" />
+                <span className="flex-1 min-w-0 truncate">Standalone — not attached to any course</span>
+            </span>
+        );
+    }
+    return (
+        <span className="flex items-center gap-1 text-xs text-muted-foreground min-w-0">
+            <Link2 className="size-3 shrink-0" />
+            <span className="flex-1 w-[10rem] truncate">{courses.map((c) => c.title).join(', ')}</span>
+        </span>
+    );
+}
+
+// ─── Custom content picker ────────────────────────────────────────────────────
+// Opens as its own centered Dialog (cmdk Command inside) rather than an
+// anchored Popover — when this builder is used inside TaskQueueStep's "Add
+// Task" Dialog, a flip-prone anchored popover overlaps the surrounding form
+// fields once there isn't room to open downward. A second, independent
+// modal sidesteps that entirely (Radix Dialogs stack cleanly).
+function ContentPicker({ value, options, idKey, searchKey, labelKey, placeholder = 'Select…', dialogTitle, onSelect, renderTrigger, renderItem }) {
+    const [open, setOpen] = useState(false);
+
+    const selected = options.find((o) => String(o[idKey]) === String(value));
+
+    const searchValue = (o) => {
+        const base = String(o[searchKey] ?? o[labelKey] ?? o[idKey] ?? '');
+        const courseNames = (o.courses ?? []).map((c) => c.title).join(' ');
+        return `${base} ${courseNames}`.trim() || String(o[idKey]);
+    };
+
+    return (
+        <>
+            <Button
+                type="button"
+                variant="outline"
+                role="combobox"
+                aria-expanded={open}
+                className="h-auto min-h-8 w-full justify-between text-sm font-normal py-1.5 px-3"
+                onClick={() => setOpen(true)}
+            >
+                {selected
+                    ? renderTrigger(selected)
+                    : <span className="text-muted-foreground">{placeholder}</span>}
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+
+            <Dialog open={open} onOpenChange={setOpen}>
+                <DialogContent className="top-[15%] translate-y-0 flex flex-col max-h-[70vh] overflow-hidden rounded-xl! p-0 gap-0 sm:max-w-lg">
+                    <DialogHeader className="px-4 pt-4 pb-3 border-b pr-10">
+                        <DialogTitle className="text-sm">{dialogTitle ?? placeholder}</DialogTitle>
+                    </DialogHeader>
+                    <Command className="flex-1 min-h-0 rounded-none! bg-transparent p-0" loop>
+                        <CommandInput placeholder="Search…" />
+                        <CommandList className="max-h-[50vh]">
+                            <CommandEmpty>No results found.</CommandEmpty>
+                            <CommandGroup>
+                                {options.map((o) => (
+                                    <CommandItem
+                                        key={o[idKey]}
+                                        value={searchValue(o)}
+                                        onSelect={() => { onSelect(o); setOpen(false); }}
+                                        className="p-0"
+                                    >
+                                        {renderItem(o)}
+                                    </CommandItem>
+                                ))}
+                            </CommandGroup>
+                        </CommandList>
+                    </Command>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+}
+
+// ─── Empty requirement factory ────────────────────────────────────────────────
+function createRequirement(type = 'visit_link') {
+    return {
+        _key: crypto.randomUUID(),
+        type,
+        link_url: '',
+        link_label: '',
+        allowed_file_types: [],
+        max_file_count: 1,
+        reference_id: '',
+        reference_label: '',
+        prompt: '',
+        requires_review: false,
+    };
+}
+
+// ─── RequirementBuilder ───────────────────────────────────────────────────────
+export default function RequirementBuilder({ value = [], onChange, courses = [], units = [], lessons = [], taskListId }) {
+    const [items, setItems] = useState(
+        value.length > 0
+            ? value.map((r) => ({ _key: crypto.randomUUID(), ...r }))
+            : []
+    );
+    const [tierCategories, setTierCategories] = useState([]);
+    const [lockedDialog, setLockedDialog]             = useState(null); // { title, tierLabel, contentType }
+    const [noContentDialog, setNoContentDialog]       = useState(null); // { title, contentType }
+    const [preCompletedDialog, setPreCompletedDialog] = useState(null); // { title, contentType, completedCount, totalAssignees }
+
+    useEffect(() => {
+        api.get('/admin/tiers/categories')
+            .then(({ data }) => setTierCategories(data.data ?? []))
+            .catch(() => { });
+    }, []);
+
+    const tierMap = useMemo(
+        () => Object.fromEntries(tierCategories.map((c) => [c.slug, c])),
+        [tierCategories]
+    );
+
+    const emit = (next) => {
+        setItems(next);
+        onChange?.(next.map(({ _key, ...r }) => r));
+    };
+
+    const addItem = () => emit([...items, createRequirement('visit_link')]);
+    const removeItem = (key) => emit(items.filter((i) => i._key !== key));
+    const updateItem = (key, patch) =>
+        emit(items.map((i) => (i._key === key ? { ...i, ...patch } : i)));
+
+    const toggleFileType = (key, ft) => {
+        const item = items.find((i) => i._key === key);
+        if (!item) return;
+        const current = item.allowed_file_types ?? [];
+        const next = current.includes(ft)
+            ? current.filter((t) => t !== ft)
+            : [...current, ft];
+        updateItem(key, { allowed_file_types: next });
+    };
+
+    const CONTENT_TYPE_TO_REQUIREMENT_TYPE = { course: 'read_course', unit: 'read_unit', lesson: 'read_lesson' };
+
+    const handleContentSelect = (key, content, contentType) => {
+        updateItem(key, {
+            reference_id:     content.uuid,
+            reference_label:  content.title,
+            duration_seconds: content.duration_seconds ?? 0,
+        });
+        if ((content.duration_seconds ?? 0) === 0) {
+            setNoContentDialog({ title: content.title, contentType });
+        } else {
+            const { rank, label } = resolveTierBadge(content.subscription ?? 'free', tierMap);
+            if (rank > 0) setLockedDialog({ title: content.title, tierLabel: label, contentType });
+        }
+
+        // Heads-up only — informs the admin that some assignees already finished
+        // this content before the requirement existed; task_progress auto-syncs
+        // it as done for them (task_reading_progress_sync.service.js), it doesn't
+        // need to be redone. Skipped entirely if there's no task list yet to check
+        // assignees against (e.g. TaskQueueStep, mid Create Task List wizard).
+        if (taskListId) {
+            const type = CONTENT_TYPE_TO_REQUIREMENT_TYPE[contentType];
+            api.get(`/admin/task-lists/${taskListId}/tasks/requirement-completion-check`, {
+                params: { type, reference_id: content.uuid, reference_label: content.title },
+            })
+                .then(({ data }) => {
+                    const result = data?.data;
+                    if (result?.completedCount > 0) {
+                        setPreCompletedDialog({
+                            title: content.title,
+                            contentType,
+                            completedCount: result.completedCount,
+                            totalAssignees: result.totalAssignees,
+                        });
+                    }
+                })
+                .catch(() => { });
+        }
+    };
+
+    return (
+        <div className="space-y-3">
+            {items.length === 0 && (
+                <p className="text-sm text-muted-foreground text-center py-6 border border-dashed rounded-lg">
+                    No requirements added. Click "Add Requirement" to start.
+                </p>
+            )}
+
+            {items.map((item, idx) => {
+                const typeDef = TYPE_MAP[item.type];
+                const Icon = typeDef?.icon ?? Link;
+
+                return (
+                    <Card key={item._key} className="relative">
+                        <CardContent className="pt-4 pb-4 space-y-3">
+                            {/* Header row */}
+                            <div className="flex items-center gap-2">
+                                <GripVertical className="h-4 w-4 text-muted-foreground shrink-0" />
+                                <Badge variant="outline" className="text-xs gap-1 shrink-0">
+                                    <Icon className="h-3 w-3" />
+                                    {idx + 1}
+                                </Badge>
+
+                                <Select
+                                    value={item.type}
+                                    onValueChange={(v) => updateItem(item._key, { type: v })}
+                                >
+                                    <SelectTrigger className="h-8 text-sm flex-1">
+                                        <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {REQUIREMENT_TYPES.map((t) => (
+                                            <SelectItem key={t.value} value={t.value}>
+                                                <span className="flex items-center gap-2">
+                                                    <t.icon className="h-3.5 w-3.5" />
+                                                    {t.label}
+                                                </span>
+                                            </SelectItem>
+                                        ))}
+                                        {item.type === 'submit_text' && (
+                                            <SelectItem value="submit_text">
+                                                <span className="flex items-center gap-2">
+                                                    <PenLine className="h-3.5 w-3.5" />
+                                                    Submit a Response
+                                                </span>
+                                            </SelectItem>
+                                        )}
+                                    </SelectContent>
+                                </Select>
+
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className="h-8 w-8 shrink-0 text-destructive hover:text-destructive"
+                                    onClick={() => removeItem(item._key)}
+                                >
+                                    <Trash2 className="h-4 w-4" />
+                                </Button>
+                            </div>
+
+                            {/* ── visit_link fields ── */}
+                            {item.type === 'visit_link' && (
+                                <div className="grid grid-cols-2 gap-3 pl-7">
+                                    <div className="space-y-1">
+                                        <Label className="text-xs">URL <span className="text-destructive">*</span></Label>
+                                        <Input
+                                            placeholder="https://example.com"
+                                            value={item.link_url}
+                                            onChange={(e) => updateItem(item._key, { link_url: e.target.value })}
+                                            className="h-8 text-sm"
+                                        />
+                                    </div>
+                                    <div className="space-y-1">
+                                        <Label className="text-xs">Label (optional)</Label>
+                                        <Input
+                                            placeholder="Link description"
+                                            value={item.link_label}
+                                            onChange={(e) => updateItem(item._key, { link_label: e.target.value })}
+                                            className="h-8 text-sm"
+                                        />
+                                    </div>
+                                </div>
+                            )}
+
+                            {/* ── upload_file fields ── */}
+                            {item.type === 'upload_file' && (
+                                <div className="pl-7 space-y-3">
+                                    <div className="space-y-1">
+                                        <Label className="text-xs">Allowed File Types</Label>
+                                        <div className="flex flex-wrap gap-2">
+                                            {FILE_TYPE_OPTIONS.map((ft) => (
+                                                <Badge
+                                                    key={ft.value}
+                                                    variant={(item.allowed_file_types ?? []).includes(ft.value) ? 'default' : 'outline'}
+                                                    className="cursor-pointer select-none text-xs"
+                                                    onClick={() => toggleFileType(item._key, ft.value)}
+                                                >
+                                                    {ft.label}
+                                                </Badge>
+                                            ))}
+                                        </div>
+                                    </div>
+                                    <div className="space-y-1 w-32">
+                                        <Label className="text-xs">Max Files</Label>
+                                        <Input
+                                            type="number"
+                                            min={1}
+                                            max={20}
+                                            value={item.max_file_count}
+                                            onChange={(e) => updateItem(item._key, { max_file_count: parseInt(e.target.value) || 1 })}
+                                            className="h-8 text-sm"
+                                        />
+                                    </div>
+                                </div>
+                            )}
+
+                            {/* ── submit_text fields ── */}
+                            {item.type === 'submit_text' && (
+                                <div className="pl-7 space-y-1">
+                                    <Label className="text-xs">Prompt / Instructions</Label>
+                                    <Textarea
+                                        placeholder="What should the learner write about?"
+                                        rows={3}
+                                        value={item.prompt}
+                                        onChange={(e) => updateItem(item._key, { prompt: e.target.value })}
+                                        className="text-sm"
+                                    />
+                                </div>
+                            )}
+
+                            {/* ── requires_review toggle (upload_file / submit_text) ── */}
+                            {['upload_file', 'submit_text'].includes(item.type) && (
+                                <div className="pl-7 flex items-center justify-between rounded-md border px-3 py-2">
+                                    <div className="flex items-center gap-2">
+                                        <ShieldCheck className="h-3.5 w-3.5 text-muted-foreground" />
+                                        <div>
+                                            <Label className="text-xs">Requires Admin Review</Label>
+                                            <p className="text-xs text-muted-foreground">Submission only counts as complete once approved.</p>
+                                        </div>
+                                    </div>
+                                    <Switch
+                                        checked={!!item.requires_review}
+                                        onCheckedChange={(v) => updateItem(item._key, { requires_review: v })}
+                                    />
+                                </div>
+                            )}
+
+                            {/* ── read_course / read_unit / read_lesson fields ── */}
+                            {['read_course', 'read_unit', 'read_lesson'].includes(item.type) && (
+                                <div className="space-y-1">
+                                    <Label className="text-xs">
+                                        {item.type === 'read_course' ? 'Course' : item.type === 'read_unit' ? 'Unit' : 'Lesson'}
+                                    </Label>
+
+                                    {/* ── read_course picker ── */}
+                                    {item.type === 'read_course' && (
+                                        <ContentPicker
+                                            value={item.reference_id}
+                                            options={courses}
+                                            idKey="uuid"
+                                            labelKey="title"
+                                            placeholder="Select a course"
+                                            dialogTitle="Select a course"
+                                            onSelect={(c) => handleContentSelect(item._key, c, 'course')}
+                                            renderTrigger={(c) => (
+                                                <div className="flex items-center gap-2 min-w-0 flex-1">
+                                                    <TierBadge subscription={c.subscription} tierMap={tierMap} />
+                                                    <span className="flex-1 w-[5rem] truncate text-sm">{c.title}</span>
+                                                    {fmtDuration(c.duration_seconds) && (
+                                                        <span className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
+                                                            <Clock className="size-3" />{fmtDuration(c.duration_seconds)}
+                                                        </span>
+                                                    )}
+                                                </div>
+                                            )}
+                                            renderItem={(c) => (
+                                                <div className="flex items-center gap-2 px-3 py-2 w-full">
+                                                    <TierBadge subscription={c.subscription} tierMap={tierMap} />
+                                                    <span className="flex-1 text-sm truncate">{c.title}</span>
+                                                    {fmtDuration(c.duration_seconds) && (
+                                                        <span className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
+                                                            <Clock className="size-3" />{fmtDuration(c.duration_seconds)}
+                                                        </span>
+                                                    )}
+                                                </div>
+                                            )}
+                                        />
+                                    )}
+
+                                    {/* ── read_unit picker ── */}
+                                    {item.type === 'read_unit' && (
+                                        <ContentPicker
+                                            value={item.reference_id}
+                                            options={units}
+                                            idKey="uuid"
+                                            labelKey="title"
+                                            placeholder="Select a unit"
+                                            dialogTitle="Select a unit"
+                                            onSelect={(u) => handleContentSelect(item._key, u, 'unit')}
+                                            renderTrigger={(u) => (
+                                                <div className="flex items-center gap-2 min-w-0 flex-1">
+                                                    <TierBadge subscription={u.subscription} tierMap={tierMap} />
+                                                    <div className="flex flex-col items-start flex-1 min-w-0">
+                                                        <BindingLine courses={u.courses} />
+                                                        <span className="flex-1 w-[15rem] text-sm leading-tight truncate">{u.title}</span>
+                                                    </div>
+                                                    {fmtDuration(u.duration_seconds) && (
+                                                        <span className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
+                                                            <Clock className="size-3" />{fmtDuration(u.duration_seconds)}
+                                                        </span>
+                                                    )}
+                                                </div>
+                                            )}
+                                            renderItem={(u) => (
+                                                <div className="flex items-center gap-2 px-3 py-2 w-full">
+                                                    <TierBadge subscription={u.subscription} tierMap={tierMap} />
+                                                    <div className="flex flex-col flex-1 min-w-0">
+                                                        <span className="text-sm leading-tight truncate">{u.title}</span>
+                                                        <BindingLine courses={u.courses} />
+                                                    </div>
+                                                    <BindingChip courses={u.courses} />
+                                                    {fmtDuration(u.duration_seconds) && (
+                                                        <span className="flex items-center gap-1 text-sm text-muted-foreground shrink-0">
+                                                            <Clock className="size-3" />{fmtDuration(u.duration_seconds)}
+                                                        </span>
+                                                    )}
+                                                </div>
+                                            )}
+                                        />
+                                    )}
+
+                                    {/* ── read_lesson picker ── */}
+                                    {item.type === 'read_lesson' && (
+                                        <ContentPicker
+                                            value={item.reference_id}
+                                            options={lessons}
+                                            idKey="uuid"
+                                            labelKey="title"
+                                            placeholder="Select a lesson"
+                                            dialogTitle="Select a lesson"
+                                            onSelect={(l) => handleContentSelect(item._key, l, 'lesson')}
+                                            renderTrigger={(l) => (
+                                                <div className="flex items-center gap-2 min-w-0 flex-1">
+                                                    <div className="flex flex-col items-start flex-1 min-w-0">
+                                                        <BindingLine courses={l.courses} />
+                                                        <span className="flex-1 w-[15rem] text-sm leading-tight truncate">{l.title}</span>
+                                                    </div>
+                                                    {fmtDuration(l.duration_seconds) && (
+                                                        <span className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
+                                                            <Clock className="size-3" />{fmtDuration(l.duration_seconds)}
+                                                        </span>
+                                                    )}
+                                                </div>
+                                            )}
+                                            renderItem={(l) => (
+                                                <div className="flex items-center gap-2 px-3 py-2 w-full">
+                                                    <div className="flex flex-col flex-1 min-w-0">
+                                                        <span className="text-sm leading-tight truncate">{l.title}</span>
+                                                        <BindingLine courses={l.courses} />
+                                                    </div>
+                                                    <BindingChip courses={l.courses} />
+                                                    {fmtDuration(l.duration_seconds) && (
+                                                        <span className="flex items-center gap-1 text-sm text-muted-foreground shrink-0">
+                                                            <Clock className="size-3" />{fmtDuration(l.duration_seconds)}
+                                                        </span>
+                                                    )}
+                                                </div>
+                                            )}
+                                        />
+                                    )}
+
+                                    {/* ── inline no-content error ── */}
+                                    {['read_course', 'read_unit', 'read_lesson'].includes(item.type) && item.reference_id && (item.duration_seconds ?? -1) === 0 && (
+                                        <p className="flex items-center gap-1.5 text-xs text-destructive pl-7 pt-1">
+                                            <AlertTriangle className="size-3 shrink-0" />
+                                            This content has no content detected yet.
+                                        </p>
+                                    )}
+                                </div>
+                            )}
+                        </CardContent>
+                    </Card>
+                );
+            })}
+
+            <Button type="button" variant="outline" size="sm" className="w-full gap-2" onClick={addItem}>
+                <Plus className="h-4 w-4" />
+                Add Requirement
+            </Button>
+
+            {/* ── Locked tier warning ─────────────────────────────────────────── */}
+            <AlertDialog open={!!lockedDialog} onOpenChange={(v) => !v && setLockedDialog(null)}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle className="flex items-center gap-2">
+                            <Lock className="size-4 text-amber-500" />
+                            Subscription Required
+                        </AlertDialogTitle>
+                        <AlertDialogDescription className="space-y-1">
+                            <span className="block font-medium text-foreground">{lockedDialog?.title}</span>
+                            <span className="block">
+                                This {lockedDialog?.contentType} requires a <strong>{lockedDialog?.tierLabel}</strong> subscription.
+                                Users without the required plan will not be able to complete this requirement.
+                            </span>
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogAction onClick={() => setLockedDialog(null)}>Got it</AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+
+            {/* ── No content warning ──────────────────────────────────────────── */}
+            <AlertDialog open={!!noContentDialog} onOpenChange={(v) => !v && setNoContentDialog(null)}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle className="flex items-center gap-2">
+                            <AlertTriangle className="size-4 text-destructive" />
+                            No Content Detected
+                        </AlertDialogTitle>
+                        <AlertDialogDescription className="space-y-1">
+                            <span className="block font-medium text-foreground">{noContentDialog?.title}</span>
+                            <span className="block">
+                                This {noContentDialog?.contentType} does not have any content yet and cannot be used as a task requirement until content is added.
+                            </span>
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogAction onClick={() => setNoContentDialog(null)}>OK</AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+
+            {/* ── Already-completed-by-assignees warning ─────────────────────── */}
+            <AlertDialog open={!!preCompletedDialog} onOpenChange={(v) => !v && setPreCompletedDialog(null)}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle className="flex items-center gap-2">
+                            <History className="size-4 text-amber-500" />
+                            Already Completed by Some Assignees
+                        </AlertDialogTitle>
+                        <AlertDialogDescription className="space-y-1">
+                            <span className="block font-medium text-foreground">{preCompletedDialog?.title}</span>
+                            <span className="block">
+                                {preCompletedDialog?.completedCount} of {preCompletedDialog?.totalAssignees} assigned user(s) already
+                                completed this {preCompletedDialog?.contentType} before this requirement was added. It will
+                                automatically count as done for them — they won't need to redo it.
+                            </span>
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogAction onClick={() => setPreCompletedDialog(null)}>Got it</AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </div>
+    );
+}
diff --git a/apps/web/src/modules/admin/pages/task_list/task/ViewTask.jsx b/apps/web/src/modules/admin/pages/task_list/task/ViewTask.jsx
new file mode 100644
index 0000000..053317a
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/task_list/task/ViewTask.jsx
@@ -0,0 +1,630 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+
+import { useAdminTask } from '@/contexts/AdminTaskContext';
+import { useAuth } from '@/contexts/AuthContext';
+import { useDateFormat } from '@/hooks/useDateFormat';
+import api from '@/utils/api.util';
+
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Separator } from '@/components/ui/separator';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import {
+    AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
+    AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+
+import DataTable from '@/components/generic/Table/DataTable';
+import { FilterSheet } from '@/components/generic/Sheet/FilterSheet';
+import { ArchiveDialog } from '@/components/generic/Dialogs/ArchiveDialog';
+import { RestoreDialog } from '@/components/generic/Dialogs/RestoreDialog';
+
+import {
+    ArrowLeft, Pencil, FileText, CalendarClock,
+    Link2, Upload, BookOpen, BookMarked, FileCheck2,
+    Info, GitPullRequest, Tag, Globe, Copy, File, Bookmark,
+    ClipboardCheck, NotebookPen, Users, Paperclip, Check, X,
+    Layers, Files, ListChecks,
+} from 'lucide-react';
+
+import { formatDate } from '@/utils/table.util';
+import { getTimestamp } from '@/utils/timestamp.util';
+import { formatGeneratedBy } from '@/utils/generatedBy.util';
+
+import { buildDataColumns, columnPinning } from '@/modules/admin/config/task_list/task_completion/columns.config';
+import { buildToolbarActions } from '@/modules/admin/config/task_list/task_completion/toolbar.config';
+import { buildSelectionActions } from '@/modules/admin/config/task_list/task_completion/selection.config';
+import { buildRowActions as buildCompletionRowActions } from '@/modules/admin/config/task_list/task_completion/rowActions.config';
+
+// ─── Same config as ViewTaskList — label, icon only, all styling via shadcn tokens
+const REQUIREMENT_CONFIG = {
+    visit_link: { label: 'Visit Link', badgeLabel: 'Link', Icon: Link2 },
+    upload_file: { label: 'Upload File', badgeLabel: 'Upload', Icon: Upload },
+    read_course: { label: 'Read Course', badgeLabel: 'Course', Icon: BookOpen },
+    read_unit: { label: 'Read Unit', badgeLabel: 'Unit', Icon: BookMarked },
+    read_lesson: { label: 'Read Lesson', badgeLabel: 'Lesson', Icon: FileCheck2 },
+};
+
+// ─── Label / value row ────────────────────────────────────────────────────────
+function MetaRow({ icon: Icon, label, children }) {
+    return (
+        <div className="flex items-center justify-between gap-3 px-3.5 py-2.5 border-b border-border last:border-b-0">
+            <div className="flex items-center gap-2 text-xs text-muted-foreground shrink-0">
+                <Icon className="size-3.5" />
+                {label}
+            </div>
+            <div className="text-xs text-foreground text-right min-w-0">
+                {children}
+            </div>
+        </div>
+    );
+}
+
+// ─── Requirement card ─────────────────────────────────────────────────────────
+function RequirementCard({ req, courseCounts }) {
+    const cfg = REQUIREMENT_CONFIG[req.type] ?? {
+        label: req.type, badgeLabel: req.type, Icon: FileText,
+    };
+    const { Icon } = cfg;
+
+    return (
+        <div className="border border-border rounded-xl bg-background">
+
+            {/* Header */}
+            <div className="flex items-center gap-2.5 px-3.5 py-3 border-b border-border">
+                <div className="size-8 rounded-lg flex items-center justify-center shrink-0 bg-muted">
+                    <Icon className="size-4 text-foreground" />
+                </div>
+                <span className="text-sm font-medium flex-1 text-foreground">
+                    {cfg.label}
+                </span>
+                <span className="text-[10px] font-medium px-2.5 py-0.5 rounded-full border border-border bg-muted text-muted-foreground">
+                    {cfg.badgeLabel}
+                </span>
+            </div>
+
+            {/* Rows */}
+            {req.type === 'visit_link' && (
+                <>
+                    {req.link_label && (
+                        <MetaRow icon={Tag} label="Label">
+                            <span>{req.link_label}</span>
+                        </MetaRow>
+                    )}
+                    {req.link_url && (
+                        <MetaRow icon={Globe} label="URL">
+                            <a
+                                href={/^https?:\/\//i.test(req.link_url) ? req.link_url : `https://${req.link_url}`}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-blue-500 underline underline-offset-2 truncate block max-w-[240px] hover:opacity-80 transition-opacity"
+                            >
+                                {req.link_url}
+                            </a>
+                        </MetaRow>
+                    )}
+                </>
+            )}
+
+            {req.type === 'upload_file' && (
+                <>
+                    {req.max_file_count != null && (
+                        <MetaRow icon={Copy} label="Max files">
+                            <span className="font-medium">{req.max_file_count}</span>
+                        </MetaRow>
+                    )}
+                    {req.allowed_file_types?.length > 0 && (
+                        <MetaRow icon={File} label="Allowed types">
+                            <span>{req.allowed_file_types.join(', ')}</span>
+                        </MetaRow>
+                    )}
+                </>
+            )}
+
+            {['read_course', 'read_unit', 'read_lesson'].includes(req.type) && req.reference_label && (
+                <MetaRow icon={Bookmark} label={cfg.badgeLabel}>
+                    <span className="truncate block max-w-[220px]">{req.reference_label}</span>
+                </MetaRow>
+            )}
+
+            {req.type === 'read_course' && req.reference_id && (
+                <>
+                    <MetaRow icon={Layers} label="Units">
+                        {courseCounts === undefined ? (
+                            <Skeleton className="h-3.5 w-6 inline-block ml-auto" />
+                        ) : courseCounts ? (
+                            <span className="font-medium">{courseCounts.unitCount}</span>
+                        ) : (
+                            <span className="text-muted-foreground italic">—</span>
+                        )}
+                    </MetaRow>
+                    <MetaRow icon={Files} label="Lessons">
+                        {courseCounts === undefined ? (
+                            <Skeleton className="h-3.5 w-6 inline-block ml-auto" />
+                        ) : courseCounts ? (
+                            <span className="font-medium">{courseCounts.lessonCount}</span>
+                        ) : (
+                            <span className="text-muted-foreground italic">—</span>
+                        )}
+                    </MetaRow>
+                    <MetaRow icon={ListChecks} label="Quizzes">
+                        {courseCounts === undefined ? (
+                            <Skeleton className="h-3.5 w-6 inline-block ml-auto" />
+                        ) : courseCounts ? (
+                            <span className="font-medium">{courseCounts.quizCount}</span>
+                        ) : (
+                            <span className="text-muted-foreground italic">—</span>
+                        )}
+                    </MetaRow>
+                </>
+            )}
+        </div>
+    );
+}
+
+// ─── Requirements section ─────────────────────────────────────────────────────
+function TaskRequirementsSection({ requirements = [], courseCountsById = {} }) {
+    const sorted = [...requirements].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    return (
+        <div className="space-y-2">
+            {sorted.length > 0 ? (
+                sorted.map((req) => (
+                    <RequirementCard
+                        key={req.requirement_id}
+                        req={req}
+                        courseCounts={courseCountsById[req.reference_id]}
+                    />
+                ))
+            ) : (
+                <p className="text-sm text-muted-foreground italic">No other requirements.</p>
+            )}
+        </div>
+    );
+}
+
+// ─── Stat card ────────────────────────────────────────────────────────────────
+const StatCard = ({ label, value, icon: Icon, loading }) => (
+    <div className="bg-muted rounded-lg px-3 py-2">
+        <span className="block text-[11px] uppercase tracking-wide text-muted-foreground mb-1">
+            {label}
+        </span>
+        <span className="text-sm font-medium flex items-center gap-1.5">
+            {Icon && <Icon className="size-3.5 text-muted-foreground" />}
+            {loading ? <Skeleton className="h-4 w-10 inline-block" /> : value}
+        </span>
+    </div>
+);
+
+// ─── Tabs config ──────────────────────────────────────────────────────────────
+const TABS = [
+    { key: 'overview',    label: 'Overview',    icon: Info },
+    { key: 'completions', label: 'Completions', icon: NotebookPen },
+];
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+export default function ViewTask() {
+    const navigate = useNavigate();
+    const { taskListId, taskId } = useParams();
+    const [searchParams] = useSearchParams();
+
+    const {
+        task,
+        completions, completionPagination, setCompletionPagination, completionLoading, completionAttributes,
+        fetchTask, updateTask,
+        fetchCompletions, reviewSubmission,
+        archiveCompletion, restoreCompletion,
+        bulkArchiveCompletions, bulkRestoreCompletions,
+    } = useAdminTask();
+    const { fmtDateTime } = useDateFormat();
+    const { user: currentUser } = useAuth();
+
+    const [activeTab, setActiveTab] = useState(
+        searchParams.get('tab') === 'completions' ? 'completions' : 'overview'
+    );
+    const [togglingSubmissions, setTogglingSubmissions] = useState(false);
+
+    const [showArchived, setShowArchived] = useState(false);
+    const [archiveTarget, setArchiveTarget] = useState(null);
+    const [restoreTarget, setRestoreTarget] = useState(null);
+    const [bulkArchiveIds, setBulkArchiveIds] = useState(null);
+    const [bulkRestoreIds, setBulkRestoreIds] = useState(null);
+    const [reviewTarget, setReviewTarget] = useState(null);
+    const [reviewNote, setReviewNote] = useState('');
+    const [courseCountsById, setCourseCountsById] = useState({});
+
+    const tableRefsRef = useRef({
+        getFilters: () => [], getSort: () => [], resetSelection: () => {}, tableInstance: null,
+    });
+
+    useEffect(() => {
+        fetchTask(taskListId, taskId);
+    }, [taskListId, taskId]);
+
+    // ── Structure counts for "Read a Course" requirements — how many units,
+    // lessons, and quizzes the referenced course actually contains ──────────
+    useEffect(() => {
+        if (!task) return;
+        const courseReqs = (task.requirements ?? []).filter(
+            (r) => r.type === 'read_course' && r.reference_id
+        );
+        courseReqs.forEach(({ reference_id }) => {
+            api.get(`/admin/courses/uuid/${reference_id}/structure-counts`)
+                .then(({ data }) => {
+                    setCourseCountsById((prev) => ({ ...prev, [reference_id]: data?.data ?? null }));
+                })
+                .catch(() => {
+                    setCourseCountsById((prev) => ({ ...prev, [reference_id]: null }));
+                });
+        });
+    }, [task?.task_id]);
+
+    const handleRefsReady = (refs) => { tableRefsRef.current = refs; };
+
+    // ── Toggle accepting submissions ─────────────────────────────────────────
+    async function handleToggleAcceptingSubmissions(v) {
+        setTogglingSubmissions(true);
+        try {
+            await updateTask(taskListId, taskId, { accepts_submissions: v });
+            await fetchTask(taskListId, taskId);
+        } finally {
+            setTogglingSubmissions(false);
+        }
+    }
+
+    // ── Fetch handler ─────────────────────────────────────────────────────────
+    const handleFetch = useCallback((params) => {
+        return fetchCompletions(taskListId, taskId, params);
+    }, [fetchCompletions, taskListId, taskId]);
+
+    // ── Toggle archived ───────────────────────────────────────────────────────
+    const handleToggleArchived = () => {
+        const next = !showArchived;
+        setShowArchived(next);
+        fetchCompletions(taskListId, taskId, {
+            page: 1,
+            limit: completionPagination?.limit ?? 10,
+            filters: tableRefsRef.current.getFilters(),
+            sort: tableRefsRef.current.getSort(),
+        });
+    };
+
+    // ── After mutation ────────────────────────────────────────────────────────
+    const afterMutation = () => {
+        tableRefsRef.current.resetSelection?.();
+        fetchCompletions(taskListId, taskId, {
+            page: 1,
+            limit: completionPagination?.limit ?? 10,
+            filters: tableRefsRef.current.getFilters(),
+            sort: tableRefsRef.current.getSort(),
+        });
+    };
+
+    // ── Derived stats ─────────────────────────────────────────────────────────
+    const totalRecords = completionPagination?.totalRecords ?? 0;
+    const totalFiles   = completions.reduce((acc, c) => acc + (c.files?.length ?? 0), 0);
+    const uniqueUsers  = new Set(completions.map((c) => c.user_id)).size;
+    const latestDate   = completions[0]?.submitted_at
+        ? formatDate(completions[0].submitted_at)
+        : '—';
+
+    // ── Config ────────────────────────────────────────────────────────────────
+    const exportConfig = useMemo(() => ({
+        allData: completions,
+        attributes: completionAttributes,
+        filename: `${getTimestamp()}_Completions`,
+        sheetName: 'Completions',
+        generatedBy: formatGeneratedBy(currentUser),
+    }), [completions, completionAttributes, currentUser]);
+
+    const rowActions = buildCompletionRowActions({
+        navigate,
+        taskListId,
+        taskId,
+        onArchive: (row) => setArchiveTarget(row),
+        onRestore: (row) => setRestoreTarget(row),
+        onReview: (row) => { setReviewTarget(row); setReviewNote(''); },
+        showArchived,
+    });
+
+    const handleReview = async (status) => {
+        if (!reviewTarget) return;
+        const result = await reviewSubmission(taskListId, taskId, reviewTarget.completion_id, {
+            status, review_note: reviewNote || null,
+        });
+        if (result) {
+            setReviewTarget(null);
+            afterMutation();
+        }
+    };
+
+    const toolbarActions = buildToolbarActions({
+        fetchCompletions,
+        taskListId,
+        taskId,
+        pagination: completionPagination,
+        exportConfig,
+        showArchived,
+        onToggleArchived: handleToggleArchived,
+        getFilters: () => tableRefsRef.current.getFilters(),
+        getSort:    () => tableRefsRef.current.getSort(),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const selectionActions = buildSelectionActions({
+        exportConfig,
+        showArchived,
+        onBulkArchive: (ids) => setBulkArchiveIds(ids),
+        onBulkRestore: (ids) => setBulkRestoreIds(ids),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const columns = useMemo(
+        () => buildDataColumns(completionAttributes, rowActions),
+        [completionAttributes, rowActions]
+    );
+
+    if (!task) return (
+        <div className="max-w-xl mx-auto py-8 px-4 space-y-4">
+            <Skeleton className="h-8 w-32" />
+            <Skeleton className="h-6 w-64" />
+            <Skeleton className="h-24 w-full" />
+            <Skeleton className="h-32 w-full" />
+        </div>
+    );
+
+    const requirements = task.requirements ?? [];
+
+    return (
+        <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start py-4 w-full">
+            <div className="w-full p-4">
+                {/* Header */}
+                <div className="flex items-center justify-between mb-4">
+                    <div className="flex gap-2 items-center">
+                        <Button
+                            variant="ghost"
+                            onClick={() => navigate(`/admin/taskList/${taskListId}/view?tab=tasks`)}
+                        >
+                            <ArrowLeft className="size-4" />
+                        </Button>
+                        <div className="space-y-0.5">
+                            <h1 className="font-medium">{task.name}</h1>
+                            <p className="text-sm text-muted-foreground">Task details</p>
+                        </div>
+                    </div>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        className="shrink-0 gap-1.5"
+                        onClick={() => navigate(`/admin/taskList/${taskListId}/tasks/${taskId}/edit`)}
+                    >
+                        <Pencil className="h-3.5 w-3.5" />
+                        Edit
+                    </Button>
+                </div>
+
+                {/* Underline tabs */}
+                <div className="border-b border-border mb-4">
+                    <div className="flex gap-1 -mb-px">
+                        {TABS.map(({ key, label, icon: Icon }) => (
+                            <button
+                                key={key}
+                                type="button"
+                                onClick={() => setActiveTab(key)}
+                                className={[
+                                    "flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors",
+                                    activeTab === key
+                                        ? "border-primary text-primary"
+                                        : "border-transparent text-muted-foreground hover:text-foreground",
+                                ].join(" ")}
+                            >
+                                <Icon className="h-3.5 w-3.5" />
+                                {label}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+
+                {/* ── Overview tab ──────────────────────────────────────────── */}
+                {activeTab === 'overview' && (
+                        // plain div avoids Card overflow:hidden clipping
+                        <div className="lg:w-xl mx-auto rounded-lg border border-border bg-card text-card-foreground shadow-sm">
+                            <div className="p-4 space-y-2">
+
+                                {/* Description */}
+                                {task.description ? (
+                                    <div className="flex gap-2 text-muted-foreground">
+                                        <FileText className="h-4 w-4 mt-0.5 shrink-0" />
+                                        <p className="text-sm leading-relaxed">{task.description}</p>
+                                    </div>
+                                ) : (
+                                    <p className="text-sm text-muted-foreground italic">No description provided.</p>
+                                )}
+
+                                {/* Deadline */}
+                                {task.deadline && (
+                                    <>
+                                        <Separator />
+                                        <div className="flex items-center gap-2 text-muted-foreground">
+                                            <CalendarClock className="size-4 shrink-0" />
+                                            <span className="text-sm">
+                                                Deadline:{' '}
+                                                <span className="text-foreground font-medium">
+                                                    {fmtDateTime(task.deadline)}
+                                                </span>
+                                            </span>
+                                        </div>
+                                    </>
+                                )}
+
+                                {/* Status */}
+                                {task.status && (
+                                    <>
+                                        <Separator />
+                                        <div className="flex items-center justify-between">
+                                            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                                                <Info className="size-4" /> Status
+                                            </div>
+                                            <Badge variant="outline" className="capitalize">
+                                                {task.status}
+                                            </Badge>
+                                        </div>
+                                    </>
+                                )}
+
+                                {/* Accepting submissions */}
+                                <Separator />
+                                <div className="flex items-center justify-between">
+                                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                                        <ClipboardCheck className="size-4" /> Accepting submissions
+                                    </div>
+                                    <Switch
+                                        checked={task.accepts_submissions !== false}
+                                        disabled={togglingSubmissions}
+                                        onCheckedChange={handleToggleAcceptingSubmissions}
+                                    />
+                                </div>
+
+                                <Separator />
+
+                                {/* Requirements */}
+                                <div className="space-y-3">
+                                    <div className="flex items-center gap-2 text-sm font-medium">
+                                        <GitPullRequest className="size-4" /> Requirements
+                                    </div>
+                                    <TaskRequirementsSection requirements={requirements} courseCountsById={courseCountsById} />
+                                </div>
+
+                            </div>
+                        </div>
+                )}
+
+                {/* ── Completions tab ───────────────────────────────────────── */}
+                {activeTab === 'completions' && (
+                        <div className="flex flex-col gap-4 w-full mx-auto">
+                            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                                <StatCard label="Completions"  value={totalRecords} icon={NotebookPen} loading={completionLoading} />
+                                <StatCard label="Unique users" value={uniqueUsers}  icon={Users}       loading={completionLoading} />
+                                <StatCard label="Files"        value={totalFiles}   icon={Paperclip}   loading={completionLoading} />
+                                <StatCard label="Latest"       value={latestDate}                      loading={completionLoading} />
+                            </div>
+
+                            <DataTable
+                                columns={columns}
+                                data={completions}
+                                attributes={completionAttributes}
+                                pagination={completionPagination}
+                                setPagination={setCompletionPagination}
+                                loading={completionLoading}
+                                onFetch={handleFetch}
+                                onFetchFilterData={() => Promise.resolve([])}
+                                toolbarActions={toolbarActions}
+                                selectionActions={selectionActions}
+                                columnPinning={columnPinning}
+                                onRefsReady={handleRefsReady}
+                                recordLabel="completion"
+                                emptyMessage="No completions yet."
+                                renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+                                    <FilterSheet
+                                        open={open}
+                                        onOpenChange={onOpenChange}
+                                        column={column}
+                                        attr={attr}
+                                        data={data}
+                                        loading={loading}
+                                    />
+                                )}
+                            />
+                        </div>
+                )}
+            </div>
+
+            {/* ── Single archive ────────────────────────────────────────────── */}
+            <ArchiveDialog
+                open={!!archiveTarget}
+                onOpenChange={(v) => !v && setArchiveTarget(null)}
+                entity={archiveTarget}
+                entityLabel="Completion"
+                getName={(r) => r?.user?.name ?? 'this completion'}
+                onArchive={(entity) => archiveCompletion(taskListId, taskId, entity?.completion_id)}
+                loading={completionLoading}
+                onSuccess={afterMutation}
+            />
+
+            {/* ── Single restore ────────────────────────────────────────────── */}
+            <RestoreDialog
+                open={!!restoreTarget}
+                onOpenChange={(v) => !v && setRestoreTarget(null)}
+                entity={restoreTarget}
+                entityLabel="Completion"
+                getName={(r) => r?.user?.name ?? 'this completion'}
+                onRestore={(entity) => restoreCompletion(taskListId, taskId, entity?.completion_id)}
+                loading={completionLoading}
+                onSuccess={afterMutation}
+            />
+
+            {/* ── Bulk archive ──────────────────────────────────────────────── */}
+            <ArchiveDialog
+                open={!!bulkArchiveIds}
+                onOpenChange={(v) => !v && setBulkArchiveIds(null)}
+                ids={bulkArchiveIds ?? []}
+                entityLabel="Completion"
+                onArchive={({ ids }) => bulkArchiveCompletions(taskListId, taskId, ids)}
+                loading={completionLoading}
+                onSuccess={afterMutation}
+            />
+
+            {/* ── Bulk restore ──────────────────────────────────────────────── */}
+            <RestoreDialog
+                open={!!bulkRestoreIds}
+                onOpenChange={(v) => !v && setBulkRestoreIds(null)}
+                ids={bulkRestoreIds ?? []}
+                entityLabel="Completion"
+                onRestore={({ ids }) => bulkRestoreCompletions(taskListId, taskId, ids)}
+                loading={completionLoading}
+                onSuccess={afterMutation}
+            />
+
+            {/* ── Review submission ────────────────────────────────────────────── */}
+            <AlertDialog open={!!reviewTarget} onOpenChange={(v) => !v && setReviewTarget(null)}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>Review Submission</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            {reviewTarget?.user?.name ?? 'This learner'}'s submission requires review before it counts as complete.
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    {reviewTarget?.note && (
+                        <p className="text-sm text-muted-foreground border rounded-md p-3 bg-muted/40">{reviewTarget.note}</p>
+                    )}
+                    {reviewTarget?.response_text && (
+                        <p className="text-sm border rounded-md p-3 whitespace-pre-wrap">{reviewTarget.response_text}</p>
+                    )}
+                    <Textarea
+                        placeholder="Optional note for the learner..."
+                        value={reviewNote}
+                        onChange={(e) => setReviewNote(e.target.value)}
+                        rows={3}
+                    />
+                    <AlertDialogFooter>
+                        <AlertDialogCancel disabled={completionLoading}>Cancel</AlertDialogCancel>
+                        <Button
+                            type="button" variant="outline"
+                            className="text-destructive border-destructive/50 hover:bg-destructive/5"
+                            disabled={completionLoading}
+                            onClick={() => handleReview('rejected')}
+                        >
+                            <X className="size-4 mr-1.5" /> Reject
+                        </Button>
+                        <AlertDialogAction disabled={completionLoading} onClick={() => handleReview('approved')}>
+                            <Check className="size-4 mr-1.5" /> Approve
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+
+        </div>
+    );
+}
diff --git a/apps/web/src/modules/admin/pages/task_list/task/ViewTaskCompletion.jsx b/apps/web/src/modules/admin/pages/task_list/task/ViewTaskCompletion.jsx
new file mode 100644
index 0000000..3602089
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/task_list/task/ViewTaskCompletion.jsx
@@ -0,0 +1,348 @@
+/***********************************************************************************************************************************************************************
+ * File Name    : ViewTaskCompletion.jsx
+ * Type         : Page
+ * Description  : Admin page — views a single task completion in full detail.
+ *                Left: submitter info + note + attached files (with open via media route).
+ *                Right: task context card + submission history timeline.
+ *                Route: /admin/taskList/:taskListId/tasks/:taskId/completions/:completionId/view
+ ***********************************************************************************************************************************************************************/
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useAdminTask } from '@/contexts/AdminTaskContext';
+
+import AppBreadcrumb from '@/components/generic/Breadcrumb/AppBreadcrumb';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+    House, Paperclip, FileText, FileImage,
+    FileVideo, FileAudio, File, ArrowLeft,
+    Clock, CalendarDays, ExternalLink, NotebookPen,
+} from 'lucide-react';
+import { formatDate, formatDateTime } from '@/utils/table.util';
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+const getInitials = (name = '') =>
+    name.split(' ').map((n) => n[0]).join('').toUpperCase().slice(0, 2);
+
+const formatBytes = (bytes) => {
+    if (!bytes) return null;
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+// ─── File icon by mime type ───────────────────────────────────────────────────
+const FileIcon = ({ mimeType, className = 'size-5' }) => {
+    if (!mimeType) return <File className={className} />;
+    if (mimeType.startsWith('image/'))  return <FileImage className={`${className} text-blue-500`} />;
+    if (mimeType.startsWith('video/'))  return <FileVideo className={`${className} text-purple-500`} />;
+    if (mimeType.startsWith('audio/'))  return <FileAudio className={`${className} text-green-500`} />;
+    if (mimeType === 'application/pdf') return <FileText className={`${className} text-red-500`} />;
+    return <File className={`${className} text-muted-foreground`} />;
+};
+
+// ─── Timeline dot ─────────────────────────────────────────────────────────────
+const TimelineDot = ({ active }) => (
+    <span
+        className={`mt-1 size-2.5 rounded-full shrink-0 ring-2 ring-offset-1 ${
+            active
+                ? 'bg-blue-500 ring-blue-300 dark:ring-blue-700'
+                : 'bg-border ring-transparent'
+        }`}
+    />
+);
+
+// ─── Section card wrapper ─────────────────────────────────────────────────────
+const Card = ({ children, className = '' }) => (
+    <div className={`bg-card border rounded-xl p-5 flex flex-col gap-4 ${className}`}>
+        {children}
+    </div>
+);
+
+const CardTitle = ({ icon: Icon, children }) => (
+    <h2 className="text-sm font-semibold flex items-center gap-2">
+        {Icon && <Icon className="size-4 text-muted-foreground" />}
+        {children}
+    </h2>
+);
+
+// ─── Main page ────────────────────────────────────────────────────────────────
+export default function ViewTaskCompletion() {
+    const navigate = useNavigate();
+    const { taskListId, taskId, completionId } = useParams();
+
+    const {
+        task, taskList,
+        completion, completionLoading,
+        completions,
+        fetchTask, fetchTaskList,
+        fetchCompletion,
+        fetchCompletionsByUser,
+    } = useAdminTask();
+
+    // ── Fetch on mount ────────────────────────────────────────────────────────
+    useEffect(() => {
+        fetchTaskList(taskListId);
+        fetchTask(taskListId, taskId);
+        fetchCompletion(taskListId, taskId, completionId);
+    }, [taskListId, taskId, completionId]);
+
+    // ── Once we know the user, fetch their full history for the timeline ──────
+    useEffect(() => {
+        if (completion?.user_id) {
+            fetchCompletionsByUser(taskListId, taskId, completion.user_id);
+        }
+    }, [completion?.user_id]);
+
+    const breadcrumbs = [
+        { label: 'Home',        icon: <House className="size-4" />, to: '/admin' },
+        { label: 'Task Lists',  to: '/admin/taskList' },
+        { label: taskList?.name ?? '…', to: `/admin/taskList/${taskListId}/view?tab=tasks` },
+        { label: task?.name ?? '…',     to: `/admin/taskList/${taskListId}/tasks/${taskId}/view` },
+        { label: 'Completions',         to: `/admin/taskList/${taskListId}/tasks/${taskId}/view?tab=completions` },
+        { label: 'View' },
+    ];
+
+    const isLoading = completionLoading && !completion;
+
+    return (
+        <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+
+            {/* ── Breadcrumb + back ─────────────────────────────────────────── */}
+            <div className="flex items-center gap-3 my-6 w-full">
+                <Button
+                    variant="ghost" size="icon"
+                    onClick={() => navigate(`/admin/taskList/${taskListId}/tasks/${taskId}/view?tab=completions`)}
+                    className="shrink-0"
+                >
+                    <ArrowLeft className="size-4" />
+                </Button>
+                <AppBreadcrumb items={breadcrumbs} />
+            </div>
+
+            {/* ── Two-column layout ─────────────────────────────────────────── */}
+            <div className="grid lg:grid-cols-[1fr_300px] gap-5 w-full items-start">
+
+                {/* ── LEFT ──────────────────────────────────────────────────── */}
+                <div className="flex flex-col gap-5">
+
+                    {/* Submitter + note */}
+                    <Card>
+                        {/* Header row */}
+                        <div className="flex items-start justify-between gap-4">
+                            {isLoading ? (
+                                <div className="flex items-center gap-3">
+                                    <Skeleton className="size-10 rounded-full" />
+                                    <div className="flex flex-col gap-1.5">
+                                        <Skeleton className="h-4 w-32" />
+                                        <Skeleton className="h-3.5 w-44" />
+                                    </div>
+                                </div>
+                            ) : (
+                                <div className="flex items-center gap-3">
+                                    <Avatar className="size-10">
+                                        <AvatarFallback className="text-sm bg-blue-100 text-blue-700">
+                                            {getInitials(completion?.user?.name)}
+                                        </AvatarFallback>
+                                    </Avatar>
+                                    <div className="flex flex-col leading-tight">
+                                        <span className="font-medium">
+                                            {completion?.user?.name ?? '—'}
+                                        </span>
+                                        <span className="text-sm text-muted-foreground">
+                                            {completion?.user?.email ?? '—'}
+                                        </span>
+                                    </div>
+                                </div>
+                            )}
+
+                            {isLoading ? (
+                                <Skeleton className="h-4 w-32" />
+                            ) : (
+                                <div className="flex flex-col items-end text-right shrink-0">
+                                    <span className="text-xs text-muted-foreground">Submitted</span>
+                                    <span className="text-sm font-medium mt-0.5">
+                                        {completion?.submitted_at
+                                            ? formatDate(completion.submitted_at)
+                                            : '—'}
+                                    </span>
+                                </div>
+                            )}
+                        </div>
+
+                        <div className="border-t" />
+
+                        {/* Note */}
+                        <div className="flex flex-col gap-1.5">
+                            <CardTitle icon={FileText}>Note</CardTitle>
+                            {isLoading ? (
+                                <div className="flex flex-col gap-1.5">
+                                    <Skeleton className="h-3.5 w-full" />
+                                    <Skeleton className="h-3.5 w-3/4" />
+                                </div>
+                            ) : completion?.note ? (
+                                <p className="text-sm text-muted-foreground leading-relaxed">
+                                    {completion.note}
+                                </p>
+                            ) : (
+                                <p className="text-sm text-muted-foreground italic">No note provided.</p>
+                            )}
+                        </div>
+                    </Card>
+
+                    {/* Files */}
+                    <Card>
+                        <div className="flex items-center justify-between">
+                            <CardTitle icon={Paperclip}>
+                                Attached files
+                            </CardTitle>
+                            {completion?.files?.length > 0 && (
+                                <Badge variant="secondary" className="text-xs">
+                                    {completion.files.length}
+                                </Badge>
+                            )}
+                        </div>
+
+                        {isLoading ? (
+                            <div className="flex flex-col gap-2">
+                                {Array.from({ length: 2 }).map((_, i) => (
+                                    <div key={i} className="flex items-center gap-3 p-3 rounded-lg bg-muted">
+                                        <Skeleton className="size-5 rounded" />
+                                        <div className="flex flex-col gap-1 flex-1">
+                                            <Skeleton className="h-3.5 w-40" />
+                                            <Skeleton className="h-3 w-20" />
+                                        </div>
+                                        <Skeleton className="h-8 w-16 rounded-md" />
+                                    </div>
+                                ))}
+                            </div>
+                        ) : !completion?.files?.length ? (
+                            <p className="text-sm text-muted-foreground italic">No files attached.</p>
+                        ) : (
+                            <ScrollArea className="max-h-72">
+                                <div className="flex flex-col gap-2">
+                                    {completion.files.map((f) => (
+                                        <div
+                                            key={f.file_id}
+                                            className="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-muted"
+                                        >
+                                            <FileIcon mimeType={f.mime_type} />
+                                            <div className="flex flex-col leading-tight min-w-0 flex-1">
+                                                <span className="text-sm font-medium truncate">
+                                                    {f.file_name}
+                                                </span>
+                                                {f.file_size && (
+                                                    <span className="text-xs text-muted-foreground">
+                                                        {formatBytes(f.file_size)}
+                                                        {f.mime_type ? ` · ${f.mime_type}` : ''}
+                                                    </span>
+                                                )}
+                                            </div>
+                                            <Button
+                                                size="sm" variant="outline"
+                                                className="shrink-0"
+                                                onClick={() => window.open(f.file_url, '_blank')}
+                                            >
+                                                <ExternalLink className="size-3.5 mr-1" />
+                                                Open
+                                            </Button>
+                                        </div>
+                                    ))}
+                                </div>
+                            </ScrollArea>
+                        )}
+                    </Card>
+                </div>
+
+                {/* ── RIGHT ─────────────────────────────────────────────────── */}
+                <div className="flex flex-col gap-5 lg:sticky lg:top-24 lg:self-start">
+
+                    {/* Task context */}
+                    <Card>
+                        <CardTitle icon={NotebookPen}>Task</CardTitle>
+                        {isLoading ? (
+                            <div className="flex flex-col gap-2">
+                                <Skeleton className="h-4 w-40" />
+                                <Skeleton className="h-3.5 w-32" />
+                                <Skeleton className="h-3.5 w-28" />
+                            </div>
+                        ) : (
+                            <div className="flex flex-col gap-2 text-sm">
+                                <span className="font-medium">{task?.name ?? '—'}</span>
+                                {task?.deadline && (
+                                    <span className="flex items-center gap-1.5 text-muted-foreground">
+                                        <CalendarDays className="size-3.5" />
+                                        Due {formatDateTime(task.deadline)}
+                                    </span>
+                                )}
+                                <span className="flex items-center gap-1.5 text-muted-foreground">
+                                    <FileText className="size-3.5" />
+                                    {taskList?.name ?? '—'}
+                                </span>
+                            </div>
+                        )}
+                    </Card>
+
+                    {/* Submission history timeline */}
+                    <Card>
+                        <CardTitle icon={Clock}>Submission history</CardTitle>
+                        {completionLoading && !completions.length ? (
+                            <div className="flex flex-col gap-3">
+                                {Array.from({ length: 3 }).map((_, i) => (
+                                    <div key={i} className="flex items-start gap-3">
+                                        <Skeleton className="size-2.5 rounded-full mt-1 shrink-0" />
+                                        <div className="flex flex-col gap-1">
+                                            <Skeleton className="h-3.5 w-28" />
+                                            <Skeleton className="h-3 w-20" />
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        ) : !completions.length ? (
+                            <p className="text-sm text-muted-foreground italic">No history yet.</p>
+                        ) : (
+                            <ScrollArea className="max-h-64">
+                                <div className="flex flex-col gap-3">
+                                    {completions.map((c, idx) => {
+                                        const isCurrent = c.completion_id === completionId;
+                                        return (
+                                            <div
+                                                key={c.completion_id}
+                                                className={`flex items-start gap-3 cursor-pointer rounded-lg px-2 py-1.5 transition-colors ${
+                                                    isCurrent
+                                                        ? 'bg-muted'
+                                                        : 'hover:bg-muted/50'
+                                                }`}
+                                                onClick={() => {
+                                                    if (!isCurrent) {
+                                                        navigate(
+                                                            `/admin/taskList/${taskListId}/tasks/${taskId}/completions/${c.completion_id}/view`
+                                                        );
+                                                    }
+                                                }}
+                                            >
+                                                <TimelineDot active={isCurrent} />
+                                                <div className="flex flex-col leading-tight">
+                                                    <span className={`text-sm ${isCurrent ? 'font-medium' : 'text-muted-foreground'}`}>
+                                                        {idx === 0 ? 'Latest · ' : ''}{formatDate(c.submitted_at)}
+                                                    </span>
+                                                    <span className="text-xs text-muted-foreground mt-0.5">
+                                                        {c.files?.length ?? 0} {(c.files?.length ?? 0) === 1 ? 'file' : 'files'}
+                                                        {c.note ? ' · with note' : ' · no note'}
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            </ScrollArea>
+                        )}
+                    </Card>
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/task_list/task/task.schema.js b/apps/web/src/modules/admin/pages/task_list/task/task.schema.js
new file mode 100644
index 0000000..fbbf78f
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/task_list/task/task.schema.js
@@ -0,0 +1,57 @@
+import { z } from 'zod';
+import { FileText, Link as LinkIcon, Upload, BookOpen, Layers, PenLine } from 'lucide-react';
+
+// ── Requirement validation ────────────────────────────────────────────────────
+const READ_TYPES = ['read_course', 'read_unit', 'read_lesson'];
+
+// Users commonly type bare domains ("google.com") — default the scheme to https
+// so the link is actually clickable/navigable once the task is saved.
+function normalizeLinkUrl(url) {
+    const trimmed = url.trim();
+    if (!trimmed) return trimmed;
+    return /^https?:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`;
+}
+
+export const requirementSchema = z.object({
+    type:             z.string(),
+    reference_id:     z.string().nullable().optional(),
+    duration_seconds: z.number().optional(),
+}).passthrough().superRefine((req, ctx) => {
+    if (!READ_TYPES.includes(req.type)) return;
+    if (!req.reference_id) {
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'Please select content', path: ['reference_id'] });
+    } else if ((req.duration_seconds ?? -1) === 0) {
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'This content has no content detected yet', path: ['duration_seconds'] });
+    }
+}).transform((req) => (
+    req.type === 'visit_link' && req.link_url
+        ? { ...req, link_url: normalizeLinkUrl(req.link_url) }
+        : req
+));
+
+export const taskSchema = z.object({
+    name:         z.string().min(1, 'Task name is required.'),
+    requirements: z.array(requirementSchema),
+});
+
+// ── Requirement type labels/icons for review/summary displays ────────────────
+export const REQUIREMENT_TYPE_META = {
+    visit_link:  { label: 'Visit a Link',      icon: LinkIcon },
+    upload_file: { label: 'Upload a File',     icon: Upload },
+    submit_text: { label: 'Submit a Response', icon: PenLine },
+    read_course: { label: 'Read a Course',     icon: BookOpen },
+    read_unit:   { label: 'Read a Unit',       icon: Layers },
+    read_lesson: { label: 'Read a Lesson',     icon: FileText },
+};
+
+export function requirementSummaryText(req) {
+    if (req.type === 'visit_link') return req.link_url || '—';
+    if (req.type === 'upload_file') {
+        const types = (req.allowed_file_types ?? []).join(', ').toUpperCase();
+        return `${types || 'Any type'} · max ${req.max_file_count ?? 1} file(s)${req.requires_review ? ' · reviewed' : ''}`;
+    }
+    if (req.type === 'submit_text') {
+        return `${req.prompt ? req.prompt.slice(0, 60) : 'Free-text response'}${req.requires_review ? ' · reviewed' : ''}`;
+    }
+    return req.reference_label || '—';
+}
diff --git a/apps/web/src/modules/admin/pages/tiers/AddPlan.jsx b/apps/web/src/modules/admin/pages/tiers/AddPlan.jsx
new file mode 100644
index 0000000..99d0fb8
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/tiers/AddPlan.jsx
@@ -0,0 +1,657 @@
+import { useEffect, useState, useMemo } from "react";
+import { useNavigate } from "react-router-dom";
+import { useForm, useFieldArray } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft, ArrowRight, Check, House, Plus, Trash2, BookOpen, Layers, FileText } from "lucide-react";
+import { useTiers } from "@/contexts/AdminTiersContext";
+import { useAuth } from "@/contexts/AuthContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Input }     from "@/components/ui/input";
+import { Label }     from "@/components/ui/label";
+import { Textarea }  from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { PageMeta } from "@/contexts/MetadataContext";
+import { CoursePicker } from "@/modules/admin/components/tiers/CoursePicker";
+import { UnitPicker } from "@/modules/admin/components/tiers/UnitPicker";
+import { LessonPicker } from "@/modules/admin/components/tiers/LessonPicker";
+import { CurrencyPicker } from "@/modules/admin/components/tiers/CurrencyPicker";
+import api from "@/utils/api.util";
+import { cn } from "@/lib/utils";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+
+// ─── Schema ───────────────────────────────────────────────────────────────────
+
+const DURATION_UNITS = [
+    { value: "minute", label: "Minute(s)" },
+    { value: "hour",   label: "Hour(s)" },
+    { value: "day",    label: "Day(s)" },
+    { value: "month",  label: "Month(s)" },
+    { value: "year",   label: "Year(s)" },
+];
+
+
+const DURATION_UNIT_LIMITS = {
+    minute: { max: 59, nextLabel: "Hour(s)",  factor: 60 },
+    hour:   { max: 23, nextLabel: "Day(s)",   factor: 24 },
+    month:  { max: 11, nextLabel: "Year(s)",  factor: 12 },
+};
+
+const BUNDLE_TYPES = [
+    { value: "course", label: "Course",  icon: BookOpen },
+    { value: "unit",   label: "Units",   icon: Layers },
+    { value: "lesson", label: "Lessons", icon: FileText },
+];
+
+const schema = z.object({
+    tier_category_id: z.string().min(1, "Subscription category is required."),
+    label:            z.string().min(1, "Label is required."),
+    description:      z.string().optional(),
+    features:         z.array(z.object({ text: z.string().min(1, "Feature cannot be empty.") })).default([]),
+    duration_value:   z.coerce.number().min(1, "Duration must be at least 1."),
+    duration_unit:    z.string().min(1),
+    price:            z.coerce.number().min(0.01, "Price must be greater than 0."),
+    currency:         z.string().length(3, "Must be a 3-letter currency code.").default("USD"),
+    status:           z.enum(["draft", "published"]).default("draft"),
+}).superRefine(({ duration_value, duration_unit }, ctx) => {
+    const rule = DURATION_UNIT_LIMITS[duration_unit];
+    if (rule && duration_value > rule.max) {
+        const equivalent = Math.floor(duration_value / rule.factor);
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ["duration_value"],
+            message: `${duration_value} ${duration_unit}(s) = ${equivalent}+ ${rule.nextLabel.toLowerCase()}. Use ${rule.nextLabel} instead.`,
+        });
+    }
+});
+
+function FieldError({ message }) {
+    if (!message) return null;
+    return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+function SectionCard({ title, children }) {
+    return (
+        <div className="rounded-lg border bg-card p-6 space-y-5">
+            {title && <div className="pb-1 border-b"><h2 className="text-sm font-semibold">{title}</h2></div>}
+            {children}
+        </div>
+    );
+}
+
+// ─── Steps config ─────────────────────────────────────────────────────────────
+
+const STEPS = [
+    { label: "Bundles & Details",  description: "What this unlocks, plus its label & description"   },
+    { label: "Duration & Pricing", description: "Billing period, price & currency"   },
+    { label: "Review", description: "Confirm everything before creating"   },
+];
+
+function StepIndicator({ steps, current, maxStepReached, onStepClick }) {
+    return (
+        <div className="flex items-start w-full mb-8">
+            {steps.flatMap((step, i) => {
+                const reachable = i <= maxStepReached;
+                const items = [
+                    <button
+                        key={`step-${i}`}
+                        type="button"
+                        onClick={() => onStepClick(i)}
+                        disabled={!reachable}
+                        className="flex flex-col items-center gap-1.5 shrink-0 group disabled:cursor-not-allowed disabled:opacity-50"
+                    >
+                        <div
+                            className={[
+                                "w-8 h-8 rounded-full border-2 flex items-center justify-center text-sm font-semibold transition-all",
+                                reachable && "group-hover:opacity-80",
+                                i < current
+                                    ? "bg-primary border-primary text-primary-foreground"
+                                    : i === current
+                                    ? "border-primary text-primary"
+                                    : "border-border text-muted-foreground",
+                            ].filter(Boolean).join(" ")}
+                        >
+                            {i < current ? <Check className="h-4 w-4" /> : i + 1}
+                        </div>
+                        <p
+                            className={[
+                                "text-[11px] font-medium text-center leading-tight whitespace-nowrap",
+                                i === current ? "text-foreground" : "text-muted-foreground",
+                            ].join(" ")}
+                        >
+                            {step.label}
+                        </p>
+                    </button>,
+                ];
+                if (i < steps.length - 1) {
+                    items.push(
+                        <div
+                            key={`line-${i}`}
+                            className={[
+                                "flex-1 h-px mt-4 mx-2 shrink",
+                                i < current ? "bg-primary" : "bg-border",
+                            ].join(" ")}
+                        />
+                    );
+                }
+                return items;
+            })}
+        </div>
+    );
+}
+
+// ─── Review step ──────────────────────────────────────────────────────────────
+// Read-only summary — no inline editing here. Go back a step to change
+// something. Re-fetches the by-subscription item list to resolve titles for
+// whichever ids are selected (the pickers don't expose their loaded list
+// upward, so this is the simplest way to show names instead of just counts).
+function BundleReviewList({ bundleType, categorySlug, selectedIds }) {
+    const [items, setItems] = useState([]);
+    const [loading, setLoading] = useState(false);
+
+    const endpoint = {
+        course: "/admin/courses/by-subscription",
+        unit:   "/admin/units/by-subscription",
+        lesson: "/admin/lessons/by-subscription",
+    }[bundleType];
+    const idKey = { course: "course_id", unit: "unit_id", lesson: "lesson_id" }[bundleType];
+
+    useEffect(() => {
+        if (!categorySlug || !endpoint) { setItems([]); return; }
+        setLoading(true);
+        api.get(`${endpoint}?slug=${encodeURIComponent(categorySlug)}`)
+            .then(({ data }) => setItems(data.data ?? []))
+            .catch(() => setItems([]))
+            .finally(() => setLoading(false));
+    }, [categorySlug, endpoint]);
+
+    if (loading) return <p className="text-sm text-muted-foreground">Loading selected items…</p>;
+
+    const selected = items.filter((i) => selectedIds.has(String(i[idKey])));
+
+    if (selected.length === 0) {
+        return <p className="text-sm text-muted-foreground">No items selected.</p>;
+    }
+
+    return (
+        <ul className="text-sm space-y-1 list-disc list-inside">
+            {selected.map((i) => (
+                <li key={i[idKey]}>{i.title}</li>
+            ))}
+        </ul>
+    );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function AddPlan() {
+    const navigate = useNavigate();
+    const { createPlan, loading } = useTiers();
+    const { user } = useAuth();
+
+    const [currentStep,       setCurrentStep]       = useState(0);
+    const [maxStepReached,    setMaxStepReached]    = useState(0);
+    const [categories,        setCategories]        = useState([]);
+    const [catLoading,        setCatLoading]        = useState(true);
+    const [currencies,        setCurrencies]        = useState([]);
+    const [bundleType,        setBundleType]        = useState("course");
+    const [selectedCourseIds, setSelectedCourseIds] = useState(new Set());
+    const [selectedUnitIds,   setSelectedUnitIds]   = useState(new Set());
+    const [selectedLessonIds, setSelectedLessonIds] = useState(new Set());
+
+    useEffect(() => {
+        api.get("/admin/tiers/categories")
+            .then(({ data }) => setCategories((data.data ?? []).filter((c) => !c.is_default && c.is_active)))
+            .catch(() => {})
+            .finally(() => setCatLoading(false));
+        api.get("/admin/tiers/currencies")
+            .then(({ data }) => setCurrencies(data.data ?? []))
+            .catch(() => {});
+    }, []);
+
+    const { register, handleSubmit, trigger, setValue, watch, control, formState: { errors, isDirty } } = useForm({
+        resolver: zodResolver(schema),
+        defaultValues: { tier_category_id: "", label: "", description: "", features: [], duration_value: 30, duration_unit: "day", price: "", currency: "USD", status: "draft" },
+    });
+
+    const { fields: featureFields, append: appendFeature, remove: removeFeature, insert: insertFeature } =
+        useFieldArray({ control, name: "features" });
+
+    // Pasting a multi-line list should fan out into separate feature rows
+    // instead of dumping every line into a single input.
+    const handleFeaturePaste = (e, index) => {
+        const lines = e.clipboardData.getData("text")
+            .split(/\r\n|\r|\n/)
+            .map((l) => l.trim())
+            .filter(Boolean);
+        if (lines.length <= 1) return;
+        e.preventDefault();
+        setValue(`features.${index}.text`, lines[0], { shouldDirty: true });
+        insertFeature(index + 1, lines.slice(1).map((text) => ({ text })));
+    };
+
+    // selectedCourseIds/selectedUnitIds/selectedLessonIds live outside the form
+    // — this is a create page so they always start empty, meaning any
+    // selection is a genuine unsaved change.
+    const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(
+        isDirty || selectedCourseIds.size > 0 || selectedUnitIds.size > 0 || selectedLessonIds.size > 0
+    );
+
+    const selectedCategoryId = watch("tier_category_id");
+    const selectedCategory = useMemo(
+        () => categories.find((c) => String(c.tier_category_id) === selectedCategoryId) ?? null,
+        [selectedCategoryId, categories]
+    );
+
+    // Derive the subscription slug from the chosen category
+    const categorySlug = selectedCategory?.slug ?? null;
+
+    // Reset all bundle selections when category changes
+    useEffect(() => {
+        setSelectedCourseIds(new Set());
+        setSelectedUnitIds(new Set());
+        setSelectedLessonIds(new Set());
+    }, [categorySlug]);
+
+    // A bundle is single-type — switching type clears whatever the other
+    // types held selected, so at most one of the three sets is ever non-empty.
+    const handleBundleTypeChange = (type) => {
+        if (type === bundleType) return;
+        setBundleType(type);
+        setSelectedCourseIds(new Set());
+        setSelectedUnitIds(new Set());
+        setSelectedLessonIds(new Set());
+    };
+
+    const activeSelectedIds = { course: selectedCourseIds, unit: selectedUnitIds, lesson: selectedLessonIds }[bundleType];
+
+    const STEP_FIELDS = [
+        ["tier_category_id", "label", "description", "features", "status"],
+        ["duration_value", "duration_unit", "price", "currency"],
+        [],
+    ];
+
+    const handleNext = async () => {
+        const valid = await trigger(STEP_FIELDS[currentStep]);
+        if (!valid) return;
+        const next = Math.min(currentStep + 1, STEPS.length - 1);
+        setCurrentStep(next);
+        setMaxStepReached((s) => Math.max(s, next));
+    };
+
+    // Only allow jumping via the indicator to steps already reached through Next —
+    // prevents landing on a later step before its prerequisites are filled in.
+    const handleStepClick = (i) => {
+        if (i <= maxStepReached) setCurrentStep(i);
+    };
+
+    const onSubmit = async (values) => {
+        const result = await createPlan({ ...values, createdBy: user?.user_id });
+        if (!result) return;
+
+        // Single-type bundle — only the active type ever holds selections, so
+        // only one of these sync calls actually has anything to send.
+        // IDs stay strings — these are 19-digit BIGINTs, and Number() silently
+        // truncates past Number.MAX_SAFE_INTEGER (see BigInt precision-loss bug).
+        if (bundleType === "course" && selectedCourseIds.size > 0) {
+            await api.post(`/admin/tiers/${result.plan_id}/courses`, {
+                course_ids: [...selectedCourseIds],
+            }).catch(() => {});
+        }
+        if (bundleType === "unit" && selectedUnitIds.size > 0) {
+            await api.post(`/admin/tiers/${result.plan_id}/units`, {
+                unit_ids: [...selectedUnitIds],
+            }).catch(() => {});
+        }
+        if (bundleType === "lesson" && selectedLessonIds.size > 0) {
+            await api.post(`/admin/tiers/${result.plan_id}/lessons`, {
+                lesson_ids: [...selectedLessonIds],
+            }).catch(() => {});
+        }
+
+        bypassOnce();
+        navigate(`/admin/tiers/plans`);
+    };
+
+    return (
+        <section className="bg-muted/60 min-h-full">
+            <PageMeta title="Add Plan - STARR" />
+            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
+                <div className="w-full max-w-2xl mx-auto">
+
+                    <div className="flex flex-col gap-2 mb-6">
+                        <AppBreadcrumb items={[
+                            { label: "Home",  icon: <House className="size-4" />, to: "/admin" },
+                            { label: "Plans", to: "/admin/tiers/plans" },
+                            { label: "Add Plan" },
+                        ]} />
+                    </div>
+
+                    <div className="flex items-center gap-3 mb-6">
+                        <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/admin/tiers/plans")}>
+                            <ArrowLeft className="h-4 w-4" />
+                        </Button>
+                        <div>
+                            <h1 className="text-xl font-semibold">Add Plan</h1>
+                            <p className="text-sm text-muted-foreground">Create a new paid subscription plan.</p>
+                        </div>
+                    </div>
+
+                    <StepIndicator steps={STEPS} current={currentStep} maxStepReached={maxStepReached} onStepClick={handleStepClick} />
+
+                    <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+
+                        {/* ── Step 0: Bundles & Details ── */}
+                        {currentStep === 0 && (
+                            <SectionCard title="Bundles & Details" description="Which subscription category this targets, what it unlocks, and how it's presented.">
+
+                                <div className="space-y-1.5">
+                                    <Label>Subscription Category <span className="text-destructive">*</span></Label>
+                                    {catLoading ? (
+                                        <div className="flex items-center gap-2 text-sm text-muted-foreground py-2">
+                                            <Spinner className="h-4 w-4" /> Loading categories…
+                                        </div>
+                                    ) : categories.length === 0 ? (
+                                        <p className="text-sm text-muted-foreground py-2">
+                                            No subscription categories found.{" "}
+                                            <a href="/admin/tiers/categories/add" className="underline text-primary">Add one first.</a>
+                                        </p>
+                                    ) : (
+                                        <Select
+                                            value={selectedCategoryId}
+                                            onValueChange={(v) => setValue("tier_category_id", v, { shouldDirty: true })}
+                                        >
+                                            <SelectTrigger>
+                                                <SelectValue placeholder="Select subscription category" />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                {categories.map((c) => (
+                                                    <SelectItem key={c.tier_category_id} value={String(c.tier_category_id)}>
+                                                        {c.name}
+                                                        <span className="ml-2 text-xs text-muted-foreground">({c.slug})</span>
+                                                    </SelectItem>
+                                                ))}
+                                            </SelectContent>
+                                        </Select>
+                                    )}
+                                    <FieldError message={errors.tier_category_id?.message} />
+                                </div>
+
+                                {categorySlug && (
+                                    <>
+                                        <div className="space-y-1.5">
+                                            <Label>Content Type <span className="text-destructive">*</span></Label>
+                                            <p className="text-xs text-muted-foreground -mt-1">
+                                                A bundle unlocks exactly one content type — pick which.
+                                            </p>
+                                            <div className="flex gap-2">
+                                                {BUNDLE_TYPES.map(({ value, label, icon: Icon }) => (
+                                                    <Button
+                                                        key={value}
+                                                        type="button"
+                                                        size="sm"
+                                                        variant={bundleType === value ? "default" : "outline"}
+                                                        onClick={() => handleBundleTypeChange(value)}
+                                                        className={cn("flex-1")}
+                                                    >
+                                                        <Icon className="size-3.5 mr-1.5" />
+                                                        {label}
+                                                    </Button>
+                                                ))}
+                                            </div>
+                                        </div>
+
+                                        <div className="border-t pt-5">
+                                            {bundleType === "course" && (
+                                                <CoursePicker
+                                                    subscription={categorySlug}
+                                                    selectedIds={selectedCourseIds}
+                                                    onChange={setSelectedCourseIds}
+                                                />
+                                            )}
+                                            {bundleType === "unit" && (
+                                                <UnitPicker
+                                                    subscription={categorySlug}
+                                                    selectedIds={selectedUnitIds}
+                                                    onChange={setSelectedUnitIds}
+                                                />
+                                            )}
+                                            {bundleType === "lesson" && (
+                                                <LessonPicker
+                                                    subscription={categorySlug}
+                                                    selectedIds={selectedLessonIds}
+                                                    onChange={setSelectedLessonIds}
+                                                />
+                                            )}
+                                        </div>
+
+                                        <div className="border-t pt-5 space-y-1.5">
+                                            <Label htmlFor="label">Label <span className="text-destructive">*</span></Label>
+                                            <Input id="label" placeholder="e.g. Premium – 1 Month" {...register("label")} />
+                                            <FieldError message={errors.label?.message} />
+                                        </div>
+
+                                        <div className="space-y-1.5">
+                                            <Label htmlFor="description">Description</Label>
+                                            <Textarea
+                                                id="description"
+                                                placeholder="Brief description shown to users on the plans page."
+                                                rows={3}
+                                                {...register("description")}
+                                            />
+                                            <FieldError message={errors.description?.message} />
+                                        </div>
+
+                                        <div className="space-y-1.5">
+                                            <Label>Status</Label>
+                                            <p className="text-xs text-muted-foreground -mt-1">
+                                                Draft plans are hidden from the public Plans page entirely — publish when ready to sell.
+                                            </p>
+                                            <Select
+                                                value={watch("status") ?? "draft"}
+                                                onValueChange={(v) => setValue("status", v, { shouldDirty: true })}
+                                            >
+                                                <SelectTrigger>
+                                                    <SelectValue placeholder="Select status" />
+                                                </SelectTrigger>
+                                                <SelectContent>
+                                                    <SelectItem value="draft">Draft</SelectItem>
+                                                    <SelectItem value="published">Published</SelectItem>
+                                                </SelectContent>
+                                            </Select>
+                                            <FieldError message={errors.status?.message} />
+                                        </div>
+
+                                        <div className="space-y-2">
+                                            <Label>Benefits</Label>
+                                            <p className="text-xs text-muted-foreground -mt-1">
+                                                Bullet points shown on the plans page and the comparison table.
+                                            </p>
+                                            {featureFields.map((field, index) => (
+                                                <div key={field.id} className="flex items-start gap-2">
+                                                    <div className="flex-1 space-y-1">
+                                                        <Input
+                                                            placeholder={`e.g. Access to all Premium courses`}
+                                                            onPaste={(e) => handleFeaturePaste(e, index)}
+                                                            {...register(`features.${index}.text`)}
+                                                        />
+                                                        <FieldError message={errors.features?.[index]?.text?.message} />
+                                                    </div>
+                                                    <Button
+                                                        type="button"
+                                                        variant="ghost"
+                                                        size="icon"
+                                                        className="mt-0.5 text-muted-foreground hover:text-destructive"
+                                                        onClick={() => removeFeature(index)}
+                                                    >
+                                                        <Trash2 className="h-4 w-4" />
+                                                    </Button>
+                                                </div>
+                                            ))}
+                                            <Button
+                                                type="button"
+                                                variant="outline"
+                                                size="sm"
+                                                className="w-full"
+                                                onClick={() => appendFeature({ text: "" })}
+                                            >
+                                                <Plus className="h-4 w-4 mr-2" />
+                                                Add Feature
+                                            </Button>
+                                        </div>
+                                    </>
+                                )}
+                            </SectionCard>
+                        )}
+
+                        {/* ── Step 1: Duration & Pricing ── */}
+                        {currentStep === 1 && (
+                            <SectionCard title="Duration & Pricing" description="How long the plan lasts and what it costs.">
+
+                                <div className="space-y-1.5">
+                                    <Label>Duration <span className="text-destructive">*</span></Label>
+                                    <div className="flex gap-2">
+                                        <Input
+                                            id="duration_value"
+                                            type="number"
+                                            min={1}
+                                            className="flex-1"
+                                            {...register("duration_value")}
+                                        />
+                                        <Select
+                                            value={watch("duration_unit") ?? "day"}
+                                            onValueChange={(v) => setValue("duration_unit", v, { shouldDirty: true })}
+                                        >
+                                            <SelectTrigger className="w-36">
+                                                <SelectValue />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                {DURATION_UNITS.map((u) => (
+                                                    <SelectItem key={u.value} value={u.value}>{u.label}</SelectItem>
+                                                ))}
+                                            </SelectContent>
+                                        </Select>
+                                    </div>
+                                    <FieldError message={errors.duration_value?.message} />
+                                </div>
+
+                                <div className="space-y-1.5">
+                                    <Label htmlFor="price">Price <span className="text-destructive">*</span></Label>
+                                    <Input id="price" type="number" step="0.01" min={0} placeholder="0.00" {...register("price")} />
+                                    <FieldError message={errors.price?.message} />
+                                </div>
+
+                                <div className="space-y-1.5">
+                                    <Label>Currency</Label>
+                                    <CurrencyPicker
+                                        value={watch("currency") ?? "USD"}
+                                        currencies={currencies}
+                                        onValueChange={(v) => setValue("currency", v, { shouldDirty: true })}
+                                    />
+                                    <FieldError message={errors.currency?.message} />
+                                </div>
+                            </SectionCard>
+                        )}
+
+                        {/* ── Step 2: Review ── */}
+                        {currentStep === 2 && (
+                            <SectionCard title="Review" description="Confirm everything before creating this plan.">
+
+                                <div className="space-y-1.5">
+                                    <Label className="text-xs text-muted-foreground">Subscription Category</Label>
+                                    <p className="text-sm">
+                                        {selectedCategory ? `${selectedCategory.name} (${selectedCategory.slug})` : "—"}
+                                    </p>
+                                </div>
+
+                                <div className="space-y-1.5">
+                                    <Label className="text-xs text-muted-foreground">
+                                        Bundle — {BUNDLE_TYPES.find((t) => t.value === bundleType)?.label}
+                                        {" "}({activeSelectedIds.size} selected)
+                                    </Label>
+                                    <BundleReviewList bundleType={bundleType} categorySlug={categorySlug} selectedIds={activeSelectedIds} />
+                                </div>
+
+                                <div className="space-y-1.5">
+                                    <Label className="text-xs text-muted-foreground">Label</Label>
+                                    <p className="text-sm">{watch("label") || "—"}</p>
+                                </div>
+
+                                <div className="space-y-1.5">
+                                    <Label className="text-xs text-muted-foreground">Status</Label>
+                                    <p className="text-sm capitalize">{watch("status") || "draft"}</p>
+                                </div>
+
+                                {watch("description") && (
+                                    <div className="space-y-1.5">
+                                        <Label className="text-xs text-muted-foreground">Description</Label>
+                                        <p className="text-sm">{watch("description")}</p>
+                                    </div>
+                                )}
+
+                                {featureFields.length > 0 && (
+                                    <div className="space-y-1.5">
+                                        <Label className="text-xs text-muted-foreground">Benefits</Label>
+                                        <ul className="text-sm space-y-1 list-disc list-inside">
+                                            {watch("features")?.map((f, i) => (
+                                                <li key={i}>{f.text}</li>
+                                            ))}
+                                        </ul>
+                                    </div>
+                                )}
+
+                                <div className="space-y-1.5">
+                                    <Label className="text-xs text-muted-foreground">Duration</Label>
+                                    <p className="text-sm">
+                                        {watch("duration_value")} {DURATION_UNITS.find((u) => u.value === watch("duration_unit"))?.label ?? watch("duration_unit")}
+                                    </p>
+                                </div>
+
+                                <div className="space-y-1.5">
+                                    <Label className="text-xs text-muted-foreground">Price</Label>
+                                    <p className="text-sm">{watch("price")} {watch("currency")}</p>
+                                </div>
+
+                                <p className="text-xs text-muted-foreground">
+                                    Go back a step to change anything above.
+                                </p>
+                            </SectionCard>
+                        )}
+
+                        <div className="flex justify-end gap-3 pt-1">
+                            <Button
+                                type="button"
+                                variant="outline"
+                                onClick={() => currentStep > 0 ? setCurrentStep((s) => s - 1) : navigate("/admin/tiers/plans")}
+                                disabled={loading}
+                            >
+                                {currentStep === 0 ? "Cancel" : "Back"}
+                            </Button>
+
+                            {currentStep < STEPS.length - 1 ? (
+                                <Button type="button" onClick={handleNext} disabled={catLoading}>
+                                    Next
+                                    <ArrowRight className="h-4 w-4 ml-2" />
+                                </Button>
+                            ) : (
+                                <Button
+                                    type="button"
+                                    onClick={handleSubmit(onSubmit)}
+                                    disabled={loading || catLoading || !selectedCategoryId}
+                                >
+                                    {loading && <Spinner className="h-4 w-4 mr-2" />}
+                                    Create Plan
+                                </Button>
+                            )}
+                        </div>
+
+                    </form>
+                </div>
+            </div>
+
+            {unsavedChangesDialog}
+        </section>
+    );
+}
diff --git a/apps/web/src/modules/admin/pages/tiers/ArchivedPlanList.jsx b/apps/web/src/modules/admin/pages/tiers/ArchivedPlanList.jsx
new file mode 100644
index 0000000..95858b4
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/tiers/ArchivedPlanList.jsx
@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { House } from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import ArchivedTierPlansTable from "../../components/tiers/ArchivedTierPlansTable";
+import { useTiers } from "@/contexts/AdminTiersContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+
+export default function ArchivedPlanList() {
+  const { fetchPlans } = useTiers();
+  useEffect(() => { fetchPlans({ archived: true }); }, []);
+
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Subscriptions", to: "/admin/tiers/plans" },
+    { label: "Plans", to: "/admin/tiers/plans" },
+    { label: "Archived" },
+  ];
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title="Archived Plans - STARR" />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+        <div className="w-full">
+          <ArchivedTierPlansTable />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/tiers/EditPlan.jsx b/apps/web/src/modules/admin/pages/tiers/EditPlan.jsx
new file mode 100644
index 0000000..eed4e0c
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/tiers/EditPlan.jsx
@@ -0,0 +1,573 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useForm, useFieldArray } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft, House, TriangleAlert, Plus, Trash2, BookOpen, Layers, FileText } from "lucide-react";
+import { useTiers } from "@/contexts/AdminTiersContext";
+import { useAuth } from "@/contexts/AuthContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Input }    from "@/components/ui/input";
+import { Label }    from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+import { Switch } from "@/components/ui/switch";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { PageMeta } from "@/contexts/MetadataContext";
+import { CoursePicker } from "@/modules/admin/components/tiers/CoursePicker";
+import { UnitPicker } from "@/modules/admin/components/tiers/UnitPicker";
+import { LessonPicker } from "@/modules/admin/components/tiers/LessonPicker";
+import { CurrencyPicker } from "@/modules/admin/components/tiers/CurrencyPicker";
+import api from "@/utils/api.util";
+import { cn } from "@/lib/utils";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+
+const BUNDLE_TYPES = [
+  { value: "course", label: "Course",  icon: BookOpen },
+  { value: "unit",   label: "Units",   icon: Layers },
+  { value: "lesson", label: "Lessons", icon: FileText },
+];
+
+const DURATION_UNITS = [
+  { value: "minute", label: "Minute(s)" },
+  { value: "hour",   label: "Hour(s)" },
+  { value: "day",    label: "Day(s)" },
+  { value: "month",  label: "Month(s)" },
+  { value: "year",   label: "Year(s)" },
+];
+
+
+const UNIT_TO_DAYS = { minute: 1 / 1440, hour: 1 / 24, day: 1, month: 30, year: 365 };
+
+function durationDaysToValue(days, unit) {
+  const multiplier = UNIT_TO_DAYS[unit] ?? 1;
+  return Math.round((days / multiplier) * 1000) / 1000;
+}
+
+const DURATION_UNIT_LIMITS = {
+  minute: { max: 59, nextLabel: "Hour(s)", factor: 60 },
+  hour:   { max: 23, nextLabel: "Day(s)",  factor: 24 },
+  month:  { max: 11, nextLabel: "Year(s)", factor: 12 },
+};
+
+const schema = z.object({
+  label:          z.string().min(1, "Label is required."),
+  description:    z.string().optional(),
+  features:       z.array(z.object({ text: z.string().min(1, "Feature cannot be empty.") })).default([]),
+  duration_value: z.coerce.number().min(1, "Duration must be at least 1."),
+  duration_unit:  z.string().min(1),
+  price:          z.coerce.number().min(0.01, "Price must be greater than 0."),
+  currency:       z.string().length(3),
+  is_active:      z.boolean().default(true),
+  is_recommended: z.boolean().default(false),
+  status:         z.enum(["draft", "published"]).default("draft"),
+}).superRefine(({ duration_value, duration_unit }, ctx) => {
+  const rule = DURATION_UNIT_LIMITS[duration_unit];
+  if (rule && duration_value > rule.max) {
+    const equivalent = Math.floor(duration_value / rule.factor);
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: ["duration_value"],
+      message: `${duration_value} ${duration_unit}(s) = ${equivalent}+ ${rule.nextLabel.toLowerCase()}. Use ${rule.nextLabel} instead.`,
+    });
+  }
+});
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+function SectionCard({ title, children }) {
+  return (
+    <div className="rounded-lg border bg-card p-6 space-y-5">
+      {title && <div className="pb-1 border-b"><h2 className="text-sm font-semibold">{title}</h2></div>}
+      {children}
+    </div>
+  );
+}
+
+
+export default function EditPlan() {
+  const navigate = useNavigate();
+  const { planId } = useParams();
+  const { fetchPlan, plan, updatePlan, loading } = useTiers();
+  const { user } = useAuth();
+
+  const [selectedCourseIds,   setSelectedCourseIds]   = useState(new Set());
+  const [coursesLoaded,       setCoursesLoaded]       = useState(false);
+  const [selectedUnitIds,     setSelectedUnitIds]     = useState(new Set());
+  const [unitsLoaded,         setUnitsLoaded]         = useState(false);
+  const [selectedLessonIds,   setSelectedLessonIds]   = useState(new Set());
+  const [lessonsLoaded,       setLessonsLoaded]       = useState(false);
+  const [bundleType,          setBundleType]          = useState(null); // null until auto-detected from preload
+  const [currencies,          setCurrencies]          = useState([]);
+  const [impactDialog,        setImpactDialog]        = useState(false);
+  const [impactCount,         setImpactCount]         = useState(0);
+  const [impactLoading,       setImpactLoading]       = useState(false);
+  const [pendingValues,       setPendingValues]       = useState(null);
+
+  const { register, handleSubmit, setValue, watch, reset, control, formState: { errors, isDirty } } = useForm({
+    resolver: zodResolver(schema),
+  });
+
+  const { fields: featureFields, append: appendFeature, remove: removeFeature, insert: insertFeature } =
+    useFieldArray({ control, name: "features" });
+
+  // Pasting a multi-line list should fan out into separate feature rows
+  // instead of dumping every line into a single input.
+  const handleFeaturePaste = (e, index) => {
+    const lines = e.clipboardData.getData("text")
+      .split(/\r\n|\r|\n/)
+      .map((l) => l.trim())
+      .filter(Boolean);
+    if (lines.length <= 1) return;
+    e.preventDefault();
+    setValue(`features.${index}.text`, lines[0], { shouldDirty: true });
+    insertFeature(index + 1, lines.slice(1).map((text) => ({ text })));
+  };
+
+  const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty);
+
+  useEffect(() => {
+    fetchPlan(planId);
+    api.get("/admin/tiers/currencies")
+      .then(({ data }) => setCurrencies(data.data ?? []))
+      .catch(() => {});
+  }, [planId]);
+
+  useEffect(() => {
+    if (plan) {
+      const unit = plan.duration_unit ?? "day";
+      reset({
+        label:          plan.label,
+        description:    plan.description ?? "",
+        features:       (plan.features ?? []).map((f) => (typeof f === "string" ? { text: f } : f)),
+        duration_value: durationDaysToValue(plan.duration_days, unit),
+        duration_unit:  unit,
+        price:          plan.price,
+        currency:       plan.currency,
+        is_active:      plan.is_active,
+        is_recommended: plan.is_recommended ?? false,
+        status:         plan.status ?? "draft",
+      });
+    }
+  }, [plan]);
+
+  // Load existing assigned courses once the plan is known
+  useEffect(() => {
+    if (!planId || coursesLoaded) return;
+    api.get(`/admin/tiers/${planId}/courses`)
+      .then(({ data }) => {
+        const ids = (data.data ?? []).map((c) => String(c.course_id));
+        setSelectedCourseIds(new Set(ids));
+        setCoursesLoaded(true);
+      })
+      .catch(() => setCoursesLoaded(true));
+  }, [planId]);
+
+  // Load existing assigned units/lessons the same way
+  useEffect(() => {
+    if (!planId || unitsLoaded) return;
+    api.get(`/admin/tiers/${planId}/units`)
+      .then(({ data }) => {
+        const ids = (data.data ?? []).map((u) => String(u.unit_id));
+        setSelectedUnitIds(new Set(ids));
+        setUnitsLoaded(true);
+      })
+      .catch(() => setUnitsLoaded(true));
+  }, [planId]);
+
+  useEffect(() => {
+    if (!planId || lessonsLoaded) return;
+    api.get(`/admin/tiers/${planId}/lessons`)
+      .then(({ data }) => {
+        const ids = (data.data ?? []).map((l) => String(l.lesson_id));
+        setSelectedLessonIds(new Set(ids));
+        setLessonsLoaded(true);
+      })
+      .catch(() => setLessonsLoaded(true));
+  }, [planId]);
+
+  // A bundle is single-type — auto-detect which type this plan already holds
+  // once all three preloads land, and only ever do this once (afterward,
+  // switching type is a deliberate admin action, not a re-detection).
+  useEffect(() => {
+    if (bundleType !== null) return;
+    if (!coursesLoaded || !unitsLoaded || !lessonsLoaded) return;
+    if (selectedCourseIds.size > 0) setBundleType("course");
+    else if (selectedUnitIds.size > 0) setBundleType("unit");
+    else if (selectedLessonIds.size > 0) setBundleType("lesson");
+    else setBundleType("course"); // no items assigned yet — default to Course
+  }, [bundleType, coursesLoaded, unitsLoaded, lessonsLoaded, selectedCourseIds, selectedUnitIds, selectedLessonIds]);
+
+  // Switching type clears whatever the other types held selected, so at most
+  // one of the three sets is ever non-empty going forward.
+  const handleBundleTypeChange = (type) => {
+    if (type === bundleType) return;
+    setBundleType(type);
+    setSelectedCourseIds(new Set());
+    setSelectedUnitIds(new Set());
+    setSelectedLessonIds(new Set());
+  };
+
+  const durationChanged = (values) => {
+    if (!plan) return false;
+    const originalUnit  = plan.duration_unit ?? "day";
+    const originalValue = durationDaysToValue(plan.duration_days, originalUnit);
+    return (
+      Number(values.duration_value) !== originalValue ||
+      values.duration_unit !== originalUnit
+    );
+  };
+
+  const doSave = async (values) => {
+    const result = await updatePlan(planId, { ...values, updatedBy: user?.user_id });
+    if (!result) return;
+    // Single-type bundle — sync all three endpoints explicitly (sending an
+    // empty list for the inactive types) so switching bundle type also
+    // clears out whatever the plan previously held under the old type.
+    await api.post(`/admin/tiers/${planId}/courses`, {
+      course_ids: bundleType === "course" ? [...selectedCourseIds] : [],
+    }).catch(() => {});
+    await api.post(`/admin/tiers/${planId}/units`, {
+      unit_ids: bundleType === "unit" ? [...selectedUnitIds] : [],
+    }).catch(() => {});
+    await api.post(`/admin/tiers/${planId}/lessons`, {
+      lesson_ids: bundleType === "lesson" ? [...selectedLessonIds] : [],
+    }).catch(() => {});
+    bypassOnce();
+    navigate("/admin/tiers/plans");
+  };
+
+  const onSubmit = async (values) => {
+    if (!durationChanged(values)) {
+      return doSave(values);
+    }
+
+    setImpactLoading(true);
+    try {
+      const { data } = await api.get(`/admin/tiers/${planId}/impact`);
+      setImpactCount(data.data?.active_subscriber_count ?? 0);
+      setPendingValues(values);
+      setImpactDialog(true);
+    } catch {
+      // Impact fetch failed — still allow save but without count
+      setImpactCount(0);
+      setPendingValues(values);
+      setImpactDialog(true);
+    } finally {
+      setImpactLoading(false);
+    }
+  };
+
+  const handleConfirmSave = async () => {
+    setImpactDialog(false);
+    if (pendingValues) await doSave(pendingValues);
+  };
+
+  return (
+    <section className="bg-muted/60 min-h-full">
+      <PageMeta title={plan ? `Edit: ${plan.label} - STARR` : undefined} />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
+        <div className="w-full max-w-2xl mx-auto">
+
+          <div className="flex flex-col gap-2 mb-6">
+            <AppBreadcrumb items={[
+              { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+              { label: "Plans", to: "/admin/tiers/plans" },
+              { label: "Edit Plan" },
+            ]} />
+          </div>
+
+          <div className="flex items-center gap-3 mb-6">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/admin/tiers/plans")}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Edit Plan</h1>
+              <p className="text-sm text-muted-foreground capitalize">{plan?.tier} — {plan?.label}</p>
+            </div>
+          </div>
+
+          {loading && !plan ? (
+            <div className="space-y-4">
+              {[...Array(4)].map((_, i) => <Skeleton key={i} className="h-10 w-full" />)}
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+
+              <SectionCard title="Plan Details">
+                <div className="space-y-1.5">
+                  <Label htmlFor="label">Label <span className="text-destructive">*</span></Label>
+                  <Input id="label" {...register("label")} />
+                  <FieldError message={errors.label?.message} />
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label htmlFor="description">Description</Label>
+                  <Textarea
+                    id="description"
+                    placeholder="Brief description shown to users on the plans page."
+                    rows={3}
+                    {...register("description")}
+                  />
+                  <FieldError message={errors.description?.message} />
+                </div>
+
+                <div className="space-y-2">
+                  <Label>Benefits</Label>
+                  <p className="text-xs text-muted-foreground -mt-1">
+                    Bullet points shown on the plans page and the comparison table.
+                  </p>
+                  {featureFields.map((field, index) => (
+                    <div key={field.id} className="flex items-start gap-2">
+                      <div className="flex-1 space-y-1">
+                        <Input
+                          placeholder="e.g. Access to all Premium courses"
+                          onPaste={(e) => handleFeaturePaste(e, index)}
+                          {...register(`features.${index}.text`)}
+                        />
+                        <FieldError message={errors.features?.[index]?.text?.message} />
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="mt-0.5 text-muted-foreground hover:text-destructive"
+                        onClick={() => removeFeature(index)}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  ))}
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="w-full"
+                    onClick={() => appendFeature({ text: "" })}
+                  >
+                    <Plus className="h-4 w-4 mr-2" />
+                    Add Feature
+                  </Button>
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label>Duration</Label>
+                  <div className="flex gap-2">
+                    <Input
+                      id="duration_value"
+                      type="number"
+                      min={1}
+                      className="flex-1"
+                      {...register("duration_value")}
+                    />
+                    <Select
+                      value={watch("duration_unit") ?? "day"}
+                      onValueChange={(v) => setValue("duration_unit", v, { shouldDirty: true })}
+                    >
+                      <SelectTrigger className="w-36">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {DURATION_UNITS.map((u) => (
+                          <SelectItem key={u.value} value={u.value}>{u.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <FieldError message={errors.duration_value?.message} />
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label htmlFor="price">Price</Label>
+                  <Input id="price" type="number" step="0.01" {...register("price")} />
+                  <FieldError message={errors.price?.message} />
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label>Currency</Label>
+                  <CurrencyPicker
+                    value={watch("currency") ?? "USD"}
+                    currencies={currencies}
+                    onValueChange={(v) => setValue("currency", v, { shouldDirty: true })}
+                  />
+                  <FieldError message={errors.currency?.message} />
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label>Status</Label>
+                  <p className="text-xs text-muted-foreground -mt-1">
+                    Draft plans are hidden from the public Plans page entirely. Published plans appear there (Active below still controls whether they can be purchased).
+                  </p>
+                  <Select
+                    value={watch("status") ?? "draft"}
+                    onValueChange={(v) => setValue("status", v, { shouldDirty: true })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select status" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="draft">Draft</SelectItem>
+                      <SelectItem value="published">Published</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FieldError message={errors.status?.message} />
+                </div>
+
+                <div className="flex items-center justify-between rounded-lg border p-4">
+                  <div>
+                    <p className="text-sm font-medium">Active</p>
+                    <p className="text-xs text-muted-foreground">Inactive plans are visible to users but cannot be purchased.</p>
+                  </div>
+                  <Switch
+                    checked={watch("is_active") ?? true}
+                    onCheckedChange={(v) => setValue("is_active", v, { shouldDirty: true })}
+                  />
+                </div>
+
+                <div className="flex items-center justify-between rounded-lg border p-4">
+                  <div>
+                    <p className="text-sm font-medium">Recommended for you</p>
+                    <p className="text-xs text-muted-foreground">Highlights this plan with a "Recommended for you" banner on the client Plans page.</p>
+                  </div>
+                  <Switch
+                    checked={watch("is_recommended") ?? false}
+                    onCheckedChange={(v) => setValue("is_recommended", v, { shouldDirty: true })}
+                  />
+                </div>
+              </SectionCard>
+
+              {plan?.tier && (
+                <SectionCard title="Bundles" description="Choose which single content type this plan unlocks.">
+                  {bundleType === null || !coursesLoaded || !unitsLoaded || !lessonsLoaded ? (
+                    <div className="space-y-3">
+                      <div className="flex gap-2">
+                        <Skeleton className="h-8 w-36" />
+                        <Skeleton className="h-8 w-40" />
+                      </div>
+                      <Skeleton className="h-8 w-52" />
+                    </div>
+                  ) : (
+                    <>
+                      <div className="space-y-1.5">
+                        <Label>Content Type <span className="text-destructive">*</span></Label>
+                        <p className="text-xs text-muted-foreground -mt-1">
+                          A bundle unlocks exactly one content type — pick which.
+                        </p>
+                        <div className="flex gap-2">
+                          {BUNDLE_TYPES.map(({ value, label, icon: Icon }) => (
+                            <Button
+                              key={value}
+                              type="button"
+                              size="sm"
+                              variant={bundleType === value ? "default" : "outline"}
+                              onClick={() => handleBundleTypeChange(value)}
+                              className={cn("flex-1")}
+                            >
+                              <Icon className="size-3.5 mr-1.5" />
+                              {label}
+                            </Button>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div className="border-t pt-5">
+                        {bundleType === "course" && (
+                          <CoursePicker
+                            subscription={plan.tier}
+                            selectedIds={selectedCourseIds}
+                            onChange={setSelectedCourseIds}
+                          />
+                        )}
+                        {bundleType === "unit" && (
+                          <UnitPicker
+                            subscription={plan.tier}
+                            selectedIds={selectedUnitIds}
+                            onChange={setSelectedUnitIds}
+                          />
+                        )}
+                        {bundleType === "lesson" && (
+                          <LessonPicker
+                            subscription={plan.tier}
+                            selectedIds={selectedLessonIds}
+                            onChange={setSelectedLessonIds}
+                          />
+                        )}
+                      </div>
+                    </>
+                  )}
+                </SectionCard>
+              )}
+
+              <div className="flex justify-end gap-3 pt-1">
+                <Button type="button" variant="outline" onClick={() => navigate("/admin/tiers/plans")} disabled={loading || impactLoading}>Cancel</Button>
+                <Button type="submit" disabled={loading || impactLoading}>
+                  {(loading || impactLoading) && <Spinner className="h-4 w-4 mr-2" />}
+                  Save Changes
+                </Button>
+              </div>
+            </form>
+          )}
+        </div>
+      </div>
+
+      {/* ── Duration Impact Warning Dialog ──────────────────────────────────── */}
+      <Dialog open={impactDialog} onOpenChange={(v) => { if (!v) { setImpactDialog(false); setPendingValues(null); } }}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-destructive">
+              <TriangleAlert className="h-5 w-5 shrink-0" />
+              Duration Change Warning
+            </DialogTitle>
+            <DialogDescription>
+              You are about to change the subscription duration for this plan.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-4 space-y-2 text-sm">
+            {impactCount > 0 ? (
+              <>
+                <p className="font-semibold text-destructive">
+                  {impactCount} active subscriber{impactCount !== 1 ? "s" : ""} will be affected.
+                </p>
+                <p className="text-muted-foreground">
+                  Their current expiry dates are based on the <span className="font-medium text-foreground">previous duration</span>.
+                  This change will only apply to <span className="font-medium text-foreground">new subscriptions</span> going forward — existing active subscribers will not have their expiry recalculated automatically.
+                </p>
+              </>
+            ) : (
+              <p className="text-muted-foreground">
+                No active subscribers are currently on this plan. The new duration will apply to all future subscriptions.
+              </p>
+            )}
+          </div>
+
+          <DialogFooter className="gap-2">
+            <Button
+              variant="outline"
+              onClick={() => { setImpactDialog(false); setPendingValues(null); }}
+              disabled={loading}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleConfirmSave}
+              disabled={loading}
+            >
+              {loading && <Spinner className="h-4 w-4 mr-2" />}
+              Confirm & Save
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {unsavedChangesDialog}
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/tiers/EditTierCategory.jsx b/apps/web/src/modules/admin/pages/tiers/EditTierCategory.jsx
new file mode 100644
index 0000000..260f2f9
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/tiers/EditTierCategory.jsx
@@ -0,0 +1,401 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+    ArrowLeft, House, ShieldCheck, ImagePlus, X, Check,
+    Shield, Star, Trophy, Medal, Award, BadgeCheck, Gem,
+    Crown, Zap, Flame, Sparkles, Rocket, Target, Hexagon, Layers, CircleDot,
+    Diamond, Swords, Mountain, Sun, Globe, Compass, Flag, GraduationCap,
+    Key, Fingerprint, Eye, Crosshair, Infinity, TrendingUp, Triangle, Octagon,
+    Circle, Disc, Feather, Snowflake, Leaf, TreePine, Gift, Heart,
+    HeartHandshake, Bird, BadgePlus, BadgePercent, Sigma, BookOpen,
+    Milestone, Navigation, Sunrise,
+} from "lucide-react";
+import * as LucideIcons from "lucide-react";
+import { TIER_COLOR_OPTIONS, getTierColor, shadeColor, getContrastText } from "@/utils/tierColors";
+import { Badge } from "@/components/ui/badge";
+
+export const BADGE_ICON_OPTIONS = [
+    // Prestige / rank
+    { name: "ShieldCheck",   icon: ShieldCheck },
+    { name: "Shield",        icon: Shield },
+    { name: "BadgeCheck",    icon: BadgeCheck },
+    { name: "BadgePlus",     icon: BadgePlus },
+    { name: "BadgePercent",  icon: BadgePercent },
+    { name: "Crown",         icon: Crown },
+    { name: "Star",          icon: Star },
+    { name: "Sparkles",      icon: Sparkles },
+    { name: "Diamond",       icon: Diamond },
+    { name: "Gem",           icon: Gem },
+    // Awards
+    { name: "Trophy",        icon: Trophy },
+    { name: "Medal",         icon: Medal },
+    { name: "Award",         icon: Award },
+    { name: "Gift",          icon: Gift },
+    { name: "Milestone",     icon: Milestone },
+    // Power / energy
+    { name: "Flame",         icon: Flame },
+    { name: "Zap",           icon: Zap },
+    { name: "Rocket",        icon: Rocket },
+    { name: "Sun",           icon: Sun },
+    { name: "Sunrise",       icon: Sunrise },
+    // Action / skill
+    { name: "Swords",        icon: Swords },
+    { name: "Target",        icon: Target },
+    { name: "Crosshair",     icon: Crosshair },
+    { name: "TrendingUp",    icon: TrendingUp },
+    { name: "Sigma",         icon: Sigma },
+    // Navigation / scope
+    { name: "Compass",       icon: Compass },
+    { name: "Navigation",    icon: Navigation },
+    { name: "Globe",         icon: Globe },
+    { name: "Mountain",      icon: Mountain },
+    { name: "Flag",          icon: Flag },
+    // Knowledge
+    { name: "GraduationCap", icon: GraduationCap },
+    { name: "BookOpen",      icon: BookOpen },
+    { name: "Key",           icon: Key },
+    { name: "Fingerprint",   icon: Fingerprint },
+    { name: "Eye",           icon: Eye },
+    // Nature
+    { name: "Leaf",          icon: Leaf },
+    { name: "TreePine",      icon: TreePine },
+    { name: "Snowflake",     icon: Snowflake },
+    { name: "Bird",          icon: Bird },
+    { name: "Feather",       icon: Feather },
+    // Heart
+    { name: "Heart",         icon: Heart },
+    { name: "HeartHandshake",icon: HeartHandshake },
+    { name: "Infinity",      icon: Infinity },
+    // Shapes
+    { name: "Hexagon",       icon: Hexagon },
+    { name: "Octagon",       icon: Octagon },
+    { name: "Triangle",      icon: Triangle },
+    { name: "Circle",        icon: Circle },
+    { name: "Disc",          icon: Disc },
+    { name: "CircleDot",     icon: CircleDot },
+    { name: "Layers",        icon: Layers },
+];
+import { Button }   from "@/components/ui/button";
+import { Input }    from "@/components/ui/input";
+import { Label }    from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner }  from "@/components/ui/spinner";
+import { Switch }   from "@/components/ui/switch";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { PageMeta }  from "@/contexts/MetadataContext";
+import { AssetPickerSheet } from "@/components/generic/AssetPickerSheet";
+import { AssetsProvider }   from "@/contexts/AdminAssetsContext";
+import {
+    AdminTierCategoriesProvider,
+    useAdminTierCategories,
+} from "@/contexts/AdminTierCategoriesContext";
+
+function SectionCard({ title, children }) {
+    return (
+        <div className="rounded-lg border bg-card p-5 space-y-4">
+            {title && <p className="text-sm font-semibold border-b pb-3">{title}</p>}
+            {children}
+        </div>
+    );
+}
+
+function FieldError({ message }) {
+    if (!message) return null;
+    return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+function BadgePicker({ currentAsset, selectedAsset, onSelect, onClear }) {
+    const [open, setOpen] = useState(false);
+    const display = selectedAsset ?? currentAsset;
+
+    return (
+        <div className="space-y-2">
+            <div className="flex items-center gap-4">
+                <div className="w-16 h-16 rounded-lg border bg-muted flex items-center justify-center overflow-hidden shrink-0">
+                    {display?.file_url ? (
+                        <img src={display.file_url} alt={display.display_name} className="w-12 h-12 object-contain" />
+                    ) : (
+                        <ShieldCheck className="h-6 w-6 text-muted-foreground" />
+                    )}
+                </div>
+                <div className="flex flex-col gap-1.5">
+                    <Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)}>
+                        <ImagePlus className="h-3.5 w-3.5 mr-1.5" />
+                        {display ? "Change image" : "Pick from files"}
+                    </Button>
+                    {display && (
+                        <Button type="button" variant="ghost" size="sm" className="text-destructive hover:text-destructive" onClick={onClear}>
+                            <X className="h-3.5 w-3.5 mr-1.5" />
+                            Remove
+                        </Button>
+                    )}
+                </div>
+            </div>
+            {display && <p className="text-xs text-muted-foreground truncate max-w-xs">{display.display_name}</p>}
+            <AssetPickerSheet open={open} onOpenChange={setOpen} fileType="image" onSelect={onSelect} />
+        </div>
+    );
+}
+
+function EditTierCategoryInner({ isAdd }) {
+    const navigate   = useNavigate();
+    const { id }     = useParams();
+    const { category, loading, fetchCategory, createCategory, updateCategory } = useAdminTierCategories();
+
+    const [slug,         setSlug]         = useState("");
+    const [name,         setName]         = useState("");
+    const [description,  setDescription]  = useState("");
+    const [rank,         setRank]         = useState(1);
+    const [color,        setColor]        = useState("purple");
+    const [badgeIcon,    setBadgeIcon]    = useState(null);
+    const [badgeLabel,   setBadgeLabel]   = useState("");
+    const [isActive,     setIsActive]     = useState(true);
+    const [selectedAsset, setSelectedAsset] = useState(null);
+    const [clearBadge,   setClearBadge]   = useState(false);
+    const [errors,       setErrors]       = useState({});
+
+    useEffect(() => {
+        if (!isAdd && id) fetchCategory(id);
+    }, [id, isAdd]);
+
+    useEffect(() => {
+        if (category && !isAdd) {
+            setSlug(category.slug ?? "");
+            setName(category.name ?? "");
+            setDescription(category.description ?? "");
+            setRank(category.rank ?? 0);
+            setColor(category.color ?? (category.is_default ? "green" : "purple"));
+            setBadgeIcon(category.badge_icon ?? null);
+            setBadgeLabel(category.badge_label ?? "");
+            setIsActive(category.is_active ?? true);
+            setSelectedAsset(null);
+            setClearBadge(false);
+        }
+    }, [category, isAdd]);
+
+    const validate = () => {
+        const e = {};
+        if (!name.trim()) e.name = "Name is required.";
+        if (isAdd && !slug.trim()) e.slug = "Slug is required.";
+        if (isAdd && !/^[a-z0-9_-]+$/.test(slug)) e.slug = "Slug must be lowercase letters, numbers, hyphens or underscores.";
+        setErrors(e);
+        return !Object.keys(e).length;
+    };
+
+    const handleSave = async () => {
+        if (!validate()) return;
+
+        const payload = {
+            name: name.trim(),
+            description: description.trim() || null,
+            rank: Number(rank),
+            color,
+            badge_icon:  badgeIcon  || null,
+            badge_label: badgeLabel.trim() || null,
+            is_active: isActive,
+        };
+
+        if (selectedAsset)      payload.badge_asset_id = selectedAsset.asset_id;
+        else if (clearBadge)    payload.badge_asset_id = null;
+
+        if (isAdd) {
+            payload.slug = slug.trim();
+            const result = await createCategory(payload);
+            if (result) navigate("/admin/tiers/categories");
+        } else {
+            const result = await updateCategory(id, payload);
+            if (result) navigate("/admin/tiers/categories");
+        }
+    };
+
+    const isLocked = !isAdd && category?.is_default;
+
+    return (
+        <section className="bg-muted/60 min-h-full">
+            <PageMeta title={isAdd ? "Add Subscription Category - STARR" : "Edit Subscription Category - STARR"} />
+            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
+                <div className="w-full max-w-2xl mx-auto">
+
+                    <div className="flex flex-col gap-2 mb-6">
+                        <AppBreadcrumb items={[
+                            { label: "Home",             icon: <House className="size-4" />, to: "/admin" },
+                            { label: "Subscription Categories",  to: "/admin/tiers/categories" },
+                            { label: isAdd ? "Add Category" : (category?.name ?? "Edit") },
+                        ]} />
+                    </div>
+
+                    <div className="flex items-center gap-3 mb-6">
+                        <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/admin/tiers/categories")}>
+                            <ArrowLeft className="h-4 w-4" />
+                        </Button>
+                        <div>
+                            <h1 className="text-xl font-semibold">{isAdd ? "Add Subscription Category" : "Edit Subscription Category"}</h1>
+                            <p className="text-sm text-muted-foreground">
+                                {isAdd ? "Define a new subscription level for the platform." : "Update this subscription category's details and badge."}
+                            </p>
+                        </div>
+                    </div>
+
+                    <div className="space-y-5">
+
+                        {/* Details */}
+                        <SectionCard title="Category Details">
+                            {isAdd && (
+                                <div className="space-y-1.5">
+                                    <Label htmlFor="slug">Slug <span className="text-destructive">*</span></Label>
+                                    <Input
+                                        id="slug"
+                                        value={slug}
+                                        onChange={(e) => setSlug(e.target.value.toLowerCase())}
+                                        placeholder="e.g. gold"
+                                    />
+                                    <p className="text-xs text-muted-foreground">Lowercase, no spaces. Cannot be changed after creation.</p>
+                                    <FieldError message={errors.slug} />
+                                </div>
+                            )}
+
+                            <div className="space-y-1.5">
+                                <Label htmlFor="name">Name <span className="text-destructive">*</span></Label>
+                                <Input id="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Gold" />
+                                <FieldError message={errors.name} />
+                            </div>
+
+                            <div className="space-y-1.5">
+                                <Label htmlFor="description">Description</Label>
+                                <Textarea id="description" value={description} onChange={(e) => setDescription(e.target.value)} rows={2} placeholder="Optional short description." />
+                            </div>
+
+                            <div className="space-y-1.5">
+                                <Label htmlFor="rank">Rank (ordering)</Label>
+                                <Input id="rank" type="number" min={isLocked ? 0 : 1} value={rank} onChange={(e) => setRank(e.target.value)} className="w-32" />
+                                <p className="text-xs text-muted-foreground">Must be greater than 0. Free is rank 0. Higher rank = higher access subscription.</p>
+                                {!isLocked && Number(rank) <= 0 && (
+                                    <p className="text-xs text-destructive">Rank must be at least 1 — rank 0 is reserved for the Free (default) subscription.</p>
+                                )}
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label>Color</Label>
+                                <div className="flex flex-wrap gap-2">
+                                    {TIER_COLOR_OPTIONS.map((opt) => {
+                                        const selected = color === opt.key;
+                                        const bg = selected ? shadeColor(opt.swatch, -20) : opt.swatch;
+                                        return (
+                                            <button
+                                                key={opt.key}
+                                                type="button"
+                                                title={opt.label}
+                                                onClick={() => setColor(opt.key)}
+                                                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all ${selected ? "scale-105 shadow-md" : "opacity-80 hover:opacity-100"}`}
+                                                style={{ backgroundColor: bg, color: getContrastText(bg, opt.key) }}
+                                            >
+                                                {selected && <Check className="size-3" />}
+                                                {opt.label}
+                                            </button>
+                                        );
+                                    })}
+                                </div>
+                                <div className="pt-1">
+                                    <Badge className={`${getTierColor(color).badge} text-xs`}>
+                                        {name || "Preview"}
+                                    </Badge>
+                                </div>
+                            </div>
+
+                            {!isLocked && (
+                                <div className="flex items-center gap-3">
+                                    <Switch id="is_active" checked={isActive} onCheckedChange={setIsActive} />
+                                    <Label htmlFor="is_active">Active</Label>
+                                </div>
+                            )}
+                        </SectionCard>
+
+                        {/* Badge */}
+                        <SectionCard title="Badge">
+                            <p className="text-xs text-muted-foreground -mt-1">
+                                Shown on the user's profile when they are in this tier. Upload an image or pick a Lucide icon — image takes priority if both are set.
+                            </p>
+
+                            {/* Lucide icon picker */}
+                            <div className="space-y-2">
+                                <Label>Icon <span className="text-muted-foreground text-xs">(optional)</span></Label>
+                                <div className="flex flex-wrap gap-2">
+                                    {/* None option */}
+                                    <button
+                                        type="button"
+                                        onClick={() => setBadgeIcon(null)}
+                                        className={`flex items-center justify-center w-9 h-9 rounded-lg border-2 text-xs text-muted-foreground transition-all ${!badgeIcon ? "border-foreground bg-muted scale-105" : "border-border hover:border-muted-foreground"}`}
+                                        title="No icon"
+                                    >
+                                        <X className="size-3.5" />
+                                    </button>
+                                    {BADGE_ICON_OPTIONS.map(({ name, icon: Icon }) => {
+                                        const selected = badgeIcon === name;
+                                        const cls = getTierColor(color).badge;
+                                        return (
+                                            <button
+                                                key={name}
+                                                type="button"
+                                                title={name}
+                                                onClick={() => setBadgeIcon(name)}
+                                                className={`flex items-center justify-center w-9 h-9 rounded-lg border-2 transition-all ${selected ? `${cls} border-foreground scale-105` : "border-border hover:border-muted-foreground"}`}
+                                            >
+                                                <Icon className="size-4" />
+                                            </button>
+                                        );
+                                    })}
+                                </div>
+                                {badgeIcon && (
+                                    <p className="text-xs text-muted-foreground">Selected: <span className="font-medium">{badgeIcon}</span></p>
+                                )}
+                            </div>
+
+                            {/* Image upload */}
+                            <div className="space-y-1.5">
+                                <Label>Image <span className="text-muted-foreground text-xs">(overrides icon)</span></Label>
+                                <BadgePicker
+                                    currentAsset={clearBadge ? null : (category?.badgeAsset ?? null)}
+                                    selectedAsset={selectedAsset}
+                                    onSelect={(a) => { setSelectedAsset(a); setClearBadge(false); }}
+                                    onClear={() => { setSelectedAsset(null); setClearBadge(true); }}
+                                />
+                            </div>
+
+                            <div className="space-y-1.5">
+                                <Label htmlFor="badge_label">Badge Label</Label>
+                                <Input
+                                    id="badge_label"
+                                    value={badgeLabel}
+                                    onChange={(e) => setBadgeLabel(e.target.value)}
+                                    placeholder="e.g. Premium Member"
+                                />
+                            </div>
+                        </SectionCard>
+
+                        {/* Actions */}
+                        <div className="flex justify-end gap-3">
+                            <Button type="button" variant="outline" onClick={() => navigate("/admin/tiers/categories")} disabled={loading}>Cancel</Button>
+                            <Button type="button" onClick={handleSave} disabled={loading}>
+                                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                                {isAdd ? "Create Category" : "Save Changes"}
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}
+
+function Wrapper({ isAdd }) {
+    return (
+        <AssetsProvider>
+            <AdminTierCategoriesProvider>
+                <EditTierCategoryInner isAdd={isAdd} />
+            </AdminTierCategoriesProvider>
+        </AssetsProvider>
+    );
+}
+
+export function AddTierCategory()  { return <Wrapper isAdd={true} />; }
+export function EditTierCategory() { return <Wrapper isAdd={false} />; }
diff --git a/apps/web/src/modules/admin/pages/tiers/PaymentList.jsx b/apps/web/src/modules/admin/pages/tiers/PaymentList.jsx
new file mode 100644
index 0000000..0e716d1
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/tiers/PaymentList.jsx
@@ -0,0 +1,44 @@
+import { useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+import { House } from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import PaymentsTable from "../../components/tiers/PaymentsTable";
+import { useTiers } from "@/contexts/AdminTiersContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+
+export default function PaymentList() {
+  const { fetchPayments } = useTiers();
+  const [searchParams] = useSearchParams();
+  const planId = searchParams.get("plan_id");
+
+  useEffect(() => {
+    fetchPayments({
+      filters: planId ? [{ id: "plan_id", value: planId }] : [],
+    });
+  }, [planId]);
+
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Subscriptions", to: "/admin/tiers/plans" },
+    { label: "Payments" },
+  ];
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title="Payments - STARR" />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+          {planId && (
+            <p className="text-sm text-muted-foreground">
+              Showing payments for Plan ID: <span className="font-medium">{planId}</span>
+            </p>
+          )}
+        </div>
+        <div className="w-full">
+          <PaymentsTable planId={planId} />
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/tiers/PaymentPolicy.jsx b/apps/web/src/modules/admin/pages/tiers/PaymentPolicy.jsx
new file mode 100644
index 0000000..794520e
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/tiers/PaymentPolicy.jsx
@@ -0,0 +1,444 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, House, Tag, ShieldCheck, Plus, Trash2, Loader2 } from "lucide-react";
+import { DateTimePicker } from "@/components/ui/date-time-picker";
+import { toast } from "sonner";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button }    from "@/components/ui/button";
+import { Input }     from "@/components/ui/input";
+import { Label }     from "@/components/ui/label";
+import { Switch }    from "@/components/ui/switch";
+import { Badge }     from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton }  from "@/components/ui/skeleton";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { PageMeta }  from "@/contexts/MetadataContext";
+import { useTiers }  from "@/contexts/AdminTiersContext";
+import api from "@/utils/api.util";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function SectionCard({ icon: Icon, title, description, children }) {
+  return (
+    <div className="rounded-lg border bg-card p-5 space-y-4">
+      <div>
+        <div className="flex items-center gap-2">
+          {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+          <h2 className="text-sm font-semibold">{title}</h2>
+        </div>
+        {description && <p className="text-xs text-muted-foreground mt-0.5 ml-6">{description}</p>}
+      </div>
+      <Separator />
+      {children}
+    </div>
+  );
+}
+
+const EMPTY_PROMO = {
+  code: "", type: "flat", value: "", currency: "USD",
+  max_discount: "", max_uses: "", expires_at: "", min_amount: "",
+};
+
+const WINDOW_UNITS = ["minutes", "hours", "days"];
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function PaymentPolicy() {
+  const navigate = useNavigate();
+  const { planId } = useParams();
+  const { fetchPlan, plan, loading: planLoading } = useTiers();
+
+  const [policy,        setPolicy]        = useState(null);
+  const [policyLoading, setPolicyLoading] = useState(true);
+  const [saving,        setSaving]        = useState(false);
+
+  // ── Refund policy fields
+  const [refundAllowed,       setRefundAllowed]       = useState(true);
+  const [refundWindowValue,   setRefundWindowValue]   = useState(5);
+  const [refundWindowUnit,    setRefundWindowUnit]    = useState("minutes");
+  const [refundReasonReqd,    setRefundReasonReqd]    = useState(false);
+
+  // ── Promo rules
+  const [promoRules,      setPromoRules]      = useState([]);
+  const [addForm,         setAddForm]         = useState(EMPTY_PROMO);
+  const [showAdd,         setShowAdd]         = useState(false);
+
+  // ─── Load ────────────────────────────────────────────────────────────────────
+
+  useEffect(() => {
+    fetchPlan(planId);
+    setPolicyLoading(true);
+    api.get(`/admin/tier-policies/plans/${planId}/payment-policy`)
+      .then(({ data }) => {
+        const p = data.data;
+        if (p) {
+          setPolicy(p);
+          const rp = p.refund_policy ?? {};
+          setRefundAllowed(rp.allowed ?? true);
+          setRefundWindowValue(rp.window_value ?? 5);
+          setRefundWindowUnit(rp.window_unit ?? "minutes");
+          setRefundReasonReqd(rp.reason_required ?? false);
+          setPromoRules(p.promo_rules ?? []);
+        }
+      })
+      .catch(() => {})
+      .finally(() => setPolicyLoading(false));
+
+  }, [planId]);
+
+  // ─── Save ────────────────────────────────────────────────────────────────────
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await api.put(`/admin/tier-policies/plans/${planId}/payment-policy`, {
+        refund_policy: {
+          allowed:         refundAllowed,
+          window_value:    Number(refundWindowValue),
+          window_unit:     refundWindowUnit,
+          reason_required: refundReasonReqd,
+        },
+        promo_rules: promoRules,
+      });
+      toast("Payment policy saved.");
+      navigate("/admin/tiers/plans");
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not save payment policy.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // ─── Promo helpers ────────────────────────────────────────────────────────────
+
+  const handleAddPromo = () => {
+    const code = addForm.code.trim().toUpperCase();
+    if (!code) { toast("Code is required."); return; }
+    if (!addForm.value || Number(addForm.value) <= 0) { toast("Value must be greater than 0."); return; }
+    if (promoRules.some((r) => r.code.toUpperCase() === code)) {
+      toast("A rule with this code already exists."); return;
+    }
+
+    const rule = {
+      code,
+      type:  addForm.type,
+      value: Number(addForm.value),
+      ...(addForm.type === "flat"    && addForm.currency   ? { currency:     addForm.currency.trim().toUpperCase() } : {}),
+      ...(addForm.type === "percent" && addForm.max_discount ? { max_discount: Number(addForm.max_discount) } : {}),
+      ...(addForm.max_uses  ? { max_uses:  Number(addForm.max_uses)  } : {}),
+      ...(addForm.expires_at ? { expires_at: addForm.expires_at }       : {}),
+      ...(addForm.min_amount ? { min_amount: Number(addForm.min_amount) } : {}),
+    };
+
+    setPromoRules((prev) => [...prev, rule]);
+    setAddForm(EMPTY_PROMO);
+    setShowAdd(false);
+  };
+
+  const handleRemovePromo = (code) =>
+    setPromoRules((prev) => prev.filter((r) => r.code !== code));
+
+  // ─── Render ───────────────────────────────────────────────────────────────────
+
+  const isLoading = planLoading || policyLoading;
+
+  return (
+    <section className="bg-muted/60 min-h-full">
+      <PageMeta title={plan ? `Payment Policy — ${plan.label} - STARR` : "Payment Policy - STARR"} />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
+        <div className="w-full max-w-2xl mx-auto">
+
+          <div className="flex flex-col gap-2 mb-6">
+            <AppBreadcrumb items={[
+              { label: "Home",  icon: <House className="size-4" />, to: "/admin" },
+              { label: "Plans", to: "/admin/tiers/plans" },
+              { label: plan?.label ?? `Plan #${planId}`, to: `/admin/tiers/plans/${planId}/view` },
+              { label: "Payment Policy" },
+            ]} />
+          </div>
+
+          <div className="flex items-center gap-3 mb-6">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate(`/admin/tiers/plans/${planId}/view`)}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Payment Policy</h1>
+              <p className="text-sm text-muted-foreground capitalize">
+                {plan?.tier} — {plan?.label}
+              </p>
+            </div>
+          </div>
+
+          {isLoading ? (
+            <div className="space-y-4">
+              {[...Array(3)].map((_, i) => <Skeleton key={i} className="h-32 w-full" />)}
+            </div>
+          ) : (
+            <div className="space-y-5">
+
+              {/* ── Refund Policy ─────────────────────────────────────────── */}
+              <SectionCard
+                icon={ShieldCheck}
+                title="Refund Policy"
+                description="Controls whether and how long after purchase a user can request a refund."
+              >
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between rounded-lg border p-4">
+                    <div>
+                      <p className="text-sm font-medium">Allow Refunds</p>
+                      <p className="text-xs text-muted-foreground">Users can request a refund within the window below.</p>
+                    </div>
+                    <Switch checked={refundAllowed} onCheckedChange={setRefundAllowed} />
+                  </div>
+
+                  {refundAllowed && (
+                    <>
+                      <div className="space-y-1.5">
+                        <Label>Refund Window</Label>
+                        <div className="flex gap-2">
+                          <Input
+                            type="number"
+                            min={1}
+                            className="w-28"
+                            value={refundWindowValue}
+                            onChange={(e) => setRefundWindowValue(e.target.value)}
+                            placeholder="5"
+                          />
+                          <Select value={refundWindowUnit} onValueChange={setRefundWindowUnit}>
+                            <SelectTrigger className="w-36">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {WINDOW_UNITS.map((u) => (
+                                <SelectItem key={u} value={u} className="capitalize">{u}</SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+                        <p className="text-xs text-muted-foreground">
+                          Users have {refundWindowValue || "?"} {refundWindowUnit} from payment to request a refund.
+                        </p>
+                      </div>
+
+                      <div className="flex items-center justify-between rounded-lg border p-4">
+                        <div>
+                          <p className="text-sm font-medium">Require Reason</p>
+                          <p className="text-xs text-muted-foreground">User must provide a reason when requesting a refund.</p>
+                        </div>
+                        <Switch checked={refundReasonReqd} onCheckedChange={setRefundReasonReqd} />
+                      </div>
+                    </>
+                  )}
+                </div>
+              </SectionCard>
+
+              {/* ── Promo Codes ───────────────────────────────────────────── */}
+              <SectionCard
+                icon={Tag}
+                title="Promo Codes"
+                description="Define discount codes users can apply at checkout. Flat reduces price by a fixed amount; percent reduces by a percentage."
+              >
+                {/* Existing rules */}
+                {promoRules.length > 0 ? (
+                  <div className="space-y-2">
+                    {promoRules.map((rule) => (
+                      <div
+                        key={rule.code}
+                        className="flex items-center justify-between gap-3 rounded-lg border bg-muted/30 px-4 py-3"
+                      >
+                        <div className="flex items-center gap-3 min-w-0 flex-1">
+                          <code className="text-sm font-semibold tracking-wide">{rule.code}</code>
+                          <Badge variant="outline" className="text-xs capitalize shrink-0">
+                            {rule.type}
+                          </Badge>
+                          <span className="text-sm text-muted-foreground shrink-0">
+                            {rule.type === "flat"
+                              ? `${rule.currency ?? "USD"} ${Number(rule.value).toFixed(2)} off`
+                              : `${rule.value}% off${rule.max_discount ? ` (max ${rule.max_discount})` : ""}`
+                            }
+                          </span>
+                          {rule.max_uses && (
+                            <span className="text-xs text-muted-foreground shrink-0">
+                              · {rule.max_uses} uses max
+                            </span>
+                          )}
+                          {rule.expires_at && (
+                            <span className="text-xs text-muted-foreground shrink-0">
+                              · expires {new Date(rule.expires_at).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" })}
+                            </span>
+                          )}
+                        </div>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="text-destructive hover:text-destructive shrink-0"
+                          onClick={() => handleRemovePromo(rule.code)}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-2 rounded-lg border border-dashed p-4 text-sm text-muted-foreground">
+                    <Tag className="size-4 shrink-0" />
+                    No promo codes configured for this plan.
+                  </div>
+                )}
+
+                {/* Add form */}
+                {showAdd ? (
+                  <div className="rounded-lg border bg-muted/20 p-4 space-y-4">
+                    <p className="text-sm font-medium">New Promo Code</p>
+
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="space-y-1.5">
+                        <Label>Code <span className="text-destructive">*</span></Label>
+                        <Input
+                          placeholder="e.g. SAVE10"
+                          value={addForm.code}
+                          onChange={(e) => setAddForm((f) => ({ ...f, code: e.target.value.toUpperCase() }))}
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label>Type <span className="text-destructive">*</span></Label>
+                        <Select value={addForm.type} onValueChange={(v) => setAddForm((f) => ({ ...f, type: v }))}>
+                          <SelectTrigger><SelectValue /></SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="flat">Flat (fixed amount off)</SelectItem>
+                            <SelectItem value="percent">Percent (% off)</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="space-y-1.5">
+                        <Label>
+                          {addForm.type === "flat" ? "Amount Off" : "Percent Off"}{" "}
+                          <span className="text-destructive">*</span>
+                        </Label>
+                        <Input
+                          type="number"
+                          step="0.01"
+                          min="0.01"
+                          placeholder={addForm.type === "flat" ? "10.00" : "20"}
+                          value={addForm.value}
+                          onChange={(e) => setAddForm((f) => ({ ...f, value: e.target.value }))}
+                        />
+                      </div>
+
+                      {addForm.type === "flat" && (
+                        <div className="space-y-1.5">
+                          <Label>Currency</Label>
+                          <Select
+                            value={addForm.currency}
+                            onValueChange={(v) => setAddForm((f) => ({ ...f, currency: v }))}
+                          >
+                            <SelectTrigger><SelectValue /></SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value={plan?.currency ?? "USD"}>
+                                {plan?.currency ?? "USD"} — Base price
+                              </SelectItem>
+                              {localizedPrices.map((p) => (
+                                <SelectItem key={p.currency} value={p.currency}>
+                                  {p.currency} — Localized price
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          {localizedPrices.length === 0 && (
+                            <p className="text-xs text-muted-foreground">
+                              No localized prices set — only base currency available.
+                            </p>
+                          )}
+                        </div>
+                      )}
+
+                      {addForm.type === "percent" && (
+                        <div className="space-y-1.5">
+                          <Label>Max Discount Cap</Label>
+                          <Input
+                            type="number"
+                            step="0.01"
+                            placeholder="50.00 (optional)"
+                            value={addForm.max_discount}
+                            onChange={(e) => setAddForm((f) => ({ ...f, max_discount: e.target.value }))}
+                          />
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="space-y-1.5">
+                        <Label>Max Uses</Label>
+                        <Input
+                          type="number"
+                          min="1"
+                          placeholder="Unlimited"
+                          value={addForm.max_uses}
+                          onChange={(e) => setAddForm((f) => ({ ...f, max_uses: e.target.value }))}
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label>Expires At</Label>
+                        <DateTimePicker
+                          value={addForm.expires_at || null}
+                          onChange={(iso) => setAddForm((f) => ({ ...f, expires_at: iso ?? "" }))}
+                          placeholder="No expiry"
+                        />
+                      </div>
+                    </div>
+
+                    <div className="space-y-1.5">
+                      <Label>Minimum Purchase Amount</Label>
+                      <Input
+                        type="number"
+                        step="0.01"
+                        placeholder="No minimum"
+                        value={addForm.min_amount}
+                        onChange={(e) => setAddForm((f) => ({ ...f, min_amount: e.target.value }))}
+                      />
+                    </div>
+
+                    <div className="flex gap-2 justify-end pt-1">
+                      <Button variant="outline" size="sm" onClick={() => { setShowAdd(false); setAddForm(EMPTY_PROMO); }}>
+                        Cancel
+                      </Button>
+                      <Button size="sm" onClick={handleAddPromo}>
+                        <Plus className="h-4 w-4 mr-1" /> Add Code
+                      </Button>
+                    </div>
+                  </div>
+                ) : (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      setAddForm((f) => ({ ...f, currency: plan?.currency ?? "USD" }));
+                      setShowAdd(true);
+                    }}
+                  >
+                    <Plus className="h-4 w-4 mr-1" /> Add Promo Code
+                  </Button>
+                )}
+              </SectionCard>
+
+              {/* ── Save ─────────────────────────────────────────────────── */}
+              <div className="flex justify-end gap-3 pt-1">
+                <Button variant="outline" onClick={() => navigate(`/admin/tiers/plans/${planId}/view`)} disabled={saving}>
+                  Cancel
+                </Button>
+                <Button onClick={handleSave} disabled={saving}>
+                  {saving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+                  Save Policy
+                </Button>
+              </div>
+
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/tiers/PlanList.jsx b/apps/web/src/modules/admin/pages/tiers/PlanList.jsx
new file mode 100644
index 0000000..ea91e7b
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/tiers/PlanList.jsx
@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+import { House, CreditCard, Tag, ShieldCheck, Globe } from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import TierPlansTable from "../../components/tiers/TierPlansTable";
+import { useTiers } from "@/contexts/AdminTiersContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import { Badge } from "@/components/ui/badge";
+
+export default function PlanList() {
+  const { fetchPlans } = useTiers();
+  useEffect(() => { fetchPlans(); }, []);
+
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Subscriptions", to: "/admin/tiers/plans" },
+    { label: "Plans" },
+  ];
+
+  return (
+    <section className="bg-muted h-full">
+      <PageMeta title="Plans - STARR" />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+        <div className="w-full">
+
+
+
+          <TierPlansTable />
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/tiers/SystemBadges.jsx b/apps/web/src/modules/admin/pages/tiers/SystemBadges.jsx
new file mode 100644
index 0000000..ac3b51b
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/tiers/SystemBadges.jsx
@@ -0,0 +1,222 @@
+import { useEffect, useState } from "react";
+import { House, ShieldCheck, ImagePlus, X } from "lucide-react";
+import { Button }    from "@/components/ui/button";
+import { Input }     from "@/components/ui/input";
+import { Textarea }  from "@/components/ui/textarea";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton }  from "@/components/ui/skeleton";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { PageMeta }  from "@/contexts/MetadataContext";
+import { AdminTierPoliciesProvider, useAdminTierPolicies } from "@/contexts/AdminTierPoliciesContext";
+import { AssetPickerSheet } from "@/components/generic/AssetPickerSheet";
+import { AssetsProvider }   from "@/contexts/AdminAssetsContext";
+
+// ─── Badge editor card for a single system badge ──────────────────────────────
+
+function SystemBadgeCard({ badge: initialBadge }) {
+  const { saveSystemBadge, loading } = useAdminTierPolicies();
+
+  const [badge,         setBadge]         = useState(initialBadge);
+  // selectedAsset: newly chosen from picker (not yet saved)
+  const [selectedAsset, setSelectedAsset] = useState(null);
+  const [clearAsset,    setClearAsset]    = useState(false);
+  const [pickerOpen,    setPickerOpen]    = useState(false);
+
+  useEffect(() => {
+    setBadge(initialBadge);
+    setSelectedAsset(null);
+    setClearAsset(false);
+  }, [initialBadge]);
+
+  const currentAsset = clearAsset ? null : (badge.asset ?? null);
+  const displayAsset = selectedAsset ?? currentAsset;
+
+  const handleSelect = (asset) => {
+    setSelectedAsset(asset);
+    setClearAsset(false);
+  };
+
+  const handleClear = () => {
+    setSelectedAsset(null);
+    setClearAsset(true);
+  };
+
+  const handleSave = async () => {
+    const payload = {
+      label:        badge.label        ?? "",
+      description:  badge.description  ?? "",
+      information:  badge.information  ?? "",
+      active_from:  badge.active_from  ?? null,
+      active_until: badge.active_until ?? null,
+    };
+
+    if (selectedAsset) {
+      payload.asset_id = selectedAsset.asset_id;
+    } else if (clearAsset) {
+      payload.asset_id = null;
+    }
+
+    const saved = await saveSystemBadge(badge.key, payload);
+    if (saved) {
+      setBadge(saved);
+      setSelectedAsset(null);
+      setClearAsset(false);
+    }
+  };
+
+  return (
+    <div className="rounded-lg border bg-card p-5 space-y-4">
+      <div className="flex items-center gap-2">
+        <ShieldCheck className="h-4 w-4 text-muted-foreground" />
+        <h2 className="text-sm font-semibold capitalize">{badge.label || badge.key}</h2>
+        <span className="ml-auto text-xs text-muted-foreground font-mono">{badge.key}</span>
+      </div>
+      <Separator />
+
+      {/* ── Image picker ── */}
+      <div className="space-y-2">
+        <div className="flex items-center gap-4">
+          {displayAsset ? (
+            <div className="w-16 h-16 rounded-lg border bg-muted flex items-center justify-center overflow-hidden">
+              <img src={displayAsset.file_url} alt={displayAsset.display_name} className="w-12 h-12 object-contain" />
+            </div>
+          ) : (
+            <div className="w-16 h-16 rounded-lg border bg-muted flex items-center justify-center text-muted-foreground">
+              <ShieldCheck className="h-6 w-6" />
+            </div>
+          )}
+          <div className="flex flex-col gap-1.5">
+            <Button type="button" variant="outline" size="sm" onClick={() => setPickerOpen(true)}>
+              <ImagePlus className="h-3.5 w-3.5 mr-1.5" />
+              {displayAsset ? "Change image" : "Pick from files"}
+            </Button>
+            {displayAsset && (
+              <Button type="button" variant="ghost" size="sm" className="text-destructive hover:text-destructive" onClick={handleClear}>
+                <X className="h-3.5 w-3.5 mr-1.5" />
+                Remove
+              </Button>
+            )}
+          </div>
+        </div>
+        {displayAsset && (
+          <p className="text-xs text-muted-foreground truncate max-w-xs">{displayAsset.display_name}</p>
+        )}
+        <AssetPickerSheet
+          open={pickerOpen}
+          onOpenChange={setPickerOpen}
+          fileType="image"
+          onSelect={handleSelect}
+        />
+      </div>
+
+      {/* ── Label / Description / Information ── */}
+      <div className="grid grid-cols-1 gap-3">
+        <div>
+          <label className="text-xs text-muted-foreground uppercase tracking-wide block mb-1">Label</label>
+          <Input value={badge.label ?? ""} onChange={(e) => setBadge((p) => ({ ...p, label: e.target.value }))} />
+        </div>
+        <div>
+          <label className="text-xs text-muted-foreground uppercase tracking-wide block mb-1">Description</label>
+          <Input value={badge.description ?? ""} onChange={(e) => setBadge((p) => ({ ...p, description: e.target.value }))} />
+        </div>
+        <div>
+          <label className="text-xs text-muted-foreground uppercase tracking-wide block mb-1">Information</label>
+          <Textarea value={badge.information ?? ""} onChange={(e) => setBadge((p) => ({ ...p, information: e.target.value }))} rows={2} />
+        </div>
+      </div>
+
+      {/* ── Active window ── */}
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="text-xs text-muted-foreground uppercase tracking-wide block mb-1">Active From</label>
+          <Input
+            type="date"
+            value={badge.active_from ?? ""}
+            onChange={(e) => setBadge((p) => ({ ...p, active_from: e.target.value || null }))}
+          />
+        </div>
+        <div>
+          <label className="text-xs text-muted-foreground uppercase tracking-wide block mb-1">Active Until</label>
+          <Input
+            type="date"
+            value={badge.active_until ?? ""}
+            onChange={(e) => setBadge((p) => ({ ...p, active_until: e.target.value || null }))}
+          />
+        </div>
+      </div>
+
+      <div className="flex justify-end">
+        <Button size="sm" onClick={handleSave} disabled={loading}>
+          {loading ? "Saving…" : "Save Badge"}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+// ─── Always show early_access even before DB row exists ───────────────────────
+
+const DEFAULT_SYSTEM_BADGES = [
+  { key: "early_access", label: "Early Access", description: "", information: "", asset: null, active_from: null, active_until: null },
+];
+
+// ─── Inner page ───────────────────────────────────────────────────────────────
+
+function SystemBadgesInner() {
+  const { fetchSystemBadges, systemBadges, loading } = useAdminTierPolicies();
+
+  useEffect(() => { fetchSystemBadges(); }, []);
+
+  const merged = DEFAULT_SYSTEM_BADGES.map((def) => {
+    const fetched = systemBadges.find((b) => b.key === def.key);
+    return fetched ?? def;
+  });
+
+  const breadcrumbItems = [
+    { label: "Home",  icon: <House className="size-4" />, to: "/admin" },
+    { label: "Plans", to: "/admin/tiers/plans" },
+    { label: "System Badges" },
+  ];
+
+  return (
+    <section className="bg-muted/60 min-h-full">
+      <PageMeta title="System Badges - STARR" />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
+        <div className="w-full max-w-2xl mx-auto">
+
+          <div className="flex flex-col gap-2 mb-6">
+            <AppBreadcrumb items={breadcrumbItems} />
+          </div>
+
+          <div className="mb-6">
+            <h1 className="text-xl font-semibold">System Badges</h1>
+            <p className="text-sm text-muted-foreground">Special badges awarded outside of subscription plans.</p>
+          </div>
+
+          {loading && systemBadges.length === 0 ? (
+            <div className="space-y-4">
+              {[1, 2].map((i) => <Skeleton key={i} className="h-64 w-full rounded-lg" />)}
+            </div>
+          ) : (
+            <div className="space-y-5">
+              {merged.map((badge) => (
+                <SystemBadgeCard key={badge.key} badge={badge} />
+              ))}
+            </div>
+          )}
+
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default function SystemBadges() {
+  return (
+    <AssetsProvider>
+      <AdminTierPoliciesProvider>
+        <SystemBadgesInner />
+      </AdminTierPoliciesProvider>
+    </AssetsProvider>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/tiers/TierCategories.jsx b/apps/web/src/modules/admin/pages/tiers/TierCategories.jsx
new file mode 100644
index 0000000..2f93fd2
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/tiers/TierCategories.jsx
@@ -0,0 +1,176 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { House, Plus, Pencil, Trash2, ShieldCheck, Lock } from "lucide-react";
+import { Button }    from "@/components/ui/button";
+import { Badge }     from "@/components/ui/badge";
+import { Spinner }   from "@/components/ui/spinner";
+import { Separator } from "@/components/ui/separator";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { PageMeta }  from "@/contexts/MetadataContext";
+import {
+    AdminTierCategoriesProvider,
+    useAdminTierCategories,
+} from "@/contexts/AdminTierCategoriesContext";
+
+function CategoryCard({ cat, onEdit, onDelete }) {
+    const badge = cat.badgeAsset;
+    return (
+        <div className="rounded-lg border bg-card p-5 flex items-start justify-between gap-4">
+            <div className="flex items-start gap-4">
+                <div className="w-12 h-12 rounded-lg border bg-muted flex items-center justify-center shrink-0 overflow-hidden">
+                    {badge?.file_url ? (
+                        <img src={badge.file_url} alt={badge.display_name} className="w-10 h-10 object-contain" />
+                    ) : (
+                        <ShieldCheck className="h-5 w-5 text-muted-foreground" />
+                    )}
+                </div>
+                <div className="min-w-0">
+                    <div className="flex items-center gap-2 flex-wrap">
+                        <p className="text-sm font-semibold">{cat.name}</p>
+                        <code className="text-[10px] bg-muted px-1.5 py-0.5 rounded text-muted-foreground">{cat.slug}</code>
+                        <Badge variant="outline" className="text-[10px]">rank {cat.rank}</Badge>
+                        {!cat.is_active && <Badge variant="secondary">Inactive</Badge>}
+                        {cat.is_default && (
+                            <Badge variant="secondary" className="gap-1">
+                                <Lock className="h-2.5 w-2.5" /> Default
+                            </Badge>
+                        )}
+                    </div>
+                    {cat.description && (
+                        <p className="text-xs text-muted-foreground mt-1 line-clamp-2">{cat.description}</p>
+                    )}
+                    {cat.badge_label && (
+                        <p className="text-xs text-muted-foreground mt-0.5">
+                            Badge label: <span className="font-medium text-foreground">{cat.badge_label}</span>
+                        </p>
+                    )}
+                </div>
+            </div>
+            <div className="flex items-center gap-1 shrink-0">
+                <Button type="button" variant="ghost" size="icon" onClick={() => onEdit(cat)}>
+                    <Pencil className="h-4 w-4" />
+                </Button>
+                {!cat.is_default && (
+                    <Button type="button" variant="ghost" size="icon" onClick={() => onDelete(cat)}>
+                        <Trash2 className="h-4 w-4 text-destructive" />
+                    </Button>
+                )}
+            </div>
+        </div>
+    );
+}
+
+function TierCategoriesInner() {
+    const navigate = useNavigate();
+    const { categories, loading, fetchCategories, deleteCategory } = useAdminTierCategories();
+
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const [deleting,     setDeleting]     = useState(false);
+
+    useEffect(() => { fetchCategories(); }, []);
+
+    const confirmDelete = async () => {
+        if (!deleteTarget) return;
+        setDeleting(true);
+        await deleteCategory(deleteTarget.tier_category_id);
+        setDeleting(false);
+        setDeleteTarget(null);
+    };
+
+    return (
+        <section className="bg-muted/60 min-h-full">
+            <PageMeta title="Subscription Categories - STARR" />
+            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
+                <div className="w-full max-w-2xl mx-auto">
+
+                    <div className="flex flex-col gap-2 mb-6">
+                        <AppBreadcrumb items={[
+                            { label: "Home",  icon: <House className="size-4" />, to: "/admin" },
+                            { label: "Subscriptions", to: "/admin/tiers/plans" },
+                            { label: "Subscription Categories" },
+                        ]} />
+                    </div>
+
+                    <div className="flex items-center justify-between mb-6">
+                        <div>
+                            <h1 className="text-xl font-semibold">Subscription Categories</h1>
+                            <p className="text-sm text-muted-foreground mt-0.5">
+                                Define the tier levels available on the platform. Plans are built under each category.
+                            </p>
+                        </div>
+                        <Button size="sm" onClick={() => navigate("/admin/tiers/categories/add")}>
+                            <Plus className="h-4 w-4 mr-2" />
+                            Add Category
+                        </Button>
+                    </div>
+
+                    <div className="rounded-lg border bg-card p-4 flex items-start gap-3 mb-5">
+                        <Lock className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
+                        <p className="text-xs text-muted-foreground">
+                            The <strong>Free</strong> category is the platform default and cannot be deleted or deactivated.
+                            All new users start here automatically. You can still configure its badge.
+                        </p>
+                    </div>
+
+                    <Separator className="mb-5" />
+
+                    {loading && !categories.length ? (
+                        <div className="flex justify-center py-12"><Spinner className="h-5 w-5" /></div>
+                    ) : !categories.length ? (
+                        <p className="text-sm text-muted-foreground text-center py-12">No subscription categories found.</p>
+                    ) : (
+                        <div className="space-y-3">
+                            {categories.map((cat) => (
+                                <CategoryCard
+                                    key={cat.tier_category_id}
+                                    cat={cat}
+                                    onEdit={(c) => navigate(`/admin/tiers/categories/${c.tier_category_id}/edit`)}
+                                    onDelete={(c) => setDeleteTarget(c)}
+                                />
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* Delete confirmation dialog */}
+            <Dialog open={!!deleteTarget} onOpenChange={(open) => { if (!open) setDeleteTarget(null); }}>
+                <DialogContent className="sm:max-w-sm">
+                    <DialogHeader>
+                        <DialogTitle>Delete Subscription Category</DialogTitle>
+                        <DialogDescription>
+                            Are you sure you want to delete{" "}
+                            <span className="font-semibold text-foreground">{deleteTarget?.name}</span>?
+                            This action cannot be undone. Any plans linked to this category must be reassigned first.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter>
+                        <Button variant="outline" onClick={() => setDeleteTarget(null)} disabled={deleting}>
+                            Cancel
+                        </Button>
+                        <Button variant="destructive" onClick={confirmDelete} disabled={deleting}>
+                            {deleting && <Spinner className="h-4 w-4 mr-2" />}
+                            Delete
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </section>
+    );
+}
+
+export default function TierCategories() {
+    return (
+        <AdminTierCategoriesProvider>
+            <TierCategoriesInner />
+        </AdminTierCategoriesProvider>
+    );
+}
diff --git a/apps/web/src/modules/admin/pages/tiers/UserTierList.jsx b/apps/web/src/modules/admin/pages/tiers/UserTierList.jsx
new file mode 100644
index 0000000..bb603a9
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/tiers/UserTierList.jsx
@@ -0,0 +1,295 @@
+import { useEffect, useState, useMemo } from "react";
+import api from "@/utils/api.util";
+import { useParams, useNavigate } from "react-router-dom";
+import { ArrowLeft, House, ShieldPlus, ShieldOff, BadgeCheck } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Separator } from "@/components/ui/separator";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose,
+} from "@/components/ui/dialog";
+import {
+  AlertDialog, AlertDialogAction, AlertDialogCancel,
+  AlertDialogContent, AlertDialogDescription,
+  AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Spinner } from "@/components/ui/spinner";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { useTiers } from "@/contexts/AdminTiersContext";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { PageMeta } from "@/contexts/MetadataContext";
+
+const STATUS_BADGE = { active: "default", expired: "secondary", revoked: "outline" };
+
+function InfoRow({ label, children }) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <span className="text-xs text-muted-foreground uppercase tracking-wide">{label}</span>
+      <span className="text-sm font-medium">{children ?? <span className="text-muted-foreground italic">—</span>}</span>
+    </div>
+  );
+}
+
+function SectionCard({ icon: Icon, title, children }) {
+  return (
+    <div className="rounded-lg border bg-card p-5 space-y-4">
+      <div className="flex items-center gap-2">
+        {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+        <h2 className="text-sm font-semibold">{title}</h2>
+      </div>
+      <Separator />
+      {children}
+    </div>
+  );
+}
+
+export default function UserTierList() {
+  const { userId } = useParams();
+  const navigate   = useNavigate();
+  const { userTiers, plans, loading, fetchUserTiers, fetchPlans, grantTier, revokeTier } = useTiers();
+  const { fmtDate, fmtDateTime } = useDateFormat();
+
+  const [grantOpen,    setGrantOpen]    = useState(false);
+  const [revokeTarget, setRevokeTarget] = useState(null);
+  const [grantForm,    setGrantForm]    = useState({ tier: "", plan_id: "", notes: "" });
+  const [submitting,   setSubmitting]   = useState(false);
+  const [tierCategories, setTierCategories] = useState([]);
+
+  const tierMap = useMemo(() => {
+    const m = {};
+    tierCategories.forEach((c) => { m[c.slug] = c; });
+    return m;
+  }, [tierCategories]);
+
+  const grantableCategories = useMemo(
+    () => tierCategories.filter((c) => !c.is_default && c.is_active),
+    [tierCategories]
+  );
+
+  useEffect(() => {
+    fetchUserTiers(userId);
+    fetchPlans();
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => {
+        const all = data.data ?? [];
+        setTierCategories(all);
+        const grantable = all.filter((c) => !c.is_default && c.is_active);
+        if (grantable.length > 0) setGrantForm((p) => ({ ...p, tier: grantable[0].slug }));
+      })
+      .catch(() => {});
+  }, [userId]);
+
+  const activePlans   = plans.filter((p) => p.is_active);
+  const filteredPlans = activePlans.filter((p) => p.tier === grantForm.tier);
+
+  const tierBadge = (slug) => {
+    const { cls, label } = resolveTierBadge(slug, tierMap);
+    return <Badge className={`${cls} capitalize`}>{label}</Badge>;
+  };
+
+  const handleGrant = async () => {
+    if (!grantForm.plan_id) return;
+    setSubmitting(true);
+    const ok = await grantTier({ user_id: Number(userId), ...grantForm, plan_id: Number(grantForm.plan_id) });
+    setSubmitting(false);
+    if (ok) { setGrantOpen(false); fetchUserTiers(userId); }
+  };
+
+  const handleRevoke = async () => {
+    setSubmitting(true);
+    const ok = await revokeTier(revokeTarget.tier_id);
+    setSubmitting(false);
+    if (ok) { setRevokeTarget(null); fetchUserTiers(userId); }
+  };
+
+  const activeTier = userTiers.find((t) => t.status === "active");
+
+  return (
+    <section className="bg-muted/60 min-h-full">
+      <PageMeta title="User Subscription Management - STARR" />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
+        <div className="w-full max-w-2xl mx-auto">
+
+          <div className="flex flex-col gap-2 mb-6">
+            <AppBreadcrumb items={[
+              { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+              { label: "Users", to: "/admin/users" },
+              { label: `User #${userId}`, to: `/admin/users/view/${userId}` },
+              { label: "Subscriptions" },
+            ]} />
+          </div>
+
+          <div className="flex items-start justify-between gap-3 mb-6">
+            <div className="flex items-center gap-3">
+              <Button type="button" variant="ghost" size="icon" onClick={() => navigate(`/admin/users/view/${userId}`)}>
+                <ArrowLeft className="h-4 w-4" />
+              </Button>
+              <div>
+                <h1 className="text-xl font-semibold">User Subscriptions</h1>
+                <p className="text-sm text-muted-foreground">Tier history for User #{userId}</p>
+              </div>
+            </div>
+            <Button size="sm" onClick={() => setGrantOpen(true)}>
+              <ShieldPlus className="h-4 w-4 mr-2" />
+              Grant Tier
+            </Button>
+          </div>
+
+          {/* Active Tier Card */}
+          {activeTier && (
+            <div className="mb-5 rounded-lg border bg-card p-5 flex items-center justify-between gap-4">
+              <div className="space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide">Current Subscription</p>
+                <div className="flex items-center gap-2">
+                  <span className="text-sm px-3 py-0.5">{tierBadge(activeTier.tier)}</span>
+                  {activeTier.expires_at && (
+                    <span className="text-xs text-muted-foreground">
+                      Expires {fmtDate(activeTier.expires_at)}
+                    </span>
+                  )}
+                </div>
+              </div>
+              {activeTier.tier !== "free" && (
+                <Button size="sm" variant="destructive" onClick={() => setRevokeTarget(activeTier)}>
+                  <ShieldOff className="h-4 w-4 mr-2" />
+                  Revoke
+                </Button>
+              )}
+            </div>
+          )}
+
+          {/* History */}
+          {loading && !userTiers.length ? (
+            <div className="space-y-3">
+              {[...Array(3)].map((_, i) => <Skeleton key={i} className="h-24 w-full" />)}
+            </div>
+          ) : (
+            <SectionCard icon={BadgeCheck} title="Subscription History">
+              {userTiers.length === 0 ? (
+                <p className="text-sm text-muted-foreground text-center py-4">No subscription records found.</p>
+              ) : (
+                <div className="space-y-4">
+                  {userTiers.map((t) => (
+                    <div key={t.tier_id} className="rounded-lg border p-4 space-y-3">
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                          {tierBadge(t.tier)}
+                          <Badge variant={STATUS_BADGE[t.status] ?? "outline"} className="capitalize">{t.status}</Badge>
+                        </div>
+                        <span className="text-xs text-muted-foreground">#{t.tier_id}</span>
+                      </div>
+                      <div className="grid grid-cols-2 gap-3">
+                        <InfoRow label="Starts At">{t.starts_at ? fmtDateTime(t.starts_at) : "—"}</InfoRow>
+                        <InfoRow label="Expires At">{t.expires_at ? fmtDateTime(t.expires_at) : "Never"}</InfoRow>
+                        <InfoRow label="Granted By">{t.grantedByUser?.email ?? (t.granted_by ? `#${t.granted_by}` : "Self-serve")}</InfoRow>
+                        {t.revoked_at && (
+                          <InfoRow label="Revoked At">{fmtDateTime(t.revoked_at)}</InfoRow>
+                        )}
+                      </div>
+                      {t.notes && <p className="text-xs text-muted-foreground italic">{t.notes}</p>}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </SectionCard>
+          )}
+
+        </div>
+      </div>
+
+      {/* ── Grant Dialog ── */}
+      <Dialog open={grantOpen} onOpenChange={setGrantOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Grant Subscription</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-2">
+            <div className="space-y-1.5">
+              <Label>Subscription</Label>
+              <Select
+                value={grantForm.tier}
+                onValueChange={(v) => setGrantForm((p) => ({ ...p, tier: v, plan_id: "" }))}
+              >
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {grantableCategories.map((c) => (
+                    <SelectItem key={c.slug} value={c.slug}>{c.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label>Plan</Label>
+              <Select
+                value={grantForm.plan_id}
+                onValueChange={(v) => setGrantForm((p) => ({ ...p, plan_id: v }))}
+                disabled={!filteredPlans.length}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder={filteredPlans.length ? "Select a plan" : "No active plans for this subscription"} />
+                </SelectTrigger>
+                <SelectContent>
+                  {filteredPlans.map((p) => (
+                    <SelectItem key={p.plan_id} value={String(p.plan_id)}>
+                      {p.label} — {p.duration_days}d / {p.currency} {Number(p.price).toFixed(2)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="notes">Notes <span className="text-muted-foreground text-xs">(optional)</span></Label>
+              <Textarea
+                id="notes"
+                rows={2}
+                placeholder="Reason for manual grant..."
+                value={grantForm.notes}
+                onChange={(e) => setGrantForm((p) => ({ ...p, notes: e.target.value }))}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button onClick={handleGrant} disabled={!grantForm.plan_id || submitting}>
+              {submitting && <Spinner className="h-4 w-4 mr-2" />}
+              Grant
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ── Revoke Confirm ── */}
+      <AlertDialog open={!!revokeTarget} onOpenChange={(o) => !o && setRevokeTarget(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Revoke subscription?</AlertDialogTitle>
+            <AlertDialogDescription>
+              The user's <strong className="capitalize">{revokeTarget?.tier}</strong> tier will be revoked
+              and they'll be automatically downgraded to Free.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={handleRevoke}
+            >
+              {submitting && <Spinner className="h-4 w-4 mr-2" />}
+              Revoke
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/tiers/ViewPayment.jsx b/apps/web/src/modules/admin/pages/tiers/ViewPayment.jsx
new file mode 100644
index 0000000..c1ae675
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/tiers/ViewPayment.jsx
@@ -0,0 +1,224 @@
+import { useEffect, useState, useMemo } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, House, CreditCard, BadgeCheck, User } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Separator } from "@/components/ui/separator";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { useTiers } from "@/contexts/AdminTiersContext";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { PageMeta } from "@/contexts/MetadataContext";
+import api from "@/utils/api.util";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+
+const STATUS_BADGE = {
+  pending:   "secondary",
+  completed: "default",
+  failed:    "destructive",
+  cancelled: "outline",
+  expired:   "outline",
+  refunded:  "outline",
+};
+
+// ─── Provider label map (extend as you add more providers) ───────────────────
+const PROVIDER_LABELS = {
+  paypal: "PayPal",
+  stripe: "Stripe",
+  gcash:  "GCash",
+};
+
+function InfoRow({ label, children }) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <span className="text-xs text-muted-foreground uppercase tracking-wide">{label}</span>
+      <span className="text-sm font-medium break-all">
+        {children ?? <span className="text-muted-foreground italic">—</span>}
+      </span>
+    </div>
+  );
+}
+
+function SectionCard({ icon: Icon, title, children }) {
+  return (
+    <div className="rounded-lg border bg-card p-5 space-y-4">
+      <div className="flex items-center gap-2">
+        {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+        <h2 className="text-sm font-semibold">{title}</h2>
+      </div>
+      <Separator />
+      {children}
+    </div>
+  );
+}
+
+// ─── Provider reference section — renders differently per provider ────────────
+function ProviderReference({ payment }) {
+  const provider  = payment.provider ?? "paypal";
+  const payload   = payment.provider_payload ?? {};
+  const title     = `${PROVIDER_LABELS[provider] ?? provider} Reference`;
+
+  return (
+    <SectionCard icon={CreditCard} title={title}>
+      <div className="grid grid-cols-1 gap-3">
+
+        {/* PayPal */}
+        {provider === "paypal" && (
+          <>
+            <InfoRow label="Order ID">{payload.order_id}</InfoRow>
+            <InfoRow label="Capture ID">{payload.capture_id}</InfoRow>
+            <InfoRow label="Payer ID">{payload.payer_id}</InfoRow>
+            {payload.checkout && (
+              <>
+                <InfoRow label="Subtotal">
+                  {payment.currency} {Number(payload.checkout.subtotal ?? 0).toFixed(2)}
+                </InfoRow>
+                {Number(payload.checkout.discount) > 0 && (
+                  <InfoRow label="Promo Applied">
+                    {payload.checkout.promo_code} — -{payment.currency}{" "}
+                    {Number(payload.checkout.discount).toFixed(2)}
+                  </InfoRow>
+                )}
+              </>
+            )}
+          </>
+        )}
+
+        {/* Stripe — extend when needed */}
+        {provider === "stripe" && (
+          <>
+            <InfoRow label="Payment Intent ID">{payload.payment_intent_id}</InfoRow>
+            <InfoRow label="Charge ID">{payload.charge_id}</InfoRow>
+            <InfoRow label="Customer ID">{payload.customer_id}</InfoRow>
+          </>
+        )}
+
+        {/* GCash / other — generic fallback */}
+        {provider !== "paypal" && provider !== "stripe" && (
+          <>
+            <InfoRow label="Reference ID">{payload.reference_id}</InfoRow>
+            <InfoRow label="Transaction ID">{payload.transaction_id}</InfoRow>
+          </>
+        )}
+
+        {/* Cancelled info — shown for any provider */}
+        {payload.cancelled_at && (
+          <InfoRow label="Cancelled At">
+            {fmtDateTime(payload.cancelled_at)}
+          </InfoRow>
+        )}
+
+      </div>
+    </SectionCard>
+  );
+}
+
+// ─── Main ─────────────────────────────────────────────────────────────────────
+
+export default function ViewPayment() {
+  const navigate = useNavigate();
+  const { paymentId } = useParams();
+  const { fetchPayment, payment, loading } = useTiers();
+  const { fmtDateTime } = useDateFormat();
+
+  const [tierCategories, setTierCategories] = useState([]);
+  const tierMap = useMemo(() => Object.fromEntries(tierCategories.map((c) => [c.slug, c])), [tierCategories]);
+
+  useEffect(() => {
+    fetchPayment(paymentId);
+    api.get("/admin/tiers/categories").then(({ data }) => setTierCategories(data.data ?? [])).catch(() => {});
+  }, [paymentId]);
+
+  return (
+    <section className="bg-muted/60 min-h-full">
+      <PageMeta title={payment ? `${payment.plan?.label ?? 'Payment'} – Payment - STARR` : undefined} />
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
+        <div className="w-full max-w-2xl mx-auto">
+
+          <div className="flex flex-col gap-2 mb-6">
+            <AppBreadcrumb items={[
+              { label: "Home",     icon: <House className="size-4" />, to: "/admin" },
+              { label: "Payments", to: "/admin/tiers/payments" },
+              { label: `Payment #${paymentId}` },
+            ]} />
+          </div>
+
+          <div className="flex items-center gap-3 mb-6">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/admin/tiers/payments")}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Payment Details</h1>
+              <p className="text-sm text-muted-foreground">Payment #{paymentId}</p>
+            </div>
+          </div>
+
+          {loading && !payment ? (
+            <div className="space-y-5">
+              {[...Array(3)].map((_, i) => <Skeleton key={i} className="h-32 w-full" />)}
+            </div>
+          ) : !payment ? (
+            <p className="text-sm text-muted-foreground">Payment not found.</p>
+          ) : (
+            <div className="space-y-5">
+
+              {/* Transaction */}
+              <SectionCard icon={CreditCard} title="Transaction">
+                <div className="grid grid-cols-2 gap-4">
+                  <InfoRow label="Status">
+                    <Badge variant={STATUS_BADGE[payment.status] ?? "outline"} className="capitalize mt-0.5">
+                      {payment.status}
+                    </Badge>
+                  </InfoRow>
+                  <InfoRow label="Provider">
+                    {PROVIDER_LABELS[payment.provider] ?? payment.provider ?? "—"}
+                  </InfoRow>
+                  <InfoRow label="Amount">
+                    {payment.currency} {Number(payment.amount).toFixed(2)}
+                  </InfoRow>
+                  {Number(payment.discount) > 0 && (
+                    <InfoRow label="Discount">
+                      -{payment.currency} {Number(payment.discount).toFixed(2)}
+                      {payment.promo_code && ` (${payment.promo_code})`}
+                    </InfoRow>
+                  )}
+                  <InfoRow label="Paid At">
+                    {payment.paid_at ? fmtDateTime(payment.paid_at) : "—"}
+                  </InfoRow>
+                  <InfoRow label="Created At">
+                    {payment.createdAt ? fmtDateTime(payment.createdAt) : "—"}
+                  </InfoRow>
+                </div>
+              </SectionCard>
+
+              {/* User */}
+              <SectionCard icon={User} title="User">
+                <div className="grid grid-cols-2 gap-4">
+                  <InfoRow label="User ID">{String(payment.user_id)}</InfoRow>
+                  <InfoRow label="Email">{payment.user?.email}</InfoRow>
+                </div>
+              </SectionCard>
+
+              {/* Plan */}
+              {payment.plan && (
+                <SectionCard icon={BadgeCheck} title="Plan">
+                  <div className="grid grid-cols-2 gap-4">
+                    <InfoRow label="Label">{payment.plan.label}</InfoRow>
+                    <InfoRow label="Subscription">
+                      {(() => { const { cls, label } = resolveTierBadge(payment.plan.tier, tierMap); return <Badge className={`${cls} mt-0.5`}>{label}</Badge>; })()}
+                    </InfoRow>
+                    <InfoRow label="Duration">{payment.plan.duration_days} days</InfoRow>
+                  </div>
+                </SectionCard>
+              )}
+
+              {/* Provider reference — dynamic per provider */}
+              <ProviderReference payment={payment} />
+
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/tiers/ViewPlan.jsx b/apps/web/src/modules/admin/pages/tiers/ViewPlan.jsx
new file mode 100644
index 0000000..ae15164
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/tiers/ViewPlan.jsx
@@ -0,0 +1,708 @@
+import { useEffect, useState, useMemo } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  ArrowLeft, CreditCard, Pencil, Tag, BadgeCheck, BookOpen, Clock,
+  ShieldCheck, Plus, Trash2, Loader2, Receipt, FileText,
+} from "lucide-react";
+import { toast } from "sonner";
+import { Badge }     from "@/components/ui/badge";
+import { Button }    from "@/components/ui/button";
+import { Input }     from "@/components/ui/input";
+import { Label }     from "@/components/ui/label";
+import { Switch }    from "@/components/ui/switch";
+import { Skeleton }  from "@/components/ui/skeleton";
+import { Separator } from "@/components/ui/separator";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { DateTimePicker } from "@/components/ui/date-time-picker";
+import { useTiers } from "@/contexts/AdminTiersContext";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { PageMeta } from "@/contexts/MetadataContext";
+import api from "@/utils/api.util";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+import PaymentsTable from "@/modules/admin/components/tiers/PaymentsTable";
+
+// ─── Shared helpers ────────────────────────────────────────────────────────────
+
+function InfoRow({ label, children }) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <span className="text-xs text-muted-foreground uppercase tracking-wide">{label}</span>
+      <span className="text-sm font-medium">
+        {children ?? <span className="text-muted-foreground italic">—</span>}
+      </span>
+    </div>
+  );
+}
+
+function SectionCard({ icon: Icon, title, description, children }) {
+  return (
+    <div className="rounded-lg border bg-card p-5 space-y-4">
+      <div>
+        <div className="flex items-center gap-2">
+          {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+          <h2 className="text-sm font-semibold">{title}</h2>
+        </div>
+        {description && <p className="text-xs text-muted-foreground mt-0.5 ml-6">{description}</p>}
+      </div>
+      <Separator />
+      {children}
+    </div>
+  );
+}
+
+function formatDuration(days, unit) {
+  if (!days) return `${days} days`;
+  const UNIT_TO_DAYS = { minute: 1 / 1440, hour: 1 / 24, day: 1, month: 30, year: 365 };
+  const multiplier = UNIT_TO_DAYS[unit] ?? 1;
+  const value = Math.round((days / multiplier) * 1000) / 1000;
+  const label = unit ?? "day";
+  return `${value} ${label}${value !== 1 ? "s" : ""}`;
+}
+
+function formatCourseDuration(seconds = 0) {
+  if (!seconds) return null;
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  if (h && m) return `${h}h ${m}m`;
+  if (h) return `${h}h`;
+  return `${m}m`;
+}
+
+// ─── Tab: Plan Details ─────────────────────────────────────────────────────────
+
+function PlanDetailsTab({ plan, loading, tierMap, assignedCourses, coursesLoading, assignedUnits, unitsLoading, assignedLessons, lessonsLoading }) {
+  const { fmtDateTime } = useDateFormat();
+
+  if (loading && !plan) {
+    return (
+      <div className="space-y-5">
+        {[...Array(3)].map((_, i) => <Skeleton key={i} className="h-32 w-full" />)}
+      </div>
+    );
+  }
+  if (!plan) return <p className="text-sm text-muted-foreground">Plan not found.</p>;
+
+  // A bundle is single-type — only one of these is ever populated — so show
+  // just that one section instead of three, two of which would always be empty.
+  const bundleLoading = coursesLoading || unitsLoading || lessonsLoading;
+  const activeBundleType = bundleLoading
+    ? null
+    : assignedCourses.length > 0 ? "course"
+    : assignedUnits.length > 0   ? "unit"
+    : assignedLessons.length > 0 ? "lesson"
+    : "course";
+
+  return (
+    <div className="space-y-5">
+      <SectionCard icon={Tag} title="Plan Details">
+        <div className="grid grid-cols-2 gap-4">
+          <InfoRow label="Label">{plan.label}</InfoRow>
+          <InfoRow label="Subscription">
+            {(() => {
+              const { cls, label } = resolveTierBadge(plan.tier, tierMap);
+              return <Badge className={`${cls} mt-0.5`}>{label}</Badge>;
+            })()}
+          </InfoRow>
+          <InfoRow label="Duration">{formatDuration(plan.duration_days, plan.duration_unit)}</InfoRow>
+          <InfoRow label="Price">{plan.currency} {Number(plan.price).toFixed(2)}</InfoRow>
+          <InfoRow label="Currency">{plan.currency}</InfoRow>
+          <InfoRow label="Publish Status">
+            <Badge variant={plan.status === "published" ? "default" : "secondary"} className="mt-0.5 capitalize">
+              {plan.status ?? "draft"}
+            </Badge>
+          </InfoRow>
+          <InfoRow label="Recommended">
+            <Badge variant={plan.is_recommended ? "default" : "secondary"} className="mt-0.5">
+              {plan.is_recommended ? "Yes" : "No"}
+            </Badge>
+          </InfoRow>
+          <InfoRow label="Active">
+            <Badge variant={plan.is_active ? "default" : "secondary"} className="mt-0.5">
+              {plan.is_active ? "Active" : "Inactive"}
+            </Badge>
+          </InfoRow>
+        </div>
+        {plan.description && (
+          <div className="flex flex-col gap-0.5 pt-1">
+            <span className="text-xs text-muted-foreground uppercase tracking-wide">Description</span>
+            <p className="text-sm">{plan.description}</p>
+          </div>
+        )}
+      </SectionCard>
+
+      {bundleLoading && (
+        <SectionCard icon={BookOpen} title="Assigned Content">
+          <div className="space-y-2">
+            {[...Array(3)].map((_, i) => <Skeleton key={i} className="h-10 w-full" />)}
+          </div>
+        </SectionCard>
+      )}
+
+      {activeBundleType === "course" && (
+      <SectionCard icon={BookOpen} title="Assigned Courses">
+        {assignedCourses.length === 0 ? (
+          <div className="flex items-center gap-2 rounded-lg border border-dashed p-4 text-sm text-muted-foreground">
+            <BookOpen className="size-4 shrink-0" />
+            No courses assigned to this plan yet.
+          </div>
+        ) : (
+          <div className="space-y-0 divide-y rounded-lg border overflow-hidden">
+            {assignedCourses.map((course) => (
+              <div key={course.course_id} className="flex items-center justify-between gap-3 px-4 py-3 bg-card hover:bg-muted/30 transition-colors">
+                <div className="flex items-center gap-3 min-w-0">
+                  <div className="h-8 w-8 rounded-md bg-muted flex items-center justify-center shrink-0">
+                    <BookOpen className="size-4 text-muted-foreground" />
+                  </div>
+                  <div className="min-w-0">
+                    <p className="text-sm font-medium line-clamp-1">{course.title}</p>
+                    {(course.course_code || course.level) && (
+                      <div className="flex items-center gap-2 mt-0.5">
+                        {course.course_code && (
+                          <span className="text-xs text-muted-foreground">{course.course_code}</span>
+                        )}
+                        {course.level && (
+                          <Badge variant="outline" className="text-xs capitalize h-4 px-1.5">{course.level}</Badge>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+                {formatCourseDuration(course.duration_seconds) && (
+                  <span className="text-xs text-muted-foreground flex items-center gap-1 shrink-0">
+                    <Clock className="size-3" />
+                    {formatCourseDuration(course.duration_seconds)}
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+        <p className="text-xs text-muted-foreground">
+          {assignedCourses.length} course{assignedCourses.length !== 1 ? "s" : ""} assigned
+        </p>
+      </SectionCard>
+      )}
+
+      {activeBundleType === "unit" && (
+      <SectionCard icon={BookOpen} title="Assigned Units">
+        {assignedUnits.length === 0 ? (
+          <div className="flex items-center gap-2 rounded-lg border border-dashed p-4 text-sm text-muted-foreground">
+            <BookOpen className="size-4 shrink-0" />
+            No units assigned to this plan yet.
+          </div>
+        ) : (
+          <div className="space-y-0 divide-y rounded-lg border overflow-hidden">
+            {assignedUnits.map((unit) => (
+              <div key={unit.unit_id} className="flex items-center justify-between gap-3 px-4 py-3 bg-card hover:bg-muted/30 transition-colors">
+                <div className="flex items-center gap-3 min-w-0">
+                  <div className="h-8 w-8 rounded-md bg-muted flex items-center justify-center shrink-0">
+                    <BookOpen className="size-4 text-muted-foreground" />
+                  </div>
+                  <p className="text-sm font-medium line-clamp-1">{unit.title}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+        <p className="text-xs text-muted-foreground">
+          {assignedUnits.length} unit{assignedUnits.length !== 1 ? "s" : ""} assigned
+        </p>
+      </SectionCard>
+      )}
+
+      {activeBundleType === "lesson" && (
+      <SectionCard icon={FileText} title="Assigned Lessons">
+        {assignedLessons.length === 0 ? (
+          <div className="flex items-center gap-2 rounded-lg border border-dashed p-4 text-sm text-muted-foreground">
+            <FileText className="size-4 shrink-0" />
+            No lessons assigned to this plan yet.
+          </div>
+        ) : (
+          <div className="space-y-0 divide-y rounded-lg border overflow-hidden">
+            {assignedLessons.map((lesson) => (
+              <div key={lesson.lesson_id} className="flex items-center justify-between gap-3 px-4 py-3 bg-card hover:bg-muted/30 transition-colors">
+                <div className="flex items-center gap-3 min-w-0">
+                  <div className="h-8 w-8 rounded-md bg-muted flex items-center justify-center shrink-0">
+                    <FileText className="size-4 text-muted-foreground" />
+                  </div>
+                  <p className="text-sm font-medium line-clamp-1">{lesson.title}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+        <p className="text-xs text-muted-foreground">
+          {assignedLessons.length} lesson{assignedLessons.length !== 1 ? "s" : ""} assigned
+        </p>
+      </SectionCard>
+      )}
+
+      <SectionCard icon={BadgeCheck} title="Audit">
+        <div className="grid grid-cols-2 gap-4">
+          <InfoRow label="Created At">{plan.createdAt ? fmtDateTime(plan.createdAt) : "—"}</InfoRow>
+          <InfoRow label="Updated At">{plan.updatedAt ? fmtDateTime(plan.updatedAt) : "—"}</InfoRow>
+        </div>
+      </SectionCard>
+    </div>
+  );
+}
+
+// ─── Tab: Payment Policy ───────────────────────────────────────────────────────
+
+const EMPTY_PROMO  = { code: "", type: "flat", value: "", currency: "USD", max_discount: "", max_uses: "", expires_at: "", min_amount: "" };
+const WINDOW_UNITS = ["minutes", "hours", "days"];
+
+function PaymentPolicyTab({ planId, plan }) {
+  const [policyLoading,     setPolicyLoading]     = useState(true);
+  const [saving,            setSaving]            = useState(false);
+  const [refundAllowed,     setRefundAllowed]     = useState(true);
+  const [refundWindowValue, setRefundWindowValue] = useState(5);
+  const [refundWindowUnit,  setRefundWindowUnit]  = useState("minutes");
+  const [refundReasonReqd,  setRefundReasonReqd]  = useState(false);
+  const [promoRules,        setPromoRules]        = useState([]);
+  const [addForm,           setAddForm]           = useState(EMPTY_PROMO);
+  const [showAdd,           setShowAdd]           = useState(false);
+  const [localizedPrices,   setLocalizedPrices]   = useState([]);
+
+  useEffect(() => {
+    setPolicyLoading(true);
+    api.get(`/admin/tier-policies/plans/${planId}/payment-policy`)
+      .then(({ data }) => {
+        const p = data.data;
+        if (p) {
+          const rp = p.refund_policy ?? {};
+          setRefundAllowed(rp.allowed ?? true);
+          setRefundWindowValue(rp.window_value ?? 5);
+          setRefundWindowUnit(rp.window_unit ?? "minutes");
+          setRefundReasonReqd(rp.reason_required ?? false);
+          setPromoRules(p.promo_rules ?? []);
+        }
+      })
+      .catch(() => {})
+      .finally(() => setPolicyLoading(false));
+
+    api.get(`/admin/tiers/${planId}/prices`)
+      .then(({ data }) => setLocalizedPrices(data.data ?? []))
+      .catch(() => {});
+  }, [planId]);
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await api.put(`/admin/tier-policies/plans/${planId}/payment-policy`, {
+        refund_policy: {
+          allowed:         refundAllowed,
+          window_value:    Number(refundWindowValue),
+          window_unit:     refundWindowUnit,
+          reason_required: refundReasonReqd,
+        },
+        promo_rules: promoRules,
+      });
+      toast("Payment policy saved.");
+    } catch (err) {
+      toast(err?.response?.data?.message ?? "Could not save payment policy.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleAddPromo = () => {
+    const code = addForm.code.trim().toUpperCase();
+    if (!code) { toast("Code is required."); return; }
+    if (!addForm.value || Number(addForm.value) <= 0) { toast("Value must be greater than 0."); return; }
+    if (promoRules.some((r) => r.code.toUpperCase() === code)) { toast("A rule with this code already exists."); return; }
+
+    const rule = {
+      code,
+      type:  addForm.type,
+      value: Number(addForm.value),
+      ...(addForm.type === "flat"    && addForm.currency     ? { currency:     addForm.currency.trim().toUpperCase() } : {}),
+      ...(addForm.type === "percent" && addForm.max_discount  ? { max_discount: Number(addForm.max_discount) } : {}),
+      ...(addForm.max_uses   ? { max_uses:   Number(addForm.max_uses)  } : {}),
+      ...(addForm.expires_at  ? { expires_at: addForm.expires_at }       : {}),
+      ...(addForm.min_amount  ? { min_amount: Number(addForm.min_amount) } : {}),
+    };
+
+    setPromoRules((prev) => [...prev, rule]);
+    setAddForm(EMPTY_PROMO);
+    setShowAdd(false);
+  };
+
+  if (policyLoading) {
+    return (
+      <div className="space-y-4">
+        {[...Array(3)].map((_, i) => <Skeleton key={i} className="h-32 w-full" />)}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-5">
+      <SectionCard
+        icon={ShieldCheck}
+        title="Refund Policy"
+        description="Controls whether and how long after purchase a user can request a refund."
+      >
+        <div className="space-y-4">
+          <div className="flex items-center justify-between rounded-lg border p-4">
+            <div>
+              <p className="text-sm font-medium">Allow Refunds</p>
+              <p className="text-xs text-muted-foreground">Users can request a refund within the window below.</p>
+            </div>
+            <Switch checked={refundAllowed} onCheckedChange={setRefundAllowed} />
+          </div>
+
+          {refundAllowed && (
+            <>
+              <div className="space-y-1.5">
+                <Label>Refund Window</Label>
+                <div className="flex gap-2">
+                  <Input
+                    type="number"
+                    min={1}
+                    className="w-28"
+                    value={refundWindowValue}
+                    onChange={(e) => setRefundWindowValue(e.target.value)}
+                    placeholder="5"
+                  />
+                  <Select value={refundWindowUnit} onValueChange={setRefundWindowUnit}>
+                    <SelectTrigger className="w-36"><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      {WINDOW_UNITS.map((u) => (
+                        <SelectItem key={u} value={u} className="capitalize">{u}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  Users have {refundWindowValue || "?"} {refundWindowUnit} from payment to request a refund.
+                </p>
+              </div>
+
+              <div className="flex items-center justify-between rounded-lg border p-4">
+                <div>
+                  <p className="text-sm font-medium">Require Reason</p>
+                  <p className="text-xs text-muted-foreground">User must provide a reason when requesting a refund.</p>
+                </div>
+                <Switch checked={refundReasonReqd} onCheckedChange={setRefundReasonReqd} />
+              </div>
+            </>
+          )}
+        </div>
+      </SectionCard>
+
+      <SectionCard
+        icon={Tag}
+        title="Promo Codes"
+        description="Define discount codes users can apply at checkout."
+      >
+        {promoRules.length > 0 ? (
+          <div className="space-y-2">
+            {promoRules.map((rule) => (
+              <div key={rule.code} className="flex items-center justify-between gap-3 rounded-lg border bg-muted/30 px-4 py-3">
+                <div className="flex items-center gap-3 min-w-0 flex-1">
+                  <code className="text-sm font-semibold tracking-wide">{rule.code}</code>
+                  <Badge variant="outline" className="text-xs capitalize shrink-0">{rule.type}</Badge>
+                  <span className="text-sm text-muted-foreground shrink-0">
+                    {rule.type === "flat"
+                      ? `${rule.currency ?? "USD"} ${Number(rule.value).toFixed(2)} off`
+                      : `${rule.value}% off${rule.max_discount ? ` (max ${rule.max_discount})` : ""}`}
+                  </span>
+                  {rule.max_uses && (
+                    <span className="text-xs text-muted-foreground shrink-0">· {rule.max_uses} uses max</span>
+                  )}
+                  {rule.expires_at && (
+                    <span className="text-xs text-muted-foreground shrink-0">
+                      · expires {new Date(rule.expires_at).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" })}
+                    </span>
+                  )}
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="text-destructive hover:text-destructive shrink-0"
+                  onClick={() => setPromoRules((prev) => prev.filter((r) => r.code !== rule.code))}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="flex items-center gap-2 rounded-lg border border-dashed p-4 text-sm text-muted-foreground">
+            <Tag className="size-4 shrink-0" />
+            No promo codes configured for this plan.
+          </div>
+        )}
+
+        {showAdd ? (
+          <div className="rounded-lg border bg-muted/20 p-4 space-y-4">
+            <p className="text-sm font-medium">New Promo Code</p>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label>Code <span className="text-destructive">*</span></Label>
+                <Input
+                  placeholder="e.g. SAVE10"
+                  value={addForm.code}
+                  onChange={(e) => setAddForm((f) => ({ ...f, code: e.target.value.toUpperCase() }))}
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label>Type <span className="text-destructive">*</span></Label>
+                <Select value={addForm.type} onValueChange={(v) => setAddForm((f) => ({ ...f, type: v }))}>
+                  <SelectTrigger><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="flat">Flat (fixed amount off)</SelectItem>
+                    <SelectItem value="percent">Percent (% off)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label>{addForm.type === "flat" ? "Amount Off" : "Percent Off"} <span className="text-destructive">*</span></Label>
+                <Input
+                  type="number" step="0.01" min="0.01"
+                  placeholder={addForm.type === "flat" ? "10.00" : "20"}
+                  value={addForm.value}
+                  onChange={(e) => setAddForm((f) => ({ ...f, value: e.target.value }))}
+                />
+              </div>
+
+              {addForm.type === "flat" && (
+                <div className="space-y-1.5">
+                  <Label>Currency</Label>
+                  <Select value={addForm.currency} onValueChange={(v) => setAddForm((f) => ({ ...f, currency: v }))}>
+                    <SelectTrigger><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value={plan?.currency ?? "USD"}>{plan?.currency ?? "USD"} — Base price</SelectItem>
+                      {localizedPrices.map((p) => (
+                        <SelectItem key={p.currency} value={p.currency}>{p.currency} — Localized price</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  {localizedPrices.length === 0 && (
+                    <p className="text-xs text-muted-foreground">No localized prices set — only base currency available.</p>
+                  )}
+                </div>
+              )}
+
+              {addForm.type === "percent" && (
+                <div className="space-y-1.5">
+                  <Label>Max Discount Cap</Label>
+                  <Input
+                    type="number" step="0.01" placeholder="50.00 (optional)"
+                    value={addForm.max_discount}
+                    onChange={(e) => setAddForm((f) => ({ ...f, max_discount: e.target.value }))}
+                  />
+                </div>
+              )}
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label>Max Uses</Label>
+                <Input
+                  type="number" min="1" placeholder="Unlimited"
+                  value={addForm.max_uses}
+                  onChange={(e) => setAddForm((f) => ({ ...f, max_uses: e.target.value }))}
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label>Expires At</Label>
+                <DateTimePicker
+                  value={addForm.expires_at || null}
+                  onChange={(iso) => setAddForm((f) => ({ ...f, expires_at: iso ?? "" }))}
+                  placeholder="No expiry"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label>Minimum Purchase Amount</Label>
+              <Input
+                type="number" step="0.01" placeholder="No minimum"
+                value={addForm.min_amount}
+                onChange={(e) => setAddForm((f) => ({ ...f, min_amount: e.target.value }))}
+              />
+            </div>
+
+            <div className="flex gap-2 justify-end pt-1">
+              <Button variant="outline" size="sm" onClick={() => { setShowAdd(false); setAddForm(EMPTY_PROMO); }}>
+                Cancel
+              </Button>
+              <Button size="sm" onClick={handleAddPromo}>
+                <Plus className="h-4 w-4 mr-1" /> Add Code
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => { setAddForm((f) => ({ ...f, currency: plan?.currency ?? "USD" })); setShowAdd(true); }}
+          >
+            <Plus className="h-4 w-4 mr-1" /> Add Promo Code
+          </Button>
+        )}
+      </SectionCard>
+
+      <div className="flex justify-end gap-3 pt-1">
+        <Button onClick={handleSave} disabled={saving}>
+          {saving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+          Save Policy
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+// ─── Tab: Payments ─────────────────────────────────────────────────────────────
+
+function PaymentsTab({ planId }) {
+  const { fetchPayments } = useTiers();
+
+  useEffect(() => {
+    fetchPayments({ filters: [{ id: "plan_id", value: planId }] });
+  }, [planId]);
+
+  return <PaymentsTable planId={planId} />;
+}
+
+// ─── Tabs config ───────────────────────────────────────────────────────────────
+
+const TABS = [
+  { key: "details",  label: "Plan Details",    icon: CreditCard  },
+  { key: "policy",   label: "Payment Policy",  icon: ShieldCheck },
+  { key: "payments", label: "Payments",         icon: Receipt     },
+];
+
+// ─── Page ──────────────────────────────────────────────────────────────────────
+
+export default function ViewPlan() {
+  const navigate   = useNavigate();
+  const { planId } = useParams();
+  const { fetchPlan, plan, loading } = useTiers();
+
+  const [activeTab,      setActiveTab]      = useState("details");
+  const [tierCategories, setTierCategories] = useState([]);
+  const tierMap = useMemo(() => Object.fromEntries(tierCategories.map((c) => [c.slug, c])), [tierCategories]);
+
+  const [assignedCourses, setAssignedCourses] = useState([]);
+  const [coursesLoading,  setCoursesLoading]  = useState(false);
+  const [assignedUnits,   setAssignedUnits]   = useState([]);
+  const [unitsLoading,    setUnitsLoading]    = useState(false);
+  const [assignedLessons, setAssignedLessons] = useState([]);
+  const [lessonsLoading,  setLessonsLoading]  = useState(false);
+
+  useEffect(() => {
+    fetchPlan(planId);
+    api.get("/admin/tiers/categories").then(({ data }) => setTierCategories(data.data ?? [])).catch(() => {});
+    setCoursesLoading(true);
+    api.get(`/admin/tiers/${planId}/courses`)
+      .then(({ data }) => setAssignedCourses(data.data ?? []))
+      .catch(() => {})
+      .finally(() => setCoursesLoading(false));
+    setUnitsLoading(true);
+    api.get(`/admin/tiers/${planId}/units`)
+      .then(({ data }) => setAssignedUnits(data.data ?? []))
+      .catch(() => {})
+      .finally(() => setUnitsLoading(false));
+    setLessonsLoading(true);
+    api.get(`/admin/tiers/${planId}/lessons`)
+      .then(({ data }) => setAssignedLessons(data.data ?? []))
+      .catch(() => {})
+      .finally(() => setLessonsLoading(false));
+  }, [planId]);
+
+  return (
+    <div className="flex flex-col min-h-screen bg-muted/60">
+      <PageMeta title={plan ? `${plan.label} - STARR` : undefined} />
+
+      {/* ── Sticky header ── */}
+      <div
+        className="sticky z-20 shrink-0 border-b bg-white/70 dark:bg-zinc-900/70 backdrop-blur-md"
+        style={{ top: "var(--navbar-h)" }}
+      >
+        <div className="lg:container lg:mx-auto lg:px-6 px-4">
+          <div className="flex items-center gap-3 py-3">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/admin/tiers/plans")}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div className="flex-1 min-w-0">
+              <h1 className="text-xl font-semibold leading-tight flex items-center gap-2">
+                <CreditCard className="h-5 w-5 text-muted-foreground" />
+                View Plan
+              </h1>
+              {plan && (
+                <p className="text-sm text-muted-foreground capitalize">
+                  {plan.tier} — {plan.label}
+                </p>
+              )}
+            </div>
+            {activeTab === "details" && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => navigate(`/admin/tiers/plans/${planId}/edit`)}
+                disabled={loading}
+              >
+                <Pencil className="h-4 w-4 mr-2" />
+                Edit Plan
+              </Button>
+            )}
+          </div>
+
+          {/* Underline tabs */}
+          <div className="flex gap-1 pb-0 -mb-px">
+            {TABS.map(({ key, label, icon: Icon }) => (
+              <button
+                key={key}
+                onClick={() => setActiveTab(key)}
+                className={[
+                  "flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors",
+                  activeTab === key
+                    ? "border-primary text-primary"
+                    : "border-transparent text-muted-foreground hover:text-foreground",
+                ].join(" ")}
+              >
+                <Icon className="h-3.5 w-3.5" />
+                {label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* ── Content ── */}
+      <div className="lg:container lg:mx-auto lg:px-6 px-4 py-6">
+        {activeTab === "payments" ? (
+          <div className="pb-16">
+            <PaymentsTab planId={planId} />
+          </div>
+        ) : (
+          <div className="max-w-3xl mx-auto space-y-5 pb-16">
+            {activeTab === "details" && (
+              <PlanDetailsTab
+                plan={plan}
+                loading={loading}
+                tierMap={tierMap}
+                assignedCourses={assignedCourses}
+                coursesLoading={coursesLoading}
+                assignedUnits={assignedUnits}
+                unitsLoading={unitsLoading}
+                assignedLessons={assignedLessons}
+                lessonsLoading={lessonsLoading}
+              />
+            )}
+            {activeTab === "policy" && (
+              <PaymentPolicyTab planId={planId} plan={plan} />
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/admin/pages/user_groups/AddGroup.jsx b/apps/web/src/modules/admin/pages/user_groups/AddGroup.jsx
new file mode 100644
index 0000000..387d8e1
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/user_groups/AddGroup.jsx
@@ -0,0 +1,106 @@
+// modules/admin/components/user_groups/AddGroupDialog.jsx
+
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { Input }    from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button }   from "@/components/ui/button";
+import { Label }    from "@/components/ui/label";
+
+const schema = z.object({
+  name:        z.string().min(1, "Name is required."),
+  description: z.string().min(1, "Description is required."),
+});
+
+/**
+ * Dialog for creating a new group.
+ * Matches context: createGroup({ name, description })
+ *
+ * @param {Object}   props
+ * @param {boolean}  props.open
+ * @param {Function} props.onOpenChange
+ * @param {Function} props.onSubmit      Called with { name, description }
+ * @param {boolean}  [props.loading]
+ */
+export function AddGroupDialog({ open, onOpenChange, onSubmit, loading }) {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver:      zodResolver(schema),
+    defaultValues: { name: "", description: "" },
+  });
+
+  async function onValid(values) {
+    await onSubmit(values);
+    reset();
+  }
+
+  function handleClose() {
+    reset();
+    onOpenChange(false);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[440px]">
+        <DialogHeader>
+          <DialogTitle>Add group</DialogTitle>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit(onValid)} className="space-y-4">
+          <div className="space-y-1.5">
+            <Label htmlFor="name">
+              Name <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="name"
+              placeholder="Group name"
+              {...register("name")}
+            />
+            {errors.name && (
+              <p className="text-sm text-destructive">{errors.name.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="description">
+              Description <span className="text-destructive">*</span>
+            </Label>
+            <Textarea
+              id="description"
+              placeholder="Brief description of this group"
+              className="resize-none"
+              rows={3}
+              {...register("description")}
+            />
+            {errors.description && (
+              <p className="text-sm text-destructive">{errors.description.message}</p>
+            )}
+          </div>
+
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button type="button" variant="outline" disabled={loading}>Cancel</Button>
+            </DialogClose>
+            <Button type="submit" disabled={loading}>
+              {loading ? "Creating..." : "Add group"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/user_groups/ArchivedGroupList.jsx b/apps/web/src/modules/admin/pages/user_groups/ArchivedGroupList.jsx
new file mode 100644
index 0000000..c171550
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/user_groups/ArchivedGroupList.jsx
@@ -0,0 +1,26 @@
+import { House } from "lucide-react";
+
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import ArchiveGroupTable from "../../components/user_groups/ArchiveGroupTable";
+
+export default function ArchivedGroupList() {
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: `/admin` },
+    { label: "User Group", to: `/admin/groups` },
+    { label: "Archived" },
+  ]
+
+  return (
+    <section className="bg-muted h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6 ">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full">
+          <ArchiveGroupTable />
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/user_groups/GroupList.jsx b/apps/web/src/modules/admin/pages/user_groups/GroupList.jsx
new file mode 100644
index 0000000..629ee7a
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/user_groups/GroupList.jsx
@@ -0,0 +1,25 @@
+import { House } from "lucide-react";
+
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import GroupTable from "../../components/user_groups/GroupTable";
+
+export default function GroupList() {
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: `/admin` },
+    { label: "User Groups" },
+  ]
+
+  return (
+    <section className="bg-muted h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6 ">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full">
+          <GroupTable />
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/user_groups/ViewGroup.jsx b/apps/web/src/modules/admin/pages/user_groups/ViewGroup.jsx
new file mode 100644
index 0000000..64e09e9
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/user_groups/ViewGroup.jsx
@@ -0,0 +1,570 @@
+// modules/admin/pages/user_groups/ViewGroup.jsx
+
+import { useRef, useMemo, useState, useEffect, useCallback } from "react";
+import { useParams } from "react-router-dom";
+import { House, Users, QrCode, Download, Copy, Check, Link, UserCheck, Search, X } from "lucide-react";
+import { QRCodeCanvas } from "qrcode.react";
+
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
+import { AddSheet } from "@/components/generic/Sheet/AddSheet";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+
+import { useUserGroups } from "@/contexts/AdminUserGroupContext";
+import { useUsers } from "@/contexts/AdminUserContext";
+import { useAuth } from "@/contexts/AuthContext";
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+import { buildDataColumns, columnPinning } from "../../config/user_groups/view/columns.config";
+import { buildToolbarActions } from "../../config/user_groups/view/toolbar.config";
+import { buildSelectionActions } from "../../config/user_groups/view/selection.config";
+import { buildRowActions } from "../../config/user_groups/view/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+// ─── Invite Link Dialog ───────────────────────────────────────────────────────
+function InviteLinkDialog({ open, onOpenChange, group }) {
+  const [copiedLink, setCopiedLink] = useState(false);
+  const [copiedCode, setCopiedCode] = useState(false);
+
+  const inviteUrl = group?.group_code
+    ? `${window.location.origin}/signup?group_code=${group.group_code}`
+    : null;
+
+  const handleCopyLink = async () => {
+    if (!inviteUrl) return;
+    await navigator.clipboard.writeText(inviteUrl);
+    setCopiedLink(true);
+    setTimeout(() => setCopiedLink(false), 2000);
+  };
+
+  const handleCopyCode = async () => {
+    if (!group?.group_code) return;
+    await navigator.clipboard.writeText(group.group_code);
+    setCopiedCode(true);
+    setTimeout(() => setCopiedCode(false), 2000);
+  };
+
+  const handleDownload = () => {
+    const canvas = document.querySelector("[data-qr='group-invite']");
+    if (!canvas) return;
+    const url  = canvas.toDataURL("image/png");
+    const link = document.createElement("a");
+    link.href     = url;
+    link.download = `QR_${group.group_code}.png`;
+    link.click();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[420px]">
+        <DialogHeader>
+          <DialogTitle>Invite link</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col items-center gap-5 py-2">
+
+          {/* QR code */}
+          <div className="rounded-xl border bg-white p-4 shadow-sm">
+            {inviteUrl && (
+              <QRCodeCanvas
+                data-qr="group-invite"
+                value={inviteUrl}
+                size={180}
+                includeMargin={false}
+              />
+            )}
+          </div>
+
+          {/* Download QR */}
+          <Button
+            variant="outline"
+            className="w-full gap-2"
+            onClick={handleDownload}
+          >
+            <Download className="size-4" />
+            Download QR code
+          </Button>
+
+          <div className="w-full flex items-center gap-2 text-xs text-muted-foreground">
+            <div className="flex-1 h-px bg-border" />
+            or share the link
+            <div className="flex-1 h-px bg-border" />
+          </div>
+
+          {/* Invite link */}
+          <div className="w-full flex flex-col gap-2">
+            <div className="flex items-center gap-2 rounded-lg border bg-muted px-3 py-2 min-w-0">
+              <p className="font-mono text-xs text-muted-foreground truncate w-64">
+                {inviteUrl}
+              </p>
+            </div>
+            <Button className="w-full gap-2" onClick={handleCopyLink}>
+              {copiedLink
+                ? <><Check className="size-4" /> Copied!</>
+                : <><Copy className="size-4" /> Copy invite link</>
+              }
+            </Button>
+          </div>
+
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ─── Assign Group Dialog ──────────────────────────────────────────────────────
+function AssignGroupDialog({ open, onOpenChange, userCount, groups, loading, onAssign }) {
+  const [selectedGroupId, setSelectedGroupId] = useState(null);
+  const [search, setSearch] = useState('');
+
+  useEffect(() => {
+    if (open) {
+      setSelectedGroupId(null);
+      setSearch('');
+    }
+  }, [open]);
+
+  const realGroups = groups.filter((g) => (g.group_code ?? '') !== 'NOGRP' && g.is_active);
+
+  const filtered = realGroups.filter((g) => {
+    if (!search.trim()) return true;
+    const q = search.toLowerCase();
+    return g.name.toLowerCase().includes(q) || (g.group_code ?? '').toLowerCase().includes(q);
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[420px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <UserCheck className="size-4" /> Assign to Group
+          </DialogTitle>
+          <DialogDescription>
+            Select a group to assign{" "}
+            {userCount === 1 ? "this user" : `${userCount} users`} to.
+            They will be added to the selected group.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Command shouldFilter={false} className="rounded-lg border shadow-sm">
+
+          {/* ── Search input ── */}
+          <div className="flex items-center gap-2 border-b px-3 py-2">
+            <Search className="h-4 w-4 shrink-0 text-muted-foreground" />
+            <input
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search groups..."
+              className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground py-0.5"
+            />
+            {search && (
+              <button
+                onClick={() => setSearch('')}
+                className="text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            )}
+          </div>
+
+          {/* ── Group list ── */}
+          <CommandList>
+            <ScrollArea className="h-64">
+              {filtered.length === 0 ? (
+                <CommandEmpty className="py-8 text-sm text-center text-muted-foreground">
+                  {search ? `No results for "${search}".` : 'No groups available.'}
+                </CommandEmpty>
+              ) : (
+                <CommandGroup>
+                  {filtered.map((g) => {
+                    const isSelected = selectedGroupId === g.group_id;
+                    return (
+                      <CommandItem
+                        key={g.group_id}
+                        value={String(g.group_id)}
+                        onSelect={() => setSelectedGroupId(isSelected ? null : g.group_id)}
+                        className={cn(
+                          "flex items-center gap-3 px-3 py-2.5 cursor-pointer transition-colors",
+                          "aria-selected:bg-transparent data-selected:bg-transparent",
+                          isSelected
+                            ? "bg-primary/[0.06] hover:bg-primary/[0.10]"
+                            : "hover:bg-muted/50"
+                        )}
+                      >
+                        {/* Embossed checkbox */}
+                        <span className={cn(
+                          "h-4 w-4 shrink-0 rounded border-2 flex items-center justify-center transition-all",
+                          isSelected
+                            ? "bg-primary border-primary shadow-none ring-2 ring-primary/25 ring-offset-1"
+                            : [
+                              "bg-background border-border",
+                              "shadow-[inset_0_2px_4px_rgba(0,0,0,0.10),inset_0_1px_2px_rgba(0,0,0,0.06)]",
+                              "hover:border-primary/60",
+                            ]
+                        )}>
+                          {isSelected && (
+                            <Check className="h-2.5 w-2.5 text-primary-foreground stroke-[3.5]" />
+                          )}
+                        </span>
+
+                        {/* Name */}
+                        <span className={cn(
+                          "flex-1 text-sm truncate",
+                          isSelected ? "font-medium text-foreground" : "text-foreground/90"
+                        )}>
+                          {g.name}
+                        </span>
+
+                        {/* Group code pill */}
+                        <span className={cn(
+                          "font-mono text-[11px] px-1.5 py-0.5 rounded shrink-0",
+                          isSelected
+                            ? "bg-primary/15 text-primary"
+                            : "bg-muted text-muted-foreground"
+                        )}>
+                          {g.group_code}
+                        </span>
+                      </CommandItem>
+                    );
+                  })}
+                </CommandGroup>
+              )}
+            </ScrollArea>
+          </CommandList>
+
+        </Command>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
+          <Button
+            disabled={!selectedGroupId || loading}
+            onClick={() => onAssign(selectedGroupId)}
+          >
+            Assign
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+export default function ViewGroup() {
+  const { groupId } = useParams();
+
+  const tableRefsRef = useRef({
+    getFilters:     () => [],
+    getSort:        () => [],
+    resetSelection: () => {},
+    setFilters:     () => {},
+  });
+
+  const [addMemberOpen,  setAddMemberOpen]  = useState(false);
+  const [inviteOpen,     setInviteOpen]     = useState(false);
+  const [archiveTarget,  setArchiveTarget]  = useState(null);
+  const [archiveIds,     setArchiveIds]     = useState(null);
+  const [memberAttrs,    setMemberAttrs]    = useState([]);
+
+  const [assignOpen,     setAssignOpen]     = useState(false);
+  const [assignTarget,   setAssignTarget]   = useState(null);   // single row
+  const [assignIds,      setAssignIds]      = useState(null);   // bulk ids[]
+
+  const { user: currentUser } = useAuth();
+
+  const {
+    group,
+    groups,
+    members,
+    usersNotIn,
+    pagination,
+    setPagination,
+    loading,
+    fetchGroups,
+    fetchGroup,
+    fetchUsersNotInGroup,
+    addUsersToGroup,
+    removeUsersFromGroup,
+  } = useUserGroups();
+
+  // Members belong to the Users model (full_name, DOB, occupation, createdBy…),
+  // not UserGroups — the group-level field-values endpoint doesn't know these
+  // fields at all, so filter picklists must come from the Users endpoint.
+  const { fetchUserFieldValues } = useUsers();
+
+  const isNoGroup = group?.group_code === 'NOGRP';
+
+  useEffect(() => {
+    if (!groupId) return;
+    fetchGroup(groupId).then((res) => {
+      const attrs = res?.data?.members?.attributes ?? [];
+      setMemberAttrs(attrs);
+    });
+  }, []);
+
+  const handleRefsReady = (refs) => {
+    tableRefsRef.current = refs;
+  };
+
+  const exportConfig = {
+    allData:    members,
+    attributes: memberAttrs,
+    filename:   `${getTimestamp()}_Group_${groupId}_Members`,
+    sheetName:  "Members",
+    generatedBy: formatGeneratedBy(currentUser),
+  };
+
+  const rowActions = buildRowActions({
+    onRemove:  (row) => setArchiveTarget(row),
+    onAssign:  (row) => openAssignDialog(row),
+    isNoGroup,
+  });
+
+  const toolbarActions = buildToolbarActions({
+    fetchGroup,
+    gid: groupId,
+    pagination,
+    exportConfig,
+    onAddMember: () => setAddMemberOpen(true),
+    getFilters:  () => tableRefsRef.current.getFilters(),
+    getSort:     () => tableRefsRef.current.getSort(),
+  });
+
+  const selectionActions = buildSelectionActions({
+    exportConfig,
+    onRemoveMember:   (row)  => setArchiveTarget(row),
+    onRemoveMembers:  (ids)  => setArchiveIds(ids),
+    onAssignMembers:  (ids)  => openAssignDialog(ids),
+    isNoGroup,
+  });
+
+  const columns = useMemo(
+    () => buildDataColumns(memberAttrs, rowActions),
+    [memberAttrs, isNoGroup],
+  );
+
+  const handleRemoveSuccess = () => {
+    setArchiveTarget(null);
+    setArchiveIds(null);
+    tableRefsRef.current.resetSelection?.();
+    fetchGroup(groupId, { page: 1, limit: pagination.limit });
+  };
+
+  const openAssignDialog = (rowOrIds) => {
+    fetchGroups({ limit: 100 });
+    if (Array.isArray(rowOrIds)) {
+      setAssignIds(rowOrIds);
+      setAssignTarget(null);
+    } else {
+      setAssignTarget(rowOrIds);
+      setAssignIds(null);
+    }
+    setAssignOpen(true);
+  };
+
+  const handleAssign = async (targetGroupId) => {
+    const ids = assignIds ?? [assignTarget?.user_id];
+    await addUsersToGroup(targetGroupId, ids);
+    setAssignOpen(false);
+    setAssignTarget(null);
+    setAssignIds(null);
+    tableRefsRef.current.resetSelection?.();
+    fetchGroup(groupId, { page: 1, limit: pagination.limit });
+  };
+
+  const breadcrumbItems = [
+    { label: "Home",        icon: <House className="size-4" />, to: "/admin" },
+    { label: "User Groups", to: "/admin/groups" },
+    { label: group?.name ?? "View Group" },
+  ];
+
+  const { fmtDate } = useDateFormat();
+
+  const formattedCreated = group?.createdAt ? fmtDate(group.createdAt) : "—";
+  const formattedUpdated = group?.updatedAt ? fmtDate(group.updatedAt) : "—";
+
+  const handleFetch = useCallback(
+    (params) => fetchGroup(groupId, params),
+    [groupId]
+  );
+
+  return (
+    <section className="bg-muted/60 min-h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={breadcrumbItems} />
+        </div>
+
+        <div className="w-full flex flex-col gap-4 pb-8">
+
+          {/* ── Group detail card ──────────────────────────────────────────── */}
+          <div className="bg-card border rounded-xl p-5 flex flex-col gap-4">
+            <div className="flex items-start justify-between gap-3">
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center gap-2">
+                  <h1 className="text-lg font-medium leading-none">
+                    {group?.name ?? "—"}
+                  </h1>
+                  <span
+                    className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
+                      group?.is_active
+                        ? "bg-green-100 text-green-700"
+                        : "bg-red-100 text-red-600"
+                    }`}
+                  >
+                    {group?.is_active ? "Active" : "Inactive"}
+                  </span>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  {group?.description ?? "—"}
+                </p>
+              </div>
+
+              {/* ── Generate invite link button — hidden for NOGRP (system default group) ── */}
+              {group?.group_code && group.group_code !== 'NOGRP' && (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="shrink-0 gap-1.5"
+                  onClick={() => setInviteOpen(true)}
+                >
+                  <QrCode className="size-4" />
+                  Invite link
+                </Button>
+              )}
+            </div>
+
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+              {[
+                { label: "Group Code",   value: group?.group_code ?? "—" },
+                { label: "Members",      value: pagination?.totalRecords ?? 0, icon: <Users className="size-3.5 text-muted-foreground" /> },
+                { label: "Created",      value: formattedCreated },
+                { label: "Last Updated", value: formattedUpdated },
+              ].map(({ label, value, icon }) => (
+                <div key={label} className="bg-muted rounded-lg px-3 py-2">
+                  <span className="block text-[11px] uppercase tracking-wide text-muted-foreground mb-1">
+                    {label}
+                  </span>
+                  <span className="text-sm font-medium flex items-center gap-1.5">
+                    {icon}{value}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* ── Members table ──────────────────────────────────────────────── */}
+          <div className="w-full">
+            <DataTable
+              title="Members"
+              data={members}
+              columns={columns}
+              attributes={memberAttrs}
+              pagination={pagination}
+              setPagination={setPagination}
+              loading={loading}
+              onFetch={handleFetch}
+              onFetchFilterData={fetchUserFieldValues}
+              onRefsReady={handleRefsReady}
+              renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+                <FilterSheet
+                  open={open}
+                  onOpenChange={onOpenChange}
+                  column={column}
+                  attr={attr}
+                  data={data}
+                  loading={loading}
+                />
+              )}
+              columnPinning={columnPinning}
+              toolbarActions={toolbarActions}
+              selectionActions={selectionActions}
+              recordLabel="member"
+              emptyMessage="No members in this group yet."
+            />
+          </div>
+
+        </div>
+      </div>
+
+      {/* ── Invite link dialog ────────────────────────────────────────────── */}
+      <InviteLinkDialog
+        open={inviteOpen}
+        onOpenChange={setInviteOpen}
+        group={group}
+      />
+
+      {/* ── Assign to group dialog (NOGRP members only) ───────────────────── */}
+      <AssignGroupDialog
+        open={assignOpen}
+        onOpenChange={setAssignOpen}
+        userCount={assignIds?.length ?? (assignTarget ? 1 : 0)}
+        groups={groups}
+        loading={loading}
+        onAssign={handleAssign}
+      />
+
+      {/* ── Add member ───────────────────────────────────────────────────── */}
+      <AddSheet
+        open={addMemberOpen}
+        onOpenChange={setAddMemberOpen}
+        title="Add members"
+        submitLabel="Add"
+        users={usersNotIn}
+        loading={loading}
+        onFetch={() => fetchUsersNotInGroup(groupId)}
+        idKey="user_id"
+        labelKey="full_name"
+        warningKey="current_group"
+        onSubmit={async (user_ids) => {
+          await addUsersToGroup(groupId, user_ids);
+          fetchGroup(groupId, { page: 1, limit: pagination.limit });
+        }}
+      />
+
+      {/* ── Single remove ─────────────────────────────────────────────────── */}
+      <ArchiveDialog
+        open={!!archiveTarget}
+        onOpenChange={(v) => !v && setArchiveTarget(null)}
+        entity={archiveTarget}
+        entityLabel="Member"
+        getName={(m) => m?.personal_info?.name?.full_name ?? m?.email}
+        onArchive={(m) => removeUsersFromGroup(groupId, [m?.user_id])}
+        loading={loading}
+        onSuccess={handleRemoveSuccess}
+      />
+
+      {/* ── Bulk remove ───────────────────────────────────────────────────── */}
+      <ArchiveDialog
+        open={!!archiveIds}
+        onOpenChange={(v) => !v && setArchiveIds(null)}
+        ids={archiveIds ?? []}
+        entityLabel="Member"
+        onArchive={({ ids }) => removeUsersFromGroup(groupId, ids)}
+        loading={loading}
+        onSuccess={handleRemoveSuccess}
+      />
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/users/AddStaffUser.jsx b/apps/web/src/modules/admin/pages/users/AddStaffUser.jsx
new file mode 100644
index 0000000..550db64
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/users/AddStaffUser.jsx
@@ -0,0 +1,488 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useForm, useFieldArray, Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { ChevronRight, ChevronLeft, Check, User, FileText } from "lucide-react";
+
+import { useUsers } from "@/contexts/AdminUserContext";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+
+// ─── Zod schema ───────────────────────────────────────────────────────────────
+const phoneSchema = z.object({
+  phone_type:   z.enum(["mobile", "home", "work"]),
+  country_code: z.string().min(1, "Required"),
+  number:       z.string().min(1, "Number is required").regex(/^\d+$/, "Digits only"),
+});
+
+const addressSchema = z.object({
+  address_type: z.enum(["home", "province", "work"]),
+  street:       z.string().min(1, "Street is required"),
+  city:         z.string().min(1, "City is required"),
+  state:        z.string().min(1, "State is required"),
+  zip:          z.string().min(1, "ZIP is required"),
+  country:      z.string().min(1, "Country is required"),
+});
+
+const staffUserSchema = z.object({
+  email:          z.string().min(1, "Email is required").email("Invalid email format"),
+  last_name:      z.string().min(1, "Last name is required"),
+  given_name:     z.string().min(1, "Given name is required"),
+  middle_name:    z.string().optional(),
+  extension_name: z.string().optional(),
+  date_of_birth:  z.string().optional(),
+  occupation:     z.string().optional(),
+  phones:         z.array(phoneSchema).min(1, "At least one phone number is required"),
+  addresses:      z.array(addressSchema).min(1, "At least one address is required"),
+});
+
+// ─── Steps ────────────────────────────────────────────────────────────────────
+const STEPS = [
+  { id: 0, label: "Personal Information", icon: User     },
+  { id: 1, label: "Summary",              icon: FileText },
+];
+
+// ─── Default values ───────────────────────────────────────────────────────────
+const DEFAULT_VALUES = {
+  email:          "",
+  last_name:      "",
+  given_name:     "",
+  middle_name:    "",
+  extension_name: "",
+  date_of_birth:  "",
+  occupation:     "",
+  phones:    [{ phone_type: "mobile", country_code: "63", number: "" }],
+  addresses: [{ address_type: "home", street: "", city: "", state: "", zip: "", country: "Philippines" }],
+};
+
+// ─── Field wrapper ────────────────────────────────────────────────────────────
+function Field({ label, required, error, children }) {
+  return (
+    <div className="space-y-1.5">
+      <Label className="text-sm font-medium">
+        {label}{required && <span className="text-destructive ml-0.5">*</span>}
+      </Label>
+      {children}
+      {error && <p className="text-xs text-destructive">{error}</p>}
+    </div>
+  );
+}
+
+// ─── Step 1 — Personal Information ───────────────────────────────────────────
+function StepPersonal({ control, register, errors }) {
+  const {
+    fields: phoneFields,
+    append: appendPhone,
+    remove: removePhone,
+  } = useFieldArray({ control, name: "phones" });
+
+  const {
+    fields: addressFields,
+    append: appendAddress,
+    remove: removeAddress,
+  } = useFieldArray({ control, name: "addresses" });
+
+  return (
+    <div className="space-y-6">
+
+      {/* ── Name ── */}
+      <div>
+        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">Name</p>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <Field label="Last Name" required error={errors.last_name?.message}>
+            <Input {...register("last_name")} placeholder="Dela Cruz" />
+          </Field>
+          <Field label="Given Name" required error={errors.given_name?.message}>
+            <Input {...register("given_name")} placeholder="Juan" />
+          </Field>
+          <Field label="Middle Name" error={errors.middle_name?.message}>
+            <Input {...register("middle_name")} placeholder="Santos" />
+          </Field>
+          <Field label="Extension Name" error={errors.extension_name?.message}>
+            <Input {...register("extension_name")} placeholder="Jr., Sr., III" />
+          </Field>
+          <Field label="Date of Birth" error={errors.date_of_birth?.message}>
+            <Input type="date" {...register("date_of_birth")} />
+          </Field>
+          <Field label="Occupation" error={errors.occupation?.message}>
+            <Input {...register("occupation")} placeholder="Sales Agent" />
+          </Field>
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* ── Credentials ── */}
+      <div>
+        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">Account Credentials</p>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <Field label="Email" required error={errors.email?.message}>
+            <Input type="email" {...register("email")} placeholder="juan@example.com" />
+          </Field>
+          <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/40 px-3 py-2 text-sm text-muted-foreground sm:col-span-2">
+            <span>🔐</span>
+            <span>A temporary password will be auto-generated and sent to the provided email address.</span>
+          </div>
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* ── Phone Numbers ── */}
+      <div>
+        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">Phone Numbers</p>
+        <div className="space-y-3">
+          {phoneFields.map((field, i) => (
+            <div key={field.id} className="border border-border rounded-lg p-4 space-y-3">
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium text-muted-foreground">Phone {i + 1}</span>
+                {phoneFields.length > 1 && (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="text-destructive h-7 px-2"
+                    onClick={() => removePhone(i)}
+                  >
+                    Remove
+                  </Button>
+                )}
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                <Field label="Type" error={errors.phones?.[i]?.phone_type?.message}>
+                  <Controller
+                    control={control}
+                    name={`phones.${i}.phone_type`}
+                    render={({ field: f }) => (
+                      <Select value={f.value} onValueChange={f.onChange}>
+                        <SelectTrigger><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="mobile">Mobile</SelectItem>
+                          <SelectItem value="home">Home</SelectItem>
+                          <SelectItem value="work">Work</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    )}
+                  />
+                </Field>
+                <Field label="Country Code" error={errors.phones?.[i]?.country_code?.message}>
+                  <Controller
+                    control={control}
+                    name={`phones.${i}.country_code`}
+                    render={({ field: f }) => (
+                      <Select value={f.value} onValueChange={f.onChange}>
+                        <SelectTrigger><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="63">+63 (PH)</SelectItem>
+                          <SelectItem value="1">+1 (US)</SelectItem>
+                          <SelectItem value="44">+44 (UK)</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    )}
+                  />
+                </Field>
+                <Field label="Number" required error={errors.phones?.[i]?.number?.message}>
+                  <Input {...register(`phones.${i}.number`)} placeholder="9123456789" />
+                </Field>
+              </div>
+            </div>
+          ))}
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="w-full"
+            onClick={() => appendPhone({ phone_type: "mobile", country_code: "63", number: "" })}
+          >
+            + Add Phone Number
+          </Button>
+          {errors.phones?.root?.message && (
+            <p className="text-xs text-destructive">{errors.phones.root.message}</p>
+          )}
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* ── Addresses ── */}
+      <div>
+        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">Addresses</p>
+        <div className="space-y-3">
+          {addressFields.map((field, i) => (
+            <div key={field.id} className="border border-border rounded-lg p-4 space-y-3">
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium text-muted-foreground">Address {i + 1}</span>
+                {addressFields.length > 1 && (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="text-destructive h-7 px-2"
+                    onClick={() => removeAddress(i)}
+                  >
+                    Remove
+                  </Button>
+                )}
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                <Field label="Address Type" error={errors.addresses?.[i]?.address_type?.message}>
+                  <Controller
+                    control={control}
+                    name={`addresses.${i}.address_type`}
+                    render={({ field: f }) => (
+                      <Select value={f.value} onValueChange={f.onChange}>
+                        <SelectTrigger><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="home">Home</SelectItem>
+                          <SelectItem value="province">Province</SelectItem>
+                          <SelectItem value="work">Work</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    )}
+                  />
+                </Field>
+                <Field label="Street" required error={errors.addresses?.[i]?.street?.message}>
+                  <Input {...register(`addresses.${i}.street`)} placeholder="123 Mabini St" />
+                </Field>
+                <Field label="City" required error={errors.addresses?.[i]?.city?.message}>
+                  <Input {...register(`addresses.${i}.city`)} placeholder="Manila" />
+                </Field>
+                <Field label="State / Region" required error={errors.addresses?.[i]?.state?.message}>
+                  <Input {...register(`addresses.${i}.state`)} placeholder="NCR" />
+                </Field>
+                <Field label="ZIP Code" required error={errors.addresses?.[i]?.zip?.message}>
+                  <Input {...register(`addresses.${i}.zip`)} placeholder="1000" />
+                </Field>
+                <Field label="Country" error={errors.addresses?.[i]?.country?.message}>
+                  <Input {...register(`addresses.${i}.country`)} placeholder="Philippines" />
+                </Field>
+              </div>
+            </div>
+          ))}
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="w-full"
+            onClick={() => appendAddress({ address_type: "province", street: "", city: "", state: "", zip: "", country: "Philippines" })}
+          >
+            + Add Address
+          </Button>
+          {errors.addresses?.root?.message && (
+            <p className="text-xs text-destructive">{errors.addresses.root.message}</p>
+          )}
+        </div>
+      </div>
+
+    </div>
+  );
+}
+
+// ─── Step 2 — Summary ─────────────────────────────────────────────────────────
+function SummaryRow({ label, value }) {
+  if (!value) return null;
+  return (
+    <div className="flex justify-between py-1.5 text-sm">
+      <span className="text-muted-foreground min-w-[140px]">{label}</span>
+      <span className="text-foreground text-right">{value}</span>
+    </div>
+  );
+}
+
+function StepSummary({ data }) {
+  const fullName =
+    [data.last_name, [data.given_name, data.middle_name].filter(Boolean).join(" ")]
+      .filter(Boolean)
+      .join(", ") + (data.extension_name ? ` ${data.extension_name}` : "");
+
+  return (
+    <div className="space-y-4">
+      <div className="border border-border rounded-lg p-4 space-y-1">
+        <div className="flex items-center gap-2 mb-3">
+          <User className="h-4 w-4 text-muted-foreground" />
+          <span className="text-sm font-medium">Personal Information</span>
+          <Badge variant="secondary" className="ml-auto text-xs">Staff</Badge>
+        </div>
+        <SummaryRow label="Full Name"     value={fullName || "—"} />
+        <SummaryRow label="Email"         value={data.email} />
+        <SummaryRow label="Date of Birth" value={data.date_of_birth} />
+        <SummaryRow label="Occupation"    value={data.occupation} />
+      </div>
+
+      {data.phones?.some((p) => p.number) && (
+        <div className="border border-border rounded-lg p-4 space-y-1">
+          <p className="text-sm font-medium mb-2">Phone Numbers</p>
+          {data.phones.filter((p) => p.number).map((p, i) => (
+            <SummaryRow
+              key={i}
+              label={p.phone_type.charAt(0).toUpperCase() + p.phone_type.slice(1)}
+              value={`+${p.country_code} ${p.number}`}
+            />
+          ))}
+        </div>
+      )}
+
+      {data.addresses?.some((a) => a.street) && (
+        <div className="border border-border rounded-lg p-4 space-y-1">
+          <p className="text-sm font-medium mb-2">Addresses</p>
+          {data.addresses.filter((a) => a.street).map((a, i) => (
+            <SummaryRow
+              key={i}
+              label={a.address_type.charAt(0).toUpperCase() + a.address_type.slice(1)}
+              value={[a.street, a.city, a.state, a.country, a.zip].filter(Boolean).join(", ")}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Main Page ────────────────────────────────────────────────────────────────
+export default function AddStaffUserPage() {
+  const navigate              = useNavigate();
+  const { addStaffUser, loading } = useUsers();
+  const [step, setStep]       = useState(0);
+
+  const {
+    register,
+    control,
+    trigger,
+    getValues,
+    handleSubmit,
+    formState: { errors, isDirty },
+  } = useForm({
+    resolver:      zodResolver(staffUserSchema),
+    defaultValues: DEFAULT_VALUES,
+    mode:          "onTouched",
+  });
+
+  const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty);
+
+  // Validate all fields then advance to summary
+  const handleNext = async () => {
+    const valid = await trigger();
+    if (valid) setStep(1);
+  };
+
+  // Called manually — no <form> tag so no accidental submit
+  const handleCreate = handleSubmit(async (data) => {
+    const payload = {
+      email: data.email,
+      personal_info: {
+        name: {
+          given_name:     data.given_name,
+          last_name:      data.last_name,
+          middle_name:    data.middle_name    ?? "",
+          extension_name: data.extension_name ?? "",
+        },
+        date_of_birth: data.date_of_birth || null,
+        occupation:    data.occupation    ?? "",
+        phone_number:  data.phones,
+        addresses:     data.addresses,
+      },
+    };
+
+    const res = await addStaffUser(payload);
+    if (res) { bypassOnce(); navigate("/admin/users"); }
+  });
+
+  return (
+    // ← plain div, no <form> — prevents any accidental submit on button clicks
+    <div className="max-w-4xl mx-auto px-4 py-8 space-y-6">
+
+      {/* Header */}
+      <div>
+        <h1 className="text-xl font-semibold tracking-tight">Add Staff User</h1>
+        <p className="text-sm text-muted-foreground mt-1">
+          Creates a new account with staff access level.
+        </p>
+      </div>
+
+      {/* Stepper */}
+      <div className="flex items-center gap-0">
+        {STEPS.map((s, i) => {
+          const Icon     = s.icon;
+          const isActive = step === i;
+          const isDone   = step > i;
+
+          return (
+            <div key={s.id} className="flex items-center flex-1 last:flex-none">
+              <div className="flex flex-col items-center gap-1">
+                <div className={cn(
+                  "h-8 w-8 rounded-full flex items-center justify-center border transition-colors",
+                  isDone   && "bg-emerald-600 border-emerald-600 text-white",
+                  isActive && "border-primary bg-primary text-primary-foreground",
+                  !isActive && !isDone && "border-border bg-background text-muted-foreground"
+                )}>
+                  {isDone ? <Check className="h-4 w-4" /> : <Icon className="h-4 w-4" />}
+                </div>
+                <span className={cn(
+                  "text-[11px] font-medium whitespace-nowrap hidden sm:block",
+                  isActive ? "text-foreground"  : "text-muted-foreground",
+                  isDone   ? "text-emerald-600" : ""
+                )}>
+                  {s.label}
+                </span>
+              </div>
+              {i < STEPS.length - 1 && (
+                <div className={cn(
+                  "flex-1 h-px mx-2 mb-4 transition-colors",
+                  step > i ? "bg-emerald-600" : "bg-border"
+                )} />
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Step content */}
+      <div className="border border-border rounded-xl p-5 bg-card min-h-[320px]">
+        <h2 className="text-base font-medium mb-4">{STEPS[step].label}</h2>
+        {step === 0 && (
+          <StepPersonal control={control} register={register} errors={errors} />
+        )}
+        {step === 1 && (
+          <StepSummary data={getValues()} />
+        )}
+      </div>
+
+      {/* Navigation */}
+      <div className="flex items-center justify-between">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={step === 0 ? () => navigate("/admin/users") : () => setStep(0)}
+        >
+          <ChevronLeft className="h-4 w-4 mr-1" />
+          {step === 0 ? "Cancel" : "Back"}
+        </Button>
+
+        {step === 0 ? (
+          <Button type="button" onClick={handleNext}>
+            Next
+            <ChevronRight className="h-4 w-4 ml-1" />
+          </Button>
+        ) : (
+          <Button
+            type="button"          // ← type="button", not "submit"
+            disabled={loading}
+            onClick={handleCreate} // ← called manually
+            className="bg-emerald-600 hover:bg-emerald-700 text-white"
+          >
+            {loading ? "Creating..." : "Create Staff User"}
+          </Button>
+        )}
+      </div>
+
+      {unsavedChangesDialog}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/users/ArchivedUserList.jsx b/apps/web/src/modules/admin/pages/users/ArchivedUserList.jsx
new file mode 100644
index 0000000..08a49d1
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/users/ArchivedUserList.jsx
@@ -0,0 +1,26 @@
+import { House } from "lucide-react";
+
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import ArchiveUserTable from "../../components/users/ArchiveUserTable";
+
+export default function ArchivedUserList() {
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: `/admin` },
+    { label: "Users", to: `/admin/users` },
+    { label: "Archived" },
+  ]
+
+  return (
+    <section className="bg-muted h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6 ">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full">
+          <ArchiveUserTable />
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/users/EditUser.jsx b/apps/web/src/modules/admin/pages/users/EditUser.jsx
new file mode 100644
index 0000000..f45ab3a
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/users/EditUser.jsx
@@ -0,0 +1,457 @@
+// ─── pages/users/EditUser.jsx ─────────────────────────────────────────────────
+import { useEffect, useState }    from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { useUsers }               from "@/contexts/AdminUserContext";
+import { toast }                  from "sonner";
+
+import { useForm, Controller, useFieldArray } from "react-hook-form";
+import { zodResolver }                        from "@hookform/resolvers/zod";
+import { z }                                  from "zod";
+
+import { Button }  from "@/components/ui/button";
+import { Input }   from "@/components/ui/input";
+import { Label }   from "@/components/ui/label";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Select, SelectContent, SelectItem,
+  SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import { ArrowLeft, Save, Plus, Trash2, UserCircle2 } from "lucide-react";
+import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+import { resolveAssetSrc } from "@/utils/media.util";
+
+// ─── Schema ───────────────────────────────────────────────────────────────────
+const addressSchema = z.object({
+  address_type: z.enum(["home", "work", "province", "other"]),
+  street:       z.string().min(1, "Street is required."),
+  city:         z.string().min(1, "City is required."),
+  state:        z.string().min(1, "State is required."),
+  country:      z.string().min(1, "Country is required."),
+  zip:          z.string().min(1, "ZIP is required."),
+});
+
+const phoneSchema = z.object({
+  phone_type:   z.enum(["mobile", "home", "work", "other"]),
+  country_code: z.string().min(1, "Country code is required."),
+  number:       z.string().min(1, "Number is required."),
+});
+
+const editUserSchema = z.object({
+  acc_type:       z.enum(["user", "staff", "admin"]),
+  is_active:      z.boolean(),
+  given_name:     z.string().min(1, "First name is required."),
+  middle_name:    z.string().optional(),
+  last_name:      z.string().min(1, "Last name is required."),
+  extension_name: z.string().optional(),
+  date_of_birth:  z.string().optional(),
+  occupation:     z.string().optional(),
+  addresses:      z.array(addressSchema).optional(),
+  phone_number:   z.array(phoneSchema).optional(),
+});
+
+// ─── Defaults ─────────────────────────────────────────────────────────────────
+const DEFAULT_ADDRESS = {
+  address_type: "home", street: "", city: "",
+  state: "", country: "", zip: "",
+};
+
+const DEFAULT_PHONE = {
+  phone_type: "mobile", country_code: "63", number: "",
+};
+
+export default function EditUser() {
+  const { id }   = useParams();
+  const navigate = useNavigate();
+  const { user, fetchUser, updateUser, loading } = useUsers();
+
+  const [avatarPreview, setAvatarPreview] = useState(null);
+  const [avatarFile,    setAvatarFile]    = useState(null);
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isDirty },
+  } = useForm({
+    resolver:      zodResolver(editUserSchema),
+    defaultValues: {
+      acc_type: "user", is_active: true,
+      given_name: "", middle_name: "", last_name: "",
+      extension_name: "", date_of_birth: "", occupation: "",
+      addresses: [], phone_number: [],
+    },
+  });
+
+  const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty);
+
+  // ─── Field arrays ──────────────────────────────────────────────────────────
+  const {
+    fields:  addressFields,
+    append:  appendAddress,
+    remove:  removeAddress,
+  } = useFieldArray({ control, name: "addresses" });
+
+  const {
+    fields:  phoneFields,
+    append:  appendPhone,
+    remove:  removePhone,
+  } = useFieldArray({ control, name: "phone_number" });
+
+  // ─── Fetch user ────────────────────────────────────────────────────────────
+  useEffect(() => { fetchUser(id); }, [id]);
+
+  // ─── Populate form ────────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!user) return;
+    const info = user.personal_info ?? {};
+    const name = info.name          ?? {};
+
+    setAvatarPreview(resolveAssetSrc(info.avatar) ?? null);
+
+    reset({
+      acc_type:       user.acc_type        ?? "user",
+      is_active:      user.is_active       ?? true,
+      given_name:     name.given_name      ?? "",
+      middle_name:    name.middle_name     ?? "",
+      last_name:      name.last_name       ?? "",
+      extension_name: name.extension_name  ?? "",
+      date_of_birth:  info.date_of_birth   ?? "",
+      occupation:     info.occupation      ?? "",
+      addresses:      (info.addresses ?? []).map(({ full_address: _, ...rest }) => rest),
+      phone_number:   (info.phone_number ?? []).map(({ full_number: _, ...rest }) => rest),
+    });
+  }, [user, reset]);
+
+  // ─── Avatar preview ───────────────────────────────────────────────────────
+  const handleAvatarChange = (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setAvatarFile(file);
+    setAvatarPreview(URL.createObjectURL(file));
+  };
+
+  // ─── Submit ───────────────────────────────────────────────────────────────
+  const onSubmit = async (values) => {
+    const payload = {
+      acc_type:  values.acc_type,
+      is_active: values.is_active,
+      personal_info: {
+        ...user.personal_info,
+        date_of_birth: values.date_of_birth,
+        occupation:    values.occupation,
+        name: {
+          ...user.personal_info?.name,
+          given_name:     values.given_name,
+          middle_name:    values.middle_name,
+          last_name:      values.last_name,
+          extension_name: values.extension_name,
+        },
+        addresses:    values.addresses,
+        phone_number: values.phone_number,
+        // ─── avatar handled separately via file upload API ────────────────
+      },
+    };
+
+    const res = await updateUser(id, payload);
+    if (res) {
+      toast("User updated successfully.");
+      bypassOnce();
+      navigate(`../view/${id}`);
+    } else {
+      toast("Failed to update user.");
+    }
+  };
+
+  if (loading && !user) return (
+    <div className="flex items-center justify-center h-screen">
+      <Spinner className="size-8" />
+    </div>
+  );
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="lg:container lg:mx-auto px-4 py-6 flex flex-col gap-6"
+    >
+      {/* ─── Header ──────────────────────────────────────────────────────── */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <Button type="button" variant="ghost" size="icon" onClick={() => navigate(`/admin/users`)}>
+            <ArrowLeft className="size-4" />
+          </Button>
+          <div>
+            <h1 className="text-2xl font-semibold tracking-tight">Edit User</h1>
+            <p className="text-muted-foreground text-sm">{user?.email}</p>
+          </div>
+        </div>
+        <Button type="submit" disabled={loading || !isDirty}>
+          {loading ? <Spinner className="size-4 mr-2" /> : <Save className="size-4 mr-2" />}
+          Save Changes
+        </Button>
+      </div>
+
+      {/* ─── Avatar ──────────────────────────────────────────────────────── */}
+      <EditSection title="Profile Picture">
+        <div className="col-span-full flex items-center gap-6">
+          {/* Preview */}
+          <div className="size-24 rounded-full border-2 border-border overflow-hidden bg-muted flex items-center justify-center shrink-0">
+            {avatarPreview
+              ? <img src={avatarPreview} alt="Avatar" className="object-cover w-full h-full" />
+              : <UserCircle2 className="size-12 text-muted-foreground" />
+            }
+          </div>
+
+          {/* Upload */}
+          <div className="flex flex-col gap-2">
+            <Label className="text-xs text-muted-foreground">
+              Upload new photo
+            </Label>
+            <Input
+              type="file"
+              accept="image/*"
+              onChange={handleAvatarChange}
+              className="w-fit cursor-pointer text-xs"
+            />
+            <p className="text-xs text-muted-foreground">
+              JPG, PNG or WEBP. Avatar upload requires a separate file upload API.
+            </p>
+          </div>
+        </div>
+      </EditSection>
+
+      {/* ─── Account Information ─────────────────────────────────────────── */}
+      <EditSection title="Account Information">
+        <EditField label="Account Type" error={errors.acc_type?.message} required>
+          <Controller
+            name="acc_type"
+            control={control}
+            render={({ field }) => (
+              <Select value={field.value} onValueChange={field.onChange}>
+                <SelectTrigger className={errors.acc_type ? "border-destructive" : ""}>
+                  <SelectValue placeholder="Select type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="user">User</SelectItem>
+                  <SelectItem value="staff">Staff</SelectItem>
+                  <SelectItem value="admin">Admin</SelectItem>
+                </SelectContent>
+              </Select>
+            )}
+          />
+        </EditField>
+
+        <EditField label="Status" error={errors.is_active?.message}>
+          <Controller
+            name="is_active"
+            control={control}
+            render={({ field }) => (
+              <Select
+                value={String(field.value)}
+                onValueChange={(v) => field.onChange(v === "true")}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select status" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="true">Active</SelectItem>
+                  <SelectItem value="false">Inactive</SelectItem>
+                </SelectContent>
+              </Select>
+            )}
+          />
+        </EditField>
+      </EditSection>
+
+      {/* ─── Personal Information ─────────────────────────────────────────── */}
+      <EditSection title="Personal Information">
+        <EditField label="First Name" error={errors.given_name?.message} required>
+          <Input {...register("given_name")} className={errors.given_name ? "border-destructive" : ""} placeholder="First name" />
+        </EditField>
+        <EditField label="Middle Name" error={errors.middle_name?.message}>
+          <Input {...register("middle_name")} placeholder="Middle name" />
+        </EditField>
+        <EditField label="Last Name" error={errors.last_name?.message} required>
+          <Input {...register("last_name")} className={errors.last_name ? "border-destructive" : ""} placeholder="Last name" />
+        </EditField>
+        <EditField label="Extension Name" error={errors.extension_name?.message}>
+          <Input {...register("extension_name")} placeholder="e.g. Jr., Sr." />
+        </EditField>
+        <EditField label="Date of Birth" error={errors.date_of_birth?.message}>
+          <Input type="date" {...register("date_of_birth")} />
+        </EditField>
+        <EditField label="Occupation" error={errors.occupation?.message}>
+          <Input {...register("occupation")} placeholder="Occupation" />
+        </EditField>
+      </EditSection>
+
+      {/* ─── Addresses ───────────────────────────────────────────────────── */}
+      <div className="bg-card border rounded-lg p-6 flex flex-col gap-4">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+            Addresses
+          </h2>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => appendAddress(DEFAULT_ADDRESS)}
+          >
+            <Plus className="size-3.5 mr-1" /> Add Address
+          </Button>
+        </div>
+
+        {addressFields.length === 0 && (
+          <p className="text-sm text-muted-foreground">No addresses added.</p>
+        )}
+
+        {addressFields.map((field, i) => (
+          <div key={field.id} className="border rounded-lg p-4 flex flex-col gap-4">
+            {/* ─── Address Header ──────────────────────────────────────── */}
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Address {i + 1}</span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="text-destructive hover:text-destructive"
+                onClick={() => removeAddress(i)}
+              >
+                <Trash2 className="size-4" />
+              </Button>
+            </div>
+
+            <div className="grid xs:grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+              <EditField label="Type" error={errors.addresses?.[i]?.address_type?.message} required>
+                <Controller
+                  name={`addresses.${i}.address_type`}
+                  control={control}
+                  render={({ field }) => (
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <SelectTrigger><SelectValue placeholder="Select type" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="home">Home</SelectItem>
+                        <SelectItem value="work">Work</SelectItem>
+                        <SelectItem value="province">Province</SelectItem>
+                        <SelectItem value="other">Other</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  )}
+                />
+              </EditField>
+              <EditField label="Street" error={errors.addresses?.[i]?.street?.message} required>
+                <Input {...register(`addresses.${i}.street`)} placeholder="Street" />
+              </EditField>
+              <EditField label="City" error={errors.addresses?.[i]?.city?.message} required>
+                <Input {...register(`addresses.${i}.city`)} placeholder="City" />
+              </EditField>
+              <EditField label="State / Region" error={errors.addresses?.[i]?.state?.message} required>
+                <Input {...register(`addresses.${i}.state`)} placeholder="State / Region" />
+              </EditField>
+              <EditField label="Country" error={errors.addresses?.[i]?.country?.message} required>
+                <Input {...register(`addresses.${i}.country`)} placeholder="Country" />
+              </EditField>
+              <EditField label="ZIP Code" error={errors.addresses?.[i]?.zip?.message} required>
+                <Input {...register(`addresses.${i}.zip`)} placeholder="ZIP Code" />
+              </EditField>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* ─── Phone Numbers ───────────────────────────────────────────────── */}
+      <div className="bg-card border rounded-lg p-6 flex flex-col gap-4">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+            Phone Numbers
+          </h2>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => appendPhone(DEFAULT_PHONE)}
+          >
+            <Plus className="size-3.5 mr-1" /> Add Phone
+          </Button>
+        </div>
+
+        {phoneFields.length === 0 && (
+          <p className="text-sm text-muted-foreground">No phone numbers added.</p>
+        )}
+
+        {phoneFields.map((field, i) => (
+          <div key={field.id} className="border rounded-lg p-4 flex flex-col gap-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Phone {i + 1}</span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="text-destructive hover:text-destructive"
+                onClick={() => removePhone(i)}
+              >
+                <Trash2 className="size-4" />
+              </Button>
+            </div>
+
+            <div className="grid xs:grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+              <EditField label="Type" error={errors.phone_number?.[i]?.phone_type?.message} required>
+                <Controller
+                  name={`phone_number.${i}.phone_type`}
+                  control={control}
+                  render={({ field }) => (
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <SelectTrigger><SelectValue placeholder="Select type" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="mobile">Mobile</SelectItem>
+                        <SelectItem value="home">Home</SelectItem>
+                        <SelectItem value="work">Work</SelectItem>
+                        <SelectItem value="other">Other</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  )}
+                />
+              </EditField>
+              <EditField label="Country Code" error={errors.phone_number?.[i]?.country_code?.message} required>
+                <Input {...register(`phone_number.${i}.country_code`)} placeholder="e.g. 63" />
+              </EditField>
+              <EditField label="Number" error={errors.phone_number?.[i]?.number?.message} required>
+                <Input {...register(`phone_number.${i}.number`)} placeholder="e.g. 9123456789" />
+              </EditField>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {unsavedChangesDialog}
+    </form>
+  );
+}
+
+// ─── Reusable EditSection ─────────────────────────────────────────────────────
+function EditSection({ title, children }) {
+  return (
+    <div className="bg-card border rounded-lg p-6 flex flex-col gap-4">
+      <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+        {title}
+      </h2>
+      <div className="grid xs:grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// ─── Reusable EditField ───────────────────────────────────────────────────────
+function EditField({ label, error, required, children }) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <Label className="text-xs text-muted-foreground">
+        {label}
+        {required && <span className="text-destructive ml-1">*</span>}
+      </Label>
+      {children}
+      {error && <p className="text-xs text-destructive">{error}</p>}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/users/UserList.jsx b/apps/web/src/modules/admin/pages/users/UserList.jsx
new file mode 100644
index 0000000..82b709e
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/users/UserList.jsx
@@ -0,0 +1,25 @@
+import { House } from "lucide-react";
+
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import UsersTable from "../../components/users/UserTable";
+
+export default function UserList() {
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: `/admin` },
+    { label: "Users" },
+  ]
+
+  return (
+    <section className="bg-muted h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6 ">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full">
+          <UsersTable />
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/pages/users/ViewUser.jsx b/apps/web/src/modules/admin/pages/users/ViewUser.jsx
new file mode 100644
index 0000000..f351a94
--- /dev/null
+++ b/apps/web/src/modules/admin/pages/users/ViewUser.jsx
@@ -0,0 +1,475 @@
+// ─── pages/users/ViewUser.jsx ─────────────────────────────────────────────────
+import { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { useUsers } from "@/contexts/AdminUserContext";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { Spinner } from "@/components/ui/spinner";
+import { House, Trophy, Award, BadgeCheck, Activity, ChevronLeft, ChevronRight, ShieldBan, ShieldCheck, Pencil } from "lucide-react";
+import { ROLE_CONFIG } from "@/data/profile.data";
+import { BADGE_STYLES } from "@/utils/table.util";
+import { getActionBadge } from "@/data/activity.data";
+import { timeAgo } from "@/utils/timestamp.util";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { BanUserDialog } from "@/components/generic/Dialogs/BanUserDialog";
+import { UnbanDialog } from "@/components/generic/Dialogs/UnbanDialog";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { resolveAssetSrc } from "@/utils/media.util";
+
+// ─── Helper ───────────────────────────────────────────────────────────────────
+const StatusBadge = ({ value }) => (
+  <span className={`inline-flex items-center px-2 py-0.5 rounded-md border text-xs font-medium ${BADGE_STYLES[value] ?? "bg-muted text-muted-foreground border-border"}`}>
+    {value}
+  </span>
+);
+
+const ACHIEVEMENT_ICON = { badge: BadgeCheck, milestone: Trophy };
+
+export default function ViewUser() {
+  const { userId } = useParams();
+  const navigate = useNavigate();
+  const { fmtDate, fmtDateTime } = useDateFormat();
+  const {
+    user, fetchUser, loading,
+    achievements, achievementsLoading, fetchUserAchievements,
+    activity, activityPagination, activityLoading, fetchUserActivity,
+    bans, bansLoading, fetchUserBans,
+    banUser, unbanUser,
+  } = useUsers();
+
+  const [activityPage, setActivityPage] = useState(1);
+  const [banDialogOpen, setBanDialogOpen] = useState(false);
+  const [unbanDialogOpen, setUnbanDialogOpen] = useState(false);
+
+  useEffect(() => {
+    fetchUser(userId);
+    fetchUserAchievements(userId);
+    fetchUserActivity(userId, { page: 1, limit: 10 });
+    fetchUserBans(userId);
+  }, [userId]);
+
+  const loadActivityPage = (p) => {
+    setActivityPage(p);
+    fetchUserActivity(userId, { page: p, limit: 10 });
+  };
+
+  if (loading) return (
+    <div className="flex items-center justify-center h-screen">
+      <Spinner className="size-8" />
+    </div>
+  );
+
+  if (!user) return (
+    <div className="flex items-center justify-center h-screen text-muted-foreground">
+      User not found.
+    </div>
+  );
+
+  const info = user.personal_info ?? {};
+  const name = info.name ?? {};
+  const role = ROLE_CONFIG[user.acc_type] ?? { label: user.acc_type, variant: "outline" };
+
+  return (
+    <div className="lg:container lg:mx-auto px-4 py-6 flex flex-col gap-6">
+
+      {/* ─── Breadcrumb ──────────────────────────────────────────────────── */}
+      <AppBreadcrumb items={[
+        { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+        { label: "Users", to: "/admin/users" },
+        { label: name.full_name ?? user.email ?? "View User" },
+      ]} />
+
+      {/* ─── Header ──────────────────────────────────────────────────────── */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <Avatar className="size-11 shrink-0">
+            <AvatarImage src={resolveAssetSrc(user.personal_info?.avatar) ?? undefined} alt={name.full_name ?? user.email} />
+            <AvatarFallback className="text-sm font-semibold">
+              {(name.full_name ?? user.email ?? "?")
+                .split(" ").map((n) => n[0]).slice(0, 2).join("").toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+          <div>
+            <div className="flex items-center gap-2">
+              <h1 className="text-2xl font-semibold tracking-tight">
+                {name.full_name ?? "—"}
+              </h1>
+              {user.is_banned && (
+                <Badge variant="outline" className="text-xs text-destructive border-destructive/50 bg-destructive/5">
+                  <ShieldBan className="size-3 mr-1" /> Banned
+                </Badge>
+              )}
+            </div>
+            <p className="text-muted-foreground text-sm">{user.email}</p>
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => navigate(`/admin/users/edit/${userId}`)}
+          >
+            <Pencil className="size-4 mr-1.5" /> Edit Info
+          </Button>
+          {user.is_banned ? (
+            <Button
+              size="sm"
+              className="bg-emerald-600 text-white hover:bg-emerald-700"
+              onClick={() => setUnbanDialogOpen(true)}
+            >
+              <ShieldCheck className="size-4 mr-1.5" /> Unban User
+            </Button>
+          ) : user.is_active ? (
+            <Button
+              size="sm"
+              variant="destructive"
+              onClick={() => setBanDialogOpen(true)}
+            >
+              <ShieldBan className="size-4 mr-1.5" /> Ban User
+            </Button>
+          ) : null}
+        </div>
+      </div>
+
+      {/* ─── Account Info ────────────────────────────────────────────────── */}
+      <Section title="Account Information">
+        <Field label="Account Type">
+          <StatusBadge value={user.acc_type} />
+        </Field>
+        <Field label="Status">
+          <StatusBadge value={user.is_active ? "Active" : "Not Active"} />
+        </Field>
+        <Field label="Ban Status">
+          <StatusBadge value={user.is_banned ? "Banned" : "Not Banned"} />
+        </Field>
+        <Field label="Verified">
+          <StatusBadge value={user.is_verified ? "Verified" : "Not Verified"} />
+        </Field>
+        <Field label="Registration Type">
+          <StatusBadge value={user.reg_type} />
+        </Field>
+        {user.ban_expires_at && (
+          <Field label="Ban Expires">
+            {fmtDateTime(user.ban_expires_at)}
+          </Field>
+        )}
+      </Section>
+
+      {/* ─── Personal Info ───────────────────────────────────────────────── */}
+      <Section title="Personal Information">
+        <Field label="First Name">{name.given_name ?? "—"}</Field>
+        <Field label="Middle Name">{name.middle_name ?? "—"}</Field>
+        <Field label="Last Name">{name.last_name ?? "—"}</Field>
+        <Field label="Extension">{name.extension_name ?? "—"}</Field>
+        <Field label="Date of Birth">{info.date_of_birth ?? "—"}</Field>
+        <Field label="Occupation">{info.occupation ?? "—"}</Field>
+      </Section>
+
+      {/* ─── Addresses ───────────────────────────────────────────────────── */}
+      {info.addresses?.length > 0 && (
+        <Section title="Addresses">
+          {info.addresses.map((addr, i) => (
+            <Field key={i} label={`${addr.address_type} address`} capitalize>
+              {addr.full_address ?? "—"}
+            </Field>
+          ))}
+        </Section>
+      )}
+
+      {/* ─── Phone Numbers ───────────────────────────────────────────────── */}
+      {info.phone_number?.length > 0 && (
+        <Section title="Phone Numbers">
+          {info.phone_number.map((ph, i) => (
+            <Field key={i} label={`${ph.phone_type} number`} capitalize>
+              +{ph.full_number ?? "—"}
+            </Field>
+          ))}
+        </Section>
+      )}
+
+      {/* ─── Groups ──────────────────────────────────────────────────────── */}
+      {user.groups?.length > 0 && (
+        <Section title="Groups">
+          <div className="flex flex-wrap gap-2">
+            {user.groups.map((g) => (
+              <Badge key={g.group_id} variant="outline">{g.name}</Badge>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* ─── Achievements ────────────────────────────────────────────────── */}
+      <div className="bg-card border rounded-lg p-6 flex flex-col gap-4">
+        <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-2">
+          <Trophy className="size-4" /> Achievements & Certificates
+        </h2>
+        {achievementsLoading ? (
+          <div className="space-y-3">
+            {[...Array(2)].map((_, i) => (
+              <div key={i} className="flex items-center gap-3">
+                <Skeleton className="h-8 w-8 rounded-full" />
+                <div className="space-y-1 flex-1">
+                  <Skeleton className="h-3 w-40" />
+                  <Skeleton className="h-3 w-64" />
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : achievements.length > 0 ? (
+          <div className="grid xs:grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+            {achievements.map((a) => {
+              const Icon = ACHIEVEMENT_ICON[a.type] ?? Award;
+              const isCert = a.key.startsWith("course_completed_");
+              return (
+                <div key={a.achievement_id} className="flex items-start gap-3 p-3 rounded-lg border bg-muted/40">
+                  <div className={`h-8 w-8 rounded-full flex items-center justify-center shrink-0 ${isCert ? "bg-amber-100 text-amber-600 dark:bg-amber-900/40 dark:text-amber-400" : "bg-secondary text-secondary-foreground"}`}>
+                    <Icon className="size-4" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium truncate">{a.label}</p>
+                    <p className="text-xs text-muted-foreground truncate">{a.description}</p>
+                    <p className="text-xs text-muted-foreground mt-0.5">
+                      {fmtDate(a.granted_at)}
+                    </p>
+                  </div>
+                  {isCert && (
+                    <Badge variant="outline" className="text-xs shrink-0 text-green-600 border-green-500">
+                      Verified
+                    </Badge>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground">No achievements yet.</p>
+        )}
+      </div>
+
+      {/* ─── Activity ────────────────────────────────────────────────────── */}
+      <div className="bg-card border rounded-lg p-6 flex flex-col gap-4">
+        <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-2">
+          <Activity className="size-4" /> Activity Log
+          <div className="ml-auto flex items-center gap-2">
+            {activityPagination.totalRecords > 0 && (
+              <Badge variant="secondary" className="font-normal">
+                {activityPagination.totalRecords} events
+              </Badge>
+            )}
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-6 text-xs px-2"
+              onClick={() => navigate(`/admin/users/${userId}/activity`)}
+            >
+              View all
+            </Button>
+          </div>
+        </h2>
+
+        {activityLoading ? (
+          <div className="space-y-2">
+            {[...Array(5)].map((_, i) => (
+              <div key={i} className="flex items-center gap-3">
+                <Skeleton className="h-5 w-24 rounded-full" />
+                <Skeleton className="h-4 w-20" />
+                <Skeleton className="h-4 w-32 ml-auto" />
+              </div>
+            ))}
+          </div>
+        ) : activity.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No activity recorded yet.</p>
+        ) : (
+          <div className="flex flex-col divide-y divide-border -mx-6">
+            {activity.map((row) => {
+              const { label, className } = getActionBadge(row.action);
+              return (
+                <div key={row.activity_id} className="flex items-center gap-3 px-6 py-2.5 hover:bg-muted/30 transition-colors">
+                  <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border shrink-0 ${className}`}>
+                    {label}
+                  </span>
+                  {row.entity_type ? (
+                    <span className="text-xs text-muted-foreground capitalize">
+                      {row.entity_type}{row.entity_id ? ` #${row.entity_id}` : ""}
+                    </span>
+                  ) : (
+                    <span className="text-xs text-muted-foreground/40">—</span>
+                  )}
+                  <span className="ml-auto">
+                    {row.created_at ? (
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <span className="text-xs text-muted-foreground whitespace-nowrap cursor-default">
+                            {timeAgo(row.created_at)}
+                          </span>
+                        </TooltipTrigger>
+                        <TooltipContent side="left">
+                          {fmtDateTime(row.created_at)}
+                        </TooltipContent>
+                      </Tooltip>
+                    ) : (
+                      <span className="text-xs text-muted-foreground/40">—</span>
+                    )}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {activityPagination.totalPages > 1 && (
+          <div className="flex items-center justify-between pt-2 border-t text-xs text-muted-foreground">
+            <span>Page {activityPage} of {activityPagination.totalPages}</span>
+            <div className="flex gap-1">
+              <Button
+                variant="outline" size="icon" className="h-6 w-6"
+                disabled={!activityPagination.hasPrevPage || activityLoading}
+                onClick={() => loadActivityPage(activityPage - 1)}
+              >
+                <ChevronLeft className="size-3" />
+              </Button>
+              <Button
+                variant="outline" size="icon" className="h-6 w-6"
+                disabled={!activityPagination.hasNextPage || activityLoading}
+                onClick={() => loadActivityPage(activityPage + 1)}
+              >
+                <ChevronRight className="size-3" />
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* ─── Ban History ─────────────────────────────────────────────────── */}
+      <div className="bg-card border rounded-lg p-6 flex flex-col gap-4">
+        <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-2">
+          <ShieldBan className="size-4" /> Ban History
+          {bans.length > 0 && (
+            <Badge variant="secondary" className="ml-auto font-normal">
+              {bans.length} record{bans.length !== 1 ? "s" : ""}
+            </Badge>
+          )}
+        </h2>
+
+        {bansLoading ? (
+          <div className="space-y-3">
+            {[...Array(2)].map((_, i) => (
+              <div key={i} className="flex items-center gap-3">
+                <Skeleton className="h-5 w-20 rounded-full" />
+                <Skeleton className="h-4 w-48" />
+                <Skeleton className="h-4 w-24 ml-auto" />
+              </div>
+            ))}
+          </div>
+        ) : bans.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No bans on record.</p>
+        ) : (
+          <div className="flex flex-col divide-y divide-border -mx-6">
+            {bans.map((ban) => (
+              <div key={ban.ban_id} className="flex flex-col gap-1 px-6 py-3 hover:bg-muted/30 transition-colors">
+                <div className="flex items-center gap-2 flex-wrap">
+                  <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border shrink-0 ${
+                    ban.is_lifted
+                      ? "bg-emerald-50 text-emerald-700 border-emerald-300 dark:bg-emerald-900/20 dark:text-emerald-400"
+                      : "bg-destructive/10 text-destructive border-destructive/30"
+                  }`}>
+                    {ban.is_lifted ? "Lifted" : ban.ban_type === "permanent" ? "Permanent" : "Temporary"}
+                  </span>
+                  <span className="text-sm font-medium truncate flex-1">{ban.reason}</span>
+                  <span className="text-xs text-muted-foreground whitespace-nowrap ml-auto">
+                    {fmtDate(ban.banned_at)}
+                  </span>
+                </div>
+                <div className="flex flex-wrap gap-x-4 gap-y-0.5 text-xs text-muted-foreground">
+                  <span>
+                    Banned by{" "}
+                    <span className="text-foreground font-medium">
+                      {ban.banner?.personal_info?.name?.full_name ?? ban.banner?.email ?? "—"}
+                    </span>
+                  </span>
+                  {ban.ban_type === "temporary" && ban.expires_at && (
+                    <span>
+                      Until{" "}
+                      <span className="text-foreground">
+                        {fmtDate(ban.expires_at)}
+                      </span>
+                    </span>
+                  )}
+                  {ban.is_lifted && ban.lifter && (
+                    <span>
+                      Lifted by{" "}
+                      <span className="text-foreground font-medium">
+                        {ban.lifter?.personal_info?.name?.full_name ?? ban.lifter?.email ?? "—"}
+                      </span>
+                      {ban.lift_reason && <> — {ban.lift_reason}</>}
+                    </span>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* ─── Audit ───────────────────────────────────────────────────────── */}
+      <Section title="Audit Trail">
+        <Field label="Created At">{fmtDateTime(user.createdAt)}</Field>
+        <Field label="Updated At">{fmtDateTime(user.updatedAt)}</Field>
+        <Field label="Deleted At">{fmtDateTime(user.deletedAt)}</Field>
+      </Section>
+
+      {/* ─── Ban / Unban Dialogs ─────────────────────────────────────────── */}
+      <BanUserDialog
+        open={banDialogOpen}
+        onOpenChange={setBanDialogOpen}
+        entity={user}
+        entityLabel="User"
+        getName={(u) => u?.personal_info?.name?.full_name ?? u?.email}
+        onBan={(payload) => banUser(userId, payload)}
+        loading={loading}
+        onSuccess={() => { fetchUser(userId); fetchUserBans(userId); }}
+      />
+      <UnbanDialog
+        open={unbanDialogOpen}
+        onOpenChange={setUnbanDialogOpen}
+        entity={user}
+        entityLabel="User"
+        getName={(u) => u?.personal_info?.name?.full_name ?? u?.email}
+        onUnban={(payload) => unbanUser(userId, payload)}
+        loading={loading}
+        onSuccess={() => { fetchUser(userId); fetchUserBans(userId); }}
+      />
+
+    </div>
+  );
+}
+
+// ─── Reusable Section ─────────────────────────────────────────────────────────
+function Section({ title, children }) {
+  return (
+    <div className="bg-card border rounded-lg p-6 flex flex-col gap-4">
+      <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+        {title}
+      </h2>
+      <div className="grid xs:grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// ─── Reusable Field ───────────────────────────────────────────────────────────
+function Field({ label, children, capitalize }) {
+  return (
+    <div className="flex flex-col gap-1">
+      <span className="text-xs text-muted-foreground">{label}</span>
+      <span className={`text-sm font-medium ${capitalize ? "capitalize" : ""}`}>
+        {children ?? "—"}
+      </span>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/admin/routes/AdminRoutes.jsx b/apps/web/src/modules/admin/routes/AdminRoutes.jsx
new file mode 100644
index 0000000..3afd78e
--- /dev/null
+++ b/apps/web/src/modules/admin/routes/AdminRoutes.jsx
@@ -0,0 +1,392 @@
+import { Outlet, Navigate } from 'react-router-dom'
+import ProtectedRoute from '../../../routes/ProtectedRoute'
+
+// Layouts
+import AdminLayout from '../layouts/AdminLayout'
+
+// Global Pages
+import AdminDashboard from '../pages/AdminDashboard'
+import ProfilePage from '@/components/generic/Profile'
+
+// Users
+import UserList from '../pages/users/UserList'
+import AddUser from '../pages/users/AddStaffUser'
+import ViewUser from '../pages/users/ViewUser'
+import EditUser from '../pages/users/EditUser'
+
+// User Groups
+import GroupList from '../pages/user_groups/GroupList'
+import ViewGroup from '../pages/user_groups/ViewGroup'
+import ArchivedUserList from '../pages/users/ArchivedUserList'
+import ArchivedGroupList from '../pages/user_groups/ArchivedGroupList'
+
+// Assets
+import AddAsset from "../pages/assets/AddAsset";
+import AddAssetsBulk from "../pages/assets/AddAssetsBulk";
+import ArchivedAssets from "../pages/assets/ArchivedAssets";
+import ViewImageAsset from "../pages/assets/ViewImageAsset";
+import ViewVideoAsset from "../pages/assets/ViewVideoAsset";
+import ViewDocumentAsset from "../pages/assets/ViewDocumentAsset";
+import AssetList from '../pages/assets/AssetList'
+import EditAsset from '../pages/assets/EditAsset'
+
+// Courses
+
+import CourseList from '../pages/courses/CourseList'
+import AddCourse from '../pages/courses/AddCourse'
+import ViewCourse from '../pages/courses/ViewCourse'
+import EditCourse from '../pages/courses/EditCourse'
+import ArchivedCourseList from '../pages/courses/ArchivedCourseList'
+
+// Units
+import UnitsList from '../pages/courses/units/UnitsList'
+import AddUnit from '../pages/courses/units/AddUnit'
+import ViewUnit from '../pages/courses/units/ViewUnit'
+import EditUnit from '../pages/courses/units/EditUnit'
+import ArchivedUnitsList from '../pages/courses/units/ArchivedUnitsList'
+
+// Lessons
+import LessonsList from '../pages/courses/lessons/LessonsList'
+import AddLesson from '../pages/courses/lessons/AddLesson'
+import ViewLesson from '../pages/courses/lessons/ViewLesson'
+import EditLesson from '../pages/courses/lessons/EditLesson'
+import ArchivedLessonsList from '../pages/courses/lessons/ArchivedLessonsList'
+
+// Lesson Page Builder
+import LessonPageBuilder from '../pages/courses/lessons/LessonPageBuilder'
+import ViewLessonPage from '../pages/courses/lessons/ViewLessonPage'
+import ModifyQuiz from '../pages/courses/units/ModifyQuiz'
+import ViewUnitQuiz from '../pages/courses/units/ViewUnitQuiz'
+
+// Standalone Libraries (junction revamp — Units/Lessons run independently)
+import UnitLibraryList from '../pages/library/units/UnitLibraryList'
+import AddLibraryUnit from '../pages/library/units/AddLibraryUnit'
+import EditLibraryUnit from '../pages/library/units/EditLibraryUnit'
+import ViewLibraryUnit from '../pages/library/units/ViewLibraryUnit'
+import ArchivedUnitLibraryList from '../pages/library/units/ArchivedUnitLibraryList'
+import LessonLibraryList from '../pages/library/lessons/LessonLibraryList'
+import AddLibraryLesson from '../pages/library/lessons/AddLibraryLesson'
+import EditLibraryLesson from '../pages/library/lessons/EditLibraryLesson'
+import ViewLibraryLesson from '../pages/library/lessons/ViewLibraryLesson'
+import ArchivedLessonLibraryList from '../pages/library/lessons/ArchivedLessonLibraryList'
+
+// Task List
+
+import TaskList from '../pages/task_list/TaskList'
+import CreateTaskList from '../pages/task_list/CreateTaskList'
+import EditTaskList from '../pages/task_list/EditTaskList'
+import ArchiveTaskList from '../pages/task_list/ArchiveTaskList'
+import ViewTaskList from '../pages/task_list/ViewTaskList'
+
+// Tasks (under Task List)
+
+import CreateTask from '../pages/task_list/task/CreateTask'
+import EditTask from '../pages/task_list/task/EditTask'
+import ViewTask from '../pages/task_list/task/ViewTask'
+import ArchivedTask from '../pages/task_list/task/ArchiveTask'
+import ViewAudioAsset from '../pages/assets/ViewAudioAsset'
+
+// Categories
+import CategoryList from '../pages/categories/CategoryList';
+import ArchivedCategoryList from '../pages/categories/ArchivedCategoryList';
+import AddCategory from '../pages/categories/AddCategory';
+import EditCategory from '../pages/categories/EditCategory';
+
+// Tiers
+import PlanList from '../pages/tiers/PlanList';
+import AddPlan from '../pages/tiers/AddPlan';
+import ViewPlan from '../pages/tiers/ViewPlan';
+import EditPlan from '../pages/tiers/EditPlan';
+import SystemBadges from '../pages/tiers/SystemBadges';
+import UserTierList from '../pages/tiers/UserTierList';
+import PaymentList from '../pages/tiers/PaymentList';
+import ViewPayment from '../pages/tiers/ViewPayment';
+import TierCategories from '../pages/tiers/TierCategories';
+import ArchivedPlanList from '../pages/tiers/ArchivedPlanList';
+import PaymentPolicy from '../pages/tiers/PaymentPolicy';
+import { AddTierCategory, EditTierCategory } from '../pages/tiers/EditTierCategory';
+import ViewTaskCompletion from '../pages/task_list/task/ViewTaskCompletion'
+
+// Advertisements
+import AdvertisementList from '../pages/advertisements/AdvertisementList'
+import AddAdvertisement from '../pages/advertisements/AddAdvertisement'
+import EditAdvertisement from '../pages/advertisements/EditAdvertisement'
+import ViewAdvertisement from '../pages/advertisements/ViewAdvertisement'
+import ArchivedAdvertisementList from '../pages/advertisements/ArchivedAdvertisementList'
+
+
+// Notification Broadcasts
+import NotificationBroadcastList from '../pages/notifications/NotificationBroadcastList'
+import AddNotificationBroadcast from '../pages/notifications/AddNotificationBroadcast'
+import EditNotificationBroadcast from '../pages/notifications/EditNotificationBroadcast'
+import ViewNotificationBroadcast from '../pages/notifications/ViewNotificationBroadcast'
+import Jobs from '../pages/jobs/Jobs'
+import ArchivedNotificationBroadcastList from '../pages/notifications/ArchivedNotificationBroadcastList'
+
+// Activity
+import ActivityFeed from '../pages/activity/ActivityFeed'
+import UserActivityPage from '../pages/activity/UserActivityPage'
+
+
+export const AdminRoutes = {
+  element: <ProtectedRoute allowedRoles={['admin']} />,
+  children: [
+    {
+      path: '/admin',
+      element: <AdminLayout />,        // ← shared sidebar/header for all admin pages
+      children: [
+        // Admin Management
+        { index: true, element: <AdminDashboard /> },         // /admin
+        { path: 'my-profile', element: <ProfilePage /> },
+
+        // Users
+        {
+          path: 'users',
+          element: <Outlet />,
+          children: [
+            { index: true, element: <UserList /> },
+            { path: 'add/staff', element: <AddUser /> },
+            { path: 'view/:userId', element: <ViewUser /> },
+            { path: 'edit/:id', element: <EditUser /> },
+            { path: 'archived', element: <ArchivedUserList /> },
+            { path: ':userId/activity', element: <UserActivityPage /> },
+          ]
+        },
+
+        // User Groups
+        {
+          path: 'groups',
+          element: <Outlet />,
+          children: [
+            { index: true, element: <GroupList /> },
+            { path: 'view/:groupId', element: <ViewGroup /> },
+            { path: 'archived', element: <ArchivedGroupList /> }
+          ]
+        },
+
+        // Content Management
+        {
+          path: 'assets',
+          element: <Outlet />,
+          children: [
+            { index: true, element: <AssetList /> },
+            { path: 'add', element: <AddAsset /> },
+            { path: 'add/bulk', element: <AddAssetsBulk /> },
+            { path: 'archived', element: <ArchivedAssets /> },
+            { path: 'view/image/:assetId', element: <ViewImageAsset /> },
+            { path: 'view/video/:assetId', element: <ViewVideoAsset /> },
+            { path: 'view/document/:assetId', element: <ViewDocumentAsset /> },
+            { path: 'view/audio/:assetId', element: <ViewAudioAsset /> },
+            { path: 'edit/:assetId', element: <EditAsset /> },
+          ],
+        },
+
+        // Courses
+        {
+          path: 'courses',
+          element: <Outlet />,
+          children: [
+            { index: true, element: <CourseList /> },
+            { path: 'archived', element: <ArchivedCourseList /> },
+            { path: 'add', element: <AddCourse /> },
+            { path: ':courseId/view', element: <ViewCourse /> },
+            { path: ':courseId/edit', element: <EditCourse /> },
+
+            // Categories
+            {
+              path: 'categories',
+              element: <Outlet />,
+              children: [
+                { index: true, element: <CategoryList /> },
+                { path: 'archived', element: <ArchivedCategoryList /> },
+                { path: 'add', element: <AddCategory /> },
+                { path: ':id/edit', element: <EditCategory /> },
+              ]
+            },
+
+            // Units
+            {
+              path: ":courseId/units",
+              element: <Outlet />,
+              children: [
+                { index: true, element: <UnitsList /> },
+                { path: 'archived', element: <ArchivedUnitsList /> },
+                { path: 'add', element: <AddUnit /> },
+                { path: ':unitId/view', element: <ViewUnit /> },
+                { path: ':unitId/edit', element: <EditUnit /> },
+                { path: ":unitId/quiz/edit", element: <ModifyQuiz /> },
+                { path: ":unitId/quiz/view", element: <ViewUnitQuiz /> },
+
+                // Lessons
+                {
+                  path: ":unitId/lessons",
+                  element: <Outlet />,
+                  children: [
+                    { index: true, element: <LessonsList /> },
+                    { path: 'archived', element: <ArchivedLessonsList /> },
+                    { path: 'add', element: <AddLesson /> },
+                    { path: ':lessonId/view', element: <ViewLesson /> },
+                    { path: ':lessonId/edit', element: <EditLesson /> },
+                    { path: ':lessonId/page', element: <LessonPageBuilder /> },
+                    { path: ':lessonId/page/view', element: <ViewLessonPage /> },
+                  ]
+                }
+              ]
+            },
+          ]
+        },
+
+
+        // Units Library — standalone Units (junction revamp)
+        {
+          path: 'units',
+          element: <Outlet />,
+          children: [
+            { index: true, element: <UnitLibraryList /> },
+            { path: 'add', element: <AddLibraryUnit /> },
+            { path: 'archived', element: <ArchivedUnitLibraryList /> },
+            { path: ':unitId/view', element: <ViewLibraryUnit /> },
+            { path: ':unitId/edit', element: <EditLibraryUnit /> },
+            // Quiz builder runs in library mode (no :courseId param)
+            { path: ':unitId/quiz/edit', element: <ModifyQuiz /> },
+            { path: ':unitId/quiz/view', element: <ViewUnitQuiz /> },
+          ]
+        },
+
+        // Lessons Library — standalone Lessons (junction revamp)
+        {
+          path: 'lessons',
+          element: <Outlet />,
+          children: [
+            { index: true, element: <LessonLibraryList /> },
+            { path: 'add', element: <AddLibraryLesson /> },
+            { path: 'archived', element: <ArchivedLessonLibraryList /> },
+            { path: ':lessonId/view', element: <ViewLibraryLesson /> },
+            { path: ':lessonId/edit', element: <EditLibraryLesson /> },
+            // Page builder runs in library mode (no :courseId/:unitId params)
+            { path: ':lessonId/page', element: <LessonPageBuilder /> },
+            { path: ':lessonId/page/view', element: <ViewLessonPage /> },
+          ]
+        },
+
+        // Task
+        {
+          path: 'taskList',
+          element: <Outlet />,
+          children: [
+            { index: true, element: <TaskList /> },
+            { path: 'create', element: <CreateTaskList /> },
+            { path: 'archived', element: <ArchiveTaskList /> },
+            { path: ':taskListId/view', element: <ViewTaskList /> },
+            { path: ':taskListId/edit', element: <EditTaskList /> },
+            {
+              path: ':taskListId/tasks',
+              element: <Outlet />,
+              children: [
+                { index: true, element: <Navigate to="../view?tab=tasks" replace /> },
+                { path: 'create', element: <CreateTask /> },
+                { path: 'archived', element: <ArchivedTask /> },
+                { path: ':taskId/view', element: <ViewTask /> },
+                { path: ':taskId/edit', element: <EditTask /> },
+                { path: ':taskId/completions/:completionId/view', element: <ViewTaskCompletion /> },
+              ]
+            }
+          ]
+        },
+
+        // Tiers
+
+        {
+          path: 'tiers',
+          element: <Outlet />,
+          children: [
+            {
+              path: 'plans',
+              element: <Outlet />,
+              children: [
+                { index: true, element: <PlanList /> },
+                { path: 'add', element: <AddPlan /> },
+                { path: 'archived', element: <ArchivedPlanList /> },
+                { path: ':planId/view', element: <ViewPlan /> },
+                { path: ':planId/edit', element: <EditPlan /> },
+                { path: ':planId/payment-policy', element: <PaymentPolicy /> },
+              ]
+            },
+            { path: 'system-badges', element: <SystemBadges /> },
+            {
+              path: 'categories',
+              element: <Outlet />,
+              children: [
+                { index: true, element: <TierCategories /> },
+                { path: 'add', element: <AddTierCategory /> },
+                { path: ':id/edit', element: <EditTierCategory /> },
+              ],
+            },
+            {
+              path: 'users/:userId/tiers',
+              element: <UserTierList />,
+            },
+            {
+              path: 'payments',
+              element: <Outlet />,
+              children: [
+                { index: true, element: <PaymentList /> },
+                { path: ':paymentId/view', element: <ViewPayment /> },
+              ]
+            },
+          ]
+        },
+
+        // Advertisements
+
+        {
+          path: 'advertisements',
+          element: <Outlet />,
+          children: [
+            { index: true, element: <AdvertisementList /> },
+            { path: 'archived', element: <ArchivedAdvertisementList /> },
+            { path: 'add', element: <AddAdvertisement /> },
+            { path: ':advertisementId/view', element: <ViewAdvertisement /> },
+            { path: ':advertisementId/edit', element: <EditAdvertisement /> },
+          ]
+        },
+
+
+        // Jobs (cron scheduling for announcement/notification jobs)
+        { path: 'jobs', element: <Jobs /> },
+
+        // Announcements (admin-authored broadcasts)
+        {
+          path: 'announcements',
+          element: <Outlet />,
+          children: [
+            { index: true, element: <NotificationBroadcastList /> },
+            { path: 'archived', element: <ArchivedNotificationBroadcastList /> },
+            { path: 'add', element: <AddNotificationBroadcast /> },
+            { path: 'settings', element: <Jobs /> },
+            { path: ':broadcastId/view', element: <ViewNotificationBroadcast /> },
+            { path: ':broadcastId/edit', element: <EditNotificationBroadcast /> },
+          ]
+        },
+        
+        // Backwards-compatible aliases (keep old URLs working)
+        {
+          path: 'notifications',
+          element: <Outlet />,
+          children: [
+            { index: true, element: <NotificationBroadcastList /> },
+            { path: 'archived', element: <ArchivedNotificationBroadcastList /> },
+            { path: 'add', element: <AddNotificationBroadcast /> },
+            { path: 'settings', element: <Jobs /> },
+            { path: ':broadcastId/view', element: <ViewNotificationBroadcast /> },
+            { path: ':broadcastId/edit', element: <EditNotificationBroadcast /> },
+          ]
+        },
+        // Activity Feed
+        { path: 'activity', element: <ActivityFeed /> },
+
+        // Add here
+      ]
+    },
+  ],
+}
diff --git a/apps/web/src/modules/auth/components/AuthThemeToggle.jsx b/apps/web/src/modules/auth/components/AuthThemeToggle.jsx
new file mode 100644
index 0000000..8341915
--- /dev/null
+++ b/apps/web/src/modules/auth/components/AuthThemeToggle.jsx
@@ -0,0 +1,22 @@
+import { Sun, Moon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useTheme } from '@/contexts/ThemeContext'
+
+export function AuthThemeToggle({ className }) {
+  const { toggleTheme } = useTheme()
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      aria-label="Toggle light/dark theme"
+      className={cn(
+        'flex size-9 items-center justify-center rounded-xl border dark:border-blue-500 bg-background/80 backdrop-blur-sm transition-colors hover:bg-accent',
+        className,
+      )}
+    >
+      <Sun className="size-4 block dark:hidden" />
+      <Moon className="size-4 hidden dark:block" />
+    </button>
+  )
+}
diff --git a/apps/web/src/modules/auth/components/ForgotPasswordForm.jsx b/apps/web/src/modules/auth/components/ForgotPasswordForm.jsx
new file mode 100644
index 0000000..6073581
--- /dev/null
+++ b/apps/web/src/modules/auth/components/ForgotPasswordForm.jsx
@@ -0,0 +1,520 @@
+/***********************************************************************************************************************************************************************
+ * File Name: ForgotPasswordForm.jsx
+ * Type of Program: Frontend Component
+ * Description: Password reset flow — same procedure for every acc_type (admin,
+ *              staff, user); only reg_type matters (Google accounts are turned
+ *              away, see LoginForm's "Please log in with Google" precedent).
+ *              Step 1 — Email (checks reg_type server-side, sends OTP if system)
+ *              Step 2 — OTP only (verified server-side before advancing)
+ *              Step 3 — New password + confirm, submitted with the verified OTP
+ * Module: User Credentials
+ * Author: lash0000
+ * Date Created: Jul. 4, 2026
+ * Date Modified: Jul. 7, 2026 — split combined OTP+password step into its own
+ *                                verify-then-set-password steps (Kenneth Obsequio)
+ ***********************************************************************************************************************************************************************/
+import { useState, useEffect } from 'react'
+import { useNavigate, useBlocker, Link } from 'react-router-dom'
+import { useForm, Controller } from 'react-hook-form'
+import { useAuth } from '@/contexts/AuthContext'
+import { PageMeta } from '@/contexts/MetadataContext'
+import { z } from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { cn } from '@/lib/utils'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Separator } from '@/components/ui/separator'
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { Eye, EyeOff, LoaderCircle } from 'lucide-react'
+
+const emailSchema = z.object({
+  email: z.string().email('Invalid email address'),
+})
+
+const otpSchema = z.object({
+  otp: z.string().length(6, 'Enter all 6 digits').regex(/^\d{6}$/, 'OTP must contain only digits'),
+})
+
+const passwordSchema = z
+  .object({
+    new_password: z
+      .string()
+      .min(8, 'Password must be at least 8 characters')
+      .regex(/[A-Z]/, 'Must contain at least one uppercase letter')
+      .regex(/[0-9]/, 'Must contain at least one number'),
+    confirm_password: z.string().min(1, 'Please confirm your password'),
+  })
+  .refine((d) => d.new_password === d.confirm_password, {
+    message: 'Passwords do not match',
+    path: ['confirm_password'],
+  })
+
+const STEP_META = [
+  { title: 'Forgot Password', description: 'Reset your account password.' },
+  { title: 'Enter Verification Code', description: 'Enter the 6-digit code sent to your email.' },
+  { title: 'Reset Password', description: 'Choose a new password for your account.' },
+]
+
+export function ForgotPasswordForm({ className, ...props }) {
+  const navigate = useNavigate()
+  const { forgotPassword, verifyResetOtp, resetPassword } = useAuth()
+
+  // 0 = email, 1 = otp, 2 = new password
+  const [step, setStep] = useState(0)
+  const [pendingEmail, setPendingEmail] = useState('')
+  const [pendingOtp, setPendingOtp] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirm, setShowConfirm] = useState(false)
+  const [resendCooldown, setResendCooldown] = useState(0)
+  const [errorDialogOpen, setErrorDialogOpen] = useState(false)
+  const [errorMessage, setErrorMessage] = useState('')
+  const [successDialogOpen, setSuccessDialogOpen] = useState(false)
+  const [googleDialogOpen, setGoogleDialogOpen] = useState(false)
+  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false)
+  const [pendingNewPassword, setPendingNewPassword] = useState('')
+  const [isConfirmingReset, setIsConfirmingReset] = useState(false)
+
+  useEffect(() => {
+    if (resendCooldown <= 0) return
+    const t = setTimeout(() => setResendCooldown((c) => c - 1), 1000)
+    return () => clearTimeout(t)
+  }, [resendCooldown])
+
+  // Past the email step there's an in-progress code/password reset to lose —
+  // warn on tab close/refresh/URL change (native dialog) and on in-app back/
+  // forward navigation (native window.confirm via the router's blocker).
+  const midFlow = step > 0
+
+  useEffect(() => {
+    if (!midFlow) return
+    const handleBeforeUnload = (e) => {
+      e.preventDefault()
+      e.returnValue = ''
+    }
+    window.addEventListener('beforeunload', handleBeforeUnload)
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload)
+  }, [midFlow])
+
+  const blocker = useBlocker(midFlow)
+
+  useEffect(() => {
+    if (blocker.state !== 'blocked') return
+    const leave = window.confirm('You have an unfinished password reset. Leave this page anyway?')
+    if (leave) blocker.proceed()
+    else blocker.reset()
+  }, [blocker])
+
+  // ── Step 1: Email ──────────────────────────────────────────────────────────
+  const {
+    register: regEmail,
+    handleSubmit: submitEmail,
+    formState: { errors: errEmail, isSubmitting: isRequesting },
+  } = useForm({
+    resolver: zodResolver(emailSchema),
+    defaultValues: { email: '' },
+  })
+
+  const onEmailSubmit = async ({ email }) => {
+    const result = await forgotPassword({ email })
+
+    if (!result.success) {
+      if (result.isGoogleAccount) {
+        setGoogleDialogOpen(true)
+      } else {
+        setErrorMessage(result.message)
+        setErrorDialogOpen(true)
+      }
+      return
+    }
+
+    setPendingEmail(email)
+    setResendCooldown(30)
+    setStep(1)
+  }
+
+  const handleGoogleSignIn = () => {
+    window.location.href = `${import.meta.env.VITE_API_URL}/auth/google`
+  }
+
+  // ── Step 2: OTP ─────────────────────────────────────────────────────────────
+  const {
+    control: otpControl,
+    handleSubmit: submitOtp,
+    formState: { errors: errOtp, isSubmitting: isVerifying },
+  } = useForm({
+    resolver: zodResolver(otpSchema),
+    defaultValues: { otp: '' },
+  })
+
+  const onOtpSubmit = async ({ otp }) => {
+    const result = await verifyResetOtp({ email: pendingEmail, otp })
+
+    if (!result.success) {
+      setErrorMessage(result.message)
+      setErrorDialogOpen(true)
+      return
+    }
+
+    setPendingOtp(otp)
+    setStep(2)
+  }
+
+  const handleResend = async () => {
+    if (resendCooldown > 0) return
+
+    const result = await forgotPassword({ email: pendingEmail })
+
+    if (!result.success) {
+      setErrorMessage(result.message)
+      setErrorDialogOpen(true)
+      return
+    }
+
+    setResendCooldown(30)
+  }
+
+  // ── Step 3: New password ────────────────────────────────────────────────────
+  const {
+    register: regPassword,
+    handleSubmit: submitPassword,
+    formState: { errors: errPassword, isSubmitting: isResetting },
+  } = useForm({
+    resolver: zodResolver(passwordSchema),
+    defaultValues: { new_password: '', confirm_password: '' },
+  })
+
+  // Reset revokes every active session and trusted device on every one of the
+  // user's devices (see resetPassword in auth.controller.js) — surface that
+  // up front instead of silently signing the user out everywhere.
+  const onPasswordSubmit = async ({ new_password }) => {
+    setPendingNewPassword(new_password)
+    setConfirmDialogOpen(true)
+  }
+
+  const handleConfirmReset = async () => {
+    setIsConfirmingReset(true)
+    const result = await resetPassword({ email: pendingEmail, otp: pendingOtp, new_password: pendingNewPassword })
+    setIsConfirmingReset(false)
+    setConfirmDialogOpen(false)
+
+    if (!result.success) {
+      setErrorMessage(result.message)
+      setErrorDialogOpen(true)
+      // The verified code may have expired/rotated by now — send them back to re-verify.
+      setStep(1)
+      return
+    }
+
+    setSuccessDialogOpen(true)
+  }
+
+  return (
+    <>
+      <PageMeta
+        title={`${STEP_META[step].title} - Philproperties`}
+        description={STEP_META[step].description}
+        keywords="forgot password, reset password, verification code, philproperties"
+      />
+
+      <div className={cn('flex flex-col', className)} {...props}>
+        {/* ── Step 1: Email ── */}
+        {step === 0 && (
+          <form onSubmit={submitEmail(onEmailSubmit)} className="flex flex-col gap-5">
+            <div className="flex flex-col gap-1">
+              <h1 className="text-2xl font-bold tracking-tighter">Forgot your password?</h1>
+              <p className="text-muted-foreground text-sm text-balance">
+                Enter your email and we'll send you a code to reset it.
+              </p>
+            </div>
+
+            <div className="flex flex-col gap-1.5">
+              <label htmlFor="email" className="text-sm font-medium">Email address</label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="you@example.com"
+                autoComplete="off"
+                disabled={isRequesting}
+                readOnly
+                onFocus={(e) => e.target.removeAttribute('readonly')}
+                {...regEmail('email')}
+              />
+              {errEmail.email && (
+                <p className="text-xs text-destructive">{errEmail.email.message}</p>
+              )}
+            </div>
+
+            <Button type="submit" className="w-full" disabled={isRequesting}>
+              {isRequesting ? (
+                <span className="flex items-center gap-2">
+                  <LoaderCircle className="size-4 animate-spin" />
+                  Sending...
+                </span>
+              ) : (
+                'Send reset code'
+              )}
+            </Button>
+
+            <p className="text-center text-sm text-muted-foreground">
+              Remembered it?{' '}
+              <Link to="/login" className="font-medium underline underline-offset-4">
+                Back to login
+              </Link>
+            </p>
+          </form>
+        )}
+
+        {/* ── Step 2: OTP ── */}
+        {step === 1 && (
+          <form onSubmit={submitOtp(onOtpSubmit)} className="flex flex-col gap-5">
+            <div className="flex flex-col gap-1">
+              <h1 className="text-2xl font-bold tracking-tighter">Enter verification code.</h1>
+              <p className="text-muted-foreground text-sm text-balance">
+                We sent a 6-digit code to{' '}
+                <span className="font-medium text-foreground">{pendingEmail}</span>.
+              </p>
+            </div>
+
+            <div className="flex flex-col gap-1.5">
+              <label className="text-sm font-medium text-center">Verification code</label>
+              <Controller
+                control={otpControl}
+                name="otp"
+                render={({ field }) => (
+                  <InputOTP
+                    maxLength={6}
+                    value={field.value}
+                    onChange={field.onChange}
+                    containerClassName="justify-center"
+                  >
+                    <InputOTPGroup>
+                      {Array.from({ length: 6 }).map((_, i) => (
+                        <InputOTPSlot key={i} index={i} />
+                      ))}
+                    </InputOTPGroup>
+                  </InputOTP>
+                )}
+              />
+              {errOtp.otp && (
+                <p className="text-xs text-destructive text-center">{errOtp.otp.message}</p>
+              )}
+            </div>
+
+            <div className="flex items-center justify-between text-sm -mt-2">
+              <span className="text-muted-foreground">
+                {resendCooldown > 0 ? `Resend in ${resendCooldown}s` : "Didn't receive it?"}
+              </span>
+              <Button
+                type="button"
+                variant="link"
+                size="sm"
+                className="p-0 h-auto font-medium"
+                disabled={resendCooldown > 0}
+                onClick={handleResend}
+              >
+                Resend code
+              </Button>
+            </div>
+
+            <Button type="submit" className="w-full" disabled={isVerifying}>
+              {isVerifying ? (
+                <span className="flex items-center gap-2">
+                  <LoaderCircle className="size-4 animate-spin" />
+                  Verifying...
+                </span>
+              ) : (
+                'Verify'
+              )}
+            </Button>
+
+            <Separator />
+
+            <Button
+              type="button"
+              variant="ghost"
+              className="w-full text-muted-foreground"
+              onClick={() => setStep(0)}
+            >
+              ← Back
+            </Button>
+          </form>
+        )}
+
+        {/* ── Step 3: New password ── */}
+        {step === 2 && (
+          <form onSubmit={submitPassword(onPasswordSubmit)} className="flex flex-col gap-5">
+            <div className="flex flex-col gap-1">
+              <h1 className="text-2xl font-bold tracking-tighter">Choose a new password.</h1>
+              <p className="text-muted-foreground text-sm text-balance">
+                Your code has been verified. Set a new password for your account.
+              </p>
+            </div>
+
+            {/* New password */}
+            <div className="flex flex-col gap-1.5">
+              <label htmlFor="new_password" className="text-sm font-medium">New password</label>
+              <div className="relative">
+                <Input
+                  id="new_password"
+                  type={showPassword ? 'text' : 'password'}
+                  placeholder="Min. 8 chars, 1 uppercase, 1 number"
+                  autoComplete="new-password"
+                  disabled={isResetting}
+                  className="pr-10"
+                  {...regPassword('new_password')}
+                />
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => setShowPassword((v) => !v)}
+                  className="absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                >
+                  {showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+                </Button>
+              </div>
+              {errPassword.new_password && (
+                <p className="text-xs text-destructive">{errPassword.new_password.message}</p>
+              )}
+            </div>
+
+            {/* Confirm password */}
+            <div className="flex flex-col gap-1.5">
+              <label htmlFor="confirm_password" className="text-sm font-medium">Confirm new password</label>
+              <div className="relative">
+                <Input
+                  id="confirm_password"
+                  type={showConfirm ? 'text' : 'password'}
+                  placeholder="Repeat your new password"
+                  autoComplete="new-password"
+                  disabled={isResetting}
+                  className="pr-10"
+                  {...regPassword('confirm_password')}
+                />
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => setShowConfirm((v) => !v)}
+                  className="absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                >
+                  {showConfirm ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+                </Button>
+              </div>
+              {errPassword.confirm_password && (
+                <p className="text-xs text-destructive">{errPassword.confirm_password.message}</p>
+              )}
+            </div>
+
+            <Button type="submit" className="w-full" disabled={isResetting}>
+              {isResetting ? (
+                <span className="flex items-center gap-2">
+                  <LoaderCircle className="size-4 animate-spin" />
+                  Resetting...
+                </span>
+              ) : (
+                'Submit'
+              )}
+            </Button>
+
+            <Separator />
+
+            <Button
+              type="button"
+              variant="ghost"
+              className="w-full text-muted-foreground"
+              onClick={() => setStep(1)}
+            >
+              ← Back
+            </Button>
+          </form>
+        )}
+      </div>
+
+      {/* Error Dialog */}
+      <AlertDialog open={errorDialogOpen} onOpenChange={setErrorDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Something went wrong</AlertDialogTitle>
+            <AlertDialogDescription>{errorMessage}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction onClick={() => setErrorDialogOpen(false)}>Okay</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Google Account Dialog */}
+      <AlertDialog open={googleDialogOpen} onOpenChange={setGoogleDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>This account signs in with Google</AlertDialogTitle>
+            <AlertDialogDescription>
+              We detected that this email is linked to an account created through Google Sign-In.
+              Accounts created this way don't have a password stored with us, so there's nothing
+              to reset here — sign in with Google instead to access your account. If you'd like a
+              password-based login too, you can set one from your account settings after signing in.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setGoogleDialogOpen(false)}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleGoogleSignIn}>Sign in with Google</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Confirm Reset Dialog */}
+      <AlertDialog open={confirmDialogOpen} onOpenChange={(open) => !isConfirmingReset && setConfirmDialogOpen(open)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Sign out of all devices?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Resetting your password will end every active session and sign you out on all
+              devices, including this one. You'll need to log in again with your new password
+              everywhere.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isConfirmingReset}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleConfirmReset} disabled={isConfirmingReset}>
+              {isConfirmingReset ? (
+                <span className="flex items-center gap-2">
+                  <LoaderCircle className="size-4 animate-spin" />
+                  Resetting...
+                </span>
+              ) : (
+                'Reset and sign out everywhere'
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Success Dialog */}
+      <AlertDialog open={successDialogOpen} onOpenChange={setSuccessDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Password changed</AlertDialogTitle>
+            <AlertDialogDescription>
+              Your password has been reset successfully. Please log in with your new password.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction onClick={() => navigate('/login')}>Go to login</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}
diff --git a/apps/web/src/modules/auth/components/LoginForm.jsx b/apps/web/src/modules/auth/components/LoginForm.jsx
new file mode 100644
index 0000000..2d7c42d
--- /dev/null
+++ b/apps/web/src/modules/auth/components/LoginForm.jsx
@@ -0,0 +1,254 @@
+/***********************************************************************************************************************************************************************
+ * File Name: LoginForm.jsx
+ * Type of Program: Frontend Component
+ * Description: Login form using react-hook-form + Zod (no shadcn Form wrapper).
+ *              Supports system login and Google OAuth redirect.
+ * Module: User Credentials
+ * Author: lash0000
+ * Date Created: Oct. 10, 2025
+ ***********************************************************************************************************************************************************************
+ * Change History:
+ * DATE                AUTHOR            LOG NUMBER     DESCRIPTION
+ * Oct. 10, 2025       lash0000          001            Initial creation - STAR Phase 1 Project
+ * May 23, 2026        lash0000          002            Migrated to Zod + zodResolver; removed shadcn Form wrapper
+ ***********************************************************************************************************************************************************************/
+import { useState } from 'react'
+import { useNavigate, Link, useSearchParams } from 'react-router-dom'
+import { useAuth } from '@/contexts/AuthContext'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { cn } from '@/lib/utils'
+import { getRoleHomePath } from '@/utils/roleRedirect.util'
+import { OtpVerifyForm } from './OtpVerifyForm'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Separator } from '@/components/ui/separator'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { Eye, EyeOff, LoaderCircle, Users } from 'lucide-react'
+
+// ─── Schema ──────────────────────────────────────────────────────────────────
+const loginSchema = z.object({
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(1, 'Password is required'),
+})
+
+// ─── Component ───────────────────────────────────────────────────────────────
+export function LoginForm({ className, ...props }) {
+  const { login } = useAuth()
+  const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
+  const groupCode = searchParams.get('group_code') || ''
+
+  const [passwordVisible, setPasswordVisible] = useState(false)
+  const [errorDialogOpen, setErrorDialogOpen] = useState(false)
+  const [errorMessage, setErrorMessage] = useState('')
+  const [otpEmail, setOtpEmail] = useState(null)
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm({
+    resolver: zodResolver(loginSchema),
+    defaultValues: { email: '', password: '' },
+  })
+
+  const handleAuthSuccess = (user) => {
+    navigate(getRoleHomePath(user))
+  }
+
+  const onSubmit = async ({ email, password }) => {
+    const result = await login({ email, password, group_code: groupCode || undefined })
+
+    if (result.success) {
+      if (result.otpRequired === false) {
+        // Trusted device — session was issued directly, no OTP step needed.
+        handleAuthSuccess(result.user)
+        return
+      }
+      // Credentials confirmed — an OTP was emailed. Tokens aren't issued yet.
+      setOtpEmail(result.email)
+      return
+    }
+
+    if (result.errors?.banned) {
+      navigate('/suspended', {
+        state: {
+          reason:         result.errors.reason         ?? null,
+          ban_type:       result.errors.ban_type        ?? null,
+          ban_expires_at: result.errors.ban_expires_at  ?? null,
+        },
+      })
+      return
+    }
+
+    setErrorMessage(result.message || 'Invalid credentials.')
+    setErrorDialogOpen(true)
+  }
+
+  const handleGoogle = () => {
+    const params = groupCode ? `?group_code=${encodeURIComponent(groupCode)}` : ''
+    window.location.href = `${import.meta.env.VITE_API_URL}/auth/google${params}`
+  }
+
+  if (otpEmail) {
+    return (
+      <OtpVerifyForm
+        email={otpEmail}
+        onSuccess={handleAuthSuccess}
+        title="Verify your sign-in"
+        description={`We sent a 6-digit code to ${otpEmail} to finish signing in. It expires in 10 minutes.`}
+        onBack={() => setOtpEmail(null)}
+      />
+    )
+  }
+
+  return (
+    <>
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className={cn('flex flex-col gap-6', className)}
+        {...props}
+      >
+        {/* Header */}
+        <div className="flex flex-col gap-1">
+          <h1 className="text-2xl font-bold tracking-tighter">
+            Take the next step towards new learnings.
+          </h1>
+          <p className="text-muted-foreground text-sm text-balance">
+            Learn and grow for your career.
+          </p>
+        </div>
+
+        {/* Group code notice */}
+        {groupCode && (
+          <div className="flex items-center gap-2 rounded-md border border-dashed px-3 py-2 bg-muted/40">
+            <Users className="size-4 text-muted-foreground shrink-0" />
+            <p className="text-sm text-muted-foreground">
+              Signing in will join group{' '}
+              <span className="font-semibold text-foreground">{groupCode}</span>
+            </p>
+          </div>
+        )}
+
+        {/* Google OAuth */}
+        <Button variant="outline" type="button" onClick={handleGoogle} className="w-full">
+          <svg viewBox="0 0 128 128" className="size-4 mr-2">
+            <path fill="#fff" d="M44.59 4.21a63.28 63.28 0 004.33 120.9 67.6 67.6 0 0032.36.35 57.13 57.13 0 0025.9-13.46 57.44 57.44 0 0016-26.26 74.33 74.33 0 001.61-33.58H65.27v24.69h34.47a29.72 29.72 0 01-12.66 19.52 36.16 36.16 0 01-13.93 5.5 41.29 41.29 0 01-15.1 0A37.16 37.16 0 0144 95.74a39.3 39.3 0 01-14.5-19.42 38.31 38.31 0 010-24.63 39.25 39.25 0 019.18-14.91A37.17 37.17 0 0176.13 27a34.28 34.28 0 0113.64 8q5.83-5.8 11.64-11.63c2-2.09 4.18-4.08 6.15-6.22A61.22 61.22 0 0087.2 4.59a64 64 0 00-42.61-.38z" />
+            <path fill="#e33629" d="M44.59 4.21a64 64 0 0142.61.37 61.22 61.22 0 0120.35 12.62c-2 2.14-4.11 4.14-6.15 6.22Q95.58 29.23 89.77 35a34.28 34.28 0 00-13.64-8 37.17 37.17 0 00-37.46 9.74 39.25 39.25 0 00-9.18 14.91L8.76 35.6A63.53 63.53 0 0144.59 4.21z" />
+            <path fill="#f8bd00" d="M3.26 51.5a62.93 62.93 0 015.5-15.9l20.73 16.09a38.31 38.31 0 000 24.63q-10.36 8-20.73 16.08a63.33 63.33 0 01-5.5-40.9z" />
+            <path fill="#587dbd" d="M65.27 52.15h59.52a74.33 74.33 0 01-1.61 33.58 57.44 57.44 0 01-16 26.26c-6.69-5.22-13.41-10.4-20.1-15.62a29.72 29.72 0 0012.66-19.54H65.27c-.01-8.22 0-16.45 0-24.68z" />
+            <path fill="#319f43" d="M8.75 92.4q10.37-8 20.73-16.08A39.3 39.3 0 0044 95.74a37.16 37.16 0 0014.08 6.08 41.29 41.29 0 0015.1 0 36.16 36.16 0 0013.93-5.5c6.69 5.22 13.41 10.4 20.1 15.62a57.13 57.13 0 01-25.9 13.47 67.6 67.6 0 01-32.36-.35 63 63 0 01-23-11.59A63.73 63.73 0 018.75 92.4z" />
+          </svg>
+          Login with Google
+        </Button>
+
+        <div className="relative flex items-center gap-3 text-xs text-muted-foreground">
+          <Separator className="flex-1" />
+          <span>Or continue with</span>
+          <Separator className="flex-1" />
+        </div>
+
+        {/* Email */}
+        <div className="flex flex-col gap-1.5">
+          <label htmlFor="email" className="text-sm font-medium">Email</label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="Enter your email"
+            autoComplete="off"
+            disabled={isSubmitting}
+            readOnly
+            onFocus={(e) => e.target.removeAttribute('readonly')}
+            {...register('email')}
+          />
+          {errors.email && (
+            <p className="text-sm text-destructive">{errors.email.message}</p>
+          )}
+        </div>
+
+        {/* Password */}
+        <div className="flex flex-col gap-1.5">
+          <div className="flex items-center justify-between">
+            <label htmlFor="password" className="text-sm font-medium">Password</label>
+            <Link
+              to="/forgot-password"
+              className="text-sm text-muted-foreground underline-offset-4 hover:underline"
+            >
+              Forgot password?
+            </Link>
+          </div>
+          <div className="relative">
+            <Input
+              id="password"
+              type={passwordVisible ? 'text' : 'password'}
+              placeholder="Enter your password"
+              autoComplete="off"
+              disabled={isSubmitting}
+              className="pr-10"
+              readOnly
+              onFocus={(e) => e.target.removeAttribute('readonly')}
+              {...register('password')}
+            />
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              onClick={() => setPasswordVisible((v) => !v)}
+              title={passwordVisible ? 'Hide password' : 'Show password'}
+              aria-label={passwordVisible ? 'Hide password' : 'Show password'}
+              className="absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              {passwordVisible ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+            </Button>
+          </div>
+          {errors.password && (
+            <p className="text-sm text-destructive">{errors.password.message}</p>
+          )}
+        </div>
+
+        {/* Submit */}
+        <Button type="submit" className="w-full" disabled={isSubmitting}>
+          {isSubmitting ? (
+            <span className="flex items-center gap-2">
+              <LoaderCircle className="size-4 animate-spin" />
+              Logging in...
+            </span>
+          ) : (
+            'Login'
+          )}
+        </Button>
+
+        <p className="text-center text-sm text-muted-foreground">
+          Don&apos;t have an account?{' '}
+          <Link to="/signup" className="font-medium underline underline-offset-4">
+            Sign up
+          </Link>
+        </p>
+      </form>
+
+      {/* Error Dialog */}
+      <AlertDialog open={errorDialogOpen} onOpenChange={setErrorDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Login failed</AlertDialogTitle>
+            <AlertDialogDescription>{errorMessage}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction onClick={() => setErrorDialogOpen(false)}>Okay</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/auth/components/OtpVerifyForm.jsx b/apps/web/src/modules/auth/components/OtpVerifyForm.jsx
new file mode 100644
index 0000000..0dfe2d2
--- /dev/null
+++ b/apps/web/src/modules/auth/components/OtpVerifyForm.jsx
@@ -0,0 +1,186 @@
+/***********************************************************************************************************************************************************************
+ * File Name: OtpVerifyForm.jsx
+ * Type of Program: Frontend Component
+ * Description: Shared OTP step used by every auth path — registration email
+ *              verification, post-password login, and post-Google login.
+ *              All three funnel through POST /auth/verify-otp, which mints
+ *              tokens/session on success regardless of which path led here.
+ * Module: User Credentials
+ * Author: lash0000
+ * Date Created: Jul. 4, 2026
+ ***********************************************************************************************************************************************************************/
+import { useState, useEffect } from 'react'
+import { useForm, Controller } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { useAuth } from '@/contexts/AuthContext'
+
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { LoaderCircle } from 'lucide-react'
+
+const otpSchema = z.object({
+  otp: z
+    .string()
+    .length(6, 'Enter all 6 digits')
+    .regex(/^\d{6}$/, 'OTP must contain only digits'),
+})
+
+/**
+ * @param {string}   email       — the account this OTP was sent to
+ * @param {function} onSuccess   — called with the authenticated user on success
+ * @param {string}   [title]
+ * @param {string|JSX.Element} [description]
+ * @param {function} [onBack]    — if provided, renders a "back" action (e.g. registration's "back to credentials")
+ */
+export function OtpVerifyForm({ email, onSuccess, title = 'Check your email.', description, onBack }) {
+  const { verifyOTP, resendOTP } = useAuth()
+
+  const [resendCooldown, setResendCooldown] = useState(30)
+  const [errorDialogOpen, setErrorDialogOpen] = useState(false)
+  const [errorMessage, setErrorMessage] = useState('')
+
+  useEffect(() => {
+    if (resendCooldown <= 0) return
+    const t = setTimeout(() => setResendCooldown((c) => c - 1), 1000)
+    return () => clearTimeout(t)
+  }, [resendCooldown])
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting: isVerifying },
+  } = useForm({
+    resolver: zodResolver(otpSchema),
+    defaultValues: { otp: '' },
+  })
+
+  const onVerify = async ({ otp }) => {
+    const result = await verifyOTP({ email, otp })
+
+    if (!result.success) {
+      setErrorMessage(result.message)
+      setErrorDialogOpen(true)
+      return
+    }
+
+    onSuccess(result.user)
+  }
+
+  const handleResend = async () => {
+    if (resendCooldown > 0) return
+
+    const result = await resendOTP({ email })
+
+    if (!result.success) {
+      setErrorMessage(result.message)
+      setErrorDialogOpen(true)
+      return
+    }
+
+    setResendCooldown(30)
+    reset()
+  }
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onVerify)} className="flex flex-col gap-5">
+        <div className="flex flex-col gap-1">
+          <h1 className="text-2xl font-bold tracking-tighter">{title}</h1>
+          <p className="text-muted-foreground text-sm text-balance">
+            {description ?? (
+              <>
+                We sent a 6-digit code to{' '}
+                <span className="font-medium text-foreground">{email}</span>.
+                It expires in 10 minutes.
+              </>
+            )}
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          <Controller
+            control={control}
+            name="otp"
+            render={({ field }) => (
+              <InputOTP
+                maxLength={6}
+                value={field.value}
+                onChange={field.onChange}
+                containerClassName="justify-center"
+              >
+                <InputOTPGroup>
+                  {Array.from({ length: 6 }).map((_, i) => (
+                    <InputOTPSlot key={i} index={i} />
+                  ))}
+                </InputOTPGroup>
+              </InputOTP>
+            )}
+          />
+          {errors.otp && (
+            <p className="text-xs text-destructive text-center">{errors.otp.message}</p>
+          )}
+        </div>
+
+        <Button type="submit" className="w-full" disabled={isVerifying}>
+          {isVerifying ? (
+            <span className="flex items-center gap-2">
+              <LoaderCircle className="size-4 animate-spin" />
+              Verifying...
+            </span>
+          ) : (
+            'Verify'
+          )}
+        </Button>
+
+        <div className="flex items-center justify-between text-sm">
+          <span className="text-muted-foreground">
+            {resendCooldown > 0 ? `Resend in ${resendCooldown}s` : "Didn't receive it?"}
+          </span>
+          <Button
+            type="button"
+            variant="link"
+            size="sm"
+            className="p-0 h-auto font-medium"
+            disabled={resendCooldown > 0}
+            onClick={handleResend}
+          >
+            Resend code
+          </Button>
+        </div>
+
+        {onBack && (
+          <>
+            <Separator />
+            <Button type="button" variant="ghost" className="w-full text-muted-foreground" onClick={onBack}>
+              ← Back
+            </Button>
+          </>
+        )}
+      </form>
+
+      <AlertDialog open={errorDialogOpen} onOpenChange={setErrorDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Verification failed</AlertDialogTitle>
+            <AlertDialogDescription>{errorMessage}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction onClick={() => setErrorDialogOpen(false)}>Okay</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}
diff --git a/apps/web/src/modules/auth/components/RegisterForm.jsx b/apps/web/src/modules/auth/components/RegisterForm.jsx
new file mode 100644
index 0000000..f0523a9
--- /dev/null
+++ b/apps/web/src/modules/auth/components/RegisterForm.jsx
@@ -0,0 +1,779 @@
+/***********************************************************************************************************************************************************************
+ * File Name: RegisterForm.jsx
+ * Type of Program: Frontend Component
+ * Description: Multi-step registration form with Zod + react-hook-form (no shadcn Form wrapper).
+ *              Step 1 — Personal Info (given name, last name, middle name, extension, birthday, occupation, phone)
+ *              Step 2 — Credentials (email, password, confirm, group_code from URL)
+ *              Step 3 — OTP Verify (6-cell input, resend countdown)
+ *              Reads optional group_code from URL (/register?group_code=XXX).
+ * Module: User Credentials
+ * Author: lash0000
+ * Date Created: May 23, 2026
+ ***********************************************************************************************************************************************************************
+ * Change History:
+ * DATE                AUTHOR            LOG NUMBER     DESCRIPTION
+ * May 23, 2026        lash0000          001            Initial creation - STAR Phase 1 Project
+ * May 23, 2026        lash0000          002            birthday + occupation required; all calls via useAuth (register, verifyOTP, resendOTP)
+ ***********************************************************************************************************************************************************************/
+import { useState, useEffect } from 'react'
+import { useNavigate, Link, useSearchParams } from 'react-router-dom'
+import { useForm, Controller } from 'react-hook-form'
+import { useAuth } from '@/contexts/AuthContext'
+import { z } from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { format, parseISO, isValid as isValidDate } from 'date-fns'
+import { isValidPhoneNumber, parsePhoneNumber } from 'react-phone-number-input'
+import { cn } from '@/lib/utils'
+import { useDetectedCountry } from '@/hooks/useDetectedCountry'
+import { OtpVerifyForm } from './OtpVerifyForm'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { PhoneInput } from '@/components/ui/phone-input'
+import { Badge } from '@/components/ui/badge'
+import { Calendar } from '@/components/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Separator } from '@/components/ui/separator'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { Eye, EyeOff, LoaderCircle, Users, Check, CalendarIcon } from 'lucide-react'
+
+// Birthday must put the user's birth year between 3 and 120 years ago (mirrors personalSchema below).
+// Bounds are whole calendar years (Jan 1 / Dec 31) so every month/day is selectable within a boundary year.
+const MIN_BIRTHDATE = new Date(new Date().getFullYear() - 120, 0, 1)
+const MAX_BIRTHDATE = new Date(new Date().getFullYear() - 3, 11, 31)
+
+// ─── Step schemas ─────────────────────────────────────────────────────────────
+const personalSchema = z.object({
+  given_name:     z.string().min(1, 'First name is required').max(50),
+  last_name:      z.string().min(1, 'Last name is required').max(50),
+  middle_name:    z.string().max(50).optional(),
+  extension_name: z.string().max(10).optional(),
+  date_of_birth:  z
+    .string()
+    .min(1, 'Birthday is required')
+    .refine((v) => !isNaN(Date.parse(v)), { message: 'Invalid date' })
+    .refine((v) => {
+      const yearsAgo = new Date().getFullYear() - new Date(v).getFullYear()
+      return yearsAgo >= 3 && yearsAgo <= 120
+    }, { message: 'Must be at least 3 years old' }),
+  occupation:     z.string().min(1, 'Occupation is required').max(100),
+  phone:          z
+    .string()
+    .min(1, 'Phone number is required')
+    .refine((v) => isValidPhoneNumber(v), { message: 'Invalid phone number' }),
+})
+
+const credentialsSchema = z
+  .object({
+    email: z.string().email('Invalid email address'),
+    password: z
+      .string()
+      .min(8, 'Password must be at least 8 characters')
+      .regex(/[A-Z]/, 'Must contain at least one uppercase letter')
+      .regex(/[0-9]/, 'Must contain at least one number'),
+    confirm_password: z.string().min(1, 'Please confirm your password'),
+    group_code: z.string().optional(),
+  })
+  .refine((d) => d.password === d.confirm_password, {
+    message: 'Passwords do not match',
+    path: ['confirm_password'],
+  })
+
+// ─── Stepper indicator ────────────────────────────────────────────────────────
+const STEPS = [
+  { label: 'Personal info' },
+  { label: 'Credentials'   },
+  { label: 'Verify email'  },
+]
+
+function StepIndicator({ current }) {
+  return (
+    <div className="flex items-center gap-0 mb-6">
+      {STEPS.map((s, i) => {
+        const done    = i < current
+        const active  = i === current
+        const isLast  = i === STEPS.length - 1
+
+        return (
+          <div key={i} className="flex items-center flex-1 last:flex-none">
+            {/* Circle */}
+            <div className="flex flex-col items-center gap-1 shrink-0">
+              <div
+                className={cn(
+                  'w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold border transition-colors',
+                  done   && 'bg-primary border-primary text-primary-foreground',
+                  active && 'border-primary text-primary bg-background',
+                  !done && !active && 'border-muted-foreground/30 text-muted-foreground/50 bg-background',
+                )}
+              >
+                {done ? <Check className="size-3.5" strokeWidth={2.5} /> : i + 1}
+              </div>
+              <span
+                className={cn(
+                  'text-[10px] font-medium whitespace-nowrap',
+                  active ? 'text-primary' : done ? 'text-foreground' : 'text-muted-foreground/50',
+                )}
+              >
+                {s.label}
+              </span>
+            </div>
+
+            {/* Connector */}
+            {!isLast && (
+              <div
+                className={cn(
+                  'h-px flex-1 mx-2 mb-4 transition-colors',
+                  done ? 'bg-primary' : 'bg-muted-foreground/20',
+                )}
+              />
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// ─── RegisterForm ─────────────────────────────────────────────────────────────
+export function RegisterForm({ className, ...props }) {
+  const navigate = useNavigate()
+  const { register: authRegister } = useAuth()
+  const [searchParams] = useSearchParams()
+  const groupCode = searchParams.get('group_code') || ''
+
+  // 'choice' = Google vs. manual signup entry screen, 0 = personal, 1 = credentials, 2 = otp
+  const [step, setStep] = useState('choice')
+  const [pendingEmail, setPendingEmail] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirm, setShowConfirm]   = useState(false)
+  const [errorDialogOpen, setErrorDialogOpen] = useState(false)
+  const [errorMessage, setErrorMessage]       = useState('')
+  const [birthdayOpen, setBirthdayOpen]       = useState(false)
+
+  const detectedCountry = useDetectedCountry()
+
+  // Accumulated data across steps
+  const [personalData, setPersonalData] = useState({})
+
+  // ── Pending-verification resume (email already has an unverified account) ──
+  const [resumeDialogOpen, setResumeDialogOpen] = useState(false)
+  const [isResuming, setIsResuming]             = useState(false)
+  const [pendingCreds, setPendingCreds]         = useState(null)
+
+  // ── Confirm-before-create (asked before the register request ever fires) ──
+  const [confirmCreateOpen, setConfirmCreateOpen] = useState(false)
+  const [isCreating, setIsCreating]               = useState(false)
+  const [pendingCredsData, setPendingCredsData]   = useState(null)
+
+  // ── Warn before the tab is closed/reloaded mid-registration ────────────────
+  // Once the user reaches Credentials, submitting can already create a
+  // server-side account + send an OTP — losing the tab here (slow internet,
+  // accidental reload) is what leaves an orphaned unverified account behind.
+  useEffect(() => {
+    if (step === 'choice' || step === 0) return
+
+    const handleBeforeUnload = (e) => {
+      e.preventDefault()
+      e.returnValue = ''
+    }
+
+    window.addEventListener('beforeunload', handleBeforeUnload)
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload)
+  }, [step])
+
+  // ── Step 1: Personal info ─────────────────────────────────────────────────
+  const {
+    register: regPersonal,
+    handleSubmit: submitPersonal,
+    control: controlPersonal,
+    formState: { errors: errPersonal },
+  } = useForm({
+    resolver: zodResolver(personalSchema),
+    defaultValues: { given_name: '', last_name: '', middle_name: '', extension_name: '', date_of_birth: '', occupation: '', phone: '' },
+  })
+
+  const onPersonalNext = (data) => {
+    setPersonalData(data)
+    setStep(1)
+  }
+
+  const handleGoogle = () => {
+    const params = groupCode ? `?group_code=${encodeURIComponent(groupCode)}` : ''
+    window.location.href = `${import.meta.env.VITE_API_URL}/auth/google${params}`
+  }
+
+  // ── Step 2: Credentials ───────────────────────────────────────────────────
+  const {
+    register: regCreds,
+    handleSubmit: submitCreds,
+    formState: { errors: errCreds, isSubmitting: isRegistering },
+  } = useForm({
+    resolver: zodResolver(credentialsSchema),
+    defaultValues: { email: '', password: '', confirm_password: '', group_code: groupCode },
+  })
+
+  const buildPersonalInfo = () => ({
+    name: {
+      given_name:     personalData.given_name,
+      middle_name:    personalData.middle_name    || '',
+      last_name:      personalData.last_name,
+      extension_name: personalData.extension_name || '',
+      full_name:      [
+        `${personalData.last_name},`,
+        personalData.given_name,
+        personalData.middle_name  || '',
+        personalData.extension_name || '',
+      ].filter(Boolean).join(' ').trim(),
+    },
+    date_of_birth: personalData.date_of_birth,
+    occupation:    personalData.occupation,
+    phone_number:  personalData.phone
+      ? (() => {
+          const parsed = parsePhoneNumber(personalData.phone)
+          return [{
+            number:       parsed.nationalNumber,
+            country_code: parsed.countryCallingCode,
+            full_number:  `${parsed.countryCallingCode}${parsed.nationalNumber}`,
+            phone_type:   'mobile',
+          }]
+        })()
+      : [],
+    addresses: [],
+  })
+
+  const submitRegistration = async ({ email, password, group_code }, { confirmResume = false } = {}) => {
+    const result = await authRegister({
+      email,
+      password,
+      personal_info: buildPersonalInfo(),
+      ...(group_code ? { group_code } : {}),
+      ...(confirmResume ? { confirm_resume: true } : {}),
+    })
+
+    if (!result.success) {
+      if (result.errors?.pendingVerification && !confirmResume) {
+        // Same email already has an unverified account sitting server-side —
+        // likely this same user retrying after a dropped connection. Ask
+        // before resending the OTP and reusing that account rather than
+        // dead-ending on a generic "already registered" error.
+        setPendingCreds({ email, password, group_code })
+        setResumeDialogOpen(true)
+        return
+      }
+
+      setErrorMessage(result.message)
+      setErrorDialogOpen(true)
+      return
+    }
+
+    setPendingEmail(email)
+    setStep(2)
+  }
+
+  // Validated credentials don't submit yet — stage them and ask for explicit
+  // confirmation first, since this is the step that actually creates the
+  // server-side account and sends an OTP.
+  const onCredentialsSubmit = (data) => {
+    setPendingCredsData(data)
+    setConfirmCreateOpen(true)
+  }
+
+  const handleConfirmCreate = async () => {
+    if (!pendingCredsData) return
+    setIsCreating(true)
+    try {
+      await submitRegistration(pendingCredsData)
+    } finally {
+      setIsCreating(false)
+      setConfirmCreateOpen(false)
+    }
+  }
+
+  const handleConfirmResume = async () => {
+    if (!pendingCreds) return
+    setIsResuming(true)
+    try {
+      await submitRegistration(pendingCreds, { confirmResume: true })
+    } finally {
+      setIsResuming(false)
+      setResumeDialogOpen(false)
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  return (
+    <>
+      <div className={cn('flex flex-col', className)} {...props}>
+        {step !== 'choice' && <StepIndicator current={step} />}
+
+        {/* ── Entry: Google vs. manual signup ── */}
+        {step === 'choice' && (
+          <div className="flex flex-col gap-5">
+            <div className="flex flex-col gap-1">
+              <h1 className="text-2xl font-bold tracking-tighter">Create your account.</h1>
+              <p className="text-muted-foreground text-sm">Join Philproperties to start learning.</p>
+            </div>
+
+            {/* Group code notice */}
+            {groupCode && (
+              <div className="flex items-center gap-2 rounded-md border border-dashed px-3 py-2 bg-muted/40">
+                <Users className="size-4 text-muted-foreground shrink-0" />
+                <p className="text-sm text-muted-foreground">
+                  Joining group{' '}
+                  <span className="font-semibold text-foreground">{groupCode}</span>
+                </p>
+              </div>
+            )}
+
+            {/* Google OAuth */}
+            <Button variant="outline" type="button" onClick={handleGoogle} className="w-full">
+              <svg viewBox="0 0 128 128" className="size-4 mr-2">
+                <path fill="#fff" d="M44.59 4.21a63.28 63.28 0 004.33 120.9 67.6 67.6 0 0032.36.35 57.13 57.13 0 0025.9-13.46 57.44 57.44 0 0016-26.26 74.33 74.33 0 001.61-33.58H65.27v24.69h34.47a29.72 29.72 0 01-12.66 19.52 36.16 36.16 0 01-13.93 5.5 41.29 41.29 0 01-15.1 0A37.16 37.16 0 0144 95.74a39.3 39.3 0 01-14.5-19.42 38.31 38.31 0 010-24.63 39.25 39.25 0 019.18-14.91A37.17 37.17 0 0176.13 27a34.28 34.28 0 0113.64 8q5.83-5.8 11.64-11.63c2-2.09 4.18-4.08 6.15-6.22A61.22 61.22 0 0087.2 4.59a64 64 0 00-42.61-.38z" />
+                <path fill="#e33629" d="M44.59 4.21a64 64 0 0142.61.37 61.22 61.22 0 0120.35 12.62c-2 2.14-4.11 4.14-6.15 6.22Q95.58 29.23 89.77 35a34.28 34.28 0 00-13.64-8 37.17 37.17 0 00-37.46 9.74 39.25 39.25 0 00-9.18 14.91L8.76 35.6A63.53 63.53 0 0144.59 4.21z" />
+                <path fill="#f8bd00" d="M3.26 51.5a62.93 62.93 0 015.5-15.9l20.73 16.09a38.31 38.31 0 000 24.63q-10.36 8-20.73 16.08a63.33 63.33 0 01-5.5-40.9z" />
+                <path fill="#587dbd" d="M65.27 52.15h59.52a74.33 74.33 0 01-1.61 33.58 57.44 57.44 0 01-16 26.26c-6.69-5.22-13.41-10.4-20.1-15.62a29.72 29.72 0 0012.66-19.54H65.27c-.01-8.22 0-16.45 0-24.68z" />
+                <path fill="#319f43" d="M8.75 92.4q10.37-8 20.73-16.08A39.3 39.3 0 0044 95.74a37.16 37.16 0 0014.08 6.08 41.29 41.29 0 0015.1 0 36.16 36.16 0 0013.93-5.5c6.69 5.22 13.41 10.4 20.1 15.62a57.13 57.13 0 01-25.9 13.47 67.6 67.6 0 01-32.36-.35 63 63 0 01-23-11.59A63.73 63.73 0 018.75 92.4z" />
+              </svg>
+              Login with Google
+            </Button>
+
+            <div className="relative flex items-center gap-3 text-xs text-muted-foreground">
+              <Separator className="flex-1" />
+              <span>Or continue with</span>
+              <Separator className="flex-1" />
+            </div>
+
+            <Button type="button" className="w-full" onClick={() => setStep(0)}>
+              Proceed
+            </Button>
+
+            <p className="text-center text-sm text-muted-foreground">
+              Already have an account?{' '}
+              <Link
+                to={groupCode ? `/login?group_code=${groupCode}` : '/login'}
+                className="font-medium underline underline-offset-4"
+              >
+                Sign in
+              </Link>
+            </p>
+          </div>
+        )}
+
+        {/* ── Step 1: Personal info ── */}
+        {step === 0 && (
+          <form onSubmit={submitPersonal(onPersonalNext)} className="flex flex-col gap-5">
+            <div className="flex flex-col gap-1">
+              <h1 className="text-2xl font-bold tracking-tighter">Personal information.</h1>
+              <p className="text-muted-foreground text-sm">Tell us a bit about yourself.</p>
+            </div>
+
+            {/* Given + Last name row */}
+            <div className="grid grid-cols-2 gap-3">
+              <div className="flex flex-col gap-1.5">
+                <label htmlFor="given_name" className="text-sm font-medium">
+                  First name <span className="text-destructive">*</span>
+                </label>
+                <Input
+                  id="given_name"
+                  placeholder="Juan"
+                  className="text-sm"
+                  {...regPersonal('given_name')}
+                />
+                {errPersonal.given_name && (
+                  <p className="text-xs text-destructive">{errPersonal.given_name.message}</p>
+                )}
+              </div>
+
+              <div className="flex flex-col gap-1.5">
+                <label htmlFor="last_name" className="text-sm font-medium">
+                  Last name <span className="text-destructive">*</span>
+                </label>
+                <Input
+                  id="last_name"
+                  placeholder="Dela Cruz"
+                  className="text-sm"
+                  {...regPersonal('last_name')}
+                />
+                {errPersonal.last_name && (
+                  <p className="text-xs text-destructive">{errPersonal.last_name.message}</p>
+                )}
+              </div>
+            </div>
+
+            {/* Middle name */}
+            <div className="flex flex-col gap-1.5">
+              <label htmlFor="middle_name" className="text-sm font-medium flex items-center gap-1.5">
+                Middle name
+                <span className="text-xs font-normal text-muted-foreground">(optional)</span>
+              </label>
+              <Input
+                id="middle_name"
+                placeholder="Santos"
+                className="text-sm"
+                {...regPersonal('middle_name')}
+              />
+              {errPersonal.middle_name && (
+                <p className="text-xs text-destructive">{errPersonal.middle_name.message}</p>
+              )}
+            </div>
+
+            {/* Extension name + Birthday row */}
+            <div className="grid grid-cols-2 gap-3">
+              <div className="flex flex-col gap-1.5">
+                <label htmlFor="extension_name" className="text-sm font-medium flex items-center gap-1.5">
+                  Extension name
+                  <span className="text-xs font-normal text-muted-foreground">(optional)</span>
+                </label>
+                <Input
+                  id="extension_name"
+                  placeholder="Jr., Sr., III"
+                  className="text-sm"
+                  {...regPersonal('extension_name')}
+                />
+                {errPersonal.extension_name && (
+                  <p className="text-xs text-destructive">{errPersonal.extension_name.message}</p>
+                )}
+              </div>
+
+              <div className="flex flex-col gap-1.5">
+                <label htmlFor="date_of_birth" className="text-sm font-medium">
+                  Birthday <span className="text-destructive">*</span>
+                </label>
+                <Controller
+                  name="date_of_birth"
+                  control={controlPersonal}
+                  render={({ field }) => {
+                    const selectedDate = field.value ? parseISO(field.value) : undefined
+                    const validSelected = selectedDate && isValidDate(selectedDate) ? selectedDate : undefined
+
+                    return (
+                      <Popover open={birthdayOpen} onOpenChange={setBirthdayOpen}>
+                        <PopoverTrigger asChild>
+                          <Button
+                            type="button"
+                            id="date_of_birth"
+                            variant="outline"
+                            className="w-full justify-between font-normal text-sm"
+                          >
+                            {validSelected ? format(validSelected, 'MMM d, yyyy') : 'Select date'}
+                            <CalendarIcon className="h-4 w-4 opacity-50" />
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+                          <Calendar
+                            mode="single"
+                            selected={validSelected}
+                            captionLayout="dropdown"
+                            defaultMonth={validSelected ?? MAX_BIRTHDATE}
+                            startMonth={MIN_BIRTHDATE}
+                            endMonth={MAX_BIRTHDATE}
+                            disabled={{ before: MIN_BIRTHDATE, after: MAX_BIRTHDATE }}
+                            onSelect={(date) => {
+                              field.onChange(date ? format(date, 'yyyy-MM-dd') : '')
+                              setBirthdayOpen(false)
+                            }}
+                          />
+                        </PopoverContent>
+                      </Popover>
+                    )
+                  }}
+                />
+                {errPersonal.date_of_birth && (
+                  <p className="text-xs text-destructive">{errPersonal.date_of_birth.message}</p>
+                )}
+              </div>
+            </div>
+
+            {/* Occupation */}
+            <div className="flex flex-col gap-1.5">
+              <label htmlFor="occupation" className="text-sm font-medium">
+                Occupation <span className="text-destructive">*</span>
+              </label>
+              <Input
+                id="occupation"
+                placeholder="e.g. Real Estate Broker"
+                className="text-sm"
+                {...regPersonal('occupation')}
+              />
+              {errPersonal.occupation && (
+                <p className="text-xs text-destructive">{errPersonal.occupation.message}</p>
+              )}
+            </div>
+
+            {/* Phone */}
+            <div className="flex flex-col gap-1.5">
+              <label htmlFor="phone" className="text-sm font-medium">
+                Phone number <span className="text-destructive">*</span>
+              </label>
+              <Controller
+                name="phone"
+                control={controlPersonal}
+                render={({ field }) => (
+                  <PhoneInput
+                    {...field}
+                    id="phone"
+                    international
+                    defaultCountry={detectedCountry}
+                    className="text-sm"
+                  />
+                )}
+              />
+              {errPersonal.phone && (
+                <p className="text-xs text-destructive">{errPersonal.phone.message}</p>
+              )}
+            </div>
+
+            <div className="flex gap-2 mt-1">
+              <Button type="button" variant="outline" className="flex-1" onClick={() => setStep('choice')}>
+                ← Back
+              </Button>
+              <Button type="submit" className="flex-1">
+                Proceed
+              </Button>
+            </div>
+
+            <p className="text-center text-sm text-muted-foreground">
+              Already have an account?{' '}
+              <Link
+                to={groupCode ? `/login?group_code=${groupCode}` : '/login'}
+                className="font-medium underline underline-offset-4"
+              >
+                Sign in
+              </Link>
+            </p>
+          </form>
+        )}
+
+        {/* ── Step 2: Credentials ── */}
+        {step === 1 && (
+          <form onSubmit={submitCreds(onCredentialsSubmit)} className="flex flex-col gap-5">
+            <div className="flex flex-col gap-1">
+              <h1 className="text-2xl font-bold tracking-tighter">Account credentials.</h1>
+              <p className="text-muted-foreground text-sm">Set your login email and password.</p>
+            </div>
+
+            {/* Group code notice */}
+            {groupCode && (
+              <div className="flex items-center gap-2 rounded-md border border-dashed px-3 py-2 bg-muted/40">
+                <Users className="size-4 text-muted-foreground shrink-0" />
+                <p className="text-sm text-muted-foreground">
+                  Joining group{' '}
+                  <span className="font-semibold text-foreground">{groupCode}</span>
+                </p>
+              </div>
+            )}
+
+            {/* Email */}
+            <div className="flex flex-col gap-1.5">
+              <label htmlFor="email" className="text-sm font-medium">
+                Email address <span className="text-destructive">*</span>
+              </label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="you@example.com"
+                autoComplete="off"
+                disabled={isRegistering}
+                readOnly
+                onFocus={(e) => e.target.removeAttribute('readonly')}
+                className="text-sm"
+                {...regCreds('email')}
+              />
+              {errCreds.email && (
+                <p className="text-xs text-destructive">{errCreds.email.message}</p>
+              )}
+            </div>
+
+            {/* Password */}
+            <div className="flex flex-col gap-1.5">
+              <label htmlFor="password" className="text-sm font-medium">
+                Password <span className="text-destructive">*</span>
+              </label>
+              <div className="relative">
+                <Input
+                  id="password"
+                  type={showPassword ? 'text' : 'password'}
+                  placeholder="Min. 8 chars, 1 uppercase, 1 number"
+                  autoComplete="new-password"
+                  disabled={isRegistering}
+                  className="pr-10 text-sm"
+                  {...regCreds('password')}
+                />
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => setShowPassword((v) => !v)}
+                  className="absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                >
+                  {showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+                </Button>
+              </div>
+              {errCreds.password && (
+                <p className="text-xs text-destructive">{errCreds.password.message}</p>
+              )}
+            </div>
+
+            {/* Confirm password */}
+            <div className="flex flex-col gap-1.5">
+              <label htmlFor="confirm_password" className="text-sm font-medium">
+                Confirm password <span className="text-destructive">*</span>
+              </label>
+              <div className="relative">
+                <Input
+                  id="confirm_password"
+                  type={showConfirm ? 'text' : 'password'}
+                  placeholder="Repeat your password"
+                  autoComplete="new-password"
+                  disabled={isRegistering}
+                  className="pr-10 text-sm"
+                  {...regCreds('confirm_password')}
+                />
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => setShowConfirm((v) => !v)}
+                  className="absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                >
+                  {showConfirm ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+                </Button>
+              </div>
+              {errCreds.confirm_password && (
+                <p className="text-xs text-destructive">{errCreds.confirm_password.message}</p>
+              )}
+            </div>
+
+            {/* Group code — disabled, auto-filled from URL */}
+            <div className="flex flex-col gap-1.5">
+              <label htmlFor="group_code" className="text-sm font-medium flex items-center gap-2">
+                Group code
+                <Badge variant="secondary" className="text-xs font-normal">Auto-filled</Badge>
+              </label>
+              <Input
+                id="group_code"
+                placeholder="No group code"
+                disabled
+                className="text-sm"
+                {...regCreds('group_code')}
+              />
+              <p className="text-xs text-muted-foreground">
+                Provided by your group admin via invite link.
+              </p>
+            </div>
+
+            {/* Navigation */}
+            <div className="flex gap-2 mt-1">
+              <Button
+                type="button"
+                variant="outline"
+                className="flex-1"
+                onClick={() => setStep(0)}
+                disabled={isRegistering}
+              >
+                ← Back
+              </Button>
+              <Button type="submit" className="flex-1" disabled={isRegistering || isCreating}>
+                Create account →
+              </Button>
+            </div>
+
+            <p className="text-center text-sm text-muted-foreground">
+              Already have an account?{' '}
+              <Link
+                to={groupCode ? `/login?group_code=${groupCode}` : '/login'}
+                className="font-medium underline underline-offset-4"
+              >
+                Sign in
+              </Link>
+            </p>
+          </form>
+        )}
+
+        {/* ── Step 3: OTP ── */}
+        {step === 2 && (
+          <OtpVerifyForm
+            email={pendingEmail}
+            onSuccess={() => navigate('/dashboard', { state: { justRegistered: true } })}
+            onBack={() => setStep(1)}
+          />
+        )}
+      </div>
+
+      <AlertDialog open={errorDialogOpen} onOpenChange={setErrorDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Registration failed</AlertDialogTitle>
+            <AlertDialogDescription>{errorMessage}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction onClick={() => setErrorDialogOpen(false)}>Okay</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <AlertDialog open={confirmCreateOpen} onOpenChange={(open) => !isCreating && setConfirmCreateOpen(open)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Create this account?</AlertDialogTitle>
+            <AlertDialogDescription>
+              We'll create your account with{' '}
+              <span className="font-medium text-foreground">{pendingCredsData?.email}</span>{' '}
+              and email a 6-digit verification code to that address.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <Button variant="outline" disabled={isCreating} onClick={() => setConfirmCreateOpen(false)}>
+              Cancel
+            </Button>
+            <AlertDialogAction onClick={handleConfirmCreate} disabled={isCreating}>
+              {isCreating ? (
+                <span className="flex items-center gap-2">
+                  <LoaderCircle className="size-4 animate-spin" />
+                  Creating...
+                </span>
+              ) : (
+                'Proceed'
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <AlertDialog open={resumeDialogOpen} onOpenChange={(open) => !isResuming && setResumeDialogOpen(open)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Pending verification found</AlertDialogTitle>
+            <AlertDialogDescription>
+              This email already started registration but was never verified — likely from a dropped
+              connection. Resend the verification code and continue with the details you just entered?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <Button variant="outline" disabled={isResuming} onClick={() => setResumeDialogOpen(false)}>
+              Cancel
+            </Button>
+            <AlertDialogAction onClick={handleConfirmResume} disabled={isResuming}>
+              {isResuming ? (
+                <span className="flex items-center gap-2">
+                  <LoaderCircle className="size-4 animate-spin" />
+                  Sending...
+                </span>
+              ) : (
+                'Resend code'
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/auth/pages/Auth.jsx b/apps/web/src/modules/auth/pages/Auth.jsx
new file mode 100644
index 0000000..8c8ee08
--- /dev/null
+++ b/apps/web/src/modules/auth/pages/Auth.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Auth = () => {
+  return (
+    <div>
+      Auth Page
+    </div>
+  )
+}
+
+export default Auth
diff --git a/apps/web/src/modules/auth/pages/ChangePassword.jsx b/apps/web/src/modules/auth/pages/ChangePassword.jsx
new file mode 100644
index 0000000..e89f415
--- /dev/null
+++ b/apps/web/src/modules/auth/pages/ChangePassword.jsx
@@ -0,0 +1,173 @@
+/***********************************************************************************************************************************************************************
+ * File Name: ChangePasswordPage.jsx
+ * Type of Program: Frontend Page
+ * Description: Forced password change page shown after first login when
+ *              must_change_password is true. Redirects to the user's dashboard
+ *              on success and clears the flag via the backend.
+ * Author: rgrgogu
+ * Date Created: May 23, 2026
+ ***********************************************************************************************************************************************************************/
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useAuth } from '@/contexts/AuthContext';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Eye, EyeOff, LoaderCircle, ShieldCheck } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import api from '@/utils/api.util';
+import { toast } from 'sonner';
+
+// ─── Schema ───────────────────────────────────────────────────────────────────
+const schema = z
+  .object({
+    new_password: z
+      .string()
+      .min(8,  'Password must be at least 8 characters.')
+      .regex(/[A-Z]/,       'Must contain at least one uppercase letter.')
+      .regex(/[a-z]/,       'Must contain at least one lowercase letter.')
+      .regex(/[0-9]/,       'Must contain at least one number.')
+      .regex(/[^A-Za-z0-9]/, 'Must contain at least one special character.'),
+    confirm_password: z.string().min(1, 'Please confirm your password.'),
+  })
+  .refine((d) => d.new_password === d.confirm_password, {
+    path:    ['confirm_password'],
+    message: 'Passwords do not match.',
+  });
+
+// ─── Field wrapper ─────────────────────────────────────────────────────────────
+function Field({ label, error, children }) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <label className="text-sm font-medium">{label}</label>
+      {children}
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  );
+}
+
+// ─── Password input with toggle ───────────────────────────────────────────────
+function PasswordInput({ visible, onToggle, ...props }) {
+  return (
+    <div className="relative">
+      <Input
+        type={visible ? 'text' : 'password'}
+        className="pr-10"
+        {...props}
+      />
+      <Button
+        type="button"
+        size="sm"
+        variant="ghost"
+        onClick={onToggle}
+        className="absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+      >
+        {visible ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+      </Button>
+    </div>
+  );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+export default function ChangePassword() {
+  const navigate       = useNavigate();
+  const { user, setUser } = useAuth();
+
+  const [showNew,     setShowNew]     = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm({
+    resolver:      zodResolver(schema),
+    defaultValues: { new_password: '', confirm_password: '' },
+  });
+
+  const onSubmit = async ({ new_password }) => {
+    try {
+      await api.post('/auth/change-password', { new_password });
+
+      // Update local user state so must_change_password is cleared
+      setUser((prev) => ({ ...prev, must_change_password: false }));
+
+      toast('Password changed successfully. Welcome!');
+
+      // Redirect to the correct dashboard
+      switch (user?.acc_type) {
+        case 'admin':  navigate('/admin');  break;
+        case 'staff':  navigate('/staff');  break;
+        case 'client': navigate('/client'); break;
+        default:       navigate('/');
+      }
+    } catch (err) {
+      toast(err?.response?.data?.message || 'Could not change password.');
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background px-4">
+      <div className="w-full max-w-md space-y-6">
+
+        {/* Header */}
+        <div className="flex flex-col items-center gap-2 text-center">
+          <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
+            <ShieldCheck className="h-6 w-6 text-primary" />
+          </div>
+          <h1 className="text-2xl font-bold tracking-tight">Set your password</h1>
+          <p className="text-sm text-muted-foreground">
+            Your account requires a new password before you can continue.
+          </p>
+        </div>
+
+        {/* Form */}
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="border border-border rounded-xl p-6 bg-card space-y-4"
+        >
+          <Field label="New Password" error={errors.new_password?.message}>
+            <PasswordInput
+              visible={showNew}
+              onToggle={() => setShowNew((v) => !v)}
+              placeholder="Enter new password"
+              disabled={isSubmitting}
+              {...register('new_password')}
+            />
+          </Field>
+
+          <Field label="Confirm Password" error={errors.confirm_password?.message}>
+            <PasswordInput
+              visible={showConfirm}
+              onToggle={() => setShowConfirm((v) => !v)}
+              placeholder="Confirm new password"
+              disabled={isSubmitting}
+              {...register('confirm_password')}
+            />
+          </Field>
+
+          {/* Password rules hint */}
+          <ul className="text-xs text-muted-foreground space-y-0.5 pl-4 list-disc">
+            <li>At least 8 characters</li>
+            <li>One uppercase &amp; one lowercase letter</li>
+            <li>One number and one special character</li>
+          </ul>
+
+          <Button type="submit" className="w-full" disabled={isSubmitting}>
+            {isSubmitting ? (
+              <span className="flex items-center gap-2">
+                <LoaderCircle className="size-4 animate-spin" />
+                Saving…
+              </span>
+            ) : (
+              'Set Password & Continue'
+            )}
+          </Button>
+        </form>
+
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/auth/pages/ForgotPassword.jsx b/apps/web/src/modules/auth/pages/ForgotPassword.jsx
new file mode 100644
index 0000000..222b03f
--- /dev/null
+++ b/apps/web/src/modules/auth/pages/ForgotPassword.jsx
@@ -0,0 +1,56 @@
+/***********************************************************************************************************************************************************************
+ * File Name: ForgotPassword.jsx
+ * Type of Program: Frontend Page
+ * Description: Forgot-password page. Route: /forgot-password
+ * Module: User Credentials
+ * Author: lash0000
+ * Date Created: Jul. 4, 2026
+ ***********************************************************************************************************************************************************************/
+import { Link } from 'react-router-dom'
+import { ForgotPasswordForm } from '../components/ForgotPasswordForm'
+import { AuthThemeToggle } from '../components/AuthThemeToggle'
+import { MetadataProvider } from '@/contexts/MetadataContext'
+
+export default function ForgotPassword() {
+  return (
+    <MetadataProvider
+      value={{
+        title: 'Forgot Password - Philproperties',
+        description: 'Reset your account password.',
+        keywords: 'forgot password, reset password, philproperties',
+        ogTitle: 'Forgot Password - Philproperties',
+        ogDescription: 'Reset your account password.',
+      }}
+    >
+      <div className="relative grid min-h-svh lg:grid-cols-2">
+        <AuthThemeToggle className="absolute top-4 right-4 z-10" />
+        <div className="flex flex-col gap-4 p-6 md:p-10">
+          <div className="flex justify-center">
+            <Link to="/" className="flex items-center gap-2 font-medium">
+              <div className="xs:w-40 sm:w-48 md:w-56 2xl:w-64 block dark:hidden">
+                <img src="/philpro-white.png" alt="Philproperties" />
+              </div>
+              <div className="xs:w-40 sm:w-48 md:w-56 2xl:w-64 hidden dark:block">
+                <img src="/philpro-dark.png" alt="Philproperties" />
+              </div>
+            </Link>
+          </div>
+
+          <div className="flex flex-1 items-center justify-center">
+            <div className="w-full max-w-sm">
+              <ForgotPasswordForm />
+            </div>
+          </div>
+        </div>
+
+        <div className="relative hidden lg:block">
+          <img
+            src="https://cq5as7pc73.ufs.sh/f/pHNnzIw3VjcgzIbC8SR4stTZRKXP3cfbD6e2p9jmdAUQBuox"
+            alt="Philproperties"
+            className="absolute inset-0 h-full w-full object-cover rounded-3xl p-2"
+          />
+        </div>
+      </div>
+    </MetadataProvider>
+  )
+}
diff --git a/apps/web/src/modules/auth/pages/Intro.jsx b/apps/web/src/modules/auth/pages/Intro.jsx
new file mode 100644
index 0000000..68db983
--- /dev/null
+++ b/apps/web/src/modules/auth/pages/Intro.jsx
@@ -0,0 +1,282 @@
+/***********************************************************************************************************************************************************************
+ * File Name: Intro.jsx
+ * Type of Program: Frontend Page
+ * Description: "Tell us about yourself" onboarding page shown once to every new user
+ *              (system-registered or Google OAuth) before they reach the dashboard.
+ *              Skips rendering and redirects if user.needs_intro is already false.
+ *              On submit: PUT /client/profile → clears needs_intro → navigate /dashboard.
+ * Author: lash0000
+ * Date Created: Jun. 23, 2026
+ ***********************************************************************************************************************************************************************/
+import { useState } from 'react'
+import { Navigate, useNavigate, Link } from 'react-router-dom'
+import { isValidPhoneNumber, parsePhoneNumber } from 'react-phone-number-input'
+import { useAuth } from '@/contexts/AuthContext'
+import { useDetectedCountry } from '@/hooks/useDetectedCountry'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { PhoneInput } from '@/components/ui/phone-input'
+import { Label } from '@/components/ui/label'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { resolveAssetSrc } from '@/utils/media.util'
+import { Loader2 } from 'lucide-react'
+import { toast } from 'sonner'
+import { Toaster } from '@/components/ui/sonner'
+import api from '@/utils/api.util'
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function getInitials(given = '', last = '') {
+  const g = given.trim()[0]?.toUpperCase() ?? ''
+  const l = last.trim()[0]?.toUpperCase() ?? ''
+  return g + l || '?'
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export default function IntroPage() {
+  const navigate = useNavigate()
+  const { user, setUser } = useAuth()
+
+  // Already completed intro — send straight to dashboard
+  if (!user?.needs_intro) return <Navigate to="/dashboard" replace />
+
+  const pi = user?.personal_info ?? {}
+
+  // ── Form state seeded from existing personal_info (Google already has name) ──
+  const [givenName,     setGivenName]     = useState(pi.name?.given_name     ?? '')
+  const [middleName,    setMiddleName]    = useState(pi.name?.middle_name     ?? '')
+  const [lastName,      setLastName]      = useState(pi.name?.last_name       ?? '')
+  const [extensionName, setExtensionName] = useState(pi.name?.extension_name  ?? '')
+  const [dateOfBirth,   setDateOfBirth]   = useState(pi.date_of_birth         ?? '')
+  const [occupation,    setOccupation]    = useState(pi.occupation             ?? '')
+  const [phone,         setPhone]         = useState(
+    pi.phone_number?.[0]?.full_number ? `+${pi.phone_number[0].full_number}` : ''
+  )
+  const [loading, setLoading] = useState(false)
+  const [errors,  setErrors]  = useState({})
+
+  const detectedCountry = useDetectedCountry()
+
+  // ── Derived ────────────────────────────────────────────────────────────────
+
+  const avatarUrl  = resolveAssetSrc(pi.avatar) ?? ''
+  const initials   = getInitials(givenName, lastName)
+  const displayEmail = user?.email ?? ''
+
+  // ── Validation ─────────────────────────────────────────────────────────────
+
+  const validate = () => {
+    const e = {}
+    if (!givenName.trim())  e.givenName  = 'First name is required.'
+    if (!lastName.trim())   e.lastName   = 'Last name is required.'
+    if (!occupation.trim()) e.occupation = 'Occupation is required.'
+    if (!dateOfBirth) {
+      e.dateOfBirth = 'Date of birth is required.'
+    } else {
+      const age = (Date.now() - new Date(dateOfBirth)) / (1000 * 60 * 60 * 24 * 365.25)
+      if (isNaN(age) || age < 13 || age > 120) e.dateOfBirth = 'Please enter a valid date of birth.'
+    }
+    if (!phone.trim()) {
+      e.phone = 'Phone number is required.'
+    } else if (!isValidPhoneNumber(phone)) {
+      e.phone = 'Invalid phone number.'
+    }
+    return e
+  }
+
+  // ── Submit ─────────────────────────────────────────────────────────────────
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+
+    const errs = validate()
+    if (Object.keys(errs).length) {
+      setErrors(errs)
+      return
+    }
+    setErrors({})
+    setLoading(true)
+
+    const fullName = [givenName, middleName, lastName, extensionName].filter(Boolean).join(' ')
+
+    const personal_info = {
+      name: {
+        given_name:     givenName,
+        middle_name:    middleName,
+        last_name:      lastName,
+        extension_name: extensionName,
+        full_name:      fullName,
+      },
+      date_of_birth: dateOfBirth,
+      occupation,
+      phone_number: phone.trim()
+        ? (() => {
+            const parsed = parsePhoneNumber(phone)
+            return [{
+              number:       parsed.nationalNumber,
+              country_code: parsed.countryCallingCode,
+              full_number:  `${parsed.countryCallingCode}${parsed.nationalNumber}`,
+              phone_type:   'mobile',
+            }]
+          })()
+        : (pi.phone_number ?? []),
+      // Preserve existing avatar and addresses
+      ...(pi.avatar    ? { avatar:    pi.avatar    } : {}),
+      ...(pi.addresses ? { addresses: pi.addresses } : {}),
+    }
+
+    try {
+      const { data } = await api.put('/client/profile', { personal_info })
+      // Merge the full returned user object — needs_intro will now be false
+      setUser(prev => ({ ...prev, ...data.data }))
+      navigate('/dashboard')
+    } catch (err) {
+      toast(
+        err?.response?.data?.message ?? 'Could not save your info. Please try again.'
+      )
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+
+  return (
+    <>
+      <Toaster position="bottom-right" richColors />
+      <div className="min-h-svh bg-muted flex items-center justify-center p-6">
+        <div className="w-full max-w-lg">
+
+          {/* Logo */}
+          <div className="flex justify-center mb-8">
+            <Link to="/">
+              <img src="/philpro-white.png" alt="Philproperties" className="w-44 dark:hidden" />
+              <img src="/philpro-dark.png"  alt="Philproperties" className="w-44 hidden dark:block" />
+            </Link>
+          </div>
+
+          {/* Card */}
+          <div className="bg-card rounded-2xl border shadow-sm p-8 space-y-6">
+
+            {/* Header */}
+            <div className="flex flex-col items-center gap-3 text-center">
+              <Avatar className="h-16 w-16">
+                <AvatarImage src={avatarUrl} />
+                <AvatarFallback className="text-lg font-semibold">{initials}</AvatarFallback>
+              </Avatar>
+              <div>
+                <h1 className="text-xl font-bold tracking-tight">Tell us about yourself</h1>
+                <p className="text-sm text-muted-foreground mt-1">
+                  {displayEmail} &nbsp;·&nbsp; This info appears on your profile.
+                </p>
+              </div>
+            </div>
+
+            {/* Form */}
+            <form onSubmit={handleSubmit} className="space-y-4">
+
+              {/* Name row */}
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1.5">
+                  <Label className="text-xs">First name <span className="text-destructive">*</span></Label>
+                  <Input
+                    value={givenName}
+                    onChange={e => setGivenName(e.target.value)}
+                    placeholder="Juan"
+                    disabled={loading}
+                  />
+                  {errors.givenName && <p className="text-xs text-destructive">{errors.givenName}</p>}
+                </div>
+                <div className="space-y-1.5">
+                  <Label className="text-xs">Last name <span className="text-destructive">*</span></Label>
+                  <Input
+                    value={lastName}
+                    onChange={e => setLastName(e.target.value)}
+                    placeholder="Dela Cruz"
+                    disabled={loading}
+                  />
+                  {errors.lastName && <p className="text-xs text-destructive">{errors.lastName}</p>}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1.5">
+                  <Label className="text-xs">
+                    Middle name <span className="text-xs font-normal text-muted-foreground">(optional)</span>
+                  </Label>
+                  <Input
+                    value={middleName}
+                    onChange={e => setMiddleName(e.target.value)}
+                    placeholder="Santos"
+                    disabled={loading}
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <Label className="text-xs">
+                    Extension <span className="text-xs font-normal text-muted-foreground">(optional)</span>
+                  </Label>
+                  <Input
+                    value={extensionName}
+                    onChange={e => setExtensionName(e.target.value)}
+                    placeholder="Jr., Sr., III"
+                    disabled={loading}
+                  />
+                </div>
+              </div>
+
+              {/* Date of birth */}
+              <div className="space-y-1.5">
+                <Label className="text-xs">Date of birth <span className="text-destructive">*</span></Label>
+                <Input
+                  type="date"
+                  value={dateOfBirth}
+                  onChange={e => setDateOfBirth(e.target.value)}
+                  max={new Date().toISOString().split('T')[0]}
+                  disabled={loading}
+                />
+                {errors.dateOfBirth && <p className="text-xs text-destructive">{errors.dateOfBirth}</p>}
+              </div>
+
+              {/* Occupation */}
+              <div className="space-y-1.5">
+                <Label className="text-xs">Occupation <span className="text-destructive">*</span></Label>
+                <Input
+                  value={occupation}
+                  onChange={e => setOccupation(e.target.value)}
+                  placeholder="e.g. Real Estate Broker"
+                  disabled={loading}
+                />
+                {errors.occupation && <p className="text-xs text-destructive">{errors.occupation}</p>}
+              </div>
+
+              {/* Phone */}
+              <div className="space-y-1.5">
+                <Label className="text-xs">
+                  Phone number <span className="text-destructive">*</span>
+                </Label>
+                <PhoneInput
+                  value={phone}
+                  onChange={setPhone}
+                  international
+                  defaultCountry={detectedCountry}
+                  disabled={loading}
+                />
+                {errors.phone && <p className="text-xs text-destructive">{errors.phone}</p>}
+              </div>
+
+              <Button type="submit" className="w-full" disabled={loading}>
+                {loading
+                  ? <><Loader2 className="size-4 animate-spin" /> Saving...</>
+                  : "Let's get started →"
+                }
+              </Button>
+
+            </form>
+          </div>
+
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/apps/web/src/modules/auth/pages/Login.jsx b/apps/web/src/modules/auth/pages/Login.jsx
new file mode 100644
index 0000000..a836bc3
--- /dev/null
+++ b/apps/web/src/modules/auth/pages/Login.jsx
@@ -0,0 +1,52 @@
+import { Link } from 'react-router-dom'
+import { LoginForm } from "../components/LoginForm";
+import { AuthThemeToggle } from "../components/AuthThemeToggle";
+import { MetadataProvider } from "@/contexts/MetadataContext";
+
+export default function Login() {
+  return (
+    <MetadataProvider
+      value={{
+        title: "Login - Philproperties",
+        description: "Kindly login to access our online course platform.",
+        keywords: "login, philproperties, training, onboarding, real-estate",
+        ogTitle: "Login - Philproperties",
+        ogDescription: "Kindly login to access our online course platform.",
+      }}
+    >
+      <div className="relative grid min-h-svh lg:grid-cols-2">
+        <AuthThemeToggle className="absolute top-4 right-4 z-10" />
+        <div className="flex flex-col gap-4 p-6 md:p-10">
+          <div className="flex justify-center">
+            <Link to="/" className="flex items-center gap-2 font-medium">
+              <div className="xs:w-40 sm:w-48 md:w-56 2xl:w-64 block dark:hidden">
+                <img
+                  src="/philpro-white.png"
+                  alt="Image"
+                />
+              </div>
+              <div className="xs:w-40 sm:w-48 md:w-56 2xl:w-64 hidden dark:block">
+                <img
+                  src="/philpro-dark.png"
+                  alt="Image"
+                />
+              </div>
+            </Link>
+          </div>
+          <div className="flex flex-1 items-center justify-center">
+            <div className="w-full max-w-sm">
+              <LoginForm />
+            </div>
+          </div>
+        </div>
+        <div className="relative hidden lg:block">
+          <img
+            src="https://cq5as7pc73.ufs.sh/f/pHNnzIw3VjcgzIbC8SR4stTZRKXP3cfbD6e2p9jmdAUQBuox"
+            alt="Image"
+            className="absolute inset-0 h-full w-full object-cover rounded-3xl p-2"
+          />
+        </div>
+      </div>
+    </MetadataProvider>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/auth/pages/OAuthCallback.jsx b/apps/web/src/modules/auth/pages/OAuthCallback.jsx
new file mode 100644
index 0000000..1f71f72
--- /dev/null
+++ b/apps/web/src/modules/auth/pages/OAuthCallback.jsx
@@ -0,0 +1,189 @@
+/***********************************************************************************************************************************************************************
+ * File Name: OAuthCallback.jsx
+ * Type of Program: Frontend Page
+ * Description: Landing page after the backend completes Google OIDC.
+ *
+ *   The backend redirects here with NO query params — the outcome (otpRequired/
+ *   email, ban details, or an error code) never touches the URL. Instead, this
+ *   page fetches it from GET /auth/google/result, a single-use endpoint that
+ *   reads a short-lived signed cookie the callback controller set.
+ *
+ *   OTP path     → result = { otpRequired: true, email }. No refresh cookie was
+ *                  set yet. Renders the shared OtpVerifyForm; once verified,
+ *                  AuthContext has user/tokens set and we navigate to the
+ *                  account's home route ourselves.
+ *
+ *   Trusted path → result = {} (nothing pending) — this device already cleared
+ *                  an OTP recently, so the backend set the real refresh cookie
+ *                  directly. This page calls restoreSession() to pull the
+ *                  access token from it, then navigates to the account's home
+ *                  route.
+ *
+ *   Error path   → result = { error: <code>, ... }. No refresh cookie was set,
+ *                  so the user stays on this page to see the error.
+ *
+ * Author: Kenneth Obsequio (@lash0000)
+ * Date Created: Jun. 21, 2026
+ * Date Modified: Jul. 6, 2026 — outcome moved from URL params to /auth/google/result
+ ***********************************************************************************************************************************************************************/
+import { useEffect, useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { LoaderCircle, ShieldBan, UserX, AlertTriangle, RefreshCw, Clock } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { useAuth } from '@/contexts/AuthContext'
+import { useDateFormat } from '@/hooks/useDateFormat'
+import { getRoleHomePath } from '@/utils/roleRedirect.util'
+import { OtpVerifyForm } from '@/modules/auth/components/OtpVerifyForm'
+import api from '@/utils/api.util'
+
+const ERROR_MAP = {
+  access_denied:       { icon: UserX,        message: 'You cancelled the Google sign-in.'                         },
+  account_deactivated: { icon: UserX,        message: 'Your account has been deactivated. Please contact support.' },
+  session_expired:     { icon: Clock,        message: 'The sign-in session expired. Please try again.'             },
+  state_mismatch:      { icon: AlertTriangle, message: 'Security check failed. Please try signing in again.'        },
+  auth_failed:         { icon: RefreshCw,    message: 'Google sign-in failed. Please try again.'                   },
+}
+
+export default function OAuthCallback() {
+  const navigate = useNavigate()
+  const { restoreSession } = useAuth()
+  const { fmtDateTime } = useDateFormat()
+
+  // null = still resolving; otherwise the parsed /auth/google/result payload.
+  const [result, setResult] = useState(null)
+
+  useEffect(() => {
+    let cancelled = false
+
+    ;(async () => {
+      let pending = {}
+      try {
+        const { data } = await api.get('/auth/google/result')
+        pending = data.data ?? {}
+      } catch {
+        // network hiccup — fall through to the trusted-device path below
+      }
+
+      if (pending.otpRequired || pending.error) {
+        if (!cancelled) setResult(pending)
+        return
+      }
+
+      // Nothing pending → trusted-device fast path. The refresh cookie was
+      // already set by the backend; restoreSession() just picks it up.
+      const { success, user } = await restoreSession()
+      if (cancelled) return
+      navigate(success ? getRoleHomePath(user) : '/login', {
+        replace: true,
+        state: success && pending.justLinkedGoogle ? { justLinkedGoogle: true } : undefined,
+      })
+    })()
+
+    return () => { cancelled = true }
+  }, [])
+
+  const error = result?.error
+  const otpRequired = !!result?.otpRequired
+  const email = result?.email
+
+  if (otpRequired && email) {
+    return (
+      <div className="flex min-h-svh items-center justify-center p-6">
+        <div className="w-full max-w-sm">
+          <OtpVerifyForm
+            email={email}
+            onSuccess={(user) => navigate(getRoleHomePath(user), {
+              replace: true,
+              state: result?.justLinkedGoogle ? { justLinkedGoogle: true } : undefined,
+            })}
+            title="Verify your sign-in"
+            description={`We sent a 6-digit code to ${email} to finish signing in with Google. It expires in 10 minutes.`}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  if (error === 'account_banned') {
+    const reason     = result.reason
+    const banType    = result.ban_type
+    const expiresAt  = result.expires_at
+    const expiryText = expiresAt ? fmtDateTime(expiresAt) : null
+
+    return (
+      <div className="min-h-svh flex items-center justify-center bg-muted/40 px-4">
+        <div className="flex flex-col items-center text-center gap-6 max-w-md w-full">
+
+          <div className="flex items-center justify-center w-20 h-20 rounded-full bg-destructive/10">
+            <ShieldBan className="size-10 text-destructive" />
+          </div>
+
+          <div className="space-y-2">
+            <h1 className="text-2xl font-semibold tracking-tight">Account Suspended</h1>
+            <p className="text-sm text-muted-foreground text-balance">
+              Your account has been suspended and you cannot access the platform at this time.
+            </p>
+          </div>
+
+          {(reason || banType) && (
+            <div className="w-full rounded-lg border bg-card p-4 text-left flex flex-col gap-3">
+              {reason && (
+                <div>
+                  <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium mb-0.5">Reason</p>
+                  <p className="text-sm">{reason}</p>
+                </div>
+              )}
+              {banType === 'temporary' && expiryText && (
+                <div>
+                  <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium mb-0.5">Suspended Until</p>
+                  <p className="text-sm">{expiryText}</p>
+                </div>
+              )}
+              {banType === 'permanent' && (
+                <div>
+                  <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium mb-0.5">Duration</p>
+                  <p className="text-sm">Permanent</p>
+                </div>
+              )}
+            </div>
+          )}
+
+          <p className="text-sm text-muted-foreground">
+            If you believe this is a mistake, please reach out to your administrator for assistance.
+          </p>
+
+          <Button asChild variant="outline" size="sm">
+            <Link to="/login">Back to Login</Link>
+          </Button>
+
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    const { icon: Icon, message } = ERROR_MAP[error] ?? { icon: AlertTriangle, message: 'An unexpected error occurred. Please try again.' }
+    return (
+      <div className="flex min-h-svh items-center justify-center p-6">
+        <div className="flex flex-col items-center gap-4 text-center max-w-sm">
+          <div className="flex items-center justify-center w-12 h-12 rounded-full bg-muted">
+            <Icon className="size-5 text-muted-foreground" />
+          </div>
+          <p className="text-sm text-destructive font-medium">{message}</p>
+          <Button asChild variant="outline" size="sm">
+            <Link to="/login">Back to Login</Link>
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex min-h-svh items-center justify-center">
+      <div className="flex flex-col items-center gap-3">
+        <LoaderCircle className="size-6 animate-spin text-muted-foreground" />
+        <p className="text-sm text-muted-foreground">Signing you in...</p>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/modules/auth/pages/Register.jsx b/apps/web/src/modules/auth/pages/Register.jsx
new file mode 100644
index 0000000..9f5bd94
--- /dev/null
+++ b/apps/web/src/modules/auth/pages/Register.jsx
@@ -0,0 +1,70 @@
+/***********************************************************************************************************************************************************************
+ * File Name: Register.jsx
+ * Type of Program: Frontend Page
+ * Description: Registration page. Accepts optional ?group_code= query param to
+ *              auto-enroll new users into a user group on verification.
+ *              Route: /register or /register?group_code=XXXX
+ * Module: User Credentials
+ * Author: lash0000
+ * Date Created: May 23, 2026
+ ***********************************************************************************************************************************************************************
+ * Change History:
+ * DATE                AUTHOR            LOG NUMBER     DESCRIPTION
+ * May 23, 2026        lash0000          001            Initial creation - STAR Phase 1 Project
+ ***********************************************************************************************************************************************************************/
+import { Link } from 'react-router-dom'
+import { RegisterForm } from '../components/RegisterForm'
+import { AuthThemeToggle } from '../components/AuthThemeToggle'
+import { MetadataProvider } from '@/contexts/MetadataContext'
+
+// TODO: flip to true once the hero banner asset is ready; grid auto-centers the
+// left panel while this is false so no other classes need to change either way.
+const SHOW_BANNER = false
+
+export default function Register() {
+  return (
+    <MetadataProvider
+      value={{
+        title: 'Register - Philproperties',
+        description: 'Create an account to access our online course platform.',
+        keywords: 'register, signup, philproperties, training, onboarding, real-estate',
+        ogTitle: 'Register - Philproperties',
+        ogDescription: 'Create an account to access our online course platform.',
+      }}
+    >
+      <div className={`relative grid min-h-svh ${SHOW_BANNER ? 'lg:grid-cols-2' : ''}`}>
+        <AuthThemeToggle className="absolute top-4 right-4 z-10" />
+        {/* ── Left panel ── */}
+        <div className="flex flex-col gap-4 p-6 md:p-10">
+          <div className="flex justify-center">
+            <Link to="/" className="flex items-center gap-2 font-medium">
+              <div className="xs:w-40 sm:w-48 md:w-56 2xl:w-64 block dark:hidden">
+                <img src="/philpro-white.png" alt="Philproperties" />
+              </div>
+              <div className="xs:w-40 sm:w-48 md:w-56 2xl:w-64 hidden dark:block">
+                <img src="/philpro-dark.png" alt="Philproperties" />
+              </div>
+            </Link>
+          </div>
+
+          <div className="flex flex-1 items-center justify-center">
+            <div className="w-full max-w-xl">
+              <RegisterForm />
+            </div>
+          </div>
+        </div>
+
+        {/* ── Right panel — hero image ── */}
+        {SHOW_BANNER && (
+          <div className="relative hidden lg:block">
+            <img
+              src="https://cq5as7pc73.ufs.sh/f/pHNnzIw3VjcgzIbC8SR4stTZRKXP3cfbD6e2p9jmdAUQBuox"
+              alt="Philproperties"
+              className="absolute inset-0 h-full w-full object-cover rounded-3xl p-2"
+            />
+          </div>
+        )}
+      </div>
+    </MetadataProvider>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/auth/routes/AuthRoutes.jsx b/apps/web/src/modules/auth/routes/AuthRoutes.jsx
new file mode 100644
index 0000000..badd8df
--- /dev/null
+++ b/apps/web/src/modules/auth/routes/AuthRoutes.jsx
@@ -0,0 +1,29 @@
+import { Outlet } from 'react-router-dom'
+import PublicRoute from '../../../routes/PublicRoute'
+
+import LandingLayout from '@/modules/public/layouts/LandingLayout'
+import LandingPage from '@/modules/public/pages/LandingPage'
+import Login from '../pages/Login'
+import Register from '../pages/Register'
+import ForgotPassword from '../pages/ForgotPassword'
+import OAuthCallback from '../pages/OAuthCallback'
+import Suspended from '@/modules/public/pages/Suspended'
+
+
+export const AuthRoutes = {
+  element: <PublicRoute />,
+  children: [
+    {
+      path: '/',
+      element: <Outlet />,
+      children: [
+        { index: true, element: <LandingLayout><LandingPage /></LandingLayout> },
+        { path: "login", element: <Login />},
+        { path: "signup", element: <Register />},
+        { path: "forgot-password", element: <ForgotPassword /> },
+        { path: "auth/callback/google", element: <OAuthCallback /> },
+        { path: "suspended", element: <Suspended /> },
+      ]
+    },
+  ],
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/client/components/CourseUpsellModal.jsx b/apps/web/src/modules/client/components/CourseUpsellModal.jsx
new file mode 100644
index 0000000..e834d19
--- /dev/null
+++ b/apps/web/src/modules/client/components/CourseUpsellModal.jsx
@@ -0,0 +1,65 @@
+// CourseUpsellModal — shown when a learner reaches a locked Course's primary
+// action button (Proceed/Start Learning). Offers plan upgrade, or buying the
+// course individually when it has an active product. Shared by CourseList,
+// Dashboard, and CourseDetails.
+
+import { useNavigate } from "react-router-dom";
+import { LockIcon, Check, ShoppingCart } from "lucide-react";
+import ResponsiveModal from "@/components/generic/ResponsiveModal";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+export default function CourseUpsellModal({ open, onOpenChange, course, tierMap = {} }) {
+  const navigate = useNavigate();
+  const { fmtCurrency } = useDateFormat();
+
+  const slug = course?.subscription ?? "free";
+  const { rank, label, cls, panel } = resolveTierBadge(slug, tierMap);
+
+  return (
+    <ResponsiveModal
+      open={open}
+      onOpenChange={onOpenChange}
+      title={course?.title ?? "Course Details"}
+      description={course?.product ? "Purchase this course or upgrade your plan." : "Upgrade your plan to access this course."}
+      footer={
+        <>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>Close</Button>
+          {course?.product?.is_active && (
+            <Button
+              variant="outline"
+              onClick={() => { onOpenChange(false); navigate(`/course/${course.course_id}/checkout`); }}
+            >
+              <ShoppingCart className="size-4" />
+              Buy {fmtCurrency(course.product.price ?? 0, course.product.currency ?? "USD")}
+            </Button>
+          )}
+          <Button onClick={() => { onOpenChange(false); navigate("/subscriptions"); }}>
+            <LockIcon /> View Plans
+          </Button>
+        </>
+      }
+    >
+      <div className="space-y-6 py-2">
+        {rank > 0 && (
+          <div className={`p-5 rounded-2xl border ${panel.bg} ${panel.border}`}>
+            <div className="flex items-center gap-3 mb-3">
+              <Badge className={cls}>
+                <LockIcon className="size-3" /> {label}
+              </Badge>
+            </div>
+            <ul className="space-y-2 text-sm [&_svg]:size-4 mb-4">
+              <li className="flex items-center gap-2"><Check /> Access to {label} content</li>
+              <li className="flex items-center gap-2"><Check /> Certificates & achievements</li>
+            </ul>
+            <p className="text-sm text-muted-foreground">
+              Upgrade to a <span className="font-medium">{label}</span> plan to unlock this course.
+            </p>
+          </div>
+        )}
+      </div>
+    </ResponsiveModal>
+  );
+}
diff --git a/apps/web/src/modules/client/components/FilePreview.jsx b/apps/web/src/modules/client/components/FilePreview.jsx
new file mode 100644
index 0000000..25c0c1a
--- /dev/null
+++ b/apps/web/src/modules/client/components/FilePreview.jsx
@@ -0,0 +1,277 @@
+/***********************************************************************************************************************************************************************
+ * File Name    : FilePreview.jsx
+ * Type         : Component (Client)
+ * Description  : Dialog-based file preview for task completion attachments.
+ *                Renders by mime type:
+ *                  image/jpeg, image/png  → FileZoomViewer (zoom/pan/fit)
+ *                  application/pdf        → FileZoomViewer (pdf.js zoom/pan/fit)
+ *                  video/*                → <video controls> (mp4, mov, webm, etc.)
+ *                  audio/*                → centered audio player card (mp3, wav, etc.)
+ *                  other (incl. docx)     → generic file card with download prompt
+ *
+ *                Inline preview uses the blob-fetch pattern (same as
+ *                VideoBlock/AudioBlock): authenticated GET via `api` →
+ *                responseType 'blob' → URL.createObjectURL → set as src.
+ *                This is required because <img>/<video>/<audio>/<iframe> src
+ *                are native browser requests that don't carry the Authorization
+ *                header attached by the axios interceptor.
+ *
+ * Props:
+ *   file        {object}  – { file_id, file_url, file_name, file_size, mime_type, createdAt }
+ *   open        {boolean}
+ *   onOpenChange {function}
+ *   streamUrl   {string}  – proxy stream URL (inline preview, authenticated)
+ *   downloadUrl {string}  – proxy download URL (Content-Disposition: attachment)
+ ***********************************************************************************************************************************************************************/
+import { useState, useEffect } from 'react';
+import {
+    Dialog, DialogContent, DialogHeader, DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Spinner } from '@/components/ui/spinner';
+import {
+    Image, Video, Music, FileText, File, Download,
+} from 'lucide-react';
+import { formatDate } from '@/utils/table.util';
+import { formatBytes } from './blocks/FileUpload';
+import api from '@/utils/api.util';
+import { saveBlob } from '@/utils/media.util';
+import FileZoomViewer from '@/components/generic/FileZoomViewer';
+
+// ─── Resolve preview kind from mime type ──────────────────────────────────────
+const resolveKind = (mimeType = '', fileName = '') => {
+    if (mimeType.startsWith('image/')) return 'image';
+    if (mimeType.startsWith('video/')) return 'video';
+    if (mimeType.startsWith('audio/')) return 'audio';
+    if (mimeType === 'application/pdf') return 'pdf';
+
+    const ext = (fileName.split('.').pop() ?? '').toLowerCase();
+    if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)) return 'image';
+    if (['mp4', 'mov', 'mkv', 'webm', 'avi'].includes(ext)) return 'video';
+    if (['mp3', 'wav', 'm4a', 'ogg'].includes(ext)) return 'audio';
+    if (ext === 'pdf') return 'pdf';
+    return 'other';
+};
+
+const KIND_ICON = {
+    image: Image,
+    video: Video,
+    audio: Music,
+    pdf: FileText,
+    other: File,
+};
+
+// ─── useBlobUrl — fetches streamUrl via authenticated api, returns blob URL ────
+const useBlobUrl = (streamUrl, enabled) => {
+    const [blobUrl, setBlobUrl] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(false);
+
+    useEffect(() => {
+        if (!enabled || !streamUrl) return;
+
+        let currentUrl = null;
+        let cancelled = false;
+
+        setLoading(true);
+        setError(false);
+        setBlobUrl(null);
+
+        api.get(streamUrl, { responseType: 'blob' })
+            .then((res) => {
+                if (cancelled) return;
+                currentUrl = URL.createObjectURL(res.data);
+                setBlobUrl(currentUrl);
+            })
+            .catch(() => {
+                if (!cancelled) setError(true);
+            })
+            .finally(() => {
+                if (!cancelled) setLoading(false);
+            });
+
+        return () => {
+            cancelled = true;
+            if (currentUrl) URL.revokeObjectURL(currentUrl);
+        };
+    }, [streamUrl, enabled]);
+
+    return { blobUrl, loading, error };
+};
+
+// ─── Loading / error placeholder ───────────────────────────────────────────────
+const LoadingState = () => (
+    <div className="flex items-center justify-center py-16">
+        <Spinner className="size-6" />
+    </div>
+);
+
+const ErrorState = ({ onDownload, downloading, fileName }) => (
+    <div className="flex flex-col items-center gap-3 py-12 text-muted-foreground">
+        <File className="size-12" />
+        <p className="text-sm">Could not load preview.</p>
+        {onDownload && (
+            <Button variant="outline" size="sm" onClick={onDownload} disabled={downloading}>
+                <Download className="size-4" />
+                {downloading ? 'Downloading…' : 'Download file'}
+            </Button>
+        )}
+    </div>
+);
+
+// ─── Preview body per kind ─────────────────────────────────────────────────────
+const PreviewBody = ({ file, kind, blobUrl, loading, error, downloadUrl, onDownload, downloading }) => {
+    if (kind === 'other') {
+        return (
+            <div className="flex flex-col items-center gap-3 py-12 text-muted-foreground">
+                <File className="size-12" />
+                <p className="text-sm">Preview not available for this file type.</p>
+                <Button variant="outline" size="sm" onClick={onDownload} disabled={downloading}>
+                    <Download className="size-4" />
+                    {downloading ? 'Downloading…' : 'Download file'}
+                </Button>
+            </div>
+        );
+    }
+
+    // ── Image / PDF — zoom/pan/fit viewer ───────────────────────────────────────
+    if (kind === 'image' || kind === 'pdf') {
+        if (error) return <ErrorState onDownload={onDownload} downloading={downloading} fileName={file.file_name} />;
+        return (
+            <FileZoomViewer
+                src={blobUrl}
+                mimeType={file.mime_type}
+                fileName={file.file_name}
+                loading={loading}
+            />
+        );
+    }
+
+    if (loading) return <LoadingState />;
+    if (error || !blobUrl) return <ErrorState onDownload={onDownload} downloading={downloading} fileName={file.file_name} />;
+
+    switch (kind) {
+        case 'video':
+            return (
+                <div className="bg-black flex items-center justify-center aspect-video">
+                    <video
+                        src={blobUrl}
+                        controls
+                        controlsList="nodownload nofullscreen noremoteplayback"
+                        disablePictureInPicture
+                        onContextMenu={(e) => e.preventDefault()}
+                        className="w-full h-full"
+                    />
+                </div>
+            );
+
+        case 'audio':
+            return (
+                <div className="flex flex-col items-center gap-4 py-8 px-6">
+                    <div className="size-24 rounded-lg bg-muted flex items-center justify-center">
+                        <Music className="size-9 text-muted-foreground" />
+                    </div>
+                    <div className="text-center">
+                        <p className="text-sm font-medium truncate max-w-xs">{file.file_name}</p>
+                        <p className="text-xs text-muted-foreground">Audio file</p>
+                    </div>
+                    <audio
+                        src={blobUrl}
+                        controls
+                        controlsList="nodownload"
+                        onContextMenu={(e) => e.preventDefault()}
+                        className="w-full max-w-xs"
+                    />
+                </div>
+            );
+
+        default:
+            return null;
+    }
+};
+
+// ─── Main dialog ────────────────────────────────────────────────────────────────
+const FilePreview = ({ file, open, onOpenChange, streamUrl, downloadUrl }) => {
+    const kind = file ? resolveKind(file.mime_type, file.file_name) : 'other';
+    const Icon = KIND_ICON[kind] ?? File;
+
+    // Only fetch the blob when the dialog is open and a previewable kind
+    const shouldFetch = open && !!file && kind !== 'other';
+    const { blobUrl, loading, error } = useBlobUrl(streamUrl, shouldFetch);
+
+    const [downloading, setDownloading] = useState(false);
+
+    if (!file) return null;
+
+    // ── Download handler — authenticated fetch via `api`, then save blob ──────
+    const handleDownload = async () => {
+        const url = downloadUrl || streamUrl;
+        if (!url) return;
+
+        setDownloading(true);
+        try {
+            const res = await api.get(url, { responseType: 'blob' });
+            saveBlob(res.data, file.file_name);
+        } catch {
+            // fall back to direct link if proxy fails (e.g. public file_url)
+            if (file.file_url) window.open(file.file_url, '_blank');
+        } finally {
+            setDownloading(false);
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-lg lg:max-w-4xl p-0 gap-0 overflow-hidden">
+                <DialogHeader className="px-4 py-3 pr-12 border-b flex-row items-center justify-between gap-3 space-y-0">
+                    <div className="flex items-center gap-2 min-w-0 select-none">
+                        <Icon className="size-4.5 text-muted-foreground shrink-0" />
+                        <DialogTitle className="text-sm font-medium truncate max-w-54">
+                            {file.file_name}
+                        </DialogTitle>
+                        <Button
+                            variant="outline" size="sm"
+                            onClick={handleDownload}
+                            disabled={downloading}
+                            aria-label="Download"
+                        >
+                            {downloading ? <Spinner className="size-4" /> : <Download className="size-4" />} Download
+                        </Button>
+                    </div>
+                </DialogHeader>
+
+                <PreviewBody
+                    file={file}
+                    kind={kind}
+                    blobUrl={blobUrl}
+                    loading={loading}
+                    error={error}
+                    downloadUrl={downloadUrl}
+                    onDownload={handleDownload}
+                    downloading={downloading}
+                />
+
+                <div className="px-4 py-2.5 border-t flex items-center justify-between text-xs text-muted-foreground">
+                    <div className="flex items-center gap-2">
+                        {file.mime_type && (
+                            <Badge variant="secondary" className="text-xs font-normal select-none">
+                                {file.mime_type}
+                            </Badge>
+                        )}
+                        {file.file_size != null && (
+                            <Badge variant="secondary" className="text-xs font-normal select-none">
+                                {formatBytes(file.file_size)}
+                            </Badge>
+                        )}
+                    </div>
+                    {file.createdAt && (
+                        <span>Uploaded {formatDate(file.createdAt)}</span>
+                    )}
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default FilePreview;
\ No newline at end of file
diff --git a/apps/web/src/modules/client/components/LessonBlock.jsx b/apps/web/src/modules/client/components/LessonBlock.jsx
new file mode 100644
index 0000000..3275800
--- /dev/null
+++ b/apps/web/src/modules/client/components/LessonBlock.jsx
@@ -0,0 +1,55 @@
+// components/LessonBlock.jsx
+
+import { Skeleton } from "@/components/ui/skeleton";
+import { PreviewChrome, PreviewContent } from "@/modules/admin/components/courses/LessonsPreview";
+
+function LessonSkeleton() {
+  return (
+    <div className="space-y-4">
+      <Skeleton className="h-9 w-2/3" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-5/6" />
+      <Skeleton className="w-full aspect-video rounded-xl" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-4/6" />
+    </div>
+  );
+}
+
+/**
+ * Props:
+ *   lesson      — { id, title, blocks[] }
+ *   loading     — true while fetch is in-flight
+ *   showHeader  — render the title/description/objectives block. Set false
+ *                 when the caller already renders its own lesson header
+ *                 above (e.g. LessonDetails), to avoid showing it twice.
+ */
+const LessonBlock = ({ lesson, loading = false, showHeader = true, onWatchProgress }) => {
+  if (!lesson && !loading) {
+    return (
+      <div className="h-full w-full flex items-center justify-center text-muted-foreground py-20">
+        <p className="text-sm">Select a lesson to get started.</p>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return <LessonSkeleton />;
+  }
+
+  return (
+    <PreviewChrome showChrome={false}>
+      <div className="space-y-5">
+        <PreviewContent
+          lesson={lesson}
+          blocks={lesson.blocks ?? []}
+          empty="No content blocks yet."
+          showHeader={showHeader}
+          onWatchProgress={onWatchProgress}
+        />
+      </div>
+    </PreviewChrome>
+  );
+};
+
+export default LessonBlock;
\ No newline at end of file
diff --git a/apps/web/src/modules/client/components/LessonCard.jsx b/apps/web/src/modules/client/components/LessonCard.jsx
new file mode 100644
index 0000000..b6187de
--- /dev/null
+++ b/apps/web/src/modules/client/components/LessonCard.jsx
@@ -0,0 +1,89 @@
+// LessonCard — grid card for a standalone Lesson. Shared by LessonsList.jsx and
+// Dashboard.jsx's "Featured Lessons" section. Mirrors UnitCard.jsx; a Lesson has
+// no lesson_count/quiz_id of its own — shows unit_count instead (how many Units
+// it's attached to).
+
+import { Timer, LockIcon, Layers, Tag } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { resolveTierBadge, cheapestTierSlug } from "@/utils/tierBadge.util";
+
+function formatDuration(seconds = 0) {
+    if (!seconds) return null;
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    if (h && m) return `${h}h ${m}m`;
+    if (h) return `${h}h`;
+    return `${m}m`;
+}
+
+export const LessonCard = ({ lesson, tierMap = {}, onViewDetails }) => {
+    const locked = lesson.is_locked;
+    const duration = formatDuration(lesson.duration_seconds);
+    const unitCount = Number(lesson.unit_count ?? 0);
+    const courses = lesson.courses ?? [];
+    const slug = cheapestTierSlug(courses.map((c) => c.subscription), tierMap);
+    const { label, cls } = resolveTierBadge(slug, tierMap);
+
+    return (
+        <div
+            className={cn(
+                "bg-card rounded-2xl border p-4 flex flex-col gap-2.5 transition-all cursor-pointer group",
+                "hover:shadow-sm",
+                locked
+                    ? "opacity-80 hover:opacity-100 hover:border-muted-foreground/40"
+                    : "hover:bg-muted/60 dark:hover:border-blue-500"
+            )}
+            onClick={() => onViewDetails(lesson)}
+        >
+            <div className="flex flex-wrap gap-1.5">
+                <Badge className={cls}>
+                    {locked ? <LockIcon className="size-3" /> : <Tag className="size-3" />}
+                    {label}
+                </Badge>
+                {locked && (
+                    <Badge variant="secondary">
+                        <LockIcon className="size-3" /> Locked
+                    </Badge>
+                )}
+            </div>
+
+            <div className="flex flex-col gap-1">
+                <h1 className="text-lg font-medium leading-snug line-clamp-3 transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-400">
+                    {lesson.title}
+                </h1>
+                {lesson.description && (
+                    <p className="text-sm leading-relaxed line-clamp-2 group-hover:text-blue-700 dark:group-hover:text-blue-400">
+                        {lesson.description}
+                    </p>
+                )}
+            </div>
+
+            <div className="flex items-center justify-between pt-2 mt-auto border-t">
+                <div className={`flex items-center gap-3 text-sm [&_svg]:size-4 ${locked ? "text-muted-foreground" : "text-card-foreground group-hover:text-blue-700 dark:group-hover:text-blue-400"}`}>
+                    <div className="flex items-center gap-1">
+                        <Timer /> {duration ?? "—"}
+                    </div>
+                </div>
+                {locked && (
+                    <span className="text-xs text-muted-foreground">Upgrade to unlock</span>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export const LessonCardSkeleton = () => (
+    <div className="bg-card rounded-2xl border p-4 flex flex-col gap-2.5">
+        <div className="flex gap-1.5">
+            <Skeleton className="h-5 w-20 rounded-full" />
+        </div>
+        <Skeleton className="h-6 w-3/4" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-2/3" />
+        <div className="pt-2 mt-auto border-t">
+            <Skeleton className="h-4 w-24" />
+        </div>
+    </div>
+);
diff --git a/apps/web/src/modules/client/components/LessonUpsellModal.jsx b/apps/web/src/modules/client/components/LessonUpsellModal.jsx
new file mode 100644
index 0000000..40bad51
--- /dev/null
+++ b/apps/web/src/modules/client/components/LessonUpsellModal.jsx
@@ -0,0 +1,56 @@
+// LessonUpsellModal — shown when a learner clicks a locked standalone Lesson.
+// Mirrors UnitUpsellModal.jsx: unlocks via any course reachable through its
+// attached Units (aggregated across all of them, since a Lesson can sit in
+// more than one), plus a generic "View Plans" fallback.
+// Shared by LessonsList and Dashboard.
+
+import { useNavigate } from "react-router-dom";
+import { LockIcon, Check } from "lucide-react";
+import ResponsiveModal from "@/components/generic/ResponsiveModal";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { resolveTierBadge, cheapestTierSlug } from "@/utils/tierBadge.util";
+
+export default function LessonUpsellModal({ open, onOpenChange, lesson, tierMap = {} }) {
+  const navigate = useNavigate();
+  const courses = lesson?.courses ?? [];
+
+  const slug = cheapestTierSlug([lesson?.subscription, ...courses.map((c) => c.subscription)], tierMap);
+  const { rank, label, cls, panel } = resolveTierBadge(slug, tierMap);
+
+  return (
+    <ResponsiveModal
+      open={open}
+      onOpenChange={onOpenChange}
+      title={lesson?.title ?? "Lesson Details"}
+      description="Upgrade your plan to access this lesson."
+      footer={
+        <>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>Close</Button>
+          <Button onClick={() => { onOpenChange(false); navigate("/subscriptions"); }}>
+            <LockIcon /> View Plans
+          </Button>
+        </>
+      }
+    >
+      <div className="space-y-6 py-2">
+        {rank > 0 && (
+          <div className={`p-5 rounded-2xl border ${panel.bg} ${panel.border}`}>
+            <div className="flex items-center gap-3 mb-3">
+              <Badge className={cls}>
+                <LockIcon className="size-3" /> {label}
+              </Badge>
+            </div>
+            <ul className="space-y-2 text-sm [&_svg]:size-4 mb-4">
+              <li className="flex items-center gap-2"><Check /> Access to {label} content</li>
+              <li className="flex items-center gap-2"><Check /> Certificates & achievements</li>
+            </ul>
+            <p className="text-sm text-muted-foreground">
+              Upgrade to a <span className="font-medium">{label}</span> plan to unlock this lesson.
+            </p>
+          </div>
+        )}
+      </div>
+    </ResponsiveModal>
+  );
+}
diff --git a/apps/web/src/modules/client/components/LockedContentPanel.jsx b/apps/web/src/modules/client/components/LockedContentPanel.jsx
new file mode 100644
index 0000000..910e276
--- /dev/null
+++ b/apps/web/src/modules/client/components/LockedContentPanel.jsx
@@ -0,0 +1,47 @@
+// LockedContentPanel — full-page inline panel shown when a deep-link lands on
+// content the learner can't access (locked unit or a lesson under one).
+// Distinct from UnitUpsellModal (a dialog triggered from card grids) — this
+// renders in place of the page body itself. Shared by UnitDetails and
+// LessonDetails.
+//
+// `item` (optional) is the unit/lesson's own subscription info, from the 403
+// body's `item` field — lets a deep-link show the same own-tier badge the
+// browse-list upsell modals already do, instead of only ever pointing at an
+// attached course.
+
+import { useNavigate } from "react-router-dom";
+import { LockIcon, Zap } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+
+export default function LockedContentPanel({ course, item, tierMap = {} }) {
+  const navigate = useNavigate();
+  const tier = course?.subscription ? tierMap[course.subscription] : null;
+  const ownTier = item?.subscription ? resolveTierBadge(item.subscription, tierMap) : null;
+
+  return (
+    <div className="flex flex-col items-center gap-6 py-32 text-center px-4">
+      <div className="h-16 w-16 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
+        <LockIcon className="size-7 text-amber-500" />
+      </div>
+      <div className="space-y-2 max-w-sm">
+        <h2 className="text-xl font-semibold">Premium / Exclusive Content</h2>
+        <p className="text-sm text-muted-foreground leading-relaxed">
+          {ownTier
+            ? `This content requires the ${ownTier.label} plan.`
+            : course
+            ? `This content is part of "${course.title}"${tier?.name ? ` (${tier.name} plan)` : ""}. Upgrade your plan or view the course to unlock it.`
+            : "Upgrade your plan to access this content."}
+        </p>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <div className="flex items-center gap-2">
+          <Button onClick={() => navigate('/subscriptions')} className="gap-1.5">
+            <Zap className="size-4" /> View Available Plans
+          </Button>
+        </div>
+        <p className="text-xs text-muted-foreground">Already subscribed? Your plan may not cover this subscription.</p>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/client/components/MarkCompleteButton.jsx b/apps/web/src/modules/client/components/MarkCompleteButton.jsx
new file mode 100644
index 0000000..09174d5
--- /dev/null
+++ b/apps/web/src/modules/client/components/MarkCompleteButton.jsx
@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { CheckCircle2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+/**
+ * Explicit self-report completion button, backing the manual_complete
+ * completion requirement type. Renders as already-completed (disabled,
+ * checkmark) once the lesson is marked done.
+ */
+export default function MarkCompleteButton({ label, completed, onMarkComplete }) {
+  const [saving, setSaving] = useState(false);
+
+  const handleClick = async () => {
+    if (completed || saving) return;
+    setSaving(true);
+    await onMarkComplete?.();
+    setSaving(false);
+  };
+
+  return (
+    <div className="flex justify-center py-6">
+      <Button
+        type="button"
+        size="lg"
+        variant={completed ? "outline" : "default"}
+        disabled={completed || saving}
+        onClick={handleClick}
+        className="gap-2"
+      >
+        <CheckCircle2 className="size-4" />
+        {completed ? "Completed" : saving ? "Marking complete…" : (label || "Mark Complete")}
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/client/components/PlanComparisonTable.jsx b/apps/web/src/modules/client/components/PlanComparisonTable.jsx
new file mode 100644
index 0000000..f82d078
--- /dev/null
+++ b/apps/web/src/modules/client/components/PlanComparisonTable.jsx
@@ -0,0 +1,107 @@
+// PlanComparisonTable — side-by-side feature matrix, an alternate view next to
+// the card grid on PlanList.jsx. Rows are the union of every active plan's
+// admin-authored `features` list; a plan gets a checkmark for a row if that
+// exact feature text is present in its own list.
+
+import * as LucideIcons from "lucide-react";
+import { Check, Minus, Tag, Lock } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+import { getBundleContent, overlapsExistingAccess, isPlanCurrent } from "@/utils/planBundle.util";
+
+export default function PlanComparisonTable({ plans, myTier, tierMap, fmtCurrency, onSelect }) {
+    const featureRows = [...new Set(
+        plans.flatMap((p) => (p.features ?? []).map((f) => f.text))
+    )];
+
+    return (
+        <div className="overflow-x-auto rounded-xl border bg-card">
+            <table className="w-full text-sm border-collapse min-w-[640px]">
+                <thead>
+                    <tr className="border-b">
+                        <th className="text-left p-4 w-48 align-bottom text-muted-foreground font-medium">Plan</th>
+                        {plans.map((plan) => {
+                            const { label, cls } = resolveTierBadge(plan.tier, tierMap);
+                            const Icon = LucideIcons[tierMap[plan.tier]?.badge_icon] ?? Tag;
+                            const isCurrent = isPlanCurrent(plan, myTier);
+                            const isBlockedByOverlap = !isCurrent && overlapsExistingAccess(plan, myTier?.my_grants);
+                            return (
+                                <th key={plan.plan_id} className="p-4 text-center align-bottom min-w-[160px]">
+                                    <div className="flex flex-col items-center gap-2">
+                                        <Badge className={cls}><Icon className="size-3" />{label}</Badge>
+                                        <span className="font-semibold text-foreground">{plan.label}</span>
+                                        <span className="text-lg font-bold">{fmtCurrency(plan.price, plan.currency)}</span>
+                                        {isCurrent && <Badge variant="secondary" className="text-xs">Current Plan</Badge>}
+                                        {isBlockedByOverlap && (
+                                            <Badge variant="secondary" className="text-xs gap-1">
+                                                <Lock className="size-3" /> Already Included
+                                            </Badge>
+                                        )}
+                                    </div>
+                                </th>
+                            );
+                        })}
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr className="border-b bg-muted/30">
+                        <td className="p-3 font-medium text-muted-foreground">Items included</td>
+                        {plans.map((plan) => {
+                            const bundle = getBundleContent(plan);
+                            return (
+                                <td key={plan.plan_id} className="p-3 text-center">
+                                    {bundle ? `${bundle.items.length} ${bundle.noun.toLowerCase()}${bundle.items.length !== 1 ? "s" : ""}` : "—"}
+                                </td>
+                            );
+                        })}
+                    </tr>
+                    {featureRows.map((text, i) => (
+                        <tr key={text} className={`border-b ${i % 2 === 1 ? "bg-muted/30" : ""}`}>
+                            <td className="p-3 text-muted-foreground">{text}</td>
+                            {plans.map((plan) => {
+                                const included = (plan.features ?? []).some((f) => f.text === text);
+                                return (
+                                    <td key={plan.plan_id} className="p-3 text-center">
+                                        {included
+                                            ? <Check className="size-4 mx-auto text-green-500" />
+                                            : <Minus className="size-4 mx-auto text-muted-foreground/30" />
+                                        }
+                                    </td>
+                                );
+                            })}
+                        </tr>
+                    ))}
+                    {featureRows.length === 0 && (
+                        <tr>
+                            <td colSpan={plans.length + 1} className="p-6 text-center text-muted-foreground">
+                                No features have been added to these plans yet.
+                            </td>
+                        </tr>
+                    )}
+                </tbody>
+                <tfoot>
+                    <tr>
+                        <td className="p-4" />
+                        {plans.map((plan) => {
+                            const isCurrent = isPlanCurrent(plan, myTier);
+                            const isBlockedByOverlap = !isCurrent && overlapsExistingAccess(plan, myTier?.my_grants);
+                            return (
+                                <td key={plan.plan_id} className="p-4 text-center">
+                                    <Button
+                                        size="sm"
+                                        variant={isCurrent || isBlockedByOverlap ? "secondary" : "default"}
+                                        disabled={isCurrent || isBlockedByOverlap || !plan.is_active}
+                                        onClick={() => onSelect(plan)}
+                                    >
+                                        {isCurrent ? "Current" : isBlockedByOverlap ? "Included" : !plan.is_active ? "Not Available" : "Select"}
+                                    </Button>
+                                </td>
+                            );
+                        })}
+                    </tr>
+                </tfoot>
+            </table>
+        </div>
+    );
+}
diff --git a/apps/web/src/modules/client/components/TaskListTable.jsx b/apps/web/src/modules/client/components/TaskListTable.jsx
new file mode 100644
index 0000000..817285c
--- /dev/null
+++ b/apps/web/src/modules/client/components/TaskListTable.jsx
@@ -0,0 +1,248 @@
+/***********************************************************************************************************************************************************************
+ * File Name    : TaskListTable.jsx
+ * Type         : Component (Client)
+ * Description  : Lightweight, read-only DataTable for the GroupList "List" view.
+ *                Client-side search + pagination over the currently-fetched
+ *                taskLists array (no admin DataTable dependency, no row actions,
+ *                no selection/bulk actions).
+ *
+ * Props:
+ *   taskLists  {array}    – array of TaskList objects (with .tasks[0])
+ *   loading    {boolean}  – show skeleton rows
+ *   onRefresh  {function} – called when refresh button is clicked
+ *   onRowClick {function} – (taskList) => void, navigates to task list view
+ *   statusLabel {string}  – 'ongoing' | 'completed' | 'overdue' — drives badge style
+ ***********************************************************************************************************************************************************************/
+import { useState, useMemo } from 'react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+    Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from '@/components/ui/table';
+import {
+    Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from '@/components/ui/select';
+import {
+    Search, RefreshCw, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight,
+    ArrowRight, Check, AlertTriangle, Circle,
+} from 'lucide-react';
+import { formatDateTime } from '@/utils/table.util';
+
+const PAGE_SIZES = [50, 100, 1000];
+
+// ─── Status badge per bucket ───────────────────────────────────────────────────
+const StatusBadge = ({ status }) => {
+    const map = {
+        ongoing:   { label: 'Ongoing',   icon: Circle,        className: 'bg-muted text-muted-foreground' },
+        completed: { label: 'Completed', icon: Check,         className: 'bg-green-500/10 text-green-700 dark:text-green-400' },
+        overdue:   { label: 'Overdue',   icon: AlertTriangle, className: 'bg-destructive/10 text-destructive' },
+    };
+    const { label, icon: Icon, className } = map[status] ?? map.ongoing;
+    return (
+        <span className={`inline-flex items-center gap-1 text-xs font-medium rounded-full px-2.5 py-1 ${className}`}>
+            <Icon className="size-3.5" />
+            {label}
+        </span>
+    );
+};
+
+// ─── Skeleton rows ──────────────────────────────────────────────────────────────
+const SkeletonRows = ({ rows = 5 }) => (
+    <>
+        {Array.from({ length: rows }).map((_, i) => (
+            <TableRow key={i}>
+                <TableCell><Skeleton className="h-4 w-32" /></TableCell>
+                <TableCell><Skeleton className="h-4 w-48" /></TableCell>
+                <TableCell><Skeleton className="h-4 w-24" /></TableCell>
+                <TableCell><Skeleton className="h-5 w-20 rounded-full" /></TableCell>
+                <TableCell><Skeleton className="h-4 w-4" /></TableCell>
+            </TableRow>
+        ))}
+    </>
+);
+
+// ─── Main component ──────────────────────────────────────────────────────────────
+export default function ClientTaskListTable({
+    taskLists = [],
+    loading = false,
+    onRefresh,
+    onRowClick,
+    statusLabel = 'ongoing',
+}) {
+    const [search,   setSearch]   = useState('');
+    const [page,     setPage]     = useState(1);
+    const [pageSize, setPageSize] = useState(50);
+
+    // ── Client-side search filter ─────────────────────────────────────────────
+    const filtered = useMemo(() => {
+        if (!search.trim()) return taskLists;
+        const q = search.trim().toLowerCase();
+        return taskLists.filter((tl) =>
+            tl.name?.toLowerCase().includes(q) ||
+            tl.description?.toLowerCase().includes(q)
+        );
+    }, [taskLists, search]);
+
+    // ── Pagination ─────────────────────────────────────────────────────────────
+    const totalRecords = filtered.length;
+    const totalPages   = Math.max(1, Math.ceil(totalRecords / pageSize));
+    const clampedPage  = Math.min(page, totalPages);
+
+    const pageRows = useMemo(() => {
+        const start = (clampedPage - 1) * pageSize;
+        return filtered.slice(start, start + pageSize);
+    }, [filtered, clampedPage, pageSize]);
+
+    const handleSearchChange = (val) => {
+        setSearch(val);
+        setPage(1);
+    };
+
+    const handlePageSizeChange = (val) => {
+        setPageSize(Number(val));
+        setPage(1);
+    };
+
+    const rangeStart = totalRecords === 0 ? 0 : (clampedPage - 1) * pageSize + 1;
+    const rangeEnd   = Math.min(clampedPage * pageSize, totalRecords);
+
+    return (
+        <div className="flex flex-col gap-3">
+
+            {/* ── Toolbar: search + refresh ──────────────────────────────────── */}
+            <div className="flex items-center justify-between gap-2 flex-wrap">
+                <div className="relative max-w-xs flex-1">
+                    <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+                    <Input
+                        placeholder="Search task lists..."
+                        value={search}
+                        onChange={(e) => handleSearchChange(e.target.value)}
+                        className="pl-8"
+                    />
+                </div>
+                <Button
+                    variant="outline"
+                    onClick={onRefresh}
+                    disabled={loading}
+                    aria-label="Refresh"
+                >
+                    <RefreshCw className={loading ? 'animate-spin' : ''} /> Refresh
+                </Button>
+            </div>
+
+            {/* ── Table ──────────────────────────────────────────────────────── */}
+            <div className="rounded-lg border overflow-hidden">
+                <div className="overflow-x-auto">
+                    <Table>
+                        <TableHeader>
+                            <TableRow className="bg-muted/40 hover:bg-muted/40">
+                                <TableHead className="pl-6">Name</TableHead>
+                                <TableHead>Description</TableHead>
+                                <TableHead>Deadline</TableHead>
+                                <TableHead>Status</TableHead>
+                                <TableHead className="w-8" />
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {loading ? (
+                                <SkeletonRows />
+                            ) : pageRows.length === 0 ? (
+                                <TableRow>
+                                    <TableCell colSpan={5} className="text-center py-12 text-sm text-muted-foreground">
+                                        No task lists match your search.
+                                    </TableCell>
+                                </TableRow>
+                            ) : (
+                                pageRows.map((tl) => {
+                                    const task = tl.tasks?.[0];
+                                    return (
+                                        <TableRow
+                                            key={tl.task_list_id}
+                                            className="hover:bg-muted/30 cursor-pointer transition-colors"
+                                            onClick={() => onRowClick?.(tl)}
+                                        >
+                                            <TableCell className="font-medium pl-6">{tl.name}</TableCell>
+                                            <TableCell className="text-muted-foreground text-sm max-w-xs truncate">
+                                                {tl.description || '—'}
+                                            </TableCell>
+                                            <TableCell className="text-sm whitespace-nowrap">
+                                                {task?.deadline ? formatDateTime(task.deadline) : '—'}
+                                            </TableCell>
+                                            <TableCell>
+                                                <StatusBadge status={statusLabel} />
+                                            </TableCell>
+                                            <TableCell className="pr-6">
+                                                <ArrowRight className="size-4 text-muted-foreground/60" />
+                                            </TableCell>
+                                        </TableRow>
+                                    );
+                                })
+                            )}
+                        </TableBody>
+                    </Table>
+                </div>
+            </div>
+
+            {/* ── Pagination ─────────────────────────────────────────────────── */}
+            {!loading && totalRecords > 0 && (
+                <div className="flex items-center justify-between gap-2 flex-wrap">
+                    <p className="text-sm text-muted-foreground">
+                        Showing {rangeStart}-{rangeEnd} of {totalRecords}
+                    </p>
+                    <div className="flex items-center gap-1">
+                        <Select value={String(pageSize)} onValueChange={handlePageSizeChange}>
+                            <SelectTrigger className="h-8 w-[110px]">
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {PAGE_SIZES.map((size) => (
+                                    <SelectItem key={size} value={String(size)}>
+                                        {size} / page
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+
+                        <Button
+                            variant="outline" size="icon" className="size-8"
+                            onClick={() => setPage(1)}
+                            disabled={clampedPage === 1}
+                            aria-label="First page"
+                        >
+                            <ChevronsLeft className="size-4" />
+                        </Button>
+                        <Button
+                            variant="outline" size="icon" className="size-8"
+                            onClick={() => setPage((p) => Math.max(1, p - 1))}
+                            disabled={clampedPage === 1}
+                            aria-label="Previous page"
+                        >
+                            <ChevronLeft className="size-4" />
+                        </Button>
+                        <span className="text-sm px-2 whitespace-nowrap">
+                            {clampedPage} / {totalPages}
+                        </span>
+                        <Button
+                            variant="outline" size="icon" className="size-8"
+                            onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                            disabled={clampedPage === totalPages}
+                            aria-label="Next page"
+                        >
+                            <ChevronRight className="size-4" />
+                        </Button>
+                        <Button
+                            variant="outline" size="icon" className="size-8"
+                            onClick={() => setPage(totalPages)}
+                            disabled={clampedPage === totalPages}
+                            aria-label="Last page"
+                        >
+                            <ChevronsRight className="size-4" />
+                        </Button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/client/components/ThemeSwitcher.jsx b/apps/web/src/modules/client/components/ThemeSwitcher.jsx
new file mode 100644
index 0000000..2542e65
--- /dev/null
+++ b/apps/web/src/modules/client/components/ThemeSwitcher.jsx
@@ -0,0 +1,43 @@
+import { Sun, Moon, Monitor } from 'lucide-react'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { useTheme } from '@/contexts/ThemeContext'
+
+export function ThemeSwitcher() {
+  const { theme, setTheme } = useTheme()
+
+  const themeConfig = {
+    light: { label: 'Light', icon: Sun },
+    dark: { label: 'Dark', icon: Moon },
+    system: { label: 'System', icon: Monitor },
+  }
+
+  return (
+    <div className="flex items-center gap-1 bg-card rounded-full border">
+      {Object.entries(themeConfig).map(([key, { label, icon: Icon }]) => (
+        <Tooltip key={key}>
+          <TooltipTrigger asChild>
+            <button
+              onClick={() => setTheme(key)}
+              aria-label={`Set theme to ${key}`}
+              className={`p-1 rounded-full transition-colors ${
+                theme === key ? 'border' : 'text-foreground'
+              }`}
+            >
+              <Icon
+                className="size-3.5"
+                style={theme === key ? { fill: 'currentColor' } : { fill: 'none' }}
+              />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="top">
+            <p>{label}</p>
+          </TooltipContent>
+        </Tooltip>
+      ))}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/client/components/UnitCard.jsx b/apps/web/src/modules/client/components/UnitCard.jsx
new file mode 100644
index 0000000..46a6594
--- /dev/null
+++ b/apps/web/src/modules/client/components/UnitCard.jsx
@@ -0,0 +1,90 @@
+// UnitCard — grid card for a standalone Unit. Shared by UnitsList.jsx and
+// Dashboard.jsx's "Featured Units" section.
+
+import { Timer, LockIcon, Layers, Tag } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { resolveTierBadge, cheapestTierSlug } from "@/utils/tierBadge.util";
+
+function formatDuration(seconds = 0) {
+  if (!seconds) return null;
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  if (h && m) return `${h}h ${m}m`;
+  if (h) return `${h}h`;
+  return `${m}m`;
+}
+
+export const UnitCard = ({ unit, tierMap = {}, onViewDetails }) => {
+  const locked = unit.is_locked;
+  const duration = formatDuration(unit.duration_seconds);
+  const lessonCount = Number(unit.lesson_count ?? 0);
+  const courses = unit.courses ?? [];
+  const slug = cheapestTierSlug([unit.subscription, ...courses.map((c) => c.subscription)], tierMap);
+  const { label, cls } = resolveTierBadge(slug, tierMap);
+
+  return (
+    <div
+      className={cn(
+        "bg-card rounded-2xl border p-4 flex flex-col gap-2.5 transition-all cursor-pointer group",
+        "hover:shadow-sm",
+        locked
+          ? "opacity-80 hover:opacity-100 hover:border-muted-foreground/40"
+          : "hover:bg-muted/60 dark:hover:border-blue-500"
+      )}
+      onClick={() => onViewDetails(unit)}
+    >
+      <div className="flex flex-wrap gap-1.5">
+        <Badge className={cls}>
+          {locked ? <LockIcon className="size-3" /> : <Tag className="size-3" />}
+          {label}
+        </Badge>
+        {locked && (
+          <Badge variant="secondary">
+            <LockIcon className="size-3" /> Locked
+          </Badge>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <h1 className="text-lg font-medium leading-snug line-clamp-3 transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-400">
+          {unit.title}
+        </h1>
+        {unit.description && (
+          <p className="text-sm leading-relaxed line-clamp-2 group-hover:text-blue-700 dark:group-hover:text-blue-400">
+            {unit.description}
+          </p>
+        )}
+      </div>
+
+      <div className="flex items-center justify-between pt-2 mt-auto border-t">
+        <div className={`flex items-center gap-3 text-sm [&_svg]:size-4 ${locked ? "text-muted-foreground" : "text-card-foreground group-hover:text-blue-700 dark:group-hover:text-blue-400"}`}>
+          <div className="flex items-center gap-1">
+            <Layers /> {lessonCount} {lessonCount === 1 ? "Lesson" : "Lessons"}
+          </div>
+          <div className="flex items-center gap-1">
+            <Timer /> {duration ?? "—"}
+          </div>
+        </div>
+        {locked && (
+          <span className="text-xs text-muted-foreground">Upgrade to unlock</span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const UnitCardSkeleton = () => (
+  <div className="bg-card rounded-2xl border p-4 flex flex-col gap-2.5">
+    <div className="flex gap-1.5">
+      <Skeleton className="h-5 w-20 rounded-full" />
+    </div>
+    <Skeleton className="h-6 w-3/4" />
+    <Skeleton className="h-4 w-full" />
+    <Skeleton className="h-4 w-2/3" />
+    <div className="pt-2 mt-auto border-t">
+      <Skeleton className="h-4 w-24" />
+    </div>
+  </div>
+);
diff --git a/apps/web/src/modules/client/components/UnitUpsellModal.jsx b/apps/web/src/modules/client/components/UnitUpsellModal.jsx
new file mode 100644
index 0000000..88d7874
--- /dev/null
+++ b/apps/web/src/modules/client/components/UnitUpsellModal.jsx
@@ -0,0 +1,54 @@
+// UnitUpsellModal — shown when a learner clicks a locked standalone Unit.
+// Unlocks via any course it's attached to (links to view/buy the course).
+// Shared by UnitsList, UnitDetails, and Dashboard.
+
+import { useNavigate } from "react-router-dom";
+import { LockIcon, Check } from "lucide-react";
+import ResponsiveModal from "@/components/generic/ResponsiveModal";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { resolveTierBadge, cheapestTierSlug } from "@/utils/tierBadge.util";
+
+export default function UnitUpsellModal({ open, onOpenChange, unit, tierMap = {} }) {
+  const navigate = useNavigate();
+  const courses = unit?.courses ?? [];
+
+  const slug = cheapestTierSlug([unit?.subscription, ...courses.map((c) => c.subscription)], tierMap);
+  const { rank, label, cls, panel } = resolveTierBadge(slug, tierMap);
+
+  return (
+    <ResponsiveModal
+      open={open}
+      onOpenChange={onOpenChange}
+      title={unit?.title ?? "Unit Details"}
+      description="Upgrade your plan to access this unit."
+      footer={
+        <>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>Close</Button>
+          <Button onClick={() => { onOpenChange(false); navigate("/subscriptions"); }}>
+            <LockIcon /> View Plans
+          </Button>
+        </>
+      }
+    >
+      <div className="space-y-6 py-2">
+        {rank > 0 && (
+          <div className={`p-5 rounded-2xl border ${panel.bg} ${panel.border}`}>
+            <div className="flex items-center gap-3 mb-3">
+              <Badge className={cls}>
+                <LockIcon className="size-3" /> {label}
+              </Badge>
+            </div>
+            <ul className="space-y-2 text-sm [&_svg]:size-4 mb-4">
+              <li className="flex items-center gap-2"><Check /> Access to {label} content</li>
+              <li className="flex items-center gap-2"><Check /> Certificates & achievements</li>
+            </ul>
+            <p className="text-sm text-muted-foreground">
+              Upgrade to a <span className="font-medium">{label}</span> plan to unlock this unit.
+            </p>
+          </div>
+        )}
+      </div>
+    </ResponsiveModal>
+  );
+}
diff --git a/apps/web/src/modules/client/components/blocks/CourseCompleteBlock.jsx b/apps/web/src/modules/client/components/blocks/CourseCompleteBlock.jsx
new file mode 100644
index 0000000..aef5b76
--- /dev/null
+++ b/apps/web/src/modules/client/components/blocks/CourseCompleteBlock.jsx
@@ -0,0 +1,65 @@
+import { Trophy, Clock, CheckCircle2 } from "lucide-react";
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+/**
+ * Props:
+ *   course — { title, pending_certificate, certificate, ... } the completed course
+ */
+const CourseCompleteBlock = ({ course }) => {
+    const { fmtDate } = useDateFormat();
+
+    const certificate = course?.certificate ?? null;
+    const pendingCert = course?.pending_certificate ?? null;
+    const isIssued = !!certificate;
+    const isPending = !isIssued && !!pendingCert;
+
+    return (
+        <div className="max-w-2xl mx-auto">
+            <div className="rounded-xl border bg-card p-6 space-y-6 text-center sm:p-10">
+                <div className="flex justify-center">
+                    <div className="rounded-full bg-amber-500/10 p-4">
+                        <Trophy className="size-10 text-amber-500" />
+                    </div>
+                </div>
+                <div className="space-y-1.5">
+                    <h2 className="text-2xl font-semibold sm:text-3xl">Congratulations!</h2>
+                    <p className="text-sm text-muted-foreground sm:text-base">
+                        You've successfully completed <span className="font-medium text-foreground">{course?.title}</span>.
+                    </p>
+                </div>
+                <div className="rounded-lg border border-green-500/30 bg-green-500/5 px-4 py-3">
+                    <p className="text-sm font-medium text-green-700 dark:text-green-400">Course Complete</p>
+                    <p className="text-xs text-muted-foreground">
+                        You've passed all required units and the final assessment for this course.
+                    </p>
+                </div>
+
+                {isIssued ? (
+                    <div className="flex items-start gap-2.5 rounded-lg border border-green-500/30 bg-green-500/5 px-4 py-3 text-left">
+                        <CheckCircle2 className="size-4 text-green-500 shrink-0 mt-0.5" />
+                        <div>
+                            <p className="text-sm font-medium text-green-700 dark:text-green-400">Certificate Issued</p>
+                            <p className="text-xs text-muted-foreground">
+                                Issued on {fmtDate(certificate.issued_at)}. View and download it from your Certificates page.
+                            </p>
+                        </div>
+                    </div>
+                ) : (
+                    <div className="flex items-start gap-2.5 rounded-lg border border-amber-500/30 bg-amber-500/5 px-4 py-3 text-left">
+                        <Clock className="size-4 text-amber-500 shrink-0 mt-0.5" />
+                        <div>
+                            <p className="text-sm font-medium text-amber-700 dark:text-amber-400">Certificate Pending</p>
+                            <p className="text-xs text-muted-foreground">
+                                {isPending
+                                    ? `Certificates are issued automatically every hour. Yours will be ready by ${fmtDate(pendingCert.issue_at)} — check your notifications.`
+                                    : "Certificates are issued automatically every hour. Yours will be ready within the next hour — check your notifications."}
+                            </p>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default CourseCompleteBlock;
diff --git a/apps/web/src/modules/client/components/blocks/FileUpload.jsx b/apps/web/src/modules/client/components/blocks/FileUpload.jsx
new file mode 100644
index 0000000..c32ea6e
--- /dev/null
+++ b/apps/web/src/modules/client/components/blocks/FileUpload.jsx
@@ -0,0 +1,333 @@
+import { useState, useCallback, useRef } from "react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import {
+    CloudUpload,
+    FileText,
+    Image,
+    Video,
+    Paperclip,
+    Plus,
+    X,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import { isQasEnv, QAS_UPLOAD_LIMIT_MB } from "@/utils/environment.util";
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function formatBytes(b) {
+    if (b >= 1024 * 1024 * 1024) return (b / 1024 / 1024 / 1024).toFixed(1) + " GB";
+    if (b >= 1024 * 1024) return (b / 1024 / 1024).toFixed(1) + " MB";
+    return (b / 1024).toFixed(0) + " KB";
+}
+
+function iconForFile(name) {
+    const ext = name.split(".").pop().toLowerCase();
+    if (["mp4", "mov", "avi", "webm"].includes(ext)) return "vid";
+    if (["pdf", "doc", "docx", "pptx", "txt"].includes(ext)) return "doc";
+    if (["png", "jpg", "jpeg", "gif", "webp", "svg"].includes(ext)) return "img";
+    return "def";
+}
+
+const FILE_ICON_MAP = {
+    vid: { icon: Video, bg: "bg-amber-100 dark:bg-amber-900", text: "text-amber-700 dark:text-amber-300" },
+    doc: { icon: FileText, bg: "bg-blue-100 dark:bg-blue-900", text: "text-blue-700 dark:text-blue-300" },
+    img: { icon: Image, bg: "bg-green-100 dark:bg-green-900", text: "text-green-700 dark:text-green-300" },
+    def: { icon: Paperclip, bg: "bg-muted", text: "text-muted-foreground" },
+};
+
+// ── FileIcon ──────────────────────────────────────────────────────────────────
+const FileIcon = ({ type }) => {
+    const { icon: Icon, bg, text } = FILE_ICON_MAP[type] ?? FILE_ICON_MAP.def;
+    return (
+        <div className={cn("w-8 h-8 rounded-md flex items-center justify-center shrink-0", bg)}>
+            <Icon className={cn("size-4", text)} />
+        </div>
+    );
+};
+
+// ── FileItem ──────────────────────────────────────────────────────────────────
+const FileItem = ({ file, onRemove }) => {
+    const isUploading = file.status === "uploading";
+    const isError = file.status === "error";
+    const isDone = file.status === "done";
+
+    return (
+        <div className="border rounded-md px-3 py-2.5 bg-muted/50 flex flex-col gap-1.5">
+            <div className="flex items-center gap-2.5">
+                <FileIcon type={file.type} />
+                <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium truncate">{file.name}</p>
+                    <p className="text-xs text-muted-foreground">{file.size}</p>
+                </div>
+                <div className="flex items-center gap-2 shrink-0">
+                    {isDone && <span className="text-xs text-green-600 dark:text-green-400 font-medium">Uploaded</span>}
+                    {isError && <span className="text-xs text-destructive font-medium">Failed</span>}
+                    {isUploading && <span className="text-xs text-blue-600 dark:text-blue-400">{file.progress}%</span>}
+                    <button
+                        onClick={onRemove}
+                        className="text-muted-foreground hover:text-destructive transition-colors p-0.5 rounded"
+                        aria-label={`Remove ${file.name}`}
+                    >
+                        <X className="size-3.5" />
+                    </button>
+                </div>
+            </div>
+            {isUploading && <Progress value={file.progress} className="h-1" />}
+            {isError && <Progress value={100} className="h-1 [&>div]:bg-destructive" />}
+        </div>
+    );
+};
+
+// ── FileUpload ────────────────────────────────────────────────────────────────
+/**
+ * Standalone file upload UI — no modal, no footer buttons.
+ * Compose inside <ResponsiveModal> or any container.
+ *
+ * Props:
+ *   accept            {string}    – native <input accept> string (fallback if
+ *                                    allowedFileTypes not provided)
+ *   hint              {string}    – dropzone helper text (fallback if
+ *                                    allowedFileTypes/maxFileCount not provided)
+ *   allowedFileTypes  {string[]}  – e.g. ["PDF","DOCX","PNG","JPG","MP4"], from the
+ *                                    task's upload_file requirement. Drives both
+ *                                    the displayed hint and the <input accept>,
+ *                                    and is enforced client-side on file add.
+ *   maxFileCount      {number}    – max number of files allowed. Displayed in
+ *                                    the hint and enforced client-side on file add.
+ *   onChange          {function}  – fires on every file list change:
+ *                                    ({ files, isUploading }) => void
+ *   onUploadDone      {function}  – fires when all uploads finish:
+ *                                    ({ files }) => void
+ */
+const FileUpload = ({
+    accept,
+    hint = "PDF, DOCX, MP4, PNG, JPG",
+    allowedFileTypes,
+    maxFileCount,
+    onChange,
+    onUploadDone,
+}) => {
+    const [files, setFiles] = useState([]);
+    const [isDragging, setIsDragging] = useState(false);
+    const fileInputRef = useRef(null);
+
+    const isUploading = files.some((f) => f.status === "uploading");
+
+    // ── Derived accept string ───────────────────────────────────────────────────
+    const derivedAccept = allowedFileTypes?.length
+        ? allowedFileTypes.map((ext) => `.${ext.toLowerCase()}`).join(",")
+        : accept;
+
+    // ── Derived hint text ────────────────────────────────────────────────────────
+    const derivedHint = (() => {
+        if (!allowedFileTypes?.length && !maxFileCount) return hint;
+        const parts = [];
+        if (allowedFileTypes?.length) {
+            parts.push(allowedFileTypes.map((e) => e.toUpperCase()).join(", "));
+        }
+        if (maxFileCount) {
+            parts.push(`Max ${maxFileCount} file${maxFileCount !== 1 ? "s" : ""}`);
+        }
+        return parts.join(" · ");
+    })();
+
+    // Notify parent with full state
+    const notify = (next) => {
+        const uploading = next.some((f) => f.status === "uploading");
+        onChange?.({ files: next, isUploading: uploading });
+    };
+
+    // ── simulate upload progress ──────────────────────────────────────────────
+    const simulateUpload = useCallback((id) => {
+        const tick = () => {
+            setFiles((prev) => {
+                const idx = prev.findIndex((f) => f.id === id);
+                if (idx === -1) return prev;
+                const next = [...prev];
+                const entry = { ...next[idx] };
+                entry.progress = Math.min(100, entry.progress + Math.floor(Math.random() * 18 + 8));
+                if (entry.progress >= 100) { entry.progress = 100; entry.status = "done"; }
+                next[idx] = entry;
+                notify(next);
+                const allDone = next.every((f) => f.status !== "uploading");
+                if (allDone) onUploadDone?.({ files: next });
+                return next;
+            });
+            setFiles((prev) => {
+                const f = prev.find((f) => f.id === id);
+                if (f && f.status === "uploading") setTimeout(tick, 250 + Math.random() * 200);
+                return prev;
+            });
+        };
+        setTimeout(tick, 300);
+    }, [onChange, onUploadDone]);
+
+    // ── add files ─────────────────────────────────────────────────────────────
+    const addFiles = useCallback((rawFiles) => {
+        let incoming = Array.from(rawFiles);
+
+        // ── Validate allowed file types ─────────────────────────────────────────
+        if (allowedFileTypes?.length) {
+            const allowed = allowedFileTypes.map((e) => e.toUpperCase());
+            const rejected = [];
+            incoming = incoming.filter((f) => {
+                const ext = (f.name.split(".").pop() ?? "").toUpperCase();
+                const ok = allowed.includes(ext);
+                if (!ok) rejected.push(f.name);
+                return ok;
+            });
+            if (rejected.length > 0) {
+                setTimeout(() => toast(
+                    `${rejected.length === 1 ? `"${rejected[0]}" is` : `${rejected.length} files are`} not allowed. ` +
+                    `Accepted types: ${allowed.join(", ")}.`
+                ), 0);
+            }
+        }
+
+        setFiles((prev) => {
+            // ── Validate max file count ───────────────────────────────────────────
+            if (maxFileCount) {
+                const availableSlots = maxFileCount - prev.length;
+                if (availableSlots <= 0) {
+                    setTimeout(() => toast(
+                        `You can only attach up to ${maxFileCount} file${maxFileCount !== 1 ? "s" : ""}.`
+                    ), 0);
+                    incoming = [];
+                } else if (incoming.length > availableSlots) {
+                    setTimeout(() => toast(
+                        `Only ${availableSlots} more file${availableSlots !== 1 ? "s" : ""} can be added ` +
+                        `(max ${maxFileCount}).`
+                    ), 0);
+                    incoming = incoming.slice(0, availableSlots);
+                }
+            }
+
+            const duplicates = [];
+            const toAdd = [];
+            incoming.forEach((f) => {
+                if (prev.some((e) => e.name === f.name)) {
+                    duplicates.push(f.name);
+                } else {
+                    toAdd.push({
+                        id: crypto.randomUUID(),
+                        name: f.name,
+                        size: formatBytes(f.size),
+                        bytes: f.size,
+                        type: iconForFile(f.name),
+                        progress: 0,
+                        status: "uploading",
+                        rawFile: f,
+                    });
+                }
+            });
+            if (duplicates.length > 0) {
+                setTimeout(() => toast(duplicates.length === 1
+                    ? `"${duplicates[0]}" is already attached.`
+                    : `${duplicates.length} files are already attached.`), 0);
+            }
+            const next = prev.concat(toAdd);
+            toAdd.forEach((e) => simulateUpload(e.id));
+            notify(next);
+            return next;
+        });
+        if (fileInputRef.current) fileInputRef.current.value = "";
+    }, [simulateUpload, onChange, allowedFileTypes, maxFileCount]);
+
+    // ── remove ────────────────────────────────────────────────────────────────
+    const removeFile = (id) => {
+        setFiles((prev) => {
+            const next = prev.filter((f) => f.id !== id);
+            notify(next);
+            return next;
+        });
+    };
+
+    // ── drag & drop ───────────────────────────────────────────────────────────
+    const onDragOver = (e) => { e.preventDefault(); setIsDragging(true); };
+    const onDragLeave = () => setIsDragging(false);
+    const onDrop = (e) => { e.preventDefault(); setIsDragging(false); addFiles(e.dataTransfer.files); };
+
+    const canAttachMore = !maxFileCount || files.length < maxFileCount;
+
+    return (
+        <div className="flex flex-col gap-0">
+
+            {/* Dropzone */}
+            {files.length === 0 && (
+                <div
+                    onClick={() => fileInputRef.current?.click()}
+                    onDragOver={onDragOver}
+                    onDragLeave={onDragLeave}
+                    onDrop={onDrop}
+                    className={cn(
+                        "border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors",
+                        isDragging
+                            ? "border-blue-400 bg-blue-50 dark:bg-blue-950/30"
+                            : "border-border hover:border-blue-400 hover:bg-muted/40"
+                    )}
+                >
+                    <CloudUpload className={cn("size-8 mx-auto mb-3", isDragging ? "text-blue-500" : "text-muted-foreground")} />
+                    <p className="text-sm font-medium">Drop files here or click to browse</p>
+                    <p className="text-sm text-muted-foreground mt-1">Upload your work to submit with this task</p>
+                    <p className="text-sm mt-2">{derivedHint}</p>
+                    {isQasEnv && (
+                        <p className="text-xs text-amber-600 mt-1">
+                            Self-hosted staging environment — uploads over {QAS_UPLOAD_LIMIT_MB}MB may fail (Cloudflare limit).
+                        </p>
+                    )}
+                </div>
+            )}
+
+            {/* File list */}
+            {files.length > 0 && (
+                <div>
+                    <div className="flex items-center justify-between mb-4">
+                        <span className="text-sm font-medium text-muted-foreground">Attached files</span>
+                        {canAttachMore && (
+                            <Button onClick={() => fileInputRef.current?.click()} variant="outline">
+                                <Plus /> Attach
+                            </Button>
+                        )}
+                    </div>
+
+                    {files.length >= 2 ? (
+                        <ScrollArea className="h-[210px]">
+                            <div className="flex flex-col gap-2">
+                                {files.map((f) => (
+                                    <FileItem key={f.id} file={f} onRemove={() => removeFile(f.id)} />
+                                ))}
+                            </div>
+                        </ScrollArea>
+                    ) : (
+                        <div className="flex flex-col gap-2">
+                            {files.map((f) => (
+                                <FileItem key={f.id} file={f} onRemove={() => removeFile(f.id)} />
+                            ))}
+                        </div>
+                    )}
+
+                    <p className="text-xs text-muted-foreground mt-2">{derivedHint}</p>
+                    {isQasEnv && (
+                        <p className="text-xs text-amber-600 mt-1">
+                            Self-hosted staging environment — uploads over {QAS_UPLOAD_LIMIT_MB}MB may fail (Cloudflare limit).
+                        </p>
+                    )}
+                </div>
+            )}
+
+            <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                accept={derivedAccept}
+                className="hidden"
+                onChange={(e) => addFiles(e.target.files)}
+            />
+        </div>
+    );
+};
+
+export default FileUpload;
+export { FileUpload, FileItem, FileIcon, formatBytes, iconForFile };
\ No newline at end of file
diff --git a/apps/web/src/modules/client/components/blocks/QuizBlock.jsx b/apps/web/src/modules/client/components/blocks/QuizBlock.jsx
new file mode 100644
index 0000000..8512428
--- /dev/null
+++ b/apps/web/src/modules/client/components/blocks/QuizBlock.jsx
@@ -0,0 +1,1093 @@
+// components/QuizBlock.jsx
+import { useState, useEffect, useRef, useCallback } from "react";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+    ChevronLeft, ChevronRight,
+    Circle, CheckCircle2,
+    Square, CheckSquare2,
+    Clock, AlertTriangle, Info, ArrowRight,
+} from "lucide-react";
+import { useClientNotifications } from "@/contexts/ClientNotificationContext";
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+// Zod schema: every question must have a non-empty answer before submitting.
+function buildAnswerSchema(questions = []) {
+    const shape = {};
+    for (const q of questions) {
+        const key = String(q.question_id);
+        shape[key] = q.type === "multi_select"
+            ? z.array(z.unknown()).min(1, "This question requires at least one selection.")
+            : z.union([z.string(), z.number()]).refine((v) => v !== "" && v != null, "This question requires an answer.");
+    }
+    return z.object(shape);
+}
+
+function QuizSkeleton() {
+    return (
+        <div className="max-w-2xl mx-auto space-y-5">
+            <Skeleton className="h-5 w-1/3" />
+            <Skeleton className="h-1.5 w-full rounded-full" />
+            <Skeleton className="h-16 w-full rounded-xl" />
+            <div className="space-y-2">
+                <Skeleton className="h-11 w-full rounded-lg" />
+                <Skeleton className="h-11 w-full rounded-lg" />
+                <Skeleton className="h-11 w-full rounded-lg" />
+                <Skeleton className="h-11 w-full rounded-lg" />
+            </div>
+        </div>
+    );
+}
+
+function formatTime(secs) {
+    if (secs === null || secs === undefined) return null;
+    const m = Math.floor(secs / 60).toString().padStart(2, "0");
+    const s = (secs % 60).toString().padStart(2, "0");
+    return `${m}:${s}`;
+}
+
+function isQuestionAnswered(answer) {
+    return Array.isArray(answer) ? answer.length > 0 : answer !== undefined;
+}
+
+/**
+ * Props:
+ *   quiz     — assessment data including active_session, time_limit_minutes, etc.
+ *   loading  — true while fetch is in-flight
+ *   onStart  — async () => { session_id, expires_at, remaining_seconds, draft_answers }
+ *   onDraft          — (answers) => void — called every 25s
+ *   onRefreshSession — async () => { expires_at, remaining_seconds }
+ *   onSubmit — async (answers, sessionId?) => result|null
+ *   onRetake — () => void
+ *   onActiveChange   — (isActive: boolean) => void — fires when session starts/ends
+ *   label    — "Quiz" or "Assessment"
+ */
+const QuizBlock = ({ quiz, loading = false, onStart, onDraft, onRefreshSession, onSubmit, onRetake, onActiveChange, onNextContent, nextLabel, label = "Quiz" }) => {
+    const { fmtDateTime } = useDateFormat();
+    const questions = quiz?.questions ?? [];
+    const total = questions.length;
+
+    // ── Core stage state ──────────────────────────────────────────────────────
+    const [stage, setStage]               = useState("intro");   // 'intro' | 'taking' | 'review' | 'result'
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [answers, setAnswers]           = useState({});
+    const [submitting, setSubmitting]     = useState(false);
+    const [starting, setStarting]         = useState(false);
+    const [result, setResult]             = useState(null);
+    const [submitError, setSubmitError]   = useState(null);
+
+    // ── Timer state ───────────────────────────────────────────────────────────
+    const [remainingSeconds, setRemainingSeconds] = useState(null);
+    const [timeExpired, setTimeExpired]           = useState(false);
+
+    // ── Notifications ─────────────────────────────────────────────────────────
+    const { notifications, fetchNotifications, accelerate, decelerate } = useClientNotifications();
+    const [assessmentUpdatedAlert, setAssessmentUpdatedAlert] = useState(false);
+    const seenNotifRef = useRef(new Set());
+
+    // ── Session refs ──────────────────────────────────────────────────────────
+    const sessionRef    = useRef({ sessionId: null, expiresAt: null });
+    const answersRef    = useRef({});
+    const timerFiredRef = useRef(false);
+
+    useEffect(() => { answersRef.current = answers; }, [answers]);
+
+    // Notify parent when an active session starts or ends
+    useEffect(() => {
+        onActiveChange?.(stage === "taking" || stage === "review");
+    }, [stage]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    // Always deactivate when component unmounts (user navigated away mid-session)
+    useEffect(() => () => { onActiveChange?.(false); }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    useEffect(() => {
+        setStage("intro");
+        setResult(null);
+        setRemainingSeconds(null);
+        setTimeExpired(false);
+        sessionRef.current = { sessionId: null, expiresAt: null };
+        timerFiredRef.current = false;
+        const draft = quiz?.active_session?.draft_answers ?? {};
+        const hasDraft = Object.keys(draft).length > 0;
+        setAnswers(hasDraft ? draft : {});
+        answersRef.current = hasDraft ? draft : {};
+        if (hasDraft) {
+            const qs = quiz?.questions ?? [];
+            const firstUnanswered = qs.findIndex(q => !isQuestionAnswered(draft[q.question_id]));
+            setCurrentIndex(firstUnanswered > -1 ? firstUnanswered : 0);
+        } else {
+            setCurrentIndex(0);
+        }
+    }, [quiz?.quiz_id]);
+
+    useEffect(() => {
+        if (stage !== "taking") { decelerate(); return; }
+        accelerate();
+        fetchNotifications();
+        return () => decelerate();
+    }, [stage]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    useEffect(() => {
+        if (stage !== "taking") return;
+        notifications.forEach((n) => {
+            if (n.type === "assessment" && n.title === "Assessment Updated" && !seenNotifRef.current.has(n.notification_id)) {
+                seenNotifRef.current.add(n.notification_id);
+                setAssessmentUpdatedAlert(true);
+                if (onRefreshSession) {
+                    onRefreshSession().then(updated => {
+                        if (updated?.remaining_seconds != null) {
+                            setRemainingSeconds(updated.remaining_seconds);
+                            sessionRef.current.expiresAt = updated.expires_at ? new Date(updated.expires_at) : null;
+                        }
+                    });
+                }
+            }
+        });
+    }, [notifications, stage]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    useEffect(() => {
+        if (stage !== "taking" || !onDraft) return;
+        onDraft(answersRef.current);
+        const id = setInterval(() => onDraft(answersRef.current), 25_000);
+        return () => clearInterval(id);
+    }, [stage, onDraft]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    // Save immediately on every answer change — ensures no answer is lost if the tab closes
+    // before the 25s interval fires. Guards on stage and non-empty answers to skip resets.
+    useEffect(() => {
+        if (stage !== "taking" || !onDraft || Object.keys(answers).length === 0) return;
+        onDraft(answers);
+    }, [answers]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    useEffect(() => {
+        if (stage !== "taking" || !sessionRef.current.expiresAt) return;
+        timerFiredRef.current = false;
+        const tick = () => {
+            const secs = Math.max(0, Math.ceil((sessionRef.current.expiresAt.getTime() - Date.now()) / 1000));
+            setRemainingSeconds(secs);
+            if (secs <= 0 && !timerFiredRef.current) {
+                timerFiredRef.current = true;
+                setTimeExpired(true);
+                clearInterval(id);
+            }
+        };
+        tick();
+        const id = setInterval(tick, 1000);
+        return () => clearInterval(id);
+    }, [stage]);
+
+    useEffect(() => {
+        if (!timeExpired || submitting) return;
+        const autoSubmit = async () => {
+            setSubmitting(true);
+            const res = await onSubmit?.(answersRef.current, sessionRef.current.sessionId);
+            setSubmitting(false);
+            if (res) { setResult(res); setStage("result"); }
+        };
+        autoSubmit();
+    }, [timeExpired]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    // ── Handlers ─────────────────────────────────────────────────────────────
+    const handleStart = useCallback(async () => {
+        const isAssessment = label === "Assessment";
+        const hasTimeLimit = isAssessment && (quiz?.time_limit_minutes ?? 0) > 0;
+
+        if (isAssessment && onStart) {
+            setStarting(true);
+            const session = await onStart();
+            setStarting(false);
+            if (!session) return;
+            sessionRef.current = {
+                sessionId: session.session_id,
+                expiresAt: session.expires_at ? new Date(session.expires_at) : null,
+            };
+            if (hasTimeLimit && session.remaining_seconds != null) setRemainingSeconds(session.remaining_seconds);
+            if (session.draft_answers && Object.keys(session.draft_answers).length > 0) {
+                setAnswers(session.draft_answers);
+                answersRef.current = session.draft_answers;
+                const qs = quiz?.questions ?? [];
+                const firstUnanswered = qs.findIndex(q => !isQuestionAnswered(session.draft_answers[q.question_id]));
+                setCurrentIndex(firstUnanswered > -1 ? firstUnanswered : 0);
+            }
+        }
+        setStage("taking");
+    }, [label, quiz?.time_limit_minutes, onStart]);
+
+    const handleRetake = () => {
+        setCurrentIndex(0);
+        setAnswers({});
+        setResult(null);
+        setRemainingSeconds(null);
+        setTimeExpired(false);
+        sessionRef.current = { sessionId: null, expiresAt: null };
+        timerFiredRef.current = false;
+        setStage("intro");
+        onRetake?.();
+    };
+
+    const handleSubmit = useCallback(async () => {
+        // Zod: all questions must be answered before submission is allowed
+        const schema = buildAnswerSchema(questions);
+        const stringifiedAnswers = Object.fromEntries(
+            Object.entries(answers).map(([k, v]) => [String(k), v])
+        );
+        const parsed = schema.safeParse(stringifiedAnswers);
+        if (!parsed.success) {
+            const unanswered = questions.filter(
+                (q) => !isQuestionAnswered(answers[q.question_id])
+            ).length;
+            setSubmitError(`Answer all questions before submitting — ${unanswered} still unanswered.`);
+            return;
+        }
+        setSubmitError(null);
+        setSubmitting(true);
+        const res = await onSubmit?.(answers, sessionRef.current.sessionId);
+        setSubmitting(false);
+        if (res) { setResult(res); setStage("result"); }
+    }, [answers, questions, onSubmit]);
+
+    const handleOptionClick = (optionId) => {
+        const question = questions[currentIndex];
+        const isMulti  = question.type === "multi_select";
+        const multiLimit = isMulti ? (question.correct_count ?? null) : null;
+        setAnswers((prev) => {
+            if (!isMulti) return { ...prev, [question.question_id]: optionId };
+            const current = prev[question.question_id] ?? [];
+            if (!current.includes(optionId) && multiLimit !== null && current.length >= multiLimit) return prev;
+            const next = current.includes(optionId)
+                ? current.filter((id) => id !== optionId)
+                : [...current, optionId];
+            return { ...prev, [question.question_id]: next };
+        });
+    };
+
+    const handleGoToReview = () => {
+        setStage("review");
+    };
+
+    const handleNext = () => {
+        if (isLast) { handleGoToReview(); return; }
+        setCurrentIndex((i) => Math.min(i + 1, total - 1));
+    };
+
+    const handlePrev = () => {
+        if (isFirst) {
+            if (label !== "Assessment") setStage("intro");
+            return;
+        }
+        setCurrentIndex((i) => Math.max(i - 1, 0));
+    };
+
+    // ── Guards ────────────────────────────────────────────────────────────────
+    if (!quiz && !loading) {
+        return (
+            <div className="h-full w-full flex items-center justify-center text-muted-foreground py-20">
+                <p className="text-sm">No {label.toLowerCase()} available yet.</p>
+            </div>
+        );
+    }
+    if (loading) return <QuizSkeleton />;
+    if (!total) {
+        return (
+            <div className="h-full w-full flex items-center justify-center text-muted-foreground py-20">
+                <p className="text-sm">This {label.toLowerCase()} doesn't have any questions yet.</p>
+            </div>
+        );
+    }
+
+    // ── Derived values ────────────────────────────────────────────────────────
+    const isAssessment  = label === "Assessment";
+    const hasTimeLimit  = isAssessment && (quiz?.time_limit_minutes ?? 0) > 0;
+    const activeSession = quiz?.active_session ?? null;
+
+    // ── ASSESSMENT INTRO ──────────────────────────────────────────────────────
+    if (stage === "intro" && isAssessment) {
+        const attempts          = quiz.attempt_count ?? 0;
+        const attemptsRemaining = quiz.attempts_remaining ?? null;
+        const cooldownUntil     = quiz.cooldown_until ? new Date(quiz.cooldown_until) : null;
+        const canAttempt        = quiz.can_attempt ?? true;
+
+        const attemptsDisplay = attemptsRemaining !== null && quiz.max_attempts
+            ? `${attemptsRemaining} / ${quiz.max_attempts}`
+            : attemptsRemaining !== null
+            ? `${attemptsRemaining}`
+            : attempts > 0 ? `${attempts}` : "—";
+
+        return (
+            <div className="max-w-2xl mx-auto space-y-6">
+                {/* Header */}
+                <div className="space-y-1">
+                    <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+                        {label}
+                    </p>
+                    <h1 className="text-2xl font-bold sm:text-3xl">{quiz.title || label}</h1>
+                    {quiz.description && (
+                        <p className="text-sm text-muted-foreground">{quiz.description}</p>
+                    )}
+                    {quiz.is_required && !quiz.description && (
+                        <p className="text-sm text-muted-foreground">
+                            Required to complete this course.
+                        </p>
+                    )}
+                </div>
+
+                {/* Stats grid */}
+                <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                    <div className="rounded-xl border bg-card p-4 space-y-0.5">
+                        <p className="text-2xl font-bold">{total}</p>
+                        <p className="text-xs text-muted-foreground">Questions</p>
+                    </div>
+                    <div className="rounded-xl border bg-card p-4 space-y-0.5">
+                        <p className="text-2xl font-bold">
+                            {hasTimeLimit ? `${quiz.time_limit_minutes} min` : "—"}
+                        </p>
+                        <p className="text-xs text-muted-foreground">Time limit</p>
+                    </div>
+                    <div className="rounded-xl border bg-card p-4 space-y-0.5">
+                        <p className="text-2xl font-bold">{quiz.passing_score}%</p>
+                        <p className="text-xs text-muted-foreground">To pass</p>
+                    </div>
+                    <div className="rounded-xl border bg-card p-4 space-y-0.5">
+                        <p className="text-2xl font-bold">{attemptsDisplay}</p>
+                        <p className="text-xs text-muted-foreground">Attempts left</p>
+                    </div>
+                </div>
+
+                {/* Status banners */}
+                {quiz.has_passed && (
+                    <div className="rounded-lg border border-green-500/30 bg-green-500/5 px-4 py-3">
+                        <p className="text-sm font-medium text-green-700 dark:text-green-400">
+                            You've already passed this assessment
+                        </p>
+                        <p className="text-sm">
+                            Best score: {quiz.best_attempt?.score}%
+                            {quiz.best_attempt?.passing_score != null && (
+                                <span className="text-muted-foreground"> · passing score {quiz.best_attempt.passing_score}%</span>
+                            )}
+                        </p>
+                    </div>
+                )}
+                {!canAttempt && cooldownUntil && (
+                    <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 px-4 py-3">
+                        <p className="text-sm font-medium text-amber-700 dark:text-amber-400">You're on cooldown</p>
+                        <p className="text-sm">You can retake this assessment after {fmtDateTime(cooldownUntil)}</p>
+                    </div>
+                )}
+                {!canAttempt && !cooldownUntil && attemptsRemaining === 0 && (
+                    <div className="rounded-lg border border-red-500/30 bg-red-500/5 px-4 py-3">
+                        <p className="text-sm font-medium text-red-700 dark:text-red-400">No attempts remaining</p>
+                        <p className="text-sm">
+                            {quiz.window_reset_at
+                                ? `You can try again after ${fmtDateTime(quiz.window_reset_at)}`
+                                : "You've used all available attempts for this assessment"}
+                        </p>
+                    </div>
+                )}
+                {activeSession && canAttempt && (
+                    <div className="rounded-lg border border-blue-500/30 bg-blue-500/5 px-4 py-3">
+                        <p className="text-sm font-medium text-blue-700 dark:text-blue-400 flex items-center gap-1.5">
+                            <Clock className="size-4" /> Session in progress
+                        </p>
+                        <p className="text-xs text-muted-foreground mt-1">
+                            You have an unfinished attempt.{" "}
+                            {activeSession.remaining_seconds != null
+                                ? `${formatTime(activeSession.remaining_seconds)} remaining — resume before time runs out.`
+                                : "Resume where you left off."}
+                        </p>
+                    </div>
+                )}
+
+                {/* Before you begin */}
+                <div className="rounded-xl border bg-card p-5 space-y-3">
+                    <p className="font-semibold text-sm">Before you begin</p>
+                    <ul className="space-y-2.5 text-sm text-foreground/80">
+                        {hasTimeLimit && (
+                            <li className="flex items-start gap-2.5">
+                                <span className="mt-2 size-1.5 rounded-full bg-primary shrink-0" />
+                                <span>
+                                    The timer starts the moment you begin and{" "}
+                                    <strong>cannot be paused</strong>. Your assessment auto-submits when time runs out.
+                                </span>
+                            </li>
+                        )}
+                        <li className="flex items-start gap-2.5">
+                            <span className="mt-2 size-1.5 rounded-full bg-primary shrink-0" />
+                            <span>You can skip questions and return to them later. All questions must be answered before you can submit.</span>
+                        </li>
+                        <li className="flex items-start gap-2.5">
+                            <span className="mt-2 size-1.5 rounded-full bg-primary shrink-0" />
+                            <span>
+                                Your progress is <strong>saved automatically</strong> — you can safely resume if you lose connection.
+                            </span>
+                        </li>
+                        <li className="flex items-start gap-2.5">
+                            <span className="mt-2 size-1.5 rounded-full bg-primary shrink-0" />
+                            <span>Review all answers on the summary screen before final submission.</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <Button
+                    size="lg"
+                    onClick={handleStart}
+                    disabled={!canAttempt || starting}
+                >
+                    {starting
+                        ? "Starting…"
+                        : activeSession
+                        ? "Resume Assessment"
+                        : attempts > 0
+                        ? "Retake Assessment"
+                        : "Begin assessment"}
+                </Button>
+            </div>
+        );
+    }
+
+    // ── QUIZ INTRO ────────────────────────────────────────────────────────────
+    if (stage === "intro") {
+        const attempts          = quiz.attempt_count ?? 0;
+        const attemptsRemaining = quiz.attempts_remaining ?? null;
+        const cooldownUntil     = quiz.cooldown_until ? new Date(quiz.cooldown_until) : null;
+        const canAttempt        = quiz.can_attempt ?? true;
+        const hasActiveSession  = !!quiz.active_session;
+
+        return (
+            <div className="max-w-2xl mx-auto">
+                <div className="rounded-xl border bg-card p-6 space-y-6 text-center sm:p-10 shadow-lg">
+                    <div className="space-y-1.5">
+                        <h2 className="text-xl font-semibold sm:text-2xl">{quiz.title || label}</h2>
+                        {quiz.is_required && (
+                            <span className="inline-block rounded-full bg-amber-500/10 px-2.5 py-0.5 text-xs font-medium text-amber-600">
+                                Required to complete this unit
+                            </span>
+                        )}
+                    </div>
+
+                    {quiz.has_passed && !hasActiveSession && (
+                        <div className="rounded-lg border border-green-500/30 bg-green-500/5 px-4 py-3">
+                            <p className="text-md font-medium text-green-700 dark:text-green-400">You've already passed this quiz</p>
+                            <p className="text-sm">Best score: {quiz.best_attempt?.score}%</p>
+                        </div>
+                    )}
+
+                    {hasActiveSession && (
+                        <div className="rounded-lg border border-amber-500/30 bg-amber-500/10 px-4 py-3 flex items-start gap-3 text-left">
+                            <Clock className="size-4 text-amber-500 shrink-0 mt-0.5" />
+                            <div>
+                                <p className="text-sm font-semibold text-amber-700 dark:text-amber-400">You have an unfinished session</p>
+                                <p className="text-xs text-amber-600 dark:text-amber-500 mt-0.5 leading-relaxed">
+                                    You left this quiz before completing it. Resume to continue from where you left off.
+                                </p>
+                            </div>
+                        </div>
+                    )}
+
+                    <div className="flex items-center justify-center gap-6 sm:gap-10">
+                        <div className="space-y-0.5">
+                            <p className="text-2xl font-bold sm:text-3xl">{total}</p>
+                            <p className="text-xs text-muted-foreground sm:text-sm">Question{total === 1 ? "" : "s"}</p>
+                        </div>
+                        <div className="h-10 w-px bg-border" />
+                        <div className="space-y-0.5">
+                            <p className="text-2xl font-bold sm:text-3xl">{quiz.passing_score}%</p>
+                            <p className="text-xs text-muted-foreground sm:text-sm">To pass</p>
+                        </div>
+                    </div>
+
+                    <Button
+                        size="lg"
+                        className="w-full sm:w-auto"
+                        onClick={handleStart}
+                        disabled={!canAttempt || starting}
+                    >
+                        {starting ? "Starting…" : hasActiveSession ? "Resume Quiz" : attempts > 0 ? "Retake Quiz" : "Start Quiz"}
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+
+    // ── RESULT ────────────────────────────────────────────────────────────────
+    if (stage === "result" && result) {
+        return (
+            <div className="max-w-2xl mx-auto space-y-5">
+                <div className={`rounded-xl border p-5 text-center space-y-1 ${result.passed ? "border-green-500/30 bg-green-500/5" : "border-red-500/30 bg-red-500/5"}`}>
+                    <p className="text-sm text-muted-foreground">{result.passed ? "You passed!" : "You did not pass"}</p>
+                    <p className="text-3xl font-bold">{result.score}%</p>
+                    <p className="text-xs text-muted-foreground">
+                        {result.earned_points} / {result.total_points} points · passing score {result.passing_score}%
+                    </p>
+                    {result.attempt_number && (
+                        <p className="text-xs text-muted-foreground">Attempt #{result.attempt_number}</p>
+                    )}
+                </div>
+
+                {result.passed && onNextContent && nextLabel && (
+                    <div
+                        onClick={onNextContent}
+                        className="flex items-center gap-3 bg-card border rounded-xl px-4 py-3 shadow-sm hover:bg-muted transition-colors text-sm font-medium cursor-pointer select-none"
+                    >
+                        <div className="flex flex-col items-start flex-1">
+                            <span className="text-xs text-muted-foreground font-normal">Up next</span>
+                            <span>{nextLabel}</span>
+                        </div>
+                        <ArrowRight className="size-4 text-muted-foreground shrink-0" />
+                    </div>
+                )}
+
+                {!result.passed && (
+                    <div className="flex justify-center">
+                        <Button variant="outline" onClick={handleRetake}>Retake {label}</Button>
+                    </div>
+                )}
+            </div>
+        );
+    }
+
+    // ── ASSESSMENT REVIEW ─────────────────────────────────────────────────────
+    if (stage === "review" && isAssessment) {
+        const answeredCount   = questions.filter(q => isQuestionAnswered(answers[q.question_id])).length;
+        const unansweredCount = total - answeredCount;
+
+        return (
+            <div className="max-w-2xl mx-auto space-y-5">
+                <div className="space-y-1">
+                    <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">Final Step</p>
+                    <h2 className="text-2xl font-bold">Review your answers</h2>
+                    <p className="text-sm text-muted-foreground">
+                        Once you submit, your answers are final and your score is calculated.
+                    </p>
+                </div>
+
+                {/* Stats row */}
+                <div className="grid grid-cols-3 gap-3">
+                    <div className="rounded-xl border bg-card p-4 space-y-0.5">
+                        <p className="text-2xl font-bold text-green-600 dark:text-green-400">{answeredCount}</p>
+                        <p className="text-xs text-muted-foreground">Answered</p>
+                    </div>
+                    <div className="rounded-xl border bg-card p-4 space-y-0.5">
+                        <p className={`text-2xl font-bold ${unansweredCount > 0 ? "text-amber-600 dark:text-amber-400" : "text-muted-foreground"}`}>
+                            {unansweredCount}
+                        </p>
+                        <p className="text-xs text-muted-foreground">Unanswered</p>
+                    </div>
+                    <div className="rounded-xl border bg-card p-4 space-y-0.5">
+                        <p className="text-2xl font-bold font-mono tabular-nums">
+                            {remainingSeconds !== null ? formatTime(remainingSeconds) : "—"}
+                        </p>
+                        <p className="text-xs text-muted-foreground">Time left</p>
+                    </div>
+                </div>
+
+                {/* Unanswered warning */}
+                {unansweredCount > 0 && (
+                    <div className="flex items-start gap-2.5 rounded-lg border border-amber-400/50 bg-amber-50 dark:bg-amber-500/10 px-4 py-3 text-sm text-amber-700 dark:text-amber-400">
+                        <AlertTriangle className="size-4 shrink-0 mt-0.5" />
+                        <span>
+                            <strong>{unansweredCount} question{unansweredCount !== 1 ? "s are" : " is"} still unanswered.</strong>{" "}
+                            You can still submit. Tap a highlighted number below to jump back.
+                        </span>
+                    </div>
+                )}
+
+                {/* All questions grid */}
+                <div className="rounded-xl border bg-card p-5 space-y-4">
+                    <p className="text-sm font-semibold">All questions</p>
+                    <div className="grid xs:grid-cols-8 lg:grid-cols-12 gap-2">
+                        {questions.map((q, i) => {
+                            const answered = isQuestionAnswered(answers[q.question_id]);
+                            return (
+                                <button
+                                    key={q.question_id}
+                                    type="button"
+                                    onClick={() => { setCurrentIndex(i); setStage("taking"); }}
+                                    className={`aspect-square rounded-lg text-sm font-medium transition-colors
+                                        ${answered
+                                            ? "bg-primary text-background hover:opacity-80"
+                                            : "border-2 border-amber-400 text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-500/10"
+                                        }`}
+                                >
+                                    {i + 1}
+                                </button>
+                            );
+                        })}
+                    </div>
+                    <div className="flex gap-4 text-xs text-muted-foreground">
+                        <span className="flex items-center gap-1.5">
+                            <span className="size-3 rounded-sm bg-primary inline-block" /> Answered
+                        </span>
+                        <span className="flex items-center gap-1.5">
+                            <span className="size-3 rounded-sm border-2 border-amber-400 inline-block" /> Unanswered
+                        </span>
+                    </div>
+                </div>
+
+                <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                        <Button variant="outline" onClick={() => setStage("taking")} disabled={submitting}>
+                            <ChevronLeft className="size-4" />
+                            Back to assessment
+                        </Button>
+                        <Button onClick={handleSubmit} disabled={submitting}>
+                            {submitting ? "Submitting…" : "Submit assessment"}
+                        </Button>
+                    </div>
+                    {submitError && (
+                        <p className="text-xs text-red-600 dark:text-red-400 text-right flex items-center justify-end gap-1">
+                            <AlertTriangle className="size-3 shrink-0" /> {submitError}
+                        </p>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
+    // ── QUIZ REVIEW ───────────────────────────────────────────────────────────
+    if (stage === "review") {
+        return (
+            <div className="max-w-2xl mx-auto space-y-5">
+                <div>
+                    <h2 className="text-xl font-bold sm:text-2xl pb-3 border-b border-border">
+                        {quiz.title || label}
+                    </h2>
+                </div>
+
+                {/* Question pills */}
+                <div className="flex flex-wrap gap-2">
+                    {questions.map((q, i) => {
+                        const answered = isQuestionAnswered(answers[q.question_id]);
+                        return (
+                            <button
+                                key={q.question_id}
+                                type="button"
+                                onClick={() => { setCurrentIndex(i); setStage("taking"); }}
+                                className={`size-9 rounded-full text-sm font-semibold transition-colors
+                                    ${answered
+                                        ? "bg-primary text-background hover:opacity-80"
+                                        : "bg-muted text-muted-foreground border border-border hover:bg-muted/80"
+                                    }`}
+                            >
+                                {i + 1}
+                            </button>
+                        );
+                    })}
+                </div>
+
+                <div className="space-y-1">
+                    <h3 className="text-lg font-bold">Review your answers</h3>
+                    <p className="text-sm text-muted-foreground">
+                        Check your responses before submitting. Tap any question to go back and change your answer.
+                    </p>
+                </div>
+
+                <div className="space-y-3">
+                    {questions.map((q, i) => {
+                        const ans      = answers[q.question_id];
+                        const answered = isQuestionAnswered(ans);
+                        const isMultiQ = q.type === "multi_select";
+
+                        let answerLabel = null;
+                        if (answered) {
+                            if (isMultiQ && Array.isArray(ans)) {
+                                answerLabel = ans
+                                    .map(id => {
+                                        const idx = (q.options ?? []).findIndex(o => o.option_id === id);
+                                        return idx >= 0 ? String.fromCharCode(65 + idx) : null;
+                                    })
+                                    .filter(Boolean)
+                                    .join(", ");
+                            } else {
+                                const idx = (q.options ?? []).findIndex(o => o.option_id === ans);
+                                if (idx >= 0) {
+                                    answerLabel = `${String.fromCharCode(65 + idx)}. ${q.options[idx].text}`;
+                                }
+                            }
+                        }
+
+                        return (
+                            <button
+                                key={q.question_id}
+                                type="button"
+                                onClick={() => { setCurrentIndex(i); setStage("taking"); }}
+                                className="w-full flex items-center gap-4 rounded-xl border bg-card p-4 text-left hover:bg-muted/30 transition-colors"
+                            >
+                                <span className="shrink-0 size-8 rounded-full bg-primary text-background text-sm font-semibold flex items-center justify-center">
+                                    {i + 1}
+                                </span>
+                                <div className="flex-1 min-w-0">
+                                    <p className="text-sm font-semibold leading-snug line-clamp-2">{q.question}</p>
+                                    {answerLabel && (
+                                        <p className="text-xs text-muted-foreground mt-0.5 truncate">{answerLabel}</p>
+                                    )}
+                                </div>
+                                <span className={`shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium ${
+                                    answered
+                                        ? "bg-green-500/10 text-green-700 dark:text-green-400"
+                                        : "bg-muted text-muted-foreground"
+                                }`}>
+                                    {answered ? "Answered" : "Not answered"}
+                                </span>
+                            </button>
+                        );
+                    })}
+                </div>
+
+                <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                        <Button variant="outline" onClick={() => setStage("taking")} disabled={submitting}>
+                            <ChevronLeft className="size-4" />
+                            Back to questions
+                        </Button>
+                        <Button onClick={handleSubmit} disabled={submitting}>
+                            {submitting ? "Submitting…" : "Submit quiz"}
+                        </Button>
+                    </div>
+                    {submitError && (
+                        <p className="text-xs text-red-600 dark:text-red-400 text-right flex items-center justify-end gap-1">
+                            <AlertTriangle className="size-3 shrink-0" /> {submitError}
+                        </p>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
+    // ── QUESTION STEPPER (shared derived values) ──────────────────────────────
+    const question   = questions[currentIndex];
+    const isFirst    = currentIndex === 0;
+    const isLast     = currentIndex === total - 1;
+    const isMulti    = question.type === "multi_select";
+    const selected   = answers[question.question_id];
+    const progress   = Math.round(((currentIndex + 1) / total) * 100);
+
+    const multiLimit         = isMulti ? (question.correct_count ?? null) : null;
+    const selectedCount      = isMulti ? (selected ?? []).length : 0;
+    const limitReached       = multiLimit !== null && selectedCount >= multiLimit;
+    const isCurrentAnswered  = isQuestionAnswered(selected);
+    const unansweredCount    = questions.filter(q => !isQuestionAnswered(answers[q.question_id])).length;
+
+    const timerColor = remainingSeconds !== null
+        ? remainingSeconds <= 60
+            ? "text-red-500 dark:text-red-400"
+            : remainingSeconds <= 300
+            ? "text-amber-500 dark:text-amber-400"
+            : "text-muted-foreground"
+        : null;
+
+    // ── ASSESSMENT TAKING (2-column layout) ───────────────────────────────────
+    if (isAssessment) {
+        const answeredCount = questions.filter(q => isQuestionAnswered(answers[q.question_id])).length;
+
+        const optionRows = (question.options ?? []).map((option, i) => {
+            const letter     = String.fromCharCode(65 + i);
+            const isSelected = isMulti
+                ? (selected ?? []).includes(option.option_id)
+                : selected === option.option_id;
+            const isDisabled = (isMulti && limitReached && !isSelected) || (timeExpired && submitting);
+            const Icon = isMulti
+                ? (isSelected ? CheckSquare2 : Square)
+                : (isSelected ? CheckCircle2 : Circle);
+
+            return (
+                <button
+                    key={option.option_id}
+                    type="button"
+                    onClick={() => handleOptionClick(option.option_id)}
+                    disabled={isDisabled}
+                    className={`flex w-full items-center gap-3 rounded-lg border px-3 py-3 text-left text-sm transition-colors sm:text-base
+                        ${isSelected ? "border-primary bg-primary/5" : "border-border"}
+                        ${isDisabled ? "opacity-40 cursor-not-allowed" : "hover:bg-muted-foreground/5"}`}
+                >
+                    <Icon className={`size-4 shrink-0 ${isSelected ? "text-primary" : "text-muted-foreground"}`} />
+                    <span className="font-medium text-muted-foreground w-4 shrink-0">{letter}</span>
+                    <span>{option.text}</span>
+                </button>
+            );
+        });
+
+        return (
+            <div className="max-w-5xl mx-auto">
+                {/* Assessment updated alert */}
+                {assessmentUpdatedAlert && (
+                    <div className="flex items-start gap-3 rounded-lg border border-blue-500/30 bg-blue-500/5 px-4 py-3 mb-5">
+                        <Info className="h-4 w-4 text-blue-500 shrink-0 mt-0.5" />
+                        <div className="flex-1 min-w-0">
+                            <p className="text-sm font-medium text-blue-700 dark:text-blue-400">Assessment Updated</p>
+                            <p className="text-xs text-blue-600/80 dark:text-blue-300/70 mt-0.5">
+                                Your administrator has made changes to this assessment. Your current session and saved answers are unaffected.
+                            </p>
+                        </div>
+                        <button
+                            onClick={() => setAssessmentUpdatedAlert(false)}
+                            className="text-blue-400 hover:text-blue-600 shrink-0 text-xs leading-none mt-0.5"
+                        >✕</button>
+                    </div>
+                )}
+
+                <div className="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-4 items-start">
+                    {/* ── Right: sidebar — order-first on mobile so timer/progress sit above the question ── */}
+                    <div className="space-y-2 order-first lg:order-last">
+                        {/* Timer */}
+                        {remainingSeconds !== null && (
+                            <div className={`rounded-xl flex items-center justify-between gap-3 px-4 py-3 lg:block lg:p-4 ${
+                                timeExpired
+                                    ? "bg-red-600 text-white"
+                                    : remainingSeconds <= 60
+                                    ? "bg-red-700 text-white"
+                                    : "bg-primary text-background"
+                            }`}>
+                                <p className="text-xs uppercase tracking-widest opacity-60">Time Remaining</p>
+                                <p className="text-2xl lg:text-4xl font-bold font-mono tabular-nums lg:mt-1">
+                                    {timeExpired ? "00:00" : formatTime(remainingSeconds)}
+                                </p>
+                            </div>
+                        )}
+
+                        {/* Progress panel */}
+                        <div className="rounded-xl border bg-card p-3 lg:p-4 space-y-2 lg:space-y-3">
+                            <div className="flex items-center justify-between text-sm">
+                                <span className="font-medium">Progress</span>
+                                <span className="text-muted-foreground">{answeredCount} / {total} answered</span>
+                            </div>
+
+                            {/* Number grid — scrollable after ~30 questions (3 rows on mobile, 4 on desktop) */}
+                            <div className="overflow-y-auto max-h-24 lg:max-h-40">
+                                <div className="grid grid-cols-10 lg:grid-cols-8 gap-1 lg:gap-1.5">
+                                    {questions.map((q, i) => {
+                                        const ans      = answers[q.question_id];
+                                        const answered  = isQuestionAnswered(ans);
+                                        const isCurrent = i === currentIndex;
+                                        return (
+                                            <button
+                                                key={q.question_id}
+                                                type="button"
+                                                onClick={() => setCurrentIndex(i)}
+                                                disabled={timeExpired && submitting}
+                                                className={`aspect-square rounded text-xs font-medium transition-colors
+                                                    ${isCurrent
+                                                        ? "border-2 border-foreground bg-background text-foreground"
+                                                        : answered
+                                                        ? "bg-primary text-background hover:opacity-80"
+                                                        : "border border-border bg-background text-muted-foreground hover:bg-muted"
+                                                    }`}
+                                            >
+                                                {i + 1}
+                                            </button>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+
+                            {/* Legend — desktop only */}
+                            <div className="hidden lg:flex flex-col gap-1.5 text-xs text-muted-foreground">
+                                <span className="flex items-center gap-1.5">
+                                    <span className="size-3 rounded-sm bg-primary inline-block shrink-0" />
+                                    Answered
+                                </span>
+                                <span className="flex items-center gap-1.5">
+                                    <span className="size-3 rounded-sm border border-border inline-block shrink-0" />
+                                    Not answered
+                                </span>
+                                <span className="flex items-center gap-1.5">
+                                    <span className="size-3 rounded-sm border-2 border-foreground inline-block shrink-0" />
+                                    Current
+                                </span>
+                            </div>
+
+                            {/* Auto-save indicator */}
+                            <div className="flex items-center gap-1.5 text-xs text-green-600 dark:text-green-400 rounded-lg bg-green-500/5 border border-green-500/20 px-3 py-2">
+                                <CheckCircle2 className="size-3.5 shrink-0" />
+                                All answers saved automatically
+                            </div>
+
+                            {/* Review button */}
+                            <Button
+                                className="w-full"
+                                onClick={handleGoToReview}
+                                disabled={submitting || unansweredCount > 0}
+                            >
+                                Review &amp; submit
+                            </Button>
+                            {unansweredCount > 0 && (
+                                <p className="text-xs text-red-600 dark:text-red-400 text-center">
+                                    Answer all {total} questions first — {unansweredCount} remaining.
+                                </p>
+                            )}
+                        </div>
+                    </div>
+
+                    {/* ── Left: question — order-last on mobile so it appears below the compact sidebar ── */}
+                    <div className="space-y-4 order-last lg:order-first">
+                        {/* Question header */}
+                        <div className="flex items-center gap-2.5 text-sm">
+                            <span className="text-muted-foreground">Question {currentIndex + 1} of {total}</span>
+                            <span className="rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium text-muted-foreground">
+                                {isMulti ? "Multiple select" : "Multiple choice"}
+                            </span>
+                        </div>
+
+                        {/* Question card */}
+                        <div className="rounded-xl border bg-card p-5 sm:p-6 space-y-4">
+                            <div className="space-y-1.5">
+                                <p className="font-bold text-base leading-relaxed sm:text-lg">
+                                    {currentIndex + 1}. {question.question}
+                                </p>
+                                <p className="text-sm text-muted-foreground">
+                                    {isMulti
+                                        ? multiLimit
+                                            ? `Select ${multiLimit} answers`
+                                            : "Select all that apply"
+                                        : "Select one answer"}
+                                </p>
+                                {isMulti && multiLimit !== null && (
+                                    <p className={`text-xs font-medium ${limitReached ? "text-amber-600 dark:text-amber-400" : "text-blue-600 dark:text-blue-400"}`}>
+                                        {limitReached
+                                            ? `${selectedCount} / ${multiLimit} selected — limit reached`
+                                            : `${selectedCount} / ${multiLimit} selected`}
+                                    </p>
+                                )}
+                            </div>
+                            <div className="space-y-2">{optionRows}</div>
+                        </div>
+
+                        {timeExpired && submitting && (
+                            <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 px-4 py-2 text-xs text-amber-700 dark:text-amber-400 text-center">
+                                Time's up — submitting your answers…
+                            </div>
+                        )}
+
+                        {/* Navigation */}
+                        <div className="flex items-center justify-between">
+                            <Button variant="outline" onClick={handlePrev} disabled={submitting || isFirst}>
+                                <ChevronLeft className="size-4" />
+                                Previous
+                            </Button>
+                            <Button onClick={handleNext} disabled={submitting || (isLast && unansweredCount > 0)}>
+                                {submitting ? "Submitting…" : isLast ? "Review & submit" : "Next"}
+                                {!submitting && <ChevronRight className="size-4" />}
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    // ── QUIZ TAKING (1-column with pills) ─────────────────────────────────────
+    return (
+        <div className="max-w-2xl mx-auto space-y-5">
+            {/* Header: title + progress */}
+            <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                    {quiz.title && <h2 className="text-lg font-bold sm:text-xl truncate">{quiz.title}</h2>}
+                </div>
+                <div className="flex items-center justify-between text-xs text-muted-foreground sm:text-sm">
+                    <span>Question {currentIndex + 1} of {total}</span>
+                    <span>{progress}%</span>
+                </div>
+                <div className="h-1.5 w-full rounded-full bg-border overflow-hidden">
+                    <div className="h-full bg-primary transition-all duration-300 ease-out" style={{ width: `${progress}%` }} />
+                </div>
+            </div>
+
+            {/* Question number pills — all freely clickable; skipped questions show as muted */}
+            <div className="flex flex-wrap gap-2">
+                {questions.map((q, i) => {
+                    const ans      = answers[q.question_id];
+                    const answered  = isQuestionAnswered(ans);
+                    const isCurrent = i === currentIndex;
+                    return (
+                        <button
+                            key={q.question_id}
+                            type="button"
+                            onClick={() => setCurrentIndex(i)}
+                            disabled={timeExpired && submitting}
+                            className={`size-9 rounded-full text-sm font-semibold transition-colors
+                                ${isCurrent
+                                    ? "border-2 border-primary bg-background text-foreground"
+                                    : answered
+                                    ? "bg-primary text-background hover:opacity-80"
+                                    : "bg-muted text-muted-foreground border border-border hover:bg-muted/60"
+                                }`}
+                        >
+                            {i + 1}
+                        </button>
+                    );
+                })}
+            </div>
+
+            {timeExpired && submitting && (
+                <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 px-4 py-2 text-xs text-amber-700 dark:text-amber-400 text-center">
+                    Time's up — submitting your answers…
+                </div>
+            )}
+
+            {/* Question card */}
+            <div className="rounded-xl border bg-card p-4 space-y-4 sm:p-6">
+                <div className="space-y-1">
+                    <p className="font-bold text-base leading-relaxed sm:text-lg">
+                        {currentIndex + 1}. {question.question}
+                    </p>
+                    {isMulti && multiLimit !== null && (
+                        <p className={`text-xs font-medium ${limitReached ? "text-amber-600 dark:text-amber-400" : "text-blue-600 dark:text-blue-400"}`}>
+                            {limitReached
+                                ? `${selectedCount} / ${multiLimit} selected — limit reached`
+                                : `Select ${multiLimit} answer${multiLimit !== 1 ? "s" : ""} · ${selectedCount} / ${multiLimit} selected`}
+                        </p>
+                    )}
+                </div>
+                <div className="space-y-2">
+                    {(question.options ?? []).map((option, i) => {
+                        const letter     = String.fromCharCode(65 + i);
+                        const isSelected = isMulti
+                            ? (selected ?? []).includes(option.option_id)
+                            : selected === option.option_id;
+                        const isDisabled = (isMulti && limitReached && !isSelected) || (timeExpired && submitting);
+                        const Icon = isMulti
+                            ? (isSelected ? CheckSquare2 : Square)
+                            : (isSelected ? CheckCircle2 : Circle);
+
+                        return (
+                            <button
+                                key={option.option_id}
+                                type="button"
+                                onClick={() => handleOptionClick(option.option_id)}
+                                disabled={isDisabled}
+                                className={`flex w-full items-center gap-3 rounded-lg border px-3 py-2.5 text-left text-sm transition-colors sm:text-base
+                                    ${isSelected ? "border-primary bg-primary/5" : "border-border"}
+                                    ${isDisabled ? "opacity-40 cursor-not-allowed" : "hover:bg-muted-foreground/5"}`}
+                            >
+                                <Icon className={`size-4 shrink-0 ${isSelected ? "text-primary" : "text-muted-foreground"}`} />
+                                <span className="font-medium text-muted-foreground w-4 shrink-0">{letter}</span>
+                                <span>{option.text}</span>
+                            </button>
+                        );
+                    })}
+                </div>
+            </div>
+
+            {/* Navigation */}
+            <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                    <Button variant="outline" onClick={handlePrev} disabled={submitting}>
+                        <ChevronLeft className="size-4" />
+                        Previous
+                    </Button>
+                    <Button onClick={handleNext} disabled={submitting || (isLast && unansweredCount > 0)}>
+                        {submitting ? "Submitting…" : isLast ? "Review answers" : "Next"}
+                        {!submitting && <ChevronRight className="size-4" />}
+                    </Button>
+                </div>
+                {isLast && unansweredCount > 0 && (
+                    <p className="text-xs text-red-600 dark:text-red-400 text-center">
+                        Answer all {total} questions first — {unansweredCount} remaining.
+                    </p>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default QuizBlock;
diff --git a/apps/web/src/modules/client/components/blocks/ReadCourse.jsx b/apps/web/src/modules/client/components/blocks/ReadCourse.jsx
new file mode 100644
index 0000000..947b5d9
--- /dev/null
+++ b/apps/web/src/modules/client/components/blocks/ReadCourse.jsx
@@ -0,0 +1,300 @@
+import { useNavigate } from "react-router-dom";
+import { useState, useEffect, useRef } from "react";
+import { Badge } from "@/components/ui/badge";
+import { BookOpen, Tag, CheckCheck, RefreshCcw, Lock, Zap, Info } from "lucide-react";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Progress } from "@/components/ui/progress";
+import ResponsiveModal from "@/components/generic/ResponsiveModal";
+import { Button } from "@/components/ui/button";
+import { SendHorizonal } from "lucide-react";
+import { toast } from "sonner";
+import api from "@/utils/api.util";
+import { useClientTiers } from "@/contexts/ClientTiersProvider";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+
+const LVL_LABEL = { beginner: 'Beginner', intermediate: 'Intermediate', advanced: 'Advanced' };
+
+function TierBadge({ tier, locked = false }) {
+  const { tierMap } = useClientTiers();
+  const { rank, label, cls } = resolveTierBadge(tier ?? 'free', tierMap);
+  if (rank === 0 && !locked) return null;
+  return (
+    <Badge className={`gap-1 ${cls} w-fit shrink-0`}>
+      {rank > 0 ? <Lock className="size-3" /> : <Tag className="size-3" />}
+      {label}
+    </Badge>
+  );
+}
+
+const ReadCourse = ({ title = "Read Course", courses = [], groupId, taskListId, taskId }) => {
+  const navigate = useNavigate();
+  const [selected,    setSelected]    = useState(null);
+  const [details,     setDetails]     = useState({});
+  const [summaries,   setSummaries]   = useState({});
+  const [locked,      setLocked]      = useState({});
+  const [lockedInfo,  setLockedInfo]  = useState({});
+  const [fetching,    setFetching]    = useState({});
+  const prevCompletedRef = useRef({});
+
+  useEffect(() => {
+    courses.forEach((course) => {
+      const prev = prevCompletedRef.current[course.id];
+      if (course.completed && prev === false) {
+        toast(`"${course.title}" has been automatically turned in!`);
+      }
+      prevCompletedRef.current[course.id] = !!course.completed;
+    });
+  }, [courses]);
+
+  useEffect(() => {
+    courses.forEach(async (course) => {
+      if (!course.reference_id) return;
+      setFetching((prev) => ({ ...prev, [course.reference_id]: true }));
+      try {
+        const res = await api.get(`/client/courses/uuid/${course.reference_id}`);
+        const d   = res.data?.data;
+        if (!d) return;
+        setDetails((prev) => ({ ...prev, [course.reference_id]: d }));
+
+        const progRes = await api.get(`/client/courses/${d.course_id}/progress/summary`);
+        const summary = progRes.data?.data;
+        if (summary) setSummaries((prev) => ({ ...prev, [course.reference_id]: summary }));
+      } catch (err) {
+        if (err?.response?.status === 403) {
+          setLocked((prev) => ({ ...prev, [course.reference_id]: true }));
+          const courseData = err.response?.data?.course;
+          if (courseData) setLockedInfo((prev) => ({ ...prev, [course.reference_id]: courseData }));
+        } else {
+          console.error('[ReadCourse] fetch failed:', err?.response?.status, err?.message);
+        }
+      } finally {
+        setFetching((prev) => ({ ...prev, [course.reference_id]: false }));
+      }
+    });
+  }, []);
+
+  const getReadingPercent = (course) => {
+    const summary = summaries[course.reference_id];
+    return summary ? summary.percent : (course.progress ?? 0);
+  };
+
+  const hasLocked = Object.values(locked).some(Boolean);
+
+  return (
+    <div className="border rounded-lg bg-card overflow-hidden">
+      {/* Header */}
+      <div className="px-6 py-4 border-b flex items-center gap-2">
+        <BookOpen className="size-4 text-muted-foreground" />
+        <h2 className="font-semibold text-sm">{title}</h2>
+        <Badge variant="secondary" className="ml-auto">{courses.length}</Badge>
+      </div>
+
+      {/* Subscription advisory */}
+      {hasLocked && (
+        <div className="flex items-start gap-3 px-5 py-3.5 border-b bg-amber-50 dark:bg-amber-950/30 text-amber-800 dark:text-amber-300">
+          <Info className="size-4 mt-0.5 shrink-0" />
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium leading-snug">Subscription Required</p>
+            <p className="text-xs mt-0.5 text-amber-700 dark:text-amber-400 leading-relaxed">
+              To complete this activity, subscribe to one of our available tier plans.
+            </p>
+          </div>
+          <Button size="sm" variant="outline" className="shrink-0 border-amber-300 dark:border-amber-700 text-amber-800 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/40" onClick={() => navigate('/subscriptions')}>
+            <Zap className="size-3.5" /> View Plans
+          </Button>
+        </div>
+      )}
+
+      <ScrollArea className="w-full bg-muted overflow-hidden">
+        <div className="flex gap-4 p-4">
+          {courses.map((course) => {
+            const info       = details[course.reference_id];
+            const courseInfo = lockedInfo[course.reference_id];
+            const percent    = getReadingPercent(course);
+            const done       = !!course.completed;
+            const allRead    = !done && percent >= 100;
+            const isLocked   = locked[course.reference_id];
+            const isFetching = fetching[course.reference_id];
+
+            // ── Locked card ───────────────────────────────────────────────────
+            // Skipped when already completed — a completion recorded while the
+            // content was accessible still counts even if it re-locks later
+            // (task_progress/reading-progress rows are never revoked on a tier
+            // change), so it must keep showing as Completed, not Locked.
+            if (isLocked && !done) {
+              return (
+                <div
+                  key={course.id}
+                  onClick={() => navigate('/subscriptions')}
+                  className="bg-card rounded-2xl border border-dashed p-4 flex flex-col gap-3 hover:bg-muted/60 hover:shadow-sm transition-all cursor-pointer group w-96 shrink-0 opacity-80"
+                >
+                  <div className="flex items-center gap-1.5">
+                    <BookOpen className="size-3.5 text-muted-foreground shrink-0" />
+                    <span className="text-xs text-muted-foreground font-medium">Course</span>
+                    <div className="ml-auto">
+                      <TierBadge tier={courseInfo?.subscription} locked />
+                    </div>
+                  </div>
+                  <div>
+                    <h1 className="text-base font-semibold leading-snug line-clamp-2 text-muted-foreground">
+                      {course.title}
+                    </h1>
+                    <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
+                      This course requires a higher subscription plan.
+                    </p>
+                  </div>
+                  <div className="mt-auto">
+                    <Button size="sm" className="w-full gap-1.5" onClick={(e) => { e.stopPropagation(); navigate('/subscriptions'); }}>
+                      <Zap className="size-3.5" /> Upgrade to unlock
+                    </Button>
+                  </div>
+                </div>
+              );
+            }
+
+            // ── Normal card ───────────────────────────────────────────────────
+            return (
+              <div
+                key={course.id}
+                onClick={() => !isFetching && setSelected(course)}
+                className={`bg-card rounded-2xl border p-4 flex flex-col gap-3 transition-all w-96 shrink-0 ${
+                  isFetching
+                    ? 'opacity-60 cursor-wait'
+                    : 'hover:bg-muted/60 hover:shadow-sm cursor-pointer group'
+                }`}
+              >
+                {/* Card type row */}
+                <div className="flex items-center gap-1.5">
+                  <BookOpen className="size-3.5 text-muted-foreground shrink-0" />
+                  <span className="text-xs text-muted-foreground font-medium">Course</span>
+                  <div className="ml-auto flex items-center gap-1.5">
+                    {info?.subscription && <TierBadge tier={info.subscription} />}
+                    {info?.level && (
+                      <Badge variant="outline" className="text-xs capitalize">
+                        {LVL_LABEL[info.level] ?? info.level}
+                      </Badge>
+                    )}
+                    {!info && course.reference_id && (
+                      <Badge variant="secondary" className="opacity-40 text-xs">Loading…</Badge>
+                    )}
+                  </div>
+                </div>
+
+                <div>
+                  <h1
+                    onClick={(e) => {
+                      if (!info?.course_id) return;
+                      e.stopPropagation();
+                      navigate(`/course/${info.course_id}/unit`, {
+                        state: taskId ? { taskCtx: { has_task: true, groupId, taskListId, taskId } } : {},
+                      });
+                    }}
+                    className="text-base font-semibold leading-snug line-clamp-2 transition-colors text-blue-600 dark:text-blue-400 hover:underline cursor-pointer"
+                  >
+                    {course.title}
+                  </h1>
+                  <p className="text-sm text-muted-foreground leading-relaxed line-clamp-2 mt-1">
+                    {info?.description ?? ''}
+                  </p>
+                </div>
+
+                <div className="flex flex-col gap-2 mt-auto pt-1 border-t">
+                  <div className="flex items-center justify-between text-sm pt-1">
+                    <span className="flex items-center gap-1.5 text-muted-foreground">
+                      {done
+                        ? <><CheckCheck className="size-4 text-green-500" /><span className="text-green-600 dark:text-green-400 font-medium">Completed</span></>
+                        : allRead
+                        ? <><CheckCheck className="size-4 text-amber-500" /><span className="text-amber-600 dark:text-amber-400 font-medium">Lessons Done</span></>
+                        : <><RefreshCcw className="size-4" /> In Progress</>
+                      }
+                    </span>
+                    <span className="font-semibold text-xs">{percent}%</span>
+                  </div>
+                  <Progress
+                    value={percent}
+                    className={`h-1.5 ${done ? "[&>div]:bg-green-500" : allRead ? "[&>div]:bg-amber-500" : ""}`}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+
+      {/* Detail modal */}
+      {selected && (() => {
+        const info    = details[selected.reference_id];
+        const percent = getReadingPercent(selected);
+        const done    = !!selected.completed;
+        const allRead = !done && percent >= 100;
+
+        return (
+          <ResponsiveModal
+            open={!!selected}
+            onOpenChange={(o) => !o && setSelected(null)}
+            title={selected.title}
+            description={done ? "Course Summary" : "Course Info"}
+            footer={
+              <>
+                <Button variant="outline" onClick={() => setSelected(null)}>Cancel</Button>
+                <Button
+                  onClick={() => {
+                    if (!info?.course_id) return;
+                    navigate(`/course/${info.course_id}/unit`, {
+                      state: {
+                        ...(allRead ? { seekFirstIncomplete: true } : {}),
+                        ...(taskId ? { taskCtx: { has_task: true, groupId, taskListId, taskId } } : {}),
+                      },
+                    });
+                  }}
+                  disabled={done || !info?.course_id}
+                >
+                  <SendHorizonal /> Proceed
+                </Button>
+              </>
+            }
+          >
+            <div className="flex flex-col gap-5">
+              {done ? (
+                <div className="flex items-center gap-2 bg-green-500/10 text-green-600 dark:text-green-400 rounded-lg px-4 py-3 text-sm font-medium">
+                  <CheckCheck className="size-4 shrink-0" /> Automatically Turned-in
+                </div>
+              ) : allRead ? (
+                <div className="flex items-center gap-2 bg-amber-500/10 text-amber-600 dark:text-amber-400 rounded-lg px-4 py-3 text-sm font-medium">
+                  <CheckCheck className="size-4 shrink-0" /> Lessons complete — finish quizzes &amp; assessment to turn in
+                </div>
+              ) : (
+                <div className="flex items-center gap-2 bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-lg px-4 py-3 text-sm font-medium">
+                  <RefreshCcw className="size-4 shrink-0" /> Currently in progress
+                </div>
+              )}
+
+              <div className="grid grid-cols-2 divide-x rounded-lg border text-center text-sm">
+                <div className="flex flex-col gap-1 py-4">
+                  <span className="text-xl font-bold">
+                    {info?.subscription ? (info.subscription.charAt(0).toUpperCase() + info.subscription.slice(1)) : '—'}
+                  </span>
+                  <span className="text-muted-foreground text-xs">Subscription</span>
+                </div>
+                <div className="flex flex-col gap-1 py-4">
+                  <span className="text-xl font-bold">
+                    {info?.level ? (LVL_LABEL[info.level] ?? info.level) : '—'}
+                  </span>
+                  <span className="text-muted-foreground text-xs">Level</span>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">About this course</p>
+                <p className="text-sm leading-relaxed">{info?.description ?? '—'}</p>
+              </div>
+            </div>
+          </ResponsiveModal>
+        );
+      })()}
+    </div>
+  );
+};
+
+export default ReadCourse;
diff --git a/apps/web/src/modules/client/components/blocks/ReadLesson.jsx b/apps/web/src/modules/client/components/blocks/ReadLesson.jsx
new file mode 100644
index 0000000..ba99a43
--- /dev/null
+++ b/apps/web/src/modules/client/components/blocks/ReadLesson.jsx
@@ -0,0 +1,234 @@
+import { useNavigate } from "react-router-dom";
+import { useState, useEffect } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
+import { FileText, CheckCheck, Lock, Zap, Info, Tag } from "lucide-react";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Button } from "@/components/ui/button";
+import api from "@/utils/api.util";
+import { useClientTiers } from "@/contexts/ClientTiersProvider";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+
+function TierBadge({ tier }) {
+    const { tierMap } = useClientTiers();
+    const { rank, label, cls } = resolveTierBadge(tier ?? 'free', tierMap);
+    return (
+        <Badge className={`gap-1 ${cls} w-fit shrink-0`}>
+            {rank > 0 ? <Lock className="size-3" /> : <Tag className="size-3" />}
+            {label}
+        </Badge>
+    );
+}
+
+const ReadLesson = ({ title = "Read Lessons", lessons = [], groupId, taskListId, taskId }) => {
+    const navigate = useNavigate();
+    const [details,     setDetails]     = useState({});
+    const [locked,      setLocked]      = useState({});
+    const [lockedInfo,  setLockedInfo]  = useState({});
+    const [unavailable, setUnavailable] = useState({});
+    const [fetching,    setFetching]    = useState({});
+
+    useEffect(() => {
+        lessons.forEach(async (lesson) => {
+            if (!lesson.reference_id) return;
+            setFetching((prev) => ({ ...prev, [lesson.reference_id]: true }));
+            try {
+                const res = await api.get(`/client/courses/lesson/uuid/${lesson.reference_id}`);
+                const d   = res.data?.data;
+                if (d) setDetails((prev) => ({ ...prev, [lesson.reference_id]: d }));
+            } catch (err) {
+                if (err?.response?.status === 403) {
+                    setLocked((prev) => ({ ...prev, [lesson.reference_id]: true }));
+                    const course = err.response?.data?.course;
+                    if (course) setLockedInfo((prev) => ({ ...prev, [lesson.reference_id]: course }));
+                } else {
+                    setUnavailable((prev) => ({ ...prev, [lesson.reference_id]: true }));
+                }
+            } finally {
+                setFetching((prev) => ({ ...prev, [lesson.reference_id]: false }));
+            }
+        });
+    }, []);
+
+    const hasLocked = Object.values(locked).some(Boolean);
+
+    return (
+        <div className="border rounded-lg bg-card overflow-hidden">
+            <div className="px-6 py-4 border-b flex items-center gap-2">
+                <FileText className="size-4 text-muted-foreground" />
+                <h2 className="font-semibold text-sm">{title}</h2>
+                <Badge variant="secondary" className="ml-auto">{lessons.length}</Badge>
+            </div>
+
+            {hasLocked && (
+                <div className="flex items-start gap-3 px-5 py-3.5 border-b bg-amber-50 dark:bg-amber-950/30 text-amber-800 dark:text-amber-300">
+                    <Info className="size-4 mt-0.5 shrink-0" />
+                    <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium leading-snug">Subscription Required</p>
+                        <p className="text-xs mt-0.5 text-amber-700 dark:text-amber-400 leading-relaxed">
+                            To complete this activity, subscribe to one of our available tier plans.
+                        </p>
+                    </div>
+                    <Button size="sm" variant="outline" className="shrink-0 border-amber-300 dark:border-amber-700 text-amber-800 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/40" onClick={() => navigate('/subscriptions')}>
+                        <Zap className="size-3.5" /> View Plans
+                    </Button>
+                </div>
+            )}
+
+            <ScrollArea className="w-full bg-muted overflow-hidden">
+                <div className="flex gap-4 p-4">
+                    {lessons.map((lesson) => {
+                        const info          = details[lesson.reference_id];
+                        const courseInfo    = lockedInfo[lesson.reference_id];
+                        const isLocked      = locked[lesson.reference_id];
+                        const isUnavailable = unavailable[lesson.reference_id];
+                        const isFetching    = fetching[lesson.reference_id];
+
+                        // ── Locked card ───────────────────────────────────────
+                        // Skipped when already completed — a completion recorded
+                        // while the lesson was accessible still counts even if it
+                        // re-locks later (reading-progress rows are never revoked
+                        // on a tier change), so it must keep showing as Completed.
+                        if (isLocked && !lesson.completed) {
+                            return (
+                                <div
+                                    key={lesson.id}
+                                    onClick={() => navigate('/subscriptions')}
+                                    className="bg-card rounded-2xl border border-dashed p-4 flex flex-col gap-3 hover:bg-muted/60 hover:shadow-sm transition-all cursor-pointer group w-96 shrink-0 opacity-80"
+                                >
+                                    <div className="flex items-center gap-1.5">
+                                        <FileText className="size-3.5 text-muted-foreground shrink-0" />
+                                        <span className="text-xs text-muted-foreground font-medium">Lesson</span>
+                                        <div className="ml-auto">
+                                            <TierBadge tier={courseInfo?.subscription} />
+                                        </div>
+                                    </div>
+                                    {courseInfo?.title && (
+                                        <p className="text-xs text-muted-foreground font-medium truncate -mt-1">
+                                            from <span className="text-foreground/70">{courseInfo.title}</span>
+                                        </p>
+                                    )}
+                                    <div>
+                                        <h1 className="text-base font-semibold leading-snug line-clamp-2 text-muted-foreground">
+                                            {lesson.title}
+                                        </h1>
+                                        <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
+                                            Subscribe to <span className="font-medium">{courseInfo?.title ?? 'this course'}</span> to unlock this lesson.
+                                        </p>
+                                    </div>
+                                    <div className="mt-auto">
+                                        <Button size="sm" className="w-full gap-1.5" onClick={(e) => { e.stopPropagation(); navigate('/subscriptions'); }}>
+                                            <Zap className="size-3.5" /> Upgrade to unlock
+                                        </Button>
+                                    </div>
+                                </div>
+                            );
+                        }
+
+                        // ── Unavailable card ──────────────────────────────────
+                        if (isUnavailable) {
+                            return (
+                                <div
+                                    key={lesson.id}
+                                    className="bg-card rounded-2xl border border-dashed p-4 flex flex-col gap-3 w-96 shrink-0 opacity-50 cursor-not-allowed"
+                                >
+                                    <div className="flex items-center gap-1.5">
+                                        <FileText className="size-3.5 text-muted-foreground shrink-0" />
+                                        <span className="text-xs text-muted-foreground font-medium">Lesson</span>
+                                        <Badge variant="secondary" className="ml-auto gap-1 text-muted-foreground text-xs">
+                                            <Lock className="size-3" /> Unavailable
+                                        </Badge>
+                                    </div>
+                                    <h1 className="text-base font-semibold leading-snug line-clamp-2 text-muted-foreground">
+                                        {lesson.title}
+                                    </h1>
+                                    <p className="text-sm text-muted-foreground">This lesson is no longer available.</p>
+                                </div>
+                            );
+                        }
+
+                        // ── Normal card ───────────────────────────────────────
+                        return (
+                            <div
+                                key={lesson.id}
+                                onClick={() => {
+                                    if (isFetching || !info) return;
+                                    // Course-attached lesson — jump straight to it within the
+                                    // course's unit reader (existing behavior).
+                                    if (info.unit?.course?.course_id) {
+                                        navigate(`/course/${info.unit.course.course_id}/unit`, {
+                                            state: {
+                                                lessonId: info.lesson_id,
+                                                unitId: info.unit.unit_id,
+                                                ...(taskId ? { taskCtx: { has_task: true, groupId, taskListId, taskId } } : {}),
+                                            },
+                                        });
+                                        return;
+                                    }
+                                    // Standalone lesson (junction revamp — no parent course, or no
+                                    // parent unit at all) — the course-scoped route can't resolve,
+                                    // so fall back to the standalone lesson page instead.
+                                    navigate(`/lessons/${lesson.reference_id}`, {
+                                        state: taskId ? { taskCtx: { has_task: true, groupId, taskListId, taskId } } : {},
+                                    });
+                                }}
+                                className={`bg-card rounded-2xl border p-4 flex flex-col gap-3 transition-all w-96 shrink-0 ${
+                                    isFetching
+                                        ? 'opacity-60 cursor-wait'
+                                        : 'hover:bg-muted/60 hover:shadow-sm cursor-pointer group'
+                                }`}
+                            >
+                                {/* Card type row */}
+                                <div className="flex items-center gap-1.5">
+                                    <FileText className="size-3.5 text-muted-foreground shrink-0" />
+                                    <span className="text-xs text-muted-foreground font-medium">Lesson</span>
+                                    <div className="ml-auto">
+                                        {info?.unit?.course?.subscription
+                                            ? <TierBadge tier={info.unit.course.subscription} />
+                                            : isFetching && <Badge variant="secondary" className="opacity-40 text-xs">Loading…</Badge>
+                                        }
+                                    </div>
+                                </div>
+
+                                {/* Course breadcrumb */}
+                                {info?.unit?.course?.title && (
+                                    <p className="text-xs text-muted-foreground truncate -mt-1.5">
+                                        from <span className="text-foreground/70 font-medium">{info.unit.course.title}</span>
+                                    </p>
+                                )}
+
+                                <div>
+                                    <h1 className="text-base font-semibold leading-snug line-clamp-2 text-blue-600 dark:text-blue-400 hover:underline transition-colors cursor-pointer">
+                                        {lesson.title}
+                                    </h1>
+                                    <p className="text-sm text-muted-foreground leading-relaxed line-clamp-2 mt-1">
+                                        {info?.description ?? ''}
+                                    </p>
+                                </div>
+
+                                <div className="flex flex-col gap-2 mt-auto pt-1 border-t">
+                                    <div className="flex items-center justify-between text-sm pt-1">
+                                        {lesson.completed ? (
+                                            <span className="flex items-center gap-1.5 text-green-600 dark:text-green-400 font-medium">
+                                                <CheckCheck className="size-4" /> Completed
+                                            </span>
+                                        ) : (
+                                            <span className="text-muted-foreground font-medium">Not Started</span>
+                                        )}
+                                    </div>
+                                    <Progress
+                                        value={lesson.completed ? 100 : 0}
+                                        className={`h-1.5 ${lesson.completed ? "[&>div]:bg-green-500" : ""}`}
+                                    />
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+                <ScrollBar orientation="horizontal" />
+            </ScrollArea>
+        </div>
+    );
+};
+
+export default ReadLesson;
diff --git a/apps/web/src/modules/client/components/blocks/ReadUnit.jsx b/apps/web/src/modules/client/components/blocks/ReadUnit.jsx
new file mode 100644
index 0000000..559683d
--- /dev/null
+++ b/apps/web/src/modules/client/components/blocks/ReadUnit.jsx
@@ -0,0 +1,316 @@
+import { useState, useEffect } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Layers, CheckCheck, RefreshCw, SendHorizonal, Lock, Zap, Info, Tag } from "lucide-react";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Progress } from "@/components/ui/progress";
+import ResponsiveModal from "@/components/generic/ResponsiveModal";
+import { Button } from "@/components/ui/button";
+import { useNavigate } from "react-router-dom";
+import api from "@/utils/api.util";
+import { useClientTiers } from "@/contexts/ClientTiersProvider";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+
+function TierBadge({ tier }) {
+    const { tierMap } = useClientTiers();
+    const { rank, label, cls } = resolveTierBadge(tier ?? 'free', tierMap);
+    return (
+        <Badge className={`gap-1 ${cls} w-fit shrink-0`}>
+            {rank > 0 ? <Lock className="size-3" /> : <Tag className="size-3" />}
+            {label}
+        </Badge>
+    );
+}
+
+const ReadUnit = ({ title = "Read Units", units = [], groupId, taskListId, taskId }) => {
+    const navigate = useNavigate();
+    const [selected,    setSelected]    = useState(null);
+    const [details,     setDetails]     = useState({});
+    const [locked,      setLocked]      = useState({});
+    const [lockedInfo,  setLockedInfo]  = useState({});
+    const [unavailable, setUnavailable] = useState({});
+    const [fetching,    setFetching]    = useState({});
+
+    useEffect(() => {
+        units.forEach(async (unit) => {
+            if (!unit.reference_id) return;
+            setFetching((prev) => ({ ...prev, [unit.reference_id]: true }));
+            try {
+                const res = await api.get(`/client/courses/unit/uuid/${unit.reference_id}`);
+                const d   = res.data?.data;
+                if (d) setDetails((prev) => ({ ...prev, [unit.reference_id]: d }));
+            } catch (err) {
+                if (err?.response?.status === 403) {
+                    setLocked((prev) => ({ ...prev, [unit.reference_id]: true }));
+                    const course = err.response?.data?.course;
+                    if (course) setLockedInfo((prev) => ({ ...prev, [unit.reference_id]: course }));
+                } else {
+                    setUnavailable((prev) => ({ ...prev, [unit.reference_id]: true }));
+                }
+            } finally {
+                setFetching((prev) => ({ ...prev, [unit.reference_id]: false }));
+            }
+        });
+    }, []);
+
+    const getProgress = (unit) => unit.completed ? 100 : (unit.progress ?? 0);
+
+    if (!units.length) {
+        return (
+            <div className="border rounded-lg bg-card overflow-hidden">
+                <div className="px-6 py-4 border-b flex items-center gap-2">
+                    <Layers className="size-4 text-muted-foreground" />
+                    <h2 className="font-semibold text-sm">{title}</h2>
+                    <Badge variant="secondary" className="ml-auto">0</Badge>
+                </div>
+                <div className="p-4 text-center text-sm text-muted-foreground">No units available.</div>
+            </div>
+        );
+    }
+
+    const hasLocked = Object.values(locked).some(Boolean);
+
+    return (
+        <>
+            <div className="border rounded-lg bg-card overflow-hidden">
+                <div className="px-6 py-4 border-b flex items-center gap-2">
+                    <Layers className="size-4 text-muted-foreground" />
+                    <h2 className="font-semibold text-sm">{title}</h2>
+                    <Badge variant="secondary" className="ml-auto">{units.length}</Badge>
+                </div>
+
+                {hasLocked && (
+                    <div className="flex items-start gap-3 px-5 py-3.5 border-b bg-amber-50 dark:bg-amber-950/30 text-amber-800 dark:text-amber-300">
+                        <Info className="size-4 mt-0.5 shrink-0" />
+                        <div className="flex-1 min-w-0">
+                            <p className="text-sm font-medium leading-snug">Subscription Required</p>
+                            <p className="text-xs mt-0.5 text-amber-700 dark:text-amber-400 leading-relaxed">
+                                To complete this activity, subscribe to one of our available tier plans.
+                            </p>
+                        </div>
+                        <Button size="sm" variant="outline" className="shrink-0 border-amber-300 dark:border-amber-700 text-amber-800 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/40" onClick={() => navigate('/subscriptions')}>
+                            <Zap className="size-3.5" /> View Plans
+                        </Button>
+                    </div>
+                )}
+
+                <ScrollArea className="w-full bg-muted overflow-hidden">
+                    <div className="flex gap-4 p-4">
+                        {units.map((unit) => {
+                            const info          = details[unit.reference_id];
+                            const courseInfo    = lockedInfo[unit.reference_id];
+                            const progress      = getProgress(unit);
+                            const isLocked      = locked[unit.reference_id];
+                            const isUnavailable = unavailable[unit.reference_id];
+                            const isFetching    = fetching[unit.reference_id];
+
+                            // ── Locked card ───────────────────────────────────
+                            // Skipped when already completed — a completion recorded
+                            // while the unit was accessible still counts even if it
+                            // re-locks later (reading-progress rows are never revoked
+                            // on a tier change), so it must keep showing as Completed.
+                            if (isLocked && !unit.completed) {
+                                return (
+                                    <div
+                                        key={unit.id}
+                                        onClick={() => navigate('/subscriptions')}
+                                        className="bg-card rounded-2xl border border-dashed p-4 flex flex-col gap-3 hover:bg-muted/60 hover:shadow-sm transition-all cursor-pointer group w-96 shrink-0 opacity-80"
+                                    >
+                                        <div className="flex items-center gap-1.5">
+                                            <Layers className="size-3.5 text-muted-foreground shrink-0" />
+                                            <span className="text-xs text-muted-foreground font-medium">Unit</span>
+                                            <div className="ml-auto">
+                                                <TierBadge tier={courseInfo?.subscription} />
+                                            </div>
+                                        </div>
+                                        {courseInfo?.title && (
+                                            <p className="text-xs text-muted-foreground font-medium truncate -mt-1">
+                                                from <span className="text-foreground/70">{courseInfo.title}</span>
+                                            </p>
+                                        )}
+                                        <div>
+                                            <h1 className="text-base font-semibold leading-snug line-clamp-2 text-muted-foreground">
+                                                {unit.title}
+                                            </h1>
+                                            <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
+                                                Subscribe to <span className="font-medium">{courseInfo?.title ?? 'this course'}</span> to unlock this unit.
+                                            </p>
+                                        </div>
+                                        <div className="mt-auto">
+                                            <Button size="sm" className="w-full gap-1.5" onClick={(e) => { e.stopPropagation(); navigate('/subscriptions'); }}>
+                                                <Zap className="size-3.5" /> Upgrade to unlock
+                                            </Button>
+                                        </div>
+                                    </div>
+                                );
+                            }
+
+                            // ── Unavailable card ──────────────────────────────
+                            if (isUnavailable) {
+                                return (
+                                    <div
+                                        key={unit.id}
+                                        className="bg-card rounded-2xl border border-dashed p-4 flex flex-col gap-3 w-96 shrink-0 opacity-50 cursor-not-allowed"
+                                    >
+                                        <div className="flex items-center gap-1.5">
+                                            <Layers className="size-3.5 text-muted-foreground shrink-0" />
+                                            <span className="text-xs text-muted-foreground font-medium">Unit</span>
+                                            <Badge variant="secondary" className="ml-auto gap-1 text-muted-foreground text-xs">
+                                                <Lock className="size-3" /> Unavailable
+                                            </Badge>
+                                        </div>
+                                        <h1 className="text-base font-semibold leading-snug line-clamp-2 text-muted-foreground">
+                                            {unit.title}
+                                        </h1>
+                                        <p className="text-sm text-muted-foreground">This unit is no longer available.</p>
+                                    </div>
+                                );
+                            }
+
+                            // ── Normal card ───────────────────────────────────
+                            return (
+                                <div
+                                    key={unit.id}
+                                    onClick={() => !isFetching && setSelected(unit)}
+                                    className={`bg-card rounded-2xl border p-4 flex flex-col gap-3 transition-all w-96 shrink-0 ${
+                                        isFetching
+                                            ? 'opacity-60 cursor-wait'
+                                            : 'hover:bg-muted/60 hover:shadow-sm cursor-pointer group'
+                                    }`}
+                                >
+                                    {/* Card type row */}
+                                    <div className="flex items-center gap-1.5">
+                                        <Layers className="size-3.5 text-muted-foreground shrink-0" />
+                                        <span className="text-xs text-muted-foreground font-medium">Unit</span>
+                                        <div className="ml-auto">
+                                            {info?.course?.subscription
+                                                ? <TierBadge tier={info.course.subscription} />
+                                                : isFetching && <Badge variant="secondary" className="opacity-40 text-xs">Loading…</Badge>
+                                            }
+                                        </div>
+                                    </div>
+
+                                    {info?.course?.title && (
+                                        <p className="text-xs text-muted-foreground truncate -mt-1">
+                                            from <span className="text-foreground/70 font-medium">{info.course.title}</span>
+                                        </p>
+                                    )}
+
+                                    <div>
+                                        <h1
+                                            onClick={(e) => {
+                                                if (!info) return;
+                                                e.stopPropagation();
+                                                if (info.course?.course_id) {
+                                                    navigate(`/course/${info.course.course_id}/unit`, {
+                                                        state: taskId ? { taskCtx: { has_task: true, groupId, taskListId, taskId } } : {},
+                                                    });
+                                                    return;
+                                                }
+                                                // Standalone unit (junction revamp — no parent course) —
+                                                // the course-scoped route can't resolve, fall back to
+                                                // the standalone unit reader instead.
+                                                navigate(`/units/${unit.reference_id}/read`, {
+                                                    state: taskId ? { taskCtx: { has_task: true, groupId, taskListId, taskId } } : {},
+                                                });
+                                            }}
+                                            className="text-base font-semibold leading-snug line-clamp-2 transition-colors text-blue-600 dark:text-blue-400 hover:underline cursor-pointer"
+                                        >
+                                            {unit.title}
+                                        </h1>
+                                        <p className="text-sm text-muted-foreground leading-relaxed line-clamp-2 mt-1">
+                                            {info?.description ?? ''}
+                                        </p>
+                                    </div>
+
+                                    <div className="flex flex-col gap-2 mt-auto pt-1 border-t">
+                                        <div className="flex items-center justify-between text-sm pt-1">
+                                            {progress >= 100 ? (
+                                                <span className="flex items-center gap-1.5 text-green-600 dark:text-green-400 font-medium">
+                                                    <CheckCheck className="size-4" /> Completed
+                                                </span>
+                                            ) : progress > 0 ? (
+                                                <span className="flex items-center gap-1.5 text-muted-foreground font-medium">
+                                                    <RefreshCw className="size-4" /> In Progress
+                                                </span>
+                                            ) : (
+                                                <span className="text-muted-foreground font-medium">Not Started</span>
+                                            )}
+                                            {progress > 0 && <span className="text-xs font-semibold">{progress}%</span>}
+                                        </div>
+                                        <Progress
+                                            value={progress}
+                                            className={`h-1.5 ${progress >= 100 ? "[&>div]:bg-green-500" : ""}`}
+                                        />
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+                    <ScrollBar orientation="horizontal" />
+                </ScrollArea>
+            </div>
+
+            <ResponsiveModal
+                open={!!selected}
+                onOpenChange={(v) => !v && setSelected(null)}
+                title={selected?.title}
+                description="Unit Info"
+                footer={
+                    <>
+                        <Button variant="outline" onClick={() => setSelected(null)}>Cancel</Button>
+                        <Button
+                            onClick={() => {
+                                const info = details[selected?.reference_id];
+                                if (!info) return;
+                                if (info.course?.course_id) {
+                                    navigate(`/course/${info.course.course_id}/unit`, {
+                                        state: taskId ? { taskCtx: { has_task: true, groupId, taskListId, taskId } } : {},
+                                    });
+                                    return;
+                                }
+                                navigate(`/units/${selected.reference_id}/read`, {
+                                    state: taskId ? { taskCtx: { has_task: true, groupId, taskListId, taskId } } : {},
+                                });
+                            }}
+                            disabled={
+                                getProgress(selected ?? {}) >= 100 ||
+                                locked[selected?.reference_id] ||
+                                !details[selected?.reference_id]
+                            }
+                        >
+                            <SendHorizonal /> Proceed
+                        </Button>
+                    </>
+                }
+            >
+                {selected && (() => {
+                    const info     = details[selected.reference_id];
+                    const progress = getProgress(selected);
+                    const done     = progress >= 100;
+
+                    return (
+                        <div className="flex flex-col gap-4">
+                            {done && (
+                                <div className="flex items-center gap-2 bg-green-50 dark:bg-green-950/40 text-green-700 dark:text-green-400 text-sm font-medium rounded-lg px-4 py-3">
+                                    <CheckCheck className="size-4 shrink-0" /> Automatically Turned-in
+                                </div>
+                            )}
+                            {info?.course?.title && (
+                                <p className="text-sm">
+                                    <span className="text-muted-foreground">Course: </span>
+                                    <span className="font-medium">{info.course.title}</span>
+                                </p>
+                            )}
+                            <div className="flex flex-col gap-1">
+                                <p className="text-xs uppercase tracking-wide text-muted-foreground font-medium">About this unit</p>
+                                <p className="text-sm leading-relaxed">{info?.description ?? '—'}</p>
+                            </div>
+                        </div>
+                    );
+                })()}
+            </ResponsiveModal>
+        </>
+    );
+};
+
+export default ReadUnit;
diff --git a/apps/web/src/modules/client/components/blocks/VisitLink.jsx b/apps/web/src/modules/client/components/blocks/VisitLink.jsx
new file mode 100644
index 0000000..6739bfa
--- /dev/null
+++ b/apps/web/src/modules/client/components/blocks/VisitLink.jsx
@@ -0,0 +1,200 @@
+import { ExternalLink, CheckCheck, RefreshCcw, Globe } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { useState } from "react";
+import ResponsiveModal from "@/components/generic/ResponsiveModal";
+import { SendHorizonal } from "lucide-react";
+
+// ── URL normalizer — ensures protocol is present so href is never treated as relative ──
+const normalizeUrl = (url) => {
+  if (!url) return '#';
+  if (/^https?:\/\//i.test(url)) return url;
+  return `https://${url}`;
+};
+
+const getDomain = (url) => {
+  try { return new URL(normalizeUrl(url)).hostname.replace(/^www\./, ''); }
+  catch { return url; }
+};
+
+// ── Fallback banner — favicon over a gradient, no external preview fetch ──────
+const LinkImageFallback = ({ domain, favicon, className = "h-40" }) => {
+  const [faviconFailed, setFaviconFailed] = useState(false);
+
+  return (
+    <div className={`w-full ${className} bg-gradient-to-br from-muted via-muted to-primary/10 flex flex-col items-center justify-center gap-2`}>
+      {!faviconFailed && favicon ? (
+        <img
+          src={favicon}
+          alt={domain}
+          className="w-12 h-12 rounded-xl"
+          onError={() => setFaviconFailed(true)}
+        />
+      ) : (
+        <Globe className="size-10 text-muted-foreground/50" />
+      )}
+      <span className="text-xs text-muted-foreground font-medium">{domain}</span>
+    </div>
+  );
+};
+
+// ── LinkCard ──────────────────────────────────────────────────────────────────
+const LinkCard = ({ link, visited, onTurnIn, onUnvisit, submitting, unsubmitting }) => {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [viewModalOpen, setViewModalOpen] = useState(false);
+
+  const domain = getDomain(link.url);
+  const displayFavicon = `https://www.google.com/s2/favicons?domain=${domain}&sz=128`;
+  const displayTitle = link.label ?? domain;
+  const displayDescription = link.url;
+
+  const handleTurnIn = async () => {
+    await onTurnIn(link.requirement_id);
+    setModalOpen(false);
+  };
+
+  const handleUnsubmit = async () => {
+    await onUnvisit(link.requirement_id);
+    setViewModalOpen(false);
+  };
+
+  return (
+    <>
+      <Card className="relative w-72 shrink-0 pt-0">
+        <LinkImageFallback domain={domain} favicon={displayFavicon} className="h-40 rounded-t-lg" />
+        <CardHeader>
+          <CardTitle className="line-clamp-1">{displayTitle}</CardTitle>
+          <CardDescription className="truncate text-xs">{displayDescription}</CardDescription>
+        </CardHeader>
+        <CardFooter>
+          {visited ? (
+            <Button variant="secondary" className="w-full" onClick={() => setViewModalOpen(true)}>
+              <CheckCheck /> Visited
+            </Button>
+          ) : (
+            <Button className="w-full" onClick={() => setModalOpen(true)}>
+              Visit Link
+            </Button>
+          )}
+        </CardFooter>
+      </Card>
+
+      {/* Turn-in modal — first visit */}
+      <ResponsiveModal
+        open={modalOpen}
+        onOpenChange={setModalOpen}
+        title={`Visit Link: ${displayTitle}`}
+        description="By visiting a link, you are about to explore it then Turn-in after."
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setModalOpen(false)}>Cancel</Button>
+            <Button onClick={handleTurnIn} disabled={submitting}>                                    
+              <SendHorizonal /> {submitting ? "Submitting…" : "Turn In"}
+            </Button>
+          </>
+        }
+      >
+        <div className="flex flex-col gap-3 w-fit">
+          <Button asChild variant="link" className="text-blue-500">
+            <a href={normalizeUrl(link.url)} target="_blank" rel="noopener noreferrer">
+              <ExternalLink /> {link.url}
+            </a>
+          </Button>
+        </div>
+      </ResponsiveModal>
+
+      {/* View modal — after visited, with Resubmit */}
+      <ResponsiveModal
+        open={viewModalOpen}
+        onOpenChange={setViewModalOpen}
+        title={displayTitle}
+        description={displayDescription}
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setViewModalOpen(false)}>Close</Button>
+            <Button onClick={handleUnsubmit} disabled={unsubmitting} variant="destructive">
+              <RefreshCcw className="size-4" /> {unsubmitting ? "Removing…" : "Unsubmit"}
+            </Button>
+          </>
+        }
+      >
+        <div className="flex flex-col gap-4">
+          <LinkImageFallback domain={domain} favicon={displayFavicon} className="h-40 rounded-lg" />
+          <div className="flex items-center gap-2 bg-green-500/10 text-green-600 dark:text-green-400 rounded-lg px-4 py-3 text-sm font-medium">
+            <CheckCheck className="size-4 shrink-0" /> Already submitted — you can unsubmit if needed.
+          </div>
+          <div>
+            <Button asChild variant="link" className="text-blue-500">
+              <a href={normalizeUrl(link.url)} target="_blank" rel="noopener noreferrer">
+                <ExternalLink /> {link.url}
+              </a>
+            </Button>
+          </div>
+
+        </div>
+      </ResponsiveModal>
+    </>
+  );
+};
+
+// ── VisitLink ─────────────────────────────────────────────────────────────────
+/**
+ * Props:
+ *   title       {string}            – section title
+ *   links       {array}             – [{ requirement_id, label, url }]
+ *   visitedMap  {object}            – { [requirement_id]: boolean }
+ *   onVisit     {function}          – async (requirement_id) => void
+ *                                      called when user confirms "Turn In"
+ */
+const VisitLink = ({ title = "Visit Links", links = [], visitedMap = {}, onVisit, onUnvisit }) => {
+  const [submittingId, setSubmittingId] = useState(null);
+  const [unsubmittingId, setUnsubmittingId] = useState(null);
+
+  const handleTurnIn = async (requirementId) => {
+    setSubmittingId(requirementId);
+    try { await onVisit?.(requirementId); }
+    finally { setSubmittingId(null); }
+  };
+
+  const handleUnvisit = async (requirementId) => {
+    setUnsubmittingId(requirementId);
+    try { await onUnvisit?.(requirementId); }
+    finally { setUnsubmittingId(null); }
+  };
+
+  return (
+    <div className="border rounded-lg bg-card overflow-hidden">
+      <div className="px-6 py-4 border-b flex items-center gap-2">
+        <ExternalLink className="size-4 text-muted-foreground" />
+        <h2 className="font-semibold text-md">{title}</h2>
+        <Badge className="ml-auto">{links.length}</Badge>
+      </div>
+      <ScrollArea className="w-full bg-muted overflow-hidden">
+        <div className="flex gap-4 p-4">
+          {links.map((link) => (
+            <LinkCard
+              key={link.requirement_id}
+              link={link}
+              visited={!!visitedMap[link.requirement_id]}
+              onTurnIn={handleTurnIn}
+              onUnvisit={handleUnvisit}
+              submitting={submittingId === link.requirement_id}
+              unsubmitting={unsubmittingId === link.requirement_id}
+            />
+          ))}
+        </div>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    </div>
+  );
+};
+
+export default VisitLink;
\ No newline at end of file
diff --git a/apps/web/src/modules/client/hooks/ScrollTrigger.jsx b/apps/web/src/modules/client/hooks/ScrollTrigger.jsx
new file mode 100644
index 0000000..864dba9
--- /dev/null
+++ b/apps/web/src/modules/client/hooks/ScrollTrigger.jsx
@@ -0,0 +1,20 @@
+// ScrollTrigger.jsx
+import { useState, useEffect } from "react";
+
+export function useScrollTrigger(elementRef) {
+  const [triggered, setTriggered] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!elementRef.current) return;
+      const { bottom } = elementRef.current.getBoundingClientRect();
+      setTriggered(bottom < 0);
+    };
+
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [elementRef]);
+
+  return triggered;
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/client/layout/ClientLayout.jsx b/apps/web/src/modules/client/layout/ClientLayout.jsx
new file mode 100644
index 0000000..b921ca6
--- /dev/null
+++ b/apps/web/src/modules/client/layout/ClientLayout.jsx
@@ -0,0 +1,466 @@
+import { Outlet, useMatches, useNavigate } from "react-router-dom"
+import { ThemeSwitcher } from "../components/ThemeSwitcher"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+} from "@/components/ui/dialog"
+import {
+    User, Settings, LogOut, SquareArrowOutUpRight, TableOfContents,
+    CircleQuestionMark, Gift, Zap, Download, Copy, Check,
+} from "lucide-react"
+import * as LucideIcons from "lucide-react"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { Toaster } from "@/components/ui/sonner"
+import { useAuth } from "@/contexts/AuthContext"
+import api from "@/utils/api.util"
+import { ClientProvider } from "@/contexts/provider/ClientProvider"
+import { useProfile } from "@/contexts/ProfileProvider"
+import { useClientTiers } from "@/contexts/ClientTiersProvider"
+import { resolveTierBadge } from "@/utils/tierBadge.util"
+import { useGroup } from "@/contexts/ClientGroupContext"
+import { resolveAssetSrc } from "@/utils/media.util"
+import { useEffect, useRef, useState } from "react"
+import { useDateFormat } from "@/hooks/useDateFormat"
+import { AVATAR_COLORS } from "@/data/profile.data"
+import { Badge } from "@/components/ui/badge"
+import ClientNotificationBell from "@/components/generic/ClientNotificationBell"
+import StickyAnnouncementBar from "@/components/generic/StickyAnnouncementBar"
+import EnvironmentBanner from "@/components/generic/EnvironmentBanner"
+import { isQasEnv } from "@/utils/environment.util"
+import { QRCodeCanvas } from "qrcode.react"
+
+// ─── Refer / Invite dialog ────────────────────────────────────────────────────
+
+function ReferDialog({ open, onOpenChange }) {
+    const { groups, fetchGroups, loading } = useGroup()
+    const [copiedLink, setCopiedLink] = useState(false)
+
+    useEffect(() => {
+        if (open) fetchGroups()
+    }, [open])
+
+    const group = groups[0] ?? null
+    const inviteUrl = group?.group_code
+        ? `${window.location.origin}/signup?group_code=${group.group_code}`
+        : null
+
+    const handleCopyLink = async () => {
+        if (!inviteUrl) return
+        await navigator.clipboard.writeText(inviteUrl)
+        setCopiedLink(true)
+        setTimeout(() => setCopiedLink(false), 2000)
+    }
+
+    const handleDownload = () => {
+        const canvas = document.querySelector("[data-qr='refer-invite']")
+        if (!canvas) return
+        const url = canvas.toDataURL("image/png")
+        const link = document.createElement("a")
+        link.href = url
+        link.download = `QR_${group.group_code}.png`
+        link.click()
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[420px]">
+                <DialogHeader>
+                    <DialogTitle>Invite link</DialogTitle>
+                </DialogHeader>
+
+                {loading ? (
+                    <p className="py-8 text-center text-sm text-muted-foreground">Loading…</p>
+                ) : !inviteUrl ? (
+                    <p className="py-8 text-center text-sm text-muted-foreground">No group found.</p>
+                ) : (
+                    <div className="flex flex-col items-center gap-5 py-2">
+
+                        {/* QR code */}
+                        <div className="rounded-xl border bg-white p-4 shadow-sm">
+                            <QRCodeCanvas
+                                data-qr="refer-invite"
+                                value={inviteUrl}
+                                size={180}
+                                includeMargin={false}
+                            />
+                        </div>
+
+                        {/* Download QR */}
+                        <Button
+                            variant="outline"
+                            className="w-full gap-2"
+                            onClick={handleDownload}
+                        >
+                            <Download className="size-4" />
+                            Download QR code
+                        </Button>
+
+                        <div className="w-full flex items-center gap-2 text-xs text-muted-foreground">
+                            <div className="flex-1 h-px bg-border" />
+                            or share the link
+                            <div className="flex-1 h-px bg-border" />
+                        </div>
+
+                        {/* Invite link */}
+                        <div className="w-full flex flex-col gap-2">
+                            <div className="flex items-center gap-2 rounded-lg border bg-muted px-3 py-2 min-w-0">
+                                <p className="font-mono text-xs text-muted-foreground truncate w-64">
+                                    {inviteUrl}
+                                </p>
+                            </div>
+                            <Button className="w-full gap-2" onClick={handleCopyLink}>
+                                {copiedLink
+                                    ? <><Check className="size-4" /> Copied!</>
+                                    : <><Copy className="size-4" /> Copy invite link</>
+                                }
+                            </Button>
+                        </div>
+
+                    </div>
+                )}
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+// ─── Extra active tiers dialog (stacked-tier "+N" badge) ──────────────────────
+
+function ExtraTiersDialog({ open, onOpenChange, tiers, tierMap }) {
+    const { fmtDate } = useDateFormat()
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[420px]">
+                <DialogHeader>
+                    <DialogTitle>Your active subscriptions</DialogTitle>
+                    <DialogDescription>
+                        You currently hold more than one active plan at the same time.
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="flex flex-col gap-2 py-2">
+                    {tiers.map((t) => {
+                        const badge = resolveTierBadge(t.tier, tierMap)
+                        const TierIcon = LucideIcons[tierMap[t.tier]?.badge_icon] ?? null
+                        return (
+                            <div
+                                key={t.tier_id ?? t.tier}
+                                className="flex items-center justify-between rounded-lg border bg-muted/40 px-3 py-2.5"
+                            >
+                                <div className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold ${badge.cls}`}>
+                                    {TierIcon && <TierIcon className="size-3" />}
+                                    {badge.label}
+                                </div>
+                                <span className="text-xs text-muted-foreground">
+                                    {t.expires_at ? `Until ${fmtDate(t.expires_at)}` : "No expiry"}
+                                </span>
+                            </div>
+                        )
+                    })}
+                </div>
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function getInitials(name = "") {
+    return name.trim().split(/\s+/).map((n) => n[0]?.toUpperCase() ?? "").slice(0, 2).join("")
+}
+
+// ─── Inner nav — uses contexts available inside ClientProvider ────────────────
+
+function ClientNav() {
+    const navigate = useNavigate()
+    const { user, logout } = useAuth()
+
+    // Background fetches only — nav rendering never waits on these
+    const { achievements, getAchievements } = useProfile()
+    const { myTier, tierMap, tierCategories, getMyTier, getTierCategories } = useClientTiers()
+
+    const [referOpen, setReferOpen] = useState(false)
+    const [extraTiersOpen, setExtraTiersOpen] = useState(false)
+    const [badgeImgUrl, setBadgeImgUrl] = useState(null)
+    // Caches the resolved stream URL per asset_id — avoids re-hitting /media/token
+    // for the same asset on re-renders. Token TTL is 4h so safe within a session.
+    const badgeTokenCache = useRef({})
+    // Starts false on every mount (incl. full page reloads) so the tier badge
+    // shows a gray skeleton instead of flashing "Free" before /tiers/me resolves —
+    // myTier stays null for genuinely-free users too, so it can't be used as the signal.
+    const [tierReady, setTierReady] = useState(false)
+
+    useEffect(() => {
+        if (!user) return;
+        if (achievements.length === 0) getAchievements();
+        if (tierCategories.length === 0) getTierCategories();
+        if (!myTier) {
+            getMyTier().finally(() => setTierReady(true));
+        } else {
+            setTierReady(true);
+        }
+    }, [user]);
+
+    // ── Derive directly from auth user — same pattern as admin UserMenu ──────
+    // No extra fetch, no loading state, no flicker on reload.
+    const given = user?.personal_info?.name?.given_name ?? ""
+    const last = user?.personal_info?.name?.last_name ?? ""
+    const fullName = given && last ? `${given} ${last}` : (user?.email ?? "")
+    const avatarUrl = resolveAssetSrc(user?.personal_info?.avatar)
+        ?? (typeof user?.personal_info?.avatar === 'string' ? user.personal_info.avatar : "")
+    const email = user?.email ?? ""
+    const avatarColor = AVATAR_COLORS[user?.acc_type] ?? 'bg-muted text-muted-foreground'
+
+    const tierSlug = myTier?.status === 'active' ? (myTier.tier ?? 'free') : 'free'
+    const tierBadge = resolveTierBadge(tierSlug, tierMap)
+    const TierIcon = LucideIcons[tierMap[tierSlug]?.badge_icon] ?? null
+
+    // A user can hold more than one active tier concurrently (e.g. premium +
+    // exclusive bought separately) — the pill above only ever shows the best
+    // one, so surface the rest as a "+N" trigger next to it.
+    const extraActiveTiers = (myTier?.active_tiers ?? []).filter((t) => t.tier !== tierSlug)
+
+    // Derive primitive deps — effect only fires when the actual asset changes,
+    // not on every tierMap/tierSlug reference churn.
+    const badgeAsset = tierMap[tierSlug]?.badgeAsset ?? null
+    const badgeAssetId = badgeAsset?.asset_id ?? null
+    const badgeProvider = badgeAsset?.storage_provider ?? null
+    const badgeFileUrl = badgeAsset?.file_url ?? null
+
+    useEffect(() => {
+        if (!badgeAssetId) { setBadgeImgUrl(null); return }
+
+        // Non-S3: use raw URL directly — no token needed
+        if (badgeProvider !== 's3') { setBadgeImgUrl(badgeFileUrl); return }
+
+        // Ref cache hit — reuse the URL without another POST
+        if (badgeTokenCache.current[badgeAssetId]) {
+            setBadgeImgUrl(badgeTokenCache.current[badgeAssetId])
+            return
+        }
+
+        let cancelled = false
+
+        const base = (import.meta.env.VITE_API_URL ?? '').replace(/\/$/, '')
+        api.post('/client/media/token', { asset_id: badgeAssetId })
+            .then(({ data }) => {
+                if (cancelled) return
+                const url = `${base}/client/media/stream/${data?.data?.token}`
+                badgeTokenCache.current[badgeAssetId] = url
+                setBadgeImgUrl(url)
+            })
+            .catch(() => { if (!cancelled) setBadgeImgUrl(null) })
+
+        return () => { cancelled = true }
+    }, [badgeAssetId, badgeProvider, badgeFileUrl])
+
+    const initials = given && last
+        ? (given[0] + last[0]).toUpperCase()
+        : getInitials(fullName)
+
+    const handleLogout = async () => {
+        await logout()
+        navigate("/login")
+    }
+
+    // console.log("USER OBJECT:", JSON.stringify(user, null, 2))
+
+    return (
+        <>
+            <nav className="bg-card w-full border-b border-default">
+                <div className="flex flex-wrap items-center justify-between mx-auto py-3 px-6">
+
+                    {/* Logo */}
+                    <div className="flex gap-4 items-center">
+                        <div className="w-40 cursor-pointer" onClick={() => navigate("/")}>
+                            <img src="/philpro-white.png" alt="Philproperties" className="object-cover dark:hidden" />
+                            <img src="/philpro-dark.png" alt="Philproperties" className="object-cover hidden dark:block" />
+                        </div>
+                        <div>
+                            <svg
+                                data-testid="geist-icon"
+                                height="16"
+                                width="16"
+                                viewBox="0 0 16 16"
+                                strokeLinejoin="round"
+                                className="xs:hidden sm:block fill-slate-300"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <path
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
+                                    d="M4.01526 15.3939L4.3107 14.7046L10.3107 0.704556L10.6061 0.0151978L11.9849 0.606077L11.6894 1.29544L5.68942 15.2954L5.39398 15.9848L4.01526 15.3939Z"
+                                />
+                            </svg>
+                        </div>
+                        <div id="name" className="lg:-ml-1 font-medium text-sm flex items-center gap-2">
+                            {!tierReady ? (
+                                <div className="xs:hidden md:inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-muted animate-pulse">
+                                    <div className="size-3 rounded-full bg-muted-foreground/30" />
+                                    <span className="text-transparent select-none">Loading</span>
+                                </div>
+                            ) : tierBadge && (
+                                <div className="xs:hidden md:inline-flex items-center gap-1.5">
+                                    <div className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold ${tierBadge.cls}`}>
+                                        {badgeImgUrl
+                                            ? <img src={badgeImgUrl} className="size-3.5 rounded-full object-cover" />
+                                            : TierIcon && <TierIcon className="size-3" />
+                                        }
+                                        {tierBadge.label}
+                                    </div>
+                                    {extraActiveTiers.length > 0 && (
+                                        <button
+                                            type="button"
+                                            onClick={() => setExtraTiersOpen(true)}
+                                            className="inline-flex items-center justify-center px-1.5 py-0.5 rounded-full text-xs font-semibold bg-muted text-muted-foreground hover:bg-muted-foreground/20 transition-colors"
+                                        >
+                                            +{extraActiveTiers.length}
+                                        </button>
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
+                    {/* Right — bell + user menu */}
+                    <div className="flex items-center gap-3">
+                        <ClientNotificationBell />
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Avatar className="cursor-pointer">
+                                    <AvatarImage src={avatarUrl} />
+                                    <AvatarFallback className={`text-sm font-semibold ${avatarColor}`}>
+                                        {initials || "PH"}
+                                    </AvatarFallback>
+                                </Avatar>
+                            </DropdownMenuTrigger>
+
+                            <DropdownMenuContent align="end" className="w-64">
+
+                                {/* User info */}
+                                <DropdownMenuGroup className="p-1.5">
+                                    <div className="w-full truncate text-start text-sm font-medium">
+                                        {fullName || "—"}
+                                    </div>
+                                    <div className="w-full truncate text-start text-[13px] font-medium text-muted-foreground">
+                                        {email}
+                                    </div>
+                                </DropdownMenuGroup>
+
+                                <DropdownMenuSeparator />
+
+                                <DropdownMenuGroup>
+                                    <DropdownMenuItem className="bg-gradient-to-r from-[#0e7490] via-[#3b82f6] to-[#4f46e5] text-white" onClick={() => navigate("/subscriptions")}>
+                                        <Zap /> Subscriptions
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem onClick={() => navigate("/profile")}>
+                                        <User /> Profile
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem onClick={() => navigate("/settings")}>
+                                        <Settings /> Account Settings
+                                    </DropdownMenuItem>
+                                    {/* <DropdownMenuItem>
+                                    <TableOfContents /> Documentation
+                                    <DropdownMenuShortcut>
+                                        <SquareArrowOutUpRight />
+                                    </DropdownMenuShortcut>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem>
+                                    <CircleQuestionMark /> Feedback
+                                </DropdownMenuItem>
+                                <DropdownMenuItem onSelect={() => setReferOpen(true)}>
+                                    <Gift /> Refer
+                                </DropdownMenuItem> */}
+                                    <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                                        Theme
+                                        <DropdownMenuShortcut>
+                                            <ThemeSwitcher />
+                                        </DropdownMenuShortcut>
+                                    </DropdownMenuItem>
+                                </DropdownMenuGroup>
+
+                                <DropdownMenuSeparator />
+
+                                <DropdownMenuGroup>
+                                    <DropdownMenuItem variant="destructive" onClick={handleLogout}>
+                                        <LogOut /> Log out
+                                    </DropdownMenuItem>
+                                </DropdownMenuGroup>
+
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </div>
+                </div>
+            </nav>
+
+            <ReferDialog open={referOpen} onOpenChange={setReferOpen} />
+            <ExtraTiersDialog
+                open={extraTiersOpen}
+                onOpenChange={setExtraTiersOpen}
+                tiers={extraActiveTiers}
+                tierMap={tierMap}
+            />
+        </>
+    )
+}
+
+// ─── Layout ───────────────────────────────────────────────────────────────────
+
+const ClientLayout = () => {
+    const matches = useMatches()
+    const currentHandle = matches.at(-1)?.handle ?? {}
+    const showFooter = currentHandle.showFooter ?? true
+
+    // Sticky announcement bar and nav stack inside one fixed header instead of
+    // each being independently `fixed top-0` (which made them overlap). Height
+    // is measured off this wrapper so --navbar-h always reflects the combined
+    // space, whether or not an announcement is currently showing.
+    const headerRef = useRef(null)
+    useEffect(() => {
+        if (!headerRef.current) return
+        const update = () => {
+            document.documentElement.style.setProperty('--navbar-h', `${headerRef.current.offsetHeight}px`)
+        }
+        update()
+
+        const ro = new ResizeObserver(update)
+        ro.observe(headerRef.current)
+        return () => ro.disconnect()
+    }, [])
+
+    return (
+        <ClientProvider>
+            <div className="min-h-screen flex flex-col">
+                <header ref={headerRef} className="fixed top-0 left-0 right-0 z-50 flex flex-col">
+                    {isQasEnv && <EnvironmentBanner />}
+                    <StickyAnnouncementBar />
+                    <ClientNav />
+                </header>
+                <div className="flex-1 flex flex-col">
+                    <Outlet />
+                </div>
+                <Toaster position="bottom-right" richColors />
+                {showFooter && (
+                    <footer className="bg-muted border-t w-full py-4 px-5 text-right text-sm text-muted-foreground">
+                        © Philproperties, 2026
+                    </footer>
+                )}
+            </div>
+        </ClientProvider>
+    )
+}
+
+export default ClientLayout
\ No newline at end of file
diff --git a/apps/web/src/modules/client/pages/AccountSettings.jsx b/apps/web/src/modules/client/pages/AccountSettings.jsx
new file mode 100644
index 0000000..e4a0eb2
--- /dev/null
+++ b/apps/web/src/modules/client/pages/AccountSettings.jsx
@@ -0,0 +1,465 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { KeyRound, CreditCard, Megaphone, ChevronRight, Eye, EyeOff, ShieldAlert, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { useAuth } from "@/contexts/AuthContext";
+import { useProfile } from "@/contexts/ProfileProvider";
+import { useClientTiers } from "@/contexts/ClientTiersProvider";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+// ─── Section wrapper ──────────────────────────────────────────────────────────
+
+function Section({ icon: Icon, title, description, children }) {
+    return (
+        <Card>
+            <CardHeader className="">
+                <CardTitle className="text-base font-semibold flex items-center gap-2">
+                    <Icon className="size-4 text-muted-foreground" />
+                    {title}
+                </CardTitle>
+                {description && <CardDescription>{description}</CardDescription>}
+            </CardHeader>
+            <Separator />
+            <CardContent className="space-y-4">
+                {children}
+            </CardContent>
+        </Card>
+    );
+}
+
+// ─── Security ─────────────────────────────────────────────────────────────────
+
+function SecuritySection({ user, logout }) {
+    const navigate = useNavigate();
+    const isGoogle = user?.reg_type === "google";
+
+    const [form, setForm]         = useState({ current_password: "", new_password: "", confirm: "" });
+    const [show, setShow]         = useState({ current: false, new: false, confirm: false });
+    const [loading, setLoading]   = useState(false);
+
+    const toggle = (field) => setShow((p) => ({ ...p, [field]: !p[field] }));
+    const set    = (field, val) => setForm((p) => ({ ...p, [field]: val }));
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (form.new_password !== form.confirm) {
+            toast("New passwords do not match.");
+            return;
+        }
+        if (form.new_password.length < 8) {
+            toast("New password must be at least 8 characters.");
+            return;
+        }
+        setLoading(true);
+        try {
+            await api.post("/auth/change-password", {
+                current_password: form.current_password,
+                new_password:     form.new_password,
+            });
+            toast("Password changed. Logging you out…");
+            setTimeout(async () => {
+                await logout();
+                navigate("/login");
+            }, 1500);
+        } catch (err) {
+            toast(err?.response?.data?.message ?? "Could not change password.");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    if (isGoogle) {
+        return (
+            <div className="flex items-start gap-3 rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-900/20 p-4">
+                <ShieldAlert className="size-4 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
+                <p className="text-sm text-amber-700 dark:text-amber-400">
+                    Your account uses Google Sign-In. Password management is handled through Google.
+                </p>
+            </div>
+        );
+    }
+
+    return (
+        <form onSubmit={handleSubmit} className="space-y-4 max-w-sm">
+            {[
+                { key: "current", label: "Current password",  field: "current_password" },
+                { key: "new",     label: "New password",      field: "new_password" },
+                { key: "confirm", label: "Confirm new password", field: "confirm" },
+            ].map(({ key, label, field }) => (
+                <div key={key} className="space-y-1.5">
+                    <Label>{label}</Label>
+                    <div className="relative">
+                        <Input
+                            type={show[key] ? "text" : "password"}
+                            value={form[field]}
+                            onChange={(e) => set(field, e.target.value)}
+                            className="pr-10"
+                            required
+                        />
+                        <button
+                            type="button"
+                            onClick={() => toggle(key)}
+                            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+                        >
+                            {show[key] ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+                        </button>
+                    </div>
+                </div>
+            ))}
+            <Button type="submit" disabled={loading}>
+                {loading ? "Saving…" : "Change password"}
+            </Button>
+        </form>
+    );
+}
+
+// ─── Subscription ─────────────────────────────────────────────────────────────
+
+const TIER_COLORS = {
+    free:      "bg-muted text-muted-foreground",
+    premium:   "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300",
+    exclusive: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400",
+};
+
+function SubscriptionSection() {
+    const navigate = useNavigate();
+    const { myTier, tierLoading, getMyTier, payments, paymentsLoading, getMyPayments } = useClientTiers();
+    const { fmtDate, fmtNumber } = useDateFormat();
+
+    useEffect(() => {
+        getMyTier();
+        getMyPayments();
+    }, []);
+
+    const tier      = myTier?.tier ?? "free";
+    const expiresAt = myTier?.expires_at ? fmtDate(myTier.expires_at) : null;
+
+    return (
+        <div className="space-y-5">
+
+            {/* Current plan */}
+            <div>
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium mb-2">Current plan</p>
+                {tierLoading ? (
+                    <Skeleton className="h-9 w-40" />
+                ) : (
+                    <div className="flex items-center gap-3 flex-wrap">
+                        <div className={`capitalize rounded-md border text-sm px-3 py-0.5 ${TIER_COLORS[tier]}`}>{tier}</div>
+                        {expiresAt && (
+                            <span className="text-sm text-muted-foreground">Expires {expiresAt}</span>
+                        )}
+                        {tier === "free" && (
+                            <Button size="sm" variant="outline" onClick={() => navigate("/subscriptions")}>
+                                Upgrade plan <ChevronRight className="size-3.5" />
+                            </Button>
+                        )}
+                    </div>
+                )}
+            </div>
+
+            <Separator />
+
+            {/* Payment history */}
+            <div>
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium mb-3">Payment history</p>
+                {paymentsLoading ? (
+                    <div className="space-y-2">
+                        {[...Array(3)].map((_, i) => <Skeleton key={i} className="h-10 w-full" />)}
+                    </div>
+                ) : payments.length === 0 ? (
+                    <p className="text-sm text-muted-foreground">No payments yet.</p>
+                ) : (
+                    <div className="rounded-lg border overflow-hidden">
+                        <table className="w-full text-sm">
+                            <thead className="bg-muted/50 sticky top-0 z-10">
+                                <tr>
+                                    <th className="text-left px-4 py-2.5 text-xs font-medium text-muted-foreground">Date</th>
+                                    <th className="text-left px-4 py-2.5 text-xs font-medium text-muted-foreground">Plan</th>
+                                    <th className="text-left px-4 py-2.5 text-xs font-medium text-muted-foreground">Amount</th>
+                                    <th className="text-left px-4 py-2.5 text-xs font-medium text-muted-foreground">Status</th>
+                                </tr>
+                            </thead>
+                        </table>
+                        <ScrollArea className="h-[192px]">
+                            <table className="w-full text-sm">
+                                <tbody className="divide-y">
+                                    {payments.map((p) => (
+                                        <tr key={p.payment_id} className="hover:bg-muted/30 transition-colors">
+                                            <td className="px-4 py-3 text-muted-foreground">
+                                                {fmtDate(p.createdAt)}
+                                            </td>
+                                            <td className="px-4 py-3 capitalize">{p.plan?.tier ?? "—"}</td>
+                                            <td className="px-4 py-3">
+                                                {p.currency} {fmtNumber(p.amount ?? 0)}
+                                            </td>
+                                            <td className="px-4 py-3">
+                                                <Badge variant={p.status === "completed" ? "outline" : ""} className="capitalize text-xs">
+                                                    {p.status}
+                                                </Badge>
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </ScrollArea>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+// ─── Advertisements ───────────────────────────────────────────────────────────
+
+const AD_OPTIONS = [
+    {
+        key:         "show_popup_ads",
+        label:       "Popup ads",
+        description: "Show promotional popups when you open pages like the dashboard.",
+    },
+    {
+        key:         "show_other_ads",
+        label:       "Other ads",
+        description: "Show banner, hero, and sidebar advertisements across the site.",
+    },
+];
+
+function AdvertisementsSection() {
+    const { profile, getProfile, updateProfile, profileLoading } = useProfile();
+    const [confirmPopupOff, setConfirmPopupOff] = useState(false);
+
+    useEffect(() => {
+        getProfile();
+    }, []);
+
+    const showPopupAds = profile?.personal_info?.show_popup_ads ?? true;
+    const showOtherAds = profile?.personal_info?.show_other_ads ?? true;
+    // No separate stored flag — "hidden" just means both underlying toggles are off,
+    // so it can never drift out of sync with them.
+    const hideAllAds = !showPopupAds && !showOtherAds;
+
+    const handleToggle = async (key, value) => {
+        // Turning popup ads off also turns off other ads — confirm first since
+        // it's a bigger change than the switch being flipped suggests.
+        if (key === "show_popup_ads" && value === false) {
+            setConfirmPopupOff(true);
+            return;
+        }
+        const result = await updateProfile({ [key]: value });
+        if (result?.success) {
+            toast("Preference saved.", {
+                description: "Reload the page for this to take effect."
+            });
+        }
+    };
+
+    const confirmTurnOffPopupAndOther = async () => {
+        setConfirmPopupOff(false);
+        const result = await updateProfile({ show_popup_ads: false, show_other_ads: false });
+        if (result?.success) {
+            toast("Preference saved.", {
+                description: "Reload the page for this to take effect."
+            });
+        }
+    };
+
+    const handleHideAllToggle = async (hide) => {
+        const result = await updateProfile({ show_popup_ads: !hide, show_other_ads: !hide });
+        if (result?.success) {
+            toast("Preference saved.", {
+                description: "Reload the page for this to take effect."
+            });
+        }
+    };
+
+    return (
+        <>
+            <div className="space-y-4">
+                <div>
+                    <div className="flex items-center justify-between gap-4">
+                        <div className="space-y-0.5">
+                            <p className="text-sm font-medium">Hide all ads</p>
+                            <p className="text-xs text-muted-foreground">
+                                Turn off every advertisement across the platform, popups included.
+                            </p>
+                        </div>
+                        {profileLoading ? (
+                            <Skeleton className="h-6 w-11 rounded-full shrink-0" />
+                        ) : (
+                            <Switch checked={hideAllAds} onCheckedChange={handleHideAllToggle} />
+                        )}
+                    </div>
+                    <Separator className="mt-4" />
+                </div>
+
+                {AD_OPTIONS.map((opt, i) => (
+                    <div key={opt.key}>
+                        <div className="flex items-center justify-between gap-4">
+                            <div className="space-y-0.5">
+                                <p className="text-sm font-medium">{opt.label}</p>
+                                <p className="text-xs text-muted-foreground">{opt.description}</p>
+                            </div>
+                            {profileLoading ? (
+                                <Skeleton className="h-6 w-11 rounded-full shrink-0" />
+                            ) : (
+                                <Switch
+                                    checked={profile?.personal_info?.[opt.key] ?? true}
+                                    onCheckedChange={(v) => handleToggle(opt.key, v)}
+                                />
+                            )}
+                        </div>
+                        {i < AD_OPTIONS.length - 1 && <Separator className="mt-4" />}
+                    </div>
+                ))}
+            </div>
+
+            <AlertDialog open={confirmPopupOff} onOpenChange={setConfirmPopupOff}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>Turn off popup ads?</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            This will also turn off Other ads (banner, hero, and sidebar advertisements).
+                            You can turn either back on here anytime.
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                        <AlertDialogAction onClick={confirmTurnOffPopupAndOther}>
+                            Turn off both
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </>
+    );
+}
+
+// ─── Delete Account ───────────────────────────────────────────────────────────
+// Disabled while still in development — keep implemented for when we're ready
+// to expose self-service account deletion.
+//
+// function DeleteAccountSection({ logout }) {
+//     const navigate  = useNavigate();
+//     const [open, setOpen]       = useState(false);
+//     const [loading, setLoading] = useState(false);
+//
+//     const handleDelete = async () => {
+//         setLoading(true);
+//         try {
+//             await api.delete("/client/profile");
+//             toast("Account deleted. Goodbye!", {
+//                 action: {
+//                     label: "Close",
+//                     onClick: () => {}
+//                 }
+//             });
+//             await logout();
+//             navigate("/login");
+//         } catch (err) {
+//             toast(err?.response?.data?.message ?? "Could not delete account.", {
+//                 action: {
+//                     label: "Close",
+//                     onClick: () => {}
+//                 }
+//             });
+//             setLoading(false);
+//         }
+//     };
+//
+//     return (
+//         <>
+//             <div className="flex items-start justify-between gap-4">
+//                 <div className="space-y-1">
+//                     <p className="text-sm font-medium text-destructive">Delete account</p>
+//                     <p className="text-xs text-muted-foreground">
+//                         Permanently remove your account and all associated data. This action cannot be undone.
+//                     </p>
+//                 </div>
+//                 <Button
+//                     variant="destructive"
+//                     size="sm"
+//                     className="shrink-0"
+//                     onClick={() => setOpen(true)}
+//                 >
+//                     <Trash2 className="size-3.5 mr-1.5" />
+//                     Delete account
+//                 </Button>
+//             </div>
+//
+//             <AlertDialog open={open} onOpenChange={setOpen}>
+//                 <AlertDialogContent>
+//                     <AlertDialogHeader>
+//                         <AlertDialogTitle>Delete your account?</AlertDialogTitle>
+//                         <AlertDialogDescription>
+//                             This will permanently delete your account and sign you out of all sessions.
+//                             Your data cannot be recovered after deletion.
+//                         </AlertDialogDescription>
+//                     </AlertDialogHeader>
+//                     <AlertDialogFooter>
+//                         <AlertDialogCancel disabled={loading}>Cancel</AlertDialogCancel>
+//                         <AlertDialogAction
+//                             onClick={handleDelete}
+//                             disabled={loading}
+//                             className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+//                         >
+//                             {loading ? "Deleting…" : "Yes, delete my account"}
+//                         </AlertDialogAction>
+//                     </AlertDialogFooter>
+//                 </AlertDialogContent>
+//             </AlertDialog>
+//         </>
+//     );
+// }
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function AccountSettings() {
+    const { user, logout } = useAuth();
+
+    return (
+        <div className="mt-17 bg-muted min-h-screen">
+            <div className="p-6 lg:container lg:max-w-2xl lg:mx-auto space-y-6">
+                <div>
+                    <h1 className="text-xl font-semibold tracking-tight">Account Settings</h1>
+                    <p className="text-sm text-muted-foreground mt-0.5">Manage your security, subscription, and preferences.</p>
+                </div>
+
+                <Section icon={KeyRound} title="Security" description="Update your password. You'll be logged out of all sessions after changing.">
+                    <SecuritySection user={user} logout={logout} />
+                </Section>
+
+                <Section icon={CreditCard} title="Subscription" description="Your current plan and billing history.">
+                    <SubscriptionSection />
+                </Section>
+
+                <Section icon={Megaphone} title="Advertisements" description="Control which advertisements you see across the platform.">
+                    <AdvertisementsSection />
+                </Section>
+
+                {/* <Section icon={Trash2} title="Danger Zone" description="Irreversible account actions.">
+                    <DeleteAccountSection logout={logout} />
+                </Section> */}
+            </div>
+        </div>
+    );
+}
diff --git a/apps/web/src/modules/client/pages/AdvertisementLandingPage.jsx b/apps/web/src/modules/client/pages/AdvertisementLandingPage.jsx
new file mode 100644
index 0000000..51b006b
--- /dev/null
+++ b/apps/web/src/modules/client/pages/AdvertisementLandingPage.jsx
@@ -0,0 +1,104 @@
+// modules/client/pages/AdvertisementLandingPage.jsx
+//
+// Destination for an advertisement's own click-through when no redirect_link
+// was set — the internal page authored in the "Page Builder" wizard step
+// (Step 3 of Add Advertisement). Resolved by uuid via
+// GET /api/client/advertisements/uuid/:uuid.
+
+import { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { Megaphone, ArrowLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { PageMeta } from "@/contexts/MetadataContext";
+import { resolveAssetSrc } from "@/utils/media.util";
+import api from "@/utils/api.util";
+
+export default function AdvertisementLandingPage() {
+    const { uuid } = useParams();
+    const navigate = useNavigate();
+    const [ad, setAd] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [notFound, setNotFound] = useState(false);
+
+    useEffect(() => {
+        setLoading(true);
+        setNotFound(false);
+        api.get(`/client/advertisements/uuid/${uuid}`)
+            .then(({ data }) => setAd(data?.data?.data ?? null))
+            .catch(() => setNotFound(true))
+            .finally(() => setLoading(false));
+    }, [uuid]);
+
+    if (loading) {
+        return (
+            <div className="my-20 lg:container lg:mx-auto max-w-3xl px-4 space-y-4">
+                <Skeleton className="h-8 w-2/3" />
+                <Skeleton className="h-56 w-full rounded-lg" />
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-5/6" />
+            </div>
+        );
+    }
+
+    if (notFound || !ad) {
+        return (
+            <div className="my-20 lg:container lg:mx-auto max-w-3xl px-4 flex flex-col items-center text-center gap-3 py-16">
+                <Megaphone className="size-8 text-muted-foreground" />
+                <p className="font-medium">This advertisement is no longer available.</p>
+                <Button variant="outline" onClick={() => navigate("/dashboard")}>
+                    <ArrowLeft className="size-4" /> Go back
+                </Button>
+            </div>
+        );
+    }
+
+    const page = ad.landing_page ?? {};
+    const imageSrc = resolveAssetSrc(ad.image) || ad.image_url || null;
+    const links = Array.isArray(page.links) ? page.links : [];
+
+    return (
+        <div className="my-20 lg:container lg:mx-auto max-w-3xl px-4 space-y-6 pb-16">
+            <PageMeta title={page.title ? `${page.title} - STARR` : undefined} description={page.description} />
+
+            <Button variant="ghost" size="sm" className="w-fit -ml-2" onClick={() => navigate("/dashboard")}>
+                <ArrowLeft className="size-4" /> Back
+            </Button>
+
+            {imageSrc && (
+                <div className="rounded-lg overflow-hidden border h-56 sm:h-72">
+                    <img src={imageSrc} alt={page.title || ad.headline || "Advertisement"} className="w-full h-full object-cover" />
+                </div>
+            )}
+
+            <div className="space-y-2">
+                <h1 className="text-2xl sm:text-3xl font-bold tracking-tight">{page.title || ad.headline || "Advertisement"}</h1>
+                {page.description && <p className="text-muted-foreground text-lg">{page.description}</p>}
+            </div>
+
+            {page.body && (
+                <div className="prose prose-sm sm:prose max-w-none dark:prose-invert whitespace-pre-wrap">
+                    {page.body}
+                </div>
+            )}
+
+            {links.length > 0 && (
+                <div className="flex flex-wrap gap-2 pt-2">
+                    {links.map((l, i) => (
+                        <Button
+                            key={i}
+                            variant={i === 0 ? "default" : "outline"}
+                            onClick={() => {
+                                if (!l.link) return;
+                                if (/^https?:\/\//.test(l.link)) window.open(l.link, "_blank", "noopener,noreferrer");
+                                else navigate(l.link);
+                            }}
+                        >
+                            {l.label || l.link}
+                        </Button>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/apps/web/src/modules/client/pages/Checkout.jsx b/apps/web/src/modules/client/pages/Checkout.jsx
new file mode 100644
index 0000000..32f75d9
--- /dev/null
+++ b/apps/web/src/modules/client/pages/Checkout.jsx
@@ -0,0 +1,444 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { useAuth } from "@/contexts/AuthContext";
+import { useProfile } from "@/contexts/ProfileProvider";
+import { useClientTiers } from "@/contexts/ClientTiersProvider";
+import { PageMeta } from "@/contexts/MetadataContext";
+import {
+  ArrowLeft, BookOpen, CalendarDays, Check,
+  House, Loader2, ShieldCheck, Tag, Zap, LockIcon,
+} from "lucide-react";
+
+import { useDateFormat } from "@/hooks/useDateFormat";
+import api from "@/utils/api.util";
+
+function formatDuration(days, unit) {
+  if (!days) return "Lifetime";
+  const UNIT_TO_DAYS = { minute: 1 / 1440, hour: 1 / 24, day: 1, month: 30, year: 365 };
+  const multiplier = UNIT_TO_DAYS[unit] ?? 1;
+  const value = Math.round((days / multiplier) * 1000) / 1000;
+  const label = unit ?? "day";
+  return `${value} ${label}${value !== 1 ? "s" : ""}`;
+}
+
+function formatCourseDuration(seconds = 0) {
+  if (!seconds) return null;
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  if (h && m) return `${h}h ${m}m`;
+  if (h) return `${h}h`;
+  return `${m}m`;
+}
+
+const TIER_STYLES = {
+  free: { badge: "bg-gradient-to-r from-lime-400 to-lime-600 text-white", icon: Tag, label: "Free" },
+  premium: { badge: "bg-gradient-to-r from-fuchsia-600 to-purple-600 text-white", icon: Zap, label: "Premium" },
+  exclusive: { badge: "bg-gradient-to-r from-rose-500 to-red-600 text-white", icon: LockIcon, label: "Exclusive" },
+};
+
+const CheckoutSkeleton = () => (
+  <div className="min-h-screen bg-muted pt-24">
+    <div className="max-w-6xl mx-auto px-6 pb-6">
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+        <div className="lg:col-span-8 space-y-6">
+          <Skeleton className="h-5 w-48" />
+          <Skeleton className="h-48 w-full rounded-xl" />
+          <Skeleton className="h-52 w-full rounded-xl" />
+        </div>
+        <div className="lg:col-span-4">
+          <Skeleton className="h-80 w-full rounded-xl" />
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+const Checkout = () => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { fmtCurrency } = useDateFormat();
+
+  const planId = searchParams.get("plan_id");
+  const returnToken = searchParams.get("token");
+  const wasCancelled = searchParams.get("cancelled") === "true";
+
+  const { user } = useAuth();
+  const { givenName, lastName: lastNameFromProfile, getProfile, profile } = useProfile();
+  const {
+    plans, plansLoading,
+    myTier, tierLoading,
+    checkoutLoading,
+    promoLoading,
+    getPlans, getMyTier,
+    validatePromo,
+    createOrder, captureOrder, cancelOrder,
+  } = useClientTiers();
+
+  const [promoCode,    setPromoCode]    = useState("");
+  const [promoResult,  setPromoResult]  = useState(null); // { valid, code, type, value, discount }
+  const [capturing,    setCapturing]    = useState(false);
+  const capturingRef = useRef(false);
+
+  useEffect(() => {
+    getProfile();
+  }, []);
+
+  useEffect(() => {
+    getMyTier();
+    if (!plans.length) getPlans();
+  }, [getMyTier, getPlans, plans.length]);
+
+  const plan = useMemo(
+    () => plans.find((p) => String(p.plan_id) === String(planId)) ?? null,
+    [plans, planId]
+  );
+
+  // Handle PayPal return after approval
+  useEffect(() => {
+    if (!returnToken || capturingRef.current) return;
+    capturingRef.current = true;
+    setCapturing(true);
+    captureOrder(returnToken).then((result) => {
+      if (result) {
+        navigate("/subscriptions", { replace: true });
+      } else {
+        setCapturing(false);
+        capturingRef.current = false;
+      }
+    });
+  }, [returnToken, captureOrder, navigate]);
+
+  // Handle PayPal return after cancellation
+  useEffect(() => {
+    if (!wasCancelled) return;
+    const orderId = searchParams.get("token");
+    if (orderId) cancelOrder(orderId);
+    toast("PayPal checkout was cancelled.");
+    navigate(`/subscriptions/checkout?plan_id=${planId}`, { replace: true });
+  }, [wasCancelled]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // const personalInfo = user?.personal_info ?? {};
+  const firstName = givenName || user?.personal_info?.name?.given_name || "";
+  const lastName = lastNameFromProfile || user?.personal_info?.name?.last_name || "";
+  const email = user?.email ?? "";
+
+  const isLoading = plansLoading || tierLoading;
+  // A user can hold more than one active tier concurrently — check membership
+  // in the full active set, not just the best one.
+  const isCurrent = !!plan && (myTier?.active_tiers ?? []).some((t) => t.tier === plan.tier);
+  const style = TIER_STYLES[plan?.tier] ?? TIER_STYLES.free;
+  const Icon = style.icon;
+  const effectivePrice    = plan ? Number(plan.price) : 0;
+  const effectiveCurrency = plan?.currency ?? 'USD';
+  const subtotal = effectivePrice;
+  const discount = promoResult?.discount ?? 0;
+  const total = Math.max(subtotal - discount, 0);
+  const duration = formatDuration(plan?.duration_days, plan?.duration_unit);
+
+  const breadcrumbItems = [
+    { label: "Home", icon: <House className="size-4" />, to: "/" },
+    { label: "Subscriptions", to: "/subscriptions" },
+    { label: "Checkout" },
+  ];
+
+  const handleApplyPromo = async () => {
+    if (!plan) return;
+    const result = await validatePromo(plan.plan_id, promoCode.trim().toUpperCase());
+    if (result?.valid) {
+      setPromoResult(result);
+      toast("Promo code applied.");
+    } else {
+      toast(result?.reason ?? "Invalid promo code.");
+    }
+  };
+
+  const handleRemovePromo = () => {
+    setPromoResult(null);
+    setPromoCode("");
+  };
+
+  const handlePayPal = async () => {
+    const order = await createOrder(
+      plan.plan_id,
+      promoResult?.code ?? null,
+    );
+    if (!order) return;
+    const approvalUrl = order.approval_url;
+    if (!approvalUrl) { toast("Could not get PayPal approval URL."); return; }
+    window.location.href = approvalUrl;
+  };
+
+  if (capturing) {
+    return (
+      <div className="min-h-screen bg-muted flex items-center justify-center">
+        <div className="flex flex-col items-center gap-4">
+          <Loader2 className="size-10 animate-spin text-primary" />
+          <p className="text-sm text-muted-foreground">Confirming your payment…</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (isLoading) return <CheckoutSkeleton />;
+
+  if (!planId || !plan) {
+    return (
+      <div className="min-h-screen bg-muted pt-24">
+        <div className="max-w-3xl mx-auto px-6 pb-6 space-y-4">
+          <AppBreadcrumb items={breadcrumbItems} />
+          <Card>
+            <CardContent className="py-10 text-center space-y-4">
+              <BookOpen className="size-10 mx-auto text-muted-foreground/50" />
+              <div>
+                <h1 className="text-xl font-semibold">No plan selected</h1>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Select a subscription plan before continuing to checkout.
+                </p>
+              </div>
+              <Button onClick={() => navigate("/subscriptions")}>
+                <ArrowLeft className="size-4" /> Back to Subscriptions
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
+  if (!plan.is_active) {
+    return (
+      <div className="min-h-screen bg-muted pt-24">
+        <div className="max-w-3xl mx-auto px-6 pb-6 space-y-4">
+          <AppBreadcrumb items={breadcrumbItems} />
+          <Card>
+            <CardContent className="py-10 text-center space-y-4">
+              <LockIcon className="size-10 mx-auto text-muted-foreground/50" />
+              <div>
+                <h1 className="text-xl font-semibold">Plan Not Available</h1>
+                <p className="text-sm text-muted-foreground mt-1">
+                  The <span className="font-medium text-foreground">{plan.label}</span> plan
+                  is not available for purchase at the moment.
+                </p>
+              </div>
+              <Button onClick={() => navigate("/subscriptions")}>
+                <ArrowLeft className="size-4" /> Back to Subscriptions
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-muted pt-24">
+      <PageMeta title={plan ? `Checkout – ${plan.label} - STARR` : undefined} />
+      <div className="max-w-6xl mx-auto px-6 pb-6">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+
+          <div className="lg:col-span-8 space-y-6">
+            <AppBreadcrumb items={breadcrumbItems} />
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Review Plan</CardTitle>
+                <CardDescription>Confirm the subscription you are about to purchase.</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-5">
+                <div className="flex items-start flex-col sm:flex-row gap-4">
+                  <div className="w-full sm:w-32 h-32 bg-secondary rounded-xl flex items-center justify-center">
+                    <Icon className="size-12 text-secondary-foreground" />
+                  </div>
+                  <div className="flex-1 space-y-3">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <Badge className={style.badge}>
+                        <Icon className="size-3.5" /> {style.label}
+                      </Badge>
+                      <Badge variant="outline" className="gap-1">
+                        <CalendarDays className="size-3.5" /> {duration}
+                      </Badge>
+                    </div>
+                    <div>
+                      <h1 className="text-2xl font-semibold">{plan.label}</h1>
+                      <p className="text-sm text-muted-foreground mt-1">
+                        {plan.course_count ?? plan.courses?.length ?? 0} course
+                        {(plan.course_count ?? plan.courses?.length ?? 0) === 1 ? "" : "s"} included
+                      </p>
+                    </div>
+                    <div className="flex items-center gap-3 flex-wrap">
+                      <p className="text-2xl font-bold text-primary">
+                        {fmtCurrency(effectivePrice, effectiveCurrency)}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <Separator />
+
+                <div className="space-y-3">
+                  <p className="text-sm font-medium flex items-center gap-2">
+                    <BookOpen className="size-4" /> Bundle
+                  </p>
+                  {plan.courses?.length > 0 ? (
+                    <div className="space-y-3">
+                      {plan.courses.map((course) => (
+                        <div key={course.course_id} className="flex items-start gap-3">
+                          <Check className="size-4 text-green-500 mt-0.5 shrink-0" />
+                          <div className="min-w-0 flex-1">
+                            <p className="text-sm font-medium line-clamp-1">{course.title}</p>
+                            <div className="flex items-center gap-2 flex-wrap mt-1">
+                              {course.level && (
+                                <Badge variant="outline" className="h-5 text-xs capitalize">
+                                  {course.level}
+                                </Badge>
+                              )}
+                              {formatCourseDuration(course.duration_seconds) && (
+                                <span className="text-xs text-muted-foreground">
+                                  {formatCourseDuration(course.duration_seconds)}
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="text-sm text-muted-foreground">Access to free course content.</p>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Billing Information</CardTitle>
+                <CardDescription>This uses the profile details on your account.</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid lg:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="firstName">First Name</Label>
+                    <Input id="firstName" value={firstName} disabled />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="lastName">Last Name</Label>
+                    <Input id="lastName" value={lastName} disabled />
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="email">Email Address</Label>
+                  <Input id="email" type="email" value={email} disabled />
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="lg:col-span-4">
+            <Card className="lg:sticky lg:top-24">
+              <CardHeader>
+                <CardTitle>Price Breakdown</CardTitle>
+                <CardDescription>Payment will be processed through PayPal.</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <div className="flex justify-between gap-4">
+                    <span className="text-muted-foreground">Plan Price</span>
+                    <span className="font-medium">{fmtCurrency(subtotal, effectiveCurrency)}</span>
+                  </div>
+                  {promoResult?.valid && (
+                    <div className="flex justify-between gap-4 text-green-600">
+                      <span>Promo ({promoResult.code})</span>
+                      <span>-{fmtCurrency(promoResult.discount, effectiveCurrency)}</span>
+                    </div>
+                  )}
+                </div>
+
+                <Separator />
+
+                <div className="space-y-2">
+                  <Label htmlFor="promo">Promo Code</Label>
+                  {promoResult?.valid ? (
+                    <div className="flex items-center gap-2 rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700">
+                      <Check className="size-4 shrink-0" />
+                      <span className="flex-1 font-medium">{promoResult.code}</span>
+                      <button
+                        onClick={handleRemovePromo}
+                        className="text-green-500 hover:text-green-700 text-xs underline"
+                      >
+                        Remove
+                      </button>
+                    </div>
+                  ) : (
+                    <div className="flex gap-2">
+                      <Input
+                        id="promo"
+                        placeholder="Enter promo code"
+                        value={promoCode}
+                        onChange={(e) => setPromoCode(e.target.value)}
+                        disabled={promoLoading || checkoutLoading}
+                        onKeyDown={(e) => e.key === "Enter" && promoCode.trim() && handleApplyPromo()}
+                      />
+                      <Button
+                        variant="outline"
+                        onClick={handleApplyPromo}
+                        disabled={promoLoading || checkoutLoading || !promoCode.trim()}
+                      >
+                        {promoLoading ? <Loader2 className="size-4 animate-spin" /> : "Apply"}
+                      </Button>
+                    </div>
+                  )}
+                </div>
+
+                <Separator />
+
+                <div className="flex justify-between items-center text-lg font-semibold">
+                  <span>Total</span>
+                  <span>{fmtCurrency(total, effectiveCurrency)}</span>
+                </div>
+
+                {isCurrent && (
+                  <p className="text-xs text-muted-foreground rounded-md border bg-muted/50 px-3 py-2">
+                    You already have an active {plan.tier} plan — this purchase will extend it by {duration}, instead of starting a new one.
+                  </p>
+                )}
+                <Button
+                  size="lg"
+                  className="w-full"
+                  onClick={handlePayPal}
+                  disabled={checkoutLoading}
+                >
+                  {checkoutLoading
+                    ? <Loader2 className="size-4 animate-spin" />
+                    : <ShieldCheck className="size-4" />
+                  }
+                  {isCurrent
+                    ? `Extend for ${fmtCurrency(total, effectiveCurrency)} with PayPal`
+                    : `Pay ${fmtCurrency(total, effectiveCurrency)} with PayPal`}
+                </Button>
+                <div className="text-center text-sm text-muted-foreground space-y-1">
+                  <p className="inline-flex items-center justify-center gap-1">
+                    <ShieldCheck className="size-4" />
+                    Secure payment powered by PayPal
+                  </p>
+                  <p>Access starts after successful payment capture.</p>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Checkout;
\ No newline at end of file
diff --git a/apps/web/src/modules/client/pages/CourseCheckout.jsx b/apps/web/src/modules/client/pages/CourseCheckout.jsx
new file mode 100644
index 0000000..15648a5
--- /dev/null
+++ b/apps/web/src/modules/client/pages/CourseCheckout.jsx
@@ -0,0 +1,247 @@
+import { useEffect, useRef, useState } from "react";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { toast } from "sonner";
+import { ArrowLeft, BookOpen, CalendarDays, House, Loader2, ShieldCheck } from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useClientCourses } from "@/contexts/ClientCoursesContext";
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+function formatAccess(days) {
+  if (!days) return "Lifetime access";
+  if (days % 365 === 0) return `${days / 365} year${days / 365 > 1 ? "s" : ""} access`;
+  if (days % 30 === 0) return `${days / 30} month${days / 30 > 1 ? "s" : ""} access`;
+  return `${days} day access`;
+}
+
+const PageSkeleton = () => (
+  <div className="min-h-screen bg-muted pt-24">
+    <div className="max-w-4xl mx-auto px-6 pb-6 space-y-4">
+      <Skeleton className="h-5 w-48" />
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+        <div className="lg:col-span-8"><Skeleton className="h-64 w-full rounded-xl" /></div>
+        <div className="lg:col-span-4"><Skeleton className="h-48 w-full rounded-xl" /></div>
+      </div>
+    </div>
+  </div>
+);
+
+export default function CourseCheckout() {
+  const navigate = useNavigate();
+  const { id: courseId } = useParams();
+  const { fmtCurrency } = useDateFormat();
+  const [searchParams] = useSearchParams();
+
+  const returnToken  = searchParams.get("token");
+  const wasCancelled = searchParams.get("cancelled") === "true";
+
+  const { course, courseLoading, getCourse, createCourseOrder, captureCourseOrder, cancelCourseOrder, purchaseLoading } = useClientCourses();
+
+  const [capturing, setCapturing] = useState(false);
+  const capturingRef = useRef(false);
+
+  useEffect(() => {
+    getCourse(courseId);
+  }, [courseId]);
+
+  // Handle PayPal return — capture
+  useEffect(() => {
+    // A real PayPal cancel redirect carries BOTH `cancelled=true` (our own
+    // cancelUrl) and `token=<order_id>` (PayPal always appends its own token
+    // to whatever return/cancel URL it's given) — without this guard, both
+    // this effect and the cancellation effect below fired on the same load,
+    // racing a capture call against the cancel and surfacing a confusing
+    // "Pending purchase not found" error toast instead of a clean
+    // cancellation message.
+    if (!returnToken || wasCancelled || capturingRef.current) return;
+    capturingRef.current = true;
+    setCapturing(true);
+    captureCourseOrder(returnToken).then((result) => {
+      if (result) {
+        navigate(`/course/${courseId}`, { replace: true });
+      } else {
+        setCapturing(false);
+        capturingRef.current = false;
+      }
+    });
+  }, [returnToken]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Handle PayPal cancellation
+  useEffect(() => {
+    if (!wasCancelled) return;
+    const orderId = searchParams.get("token");
+    if (orderId) cancelCourseOrder(orderId);
+    // Deferred to a new macrotask: this page renders as an <Outlet /> child,
+    // which sits before <Toaster /> in ClientLayout's JSX — so a toast fired
+    // synchronously in this mount-time effect races the Toaster's own mount
+    // effect (which subscribes to sonner's store) and is silently dropped,
+    // since sonner only notifies subscribers already listening at publish
+    // time (no replay for late subscribers). setTimeout(0) pushes the call
+    // past the current effect-flush, after Toaster has subscribed.
+    setTimeout(() => toast("Payment was cancelled."), 0);
+    navigate(`/course/${courseId}/checkout`, { replace: true });
+  }, [wasCancelled]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handlePayPal = async () => {
+    if (!course?.product?.id) return;
+    const order = await createCourseOrder(course.product.id);
+    if (!order) return;
+    if (!order.approval_url) { toast("Could not get PayPal approval URL."); return; }
+    window.location.href = order.approval_url;
+  };
+
+  if (capturing) {
+    return (
+      <div className="min-h-screen bg-muted flex items-center justify-center">
+        <div className="flex flex-col items-center gap-4">
+          <Loader2 className="size-10 animate-spin text-primary" />
+          <p className="text-sm text-muted-foreground">Confirming your payment…</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (courseLoading) return <PageSkeleton />;
+
+  const product = course?.product ?? null;
+
+  if (!product) {
+    return (
+      <div className="min-h-screen bg-muted pt-24">
+        <div className="max-w-3xl mx-auto px-6 pb-6 space-y-4">
+          <Card>
+            <CardContent className="py-10 text-center space-y-4">
+              <BookOpen className="size-10 mx-auto text-muted-foreground/50" />
+              <div>
+                <h1 className="text-xl font-semibold">Not available for purchase</h1>
+                <p className="text-sm text-muted-foreground mt-1">
+                  This course doesn't have an individual purchase option.
+                </p>
+              </div>
+              <Button onClick={() => navigate(`/course/${courseId}`)}>
+                <ArrowLeft className="size-4" /> Go Back
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
+  const breadcrumbItems = [
+    { label: "Home",    icon: <House className="size-4" />, to: "/dashboard" },
+    { label: "Courses", to: "/course" },
+    { label: course?.title ?? "Course", to: `/course/${courseId}` },
+    { label: "Checkout" },
+  ];
+
+  return (
+    <div className="min-h-screen bg-muted pt-24">
+      <div className="max-w-5xl mx-auto px-6 pb-10">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+
+          {/* ── Left ── */}
+          <div className="lg:col-span-8 space-y-6">
+            <AppBreadcrumb items={breadcrumbItems} />
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Course Details</CardTitle>
+                <CardDescription>Review what you're about to purchase.</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="flex items-start gap-4">
+                  <div className="w-16 h-16 rounded-lg bg-secondary flex items-center justify-center shrink-0">
+                    <BookOpen className="size-8 text-secondary-foreground" />
+                  </div>
+                  <div className="flex-1 min-w-0 space-y-1">
+                    <h2 className="text-lg font-semibold leading-snug">{course?.title}</h2>
+                    {course?.level && (
+                      <Badge variant="outline" className="capitalize">{course.level}</Badge>
+                    )}
+                    {course?.description && (
+                      <p className="text-sm text-muted-foreground line-clamp-2">{course.description}</p>
+                    )}
+                  </div>
+                </div>
+
+                <Separator />
+
+                <div className="space-y-2 text-sm">
+                  <div className="flex items-center gap-2 text-muted-foreground">
+                    <CalendarDays className="size-4 shrink-0" />
+                    <span>{formatAccess(product.access_days)}</span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* ── Right / Summary ── */}
+          <div className="lg:col-span-4">
+            <Card className="lg:sticky lg:top-24">
+              <CardHeader>
+                <CardTitle>Price Summary</CardTitle>
+                <CardDescription>Payment processed through PayPal.</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="flex justify-between items-center">
+                  <span className="text-muted-foreground">Course Price</span>
+                  <span className="font-medium">{fmtCurrency(product.price, product.currency)}</span>
+                </div>
+
+                <Separator />
+
+                <div className="flex justify-between items-center text-lg font-semibold">
+                  <span>Total</span>
+                  <span>{fmtCurrency(product.price, product.currency)}</span>
+                </div>
+
+                {course?.has_purchased ? (
+                  <Button size="lg" className="w-full" variant="outline" disabled>
+                    Already Purchased
+                  </Button>
+                ) : course?.purchase_eligible === false ? (
+                  <div className="space-y-2">
+                    <Button size="lg" className="w-full" variant="outline" disabled>
+                      Not Yet Available
+                    </Button>
+                    <p className="text-xs text-muted-foreground text-center">
+                      Complete your plan's starter content to unlock this purchase.
+                    </p>
+                  </div>
+                ) : (
+                  <Button
+                    size="lg"
+                    className="w-full"
+                    onClick={handlePayPal}
+                    disabled={purchaseLoading}
+                  >
+                    {purchaseLoading
+                      ? <Loader2 className="size-4 animate-spin" />
+                      : <ShieldCheck className="size-4" />
+                    }
+                    Pay {fmtCurrency(product.price, product.currency)} with PayPal
+                  </Button>
+                )}
+
+                <div className="text-center text-xs text-muted-foreground space-y-1">
+                  <p className="inline-flex items-center justify-center gap-1">
+                    <ShieldCheck className="size-3.5" />
+                    Secure payment powered by PayPal
+                  </p>
+                  <p>Access starts after successful payment capture.</p>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/client/pages/CourseDetails.jsx b/apps/web/src/modules/client/pages/CourseDetails.jsx
new file mode 100644
index 0000000..625944f
--- /dev/null
+++ b/apps/web/src/modules/client/pages/CourseDetails.jsx
@@ -0,0 +1,911 @@
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { useParams, useNavigate } from "react-router-dom";
+import api from "@/utils/api.util";
+import {
+    House, Timer, Layers, GitBranch, Medal, CircleStar, LockIcon,
+    SendHorizonal, CheckCheck, CheckCircle2, Clock, FileQuestion, ClipboardList,
+    Hourglass, Check, Megaphone
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import CourseBadge from "@/modules/admin/components/courses/CourseBadge";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Progress } from "@/components/ui/progress";
+import { motion, AnimatePresence } from "framer-motion";
+import { useRef, useEffect, useState } from "react";
+import { useScrollTrigger } from "../hooks/ScrollTrigger";
+import {
+    Accordion, AccordionContent, AccordionItem, AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+    Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription,
+} from "@/components/ui/dialog";
+import { useClientCourses } from "@/contexts/ClientCoursesContext";
+import { useClientTiers } from "@/contexts/ClientTiersProvider";
+import { useCourseReadingProgress } from "@/contexts/ClientCourseReadingProgressContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+import { getTierColor } from "@/utils/tierColors";
+import { useClientAdvertisements } from "@/contexts/ClientAdvertisementContext";
+import { Banner, BannerSkeleton } from "@/components/generic/Blocks/Client/Advertisements/Banner";
+import { Tags } from "lucide-react";
+import CourseUpsellModal from "../components/CourseUpsellModal";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function formatDuration(seconds = 0) {
+    if (!seconds) return null;
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    if (h > 0) return `${h}hr ${m}min`;
+    return `${m}min`;
+}
+
+
+// ─── Spine / card helpers ──────────────────────────────────────────────────────
+
+const useVisibleNodes = (refs, count) => {
+    const [visible, setVisible] = useState(new Set());
+    useEffect(() => {
+        setVisible(new Set());
+        const observers = [];
+        const id = setTimeout(() => {
+            refs.current.forEach((el, i) => {
+                if (!el) return;
+                const obs = new IntersectionObserver(
+                    ([entry]) => {
+                        setVisible((prev) => {
+                            const next = new Set(prev);
+                            if (entry.isIntersecting) next.add(i);
+                            return next;
+                        });
+                    },
+                    { threshold: 0.2 }
+                );
+                obs.observe(el);
+                observers.push(obs);
+            });
+        }, 50);
+        return () => { clearTimeout(id); observers.forEach((o) => o.disconnect()); };
+    }, [count]);
+    return visible;
+};
+
+// ─── Unit Accordion Block ─────────────────────────────────────────────────────
+
+const UnitAccordionBlock = ({ unit, unitIndex, i, cardRefs, courseId, onToggle, isCompleted, locked, onLockedClick }) => {
+    const navigate = useNavigate();
+    const quiz = unit.quiz ?? null;
+
+    return (
+        <motion.div
+            ref={(el) => (cardRefs.current[i] = el)}
+            className="group rounded-xl border bg-card hover:bg-blue-400/10 hover:shadow-md hover:border-blue-400 transition-all"
+            initial={{ opacity: 0, y: 14 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.35, delay: i * 0.05, ease: "easeOut" }}
+        >
+            <Accordion
+                type="single"
+                collapsible
+                defaultValue={`unit-${unit.unit_id}`}
+                onValueChange={() => setTimeout(onToggle, 250)}
+            >
+                <AccordionItem value={`unit-${unit.unit_id}`} className="border-none">
+                    <AccordionTrigger className="px-4 py-4 hover:no-underline">
+                        <div className="flex flex-col items-start gap-3 w-full">
+                            <div className="flex items-center justify-between w-full">
+                                <span className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
+                                    Unit {unitIndex + 1}
+                                </span>
+                            </div>
+                            <h1 className="text-2xl font-bold text-card-foreground group-hover:text-blue-600 dark:group-hover:text-blue-400">
+                                {unit.title}
+                            </h1>
+                            <div className="[&_svg]:size-4 text-md text-muted-foreground flex items-center gap-4">
+                                {unit.lessons?.length > 0 && (
+                                    <div className="flex items-center gap-1.5">
+                                        <Layers /> {unit.lessons.length} {unit.lessons.length === 1 ? "Lesson" : "Lessons"}
+                                    </div>
+                                )}
+                                {unit.duration_seconds > 0 && (
+                                    <div className="flex items-center gap-1.5">
+                                        <Timer /> {formatDuration(unit.duration_seconds)}
+                                    </div>
+                                )}
+                                {quiz && (
+                                    <div className="flex items-center gap-1.5">
+                                        <FileQuestion /> Quiz
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="px-1.5 h-full">
+                        <div className="flex flex-col gap-1 pt-0">
+                            {(unit.lessons ?? []).map((lesson) => (
+                                <div
+                                    key={lesson.lesson_id}
+                                    className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-slate-200 dark:hover:bg-blue-500 transition-colors cursor-pointer"
+                                    onClick={() => locked
+                                        ? onLockedClick?.()
+                                        : navigate(`/course/${courseId}/unit`, { state: { lessonId: lesson.lesson_id, unitId: unit.unit_id } })}
+                                >
+                                    <div className="flex items-center gap-3 select-none min-w-0">
+                                        {isCompleted(lesson.uuid)
+                                            ? <CheckCircle2 className="size-4 text-emerald-500 shrink-0" />
+                                            : <div className="w-4 h-4 rounded-full border border-muted-foreground/40 flex items-center justify-center flex-shrink-0" />
+                                        }
+                                        <span className="text-md text-card-foreground truncate">{lesson.title}</span>
+                                    </div>
+                                    {lesson.duration_seconds > 0 && (
+                                        <span className="text-sm shrink-0 ml-2">{formatDuration(lesson.duration_seconds)}</span>
+                                    )}
+                                </div>
+                            ))}
+
+                            {/* Quiz row — shown after lessons if unit has a quiz */}
+                            {quiz && (
+                                <div
+                                    className="flex items-center justify-between py-2 px-3 mt-1 rounded-lg border border-dashed border-blue-300 dark:border-blue-700 bg-blue-50/60 dark:bg-blue-950/30 hover:bg-blue-100 dark:hover:bg-blue-900/40 transition-colors cursor-pointer"
+                                    onClick={() => locked
+                                        ? onLockedClick?.()
+                                        : navigate(`/course/${courseId}/unit`, { state: { quizUnitId: unit.unit_id } })}
+                                >
+                                    <div className="flex items-center gap-3 select-none min-w-0">
+                                        {quiz.has_passed
+                                            ? <CheckCircle2 className="size-4 text-emerald-500 shrink-0" />
+                                            : <FileQuestion className="size-4 text-blue-500 shrink-0" />
+                                        }
+                                        <span className="text-sm font-medium text-blue-700 dark:text-blue-300 truncate">{quiz.title}</span>
+                                    </div>
+                                    <Badge className={cn(
+                                        "shrink-0 ml-2 text-[10px]",
+                                        quiz.has_passed
+                                            ? "bg-green-100 text-green-700 border border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700"
+                                            : "bg-blue-100 text-blue-700 border border-blue-300 dark:bg-blue-900/40 dark:text-blue-400 dark:border-blue-700"
+                                    )}>
+                                        {quiz.has_passed ? "Passed" : "Quiz"}
+                                    </Badge>
+                                </div>
+                            )}
+                        </div>
+                    </AccordionContent>
+                </AccordionItem>
+            </Accordion>
+        </motion.div>
+    );
+};
+
+// ─── Assessment Card ──────────────────────────────────────────────────────────
+
+const AssessmentCard = ({ assessment, courseId, delay, nodeRef }) => {
+    const navigate = useNavigate();
+    const passed = assessment.has_passed;
+
+    return (
+        <motion.div
+            ref={nodeRef}
+            className="w-full rounded-2xl border bg-card p-5 flex flex-col gap-3 shadow-sm"
+            initial={{ opacity: 0, y: 14 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.35, delay, ease: "easeOut" }}
+        >
+            <div className="flex items-center w-full justify-between">
+                <div className="flex items-center gap-2.5">
+                    <div className="h-9 w-9 rounded-lg bg-violet-100 dark:bg-violet-900/40 flex items-center justify-center shrink-0">
+                        <ClipboardList className="h-4.5 w-4.5 text-violet-600 dark:text-violet-400" />
+                    </div>
+                    <div className="min-w-0">
+                        <p className="text-[10px] uppercase tracking-widest text-muted-foreground font-semibold">Final Assessment</p>
+                        <p className="text-sm font-semibold leading-tight truncate">{assessment.title}</p>
+                    </div>
+                </div>
+                {(() => {
+                    const count = assessment.max_questions ?? assessment.question_count;
+                    if (!count) return null;
+                    return (
+                        <div className="text-sm text-muted-foreground shrink-0">
+                            {count} {count === 1 ? "question" : "questions"}
+                        </div>
+                    );
+                })()}
+            </div>
+            <div className="flex items-center justify-between">
+                {passed ? (
+                    <Badge className="bg-green-100 text-green-700 border border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700 gap-1">
+                        <CheckCircle2 className="size-3" /> Passed
+                    </Badge>
+                ) : (
+                    <Badge className="bg-muted text-muted-foreground border gap-1">
+                        <Clock className="size-3" /> Not yet passed
+                    </Badge>
+                )}
+                <Button
+                    type="button"
+                    size="sm"
+                    variant={passed ? "outline" : "default"}
+                    className="h-7 text-xs"
+                    onClick={() => navigate(`/course/${courseId}/unit`, { state: { seekAssessment: true } })}
+                >
+                    {passed ? "Review" : "Take Assessment"}
+                </Button>
+            </div>
+        </motion.div>
+    );
+};
+
+// ─── Certificate Card ─────────────────────────────────────────────────────────
+
+const CertCard = ({ courseTitle, courseLevel, badgeColor, badgeImageUrl, pendingCert, certificate, delay, nodeRef }) => {
+    const { fmtDate } = useDateFormat();
+    const isIssued = !!certificate;
+    const isPending = !isIssued && !!pendingCert;
+
+    let issuedLabel = "Upon completion";
+    if (isIssued) issuedLabel = fmtDate(certificate.issued_at);
+    if (isPending) issuedLabel = fmtDate(pendingCert.issue_at);
+
+    return (
+        <Dialog>
+            <motion.div
+                ref={nodeRef}
+                className="w-full max-w-[320px] rounded-2xl border bg-card p-6 flex flex-col items-center gap-4 shadow-sm"
+                initial={{ opacity: 0, y: 14 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.35, delay, ease: "easeOut" }}
+            >
+                <CourseBadge
+                    title={courseTitle}
+                    level={courseLevel}
+                    color={badgeColor ?? "purple"}
+                    imageUrl={badgeImageUrl}
+                />
+
+                <div className="w-full flex items-end justify-between">
+                    <div>
+                        <p className="text-[10px] uppercase tracking-widest text-muted-foreground font-semibold">
+                            {isIssued ? "Issued" : "Available"}
+                        </p>
+                        <p className="text-sm text-foreground mt-0.5">{issuedLabel}</p>
+                    </div>
+
+                    {isIssued ? (
+                        <DialogTrigger asChild>
+                            <Badge className="bg-green-100 text-green-700 border border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700 gap-1 cursor-pointer">
+                                <CheckCircle2 className="size-3" /> Issued
+                            </Badge>
+                        </DialogTrigger>
+                    ) : isPending ? (
+                        <DialogTrigger asChild>
+                            <Badge className="bg-amber-100 text-amber-700 border border-amber-400 dark:bg-amber-900/40 dark:text-amber-400 dark:border-amber-700 gap-1 cursor-pointer">
+                                <Clock className="size-3" /> Pending
+                            </Badge>
+                        </DialogTrigger>
+                    ) : (
+                        <DialogTrigger asChild>
+                            <Badge className="bg-muted text-muted-foreground border gap-1 cursor-pointer">
+                                <Clock className="size-3" /> Not yet earned
+                            </Badge>
+                        </DialogTrigger>
+                    )}
+                </div>
+            </motion.div>
+
+            <DialogContent className="sm:max-w-sm">
+                <DialogHeader>
+                    <DialogTitle className="flex items-center gap-2">
+                        {isIssued
+                            ? <CheckCircle2 className="size-4 text-green-500" />
+                            : <Clock className="size-4 text-muted-foreground" />}
+                        {isIssued ? "Certificate Issued" : isPending ? "Certificate Pending" : "Certificate"}
+                    </DialogTitle>
+                    <DialogDescription asChild>
+                        <div className="space-y-3 pt-1 text-sm text-muted-foreground">
+                            {isIssued ? (
+                                <>
+                                    <p>
+                                        Your certificate for this course was officially issued on{" "}
+                                        <span className="font-medium text-foreground">{fmtDate(certificate.issued_at)}</span>.
+                                    </p>
+                                    <div className="rounded-lg border bg-muted px-4 py-3">
+                                        <p className="text-sm font-semibold text-foreground">{courseTitle}</p>
+                                    </div>
+                                    <p>
+                                        You can view and download it from your <span className="font-medium text-foreground">Certificates</span> page.
+                                    </p>
+                                </>
+                            ) : isPending ? (
+                                <>
+                                    <p>
+                                        You passed the course assessment on{" "}
+                                        <span className="font-medium text-foreground">{fmtDate(pendingCert.passed_at)}</span>.
+                                        Your certificate is being processed and will be officially issued on:
+                                    </p>
+                                    <div className="rounded-lg border bg-muted px-4 py-3 text-center">
+                                        <p className="text-base font-semibold text-foreground">{fmtDate(pendingCert.issue_at)}</p>
+                                    </div>
+                                    <p>
+                                        Once issued, it will appear in your <span className="font-medium text-foreground">Certificates</span> page.
+                                    </p>
+                                </>
+                            ) : (
+                                <>
+                                    <p>
+                                        Complete all lessons and pass the course assessment to earn your certificate for:
+                                    </p>
+                                    <div className="rounded-lg border bg-muted px-4 py-3">
+                                        <p className="text-sm font-semibold text-foreground">{courseTitle}</p>
+                                    </div>
+                                    <p>
+                                        Your certificate will be issued within <span className="font-medium text-foreground">the hour</span> after passing and will appear in your <span className="font-medium text-foreground">Certificates</span> page.
+                                    </p>
+                                </>
+                            )}
+                        </div>
+                    </DialogDescription>
+                </DialogHeader>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+// ─── Course Units (spine + cards) ─────────────────────────────────────────────
+
+const CourseUnits = ({ units = [], courseId, courseTitle, courseLevel, badgeColor, badgeImageUrl, onToggle, isCompleted, pendingCert, certificate, assessment, contentNotReady, locked, onLockedClick }) => {
+    const wrapRef = useRef(null);
+    const cardRefs = useRef([]);
+
+    // Build a flat ordered list of nodes: [unit, unit, ..., assessment?, cert]
+    // Quiz is rendered inside each unit accordion, not as a separate spine node.
+    // While content isn't ready yet, no unit/lesson/assessment titles are shown —
+    // only the Rewards (cert) card, as a preview of what's to come.
+    const nodes = contentNotReady
+        ? [{ type: "cert" }]
+        : [
+            ...units.map((unit) => ({ type: "unit", unit })),
+            ...(assessment ? [{ type: "assessment", assessment }] : []),
+            { type: "cert" },
+        ];
+    const totalNodes = nodes.length;
+    const visibleNodes = useVisibleNodes(cardRefs, totalNodes);
+    const [mids, setMids] = useState([]);
+    const maxVisible = visibleNodes.size ? Math.max(...visibleNodes) : -1;
+
+    const measure = () => {
+        if (!wrapRef.current) return;
+        const base = wrapRef.current.getBoundingClientRect().top;
+        setMids(
+            cardRefs.current.map((el) => {
+                const r = el?.getBoundingClientRect();
+                return r ? Math.round((r.top + r.bottom) / 2 - base) : 0;
+            })
+        );
+    };
+
+    useEffect(() => {
+        const id = setTimeout(measure, 60);
+        window.addEventListener("resize", measure);
+        return () => { clearTimeout(id); window.removeEventListener("resize", measure); };
+    }, [totalNodes]);
+
+    const lastMid = mids.length ? mids[mids.length - 1] : 0;
+    const svgH = lastMid + 40;
+    const drawnTo = maxVisible >= 0 && mids[maxVisible] ? mids[maxVisible] : 0;
+    const isIssued = !!certificate;
+
+    return (
+        <div ref={wrapRef} className="flex gap-0 lg:gap-5 lg:px-4">
+            {/* Spine */}
+            <div className="relative flex-shrink-0 w-0 lg:w-7" style={{ height: svgH }}>
+                {mids.length > 0 && (
+                    <>
+                        <svg
+                            className="absolute top-0 left-1/2 -translate-x-1/2 overflow-visible text-border xs:hidden lg:block"
+                            width={2}
+                            height={svgH}
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <line x1={1} y1={0} x2={1} y2={svgH} stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                            {Array.from({ length: 10 }).map((_, i) => {
+                                const y1 = (mids[0] / 10) * i;
+                                const y2 = (mids[0] / 10) * (i + 1);
+                                const revealed = drawnTo >= y2;
+                                return (
+                                    <motion.line
+                                        key={`intro-${i}`}
+                                        x1={1} y1={y1} x2={1} y2={y2}
+                                        stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
+                                        animate={{ opacity: revealed ? 1 : 0.3 }}
+                                        transition={{ duration: 0.4, ease: "easeOut" }}
+                                    />
+                                );
+                            })}
+                            {mids[0] != null && drawnTo > mids[0] && (
+                                <motion.line
+                                    x1={1} y1={mids[0]} x2={1} y2={drawnTo}
+                                    stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
+                                    initial={{ opacity: 0.3 }} animate={{ opacity: 1 }}
+                                    transition={{ duration: 0.3 }}
+                                />
+                            )}
+                        </svg>
+                        {mids.map((mid, i) => {
+                            const visible = visibleNodes.has(i);
+                            const isCert = i === totalNodes - 1;
+                            return (
+                                <motion.div
+                                    key={`node-${i}`}
+                                    className={cn(
+                                        "absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 w-7 h-7 rounded-full border bg-background flex items-center justify-center text-xs font-medium xs:hidden lg:flex",
+                                        isCert && isIssued ? "border-emerald-500 text-emerald-500" : "border-border text-muted-foreground"
+                                    )}
+                                    style={{ top: mid }}
+                                    initial={{ opacity: 0, scale: 0 }}
+                                    animate={{ opacity: visible ? 1 : 0, scale: visible ? 1 : 0 }}
+                                    transition={{ type: "spring", stiffness: 400, damping: 18, delay: 0.05 }}
+                                >
+                                    {isCert ? <Check className="size-3.5" /> : i + 1}
+                                </motion.div>
+                            );
+                        })}
+                    </>
+                )}
+            </div>
+
+            {/* Cards */}
+            <div className="flex flex-col gap-6 flex-1 max-w-3xl min-w-0 xs:pt-0 lg:pt-[50px]">
+                {nodes.map((node, ni) => {
+                    const delay = ni * 0.05;
+                    const nodeRef = (el) => (cardRefs.current[ni] = el);
+
+                    if (node.type === "unit") {
+                        const unitIndex = units.indexOf(node.unit);
+                        return (
+                            <UnitAccordionBlock
+                                key={node.unit.unit_id}
+                                unit={node.unit}
+                                unitIndex={unitIndex}
+                                i={ni}
+                                cardRefs={cardRefs}
+                                courseId={courseId}
+                                onToggle={measure}
+                                isCompleted={isCompleted}
+                                locked={locked}
+                                onLockedClick={onLockedClick}
+                            />
+                        );
+                    }
+
+                    if (node.type === "assessment") {
+                        return (
+                            <AssessmentCard
+                                key="assessment"
+                                assessment={node.assessment}
+                                courseId={courseId}
+                                delay={delay}
+                                nodeRef={nodeRef}
+                            />
+                        );
+                    }
+
+                    // cert
+                    return (
+                        <CertCard
+                            key="cert"
+                            nodeRef={nodeRef}
+                            delay={delay}
+                            courseTitle={courseTitle}
+                            courseLevel={courseLevel}
+                            badgeColor={badgeColor}
+                            badgeImageUrl={badgeImageUrl}
+                            pendingCert={pendingCert}
+                            certificate={certificate}
+                        />
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
+// ─── Course Details ───────────────────────────────────────────────────────────
+
+const CourseDetails = () => {
+    const CourseBreadcrumb = useRef(null);
+    const triggered = useScrollTrigger(CourseBreadcrumb);
+    const { id: courseId } = useParams();
+    const navigate = useNavigate();
+
+    const { getCourse, course, courseBlocked, courseLoading, resetCourse } = useClientCourses();
+    const { myTier, getMyTier } = useClientTiers();
+    const { fetchCourseProgress, fetchCourseProgressSummary, summary: progressSummary, isCompleted, resetProgress } = useCourseReadingProgress();
+    const { adLists, listLoading: adLoading, getActiveAdvertisementList, handleAdCtaClick } = useClientAdvertisements();
+
+    const [tierMap, setTierMap] = useState({});
+    const [badgeImageUrl, setBadgeImageUrl] = useState(null);
+    const [upsellOpen, setUpsellOpen] = useState(false);
+    useEffect(() => {
+        api.get("/client/tiers/categories")
+            .then(({ data }) => {
+                const m = {};
+                (data.data ?? []).forEach((c) => { m[c.slug] = c; });
+                setTierMap(m);
+            })
+            .catch(() => { });
+    }, []);
+
+    const hasCompleted = !!course?.is_completed;
+    // duration_seconds is derived from authored lesson content (see duration.util.js) —
+    // zero means no lesson content has been built yet, so the course isn't ready to take.
+    const contentNotReady = !course?.duration_seconds;
+
+    useEffect(() => {
+        if (!myTier) getMyTier();
+    }, []);
+
+    useEffect(() => {
+        getMyTier();
+        getCourse(courseId);
+        getActiveAdvertisementList("course_details.banner");
+        return () => { resetCourse(); resetProgress(); setBadgeImageUrl(null); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [courseId]);
+
+    // Progress is meaningless (and 403s) on a course the user can't access —
+    // only fetch it once getCourse has resolved to a real, unlocked course.
+    useEffect(() => {
+        if (!course || courseBlocked) return;
+        fetchCourseProgress(courseId);
+        fetchCourseProgressSummary(courseId);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [course, courseBlocked, courseId]);
+
+    const bannerAds = adLists["course_details.banner"] ?? [];
+
+    // Resolve badge image once course loads — issue a client stream token for
+    // private S3 assets so the badge preview works on this page.
+    useEffect(() => {
+        if (!course?.badge_asset_id) {
+            setBadgeImageUrl(course?.badge_image_url ?? null);
+            return;
+        }
+        const STREAM_BASE = `${import.meta.env.VITE_API_URL}/client/media/stream`;
+        api.post("/client/media/token", { asset_id: course.badge_asset_id })
+            .then(({ data }) => {
+                const token = data.data?.token;
+                setBadgeImageUrl(token ? `${STREAM_BASE}/${token}` : null);
+            })
+            .catch(() => setBadgeImageUrl(course.badge_image_url ?? null));
+    }, [course?.badge_asset_id, course?.badge_image_url]);
+
+    const items = [
+        { label: "Home", icon: <House className="size-4" />, to: `/dashboard` },
+        { label: "Courses", to: `/course` },
+        { label: course?.title ?? "Course" },
+    ];
+
+    if (courseLoading) {
+        return (
+            <div className="my-17 p-8 lg:container lg:mx-auto space-y-4">
+                <Skeleton className="h-4 w-48" />
+                <Skeleton className="h-10 w-2/3" />
+                <Skeleton className="h-5 w-full max-w-2xl" />
+                <Skeleton className="h-5 w-full max-w-xl" />
+            </div>
+        );
+    }
+
+    return (
+        <div>
+            <PageMeta title={course ? `${course.title} - STARR` : undefined} description={course?.description} />
+            <div className="my-17">
+
+                <AnimatePresence>
+                    {triggered && (
+                        <motion.div
+                            key="sticky-bar"
+                            initial={{ y: -20, opacity: 0 }}
+                            animate={{ y: 0, opacity: 1 }}
+                            exit={{ y: -20, opacity: 0 }}
+                            transition={{ duration: 0.2, ease: "easeOut" }}
+                            className="fixed top-[67px] left-0 right-0 z-10 bg-card border-b py-3 xs:px-4 md:px-6"
+                        >
+                            <div className="w-full flex items-center justify-between">
+                                <AppBreadcrumb items={items} />
+                                <div id="call-to-action">
+                                    {contentNotReady ? (
+                                        <Badge variant="secondary" className="gap-1.5 text-xs">
+                                            <Hourglass className="size-3" /> Coming Soon
+                                        </Badge>
+                                    ) : (
+                                        <div className="flex gap-2 items-center">
+                                        <Dialog>
+                                            <DialogTrigger asChild>
+                                                <Button variant="outline">
+                                                    <Megaphone /> View Ads
+                                                </Button>
+                                            </DialogTrigger>
+                                            <DialogContent className="sm:max-w-5xl">
+                                                <DialogHeader>
+                                                    <DialogTitle>Advertisements</DialogTitle>
+                                                </DialogHeader>
+                                                {adLoading["course_details.banner"] ? (
+                                                    <BannerSkeleton />
+                                                ) : (
+                                                    <Banner ads={bannerAds} onCtaClick={handleAdCtaClick} />
+                                                )}
+                                            </DialogContent>
+                                        </Dialog>
+                                            <Button size="sm" className="lg:hidden" onClick={() => courseBlocked ? setUpsellOpen(true) : navigate(`/course/${courseId}/unit`)}>
+                                                {hasCompleted
+                                                    ? <><CheckCheck /> Start Again</>
+                                                    : <><SendHorizonal /> Start Learning</>
+                                                }
+                                            </Button>
+                                            <Button size="default" className="hidden lg:inline-flex" onClick={() => courseBlocked ? setUpsellOpen(true) : navigate(`/course/${courseId}/unit`)}>
+                                                {hasCompleted
+                                                    ? <><CheckCheck /> Start Again</>
+                                                    : <><SendHorizonal /> Start Learning</>
+                                                }
+                                            </Button>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+
+                <div className="flex flex-col gap-8">
+                    <div className="flex flex-col gap-6">
+
+                        {/* Hero */}
+                        <div className="bg-primary dark:bg-accent/50">
+                            <div className="lg:container lg:mx-auto flex flex-col gap-6 xs:px-6 xs:py-6 lg:px-4 lg:py-16">
+                                <div>
+                                    <AppBreadcrumb
+                                        color={
+                                            {
+                                                link: { color: "text-white" },
+                                                page: { color: "text-white" }
+                                            }
+                                        }
+                                        items={items}
+                                    />
+                                </div>
+                                <div className="flex lg:flex-row items-start justify-between w-full text-white">
+                                    <div className="flex flex-col gap-4">
+                                        <div className="flex items-center gap-2 flex-wrap">
+                                            {(() => {
+                                                const slug = course?.plan_tier ?? course?.subscription ?? "free";
+                                                const { label, cls } = resolveTierBadge(slug, tierMap);
+                                                return <Badge className={cls}>{label}</Badge>;
+                                            })()}
+                                            {(course?.categories ?? []).map((cat) => (
+                                                <Badge key={cat.id} className="bg-white/15 text-white border-white/30">
+                                                    <Tags /> {cat.name}
+                                                </Badge>
+                                            ))}
+                                        </div>
+                                        <h1 className="font-bold xs:text-2xl lg:text-4xl">{course?.title ?? "Course Title"}</h1>
+                                        <p className="max-w-2xl xs:text-sm lg:text-lg">{course?.description ?? ""}</p>
+                                        <div className="flex items-center gap-4 text-sm lg:text-base">
+                                            {course?.duration_seconds > 0 && (
+                                                <div className="[&_svg]:size-4 flex gap-1.5 items-center">
+                                                    <Timer />
+                                                    {formatDuration(course.duration_seconds)}
+                                                </div>
+                                            )}
+                                            {course?.level && (
+                                                <div className="[&_svg]:size-4 flex gap-1.5 items-center">
+                                                    <GitBranch />
+                                                    {course.level.charAt(0).toUpperCase() + course.level.slice(1)}
+                                                </div>
+                                            )}
+                                        </div>
+                                        {progressSummary && progressSummary.lessons_total > 0 && (
+                                            <div className="flex flex-col gap-1.5 max-w-xl">
+                                                <div className="flex items-center justify-between text-sm text-white mb-1">
+                                                    <span>{progressSummary.lessons_completed} of {progressSummary.lessons_total} lessons complete</span>
+                                                    <span>{progressSummary.percent}%</span>
+                                                </div>
+                                                <Progress value={progressSummary.percent} className="[&>div]:bg-blue-500" />
+                                            </div>
+                                        )}
+                                        <div ref={CourseBreadcrumb} className="w-fit">
+                                            {contentNotReady ? (
+                                                <div className="flex items-center gap-2 rounded-lg border bg-muted px-4 py-2.5 text-sm text-muted-foreground">
+                                                    <Hourglass className="size-4 shrink-0" />
+                                                    This course is currently being prepared. Please check back later.
+                                                </div>
+                                            ) : (
+                                                <Button
+                                                    className="w-fit bg-blue-500"
+                                                    onClick={() => courseBlocked ? setUpsellOpen(true) : navigate(`/course/${courseId}/unit`)}
+                                                >
+                                                    {hasCompleted
+                                                        ? <><CheckCheck /> Start Again</>
+                                                        : <><SendHorizonal /> Proceed</>
+                                                    }
+                                                </Button>
+                                            )}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        
+
+                        {/* Body */}
+                        <div className="lg:container lg:mx-auto flex flex-col gap-6 xs:p-6 xs:-mt-5 lg:-mt-0">
+                            <div className="flex flex-col xs:gap-12 lg:gap-12 flex-1 min-w-0">
+                                <div className="space-y-4">
+                                    <div className="font-bold text-2xl">About</div>
+                                    <div className="max-w-3xl space-y-4">
+                                        <p>{course?.description ?? ""}</p>
+                                    </div>
+                                </div>
+
+
+                                {/* Objectives — no wrapper rendered at all when empty, otherwise an
+                                    empty div still eats a gap-12 slot in the flex column below */}
+                                {course?.objectives?.length > 0 && (
+                                    <div className="space-y-4">
+                                        <div className="font-bold text-2xl">Learning Outcomes</div>
+                                        <ul className="max-w-3xl list-disc list-inside space-y-1">
+                                            {course.objectives.map((obj) => (
+                                                <li key={obj.objective_id}>{obj.text}</li>
+                                            ))}
+                                        </ul>
+                                    </div>
+                                )}
+
+                                {/* Roles + Prerequisites */}
+                                <div className="max-w-3xl space-y-6">
+                                    {/* Roles */}
+                                    <div className=" space-y-4">
+                                        <div className="space-y-2">
+                                            <div className="font-bold text-xl">Roles</div>
+                                            <p className="text-sm text-muted-foreground">Job roles this course qualifies you for</p>
+                                        </div>
+                                        {course?.roles?.length > 0 ? (
+                                            <div className="flex flex-wrap gap-2">
+                                                {course.roles.map((r) => (
+                                                    <Badge key={r.role_id} variant="secondary" className="text-sm">
+                                                        {r.text}
+                                                    </Badge>
+                                                ))}
+                                            </div>
+                                        ) : (
+                                            <div className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
+                                                No specific roles are required for this course.
+                                            </div>
+                                        )}
+                                    </div>
+
+                                    {/* Prerequisites */}
+                                    <div className="rounded-xl border bg-card p-6 space-y-4">
+                                        <div>
+                                            <div className="font-bold text-xl">Prerequisites</div>
+                                            <p className="text-sm text-muted-foreground">Complete these courses first</p>
+                                        </div>
+                                        {course?.prerequisites?.length > 0 ? (
+                                            <div className="space-y-2">
+                                                {course.prerequisites.map((p) => {
+                                                    // Guarded = the prerequisite itself sits behind a paid tier —
+                                                    // paint the whole row with that tier's actual admin-configured
+                                                    // color (Tier Categories → Color). Reuses the exact same
+                                                    // gradient classes the tier Badge renders with (tierColors.js
+                                                    // #badge) instead of a flat swatch fill — those strings are
+                                                    // hardcoded per color key in tierColors.js so they survive
+                                                    // Tailwind's build-time purge, unlike a runtime-composed
+                                                    // bg-{key}-500 class would.
+                                                    const tierInfo  = p.subscription ? tierMap[p.subscription] : null;
+                                                    const guarded   = (tierInfo?.rank ?? 0) > 0 && !p.completed;
+                                                    const tierColor = guarded ? getTierColor(tierInfo.color) : null;
+
+                                                    return (
+                                                        <div
+                                                            key={p.prereq_id}
+                                                            className={cn(
+                                                                "flex items-center justify-between gap-3 py-3 px-3 rounded-lg",
+                                                                p.completed && "bg-emerald-50 dark:bg-emerald-950/20",
+                                                                !p.completed && !guarded && "bg-muted/40",
+                                                                guarded && tierColor.badge
+                                                            )}
+                                                        >
+                                                            <div className="flex items-center gap-3 min-w-0">
+                                                                {p.completed ? (
+                                                                    <div className="w-6 h-6 rounded-full bg-emerald-500 flex items-center justify-center shrink-0">
+                                                                        <Check className="w-3.5 h-3.5 text-white" />
+                                                                    </div>
+                                                                ) : (
+                                                                    <div
+                                                                        className={cn("size-4 rounded-full border-2 shrink-0", guarded && "border-white/70")}
+                                                                    />
+                                                                )}
+                                                                <span
+                                                                    className={cn(
+                                                                        "font-medium truncate",
+                                                                        !p.completed && !guarded && "text-muted-foreground",
+                                                                        guarded && "text-white"
+                                                                    )}
+                                                                >
+                                                                    {p.title ?? "—"}
+                                                                </span>
+                                                            </div>
+                                                            <Badge
+                                                                variant="secondary"
+                                                                className={cn(
+                                                                    "shrink-0 border-0 gap-1",
+                                                                    p.completed
+                                                                        ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400"
+                                                                        : guarded
+                                                                            ? "bg-white/15 text-white"
+                                                                            : "text-muted-foreground"
+                                                                )}
+                                                            >
+                                                                {p.completed
+                                                                    ? <><CheckCheck className="size-3.5" /> Completed</>
+                                                                    : <><LockIcon className="size-3.5" /> Locked</>}
+                                                            </Badge>
+                                                        </div>
+                                                    );
+                                                })}
+                                            </div>
+                                        ) : (
+                                            <div className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
+                                                No prerequisites — this is a great course to start with.
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+
+
+                                {/* Units — while content isn't ready, only Rewards is shown */}
+                                <div className="space-y-4">
+                                    {course?.units?.length > 0 && (
+                                        <>
+                                            <div className="font-bold text-2xl">
+                                                {contentNotReady ? "Rewards" : "Course content"}
+                                            </div>
+                                            <CourseUnits
+                                                units={course.units}
+                                                courseId={courseId}
+                                                courseTitle={course.title}
+                                                courseLevel={course.level}
+                                                badgeColor={course.badge_color ?? "purple"}
+                                                badgeImageUrl={badgeImageUrl}
+                                                isCompleted={isCompleted}
+                                                pendingCert={course.pending_certificate ?? null}
+                                                certificate={course.certificate ?? null}
+                                                assessment={course.assessment ?? null}
+                                                contentNotReady={contentNotReady}
+                                                locked={courseBlocked}
+                                                onLockedClick={() => setUpsellOpen(true)}
+                                            />
+                                        </>
+                                    )}
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <CourseUpsellModal
+                open={upsellOpen}
+                onOpenChange={setUpsellOpen}
+                course={course}
+                tierMap={tierMap}
+            />
+        </div>
+    );
+};
+
+export default CourseDetails;
\ No newline at end of file
diff --git a/apps/web/src/modules/client/pages/CourseList.jsx b/apps/web/src/modules/client/pages/CourseList.jsx
new file mode 100644
index 0000000..5fba72e
--- /dev/null
+++ b/apps/web/src/modules/client/pages/CourseList.jsx
@@ -0,0 +1,345 @@
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { House, Timer, ChevronLeft, ChevronRight, LockIcon, Tag, Tags, Search } from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Input } from "@/components/ui/input";
+import {
+    Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useClientCourses } from "@/contexts/ClientCoursesContext";
+import { cn } from "@/lib/utils";
+import { Fragment } from "react";
+import { PageMeta } from "@/contexts/MetadataContext";
+import api from "@/utils/api.util";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+import { Building2 } from "lucide-react";
+import { GitBranch } from "lucide-react";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function formatDuration(seconds = 0) {
+    if (!seconds) return null;
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    if (h && m) return `${h}h ${m}m`;
+    if (h) return `${h}h`;
+    return `${m}m`;
+}
+
+const ITEMS_PER_PAGE = 10;
+
+// ─── Course Card ──────────────────────────────────────────────────────────────
+
+const CourseCard = ({ course, tierMap, onViewDetails }) => {
+    const slug = course.subscription ?? "free";
+    const locked = course.is_locked;
+    const duration = formatDuration(course.duration_seconds);
+    const { rank, label, cls } = resolveTierBadge(slug, tierMap);
+
+    return (
+        <div
+            className={cn(
+                "bg-card rounded-2xl border p-4 flex flex-col gap-2.5 transition-all cursor-pointer group",
+                "hover:shadow-sm",
+                locked
+                    ? "opacity-80 hover:opacity-100 hover:border-muted-foreground/40"
+                    : "hover:bg-muted/60 dark:hover:border-blue-500"
+            )}
+            onClick={() => onViewDetails(course)}
+        >
+            <div className="flex flex-wrap gap-1.5">
+                <Badge className={cls}>
+                    {locked ? <LockIcon className="size-3" /> : <Tag className="size-3" />}
+                    {label}
+                </Badge>
+                {course.level && !locked && (
+                    <Badge variant="outline"><GitBranch />{course.level.charAt(0).toUpperCase() + course.level.slice(1)}</Badge>
+                )}
+                {(course.categories ?? []).map((cat) => (
+                    <Badge key={cat.id} variant="outline"><Tags /> {cat.name}</Badge>
+                ))}
+                {locked && (
+                    <Badge variant="secondary">
+                        <LockIcon className="size-3" /> Locked
+                    </Badge>
+                )}
+            </div>
+
+            <div className="flex flex-col gap-1">
+                <h1 className="text-lg font-medium leading-snug line-clamp-3 transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-400">
+                    {course.title}
+                </h1>
+                {course.description && (
+                    <p className="text-sm leading-relaxed line-clamp-2 group-hover:text-blue-700 dark:group-hover:text-blue-400">
+                        {course.description}
+                    </p>
+                )}
+            </div>
+
+            <div className="flex items-center justify-between pt-2 mt-auto border-t">
+                <div className={`flex items-center gap-1 text-sm [&_svg]:size-4 ${locked ? "text-muted-foreground" : "text-card-foreground group-hover:text-blue-700 dark:group-hover:text-blue-400"}`}>
+                    <Timer />
+                    {duration ?? "—"}
+                </div>
+                {locked && (
+                    <span className="text-xs text-muted-foreground">Upgrade to unlock</span>
+                )}
+            </div>
+        </div>
+    );
+};
+
+// ─── Skeleton Card ────────────────────────────────────────────────────────────
+
+const CourseCardSkeleton = () => (
+    <div className="bg-card rounded-2xl border p-4 flex flex-col gap-2.5">
+        <div className="flex gap-1.5">
+            <Skeleton className="h-5 w-16 rounded-full" />
+            <Skeleton className="h-5 w-20 rounded-full" />
+        </div>
+        <Skeleton className="h-6 w-3/4" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-2/3" />
+        <div className="pt-2 mt-auto border-t">
+            <Skeleton className="h-4 w-16" />
+        </div>
+    </div>
+);
+
+// ─── Pagination ───────────────────────────────────────────────────────────────
+
+const Pagination = ({ currentPage, totalPages, totalItems, itemsPerPage, onPageChange }) => {
+    const start = (currentPage - 1) * itemsPerPage + 1;
+    const end = Math.min(currentPage * itemsPerPage, totalItems);
+
+    const getPages = () => {
+        const pages = [];
+        if (totalPages <= 5) {
+            for (let i = 1; i <= totalPages; i++) pages.push(i);
+        } else {
+            pages.push(1);
+            if (currentPage > 3) pages.push("...");
+            for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) pages.push(i);
+            if (currentPage < totalPages - 2) pages.push("...");
+            pages.push(totalPages);
+        }
+        return pages;
+    };
+
+    return (
+        <div className="flex items-center justify-between w-full pt-4 border-t">
+            <div className="text-sm text-muted-foreground">
+                Showing <span className="font-medium text-foreground">{start}–{end}</span> of{" "}
+                <span className="font-medium text-foreground">{totalItems}</span> courses
+            </div>
+            <div className="flex items-center gap-1">
+                <Button onClick={() => onPageChange(currentPage - 1)} disabled={currentPage === 1} variant="ghost" size="sm">
+                    <ChevronLeft />
+                </Button>
+                {getPages().map((page, i) =>
+                    page === "..." ? (
+                        <span key={`ellipsis-${i}`} className="w-7 h-7 flex items-center justify-center text-xs text-muted-foreground">···</span>
+                    ) : (
+                        <Button key={page} size="sm" variant={currentPage === page ? "default" : "outline"} onClick={() => onPageChange(page)}>
+                            {page}
+                        </Button>
+                    )
+                )}
+                <Button onClick={() => onPageChange(currentPage + 1)} disabled={currentPage === totalPages} variant="ghost" size="sm">
+                    <ChevronRight />
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+// ─── Main Page ────────────────────────────────────────────────────────────────
+
+const CoursesList = () => {
+    const navigate = useNavigate();
+    const { courses, coursesLoading, getCourses } = useClientCourses();
+
+    const [tierCategories, setTierCategories] = useState([]);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [searchInput, setSearchInput] = useState("");
+    const [search, setSearch] = useState("");
+    const [subFilter, setSubFilter] = useState("All");
+    const [categoryFilter, setCategoryFilter] = useState("All");
+
+    const [allCategories, setAllCategories] = useState([]);
+
+    useEffect(() => {
+        getCourses();
+        api.get("/client/tiers/categories")
+            .then(({ data }) => setTierCategories(data.data ?? []))
+            .catch(() => { });
+        api.get("/client/courses/categories")
+            .then(({ data }) => setAllCategories(data.data ?? []))
+            .catch(() => { });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // slug → category info map
+    const tierMap = useMemo(() => {
+        const m = {};
+        tierCategories.forEach((c) => { m[c.slug] = c; });
+        return m;
+    }, [tierCategories]);
+
+    const filtered = useMemo(() =>
+        courses
+            .filter((c) => {
+                const matchSearch = c.title.toLowerCase().includes(search.toLowerCase()) ||
+                    (c.description ?? "").toLowerCase().includes(search.toLowerCase());
+                const matchSub = subFilter === "All" || c.subscription === subFilter;
+                const matchCategory = categoryFilter === "All" || (c.categories ?? []).some((cat) => String(cat.id) === categoryFilter);
+                return matchSearch && matchSub && matchCategory;
+            })
+            .sort((a, b) => (a.order_index ?? 0) - (b.order_index ?? 0)),
+        [courses, search, subFilter, categoryFilter]
+    );
+
+    const totalPages = Math.max(1, Math.ceil(filtered.length / ITEMS_PER_PAGE));
+    const paginated = filtered.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
+
+    const runSearch = () => { setSearch(searchInput); setCurrentPage(1); };
+
+    const handleViewDetails = (course) => navigate(`/course/${course.course_id}`);
+
+    const items = [
+        { label: "Home", icon: <House className="size-4" />, to: `/dashboard` },
+        { label: "Courses" },
+    ];
+
+    return (
+        <div>
+            <PageMeta title="Courses - STARR" description="Browse your available training courses." />
+            <div className="py-24 bg-accent/70 min-h-screen">
+                <div className="flex flex-col gap-4 justify-between lg:container lg:mx-auto pt-2">
+                    <AppBreadcrumb items={items} />
+
+                    {/* Search & Filters */}
+                    <div className="fixed top-[67px] left-0 right-0 z-10 bg-card border-b lg:static lg:bg-transparent lg:border-none py-3 xs:px-4 md:px-6 lg:px-0">
+                        <div className="flex items-center xs:flex-col lg:flex-row gap-4">
+                            <div className="flex items-center gap-2 w-full lg:max-w-64">
+                                <Input
+                                    placeholder="Search courses..."
+                                    className="w-full bg-card text-sm"
+                                    value={searchInput}
+                                    onChange={(e) => setSearchInput(e.target.value)}
+                                    onKeyDown={(e) => { if (e.key === "Enter") runSearch(); }}
+                                />
+                                <Button size="icon" variant="outline" className="shrink-0 bg-card" onClick={runSearch} aria-label="Search">
+                                    <Search />
+                                </Button>
+                            </div>
+                            <div className="flex gap-4 items-start w-full">
+
+
+                                <Select value={subFilter} onValueChange={(v) => { setSubFilter(v); setCurrentPage(1); }}>
+                                    <SelectTrigger className="w-full lg:w-48 bg-card">
+                                        <SelectValue placeholder="Subscription" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="All">All</SelectItem>
+                                        {tierCategories.map((cat) => (
+                                            <SelectItem key={cat.slug} value={cat.slug}>
+                                                {cat.name}
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                                <Select value="courses" onValueChange={(v) => {
+                                    if (v === "units") navigate("/units");
+                                    if (v === "lessons") navigate("/lessons");
+                                }}>
+                                    <SelectTrigger className="w-full lg:w-48 bg-card">
+                                        <SelectValue placeholder="Browse" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="courses">Courses</SelectItem>
+                                        <SelectItem value="units">Units</SelectItem>
+                                        <SelectItem value="lessons">Lessons</SelectItem>
+                                    </SelectContent>
+                                </Select>
+
+                                {allCategories.length > 0 && (
+                                    <Select value={categoryFilter} onValueChange={(v) => { setCategoryFilter(v); setCurrentPage(1); }}>
+                                        <SelectTrigger className="w-full lg:w-48 bg-card">
+                                            <SelectValue placeholder="Category" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="All">All Categories</SelectItem>
+                                            {allCategories.map((cat) => (
+                                                <SelectItem key={cat.id} value={String(cat.id)}>
+                                                    {cat.name}
+                                                </SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+
+                    {categoryFilter !== "All" && (
+                        <div className="flex items-center flex-wrap gap-2">
+                            <span className="text-sm text-muted-foreground">Tags:</span>
+                            {allCategories
+                                .filter((cat) => String(cat.id) === categoryFilter)
+                                .map((cat) => (
+                                    <Badge
+                                        key={cat.id}
+                                        variant="default"
+                                        className="cursor-pointer"
+                                        onClick={() => { setCategoryFilter("All"); setCurrentPage(1); }}
+                                    >
+                                        <Tags className="size-3" />
+                                        {cat.name}
+                                    </Badge>
+                                ))}
+                        </div>
+                    )}
+
+                    {/* Course Grid */}
+                    {coursesLoading ? (
+                        <div className="xs:pt-12 lg:pt-0 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                            {Array.from({ length: 8 }).map((_, i) => <CourseCardSkeleton key={i} />)}
+                        </div>
+                    ) : paginated.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center py-20">
+                            <Building2 className="size-40 text-primary" />
+                            <p className="text-md">No courses found</p>
+                        </div>
+                    ) : (
+                        <div className="xs:pt-12 lg:pt-0 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mb-4 xs:px-4 lg:px-0">
+                            {paginated.map((course) => (
+                                <CourseCard
+                                    key={course.course_id}
+                                    course={course}
+                                    tierMap={tierMap}
+                                    onViewDetails={handleViewDetails}
+                                />
+                            ))}
+                        </div>
+                    )}
+
+                    {!coursesLoading && filtered.length > ITEMS_PER_PAGE && (
+                        <Pagination
+                            currentPage={currentPage}
+                            totalPages={totalPages}
+                            totalItems={filtered.length}
+                            itemsPerPage={ITEMS_PER_PAGE}
+                            onPageChange={setCurrentPage}
+                        />
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CoursesList;
diff --git a/apps/web/src/modules/client/pages/Dashboard.jsx b/apps/web/src/modules/client/pages/Dashboard.jsx
new file mode 100644
index 0000000..eddd2a2
--- /dev/null
+++ b/apps/web/src/modules/client/pages/Dashboard.jsx
@@ -0,0 +1,402 @@
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+    Users, Timer,
+    Tag, LockIcon,
+} from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+    Table, TableHeader, TableBody,
+    TableHead, TableRow, TableCell,
+} from "@/components/ui/table";
+import { useNavigate, useLocation } from "react-router-dom";
+import { toast } from "sonner";
+import { useClientCourses } from "@/contexts/ClientCoursesContext";
+import { useLibrary } from "@/contexts/ClientLibraryContext";
+import { useClientTiers } from "@/contexts/ClientTiersProvider";
+import { UnitCard, UnitCardSkeleton } from "../components/UnitCard";
+import LessonUpsellModal from "../components/LessonUpsellModal";
+import { LessonCard, LessonCardSkeleton } from "../components/LessonCard";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+import { cn } from "@/lib/utils";
+import { useGroup } from "@/contexts/ClientGroupContext";
+import { useClientAdvertisements } from "@/contexts/ClientAdvertisementContext";
+import { Hero, HeroSkeleton } from "@/components/generic/Blocks/Client/Advertisements/Hero";
+
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function formatDuration(seconds = 0) {
+    if (!seconds) return null;
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    if (h && m) return `${h}h ${m}m`;
+    if (h) return `${h}h`;
+    return `${m}m`;
+}
+
+// ── Course Card ──────────────────────────────────────────────────────────────
+
+const CourseCard = ({ course, onViewDetails }) => {
+    const { tierMap } = useClientTiers();
+    const slug     = course.subscription ?? "free";
+    const locked   = course.is_locked;
+    const duration = formatDuration(course.duration_seconds);
+    const { rank, label, cls } = resolveTierBadge(slug, tierMap);
+
+    return (
+        <div
+            className={cn(
+                "bg-card rounded-2xl border p-4 flex flex-col gap-2.5 transition-all cursor-pointer group",
+                "hover:shadow-sm",
+                locked
+                    ? "opacity-80 hover:opacity-100 hover:border-muted-foreground/40"
+                    : "hover:bg-muted/60 dark:hover:border-blue-500"
+            )}
+            onClick={() => onViewDetails(course)}
+        >
+            <div className="flex flex-wrap gap-1.5">
+                <Badge className={cls}>
+                    {rank > 0 || locked ? <LockIcon className="size-3" /> : <Tag className="size-3" />}
+                    {label}
+                </Badge>
+                {course.level && (
+                    <Badge variant="outline">
+                        {course.level.charAt(0).toUpperCase() + course.level.slice(1)}
+                    </Badge>
+                )}
+                {locked && (
+                    <Badge variant="secondary" className="ml-auto">
+                        <LockIcon className="size-3" /> Locked
+                    </Badge>
+                )}
+            </div>
+
+            <div className="flex flex-col gap-1">
+                <h1 className="text-lg font-medium leading-snug line-clamp-3 transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-400">
+                    {course.title}
+                </h1>
+                {course.description && (
+                    <p className="text-sm leading-relaxed line-clamp-2 text-muted-foreground">
+                        {course.description}
+                    </p>
+                )}
+            </div>
+
+            <div className="flex items-center justify-between pt-2 mt-auto border-t">
+                <div className={`flex items-center gap-1 text-sm [&_svg]:size-4 ${locked ? "text-muted-foreground" : "text-card-foreground group-hover:text-blue-700 dark:group-hover:text-blue-400"}`}>
+                    <Timer />
+                    {duration ?? "—"}
+                </div>
+                {locked && (
+                    <span className="text-xs text-muted-foreground">Upgrade to unlock</span>
+                )}
+            </div>
+        </div>
+    );
+};
+
+// ─── Course Card Skeleton ─────────────────────────────────────────────────────
+
+const CourseCardSkeleton = () => (
+    <div className="bg-card rounded-2xl border p-4 flex flex-col gap-2.5">
+        <div className="flex gap-1.5">
+            <Skeleton className="h-5 w-16 rounded-full" />
+            <Skeleton className="h-5 w-20 rounded-full" />
+        </div>
+        <Skeleton className="h-6 w-3/4" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-2/3" />
+        <div className="pt-2 mt-auto border-t">
+            <Skeleton className="h-4 w-16" />
+        </div>
+    </div>
+);
+
+// ─── Groups Table ─────────────────────────────────────────────────────────────
+
+const GroupsTable = ({ groups, onView }) => (
+    <div className="bg-card border rounded-xl overflow-hidden">
+        <Table>
+            <TableHeader>
+                <TableRow className="hover:bg-transparent">
+                    <TableHead className="w-10 text-center px-4">#</TableHead>
+                    <TableHead className="px-4">Group Name</TableHead>
+                    <TableHead className="px-4">Code</TableHead>
+                    <TableHead className="px-4">Task Lists</TableHead>
+                    <TableHead className="px-4" />
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                {groups.map((g, i) => {
+                    const taskListCount = Number(g.task_list_count ?? g.taskLists?.length ?? 0);
+                    return (
+                        <TableRow key={g.group_id}>
+                            <TableCell className="text-center px-4 text-muted-foreground tabular-nums">
+                                {i + 1}
+                            </TableCell>
+                            <TableCell className="px-4 font-medium">{g.name}</TableCell>
+                            <TableCell className="px-4">
+                                <Badge variant="outline" className="font-mono text-xs">{g.group_code}</Badge>
+                            </TableCell>
+                            <TableCell className="px-4">
+                                {taskListCount}
+                            </TableCell>
+                            <TableCell className="px-4 text-right">
+                                <Button size="sm" variant="outline" onClick={() => onView(g)}>
+                                    View
+                                </Button>
+                            </TableCell>
+                        </TableRow>
+                    );
+                })}
+            </TableBody>
+        </Table>
+    </div>
+);
+
+const GroupsTableSkeleton = () => (
+    <div className="bg-card border rounded-xl overflow-hidden">
+        <Table>
+            <TableHeader>
+                <TableRow className="hover:bg-transparent">
+                    <TableHead className="w-10 text-center px-4">#</TableHead>
+                    <TableHead className="px-4">Group Name</TableHead>
+                    <TableHead className="px-4">Code</TableHead>
+                    <TableHead className="px-4 w-full text-center whitespace-nowrap">Task Lists</TableHead>
+                    <TableHead className="px-4" />
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                {[1, 2].map((i) => (
+                    <TableRow key={i}>
+                        <TableCell className="text-center px-4"><Skeleton className="h-4 w-4 mx-auto" /></TableCell>
+                        <TableCell className="px-4"><Skeleton className="h-4 w-32" /></TableCell>
+                        <TableCell className="px-4"><Skeleton className="h-5 w-16 rounded-full" /></TableCell>
+                        <TableCell className="px-4"><Skeleton className="h-4 w-8 mx-auto" /></TableCell>
+                        <TableCell className="px-4 text-right"><Skeleton className="h-8 w-14 ml-auto" /></TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    </div>
+);
+
+// ─── Client Dashboard ─────────────────────────────────────────────────────────
+
+const Client = () => {
+    const navigate = useNavigate();
+    const { state: navState } = useLocation();
+    const { courses, coursesLoading, getCourses } = useClientCourses();
+    const { units, unitsLoading, getUnits, lessons, lessonsLoading, getLessons } = useLibrary();
+    const { tierMap } = useClientTiers();
+    const { groups, fetchGroups, loading: groupLoading } = useGroup();
+    const {
+        adLists, listLoading, getActiveAdvertisementList,
+        handleAdCtaClick,
+    } = useClientAdvertisements();
+
+    const [lessonModalOpen, setLessonModalOpen] = useState(false);
+    const [selectedLesson, setSelectedLesson] = useState(null);
+
+    const heroAds = adLists["dashboard.hero"] ?? [];
+
+    // Show welcome toast on first registration
+    useEffect(() => {
+        if (!navState?.justRegistered) return;
+        toast('Welcome to Philproperties!', {
+            description: 'You earned the Early Access badge. Check your notifications for details.',
+            duration: 6000,
+        });
+        window.history.replaceState({}, '');
+    }, []);
+
+    // Show a one-time notice the first time a manually-registered account
+    // gets folded into a Google sign-in with the same email.
+    useEffect(() => {
+        if (!navState?.justLinkedGoogle) return;
+        toast('Your Google account is now affiliated with this account.', {
+            description: 'You can sign in with Google going forward.',
+            duration: 6000,
+        });
+        window.history.replaceState({}, '');
+    }, []);
+
+    useEffect(() => {
+        getCourses();
+        getUnits();
+        getLessons();
+    }, []);
+
+    useEffect(() => {
+        fetchGroups();
+    }, [])
+
+    // ── Resolve hero ad carousel once on mount ────────────────────────────────
+    useEffect(() => {
+        getActiveAdvertisementList("dashboard.hero");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // Show only first 3
+    const featuredCourses = courses.slice(0, 3);
+    const featuredUnits = units.slice(0, 3);
+    const featuredLessons = lessons.slice(0, 3);
+
+    const breadcrumbItems = [
+        { label: "My Groups", icon: <Users className="size-4" /> },
+    ];
+
+    // ── Card click — always go to the detail page; locked items show their
+    // upgrade prompt there, on the primary action button ──────────────────────
+    const handleViewDetails = (course) => navigate(`/course/${course.course_id}`);
+
+    const handleViewUnitDetails = (unit) => navigate(`/units/${unit.uuid}`);
+
+    const handleViewLessonDetails = (lesson) => {
+        if (lesson.is_locked) {
+            setSelectedLesson(lesson);
+            setLessonModalOpen(true);
+        } else {
+            navigate(`/lessons/${lesson.uuid}`);
+        }
+    };
+
+
+    return (
+        <div>
+            <div className="my-20">
+                <div className="flex flex-col gap-8 justify-between lg:container lg:mx-auto xs:pt-2 lg:pt-8 lg:px-16 xs:px-4 sm:px-6">
+
+                    {/* ── Hero Advertisement Carousel ── */}
+                    {listLoading["dashboard.hero"] ? (
+                        <HeroSkeleton />
+                    ) : (
+                        <Hero ads={heroAds} onCtaClick={handleAdCtaClick} />
+                    )}
+
+                    {/* ── My Groups ── */}
+                    <div className="flex flex-col gap-3">
+                        <div className="flex items-center justify-between">
+                            <AppBreadcrumb items={breadcrumbItems} />
+                            {!groupLoading && groups.length > 0 && (
+                                <span className="text-sm text-muted-foreground">
+                                    {groups.length} group{groups.length !== 1 ? 's' : ''}
+                                </span>
+                            )}
+                        </div>
+                        {groupLoading ? (
+                            <GroupsTableSkeleton />
+                        ) : groups.length === 0 ? (
+                            <p className="text-sm text-muted-foreground">You are not assigned to any group.</p>
+                        ) : (
+                            <GroupsTable
+                                groups={groups}
+                                onView={(g) => navigate(`/group/${g.group_id}`)}
+                            />
+                        )}
+                    </div>
+
+                    {/* ── Featured Courses (first 3) ── */}
+                    <div className="flex flex-col gap-4">
+                        <div className="w-full flex items-center justify-between">
+                            <h1 className="text-2xl font-medium">Courses</h1>
+                            <Button onClick={() => navigate(`/course`)}>View All</Button>
+                        </div>
+
+                        {coursesLoading ? (
+                            <div className="grid lg:grid-cols-3 gap-4">
+                                {Array.from({ length: 3 }).map((_, i) => (
+                                    <CourseCardSkeleton key={i} />
+                                ))}
+                            </div>
+                        ) : featuredCourses.length === 0 ? (
+                            <p className="text-sm text-muted-foreground">No courses available yet.</p>
+                        ) : (
+                            <div className="grid lg:grid-cols-3 gap-4">
+                                {featuredCourses.map((course) => (
+                                    <CourseCard
+                                        key={course.course_id}
+                                        course={course}
+                                        onViewDetails={handleViewDetails}
+                                    />
+                                ))}
+                            </div>
+                        )}
+                    </div>
+
+                    {/* ── Featured Units (first 3) ── */}
+                    <div className="flex flex-col gap-4">
+                        <div className="w-full flex items-center justify-between">
+                            <h1 className="text-2xl font-medium">Units</h1>
+                            <Button onClick={() => navigate(`/units`)}>View All</Button>
+                        </div>
+
+                        {unitsLoading ? (
+                            <div className="grid lg:grid-cols-3 gap-4">
+                                {Array.from({ length: 3 }).map((_, i) => (
+                                    <UnitCardSkeleton key={i} />
+                                ))}
+                            </div>
+                        ) : featuredUnits.length === 0 ? (
+                            <p className="text-sm text-muted-foreground">No units available yet.</p>
+                        ) : (
+                            <div className="grid lg:grid-cols-3 gap-4">
+                                {featuredUnits.map((unit) => (
+                                    <UnitCard
+                                        key={unit.unit_id}
+                                        unit={unit}
+                                        tierMap={tierMap}
+                                        onViewDetails={handleViewUnitDetails}
+                                    />
+                                ))}
+                            </div>
+                        )}
+                    </div>
+
+                    {/* ── Featured Lessons (first 3) ── */}
+                    <div className="flex flex-col gap-4">
+                        <div className="w-full flex items-center justify-between">
+                            <h1 className="text-2xl font-medium">Lessons</h1>
+                            <Button onClick={() => navigate(`/lessons`)}>View All</Button>
+                        </div>
+
+                        {lessonsLoading ? (
+                            <div className="grid lg:grid-cols-3 gap-4">
+                                {Array.from({ length: 3 }).map((_, i) => (
+                                    <LessonCardSkeleton key={i} />
+                                ))}
+                            </div>
+                        ) : featuredLessons.length === 0 ? (
+                            <p className="text-sm text-muted-foreground">No lessons available yet.</p>
+                        ) : (
+                            <div className="grid lg:grid-cols-3 gap-4">
+                                {featuredLessons.map((lesson) => (
+                                    <LessonCard
+                                        key={lesson.lesson_id}
+                                        lesson={lesson}
+                                        tierMap={tierMap}
+                                        onViewDetails={handleViewLessonDetails}
+                                    />
+                                ))}
+                            </div>
+                        )}
+                    </div>
+
+                </div>
+            </div>
+
+            {/* ── Upsell Modal — only for locked lessons ── */}
+            <LessonUpsellModal
+                open={lessonModalOpen}
+                onOpenChange={setLessonModalOpen}
+                lesson={selectedLesson}
+                tierMap={tierMap}
+            />
+        </div>
+    );
+};
+
+export default Client;
diff --git a/apps/web/src/modules/client/pages/EditProfile.jsx b/apps/web/src/modules/client/pages/EditProfile.jsx
new file mode 100644
index 0000000..5216ffa
--- /dev/null
+++ b/apps/web/src/modules/client/pages/EditProfile.jsx
@@ -0,0 +1,422 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useProfile } from "@/contexts/ProfileProvider";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Camera, Loader2, Plus, Trash2, ArrowLeft } from "lucide-react";
+import AvatarUploadDialog from "@/components/generic/AvatarUploadDialog";
+import { resolveAssetSrc } from "@/utils/media.util";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function getInitials(name = "") {
+    return name
+        .trim()
+        .split(/\s+/)
+        .map((n) => n[0]?.toUpperCase() ?? "")
+        .slice(0, 2)
+        .join("");
+}
+
+function emptyPhone() {
+    return { number: "", country_code: "+63", phone_type: "mobile", full_number: "" };
+}
+
+function emptyAddress() {
+    return {
+        address_type: "home",
+        street: "",
+        city: "",
+        state: "",
+        zip: "",
+        country: "Philippines",
+        full_address: "",
+    };
+}
+
+const PHONE_TYPES = ["mobile", "home", "work", "other"];
+const ADDRESS_TYPES = ["home", "work", "billing", "other"];
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+const EditProfile = () => {
+    const navigate = useNavigate();
+    const { profile, profileLoading, updateProfile, getProfile, uploadAvatar, deleteAvatar, avatarLoading } = useProfile();
+    const [avatarDialogOpen, setAvatarDialogOpen] = useState(false);
+
+    // ── Form state ─────────────────────────────────────────────────────────────
+    const [givenName, setGivenName] = useState("");
+    const [middleName, setMiddleName] = useState("");
+    const [lastName, setLastName] = useState("");
+    const [extensionName, setExtensionName] = useState("");
+    const [occupation, setOccupation] = useState("");
+    const [phones, setPhones] = useState([emptyPhone()]);
+    const [addresses, setAddresses] = useState([emptyAddress()]);
+    const [avatarPreview, setAvatarPreview] = useState("");
+
+    useEffect(() => { getProfile(); }, []);         // fetch on mount
+
+    useEffect(() => {                               // seed fields when profile loads
+        if (!profile) return;
+        const pi = profile.personal_info ?? {};
+        setGivenName(pi.name?.given_name ?? "");
+        setMiddleName(pi.name?.middle_name ?? "");
+        setLastName(pi.name?.last_name ?? "");
+        setExtensionName(pi.name?.extension_name ?? "");
+        setOccupation(pi.occupation ?? "");
+        setPhones(pi.phone_number?.length ? pi.phone_number : [emptyPhone()]);
+        setAddresses(pi.addresses?.length ? pi.addresses : [emptyAddress()]);
+        setAvatarPreview(resolveAssetSrc(pi.avatar) ?? "");
+    }, [profile]);
+
+    // ── Phone helpers ──────────────────────────────────────────────────────────
+    const updatePhone = (i, field, value) => {
+        setPhones((prev) => {
+            const next = [...prev];
+            next[i] = { ...next[i], [field]: value };
+            next[i].full_number = `${next[i].country_code}${next[i].number}`;
+            return next;
+        });
+    };
+
+    const addPhone = () => setPhones((p) => [...p, emptyPhone()]);
+    const removePhone = (i) => setPhones((p) => p.filter((_, idx) => idx !== i));
+
+    // ── Address helpers ────────────────────────────────────────────────────────
+    const updateAddress = (i, field, value) => {
+        setAddresses((prev) => {
+            const next = [...prev];
+            next[i] = { ...next[i], [field]: value };
+            const a = next[i];
+            next[i].full_address = [a.street, a.city, a.state, a.zip, a.country]
+                .filter(Boolean)
+                .join(", ");
+            return next;
+        });
+    };
+
+    const addAddress = () => setAddresses((a) => [...a, emptyAddress()]);
+    const removeAddress = (i) => setAddresses((a) => a.filter((_, idx) => idx !== i));
+
+    // ── Submit ─────────────────────────────────────────────────────────────────
+    const handleSubmit = async () => {
+        const full_name = [givenName, middleName, lastName, extensionName]
+            .filter(Boolean)
+            .join(" ");
+
+        const personal_info = {
+            name: {
+                given_name: givenName,
+                middle_name: middleName,
+                last_name: lastName,
+                extension_name: extensionName,
+                full_name,
+            },
+            occupation,
+            phone_number: phones.filter((p) => p.number.trim() !== ""),
+            addresses: addresses.filter((a) => a.street.trim() !== "" || a.city.trim() !== ""),
+        };
+
+        const result = await updateProfile(personal_info);
+        if (result?.success) navigate("/profile");
+    };
+
+    const fullName = [givenName, lastName].filter(Boolean).join(" ");
+    const initials = getInitials(fullName);
+
+
+    return (
+        <div className="mt-17 bg-muted min-h-screen">
+            <div className="p-6 lg:container lg:max-w-3xl lg:mx-auto space-y-4">
+
+                {/* Header */}
+                <div className="flex items-center gap-3">
+                    <Button variant="ghost" size="icon" onClick={() => navigate("/profile")}>
+                        <ArrowLeft className="size-4" />
+                    </Button>
+                    <div>
+                        <h1 className="text-base font-semibold">Edit Profile</h1>
+                        <p className="text-xs text-muted-foreground">Update your personal information</p>
+                    </div>
+                </div>
+
+                {/* Avatar */}
+                <Card>
+                    <CardContent className="py-4 px-6">
+                        <div className="flex items-center gap-4">
+                            <div className="relative">
+                                <Avatar className="h-16 w-16">
+                                    <AvatarImage src={avatarPreview} />
+                                    <AvatarFallback className="text-base">{initials || "PH"}</AvatarFallback>
+                                </Avatar>
+                                <button
+                                    type="button"
+                                    className="absolute bottom-0 right-0 h-5 w-5 rounded-full bg-foreground flex items-center justify-center hover:opacity-80 transition-opacity"
+                                    onClick={() => setAvatarDialogOpen(true)}
+                                >
+                                    <Camera className="h-3 w-3 text-background" />
+                                </button>
+                            </div>
+                            <div>
+                                <p className="text-sm font-medium">{fullName || "—"}</p>
+                                <p className="text-xs text-muted-foreground">{profile?.email ?? ""}</p>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                {/* Name */}
+                <Card>
+                    <CardHeader className="pb-2">
+                        <CardTitle className="text-sm font-medium">Name</CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-3">
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                            <div className="space-y-1.5">
+                                <Label className="text-xs">Given Name</Label>
+                                <Input
+                                    value={givenName}
+                                    onChange={(e) => setGivenName(e.target.value)}
+                                    placeholder="Juan"
+                                />
+                            </div>
+                            <div className="space-y-1.5">
+                                <Label className="text-xs">Middle Name</Label>
+                                <Input
+                                    value={middleName}
+                                    onChange={(e) => setMiddleName(e.target.value)}
+                                    placeholder="Santos"
+                                />
+                            </div>
+                            <div className="space-y-1.5">
+                                <Label className="text-xs">Last Name</Label>
+                                <Input
+                                    value={lastName}
+                                    onChange={(e) => setLastName(e.target.value)}
+                                    placeholder="Dela Cruz"
+                                />
+                            </div>
+                            <div className="space-y-1.5">
+                                <Label className="text-xs">Extension Name</Label>
+                                <Input
+                                    value={extensionName}
+                                    onChange={(e) => setExtensionName(e.target.value)}
+                                    placeholder="Jr., Sr., III"
+                                />
+                            </div>
+                        </div>
+                        <div className="space-y-1.5">
+                            <Label className="text-xs">Occupation</Label>
+                            <Input
+                                value={occupation}
+                                onChange={(e) => setOccupation(e.target.value)}
+                                placeholder="e.g. Real Estate Agent"
+                            />
+                        </div>
+                    </CardContent>
+                </Card>
+
+                {/* Phone numbers */}
+                <Card>
+                    <CardHeader className="pb-2">
+                        <div className="flex items-center justify-between">
+                            <CardTitle className="text-sm font-medium">Phone Numbers</CardTitle>
+                            <Button variant="outline" size="sm" onClick={addPhone}>
+                                <Plus className="size-3.5" />
+                                Add
+                            </Button>
+                        </div>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                        {phones.map((phone, i) => (
+                            <div key={i}>
+                                {i > 0 && <Separator className="mb-4" />}
+                                <div className="space-y-3">
+                                    <div className="flex items-center justify-between">
+                                        <p className="text-xs text-muted-foreground">Phone {i + 1}</p>
+                                        {phones.length > 1 && (
+                                            <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                className="h-6 w-6 text-destructive hover:text-destructive"
+                                                onClick={() => removePhone(i)}
+                                            >
+                                                <Trash2 className="size-3.5" />
+                                            </Button>
+                                        )}
+                                    </div>
+                                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                                        <div className="space-y-1.5">
+                                            <Label className="text-xs">Country Code</Label>
+                                            <Input
+                                                value={phone.country_code}
+                                                onChange={(e) => updatePhone(i, "country_code", e.target.value)}
+                                                placeholder="+63"
+                                            />
+                                        </div>
+                                        <div className="space-y-1.5">
+                                            <Label className="text-xs">Number</Label>
+                                            <Input
+                                                value={phone.number}
+                                                onChange={(e) => updatePhone(i, "number", e.target.value)}
+                                                placeholder="9XX XXX XXXX"
+                                            />
+                                        </div>
+                                        <div className="space-y-1.5">
+                                            <Label className="text-xs">Type</Label>
+                                            <Select
+                                                value={phone.phone_type}
+                                                onValueChange={(v) => updatePhone(i, "phone_type", v)}
+                                            >
+                                                <SelectTrigger>
+                                                    <SelectValue />
+                                                </SelectTrigger>
+                                                <SelectContent>
+                                                    {PHONE_TYPES.map((t) => (
+                                                        <SelectItem key={t} value={t}>
+                                                            {t.charAt(0).toUpperCase() + t.slice(1)}
+                                                        </SelectItem>
+                                                    ))}
+                                                </SelectContent>
+                                            </Select>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </CardContent>
+                </Card>
+
+                {/* Addresses */}
+                <Card>
+                    <CardHeader className="pb-2">
+                        <div className="flex items-center justify-between">
+                            <CardTitle className="text-sm font-medium">Addresses</CardTitle>
+                            <Button variant="outline" size="sm" onClick={addAddress}>
+                                <Plus className="size-3.5" />
+                                Add
+                            </Button>
+                        </div>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                        {addresses.map((addr, i) => (
+                            <div key={i}>
+                                {i > 0 && <Separator className="mb-4" />}
+                                <div className="space-y-3">
+                                    <div className="flex items-center justify-between">
+                                        <p className="text-xs text-muted-foreground">Address {i + 1}</p>
+                                        {addresses.length > 1 && (
+                                            <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                className="h-6 w-6 text-destructive hover:text-destructive"
+                                                onClick={() => removeAddress(i)}
+                                            >
+                                                <Trash2 className="size-3.5" />
+                                            </Button>
+                                        )}
+                                    </div>
+                                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                                        <div className="space-y-1.5 sm:col-span-2">
+                                            <Label className="text-xs">Address Type</Label>
+                                            <Select
+                                                value={addr.address_type}
+                                                onValueChange={(v) => updateAddress(i, "address_type", v)}
+                                            >
+                                                <SelectTrigger>
+                                                    <SelectValue />
+                                                </SelectTrigger>
+                                                <SelectContent>
+                                                    {ADDRESS_TYPES.map((t) => (
+                                                        <SelectItem key={t} value={t}>
+                                                            {t.charAt(0).toUpperCase() + t.slice(1)}
+                                                        </SelectItem>
+                                                    ))}
+                                                </SelectContent>
+                                            </Select>
+                                        </div>
+                                        <div className="space-y-1.5 sm:col-span-2">
+                                            <Label className="text-xs">Street</Label>
+                                            <Input
+                                                value={addr.street}
+                                                onChange={(e) => updateAddress(i, "street", e.target.value)}
+                                                placeholder="123 Rizal Street, Barangay Poblacion"
+                                            />
+                                        </div>
+                                        <div className="space-y-1.5">
+                                            <Label className="text-xs">City / Municipality</Label>
+                                            <Input
+                                                value={addr.city}
+                                                onChange={(e) => updateAddress(i, "city", e.target.value)}
+                                                placeholder="Makati"
+                                            />
+                                        </div>
+                                        <div className="space-y-1.5">
+                                            <Label className="text-xs">State / Region</Label>
+                                            <Input
+                                                value={addr.state}
+                                                onChange={(e) => updateAddress(i, "state", e.target.value)}
+                                                placeholder="Metro Manila"
+                                            />
+                                        </div>
+                                        <div className="space-y-1.5">
+                                            <Label className="text-xs">ZIP Code</Label>
+                                            <Input
+                                                value={addr.zip}
+                                                onChange={(e) => updateAddress(i, "zip", e.target.value)}
+                                                placeholder="1200"
+                                            />
+                                        </div>
+                                        <div className="space-y-1.5">
+                                            <Label className="text-xs">Country</Label>
+                                            <Input
+                                                value={addr.country}
+                                                onChange={(e) => updateAddress(i, "country", e.target.value)}
+                                                placeholder="Philippines"
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </CardContent>
+                </Card>
+
+                {/* Actions */}
+                <div className="flex justify-end gap-2 pb-6">
+                    <Button variant="outline" onClick={() => navigate("/profile")}>
+                        Cancel
+                    </Button>
+                    <Button onClick={handleSubmit} disabled={profileLoading}>
+                        {profileLoading && <Loader2 className="size-4 animate-spin" />}
+                        Save changes
+                    </Button>
+                </div>
+
+            </div>
+
+            <AvatarUploadDialog
+                open={avatarDialogOpen}
+                onClose={() => setAvatarDialogOpen(false)}
+                currentAvatarUrl={avatarPreview}
+                initials={initials || "PH"}
+                onUpload={uploadAvatar}
+                onDelete={deleteAvatar}
+                loading={avatarLoading}
+            />
+        </div>
+    );
+};
+
+export default EditProfile;
\ No newline at end of file
diff --git a/apps/web/src/modules/client/pages/GroupList.jsx b/apps/web/src/modules/client/pages/GroupList.jsx
new file mode 100644
index 0000000..a01e3c5
--- /dev/null
+++ b/apps/web/src/modules/client/pages/GroupList.jsx
@@ -0,0 +1,158 @@
+/***********************************************************************************************************************************************************************
+ * File Name    : GroupList.jsx
+ * Type         : Page (Client)
+ * Description  : Lists all task lists assigned to the user's group.
+ *                Flat grid — no status tabs (those live in ViewTaskDetails.jsx
+ *                at the task level instead).
+ *                Route: /group/:groupId
+ ***********************************************************************************************************************************************************************/
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useGroup } from '@/contexts/ClientGroupContext';
+import { useTask } from '@/contexts/ClientTaskContext';
+import { PageMeta } from '@/contexts/MetadataContext';
+
+import AppBreadcrumb from '@/components/generic/Breadcrumb/AppBreadcrumb';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+    House, Calendar, ListChecks, LayoutList, ArrowRight,
+} from 'lucide-react';
+import { formatDate } from '@/utils/table.util';
+import { cn } from '@/lib/utils';
+
+// ─── Task-count badge ──────────────────────────────────────────────────────────
+const TaskCountBadge = ({ count = 0 }) => (
+    <span className="inline-flex items-center gap-1 text-xs font-medium bg-muted text-muted-foreground rounded-full px-2.5 py-1">
+        <ListChecks className="size-3.5" />
+        {count} task{count !== 1 ? 's' : ''}
+    </span>
+);
+
+// ─── Task list card ─────────────────────────────────────────────────────────────
+const TaskListCard = ({ taskList, navigate }) => {
+    const taskCount = taskList.tasks?.length ?? 0;
+
+    // earliest upcoming deadline among this task list's tasks
+    const nextDeadline = (taskList.tasks ?? [])
+        .map((t) => t.deadline)
+        .filter(Boolean)
+        .sort((a, b) => new Date(a) - new Date(b))[0];
+
+    return (
+        <div
+            onClick={() => navigate(`view/${taskList.task_list_id}`)}
+            className={cn(
+                'border bg-card rounded-lg flex flex-col cursor-pointer transition-colors',
+                'hover:border-blue-400 dark:hover:border-blue-500',
+            )}
+        >
+            <div className="p-4 flex flex-col gap-2.5 flex-1">
+                <h1 className="text-base font-medium leading-snug">
+                    {taskList.name}
+                </h1>
+                {taskList.description && (
+                    <p className="text-sm text-muted-foreground leading-relaxed line-clamp-2">
+                        {taskList.description}
+                    </p>
+                )}
+                <div className="flex items-center gap-1.5 text-xs mt-auto pt-1 [&_svg]:size-3.5">
+                    <Calendar />
+                    {nextDeadline ? `Next due ${formatDate(nextDeadline)}` : 'No due date'}
+                </div>
+            </div>
+            <div className="px-4 py-2.5 border-t flex items-center justify-between">
+                <TaskCountBadge count={taskCount} />
+                <ArrowRight className="size-4 text-muted-foreground/60" />
+            </div>
+        </div>
+    );
+};
+
+// ─── Skeleton grid ────────────────────────────────────────────────────────────
+const GridSkeleton = () => (
+    <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
+        {Array.from({ length: 3 }).map((_, i) => (
+            <div key={i} className="border bg-card rounded-lg overflow-hidden">
+                <div className="p-4 flex flex-col gap-2.5">
+                    <Skeleton className="h-5 w-32" />
+                    <Skeleton className="h-3.5 w-full" />
+                    <Skeleton className="h-3.5 w-2/3" />
+                    <Skeleton className="h-3.5 w-28 mt-1" />
+                </div>
+                <div className="px-4 py-2.5 border-t flex items-center justify-between">
+                    <Skeleton className="h-5 w-16 rounded-full" />
+                </div>
+            </div>
+        ))}
+    </div>
+);
+
+// ─── Empty state ──────────────────────────────────────────────────────────────
+const EmptyState = () => (
+    <div className="h-64 flex items-center flex-col justify-center w-full gap-4">
+        <LayoutList className="size-20 text-muted-foreground/40" />
+        <h1 className="max-w-lg text-sm text-muted-foreground text-center">
+            No task lists have been assigned to this group yet.
+        </h1>
+    </div>
+);
+
+// ─── Main page ────────────────────────────────────────────────────────────────
+export default function GroupList() {
+    const navigate = useNavigate();
+    const { groupId } = useParams();
+
+    const { group, fetchGroup } = useGroup();
+    const { taskLists, loading, fetchTaskLists } = useTask();
+
+    // ── Fetch group info + all task lists (no status filter) ─────────────────
+    useEffect(() => {
+        fetchGroup(groupId);
+        fetchTaskLists(groupId);
+    }, [groupId]);
+
+    const breadcrumbItems = [
+        { label: 'Home', icon: <House className="size-4" />, to: '/dashboard' },
+        { label: group?.name ?? '…' },
+    ];
+
+    return (
+        <div className="mt-17">
+            <PageMeta title={group ? `${group.name} - STARR` : undefined} description="View your group's task lists." />
+            <div className="lg:container lg:mx-auto flex flex-col gap-6 py-6 xs:px-6 lg:px-0">
+
+                {/* ── Header ────────────────────────────────────────────────── */}
+                <header className="flex flex-col gap-4">
+                    <AppBreadcrumb items={breadcrumbItems} />
+                    <div className="space-y-2">
+                        {group
+                            ? <h1 className="font-bold text-2xl max-w-xl">{group.name}</h1>
+                            : <Skeleton className="h-7 w-48" />
+                        }
+                        <p className="text-muted-foreground text-sm">
+                            View all task lists assigned to your group.
+                        </p>
+                    </div>
+                </header>
+
+                {/* ── Task list grid ────────────────────────────────────────── */}
+                {loading ? (
+                    <GridSkeleton />
+                ) : !taskLists.length ? (
+                    <EmptyState />
+                ) : (
+                    <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
+                        {taskLists.map((tl) => (
+                            <TaskListCard
+                                key={tl.task_list_id}
+                                taskList={tl}
+                                navigate={navigate}
+                            />
+                        ))}
+                    </div>
+                )}
+
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/client/pages/LessonDetails.jsx b/apps/web/src/modules/client/pages/LessonDetails.jsx
new file mode 100644
index 0000000..e76fc6a
--- /dev/null
+++ b/apps/web/src/modules/client/pages/LessonDetails.jsx
@@ -0,0 +1,316 @@
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { useParams, useNavigate, useLocation } from "react-router-dom";
+import {
+    House, CheckCheck, Check, Hourglass, Clock, Video, ListChecks, ArrowUpRight,
+} from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useLibrary } from "@/contexts/ClientLibraryContext";
+import { useClientTiers } from "@/contexts/ClientTiersProvider";
+import { PageMeta } from "@/contexts/MetadataContext";
+import LockedContentPanel from "@/modules/client/components/LockedContentPanel";
+import LessonBlock from "../components/LessonBlock.jsx";
+import MarkCompleteButton from "@/modules/client/components/MarkCompleteButton.jsx";
+import api from "@/utils/api.util";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function formatDuration(seconds = 0) {
+    if (!seconds) return null;
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    if (h > 0) return `${h}hr ${m}min`;
+    return `${m}min`;
+}
+
+// ─── Lesson Details ─────────────────────────────────────────────────────────
+
+const LessonDetails = () => {
+    const { uuid } = useParams();
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    // Task context: state-first, endpoint fallback — same pattern as UnitList.jsx.
+    // If navigated here from a task's requirement card, taskCtx is in location.state;
+    // if the user opened this lesson directly (e.g. from /lessons), fetch it instead,
+    // so the "Task mode" banner still shows up when this lesson is a task requirement.
+    const [taskCtx, setTaskCtx] = useState(null);
+    useEffect(() => {
+        const stateCtx = location.state?.taskCtx;
+        if (stateCtx) { setTaskCtx(stateCtx); return; }
+        api.get(`/client/courses/lesson/uuid/${uuid}/task-context`)
+            .then(({ data }) => { if (data?.data?.has_task) setTaskCtx(data.data); })
+            .catch(() => {}); // non-critical — silently swallow
+    }, [uuid]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const {
+        getLesson, lesson, lessonLoading, unitBlocked, unitBlockedInfo, resetLesson,
+        upsertLessonProgress, upsertWatchProgress, markComplete,
+    } = useLibrary();
+    const { tierMap, getTierCategories } = useClientTiers();
+    const completedSessionRef = useRef(new Set());
+
+    const hasCompleted = lesson?.status === "completed";
+    const unit = lesson?.unit ?? null;
+    const hasUnit = !!unit?.uuid;
+    const hasCourse = !!unit?.course;
+    // duration_seconds is derived from authored lesson content (see duration.util.js) —
+    // zero means no lesson content has been built yet, so it isn't ready to view.
+    const contentNotReady = !lesson?.duration_seconds
+        || (hasUnit && !unit?.duration_seconds)
+        || (hasCourse && !unit.course.duration_seconds);
+
+    const blockTypes = new Set((lesson?.blocks ?? []).map((b) => b.type));
+    const isVideoLesson = blockTypes.has("video") || blockTypes.has("text-video");
+
+    // read_all_content (or unconfigured/default) → scroll-to-bottom tracking, below.
+    // watch_percent / manual_complete → their own dedicated triggers — same dispatch
+    // pattern as UnitList.jsx / UnitReader.jsx, brought here for standalone lessons.
+    const lessonCompletionType = lesson?.completion?.type ?? 'read_all_content';
+
+    useEffect(() => {
+        getTierCategories();
+        getLesson(uuid);
+        return () => resetLesson();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [uuid]);
+
+    // ── Scroll progress (read_all_content) — mirrors UnitList.jsx/UnitReader.jsx's
+    // scrollY-based indicator, only meaningful for content-only standalone lessons.
+    const [scrollProgress, setScrollProgress] = useState(0);
+
+    useEffect(() => {
+        setScrollProgress(0);
+        window.scrollTo(0, 0);
+    }, [uuid]);
+
+    useEffect(() => {
+        // Content shorter than the viewport (nothing to scroll) used to flag 100%
+        // on the spot — but right after mount the video/image blocks haven't
+        // finished loading yet, so that snapshot is often taken against a
+        // still-collapsed layout and fires a false "completed" before the real
+        // (taller) content has even rendered. Debounce a settle window and
+        // re-check before trusting it.
+        let settleTimer = null;
+
+        const evaluate = () => {
+            const scrollTop = window.scrollY;
+            const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
+
+            if (scrollHeight <= 0) {
+                if (settleTimer) return;
+                settleTimer = setTimeout(() => {
+                    settleTimer = null;
+                    const stillShort = document.documentElement.scrollHeight - window.innerHeight <= 0;
+                    if (stillShort) setScrollProgress(100);
+                }, 1200);
+                return;
+            }
+
+            if (settleTimer) { clearTimeout(settleTimer); settleTimer = null; }
+
+            // Percentage rounding alone can hit 100 a few pixels short of the real
+            // bottom (e.g. 99.5% rounds up), which was enough to auto-fire
+            // completion before the reader actually reached the end. Cap the
+            // ratio-derived value at 90 and only award the true 100 when the
+            // scroll position has actually reached the bottom.
+            const atBottom = scrollTop >= scrollHeight - 4;
+            setScrollProgress(atBottom ? 100 : Math.min(Math.round((scrollTop / scrollHeight) * 100), 90));
+        };
+
+        evaluate(); // seed a measurement — short content may never fire a scroll event
+        window.addEventListener("scroll", evaluate, { passive: true });
+
+        return () => {
+            window.removeEventListener("scroll", evaluate);
+            if (settleTimer) clearTimeout(settleTimer);
+        };
+    }, [uuid]);
+
+    // ── Mark lesson completed when user scrolls to the bottom ─────────────
+    // Only fires in Task mode — outside of it, this standalone lesson page is a
+    // passive preview/reader with no automatic progress persistence (matches the
+    // "Task mode — progress is being tracked automatically" banner's promise: no
+    // banner, no tracking).
+    useEffect(() => {
+        if (!taskCtx?.has_task) return;
+        if (lessonCompletionType !== 'read_all_content') return;
+        if (scrollProgress < 100 || !lesson?.uuid) return;
+        if (completedSessionRef.current.has(lesson.uuid)) return;
+        if (hasCompleted) return;
+        completedSessionRef.current.add(lesson.uuid);
+        upsertLessonProgress(lesson.uuid, 'completed', unit?.uuid ?? null);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [scrollProgress]);
+
+    // watch_percent / watch_video / listen_audio — safe to always pass through, the
+    // backend no-ops whichever type (if any) isn't configured on this lesson.
+    const handleWatchProgress = useCallback((percent, meta) => {
+        if (!lesson?.uuid) return;
+        upsertWatchProgress(lesson.uuid, unit?.uuid ?? null, percent, meta);
+    }, [lesson, unit, upsertWatchProgress]);
+
+    // ── manual_complete trigger: learner clicks the Mark Complete button ────
+    const handleMarkComplete = useCallback(async () => {
+        if (!lesson?.uuid) return;
+        await markComplete(lesson.uuid, unit?.uuid ?? null);
+    }, [lesson, unit, markComplete]);
+
+    const items = [
+        { label: "Home", icon: <House className="size-4" />, to: `/dashboard` },
+        { label: "Lessons", to: `/lessons` },
+        ...(hasCourse ? [{ label: unit.course.title, to: `/course/${unit.course.course_id}` }] : []),
+        ...(hasUnit ? [{ label: unit.title, to: `/units/${unit.uuid}` }] : []),
+        { label: lesson?.title ?? "Lesson" },
+    ];
+
+    // ── Deep-link to a lesson under a locked unit — inline blocked panel ────
+    if (unitBlocked) {
+        return (
+            <LockedContentPanel
+                course={unitBlockedInfo?.course}
+                item={unitBlockedInfo?.item}
+                tierMap={tierMap}
+            />
+        );
+    }
+
+    if (lessonLoading || !lesson) {
+        return (
+            <div className="my-17 p-8 lg:container lg:mx-auto space-y-4">
+                <Skeleton className="h-4 w-48" />
+                <Skeleton className="h-10 w-2/3" />
+                <Skeleton className="h-5 w-full max-w-2xl" />
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex-1 flex flex-col">
+            <PageMeta title={`${lesson.title} - STARR`} description={lesson.description} />
+
+            {/* Scroll progress indicator — Task mode only (matches the "progress is being
+                tracked automatically" banner's promise), read_all_content lessons only,
+                fixed edge-to-edge under the navbar, same style as the Course > Unit >
+                Lesson reader's top bar. */}
+            {taskCtx?.has_task && !contentNotReady && lessonCompletionType === 'read_all_content' && (
+                <div
+                    className="fixed left-0 right-0 z-30 h-1.5 bg-border"
+                    style={{ top: "var(--navbar-h)" }}
+                >
+                    <div
+                        className={`h-full transition-all duration-150 ease-out ${scrollProgress >= 100 ? 'bg-green-500' : 'bg-primary'}`}
+                        style={{ width: `${scrollProgress}%` }}
+                    />
+                </div>
+            )}
+
+            <div
+                className="flex-1 flex flex-col"
+                style={{ paddingTop: "var(--navbar-h)" }}
+            >
+                <div className="flex flex-col gap-6 lg:container lg:max-w-4xl mx-auto xs:px-4 xs:py-8 lg:px-16 lg:py-10">
+                    <AppBreadcrumb items={items} />
+
+                    {taskCtx?.has_task && (
+                        <div className={`flex items-center gap-2 text-white text-xs font-medium px-4 py-1.5 rounded-md shadow-sm w-fit transition-colors ${
+                            hasCompleted ? 'bg-green-600' : 'bg-blue-600'
+                        }`}>
+                            <ListChecks className="size-3.5 shrink-0" />
+                            <span>
+                                {hasCompleted
+                                    ? 'Lesson complete — tracking finished'
+                                    : 'Task mode — progress is being tracked automatically'
+                                }
+                            </span>
+                        </div>
+                    )}
+
+                    <div className="flex flex-col gap-3 max-w-2xl">
+                        <h1 className="font-bold xs:text-2xl lg:text-3xl">{lesson.title}</h1>
+                        <p className="text-muted-foreground">{lesson.description ?? ""}</p>
+                        <div className="flex flex-col gap-2">
+                            <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground [&_svg]:size-4">
+                                {formatDuration(lesson.duration_seconds) && (
+                                    <span className="flex items-center gap-1"><Clock /> {formatDuration(lesson.duration_seconds)}</span>
+                                )}
+                                {/* Reading/video type only means anything when there's an actual
+                                    task tracking this lesson — outside task mode there's nothing
+                                    being "completed", so hide it. The completion-requirement label
+                                    itself is dropped entirely — redundant with the lesson's own
+                                    working completion mechanism (scroll/watch/mark-complete). */}
+                                {taskCtx?.has_task && (
+                                    <>
+                                        {formatDuration(lesson.duration_seconds) && <span>·</span>}
+                                        <span className="flex items-center gap-1">
+                                            <Video /> {isVideoLesson ? "Video lesson" : "Reading lesson"}
+                                        </span>
+                                    </>
+                                )}
+                            </div>
+                            {hasCompleted && (
+                                <div className="flex items-center gap-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400 w-fit">
+                                    <CheckCheck className="size-4" />
+                                    Success — you've completed this lesson.
+                                </div>
+                            )}
+                        </div>
+                        {/* Optional — never forced. Lets a learner who wants the full
+                            multi-lesson navigator (sidebar, quiz, up-next) opt into it,
+                            instead of always being redirected there. */}
+                        {hasUnit && (
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                className="w-fit"
+                                onClick={() => navigate(`/units/${unit.uuid}/read`, { state: { lessonId: lesson.lesson_id } })}
+                            >
+                                Continue in "{unit.title}" <ArrowUpRight className="size-4" />
+                            </Button>
+                        )}
+                    </div>
+
+                    {lesson.objectives?.length > 0 && (
+                        <div className="bg-background border rounded-lg p-4 flex flex-col gap-3 max-w-2xl">
+                            <span className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">What you'll learn</span>
+                            <ul className="flex flex-col gap-2">
+                                {lesson.objectives.map((obj) => (
+                                    <li key={obj.objective_id} className="flex items-start gap-2 text-card-foreground">
+                                        <Check className="size-4 text-emerald-500 shrink-0 mt-0.5" />
+                                        {obj.text}
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    )}
+
+                    {contentNotReady ? (
+                        <div className="w-fit flex items-center gap-2 rounded-lg border bg-muted px-4 py-2.5 text-sm text-muted-foreground">
+                            <Hourglass className="size-4 shrink-0" />
+                            This lesson is currently being prepared. Please check back later.
+                        </div>
+                    ) : (
+                        <div className="w-full">
+                            <LessonBlock
+                                lesson={lesson}
+                                loading={lessonLoading}
+                                showHeader={false}
+                                onWatchProgress={['watch_percent', 'watch_video', 'listen_audio'].includes(lessonCompletionType) ? handleWatchProgress : undefined}
+                            />
+                            {taskCtx?.has_task && !lessonLoading && lesson && lessonCompletionType === 'manual_complete' && (
+                                <MarkCompleteButton
+                                    label={lesson?.completion?.button_label}
+                                    completed={hasCompleted}
+                                    onMarkComplete={handleMarkComplete}
+                                />
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default LessonDetails;
diff --git a/apps/web/src/modules/client/pages/LessonsList.jsx b/apps/web/src/modules/client/pages/LessonsList.jsx
new file mode 100644
index 0000000..8f11d4b
--- /dev/null
+++ b/apps/web/src/modules/client/pages/LessonsList.jsx
@@ -0,0 +1,211 @@
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { House, ChevronLeft, ChevronRight, Layers, Search } from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Input } from "@/components/ui/input";
+import {
+    Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { useLibrary } from "@/contexts/ClientLibraryContext";
+import { useClientTiers } from "@/contexts/ClientTiersProvider";
+import LessonUpsellModal from "../components/LessonUpsellModal";
+import { LessonCard, LessonCardSkeleton } from "../components/LessonCard";
+import { PageMeta } from "@/contexts/MetadataContext";
+
+const ITEMS_PER_PAGE = 10;
+
+// ─── Pagination ───────────────────────────────────────────────────────────────
+
+const Pagination = ({ currentPage, totalPages, totalItems, itemsPerPage, onPageChange }) => {
+    const start = (currentPage - 1) * itemsPerPage + 1;
+    const end = Math.min(currentPage * itemsPerPage, totalItems);
+
+    const getPages = () => {
+        const pages = [];
+        if (totalPages <= 5) {
+            for (let i = 1; i <= totalPages; i++) pages.push(i);
+        } else {
+            pages.push(1);
+            if (currentPage > 3) pages.push("...");
+            for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) pages.push(i);
+            if (currentPage < totalPages - 2) pages.push("...");
+            pages.push(totalPages);
+        }
+        return pages;
+    };
+
+    return (
+        <div className="flex items-center justify-between w-full pt-4 border-t">
+            <div className="text-sm text-muted-foreground">
+                Showing <span className="font-medium text-foreground">{start}–{end}</span> of{" "}
+                <span className="font-medium text-foreground">{totalItems}</span> lessons
+            </div>
+            <div className="flex items-center gap-1">
+                <Button onClick={() => onPageChange(currentPage - 1)} disabled={currentPage === 1} variant="ghost" size="sm">
+                    <ChevronLeft />
+                </Button>
+                {getPages().map((page, i) =>
+                    page === "..." ? (
+                        <span key={`ellipsis-${i}`} className="w-7 h-7 flex items-center justify-center text-xs text-muted-foreground">···</span>
+                    ) : (
+                        <Button key={page} size="sm" variant={currentPage === page ? "default" : "outline"} onClick={() => onPageChange(page)}>
+                            {page}
+                        </Button>
+                    )
+                )}
+                <Button onClick={() => onPageChange(currentPage + 1)} disabled={currentPage === totalPages} variant="ghost" size="sm">
+                    <ChevronRight />
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+// ─── Main Page ────────────────────────────────────────────────────────────────
+
+const LessonsList = () => {
+    const navigate = useNavigate();
+    const { lessons, lessonsLoading, getLessons } = useLibrary();
+    const { tierMap, getTierCategories } = useClientTiers();
+
+    const [currentPage, setCurrentPage] = useState(1);
+    const [searchInput, setSearchInput] = useState("");
+    const [search, setSearch] = useState("");
+    const [lockFilter, setLockFilter] = useState("All");
+    const [modalOpen, setModalOpen] = useState(false);
+    const [selectedLesson, setSelectedLesson] = useState(null);
+
+    useEffect(() => {
+        getLessons();
+        getTierCategories();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const filtered = useMemo(() =>
+        lessons
+            .filter((l) => {
+                const matchSearch = l.title.toLowerCase().includes(search.toLowerCase()) ||
+                    (l.description ?? "").toLowerCase().includes(search.toLowerCase());
+                const matchLock = lockFilter === "All"
+                    || (lockFilter === "Unlocked" && !l.is_locked)
+                    || (lockFilter === "Locked" && l.is_locked);
+                return matchSearch && matchLock;
+            })
+            .sort((a, b) => a.title.localeCompare(b.title)),
+        [lessons, search, lockFilter]
+    );
+
+    const totalPages = Math.max(1, Math.ceil(filtered.length / ITEMS_PER_PAGE));
+    const paginated = filtered.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
+
+    const runSearch = () => { setSearch(searchInput); setCurrentPage(1); };
+
+    const handleViewDetails = (lesson) => {
+        if (lesson.is_locked) {
+            setSelectedLesson(lesson);
+            setModalOpen(true);
+        } else {
+            navigate(`/lessons/${lesson.uuid}`);
+        }
+    };
+
+    const items = [
+        { label: "Home", icon: <House className="size-4" />, to: `/dashboard` },
+        { label: "Lessons" },
+    ];
+
+    return (
+        <div>
+            <PageMeta title="Lessons - STARR" description="Browse standalone lessons you can start right away." />
+            <div className="py-24 bg-accent/70 min-h-screen">
+                <div className="flex flex-col gap-4 justify-between lg:container lg:mx-auto pt-2">
+                    <AppBreadcrumb items={items} />
+
+                    {/* Search & Filters */}
+                    <div className="fixed top-[67px] left-0 right-0 z-10 bg-card border-b lg:static lg:bg-transparent lg:border-none py-3 xs:px-4 md:px-6 lg:px-0">
+                        <div className="flex items-center xs:flex-col lg:flex-row gap-4">
+                            <div className="flex items-center gap-2 w-full lg:max-w-64">
+                                <Input
+                                    placeholder="Search lessons..."
+                                    className="w-full bg-card text-sm"
+                                    value={searchInput}
+                                    onChange={(e) => setSearchInput(e.target.value)}
+                                    onKeyDown={(e) => { if (e.key === "Enter") runSearch(); }}
+                                />
+                                <Button size="icon" variant="outline" className="shrink-0 bg-card" onClick={runSearch} aria-label="Search">
+                                    <Search />
+                                </Button>
+                            </div>
+                            <Select value={lockFilter} onValueChange={(v) => { setLockFilter(v); setCurrentPage(1); }}>
+                                <SelectTrigger className="w-full lg:w-48 bg-card">
+                                    <SelectValue placeholder="Access" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="All">All Lessons</SelectItem>
+                                    <SelectItem value="Unlocked">Unlocked</SelectItem>
+                                    <SelectItem value="Locked">Locked</SelectItem>
+                                </SelectContent>
+                            </Select>
+                            <Select value="lessons" onValueChange={(v) => {
+                                if (v === "courses") navigate("/course");
+                                if (v === "units") navigate("/units");
+                            }}>
+                                <SelectTrigger className="w-full lg:w-48 bg-card">
+                                    <SelectValue placeholder="Browse" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="courses">Courses</SelectItem>
+                                    <SelectItem value="units">Units</SelectItem>
+                                    <SelectItem value="lessons">Lessons</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+                    </div>
+
+                    {/* Lesson Grid */}
+                    {lessonsLoading ? (
+                        <div className="xs:pt-12 lg:pt-0 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                            {Array.from({ length: 8 }).map((_, i) => <LessonCardSkeleton key={i} />)}
+                        </div>
+                    ) : paginated.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center py-20">
+                            <Layers className="size-40 text-primary" />
+                            <p className="text-md">No lessons found</p>
+                        </div>
+                    ) : (
+                        <div className="xs:pt-12 lg:pt-0 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mb-4 xs:px-4 lg:px-0">
+                            {paginated.map((lesson) => (
+                                <LessonCard
+                                    key={lesson.lesson_id}
+                                    lesson={lesson}
+                                    tierMap={tierMap}
+                                    onViewDetails={handleViewDetails}
+                                />
+                            ))}
+                        </div>
+                    )}
+
+                    {!lessonsLoading && filtered.length > ITEMS_PER_PAGE && (
+                        <Pagination
+                            currentPage={currentPage}
+                            totalPages={totalPages}
+                            totalItems={filtered.length}
+                            itemsPerPage={ITEMS_PER_PAGE}
+                            onPageChange={setCurrentPage}
+                        />
+                    )}
+                </div>
+            </div>
+
+            <LessonUpsellModal
+                open={modalOpen}
+                onOpenChange={setModalOpen}
+                lesson={selectedLesson}
+                tierMap={tierMap}
+            />
+        </div>
+    );
+};
+
+export default LessonsList;
diff --git a/apps/web/src/modules/client/pages/MyAchievements.jsx b/apps/web/src/modules/client/pages/MyAchievements.jsx
new file mode 100644
index 0000000..c3020bc
--- /dev/null
+++ b/apps/web/src/modules/client/pages/MyAchievements.jsx
@@ -0,0 +1,87 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import * as LucideIcons from "lucide-react";
+import { Trophy, BadgeCheck, ArrowLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useProfile } from "@/contexts/ProfileProvider";
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+const getFallbackIcon = (type) => type === "badge" ? BadgeCheck : Trophy;
+
+export default function MyAchievements() {
+  const navigate = useNavigate();
+  const { achievements, achievementsLoading, getAchievements } = useProfile();
+  const { fmtDate } = useDateFormat();
+
+  useEffect(() => { getAchievements(); }, []);
+
+  const sorted = [...achievements].sort(
+    (a, b) => new Date(b.granted_at) - new Date(a.granted_at)
+  );
+
+  return (
+    <section className="mt-17 bg-muted min-h-full">
+      <div className="p-6 lg:container lg:max-w-3xl lg:mx-auto space-y-5">
+
+        <div className="flex items-center gap-3">
+          <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/dashboard")}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <div>
+            <h1 className="text-xl font-semibold">Achievements</h1>
+            <p className="text-sm text-muted-foreground">All your earned milestones and badges.</p>
+          </div>
+        </div>
+
+        {achievementsLoading ? (
+          <div className="rounded-xl border bg-card divide-y">
+            {[...Array(4)].map((_, i) => (
+              <div key={i} className="flex items-center gap-4 p-4">
+                <Skeleton className="h-10 w-10 rounded-full shrink-0" />
+                <div className="space-y-1.5 flex-1">
+                  <Skeleton className="h-3.5 w-36" />
+                  <Skeleton className="h-3 w-52" />
+                  <Skeleton className="h-3 w-24" />
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : sorted.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-24 text-center">
+            <Trophy className="h-10 w-10 text-muted-foreground/40 mb-3" />
+            <p className="text-sm font-medium">No achievements yet</p>
+            <p className="text-xs text-muted-foreground">Complete courses and activities to earn achievements.</p>
+          </div>
+        ) : (
+          <div className="rounded-xl border bg-card">
+            {sorted.map((item, i) => {
+              const Icon = LucideIcons[item.icon] ?? getFallbackIcon(item.type);
+              return (
+                <div key={item.achievement_id ?? i}>
+                  <div className="flex items-center gap-4 p-4">
+                    <div className="h-10 w-10 rounded-full bg-secondary flex items-center justify-center shrink-0">
+                      <Icon className="size-5 text-secondary-foreground" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-semibold">{item.label}</p>
+                      <p className="text-xs text-muted-foreground mt-0.5">{item.description}</p>
+                      {item.granted_at && (
+                        <p className="text-xs text-muted-foreground/70 mt-1">
+                          {fmtDate(item.granted_at)}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                  {i < sorted.length - 1 && <Separator />}
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/client/pages/MyCertificates.jsx b/apps/web/src/modules/client/pages/MyCertificates.jsx
new file mode 100644
index 0000000..cabb1c0
--- /dev/null
+++ b/apps/web/src/modules/client/pages/MyCertificates.jsx
@@ -0,0 +1,171 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Award, Download, LockIcon, ArrowLeft, BadgeCheck } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useProfile } from "@/contexts/ProfileProvider";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+import CourseBadge from "@/modules/admin/components/courses/CourseBadge";
+
+const CertificateCard = ({ courseTitle, issuedAt, courseUuid, badgeColor, badgeImageUrl }) => {
+  const [downloading, setDownloading] = useState(false);
+  const { fmtDate } = useDateFormat();
+
+  const issuedLabel = issuedAt ? fmtDate(issuedAt) : "—";
+
+  const handleDownload = async () => {
+    setDownloading(true);
+    try {
+      const res         = await api.get(`/client/certificates/${courseUuid}`, { responseType: "blob" });
+      const disposition = res.headers["content-disposition"] ?? "";
+      const match       = disposition.match(/filename="([^"]+)"/);
+      const filename    = match ? match[1] : `certificate-${courseUuid}.pdf`;
+      const url = URL.createObjectURL(new Blob([res.data], { type: "application/pdf" }));
+      const a   = document.createElement("a");
+      a.href     = url;
+      a.download = filename;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch {
+      toast("Could not download certificate.");
+    } finally {
+      setDownloading(false);
+    }
+  };
+
+  return (
+    <div className="rounded-2xl border bg-card p-6 flex flex-col items-center gap-4 shadow-sm">
+      <CourseBadge
+        title={courseTitle}
+        color={badgeColor ?? "purple"}
+        imageUrl={badgeImageUrl ?? null}
+      />
+      <div className="w-full rounded-lg border px-3 py-2.5">
+        <p className="text-[10px] uppercase tracking-widest text-muted-foreground font-semibold">Course</p>
+        <p className="text-sm font-medium mt-1 line-clamp-2">{courseTitle}</p>
+      </div>
+      <div className="w-full flex items-end justify-between">
+        <div>
+          <p className="text-[10px] uppercase tracking-widest text-muted-foreground font-semibold">Issued</p>
+          <p className="text-sm font-medium">{issuedLabel}</p>
+        </div>
+        <Badge className="bg-green-100 text-green-700 border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700 gap-1">
+          <BadgeCheck className="size-3" /> Verified
+        </Badge>
+      </div>
+      <Button size="sm" variant="outline" className="w-full" onClick={handleDownload} disabled={downloading}>
+        <Download className="size-3.5" />
+        {downloading ? "Downloading…" : "Download PDF"}
+      </Button>
+    </div>
+  );
+};
+
+export default function MyCertificates() {
+  const navigate = useNavigate();
+  const { achievements, achievementsLoading, getAchievements } = useProfile();
+
+  // { [courseUuid]: { badge_color, badge_image_url, badge_asset_id } }
+  const [badgeDataMap, setBadgeDataMap] = useState({});
+
+  useEffect(() => { getAchievements(); }, []);
+
+  const certAchievements = achievements.filter((a) => a.key.startsWith("course_completed_"));
+
+  // Fetch badge data for all certificates once the list is known
+  useEffect(() => {
+    if (!certAchievements.length) return;
+    const STREAM_BASE = `${import.meta.env.VITE_API_URL}/client/media/stream`;
+
+    certAchievements.forEach((cert) => {
+      const uuid = cert.metadata?.courseUuid ?? cert.key.replace("course_completed_", "");
+      if (!uuid || badgeDataMap[uuid]) return;
+
+      api.get(`/client/courses/uuid/${uuid}`)
+        .then(({ data }) => {
+          const c = data.data ?? data;
+          if (!c) return;
+          if (c.badge_asset_id) {
+            api.post("/client/media/token", { asset_id: c.badge_asset_id })
+              .then(({ data: td }) => {
+                const token = td.data?.token;
+                setBadgeDataMap((prev) => ({
+                  ...prev,
+                  [uuid]: {
+                    badge_color:     c.badge_color ?? "purple",
+                    badge_image_url: token ? `${STREAM_BASE}/${token}` : null,
+                  },
+                }));
+              })
+              .catch(() => setBadgeDataMap((prev) => ({
+                ...prev,
+                [uuid]: { badge_color: c.badge_color ?? "purple", badge_image_url: null },
+              })));
+          } else {
+            setBadgeDataMap((prev) => ({
+              ...prev,
+              [uuid]: { badge_color: c.badge_color ?? "purple", badge_image_url: c.badge_image_url ?? null },
+            }));
+          }
+        })
+        .catch(() => {});
+    });
+  }, [certAchievements.length]);
+
+  return (
+    <section className="mt-17 bg-muted min-h-full">
+      <div className="p-6 lg:container lg:max-w-3xl lg:mx-auto space-y-5">
+
+        <div className="flex items-center gap-3">
+          <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/dashboard")}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <div>
+            <div className="flex items-center gap-2">
+              <h1 className="text-xl font-semibold">My Certificates</h1>
+              <Badge variant="outline" className="gap-1 text-xs">
+                <LockIcon className="h-3 w-3" /> Only you
+              </Badge>
+            </div>
+            <p className="text-sm text-muted-foreground">Certificates earned from completed courses.</p>
+          </div>
+        </div>
+
+        {achievementsLoading ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            {[...Array(2)].map((_, i) => (
+              <Skeleton key={i} className="h-80 rounded-2xl" />
+            ))}
+          </div>
+        ) : certAchievements.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-24 text-center">
+            <Award className="h-10 w-10 text-muted-foreground/40 mb-3" />
+            <p className="text-sm font-medium">No certificates yet</p>
+            <p className="text-xs text-muted-foreground">Pass a course assessment to earn your first certificate.</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            {certAchievements.map((cert) => {
+              const uuid   = cert.metadata?.courseUuid ?? cert.key.replace("course_completed_", "");
+              const bData  = badgeDataMap[uuid] ?? {};
+              return (
+                <CertificateCard
+                  key={cert.achievement_id}
+                  courseTitle={cert.description}
+                  issuedAt={cert.granted_at}
+                  courseUuid={uuid}
+                  badgeColor={bData.badge_color ?? "purple"}
+                  badgeImageUrl={bData.badge_image_url ?? null}
+                />
+              );
+            })}
+          </div>
+        )}
+
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/client/pages/MyCompletedContent.jsx b/apps/web/src/modules/client/pages/MyCompletedContent.jsx
new file mode 100644
index 0000000..a1bdaab
--- /dev/null
+++ b/apps/web/src/modules/client/pages/MyCompletedContent.jsx
@@ -0,0 +1,206 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { ArrowLeft, BookOpen, Layers, FileText, LockIcon, CheckCircle2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import api from "@/utils/api.util";
+
+// Polls in the background so items completed elsewhere (another tab, another
+// device) show up here without a manual refresh — same convention as
+// ClientNotificationContext's badge polling, kept local since only this page
+// consumes it.
+const POLL_INTERVAL = 30_000;
+
+const EMPTY = { courses: [], units: [], lessons: [] };
+
+const EmptyState = ({ icon: Icon, label }) => (
+  <div className="flex flex-col items-center justify-center py-20 text-center">
+    <Icon className="h-10 w-10 text-muted-foreground/40 mb-3" />
+    <p className="text-sm font-medium">Nothing completed yet</p>
+    <p className="text-xs text-muted-foreground">{label}</p>
+  </div>
+);
+
+const RowSkeleton = () => (
+  <div className="flex items-center gap-4 p-4">
+    <Skeleton className="h-9 w-9 rounded-full shrink-0" />
+    <div className="space-y-1.5 flex-1">
+      <Skeleton className="h-3.5 w-48" />
+      <Skeleton className="h-3 w-32" />
+    </div>
+  </div>
+);
+
+const CompletedRow = ({ icon: Icon, title, subtitle, completedAt, onClick }) => {
+  const { fmtDate } = useDateFormat();
+  return (
+    <div
+      className="flex items-center gap-4 p-4 cursor-pointer hover:bg-accent/40 transition-colors"
+      onClick={onClick}
+    >
+      <div className="h-9 w-9 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center shrink-0">
+        <Icon className="size-4 text-green-700 dark:text-green-400" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium truncate">{title}</p>
+        {subtitle && <p className="text-xs text-muted-foreground truncate mt-0.5">{subtitle}</p>}
+      </div>
+      <div className="shrink-0 text-right">
+        <Badge variant="outline" className="gap-1 text-xs">
+          <CheckCircle2 className="size-3" /> {completedAt ? fmtDate(completedAt) : "—"}
+        </Badge>
+      </div>
+    </div>
+  );
+};
+
+export default function MyCompletedContent() {
+  const navigate = useNavigate();
+  const [data, setData]       = useState(EMPTY);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const load = async (silent = false) => {
+      if (!silent) setLoading(true);
+      try {
+        const { data: res } = await api.get("/client/courses/completed");
+        if (cancelled) return;
+        setData({
+          courses: res.data?.courses ?? [],
+          units:   res.data?.units   ?? [],
+          lessons: res.data?.lessons ?? [],
+        });
+      } catch {
+        // silent — keep last known state on a failed poll
+      } finally {
+        if (!silent) setLoading(false);
+      }
+    };
+
+    load();
+    const interval = setInterval(() => load(true), POLL_INTERVAL);
+    return () => { cancelled = true; clearInterval(interval); };
+  }, []);
+
+  const total = data.courses.length + data.units.length + data.lessons.length;
+
+  return (
+    <section className="mt-17 bg-muted min-h-full">
+      <div className="p-6 lg:container lg:max-w-3xl lg:mx-auto space-y-5">
+
+        <div className="flex items-center gap-3">
+          <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/profile")}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <div>
+            <div className="flex items-center gap-2">
+              <h1 className="text-xl font-semibold">Completed</h1>
+              <Badge variant="outline" className="gap-1 text-xs">
+                <LockIcon className="h-3 w-3" /> Only you
+              </Badge>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Every lesson, unit, and course you've finished.
+            </p>
+          </div>
+        </div>
+
+        <Tabs defaultValue="courses" className="w-full">
+          <TabsList>
+            <TabsTrigger value="courses">
+              Courses {!loading && <Badge variant="secondary" className="ml-1.5">{data.courses.length}</Badge>}
+            </TabsTrigger>
+            <TabsTrigger value="units">
+              Units {!loading && <Badge variant="secondary" className="ml-1.5">{data.units.length}</Badge>}
+            </TabsTrigger>
+            <TabsTrigger value="lessons">
+              Lessons {!loading && <Badge variant="secondary" className="ml-1.5">{data.lessons.length}</Badge>}
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="courses">
+            <div className="rounded-xl border bg-card divide-y">
+              {loading ? (
+                [...Array(3)].map((_, i) => <RowSkeleton key={i} />)
+              ) : data.courses.length === 0 ? (
+                <EmptyState icon={BookOpen} label="Finish a course to see it here." />
+              ) : (
+                data.courses.map((c, i) => (
+                  <div key={c.course_id}>
+                    <CompletedRow
+                      icon={BookOpen}
+                      title={c.title}
+                      subtitle={c.certificate ? `Certificate ${c.certificate.cert_no}` : null}
+                      completedAt={c.completed_at}
+                      onClick={() => navigate(`/course/${c.course_id}`)}
+                    />
+                    {i < data.courses.length - 1 && <Separator />}
+                  </div>
+                ))
+              )}
+            </div>
+          </TabsContent>
+
+          <TabsContent value="units">
+            <div className="rounded-xl border bg-card divide-y">
+              {loading ? (
+                [...Array(3)].map((_, i) => <RowSkeleton key={i} />)
+              ) : data.units.length === 0 ? (
+                <EmptyState icon={Layers} label="Finish a unit to see it here." />
+              ) : (
+                data.units.map((u, i) => (
+                  <div key={u.uuid}>
+                    <CompletedRow
+                      icon={Layers}
+                      title={u.title}
+                      subtitle={u.course ? u.course.title : "Standalone"}
+                      completedAt={u.completed_at}
+                      onClick={() => navigate(`/units/${u.uuid}`)}
+                    />
+                    {i < data.units.length - 1 && <Separator />}
+                  </div>
+                ))
+              )}
+            </div>
+          </TabsContent>
+
+          <TabsContent value="lessons">
+            <div className="rounded-xl border bg-card divide-y">
+              {loading ? (
+                [...Array(3)].map((_, i) => <RowSkeleton key={i} />)
+              ) : data.lessons.length === 0 ? (
+                <EmptyState icon={FileText} label="Finish a lesson to see it here." />
+              ) : (
+                data.lessons.map((l, i) => (
+                  <div key={l.uuid}>
+                    <CompletedRow
+                      icon={FileText}
+                      title={l.title}
+                      subtitle={l.course ? l.course.title : "Standalone"}
+                      completedAt={l.completed_at}
+                      onClick={() => navigate(`/lessons/${l.uuid}`)}
+                    />
+                    {i < data.lessons.length - 1 && <Separator />}
+                  </div>
+                ))
+              )}
+            </div>
+          </TabsContent>
+        </Tabs>
+
+        {!loading && total === 0 && (
+          <p className="text-center text-xs text-muted-foreground">
+            Nothing completed yet — your finished lessons, units, and courses will appear here in real time.
+          </p>
+        )}
+
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/client/pages/Notifications.jsx b/apps/web/src/modules/client/pages/Notifications.jsx
new file mode 100644
index 0000000..0445416
--- /dev/null
+++ b/apps/web/src/modules/client/pages/Notifications.jsx
@@ -0,0 +1,283 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { ArrowLeft, Bell, LockIcon, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import {
+  Pagination, PaginationContent, PaginationItem,
+  PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis,
+} from "@/components/ui/pagination";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { useClientNotifications } from "@/contexts/ClientNotificationContext";
+import { cn } from "@/lib/utils";
+import { NotificationIcon, getTypeAccent, timeAgo } from "@/components/generic/notificationDisplay";
+import NotificationDetailDialog from "@/components/generic/NotificationDetailDialog";
+import { toast } from "sonner";
+
+const PAGE_SIZES = [10, 20, 50];
+
+function ClearAllDialog({ open, onOpenChange, onConfirm, loading }) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Clear all notifications</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will permanently delete all of your notifications. This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={loading}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onConfirm}
+            disabled={loading}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            {loading && <Spinner className="size-4 mr-2" />}
+            Clear all
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+// Always rendered — even with 0 pages — so the footer stays visible as notifications come in.
+function PaginationControls({ page, totalPages, onPage }) {
+  const pages = [];
+  for (let i = 1; i <= totalPages; i++) pages.push(i);
+
+  const getVisible = () => {
+    if (totalPages <= 5) return pages;
+    if (page <= 3) return [1, 2, 3, 4, null, totalPages];
+    if (page >= totalPages - 2) return [1, null, totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
+    return [1, null, page - 1, page, page + 1, null, totalPages];
+  };
+
+  return (
+    <Pagination className="mx-0 w-auto">
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious
+            href="#"
+            onClick={(e) => { e.preventDefault(); if (page > 1) onPage(page - 1); }}
+            className={page === 1 ? "pointer-events-none opacity-50" : ""}
+          />
+        </PaginationItem>
+
+        {getVisible().map((p, i) =>
+          p === null ? (
+            <PaginationItem key={`ellipsis-${i}`}>
+              <PaginationEllipsis />
+            </PaginationItem>
+          ) : (
+            <PaginationItem key={p}>
+              <PaginationLink
+                href="#"
+                isActive={p === page}
+                onClick={(e) => { e.preventDefault(); onPage(p); }}
+              >
+                {p}
+              </PaginationLink>
+            </PaginationItem>
+          )
+        )}
+
+        <PaginationItem>
+          <PaginationNext
+            href="#"
+            onClick={(e) => { e.preventDefault(); if (page < totalPages) onPage(page + 1); }}
+            className={page === totalPages ? "pointer-events-none opacity-50" : ""}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  );
+}
+
+export default function Notifications() {
+  const navigate = useNavigate();
+  const {
+    notifications, unseenCount, loading, pagination,
+    fetchNotifications, markSeen, markAllSeen, clearAll,
+  } = useClientNotifications();
+
+  const [selected, setSelected] = useState(null);
+  const [clearOpen, setClearOpen] = useState(false);
+  const [clearing, setClearing] = useState(false);
+
+  useEffect(() => { fetchNotifications(1, PAGE_SIZES[0]); }, [fetchNotifications]);
+
+  function handleClickNotification(n) {
+    if (!n.seen) markSeen(n.notification_id);
+    setSelected(n);
+  }
+
+  function handlePageChange(page) {
+    fetchNotifications(page, pagination.limit);
+  }
+
+  function handlePageSizeChange(value) {
+    fetchNotifications(1, Number(value));
+  }
+
+  async function handleClearAll() {
+    setClearing(true);
+    const ok = await clearAll();
+    setClearing(false);
+    setClearOpen(false);
+    if (ok) toast("All notifications cleared.");
+    else toast("Could not clear notifications.");
+  }
+
+  const rangeStart = pagination.total === 0 ? 0 : (pagination.page - 1) * pagination.limit + 1;
+  const rangeEnd = Math.min(pagination.page * pagination.limit, pagination.total);
+
+  return (
+    <section className="mt-17 bg-muted min-h-full">
+      <div className="p-6 lg:container lg:max-w-3xl lg:mx-auto space-y-5">
+
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex items-center gap-3">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/dashboard")}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <div className="flex items-center gap-2">
+                <h1 className="text-xl font-semibold">Notifications</h1>
+                <Badge variant="outline" className="gap-1 text-xs">
+                  <LockIcon className="h-3 w-3" /> Only you
+                </Badge>
+              </div>
+              <p className="text-sm text-muted-foreground">
+                {unseenCount > 0 ? `${unseenCount} unread` : "You're all caught up."}
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            {unseenCount > 0 && (
+              <Button variant="outline" size="sm" onClick={markAllSeen}>
+                Mark all as read
+              </Button>
+            )}
+            {/* <Button
+              variant="outline"
+              size="sm"
+              className="gap-1.5 text-destructive hover:text-destructive"
+              disabled={notifications.length === 0}
+              onClick={() => setClearOpen(true)}
+            >
+              <Trash2 className="size-3.5" />
+              Clear all
+            </Button> */}
+          </div>
+        </div>
+
+        <div className="rounded-2xl border bg-card overflow-hidden">
+          {loading && notifications.length === 0 ? (
+            <div className="p-4 space-y-3">
+              {[...Array(5)].map((_, i) => (
+                <Skeleton key={i} className="h-16 rounded-lg" />
+              ))}
+            </div>
+          ) : notifications.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-40 text-center">
+              <Bell className="h-10 w-10 text-muted-foreground/40 mb-3" />
+              <p className="text-sm font-medium">No notifications yet</p>
+              <p className="text-xs text-muted-foreground">You'll see updates about your courses and account here.</p>
+            </div>
+          ) : (
+            <ul>
+              {notifications.map((n, i) => (
+                <li key={n.notification_id}>
+                  <button
+                    onClick={() => handleClickNotification(n)}
+                    className={cn(
+                      "w-full text-left px-5 py-4 hover:bg-muted/50 transition-colors",
+                      !n.seen && "bg-blue-50 dark:bg-blue-950/20"
+                    )}
+                  >
+                    <div className="flex items-start gap-3">
+                      <div className={cn("mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full", getTypeAccent(n.type))}>
+                        <NotificationIcon type={n.type} className="h-4 w-4" />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-1.5">
+                          {!n.seen && (
+                            <span className="h-2 w-2 shrink-0 rounded-full bg-blue-500" />
+                          )}
+                          <p className="text-sm font-medium truncate">{n.title}</p>
+                        </div>
+                        <p className="text-sm text-muted-foreground mt-0.5 line-clamp-2">{n.message}</p>
+                        <p className="text-[11px] text-muted-foreground mt-1">{timeAgo(n.createdAt)}</p>
+                      </div>
+                    </div>
+                  </button>
+                  {i < notifications.length - 1 && <Separator />}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        {/* Footer stays visible even when the list is empty, so it's ready as notifications come in */}
+        <div className="flex items-center justify-between gap-3 flex-wrap px-1">
+          <p className="text-sm text-muted-foreground">
+            Showing {rangeStart}-{rangeEnd} of {pagination.total}
+          </p>
+
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-muted-foreground">Rows per page</span>
+              <Select value={String(pagination.limit)} onValueChange={handlePageSizeChange}>
+                <SelectTrigger className="h-8 w-[80px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {PAGE_SIZES.map((size) => (
+                    <SelectItem key={size} value={String(size)}>{size}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <PaginationControls
+              page={pagination.page}
+              totalPages={pagination.pages}
+              onPage={handlePageChange}
+            />
+          </div>
+        </div>
+
+      </div>
+
+      <NotificationDetailDialog
+        notification={selected}
+        onOpenChange={(isOpen) => { if (!isOpen) setSelected(null); }}
+      />
+
+      <ClearAllDialog
+        open={clearOpen}
+        onOpenChange={setClearOpen}
+        onConfirm={handleClearAll}
+        loading={clearing}
+      />
+    </section>
+  );
+}
diff --git a/apps/web/src/modules/client/pages/PlanList.jsx b/apps/web/src/modules/client/pages/PlanList.jsx
new file mode 100644
index 0000000..ab2dd7a
--- /dev/null
+++ b/apps/web/src/modules/client/pages/PlanList.jsx
@@ -0,0 +1,514 @@
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+    Card, CardContent, CardDescription,
+    CardFooter, CardHeader, CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+    Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
+} from "@/components/ui/dialog";
+import {
+    BookOpen, Star, Lock, Sparkles,
+    RotateCcw, Plus, Ban, BadgeCheck,
+    GraduationCap, Book, Medal,
+} from "lucide-react";
+import { useClientTiers } from "@/contexts/ClientTiersProvider";
+import ResponsiveModal from "@/components/generic/ResponsiveModal";
+import { toast } from "sonner";
+import api from "@/utils/api.util";
+import { PageMeta } from "@/contexts/MetadataContext";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { useClientAdvertisements } from "@/contexts/ClientAdvertisementContext";
+import { Banner, BannerSkeleton } from "@/components/generic/Blocks/Client/Advertisements/Banner";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+import { getBundleContent, overlapsExistingAccess, isPlanCurrent } from "@/utils/planBundle.util";
+import { TablePagination } from "@/components/generic/Table/TablePagination";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+const REFUND_WINDOW_SECS = 5 * 60;
+
+function formatCountdown(secs) {
+    const m = Math.floor(secs / 60);
+    const s = secs % 60;
+    return `${m}:${String(s).padStart(2, "0")}`;
+}
+
+function formatDuration(days, unit) {
+    if (!days) return null;
+    const UNIT_TO_DAYS = { minute: 1 / 1440, hour: 1 / 24, day: 1, month: 30, year: 365 };
+    const multiplier = UNIT_TO_DAYS[unit] ?? 1;
+    const value = Math.round((days / multiplier) * 1000) / 1000;
+    const label = unit ?? "day";
+    return `${value} ${label}${value !== 1 ? "s" : ""}`;
+}
+
+
+// ─── Skeleton ──────────────────────────────────────────────────────────────────
+
+const PlanSkeleton = () => (
+    <Card className="flex flex-col">
+        <CardHeader>
+            <div className="flex items-center justify-between">
+                <Skeleton className="h-5 w-20" />
+                <Skeleton className="h-5 w-16 rounded-full" />
+            </div>
+            <Skeleton className="h-8 w-24 mt-2" />
+        </CardHeader>
+        <CardContent className="flex-1 space-y-2">
+            {Array.from({ length: 3 }).map((_, i) => (
+                <Skeleton key={i} className="h-4 w-full" />
+            ))}
+        </CardContent>
+        <CardFooter>
+            <Skeleton className="h-9 w-full" />
+        </CardFooter>
+    </Card>
+);
+
+// ─── Plan Card ────────────────────────────────────────────────────────────────
+
+function ChecklistItem({ item, icon: Icon = Star, onClick }) {
+    return (
+        <div
+            className={`flex items-center gap-2 py-1.5 text-sm ${onClick ? "cursor-pointer hover:underline w-fit" : ""}`}
+            onClick={onClick}
+        >
+            <Icon className="text-blue-500 shrink-0" size={16} />
+            <span className="line-clamp-1">{item}</span>
+        </div>
+    );
+}
+
+// Per-bundle-type icon for "Benefits" rows — distinguishes a course
+// grant from a unit or lesson grant at a glance instead of a flat checkmark.
+const BUNDLE_ITEM_ICONS = { course: GraduationCap, unit: Book, lesson: Medal };
+
+const PlanCard = ({ plan, myTier, tierMap, onSelect, onView, onRefund, refundSecsLeft }) => {
+    const { fmtCurrency } = useDateFormat();
+    const [notAvailableOpen, setNotAvailableOpen] = useState(false);
+    const [previewItem, setPreviewItem] = useState(null);
+    const { label: tierLabel, cls: badgeCls, panel, gradient } = resolveTierBadge(plan.tier, tierMap);
+    // Admin-controlled — set from the "Recommended for you" toggle on the
+    // plan's Edit Plan page, drives the featured frame treatment below.
+    // Color comes from the plan's own tier category's actual gradient (same
+    // one used for its badge), not a hardcoded blue or a pale flat tint.
+    const isRecommended = !!plan.is_recommended;
+    // "Current" means the user actually purchased THIS exact plan (matched by
+    // plan_id) and it's still active — NOT just any plan sharing the same tier
+    // slug. Two different plans can be the same tier (e.g. two Premium
+    // bundles) and stay independently active (Tier Plans v2).
+    const isCurrent = isPlanCurrent(plan, myTier);
+    // Blocked-by-overlap ("already covered") — the plan isn't itself owned,
+    // but at least one of its bundle items is already granted by something
+    // else the user holds. Card stays visible but disabled (Scenario 3).
+    const isBlockedByOverlap = !isCurrent && overlapsExistingAccess(plan, myTier?.my_grants);
+    const duration = formatDuration(plan.duration_days, plan.duration_unit);
+    const bundle = getBundleContent(plan);
+    // Footer button state — always visible when there's an actual action to
+    // take. A not-yet-owned free plan has nothing to do (it's the default),
+    // so it's the one case with no button. Base color follows the recommended
+    // flag (dark = recommended, light = plain), overridden for refund/blocked.
+    let footerLabel = null;
+    let footerAction = null;
+    let footerDisabled = false;
+    let footerBtnCls = "";
+
+    if (isCurrent && refundSecsLeft > 0) {
+        footerLabel = <><RotateCcw className="size-4" /> Refund ({formatCountdown(refundSecsLeft)})</>;
+        footerAction = () => onRefund(plan);
+        footerBtnCls = "bg-red-600 hover:bg-red-700 text-white";
+    } else if (!plan.is_active) {
+        footerLabel = <><Ban className="size-4" /> Not Available</>;
+        footerAction = () => setNotAvailableOpen(true);
+        footerDisabled = true;
+        footerBtnCls = "bg-gray-100 text-slate-800 dark:bg-primary dark:text-primary-foreground shadow-none";
+    } else if (isBlockedByOverlap) {
+        footerLabel = <><Lock className="size-4" /> Already Included</>;
+        footerDisabled = true;
+        footerBtnCls = "bg-gray-100 text-slate-400 shadow-none";
+    } else if (isCurrent && plan.tier !== "free") {
+        footerLabel = <><BadgeCheck className="size-4" /> Extend {tierLabel}</>;
+        footerAction = () => onSelect(plan);
+    } else if (!isCurrent && plan.tier !== "free") {
+        footerLabel = <><Sparkles className="size-4" /> Get {tierLabel}</>;
+        footerAction = () => onSelect(plan);
+    }
+
+    return (
+        <>
+            {/* Actual Card */}
+            <div
+                className={`flex flex-col h-full rounded-2xl px-2 pb-2 relative ${isRecommended ? `${gradient} border-transparent` : "bg-transparent border border-transparent"
+                    } ${isBlockedByOverlap ? "opacity-60" : ""}`}
+            >
+                <div className={`text-center text-sm font-medium my-2 ${isRecommended ? "text-white" : "text-slate-500 invisible"}`}>
+                    Recommended for you
+                </div>
+
+                <div
+                    className={`flex flex-col flex-1 rounded-xl p-6 relative overflow-hidden ${isRecommended ? "bg-card" : "bg-card border border-gray-100 dark:border-blue-900 shadow-sm"
+                        }`}
+                >
+                 
+                    <div className="relative space-y-1.5 max-w-sm">
+                        <h1
+                            className="font-bold text-xl leading-relaxed hover:underline cursor-pointer w-fit"
+                            onClick={() => onView(plan)}
+                        >
+                            {plan.label}
+                        </h1>
+                        <p className="text-sm text-slate-500 leading-relaxed line-clamp-2">
+                            {plan.description || "No information provided"}
+                        </p>
+                    </div>
+
+                    <div className="relative flex items-center gap-1.5 mt-3 flex-wrap">
+                        {isBlockedByOverlap && (
+                            <Badge variant="secondary" className="gap-1">
+                                <Lock className="size-3" />
+                                Already Included
+                            </Badge>
+                        )}
+                    </div>
+
+                    <div className="relative flex flex-col items-start gap-4 my-6">
+                        <div className="flex items-end gap-1">
+                            <h1 className="text-5xl font-bold">
+                                {fmtCurrency(plan.price, plan.currency)}
+                            </h1>
+                            {duration && <p className="text-muted-foreground mb-1">/ {duration}</p>}
+                        </div>
+
+                        <div className="w-full h-px bg-gray-200" />
+
+                        <div className="flex flex-col gap-1 items-start w-full">
+                            <h1 className="font-medium text-sm text-muted-foreground mb-1">
+                                {bundle ? `Bundle (${bundle.noun}s):` : "Bundle:"}
+                            </h1>
+                            <div className="w-full">
+                                {bundle ? (
+                                    bundle.items.map((item) => (
+                                        <ChecklistItem
+                                            key={item[bundle.idKey]}
+                                            item={item.title}
+                                            icon={BUNDLE_ITEM_ICONS[bundle.type]}
+                                            onClick={() => setPreviewItem(item)}
+                                        />
+                                    ))
+                                ) : !plan.description ? (
+                                    <p className="text-sm text-slate-500 py-1.5">
+                                        Access to all free course content.
+                                    </p>
+                                ) : null}
+                            </div>
+                        </div>
+                    </div>
+
+                    {footerLabel && (
+                        <Button
+                            className={`w-full mt-auto ${footerBtnCls}`}
+                            size="lg"
+                            disabled={footerDisabled}
+                            onClick={footerAction}
+                        >
+                            {footerLabel}
+                        </Button>
+                    )}
+                </div>
+            </div>
+
+
+            {/* ── Not Available Dialog ──────────────────────────────────────── */}
+            <Dialog open={notAvailableOpen} onOpenChange={setNotAvailableOpen}>
+                <DialogContent className="sm:max-w-md">
+                    <DialogHeader>
+                        <DialogTitle>Unavailable</DialogTitle>
+                    </DialogHeader>
+                    <p className="text-sm text-muted-foreground py-1">
+                        The <span className="font-medium text-foreground">{plan.label}</span> plan
+                        is currently not available for purchase. Please check back later.
+                    </p>
+                    <DialogFooter>
+                        <Button variant="outline" onClick={() => setNotAvailableOpen(false)}>
+                            Got it
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            {/* ── Bundle Item Preview ─────────────────────────────────────────── */}
+            <ResponsiveModal
+                open={!!previewItem}
+                onOpenChange={(v) => !v && setPreviewItem(null)}
+                title={previewItem?.title}
+                description={`Upgrade your plan to access this ${bundle?.noun?.toLowerCase() ?? "item"}.`}
+            >
+                <div className="py-2">
+                    <div className={`p-5 rounded-2xl border ${panel.bg} ${panel.border}`}>
+                        <div className="flex items-center gap-3 mb-3">
+                            <Badge className={badgeCls}>
+                                <Lock className="size-3" /> {tierLabel}
+                            </Badge>
+                        </div>
+                        <ul className="space-y-2 text-sm [&_svg]:size-4 mb-4">
+                            <li className="flex items-center gap-2"><Star className="text-blue-500" /> Access to {tierLabel} content</li>
+                            <li className="flex items-center gap-2"><Star className="text-blue-500" /> Certificates & achievements</li>
+                        </ul>
+                        <p className="text-sm text-muted-foreground">
+                            Upgrade to a <span className="font-medium">{tierLabel}</span> plan to unlock this {bundle?.noun?.toLowerCase() ?? "item"}.
+                        </p>
+                    </div>
+                </div>
+            </ResponsiveModal>
+        </>
+    );
+};
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function PlanList() {
+    const navigate = useNavigate();
+    const { plans, plansLoading, myTier, tierLoading, tierMap, getPlans, getMyTier, getTierCategories, resetMyTier } = useClientTiers();
+    const { fmtDate, fmtCurrency } = useDateFormat();
+    const { adLists, listLoading: adLoading, getActiveAdvertisementList, handleAdCtaClick } = useClientAdvertisements();
+
+    // Plans are fetched all at once — pagination here just slices the
+    // already-loaded list client-side, it doesn't refetch.
+    const [plansPage, setPlansPage] = useState(1);
+    const [plansLimit, setPlansLimit] = useState(10);
+
+    const [refundPlan, setRefundPlan] = useState(null);  // plan being refunded
+    const [refundLoading, setRefundLoading] = useState(false);
+    // Keyed by plan_id, not tier slug — two different plans can share a tier
+    // (Tier Plans v2) and each has its own independent refund window based on
+    // its own starts_at.
+    const [refundSecsLeftByTier, setRefundSecsLeftByTier] = useState({});
+    const refundTimerRef = useRef(null);
+
+    useEffect(() => {
+        getPlans();
+        getMyTier();
+        getTierCategories();
+        getActiveAdvertisementList("tier_plans.banner");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getPlans, getMyTier]);
+
+    const bannerAds = adLists["tier_plans.banner"] ?? [];
+
+    useEffect(() => {
+        clearInterval(refundTimerRef.current);
+        const activeTiers = myTier?.active_tiers ?? [];
+        if (!activeTiers.length) { setRefundSecsLeftByTier({}); return; }
+
+        const compute = () => {
+            const map = {};
+            for (const t of activeTiers) {
+                if (!t.starts_at || t.plan_id == null) continue;
+                const elapsed = Math.floor((Date.now() - new Date(t.starts_at).getTime()) / 1000);
+                map[t.plan_id] = Math.max(0, REFUND_WINDOW_SECS - elapsed);
+            }
+            return map;
+        };
+
+        setRefundSecsLeftByTier(compute());
+        refundTimerRef.current = setInterval(() => {
+            setRefundSecsLeftByTier(compute());
+        }, 1000);
+        return () => clearInterval(refundTimerRef.current);
+    }, [myTier?.active_tiers]);
+
+    const handleViewPlan = (plan) => navigate(`/subscriptions/view/${plan.plan_id}`);
+
+    const handleSelectPlan = (plan) => navigate(`/subscriptions/checkout?plan_id=${plan.plan_id}`);
+
+    const handleRefundClick = (plan) => setRefundPlan(plan);
+
+    // The plan being refunded may not be the user's "best" tier (myTier), since
+    // more than one can be active at once — resolve its own record by plan_id
+    // (not tier slug, since two plans can share a tier) for its own
+    // expires_at/refund window instead of assuming it matches myTier.
+    const refundPlanTier = (myTier?.active_tiers ?? []).find((t) => t.plan_id != null && String(t.plan_id) === String(refundPlan?.plan_id)) ?? null;
+    const refundPlanSecsLeft = refundSecsLeftByTier[refundPlan?.plan_id] ?? 0;
+    const isOnlyActiveTier = (myTier?.active_tiers ?? []).length <= 1;
+
+    const plansTotalPages = Math.max(1, Math.ceil(plans.length / plansLimit));
+    const pagedPlans = plans.slice((plansPage - 1) * plansLimit, plansPage * plansLimit);
+    const plansPagination = {
+        page: plansPage,
+        limit: plansLimit,
+        totalPages: plansTotalPages,
+        totalRecords: plans.length,
+        hasPrevPage: plansPage > 1,
+        hasNextPage: plansPage < plansTotalPages,
+    };
+    const handlePlansPageSize = (size) => {
+        setPlansLimit(size);
+        setPlansPage(1);
+    };
+
+    const handleConfirmRefund = async () => {
+        setRefundLoading(true);
+        try {
+            // plan_id disambiguates which active subscription to refund now that a
+            // user can hold more than one concurrently.
+            const { data } = await api.post("/client/tiers/checkout/refund", { plan_id: refundPlan?.plan_id });
+            toast(data.message ?? "Refund processed. Your access has been revoked.");
+            setRefundPlan(null);
+            resetMyTier();
+            getMyTier();
+        } catch (err) {
+            toast(err?.response?.data?.message ?? "Refund failed. Please try again.");
+        } finally {
+            setRefundLoading(false);
+        }
+    };
+
+    return (
+        <div className="mt-17">
+            <PageMeta title="Subscriptions - STARR" description="Browse available subscription plans." />
+            <div className="relative overflow-hidden bg-gradient-to-b from-primary/5 via-background to-background min-h-screen">
+                <div className="lg:container lg:mx-auto space-y-8 p-6">
+                    <div className="relative xs:pt-2 lg:pt-8 space-y-4">
+                        {/* Advertisement Banner */}
+                        {/* {adLoading["tier_plans.banner"] ? (
+                            <BannerSkeleton />
+                        ) : (
+                            <Banner ads={bannerAds} onCtaClick={handleAdCtaClick} />
+                        )} */}
+
+                        <Banner ads={bannerAds} onCtaClick={handleAdCtaClick} />
+
+                        {/* Section Header */}
+                        <div className="relative flex flex-col items-center gap-4 mt-6">
+                            <div className="text-center my-8">
+                                <h2 className="text-3xl font-bold">Available Subscriptions</h2>
+                                <p className="text-muted-foreground mt-2">
+                                    Choose a subscription that matches your goals.
+                                </p>
+                            </div>
+                        </div>
+
+                        {/* Plan Cards */}
+                        {plansLoading || tierLoading ? (
+                            <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
+                                {Array.from({ length: 3 }).map((_, i) => <PlanSkeleton key={i} />)}
+                            </div>
+                        ) : plans.length === 0 ? (
+                            <div className="flex flex-col items-center justify-center py-20">
+                                <BookOpen className="size-10 mb-3" />
+                                <p className="text-sm">No plans available at the moment.</p>
+                            </div>
+                        ) : (
+                            <>
+                                <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
+                                    {pagedPlans.map((plan) => (
+                                        <PlanCard
+                                            key={plan.plan_id}
+                                            plan={plan}
+                                            myTier={myTier}
+                                            tierMap={tierMap}
+                                            onSelect={handleSelectPlan}
+                                            onView={handleViewPlan}
+                                            onRefund={handleRefundClick}
+                                            refundSecsLeft={refundSecsLeftByTier[plan.plan_id] ?? 0}
+                                        />
+                                    ))}
+                                </div>
+
+                                <TablePagination
+                                    pagination={plansPagination}
+                                    onPageChange={setPlansPage}
+                                    rowCount={pagedPlans.length}
+                                    totalRecords={plans.length}
+                                    onPageSizeChange={handlePlansPageSize}
+                                    recordLabel="plan"
+                                />
+                            </>
+                        )}
+
+                    </div>
+
+                </div>
+            </div>
+
+            {/* ── Refund Confirmation Modal ──────────────────────────────────── */}
+            <ResponsiveModal
+                open={!!refundPlan}
+                onOpenChange={(v) => !v && setRefundPlan(null)}
+                title="Request Refund"
+                description={`Are you sure you want to refund your ${refundPlan?.label ?? "current"} plan?`}
+                footer={
+                    <>
+                        <Button
+                            variant="outline"
+                            onClick={() => setRefundPlan(null)}
+                            disabled={refundLoading}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            variant="destructive"
+                            onClick={handleConfirmRefund}
+                            disabled={refundLoading || refundPlanSecsLeft === 0}
+                        >
+                            <RotateCcw className="size-4" />
+                            {refundLoading ? "Processing..." : "Confirm Refund"}
+                        </Button>
+                    </>
+                }
+            >
+                <div className="space-y-4 py-2">
+                    <div className="rounded-xl border bg-muted/60 p-4 space-y-2 text-sm">
+                        <div className="flex justify-between">
+                            <span className="text-muted-foreground">Plan</span>
+                            <span className="font-medium capitalize">{refundPlan?.tier}</span>
+                        </div>
+                        <div className="flex justify-between">
+                            <span className="text-muted-foreground">Refund amount</span>
+                            <span className="font-medium">
+                                {refundPlan ? fmtCurrency(refundPlan.price, refundPlan.currency) : "—"}
+                            </span>
+                        </div>
+                        {refundPlanTier?.expires_at && (
+                            <div className="flex justify-between">
+                                <span className="text-muted-foreground">Access until</span>
+                                <span className="font-medium">
+                                    {fmtDate(refundPlanTier.expires_at)}
+                                </span>
+                            </div>
+                        )}
+                        <div className="flex justify-between items-center pt-1 border-t">
+                            <span className="text-muted-foreground">Refund window</span>
+                            {refundPlanSecsLeft > 0 ? (
+                                <span className="font-semibold tabular-nums text-destructive">
+                                    {formatCountdown(refundPlanSecsLeft)} remaining
+                                </span>
+                            ) : (
+                                <span className="font-semibold text-muted-foreground">Expired</span>
+                            )}
+                        </div>
+                    </div>
+                    {refundPlanSecsLeft > 0 ? (
+                        <p className="text-sm text-muted-foreground">
+                            Your refund will be processed through PayPal.{" "}
+                            <span className="font-medium text-foreground">
+                                Access will be revoked immediately
+                            </span>{" "}
+                            {isOnlyActiveTier
+                                ? "and your account will be downgraded to Free."
+                                : "Your other active plan(s) will be unaffected."}
+                        </p>
+                    ) : (
+                        <p className="text-sm text-destructive">
+                            The 5-minute refund window has expired. Refunds are no longer available for this payment.
+                        </p>
+                    )}
+                </div>
+            </ResponsiveModal>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/client/pages/Profile.jsx b/apps/web/src/modules/client/pages/Profile.jsx
new file mode 100644
index 0000000..588af14
--- /dev/null
+++ b/apps/web/src/modules/client/pages/Profile.jsx
@@ -0,0 +1,784 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  Edit, BookOpen, Award, Trophy, Shield, Star, Zap, Target, BadgeCheck, Medal, Flame, LockIcon, Camera, ChevronRight, Download, RefreshCcw
+} from "lucide-react";
+import * as LucideIcons from "lucide-react";
+import { getTierColor } from "@/utils/tierColors";
+import AvatarUploadDialog from "@/components/generic/AvatarUploadDialog";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import ResponsiveModal from "@/components/generic/ResponsiveModal";
+import { useProfile } from "@/contexts/ProfileProvider";
+import { useAuth } from "@/contexts/AuthContext";
+import { useClientTiers } from "@/contexts/ClientTiersProvider";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+import CourseBadge from "@/modules/admin/components/courses/CourseBadge";
+
+// ─── Tier badge fallbacks (used when no policy is configured in DB) ───────────
+
+const TIER_BADGE_FALLBACKS = {
+  free: {
+    src: "/badges/free-access-badge-leaf-flaticon.svg",
+    label: "Free",
+    description: "Active member using the Free Plan.",
+    information: "Free users have access to the platform's core features without a subscription.",
+  },
+  premium: {
+    src: "/badges/premium-badge-sheriff-flaticon.svg",
+    label: "Premium",
+    description: "Subscriber with access to premium learning content.",
+    information: "Premium members can access all premium courses available on the platform.",
+  },
+  exclusive: {
+    src: "/badges/exclusive-award-flaticon.svg",
+    label: "Exclusive",
+    description: "Premium member with access to exclusive course content.",
+    information: "This badge represents a member with access to exclusive courses.",
+  },
+};
+
+const EARLY_ACCESS_FALLBACK = {
+  src: "/badges/early-access-badge-percent-flaticon.svg",
+  label: "Early Access",
+  description: "Registered during the Philproperties beta period.",
+  information: "Exclusive to members who registered before Dec 31, 2026.",
+};
+
+// Renders either a Lucide icon badge or an image badge.
+function TierBadgeDisplay({ badge, className }) {
+  if (badge?.src) return <img src={badge.src} alt={badge.label} className={className} />;
+  if (badge?.icon) {
+    const Icon = LucideIcons[badge.icon];
+    if (!Icon) return null;
+    const swatch = getTierColor(badge.colorKey ?? "green").swatch;
+    return <Icon className={className} style={{ color: swatch }} />;
+  }
+  return null;
+}
+
+function resolveTierBadge(myTier) {
+  const tier     = myTier?.tier ?? "free";
+  const category = myTier?.plan?.category ?? myTier?.category ?? null;
+
+  if (category) {
+    const hasBadge = category.badgeAsset || category.badge_icon || category.badge_label;
+    if (hasBadge) {
+      return {
+        src:      category.badgeAsset?.file_url ?? null,
+        icon:     !category.badgeAsset ? (category.badge_icon ?? null) : null,
+        colorKey: category.color ?? "green",
+        label:       category.badge_label ?? category.name ?? tier,
+        description: "",
+        information: category.description ?? "",
+      };
+    }
+  }
+  return TIER_BADGE_FALLBACKS[tier] ?? TIER_BADGE_FALLBACKS.free;
+}
+
+function resolveEarlyAccessBadge(systemBadges) {
+  const found = systemBadges?.find((b) => b.key === "early_access");
+  if (!found) return EARLY_ACCESS_FALLBACK;
+  return {
+    src:         found.asset?.file_url  ?? EARLY_ACCESS_FALLBACK.src,
+    label:       found.label            ?? EARLY_ACCESS_FALLBACK.label,
+    description: found.description      ?? EARLY_ACCESS_FALLBACK.description,
+    information: found.information      ?? EARLY_ACCESS_FALLBACK.information,
+  };
+}
+
+// ─── Achievement icon map (by key) ───────────────────────────────────────────
+
+const ACHIEVEMENT_ICONS = {
+  early_access: Star,
+  premium_first_time: BadgeCheck,
+  exclusive_first_time: Medal,
+  first_course_completed: BookOpen,
+  courses_completed_5: Flame,
+  courses_completed_10: Zap,
+  perfect_quiz_score: Target,
+  profile_completed: Shield,
+  first_referral: Award,
+};
+
+const getFallbackIcon = (type) => type === "badge" ? BadgeCheck : Trophy;
+
+// ─── Certificate landscape card (profile preview) ────────────────────────────
+
+const LandscapeCertCard = ({ courseTitle, issuedAt, courseUuid, badgeColor, badgeImageUrl }) => {
+  const [downloading, setDownloading] = useState(false);
+  const { fmtDate } = useDateFormat();
+
+  const issuedLabel = issuedAt ? fmtDate(issuedAt) : "—";
+
+  const handleDownload = async () => {
+    setDownloading(true);
+    try {
+      const res = await api.get(`/client/certificates/${courseUuid}`, { responseType: "blob" });
+      const disposition = res.headers["content-disposition"] ?? "";
+      const match = disposition.match(/filename="([^"]+)"/);
+      const filename = match ? match[1] : `certificate-${courseUuid}.pdf`;
+      const url = URL.createObjectURL(new Blob([res.data], { type: "application/pdf" }));
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch {
+      toast("Could not download certificate.");
+    } finally {
+      setDownloading(false);
+    }
+  };
+
+  return (
+    <div className="rounded-xl border bg-muted/40 p-3.5 flex items-center gap-3.5">
+      <CourseBadge mini color={badgeColor ?? "purple"} imageUrl={badgeImageUrl ?? null} />
+      <div className="flex-1 min-w-0">
+        <p className="text-[10px] uppercase tracking-widest text-muted-foreground font-semibold">Certificate of Completion</p>
+        <p className="text-sm font-semibold truncate mt-0.5">{courseTitle}</p>
+        <div className="flex items-center gap-2 mt-1">
+          <span className="text-xs text-muted-foreground">Issued {issuedLabel}</span>
+          <Badge className="gap-1 text-[10px] py-0 bg-green-100 text-green-700 border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700">
+            <BadgeCheck className="size-2.5" /> Verified
+          </Badge>
+        </div>
+      </div>
+      <Button size="sm" variant="outline" className="shrink-0" onClick={handleDownload} disabled={downloading}>
+        <Download className="size-3.5" />
+        {downloading ? "…" : "PDF"}
+      </Button>
+    </div>
+  );
+};
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+const ProfilePage = () => {
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const { fmtDate } = useDateFormat();
+
+  const {
+    profile, profileLoading, getProfile,
+    achievements, achievementsLoading, getAchievements,
+    fullName, avatarUrl, occupation,
+    uploadAvatar, deleteAvatar, avatarLoading,
+  } = useProfile();
+
+  const [avatarDialogOpen, setAvatarDialogOpen] = useState(false);
+
+  const { myTier, tierLoading, getMyTier, systemBadges, getSystemBadges } = useClientTiers();
+
+  const [badgeOpen, setBadgeOpen] = useState(false);
+  const [selectedBadge, setSelectedBadge] = useState(null);
+  const [badgeSrc, setBadgeSrc] = useState(null);
+  const [firstCertBadge, setFirstCertBadge] = useState({ color: "purple", imageUrl: null });
+
+  useEffect(() => {
+    const asset = myTier?.plan?.category?.badgeAsset ?? myTier?.category?.badgeAsset
+    if (!asset) { setBadgeSrc(null); return }
+    if (asset.storage_provider !== 's3') { setBadgeSrc(asset.file_url ?? null); return }
+    api.post('/client/media/token', { asset_id: asset.asset_id })
+      .then(({ data }) => {
+        const base = (import.meta.env.VITE_API_URL ?? '').replace(/\/$/, '')
+        setBadgeSrc(`${base}/client/media/stream/${data?.data?.token}`)
+      })
+      .catch(() => setBadgeSrc(null))
+  }, [myTier])
+
+  const [inProgressCourses,        setInProgressCourses]        = useState([]);
+  const [inProgressCoursesLoading, setInProgressCoursesLoading] = useState(false);
+  const [pendingModalOpen,         setPendingModalOpen]         = useState(false);
+  const [pendingModalCourse,       setPendingModalCourse]       = useState(null);
+
+  const [completedTotal,   setCompletedTotal]   = useState(0);
+  const [completedLoading, setCompletedLoading] = useState(false);
+
+  useEffect(() => {
+    getProfile();
+    getAchievements();
+    getMyTier();
+    getSystemBadges();
+    (async () => {
+      setInProgressCoursesLoading(true);
+      try {
+        const { data } = await api.get("/client/courses/in-progress");
+        setInProgressCourses(data.data ?? []);
+      } catch {
+        // silent — empty state handles it
+      } finally {
+        setInProgressCoursesLoading(false);
+      }
+    })();
+    (async () => {
+      setCompletedLoading(true);
+      try {
+        const { data } = await api.get("/client/courses/completed");
+        const counts = data.data?.counts ?? {};
+        setCompletedTotal((counts.courses ?? 0) + (counts.units ?? 0) + (counts.lessons ?? 0));
+      } catch {
+        // silent — empty state handles it
+      } finally {
+        setCompletedLoading(false);
+      }
+    })();
+  }, []);
+
+  // ── Derived ────────────────────────────────────────────────────────────────
+
+  const tier = myTier?.tier ?? user?.tier ?? "free";
+  const tierBadge = { ...resolveTierBadge(myTier), ...(badgeSrc ? { src: badgeSrc } : {}) };
+  const earlyAccessBadge = resolveEarlyAccessBadge(systemBadges);
+  const displayName = fullName || user?.personal_info?.name?.full_name || user?.email?.split("@")[0] || "—";
+  const initials = displayName.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase();
+
+  const tierRank = { free: 0, premium: 1, exclusive: 2 };
+  const userRank = tierRank[tier] ?? 0;
+
+  const certAchievements = achievements.filter((a) => a.key.startsWith("course_completed_"));
+
+  // Fetch badge color/image for the first certificate shown in the profile preview
+  useEffect(() => {
+    if (!certAchievements.length) return;
+    const first = certAchievements[0];
+    const uuid  = first.metadata?.courseUuid ?? first.key.replace("course_completed_", "");
+    if (!uuid) return;
+    const STREAM_BASE = `${import.meta.env.VITE_API_URL}/client/media/stream`;
+    api.get(`/client/courses/uuid/${uuid}`)
+      .then(({ data }) => {
+        const c = data.data ?? data;
+        if (!c) return;
+        if (c.badge_asset_id) {
+          api.post("/client/media/token", { asset_id: c.badge_asset_id })
+            .then(({ data: td }) => {
+              const token = td.data?.token;
+              setFirstCertBadge({
+                color:    c.badge_color ?? "purple",
+                imageUrl: token ? `${STREAM_BASE}/${token}` : null,
+              });
+            })
+            .catch(() => setFirstCertBadge({ color: c.badge_color ?? "purple", imageUrl: null }));
+        } else {
+          setFirstCertBadge({ color: c.badge_color ?? "purple", imageUrl: c.badge_image_url ?? null });
+        }
+      })
+      .catch(() => {});
+  }, [certAchievements.length]);
+
+  const hasEarlyAccess = achievements.some((a) => a.key === "early_access");
+  // Premium badge only shows when currently exclusive (went through premium to get here)
+  const hasPremiumBadge = achievements.some((a) => a.key === "premium_first_time") && userRank >= 2;
+  // Exclusive badge only shows when currently exclusive
+  const hasExclusiveBadge = achievements.some((a) => a.key === "exclusive_first_time") && userRank >= 2;
+  const badgesReady = !tierLoading && !achievementsLoading;
+
+  // Build badge object with earnedAt from achievements for modal
+  const getBadgeWithDate = (achievementKey, tierKey) => {
+    const achievement = achievements.find((a) => a.key === achievementKey);
+    const earnedAt = achievement?.granted_at ? fmtDate(achievement.granted_at) : null;
+    return { ...TIER_BADGE_FALLBACKS[tierKey], earnedAt };
+  };
+
+  const getEarlyAccessBadge = () => {
+    const achievement = achievements.find((a) => a.key === "early_access");
+    const earnedAt = achievement?.granted_at ? fmtDate(achievement.granted_at) : null;
+    return { ...earlyAccessBadge, earnedAt };
+  };
+
+  const getActiveTierBadgeWithDate = () => {
+    const achievementKey = tier === "premium"
+      ? "premium_first_time"
+      : tier === "exclusive"
+        ? "exclusive_first_time"
+        : null;
+    return achievementKey ? getBadgeWithDate(achievementKey, tier) : tierBadge;
+  };
+
+  return (
+    <div className="mt-17 bg-muted min-h-screen">
+      <div className="p-6 lg:container lg:max-w-5xl lg:mx-auto space-y-4">
+
+        {/* ── Header card ──────────────────────────────────────────────────── */}
+        <Card>
+          <CardContent className="py-2 px-6">
+            <div className="flex items-center gap-5">
+
+              <div className="relative">
+                <Avatar className="h-20 w-20">
+                  <AvatarImage src={avatarUrl || ""} />
+                  <AvatarFallback className="text-lg">{initials}</AvatarFallback>
+                </Avatar>
+                <button
+                  className="absolute -bottom-1 -right-1 p-1.5 rounded-full bg-primary text-primary-foreground shadow hover:opacity-80 transition-opacity"
+                  onClick={() => setAvatarDialogOpen(true)}
+                >
+                  <Camera size={11} />
+                </button>
+              </div>
+
+              <div className="flex-1">
+                <div className="flex items-center gap-2">
+                  {profileLoading ? (
+                    <Skeleton className="h-4 w-32" />
+                  ) : (
+                    <p className="text-base font-medium">{displayName}</p>
+                  )}
+
+                  {/* ── Badges ─────────────────────────────────────────────── */}
+                  {badgesReady ? (
+                    <div className="flex items-center gap-1.5 select-none">
+
+                      {/* Early access — always show if earned */}
+                      {hasEarlyAccess && (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <img
+                              className="size-4.5 cursor-pointer"
+                              src={earlyAccessBadge.src}
+                              alt={earlyAccessBadge.label}
+                              onClick={() => { setSelectedBadge(getEarlyAccessBadge()); setBadgeOpen(true); }}
+                            />
+                          </TooltipTrigger>
+                          <TooltipContent><p>{earlyAccessBadge.label}</p></TooltipContent>
+                        </Tooltip>
+                      )}
+
+                      {/* Premium badge — only when currently exclusive */}
+                      {hasPremiumBadge && (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <img
+                              className="size-4.5 cursor-pointer"
+                              src={TIER_BADGE_FALLBACKS.premium.src}
+                              alt="Premium"
+                              onClick={() => { setSelectedBadge(getBadgeWithDate("premium_first_time", "premium")); setBadgeOpen(true); }}
+                            />
+                          </TooltipTrigger>
+                          <TooltipContent><p>Premium</p></TooltipContent>
+                        </Tooltip>
+                      )}
+
+                      {/* Exclusive badge — only when currently exclusive */}
+                      {hasExclusiveBadge && (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <img
+                              className="size-4.5 cursor-pointer"
+                              src={TIER_BADGE_FALLBACKS.exclusive.src}
+                              alt="Exclusive"
+                              onClick={() => { setSelectedBadge(getBadgeWithDate("exclusive_first_time", "exclusive")); setBadgeOpen(true); }}
+                            />
+                          </TooltipTrigger>
+                          <TooltipContent><p>Exclusive</p></TooltipContent>
+                        </Tooltip>
+                      )}
+
+                      {/* Current active tier badge — always shown */}
+                      {/* For free tier, show free badge. For premium/exclusive already shown above via hasPremiumBadge/hasExclusiveBadge */}
+                      {userRank === 0 && (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span className="cursor-pointer" onClick={() => { setSelectedBadge(tierBadge); setBadgeOpen(true); }}>
+                              <TierBadgeDisplay badge={tierBadge} className="size-4.5" />
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent><p>{tierBadge.label}</p></TooltipContent>
+                        </Tooltip>
+                      )}
+
+                      {/* For premium tier without achievement yet (edge case) */}
+                      {userRank === 1 && !hasPremiumBadge && (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span className="cursor-pointer" onClick={() => { setSelectedBadge(getActiveTierBadgeWithDate()); setBadgeOpen(true); }}>
+                              <TierBadgeDisplay badge={tierBadge} className="size-4.5" />
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent><p>{tierBadge.label}</p></TooltipContent>
+                        </Tooltip>
+                      )}
+
+                    </div>
+                  ) : (
+                    <Skeleton className="h-4.5 w-16 rounded" />
+                  )}
+                </div>
+
+                <p className="text-sm text-muted-foreground mb-2">{user?.email ?? "—"}</p>
+
+                <div className="flex items-center gap-2 flex-wrap">
+                  {occupation && <Badge variant="outline">{occupation}</Badge>}
+                </div>
+              </div>
+
+              <Button variant="outline" size="sm" onClick={() => navigate("/profile/edit")}>
+                <Edit />
+                Edit profile
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* ── Badge modal ───────────────────────────────────────────────────── */}
+        <ResponsiveModal
+          open={badgeOpen}
+          onOpenChange={setBadgeOpen}
+          title="Badge"
+          description={selectedBadge?.description}
+          footer={
+            <Button variant="outline" onClick={() => setBadgeOpen(false)}>Close</Button>
+          }
+        >
+          <div className="flex flex-col items-center gap-4 py-2">
+            {(selectedBadge?.src || selectedBadge?.icon) && (
+              <TierBadgeDisplay badge={selectedBadge} className="size-16" />
+            )}
+            <div className="text-center space-y-1">
+              <p className="text-sm font-medium">{selectedBadge?.label}</p>
+              {selectedBadge?.earnedAt && (
+                <p className="text-sm text-muted-foreground">{selectedBadge.earnedAt}</p>
+              )}
+            </div>
+            <Separator className="w-full" />
+            <p className="text-sm">{selectedBadge?.information}</p>
+          </div>
+        </ResponsiveModal>
+
+        {/* ── Two columns ──────────────────────────────────────────────────── */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+
+          {/* Left column */}
+          <div className="space-y-4">
+
+            {/* Learning progress */}
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm font-medium flex items-center gap-2">
+                  <BookOpen className="size-4" />
+                  Learning progress
+                  <Badge><LockIcon className="size-3" /> Only you</Badge>
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                {inProgressCoursesLoading ? (
+                  <div className="space-y-3">
+                    {[...Array(2)].map((_, i) => (
+                      <div key={i} className="space-y-1.5">
+                        <Skeleton className="h-3.5 w-40" />
+                        <Skeleton className="h-1.5 w-full rounded-full" />
+                      </div>
+                    ))}
+                  </div>
+                ) : inProgressCourses.length === 0 ? (
+                  <p className="text-sm text-muted-foreground">No courses in progress.</p>
+                ) : (
+                  inProgressCourses.slice(0, 2).map((course, i) => {
+                    const pct = course.lessons_total > 0
+                      ? Math.round((course.lessons_completed / course.lessons_total) * 100)
+                      : 0;
+                    const quizPending = course.reading_status === 'completed';
+                    return (
+                      <div key={course.course_id} className="space-y-2">
+                        <div className="flex items-center justify-between mb-1.5">
+                          <p className="text-sm font-medium leading-none truncate flex-1 mr-3">{course.title}</p>
+                          <span className="text-sm text-muted-foreground shrink-0">{pct}%</span>
+                        </div>
+                        <Progress value={pct} className="h-1.5" />
+                        {quizPending ? (
+                          <Badge
+                            className="select-none cursor-pointer"
+                            variant="outline"
+                            onClick={() => { setPendingModalCourse(course); setPendingModalOpen(true); }}
+                          >
+                            <RefreshCcw /> Quiz / Assessment Pending
+                          </Badge>
+                        ) : (
+                          <p className="text-xs text-muted-foreground mt-1">
+                            {course.lessons_completed} / {course.lessons_total} lessons
+                          </p>
+                        )}
+                        {i < Math.min(inProgressCourses.length, 2) - 1 && <Separator className="mt-3" />}
+                      </div>
+                    );
+                  })
+                )}
+              </CardContent>
+            </Card>
+
+            {/* Quiz / Assessment Pending detail modal */}
+            <ResponsiveModal
+              open={pendingModalOpen}
+              onOpenChange={(v) => { setPendingModalOpen(v); if (!v) setPendingModalCourse(null); }}
+              title={pendingModalCourse?.title ?? 'Pending Items'}
+              description="You've finished reading all lessons. Complete the items below to earn your certificate."
+              hideDrawerClose={false}
+              footer={
+                <Button
+                  className="w-full sm:w-auto"
+                  onClick={() => {
+                    setPendingModalOpen(false);
+                    navigate(`/course/${pendingModalCourse?.course_id}/unit`);
+                  }}
+                >
+                  Go to Course
+                </Button>
+              }
+            >
+              {pendingModalCourse && (() => {
+                const { pending_quizzes = [], pending_assessment, assessment_configured = true } = pendingModalCourse;
+                const hasQuizzes    = pending_quizzes.length > 0;
+                const hasAssessment = !!pending_assessment;
+                if (!hasQuizzes && !hasAssessment && assessment_configured) {
+                  return (
+                    <p className="text-sm text-muted-foreground py-2">No pending items found.</p>
+                  );
+                }
+                return (
+                  <div className="space-y-4 py-1">
+                    {!assessment_configured && (
+                      <p className="text-sm text-muted-foreground">
+                        You've finished all lessons, but this course's final assessment hasn't been set up yet.
+                        Check back once it's available — the course can't be marked complete until then.
+                      </p>
+                    )}
+                    {hasQuizzes && (
+                      <div>
+                        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Unit Quizzes</p>
+                        <ul className="space-y-2">
+                          {pending_quizzes.map((q) => (
+                            <li key={q.quiz_id} className="flex items-start justify-between rounded-lg border px-3 py-2.5 gap-3">
+                              <div className="min-w-0">
+                                <p className="text-sm font-medium leading-none truncate">{q.title || 'Unit Quiz'}</p>
+                                <p className="text-xs text-muted-foreground mt-0.5">{q.unit_title}</p>
+                              </div>
+                              <div className="shrink-0 text-right space-y-0.5">
+                                <p className="text-xs text-muted-foreground">Pass: {q.passing_score}%</p>
+                                <p className="text-xs text-muted-foreground">
+                                  {q.attempt_count === 0 ? 'Not attempted' : `${q.attempt_count} attempt${q.attempt_count === 1 ? '' : 's'}`}
+                                </p>
+                                {q.is_required && (
+                                  <span className="inline-block rounded-full bg-amber-100 dark:bg-amber-900/30 px-1.5 py-0.5 text-[10px] font-medium text-amber-700 dark:text-amber-400">
+                                    Required
+                                  </span>
+                                )}
+                              </div>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+
+                    {hasAssessment && (
+                      <div>
+                        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Final Assessment</p>
+                        <div className="flex items-start justify-between rounded-lg border px-3 py-2.5 gap-3">
+                          <div className="min-w-0">
+                            <p className="text-sm font-medium leading-none truncate">{pending_assessment.title || 'Course Assessment'}</p>
+                          </div>
+                          <div className="shrink-0 text-right space-y-0.5">
+                            <p className="text-xs text-muted-foreground">Pass: {pending_assessment.passing_score}%</p>
+                            <p className="text-xs text-muted-foreground">
+                              {pending_assessment.attempt_count === 0 ? 'Not attempted' : `${pending_assessment.attempt_count} attempt${pending_assessment.attempt_count === 1 ? '' : 's'}`}
+                            </p>
+                            {pending_assessment.is_required && (
+                              <span className="inline-block rounded-full bg-amber-100 dark:bg-amber-900/30 px-1.5 py-0.5 text-[10px] font-medium text-amber-700 dark:text-amber-400">
+                                Required
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                );
+              })()}
+            </ResponsiveModal>
+
+            {/* Account info */}
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm font-medium">Account info</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3 text-sm">
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">Member since</span>
+                  <span className="font-medium">
+                    {profile?.createdAt ? fmtDate(profile.createdAt) : "—"}
+                  </span>
+                </div>
+                <Separator />
+                <div className="flex justify-between items-center">
+                  <span className="text-muted-foreground">Plan</span>
+                  {tierLoading ? (
+                    <Skeleton className="h-5 w-20" />
+                  ) : (
+                    <span className="font-medium capitalize">
+                      {tier}{myTier?.expires_at && ` · until ${fmtDate(myTier.expires_at)}`}
+                    </span>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+
+          </div>
+
+          {/* Right column */}
+          <div className="space-y-4">
+
+            {/* Certificates — preview + full list at /certificates */}
+            <Card>
+              <CardContent
+                className="flex items-center justify-between cursor-pointer hover:bg-accent/40 transition-colors rounded-t-lg"
+                onClick={() => navigate("/certificates")}
+              >
+                <div className="flex items-center gap-2">
+                  <Award className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-sm font-medium">My Certificates</span>
+                  <Badge><LockIcon className="size-3" /> Only you</Badge>
+                </div>
+                <div className="flex items-center gap-2">
+                  {achievementsLoading ? (
+                    <Skeleton className="h-5 w-5 rounded-full" />
+                  ) : certAchievements.length > 0 ? (
+                    <Badge variant="secondary" className="text-xs">{certAchievements.length}</Badge>
+                  ) : null}
+                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                </div>
+              </CardContent>
+              {!achievementsLoading && certAchievements.length > 0 && (
+                <CardContent className="pt-0">
+                  <LandscapeCertCard
+                    courseTitle={certAchievements[0].description}
+                    issuedAt={certAchievements[0].granted_at}
+                    courseUuid={certAchievements[0].metadata?.courseUuid ?? certAchievements[0].key.replace("course_completed_", "")}
+                    badgeColor={firstCertBadge.color}
+                    badgeImageUrl={firstCertBadge.imageUrl}
+                  />
+                </CardContent>
+              )}
+            </Card>
+
+            {/* Achievements — latest 2, full list at /achievements */}
+            <Card>
+              <CardContent
+                className="flex items-center justify-between cursor-pointer hover:bg-accent/40 transition-colors rounded-t-lg"
+                onClick={() => navigate("/achievements")}
+              >
+                <div className="flex items-center gap-2">
+                  <Trophy className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-sm font-medium">Achievements</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  {achievementsLoading ? (
+                    <Skeleton className="h-5 w-5 rounded-full" />
+                  ) : achievements.length > 0 ? (
+                    <Badge variant="secondary" className="text-xs">{achievements.length}</Badge>
+                  ) : null}
+                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                </div>
+              </CardContent>
+              <CardContent className="pt-0">
+                {achievementsLoading ? (
+                  <div className="space-y-3">
+                    {[...Array(2)].map((_, i) => (
+                      <div key={i} className="flex items-center gap-3">
+                        <Skeleton className="h-8 w-8 rounded-full" />
+                        <div className="space-y-1 flex-1">
+                          <Skeleton className="h-3 w-32" />
+                          <Skeleton className="h-3 w-48" />
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                ) : achievements.length > 0 ? (() => {
+                  const latest = [...achievements]
+                    .sort((a, b) => new Date(b.granted_at) - new Date(a.granted_at))
+                    .slice(0, 2);
+                  return (
+                    <div className="space-y-3">
+                      {latest.map((item, i) => {
+                        const Icon = ACHIEVEMENT_ICONS[item.key] ?? getFallbackIcon(item.type);
+                        return (
+                          <div key={item.achievement_id ?? i}>
+                            <div className="flex items-center gap-3">
+                              <div className="h-8 w-8 rounded-full bg-secondary flex items-center justify-center shrink-0">
+                                <Icon className="size-4 text-secondary-foreground" />
+                              </div>
+                              <div className="flex-1 min-w-0">
+                                <p className="text-sm font-medium">{item.label}</p>
+                                <p className="text-xs text-muted-foreground">{item.description}</p>
+                                {item.granted_at && (
+                                  <p className="text-xs mt-0.5">
+                                    {fmtDate(item.granted_at)}
+                                  </p>
+                                )}
+                              </div>
+                            </div>
+                            {i < latest.length - 1 && <Separator className="mt-3" />}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  );
+                })() : (
+                  <div className="flex flex-col items-center justify-center py-8 gap-2 text-center">
+                    <Shield className="h-8 w-8 text-muted-foreground/40" />
+                    <p className="text-sm font-medium text-muted-foreground">Nothing to show yet</p>
+                    <p className="text-xs text-muted-foreground/60">
+                      Complete more courses to unlock achievements.
+                    </p>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+
+            {/* Completed — live count, full list at /completed */}
+            <Card>
+              <CardContent
+                className="flex items-center justify-between cursor-pointer hover:bg-accent/40 transition-colors rounded-lg"
+                onClick={() => navigate("/completed")}
+              >
+                <div className="flex items-center gap-2">
+                  <BookOpen className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-sm font-medium">Completed</span>
+                  <Badge><LockIcon className="size-3" /> Only you</Badge>
+                </div>
+                <div className="flex items-center gap-2">
+                  {completedLoading ? (
+                    <Skeleton className="h-5 w-5 rounded-full" />
+                  ) : completedTotal > 0 ? (
+                    <Badge variant="secondary" className="text-xs">{completedTotal}</Badge>
+                  ) : null}
+                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                </div>
+              </CardContent>
+            </Card>
+
+          </div>
+        </div>
+      </div>
+
+      <AvatarUploadDialog
+        open={avatarDialogOpen}
+        onClose={() => setAvatarDialogOpen(false)}
+        currentAvatarUrl={avatarUrl ?? ''}
+        initials={initials}
+        onUpload={uploadAvatar}
+        onDelete={deleteAvatar}
+        loading={avatarLoading}
+      />
+    </div>
+  );
+};
+
+export default ProfilePage;
\ No newline at end of file
diff --git a/apps/web/src/modules/client/pages/UnitDetails.jsx b/apps/web/src/modules/client/pages/UnitDetails.jsx
new file mode 100644
index 0000000..db169b4
--- /dev/null
+++ b/apps/web/src/modules/client/pages/UnitDetails.jsx
@@ -0,0 +1,284 @@
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { useParams, useNavigate } from "react-router-dom";
+import {
+    House, Timer, CheckCircle2, Check, CheckCheck, ClipboardList, Hourglass, Sparkles,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { Skeleton } from "@/components/ui/skeleton";
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+import { useLibrary } from "@/contexts/ClientLibraryContext";
+import { useClientTiers } from "@/contexts/ClientTiersProvider";
+import { PageMeta } from "@/contexts/MetadataContext";
+import UnitUpsellModal from "@/modules/client/components/UnitUpsellModal";
+import { TYPE_DEFS } from "@/modules/admin/components/courses/completionRequirementTypes";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function formatDuration(seconds = 0) {
+    if (!seconds) return null;
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    if (h > 0) return `${h}hr ${m}min`;
+    return `${m}min`;
+}
+
+// A unit under 5 lessons is assumed still being built out — nudge learners
+// that more is coming rather than let it read as a thin/finished unit.
+const ESTABLISHED_LESSON_COUNT = 5;
+
+const GrowingUnitNote = () => (
+    <div className="flex items-center gap-2 rounded-lg border border-dashed bg-muted/40 px-4 py-2.5 text-sm text-muted-foreground w-fit">
+        <Sparkles className="size-4 shrink-0" />
+        This unit is constantly improving — more lessons will be added soon.
+    </div>
+);
+
+// ─── Lessons roadmap (single unit — lessons in order + trailing quiz row) ─────
+
+const LessonsRoadmap = ({ unitDetail, currentLessonId, onLessonClick, onContinue, onQuizClick }) => {
+    const lessons = unitDetail.lessons ?? [];
+    const quiz = unitDetail.quiz ?? null;
+
+    return (
+        <div className="flex flex-col gap-1 ">
+            {lessons.map((lesson, index) => {
+                const completed = lesson.status === "completed";
+                const isCurrent = lesson.lesson_id === currentLessonId;
+
+                return (
+                    <motion.div
+                        key={lesson.lesson_id}
+                        initial={{ opacity: 0, y: 8 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.25, ease: "easeOut" }}
+                        className={cn(
+                            "flex items-center justify-between gap-3 py-3 px-3 rounded-lg cursor-pointer transition-colors",
+                            isCurrent ? "bg-blue-50 dark:bg-blue-950/40" : "hover:bg-muted/60"
+                        )}
+                        onClick={() => onLessonClick(lesson)}
+                    >
+                        <div className="flex items-start gap-3 min-w-0">
+                            <div className={cn(
+                                "w-7 h-7 rounded-full border bg-background flex items-center justify-center text-xs font-medium shrink-0",
+                                completed
+                                    ? "border-emerald-500 text-emerald-500"
+                                    : isCurrent
+                                        ? "border-blue-500 text-blue-500"
+                                        : "border-border text-muted-foreground"
+                            )}>
+                                {completed ? <Check className="size-3.5" /> : index + 1}
+                            </div>
+                            <div className="min-w-0">
+                                <span className={cn(
+                                    "block truncate",
+                                    completed || isCurrent ? "font-medium text-card-foreground" : "text-muted-foreground"
+                                )}>
+                                    {lesson.title}
+                                </span>
+                                <span className="text-sm text-muted-foreground">
+                                    {formatDuration(lesson.duration_seconds) ?? "—"}
+                                    {completed && " · Completed"}
+                                    {isCurrent && !completed && " · In progress"}
+                                </span>
+                            </div>
+                        </div>
+                        {isCurrent && !completed && (
+                            <Button
+                                size="sm"
+                                className="bg-blue-500 shrink-0"
+                                onClick={(e) => { e.stopPropagation(); onContinue(lesson); }}
+                            >
+                                Continue
+                            </Button>
+                        )}
+                    </motion.div>
+                );
+            })}
+
+            {quiz && (
+                <div
+                    className="flex items-center justify-between py-3 px-3 mt-1 rounded-lg border border-dashed border-blue-300 dark:border-blue-700 bg-blue-50/60 dark:bg-blue-950/30 hover:bg-blue-100 dark:hover:bg-blue-900/40 transition-colors cursor-pointer"
+                    onClick={() => onQuizClick()}
+                >
+                    <div className="flex items-center gap-3 select-none min-w-0">
+                        {quiz.has_passed
+                            ? <CheckCircle2 className="size-5 text-emerald-500 shrink-0" />
+                            : <ClipboardList className="size-5 text-blue-500 shrink-0" />
+                        }
+                        <span className="font-medium text-blue-700 dark:text-blue-300 truncate">{quiz.title || "Quiz"}</span>
+                    </div>
+                    <Badge className={cn(
+                        "shrink-0 ml-2 text-[10px]",
+                        quiz.has_passed
+                            ? "bg-green-100 text-green-700 border border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700"
+                            : "bg-blue-100 text-blue-700 border border-blue-300 dark:bg-blue-900/40 dark:text-blue-400 dark:border-blue-700"
+                    )}>
+                        {quiz.has_passed ? "Passed" : "Quiz"}
+                    </Badge>
+                </div>
+            )}
+        </div>
+    );
+};
+
+// ─── Unit Details ───────────────────────────────────────────────────────────
+
+const UnitDetails = () => {
+    const { uuid } = useParams();
+    const navigate = useNavigate();
+
+    const { getUnitDetail, unitDetail, unitDetailLoading, unitBlocked, unitBlockedInfo, resetUnitDetail } = useLibrary();
+    const { tierMap, getTierCategories } = useClientTiers();
+    const [upsellOpen, setUpsellOpen] = useState(false);
+
+    // Locked units never get unitDetail (403'd) — fall back to the trimmed
+    // shell info so the header still renders title/description/duration.
+    const displayUnit = unitDetail ?? unitBlockedInfo?.item;
+    const contentNotReady = !displayUnit?.duration_seconds;
+
+    useEffect(() => {
+        getTierCategories();
+        getUnitDetail(uuid);
+        return () => resetUnitDetail();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [uuid]);
+
+    const items = [
+        { label: "Home", icon: <House className="size-4" />, to: `/dashboard` },
+        { label: "Units", to: `/units` },
+        { label: displayUnit?.title ?? "Unit" },
+    ];
+
+    if (unitDetailLoading) {
+        return (
+            <div className="my-17 p-8 lg:container lg:mx-auto space-y-4">
+                <Skeleton className="h-4 w-48" />
+                <Skeleton className="h-10 w-2/3" />
+                <Skeleton className="h-5 w-full max-w-2xl" />
+            </div>
+        );
+    }
+
+    const lessons = unitDetail?.lessons ?? [];
+    const completedCount = lessons.filter((l) => l.status === "completed").length;
+    const currentLesson = lessons.find((l) => l.status !== "completed") ?? null;
+    const progressPct = lessons.length > 0 ? Math.round((completedCount / lessons.length) * 100) : 0;
+
+    // Locked unit's own lessons/quiz — titles/durations only, a preview outline
+    // that mirrors the unlocked layout but every row opens the upsell modal.
+    const blockedLessons = unitBlockedInfo?.item?.lessons ?? [];
+    const blockedQuiz = unitBlockedInfo?.item?.quiz ?? null;
+
+    // Units always complete by passing their quiz now (registry.js hard-overrides
+    // this regardless of what's actually configured) — reflect that here too.
+    const requirementDef = TYPE_DEFS.pass_quiz;
+    const RequirementIcon = requirementDef?.icon;
+
+    const handleLessonClick = (lesson) => {
+        navigate(`/lessons/${lesson.uuid}`);
+    };
+    const handleContinue = (lesson) => {
+        navigate(`/units/${uuid}/read`, { state: { lessonId: lesson.lesson_id } });
+    };
+    const handleQuizClick = () => {
+        navigate(`/units/${uuid}/read`, { state: { quizId: true } });
+    };
+
+    return (
+        <div>
+            <PageMeta title={displayUnit ? `${displayUnit.title} - STARR` : undefined} description={displayUnit?.description} />
+            <div className="xs:py-24 xs:px-8 lg:px-0 lg:py-28 flex flex-col gap-6 lg:container lg:mx-auto lg:max-w-2xl">
+                <AppBreadcrumb items={items} />
+
+                <div className="flex flex-col gap-3">
+                    <span className="text-xs font-semibold tracking-wide text-blue-600 dark:text-blue-400 uppercase">Unit</span>
+                    <h1 className="font-bold xs:text-2xl lg:text-4xl">{displayUnit?.title ?? "Unit"}</h1>
+                    <p className="text-muted-foreground lg:text-lg">{displayUnit?.description ?? ""}</p>
+                </div>
+
+                {contentNotReady ? (
+                    <div className="flex items-center gap-2 rounded-lg border bg-muted px-4 py-2.5 text-sm text-muted-foreground w-fit">
+                        <Hourglass className="size-4 shrink-0" />
+                        This unit is currently being prepared. Please check back later.
+                    </div>
+                ) : unitBlocked ? (
+                    <>
+                        <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground [&_svg]:size-4">
+                            <span>{blockedLessons.length} {blockedLessons.length === 1 ? "lesson" : "lessons"}</span>
+                            <span>·</span>
+                            <span className="flex items-center gap-1"><Timer /> {formatDuration(displayUnit.duration_seconds) ?? "—"} total</span>
+                        </div>
+
+                        <div className="flex flex-col gap-3">
+                            <h2 className="font-bold text-xl">Lessons in this unit</h2>
+                            <LessonsRoadmap
+                                unitDetail={{ lessons: blockedLessons, quiz: blockedQuiz }}
+                                currentLessonId={blockedLessons[0]?.lesson_id}
+                                onLessonClick={() => setUpsellOpen(true)}
+                                onContinue={() => setUpsellOpen(true)}
+                                onQuizClick={() => setUpsellOpen(true)}
+                            />
+                            {blockedLessons.length > 0 && blockedLessons.length < ESTABLISHED_LESSON_COUNT && <GrowingUnitNote />}
+                        </div>
+                    </>
+                ) : (
+                    <>
+                        <div className="flex flex-col gap-2">
+                            <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground [&_svg]:size-4">
+                                <span>{lessons.length} {lessons.length === 1 ? "lesson" : "lessons"}</span>
+                                <span>·</span>
+                                <span className="flex items-center gap-1"><Timer /> {formatDuration(unitDetail.duration_seconds) ?? "—"} total</span>
+                                <span>·</span>
+                                <span className="text-blue-600 dark:text-blue-400 font-medium">{completedCount} of {lessons.length} complete</span>
+                                {requirementDef && (
+                                    <>
+                                        <span>·</span>
+                                        <span className="flex items-center gap-1">
+                                            {RequirementIcon && <RequirementIcon />} {requirementDef.label}
+                                        </span>
+                                    </>
+                                )}
+                            </div>
+                            <Progress value={progressPct} />
+                            {unitDetail.is_completed && (
+                                <div className="flex items-center gap-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400 w-fit">
+                                    <CheckCheck className="size-4" />
+                                    Success — you've completed this unit.
+                                </div>
+                            )}
+                        </div>
+
+                        <div className="flex flex-col gap-3">
+                            <h2 className="font-bold text-xl">Lessons in this unit</h2>
+                            <LessonsRoadmap
+                                unitDetail={unitDetail}
+                                currentLessonId={currentLesson?.lesson_id}
+                                onLessonClick={handleLessonClick}
+                                onContinue={handleContinue}
+                                onQuizClick={handleQuizClick}
+                            />
+                            {lessons.length > 0 && lessons.length < ESTABLISHED_LESSON_COUNT && <GrowingUnitNote />}
+                        </div>
+                    </>
+                )}
+            </div>
+
+            <UnitUpsellModal
+                open={upsellOpen}
+                onOpenChange={setUpsellOpen}
+                unit={unitBlockedInfo?.item ? {
+                    title: unitBlockedInfo.item.title,
+                    subscription: unitBlockedInfo.item.subscription,
+                    courses: unitBlockedInfo.course ? [unitBlockedInfo.course] : [],
+                } : null}
+                tierMap={tierMap}
+            />
+        </div>
+    );
+};
+
+export default UnitDetails;
diff --git a/apps/web/src/modules/client/pages/UnitList.jsx b/apps/web/src/modules/client/pages/UnitList.jsx
new file mode 100644
index 0000000..bb29416
--- /dev/null
+++ b/apps/web/src/modules/client/pages/UnitList.jsx
@@ -0,0 +1,1245 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { useParams, useNavigate, useLocation, useBlocker } from "react-router-dom";
+import { House, TableOfContents, ArrowRight, ClipboardList, GraduationCap, Trophy, Lock, CheckCircle2, CheckCheck, Circle, Zap, ListChecks, ChevronsLeft, ChevronsRight, Hourglass, HelpCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from "@/components/ui/accordion";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import ResponsiveModal from "@/components/generic/ResponsiveModal";
+import { InfoDialog } from "@/components/generic/Dialogs/Client/InfoDialog";
+import LessonBlock from "../components/LessonBlock.jsx";
+import QuizBlock from "../components/blocks/QuizBlock.jsx";
+import CourseCompleteBlock from "../components/blocks/CourseCompleteBlock.jsx";
+import MarkCompleteButton from "../components/MarkCompleteButton.jsx";
+import { useClientCourses } from "@/contexts/ClientCoursesContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import { useCourseReadingProgress } from "@/contexts/ClientCourseReadingProgressContext";
+import { useProfile } from "@/contexts/ProfileProvider";
+import { Skeleton } from "@/components/ui/skeleton";
+import { toast } from "sonner";
+import api from "@/utils/api.util";
+import { TYPE_DEFS } from "@/modules/admin/components/courses/completionRequirementTypes";
+
+// ─── Quiz Prerequisite Gate ────────────────────────────────────────────────
+
+const QuizPrerequisiteGate = ({ previousQuizzes, units, onQuizClick }) => {
+    const [open, setOpen] = useState(false);
+    const passed = previousQuizzes.filter((q) => q.has_passed).length;
+    const useModal = previousQuizzes.length > QUIZ_MODAL_THRESHOLD;
+
+    return (
+        <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
+            <div className="w-16 h-16 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center mb-4">
+                <Lock className="size-8 text-amber-500" />
+            </div>
+            <h2 className="text-xl font-bold mb-2">
+                Complete Previous {previousQuizzes.length > 1 ? "Quizzes" : "Quiz"} First
+            </h2>
+            <p className="text-muted-foreground mb-4 max-w-sm text-sm">
+                You must pass the required {previousQuizzes.length > 1 ? "quizzes" : "quiz"} before you can take this one.
+            </p>
+
+            {useModal ? (
+                <>
+                    <p className="text-sm mb-4">{passed} of {previousQuizzes.length} quizzes passed</p>
+                    <Button onClick={() => setOpen(true)}>
+                        <ClipboardList className="size-4" />
+                        View Required Quizzes
+                    </Button>
+                    <ResponsiveModal
+                        open={open}
+                        onOpenChange={setOpen}
+                        title="Required Quizzes"
+                        description={`Pass the required quizzes to unlock this one.`}
+                        hideDrawerClose={false}
+                    >
+                        <ScrollArea className="max-h-72 pr-1">
+                            <QuizGateList
+                                requiredQuizzes={previousQuizzes}
+                                units={units}
+                                onQuizClick={onQuizClick}
+                                onItemClick={() => setOpen(false)}
+                            />
+                        </ScrollArea>
+                    </ResponsiveModal>
+                </>
+            ) : (
+                <div className="w-full max-w-sm text-left">
+                    <QuizGateList
+                        requiredQuizzes={previousQuizzes}
+                        units={units}
+                        onQuizClick={onQuizClick}
+                    />
+                </div>
+            )}
+        </div>
+    );
+};
+
+// ─── Assessment Gate ───────────────────────────────────────────────────────
+
+const QUIZ_MODAL_THRESHOLD = 1;
+
+const QuizGateList = ({ requiredQuizzes, units, onQuizClick, onItemClick }) => (
+    <div className="space-y-2">
+        {requiredQuizzes.map((q) => (
+            <div
+                key={q.quizId}
+                onClick={q.has_passed ? undefined : () => {
+                    onQuizClick({ unit: units.find((u) => u.unit_id === q.unitId), quiz: { quiz_id: q.quizId } });
+                    onItemClick?.();
+                }}
+                className={`flex items-center gap-3 p-3 rounded-lg border transition-colors ${q.has_passed
+                        ? "bg-emerald-50 dark:bg-emerald-900/20 border-emerald-200 dark:border-emerald-800"
+                        : "border-border hover:bg-muted cursor-pointer"
+                    }`}
+            >
+                {q.has_passed
+                    ? <CheckCircle2 className="size-5 text-emerald-500 shrink-0" />
+                    : <Circle className="size-5 text-muted-foreground shrink-0" />
+                }
+                <span className={`text-sm font-medium flex-1 ${q.has_passed ? "text-emerald-700 dark:text-emerald-400" : ""}`}>
+                    {q.title}
+                </span>
+                {!q.has_passed && <ArrowRight className="size-4 text-muted-foreground shrink-0" />}
+            </div>
+        ))}
+    </div>
+);
+
+const AssessmentGate = ({ requiredQuizzes, units, onQuizClick }) => {
+    const [open, setOpen] = useState(false);
+    const passed = requiredQuizzes.filter((q) => q.has_passed).length;
+    const useModal = requiredQuizzes.length > QUIZ_MODAL_THRESHOLD;
+
+    return (
+        <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
+            <div className="w-16 h-16 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center mb-4">
+                <Lock className="size-8 text-amber-500" />
+            </div>
+            <h2 className="text-xl font-bold mb-2">Complete All Unit Quizzes First</h2>
+            <p className="text-muted-foreground mb-4 max-w-sm text-sm">
+                You must pass every required unit quiz before you can attempt the Final Assessment.
+            </p>
+
+            {useModal ? (
+                <>
+                    <p className="text-sm mb-4">
+                        {passed} of {requiredQuizzes.length} quizzes passed
+                    </p>
+                    <Button onClick={() => setOpen(true)}>
+                        <ClipboardList className="size-4" />
+                        View Required Quizzes
+                    </Button>
+
+                    <ResponsiveModal
+                        open={open}
+                        onOpenChange={setOpen}
+                        title="Required Quizzes"
+                        description={`Complete all ${requiredQuizzes.length} quizzes before attempting the Final Assessment.`}
+                        hideDrawerClose={false}
+                    >
+                        <ScrollArea className="max-h-72 pr-1">
+                            <QuizGateList
+                                requiredQuizzes={requiredQuizzes}
+                                units={units}
+                                onQuizClick={onQuizClick}
+                                onItemClick={() => setOpen(false)}
+                            />
+                        </ScrollArea>
+                    </ResponsiveModal>
+                </>
+            ) : (
+                <div className="w-full max-w-sm text-left">
+                    <QuizGateList
+                        requiredQuizzes={requiredQuizzes}
+                        units={units}
+                        onQuizClick={onQuizClick}
+                    />
+                </div>
+            )}
+        </div>
+    );
+};
+
+// ─── Sidebar ───────────────────────────────────────────────────────────────
+
+const SidebarContent = ({
+    units, selectedLessonId, selectedQuizId, onLessonClick, onQuizClick,
+    courseAssessment, selectedAssessment, onAssessmentClick, assessmentLocked,
+    isCompleted, selectedCompletion, onCompletionClick,
+    getLessonCompleted, getUnitCompleted, isQuizLocked,
+    loading,
+}) => (
+    <ScrollArea className="h-full p-3 md:p-4">
+        <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-2 px-2">
+            Course Content
+        </p>
+        {loading ? (
+            <div className="space-y-2 px-2 pt-1">
+                {Array.from({ length: 4 }).map((_, i) => (
+                    <Skeleton key={i} className="h-8 w-full rounded-md" />
+                ))}
+            </div>
+        ) : (
+            <>
+                <Accordion type="multiple" defaultValue={units[0] ? [`unit-${units[0].unit_id}`] : []} className="space-y-1">
+                    {units.map((unit, index) => (
+                        <AccordionItem key={unit.unit_id} value={`unit-${unit.unit_id}`} className="border-none">
+                            <AccordionTrigger className="px-3 py-2 text-sm font-semibold rounded-lg hover:bg-muted-foreground/10 hover:no-underline">
+                                <span className="flex items-center gap-2 min-w-0">
+                                    {getUnitCompleted?.(unit)
+                                        ? <CheckCircle2 className="size-4 text-emerald-500 shrink-0" />
+                                        : <Circle className="size-4 text-muted-foreground/40 shrink-0" />
+                                    }
+                                    <span className="truncate lg:w-40">Unit {index + 1}: {unit.title}</span>
+                                </span>
+                            </AccordionTrigger>
+                            <AccordionContent className="pb-1">
+                                <ul className="space-y-0.5">
+                                    {(unit.lessons ?? []).map((lesson) => {
+                                        const lessonDone = getLessonCompleted?.(lesson);
+                                        return (
+                                            <li
+                                                key={lesson.lesson_id}
+                                                onClick={() => onLessonClick({ unit, lesson })}
+                                                className={`flex items-center gap-2 pl-4 pr-3 py-1.5 text-sm rounded-md hover:bg-muted-foreground/10 hover:text-foreground cursor-pointer transition-colors ${selectedLessonId === lesson.lesson_id
+                                                    ? "bg-muted-foreground/10 text-foreground font-medium"
+                                                    : "text-muted-foreground"
+                                                    }`}
+                                            >
+                                                {lessonDone
+                                                    ? <CheckCircle2 className="size-3.5 text-emerald-500 shrink-0" />
+                                                    : <Circle className="size-3.5 text-muted-foreground/30 shrink-0" />
+                                                }
+                                                <span className="truncate lg:w-40">{lesson.title}</span>
+                                            </li>
+                                        );
+                                    })}
+                                    {unit.quiz && (() => {
+                                        const quizLocked = isQuizLocked?.(unit);
+                                        return (
+                                            <li
+                                                onClick={() => onQuizClick({ unit, quiz: unit.quiz })}
+                                                className={`flex items-center gap-2 pl-6 pr-3 py-1.5 text-sm rounded-md cursor-pointer transition-colors ${selectedQuizId === unit.quiz.quiz_id
+                                                        ? "bg-muted-foreground/10 text-foreground font-medium"
+                                                        : unit.quiz.has_passed
+                                                            ? "text-emerald-600 dark:text-emerald-400 hover:bg-muted-foreground/10"
+                                                            : quizLocked
+                                                                ? "text-muted-foreground/50 hover:bg-muted-foreground/5"
+                                                                : "text-muted-foreground hover:bg-muted-foreground/10 hover:text-foreground"
+                                                    }`}
+                                            >
+                                                {unit.quiz.has_passed
+                                                    ? <CheckCircle2 className="size-3.5 text-emerald-500 shrink-0" />
+                                                    : quizLocked
+                                                        ? <Lock className="size-3.5 text-amber-500 shrink-0" />
+                                                        : <ClipboardList className="size-3.5 shrink-0" />
+                                                }
+                                                {"Quiz"}
+                                            </li>
+                                        );
+                                    })()}
+                                </ul>
+                            </AccordionContent>
+                        </AccordionItem>
+                    ))}
+                </Accordion>
+
+                {courseAssessment && (
+                    <div className="mt-3 border-t pt-3">
+                        <div
+                            onClick={onAssessmentClick}
+                            className={`flex items-center gap-2 rounded-lg px-3 py-2.5 text-sm font-semibold cursor-pointer transition-colors ${selectedAssessment
+                                ? "bg-muted-foreground/10 text-foreground"
+                                : "hover:bg-muted-foreground/10 text-foreground"
+                                }`}
+                        >
+                            {assessmentLocked
+                                ? <Lock className="size-4 shrink-0 text-amber-500" />
+                                : <GraduationCap className="size-4 shrink-0 text-muted-foreground" />
+                            }
+                            Assessment
+                        </div>
+                    </div>
+                )}
+
+                {isCompleted && (
+                    <div className="mt-1">
+                        <div
+                            onClick={onCompletionClick}
+                            className={`flex items-center gap-2 rounded-lg px-3 py-2.5 text-sm font-semibold cursor-pointer transition-colors ${selectedCompletion
+                                ? "bg-muted-foreground/10 text-foreground"
+                                : "hover:bg-muted-foreground/10 text-foreground"
+                                }`}
+                        >
+                            <Trophy className="size-4 shrink-0 text-amber-500" />
+                            Course Complete
+                        </div>
+                    </div>
+                )}
+            </>
+        )}
+        <ScrollBar orientation="vertical" />
+    </ScrollArea>
+);
+
+// ─── UnitList ─────────────────────────────────────────────────────────────
+
+const UnitList = () => {
+    const { id: courseId } = useParams();
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const {
+        course, courseLoading, courseBlocked, getCourse,
+        lesson, lessonLoading, getLesson, resetLesson,
+        quiz, quizLoading, getUnitQuiz, resetQuiz, submitUnitQuiz, saveQuizDraft,
+        assessment, assessmentLoading, getCourseAssessment, resetAssessment, startCourseAssessment, saveDraft, refreshAssessmentSession, submitCourseAssessment,
+    } = useClientCourses();
+
+    const {
+        fetchCourseProgress,
+        upsertLessonProgress,
+        upsertWatchProgress,
+        markComplete,
+        isCompleted: isProgressCompleted,
+        isRead: isProgressRead,
+        completedTasks,
+        clearCompletedTasks,
+        resetProgress,
+    } = useCourseReadingProgress();
+
+    const { profile, getProfile } = useProfile();
+
+    // Tracks which lessons have been marked completed this session to avoid duplicate calls
+    const completedSessionRef = useRef(new Set());
+
+    // ── Task context — populated from navigation state or backend fallback ──
+    const [taskCtx, setTaskCtx] = useState(null);
+
+    // ── Local UI state ──────────────────────────────────────────────────────
+    const [selectedLessonId, setSelectedLessonId] = useState(null);
+    const [selectedQuizId, setSelectedQuizId] = useState(null);
+    const [selectedAssessment, setSelectedAssessment] = useState(false);
+    const [selectedCompletion, setSelectedCompletion] = useState(false);
+    const [selectedUnitId, setSelectedUnitId] = useState(null);
+    const [sidebarOpen, setSidebarOpen] = useState(false);
+    const [desktopSidebarOpen, setDesktopSidebarOpen] = useState(true);
+    const [helpOpen, setHelpOpen] = useState(false);
+    const [taskModeOpen, setTaskModeOpen] = useState(false);
+
+    const resetCompletion = () => setSelectedCompletion(false);
+
+    // ── Course-readiness notice — shown once per course visit, informational only ──
+    // Gated behind the "Course notices" toggle in Account Settings. Missing-quiz and
+    // no-assessment are merged into a single dialog instead of two separate popups.
+    const [courseNoticeDialogOpen, setCourseNoticeDialogOpen] = useState(false);
+    const [courseNoticeMissingQuiz, setCourseNoticeMissingQuiz] = useState(false);
+    const [courseNoticeNoAssessment, setCourseNoticeNoAssessment] = useState(false);
+    const courseNoticeShown = useRef(false);
+
+    useEffect(() => {
+        getProfile();
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    useEffect(() => {
+        courseNoticeShown.current = false;
+    }, [courseId]);
+
+    useEffect(() => {
+        const noticesEnabled =
+            course && !courseBlocked && course.duration_seconds &&
+            profile && (profile.personal_info?.show_course_notices ?? true);
+        if (!noticesEnabled || courseNoticeShown.current) return;
+
+        const missingQuiz = (course.units ?? []).some((u) => !u.quiz);
+        const noAssessment = !course.assessment;
+        if (!missingQuiz && !noAssessment) return;
+
+        courseNoticeShown.current = true;
+        setCourseNoticeMissingQuiz(missingQuiz);
+        setCourseNoticeNoAssessment(noAssessment);
+        setCourseNoticeDialogOpen(true);
+    }, [course, courseBlocked, profile]);
+
+    const courseNoticeTitle = courseNoticeMissingQuiz && courseNoticeNoAssessment
+        ? "Quizzes & Assessment Coming Soon"
+        : courseNoticeMissingQuiz
+            ? "Quizzes Coming Soon"
+            : "Assessment Coming Soon";
+
+    const courseNoticeDescription = courseNoticeMissingQuiz && courseNoticeNoAssessment
+        ? "Some units in this course don't have a quiz yet, and this course does not have an assessment built yet — we are currently working on both. You may proceed with your studies. Enjoy!"
+        : courseNoticeMissingQuiz
+            ? "Some units in this course don't have a quiz yet — we are currently working on it. You may proceed with your studies. Enjoy!"
+            : "This course does not have an assessment built yet — we are currently working on it. You may proceed with your studies. Enjoy!";
+
+    // ── Session guard — block navigation while a quiz/assessment is in progress ─
+    const quizActiveRef = useRef(false);   // sync check inside handlers
+    const [quizSessionActive, setQuizSessionActive] = useState(false);
+    const [pendingNav, setPendingNav] = useState(null);  // deferred nav fn
+
+    const setQuizActive = useCallback((active) => {
+        quizActiveRef.current = active;
+        setQuizSessionActive(active);
+    }, []);
+
+    // ── Quiz gate — all required unit quizzes must be passed before assessment ─
+    const requiredQuizzes = (course?.units ?? [])
+        .filter((u) => u.quiz?.is_required)
+        .map((u) => ({
+            unit: u,
+            unitId: u.unit_id,
+            quizId: u.quiz.quiz_id,
+            title: u.quiz.title || "Quiz",
+            has_passed: u.quiz.has_passed ?? false,
+        }));
+    const allRequiredQuizzesPassed =
+        requiredQuizzes.length === 0 || requiredQuizzes.every((q) => q.has_passed);
+
+    // ── Quiz sequential lock — unit N's quiz is locked until all previous required quizzes are passed ─
+    const lockedQuizUnitIds = new Set(
+        (course?.units ?? [])
+            .filter((u, i, arr) =>
+                u.quiz && arr.slice(0, i).some(prev => prev.quiz?.is_required && !prev.quiz.has_passed)
+            )
+            .map(u => u.unit_id)
+    );
+
+    const selectedUnitIndex = (course?.units ?? []).findIndex(u => u.unit_id === selectedUnitId);
+    const previousRequiredQuizzes = selectedUnitIndex > 0
+        ? (course?.units ?? []).slice(0, selectedUnitIndex)
+            .filter(u => u.quiz?.is_required)
+            .map(u => ({
+                unit: u,
+                unitId: u.unit_id,
+                quizId: u.quiz.quiz_id,
+                title: u.quiz.title || "Quiz",
+                has_passed: u.quiz.has_passed ?? false,
+            }))
+        : [];
+
+    // ── Block React Router navigation (back button / programmatic navigate) ──
+    const blocker = useBlocker(
+        ({ currentLocation, nextLocation }) =>
+            quizSessionActive && currentLocation.pathname !== nextLocation.pathname
+    );
+
+    useEffect(() => {
+        if (blocker.state !== "blocked") return;
+        setPendingNav(() => () => blocker.proceed());
+    }, [blocker.state]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    // ── Block browser tab-close / hard navigation during active session ───────
+    useEffect(() => {
+        if (!quizSessionActive) return;
+        const handler = (e) => { e.preventDefault(); e.returnValue = ''; };
+        window.addEventListener('beforeunload', handler);
+        return () => window.removeEventListener('beforeunload', handler);
+    }, [quizSessionActive]);
+
+    // ── Flatten all content (lessons + quiz + final assessment) ──────────────
+    const allContent = (course?.units ?? []).flatMap((u) => [
+        ...(u.lessons ?? []).map((l) => ({ type: "lesson", unit: u, lesson: l })),
+        ...(u.quiz ? [{ type: "quiz", unit: u, quiz: u.quiz }] : []),
+    ]);
+    if (course?.assessment && allRequiredQuizzesPassed) {
+        allContent.push({ type: "assessment", assessment: course.assessment });
+    }
+
+    // ── Scroll progress ────────────────────────────────────────────────────
+    const [scrollProgress, setScrollProgress] = useState(0);
+
+    useEffect(() => {
+        setScrollProgress(0);
+        window.scrollTo(0, 0);
+    }, [selectedLessonId, selectedQuizId, selectedAssessment, selectedCompletion]);
+
+    useEffect(() => {
+        // Content shorter than the viewport (nothing to scroll) used to flag 100%
+        // on the spot — but right after switching lessons the video/image blocks
+        // haven't finished loading yet, so that snapshot is often taken against a
+        // still-collapsed layout and fires a false "completed" before the real
+        // (taller) content has even rendered. Debounce a settle window and
+        // re-check before trusting it.
+        let settleTimer = null;
+
+        const evaluate = () => {
+            const scrollTop = window.scrollY;
+            const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
+
+            if (scrollHeight <= 0) {
+                if (settleTimer) return;
+                settleTimer = setTimeout(() => {
+                    settleTimer = null;
+                    const stillShort = document.documentElement.scrollHeight - window.innerHeight <= 0;
+                    if (stillShort) setScrollProgress(100);
+                }, 1200);
+                return;
+            }
+
+            if (settleTimer) { clearTimeout(settleTimer); settleTimer = null; }
+
+            // Percentage rounding alone can hit 100 a few pixels short of the real
+            // bottom (e.g. 99.5% rounds up), which was enough to auto-fire
+            // completion before the reader actually reached the end — while a "How
+            // to complete" explainer sits right there telling the learner it isn't
+            // done yet. Cap the ratio-derived value at 90 and only award the true
+            // 100 when the scroll position has actually reached the bottom.
+            const atBottom = scrollTop >= scrollHeight - 4;
+            setScrollProgress(atBottom ? 100 : Math.min(Math.round((scrollTop / scrollHeight) * 100), 90));
+        };
+
+        evaluate(); // seed a measurement — short content may never fire a scroll event
+        window.addEventListener("scroll", evaluate, { passive: true });
+
+        return () => {
+            window.removeEventListener("scroll", evaluate);
+            if (settleTimer) clearTimeout(settleTimer);
+        };
+    }, [selectedLessonId, selectedQuizId, selectedAssessment, selectedCompletion]);
+
+    // ── Lesson completion-trigger dispatch ─────────────────────────────────
+    // read_all_content (or unconfigured/default) → scroll-to-bottom, below.
+    // watch_percent / manual_complete → their own dedicated triggers further down
+    // (video/audio onWatchProgress callback, MarkCompleteButton) — the scroll
+    // trigger must NOT also fire completion for those, so it's gated here.
+    const selectedUnitStub = course?.units?.find((u) => u.unit_id === selectedUnitId);
+    const selectedLessonStub = selectedUnitStub?.lessons?.find((l) => l.lesson_id === selectedLessonId) ?? null;
+    const selectedLessonCompletionType = selectedLessonStub?.completion?.type ?? 'read_all_content';
+
+    // Quiz/assessment submits go through ClientCoursesContext, not
+    // ClientCourseReadingProgressContext, so their completed_tasks (pass_quiz can complete a
+    // read_unit/read_course task requirement with no lesson ever read) don't flow through the
+    // shared completedTasks toast effect above — surface them directly here instead.
+    const notifyCompletedTasks = useCallback((tasks) => {
+        (tasks ?? []).forEach((t) => toast(`"${t.task_name}" automatically turned in!`));
+    }, []);
+
+    // ── watch_percent / watch_video / listen_audio trigger: video/audio block
+    // reports playback progress. meta.blockId/blockType (attached by PreviewBlock)
+    // let the backend drive the per-block watch_video/listen_audio types alongside
+    // the aggregate watch_percent one — safe to always pass through, the backend
+    // no-ops whichever type isn't configured on the lesson.
+    const handleWatchProgress = useCallback((percent, meta) => {
+        if (!selectedLessonId || !selectedUnitId) return;
+        upsertWatchProgress(courseId, selectedUnitId, selectedLessonId, percent, meta);
+    }, [courseId, selectedUnitId, selectedLessonId, upsertWatchProgress]);
+
+    // ── manual_complete trigger: learner clicks the Mark Complete button ────
+    const handleMarkComplete = useCallback(async () => {
+        if (!selectedLessonId || !selectedUnitId) return;
+        const result = await markComplete(courseId, selectedUnitId, selectedLessonId);
+        if (result?.course?.status === 'completed') {
+            toast.success('All lessons read! Finish the quizzes & assessment to get certified.', { duration: 5000 });
+        }
+    }, [courseId, selectedUnitId, selectedLessonId, markComplete]);
+
+    // ── Mark lesson completed when user scrolls to the bottom ─────────────
+    useEffect(() => {
+        if (selectedLessonCompletionType !== 'read_all_content') return;
+        if (scrollProgress < 100 || !selectedLessonId || !selectedUnitId || !lesson?.uuid) return;
+        if (completedSessionRef.current.has(selectedLessonId)) return;
+        if (isProgressCompleted(lesson.uuid)) return;
+        completedSessionRef.current.add(selectedLessonId);
+        (async () => {
+            const result = await upsertLessonProgress(courseId, selectedUnitId, selectedLessonId, lesson.uuid, 'completed');
+            if (!result) return;
+            // toast.success(`"${lesson.title}" marked as read.`);
+            // if (result.unit?.status === 'completed') {
+            //     const unitTitle = currentUnit?.title;
+            //     toast.success(
+            //         unitTitle ? `Unit "${unitTitle}" complete!` : 'Unit complete!',
+            //         { duration: 4000 }
+            //     );
+            // }
+            // if (result.course?.status === 'completed') {
+            //     toast.success(
+            //         'All lessons read! Finish the quizzes & assessment to get certified.',
+            //         { duration: 5000 }
+            //     );
+            // }
+        })();
+    }, [scrollProgress]);
+
+    // ── Fetch course + progress on mount ─────────────────────────────────
+    useEffect(() => {
+        getCourse(courseId);
+        fetchCourseProgress(courseId);
+        return () => {
+            resetLesson();
+            resetQuiz();
+            resetAssessment();
+            resetProgress();
+            completedSessionRef.current.clear();
+        };
+    }, [courseId]);
+
+    // ── Task context: state-first, endpoint fallback ──────────────────────
+    // If navigated from ReadCourse the taskCtx is in location.state;
+    // if the user opened this URL directly, fetch from the backend.
+    useEffect(() => {
+        const stateCtx = location.state?.taskCtx;
+        if (stateCtx) {
+            setTaskCtx(stateCtx);
+            return;
+        }
+        api.get(`/client/courses/${courseId}/task-context`)
+            .then(({ data }) => {
+                if (data?.data?.has_task) setTaskCtx(data.data);
+            })
+            .catch(() => { });   // non-critical — silently swallow
+    }, [courseId]);
+
+    // ── Toast when a task's read requirements are all done ────────────────
+    useEffect(() => {
+        if (!completedTasks.length) return;
+        completedTasks.forEach((t) => {
+            toast(`"${t.task_name}" automatically turned in!`);
+        });
+        clearCompletedTasks();
+    }, [completedTasks]);
+
+    // ── Auto-load lesson once course data is available ────────────────────
+    // If navigated from CourseDetails with a specific lesson, open that one;
+    // otherwise fall back to the first lesson.
+    useEffect(() => {
+        if (!course || selectedLessonId || selectedQuizId || selectedAssessment || selectedCompletion) return;
+        const { lessonId, unitId, seekFirstIncomplete, quizUnitId, seekAssessment } = location.state ?? {};
+
+        if (seekAssessment && course.assessment) {
+            setSelectedAssessment(true);
+            if (allRequiredQuizzesPassed) getCourseAssessment(courseId);
+            return;
+        }
+
+        if (quizUnitId) {
+            const targetUnit = (course.units ?? []).find((u) => String(u.unit_id) === String(quizUnitId));
+            if (targetUnit?.quiz) {
+                setSelectedQuizId(targetUnit.quiz.quiz_id);
+                setSelectedUnitId(targetUnit.unit_id);
+                if (!lockedQuizUnitIds.has(targetUnit.unit_id)) getUnitQuiz(courseId, targetUnit.unit_id);
+                return;
+            }
+        }
+
+        if (seekFirstIncomplete) {
+            const firstIncompleteUnit = (course.units ?? []).find((u) => u.quiz && !u.quiz.has_passed);
+            if (firstIncompleteUnit) {
+                setSelectedQuizId(firstIncompleteUnit.quiz.quiz_id);
+                setSelectedUnitId(firstIncompleteUnit.unit_id);
+                getUnitQuiz(courseId, firstIncompleteUnit.unit_id);
+                return;
+            }
+            if (course.assessment) {
+                setSelectedAssessment(true);
+                if (allRequiredQuizzesPassed) getCourseAssessment(courseId);
+                return;
+            }
+        }
+
+        if (lessonId && unitId) {
+            setSelectedLessonId(lessonId);
+            setSelectedUnitId(unitId);
+            getLesson(courseId, unitId, lessonId);
+        } else {
+            const firstUnit = course.units?.[0];
+            const firstLesson = firstUnit?.lessons?.[0];
+            if (firstUnit && firstLesson) {
+                setSelectedLessonId(firstLesson.lesson_id);
+                setSelectedUnitId(firstUnit.unit_id);
+                getLesson(courseId, firstUnit.unit_id, firstLesson.lesson_id);
+            }
+        }
+    }, [course]);
+
+    // ── Breadcrumbs ─────────────────────────────────────────────────────────
+    const currentUnit = course?.units?.find((u) => u.unit_id === selectedUnitId);
+    const currentLesson = lesson;
+    const currentLessonStub = currentUnit?.lessons?.find((l) => l.lesson_id === selectedLessonId) ?? null;
+
+    // ── "How to complete" help text — this lesson's / this unit's / this course's
+    // configured completion requirement (or the default implicit rule).
+    // Units always complete by passing their quiz now (registry.js hard-overrides
+    // this regardless of what's actually configured) — reflect that here too.
+    const unitCompletionType = 'pass_quiz';
+    const courseCompletionType = course?.completion?.type ?? 'read_all_content';
+    const lessonRequirementText = TYPE_DEFS[selectedLessonCompletionType]?.describe('lesson');
+    const unitRequirementText = TYPE_DEFS[unitCompletionType]?.describe('unit');
+    const courseRequirementText = TYPE_DEFS[courseCompletionType]?.describe('course');
+    const pageTitle = (() => {
+        if (!course) return undefined;
+        if (selectedCompletion) return `${course.title} – Completed - STARR`;
+        if (selectedAssessment) return `${course.title} – Assessment - STARR`;
+        if (selectedQuizId && currentUnit) return `${currentUnit.title} – Quiz - STARR`;
+        const lessonTitle = lesson?.title ?? currentLessonStub?.title;
+        if (selectedLessonId && lessonTitle) return `${lessonTitle} - STARR`;
+        return `${course.title} - STARR`;
+    })();
+
+    const breadcrumbItemsFull = [
+        { label: "Home", icon: <House className="size-4" />, to: `/dashboard` },
+        { label: "Courses", to: `/course` },
+        { label: course?.title ?? "Course", to: `/course/${courseId}` },
+        {
+            label: selectedCompletion
+                ? "Course Complete"
+                : selectedAssessment
+                    ? "Course Assessment"
+                    : currentUnit ? `Unit ${(course?.units?.indexOf(currentUnit) ?? 0) + 1}: ${currentUnit.title}` : "Select a lesson"
+        },
+    ];
+    const breadcrumbItemsMobile = [
+        { label: "Home", icon: <House className="size-4" />, to: `/dashboard` },
+        { label: selectedCompletion ? "Course Complete" : selectedAssessment ? "Course Assessment" : (currentUnit?.title ?? "Select a lesson") },
+    ];
+
+    // ── Session guard helpers ──────────────────────────────────────────────
+    const handleConfirmNav = useCallback(() => {
+        const fn = pendingNav;
+        setPendingNav(null);
+        quizActiveRef.current = false;
+        setQuizSessionActive(false);
+        if (blocker.state === "blocked") blocker.proceed();
+        else fn?.();
+    }, [pendingNav, blocker]);
+
+    const handleCancelNav = useCallback(() => {
+        setPendingNav(null);
+        if (blocker.state === "blocked") blocker.reset();
+    }, [blocker]);
+
+    // ── Lesson click ───────────────────────────────────────────────────────
+    const handleLessonClick = useCallback(async ({ unit, lesson: lessonStub }) => {
+        if (lessonStub.lesson_id === selectedLessonId) { setSidebarOpen(false); return; }
+
+        const doNav = async () => {
+            setSelectedLessonId(lessonStub.lesson_id);
+            setSelectedQuizId(null);
+            setSelectedAssessment(false);
+            resetCompletion();
+            resetQuiz();
+            resetAssessment();
+            setSelectedUnitId(unit.unit_id);
+            setSidebarOpen(false);
+            await getLesson(courseId, unit.unit_id, lessonStub.lesson_id);
+            if (!isProgressRead(lessonStub.uuid)) {
+                upsertLessonProgress(courseId, unit.unit_id, lessonStub.lesson_id, lessonStub.uuid, 'in_progress');
+            }
+        };
+
+        if (quizActiveRef.current) { setPendingNav(() => doNav); return; }
+        await doNav();
+    }, [selectedLessonId, courseId, getLesson, resetQuiz, resetAssessment, isProgressRead, upsertLessonProgress]);
+
+    // ── Quiz click ─────────────────────────────────────────────────────────
+    const handleQuizClick = useCallback(async ({ unit, quiz: quizStub }) => {
+        if (quizStub.quiz_id === selectedQuizId) { setSidebarOpen(false); return; }
+
+        const doNav = async () => {
+            setSelectedQuizId(quizStub.quiz_id);
+            setSelectedLessonId(null);
+            setSelectedAssessment(false);
+            resetCompletion();
+            resetLesson();
+            resetAssessment();
+            setSelectedUnitId(unit.unit_id);
+            setSidebarOpen(false);
+            if (!lockedQuizUnitIds.has(unit.unit_id)) {
+                await getUnitQuiz(courseId, unit.unit_id);
+            }
+        };
+
+        if (quizActiveRef.current) { setPendingNav(() => doNav); return; }
+        await doNav();
+    }, [selectedQuizId, courseId, getUnitQuiz, resetLesson, resetAssessment, lockedQuizUnitIds]);
+
+    // ── Course assessment click ─────────────────────────────────────────────
+    const handleAssessmentClick = useCallback(async () => {
+        if (selectedAssessment) { setSidebarOpen(false); return; }
+
+        const doNav = async () => {
+            setSelectedAssessment(true);
+            setSelectedLessonId(null);
+            setSelectedQuizId(null);
+            resetCompletion();
+            resetLesson();
+            resetQuiz();
+            setSidebarOpen(false);
+            if (allRequiredQuizzesPassed) await getCourseAssessment(courseId);
+        };
+
+        if (quizActiveRef.current) { setPendingNav(() => doNav); return; }
+        await doNav();
+    }, [selectedAssessment, courseId, getCourseAssessment, resetLesson, resetQuiz, allRequiredQuizzesPassed]);
+
+    // ── Course complete click ───────────────────────────────────────────────
+    const handleCompletionClick = useCallback(() => {
+        if (selectedCompletion) { setSidebarOpen(false); return; }
+
+        const doNav = () => {
+            setSelectedLessonId(null);
+            setSelectedQuizId(null);
+            setSelectedAssessment(false);
+            resetLesson();
+            resetQuiz();
+            resetAssessment();
+            setSelectedCompletion(true);
+            setSidebarOpen(false);
+        };
+
+        if (quizActiveRef.current) { setPendingNav(() => doNav); return; }
+        doNav();
+    }, [selectedCompletion, resetLesson, resetQuiz, resetAssessment]);
+
+    // Stable draft callbacks — avoids recreating on every render (which would re-trigger QuizBlock's onDraft effect)
+    const handleQuizDraft = useCallback((answers) => {
+        saveQuizDraft(courseId, selectedUnitId, selectedQuizId, answers);
+    }, [courseId, selectedUnitId, selectedQuizId, saveQuizDraft]);
+
+    const handleAssessmentDraft = useCallback((answers) => {
+        if (!assessment?.assessment_id) return;
+        saveDraft(courseId, assessment.assessment_id, answers);
+    }, [courseId, assessment?.assessment_id, saveDraft]);
+
+    // ── Next content item (lesson, quiz, or final assessment) ─────────────
+    const getNextContent = useCallback(() => {
+        const idx = allContent.findIndex((item) =>
+            (item.type === "lesson" && item.lesson.lesson_id === selectedLessonId) ||
+            (item.type === "quiz" && item.quiz.quiz_id === selectedQuizId) ||
+            (item.type === "assessment" && selectedAssessment)
+        );
+        return idx !== -1 && idx < allContent.length - 1 ? allContent[idx + 1] : null;
+    }, [selectedLessonId, selectedQuizId, selectedAssessment, allContent]);
+
+    const units = course?.units ?? [];
+    const nextContent = getNextContent();
+    const nextLabel = nextContent
+        ? nextContent.type === "lesson" ? nextContent.lesson.title
+            : nextContent.type === "quiz" ? (nextContent.quiz.title || "Quiz")
+                : (nextContent.assessment?.title || "Course Assessment")
+        : null;
+    const showSidebarContent = desktopSidebarOpen && !quizSessionActive;
+
+    const handleNextContentClick = () => {
+        if (!nextContent) return;
+        if (nextContent.type === "lesson") handleLessonClick(nextContent);
+        else if (nextContent.type === "quiz") handleQuizClick(nextContent);
+        else handleAssessmentClick();
+    };
+
+    // ── Access blocked (403 from getCourse) ──────────────────────────────────
+    if (courseBlocked) {
+        return (
+            <div className="flex flex-col items-center gap-6 py-32 text-center px-4">
+                <div className="h-16 w-16 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
+                    <Lock className="size-7 text-amber-500" />
+                </div>
+                <div className="space-y-2 max-w-sm">
+                    <h2 className="text-xl font-semibold">Premium / Exclusive Content</h2>
+                    <p className="text-sm text-muted-foreground leading-relaxed">
+                        To take this course, we advise you to subscribe to one of our available tier plans and unlock access to this content.
+                    </p>
+                </div>
+                <div className="flex flex-col items-center gap-2">
+                    <Button onClick={() => navigate('/subscriptions')} className="gap-1.5">
+                        <Zap className="size-4" /> View Available Plans
+                    </Button>
+                    <p className="text-xs text-muted-foreground">Already subscribed? Your plan may not cover this subscription.</p>
+                </div>
+            </div>
+        );
+    }
+
+    // ── Content not ready (duration_seconds === 0 — no lesson content authored yet) ──
+    if (!courseLoading && course && !course.duration_seconds) {
+        return (
+            <div className="flex flex-col items-center gap-6 py-32 text-center px-4">
+                <div className="h-16 w-16 rounded-full bg-muted flex items-center justify-center">
+                    <Hourglass className="size-7 text-muted-foreground" />
+                </div>
+                <div className="space-y-2 max-w-sm">
+                    <h2 className="text-xl font-semibold">Course Not Yet Available</h2>
+                    <p className="text-sm text-muted-foreground leading-relaxed">
+                        This course is currently being prepared. Please check back later.
+                    </p>
+                </div>
+                <Button variant="outline" onClick={() => navigate(`/course/${courseId}`)} className="gap-1.5">
+                    Back to Course Details
+                </Button>
+            </div>
+        );
+    }
+
+    return (
+        <>
+            <PageMeta title={pageTitle} />
+
+            {/* ── Session-guard dialog — shown when user tries to navigate away mid-quiz ── */}
+            <ResponsiveModal
+                open={!!pendingNav || blocker.state === "blocked"}
+                onOpenChange={(open) => !open && handleCancelNav()}
+                title={`Leave ${selectedAssessment ? "Assessment" : "Quiz"}?`}
+                description=""
+                footer={
+                    <>
+                        <Button variant="outline" onClick={handleCancelNav}>
+                            Stay
+                        </Button>
+                        <Button variant="destructive" onClick={handleConfirmNav}>
+                            Leave Anyway
+                        </Button>
+                    </>
+                }
+            >
+                <div className="space-y-3 text-sm text-muted-foreground">
+                    <p>
+                        You have an ongoing <strong className="text-foreground">{selectedAssessment ? "assessment" : "quiz"}</strong> session in progress.
+                        Leaving now will not submit your answers — your session will remain open and the administrator can see it.
+                    </p>
+                    {selectedAssessment && (
+                        <p className="text-amber-600 dark:text-amber-400 font-medium">
+                            Your assessment timer will keep counting while you're away.
+                        </p>
+                    )}
+                </div>
+            </ResponsiveModal>
+
+            {/* ── Course-readiness notice — informational, shown once per course visit ── */}
+            <InfoDialog
+                open={courseNoticeDialogOpen}
+                onOpenChange={setCourseNoticeDialogOpen}
+                title={courseNoticeTitle}
+                description={courseNoticeDescription}
+            />
+
+            {/* ── "How to complete" help dialog ── */}
+            <ResponsiveModal
+                open={helpOpen}
+                onOpenChange={setHelpOpen}
+                title="How to complete this content"
+                description=""
+                footer={<Button onClick={() => setHelpOpen(false)}>Got it</Button>}
+            >
+                <div className="space-y-3 text-sm">
+                    <div className="flex items-start gap-3 rounded-lg border p-3">
+                        {(() => {
+                            const Icon = TYPE_DEFS[selectedLessonCompletionType]?.icon;
+                            return Icon ? <Icon className="size-4 mt-0.5 text-muted-foreground shrink-0" /> : null;
+                        })()}
+                        <div>
+                            <p className="font-medium">This lesson</p>
+                            <p className="text-muted-foreground">{lessonRequirementText}</p>
+                        </div>
+                    </div>
+                    <div className="flex items-start gap-3 rounded-lg border p-3">
+                        {(() => {
+                            const Icon = TYPE_DEFS[unitCompletionType]?.icon;
+                            return Icon ? <Icon className="size-4 mt-0.5 text-muted-foreground shrink-0" /> : null;
+                        })()}
+                        <div>
+                            <p className="font-medium">This unit</p>
+                            <p className="text-muted-foreground">{unitRequirementText}</p>
+                            {currentUnit?.quiz && unitCompletionType !== 'pass_quiz' && (
+                                <p className="text-muted-foreground mt-1">
+                                    This unit also has a quiz — passing it is tracked separately from the unit's completion status.
+                                </p>
+                            )}
+                        </div>
+                    </div>
+                    <div className="flex items-start gap-3 rounded-lg border p-3">
+                        {(() => {
+                            const Icon = TYPE_DEFS[courseCompletionType]?.icon;
+                            return Icon ? <Icon className="size-4 mt-0.5 text-muted-foreground shrink-0" /> : null;
+                        })()}
+                        <div>
+                            <p className="font-medium">This course</p>
+                            <p className="text-muted-foreground">{courseRequirementText}</p>
+                            {course?.assessment && courseCompletionType !== 'pass_quiz' && (
+                                <p className="text-muted-foreground mt-1">
+                                    This course also has a final assessment — passing it is tracked separately from the course's completion status.
+                                </p>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </ResponsiveModal>
+
+            {/* ── "Task mode" info dialog ── */}
+            <ResponsiveModal
+                open={taskModeOpen}
+                onOpenChange={setTaskModeOpen}
+                title="Task mode"
+                description=""
+                footer={<Button onClick={() => setTaskModeOpen(false)}>Got it</Button>}
+            >
+                <div className="space-y-3 text-sm text-muted-foreground">
+                    <p>
+                        This course is part of one of your assigned <strong className="text-foreground">tasks</strong>.
+                        Your reading and completion progress here is being tracked automatically — no need to do anything extra.
+                    </p>
+                </div>
+            </ResponsiveModal>
+
+            {/* ── Up next after passing a quiz ── */}
+            {selectedQuizId && quiz?.has_passed && !quizSessionActive && nextContent && (
+                <div className="fixed bottom-6 right-6 z-20 animate-in fade-in slide-in-from-bottom-2 duration-300">
+                    <div
+                        onClick={handleNextContentClick}
+                        className="flex items-center gap-3 bg-card border rounded-xl dark:hover:border-blue-500 dark:hover:shadow-blue-500 px-4 py-3 shadow-xl hover:bg-muted transition-colors text-sm font-medium cursor-pointer select-none"
+                    >
+                        <div className="flex flex-col items-start">
+                            <span className="text-sm text-muted-foreground font-normal">Up next</span>
+                            {nextContent.type === "lesson" ? nextContent.lesson.title
+                                : nextContent.type === "quiz" ? (nextContent.quiz.title || "Quiz")
+                                    : (nextContent.assessment?.title || "Course Assessment")}
+                        </div>
+                        <ArrowRight className="size-4 text-muted-foreground" />
+                    </div>
+                </div>
+            )}
+
+            {/* ── Top sticky bar ── */}
+            <div className="fixed top-[67px] left-0 right-0 z-40 bg-card border-b py-3 px-4 md:px-6">
+                <div className="w-full flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-2 justify-between w-full">
+
+                        {/* Breadcrumb */}
+                        <div className="hidden sm:block min-w-0">
+                            <AppBreadcrumb items={breadcrumbItemsFull} />
+                        </div>
+                        <div className="sm:hidden min-w-0 truncate">
+                            <AppBreadcrumb items={breadcrumbItemsMobile} />
+                        </div>
+
+                        <div className="hidden lg:flex items-center gap-2 shrink-0">
+                            {taskCtx?.has_task && (
+                                course?.is_completed ? (
+                                    <div className="flex items-center gap-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400 shrink-0">
+                                        <CheckCheck className="size-4" />
+                                        Task complete
+                                    </div>
+                                ) : (
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        className="flex items-center gap-1.5 text-blue-600 dark:text-blue-400 shrink-0"
+                                        onClick={() => setTaskModeOpen(true)}
+                                    >
+                                        <ListChecks className="size-4" />
+                                        Task mode
+                                    </Button>
+                                )
+                            )}
+
+                            {!selectedQuizId && !selectedAssessment && !selectedCompletion && lesson && (
+                                isProgressCompleted(lesson.uuid) ? (
+                                    <div className="flex items-center gap-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400 shrink-0">
+                                        <CheckCheck className="size-4" />
+                                        Done
+                                    </div>
+                                ) : (
+                                    <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className="flex items-center gap-1.5 text-muted-foreground shrink-0"
+                                        onClick={() => setHelpOpen(true)}
+                                    >
+                                        <HelpCircle className="size-4" />
+                                        How to complete
+                                    </Button>
+                                )
+                            )}
+                        </div>
+
+                        {/* Mobile hamburger */}
+                        <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
+                            <SheetTrigger asChild>
+                                <Button
+                                    variant="outline"
+                                    size="icon"
+                                    className="lg:hidden flex-shrink-0"
+                                    aria-label="Open course content"
+                                >
+                                    <TableOfContents className="size-4" />
+                                </Button>
+                            </SheetTrigger>
+                            <SheetContent side="left" className="p-0 w-80">
+                                <SidebarContent
+                                    units={units}
+                                    selectedLessonId={selectedLessonId}
+                                    selectedQuizId={selectedQuizId}
+                                    onLessonClick={handleLessonClick}
+                                    onQuizClick={handleQuizClick}
+                                    courseAssessment={course?.assessment}
+                                    selectedAssessment={selectedAssessment}
+                                    onAssessmentClick={handleAssessmentClick}
+                                    assessmentLocked={!allRequiredQuizzesPassed}
+                                    isCompleted={course?.is_completed}
+                                    selectedCompletion={selectedCompletion}
+                                    onCompletionClick={handleCompletionClick}
+                                    getLessonCompleted={(l) => isProgressCompleted(l.uuid)}
+                                    getUnitCompleted={(u) => isProgressCompleted(u.uuid)}
+                                    isQuizLocked={(u) => lockedQuizUnitIds.has(u.unit_id)}
+                                    loading={courseLoading}
+                                />
+                            </SheetContent>
+                        </Sheet>
+                    </div>
+                </div>
+
+                {/* Scroll progress bar */}
+                {lesson && (
+                    <div className="absolute bottom-0 left-0 right-0 h-1 bg-border">
+                        <div
+                            className="h-full bg-primary transition-all duration-150 ease-out"
+                            style={{ width: `${scrollProgress}%` }}
+                        />
+                    </div>
+                )}
+            </div>
+
+            {/* ── Desktop sidebar: rail + collapsible content panel (desktop only) ── */}
+            <div className="hidden lg:flex flex-row fixed top-[112px] bottom-0 left-0 z-30 bg-muted border-r">
+                {/* Rail — always visible */}
+                <div className="w-14 shrink-0 flex flex-col items-center pt-3">
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        className="size-8"
+                        onClick={() => setDesktopSidebarOpen((prev) => !prev)}
+                        disabled={quizSessionActive}
+                        title={showSidebarContent ? "Collapse sidebar" : "Expand sidebar"}
+                    >
+                        {showSidebarContent
+                            ? <ChevronsLeft className="size-4" />
+                            : <ChevronsRight className="size-4" />
+                        }
+                    </Button>
+                </div>
+
+                {/* Content panel — hidden during quiz / assessment session */}
+                {showSidebarContent && (
+                    <div className="w-[266px] border-l overflow-hidden">
+                        <SidebarContent
+                            units={units}
+                            selectedLessonId={selectedLessonId}
+                            selectedQuizId={selectedQuizId}
+                            onLessonClick={handleLessonClick}
+                            onQuizClick={handleQuizClick}
+                            courseAssessment={course?.assessment}
+                            selectedAssessment={selectedAssessment}
+                            onAssessmentClick={handleAssessmentClick}
+                            assessmentLocked={!allRequiredQuizzesPassed}
+                            isCompleted={course?.is_completed}
+                            selectedCompletion={selectedCompletion}
+                            onCompletionClick={handleCompletionClick}
+                            getLessonCompleted={(l) => isProgressCompleted(l.uuid)}
+                            getUnitCompleted={(u) => isProgressCompleted(u.uuid)}
+                            isQuizLocked={(u) => lockedQuizUnitIds.has(u.unit_id)}
+                            loading={courseLoading}
+                        />
+                    </div>
+                )}
+            </div>
+
+            {/* ── Main content ── */}
+            <div className={`mt-32 ${showSidebarContent ? "lg:ml-80" : "lg:ml-14"} p-4 md:p-6 min-h-screen`}>
+                <div className="relative w-full h-full mx-auto max-w-2xl">
+                    {selectedCompletion ? (
+                        <CourseCompleteBlock course={course} />
+                    ) : selectedAssessment ? (
+                        !allRequiredQuizzesPassed ? (
+                            <AssessmentGate
+                                requiredQuizzes={requiredQuizzes}
+                                units={units}
+                                onQuizClick={handleQuizClick}
+                            />
+                        ) : (
+                            <QuizBlock
+                                quiz={assessment ? { ...assessment, quiz_id: assessment.assessment_id } : null}
+                                loading={assessmentLoading}
+                                label="Assessment"
+                                onStart={() => startCourseAssessment(courseId, assessment.assessment_id)}
+                                onDraft={handleAssessmentDraft}
+                                onRefreshSession={() => refreshAssessmentSession(courseId, assessment.assessment_id)}
+                                onSubmit={async (answers, sessionId) => {
+                                    const result = await submitCourseAssessment(courseId, assessment.assessment_id, answers, sessionId);
+                                    notifyCompletedTasks(result?.completed_tasks);
+                                    await getCourse(courseId);
+                                    return result;
+                                }}
+                                onRetake={() => getCourseAssessment(courseId)}
+                                onActiveChange={setQuizActive}
+                                onNextContent={nextContent ? handleNextContentClick : undefined}
+                                nextLabel={nextLabel}
+                            />
+                        )
+                    ) : selectedQuizId ? (
+                        lockedQuizUnitIds.has(selectedUnitId) ? (
+                            <QuizPrerequisiteGate
+                                previousQuizzes={previousRequiredQuizzes}
+                                units={units}
+                                onQuizClick={handleQuizClick}
+                            />
+                        ) : (
+                            <QuizBlock
+                                quiz={quiz}
+                                loading={quizLoading}
+                                onDraft={handleQuizDraft}
+                                onSubmit={async (answers) => {
+                                    const result = await submitUnitQuiz(courseId, selectedUnitId, selectedQuizId, answers);
+                                    notifyCompletedTasks(result?.completed_tasks);
+                                    await getCourse(courseId);
+                                    return result;
+                                }}
+                                onRetake={() => getUnitQuiz(courseId, selectedUnitId)}
+                                onActiveChange={setQuizActive}
+                                onNextContent={nextContent ? handleNextContentClick : undefined}
+                                nextLabel={nextLabel}
+                            />
+                        )
+                    ) : (
+                        <>
+                            <LessonBlock
+                                lesson={lesson ? { ...lesson, blocks: lesson.page?.blocks ?? [] } : null}
+                                loading={lessonLoading}
+                                onWatchProgress={['watch_percent', 'watch_video', 'listen_audio'].includes(selectedLessonCompletionType) ? handleWatchProgress : undefined}
+                            />
+                            {!lessonLoading && lesson && selectedLessonCompletionType === 'manual_complete' && (
+                                <MarkCompleteButton
+                                    label={selectedLessonStub?.completion?.button_label}
+                                    completed={isProgressCompleted(lesson.uuid)}
+                                    onMarkComplete={handleMarkComplete}
+                                />
+                            )}
+                            {!lessonLoading && lesson && scrollProgress >= 100 && nextContent && (
+                                <div className="max-w-2xl mx-auto mt-5 animate-in fade-in slide-in-from-bottom-2 duration-300">
+                                    <div
+                                        onClick={handleNextContentClick}
+                                        className="flex items-center gap-3 bg-card border rounded-xl px-4 py-3 shadow-sm hover:bg-muted transition-colors text-sm font-medium cursor-pointer select-none"
+                                    >
+                                        <div className="flex flex-col items-start flex-1">
+                                            <span className="text-xs text-muted-foreground font-normal">Up next</span>
+                                            <span>{nextLabel}</span>
+                                        </div>
+                                        <ArrowRight className="size-4 text-muted-foreground shrink-0" />
+                                    </div>
+                                </div>
+                            )}
+                        </>
+                    )}
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default UnitList;
\ No newline at end of file
diff --git a/apps/web/src/modules/client/pages/UnitReader.jsx b/apps/web/src/modules/client/pages/UnitReader.jsx
new file mode 100644
index 0000000..07c0259
--- /dev/null
+++ b/apps/web/src/modules/client/pages/UnitReader.jsx
@@ -0,0 +1,661 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { useParams, useNavigate, useLocation, useBlocker } from "react-router-dom";
+import { House, TableOfContents, ArrowRight, ClipboardList, Lock, CheckCircle2, CheckCheck, Circle, Zap, ChevronsLeft, ChevronsRight, Hourglass, ListChecks, HelpCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import ResponsiveModal from "@/components/generic/ResponsiveModal";
+import LessonBlock from "../components/LessonBlock.jsx";
+import QuizBlock from "../components/blocks/QuizBlock.jsx";
+import MarkCompleteButton from "../components/MarkCompleteButton.jsx";
+import { useLibrary } from "@/contexts/ClientLibraryContext";
+import { PageMeta } from "@/contexts/MetadataContext";
+import { Skeleton } from "@/components/ui/skeleton";
+import { toast } from "sonner";
+import api from "@/utils/api.util";
+import { TYPE_DEFS } from "@/modules/admin/components/courses/completionRequirementTypes";
+
+// ─── Sidebar (single unit — flat lessons + quiz, no unit-accordion nesting) ──
+
+const SidebarContent = ({
+    lessons, quiz, selectedLessonId, selectedQuizId,
+    onLessonClick, onQuizClick, loading,
+}) => (
+    <ScrollArea className="h-full p-3 md:p-4">
+        <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-2 px-2">
+            Unit Content
+        </p>
+        {loading ? (
+            <div className="space-y-2 px-2 pt-1">
+                {Array.from({ length: 4 }).map((_, i) => (
+                    <Skeleton key={i} className="h-8 w-full rounded-md" />
+                ))}
+            </div>
+        ) : (
+            <ul className="space-y-0.5">
+                {lessons.map((lesson) => (
+                    <li
+                        key={lesson.lesson_id}
+                        onClick={() => onLessonClick(lesson)}
+                        className={`flex items-center gap-2 pl-3 pr-3 py-1.5 text-sm rounded-md hover:bg-muted-foreground/10 hover:text-foreground cursor-pointer transition-colors ${selectedLessonId === lesson.lesson_id
+                            ? "bg-muted-foreground/10 text-foreground font-medium"
+                            : "text-muted-foreground"
+                            }`}
+                    >
+                        {lesson.status === "completed"
+                            ? <CheckCircle2 className="size-3.5 text-emerald-500 shrink-0" />
+                            : <Circle className="size-3.5 text-muted-foreground/30 shrink-0" />
+                        }
+                        <span className="truncate lg:w-44">{lesson.title}</span>
+                    </li>
+                ))}
+                {quiz && (
+                    <li
+                        onClick={onQuizClick}
+                        className={`flex items-center gap-2 pl-3 pr-3 py-1.5 text-sm rounded-md cursor-pointer transition-colors ${selectedQuizId
+                            ? "bg-muted-foreground/10 text-foreground font-medium"
+                            : quiz.has_passed
+                                ? "text-emerald-600 dark:text-emerald-400 hover:bg-muted-foreground/10"
+                                : "text-muted-foreground hover:bg-muted-foreground/10 hover:text-foreground"
+                            }`}
+                    >
+                        {quiz.has_passed
+                            ? <CheckCircle2 className="size-3.5 text-emerald-500 shrink-0" />
+                            : <ClipboardList className="size-3.5 shrink-0" />
+                        }
+                        {quiz.title || "Quiz"}
+                    </li>
+                )}
+            </ul>
+        )}
+        <ScrollBar orientation="vertical" />
+    </ScrollArea>
+);
+
+// ─── UnitReader ─────────────────────────────────────────────────────────────
+
+const UnitReader = () => {
+    const { uuid } = useParams();
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const {
+        unitDetail, unitDetailLoading, unitBlocked, getUnitDetail, resetUnitDetail,
+        lesson, lessonLoading, getLesson, resetLesson,
+        quiz, quizLoading, getUnitQuiz, resetQuiz, submitUnitQuiz, saveUnitQuizDraft,
+        upsertLessonProgress, upsertWatchProgress, markComplete,
+    } = useLibrary();
+
+    // Tracks which lessons have been marked completed this session to avoid duplicate calls
+    const completedSessionRef = useRef(new Set());
+
+    // ── Task context: state-first, endpoint fallback — same pattern as UnitList.jsx.
+    // If navigated here from a task's requirement card, taskCtx is in location.state;
+    // if the user opened this unit directly (e.g. from /units), fetch it instead, so
+    // the "Task mode" banner still shows up when this unit is a task requirement.
+    const [taskCtx, setTaskCtx] = useState(null);
+    useEffect(() => {
+        const stateCtx = location.state?.taskCtx;
+        if (stateCtx) { setTaskCtx(stateCtx); return; }
+        api.get(`/client/courses/unit/uuid/${uuid}/task-context`)
+            .then(({ data }) => { if (data?.data?.has_task) setTaskCtx(data.data); })
+            .catch(() => {}); // non-critical — silently swallow
+    }, [uuid]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    // ── Local UI state ──────────────────────────────────────────────────────
+    const [selectedLessonId, setSelectedLessonId] = useState(null);
+    const [selectedQuizId, setSelectedQuizId] = useState(null);
+    const [sidebarOpen, setSidebarOpen] = useState(false);
+    const [desktopSidebarOpen, setDesktopSidebarOpen] = useState(true);
+    const [helpOpen, setHelpOpen] = useState(false);
+
+    // ── Session guard — block navigation while a quiz is in progress ─────────
+    const quizActiveRef = useRef(false);
+    const [quizSessionActive, setQuizSessionActive] = useState(false);
+    const [pendingNav, setPendingNav] = useState(null);
+
+    const setQuizActive = useCallback((active) => {
+        quizActiveRef.current = active;
+        setQuizSessionActive(active);
+    }, []);
+
+    const blocker = useBlocker(
+        ({ currentLocation, nextLocation }) =>
+            quizSessionActive && currentLocation.pathname !== nextLocation.pathname
+    );
+
+    useEffect(() => {
+        if (blocker.state !== "blocked") return;
+        setPendingNav(() => () => blocker.proceed());
+    }, [blocker.state]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    useEffect(() => {
+        if (!quizSessionActive) return;
+        const handler = (e) => { e.preventDefault(); e.returnValue = ''; };
+        window.addEventListener('beforeunload', handler);
+        return () => window.removeEventListener('beforeunload', handler);
+    }, [quizSessionActive]);
+
+    // ── Flatten content: lessons + optional quiz ──────────────────────────
+    const lessons = unitDetail?.lessons ?? [];
+    const allContent = [
+        ...lessons.map((l) => ({ type: "lesson", lesson: l })),
+        ...(unitDetail?.quiz ? [{ type: "quiz", quiz: unitDetail.quiz }] : []),
+    ];
+
+    // ── Scroll progress ────────────────────────────────────────────────────
+    const [scrollProgress, setScrollProgress] = useState(0);
+
+    useEffect(() => {
+        setScrollProgress(0);
+        window.scrollTo(0, 0);
+    }, [selectedLessonId, selectedQuizId]);
+
+    useEffect(() => {
+        // Content shorter than the viewport (nothing to scroll) used to flag 100%
+        // on the spot — but right after switching lessons the video/image blocks
+        // haven't finished loading yet, so that snapshot is often taken against a
+        // still-collapsed layout and fires a false "completed" before the real
+        // (taller) content has even rendered. Debounce a settle window and
+        // re-check before trusting it.
+        let settleTimer = null;
+
+        const evaluate = () => {
+            const scrollTop = window.scrollY;
+            const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
+
+            if (scrollHeight <= 0) {
+                if (settleTimer) return;
+                settleTimer = setTimeout(() => {
+                    settleTimer = null;
+                    const stillShort = document.documentElement.scrollHeight - window.innerHeight <= 0;
+                    if (stillShort) setScrollProgress(100);
+                }, 1200);
+                return;
+            }
+
+            if (settleTimer) { clearTimeout(settleTimer); settleTimer = null; }
+
+            // Percentage rounding alone can hit 100 a few pixels short of the real
+            // bottom (e.g. 99.5% rounds up), which was enough to auto-fire
+            // completion before the reader actually reached the end — while a "How
+            // to complete" explainer sits right there telling the learner it isn't
+            // done yet. Cap the ratio-derived value at 90 and only award the true
+            // 100 when the scroll position has actually reached the bottom.
+            const atBottom = scrollTop >= scrollHeight - 4;
+            setScrollProgress(atBottom ? 100 : Math.min(Math.round((scrollTop / scrollHeight) * 100), 90));
+        };
+
+        evaluate(); // seed a measurement — short content may never fire a scroll event
+        window.addEventListener("scroll", evaluate, { passive: true });
+
+        return () => {
+            window.removeEventListener("scroll", evaluate);
+            if (settleTimer) clearTimeout(settleTimer);
+        };
+    }, [selectedLessonId, selectedQuizId]);
+
+    // ── Lesson completion-trigger dispatch (mirrors UnitList.jsx) ──────────
+    // read_all_content (or unconfigured/default) → scroll-to-bottom, below.
+    // watch_percent / manual_complete → their own dedicated triggers — the scroll
+    // trigger must NOT also fire completion for those, so it's gated here.
+    const lessonCompletionType = lesson?.completion?.type ?? 'read_all_content';
+
+    // ── "How to complete" help text — explains this lesson's and this unit's
+    // configured completion requirement (or the default implicit rule).
+    // Units always complete by passing their quiz now (registry.js hard-overrides
+    // this regardless of what's actually configured) — reflect that here too.
+    const unitCompletionType = 'pass_quiz';
+    const lessonRequirementText = TYPE_DEFS[lessonCompletionType]?.describe('lesson');
+    const unitRequirementText = TYPE_DEFS[unitCompletionType]?.describe('unit');
+
+    // ── Mark lesson completed when user scrolls to the bottom ─────────────
+    useEffect(() => {
+        if (lessonCompletionType !== 'read_all_content') return;
+        if (scrollProgress < 100 || !selectedLessonId || !lesson?.uuid) return;
+        if (completedSessionRef.current.has(selectedLessonId)) return;
+        const stub = lessons.find((l) => l.lesson_id === selectedLessonId);
+        if (stub?.status === 'completed') return;
+        completedSessionRef.current.add(selectedLessonId);
+        // Trust the server's evaluated unit status, not a local "all fetched
+        // lessons read" re-derivation — that drifted from the real completion
+        // requirement (e.g. a unit needing its quiz passed too) and fired a
+        // premature "Unit complete!" toast. Same fix already applied to
+        // upsertLessonProgress's own unitDetail update; UnitList.jsx's
+        // handleMarkComplete already uses this authoritative pattern.
+        upsertLessonProgress(lesson.uuid, 'completed', uuid).then((result) => {
+            if (result?.unit?.status === 'completed') {
+                toast.success('Unit complete!', { duration: 4000 });
+            }
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [scrollProgress]);
+
+    // ── Fetch unit + reset on unmount ──────────────────────────────────────
+    useEffect(() => {
+        getUnitDetail(uuid);
+        return () => {
+            resetUnitDetail();
+            resetLesson();
+            resetQuiz();
+            completedSessionRef.current.clear();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [uuid]);
+
+    // ── Auto-load lesson once unit data is available ───────────────────────
+    useEffect(() => {
+        if (!unitDetail || selectedLessonId || selectedQuizId) return;
+        const { lessonId, quizId } = location.state ?? {};
+
+        if (quizId && unitDetail.quiz) {
+            setSelectedQuizId(unitDetail.quiz.quiz_id);
+            getUnitQuiz(uuid);
+            return;
+        }
+
+        if (lessonId) {
+            const target = lessons.find((l) => l.lesson_id === lessonId);
+            if (target) {
+                setSelectedLessonId(target.lesson_id);
+                getLesson(target.uuid);
+                return;
+            }
+        }
+
+        const firstIncomplete = lessons.find((l) => l.status !== 'completed') ?? lessons[0];
+        if (firstIncomplete) {
+            setSelectedLessonId(firstIncomplete.lesson_id);
+            getLesson(firstIncomplete.uuid);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [unitDetail]);
+
+    // ── Breadcrumbs ─────────────────────────────────────────────────────────
+    const currentLessonStub = lessons.find((l) => l.lesson_id === selectedLessonId) ?? null;
+    const pageTitle = (() => {
+        if (!unitDetail) return undefined;
+        if (selectedQuizId) return `${unitDetail.title} – Quiz - STARR`;
+        const lessonTitle = lesson?.title ?? currentLessonStub?.title;
+        if (selectedLessonId && lessonTitle) return `${lessonTitle} - STARR`;
+        return `${unitDetail.title} - STARR`;
+    })();
+
+    const breadcrumbItemsFull = [
+        { label: "Home", icon: <House className="size-4" />, to: `/dashboard` },
+        { label: "Units", to: `/units` },
+        { label: unitDetail?.title ?? "Unit", to: `/units/${uuid}` },
+        { label: selectedQuizId ? "Quiz" : (currentLessonStub?.title ?? "Select a lesson") },
+    ];
+    const breadcrumbItemsMobile = [
+        { label: "Home", icon: <House className="size-4" />, to: `/dashboard` },
+        { label: selectedQuizId ? "Quiz" : (currentLessonStub?.title ?? unitDetail?.title ?? "Unit") },
+    ];
+
+    // ── Session guard helpers ──────────────────────────────────────────────
+    const handleConfirmNav = useCallback(() => {
+        const fn = pendingNav;
+        setPendingNav(null);
+        quizActiveRef.current = false;
+        setQuizSessionActive(false);
+        if (blocker.state === "blocked") blocker.proceed();
+        else fn?.();
+    }, [pendingNav, blocker]);
+
+    const handleCancelNav = useCallback(() => {
+        setPendingNav(null);
+        if (blocker.state === "blocked") blocker.reset();
+    }, [blocker]);
+
+    // ── Lesson click ───────────────────────────────────────────────────────
+    const handleLessonClick = useCallback(async (lessonStub) => {
+        if (lessonStub.lesson_id === selectedLessonId) { setSidebarOpen(false); return; }
+
+        const doNav = async () => {
+            setSelectedLessonId(lessonStub.lesson_id);
+            setSelectedQuizId(null);
+            resetQuiz();
+            setSidebarOpen(false);
+            await getLesson(lessonStub.uuid);
+        };
+
+        if (quizActiveRef.current) { setPendingNav(() => doNav); return; }
+        await doNav();
+    }, [selectedLessonId, getLesson, resetQuiz]);
+
+    // ── Quiz click ─────────────────────────────────────────────────────────
+    const handleQuizClick = useCallback(async () => {
+        if (selectedQuizId) { setSidebarOpen(false); return; }
+
+        const doNav = async () => {
+            setSelectedQuizId(unitDetail.quiz.quiz_id);
+            setSelectedLessonId(null);
+            resetLesson();
+            setSidebarOpen(false);
+            await getUnitQuiz(uuid);
+        };
+
+        if (quizActiveRef.current) { setPendingNav(() => doNav); return; }
+        await doNav();
+    }, [selectedQuizId, uuid, getUnitQuiz, resetLesson, unitDetail]);
+
+    const handleQuizDraft = useCallback((answers) => {
+        saveUnitQuizDraft(uuid, selectedQuizId, answers);
+    }, [uuid, selectedQuizId, saveUnitQuizDraft]);
+
+    // watch_percent / watch_video / listen_audio — safe to always pass through, the
+    // backend no-ops whichever type (if any) isn't configured on this lesson.
+    const handleWatchProgress = useCallback((percent, meta) => {
+        if (!lesson?.uuid) return;
+        upsertWatchProgress(lesson.uuid, uuid, percent, meta);
+    }, [lesson, uuid, upsertWatchProgress]);
+
+    // ── manual_complete trigger: learner clicks the Mark Complete button ────
+    const handleMarkComplete = useCallback(async () => {
+        if (!lesson?.uuid) return;
+        await markComplete(lesson.uuid, uuid);
+    }, [lesson, uuid, markComplete]);
+
+    // ── Next content item ──────────────────────────────────────────────────
+    const getNextContent = useCallback(() => {
+        const idx = allContent.findIndex((item) =>
+            (item.type === "lesson" && item.lesson.lesson_id === selectedLessonId) ||
+            (item.type === "quiz" && selectedQuizId)
+        );
+        return idx !== -1 && idx < allContent.length - 1 ? allContent[idx + 1] : null;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedLessonId, selectedQuizId, allContent]);
+
+    const nextContent = getNextContent();
+    const nextLabel = nextContent
+        ? nextContent.type === "lesson" ? nextContent.lesson.title : (nextContent.quiz.title || "Quiz")
+        : null;
+    const showSidebarContent = desktopSidebarOpen && !quizSessionActive;
+
+    const handleNextContentClick = () => {
+        if (!nextContent) return;
+        if (nextContent.type === "lesson") handleLessonClick(nextContent.lesson);
+        else handleQuizClick();
+    };
+
+    // ── Access blocked (403 from getUnitDetail) ──────────────────────────────
+    if (unitBlocked) {
+        return (
+            <div className="flex flex-col items-center gap-6 py-32 text-center px-4">
+                <div className="h-16 w-16 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
+                    <Lock className="size-7 text-amber-500" />
+                </div>
+                <div className="space-y-2 max-w-sm">
+                    <h2 className="text-xl font-semibold">Premium / Exclusive Content</h2>
+                    <p className="text-sm text-muted-foreground leading-relaxed">
+                        To access this unit, subscribe to one of our available tier plans.
+                    </p>
+                </div>
+                <Button onClick={() => navigate('/subscriptions')} className="gap-1.5">
+                    <Zap className="size-4" /> View Available Plans
+                </Button>
+            </div>
+        );
+    }
+
+    // ── Content not ready ──────────────────────────────────────────────────
+    if (!unitDetailLoading && unitDetail && !unitDetail.duration_seconds) {
+        return (
+            <div className="flex flex-col items-center gap-6 py-32 text-center px-4">
+                <div className="h-16 w-16 rounded-full bg-muted flex items-center justify-center">
+                    <Hourglass className="size-7 text-muted-foreground" />
+                </div>
+                <div className="space-y-2 max-w-sm">
+                    <h2 className="text-xl font-semibold">Unit Not Yet Available</h2>
+                    <p className="text-sm text-muted-foreground leading-relaxed">
+                        This unit is currently being prepared. Please check back later.
+                    </p>
+                </div>
+                <Button variant="outline" onClick={() => navigate(`/units/${uuid}`)} className="gap-1.5">
+                    Back to Unit Details
+                </Button>
+            </div>
+        );
+    }
+
+    return (
+        <>
+            <PageMeta title={pageTitle} />
+
+            {/* ── Session-guard dialog ── */}
+            <ResponsiveModal
+                open={!!pendingNav || blocker.state === "blocked"}
+                onOpenChange={(open) => !open && handleCancelNav()}
+                title="Leave Quiz?"
+                description=""
+                footer={
+                    <>
+                        <Button variant="outline" onClick={handleCancelNav}>Stay</Button>
+                        <Button variant="destructive" onClick={handleConfirmNav}>Leave Anyway</Button>
+                    </>
+                }
+            >
+                <div className="space-y-3 text-sm text-muted-foreground">
+                    <p>
+                        You have an ongoing <strong className="text-foreground">quiz</strong> session in progress.
+                        Leaving now will not submit your answers — your session will remain open.
+                    </p>
+                </div>
+            </ResponsiveModal>
+
+            {/* ── "How to complete" help dialog ── */}
+            <ResponsiveModal
+                open={helpOpen}
+                onOpenChange={setHelpOpen}
+                title="How to complete this content"
+                description=""
+                footer={<Button onClick={() => setHelpOpen(false)}>Got it</Button>}
+            >
+                <div className="space-y-3 text-sm">
+                    <div className="flex items-start gap-3 rounded-lg border p-3">
+                        {(() => {
+                            const Icon = TYPE_DEFS[lessonCompletionType]?.icon;
+                            return Icon ? <Icon className="size-4 mt-0.5 text-muted-foreground shrink-0" /> : null;
+                        })()}
+                        <div>
+                            <p className="font-medium">This lesson</p>
+                            <p className="text-muted-foreground">{lessonRequirementText}</p>
+                        </div>
+                    </div>
+                    <div className="flex items-start gap-3 rounded-lg border p-3">
+                        {(() => {
+                            const Icon = TYPE_DEFS[unitCompletionType]?.icon;
+                            return Icon ? <Icon className="size-4 mt-0.5 text-muted-foreground shrink-0" /> : null;
+                        })()}
+                        <div>
+                            <p className="font-medium">This unit</p>
+                            <p className="text-muted-foreground">{unitRequirementText}</p>
+                            {unitDetail?.quiz && unitCompletionType !== 'pass_quiz' && (
+                                <p className="text-muted-foreground mt-1">
+                                    This unit also has a quiz — passing it is tracked separately from the unit's completion status.
+                                </p>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </ResponsiveModal>
+
+            {/* ── Up next floating button ── */}
+            {scrollProgress >= 100 && nextContent && !selectedQuizId && (
+                <div className="fixed bottom-6 right-6 z-20 animate-in fade-in slide-in-from-bottom-2 duration-300">
+                    <div
+                        onClick={handleNextContentClick}
+                        className="flex items-center gap-3 bg-card border rounded-xl dark:hover:border-blue-500 dark:hover:shadow-blue-500 px-4 py-3 shadow-xl hover:bg-muted transition-colors text-sm font-medium cursor-pointer select-none"
+                    >
+                        <div className="flex flex-col items-start">
+                            <span className="text-sm text-muted-foreground font-normal">Up next</span>
+                            {nextContent.type === "lesson" ? nextContent.lesson.title : (nextContent.quiz.title || "Quiz")}
+                        </div>
+                        <ArrowRight className="size-4 text-muted-foreground" />
+                    </div>
+                </div>
+            )}
+
+            {selectedQuizId && quiz?.has_passed && !quizSessionActive && nextContent && (
+                <div className="fixed bottom-6 right-6 z-20 animate-in fade-in slide-in-from-bottom-2 duration-300">
+                    <div
+                        onClick={handleNextContentClick}
+                        className="flex items-center gap-3 bg-card border rounded-xl dark:hover:border-blue-500 dark:hover:shadow-blue-500 px-4 py-3 shadow-xl hover:bg-muted transition-colors text-sm font-medium cursor-pointer select-none"
+                    >
+                        <div className="flex flex-col items-start">
+                            <span className="text-sm text-muted-foreground font-normal">Up next</span>
+                            {nextContent.type === "lesson" ? nextContent.lesson.title : (nextContent.quiz.title || "Quiz")}
+                        </div>
+                        <ArrowRight className="size-4 text-muted-foreground" />
+                    </div>
+                </div>
+            )}
+
+            {/* ── Top sticky bar ── */}
+            <div className="fixed top-[67px] left-0 right-0 z-40 bg-card border-b py-3 px-4 md:px-6">
+                <div className="w-full flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-2 justify-between w-full">
+                        <div className="hidden sm:block min-w-0">
+                            <AppBreadcrumb items={breadcrumbItemsFull} />
+                        </div>
+                        <div className="sm:hidden min-w-0 truncate">
+                            <AppBreadcrumb items={breadcrumbItemsMobile} />
+                        </div>
+
+                        {!selectedQuizId && lesson && (
+                            lesson.status === 'completed' ? (
+                                <div className="hidden lg:flex items-center gap-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400 shrink-0">
+                                    <CheckCheck className="size-4" />
+                                    Done
+                                </div>
+                            ) : (
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="hidden lg:flex items-center gap-1.5 text-muted-foreground shrink-0"
+                                    onClick={() => setHelpOpen(true)}
+                                >
+                                    <HelpCircle className="size-4" />
+                                    How to complete
+                                </Button>
+                            )
+                        )}
+
+                        <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
+                            <SheetTrigger asChild>
+                                <Button variant="outline" size="icon" className="lg:hidden flex-shrink-0" aria-label="Open unit content">
+                                    <TableOfContents className="size-4" />
+                                </Button>
+                            </SheetTrigger>
+                            <SheetContent side="left" className="p-0 w-80">
+                                <SidebarContent
+                                    lessons={lessons}
+                                    quiz={unitDetail?.quiz}
+                                    selectedLessonId={selectedLessonId}
+                                    selectedQuizId={selectedQuizId}
+                                    onLessonClick={handleLessonClick}
+                                    onQuizClick={handleQuizClick}
+                                    loading={unitDetailLoading}
+                                />
+                            </SheetContent>
+                        </Sheet>
+                    </div>
+                </div>
+
+                {lesson && (
+                    <div className="absolute bottom-0 left-0 right-0 h-1 bg-border">
+                        <div
+                            className="h-full bg-primary transition-all duration-150 ease-out"
+                            style={{ width: `${scrollProgress}%` }}
+                        />
+                    </div>
+                )}
+            </div>
+
+            {/* ── Task-mode banner ─────────────────────────────────────────── */}
+            {taskCtx?.has_task && (
+                <div className={`fixed xs:top-[124px] lg:top-[116px] left-0 right-0 z-30 flex items-center gap-2 text-white text-xs font-medium px-4 py-1.5 shadow-sm transition-colors ${
+                    unitDetail?.is_completed ? 'bg-green-600' : 'bg-blue-600'
+                }`}>
+                    <ListChecks className="size-3.5 shrink-0" />
+                    <span>
+                        {unitDetail?.is_completed
+                            ? 'Unit complete — tracking finished'
+                            : 'Task mode — progress is being tracked automatically'
+                        }
+                    </span>
+                </div>
+            )}
+
+            {/* ── Desktop sidebar ── */}
+            <div className={`hidden lg:flex flex-row fixed ${taskCtx?.has_task ? "top-[145px]" : "top-[112px]"} bottom-0 left-0 z-30 bg-muted border-r`}>
+                <div className="w-14 shrink-0 flex flex-col items-center pt-3">
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        className="size-8"
+                        onClick={() => setDesktopSidebarOpen((prev) => !prev)}
+                        disabled={quizSessionActive}
+                        title={showSidebarContent ? "Collapse sidebar" : "Expand sidebar"}
+                    >
+                        {showSidebarContent ? <ChevronsLeft className="size-4" /> : <ChevronsRight className="size-4" />}
+                    </Button>
+                </div>
+
+                {showSidebarContent && (
+                    <div className="w-[266px] border-l overflow-hidden">
+                        <SidebarContent
+                            lessons={lessons}
+                            quiz={unitDetail?.quiz}
+                            selectedLessonId={selectedLessonId}
+                            selectedQuizId={selectedQuizId}
+                            onLessonClick={handleLessonClick}
+                            onQuizClick={handleQuizClick}
+                            loading={unitDetailLoading}
+                        />
+                    </div>
+                )}
+            </div>
+
+            {/* ── Main content ── */}
+            <div className={`${taskCtx?.has_task ? "xs:mt-42 lg:mt-36" : "mt-32"} ${showSidebarContent ? "lg:ml-80" : "lg:ml-14"} p-4 md:p-6 min-h-screen`}>
+                <div className="relative w-full h-full mx-auto max-w-2xl">
+                    {selectedQuizId ? (
+                        <QuizBlock
+                            quiz={quiz}
+                            loading={quizLoading}
+                            onDraft={handleQuizDraft}
+                            onSubmit={async (answers) => {
+                                const result = await submitUnitQuiz(uuid, selectedQuizId, answers);
+                                await getUnitDetail(uuid);
+                                return result;
+                            }}
+                            onRetake={() => getUnitQuiz(uuid)}
+                            onActiveChange={setQuizActive}
+                            onNextContent={nextContent ? handleNextContentClick : undefined}
+                            nextLabel={nextLabel}
+                        />
+                    ) : (
+                        <>
+                            <LessonBlock
+                                lesson={lesson}
+                                loading={lessonLoading}
+                                onWatchProgress={['watch_percent', 'watch_video', 'listen_audio'].includes(lessonCompletionType) ? handleWatchProgress : undefined}
+                            />
+                            {!lessonLoading && lesson && lessonCompletionType === 'manual_complete' && (
+                                <MarkCompleteButton
+                                    label={lesson?.completion?.button_label}
+                                    completed={lesson?.status === 'completed'}
+                                    onMarkComplete={handleMarkComplete}
+                                />
+                            )}
+                        </>
+                    )}
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default UnitReader;
diff --git a/apps/web/src/modules/client/pages/UnitsList.jsx b/apps/web/src/modules/client/pages/UnitsList.jsx
new file mode 100644
index 0000000..ed7d4e7
--- /dev/null
+++ b/apps/web/src/modules/client/pages/UnitsList.jsx
@@ -0,0 +1,194 @@
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { House, ChevronLeft, ChevronRight, Layers, Search } from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Input } from "@/components/ui/input";
+import {
+    Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { useLibrary } from "@/contexts/ClientLibraryContext";
+import { useClientTiers } from "@/contexts/ClientTiersProvider";
+import { UnitCard, UnitCardSkeleton } from "../components/UnitCard";
+import { PageMeta } from "@/contexts/MetadataContext";
+
+const ITEMS_PER_PAGE = 10;
+
+// ─── Pagination ───────────────────────────────────────────────────────────────
+
+const Pagination = ({ currentPage, totalPages, totalItems, itemsPerPage, onPageChange }) => {
+    const start = (currentPage - 1) * itemsPerPage + 1;
+    const end = Math.min(currentPage * itemsPerPage, totalItems);
+
+    const getPages = () => {
+        const pages = [];
+        if (totalPages <= 5) {
+            for (let i = 1; i <= totalPages; i++) pages.push(i);
+        } else {
+            pages.push(1);
+            if (currentPage > 3) pages.push("...");
+            for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) pages.push(i);
+            if (currentPage < totalPages - 2) pages.push("...");
+            pages.push(totalPages);
+        }
+        return pages;
+    };
+
+    return (
+        <div className="flex items-center justify-between w-full pt-4 border-t">
+            <div className="text-sm text-muted-foreground">
+                Showing <span className="font-medium text-foreground">{start}–{end}</span> of{" "}
+                <span className="font-medium text-foreground">{totalItems}</span> units
+            </div>
+            <div className="flex items-center gap-1">
+                <Button onClick={() => onPageChange(currentPage - 1)} disabled={currentPage === 1} variant="ghost" size="sm">
+                    <ChevronLeft />
+                </Button>
+                {getPages().map((page, i) =>
+                    page === "..." ? (
+                        <span key={`ellipsis-${i}`} className="w-7 h-7 flex items-center justify-center text-xs text-muted-foreground">···</span>
+                    ) : (
+                        <Button key={page} size="sm" variant={currentPage === page ? "default" : "outline"} onClick={() => onPageChange(page)}>
+                            {page}
+                        </Button>
+                    )
+                )}
+                <Button onClick={() => onPageChange(currentPage + 1)} disabled={currentPage === totalPages} variant="ghost" size="sm">
+                    <ChevronRight />
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+// ─── Main Page ────────────────────────────────────────────────────────────────
+
+const UnitsList = () => {
+    const navigate = useNavigate();
+    const { units, unitsLoading, getUnits } = useLibrary();
+    const { tierMap, getTierCategories } = useClientTiers();
+
+    const [currentPage, setCurrentPage] = useState(1);
+    const [searchInput, setSearchInput] = useState("");
+    const [search, setSearch] = useState("");
+    const [lockFilter, setLockFilter] = useState("All");
+
+    useEffect(() => {
+        getUnits();
+        getTierCategories();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const filtered = useMemo(() =>
+        units
+            .filter((u) => {
+                const matchSearch = u.title.toLowerCase().includes(search.toLowerCase()) ||
+                    (u.description ?? "").toLowerCase().includes(search.toLowerCase());
+                const matchLock = lockFilter === "All"
+                    || (lockFilter === "Unlocked" && !u.is_locked)
+                    || (lockFilter === "Locked" && u.is_locked);
+                return matchSearch && matchLock;
+            })
+            .sort((a, b) => a.title.localeCompare(b.title)),
+        [units, search, lockFilter]
+    );
+
+    const totalPages = Math.max(1, Math.ceil(filtered.length / ITEMS_PER_PAGE));
+    const paginated = filtered.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
+
+    const runSearch = () => { setSearch(searchInput); setCurrentPage(1); };
+
+    const handleViewDetails = (unit) => navigate(`/units/${unit.uuid}`);
+
+    const items = [
+        { label: "Home", icon: <House className="size-4" />, to: `/dashboard` },
+        { label: "Units" },
+    ];
+
+    return (
+        <div>
+            <PageMeta title="Units - STARR" description="Browse standalone units you can start right away." />
+            <div className="py-24 bg-accent/70 min-h-screen">
+                <div className="flex flex-col gap-4 justify-between lg:container lg:mx-auto pt-2">
+                    <AppBreadcrumb items={items} />
+
+                    {/* Search & Filters */}
+                    <div className="fixed top-[67px] left-0 right-0 z-10 bg-card border-b lg:static lg:bg-transparent lg:border-none py-3 xs:px-4 md:px-6 lg:px-0">
+                        <div className="flex items-center xs:flex-col lg:flex-row gap-4">
+                            <div className="flex items-center gap-2 w-full lg:max-w-64">
+                                <Input
+                                    placeholder="Search units..."
+                                    className="w-full bg-card text-sm"
+                                    value={searchInput}
+                                    onChange={(e) => setSearchInput(e.target.value)}
+                                    onKeyDown={(e) => { if (e.key === "Enter") runSearch(); }}
+                                />
+                                <Button size="icon" variant="outline" className="shrink-0 bg-card" onClick={runSearch} aria-label="Search">
+                                    <Search />
+                                </Button>
+                            </div>
+                            <Select value={lockFilter} onValueChange={(v) => { setLockFilter(v); setCurrentPage(1); }}>
+                                <SelectTrigger className="w-full lg:w-48 bg-card">
+                                    <SelectValue placeholder="Access" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="All">All Units</SelectItem>
+                                    <SelectItem value="Unlocked">Unlocked</SelectItem>
+                                    <SelectItem value="Locked">Locked</SelectItem>
+                                </SelectContent>
+                            </Select>
+                            <Select value="units" onValueChange={(v) => {
+                                if (v === "courses") navigate("/course");
+                                if (v === "lessons") navigate("/lessons");
+                            }}>
+                                <SelectTrigger className="w-full lg:w-48 bg-card">
+                                    <SelectValue placeholder="Browse" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="courses">Courses</SelectItem>
+                                    <SelectItem value="units">Units</SelectItem>
+                                    <SelectItem value="lessons">Lessons</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+                    </div>
+
+                    {/* Unit Grid */}
+                    {unitsLoading ? (
+                        <div className="xs:pt-12 lg:pt-0 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                            {Array.from({ length: 8 }).map((_, i) => <UnitCardSkeleton key={i} />)}
+                        </div>
+                    ) : paginated.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center py-20">
+                            <Layers className="size-40 text-primary" />
+                            <p className="text-md">No units found</p>
+                        </div>
+                    ) : (
+                        <div className="xs:pt-12 lg:pt-0 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mb-4 xs:px-4 lg:px-0">
+                            {paginated.map((unit) => (
+                                <UnitCard
+                                    key={unit.unit_id}
+                                    unit={unit}
+                                    tierMap={tierMap}
+                                    onViewDetails={handleViewDetails}
+                                />
+                            ))}
+                        </div>
+                    )}
+
+                    {!unitsLoading && filtered.length > ITEMS_PER_PAGE && (
+                        <Pagination
+                            currentPage={currentPage}
+                            totalPages={totalPages}
+                            totalItems={filtered.length}
+                            itemsPerPage={ITEMS_PER_PAGE}
+                            onPageChange={setCurrentPage}
+                        />
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default UnitsList;
diff --git a/apps/web/src/modules/client/pages/ViewPlan.jsx b/apps/web/src/modules/client/pages/ViewPlan.jsx
new file mode 100644
index 0000000..6bdbc91
--- /dev/null
+++ b/apps/web/src/modules/client/pages/ViewPlan.jsx
@@ -0,0 +1,287 @@
+import { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import * as LucideIcons from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+    ArrowLeft, BookOpen, Clock, Check, Lock,
+    Tag, CalendarDays,
+} from "lucide-react";
+import { useClientTiers } from "@/contexts/ClientTiersProvider";
+import { useProfile } from "@/contexts/ProfileProvider";
+import { PageMeta } from "@/contexts/MetadataContext";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+import { getTierColor } from "@/utils/tierColors";
+import { getBundleContent, overlapsExistingAccess, isPlanCurrent } from "@/utils/planBundle.util";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+const UNIT_TO_DAYS = { minute: 1 / 1440, hour: 1 / 24, day: 1, month: 30, year: 365 };
+
+function formatDuration(days, unit) {
+    if (!days) return null;
+    const multiplier = UNIT_TO_DAYS[unit] ?? 1;
+    const value = Math.round((days / multiplier) * 1000) / 1000;
+    const label = unit ?? "day";
+    return `${value} ${label}${value !== 1 ? "s" : ""}`;
+}
+
+function formatCourseDuration(seconds = 0) {
+    if (!seconds) return null;
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    if (h && m) return `${h}h ${m}m`;
+    if (h)      return `${h}h`;
+    return `${m}m`;
+}
+
+// ─── Skeleton ─────────────────────────────────────────────────────────────────
+
+const ViewPlanSkeleton = () => (
+    <div className="mt-17 bg-muted min-h-screen">
+        <Skeleton className="h-72 w-full" />
+        <div className="p-6 lg:container lg:max-w-3xl lg:mx-auto space-y-4 mt-4">
+            <Skeleton className="h-28 w-full rounded-2xl" />
+            <Skeleton className="h-64 w-full rounded-2xl" />
+        </div>
+    </div>
+);
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+const ViewPlan = () => {
+    const { id }       = useParams();
+    const navigate     = useNavigate();
+    const { myTier, getMyTier, plans, plansLoading, getPlans, tierMap, getTierCategories } = useClientTiers();
+    const { getProfile } = useProfile();
+    const { fmtCurrency } = useDateFormat();
+
+    useEffect(() => {
+        getProfile();
+        getMyTier();
+        getTierCategories();
+        if (!plans.length) getPlans();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id]);
+
+    const plan     = plans.find((p) => String(p.plan_id) === String(id)) ?? null;
+    const loading  = plansLoading;
+
+    if (loading) return <ViewPlanSkeleton />;
+    if (!plan)   return null;
+
+    const { label: tierLabel, cls: badgeCls } = resolveTierBadge(plan.tier, tierMap);
+    const Icon = LucideIcons[tierMap[plan.tier]?.badge_icon] ?? Tag;
+    const colors = getTierColor(tierMap[plan.tier]?.color ?? "purple");
+    const accentSwatch = colors.swatch;
+    const accentStyle = { color: accentSwatch };
+    const accentBg = colors.panel.bg;
+    const accentBorder = colors.panel.border;
+    const features = plan.features ?? [];
+    const duration = formatDuration(plan.duration_days, plan.duration_unit);
+    // "Current" means the user actually purchased THIS exact plan (matched by
+    // plan_id), not just any plan sharing the same tier slug — two different
+    // plans can share a tier and stay independently active (Tier Plans v2).
+    const isCurrent = isPlanCurrent(plan, myTier);
+    // Blocked-by-overlap ("already covered") — plan isn't owned, but at least
+    // one of its bundle items is already granted by something else the user
+    // holds (Scenario 3): shown, not hidden, but purchase is disabled.
+    const isBlockedByOverlap = !isCurrent && overlapsExistingAccess(plan, myTier?.my_grants);
+
+    const bundle = getBundleContent(plan);
+    const bundleCount = bundle?.items?.length ?? 0;
+    const BundleIcon = bundle?.icon ?? BookOpen;
+    const totalSeconds  = (bundle?.items ?? []).reduce((sum, c) => sum + (c.duration_seconds ?? 0), 0);
+    const totalDuration = formatCourseDuration(totalSeconds);
+
+    return (
+        <div className="mt-17 bg-muted min-h-screen">
+            <PageMeta title={plan ? `${plan.label} - STARR` : undefined} />
+
+            {/* ── Hero Banner ───────────────────────────────────────────── */}
+            <div className={`relative ${badgeCls} overflow-hidden`}>
+                {/* Decorative blobs */}
+                <div className="absolute inset-0 pointer-events-none overflow-hidden">
+                    <div className="absolute -top-24 -right-24 w-96 h-96 rounded-full bg-white/5" />
+                    <div className="absolute -bottom-16 -left-16 w-72 h-72 rounded-full bg-white/5" />
+                    <div className="absolute top-1/2 left-1/3 w-48 h-48 rounded-full bg-white/5" />
+                </div>
+
+                <div className="relative px-6 pt-8 pb-10 lg:container lg:max-w-3xl lg:mx-auto">
+                    <button
+                        onClick={() => navigate("/subscriptions")}
+                        className="flex items-center gap-1.5 text-white/70 hover:text-white text-sm mb-8 transition-colors"
+                    >
+                        <ArrowLeft className="size-4" /> Back to Subscriptions
+                    </button>
+
+                    <Badge className="bg-white/20 border border-white/30 text-white mb-4 text-sm px-3 py-1">
+                        <Icon className="size-3.5 mr-1" /> {tierLabel}
+                    </Badge>
+
+                    <h1 className="text-3xl sm:text-4xl font-extrabold text-white mb-2 leading-tight tracking-tight">
+                        {plan.label}
+                    </h1>
+                    <p className="text-white/70 text-sm mb-8 max-w-md leading-relaxed">
+                        {plan.description || `Everything you need with the ${tierLabel} plan.`}
+                    </p>
+
+                    <div className="flex flex-wrap items-end gap-4">
+                        <div>
+                            <span className="text-5xl font-black text-white leading-none">
+                                {fmtCurrency(plan.price, plan.currency)}
+                            </span>
+                            {duration && (
+                                <span className="text-white/60 text-sm ml-2">/ {duration}</span>
+                            )}
+                        </div>
+
+                        {isCurrent ? (
+                            <Badge className="bg-white/20 border border-white/30 text-white px-4 py-2 text-sm font-medium">
+                                <Check className="size-3.5 mr-1" /> Your Current Plan
+                            </Badge>
+                        ) : !plan.is_active ? (
+                            <Badge className="bg-white/20 border border-white/30 text-white px-4 py-2 text-sm font-medium">
+                                Not Available at the Moment
+                            </Badge>
+                        ) : isBlockedByOverlap ? (
+                            <Badge className="bg-white/20 border border-white/30 text-white px-4 py-2 text-sm font-medium">
+                                <Lock className="size-3.5 mr-1" /> Already Included in Your Plan
+                            </Badge>
+                        ) : null}
+                    </div>
+                </div>
+            </div>
+
+            <div className="px-6 lg:container lg:max-w-3xl lg:mx-auto space-y-5 py-6">
+
+                {/* ── Benefits ───────────────────────────────────── */}
+                {features.length > 0 && (
+                    <div className={`rounded-2xl border ${accentBorder} ${accentBg} p-5`}>
+                        <p className="text-xs font-bold uppercase tracking-widest mb-4" style={accentStyle}>
+                            Benefits
+                        </p>
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                            {features.map(({ text }, i) => (
+                                <div key={i} className="flex items-center gap-3">
+                                    <div className={`h-8 w-8 rounded-lg ${accentBg} border ${accentBorder} flex items-center justify-center shrink-0`}>
+                                        <Check className="size-4" style={accentStyle} />
+                                    </div>
+                                    <span className="text-sm font-medium">{text}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                {/* ── Stats row ─────────────────────────────────────────── */}
+                <div className="grid grid-cols-3 gap-3">
+                    {[
+                        { label: bundle ? `${bundle.noun}s` : "Courses", value: bundleCount,  icon: BundleIcon },
+                        { label: "Content",  value: totalDuration ?? "—",      icon: Clock },
+                        { label: "Access",   value: duration ?? "Lifetime",    icon: CalendarDays },
+                    ].map(({ label, value, icon: StatIcon }) => (
+                        <div key={label} className="rounded-xl bg-card border p-4 flex flex-col items-center gap-1 text-center">
+                            <StatIcon className="size-4" style={accentStyle} />
+                            <p className="text-2xl font-bold leading-none mt-1">{value}</p>
+                            <p className="text-xs text-muted-foreground">{label}</p>
+                        </div>
+                    ))}
+                </div>
+
+                {/* ── Included Items ─────────────────────────────────────── */}
+                <div className="rounded-2xl bg-card border overflow-hidden">
+                    <div className="px-5 py-4 border-b flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                            <BundleIcon className="size-4" style={accentStyle} />
+                            <span className="text-sm font-semibold">Bundle</span>
+                        </div>
+                        <Badge variant="secondary">{bundleCount}</Badge>
+                    </div>
+
+                    <div className="divide-y">
+                        {bundle ? (
+                            bundle.items.map((item) => (
+                                <div key={item[bundle.idKey]} className="flex items-start gap-4 px-5 py-4">
+                                    <div className={`h-10 w-10 rounded-xl ${accentBg} border ${accentBorder} flex items-center justify-center shrink-0`}>
+                                        <bundle.icon className="size-5" style={accentStyle} />
+                                    </div>
+                                    <div className="flex-1 min-w-0">
+                                        <p className="text-sm font-semibold line-clamp-1">{item.title}</p>
+                                        <div className="flex items-center gap-2 mt-1 flex-wrap">
+                                            {item.level && (
+                                                <Badge variant="outline" className="text-xs capitalize h-5">
+                                                    {item.level}
+                                                </Badge>
+                                            )}
+                                            {formatCourseDuration(item.duration_seconds) && (
+                                                <span className="text-xs text-muted-foreground flex items-center gap-1">
+                                                    <Clock className="size-3" />
+                                                    {formatCourseDuration(item.duration_seconds)}
+                                                </span>
+                                            )}
+                                            {item.course_code && (
+                                                <span className="text-xs text-muted-foreground">{item.course_code}</span>
+                                            )}
+                                        </div>
+                                    </div>
+                                    <div className="h-6 w-6 rounded-full bg-green-100 dark:bg-green-950 flex items-center justify-center shrink-0">
+                                        <Check className="size-3.5 text-green-600 dark:text-green-400" />
+                                    </div>
+                                </div>
+                            ))
+                        ) : (
+                            <div className="flex flex-col items-center justify-center py-10 text-center px-6">
+                                <div className={`h-14 w-14 rounded-2xl ${accentBg} border ${accentBorder} flex items-center justify-center mb-3`}>
+                                    <BookOpen className="size-7" style={accentStyle} />
+                                </div>
+                                <p className="font-semibold text-sm">Content coming soon</p>
+                                <p className="text-xs text-muted-foreground mt-1 max-w-xs">
+                                    We're curating the best content for this plan. Subscribe now and get instant access the moment they go live.
+                                </p>
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                {/* ── Bottom CTA ────────────────────────────────────────── */}
+                {!isCurrent && (
+                    <div className={`rounded-2xl ${badgeCls} p-6 text-center relative overflow-hidden`}>
+                        <div className="absolute inset-0 pointer-events-none overflow-hidden">
+                            <div className="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-white/5" />
+                            <div className="absolute -bottom-8 -left-8 w-32 h-32 rounded-full bg-white/5" />
+                        </div>
+                        <div className="relative">
+                            <p className="text-white font-bold text-lg mb-1">
+                                {isBlockedByOverlap ? "Already Included" : plan.is_active ? "Ready to get started?" : "Coming Soon"}
+                            </p>
+                            <p className="text-white/70 text-sm mb-5 max-w-xs mx-auto">
+                                {isBlockedByOverlap
+                                    ? "Your existing access already covers item(s) in this bundle, so it can't be purchased separately."
+                                    : plan.is_active
+                                    ? (plan.description || `Everything you need with the ${tierLabel} plan.`)
+                                    : "This plan is not available for purchase at the moment. Check back later."}
+                            </p>
+                            <div className="flex flex-col sm:flex-row gap-3 justify-center">
+                                {plan.is_active && !isBlockedByOverlap && (
+                                    <Button
+                                        size="lg"
+                                        className="bg-white text-gray-900 hover:bg-white/90 font-bold shadow-lg"
+                                        onClick={() => navigate(`/subscriptions/checkout?plan_id=${plan.plan_id}`)}
+                                    >
+                                        Get {tierLabel} Plan — {fmtCurrency(plan.price, plan.currency)}
+                                    </Button>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+            </div>
+        </div>
+    );
+};
+
+export default ViewPlan;
diff --git a/apps/web/src/modules/client/pages/ViewRequirement.jsx b/apps/web/src/modules/client/pages/ViewRequirement.jsx
new file mode 100644
index 0000000..1c3307b
--- /dev/null
+++ b/apps/web/src/modules/client/pages/ViewRequirement.jsx
@@ -0,0 +1,778 @@
+/*
+ * ViewRequirement.jsx
+ * Route: /group/:groupId/view/:taskListId/task/:taskId/requirement
+ *
+ * Sidebar: sectioned flat list — one plain heading per requirement type,
+ *   each requirement is a clickable button. When selected, its lesson
+ *   sub-tree renders inline below the item (no accordion, no scoping).
+ *
+ * read_course → CourseUnitLessonView (on-demand lesson fetch)
+ * read_unit   → LessonBlock (lessons from unitLessonsMap)
+ * read_lesson → LessonView (standalone fetch by uuid)
+ */
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import AppBreadcrumb from '@/components/generic/Breadcrumb/AppBreadcrumb';
+import {
+    House, TableOfContents, CheckCheck, Circle,
+    Layers, ArrowLeft, Lock, Zap, RefreshCw, Tag,
+    ClipboardList, GraduationCap, CheckCircle2,
+} from 'lucide-react';
+import { Button }  from '@/components/ui/button';
+import { Badge }   from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+
+import { useTask }         from '@/contexts/ClientTaskContext';
+import { PageMeta }        from '@/contexts/MetadataContext';
+import { useTaskProgress } from '@/contexts/ClientTaskProgressContext';
+
+import LessonBlock from '@/modules/client/components/LessonBlock';
+import api         from '@/utils/api.util';
+import { useClientTiers } from '@/contexts/ClientTiersProvider';
+import { resolveTierBadge } from '@/utils/tierBadge.util';
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+const TYPE_LABEL = {
+    read_course: 'Read a Course',
+    read_unit:   'Read a Unit',
+    read_lesson: 'Read a Lesson',
+};
+
+// ─── Compact tier badge ───────────────────────────────────────────────────────
+const TierBadge = ({ tier }) => {
+    const { tierMap } = useClientTiers();
+    if (!tier) return null;
+    const { label, cls } = resolveTierBadge(tier, tierMap);
+    return (
+        <Badge className={`${cls} text-[10px] px-1.5 py-0 h-[18px] leading-none shrink-0`}>
+            {label}
+        </Badge>
+    );
+};
+
+// ─── Sidebar ──────────────────────────────────────────────────────────────────
+const SidebarContent = ({
+    requirements,
+    selection,
+    onSelectReq,
+    onSelectLesson,
+    isCompleted,
+    unitLessonsMap,
+    unitLoadingMap,
+    courseUnitsMap,
+    courseLoadingMap,
+    referenceMetaMap,
+    onNavigateToCourse,
+}) => {
+    const groups = ['read_course', 'read_unit', 'read_lesson']
+        .map((type) => ({ type, items: requirements.filter((r) => r.type === type) }))
+        .filter((g) => g.items.length > 0);
+
+    return (
+        <ScrollArea className="h-full">
+            <div className="p-4 space-y-6">
+                <div className="flex items-center justify-between gap-2 pr-10 lg:pr-0">
+                    <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground shrink-0">
+                        Requirements
+                    </p>
+                    {groups.length === 1 && (
+                        <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/60 bg-muted px-2 py-0.5 rounded-full shrink-0">
+                            {TYPE_LABEL[groups[0].type]}
+                        </span>
+                    )}
+                </div>
+
+                {groups.map(({ type, items }) => (
+                    <div key={type} className="space-y-1">
+                        {/* Section heading — hidden when only one type is visible (entry-scoped) */}
+                        {groups.length > 1 && (
+                            <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground px-1 mb-2">
+                                {TYPE_LABEL[type]}
+                            </p>
+                        )}
+
+                        {items.map((req) => {
+                            const isSelected = selection?.reqId === req.requirement_id;
+                            const done       = isCompleted(req.requirement_id, req.reference_id);
+                            const meta       = referenceMetaMap[req.requirement_id];
+
+                            return (
+                                <div key={req.requirement_id}>
+                                    {/* Requirement button */}
+                                    <button
+                                        onClick={() => onSelectReq(req)}
+                                        className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors text-left ${
+                                            isSelected
+                                                ? 'bg-muted text-foreground'
+                                                : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'
+                                        }`}
+                                    >
+                                        {done
+                                            ? <CheckCheck className="size-3.5 text-green-500 shrink-0" />
+                                            : <Circle     className="size-3.5 shrink-0 opacity-40" />
+                                        }
+                                        <span className="truncate flex-1 font-medium min-w-0">
+                                            {req.reference_label ?? req.type}
+                                        </span>
+                                        <TierBadge tier={meta?.subscription} />
+                                    </button>
+
+                                    {/* Breadcrumb — always visible below the button */}
+                                    {type === 'read_unit' && meta?.courseTitle && (
+                                        <p className="pl-9 text-[11px] text-muted-foreground truncate -mt-0.5 mb-1">
+                                            from <span className="font-medium">{meta.courseTitle}</span>
+                                        </p>
+                                    )}
+                                    {type === 'read_lesson' && (meta?.unitTitle || meta?.courseTitle) && (
+                                        <p className="pl-9 text-[11px] text-muted-foreground truncate -mt-0.5 mb-1">
+                                            {[meta.unitTitle, meta.courseTitle].filter(Boolean).join(' › ')}
+                                        </p>
+                                    )}
+
+                                    {/* Sub-tree — only for the selected item */}
+                                    {isSelected && type === 'read_unit' && (() => {
+                                        const lessons = unitLessonsMap[req.requirement_id]?.lessons ?? [];
+                                        const loading = unitLoadingMap[req.requirement_id];
+                                        return (
+                                            <div className="pl-5 mt-1 space-y-0.5 border-l ml-4 mb-2">
+                                                {loading && (
+                                                    <div className="py-1 space-y-1.5">
+                                                        <Skeleton className="h-3 w-32" />
+                                                        <Skeleton className="h-3 w-24" />
+                                                    </div>
+                                                )}
+                                                {lessons.map((lesson, i) => {
+                                                    const active = selection?.lessonUuid === lesson.uuid;
+                                                    return (
+                                                        <button
+                                                            key={lesson.uuid}
+                                                            onClick={() => onSelectLesson(req, lesson)}
+                                                            className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-left transition-colors ${
+                                                                active
+                                                                    ? 'bg-primary/10 text-primary font-medium'
+                                                                    : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                                                            }`}
+                                                        >
+                                                            <span className="text-xs tabular-nums w-4 shrink-0 opacity-40">{i + 1}</span>
+                                                            <span className="truncate">{lesson.title}</span>
+                                                        </button>
+                                                    );
+                                                })}
+                                            </div>
+                                        );
+                                    })()}
+
+                                    {isSelected && type === 'read_course' && (() => {
+                                        const courseData   = courseUnitsMap[req.requirement_id] ?? {};
+                                        const units        = courseData.units ?? [];
+                                        const assessment   = courseData.assessment ?? null;
+                                        const courseId     = courseData.course_id;
+                                        const loading      = courseLoadingMap[req.requirement_id];
+                                        return (
+                                            <div className="pl-5 mt-1 space-y-3 border-l ml-4 mb-2">
+                                                {loading && (
+                                                    <div className="py-1 space-y-1.5">
+                                                        <Skeleton className="h-3 w-32" />
+                                                        <Skeleton className="h-3 w-24" />
+                                                    </div>
+                                                )}
+                                                {units.map((unit) => (
+                                                    <div key={unit.unit_id} className="space-y-0.5">
+                                                        <p className="flex items-center gap-1.5 px-2 py-0.5 text-[11px] font-semibold text-muted-foreground uppercase tracking-wide truncate">
+                                                            <Layers className="size-3 shrink-0 opacity-50" />
+                                                            {unit.title}
+                                                        </p>
+                                                        {(unit.lessons ?? []).map((lesson, lIdx) => {
+                                                            const active = selection?.lessonUuid === lesson.uuid;
+                                                            return (
+                                                                <button
+                                                                    key={lesson.uuid}
+                                                                    onClick={() => onSelectLesson(req, lesson)}
+                                                                    className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-left transition-colors ${
+                                                                        active
+                                                                            ? 'bg-primary/10 text-primary font-medium'
+                                                                            : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                                                                    }`}
+                                                                >
+                                                                    <span className="text-xs tabular-nums w-4 shrink-0 opacity-40">{lIdx + 1}</span>
+                                                                    <span className="truncate">{lesson.title}</span>
+                                                                </button>
+                                                            );
+                                                        })}
+                                                        {unit.quiz && (
+                                                            <button
+                                                                onClick={() => onNavigateToCourse(courseId, { quizUnitId: String(unit.unit_id) })}
+                                                                className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-left transition-colors text-muted-foreground hover:bg-muted hover:text-foreground"
+                                                            >
+                                                                <ClipboardList className="size-3.5 shrink-0 opacity-50" />
+                                                                <span className="truncate flex-1">{unit.quiz.title || 'Quiz'}</span>
+                                                                {unit.quiz.has_passed
+                                                                    ? <CheckCircle2 className="size-3 text-green-500 shrink-0" />
+                                                                    : <Circle className="size-3 shrink-0 opacity-30" />
+                                                                }
+                                                            </button>
+                                                        )}
+                                                    </div>
+                                                ))}
+                                                {assessment && (
+                                                    <button
+                                                        onClick={() => onNavigateToCourse(courseId, { seekAssessment: true })}
+                                                        className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-left transition-colors text-muted-foreground hover:bg-muted hover:text-foreground border-t pt-2 mt-1"
+                                                    >
+                                                        <GraduationCap className="size-3.5 shrink-0 opacity-50" />
+                                                        <span className="truncate flex-1">{assessment.title || 'Final Assessment'}</span>
+                                                        {assessment.has_passed
+                                                            ? <CheckCircle2 className="size-3 text-green-500 shrink-0" />
+                                                            : <Circle className="size-3 shrink-0 opacity-30" />
+                                                        }
+                                                    </button>
+                                                )}
+                                            </div>
+                                        );
+                                    })()}
+                                </div>
+                            );
+                        })}
+                    </div>
+                ))}
+            </div>
+        </ScrollArea>
+    );
+};
+
+// ─── Course overview (before first lesson selected) ───────────────────────────
+const CourseOverview = ({ meta }) => {
+    const { tierMap } = useClientTiers();
+    return (
+    <div className="flex flex-col gap-4">
+        <div className="flex items-center gap-2 flex-wrap">
+            {meta?.subscription && (() => {
+                const { rank, label, cls } = resolveTierBadge(meta.subscription, tierMap);
+                return (
+                    <Badge className={`${cls} capitalize`}>
+                        {rank > 0 ? <Lock className="size-3 mr-1" /> : <Tag className="size-3 mr-1" />}
+                        {label}
+                    </Badge>
+                );
+            })()}
+            {meta?.level && <Badge variant="outline" className="text-xs capitalize">{meta.level}</Badge>}
+        </div>
+        <h1 className="text-2xl font-bold">{meta?.title ?? 'Course'}</h1>
+        {meta?.description && <p className="text-sm text-muted-foreground leading-relaxed">{meta.description}</p>}
+        <p className="text-sm text-blue-500 dark:text-blue-400 mt-2">Select a lesson from the sidebar to begin reading.</p>
+    </div>
+    );
+};
+
+// ─── On-demand lesson fetch for read_course ───────────────────────────────────
+const CourseUnitLessonView = ({ lessonUuid }) => {
+    const [lesson,  setLesson]  = useState(null);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        if (!lessonUuid) return;
+        setLoading(true);
+        setLesson(null);
+        api.get(`/client/courses/lesson/uuid/${lessonUuid}`)
+            .then((r) => {
+                const d = r.data?.data;
+                if (d) setLesson({ ...d, blocks: d.blocks ?? [] });
+            })
+            .catch(() => {})
+            .finally(() => setLoading(false));
+    }, [lessonUuid]);
+
+    if (loading) return <ContentSkeleton />;
+    return <LessonBlock lesson={lesson} loading={false} />;
+};
+
+// ─── Standalone lesson view (read_lesson) ─────────────────────────────────────
+const LessonView = ({ req, onMeta }) => {
+    const [lesson,  setLesson]  = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [locked,  setLocked]  = useState(false);
+
+    useEffect(() => {
+        if (!req.reference_id) { setLoading(false); return; }
+        api.get(`/client/courses/lesson/uuid/${req.reference_id}`)
+            .then((r) => {
+                const d = r.data?.data;
+                if (d) {
+                    setLesson({ ...d, blocks: d.blocks ?? [] });
+                    onMeta?.(req.requirement_id, {
+                        subscription: d.unit?.course?.subscription,
+                        courseTitle:  d.unit?.course?.title,
+                        unitTitle:    d.unit?.title,
+                    });
+                }
+            })
+            .catch((err) => { if (err?.response?.status === 403) setLocked(true); })
+            .finally(() => setLoading(false));
+    }, [req.reference_id]);
+
+    if (loading) return <ContentSkeleton />;
+    if (locked)  return <LockedContent />;
+    return <LessonBlock lesson={lesson} loading={false} />;
+};
+
+// ─── Skeletons / locked ───────────────────────────────────────────────────────
+const ContentSkeleton = () => (
+    <div className="flex flex-col gap-3">
+        <Skeleton className="h-5 w-32" />
+        <Skeleton className="h-7 w-64" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-3/4" />
+    </div>
+);
+
+const LockedContent = () => {
+    const navigate = useNavigate();
+    return (
+        <div className="flex flex-col items-center gap-6 py-20 text-center">
+            <div className="h-16 w-16 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
+                <Lock className="size-7 text-amber-500" />
+            </div>
+            <div className="space-y-2 max-w-sm">
+                <h2 className="text-lg font-semibold">Premium / Exclusive Content</h2>
+                <p className="text-sm text-muted-foreground leading-relaxed">
+                    Subscribe to one of our available tier plans to unlock access to this content.
+                </p>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <Button onClick={() => navigate('/subscriptions')} className="gap-1.5">
+                    <Zap className="size-4" /> View Available Plans
+                </Button>
+                <p className="text-xs text-muted-foreground">Already subscribed? Your plan may not cover this subscription.</p>
+            </div>
+        </div>
+    );
+};
+
+// ─── Main page ────────────────────────────────────────────────────────────────
+const ViewRequirement = () => {
+    const { groupId, taskListId, taskId } = useParams();
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const { task, taskList, loading, fetchTask, fetchTaskList } = useTask();
+    const { fetchProgress, isCompleted, updateLessonProgress, loading: progressLoading } = useTaskProgress();
+
+    const [selection,        setSelection]        = useState(null);
+    const [unitLessonsMap,   setUnitLessonsMap]   = useState({});
+    const [unitLoadingMap,   setUnitLoadingMap]   = useState({});
+    const [courseUnitsMap,   setCourseUnitsMap]   = useState({});
+    const [courseLoadingMap, setCourseLoadingMap] = useState({});
+    const [referenceMetaMap, setReferenceMetaMap] = useState({});
+    const [lockedReqs,       setLockedReqs]       = useState(new Set());
+    const [sidebarOpen,      setSidebarOpen]      = useState(false);
+    const [desktopOpen,      setDesktopOpen]      = useState(true);
+    const [scrollPct,        setScrollPct]        = useState(0);
+    const initialised     = useRef(false);
+    const lastAutoMarkRef = useRef(null);
+
+    // ── Fetch task + progress ─────────────────────────────────────────────────
+    useEffect(() => {
+        fetchTaskList(groupId, taskListId);
+        fetchTask(groupId, taskListId, taskId);
+        fetchProgress(groupId, taskListId, taskId);
+    }, [groupId, taskListId, taskId]);
+
+    // ── read_* requirements only ─────────────────────────────────────────────
+    const requirements = (task?.requirements ?? []).filter((r) =>
+        ['read_course', 'read_unit', 'read_lesson'].includes(r.type)
+    );
+
+    // ── Scope sidebar to the type that was clicked in ViewTaskDetails ─────────
+    const entryType = useMemo(() => {
+        const s = location.state ?? {};
+        if (s.course) return 'read_course';
+        if (s.unit)   return 'read_unit';
+        if (s.lesson) return 'read_lesson';
+        return null;
+    }, [location.state]);
+
+    const sidebarRequirements = entryType
+        ? requirements.filter((r) => r.type === entryType)
+        : requirements;
+
+    // ── Fetch lessons for read_unit requirements ──────────────────────────────
+    useEffect(() => {
+        requirements.forEach((req) => {
+            if (req.type !== 'read_unit') return;
+            if (unitLessonsMap[req.requirement_id] || unitLoadingMap[req.requirement_id]) return;
+            setUnitLoadingMap((p) => ({ ...p, [req.requirement_id]: true }));
+            api.get(`/client/courses/unit/uuid/${req.reference_id}/lessons`)
+                .then((r) => {
+                    const data = r.data?.data ?? null;
+                    setUnitLessonsMap((p) => ({ ...p, [req.requirement_id]: { meta: data, lessons: data?.lessons ?? [] } }));
+                })
+                .catch((err) => {
+                    if (err?.response?.status === 403)
+                        setLockedReqs((p) => new Set(p).add(req.requirement_id));
+                })
+                .finally(() => setUnitLoadingMap((p) => ({ ...p, [req.requirement_id]: false })));
+        });
+    }, [requirements.length]);
+
+    // ── Fetch unit + lesson tree for read_course requirements ─────────────────
+    useEffect(() => {
+        requirements.forEach(async (req) => {
+            if (req.type !== 'read_course') return;
+            if (courseUnitsMap[req.requirement_id] || courseLoadingMap[req.requirement_id]) return;
+            setCourseLoadingMap((p) => ({ ...p, [req.requirement_id]: true }));
+            try {
+                const uuidRes  = await api.get(`/client/courses/uuid/${req.reference_id}`);
+                const meta     = uuidRes.data?.data;
+                if (!meta?.course_id) return;
+                const fullRes  = await api.get(`/client/courses/${meta.course_id}`);
+                const full     = fullRes.data?.data;
+                setCourseUnitsMap((p) => ({
+                    ...p,
+                    [req.requirement_id]: {
+                        meta: { ...meta, description: full?.description ?? meta.description },
+                        units: full?.units ?? [],
+                        assessment: full?.assessment ?? null,
+                        course_id: meta.course_id,
+                    },
+                }));
+                setReferenceMetaMap((p) => ({ ...p, [req.requirement_id]: { subscription: meta.subscription } }));
+            } catch (err) {
+                if (err?.response?.status === 403)
+                    setLockedReqs((p) => new Set(p).add(req.requirement_id));
+            } finally {
+                setCourseLoadingMap((p) => ({ ...p, [req.requirement_id]: false }));
+            }
+        });
+    }, [requirements.length]);
+
+    // ── Tier meta for read_unit from unitLessonsMap ───────────────────────────
+    useEffect(() => {
+        requirements.forEach((req) => {
+            if (req.type !== 'read_unit') return;
+            const data = unitLessonsMap[req.requirement_id];
+            if (!data?.meta?.course || referenceMetaMap[req.requirement_id]) return;
+            setReferenceMetaMap((p) => ({
+                ...p,
+                [req.requirement_id]: {
+                    subscription: data.meta.course.subscription,
+                    courseTitle:  data.meta.course.title,
+                },
+            }));
+        });
+    }, [unitLessonsMap]);
+
+    // ── Tier meta for read_lesson (separate fetch) ────────────────────────────
+    useEffect(() => {
+        requirements.forEach(async (req) => {
+            if (req.type !== 'read_lesson' || referenceMetaMap[req.requirement_id]) return;
+            try {
+                const res = await api.get(`/client/courses/lesson/uuid/${req.reference_id}`);
+                const d   = res.data?.data;
+                if (d) setReferenceMetaMap((p) => ({
+                    ...p,
+                    [req.requirement_id]: {
+                        subscription: d.unit?.course?.subscription,
+                        courseTitle:  d.unit?.course?.title,
+                        unitTitle:    d.unit?.title,
+                    },
+                }));
+            } catch { /* silently fail */ }
+        });
+    }, [requirements.length]);
+
+    // ── Auto-select from router state or first item ───────────────────────────
+    useEffect(() => {
+        if (initialised.current || !requirements.length) return;
+
+        const state = location.state ?? {};
+
+        const trySelect = (key, type) => {
+            if (!state[key]?.id) return false;
+            const req = requirements.find((r) => r.requirement_id === state[key].id);
+            if (!req) return false;
+            const needsLesson = type === 'read_unit' || type === 'read_course';
+            setSelection({ reqId: req.requirement_id, ...(needsLesson ? { lessonUuid: null } : {}) });
+            return true;
+        };
+
+        if (!trySelect('course', 'read_course') && !trySelect('unit', 'read_unit') && !trySelect('lesson', 'read_lesson')) {
+            const first = requirements[0];
+            const needsLesson = first.type === 'read_unit' || first.type === 'read_course';
+            setSelection({ reqId: first.requirement_id, ...(needsLesson ? { lessonUuid: null } : {}) });
+        }
+
+        initialised.current = true;
+    }, [requirements, location.state]);
+
+    // ── Auto-pick first lesson once unit/course lessons load ─────────────────
+    useEffect(() => {
+        if (!selection || selection.lessonUuid !== null) return;
+        const req = requirements.find((r) => r.requirement_id === selection.reqId);
+        if (req?.type === 'read_unit') {
+            const lessons = unitLessonsMap[req.requirement_id]?.lessons ?? [];
+            if (lessons.length) setSelection((p) => ({ ...p, lessonUuid: lessons[0].uuid }));
+        }
+        if (req?.type === 'read_course') {
+            const units = courseUnitsMap[req.requirement_id]?.units ?? [];
+            const first = units.flatMap((u) => u.lessons ?? [])[0];
+            if (first) setSelection((p) => ({ ...p, lessonUuid: first.uuid }));
+        }
+    }, [unitLessonsMap, courseUnitsMap, selection?.reqId]);
+
+    // ── Derived objects ───────────────────────────────────────────────────────
+    const selectedReq = requirements.find((r) => r.requirement_id === selection?.reqId) ?? null;
+
+    const selectedLesson = (() => {
+        if (!selectedReq || !selection?.lessonUuid) return null;
+        if (selectedReq.type === 'read_unit') {
+            return (unitLessonsMap[selectedReq.requirement_id]?.lessons ?? [])
+                .find((l) => l.uuid === selection.lessonUuid) ?? null;
+        }
+        if (selectedReq.type === 'read_course') {
+            const units = courseUnitsMap[selectedReq.requirement_id]?.units ?? [];
+            return units.flatMap((u) => u.lessons ?? []).find((l) => l.uuid === selection.lessonUuid) ?? null;
+        }
+        return null;
+    })();
+
+    // ── Next lesson (cross-unit for read_course) ──────────────────────────────
+    const nextLesson = (() => {
+        if (!selectedReq) return null;
+        if (selectedReq.type === 'read_unit') {
+            const lessons = unitLessonsMap[selectedReq.requirement_id]?.lessons ?? [];
+            const idx = lessons.findIndex((l) => l.uuid === selection?.lessonUuid);
+            return idx !== -1 && idx < lessons.length - 1 ? lessons[idx + 1] : null;
+        }
+        if (selectedReq.type === 'read_course') {
+            const flat = (courseUnitsMap[selectedReq.requirement_id]?.units ?? []).flatMap((u) => u.lessons ?? []);
+            const idx  = flat.findIndex((l) => l.uuid === selection?.lessonUuid);
+            return idx !== -1 && idx < flat.length - 1 ? flat[idx + 1] : null;
+        }
+        return null;
+    })();
+
+    // ── Scroll tracking ───────────────────────────────────────────────────────
+    useEffect(() => {
+        window.scrollTo(0, 0);
+        const h = document.documentElement.scrollHeight - window.innerHeight;
+        setScrollPct(h <= 40 ? 100 : 0);
+    }, [selection]);
+
+    useEffect(() => {
+        const onScroll = () => {
+            const h = document.documentElement.scrollHeight - window.innerHeight;
+            const y = window.scrollY;
+            if (h <= 0 || h - y <= 40) { setScrollPct(100); return; }
+            setScrollPct(Math.min(99, Math.round((y / h) * 100)));
+        };
+        window.addEventListener('scroll', onScroll, { passive: true });
+        return () => window.removeEventListener('scroll', onScroll);
+    }, []);
+
+    // ── Breadcrumbs ───────────────────────────────────────────────────────────
+    const crumbsFull = [
+        { label: 'Home',                icon: <House className="size-4" />, to: '/dashboard' },
+        { label: taskList?.name ?? '…', to: `/group/${groupId}/view/${taskListId}` },
+        { label: task?.name ?? '…',     to: `/group/${groupId}/view/${taskListId}/task/${taskId}` },
+        { label: 'Requirements' },
+    ];
+    const crumbsMobile = [
+        { label: 'Home', icon: <House className="size-4" />, to: '/dashboard' },
+        { label: 'Requirements' },
+    ];
+
+    // ── Handlers ─────────────────────────────────────────────────────────────
+    const handleSelectReq = useCallback((req) => {
+        const needsLesson = req.type === 'read_unit' || req.type === 'read_course';
+        setSelection({ reqId: req.requirement_id, ...(needsLesson ? { lessonUuid: null } : {}) });
+        setSidebarOpen(false);
+    }, []);
+
+    const handleSelectLesson = useCallback((req, lesson) => {
+        setSelection({ reqId: req.requirement_id, lessonUuid: lesson.uuid });
+        setSidebarOpen(false);
+    }, []);
+
+    const handleMarkDone = useCallback(async () => {
+        if (!selectedReq) return;
+        const completed = !isCompleted(selectedReq.requirement_id, selectedReq.reference_id);
+        await updateLessonProgress(groupId, taskListId, taskId, selectedReq.requirement_id, {
+            reference_id:   selectedReq.reference_id,
+            completed,
+            siblingLessons: [],
+        });
+    }, [selectedReq, groupId, taskListId, taskId, isCompleted, updateLessonProgress]);
+
+    const selectedDone  = selectedReq ? isCompleted(selectedReq.requirement_id, selectedReq.reference_id) : false;
+    const isLastContent = !nextLesson;
+    const canMarkDone   = scrollPct >= 100 && isLastContent;
+
+    // ── Auto turn-in ──────────────────────────────────────────────────────────
+    useEffect(() => {
+        if (!canMarkDone || selectedDone || progressLoading || !selectedReq) return;
+        if (lockedReqs.has(selectedReq.requirement_id)) return;
+        const key = selectedReq.requirement_id + (selection?.lessonUuid ?? '');
+        if (lastAutoMarkRef.current === key) return;
+        lastAutoMarkRef.current = key;
+        handleMarkDone();
+    }, [canMarkDone, selectedDone]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const handleNavigateToCourse = useCallback((courseId, opts) => {
+        navigate(`/course/${courseId}/unit`, { state: opts });
+    }, [navigate]);
+
+    const sidebarProps = {
+        requirements: sidebarRequirements,
+        selection,
+        onSelectReq:        handleSelectReq,
+        onSelectLesson:     handleSelectLesson,
+        isCompleted,
+        unitLessonsMap,
+        unitLoadingMap,
+        courseUnitsMap,
+        courseLoadingMap,
+        referenceMetaMap,
+        onNavigateToCourse: handleNavigateToCourse,
+    };
+
+    return (
+        <>
+            <PageMeta title={task ? `${task.name} – Requirements - STARR` : undefined} />
+
+            {/* ── Floating "up next" ────────────────────────────────────────── */}
+            {scrollPct >= 100 && nextLesson && (
+                <div className="fixed bottom-6 right-6 z-20 animate-in fade-in slide-in-from-bottom-2 duration-300">
+                    <div
+                        onClick={() => handleSelectLesson(selectedReq, nextLesson)}
+                        className="flex items-center gap-3 bg-card border rounded-xl dark:hover:border-blue-500 px-4 py-3 shadow-xl hover:bg-muted transition-colors text-sm font-medium cursor-pointer select-none"
+                    >
+                        <div className="flex flex-col items-start">
+                            <span className="text-xs text-muted-foreground font-normal">Up next</span>
+                            {nextLesson.title}
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* ── Top sticky bar ────────────────────────────────────────────── */}
+            <div className="fixed top-[67px] left-0 right-0 z-40 bg-card border-b py-3 px-4 md:px-6">
+                <div className="w-full flex items-center justify-between gap-2">
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        className="sm:hidden shrink-0"
+                        onClick={() => navigate(`/group/${groupId}/view/${taskListId}/task/${taskId}`)}
+                    >
+                        <ArrowLeft className="size-4" />
+                    </Button>
+                    <div className="hidden sm:block min-w-0 flex-1">
+                        <AppBreadcrumb items={crumbsFull} />
+                    </div>
+                    <div className="sm:hidden min-w-0 flex-1 truncate">
+                        <AppBreadcrumb items={crumbsMobile} />
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                        {selectedDone && (
+                            <span className="hidden sm:flex items-center gap-1.5 text-sm text-green-600 dark:text-green-400">
+                                <CheckCheck className="size-4" /> Done
+                            </span>
+                        )}
+                        <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
+                            <SheetTrigger asChild>
+                                <Button variant="outline" size="icon" className="lg:hidden flex-shrink-0">
+                                    <TableOfContents className="size-4" />
+                                </Button>
+                            </SheetTrigger>
+                            <SheetContent side="left" className="p-0 w-80">
+                                <SidebarContent {...sidebarProps} />
+                            </SheetContent>
+                        </Sheet>
+                        <Button
+                            variant="outline"
+                            className="hidden lg:flex"
+                            onClick={() => setDesktopOpen((p) => !p)}
+                        >
+                            <TableOfContents />
+                        </Button>
+                    </div>
+                </div>
+
+                {selectedReq && (
+                    <div className="absolute bottom-0 left-0 right-0 h-1.5 bg-border">
+                        <div
+                            className={`h-full transition-all duration-150 ease-out ${
+                                scrollPct >= 100 ? 'bg-green-500' : 'bg-primary'
+                            }`}
+                            style={{ width: `${scrollPct}%` }}
+                        />
+                    </div>
+                )}
+            </div>
+
+            {/* ── Desktop sidebar ───────────────────────────────────────────── */}
+            {desktopOpen && (
+                <div className="hidden lg:block fixed top-[124px] bottom-0 left-0 w-96 bg-muted/60 border-r">
+                    <SidebarContent {...sidebarProps} />
+                </div>
+            )}
+
+            {/* ── Main content ──────────────────────────────────────────────── */}
+            <div className={`mt-32 ${desktopOpen ? 'lg:ml-96' : 'lg:ml-0'} p-4 md:p-6 min-h-screen`}>
+                <div className="relative w-full h-full max-w-3xl mx-auto">
+                    {loading ? (
+                        <ContentSkeleton />
+                    ) : !requirements.length ? (
+                        <p className="text-muted-foreground text-sm">This task has no read requirements.</p>
+                    ) : !selectedReq ? (
+                        <p className="text-muted-foreground text-sm">Select a requirement to view.</p>
+                    ) : (
+                        <div className="flex flex-col gap-6">
+
+                            {selectedReq.type === 'read_course' && (
+                                lockedReqs.has(selectedReq.requirement_id) ? <LockedContent /> :
+                                selection?.lessonUuid ? <CourseUnitLessonView lessonUuid={selection.lessonUuid} /> :
+                                courseLoadingMap[selectedReq.requirement_id] ? <ContentSkeleton /> :
+                                <CourseOverview meta={courseUnitsMap[selectedReq.requirement_id]?.meta} />
+                            )}
+
+                            {selectedReq.type === 'read_unit' && (
+                                lockedReqs.has(selectedReq.requirement_id) ? <LockedContent /> :
+                                selectedLesson ? <LessonBlock lesson={selectedLesson} loading={false} /> :
+                                <ContentSkeleton />
+                            )}
+
+                            {selectedReq.type === 'read_lesson' && (
+                                <LessonView
+                                    req={selectedReq}
+                                    onMeta={(reqId, meta) =>
+                                        setReferenceMetaMap((p) => ({ ...p, [reqId]: meta }))
+                                    }
+                                />
+                            )}
+
+                            {/* Turn-in footer — only shown while not yet completed */}
+                            {!lockedReqs.has(selectedReq.requirement_id) && !selectedDone && (
+                                <div className="flex items-center pt-4 border-t">
+                                    {nextLesson ? (
+                                        <p className="text-sm text-muted-foreground">Continue reading all lessons to complete this requirement.</p>
+                                    ) : !canMarkDone ? (
+                                        <p className="text-sm text-muted-foreground">Scroll to the end to complete this requirement.</p>
+                                    ) : (
+                                        <span className="flex items-center gap-1.5 text-sm text-muted-foreground">
+                                            <RefreshCw className="size-3.5 animate-spin" /> Turning in…
+                                        </span>
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default ViewRequirement;
diff --git a/apps/web/src/modules/client/pages/ViewTask.jsx b/apps/web/src/modules/client/pages/ViewTask.jsx
new file mode 100644
index 0000000..2295991
--- /dev/null
+++ b/apps/web/src/modules/client/pages/ViewTask.jsx
@@ -0,0 +1,654 @@
+/***********************************************************************************************************************************************************************
+ * File Name    : ViewTask.jsx
+ * Type         : Page (Client)
+ * Description  : Displays a single task within a task list, with all its
+ *                requirements and the user's completion status.
+ *                Wired to TaskContext + TaskProgressContext.
+ *                Route: /group/:groupId/view/:taskListId/task/:taskId (index)
+ ***********************************************************************************************************************************************************************/
+import { useEffect, useState, useCallback } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import {
+    Trophy, Clock, Paperclip, Plus,
+    Link, BookOpen, LayoutList, FileText, House,
+    Image, Video, Music, PenLine, Hourglass, XCircle,
+} from 'lucide-react';
+
+import { Badge }           from '@/components/ui/badge';
+import { Progress }        from '@/components/ui/progress';
+import { Button }          from '@/components/ui/button';
+import { ScrollArea }      from '@/components/ui/scroll-area';
+import { Skeleton }        from '@/components/ui/skeleton';
+import AppBreadcrumb       from '@/components/generic/Breadcrumb/AppBreadcrumb';
+import ResponsiveModal     from '@/components/generic/ResponsiveModal';
+import { toast }           from 'sonner';
+
+import FileUpload  from '../components/blocks/FileUpload';
+import FilePreview from '../components/FilePreview';
+import VisitLink   from '../components/blocks/VisitLink';
+import ReadCourse  from '../components/blocks/ReadCourse';
+import ReadUnit    from '../components/blocks/ReadUnit';
+import ReadLesson  from '../components/blocks/ReadLesson';
+
+import { useTask } from '@/contexts/ClientTaskContext';
+import { PageMeta } from '@/contexts/MetadataContext';
+import { useTaskProgress } from '@/contexts/ClientTaskProgressContext';
+import { useGroup } from '@/contexts/ClientGroupContext';
+import { formatDate, formatDateTime } from '@/utils/table.util';
+import api                 from '@/utils/api.util';
+
+// ─── Status badge ─────────────────────────────────────────────────────────────
+const StatusBadge = ({ latestCompletion, requiresReview }) => {
+    if (!latestCompletion) return <Badge variant="outline">Assigned</Badge>;
+    if (requiresReview) {
+        if (latestCompletion.status === 'approved') {
+            return <Badge className="bg-green-100 text-green-700 border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700">Approved</Badge>;
+        }
+        if (latestCompletion.status === 'rejected') {
+            return <Badge variant="destructive" className="gap-1"><XCircle className="size-3" /> Rejected — resubmit</Badge>;
+        }
+        return <Badge className="bg-amber-100 text-amber-700 border-amber-400 dark:bg-amber-900/40 dark:text-amber-400 dark:border-amber-700 gap-1"><Hourglass className="size-3" /> Pending Review</Badge>;
+    }
+    return <Badge variant="outline">Turned in</Badge>;
+};
+
+// ─── Requirements status panel ────────────────────────────────────────────────
+const RequirementsStatusPanel = ({ requirements = [], latestCompletion, isVisited, isCompleted }) => {
+
+    const reqTypes = requirements.map((r) => r.type);
+
+    // upload_file and submit_text share one TaskCompletion — "done" also needs
+    // status === 'approved' when either requirement opted into requires_review.
+    const submissionDone = (type) => {
+        const reqs = requirements.filter((r) => r.type === type);
+        if (!reqs.length || !latestCompletion) return false;
+        const needsReview = reqs.some((r) => r.requires_review);
+        return needsReview ? latestCompletion.status === 'approved' : true;
+    };
+
+    const items = [
+        {
+            key: 'upload_file',
+            label: 'File upload',
+            icon: <Paperclip className="size-4 shrink-0 text-muted-foreground" />,
+            getValue: () => {
+                const done = submissionDone('upload_file');
+                return { done: done ? 1 : 0, total: 1, binary: true };
+            },
+        },
+        {
+            key: 'submit_text',
+            label: 'Written response',
+            icon: <PenLine className="size-4 shrink-0 text-muted-foreground" />,
+            getValue: () => {
+                const done = submissionDone('submit_text');
+                return { done: done ? 1 : 0, total: 1, binary: true };
+            },
+        },
+        {
+            key: 'visit_link',
+            label: 'Visit links',
+            icon: <Link className="size-4 shrink-0 text-muted-foreground" />,
+            getValue: () => {
+                const reqs = requirements.filter((r) => r.type === 'visit_link');
+                const done = reqs.filter((r) => isVisited(r.requirement_id)).length;
+                return { done, total: reqs.length, binary: false };
+            },
+        },
+        {
+            key: 'read_course',
+            label: 'Read courses',
+            icon: <BookOpen className="size-4 shrink-0 text-muted-foreground" />,
+            getValue: () => {
+                const reqs = requirements.filter((r) => r.type === 'read_course');
+                const done = reqs.filter((r) => isCompleted(r.requirement_id, r.reference_id)).length;
+                return { done, total: reqs.length, binary: false };
+            },
+        },
+        {
+            key: 'read_unit',
+            label: 'Read units',
+            icon: <LayoutList className="size-4 shrink-0 text-muted-foreground" />,
+            getValue: () => {
+                const reqs = requirements.filter((r) => r.type === 'read_unit');
+                const done = reqs.filter((r) => isCompleted(r.requirement_id, r.reference_id)).length;
+                return { done, total: reqs.length, binary: false };
+            },
+        },
+        {
+            key: 'read_lesson',
+            label: 'Read lessons',
+            icon: <FileText className="size-4 shrink-0 text-muted-foreground" />,
+            getValue: () => {
+                const reqs = requirements.filter((r) => r.type === 'read_lesson');
+                const done = reqs.filter((r) => isCompleted(r.requirement_id, r.reference_id)).length;
+                return { done, total: reqs.length, binary: false };
+            },
+        },
+    ];
+
+    const provided = items.filter(({ key }) => reqTypes.includes(key));
+    const completedCount = provided.filter(({ getValue }) => {
+        const { done, total } = getValue();
+        return total > 0 && done >= total;
+    }).length;
+    const overallPercent = provided.length > 0
+        ? Math.round((completedCount / provided.length) * 100)
+        : 0;
+
+    return (
+        <div className="border shadow-lg bg-card rounded-lg p-5 flex flex-col gap-4">
+            <h2 className="font-semibold text-base">Requirements</h2>
+
+            <div className="flex flex-col gap-3">
+                {provided.map(({ key, label, icon, getValue }) => {
+                    const { done, total, binary } = getValue();
+                    const complete = total > 0 && done >= total;
+                    return (
+                        <div key={key} className="flex items-center justify-between gap-2">
+                            <div className="flex items-center gap-2">
+                                {icon}
+                                <span className="text-sm">{label}</span>
+                            </div>
+                            {binary ? (
+                                <Badge variant="secondary" className="text-xs">
+                                    {complete ? 'Done' : 'Missing'}
+                                </Badge>
+                            ) : (
+                                <Badge variant="secondary" className="text-xs">
+                                    {done} / {total}
+                                </Badge>
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
+
+            <div className="flex flex-col gap-2 pt-2 border-t">
+                <div className="flex items-center justify-between">
+                    <span className="text-sm">Overall progress</span>
+                    {provided.length > 0 && completedCount >= provided.length && (
+                        <span className="text-sm">Completed</span>
+                    )}
+                </div>
+                <Progress
+                    value={overallPercent}
+                    className={`h-1.5 ${provided.length > 0 && completedCount >= provided.length ? "[&>div]:bg-green-500" : ""}`}
+                />
+            </div>
+        </div>
+    );
+};
+
+// ─── File row — clickable, opens FilePreview ─────────────────────────────────
+const FileRow = ({ file, onClick }) => {
+    const Icon = (() => {
+        const mime = file.mime_type ?? '';
+        if (mime.startsWith('image/')) return Image;
+        if (mime.startsWith('video/')) return Video;
+        if (mime.startsWith('audio/')) return Music;
+        if (mime === 'application/pdf') return FileText;
+        return Paperclip;
+    })();
+
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            className="flex items-center gap-2 border rounded-md px-3 py-2 text-sm bg-muted hover:bg-muted/70 transition-colors text-left w-full"
+        >
+            <Icon className="size-4 shrink-0 text-muted-foreground" />
+            <span className="truncate flex-1">{file.file_name}</span>
+        </button>
+    );
+};
+
+// ─── Submission panel (Your Work) — upload_file and/or submit_text ────────────
+const SubmissionPanel = ({ latestCompletion, onAddAttachment, submitting, onFileClick, requiresReview, hasTextRequirement, acceptsSubmissions }) => {
+    const files = latestCompletion?.files ?? [];
+
+    return (
+        <div className="border shadow-lg bg-card rounded-lg p-5 flex flex-col gap-4 xs:order-1 lg:order-0">
+            <div className="flex items-center justify-between">
+                <h2 className="font-semibold text-base">Your work</h2>
+                <div className="flex items-center gap-2">
+                    <StatusBadge latestCompletion={latestCompletion} requiresReview={requiresReview} />
+                    {files.length >= 2 && (
+                        <Badge>
+                            <Paperclip className="size-3 mr-1" />
+                            +{files.length} Attachments
+                        </Badge>
+                    )}
+                </div>
+            </div>
+
+            {latestCompletion?.status === 'rejected' && latestCompletion?.review_note && (
+                <p className="text-sm text-destructive bg-destructive/5 border border-destructive/30 rounded-md p-3">
+                    {latestCompletion.review_note}
+                </p>
+            )}
+
+            {hasTextRequirement && latestCompletion?.response_text && (
+                <p className="text-sm border rounded-md p-3 whitespace-pre-wrap bg-muted/40">{latestCompletion.response_text}</p>
+            )}
+
+            {files.length > 0 ? (
+                files.length >= 2 ? (
+                    <ScrollArea className="max-h-[210px]">
+                        <div className="flex flex-col gap-2">
+                            {files.map((f) => (
+                                <FileRow key={f.file_id} file={f} onClick={() => onFileClick(f)} />
+                            ))}
+                        </div>
+                    </ScrollArea>
+                ) : (
+                    <div className="flex flex-col gap-2">
+                        {files.map((f) => (
+                            <FileRow key={f.file_id} file={f} onClick={() => onFileClick(f)} />
+                        ))}
+                    </div>
+                )
+            ) : !(hasTextRequirement && latestCompletion?.response_text) ? (
+                <p className="text-sm text-center py-6 text-muted-foreground">No work attached</p>
+            ) : null}
+
+            <div className="flex flex-col gap-3">
+                {acceptsSubmissions ? (
+                    <Button className="w-full" onClick={onAddAttachment} disabled={submitting}>
+                        <Plus /> {latestCompletion ? 'Resubmit' : 'Turn In'}
+                    </Button>
+                ) : (
+                    <p className="text-sm text-center text-muted-foreground py-2">
+                        This task no longer accepts submissions
+                    </p>
+                )}
+            </div>
+        </div>
+    );
+};
+
+// ─── Main page ────────────────────────────────────────────────────────────────
+const ViewTask = () => {
+    const { groupId, taskListId, taskId } = useParams();
+    const navigate = useNavigate();
+
+    const {
+        task, taskList, loading,
+        fetchTask, fetchTaskList,
+        latestCompletion,
+        completeTask, completionLoading,
+    } = useTask();
+
+    const {
+        fetchProgress,
+        isVisited, isCompleted,
+        visitLink,
+        unvisitLink,
+        resetProgress,
+    } = useTaskProgress();
+
+    const { group, fetchGroup } = useGroup();
+
+    const [taskModal,    setTaskModal]    = useState(false);
+    const [uploadState,  setUploadState]  = useState({ files: [], isUploading: false });
+    const [note,         setNote]         = useState('');
+    const [responseText, setResponseText] = useState('');
+    const [submitting,   setSubmitting]   = useState(false);
+    const [previewFile,  setPreviewFile]  = useState(null);
+
+    // ── Fetch task list (for breadcrumb), task, and progress ──────────────────
+    useEffect(() => {
+        fetchTaskList(groupId, taskListId);
+        fetchTask(groupId, taskListId, taskId);
+        fetchProgress(groupId, taskListId, taskId);
+        fetchGroup(groupId);
+        return () => resetProgress();
+    }, [groupId, taskListId, taskId]);
+
+    // ── Loading state ──────────────────────────────────────────────────────────
+    const isResolving = loading || !task;
+
+    // ── Requirements from task ────────────────────────────────────────────────
+    const requirements  = task?.requirements ?? [];
+    const reqTypes      = requirements.map((r) => r.type);
+    const hasFileUpload = reqTypes.includes('upload_file');
+    const hasTextReq     = reqTypes.includes('submit_text');
+    const hasSubmission  = hasFileUpload || hasTextReq;
+    const requiresReview = requirements.some((r) => ['upload_file', 'submit_text'].includes(r.type) && r.requires_review);
+
+    // ── Upload file requirement config (allowed types, max count) ─────────────
+    const uploadFileReq    = requirements.find((r) => r.type === 'upload_file');
+    const allowedFileTypes = uploadFileReq?.allowed_file_types ?? [];
+    const maxFileCount     = uploadFileReq?.max_file_count ?? null;
+    const textReq          = requirements.find((r) => r.type === 'submit_text');
+
+    // ── Visit link handler (passed to VisitLink block) ────────────────────────
+    const handleVisitLink = useCallback(async (requirementId) => {
+        await visitLink(groupId, taskListId, taskId, requirementId);
+    }, [groupId, taskListId, taskId, visitLink]);
+
+    const handleUnvisitLink = useCallback(async (requirementId) => {
+        await unvisitLink(groupId, taskListId, taskId, requirementId);
+    }, [groupId, taskListId, taskId, unvisitLink]);
+
+    // ── Submit handler ────────────────────────────────────────────────────────
+    const handleSubmit = async () => {
+        if (uploadState.isUploading) return;
+        if (hasFileUpload && !uploadState.files.length) return;
+        if (!hasFileUpload && hasTextReq && !responseText.trim()) return;
+
+        setSubmitting(true);
+        try {
+            // 1. Upload each file to the task-scoped upload endpoint first
+            const uploadedFiles = [];
+            for (const f of uploadState.files) {
+                if (f.status !== 'done' || !f.rawFile) continue;
+
+                const formData = new FormData();
+                formData.append('file', f.rawFile);  // ← rawFile exposed by FileUpload onChange
+
+                const res = await api.post(
+                    `/client/groups/${groupId}/task-lists/${taskListId}/tasks/${taskId}/upload`,
+                    formData,
+                    { headers: { 'Content-Type': 'multipart/form-data' } }
+                );
+                const data = res.data?.data;
+
+                uploadedFiles.push({
+                    file_url:    data.file_url,
+                    file_name:   data.file_name,
+                    file_size:   data.file_size,
+                    mime_type:   data.mime_type,
+                    storage_key: data.storage_key,
+                });
+            }
+
+            if (hasFileUpload && !uploadedFiles.length) {
+                toast('No files were uploaded successfully.');
+                return;
+            }
+
+            // 2. Submit completion with uploaded file references + response text
+            await completeTask(groupId, taskListId, taskId, {
+                note: note.trim() || null,
+                files: uploadedFiles,
+                response_text: hasTextReq ? (responseText.trim() || null) : undefined,
+            });
+
+            setTaskModal(false);
+            setNote('');
+            setResponseText('');
+            setUploadState({ files: [], isUploading: false });
+        } catch (err) {
+            toast('Failed to submit. Please try again.');
+        } finally {
+            setSubmitting(false);
+        }
+    };
+
+    // ── Derived data ──────────────────────────────────────────────────────────
+    const visitLinkReqs  = requirements.filter((r) => r.type === 'visit_link');
+    const readCourseReqs = requirements.filter((r) => r.type === 'read_course');
+    const readUnitReqs   = requirements.filter((r) => r.type === 'read_unit');
+    const readLessonReqs = requirements.filter((r) => r.type === 'read_lesson');
+
+    const breadcrumbItems = [
+        { label: 'Home',                icon: <House className="size-4" />, to: '/dashboard' },
+        { label: group?.name ?? '…',     to: `/group/${groupId}` },
+        { label: taskList?.name ?? '…',  to: `/group/${groupId}/view/${taskListId}` },
+        { label: task?.name  ?? '…' },
+    ];
+
+    return (
+        <div className="mt-17">
+            <PageMeta title={task ? `${task.name} - STARR` : undefined} />
+
+            {/* ── Submission modal (files and/or text response) ────────────────── */}
+            {hasSubmission && (
+                <ResponsiveModal
+                    open={taskModal}
+                    onOpenChange={setTaskModal}
+                    title={hasFileUpload ? 'Add Attachment' : 'Submit Response'}
+                    description={task?.name ?? ''}
+                    footer={
+                        <>
+                            <Button variant="outline" onClick={() => setTaskModal(false)}>
+                                Cancel
+                            </Button>
+                            <Button
+                                onClick={handleSubmit}
+                                disabled={
+                                    submitting ||
+                                    uploadState.isUploading ||
+                                    (hasFileUpload && uploadState.files.length === 0) ||
+                                    (!hasFileUpload && hasTextReq && !responseText.trim())
+                                }
+                            >
+                                {submitting ? 'Submitting…' : uploadState.isUploading ? 'Uploading…' : 'Turn in'}
+                            </Button>
+                        </>
+                    }
+                >
+                    {hasTextReq && (
+                        <div className="flex flex-col gap-1.5 mb-3">
+                            <label className="text-sm font-medium">
+                                {textReq?.prompt || 'Your response'}
+                            </label>
+                            <textarea
+                                className="w-full rounded-md border bg-muted/50 px-3 py-2 text-sm resize-none focus:outline-none focus:ring-1 focus:ring-ring"
+                                rows={5}
+                                placeholder="Write your response…"
+                                value={responseText}
+                                onChange={(e) => setResponseText(e.target.value)}
+                            />
+                        </div>
+                    )}
+
+                    {/* Optional note */}
+                    <div className="flex flex-col gap-1.5 mb-3">
+                        <label className="text-sm font-medium">Note (optional)</label>
+                        <textarea
+                            className="w-full rounded-md border bg-muted/50 px-3 py-2 text-sm resize-none focus:outline-none focus:ring-1 focus:ring-ring"
+                            rows={2}
+                            placeholder="Add a note for your submission…"
+                            value={note}
+                            onChange={(e) => setNote(e.target.value)}
+                        />
+                    </div>
+
+                    {hasFileUpload && (
+                    <FileUpload
+                        allowedFileTypes={allowedFileTypes}
+                        maxFileCount={maxFileCount}
+                        onChange={(state) => setUploadState(state)}
+                    />
+                    )}
+                </ResponsiveModal>
+            )}
+
+            <div className="lg:container lg:mx-auto flex flex-col gap-6 py-6 xs:px-6 lg:px-0">
+                <AppBreadcrumb items={breadcrumbItems} />
+
+                <div className="grid lg:grid-cols-[1fr_350px] gap-6 items-start">
+
+                    {/* ── Left ──────────────────────────────────────────────── */}
+                    <div className="flex flex-col gap-6 min-w-0 w-full max-w-full">
+
+                        {/* Task header card */}
+                        <div className="border rounded-lg bg-card overflow-hidden">
+                            <div className="p-6 border-b flex flex-col gap-2">
+                                {isResolving ? (
+                                    <>
+                                        <Skeleton className="h-4 w-32" />
+                                        <Skeleton className="h-7 w-64 mt-1" />
+                                        <Skeleton className="h-4 w-48 mt-1" />
+                                    </>
+                                ) : (
+                                    <>
+                                        <p className="text-sm text-muted-foreground">
+                                            {taskList?.name} &nbsp;·&nbsp; {task?.createdAt ? formatDate(task.createdAt) : ''}
+                                        </p>
+                                        <h1 className="text-2xl font-bold">{task?.name}</h1>
+                                        <div className="flex items-center gap-4 text-sm [&_svg]:size-4">
+                                            {task?.deadline && (
+                                                <span className="flex items-center gap-1.5">
+                                                    <Clock /> Due {formatDateTime(task.deadline)}
+                                                </span>
+                                            )}
+                                        </div>
+                                    </>
+                                )}
+                            </div>
+                            <div className="p-6">
+                                {isResolving
+                                    ? <Skeleton className="h-4 w-full" />
+                                    : <p className="text-md leading-relaxed">{task?.description ?? '—'}</p>
+                                }
+                            </div>
+                        </div>
+
+                        {/* Requirements status panel — mobile only, right after the header */}
+                        {!isResolving && requirements.length > 0 && (
+                            <div className="lg:hidden">
+                                <RequirementsStatusPanel
+                                    requirements={requirements}
+                                    latestCompletion={latestCompletion}
+                                    isVisited={isVisited}
+                                    isCompleted={isCompleted}
+                                />
+                            </div>
+                        )}
+
+                        {/* Requirements section */}
+                        {!isResolving && requirements.length > 0 && (
+                            <>
+                                {/* visit_link */}
+                                {visitLinkReqs.length > 0 && (
+                                    <VisitLink
+                                        links={visitLinkReqs.map((r) => ({
+                                            id:           r.requirement_id,
+                                            requirement_id: r.requirement_id,
+                                            label:        r.link_label ?? r.reference_label ?? 'Link',
+                                            url:          r.link_url,
+                                        }))}
+                                        visitedMap={
+                                            Object.fromEntries(
+                                                visitLinkReqs.map((r) => [r.requirement_id, isVisited(r.requirement_id)])
+                                            )
+                                        }
+                                        onVisit={handleVisitLink}
+                                        onUnvisit={handleUnvisitLink}
+                                    />
+                                )}
+
+                                {/* read_course */}
+                                {readCourseReqs.length > 0 && (
+                                    <ReadCourse
+                                        courses={readCourseReqs.map((r) => ({
+                                            id:            r.requirement_id,
+                                            reference_id:  r.reference_id,
+                                            title:         r.reference_label ?? 'Course',
+                                            description:   r.description ?? '',
+                                            completed:     isCompleted(r.requirement_id, r.reference_id),
+                                        }))}
+                                        groupId={groupId}
+                                        taskListId={taskListId}
+                                        taskId={taskId}
+                                    />
+                                )}
+
+                                {/* read_unit */}
+                                {readUnitReqs.length > 0 && (
+                                    <ReadUnit
+                                        units={readUnitReqs.map((r) => ({
+                                            id:            r.requirement_id,
+                                            reference_id:  r.reference_id,
+                                            title:         r.reference_label ?? 'Unit',
+                                            description:   r.description ?? '',
+                                            completed:     isCompleted(r.requirement_id, r.reference_id),
+                                        }))}
+                                        groupId={groupId}
+                                        taskListId={taskListId}
+                                        taskId={taskId}
+                                    />
+                                )}
+
+                                {/* read_lesson */}
+                                {readLessonReqs.length > 0 && (
+                                    <ReadLesson
+                                        lessons={readLessonReqs.map((r) => ({
+                                            id:            r.requirement_id,
+                                            reference_id:  r.reference_id,
+                                            title:         r.reference_label ?? 'Lesson',
+                                            description:   r.description ?? '',
+                                            completed:     isCompleted(r.requirement_id, r.reference_id),
+                                        }))}
+                                        groupId={groupId}
+                                        taskListId={taskListId}
+                                        taskId={taskId}
+                                    />
+                                )}
+
+                            </>
+                        )}
+
+                        {/* Your work — mobile only, at the very end */}
+                        {hasSubmission && (
+                            <div className="lg:hidden">
+                                <SubmissionPanel
+                                    latestCompletion={latestCompletion}
+                                    onAddAttachment={() => setTaskModal(true)}
+                                    submitting={submitting}
+                                    onFileClick={(file) => setPreviewFile(file)}
+                                    requiresReview={requiresReview}
+                                    hasTextRequirement={hasTextReq}
+                                    acceptsSubmissions={task?.accepts_submissions !== false}
+                                />
+                            </div>
+                        )}
+                    </div>
+
+                    {/* ── Right (desktop sidebar only) ───────────────────────── */}
+                    <div className="hidden lg:flex lg:flex-col gap-4 lg:sticky lg:top-24 lg:self-start select-none">
+                        {hasSubmission && (
+                            <SubmissionPanel
+                                latestCompletion={latestCompletion}
+                                onAddAttachment={() => setTaskModal(true)}
+                                submitting={submitting}
+                                onFileClick={(file) => setPreviewFile(file)}
+                                requiresReview={requiresReview}
+                                hasTextRequirement={hasTextReq}
+                                acceptsSubmissions={task?.accepts_submissions !== false}
+                            />
+                        )}
+                        <RequirementsStatusPanel
+                            requirements={requirements}
+                            latestCompletion={latestCompletion}
+                            isVisited={isVisited}
+                            isCompleted={isCompleted}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            {/* ── File preview dialog ──────────────────────────────────────── */}
+            <FilePreview
+                file={previewFile}
+                open={!!previewFile}
+                onOpenChange={(v) => !v && setPreviewFile(null)}
+                streamUrl={
+                    previewFile && latestCompletion?.completion_id
+                        ? `${import.meta.env.VITE_API_URL ?? ''}/client/groups/${groupId}/task-lists/${taskListId}/tasks/${taskId}/completions/${latestCompletion.completion_id}/files/${previewFile.file_id}/stream`
+                        : undefined
+                }
+                downloadUrl={
+                    previewFile && latestCompletion?.completion_id
+                        ? `${import.meta.env.VITE_API_URL ?? ''}/client/groups/${groupId}/task-lists/${taskListId}/tasks/${taskId}/completions/${latestCompletion.completion_id}/files/${previewFile.file_id}/download`
+                        : undefined
+                }
+            />
+        </div>
+    );
+};
+
+export default ViewTask;
\ No newline at end of file
diff --git a/apps/web/src/modules/client/pages/ViewTaskDetails.jsx b/apps/web/src/modules/client/pages/ViewTaskDetails.jsx
new file mode 100644
index 0000000..b5b5ca7
--- /dev/null
+++ b/apps/web/src/modules/client/pages/ViewTaskDetails.jsx
@@ -0,0 +1,392 @@
+/***********************************************************************************************************************************************************************
+ * File Name    : ViewTaskDetails.jsx
+ * Type         : Page (Client)
+ * Description  : Lists tasks within a task list, grouped by status tabs:
+ *                Ongoing | Completed | Overdue. Supports grid and list views.
+ *                Server-side filtered via fetchTaskList(groupId, taskListId, { status }).
+ *                Route: /group/:groupId/view/:taskListId (index)
+ ***********************************************************************************************************************************************************************/
+import { useEffect, useState, useCallback } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useTask } from '@/contexts/ClientTaskContext';
+import { useGroup } from '@/contexts/ClientGroupContext';
+import { PageMeta } from '@/contexts/MetadataContext';
+import api from '@/utils/api.util';
+
+import AppBreadcrumb from '@/components/generic/Breadcrumb/AppBreadcrumb';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Progress } from '@/components/ui/progress';
+import {
+    Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription,
+} from '@/components/ui/dialog';
+import {
+    House, Calendar, AlertTriangle, Check, ArrowRight, ListChecks, LayoutList,
+    LaptopMinimal, Table, Lock,
+} from 'lucide-react';
+import { Tabs, TabsList, TabsPanel, TabsTab } from '@/components/coss/tabs';
+import { formatDateTime } from '@/utils/table.util';
+import { cn } from '@/lib/utils';
+import ClientTaskListTable from '../components/TaskListTable';
+
+// ─── Status tab map ───────────────────────────────────────────────────────────
+const TABS = [
+    { value: 'tab-ongoing',   label: 'Ongoing',   status: 'ongoing'   },
+    { value: 'tab-completed', label: 'Completed', status: 'completed' },
+    { value: 'tab-overdue',   label: 'Overdue',   status: 'overdue'   },
+];
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+// ─── Status pill per task ─────────────────────────────────────────────────────
+const TaskStatusBadge = ({ task }) => {
+    const now = Date.now();
+    const deadline = task.deadline ? new Date(task.deadline).getTime() : null;
+    const overdue = !task.has_completed && deadline && deadline < now;
+    const dueSoon = !task.has_completed && deadline && (deadline - now) > 0 && (deadline - now) <= DAY_MS;
+
+    if (task.has_completed) {
+        return (
+            <span className="inline-flex items-center gap-1 text-xs font-medium bg-green-500/10 text-green-700 dark:text-green-400 rounded-full px-2.5 py-1">
+                <Check className="size-3.5" />
+                Completed
+            </span>
+        );
+    }
+    if (overdue) {
+        return (
+            <Badge variant="destructive" className="text-xs gap-1">
+                <AlertTriangle className="size-3.5" />
+                Overdue
+            </Badge>
+        );
+    }
+    if (dueSoon) {
+        return (
+            <span className="inline-flex items-center gap-1 text-xs font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400 rounded-full px-2.5 py-1">
+                <AlertTriangle className="size-3" />
+                Due soon
+            </span>
+        );
+    }
+    return (
+        <span className="inline-flex items-center gap-1 text-xs font-medium bg-muted text-muted-foreground rounded-full px-2.5 py-1">
+            Ongoing
+        </span>
+    );
+};
+
+// ─── Task card ────────────────────────────────────────────────────────────────
+const TaskCard = ({ task, onClick, locked, lockedBy, onLockedClick }) => {
+    const reqCount = task.requirements?.length ?? 0;
+
+    return (
+        <div
+            onClick={() => (locked ? onLockedClick(lockedBy) : onClick())}
+            className={cn(
+                'border bg-card rounded-lg flex flex-col transition-colors cursor-pointer',
+                locked
+                    ? 'opacity-60 hover:border-muted-foreground/30'
+                    : 'hover:border-blue-400 dark:hover:border-blue-500',
+                task.has_completed && 'opacity-90',
+            )}
+        >
+            <div className="p-4 flex flex-col gap-2.5 flex-1">
+                <div className="flex items-start justify-between gap-2">
+                    <h1 className="text-base font-medium leading-snug line-clamp-2 min-w-0 flex-1">{task.name}</h1>
+                    {locked
+                        ? (
+                            <span className="inline-flex items-center gap-1 text-xs font-medium bg-muted text-muted-foreground rounded-full px-2.5 py-1">
+                                <Lock className="size-3" /> Locked
+                            </span>
+                        )
+                        : <TaskStatusBadge task={task} />
+                    }
+                </div>
+                <p className="text-sm text-muted-foreground leading-relaxed line-clamp-2">
+                    {task.description || 'No information details provided'}
+                </p>
+                <div className="flex items-center gap-1.5 text-xs text-muted-foreground mt-auto pt-1 [&_svg]:size-3.5">
+                    <Calendar />
+                    {task.deadline ? `Due ${formatDateTime(task.deadline)}` : 'No due date'}
+                </div>
+                {locked && (
+                    <p className="text-xs text-muted-foreground">Tap to see what's required to unlock this task.</p>
+                )}
+            </div>
+            <div className="px-4 py-2.5 border-t flex items-center justify-between">
+                <span className="inline-flex items-center gap-1 text-xs font-medium bg-muted text-muted-foreground rounded-full px-2.5 py-1">
+                    <ListChecks className="size-3.5" />
+                    {reqCount} requirement{reqCount !== 1 ? 's' : ''}
+                </span>
+                <ArrowRight className="size-4 text-muted-foreground/60" />
+            </div>
+        </div>
+    );
+};
+
+// ─── Skeleton ─────────────────────────────────────────────────────────────────
+const TaskCardSkeleton = () => (
+    <div className="border bg-card rounded-lg overflow-hidden">
+        <div className="p-4 flex flex-col gap-2.5">
+            <div className="flex items-start justify-between gap-2">
+                <Skeleton className="h-5 w-40" />
+                <Skeleton className="h-5 w-16 rounded-full" />
+            </div>
+            <Skeleton className="h-3.5 w-full" />
+            <Skeleton className="h-3.5 w-2/3" />
+            <Skeleton className="h-3.5 w-28 mt-1" />
+        </div>
+        <div className="px-4 py-2.5 border-t flex items-center justify-between">
+            <Skeleton className="h-5 w-24 rounded-full" />
+        </div>
+    </div>
+);
+
+const GridSkeleton = () => (
+    <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
+        {Array.from({ length: 3 }).map((_, i) => <TaskCardSkeleton key={i} />)}
+    </div>
+);
+
+// ─── Empty state ──────────────────────────────────────────────────────────────
+const EmptyState = ({ label }) => (
+    <div className="h-64 flex items-center flex-col justify-center w-full gap-4">
+        <LayoutList className="size-20 text-muted-foreground/40" />
+        <h1 className="max-w-lg text-sm text-muted-foreground text-center">
+            {label}
+        </h1>
+    </div>
+);
+
+// ─── Main page ────────────────────────────────────────────────────────────────
+const ViewTaskDetails = () => {
+    const { groupId, taskListId } = useParams();
+    const navigate = useNavigate();
+
+    const { taskList, loading, fetchTaskList } = useTask();
+    const { group, fetchGroup } = useGroup();
+
+    const [view,       setView]       = useState('grid');
+    const [activeTab,  setActiveTab]  = useState('tab-ongoing');
+    const [allTasks,   setAllTasks]   = useState([]);
+    const [lockedInfo, setLockedInfo] = useState(null); // task names blocking the last-clicked locked card
+
+    // ── Fetch group info once ─────────────────────────────────────────────────
+    useEffect(() => {
+        fetchGroup(groupId);
+    }, [groupId]);
+
+    // ── Fetch task list (with server-side status filter on tasks) ────────────
+    useEffect(() => {
+        const tab = TABS.find((t) => t.value === activeTab);
+        if (tab) fetchTaskList(groupId, taskListId, { status: tab.status });
+    }, [groupId, taskListId, activeTab]);
+
+    // ── Fetch the FULL, unfiltered, order_index-sorted task array separately —
+    // the tab fetch above is server-side status-filtered, so it alone can't
+    // tell us whether an earlier task (possibly in a different tab) is done.
+    // Kept in local state rather than context so it never clobbers the
+    // tab-driven fetch's `taskList.tasks`.
+    useEffect(() => {
+        api.get(`/client/groups/${groupId}/task-lists/${taskListId}`)
+            .then(({ data }) => setAllTasks(data?.data?.tasks ?? []))
+            .catch(() => {});
+    }, [groupId, taskListId]);
+
+    // ── Sequencing/prerequisite lock — computed server-side (task.locked,
+    // task.lockedBy), since an explicit prerequisite graph can't be expressed
+    // as a one-line client-side scan the way the old order_index-only rule could.
+    const lockedTaskIds = new Set(
+        allTasks.filter((t) => t.locked).map((t) => t.task_id)
+    );
+    const lockedByById = new Map(allTasks.map((t) => [t.task_id, t.lockedBy ?? []]));
+
+    const completedCount = allTasks.filter((t) => t.has_completed).length;
+
+    const handleTabChange = useCallback((val) => {
+        setActiveTab(val);
+    }, []);
+
+    const handleRefresh = useCallback(() => {
+        const tab = TABS.find((t) => t.value === activeTab);
+        if (tab) fetchTaskList(groupId, taskListId, { status: tab.status });
+    }, [groupId, taskListId, activeTab]);
+
+    const tasks = taskList?.tasks ?? [];
+
+    const breadcrumbItems = [
+        { label: 'Home',              icon: <House className="size-4" />, to: '/dashboard' },
+        { label: group?.name ?? '…',  to: `/group/${groupId}` },
+        { label: taskList?.name ?? '…' },
+    ];
+
+    // ── Renderer per tab — grid or table depending on view ────────────────────
+    const renderTab = (emptyLabel, statusLabel) => {
+        if (view === 'list') {
+            // ClientTaskListTable expects TaskList-shaped rows (task_list_id, name,
+            // description, tasks[]). Wrap each Task as its own "row" using its
+            // own task_id as the row key, single-element tasks[] for deadline lookup.
+            const rows = tasks.map((t) => ({
+                task_list_id: t.task_id,
+                name: t.name,
+                description: t.description,
+                tasks: [t],
+            }));
+            return (
+                <ClientTaskListTable
+                    taskLists={rows}
+                    loading={loading}
+                    onRefresh={handleRefresh}
+                    onRowClick={(row) => navigate(`task/${row.task_list_id}`)}
+                    statusLabel={statusLabel}
+                />
+            );
+        }
+        if (loading) return <GridSkeleton />;
+        if (!tasks.length) return <EmptyState label={emptyLabel} />;
+        return (
+            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
+                {tasks.map((task) => (
+                    <TaskCard
+                        key={task.task_id}
+                        task={task}
+                        locked={lockedTaskIds.has(task.task_id)}
+                        lockedBy={lockedByById.get(task.task_id) ?? []}
+                        onLockedClick={setLockedInfo}
+                        onClick={() => navigate(`task/${task.task_id}`)}
+                    />
+                ))}
+            </div>
+        );
+    };
+
+    return (
+        <div className="mt-17">
+            <PageMeta title={taskList ? `${taskList.name} - STARR` : undefined} />
+            <div className="lg:container lg:mx-auto flex flex-col gap-6 py-6 xs:px-6 lg:px-0">
+
+                {/* ── Header ────────────────────────────────────────────────── */}
+                <div className="flex flex-col gap-4">
+                    <AppBreadcrumb items={breadcrumbItems} />
+                    <div className="space-y-2">
+                        {loading && !taskList ? (
+                            <>
+                                <Skeleton className="h-7 w-48" />
+                                <Skeleton className="h-4 w-72" />
+                            </>
+                        ) : (
+                            <>
+                                <h1 className="font-bold text-2xl max-w-xl">{taskList?.name}</h1>
+                                {taskList?.description && (
+                                    <p className="max-w-2xl text-base xs:text-sm">{taskList.description}</p>
+                                )}
+                            </>
+                        )}
+                    </div>
+
+                    {/* ── List-level progress rollup ── */}
+                    {allTasks.length > 0 && (
+                        <div className="max-w-md flex flex-col gap-1.5">
+                            <div className="flex items-center justify-between text-sm">
+                                <span className="text-muted-foreground">
+                                    {completedCount} of {allTasks.length} task{allTasks.length !== 1 ? 's' : ''} complete
+                                </span>
+                                {completedCount >= allTasks.length && (
+                                    <span className="flex items-center gap-1 text-green-600 dark:text-green-400 font-medium">
+                                        <Check className="size-3.5" /> All done
+                                    </span>
+                                )}
+                            </div>
+                            <Progress
+                                value={(completedCount / allTasks.length) * 100}
+                                className={cn('h-1.5', completedCount >= allTasks.length && '[&>div]:bg-green-500')}
+                            />
+                        </div>
+                    )}
+                </div>
+
+                {/* ── Tabs + view toggle ────────────────────────────────────── */}
+                <div className="relative">
+                    <Tabs defaultValue="tab-ongoing" onValueChange={handleTabChange}>
+                        <div className="flex items-center justify-between flex-wrap gap-2">
+                            <TabsList>
+                                {TABS.map((t) => (
+                                    <TabsTab key={t.value} value={t.value}>
+                                        {t.label}
+                                    </TabsTab>
+                                ))}
+                            </TabsList>
+
+                            {/* ── View toggle ── */}
+                            <div className="flex items-center gap-2">
+                                <Button
+                                    size="sm"
+                                    variant={view === 'grid' ? 'default' : 'outline'}
+                                    onClick={() => setView('grid')}
+                                >
+                                    <LaptopMinimal /> Grid
+                                </Button>
+                                <Button
+                                    size="sm"
+                                    variant={view === 'list' ? 'default' : 'outline'}
+                                    onClick={() => setView('list')}
+                                >
+                                    <Table /> List
+                                </Button>
+                            </div>
+                        </div>
+
+                        {/* ── Ongoing ── */}
+                        <TabsPanel value="tab-ongoing" className="pt-4">
+                            {renderTab('No ongoing tasks right now.', 'ongoing')}
+                        </TabsPanel>
+
+                        {/* ── Completed ── */}
+                        <TabsPanel value="tab-completed" className="pt-4">
+                            {renderTab('No completed tasks yet.', 'completed')}
+                        </TabsPanel>
+
+                        {/* ── Overdue ── */}
+                        <TabsPanel value="tab-overdue" className="pt-4">
+                            {renderTab('No overdue tasks.', 'overdue')}
+                        </TabsPanel>
+                    </Tabs>
+                </div>
+
+            </div>
+
+            {/* ── Locked task requirement dialog ── */}
+            <Dialog open={!!lockedInfo} onOpenChange={(open) => !open && setLockedInfo(null)}>
+                <DialogContent className="sm:max-w-md">
+                    <DialogHeader>
+                        <DialogTitle className="flex items-center gap-2">
+                            <Lock className="size-4" /> Task locked
+                        </DialogTitle>
+                        <DialogDescription>
+                            {lockedInfo?.length
+                                ? `Complete the following task${lockedInfo.length !== 1 ? 's' : ''} first to unlock this one:`
+                                : 'Complete the earlier required tasks first to unlock this one.'}
+                        </DialogDescription>
+                    </DialogHeader>
+                    {!!lockedInfo?.length && (
+                        <ul className="flex flex-col gap-2">
+                            {lockedInfo.map((t) => (
+                                <li
+                                    key={t.task_id}
+                                    className="flex items-center gap-2 text-sm bg-muted rounded-md px-3 py-2"
+                                >
+                                    <ListChecks className="size-3.5 text-muted-foreground shrink-0" />
+                                    {t.name}
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+};
+
+export default ViewTaskDetails;
\ No newline at end of file
diff --git a/apps/web/src/modules/client/routes/ClientRoutes.jsx b/apps/web/src/modules/client/routes/ClientRoutes.jsx
new file mode 100644
index 0000000..3d4c0c0
--- /dev/null
+++ b/apps/web/src/modules/client/routes/ClientRoutes.jsx
@@ -0,0 +1,156 @@
+import ProtectedRoute from '../../../routes/ProtectedRoute'
+import Client from '../pages/Dashboard'
+import ClientLayout from '../layout/ClientLayout'
+import CoursesList from '../pages/CourseList'
+import { Navigate, Outlet } from "react-router-dom"
+import ScrollToTop from '@/components/generic/ScrollToTop'
+import CourseDetails from '../pages/CourseDetails'
+import UnitList from '../pages/UnitList'
+import UnitsList from '../pages/UnitsList'
+import UnitDetails from '../pages/UnitDetails'
+import LessonDetails from '../pages/LessonDetails'
+import LessonsList from '../pages/LessonsList'
+import UnitReader from '../pages/UnitReader'
+import { Fragment } from 'react'
+import GroupList from '../pages/GroupList'
+import ViewTaskDetails from '../pages/ViewTaskDetails'
+import ProfilePage from '../pages/Profile'
+import Checkout from '../pages/Checkout'
+import EditProfile from '../pages/EditProfile'
+import PlanList from '../pages/PlanList'
+import ViewPlan from '../pages/ViewPlan'
+import ViewTask from '../pages/ViewTask'
+import CourseCheckout from '../pages/CourseCheckout'
+import MyCertificates from '../pages/MyCertificates'
+import MyAchievements from '../pages/MyAchievements'
+import MyCompletedContent from '../pages/MyCompletedContent'
+import AccountSettings from '../pages/AccountSettings'
+import Notifications from '../pages/Notifications'
+import AdvertisementLandingPage from '../pages/AdvertisementLandingPage'
+import IntroPage from '@/modules/auth/pages/Intro'
+import { useAuth } from '@/contexts/AuthContext'
+
+const ClientWrapper = () => {
+  const { user } = useAuth()
+  // New users must complete the intro before accessing any client page
+  if (user?.needs_intro) return <Navigate to="/intro" replace />
+  return (
+    <Fragment>
+      {/* Wrapper components belong here. */}
+      <ScrollToTop />
+      <ClientLayout />
+    </Fragment>
+  )
+}
+
+export const ClientRoutes = {
+  element: <ProtectedRoute allowedRoles={['user']} />,
+  children: [
+    // Intro — full-screen, outside ClientLayout, no nav
+    { path: 'intro', element: <IntroPage /> },
+    {
+      element: <ClientWrapper />,
+      children: [
+        {
+          path: 'dashboard', element: <Outlet />,
+          children: [
+            { index: true, element: <Client /> },
+          ],
+        },
+        {
+          path: 'profile', element: <Outlet />,
+          children: [
+            { index: true, element: <ProfilePage /> },
+            { path: 'edit', element: <EditProfile /> },
+          ],
+        },
+        { path: 'certificates', element: <MyCertificates /> },
+        { path: 'achievements', element: <MyAchievements /> },
+        { path: 'completed', element: <MyCompletedContent /> },
+        { path: 'settings', element: <AccountSettings /> },
+        { path: 'notifications', element: <Notifications /> },
+        { path: 'ads/:uuid', element: <AdvertisementLandingPage /> },
+        {
+          path: 'subscriptions', element: <Outlet />,
+          children: [
+            // { index: true, element: <Checkout /> },
+            { index: true, element: <PlanList /> },
+            { path: 'view/:id', element: <ViewPlan /> },
+            { path: 'checkout', element: <Checkout /> },
+          ],
+        },
+
+        {
+          path: 'course',
+          element: <Outlet />,
+          children: [
+            { index: true, element: <CoursesList /> },
+            {
+              path: ':id', element: <Outlet />,
+              children: [
+                { index: true, element: <CourseDetails /> },
+                { path: 'unit', element: <UnitList />, handle: { showFooter: false } },
+                { path: 'checkout', element: <CourseCheckout /> },
+              ],
+            },
+          ],
+        },
+
+        {
+          path: 'units',
+          element: <Outlet />,
+          children: [
+            { index: true, element: <UnitsList /> },
+            {
+              path: ':uuid', element: <Outlet />,
+              children: [
+                { index: true, element: <UnitDetails /> },
+                { path: 'read', element: <UnitReader />, handle: { showFooter: false } },
+              ],
+            },
+          ],
+        },
+
+        {
+          path: 'lessons',
+          element: <Outlet />,
+          children: [
+            { index: true, element: <LessonsList /> },
+            {
+              path: ':uuid', element: <Outlet />,
+              children: [
+                { index: true, element: <LessonDetails /> },
+              ],
+            },
+          ],
+        },
+
+        {
+          path: 'group', element: <Outlet />,
+          children: [
+            {
+              path: ':groupId', element: <Outlet />,
+              children: [
+                { index: true, element: <GroupList /> },
+                {
+                  path: 'view/:taskListId', element: <Outlet />,
+                  children: [
+                    { index: true, element: <ViewTaskDetails /> },
+                    {
+                      path: 'task/:taskId', element: <Outlet />,
+                      children: [
+                        { index: true, element: <ViewTask /> },
+                      ]
+                    },
+                  ]
+                },
+              ],
+            },
+          ]
+        },
+
+
+      ],
+    },
+  ],
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/public/layouts/LandingLayout.jsx b/apps/web/src/modules/public/layouts/LandingLayout.jsx
new file mode 100644
index 0000000..4a7e1c9
--- /dev/null
+++ b/apps/web/src/modules/public/layouts/LandingLayout.jsx
@@ -0,0 +1,200 @@
+/***********************************************************************************************************************************************************************
+* File Name: NavbarLayout.jsx
+* Type of Program: Layout Route
+* Description: A Layout router for Landing page. 
+* Module: Public User
+* Author: lash0000
+* Date Created: Oct. 10, 2025
+***********************************************************************************************************************************************************************
+* Change History:
+* DATE                AUTHOR            LOG NUMBER     DESCRIPTION                                                      
+* Oct. 10, 2025       lash0000          001            Initial creation - STAR Phase 1 Project
+***********************************************************************************************************************************************************************/
+
+import { Fragment, useEffect, useRef } from 'react';
+import { useTheme } from '@/contexts/ThemeContext';
+import { NavLink, Link } from 'react-router-dom';
+
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer"
+import { Button } from '@/components/ui/button';
+import { Toaster } from "@/components/ui/sonner"
+import { RippleButton } from '@/components/custom/ripple-button';
+
+import { Moon, Sun, Equal, Home, NotepadText, CircleUser, CroissantIcon, DoorOpen } from 'lucide-react';
+
+import Footer from '../pages/LandingFooter';
+
+function LandingLayout({ children }) {
+    const { theme, toggleTheme } = useTheme();
+    const drawerCloseRef = useRef(null);
+
+    useEffect(() => {
+        const handleResize = () => {
+            const isLargeScreen = window.matchMedia('(min-width: 1024px)').matches;
+            if (isLargeScreen && drawerCloseRef.current) {
+                drawerCloseRef.current.click();
+            }
+        };
+
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    const scrollToId = (id) => {
+        const el = document.getElementById(id)
+        if (!el) return
+
+        const offset = 150
+        const top = el.getBoundingClientRect().top + window.scrollY - offset
+        window.scrollTo({ top, behavior: 'smooth' })
+    }
+
+    return (
+        <Fragment>
+            <nav className="fixed top-0 left-0 w-full h-fit flex items-center justify-between xs:px-6 lg:px-16 py-3 font-medium bg-background z-50 border">
+                <div className="inline-flex items-center space-x-2 text-card-foreground selection:bg-card-foreground selection:text-white dark:selection:bg-card-foreground dark:selection:text-black">
+                    <div className="xs:w-32 lg:w-48">
+                        <img src="/philpro-white.png" alt="" className="block dark:hidden w-auto" />
+                        <img src="/philpro-dark.png" alt="" className="hidden dark:block w-auto" />
+                    </div>
+                </div>
+                <div className='flex items-center'>
+                    <div className="xs:hidden lg:block">
+                        <div className="flex text-card-foreground selection:bg-card-foreground selection:text-white dark:selection:bg-card-foreground dark:selection:text-black gap-1.5">
+                            <Button asChild variant="ghost" className="px-3">
+                                <NavLink
+                                    to="."
+                                    onClick={() => scrollToId("home")}
+                                    className={({ isActive }) => `${isActive ? 'underline' : ''}`}
+                                >
+                                    Home
+                                </NavLink>
+                            </Button>
+                            <Button asChild variant="ghost" className="px-3">
+                                <NavLink
+                                    to="."
+                                    onClick={() => scrollToId("about")}
+                                    className={({ isActive }) => ` ${isActive ? 'underline' : ''}`}
+                                >
+                                    About
+                                </NavLink>
+                            </Button>
+                            <Button asChild variant="ghost" className="px-3">
+                                <NavLink
+                                    to="."
+                                    onClick={() => scrollToId("contacts")}
+                                    className={({ isActive }) => `${isActive ? 'underline' : ''}`}
+                                >
+                                    Contacts
+                                </NavLink>
+                            </Button>
+                            <Button asChild variant="ghost" className="px-3">
+                                <NavLink
+                                    to="."
+                                    onClick={() => scrollToId("contacts")}
+                                    className={({ isActive }) => ` ${isActive ? 'underline' : ''}`}
+                                >
+                                    FAQs
+                                </NavLink>
+                            </Button>
+                            <Button className="dark:bg-blue-600 dark:text-white dark:hover:opacity-80" asChild>
+                                <NavLink
+                                    to="/login"
+                                    onClick={() => scrollToId("contacts")}
+                                    className={({ isActive }) => `${isActive ? 'underline' : ''}`}
+                                >
+                                    Sign in
+                                </NavLink>
+                            </Button>
+                            <Button
+                                variant="outline"
+                                onClick={toggleTheme}
+                                className="text-card-foreground cursor-pointer"
+                            >
+                                {theme === 'light' ? (<> <Moon /> Dark </>) : (<> <Sun /> Light </>)}
+                            </Button>
+                        </div>
+                    </div>
+                    <Drawer>
+                        <Button
+                            variant="outline"
+                            onClick={toggleTheme}
+                            className="mr-3 text-card-foreground cursor-pointer lg:hidden"
+                        >
+                            {theme === 'light' ? (<> <Moon /> Dark </>) : (<> <Sun /> Light </>)}
+                        </Button>
+                        <DrawerTrigger asChild>
+                            <Button size="icon" className=" dark:bg-blue-500 dark:text-white lg:hidden">
+                                <Equal />
+                            </Button>
+                        </DrawerTrigger>
+
+                        <DrawerContent className="font-geist">
+                            <DrawerHeader>
+                                <DrawerTitle className="text-lg">
+                                    Made with {String.fromCodePoint('0x1f499')}
+                                </DrawerTitle>
+                                <DrawerDescription>Explore more.</DrawerDescription>
+                            </DrawerHeader>
+                            <div className="flex flex-col gap-2 p-4 font-medium text-sm">
+                                <Link to="">
+                                    <RippleButton rippleColor="#ADD8E6" className="w-full justify-start text-card-foreground" onClick={() => drawerCloseRef.current?.click()}>
+                                        <div className='flex items-center space-x-3'>
+                                            <Home size={16} />
+                                            <label>Home</label>
+                                        </div>
+                                    </RippleButton>
+                                </Link>
+                                <Link to="">
+                                    <RippleButton rippleColor="#ADD8E6" className="w-full justify-start text-card-foreground" onClick={() => drawerCloseRef.current?.click()}>
+                                        <div className='flex items-center space-x-3'>
+                                            <NotepadText size={16} />
+                                            <label>About</label>
+                                        </div>
+                                    </RippleButton>
+                                </Link>
+                                <Link to="">
+                                    <RippleButton rippleColor="#ADD8E6" className="w-full justify-start text-card-foreground" onClick={() => drawerCloseRef.current?.click()}>
+                                        <div className='flex items-center space-x-3'>
+                                            <CircleUser size={16} />
+                                            <label>Contacts</label>
+                                        </div>
+                                    </RippleButton>
+                                </Link>
+                                <Link to="">
+                                    <RippleButton rippleColor="#ADD8E6" className="w-full justify-start text-card-foreground" onClick={() => drawerCloseRef.current?.click()}>
+                                        <div className='flex items-center space-x-3'>
+                                            <CroissantIcon size={16} />
+                                            <label>FAQs</label>
+                                        </div>
+                                    </RippleButton>
+                                </Link>
+                                <Link to="/login">
+                                    <RippleButton className="dark:bg-blue-500 dark:text-white w-full justify-start bg-primary text-primary-foreground" onClick={() => drawerCloseRef.current?.click()}>
+                                        <div className='flex items-center space-x-3'>
+                                            <DoorOpen size={16} />
+                                            <label>Sign in</label>
+                                        </div>
+                                    </RippleButton>
+                                </Link>
+                            </div>
+                            <DrawerFooter>
+                                <DrawerClose ref={drawerCloseRef} />
+                            </DrawerFooter>
+                        </DrawerContent>
+                    </Drawer>
+                </div>
+            </nav>
+            <main id="main-page" className='pt-28'>
+                {children}
+                <Toaster position="top-center" />
+            </main>
+            {/* add footer */}
+            <Footer />
+        </Fragment>
+    );
+}
+
+export default LandingLayout;
+
diff --git a/apps/web/src/modules/public/pages/LandingFooter.jsx b/apps/web/src/modules/public/pages/LandingFooter.jsx
new file mode 100644
index 0000000..622d3ad
--- /dev/null
+++ b/apps/web/src/modules/public/pages/LandingFooter.jsx
@@ -0,0 +1,109 @@
+/***********************************************************************************************************************************************************************
+* File Name: footer.jsx
+* Type of Program: Frontend Layout
+* Description: A footer page for landing page. 
+* Module: Public
+* Author: lash0000
+* Date Created: Oct. 10, 2025
+***********************************************************************************************************************************************************************
+* Change History:
+* DATE                AUTHOR            LOG NUMBER     DESCRIPTION                                                      
+* Oct. 10, 2025       lash0000          001            Initial creation - STAR Phase 1 Project
+***********************************************************************************************************************************************************************/
+
+import { Link } from "react-router-dom"
+
+export default function Footer() {
+  return (
+    <footer className="bg-background border-t">
+      <div className="lg:container lg:mx-auto xs:px-6 lg:px-16 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
+          {/* Resources */}
+          <div>
+            <h3 className="font-semibold text-primary dark:text-white mb-4 text-2xl tracking-tighter">Resources</h3>
+            <ul className="space-y-3 text-muted-foreground">
+              <li>
+                <Link to="">Philpro Learnings</Link>
+              </li>
+              <li>
+                <Link to="">Resources 1</Link>
+              </li>
+              <li>
+                <Link to="">Resources 1</Link>
+              </li>
+              <li>
+                <Link to="">Resources 1</Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Company */}
+          <div>
+            <h3 className="font-semibold text-primary dark:text-white mb-4 text-2xl tracking-tighter">Company</h3>
+            <ul className="space-y-3 text-muted-foreground">
+              <li>
+                <Link to="">Philpro Learnings</Link>
+              </li>
+              <li>
+                <Link to="">Resources 1</Link>
+              </li>
+              <li>
+                <Link to="">Resources 1</Link>
+              </li>
+              <li>
+                <Link to="">Resources 1</Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Socials */}
+          <div>
+            <h3 className="font-semibold text-primary dark:text-white mb-4 text-2xl tracking-tighter">Socials</h3>
+            <ul className="space-y-3 text-muted-foreground">
+              <li>
+                <Link to="">Philpro Learnings</Link>
+              </li>
+              <li>
+                <Link to="">Resources 1</Link>
+              </li>
+              <li>
+                <Link to="">Resources 1</Link>
+              </li>
+              <li>
+                <Link to="">Resources 1</Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Logo */}
+          <div className="flex items-start justify-start lg:justify-end">
+            <div className="flex items-center gap-2 w-48">
+              <img
+                src="/philpro-white.png"
+                alt="PhilProperties Logo"
+                className="w-auto dark:hidden object-cover p-1"
+              />
+              <img
+                src="/philpro-dark.png"
+                alt="PhilProperties Logo"
+                className="hidden dark:block w-auto object-cover p-1"
+              />
+            </div>
+          </div>
+        </div>
+
+      </div>
+      {/* Copyright */}
+      <div className="p-8 border-t space-y-2">
+        <p className="text-center text-muted-foreground text-sm">
+          &copy; {new Date().getFullYear()} Philproperties International Corporation. All rights reserved.
+        </p>
+        <p className="text-center text-sm">
+          <Link to="/privacy-policy" className="text-muted-foreground underline hover:text-primary dark:hover:text-white">
+            Privacy Policy
+          </Link>
+        </p>
+      </div>
+    </footer>
+  )
+}
diff --git a/apps/web/src/modules/public/pages/LandingPage.jsx b/apps/web/src/modules/public/pages/LandingPage.jsx
new file mode 100644
index 0000000..07b4339
--- /dev/null
+++ b/apps/web/src/modules/public/pages/LandingPage.jsx
@@ -0,0 +1,234 @@
+/***********************************************************************************************************************************************************************
+* File Name: LandingPage.jsx
+* Type of Program: Frontend
+* Description: A frontend page for landing page. 
+* Module: Public
+* Author: lash0000
+* Date Created: Oct. 10, 2025
+***********************************************************************************************************************************************************************
+* Change History:
+* DATE                AUTHOR            LOG NUMBER     DESCRIPTION                                                      
+* Oct. 10, 2025       lash0000          001            Initial creation - STAR Phase 1 Project
+***********************************************************************************************************************************************************************/
+
+import { Fragment, useState } from "react";
+import { Link } from "react-router-dom";
+import { toast } from "sonner"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsList, TabsTrigger } from "@/components/custom/original-tabs"
+import { InteractiveHoverButton } from "@/components/custom/interactive-hover-button"
+
+import { Check, Megaphone, Sparkles, Send, BookOpen, CheckCheck, RefreshCw, Clipboard, GitCompare } from "lucide-react";
+
+import { ContactData } from "@/data/landingPage.data"
+
+function LandingPage() {
+    const [copied, setCopied] = useState("")
+
+    const handleCopy = (text) => {
+        navigator.clipboard.writeText(text)
+        setCopied(text)
+        setTimeout(() => setCopied(""), 3000)
+    }
+
+    return (
+        <Fragment>
+            <div id="home" className="lg:container lg:mx-auto lg:max-w-4xl flex xs:items-start md:items-center flex-col gap-8 pb-12">
+                {/* Hero Section */}
+                <div className="xs:px-8 xs:mt-0 lg:mt-12 w-full xs:items-start md:items-center justify-center flex flex-col gap-4">
+                    <div className="flex flex-wrap gap-2">
+                        <Badge variant="outline" className="rounded-full">
+                            <BookOpen /> Online Courses
+                        </Badge>
+                        <Badge className="rounded-full">
+                            <Megaphone /> Sales
+                        </Badge>
+                        <Badge variant="outline" className="rounded-full">
+                            <GitCompare /> Alpha Testing
+                        </Badge>
+                    </div>
+                    <h1 className="xs:text-5xl lg:text-6xl font-bold tracking-tighter leading-tight text-primary dark:text-white max-w-2xl md:text-center break-words">
+                        Fueling Growth, Elevate your performance
+                    </h1>
+                    <p className="text-muted-foreground text-xl">Access the application, Achieve the transformation.</p>
+                    <div className="flex gap-4">
+                        <Button size="lg" className="cursor-pointer dark:bg-blue-600 dark:text-white dark:hover:opacity-80">
+                            <Sparkles /> Start Learning
+                        </Button>
+                        <Button size="lg" variant="outline" className="cursor-pointer">
+                            <Send /> Explore
+                        </Button>
+                    </div>
+                </div>
+
+                {/* Banner Section */}
+                <div className="border xs:w-full lg:w-[1040px]">
+                    <div className="xs:hidden lg:block relative bg-[#9B5DE0] e w-full h-[480px] overflow-hidden">
+                        <div
+                            className="absolute inset-0 bg-cover bg-center"
+                            style={{
+                                backgroundImage:
+                                    "url('https://cq5as7pc73.ufs.sh/f/pHNnzIw3VjcggN4lGlIPcojb20WHEOIkxuly6JvSqsQZemMV')",
+                            }}
+                        />
+                        <div className="absolute top-8 left-1/2 -translate-x-1/2 bg-white  rounded-full overflow-hidden">
+                            <Tabs defaultValue="tab-1" className="items-center">
+                                <TabsList className="gap-1 bg-muted">
+                                    <TabsTrigger
+                                        value="tab-1"
+                                        className="group dark:data-[state=active]:text-blue-500 rounded-full data-[state=active]:shadow-none dark:data-[state=active]:border-blue-500 dark:data-[state=active]:border">
+                                        <BookOpen
+                                            className="-ms-0.5 me-1.5 opacity-60"
+                                            size={16}
+                                            aria-hidden="true"
+                                        />
+                                        To-do
+                                        <Badge
+                                            className="bg-primary dark:bg-blue-500 text-primary-foreground dark:group-data-[state=active]:text-white ms-2 min-w-5 rounded-full transition-opacity group-data-[state=inactive]:opacity-50 dark:group-data-[state=inactive]:bg-white dark:group-data-[state=inactive]:text-primary"
+                                            variant="secondary"
+                                        >3</Badge>
+                                    </TabsTrigger>
+                                    <TabsTrigger
+                                        value="tab-2"
+                                        className="group dark:data-[state=active]:text-blue-500 rounded-full data-[state=active]:shadow-none dark:data-[state=active]:border-blue-500 dark:data-[state=active]:border">
+                                        <RefreshCw
+                                            className="-ms-0.5 me-1.5 opacity-60"
+                                            size={16}
+                                            aria-hidden="true"
+                                        />
+                                        Pending
+                                        <Badge
+                                            className="bg-primary dark:bg-blue-500 text-primary-foreground dark:group-data-[state=active]:text-white ms-2 min-w-5 rounded-full transition-opacity group-data-[state=inactive]:opacity-50 dark:group-data-[state=inactive]:bg-white dark:group-data-[state=inactive]:text-primary"
+                                            variant="secondary"
+                                        >8</Badge>
+                                    </TabsTrigger>
+                                    <TabsTrigger
+                                        value="tab-3"
+                                        className="group dark:data-[state=active]:text-blue-500 rounded-full data-[state=active]:shadow-none dark:data-[state=active]:border-blue-500 dark:data-[state=active]:border">
+                                        <CheckCheck
+                                            className="-ms-0.5 me-1.5 opacity-60"
+                                            size={16}
+                                            aria-hidden="true"
+                                        />
+                                        Completed
+                                        <Badge
+                                            className="bg-primary dark:bg-blue-500 text-primary-foreground dark:group-data-[state=active]:text-white ms-2 min-w-5 -mr-1 rounded-full transition-opacity group-data-[state=inactive]:opacity-50 dark:group-data-[state=inactive]:bg-white dark:group-data-[state=inactive]:text-primary"
+                                            variant="secondary"
+                                        >20</Badge>
+                                    </TabsTrigger>
+                                </TabsList>
+                            </Tabs>
+                        </div>
+                        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 bg-muted rounded-tl-lg rounded-tr-lg p-2 pb-0 space-y-4 xs:w-[460px] lg:w-[540px]">
+                            <div className="border-t border-l border-r rounded-tl-lg rounded-tr-lg space-y-2 p-2">
+                                <div className="flex gap-2">
+                                    <Badge className="text-sm rounded-full px-4 py-1.5 bg-[#9b5de0]/20 dark:bg-green-500/20 text-[#9b5de0] dark:text-blue-500">
+                                        Onboarding
+                                    </Badge>
+                                    <Badge className="text-sm rounded-full px-4 py-1.5 bg-[#9b5de0]/20 dark:bg-green-500/20 text-[#9b5de0] dark:text-blue-500">
+                                        Checklist
+                                    </Badge>
+                                </div>
+                                <div className="space-y-2">
+                                    <div className="font-bold tracking-tighter text-xl">Visit Philproperties Website</div>
+                                    <Link to="https://philproperties.ph" target="_blank" className="text-[#9b5de0]">
+                                        https://philproperties.ph/
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {/* Call to Action */}
+                    <div id="about" className="xs:p-8 lg:p-12 flex flex-col xs:text-2xl lg:text-4xl font-bold tracking-tighter text-primary dark:text-white gap-8 hover:bg-muted dark:hover:bg-muted/20">
+                        <div>
+                            “The Sales Training and Recruitment (STAR) makes building a winning sales team simple. From hiring the right people to fast-tracking their skills, it combines smart recruitment, clear onboarding, and practical training to create confident, high-performing professionals.”
+                        </div>
+                        <div>
+                            With Philproperties, you’re assured of faster onboarding, stronger sales talent, and a career journey built for growth. Less turnover, more success all in one system.
+                        </div>
+                    </div>
+
+                    {/* For sales, why choose us? */}
+                    <div className="grid xs:grid-cols-1 lg:grid-cols-3 border-t">
+                        <div className="flex flex-col gap-4 xs:border-b lg:border-r xs:p-8 lg:p-12 hover:bg-muted dark:hover:bg-muted/20">
+                            <h1 className="text-primary dark:text-white font-bold tracking-tighter text-4xl">Hire Smarter</h1>
+                            <p className="text-muted-foreground">Find the right talent faster with a streamlined recruitment process.</p>
+                        </div>
+                        <div className="flex flex-col gap-4 xs:border-b lg:border-r xs:p-8 lg:p-12 hover:bg-muted dark:hover:bg-muted/20">
+                            <h1 className="text-primary dark:text-white font-bold tracking-tighter text-4xl">Train Better</h1>
+                            <p className="text-muted-foreground">Equip every recruit with clear onboarding, mandatory modules, and practical sales training.</p>
+                        </div>
+                        <div className="flex flex-col gap-4 xs:p-8 lg:p-12 xs:border-b hover:bg-muted dark:hover:bg-muted/20">
+                            <h1 className="text-primary dark:text-white font-bold tracking-tighter text-4xl">Grow</h1>
+                            <p className="text-muted-foreground">Build confident professionals, reduce turnover, and boost long-term sales performance.</p>
+                        </div>
+                    </div>
+
+                    {/* Testimonials */}
+                    <div className="grid xs:grid-cols-1 lg:grid-cols-2">
+                        <div className="flex flex-col gap-4 lg:border-r xs:p-8 lg:p-12 hover:bg-muted dark:hover:bg-muted/20">
+                            <div className="space-y-4">
+                                <h1 className="text-primary dark:text-white font-bold tracking-tighter text-4xl">Frequently Asked Questions</h1>
+                                <p className="text-muted-foreground">Here are useful questions.</p>
+                            </div>
+                            <div className="space-y-4">
+                                <InteractiveHoverButton className="w-full rounded-md xs:text-left md:text-center lg:text-lg">
+                                    <p>Is Philproperites real-estate firm?</p>
+                                </InteractiveHoverButton>
+                                <InteractiveHoverButton className="w-full rounded-md xs:text-xs xs:text-left md:text-center lg:text-lg">
+                                    What this online course platform offers?
+                                </InteractiveHoverButton>
+                                <InteractiveHoverButton className="w-full rounded-md xs:text-xs xs:text-left md:text-center lg:text-lg">
+                                    Premium plan offers?
+                                </InteractiveHoverButton>
+                            </div>
+                        </div>
+                        <div id="contacts" className="flex flex-col gap-4 xs:p-8 lg:p-12 hover:bg-muted dark:hover:bg-muted/20">
+                            <div className="space-y-4">
+                                <h1 className="text-primary dark:text-white font-bold tracking-tighter text-4xl">Contact Us</h1>
+                                <p className="text-muted-foreground">Find the right talent faster with a streamlined recruitment process.</p>
+                            </div>
+                            <div  className="space-y-4">
+                                {ContactData.map(({ id, icon: Icon, label, value }) => (
+                                    <div
+                                        key={id}
+                                        className="flex items-center justify-between bg-primary dark:bg-blue-600 rounded-md px-4 py-2 text-sm text-primary-foreground dark:text-white"
+                                    >
+                                        <div className="flex items-center flex-wrap gap-2">
+                                            <Icon className="size-4" />
+                                            {label && <span className="opacity-90">{label}</span>}
+                                            <span className="font-medium ">{value}</span>
+                                        </div>
+
+                                        <Button
+                                            variant="ghost"
+                                            size="icon"
+                                            onClick={() => handleCopy(value) + toast("Copied text successfully!")}
+                                        >
+                                            {copied === value ? (
+                                                <Check className="size-4" />
+                                            ) : (
+                                                <Clipboard className="size-4" />
+                                            )}
+                                        </Button>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Closing Remarks */}
+                    <div className="xs:p-8 lg:p-12 flex flex-col xs:text-4xl leading-tight border-t font-bold tracking-tighter text-primary dark:text-white gap-8 hover:bg-muted dark:hover:bg-muted/20">
+                        <div>
+                            Ready to supercharge? {<br />} Start by leveraging your limits.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Fragment>
+    );
+}
+
+export default LandingPage;
diff --git a/apps/web/src/modules/public/pages/NotFound.jsx b/apps/web/src/modules/public/pages/NotFound.jsx
new file mode 100644
index 0000000..a1b103f
--- /dev/null
+++ b/apps/web/src/modules/public/pages/NotFound.jsx
@@ -0,0 +1,37 @@
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '@/contexts/AuthContext'
+
+const DASHBOARD_BY_ROLE = {
+  admin: '/admin',
+  user: '/dashboard',
+  staff: '/staff',
+}
+
+export default function NotFound() {
+  const navigate = useNavigate()
+  const { user } = useAuth()
+
+  const goHome = () => {
+    navigate(DASHBOARD_BY_ROLE[user?.acc_type] ?? '/')
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-muted/40 px-4">
+      <div className="text-center space-y-6 max-w-md">
+        <p className="text-8xl font-bold text-muted-foreground/30">404</p>
+        <div className="space-y-2">
+          <h1 className="text-2xl font-semibold">Page not found</h1>
+          <p className="text-muted-foreground">
+            The page you're looking for doesn't exist or has been moved.
+          </p>
+        </div>
+        <button
+          onClick={goHome}
+          className="inline-flex items-center gap-2 px-4 py-2 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground text-sm font-medium transition-colors"
+        >
+          Go to my dashboard
+        </button>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/public/pages/PrivacyPolicy.jsx b/apps/web/src/modules/public/pages/PrivacyPolicy.jsx
new file mode 100644
index 0000000..b14a7a0
--- /dev/null
+++ b/apps/web/src/modules/public/pages/PrivacyPolicy.jsx
@@ -0,0 +1,114 @@
+/***********************************************************************************************************************************************************************
+* File Name: PrivacyPolicy.jsx
+* Type of Program: Frontend Page
+* Description: Public privacy policy page. Required by Google as the Privacy Policy URL
+*              for OAuth sensitive-scope verification (Gmail API gmail.send usage).
+* Module: Public
+* Author: Kenneth Obsequio
+* Date Created: Aug. 4, 2026
+***********************************************************************************************************************************************************************/
+
+const LAST_UPDATED = 'August 4, 2026'
+
+function Section({ title, children }) {
+  return (
+    <section className="space-y-3">
+      <h2 className="text-xl font-semibold text-primary dark:text-white tracking-tight">{title}</h2>
+      <div className="space-y-3 text-muted-foreground leading-relaxed">{children}</div>
+    </section>
+  )
+}
+
+export default function PrivacyPolicy() {
+  return (
+    <div className="max-w-3xl mx-auto px-6 py-16 space-y-10">
+      <div className="space-y-2">
+        <h1 className="text-3xl font-bold text-primary dark:text-white tracking-tighter">Privacy Policy</h1>
+        <p className="text-sm text-muted-foreground">Last updated: {LAST_UPDATED}</p>
+      </div>
+
+      <Section title="Introduction">
+        <p>
+          STARR ("we", "our", "us") is a learning management system operated by Philproperties
+          International Corporation. This policy explains what information we collect through
+          starr.philproperties.orij.space, how we use it, and how it is protected.
+        </p>
+      </Section>
+
+      <Section title="Information We Collect">
+        <p>
+          When you register or use an account on STARR, we collect the information you provide
+          directly, such as your name, email address, and contact details, along with information
+          generated by your use of the platform, such as course enrollment, progress, and quiz
+          results.
+        </p>
+        <p>
+          If you make a purchase, payment is processed by PayPal. We do not collect or store your
+          payment card details ourselves.
+        </p>
+      </Section>
+
+      <Section title="Google Sign-In">
+        <p>
+          If you choose to sign in with Google, we receive only your name, email address, and
+          profile picture from your Google account, used solely to create and authenticate your
+          STARR account. We do not request or receive access to any other Google data through this
+          sign-in.
+        </p>
+      </Section>
+
+      <Section title="Google API Services — Gmail API Use">
+        <p>
+          STARR uses the Gmail API, specifically the <code className="text-sm bg-muted px-1 py-0.5 rounded">gmail.send</code> scope,
+          solely to send transactional system emails — such as one-time passcodes (OTP) for login
+          and account notifications — from our own service mailbox. This scope only permits sending
+          mail; it does not grant access to read, collect, or share the content of any Gmail
+          account, including our own.
+        </p>
+        <p>
+          STARR's use and transfer of information received from Google APIs adheres to the{' '}
+          <a
+            href="https://developers.google.com/terms/api-services-user-data-policy"
+            target="_blank"
+            rel="noreferrer"
+            className="underline hover:text-primary dark:hover:text-white"
+          >
+            Google API Services User Data Policy
+          </a>, including the Limited Use requirements.
+        </p>
+      </Section>
+
+      <Section title="Data Security">
+        <p>
+          We use industry-standard measures, including encryption in transit, to protect the
+          information you provide. Access to user data within STARR is restricted to personnel who
+          need it to operate the platform.
+        </p>
+      </Section>
+
+      <Section title="Data Retention">
+        <p>
+          We retain account and course-activity information for as long as your account remains
+          active, or as needed to comply with legal obligations, resolve disputes, and enforce our
+          agreements.
+        </p>
+      </Section>
+
+      <Section title="Changes to This Policy">
+        <p>
+          We may update this policy from time to time. Material changes will be reflected by
+          updating the "Last updated" date above.
+        </p>
+      </Section>
+
+      <Section title="Contact Us">
+        <p>
+          If you have questions about this policy or how your information is handled, contact us at{' '}
+          <a href="mailto:services.philpro@gmail.com" className="underline hover:text-primary dark:hover:text-white">
+            services.philpro@gmail.com
+          </a>.
+        </p>
+      </Section>
+    </div>
+  )
+}
diff --git a/apps/web/src/modules/public/pages/Suspended.jsx b/apps/web/src/modules/public/pages/Suspended.jsx
new file mode 100644
index 0000000..b4b83b3
--- /dev/null
+++ b/apps/web/src/modules/public/pages/Suspended.jsx
@@ -0,0 +1,66 @@
+// ─── pages/Suspended.jsx ──────────────────────────────────────────────────────
+import { useLocation, Link } from 'react-router-dom'
+import { ShieldBan } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { useDateFormat } from '@/hooks/useDateFormat'
+
+export default function Suspended() {
+  const { state } = useLocation()
+  const { fmtDateTime } = useDateFormat()
+
+  const reason        = state?.reason         ?? null
+  const banType       = state?.ban_type        ?? null
+  const banExpiresAt  = state?.ban_expires_at  ?? null
+
+  const expiryText = banExpiresAt ? fmtDateTime(banExpiresAt) : null
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-muted/40 px-4">
+      <div className="flex flex-col items-center text-center gap-6 max-w-md w-full">
+
+        <div className="flex items-center justify-center w-16 h-16 rounded-full bg-destructive/10">
+          <ShieldBan className="size-8 text-destructive" />
+        </div>
+
+        <div className="space-y-2">
+          <h1 className="text-2xl font-semibold tracking-tight">Account Suspended</h1>
+          <p className="text-muted-foreground text-sm text-balance">
+            Your account has been suspended and you cannot access the platform at this time.
+          </p>
+        </div>
+
+        {(reason || expiryText) && (
+          <div className="w-full rounded-lg border bg-card p-4 text-left flex flex-col gap-3">
+            {reason && (
+              <div>
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium mb-0.5">Reason</p>
+                <p className="text-sm">{reason}</p>
+              </div>
+            )}
+            {banType === 'temporary' && expiryText && (
+              <div>
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium mb-0.5">Suspended Until</p>
+                <p className="text-sm">{expiryText}</p>
+              </div>
+            )}
+            {banType === 'permanent' && (
+              <div>
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium mb-0.5">Duration</p>
+                <p className="text-sm">Permanent</p>
+              </div>
+            )}
+          </div>
+        )}
+
+        <p className="text-sm text-muted-foreground">
+          If you believe this is a mistake, please contact your administrator.
+        </p>
+
+        <Button asChild variant="outline" size="sm">
+          <Link to="/login">Back to Login</Link>
+        </Button>
+
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/modules/public/pages/Unauthorized.jsx b/apps/web/src/modules/public/pages/Unauthorized.jsx
new file mode 100644
index 0000000..f936bd4
--- /dev/null
+++ b/apps/web/src/modules/public/pages/Unauthorized.jsx
@@ -0,0 +1,37 @@
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '@/contexts/AuthContext'
+
+const DASHBOARD_BY_ROLE = {
+  admin: '/admin',
+  user: '/dashboard',
+  staff: '/staff',
+}
+
+export default function Unauthorized() {
+  const navigate = useNavigate()
+  const { user } = useAuth()
+
+  const goHome = () => {
+    navigate(DASHBOARD_BY_ROLE[user?.acc_type] ?? '/')
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-muted/40 px-4">
+      <div className="text-center space-y-6 max-w-md">
+        <p className="text-8xl font-bold text-muted-foreground/30">403</p>
+        <div className="space-y-2">
+          <h1 className="text-2xl font-semibold">Access not authorized</h1>
+          <p className="text-muted-foreground">
+            You don't have permission to view this page.
+          </p>
+        </div>
+        <button
+          onClick={goHome}
+          className="inline-flex items-center gap-2 px-4 py-2 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground text-sm font-medium transition-colors"
+        >
+          Go to my dashboard
+        </button>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/staff/components/CompletionMatrix.jsx b/apps/web/src/modules/staff/components/CompletionMatrix.jsx
new file mode 100644
index 0000000..184122f
--- /dev/null
+++ b/apps/web/src/modules/staff/components/CompletionMatrix.jsx
@@ -0,0 +1,135 @@
+import { useEffect, useState } from "react";
+import { Check, Minus } from "lucide-react";
+import { useStaffScores } from "@/contexts/StaffScoreContext";
+import { cn } from "@/lib/utils";
+
+/**
+ * CompletionMatrix
+ * Shows a grid of members × tasks with check/minus icons per cell.
+ *
+ * @param {Array} taskLists - Task list objects from the group (each with task_list_id + name)
+ */
+export default function CompletionMatrix({ taskLists = [] }) {
+  const { progress, loading, fetchTaskListProgress, clearProgress } = useStaffScores();
+  const [selectedId, setSelectedId] = useState(taskLists[0]?.task_list_id ?? null);
+
+  useEffect(() => {
+    if (selectedId) fetchTaskListProgress(selectedId);
+    return () => clearProgress();
+  }, [selectedId]);
+
+  if (taskLists.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        No task lists assigned to this group.
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Task list selector — only shown when there are multiple */}
+      {taskLists.length > 1 && (
+        <div className="flex flex-wrap gap-2">
+          {taskLists.map((tl) => (
+            <button
+              key={tl.task_list_id}
+              onClick={() => setSelectedId(tl.task_list_id)}
+              className={cn(
+                "text-xs px-3 py-1.5 rounded-md border transition-colors",
+                selectedId === tl.task_list_id
+                  ? "bg-primary text-primary-foreground border-primary"
+                  : "border-border hover:bg-muted"
+              )}
+            >
+              {tl.name}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Loading */}
+      {loading && (
+        <div className="h-36 rounded-lg bg-muted/40 animate-pulse" />
+      )}
+
+      {/* Matrix table */}
+      {progress && !loading && (
+        <div className="overflow-x-auto rounded-lg border">
+          <table className="w-full text-sm border-collapse">
+            <thead>
+              <tr className="bg-muted/40">
+                <th className="text-left px-3 py-2.5 text-xs font-medium text-muted-foreground w-40 shrink-0">
+                  Member
+                </th>
+                {progress.data[0]?.tasks.map(({ task }) => (
+                  <th
+                    key={task.task_id}
+                    className="px-3 py-2.5 text-xs font-medium text-muted-foreground text-center max-w-28"
+                  >
+                    <span className="line-clamp-2 leading-tight">{task.name}</span>
+                  </th>
+                ))}
+                <th className="px-3 py-2.5 text-xs font-medium text-muted-foreground text-center">
+                  Progress
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {progress.data.map(({ user, tasks, completed_count, total_tasks }) => {
+                const fullName = user.personal_info?.name?.full_name ?? user.email ?? "";
+                const pct = total_tasks
+                  ? Math.round((completed_count / total_tasks) * 100)
+                  : 0;
+
+                return (
+                  <tr key={user.user_id} className="hover:bg-muted/20 transition-colors">
+                    <td className="px-3 py-2.5">
+                      <p className="text-xs font-medium truncate max-w-36">{fullName}</p>
+                    </td>
+
+                    {tasks.map(({ task, completion }) => (
+                      <td key={task.task_id} className="px-3 py-2.5 text-center">
+                        <div className="flex justify-center">
+                          {completion.status === "completed" ? (
+                            <div className="w-5 h-5 rounded-full bg-emerald-100 flex items-center justify-center">
+                              <Check size={11} className="text-emerald-700" aria-label="Completed" />
+                            </div>
+                          ) : (
+                            <div className="w-5 h-5 rounded-full bg-muted flex items-center justify-center">
+                              <Minus size={11} className="text-muted-foreground" aria-label="Not completed" />
+                            </div>
+                          )}
+                        </div>
+                      </td>
+                    ))}
+
+                    <td className="px-3 py-2.5">
+                      <div className="flex items-center gap-2 min-w-20">
+                        <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
+                          <div
+                            className="h-full rounded-full bg-emerald-500 transition-all duration-300"
+                            style={{ width: `${pct}%` }}
+                          />
+                        </div>
+                        <span className="text-xs text-muted-foreground shrink-0 w-10 text-right">
+                          {completed_count}/{total_tasks}
+                        </span>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {progress && !loading && progress.data.length === 0 && (
+        <p className="text-sm text-muted-foreground">
+          No members found for this task list.
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/staff/components/GroupTile.jsx b/apps/web/src/modules/staff/components/GroupTile.jsx
new file mode 100644
index 0000000..cc2183e
--- /dev/null
+++ b/apps/web/src/modules/staff/components/GroupTile.jsx
@@ -0,0 +1,95 @@
+import { Users, CheckSquare, BarChart2 } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+const AVATAR_COLORS = [
+  "bg-emerald-100 text-emerald-800",
+  "bg-purple-100 text-purple-800",
+  "bg-amber-100 text-amber-800",
+  "bg-blue-100 text-blue-800",
+  "bg-pink-100 text-pink-800",
+];
+
+/**
+ * GroupTile
+ * @param {object}   group   - Group object from API
+ * @param {function} onClick - Click handler (navigate to group detail)
+ */
+export default function GroupTile({ group, onClick }) {
+  const members    = group.members ?? [];
+  const taskLists  = group.taskLists ?? [];
+
+  // Avg completion across all tasks in all task lists
+  const allTasks   = taskLists.flatMap((tl) => tl.tasks ?? []);
+  const done       = allTasks.filter((t) => t.status === "completed").length;
+  const pct        = allTasks.length ? Math.round((done / allTasks.length) * 100) : 0;
+
+  // First 3 member initials for avatar stack
+  const avatarSlice = members.slice(0, 3).map((m) => {
+    const name = m.personal_info?.name?.full_name ?? m.email ?? "";
+    return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  });
+  const overflow = members.length - 3;
+
+  return (
+    <Card
+      className="cursor-pointer hover:border-border/80 transition-colors"
+      onClick={onClick}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => e.key === "Enter" && onClick?.()}
+    >
+      <CardContent className="p-4">
+        {/* Header */}
+        <div className="flex items-start justify-between gap-2 mb-3">
+          <div className="min-w-0">
+            <p className="text-sm font-medium truncate">{group.name}</p>
+            {group.description && (
+              <p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">
+                {group.description}
+              </p>
+            )}
+          </div>
+          {group.group_code && (
+            <Badge variant="secondary" className="text-[10px] shrink-0">
+              {group.group_code}
+            </Badge>
+          )}
+        </div>
+
+        {/* Avatar stack */}
+        <div className="flex -space-x-1.5 mb-3">
+          {avatarSlice.map((init, i) => (
+            <div
+              key={i}
+              className={`w-6 h-6 rounded-full border-2 border-background flex items-center justify-center text-[10px] font-medium ${AVATAR_COLORS[i % AVATAR_COLORS.length]}`}
+            >
+              {init}
+            </div>
+          ))}
+          {overflow > 0 && (
+            <div className="w-6 h-6 rounded-full border-2 border-background bg-muted flex items-center justify-center text-[10px] text-muted-foreground">
+              +{overflow}
+            </div>
+          )}
+          {members.length === 0 && (
+            <p className="text-xs text-muted-foreground">No members yet</p>
+          )}
+        </div>
+
+        {/* Footer meta */}
+        <div className="flex items-center gap-4 text-xs text-muted-foreground border-t pt-3">
+          <span className="flex items-center gap-1">
+            <Users size={12} aria-hidden /> {members.length} member{members.length !== 1 ? "s" : ""}
+          </span>
+          <span className="flex items-center gap-1">
+            <CheckSquare size={12} aria-hidden /> {taskLists.length} list{taskLists.length !== 1 ? "s" : ""}
+          </span>
+          <span className="flex items-center gap-1">
+            <BarChart2 size={12} aria-hidden /> {pct}% done
+          </span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/web/src/modules/staff/components/MemberDetailTabs.jsx b/apps/web/src/modules/staff/components/MemberDetailTabs.jsx
new file mode 100644
index 0000000..3a6dddd
--- /dev/null
+++ b/apps/web/src/modules/staff/components/MemberDetailTabs.jsx
@@ -0,0 +1,94 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Badge } from "@/components/ui/badge";
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+function InfoRow({ label, value }) {
+  return (
+    <div className="flex gap-3 py-2 border-b last:border-0 text-sm">
+      <span className="text-muted-foreground w-32 shrink-0">{label}</span>
+      <span className="text-foreground break-all">{value || "—"}</span>
+    </div>
+  );
+}
+
+export default function MemberDetailTabs({ member }) {
+  const { fmtDate } = useDateFormat();
+  const info = member.personal_info ?? {};
+  const name = info.name ?? {};
+  const phones = info.phone_number ?? [];
+  const addresses = info.addresses ?? [];
+
+  return (
+    <Tabs defaultValue="personal">
+      <TabsList className="w-full">
+        <TabsTrigger value="personal" className="flex-1">Personal details</TabsTrigger>
+        <TabsTrigger value="activity" className="flex-1">User activity</TabsTrigger>
+      </TabsList>
+
+      {/* Personal details */}
+      <TabsContent value="personal" className="mt-3 space-y-0">
+        <InfoRow label="Full name" value={name.full_name} />
+        <InfoRow label="Given name" value={name.given_name} />
+        <InfoRow label="Last name" value={name.last_name} />
+        <InfoRow label="Middle name" value={name.middle_name} />
+        <InfoRow label="Extension" value={name.extension_name} />
+        <InfoRow label="Date of birth" value={fmtDate(info.date_of_birth)} />
+        <InfoRow label="Occupation" value={info.occupation} />
+        <InfoRow
+          label="Phone"
+          value={
+            phones.length
+              ? phones.map((p) => `+${p.country_code} ${p.number} (${p.phone_type})`).join(", ")
+              : null
+          }
+        />
+        <InfoRow label="Email" value={member.email} />
+        <InfoRow
+          label="Address"
+          value={
+            addresses.length
+              ? addresses.map((a) => a.full_address).join("; ")
+              : null
+          }
+        />
+
+        {/* Account info section */}
+        <div className="pt-3 mt-3 border-t space-y-0">
+          <div className="flex gap-3 py-2 border-b text-sm">
+            <span className="text-muted-foreground w-32 shrink-0">Account type</span>
+            <Badge variant={member.acc_type === "staff" ? "default" : "secondary"} className="text-xs">
+              {member.acc_type}
+            </Badge>
+          </div>
+          <div className="flex gap-3 py-2 border-b text-sm">
+            <span className="text-muted-foreground w-32 shrink-0">Status</span>
+            <span className={`inline-flex items-center gap-1.5 text-xs font-medium ${member.is_active ? "text-emerald-700" : "text-muted-foreground"}`}>
+              <span className={`w-1.5 h-1.5 rounded-full ${member.is_active ? "bg-emerald-500" : "bg-muted-foreground"}`} />
+              {member.is_active ? "Active" : "Inactive"}
+            </span>
+          </div>
+          <InfoRow label="Joined group" value={fmtDate(member.UserGroupMember?.joined_at)} />
+        </div>
+      </TabsContent>
+
+      {/* Activity */}
+      <TabsContent value="activity" className="mt-3">
+        <div className="grid grid-cols-3 gap-3 mb-4">
+          {[
+            { label: "Tasks assigned", value: "—" },
+            { label: "Tasks completed", value: "—" },
+            { label: "Last active", value: "—" },
+          ].map(({ label, value }) => (
+            <div key={label} className="bg-muted/40 rounded-md p-3 text-center">
+              <p className="text-lg font-semibold">{value}</p>
+              <p className="text-xs text-muted-foreground mt-0.5">{label}</p>
+            </div>
+          ))}
+        </div>
+        <p className="text-sm text-muted-foreground text-center py-6">
+          No activity recorded yet.
+        </p>
+      </TabsContent>
+    </Tabs>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/staff/components/MemberRow.jsx b/apps/web/src/modules/staff/components/MemberRow.jsx
new file mode 100644
index 0000000..c62fdc0
--- /dev/null
+++ b/apps/web/src/modules/staff/components/MemberRow.jsx
@@ -0,0 +1,54 @@
+import { cn } from "@/lib/utils";
+
+const AVATAR_COLORS = [
+  "bg-emerald-100 text-emerald-800",
+  "bg-purple-100 text-purple-800",
+  "bg-amber-100 text-amber-800",
+  "bg-blue-100 text-blue-800",
+  "bg-pink-100 text-pink-800",
+];
+
+/**
+ * MemberRow
+ * @param {object} member      - User object from API
+ * @param {number} colorIndex  - Index to pick avatar color from palette
+ */
+export default function MemberRow({ member, colorIndex = 0 }) {
+  const fullName = member.personal_info?.name?.full_name ?? member.email ?? "";
+  const initials = fullName
+    .split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2) || "?";
+
+  const color = AVATAR_COLORS[colorIndex % AVATAR_COLORS.length];
+
+  return (
+    <div className="flex items-center gap-3 px-4 py-3">
+      {/* Avatar */}
+      <div className={cn(
+        "w-8 h-8 rounded-full flex items-center justify-center text-xs font-medium shrink-0",
+        color
+      )}>
+        {initials}
+      </div>
+
+      {/* Info */}
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium truncate">{fullName}</p>
+        <p className="text-xs text-muted-foreground truncate">{member.email}</p>
+      </div>
+
+      {/* Active badge */}
+      <span className={cn(
+        "text-[11px] font-medium px-2 py-0.5 rounded shrink-0",
+        member.is_active
+          ? "bg-emerald-50 text-emerald-800"
+          : "bg-muted text-muted-foreground"
+      )}>
+        {member.is_active ? "active" : "inactive"}
+      </span>
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/staff/components/ScoreBadge.jsx b/apps/web/src/modules/staff/components/ScoreBadge.jsx
new file mode 100644
index 0000000..0719d8c
--- /dev/null
+++ b/apps/web/src/modules/staff/components/ScoreBadge.jsx
@@ -0,0 +1,31 @@
+import { cn } from "@/lib/utils";
+
+/**
+ * ScoreBadge
+ * Shows a score as a colored pill — green if passed, red if failed, gray if no attempt.
+ *
+ * @param {number|null} score        - Score as a percentage (0–100), or null
+ * @param {number}      passingScore - Minimum passing score (default 70)
+ */
+export default function ScoreBadge({ score, passingScore = 70 }) {
+  if (score === null || score === undefined) {
+    return (
+      <span className="text-xs font-medium px-2.5 py-0.5 rounded-full bg-muted text-muted-foreground">
+        —
+      </span>
+    );
+  }
+
+  const passed = parseFloat(score) >= passingScore;
+
+  return (
+    <span className={cn(
+      "text-xs font-medium px-2.5 py-0.5 rounded-full",
+      passed
+        ? "bg-emerald-100 text-emerald-800"
+        : "bg-red-100 text-red-800"
+    )}>
+      {parseFloat(score).toFixed(1)}%
+    </span>
+  );
+}
diff --git a/apps/web/src/modules/staff/components/TaskListDetail.jsx b/apps/web/src/modules/staff/components/TaskListDetail.jsx
new file mode 100644
index 0000000..dee7427
--- /dev/null
+++ b/apps/web/src/modules/staff/components/TaskListDetail.jsx
@@ -0,0 +1,250 @@
+import { useState, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from "@/components/ui/table";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { StatGrid }      from "@/components/generic/Dashboard/StatGrid";
+import { PieBreakdown }  from "@/components/generic/Dashboard/PieBreakdown";
+import { BarBreakdown }  from "@/components/generic/Dashboard/BarBreakdown";
+
+const PAGE_SIZE = 10;
+
+const STATUS_LABEL = {
+  completed:   "Completed",
+  in_progress: "In progress",
+  pending:     "Pending",
+  not_started: "Not started",
+};
+
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+function StatusBadge({ status }) {
+  const map = {
+    completed:   "bg-emerald-100 text-emerald-800",
+    in_progress: "bg-blue-100 text-blue-800",
+    pending:     "bg-amber-100 text-amber-800",
+    not_started: "bg-slate-100 text-slate-700",
+  };
+  return (
+    <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${map[status] ?? map.not_started}`}>
+      {STATUS_LABEL[status] ?? status ?? "Not started"}
+    </span>
+  );
+}
+
+export default function TaskListDetail({ taskList }) {
+  const tasks = taskList.tasks ?? [];
+  const [search, setSearch] = useState("");
+  const [page, setPage]     = useState(1);
+  const { fmtDate } = useDateFormat();
+
+  // ── Derived stats ───────────────────────────────────────────────────────
+  const counts = useMemo(() => {
+    const total      = tasks.length;
+    const completed  = tasks.filter((t) => t.status === "completed").length;
+    const inProgress = tasks.filter((t) => t.status === "in_progress").length;
+    const pending    = tasks.filter((t) => t.status === "pending").length;
+    const notStarted = tasks.filter((t) => !t.status || t.status === "not_started").length;
+    const pct        = total ? Math.round((completed / total) * 100) : 0;
+    return { total, completed, inProgress, pending, notStarted, pct };
+  }, [tasks]);
+
+  // StatGrid data
+  const summaryStats = [
+    { key: "total",       label: "Total tasks",  value: counts.total },
+    { key: "completed",   label: "Completed",    value: counts.completed },
+    { key: "in_progress", label: "In progress",  value: counts.inProgress },
+    { key: "pending",     label: "Pending",      value: counts.pending },
+    { key: "not_started", label: "Not started",  value: counts.notStarted },
+  ];
+
+  // PieBreakdown: status distribution
+  const pieData = useMemo(() => [
+    { label: "Completed",   value: counts.completed },
+    { label: "In progress", value: counts.inProgress },
+    { label: "Pending",     value: counts.pending },
+    { label: "Not started", value: counts.notStarted },
+  ].filter((d) => d.value > 0), [counts]);
+
+  // BarBreakdown: per-task completion (first 20)
+  const barData = useMemo(() =>
+    tasks.slice(0, 20).map((t, i) => ({
+      label: t.name
+        ? (t.name.length > 14 ? t.name.slice(0, 12) + "…" : t.name)
+        : `Task ${i + 1}`,
+      value: t.status === "completed" ? 1 : 0,
+    })),
+    [tasks]
+  );
+
+  // ── Tasks DataTable ─────────────────────────────────────────────────────
+  const filtered = useMemo(() => {
+    const q = search.toLowerCase();
+    if (!q) return tasks;
+    return tasks.filter((t) =>
+      (t.name ?? "").toLowerCase().includes(q) ||
+      (t.status ?? "").toLowerCase().includes(q)
+    );
+  }, [tasks, search]);
+
+  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+  const safePage   = Math.min(page, totalPages);
+  const slice      = filtered.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE);
+
+  return (
+    <Tabs defaultValue="summary">
+      <TabsList className="w-full">
+        <TabsTrigger value="summary" className="flex-1">Summary</TabsTrigger>
+        <TabsTrigger value="tasks"   className="flex-1">Tasks ({tasks.length})</TabsTrigger>
+      </TabsList>
+
+      {/* ── Summary ─────────────────────────────────────────────────────── */}
+      <TabsContent value="summary" className="mt-4 space-y-4">
+
+        {/* Stat cards via StatGrid */}
+        <StatGrid stats={summaryStats} />
+
+        {/* Overall progress bar */}
+        <div>
+          <div className="flex justify-between text-xs text-muted-foreground mb-1">
+            <span>Overall completion</span>
+            <span>{counts.pct}%</span>
+          </div>
+          <div className="h-2 rounded-full bg-muted overflow-hidden">
+            <div
+              className="h-full rounded-full bg-emerald-500 transition-all"
+              style={{ width: `${counts.pct}%` }}
+            />
+          </div>
+        </div>
+
+        {tasks.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center py-8">
+            No tasks in this list yet.
+          </p>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            {/* Status breakdown pie */}
+            <PieBreakdown
+              label="Status breakdown"
+              data={pieData}
+              height={200}
+            />
+
+            {/* Per-task bar (horizontal) */}
+            <BarBreakdown
+              label={`Task completion${tasks.length > 20 ? " (first 20)" : ""}`}
+              data={barData}
+              height={Math.max(160, barData.length * 32 + 40)}
+              yAxisWidth={100}
+            />
+          </div>
+        )}
+
+        {/* Meta */}
+        <div className="text-xs text-muted-foreground space-y-1 pt-2 border-t">
+          <p>Created: <span className="text-foreground">{fmtDate(taskList.createdAt)}</span></p>
+          <p>Assigned: <span className="text-foreground">{fmtDate(taskList.TaskListGroup?.assignedAt)}</span></p>
+        </div>
+      </TabsContent>
+
+      {/* ── Tasks DataTable ──────────────────────────────────────────────── */}
+      <TabsContent value="tasks" className="mt-4 space-y-3">
+        <Input
+          placeholder="Search tasks…"
+          value={search}
+          onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+          className="h-8 text-sm w-56"
+        />
+
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-10">#</TableHead>
+                <TableHead>Task name</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Due date</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {slice.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={4} className="text-center text-sm text-muted-foreground py-8">
+                    {tasks.length === 0 ? "No tasks in this list." : "No tasks match your search."}
+                  </TableCell>
+                </TableRow>
+              ) : (
+                slice.map((task, i) => (
+                  <TableRow key={task.task_id ?? i}>
+                    <TableCell className="text-muted-foreground text-xs">
+                      {(safePage - 1) * PAGE_SIZE + i + 1}
+                    </TableCell>
+                    <TableCell className="font-medium text-sm">
+                      {task.name ?? `Task ${i + 1}`}
+                    </TableCell>
+                    <TableCell>
+                      <StatusBadge status={task.status} />
+                    </TableCell>
+                    <TableCell className="text-sm text-muted-foreground">
+                      {fmtDate(task.due_date)}
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </div>
+
+        {/* Pagination */}
+        {filtered.length > 0 && (
+          <div className="flex items-center justify-between text-sm text-muted-foreground">
+            <span>
+              {`${(safePage - 1) * PAGE_SIZE + 1}–${Math.min(safePage * PAGE_SIZE, filtered.length)} of ${filtered.length}`}
+            </span>
+            <div className="flex items-center gap-1">
+              <Button
+                variant="outline" size="sm" className="h-7 px-2"
+                disabled={safePage === 1}
+                onClick={() => setPage(safePage - 1)}
+              >
+                Previous
+              </Button>
+              {Array.from({ length: totalPages }, (_, i) => i + 1)
+                .filter((p) => p === 1 || p === totalPages || Math.abs(p - safePage) <= 1)
+                .reduce((acc, p, i, arr) => {
+                  if (i > 0 && p - arr[i - 1] > 1) acc.push("...");
+                  acc.push(p);
+                  return acc;
+                }, [])
+                .map((p, idx) =>
+                  p === "..." ? (
+                    <span key={`e-${idx}`} className="px-1">…</span>
+                  ) : (
+                    <Button
+                      key={p}
+                      variant={p === safePage ? "default" : "outline"}
+                      size="sm"
+                      className="h-7 w-7 p-0"
+                      onClick={() => setPage(p)}
+                    >
+                      {p}
+                    </Button>
+                  )
+                )}
+              <Button
+                variant="outline" size="sm" className="h-7 px-2"
+                disabled={safePage === totalPages}
+                onClick={() => setPage(safePage + 1)}
+              >
+                Next
+              </Button>
+            </div>
+          </div>
+        )}
+      </TabsContent>
+    </Tabs>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/staff/components/TaskListTable.jsx b/apps/web/src/modules/staff/components/TaskListTable.jsx
new file mode 100644
index 0000000..054c65c
--- /dev/null
+++ b/apps/web/src/modules/staff/components/TaskListTable.jsx
@@ -0,0 +1,207 @@
+/***********************************************************************************************************************************************************************
+ * File Name: TaskListTable.jsx (staff)
+ * Type of Program: Component
+ * Description: DataTable-based task list table for staff, scoped to their groups.
+ *              Mirrors the admin TaskListTable pattern exactly.
+ ***********************************************************************************************************************************************************************/
+import { useMemo, useRef, useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useStaffTasks } from "@/contexts/StaffTaskContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
+import { RestoreDialog } from "@/components/generic/Dialogs/RestoreDialog";
+
+import { buildDataColumns, columnPinning } from "../config/task_list/columns.config";
+import { buildToolbarActions } from "../config/task_list/toolbar.config";
+import { buildSelectionActions } from "../config/task_list/selection.config";
+import { buildRowActions } from "../config/task_list/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+export default function TaskListTable() {
+    const navigate = useNavigate();
+
+    const { user: currentUser } = useAuth();
+
+    const {
+        taskLists, attributes, pagination, setPagination, loading,
+        fetchTaskLists, fetchArchivedTaskLists, fetchTaskListFieldValues,
+        archiveTaskList, restoreTaskList,
+        bulkArchiveTaskLists, bulkRestoreTaskLists,
+    } = useStaffTasks();
+
+    const [showArchived,  setShowArchived]  = useState(false);
+    const [archiveTarget, setArchiveTarget] = useState(null);
+    const [restoreTarget, setRestoreTarget] = useState(null);
+    const [archiveIds,    setArchiveIds]    = useState(null);
+    const [restoreIds,    setRestoreIds]    = useState(null);
+
+    const tableRefsRef = useRef({
+        getFilters:    () => [],
+        getSort:       () => [],
+        resetSelection: () => {},
+        tableInstance: null,
+    });
+
+    const handleRefsReady = (refs) => {
+        tableRefsRef.current = refs;
+    };
+
+    // ── Toggle archived view ──────────────────────────────────────────────────
+    const handleToggleArchived = useCallback(() => {
+        const next = !showArchived;
+        setShowArchived(next);
+        fetchTaskLists({
+            page: 1,
+            limit: pagination?.limit ?? 10,
+            filters: tableRefsRef.current.getFilters(),
+            sort:    tableRefsRef.current.getSort(),
+            archived: next,
+        });
+    }, [showArchived, pagination, fetchTaskLists]);
+
+    // ── Refetch after any archive/restore action ──────────────────────────────
+    const handleSuccess = () => {
+        setArchiveTarget(null);
+        setRestoreTarget(null);
+        setArchiveIds(null);
+        setRestoreIds(null);
+        tableRefsRef.current.resetSelection?.();
+        const fetcher = showArchived ? fetchArchivedTaskLists : fetchTaskLists;
+        fetcher({
+            page: 1,
+            limit: pagination?.limit ?? 10,
+            filters: tableRefsRef.current.getFilters(),
+            sort:    tableRefsRef.current.getSort(),
+        });
+    };
+
+    // ── Export config ─────────────────────────────────────────────────────────
+    const exportConfig = useMemo(() => ({
+        allData:   taskLists,
+        attributes,
+        filename:  `${getTimestamp()}_TaskLists`,
+        sheetName: "Task Lists",
+        generatedBy: formatGeneratedBy(currentUser),
+    }), [taskLists, attributes, currentUser]);
+
+    // ── Row actions ───────────────────────────────────────────────────────────
+    const rowActions = buildRowActions({
+        navigate,
+        onArchive:    (row) => setArchiveTarget(row),
+        onRestore:    (row) => setRestoreTarget(row),
+        showArchived,
+    });
+
+    // ── Toolbar ───────────────────────────────────────────────────────────────
+    const toolbarActions = buildToolbarActions({
+        fetchTaskLists,
+        fetchArchivedTaskLists,
+        pagination,
+        navigate,
+        exportConfig,
+        showArchived,
+        onToggleArchived: handleToggleArchived,
+        getFilters:    () => tableRefsRef.current.getFilters(),
+        getSort:       () => tableRefsRef.current.getSort(),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    // ── Selection ─────────────────────────────────────────────────────────────
+    const selectionActions = buildSelectionActions({
+        exportConfig,
+        showArchived,
+        onBulkArchive:    (ids) => setArchiveIds(ids),
+        onBulkRestore:    (ids) => setRestoreIds(ids),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    // ── Columns ───────────────────────────────────────────────────────────────
+    const columns = useMemo(
+        () => buildDataColumns(attributes, rowActions),
+        [attributes, rowActions]
+    );
+
+    return (
+        <>
+            <DataTable
+                title="Task Lists"
+                data={taskLists}
+                columns={columns}
+                attributes={attributes}
+                pagination={pagination}
+                setPagination={setPagination}
+                loading={loading}
+                onFetch={fetchTaskLists}
+                onFetchFilterData={fetchTaskListFieldValues}
+                onRefsReady={handleRefsReady}
+                renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+                    <FilterSheet
+                        open={open}
+                        onOpenChange={onOpenChange}
+                        column={column}
+                        attr={attr}
+                        data={data}
+                        loading={loading}
+                    />
+                )}
+                columnPinning={columnPinning}
+                toolbarActions={toolbarActions}
+                selectionActions={selectionActions}
+                recordLabel="task list"
+                emptyMessage="No task lists found."
+            />
+
+            {/* Single archive */}
+            <ArchiveDialog
+                open={!!archiveTarget}
+                onOpenChange={(v) => !v && setArchiveTarget(null)}
+                entity={archiveTarget}
+                entityLabel="Task List"
+                getName={(r) => r?.name}
+                onArchive={(entity) => archiveTaskList(entity?.task_list_id)}
+                loading={loading}
+                onSuccess={handleSuccess}
+            />
+
+            {/* Single restore */}
+            <RestoreDialog
+                open={!!restoreTarget}
+                onOpenChange={(v) => !v && setRestoreTarget(null)}
+                entity={restoreTarget}
+                entityLabel="Task List"
+                getName={(r) => r?.name}
+                onRestore={(entity) => restoreTaskList(entity?.task_list_id)}
+                loading={loading}
+                onSuccess={handleSuccess}
+            />
+
+            {/* Bulk archive */}
+            <ArchiveDialog
+                open={!!archiveIds}
+                onOpenChange={(v) => !v && setArchiveIds(null)}
+                ids={archiveIds ?? []}
+                entityLabel="Task List"
+                onArchive={({ ids }) => bulkArchiveTaskLists(ids)}
+                loading={loading}
+                onSuccess={handleSuccess}
+            />
+
+            {/* Bulk restore */}
+            <RestoreDialog
+                open={!!restoreIds}
+                onOpenChange={(v) => !v && setRestoreIds(null)}
+                ids={restoreIds ?? []}
+                entityLabel="Task List"
+                onRestore={({ ids }) => bulkRestoreTaskLists(ids)}
+                loading={loading}
+                onSuccess={handleSuccess}
+            />
+        </>
+    );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/staff/components/TaskListsTab.jsx b/apps/web/src/modules/staff/components/TaskListsTab.jsx
new file mode 100644
index 0000000..2188d1e
--- /dev/null
+++ b/apps/web/src/modules/staff/components/TaskListsTab.jsx
@@ -0,0 +1,158 @@
+import { useState, useMemo } from "react";
+import { Eye } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { PieBreakdown } from "@/components/generic/Dashboard/PieBreakdown";
+import { BarBreakdown } from "@/components/generic/Dashboard/BarBreakdown";
+import TaskListDetail from "./TaskListDetail";
+
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+export default function TaskListsTab({ taskLists = [] }) {
+  const [selected, setSelected] = useState(null);
+  const { fmtDate } = useDateFormat();
+
+  // PieBreakdown: overall task completion status across all lists
+  const completionPieData = useMemo(() => {
+    let completed = 0, inProgress = 0, pending = 0, notStarted = 0;
+    taskLists.forEach((tl) => {
+      (tl.tasks ?? []).forEach((t) => {
+        if (t.status === "completed")       completed++;
+        else if (t.status === "in_progress") inProgress++;
+        else if (t.status === "pending")     pending++;
+        else                                 notStarted++;
+      });
+    });
+    return [
+      { label: "Completed",   value: completed },
+      { label: "In progress", value: inProgress },
+      { label: "Pending",     value: pending },
+      { label: "Not started", value: notStarted },
+    ].filter((d) => d.value > 0);
+  }, [taskLists]);
+
+  // BarBreakdown: total tasks per list
+  const tasksPerListData = useMemo(() =>
+    taskLists.map((tl) => ({
+      label: tl.name.length > 20 ? tl.name.slice(0, 18) + "…" : tl.name,
+      value: tl.tasks?.length ?? 0,
+    })),
+    [taskLists]
+  );
+
+  const hasAnyTasks = taskLists.some((tl) => (tl.tasks?.length ?? 0) > 0);
+
+  return (
+    <div className="space-y-4">
+      {/* Charts — only shown when there's actual task data */}
+      {taskLists.length > 0 && hasAnyTasks && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <PieBreakdown
+            label="Task completion status"
+            data={completionPieData}
+            height={220}
+          />
+          <BarBreakdown
+            label="Tasks per list"
+            data={tasksPerListData}
+            height={Math.max(160, tasksPerListData.length * 40 + 40)}
+            yAxisWidth={120}
+          />
+        </div>
+      )}
+
+      {/* Table */}
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Tasks</TableHead>
+              <TableHead className="w-48">Progress</TableHead>
+              <TableHead>Assigned</TableHead>
+              <TableHead className="w-10"></TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {taskLists.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={5} className="text-center text-sm text-muted-foreground py-8">
+                  No task lists assigned to this group.
+                </TableCell>
+              </TableRow>
+            ) : (
+              taskLists.map((tl) => {
+                const total = tl.tasks?.length ?? 0;
+                const done  = tl.tasks?.filter((t) => t.status === "completed").length ?? 0;
+                const pct   = total ? Math.round((done / total) * 100) : 0;
+
+                return (
+                  <TableRow
+                    key={tl.task_list_id}
+                    className="cursor-pointer"
+                    onClick={() => setSelected(tl)}
+                  >
+                    <TableCell className="font-medium">{tl.name}</TableCell>
+                    <TableCell className="text-muted-foreground text-sm">
+                      {total} task{total !== 1 ? "s" : ""}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
+                          <div
+                            className="h-full rounded-full bg-emerald-500 transition-all"
+                            style={{ width: `${pct}%` }}
+                          />
+                        </div>
+                        <span className="text-xs text-muted-foreground w-8 text-right">{pct}%</span>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-sm text-muted-foreground">
+                      {fmtDate(tl.TaskListGroup?.assignedAt)}
+                    </TableCell>
+                    <TableCell>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        onClick={(e) => { e.stopPropagation(); setSelected(tl); }}
+                      >
+                        <Eye size={14} />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Task list detail dialog */}
+      <Dialog open={!!selected} onOpenChange={(open) => !open && setSelected(null)}>
+        <DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{selected?.name}</DialogTitle>
+            {selected?.description && (
+              <p className="text-sm text-muted-foreground">{selected.description}</p>
+            )}
+          </DialogHeader>
+          {selected && <TaskListDetail taskList={selected} />}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/staff/components/TaskRow.jsx b/apps/web/src/modules/staff/components/TaskRow.jsx
new file mode 100644
index 0000000..1ba0800
--- /dev/null
+++ b/apps/web/src/modules/staff/components/TaskRow.jsx
@@ -0,0 +1,96 @@
+import { Pencil, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+
+const REQ_TYPE_STYLES = {
+  visit_link:   "bg-blue-50 text-blue-800",
+  upload_file:  "bg-purple-50 text-purple-800",
+  read_course:  "bg-emerald-50 text-emerald-800",
+  read_unit:    "bg-amber-50 text-amber-800",
+  read_lesson:  "bg-pink-50 text-pink-800",
+};
+
+const REQ_TYPE_LABELS = {
+  visit_link:   "link",
+  upload_file:  "upload",
+  read_course:  "course",
+  read_unit:    "unit",
+  read_lesson:  "lesson",
+};
+
+const STATUS_STYLES = {
+  pending:     "bg-muted text-muted-foreground",
+  in_progress: "bg-blue-50 text-blue-800",
+  completed:   "bg-emerald-50 text-emerald-800",
+  overdue:     "bg-red-50 text-red-800",
+};
+
+/**
+ * TaskRow
+ * @param {object}   task     - Task object from API
+ * @param {function} onEdit   - Optional edit handler (shows edit button)
+ * @param {function} onDelete - Optional delete handler (shows delete button)
+ */
+export default function TaskRow({ task, onEdit, onDelete }) {
+  const reqType = task.requirements?.[0]?.type;
+
+  return (
+    <div className="flex items-center gap-3 py-2.5">
+      {/* Name */}
+      <p className="flex-1 text-sm truncate min-w-0">{task.name}</p>
+
+      {/* Requirement type badge */}
+      {reqType && (
+        <span className={cn(
+          "text-[11px] font-medium px-2 py-0.5 rounded shrink-0",
+          REQ_TYPE_STYLES[reqType]
+        )}>
+          {REQ_TYPE_LABELS[reqType]}
+        </span>
+      )}
+
+      {/* Status badge */}
+      {task.status && (
+        <span className={cn(
+          "text-[11px] font-medium px-2 py-0.5 rounded shrink-0",
+          STATUS_STYLES[task.status]
+        )}>
+          {task.status.replace("_", " ")}
+        </span>
+      )}
+
+      {/* Deadline */}
+      {task.deadline && (
+        <span className="text-xs text-muted-foreground w-14 text-right shrink-0">
+          {format(new Date(task.deadline), "MMM d")}
+        </span>
+      )}
+
+      {/* Edit / Delete */}
+      {(onEdit || onDelete) && (
+        <div className="flex items-center gap-0.5 shrink-0">
+          {onEdit && (
+            <Button
+              variant="ghost" size="icon" className="h-6 w-6"
+              onClick={(e) => { e.stopPropagation(); onEdit(); }}
+              title="Edit task"
+            >
+              <Pencil size={11} />
+            </Button>
+          )}
+          {onDelete && (
+            <Button
+              variant="ghost" size="icon"
+              className="h-6 w-6 text-destructive hover:text-destructive"
+              onClick={(e) => { e.stopPropagation(); onDelete(); }}
+              title="Delete task"
+            >
+              <Trash2 size={11} />
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/staff/components/members/MembersTable.jsx b/apps/web/src/modules/staff/components/members/MembersTable.jsx
new file mode 100644
index 0000000..ac44f92
--- /dev/null
+++ b/apps/web/src/modules/staff/components/members/MembersTable.jsx
@@ -0,0 +1,180 @@
+import { useMemo, useRef, useState, useCallback } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useStaffGroups } from "@/contexts/StaffGroupContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle, } from "@/components/ui/dialog";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+
+import { buildDataColumns, columnPinning } from "../../config/members/columns.config";
+import { buildToolbarActions } from "../../config/members/toolbar.config";
+import { buildSelectionActions } from "../../config/members/selection.config";
+import { buildRowActions } from "../../config/members/rowActions.config";
+
+import MemberDetailTabs from "../MemberDetailTabs";
+import { getTimestamp } from "@/utils/timestamp.util";
+import { formatGeneratedBy } from "@/utils/generatedBy.util";
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function getInitials(member) {
+  const first = member.personal_info?.name?.given_name?.[0] ?? "";
+  const last = member.personal_info?.name?.last_name?.[0] ?? "";
+  return (first + last).toUpperCase() || "??";
+}
+
+function getFullName(member) {
+  const n = member.personal_info?.name;
+  if (!n) return member.email;
+  return `${n.given_name ?? ""} ${n.last_name ?? ""}`.trim();
+}
+
+const AVATAR_COLORS = [
+  "bg-blue-100   text-blue-800",
+  "bg-emerald-100 text-emerald-800",
+  "bg-violet-100 text-violet-800",
+  "bg-amber-100  text-amber-800",
+  "bg-rose-100   text-rose-800",
+  "bg-cyan-100   text-cyan-800",
+];
+
+
+export default function MembersTable() {
+  const navigate = useNavigate();
+  const { groupId } = useParams();
+
+  const { user: currentUser } = useAuth();
+
+  const {
+    members,
+    memberAttributes,
+    memberPagination,
+    setMemberPagination,
+    membersLoading,
+    fetchGroupMembers,
+    fetchGroupMemberFieldValues,
+  } = useStaffGroups();
+
+  const [selected, setSelected] = useState(null);
+
+  const tableRefsRef = useRef({
+    getFilters: () => [],
+    getSort: () => [],
+    resetSelection: () => { },
+    tableInstance: null,
+  });
+
+  const handleRefsReady = (refs) => {
+    tableRefsRef.current = refs;
+  };
+
+  const handleFetch = useCallback(
+    (params) => fetchGroupMembers(groupId, params),
+    [groupId, fetchGroupMembers]
+  );
+
+  const handleFetchFilterData = useCallback(
+    (col, params) => fetchGroupMemberFieldValues(groupId, col, params),
+    [groupId, fetchGroupMemberFieldValues]
+  );
+
+  // ── Export config ───────────────────────────────────────────────────────────
+  const exportConfig = useMemo(() => ({
+    allData: members,
+    attributes: memberAttributes,
+    filename: `${getTimestamp()}_GroupMembers`,
+    sheetName: "Members",
+    generatedBy: formatGeneratedBy(currentUser),
+  }), [members, memberAttributes, currentUser]);
+
+  // ── Row actions ─────────────────────────────────────────────────────────────
+  const rowActions = useMemo(() => buildRowActions({
+    onView: (member) => setSelected(member),
+  }), []);
+
+  // ── Toolbar ─────────────────────────────────────────────────────────────────
+  const toolbarActions = useMemo(() => buildToolbarActions({
+    fetchMembers: handleFetch,
+    memberPagination,
+    exportConfig,
+    getFilters: () => tableRefsRef.current.getFilters(),
+    getSort: () => tableRefsRef.current.getSort(),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  }), [handleFetch, memberPagination, exportConfig]);
+
+  // ── Selection ───────────────────────────────────────────────────────────────
+  const selectionActions = buildSelectionActions({
+    exportConfig,
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  // ── Columns ─────────────────────────────────────────────────────────────────
+  const columns = useMemo(
+    () => buildDataColumns(memberAttributes, rowActions),
+    [memberAttributes, rowActions]
+  );
+
+  return (
+    <>
+      <DataTable
+        title="Members"
+        data={members}
+        columns={columns}
+        attributes={memberAttributes}
+        pagination={memberPagination}
+        setPagination={setMemberPagination}
+        loading={membersLoading}
+        onFetch={handleFetch}
+        onFetchFilterData={handleFetchFilterData}
+        onRefsReady={handleRefsReady}
+        renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+          <FilterSheet
+            open={open}
+            onOpenChange={onOpenChange}
+            column={column}
+            attr={attr}
+            data={data}
+            loading={loading}
+          />
+        )}
+        columnPinning={columnPinning}
+        toolbarActions={toolbarActions}
+        selectionActions={selectionActions}
+        recordLabel="member"
+        emptyMessage="No members found."
+        onRowClick={(row) => setSelected(row.original)}
+      />
+
+      {/* Member detail dialog */}
+      <Dialog open={!!selected} onOpenChange={(open) => !open && setSelected(null)}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <div className="flex items-center gap-3">
+              {selected && (
+                <div
+                  className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold ${AVATAR_COLORS[
+                    members.findIndex((m) => m.user_id === selected.user_id) % AVATAR_COLORS.length
+                  ]
+                    }`}
+                >
+                  {getInitials(selected)}
+                </div>
+              )}
+              <div>
+                <DialogTitle className="text-base">
+                  {selected && getFullName(selected)}
+                </DialogTitle>
+                <p className="text-xs text-muted-foreground mt-0.5">
+                  {selected?.personal_info?.occupation} · {selected?.acc_type}
+                </p>
+              </div>
+            </div>
+          </DialogHeader>
+          {selected && <MemberDetailTabs member={selected} />}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/staff/config/members/columns.config.jsx b/apps/web/src/modules/staff/config/members/columns.config.jsx
new file mode 100644
index 0000000..e300134
--- /dev/null
+++ b/apps/web/src/modules/staff/config/members/columns.config.jsx
@@ -0,0 +1,43 @@
+// config/task_list/columns.config.jsx
+// Column definitions and pinning config for the Staff Task List table.
+
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { OverflowBadges } from "@/components/generic/OverflowBadges";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+const cellOverrides = {
+  // Example: render assigned groups as badges
+  groups: (info) => (
+    <OverflowBadges
+      items={info.getValue() ?? []}
+      keyKey="group_id"
+      labelKey="group_code"
+      dialogTitleKey="name"
+      dialogTitle="All groups"
+      badgeClassName="text-xs font-mono"
+    />
+  ),
+};
+
+/**
+ * Builds the full column array for the Staff Task List table.
+ *
+ * @param {Array}  attributes  Field definitions from the server (drives data columns)
+ * @param {Array}  rowActions  Row-level kebab action definitions
+ * @returns {Array}            TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Task List Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/staff/config/members/rowActions.config.jsx b/apps/web/src/modules/staff/config/members/rowActions.config.jsx
new file mode 100644
index 0000000..b51059e
--- /dev/null
+++ b/apps/web/src/modules/staff/config/members/rowActions.config.jsx
@@ -0,0 +1,56 @@
+// config/task_list/rowActions.config.jsx
+// Row-level kebab menu actions for the Staff Task List table.
+// Staff can view, edit, view tasks, archive, and restore — scoped to their groups.
+
+import { Eye, Pencil, NotebookPen, Archive, RotateCcw } from "lucide-react";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.navigate       react-router navigate fn
+ * @param {Function} deps.onArchive      called with the row when Archive is clicked
+ * @param {Function} deps.onRestore      called with the row when Restore is clicked
+ * @param {boolean}  deps.showArchived   toggles archive vs restore action visibility
+ */
+export function buildRowActions({ navigate, onArchive, onRestore, showArchived }) {
+  return [
+    {
+      key: "view",
+      label: "View Info",
+      icon: <Eye className="size-4" />,
+      onClick: (row) => navigate(`${row.task_list_id}/view`),
+    },
+    {
+      key: "edit",
+      label: "Edit Info",
+      icon: <Pencil className="size-4" />,
+      onClick: (row) => navigate(`${row.task_list_id}/edit`),
+      hidden: () => showArchived,
+    },
+    {
+      key: "tasks",
+      label: "View Tasks",
+      icon: <NotebookPen className="size-4" />,
+      onClick: (row) => navigate(`${row.task_list_id}/tasks`),
+      separator: true,
+      className: "text-sky-800",
+    },
+    {
+      key: "archive",
+      label: "Archive",
+      icon: <Archive className="size-4" />,
+      className: "text-destructive focus:text-destructive",
+      onClick: (row) => onArchive(row),
+      hidden: () => showArchived,
+      separator: true,
+    },
+    {
+      key: "restore",
+      label: "Restore",
+      icon: <RotateCcw className="size-4" />,
+      className: "text-emerald-600 focus:text-emerald-600",
+      onClick: (row) => onRestore(row),
+      hidden: () => !showArchived,
+      separator: true,
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/staff/config/members/selection.config.jsx b/apps/web/src/modules/staff/config/members/selection.config.jsx
new file mode 100644
index 0000000..4dd64c0
--- /dev/null
+++ b/apps/web/src/modules/staff/config/members/selection.config.jsx
@@ -0,0 +1,51 @@
+// config/task_list/selection.config.jsx
+// Bulk selection actions for the Staff Task List table.
+
+import { Download, Archive, RotateCcw } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+/**
+ * @param {Object}   deps
+ * @param {Object}   deps.exportConfig       passed straight to exportTableToExcel
+ * @param {boolean}  deps.showArchived        drives archive vs restore label/icon
+ * @param {Function} deps.onBulkArchive       called with selected task_list_id[]
+ * @param {Function} deps.onBulkRestore       called with selected task_list_id[]
+ * @param {Function} deps.getTableInstance    returns the TanStack table instance
+ */
+export function buildSelectionActions({
+  exportConfig,
+  showArchived,
+  onBulkArchive,
+  onBulkRestore,
+  getTableInstance,
+}) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows: rows,
+          tableInstance: table ?? getTableInstance?.(),
+        }),
+    },
+    {
+      key: showArchived ? "restore-selected" : "archive-selected",
+      label: showArchived ? "Restore" : "Archive",
+      icon: showArchived ? (
+        <RotateCcw className="h-3.5 w-3.5" />
+      ) : (
+        <Archive className="h-3.5 w-3.5" />
+      ),
+      className:
+        "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.task_list_id).filter(Boolean);
+        if (!ids.length) return;
+        showArchived ? onBulkRestore?.(ids) : onBulkArchive?.(ids);
+      },
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/staff/config/members/toolbar.config.jsx b/apps/web/src/modules/staff/config/members/toolbar.config.jsx
new file mode 100644
index 0000000..e492ef5
--- /dev/null
+++ b/apps/web/src/modules/staff/config/members/toolbar.config.jsx
@@ -0,0 +1,78 @@
+// config/task_list/toolbar.config.jsx
+// Toolbar actions for the Staff Task List table.
+
+import { RefreshCw, Download, Plus, Archive } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.fetchTaskLists          fetches active task lists
+ * @param {Function} deps.fetchArchivedTaskLists  fetches archived task lists
+ * @param {Object}   deps.pagination              current pagination state
+ * @param {Object}   deps.exportConfig            passed straight to exportTableToExcel
+ * @param {Function} deps.navigate                react-router navigate fn
+ * @param {boolean}  deps.showArchived            drives label and toggle behaviour
+ * @param {Function} deps.onToggleArchived        flips showArchived in the page
+ * @param {Function} deps.getFilters              returns active filter array from table
+ * @param {Function} deps.getSort                 returns active sort array from table
+ * @param {Function} deps.getTableInstance        returns the TanStack table instance
+ */
+export function buildToolbarActions({
+  fetchTaskLists,
+  fetchArchivedTaskLists,
+  pagination,
+  exportConfig,
+  navigate,
+  showArchived,
+  onToggleArchived,
+  getFilters,
+  getSort,
+  getTableInstance,
+}) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      icon: <RefreshCw className="size-4" />,
+      label: "Refresh",
+      onClick: () => {
+        const fetcher = showArchived ? fetchArchivedTaskLists : fetchTaskLists;
+        fetcher({
+          page: 1,
+          limit: pagination?.limit ?? 10,
+          filters: getFilters?.() ?? [],
+          sort: getSort?.() ?? [],
+        });
+      },
+    },
+    {
+      key: "export",
+      type: "button",
+      icon: <Download className="size-4" />,
+      label: "Export",
+      onClick: (table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          tableInstance: table ?? getTableInstance?.(),
+        }),
+    },
+    {
+      key: "add-task-list",
+      type: "button",
+      icon: <Plus className="size-4" />,
+      label: "Create Task List",
+      variant: "default",
+      className: "text-primary-foreground",
+      onClick: () => navigate(`/staff/task-lists/create`),
+    },
+    {
+      key: "toggle-archived",
+      type: "button",
+      icon: <Archive className="size-4" />,
+      label: showArchived ? "Active Task Lists" : "Archived Task Lists",
+      variant: "secondary",
+      className: "border border-border",
+      onClick: onToggleArchived,
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/staff/config/task_list/columns.config.jsx b/apps/web/src/modules/staff/config/task_list/columns.config.jsx
new file mode 100644
index 0000000..e300134
--- /dev/null
+++ b/apps/web/src/modules/staff/config/task_list/columns.config.jsx
@@ -0,0 +1,43 @@
+// config/task_list/columns.config.jsx
+// Column definitions and pinning config for the Staff Task List table.
+
+import { buildColumns } from "@/utils/table.util";
+import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
+import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
+import { OverflowBadges } from "@/components/generic/OverflowBadges";
+
+export const columnPinning = {
+  right: ["actions"],
+  left: [],
+};
+
+const cellOverrides = {
+  // Example: render assigned groups as badges
+  groups: (info) => (
+    <OverflowBadges
+      items={info.getValue() ?? []}
+      keyKey="group_id"
+      labelKey="group_code"
+      dialogTitleKey="name"
+      dialogTitle="All groups"
+      badgeClassName="text-xs font-mono"
+    />
+  ),
+};
+
+/**
+ * Builds the full column array for the Staff Task List table.
+ *
+ * @param {Array}  attributes  Field definitions from the server (drives data columns)
+ * @param {Array}  rowActions  Row-level kebab action definitions
+ * @returns {Array}            TanStack column definitions
+ */
+export function buildDataColumns(attributes, rowActions) {
+  const visibleAttributes = attributes.filter((a) => !a.hidden);
+
+  return [
+    buildSelectionColumn(),
+    ...buildColumns(visibleAttributes, { cellOverrides }),
+    buildRowActionsColumn(rowActions, { dropdownLabel: "Task List Actions" }),
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/staff/config/task_list/rowActions.config.jsx b/apps/web/src/modules/staff/config/task_list/rowActions.config.jsx
new file mode 100644
index 0000000..b51059e
--- /dev/null
+++ b/apps/web/src/modules/staff/config/task_list/rowActions.config.jsx
@@ -0,0 +1,56 @@
+// config/task_list/rowActions.config.jsx
+// Row-level kebab menu actions for the Staff Task List table.
+// Staff can view, edit, view tasks, archive, and restore — scoped to their groups.
+
+import { Eye, Pencil, NotebookPen, Archive, RotateCcw } from "lucide-react";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.navigate       react-router navigate fn
+ * @param {Function} deps.onArchive      called with the row when Archive is clicked
+ * @param {Function} deps.onRestore      called with the row when Restore is clicked
+ * @param {boolean}  deps.showArchived   toggles archive vs restore action visibility
+ */
+export function buildRowActions({ navigate, onArchive, onRestore, showArchived }) {
+  return [
+    {
+      key: "view",
+      label: "View Info",
+      icon: <Eye className="size-4" />,
+      onClick: (row) => navigate(`${row.task_list_id}/view`),
+    },
+    {
+      key: "edit",
+      label: "Edit Info",
+      icon: <Pencil className="size-4" />,
+      onClick: (row) => navigate(`${row.task_list_id}/edit`),
+      hidden: () => showArchived,
+    },
+    {
+      key: "tasks",
+      label: "View Tasks",
+      icon: <NotebookPen className="size-4" />,
+      onClick: (row) => navigate(`${row.task_list_id}/tasks`),
+      separator: true,
+      className: "text-sky-800",
+    },
+    {
+      key: "archive",
+      label: "Archive",
+      icon: <Archive className="size-4" />,
+      className: "text-destructive focus:text-destructive",
+      onClick: (row) => onArchive(row),
+      hidden: () => showArchived,
+      separator: true,
+    },
+    {
+      key: "restore",
+      label: "Restore",
+      icon: <RotateCcw className="size-4" />,
+      className: "text-emerald-600 focus:text-emerald-600",
+      onClick: (row) => onRestore(row),
+      hidden: () => !showArchived,
+      separator: true,
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/staff/config/task_list/selection.config.jsx b/apps/web/src/modules/staff/config/task_list/selection.config.jsx
new file mode 100644
index 0000000..4dd64c0
--- /dev/null
+++ b/apps/web/src/modules/staff/config/task_list/selection.config.jsx
@@ -0,0 +1,51 @@
+// config/task_list/selection.config.jsx
+// Bulk selection actions for the Staff Task List table.
+
+import { Download, Archive, RotateCcw } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+/**
+ * @param {Object}   deps
+ * @param {Object}   deps.exportConfig       passed straight to exportTableToExcel
+ * @param {boolean}  deps.showArchived        drives archive vs restore label/icon
+ * @param {Function} deps.onBulkArchive       called with selected task_list_id[]
+ * @param {Function} deps.onBulkRestore       called with selected task_list_id[]
+ * @param {Function} deps.getTableInstance    returns the TanStack table instance
+ */
+export function buildSelectionActions({
+  exportConfig,
+  showArchived,
+  onBulkArchive,
+  onBulkRestore,
+  getTableInstance,
+}) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows: rows,
+          tableInstance: table ?? getTableInstance?.(),
+        }),
+    },
+    {
+      key: showArchived ? "restore-selected" : "archive-selected",
+      label: showArchived ? "Restore" : "Archive",
+      icon: showArchived ? (
+        <RotateCcw className="h-3.5 w-3.5" />
+      ) : (
+        <Archive className="h-3.5 w-3.5" />
+      ),
+      className:
+        "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      onClick: (rows) => {
+        const ids = rows.map((r) => r.task_list_id).filter(Boolean);
+        if (!ids.length) return;
+        showArchived ? onBulkRestore?.(ids) : onBulkArchive?.(ids);
+      },
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/staff/config/task_list/toolbar.config.jsx b/apps/web/src/modules/staff/config/task_list/toolbar.config.jsx
new file mode 100644
index 0000000..e492ef5
--- /dev/null
+++ b/apps/web/src/modules/staff/config/task_list/toolbar.config.jsx
@@ -0,0 +1,78 @@
+// config/task_list/toolbar.config.jsx
+// Toolbar actions for the Staff Task List table.
+
+import { RefreshCw, Download, Plus, Archive } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+/**
+ * @param {Object}   deps
+ * @param {Function} deps.fetchTaskLists          fetches active task lists
+ * @param {Function} deps.fetchArchivedTaskLists  fetches archived task lists
+ * @param {Object}   deps.pagination              current pagination state
+ * @param {Object}   deps.exportConfig            passed straight to exportTableToExcel
+ * @param {Function} deps.navigate                react-router navigate fn
+ * @param {boolean}  deps.showArchived            drives label and toggle behaviour
+ * @param {Function} deps.onToggleArchived        flips showArchived in the page
+ * @param {Function} deps.getFilters              returns active filter array from table
+ * @param {Function} deps.getSort                 returns active sort array from table
+ * @param {Function} deps.getTableInstance        returns the TanStack table instance
+ */
+export function buildToolbarActions({
+  fetchTaskLists,
+  fetchArchivedTaskLists,
+  pagination,
+  exportConfig,
+  navigate,
+  showArchived,
+  onToggleArchived,
+  getFilters,
+  getSort,
+  getTableInstance,
+}) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      icon: <RefreshCw className="size-4" />,
+      label: "Refresh",
+      onClick: () => {
+        const fetcher = showArchived ? fetchArchivedTaskLists : fetchTaskLists;
+        fetcher({
+          page: 1,
+          limit: pagination?.limit ?? 10,
+          filters: getFilters?.() ?? [],
+          sort: getSort?.() ?? [],
+        });
+      },
+    },
+    {
+      key: "export",
+      type: "button",
+      icon: <Download className="size-4" />,
+      label: "Export",
+      onClick: (table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          tableInstance: table ?? getTableInstance?.(),
+        }),
+    },
+    {
+      key: "add-task-list",
+      type: "button",
+      icon: <Plus className="size-4" />,
+      label: "Create Task List",
+      variant: "default",
+      className: "text-primary-foreground",
+      onClick: () => navigate(`/staff/task-lists/create`),
+    },
+    {
+      key: "toggle-archived",
+      type: "button",
+      icon: <Archive className="size-4" />,
+      label: showArchived ? "Active Task Lists" : "Archived Task Lists",
+      variant: "secondary",
+      className: "border border-border",
+      onClick: onToggleArchived,
+    },
+  ];
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/staff/layouts/StaffLayout.jsx b/apps/web/src/modules/staff/layouts/StaffLayout.jsx
new file mode 100644
index 0000000..359f321
--- /dev/null
+++ b/apps/web/src/modules/staff/layouts/StaffLayout.jsx
@@ -0,0 +1,84 @@
+import { NavLink, Outlet, useNavigate } from 'react-router-dom';
+import { LayoutDashboard, Users, CheckSquare, BarChart2, Settings, LogOut, ChevronRight, } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { useAuth } from '@/contexts/AuthContext';
+import { cn } from '@/lib/utils';
+import { StaffProviders } from '@/contexts/provider/StaffProvider';
+import UserMenu from '@/components/generic/UserMenu';
+
+const navItems = [
+  { to: '/staff', label: 'Dashboard', icon: LayoutDashboard, end: true },
+  { to: '/staff/groups', label: 'My groups', icon: Users },
+  { to: '/staff/task-lists', label: 'Task lists', icon: CheckSquare },
+  { to: '/staff/scores', label: 'Scores', icon: BarChart2 },
+];
+
+export default function StaffLayout() {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  return (
+    <div className="flex h-screen bg-background">
+      {/* Sidebar */}
+
+      <aside className="w-56 shrink-0 flex flex-col border-r bg-card">
+        <div className="px-4 py-4 border-b">
+          <p className="text-sm font-medium">Staff portal</p>
+          <p className="text-xs text-muted-foreground mt-0.5 truncate">AA</p>
+        </div>
+
+        <nav className="flex-1 py-2 space-y-0.5 px-2">
+          {navItems.map(({ to, label, icon: Icon, end }) => (
+            <NavLink
+              key={to}
+              to={to}
+              end={end}
+              className={({ isActive }) =>
+                cn(
+                  'flex items-center gap-2.5 px-3 py-2 rounded-md text-sm transition-colors',
+                  isActive
+                    ? 'bg-secondary text-foreground font-medium'
+                    : 'text-muted-foreground hover:bg-secondary hover:text-foreground'
+                )
+              }
+            >
+              <Icon size={16} />
+              {label}
+            </NavLink>
+          ))}
+        </nav>
+
+        <Separator />
+        
+        {/* <div className="px-2 py-2 space-y-0.5">
+          <NavLink
+            to="/staff/settings"
+            className="flex items-center gap-2.5 px-3 py-2 rounded-md text-sm text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
+          >
+            <Settings size={16} /> Settings
+          </NavLink>
+        </div> */}
+      </aside>
+
+      {/* Main */}
+      <div className="flex flex-col flex-1 min-w-0">
+        {/* Topbar */}
+        <header className="h-14 border-b bg-card flex items-center justify-between px-6 shrink-0">
+          <div className="flex items-center gap-1 text-sm text-muted-foreground">
+            {/* Breadcrumb rendered by each page via a portal or just title */}
+          </div>
+
+          <UserMenu />
+        </header>
+
+        {/* Page content */}
+        <main className="flex-1 overflow-y-auto p-6">
+          <StaffProviders>
+            <Outlet />
+          </StaffProviders>
+        </main>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/staff/pages/DashboardPage.jsx b/apps/web/src/modules/staff/pages/DashboardPage.jsx
new file mode 100644
index 0000000..a53af93
--- /dev/null
+++ b/apps/web/src/modules/staff/pages/DashboardPage.jsx
@@ -0,0 +1,109 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Layers, Users, CheckSquare, BarChart2 } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { useStaffGroups } from "@/contexts/StaffGroupContext";
+import GroupTile from "../components/GroupTile";
+import TaskRow from "../components/TaskRow";
+
+export default function DashboardPage() {
+  const navigate = useNavigate();
+  const { fetchMyGroups } = useStaffGroups();
+
+  const [groups,  setGroups]  = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchMyGroups()
+      .then((res) => setGroups(res?.data ?? []))
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  }, []);
+
+  // ── Derived stats ─────────────────────────────────────────────────────────
+  const totalMembers   = groups.reduce((sum, g) => sum + (g.members?.length ?? 0), 0);
+  const totalTaskLists = groups.reduce((sum, g) => sum + (g.taskLists?.length ?? 0), 0);
+  const allTasks       = groups.flatMap((g) => g.taskLists ?? []).flatMap((tl) => tl.tasks ?? []);
+  const completedCount = allTasks.filter((t) => t.status === "completed").length;
+  const avgCompletion  = allTasks.length
+    ? Math.round((completedCount / allTasks.length) * 100)
+    : 0;
+
+  const STATS = [
+    { label: "My groups",         value: groups.length,       icon: Layers,      sub: "You are a member of" },
+    { label: "Total members",     value: totalMembers,        icon: Users,       sub: "Across all groups" },
+    { label: "Active task lists", value: totalTaskLists,      icon: CheckSquare, sub: "Assigned to your groups" },
+    { label: "Avg. completion",   value: `${avgCompletion}%`, icon: BarChart2,   sub: "Across all tasks" },
+  ];
+
+  const recentTasks = allTasks.slice(0, 5);
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-lg font-medium">Dashboard</h1>
+
+      {/* ── Stat tiles ──────────────────────────────────────────────────── */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+        {STATS.map(({ label, value, icon: Icon, sub }) => (
+          <Card key={label} className="bg-muted/40 border-0 shadow-none">
+            <CardContent className="p-4">
+              <div className="flex items-center justify-between mb-2">
+                <p className="text-xs text-muted-foreground">{label}</p>
+                <Icon size={14} className="text-muted-foreground" aria-hidden />
+              </div>
+              <p className="text-2xl font-medium">
+                {loading ? "—" : value}
+              </p>
+              <p className="text-xs text-muted-foreground mt-1">{sub}</p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* ── Group tiles ──────────────────────────────────────────────────── */}
+      <div>
+        <h2 className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">
+          My groups
+        </h2>
+        {loading ? (
+          <div className="grid grid-cols-2 gap-3">
+            {[0, 1].map((i) => (
+              <Card key={i} className="h-36 animate-pulse bg-muted/40 border-0" />
+            ))}
+          </div>
+        ) : groups.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            You are not assigned to any groups yet.
+          </p>
+        ) : (
+          <div className="grid grid-cols-2 gap-3">
+            {groups.map((group) => (
+              <GroupTile
+                key={group.group_id}
+                group={group}
+                onClick={() => navigate(`/staff/groups/${group.group_id}`)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* ── Recent tasks ─────────────────────────────────────────────────── */}
+      <div>
+        <h2 className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">
+          Recent task activity
+        </h2>
+        <Card>
+          <CardContent className="p-0 divide-y">
+            {recentTasks.length === 0 && !loading && (
+              <p className="text-sm text-muted-foreground p-4">No tasks yet.</p>
+            )}
+            {recentTasks.map((task) => (
+              <TaskRow key={task.task_id} task={task} />
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/staff/pages/GroupDetailPage.jsx b/apps/web/src/modules/staff/pages/GroupDetailPage.jsx
new file mode 100644
index 0000000..11ba696
--- /dev/null
+++ b/apps/web/src/modules/staff/pages/GroupDetailPage.jsx
@@ -0,0 +1,182 @@
+import { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useStaffGroups } from "@/contexts/StaffGroupContext";
+import MembersTable  from "../components/members/MembersTable";
+import TaskListsTab  from "../components/TaskListsTab";
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+function getInitials(name = "") {
+  const parts = name.trim().split(/\s+/);
+  return parts.length >= 2
+    ? (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+    : name.slice(0, 2).toUpperCase();
+}
+
+export default function GroupDetailPage() {
+  const { groupId } = useParams();
+  const navigate    = useNavigate();
+  const { fmtDate } = useDateFormat();
+
+  const {
+    fetchGroupById,
+    // members pagination — provided by your context after the backend split
+    members,
+    memberAttributes,
+    memberPagination,
+    setMemberPagination,
+    membersLoading,
+    fetchGroupMembers,
+    fetchGroupMemberFieldValues,
+  } = useStaffGroups();
+
+  const [group,   setGroup]   = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchGroupById(groupId)
+      .then((res) => setGroup(res?.data ?? null))
+      .catch(console.error)
+      .finally(() => setLoading(false));
+
+    // Initial members fetch
+    // fetchGroupMembers(groupId, { page: 1, limit: 10 });
+
+    return () => setGroup(null);
+  }, [groupId]);
+
+  // ── Loading skeleton ──────────────────────────────────────────────────────
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <div className="h-5 w-32 rounded bg-muted/40 animate-pulse" />
+        <div className="h-64 rounded-lg bg-muted/40 animate-pulse" />
+      </div>
+    );
+  }
+
+  if (!group) {
+    return (
+      <div className="space-y-4">
+        <button
+          onClick={() => navigate("/staff/groups")}
+          className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft size={14} /> Back to groups
+        </button>
+        <p className="text-sm text-muted-foreground">Group not found.</p>
+      </div>
+    );
+  }
+
+  const listCount      = group.taskLists?.length ?? 0;
+  const totalTasks     = group.taskLists?.reduce((acc, tl) => acc + (tl.tasks?.length ?? 0), 0) ?? 0;
+  const completedTasks = group.taskLists?.reduce(
+    (acc, tl) => acc + (tl.tasks?.filter((t) => t.status === "completed").length ?? 0),
+    0
+  ) ?? 0;
+
+  return (
+    <div className="space-y-5">
+      {/* Back */}
+      <button
+        onClick={() => navigate("/staff/groups")}
+        className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+      >
+        <ArrowLeft size={14} /> Back to groups
+      </button>
+
+      {/* ── Group header card ───────────────────────────────────────────────── */}
+      <Card>
+        <CardContent className="p-5">
+          <div className="flex items-start justify-between gap-4 flex-wrap">
+            <div className="flex items-center gap-3">
+              <div className="w-12 h-12 rounded-full bg-primary/10 text-primary flex items-center justify-center text-sm font-semibold shrink-0">
+                {getInitials(group.name)}
+              </div>
+              <div>
+                <div className="flex items-center gap-2 flex-wrap">
+                  <h1 className="text-base font-semibold">{group.name}</h1>
+                  {group.group_code && (
+                    <Badge variant="secondary" className="text-xs">
+                      {group.group_code}
+                    </Badge>
+                  )}
+                  <Badge
+                    variant={group.is_active ? "default" : "outline"}
+                    className="text-xs"
+                  >
+                    {group.is_active ? "Active" : "Inactive"}
+                  </Badge>
+                </div>
+                {group.description && (
+                  <p className="text-sm text-muted-foreground mt-0.5">
+                    {group.description}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            <div className="text-xs text-muted-foreground text-right space-y-0.5">
+              <p>Created <span className="text-foreground">{fmtDate(group.createdAt)}</span></p>
+              <p>Updated <span className="text-foreground">{fmtDate(group.updatedAt)}</span></p>
+            </div>
+          </div>
+
+          {/* Summary stats */}
+          <div className="grid grid-cols-3 gap-3 mt-4 pt-4 border-t">
+            <div className="text-center">
+              <p className="text-xl font-semibold">{memberPagination?.total ?? "—"}</p>
+              <p className="text-xs text-muted-foreground mt-0.5">Members</p>
+            </div>
+            <div className="text-center">
+              <p className="text-xl font-semibold">{listCount}</p>
+              <p className="text-xs text-muted-foreground mt-0.5">Task lists</p>
+            </div>
+            <div className="text-center">
+              <p className="text-xl font-semibold">
+                {totalTasks > 0
+                  ? `${Math.round((completedTasks / totalTasks) * 100)}%`
+                  : "—"}
+              </p>
+              <p className="text-xs text-muted-foreground mt-0.5">Completion</p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* ── Tabs ───────────────────────────────────────────────────────────── */}
+      <Tabs defaultValue="members"  className="flex flex-col">
+        <TabsList>
+          <TabsTrigger value="members">
+            Members ({memberPagination?.total ?? 0})
+          </TabsTrigger>
+          <TabsTrigger value="tasklists">
+            Task lists ({listCount})
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="members" className="mt-4">
+          <MembersTable
+            members={members}
+            attributes={memberAttributes}
+            pagination={memberPagination}
+            setPagination={setMemberPagination}
+            loading={membersLoading}
+            fetchMembers={(params) => fetchGroupMembers(groupId, params)}
+            fetchMemberFieldValues={(col, params) =>
+              fetchGroupMemberFieldValues(groupId, col, params)
+            }
+          />
+        </TabsContent>
+
+        <TabsContent value="tasklists" className="mt-4">
+          <TaskListsTab taskLists={group.taskLists ?? []} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/staff/pages/GroupsPage.jsx b/apps/web/src/modules/staff/pages/GroupsPage.jsx
new file mode 100644
index 0000000..c0cf8dc
--- /dev/null
+++ b/apps/web/src/modules/staff/pages/GroupsPage.jsx
@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useStaffGroups } from "@/contexts/StaffGroupContext";
+import GroupTile from "../components/GroupTile";
+
+export default function GroupsPage() {
+  const navigate = useNavigate();
+  const { fetchMyGroups } = useStaffGroups();
+
+  const [groups,  setGroups]  = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchMyGroups()
+      .then((res) => setGroups(res?.data ?? []))
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  }, []);
+
+  return (
+    <div className="space-y-4">
+      <h1 className="text-lg font-medium">My groups</h1>
+
+      {loading ? (
+        <div className="grid grid-cols-2 gap-3">
+          {[0, 1, 2].map((i) => (
+            <div key={i} className="h-36 rounded-lg bg-muted/40 animate-pulse" />
+          ))}
+        </div>
+      ) : groups.length === 0 ? (
+        <p className="text-sm text-muted-foreground">
+          You are not assigned to any groups yet.
+        </p>
+      ) : (
+        <div className="grid grid-cols-2 gap-3">
+          {groups.map((group) => (
+            <GroupTile
+              key={group.group_id}
+              group={group}
+              onClick={() => navigate(`/staff/groups/${group.group_id}`)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/modules/staff/pages/ScoresPage.jsx b/apps/web/src/modules/staff/pages/ScoresPage.jsx
new file mode 100644
index 0000000..9bacf02
--- /dev/null
+++ b/apps/web/src/modules/staff/pages/ScoresPage.jsx
@@ -0,0 +1,262 @@
+import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Select, SelectContent, SelectItem,
+  SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import { useStaffGroups } from "@/contexts/StaffGroupContext";
+import { useStaffScores } from "@/contexts/StaffScoreContext";
+import { cn } from "@/lib/utils";
+import ScoreBadge from "../components/ScoreBadge";
+
+export default function ScoresPage() {
+  const { fetchMyGroups }                          = useStaffGroups();
+  const {
+    quizScores, assessScores, loading,
+    fetchQuizScores, fetchAssessmentScores,
+    clearQuizScores, clearAssessScores,
+  } = useStaffScores();
+
+  const [groups,          setGroups]          = useState([]);
+  const [selectedGroup,   setSelectedGroup]   = useState(null);
+  const [quizId,          setQuizId]          = useState("");
+  const [assessmentId,    setAssessmentId]    = useState("");
+
+  useEffect(() => {
+    fetchMyGroups()
+      .then((res) => {
+        const data = res?.data ?? [];
+        setGroups(data);
+        if (data.length) setSelectedGroup(data[0].group_id);
+      })
+      .catch(console.error);
+
+    return () => {
+      clearQuizScores();
+      clearAssessScores();
+    };
+  }, []);
+
+  // ── Derive quiz + assessment options from the selected group's task lists ──
+  const selectedGroupData = groups.find((g) => g.group_id === selectedGroup);
+  const allTasks = selectedGroupData?.taskLists?.flatMap((tl) => tl.tasks ?? []) ?? [];
+
+  const quizTasks = allTasks.filter((t) =>
+    t.requirements?.some((r) => r.type === "read_unit")
+  );
+  const assessmentTasks = allTasks.filter((t) =>
+    t.requirements?.some((r) => r.type === "read_course")
+  );
+
+  const handleGroupChange = (value) => {
+    setSelectedGroup(parseInt(value));
+    setQuizId("");
+    setAssessmentId("");
+    clearQuizScores();
+    clearAssessScores();
+  };
+
+  const handleQuizChange = (id) => {
+    setQuizId(id);
+    fetchQuizScores(id);
+  };
+
+  const handleAssessmentChange = (id) => {
+    setAssessmentId(id);
+    fetchAssessmentScores(id);
+  };
+
+  return (
+    <div className="space-y-5">
+      {/* ── Header ──────────────────────────────────────────────────────── */}
+      <div className="flex items-center justify-between">
+        <h1 className="text-lg font-medium">Scores &amp; progress</h1>
+        <Select
+          value={selectedGroup?.toString() ?? ""}
+          onValueChange={handleGroupChange}
+        >
+          <SelectTrigger className="w-48 h-8 text-sm">
+            <SelectValue placeholder="Select group..." />
+          </SelectTrigger>
+          <SelectContent>
+            {groups.map((g) => (
+              <SelectItem key={g.group_id} value={g.group_id.toString()}>
+                {g.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <Tabs defaultValue="quiz">
+        <TabsList>
+          <TabsTrigger value="quiz">Quiz scores</TabsTrigger>
+          <TabsTrigger value="assessment">Assessment scores</TabsTrigger>
+        </TabsList>
+
+        {/* ── Quiz scores ─────────────────────────────────────────────── */}
+        <TabsContent value="quiz" className="mt-4 space-y-4">
+          <Select value={quizId} onValueChange={handleQuizChange}>
+            <SelectTrigger className="w-64 h-8 text-sm">
+              <SelectValue placeholder="Select a unit quiz..." />
+            </SelectTrigger>
+            <SelectContent>
+              {quizTasks.length === 0 ? (
+                <div className="px-3 py-2 text-xs text-muted-foreground">
+                  No unit quizzes in this group.
+                </div>
+              ) : (
+                quizTasks.map((t) => (
+                  <SelectItem
+                    key={t.requirements[0].reference_id}
+                    value={t.requirements[0].reference_id}
+                  >
+                    {t.requirements[0].reference_label ?? t.name}
+                  </SelectItem>
+                ))
+              )}
+            </SelectContent>
+          </Select>
+
+          {loading && quizId && (
+            <div className="h-32 rounded-lg bg-muted/40 animate-pulse" />
+          )}
+
+          {quizScores && !loading && (
+            <>
+              <div className="flex items-center gap-3 flex-wrap">
+                <p className="text-sm font-medium">
+                  {quizScores.quiz?.title ?? "Unit quiz"}
+                </p>
+                <Badge variant="outline" className="text-xs">
+                  Passing: {quizScores.quiz?.passing_score ?? 70}%
+                </Badge>
+                {quizScores.quiz?.unit?.title && (
+                  <Badge variant="secondary" className="text-xs">
+                    {quizScores.quiz.unit.title}
+                  </Badge>
+                )}
+              </div>
+              <ScoreTable
+                data={quizScores.data}
+                passingScore={quizScores.quiz?.passing_score ?? 70}
+              />
+            </>
+          )}
+
+          {!quizId && !loading && (
+            <p className="text-sm text-muted-foreground">
+              Select a unit quiz above to view scores.
+            </p>
+          )}
+        </TabsContent>
+
+        {/* ── Assessment scores ────────────────────────────────────────── */}
+        <TabsContent value="assessment" className="mt-4 space-y-4">
+          <Select value={assessmentId} onValueChange={handleAssessmentChange}>
+            <SelectTrigger className="w-64 h-8 text-sm">
+              <SelectValue placeholder="Select a course assessment..." />
+            </SelectTrigger>
+            <SelectContent>
+              {assessmentTasks.length === 0 ? (
+                <div className="px-3 py-2 text-xs text-muted-foreground">
+                  No course assessments in this group.
+                </div>
+              ) : (
+                assessmentTasks.map((t) => (
+                  <SelectItem
+                    key={t.requirements[0].reference_id}
+                    value={t.requirements[0].reference_id}
+                  >
+                    {t.requirements[0].reference_label ?? t.name}
+                  </SelectItem>
+                ))
+              )}
+            </SelectContent>
+          </Select>
+
+          {loading && assessmentId && (
+            <div className="h-32 rounded-lg bg-muted/40 animate-pulse" />
+          )}
+
+          {assessScores && !loading && (
+            <>
+              <div className="flex items-center gap-3 flex-wrap">
+                <p className="text-sm font-medium">
+                  {assessScores.assessment?.title ?? "Course assessment"}
+                </p>
+                <Badge variant="outline" className="text-xs">
+                  Passing: {assessScores.assessment?.passing_score ?? 75}%
+                </Badge>
+                {assessScores.assessment?.course?.title && (
+                  <Badge variant="secondary" className="text-xs">
+                    {assessScores.assessment.course.title}
+                  </Badge>
+                )}
+              </div>
+              <ScoreTable
+                data={assessScores.data}
+                passingScore={assessScores.assessment?.passing_score ?? 75}
+              />
+            </>
+          )}
+
+          {!assessmentId && !loading && (
+            <p className="text-sm text-muted-foreground">
+              Select a course assessment above to view scores.
+            </p>
+          )}
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+// ── ScoreTable ────────────────────────────────────────────────────────────────
+function ScoreTable({ data = [], passingScore }) {
+  if (!data.length) {
+    return <p className="text-sm text-muted-foreground py-4">No data yet.</p>;
+  }
+
+  const COLORS = [
+    "bg-emerald-100 text-emerald-800",
+    "bg-purple-100 text-purple-800",
+    "bg-amber-100 text-amber-800",
+    "bg-blue-100 text-blue-800",
+    "bg-pink-100 text-pink-800",
+  ];
+
+  return (
+    <Card>
+      <CardContent className="p-0 divide-y">
+        {data.map(({ user, best_score, attempts, latest }, i) => {
+          const fullName = user.personal_info?.name?.full_name ?? user.email ?? "";
+          const initials = fullName
+            .split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) || "?";
+
+          return (
+            <div key={user.user_id} className="flex items-center gap-3 px-4 py-3">
+              <div className={cn(
+                "w-8 h-8 rounded-full flex items-center justify-center text-xs font-medium shrink-0",
+                COLORS[i % COLORS.length]
+              )}>
+                {initials}
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium truncate">{fullName}</p>
+                <p className="text-xs text-muted-foreground">
+                  {attempts.length === 0
+                    ? "No attempt yet"
+                    : `${attempts.length} attempt${attempts.length !== 1 ? "s" : ""} · best score`}
+                </p>
+              </div>
+              <ScoreBadge score={best_score} passingScore={passingScore} />
+            </div>
+          );
+        })}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/web/src/modules/staff/pages/Staff.jsx b/apps/web/src/modules/staff/pages/Staff.jsx
new file mode 100644
index 0000000..df2ac53
--- /dev/null
+++ b/apps/web/src/modules/staff/pages/Staff.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Staff = () => {
+  return (
+    <div>
+      Staff Page
+    </div>
+  )
+}
+
+export default Staff
diff --git a/apps/web/src/modules/staff/pages/TaskListsPage.jsx b/apps/web/src/modules/staff/pages/TaskListsPage.jsx
new file mode 100644
index 0000000..991974e
--- /dev/null
+++ b/apps/web/src/modules/staff/pages/TaskListsPage.jsx
@@ -0,0 +1,28 @@
+/***********************************************************************************************************************************************************************
+ * File Name: TaskList.jsx (staff)
+ * Type of Program: Page
+ * Description: Staff task list page — breadcrumb + DataTable via TaskListTable.
+ ***********************************************************************************************************************************************************************/
+import { House } from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import TaskListTable from "../components/TaskListTable";
+
+export default function TaskList() {
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/staff" },
+    { label: "Task Lists" },
+  ];
+
+  return (
+    <section className="h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 mb-6">
+          <AppBreadcrumb items={items} />
+        </div>
+        <div className="w-full">
+          <TaskListTable />
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/modules/staff/routes/StaffRoutes.jsx b/apps/web/src/modules/staff/routes/StaffRoutes.jsx
new file mode 100644
index 0000000..5878807
--- /dev/null
+++ b/apps/web/src/modules/staff/routes/StaffRoutes.jsx
@@ -0,0 +1,9 @@
+import ProtectedRoute from '../../../routes/ProtectedRoute'
+import Staff from '../pages/Staff'
+
+export const StaffRoutes = {
+  element: <ProtectedRoute allowedRoles={['staff']} />,
+  children: [
+    { path: '/staff', element: <Staff /> },
+  ],
+}
\ No newline at end of file
diff --git a/apps/web/src/routes/AppRouter.jsx b/apps/web/src/routes/AppRouter.jsx
new file mode 100644
index 0000000..7dd81e5
--- /dev/null
+++ b/apps/web/src/routes/AppRouter.jsx
@@ -0,0 +1,7 @@
+// src/routes/AppRouter.jsx
+import { RouterProvider } from 'react-router-dom'
+import { router } from './router'   // your createBrowserRouter config stays in router.jsx
+
+export default function AppRouter() {
+  return <RouterProvider router={router} />
+}
\ No newline at end of file
diff --git a/apps/web/src/routes/ProtectedRoute.jsx b/apps/web/src/routes/ProtectedRoute.jsx
new file mode 100644
index 0000000..aeb863c
--- /dev/null
+++ b/apps/web/src/routes/ProtectedRoute.jsx
@@ -0,0 +1,18 @@
+import { Navigate, Outlet } from 'react-router-dom'
+import { useAuth } from '../contexts/AuthContext'
+import Unauthorized from '@/modules/public/pages/Unauthorized'
+import { useEffect } from 'react'
+
+export default function ProtectedRoute({ allowedRoles = [] }) {
+  const { user, loading } = useAuth()  // ← just loading and user, nothing else
+
+  if (loading) return null  // ← only block on initial cold load
+
+  if (!user) return <Navigate to="/login" replace />
+
+  if (allowedRoles.length > 0 && !allowedRoles.includes(user.acc_type)) {
+    return <Unauthorized />  // ← show unauthorized instead of redirecting
+  }
+
+  return <Outlet />
+}
\ No newline at end of file
diff --git a/apps/web/src/routes/PublicRoute.jsx b/apps/web/src/routes/PublicRoute.jsx
new file mode 100644
index 0000000..b8ec6c9
--- /dev/null
+++ b/apps/web/src/routes/PublicRoute.jsx
@@ -0,0 +1,15 @@
+import { Navigate, Outlet } from 'react-router-dom'
+import { useAuth } from '../contexts/AuthContext'
+import { getRoleHomePath } from '../utils/roleRedirect.util'
+
+export default function PublicRoute() {
+  const { user, loading } = useAuth()  // ← just loading and user
+
+  if (loading) return null  // ← only block on initial cold load
+
+  if (user) {
+    return <Navigate to={getRoleHomePath(user)} replace />
+  }
+
+  return <Outlet />
+}
\ No newline at end of file
diff --git a/apps/web/src/routes/RequiredPasswordChange.jsx b/apps/web/src/routes/RequiredPasswordChange.jsx
new file mode 100644
index 0000000..8772c1a
--- /dev/null
+++ b/apps/web/src/routes/RequiredPasswordChange.jsx
@@ -0,0 +1,21 @@
+// RequirePasswordChange.jsx
+import { Navigate, Outlet } from 'react-router-dom'
+import { useAuth } from '../contexts/AuthContext'
+import { getRoleHomePath } from '../utils/roleRedirect.util'
+
+export default function RequirePasswordChange() {
+  const { user, loading } = useAuth()
+
+  if (loading) return null
+
+  // No user at all → send to login
+  if (!user) return <Navigate to="/login" replace />
+
+  // User is logged in but doesn't need to change password → send to dashboard
+  if (!user.must_change_password) {
+    return <Navigate to={getRoleHomePath(user)} replace />
+  }
+
+  // User is logged in AND must change password → allow through
+  return <Outlet />
+}
\ No newline at end of file
diff --git a/apps/web/src/routes/router.jsx b/apps/web/src/routes/router.jsx
new file mode 100644
index 0000000..6274a17
--- /dev/null
+++ b/apps/web/src/routes/router.jsx
@@ -0,0 +1,18 @@
+import { createBrowserRouter } from 'react-router-dom'
+import { AdminRoutes }  from '../modules/admin/routes/AdminRoutes'
+import { ClientRoutes } from '../modules/client/routes/ClientRoutes'
+import { StaffRoutes }  from '../modules/staff/routes/StaffRoutes'
+import { AuthRoutes }   from '../modules/auth/routes/AuthRoutes'
+import NotFound from '@/modules/public/pages/NotFound'
+import LandingLayout from '@/modules/public/layouts/LandingLayout'
+import PrivacyPolicy from '@/modules/public/pages/PrivacyPolicy'
+
+export const router = createBrowserRouter([
+  AuthRoutes,      // "/" → Login, guarded by PublicRoute
+  AdminRoutes,     // "/admin" → guarded by ProtectedRoute allowedRoles=['admin']
+  ClientRoutes,    // "/client" → guarded by ProtectedRoute allowedRoles=['client']
+  StaffRoutes,     // "/staff" → guarded by ProtectedRoute allowedRoles=['staff']
+  // Unguarded — must stay reachable regardless of auth state (Google OAuth verification requirement)
+  { path: '/privacy-policy', element: <LandingLayout><PrivacyPolicy /></LandingLayout> },
+  { path: '*', element: <NotFound /> },
+])
\ No newline at end of file
diff --git a/apps/web/src/styles/typeset.css b/apps/web/src/styles/typeset.css
new file mode 100644
index 0000000..900f572
--- /dev/null
+++ b/apps/web/src/styles/typeset.css
@@ -0,0 +1,213 @@
+/**
+ * typeset.css
+ *
+ * Shared typography for rendered lesson content. Every rich-text surface —
+ * the WYSIWYG block (editor + read-only render) and the Markdown block
+ * (editor preview + read-only render) — wraps its output in `.typeset` so
+ * both produce identical headings/lists/tables/code regardless of which
+ * editor authored the content. Loaded once globally (see index.css) instead
+ * of being re-injected per block instance.
+ *
+ * Reuses the app's existing theme tokens (--foreground, --primary, --muted,
+ * --border, --ring) so light/dark theming stays automatic.
+ */
+
+.typeset {
+  line-height: 1.7;
+}
+
+.typeset h1 { font-size: 1.375rem; font-weight: 700; margin: 1rem 0 0.4rem; line-height: 1.2; }
+.typeset h2 { font-size: 1.125rem; font-weight: 600; margin: 1rem 0 0.4rem; line-height: 1.3; }
+.typeset h3 { font-size: 1rem;     font-weight: 600; margin: 1rem 0 0.4rem; line-height: 1.4; }
+.typeset h4 { font-size: 1rem;     font-weight: 600; margin: 0.9rem 0 0.35rem; }
+
+.typeset p {
+  margin: 0 0 0.75rem 0;
+  text-align: left;
+  line-height: 1.65;
+  font-size: 0.9375rem;
+}
+
+.typeset ul { list-style: disc;    padding-left: 1.1rem; margin: 0.4rem 0 0.75rem; }
+.typeset ol { list-style: decimal; padding-left: 1.1rem; margin: 0.4rem 0 0.75rem; }
+.typeset li { margin-bottom: 0.3rem; line-height: 1.65; font-size: 0.9375rem; }
+
+.typeset a { color: hsl(var(--primary)); text-decoration: underline; }
+
+.typeset strong, .typeset b { font-weight: 700; }
+.typeset em, .typeset i     { font-style: italic; }
+.typeset del                { text-decoration: line-through; opacity: 0.7; }
+
+/* Task-list checkboxes (GFM) */
+.typeset input[type="checkbox"] { margin-right: 0.4rem; accent-color: hsl(var(--primary)); }
+
+/* Inline code */
+.typeset :not(pre) > code {
+  font-family: 'Fira Code', 'Cascadia Code', 'Courier New', Courier, monospace;
+  font-size: 0.875em;
+  background: hsl(var(--muted));
+  color: hsl(var(--foreground));
+  padding: 0.1rem 0.35rem;
+  border-radius: 0.25rem;
+  border: 1px solid hsl(var(--border));
+  word-break: break-word;
+}
+
+/* Code block */
+.typeset pre {
+  background: hsl(220 13% 12%);
+  color: hsl(220 14% 88%);
+  border-radius: 0.5rem;
+  padding: 0.875rem 1rem;
+  overflow-x: auto;
+  margin: 0.75rem 0;
+  border: 1px solid hsl(220 13% 22%);
+  -webkit-overflow-scrolling: touch;
+}
+
+.typeset pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 0.875rem;
+  color: inherit;
+  white-space: pre;
+  word-break: normal;
+  font-family: 'Fira Code', 'Cascadia Code', 'Courier New', Courier, monospace;
+}
+
+/* Blockquote */
+.typeset blockquote {
+  border-left: 3px solid hsl(var(--primary));
+  margin: 0.75rem 0;
+  padding: 0.4rem 0 0.4rem 1rem;
+  color: hsl(var(--muted-foreground));
+  font-style: italic;
+}
+.typeset blockquote p { margin-bottom: 0; }
+
+/* Horizontal rule */
+.typeset hr {
+  border: none;
+  border-top: 1px solid hsl(var(--border));
+  margin: 1.25rem 0;
+}
+
+/* Document-link badge — inserted by the WYSIWYG editor's "embed document" tool */
+.typeset a.doc-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.1rem 0.4rem;
+  border-radius: 0.375rem;
+  background: hsl(var(--muted));
+  color: hsl(var(--foreground));
+  font-size: 0.75rem;
+  text-decoration: none;
+  border: 1px solid hsl(var(--border));
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.typeset a.doc-link::before {
+  content: "📄";
+  font-size: 0.7rem;
+  flex-shrink: 0;
+}
+
+/* Table — scrollable on mobile */
+.typeset table {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin: 0.6rem 0;
+  font-size: 0.75rem;
+  table-layout: auto;
+  border: 1.5px solid #cbd5e1;
+  border-radius: 0.375rem;
+}
+
+.typeset th {
+  background: #f1f5f9;
+  color: #1e293b;
+  font-weight: 600;
+  text-align: left;
+  padding: 0.35rem 0.5rem;
+  white-space: nowrap;
+  box-shadow: inset -1.5px -1.5px 0 #cbd5e1, inset 1.5px 1.5px 0 #cbd5e1;
+}
+
+.typeset td {
+  padding: 0.35rem 0.5rem;
+  vertical-align: top;
+  word-break: break-word;
+  min-width: 4rem;
+  box-shadow: inset -1.5px -1.5px 0 #cbd5e1, inset 1.5px 1.5px 0 #cbd5e1;
+}
+
+/* Zebra-striping only on read-only renders, not while a table is being edited */
+.typeset:not([contenteditable]) tbody tr:nth-child(even) td { background: #f8fafc; }
+
+/* Table-cell focus ring, only relevant inside the contentEditable surface */
+.typeset[contenteditable] td:focus,
+.typeset[contenteditable] th:focus {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: -2px;
+  background: hsl(var(--accent) / 0.2);
+}
+
+/* ── ≥320px ─────────────────────────────────────────────────────────────── */
+
+@media (min-width: 320px) {
+  .typeset h1 { font-size: 1.625rem; margin: 1.1rem 0 0.45rem; }
+  .typeset h2 { font-size: 1.3rem;   margin: 1.1rem 0 0.45rem; }
+  .typeset h3 { font-size: 1.125rem; margin: 1.1rem 0 0.45rem; }
+
+  .typeset p {
+    font-size: 1rem;
+    line-height: 1.7;
+    text-align: justify;
+    margin: 0 0 0.8rem 0;
+  }
+
+  .typeset ul { padding-left: 1.35rem; margin: 0.45rem 0 0.8rem; }
+  .typeset ol { padding-left: 1.35rem; margin: 0.45rem 0 0.8rem; }
+  .typeset li { font-size: 1rem; line-height: 1.7; margin-bottom: 0.35rem; }
+
+  .typeset a.doc-link { font-size: 0.8rem; padding: 0.1rem 0.45rem; gap: 0.28rem; }
+
+  .typeset table { font-size: 0.8125rem; margin: 0.7rem 0; }
+  .typeset th    { padding: 0.45rem 0.65rem; }
+  .typeset td    { padding: 0.4rem 0.65rem; min-width: 5rem; }
+}
+
+/* ── Desktop (≥1024px) ──────────────────────────────────────────────────── */
+
+@media (min-width: 1024px) {
+  .typeset h1 { font-size: 1.875rem; margin: 1.25rem 0 0.5rem; }
+  .typeset h2 { font-size: 1.5rem;   margin: 1.25rem 0 0.5rem; }
+  .typeset h3 { font-size: 1.25rem;  margin: 1.25rem 0 0.5rem; }
+
+  .typeset p { font-size: 1.08rem; line-height: 1.75; margin: 0 0 0.85rem 0; }
+
+  .typeset ul { padding-left: 1.5rem; margin: 0.5rem 0 0.85rem; }
+  .typeset ol { padding-left: 1.5rem; margin: 0.5rem 0 0.85rem; }
+  .typeset li { font-size: 1.08em; line-height: 1.75; margin-bottom: 0.4rem; }
+
+  .typeset a.doc-link { font-size: 0.8125rem; padding: 0.1rem 0.5rem; gap: 0.3rem; }
+
+  .typeset table {
+    display: table;
+    font-size: 0.875rem;
+    margin: 0.75rem 0;
+    table-layout: fixed;
+  }
+
+  .typeset th { padding: 0.5rem 0.75rem; }
+  .typeset td { padding: 0.45rem 0.75rem; min-width: 2rem; }
+}
diff --git a/apps/web/src/utils/api.util.js b/apps/web/src/utils/api.util.js
new file mode 100644
index 0000000..182173b
--- /dev/null
+++ b/apps/web/src/utils/api.util.js
@@ -0,0 +1,72 @@
+import axios from 'axios'
+
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+  withCredentials: true,
+})
+
+let isRefreshing = false
+let failedQueue = []  // queue requests that came in while refreshing
+
+const processQueue = (error, token = null) => {
+  failedQueue.forEach(({ resolve, reject }) => {
+    if (error) reject(error)
+    else resolve(token)
+  })
+  failedQueue = []
+}
+
+export const setAuthInterceptor = (getToken, setToken) => {
+  // ─── Request — attach access token ────────────────────────────────────────
+  api.interceptors.request.use((config) => {
+    const token = getToken()
+    if (token) config.headers['Authorization'] = `Bearer ${token}`
+    return config
+  })
+
+  // ─── Response — handle 401 → refresh → retry ──────────────────────────────
+  api.interceptors.response.use(
+    (response) => response,
+    async (error) => {
+      const original = error.config
+
+      // ← Skip interceptor for auth endpoints entirely
+      const isAuthCall = original.url?.includes('/auth/')
+      if (isAuthCall) return Promise.reject(error)
+
+      if (error.response?.status !== 401 || original._retry) {
+        return Promise.reject(error)
+      }
+
+      if (isRefreshing) {
+        return new Promise((resolve, reject) => {
+          failedQueue.push({ resolve, reject })
+        }).then((token) => {
+          original.headers['Authorization'] = `Bearer ${token}`
+          return api(original)
+        })
+      }
+
+      original._retry = true
+      isRefreshing = true
+
+      try {
+        const { data } = await api.post('/auth/refresh')
+        const newToken = data.data.accessToken
+
+        setToken(newToken)
+        processQueue(null, newToken)
+        original.headers['Authorization'] = `Bearer ${newToken}`
+        return api(original)
+      } catch (err) {
+        processQueue(err, null)
+        setToken(null)
+        return Promise.reject(err)
+      } finally {
+        isRefreshing = false
+      }
+    }
+  )
+}
+
+export default api
\ No newline at end of file
diff --git a/apps/web/src/utils/assetUpload.util.js b/apps/web/src/utils/assetUpload.util.js
new file mode 100644
index 0000000..2a31d7f
--- /dev/null
+++ b/apps/web/src/utils/assetUpload.util.js
@@ -0,0 +1,76 @@
+// utils/assetUpload.util.js
+//
+// Client-side gate for the Add Asset multi-file drop zone. Mirrors what the
+// backend actually knows how to classify (resolveFileType() in
+// assets.controller.js: image/video/audio by MIME prefix, everything else
+// under application/* or text/* becomes "document") but rejects generic
+// binaries up front instead of letting them 500 on the server.
+
+const ALLOWED_DOCUMENT_MIME_TYPES = new Set([
+    "application/pdf",
+    "application/msword",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    "application/vnd.ms-excel",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    "application/vnd.ms-powerpoint",
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    "application/zip",
+    "application/x-zip-compressed",
+    "application/json",
+    "application/rtf",
+    "text/plain",
+    "text/csv",
+    "text/markdown",
+]);
+
+const ALLOWED_DOCUMENT_EXTENSIONS = new Set([
+    "pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx",
+    "zip", "json", "rtf", "txt", "csv", "md",
+]);
+
+// Uploads go straight to storage via a presigned URL (see
+// presignedUpload.util.js) — this backend never buffers the file, so these
+// ceilings are app-level policy rather than a technical constraint (S3's own
+// single-PUT ceiling is a separate, higher 5GB — see s3.service.js). Add
+// Asset (single) and Add Assets Bulk enforce different caps, so each flow
+// gets its own constant. Rejecting an oversized file here still means the
+// queue shows a clear "invalid" reason instantly instead of a job that
+// uploads for a while and then fails.
+export const MAX_ASSET_FILE_SIZE_SINGLE = 3 * 1024 * 1024 * 1024; // 3 GB
+export const MAX_ASSET_FILE_SIZE_SINGLE_LABEL = "3 GB";
+export const MAX_ASSET_FILE_SIZE_BULK = 5 * 1024 * 1024 * 1024; // 5 GB
+export const MAX_ASSET_FILE_SIZE_BULK_LABEL = "5 GB";
+
+export function fileExtension(filename = "") {
+    const dot = filename.lastIndexOf(".");
+    return dot > 0 ? filename.slice(dot + 1).toLowerCase() : "";
+}
+
+// { ok: true } or { ok: false, reason }. Defaults to the Bulk ceiling since
+// that's this function's only caller (UploadQueueContext); Add Asset (single)
+// checks its own, lower ceiling inline.
+export function validateAssetFile(file, maxSize = MAX_ASSET_FILE_SIZE_BULK, maxSizeLabel = MAX_ASSET_FILE_SIZE_BULK_LABEL) {
+    if (file.size > maxSize) {
+        return {
+            ok: false,
+            reason: `File exceeds the ${maxSizeLabel} size limit.`,
+        };
+    }
+
+    const mime = file.type || "";
+
+    if (mime.startsWith("image/") || mime.startsWith("video/") || mime.startsWith("audio/")) {
+        return { ok: true };
+    }
+
+    const ext = fileExtension(file.name);
+    if (ALLOWED_DOCUMENT_MIME_TYPES.has(mime) || ALLOWED_DOCUMENT_EXTENSIONS.has(ext)) {
+        return { ok: true };
+    }
+
+    const label = ext ? `.${ext}` : (mime || "unknown");
+    return {
+        ok: false,
+        reason: `Unsupported file type "${label}". Allowed formats: images, video, audio, documents.`,
+    };
+}
diff --git a/apps/web/src/utils/csrf.util.js b/apps/web/src/utils/csrf.util.js
new file mode 100644
index 0000000..5be6a8a
--- /dev/null
+++ b/apps/web/src/utils/csrf.util.js
@@ -0,0 +1,23 @@
+import api from './api.util'
+
+let csrfToken = ''
+
+const MUTATING = ['post', 'put', 'patch', 'delete']
+
+export function attachCsrfInterceptor() {
+  api.interceptors.request.use((config) => {
+    if (MUTATING.includes(config.method?.toLowerCase())) {
+      config.headers['x-csrf-token'] = csrfToken
+    }
+    return config
+  })
+}
+
+export async function fetchCsrfToken() {
+  try {
+    const { data } = await api.get('/auth/csrf-token')
+    csrfToken = data.csrfToken
+  } catch (err) {
+    console.error('Failed to fetch CSRF token', err)
+  }
+}
\ No newline at end of file
diff --git a/apps/web/src/utils/datetime.util.js b/apps/web/src/utils/datetime.util.js
new file mode 100644
index 0000000..8a2423b
--- /dev/null
+++ b/apps/web/src/utils/datetime.util.js
@@ -0,0 +1,146 @@
+/**
+ * datetime.util.js
+ *
+ * Pure date/time formatting functions. All accept an optional options object
+ * with { timezone, locale }:
+ *   timezone — 'local' (default) | 'UTC'
+ *   locale   — defaults to navigator.language (browser OS setting)
+ *
+ * These are the raw functions. In React components, use the useDateFormat()
+ * hook instead — it reads the user's timezone preference automatically.
+ */
+
+function tzOpt(timezone) {
+  return timezone === 'UTC' ? { timeZone: 'UTC' } : {};
+}
+
+function loc(locale) {
+  return locale ?? (typeof navigator !== 'undefined' ? navigator.language : 'en-US');
+}
+
+/** "Jun 27, 2026" */
+export function fmtDate(value, { timezone = 'local', locale } = {}) {
+  if (!value) return '—';
+  return new Date(value).toLocaleDateString(loc(locale), {
+    month: 'short', day: 'numeric', year: 'numeric',
+    ...tzOpt(timezone),
+  });
+}
+
+/** "Jun 27, 2026, 3:45 PM" */
+export function fmtDateTime(value, { timezone = 'local', locale } = {}) {
+  if (!value) return '—';
+  return new Date(value).toLocaleString(loc(locale), {
+    month: 'short', day: 'numeric', year: 'numeric',
+    hour: 'numeric', minute: '2-digit',
+    ...tzOpt(timezone),
+  });
+}
+
+function utcOffsetLabel(date, timezone) {
+  if (timezone === 'UTC') return 'UTC+00:00';
+  const offsetMinutes = -date.getTimezoneOffset();
+  const sign = offsetMinutes >= 0 ? '+' : '-';
+  const abs  = Math.abs(offsetMinutes);
+  const hh   = String(Math.floor(abs / 60)).padStart(2, '0');
+  const mm   = String(abs % 60).padStart(2, '0');
+  return `UTC${sign}${hh}:${mm}`;
+}
+
+/**
+ * "July 20, 2026, 9:45 PM (UTC+08:00)" — for report/export generation stamps.
+ * Date and time are formatted separately and joined with a literal ", " —
+ * combining them via a single toLocaleString call lets the runtime's ICU
+ * data pick the separator (some environments render "...2026 at 9:45 PM"),
+ * which would silently drift from this fixed report format.
+ */
+export function fmtDateTimeWithOffset(value, { timezone = 'local', locale } = {}) {
+  if (!value) return '—';
+  const d = new Date(value);
+  const datePart = d.toLocaleDateString(loc(locale), {
+    month: 'long', day: 'numeric', year: 'numeric',
+    ...tzOpt(timezone),
+  });
+  const timePart = d.toLocaleTimeString(loc(locale), {
+    hour: 'numeric', minute: '2-digit',
+    ...tzOpt(timezone),
+  });
+  return `${datePart}, ${timePart} (${utcOffsetLabel(d, timezone)})`;
+}
+
+/**
+ * ISO-8601 datetime shape, e.g. "2026-07-18T16:45:49.414Z" — matches raw
+ * timestamp strings coming straight off the API (created_at/updated_at,
+ * and any other datetime field) before they've been formatted for display.
+ */
+const ISO_DATETIME_RE = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?(Z|[+-]\d{2}:\d{2})?$/;
+
+export function isIsoDateTimeString(value) {
+  return typeof value === 'string' && ISO_DATETIME_RE.test(value);
+}
+
+/** "26/07/20, 4:45 PM" — compact YY/MM/DD form for list/table/export views */
+export function fmtDateTimeCompact(value, { timezone = 'local', locale } = {}) {
+  if (!value) return '—';
+  const d = new Date(value);
+  const parts = new Intl.DateTimeFormat('en-CA', {
+    year: '2-digit', month: '2-digit', day: '2-digit',
+    ...tzOpt(timezone),
+  }).formatToParts(d);
+  const get = (type) => parts.find((p) => p.type === type)?.value;
+  const datePart = `${get('year')}/${get('month')}/${get('day')}`;
+  const timePart = d.toLocaleTimeString(loc(locale), {
+    hour: 'numeric', minute: '2-digit',
+    ...tzOpt(timezone),
+  });
+  return `${datePart}, ${timePart}`;
+}
+
+/** "Jun 27" — no year, for compact table cells */
+export function fmtDateShort(value, { timezone = 'local', locale } = {}) {
+  if (!value) return '—';
+  return new Date(value).toLocaleDateString(loc(locale), {
+    month: 'short', day: 'numeric',
+    ...tzOpt(timezone),
+  });
+}
+
+/** "3:45 PM" */
+export function fmtTime(value, { timezone = 'local', locale } = {}) {
+  if (!value) return '—';
+  return new Date(value).toLocaleTimeString(loc(locale), {
+    hour: 'numeric', minute: '2-digit',
+    ...tzOpt(timezone),
+  });
+}
+
+/**
+ * "2026-06-27" — ISO date string for date-picker inputs.
+ * Always uses local calendar date; timezone conversion does not apply here
+ * because the value is used as a form input, not a display label.
+ */
+export function fmtISO(value) {
+  if (!value) return '';
+  const d = new Date(value);
+  return [
+    d.getFullYear(),
+    String(d.getMonth() + 1).padStart(2, '0'),
+    String(d.getDate()).padStart(2, '0'),
+  ].join('-');
+}
+
+/** "₱1,234.00" / "$99.00" — currency formatting using browser locale */
+export function fmtCurrency(value, currency = 'PHP', { locale } = {}) {
+  if (value === null || value === undefined) return '—';
+  return new Intl.NumberFormat(loc(locale), {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: 2,
+  }).format(Number(value));
+}
+
+/** "1,234.00" — plain number with decimal places */
+export function fmtNumber(value, { locale, minimumFractionDigits = 2 } = {}) {
+  if (value === null || value === undefined) return '—';
+  return Number(value).toLocaleString(loc(locale), { minimumFractionDigits });
+}
diff --git a/apps/web/src/utils/environment.util.js b/apps/web/src/utils/environment.util.js
new file mode 100644
index 0000000..90f9bc3
--- /dev/null
+++ b/apps/web/src/utils/environment.util.js
@@ -0,0 +1,3 @@
+export const isQasEnv = import.meta.env.VITE_APP_ENV === "qas";
+
+export const QAS_UPLOAD_LIMIT_MB = 100;
diff --git a/apps/web/src/utils/excel.util.js b/apps/web/src/utils/excel.util.js
new file mode 100644
index 0000000..da6ae7c
--- /dev/null
+++ b/apps/web/src/utils/excel.util.js
@@ -0,0 +1,271 @@
+// ─── utils/exportToExcel.js ───────────────────────────────────────────────────
+import XLSX from "xlsx-js-style";
+import { toast } from "sonner";
+import { BOOLEAN_FIELD_LABELS } from "@/utils/table.util";
+import { isIsoDateTimeString, fmtDateTimeCompact, fmtDateTimeWithOffset } from "@/utils/datetime.util";
+
+const SKIP_IDS = new Set(["select", "actions"]);
+
+// ─── Banner styling shared by every export's title + header row ───────────────
+const HEADER_FILL       = "132440";
+const HEADER_FONT_COLOR = "FFFFFF";
+const TITLE_FILL        = "D6DEEA";
+const TITLE_FONT_COLOR  = "132440";
+
+function titleCell(text) {
+  return {
+    v: text ?? "",
+    t: "s",
+    s: {
+      font: { bold: true, sz: 14, color: { rgb: TITLE_FONT_COLOR } },
+      fill: { patternType: "solid", fgColor: { rgb: TITLE_FILL } },
+      alignment: { horizontal: "center", vertical: "center" },
+    },
+  };
+}
+
+function headerCell(text) {
+  return {
+    v: text ?? "",
+    t: "s",
+    s: {
+      font: { bold: true, color: { rgb: HEADER_FONT_COLOR } },
+      fill: { patternType: "solid", fgColor: { rgb: HEADER_FILL } },
+      alignment: { horizontal: "center", vertical: "center" },
+    },
+  };
+}
+
+// ─── Footer styling — generation stamp + confidentiality notice ───────────────
+const FOOTER_TEXT_COLOR = "6B7280";
+const FOOTER_NOTE_COLOR = "B91C1C";
+
+function footerCell(text, { bold = false, color = FOOTER_TEXT_COLOR } = {}) {
+  return {
+    v: text ?? "",
+    t: "s",
+    s: {
+      font: { italic: !bold, bold, sz: bold ? 10 : 9, color: { rgb: color } },
+      alignment: { horizontal: "left", vertical: "center" },
+    },
+  };
+}
+
+// Each entry is either null (blank spacer row) or { text, bold?, color? }.
+function buildFooterLines({ generatedBy, recordCount, timezone, footerNote }) {
+  const lines = [
+    null,
+    { text: `Generated on: ${fmtDateTimeWithOffset(new Date(), { timezone })}` },
+  ];
+  if (generatedBy) lines.push({ text: `Generated by: ${generatedBy}` });
+  lines.push(null, { text: `Records: ${recordCount}` });
+  if (footerNote) lines.push(null, { text: footerNote, bold: true, color: FOOTER_NOTE_COLOR });
+  return lines;
+}
+
+// ─── Flatten a value into something a spreadsheet cell can display ────────────
+// Array-of-object columns (e.g. `groups`: [{group_id, name, group_code}]) would
+// otherwise hit Array.prototype.toString → "[object Object]" per item.
+function flattenForExport(value) {
+  if (Array.isArray(value)) {
+    return value
+      .map((item) => (item && typeof item === "object")
+        ? (item.name ?? item.label ?? item.group_code ?? JSON.stringify(item))
+        : item)
+      .join(", ");
+  }
+  if (value && typeof value === "object") {
+    return value.name ?? value.label ?? JSON.stringify(value);
+  }
+  return value;
+}
+
+// ─── Resolve dot-notation or direct key from a row ────────────────────────────
+// `boolLabels` — [falseLabel, trueLabel] from BOOLEAN_FIELD_LABELS, keyed by
+// field name — so boolean-backed columns (e.g. is_active) export the same
+// human-readable text ("Active"/"Not Active") shown in table badges/filters,
+// instead of raw true/false.
+function resolveValue(row, key, boolLabels) {
+  if (!key) return "";
+
+  // ─── Try direct key first e.g. "email", "acc_type" ────────────────────────
+  const raw = key in row
+    ? row[key]
+    // ─── Dot-notation fallback e.g. "personal_info.name.full_name" ──────────
+    : key.split(".").reduce((acc, part) => acc?.[part] ?? "", row);
+
+  if (boolLabels && raw !== null && raw !== undefined && raw !== "") {
+    return boolLabels[raw ? 1 : 0];
+  }
+
+  // Raw ISO timestamps (e.g. created_at/updated_at) never look right in a
+  // spreadsheet cell — format them the same "YY/MM/DD, h:mm a" way table
+  // cells do, so exports never leak an unformatted value either.
+  if (isIsoDateTimeString(raw)) {
+    return fmtDateTimeCompact(raw);
+  }
+
+  return flattenForExport(raw) ?? "";
+}
+
+// ─── Flatten a nested row based on attributes ─────────────────────────────────
+function flattenRow(row, attributes) {
+  const result = {};
+
+  for (const attr of attributes) {
+    const { field } = attr;
+    result[field] = resolveValue(row, field, BOOLEAN_FIELD_LABELS[field]);
+  }
+
+  return result;
+}
+
+/**
+ * Resolves which columns to export based on the TanStack table instance
+ * (reads visible columns) or falls back to the raw attributes array.
+ *
+ * @param {TableInstance|null} tableInstance
+ * @param {Array}              attributes
+ * @returns {Array} [{ key, label, width, boolLabels }]
+ */
+function resolveColumns(tableInstance, attributes) {
+  if (tableInstance) {
+    return tableInstance
+      .getVisibleLeafColumns()
+      .filter((col) => !SKIP_IDS.has(col.id))
+      .map((col) => ({
+        key:   col.id,
+        label:
+          col.columnDef.meta?.label ??
+          (typeof col.columnDef.header === "string" ? col.columnDef.header : col.id),
+        width: col.columnDef.meta?.exportWidth ?? 20,
+        boolLabels: BOOLEAN_FIELD_LABELS[col.id],
+        exportValue: col.columnDef.meta?.exportValue,
+      }));
+  }
+
+  return (attributes ?? [])
+    .filter((attr) => attr.hidden !== true && !SKIP_IDS.has(attr.field))
+    .map((attr) => ({
+      key:   attr.field,
+      label: attr.name ?? attr.field,
+      width: attr.exportWidth ?? 20,
+      boolLabels: BOOLEAN_FIELD_LABELS[attr.field],
+    }));
+}
+
+/**
+ * Dynamic export handler — designed to be called directly from toolbar
+ * and selection action configs across any table.
+ *
+ * Resolves columns from the live TanStack table instance (respects column
+ * visibility toggles) and resolves rows from the selection or full dataset.
+ *
+ * @param {Object}             options
+ * @param {Array}              options.allData        Full dataset for this table
+ * @param {Array}              options.attributes     Field definitions (fallback if no tableInstance)
+ * @param {Array}             [options.selectedRows]  Checked rows — exports these if non-empty
+ * @param {TableInstance|null}[options.tableInstance] TanStack table — reads visible columns
+ * @param {string}            [options.filename]      Without extension. Default: "export"
+ * @param {string}            [options.sheetName]     Sheet tab name. Default: "Sheet1"
+ * @param {string}            [options.title]         Banner title (row 1, merged). Default: sheetName
+ * @param {string}            [options.generatedBy]   e.g. "Kenneth Obsequio (Administrator)" — omitted from footer if not given
+ * @param {string}            [options.timezone]      'local' | 'UTC', for the "Generated on" stamp. Default: 'local'
+ * @param {string|null}       [options.footerNote]     Confidentiality notice. Pass null to omit.
+ *
+ * @example
+ * // Toolbar export (all rows, visible columns)
+ * onClick: (table) => exportTableToExcel({ allData: users, attributes, tableInstance: table, title: "📋 Users", generatedBy: "Kenneth Obsequio (Administrator)" })
+ *
+ * @example
+ * // Selection export (checked rows only, visible columns)
+ * onClick: (rows, table) => exportTableToExcel({ allData: users, attributes, selectedRows: rows, tableInstance: table })
+ */
+export function exportTableToExcel({
+  allData = [],
+  attributes = [],
+  selectedRows = [],
+  tableInstance = null,
+  filename = "export",
+  sheetName = "Sheet1",
+  title,
+  generatedBy,
+  timezone = "local",
+  footerNote = "Confidential – For authorized personnel only.",
+} = {}) {
+  const columns = resolveColumns(tableInstance, attributes);
+  const data    = Array.isArray(selectedRows) && selectedRows.length > 0
+    ? selectedRows
+    : allData;
+
+  exportToExcel({
+    data, columns, filename, sheetName,
+    title: title ?? sheetName,
+    generatedBy, timezone, footerNote,
+  });
+}
+
+/**
+ * Core export — writes a plain array of objects to an .xlsx file.
+ * Use exportTableToExcel above for table-aware dynamic exports.
+ *
+ * Every sheet gets the same layout: a merged, centered title (row 1) above
+ * a styled column-header row (row 2), the data, then a footer block with
+ * a generation stamp, record count, and confidentiality notice — so exports
+ * look consistent across every admin table without each call site having
+ * to build it by hand.
+ *
+ * @param {Object}      options
+ * @param {Array}       options.data          Rows to export
+ * @param {Array}       options.columns       [{ key, label, width }]
+ * @param {string}     [options.filename]     Without extension. Default: "export"
+ * @param {string}     [options.sheetName]    Sheet tab name. Default: "Sheet1"
+ * @param {string}     [options.title]        Banner title (row 1, merged). Default: sheetName
+ * @param {string}     [options.generatedBy]  e.g. "Kenneth Obsequio (Administrator)" — omitted from footer if not given
+ * @param {string}     [options.timezone]     'local' | 'UTC', for the "Generated on" stamp. Default: 'local'
+ * @param {string|null}[options.footerNote]   Confidentiality notice. Pass null to omit.
+ */
+export function exportToExcel({
+  data = [],
+  columns = [],
+  filename = "export",
+  sheetName = "Sheet1",
+  title,
+  generatedBy,
+  timezone = "local",
+  footerNote = "Confidential – For authorized personnel only.",
+} = {}) {
+  if (!data.length || !columns.length) {
+    toast("Nothing to export — the table has no rows.");
+    return;
+  }
+
+  const titleRow  = [titleCell(title ?? sheetName), ...Array(columns.length - 1).fill("")];
+  const headerRow = columns.map((c) => headerCell(c.label ?? c.key));
+  const dataRows  = data.map((row) =>
+    columns.map((c) => c.exportValue ? c.exportValue(row) : resolveValue(row, c.key, c.boolLabels))
+  );
+
+  const footerLines = buildFooterLines({ generatedBy, recordCount: data.length, timezone, footerNote });
+  const footerRows  = footerLines.map((line) =>
+    line
+      ? [footerCell(line.text, line), ...Array(columns.length - 1).fill("")]
+      : Array(columns.length).fill("")
+  );
+
+  const ws = XLSX.utils.aoa_to_sheet([titleRow, headerRow, ...dataRows, ...footerRows]);
+  ws["!cols"] = columns.map((c) => ({ wch: c.width ?? 20 }));
+  ws["!rows"] = [{ hpt: 24 }];
+
+  const merges = [{ s: { r: 0, c: 0 }, e: { r: 0, c: columns.length - 1 } }];
+  footerLines.forEach((line, i) => {
+    if (!line) return;
+    const rowIdx = 2 + dataRows.length + i;
+    merges.push({ s: { r: rowIdx, c: 0 }, e: { r: rowIdx, c: columns.length - 1 } });
+  });
+  ws["!merges"] = merges;
+
+  const wb = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(wb, ws, sheetName);
+  XLSX.writeFile(wb, `${filename}.xlsx`);
+}
\ No newline at end of file
diff --git a/apps/web/src/utils/format.util.js b/apps/web/src/utils/format.util.js
new file mode 100644
index 0000000..c65787c
--- /dev/null
+++ b/apps/web/src/utils/format.util.js
@@ -0,0 +1,28 @@
+// utils/format.util.js
+//
+// Shared byte-size and player-time formatters. Both were previously
+// duplicated ad hoc across the admin asset pages / media block players, each
+// copy independently under-scoped: file-size helpers that topped out at "MB"
+// with no GB tier (a 1.4GB asset read as "1457.88 MB"), and a time formatter
+// that never rolled minutes over into hours (a 76-minute video read as
+// "76:57" instead of "1:16:57"). One source of truth from here on.
+
+export function formatFileSize(bytes) {
+    if (bytes == null) return null;
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(1)} KB`;
+    if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+    return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
+}
+
+// m:ss under an hour, h:mm:ss at/above an hour — matches standard player
+// conventions (YouTube, etc).
+export function formatPlayerTime(seconds) {
+    if (!seconds || isNaN(seconds)) return "0:00";
+    const total = Math.floor(seconds);
+    const h = Math.floor(total / 3600);
+    const m = Math.floor((total % 3600) / 60);
+    const s = total % 60;
+    if (h > 0) return `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+    return `${m}:${String(s).padStart(2, "0")}`;
+}
diff --git a/apps/web/src/utils/generatedBy.util.js b/apps/web/src/utils/generatedBy.util.js
new file mode 100644
index 0000000..c472b57
--- /dev/null
+++ b/apps/web/src/utils/generatedBy.util.js
@@ -0,0 +1,14 @@
+// ─── utils/generatedBy.util.js ─────────────────────────────────────────────
+import { ROLE_CONFIG } from "@/data/profile.data";
+
+/**
+ * Formats the "Generated by" footer label for excel.util.js exports from an
+ * AuthContext user. Returns undefined (footer line omitted) if no user.
+ *
+ * @param {Object|null} user  AuthContext `user`
+ * @returns {string|undefined} e.g. "Kenneth Obsequio (Administrator)"
+ */
+export function formatGeneratedBy(user) {
+  if (!user) return undefined;
+  return `${user.personal_info?.name?.full_name ?? user.email} (${ROLE_CONFIG[user.acc_type]?.label ?? user.acc_type})`;
+}
diff --git a/apps/web/src/utils/link.util.js b/apps/web/src/utils/link.util.js
new file mode 100644
index 0000000..5ee2a42
--- /dev/null
+++ b/apps/web/src/utils/link.util.js
@@ -0,0 +1,66 @@
+// utils/link.util.js
+
+// Flat list of client route path patterns, hand-flattened from
+// modules/client/routes/ClientRoutes.jsx (mounted at root, no /client
+// prefix — confirmed via navigate("/dashboard") calls in that module).
+// Keep this in sync manually when ClientRoutes.jsx changes; importing the
+// real route tree here would drag every client page component into this
+// util's module graph.
+export const CLIENT_ROUTE_PATHS = [
+    "intro",
+    "dashboard",
+    "profile",
+    "profile/edit",
+    "certificates",
+    "achievements",
+    "completed",
+    "settings",
+    "notifications",
+    "ads/:uuid",
+    "subscriptions",
+    "subscriptions/view/:id",
+    "subscriptions/checkout",
+    "course",
+    "course/:id",
+    "course/:id/unit",
+    "course/:id/checkout",
+    "units",
+    "units/:uuid",
+    "units/:uuid/read",
+    "units/:uuid/checkout",
+    "lessons",
+    "lessons/:uuid",
+    "lessons/:uuid/checkout",
+    "group/:groupId",
+    "group/:groupId/view/:taskListId",
+    "group/:groupId/view/:taskListId/task/:taskId",
+];
+
+const ROUTE_SEGMENTS = CLIENT_ROUTE_PATHS.map((p) => p.split("/"));
+
+export function isKnownClientPath(pathname) {
+    const normalized = pathname.split(/[?#]/)[0].replace(/^\/+|\/+$/g, "");
+    if (!normalized) return false;
+    const segments = normalized.split("/");
+    return ROUTE_SEGMENTS.some((pattern) => {
+        if (pattern.length !== segments.length) return false;
+        return pattern.every((seg, i) => seg.startsWith(":") || seg === segments[i]);
+    });
+}
+
+// Accepts an internal path matching a real client route (e.g. /courses) or
+// a URL with a real domain (protocol optional) — rejects garbage like
+// "534252345" while still allowing any valid TLD, not just .com/.net.
+export const LINK_ERROR = "Enter a valid URL (e.g. https://example.com) or an internal path that matches a real client route.";
+
+export function isValidLink(value) {
+    if (!value) return true;
+    const v = value.trim();
+    if (v.startsWith("/")) return isKnownClientPath(v);
+    try {
+        const url = new URL(/^https?:\/\//i.test(v) ? v : `https://${v}`);
+        return /\.[a-zA-Z]{2,}$/.test(url.hostname);
+    } catch {
+        return false;
+    }
+}
diff --git a/apps/web/src/utils/media.util.js b/apps/web/src/utils/media.util.js
new file mode 100644
index 0000000..a6d6652
--- /dev/null
+++ b/apps/web/src/utils/media.util.js
@@ -0,0 +1,102 @@
+// utils/media.util.js
+//
+// Resolves a displayable <img>/<video>/<audio> src for an asset payload that
+// may carry a short-lived stream_token (private/S3 — proxied through the
+// backend) instead of a raw file_url. Private assets must never expose their
+// real storage URL to the browser — see controllers/admin/assets.controller.js's
+// redactS3Url pattern, mirrored for advertisements in
+// controllers/*/advertisements.controller.js.
+
+import api from "@/utils/api.util";
+
+const API_BASE = (import.meta.env.VITE_API_URL ?? "http://localhost:3024").replace(/\/$/, "");
+
+const TOKEN_ENDPOINTS = {
+    admin:  "/admin/media/token",
+    client: "/client/media/token",
+};
+
+export function streamUrl(token) {
+    return token ? `${API_BASE}/client/media/stream/${token}` : null;
+}
+
+// asset: { stream_token?, file_url?, thumbnail_url? } — stream_token always
+// wins when present (proxied); file_url/thumbnail_url are only ever populated
+// here for public/chibisafe assets, which don't need proxying.
+export function resolveAssetSrc(asset) {
+    if (!asset) return null;
+    if (asset.stream_token) return streamUrl(asset.stream_token);
+    return asset.thumbnail_url || asset.file_url || null;
+}
+
+// ─── fetchAssetPreviewSrc ──────────────────────────────────────────────────────
+//
+// Async fallback for when resolveAssetSrc() can't resolve synchronously (S3
+// asset whose stream_token wasn't embedded on the row — e.g. an expired cache
+// edge case). Mints a fresh token via the admin or client media-token endpoint.
+// Non-S3 assets (chibisafe/local) resolve straight to file_url — no request.
+//
+// Returns { src, thumbnailUrl }.
+export async function fetchAssetPreviewSrc(asset, { scope = "admin" } = {}) {
+    if (!asset) return { src: null, thumbnailUrl: null };
+
+    if (asset.storage_provider !== "s3") {
+        return { src: asset.file_url ?? null, thumbnailUrl: asset.thumbnail_url ?? null };
+    }
+
+    if (asset.stream_token) {
+        return { src: streamUrl(asset.stream_token), thumbnailUrl: asset.thumbnail_url ?? null };
+    }
+
+    try {
+        const { data } = await api.post(TOKEN_ENDPOINTS[scope] ?? TOKEN_ENDPOINTS.admin, {
+            asset_id: asset.asset_id,
+        });
+        const { token, thumbnail_url } = data?.data ?? {};
+        return { src: streamUrl(token), thumbnailUrl: thumbnail_url ?? null };
+    } catch {
+        return { src: null, thumbnailUrl: null };
+    }
+}
+
+// ─── saveBlob ───────────────────────────────────────────────────────────────────
+//
+// Triggers a browser "Save As" for an in-memory blob via a synthetic <a download>
+// click. Shared by downloadAsset() below and FilePreview.jsx's file-completion
+// download flow — kept in one place instead of being copy-pasted per consumer.
+export function saveBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename ?? "download";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}
+
+// ─── downloadAsset ──────────────────────────────────────────────────────────────
+//
+// Fetches an asset's bytes (via the same proxy/file_url resolution as above)
+// and saves it locally, without ever mounting a preview element. Used for
+// "Public" assets in the Assets admin surfaces, which are download-only —
+// see AssetPickerSheet.jsx / the admin ViewXAsset pages.
+export async function downloadAsset(asset, { scope = "admin" } = {}) {
+    if (!asset) return;
+
+    const filename = asset.display_name ?? asset.original_name ?? "download";
+    let src = resolveAssetSrc(asset);
+    if (!src) {
+        ({ src } = await fetchAssetPreviewSrc(asset, { scope }));
+    }
+    if (!src) return;
+
+    try {
+        const { data: blob } = await api.get(src, { responseType: "blob" });
+        saveBlob(blob, filename);
+    } catch {
+        // Cross-origin CDN (chibisafe/public file_url) may reject the blob
+        // fetch — fall back to opening it directly.
+        if (asset.file_url) window.open(asset.file_url, "_blank");
+    }
+}
diff --git a/apps/web/src/utils/planBundle.util.js b/apps/web/src/utils/planBundle.util.js
new file mode 100644
index 0000000..09ef9f3
--- /dev/null
+++ b/apps/web/src/utils/planBundle.util.js
@@ -0,0 +1,40 @@
+import { BookOpen, Layers, FileText } from "lucide-react";
+
+// A plan's bundle is single-type (Tier Plans v2) — resolve whichever of
+// courses/units/lessons is actually populated instead of assuming courses.
+const BUNDLE_META = {
+    course: { icon: BookOpen, idKey: "course_id", noun: "Course" },
+    unit:   { icon: Layers,   idKey: "unit_id",   noun: "Unit" },
+    lesson: { icon: FileText, idKey: "lesson_id", noun: "Lesson" },
+};
+
+export function getBundleContent(plan) {
+    if (plan?.courses?.length) return { type: "course", items: plan.courses, ...BUNDLE_META.course };
+    if (plan?.units?.length)   return { type: "unit",   items: plan.units,   ...BUNDLE_META.unit };
+    if (plan?.lessons?.length) return { type: "lesson", items: plan.lessons, ...BUNDLE_META.lesson };
+    return null;
+}
+
+// Item-specific "already covered" check (Tier Plans v2) — a plan is blocked
+// from purchase if ANY of its bundle items overlap the user's existing
+// granted items, even partially, regardless of tier slug.
+export function overlapsExistingAccess(plan, myGrants) {
+    if (!myGrants) return false;
+    const overlaps = (planIds = [], grantedIds = []) => {
+        const granted = new Set((grantedIds ?? []).map(String));
+        return (planIds ?? []).some((id) => granted.has(String(id)));
+    };
+    return (
+        overlaps(plan?.course_ids, myGrants.course_ids) ||
+        overlaps(plan?.unit_ids, myGrants.unit_ids) ||
+        overlaps(plan?.lesson_ids, myGrants.lesson_ids)
+    );
+}
+
+// "Current" means the user actually purchased THIS exact plan (matched by
+// plan_id) and it's still active — NOT just any plan sharing the same tier
+// slug. Two different plans can be the same tier (e.g. two Premium bundles)
+// and stay independently active (Tier Plans v2).
+export function isPlanCurrent(plan, myTier) {
+    return (myTier?.active_tiers ?? []).some((t) => t.plan_id != null && String(t.plan_id) === String(plan?.plan_id));
+}
diff --git a/apps/web/src/utils/presignedUpload.util.js b/apps/web/src/utils/presignedUpload.util.js
new file mode 100644
index 0000000..2dd6104
--- /dev/null
+++ b/apps/web/src/utils/presignedUpload.util.js
@@ -0,0 +1,169 @@
+// utils/presignedUpload.util.js
+//
+// Shared by AdminAssetsContext.jsx (single-file Add Asset) and
+// UploadQueueContext.jsx (Add Assets Bulk) — the browser uploads file bytes
+// directly to storage via a short-lived presigned URL, so this backend
+// never buffers them regardless of file size. presignAssetUpload() mints
+// the URL(s); putDirect()/putMultipart() send the bytes with real progress
+// events, and deliberately bypass the shared `api` axios instance since
+// they target a different origin (the storage host) and must not pick up
+// the app's Authorization-header interceptor or any other header that
+// wasn't part of what the URL was signed for.
+//
+// Files at or below storage's single-PUT ceiling (5GB) get one presigned
+// PUT (putDirect). Anything larger uses real multipart upload (putMultipart)
+// — the backend splits it into 50MB parts, presigns each one, and the
+// browser uploads them through a small concurrent worker pool, retrying an
+// individual failed part a couple of times before giving up entirely.
+
+import api from "@/utils/api.util";
+
+const MAX_PART_RETRIES = 2;
+const MAX_CONCURRENT_PARTS = 3;
+
+export function resolveFileType(mimetype = "") {
+    if (mimetype.startsWith("image/")) return "image";
+    if (mimetype.startsWith("video/")) return "video";
+    if (mimetype.startsWith("audio/")) return "audio";
+    return "document";
+}
+
+// -> { key, uploadUrl }                                   (size <= 5GB)
+// -> { key, multipart: true, uploadId, partSize, parts }   (size > 5GB)
+export async function presignAssetUpload(file) {
+    const { data } = await api.post("/admin/assets/presign", {
+        filename: file.name,
+        mimetype: file.type,
+        file_type: resolveFileType(file.type),
+        size: file.size,
+    });
+    return data.data;
+}
+
+export function putDirect(uploadUrl, file, onProgress) {
+    return new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open("PUT", uploadUrl);
+        if (onProgress) {
+            xhr.upload.onprogress = (evt) => {
+                onProgress(evt.lengthComputable ? Math.round((evt.loaded / evt.total) * 100) : 0);
+            };
+        }
+        xhr.onload = () => {
+            if (xhr.status >= 200 && xhr.status < 300) resolve();
+            else reject(new Error(`Upload failed (${xhr.status}).`));
+        };
+        xhr.onerror = () => reject(new Error("Network error during upload."));
+        xhr.send(file);
+    });
+}
+
+// Single part PUT — resolves with the ETag S3 returns for that part (needed
+// to build the CompleteMultipartUpload part list later). Requires ETag to be
+// listed in the storage edge's Access-Control-Expose-Headers, since it's
+// otherwise invisible to JS on a cross-origin response.
+function putPart(uploadUrl, blob, onLoaded) {
+    return new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open("PUT", uploadUrl);
+        xhr.upload.onprogress = (evt) => {
+            if (evt.lengthComputable) onLoaded(evt.loaded);
+        };
+        xhr.onload = () => {
+            if (xhr.status >= 200 && xhr.status < 300) {
+                const etag = xhr.getResponseHeader("ETag");
+                if (!etag) { reject(new Error("Part upload succeeded but no ETag was returned.")); return; }
+                onLoaded(blob.size);
+                resolve(etag);
+            } else {
+                reject(new Error(`Part upload failed (${xhr.status}).`));
+            }
+        };
+        xhr.onerror = () => reject(new Error("Network error during part upload."));
+        xhr.send(blob);
+    });
+}
+
+async function putPartWithRetry(uploadUrl, blob, onLoaded) {
+    let lastErr;
+    for (let attempt = 0; attempt <= MAX_PART_RETRIES; attempt++) {
+        try {
+            return await putPart(uploadUrl, blob, onLoaded);
+        } catch (err) {
+            lastErr = err;
+            onLoaded(0); // reset this part's contribution before retrying
+        }
+    }
+    throw lastErr;
+}
+
+// multipartInfo: { uploadId, partSize, parts: [{ partNumber, uploadUrl }] }
+// -> [{ partNumber, etag }, ...] (unordered — completeMultipartUpload sorts)
+export async function putMultipart(file, multipartInfo, onProgress) {
+    const { partSize, parts } = multipartInfo;
+    const loadedByPart = new Array(parts.length).fill(0);
+
+    const reportProgress = () => {
+        if (!onProgress) return;
+        const loaded = loadedByPart.reduce((sum, n) => sum + n, 0);
+        onProgress(Math.min(100, Math.round((loaded / file.size) * 100)));
+    };
+
+    const results = new Array(parts.length);
+    let next = 0;
+    const worker = async () => {
+        while (next < parts.length) {
+            const i = next++;
+            const { partNumber, uploadUrl } = parts[i];
+            const start = (partNumber - 1) * partSize;
+            const end = Math.min(start + partSize, file.size);
+            const blob = file.slice(start, end);
+
+            const etag = await putPartWithRetry(uploadUrl, blob, (loaded) => {
+                loadedByPart[i] = loaded;
+                reportProgress();
+            });
+            results[i] = { partNumber, etag };
+        }
+    };
+
+    await Promise.all(
+        Array.from({ length: Math.min(MAX_CONCURRENT_PARTS, parts.length) }, worker)
+    );
+
+    return results;
+}
+
+// Uploads one file to whatever presignAssetUpload() returned — single PUT or
+// full multipart, whichever the file's size required — and leaves storage
+// clean on failure (aborts a partially-uploaded multipart session rather
+// than leaving it to linger). Shared by AdminAssetsContext.jsx and
+// UploadQueueContext.jsx so neither has to duplicate this branch.
+export async function uploadPresigned(file, presigned, onProgress) {
+    if (!presigned.multipart) {
+        await putDirect(presigned.uploadUrl, file, onProgress);
+        return;
+    }
+
+    try {
+        const parts = await putMultipart(file, presigned, onProgress);
+        await completeMultipartUpload(presigned.key, presigned.uploadId, parts);
+    } catch (err) {
+        await abortMultipartUpload(presigned.key, presigned.uploadId);
+        throw err;
+    }
+}
+
+export async function completeMultipartUpload(storage_key, uploadId, parts) {
+    await api.post("/admin/assets/complete-multipart", { storage_key, uploadId, parts });
+}
+
+export async function abortMultipartUpload(storage_key, uploadId) {
+    // Best-effort — a failed cleanup call shouldn't mask the real upload
+    // error that triggered the abort in the first place.
+    try {
+        await api.post("/admin/assets/abort-multipart", { storage_key, uploadId });
+    } catch {
+        // ignore
+    }
+}
diff --git a/apps/web/src/utils/roleRedirect.util.js b/apps/web/src/utils/roleRedirect.util.js
new file mode 100644
index 0000000..099706d
--- /dev/null
+++ b/apps/web/src/utils/roleRedirect.util.js
@@ -0,0 +1,12 @@
+// utils/roleRedirect.util.js
+// Single source of truth for "where does this account type land after auth."
+// acc_type is only ever 'admin' | 'staff' | 'user' (see users.mdl.js) — there is
+// no 'client' value, despite some older call sites checking for one.
+export function getRoleHomePath(user) {
+  switch (user?.acc_type) {
+    case 'admin': return '/admin'
+    case 'staff': return '/staff'
+    case 'user':  return user.needs_intro ? '/intro' : '/dashboard'
+    default:      return '/dashboard'
+  }
+}
diff --git a/apps/web/src/utils/table.util.jsx b/apps/web/src/utils/table.util.jsx
new file mode 100644
index 0000000..95b8f63
--- /dev/null
+++ b/apps/web/src/utils/table.util.jsx
@@ -0,0 +1,401 @@
+/***********************************************************************************************************************************************************************
+ * File Name    : table.util.jsx
+ * Type         : Utility
+ * Description  : Shared helpers for the generic admin DataTable system.
+ *                Provides:
+ *                  - pageSizes constant for the page-size selector
+ *                  - BADGE_STYLES + EnumBadge for enum-type column rendering
+ *                  - formatDate (date-only, "MMM d, yyyy") used as the default
+ *                    renderer for "date"-type attributes app-wide
+ *                  - renderCell, the default per-type cell renderer dispatched
+ *                    by buildColumns when no cellOverride is supplied
+ *                  - ColumnFilter, the per-column filter UI (enum/date/text)
+ *                  - SortIcon, the header sort indicator
+ *                  - longTextCell, a reusable cellOverride factory for long
+ *                    values (UUIDs, free text notes, etc.) — truncates the
+ *                    value and shows an "Eye · View" trigger that opens a
+ *                    shadcn Dialog with the full value
+ *                  - buildColumns, which turns server-provided attribute
+ *                    metadata into TanStack column definitions
+ *
+ * Author: rgrgogu
+ * Modified by: Kenneth Obsequio (@lash0000)
+ * Date Created: May 6, 2026
+ * Date Modified: Jun 17, 2026
+ ***********************************************************************************************************************************************************************/
+import { useState, useEffect } from "react";
+
+import { createColumnHelper } from "@tanstack/react-table";
+import { format } from "date-fns";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { Search, ArrowUp, ArrowDown, ArrowUpDown, Eye } from "lucide-react";
+import { isIsoDateTimeString, fmtDateTimeCompact } from "@/utils/datetime.util";
+
+export const pageSizes = [10, 25, 50, 75, 100, 250, 500, 750, 1000]
+
+// ── Badge style map for enum values ───────────────────────────────────────────
+export const BADGE_STYLES = {
+  // ── User status ───────────────────────────────
+  "Active": "bg-emerald-100 text-emerald-800 border-emerald-200",
+  "Not Active": "bg-rose-100 text-rose-700 border-rose-200",
+  "Verified": "bg-blue-100 text-blue-800 border-blue-200",
+  "Not Verified": "bg-amber-100 text-amber-700 border-amber-200",
+  "Banned": "bg-red-100 text-red-700 border-red-200",
+
+  // ── Registration / account type ───────────────
+  "system": "bg-violet-50 text-violet-700 border-violet-200",
+  "google": "bg-orange-50 text-orange-700 border-orange-200",
+  "admin": "bg-red-100 text-red-700 border-red-200",
+  "user": "bg-blue-100 text-blue-700 border-blue-200",
+  "staff": "bg-green-100 text-green-700 border-green-200",
+
+  // ── Asset — file_type ─────────────────────────
+  "image": "bg-sky-100 text-sky-700 border-sky-200",
+  "video": "bg-purple-100 text-purple-700 border-purple-200",
+  "document": "bg-amber-100 text-amber-700 border-amber-200",
+  "other": "bg-zinc-100 text-zinc-600 border-zinc-200",
+
+  // ── Asset — storage_provider ──────────────────
+  "chibisafe": "bg-pink-100 text-pink-700 border-pink-200",
+  "local": "bg-zinc-100 text-zinc-600 border-zinc-200",
+  "s3": "bg-orange-100 text-orange-700 border-orange-200",
+  "gcs": "bg-blue-50 text-blue-600 border-blue-200",
+  "cloudinary": "bg-indigo-100 text-indigo-700 border-indigo-200",
+
+  // ── Asset — access_level ──────────────────────
+  "public": "bg-emerald-100 text-emerald-700 border-emerald-200",
+  "private": "bg-rose-100 text-rose-700 border-rose-200",
+  "restricted": "bg-amber-100 text-amber-700 border-amber-200",
+
+  // ── Asset — is_public ─────────────────────────
+  "true": "bg-emerald-100 text-emerald-700 border-emerald-200",
+  "false": "bg-zinc-100 text-zinc-600 border-zinc-200",
+
+  // ── Generic boolean labels (BOOLEAN_FIELD_LABELS) ─────────
+  "Yes": "bg-emerald-100 text-emerald-700 border-emerald-200",
+  "No":  "bg-zinc-100 text-zinc-600 border-zinc-200",
+
+  // ── Publish status (Courses, Tier Plans) ──────
+  "draft":     "bg-amber-100 text-amber-700 border-amber-200",
+  "published": "bg-emerald-100 text-emerald-700 border-emerald-200",
+};
+
+function EnumBadge({ value }) {
+  return (
+    <Badge
+      variant="outline"
+      className={`text-[11px] font-medium px-2 py-0.5 ${BADGE_STYLES[value] ?? ""}`}
+    >
+      {value}
+    </Badge>
+  );
+}
+
+export function formatDate(value) {
+  if (!value) return null;
+  try { return format(new Date(value), "MMM d, yyyy"); }
+  catch { return value; }
+}
+
+export function formatDateTime(value) {
+  if (!value) return null;
+  try { return format(new Date(value), "MMM d, yyyy h:mm a"); }
+  catch { return value; }
+}
+
+// Human-readable labels for boolean-backed enum fields — [falseLabel, trueLabel].
+// Shared by renderCell (table cells) and ColumnFilter (filter dropdown), so a
+// "true"/"false" boolean column never surfaces its raw value to the admin.
+export const BOOLEAN_FIELD_LABELS = {
+  is_active:   ["Not Active", "Active"],
+  is_verified: ["Not Verified", "Verified"],
+  is_public:   ["Private", "Public"],
+  is_banned:   ["Not Banned", "Banned"],
+  is_required: ["No", "Yes"],
+  accepts_submissions: ["No", "Yes"],
+  is_recommended: ["No", "Yes"],
+};
+
+function renderCell(attr, value) {
+  if (value === null || value === undefined || value === "") {
+    return <span className="text-muted-foreground/40">-</span>;
+  }
+
+  switch (attr.type) {
+    case "enum": {
+      const boolLabels = BOOLEAN_FIELD_LABELS[attr.field];
+      if (boolLabels) return <EnumBadge value={boolLabels[value ? 1 : 0]} />;
+      return <EnumBadge value={value} />;
+    }
+    case "date": return <span className="text-xs text-muted-foreground">{formatDate(value)}</span>;
+    case "number": return <span className="font-mono text-xs font-semibold text-muted-foreground">{value}</span>;
+    default: {
+      // Server-reported attr.type doesn't always land on "date" for
+      // datetime fields (e.g. created_at/updated_at) — fall back to
+      // formatting anything that's shaped like a raw ISO timestamp so it
+      // never surfaces unformatted in a table cell.
+      if (isIsoDateTimeString(value)) {
+        return <span className="text-xs text-muted-foreground">{fmtDateTimeCompact(value)}</span>;
+      }
+      return <span className="block truncate max-w-56 text-sm" title={String(value)}>{value}</span>;
+    }
+  }
+}
+
+export function ColumnFilter({ column, attr }) {
+  const columnValue = column.getFilterValue() ?? "";
+  const [inputValue, setInputValue] = useState(columnValue);
+
+  // keep in sync when external reset happens
+  useEffect(() => {
+    setInputValue(columnValue);
+  }, [columnValue]);
+
+  // ─────────────────────────────────────────────
+  // ENUM (AUTO APPLY)
+  // ─────────────────────────────────────────────
+  if (attr.type === "enum") {
+    const boolLabels = BOOLEAN_FIELD_LABELS[attr.field];
+    const choiceLabel = (c) => boolLabels ? boolLabels[c === "true" ? 1 : 0] : c;
+
+    return (
+      <Select
+        value={inputValue || "__all__"}
+        onValueChange={(v) => {
+          const value = v === "__all__" ? "" : v;
+          setInputValue(value);
+          column.setFilterValue(value);
+        }}
+      >
+        <SelectTrigger className="h-7 text-xs w-full">
+          <SelectValue placeholder="All" />
+        </SelectTrigger>
+
+        <SelectContent>
+          <SelectItem value="__all__">All</SelectItem>
+          {attr.options?.choices?.map((c) => (
+            <SelectItem key={c} value={c}>
+              {choiceLabel(c)}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  }
+
+  // ─────────────────────────────────────────────
+  // DATE (SINGLE)
+  // ─────────────────────────────────────────────
+  if (attr.type === "date") {
+    const value =
+      inputValue &&
+        typeof inputValue === "object" &&
+        ("from" in inputValue || "to" in inputValue)
+        ? inputValue
+        : null;
+
+    const isRange = !!value;
+
+    return (
+      <div className="flex flex-col gap-1">
+        {/* MODE TOGGLE */}
+        <div className="flex items-center gap-2 text-xs">
+          <label className="flex items-center gap-1">
+            <input
+              type="radio"
+              checked={!isRange}
+              onChange={() => {
+                setInputValue("");
+                column.setFilterValue("");
+              }}
+            />
+            Single
+          </label>
+
+          <label className="flex items-center gap-1">
+            <input
+              type="radio"
+              checked={isRange}
+              onChange={() => {
+                setInputValue({ from: "", to: "" });
+                column.setFilterValue({ from: "", to: "" });
+              }}
+            />
+            Range
+          </label>
+        </div>
+
+        {/* SINGLE DATE */}
+        {!isRange && (
+          <Input
+            type="date"
+            value={inputValue || ""}
+            onChange={(e) => {
+              const val = e.target.value;
+              setInputValue(val);
+              column.setFilterValue(val);
+            }}
+            className="h-7 text-xs"
+          />
+        )}
+
+        {/* RANGE */}
+        {isRange && (
+          <div className="flex gap-1">
+            <Input
+              type="date"
+              value={value.from}
+              onChange={(e) => {
+                const next = {
+                  from: e.target.value,
+                  to: value.to || "",
+                };
+                setInputValue(next);
+                column.setFilterValue(next);
+              }}
+              className="h-7 text-xs"
+            />
+
+            <Input
+              type="date"
+              value={value.to}
+              onChange={(e) => {
+                const next = {
+                  from: value.from || "",
+                  to: e.target.value,
+                };
+                setInputValue(next);
+                column.setFilterValue(next);
+              }}
+              className="h-7 text-xs"
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // ─────────────────────────────────────────────
+  // TEXT FILTER (manual apply)
+  // ─────────────────────────────────────────────
+  return (
+    <div className="flex gap-1">
+      <Input
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            column.setFilterValue(inputValue);
+          }
+        }}
+        placeholder="Filter..."
+        className="h-7 text-xs w-full"
+      />
+
+      <Button
+        size="icon"
+        variant="outline"
+        className="h-7 w-7"
+        onClick={() => column.setFilterValue(inputValue)}
+      >
+        <Search className="size-3.5" />
+      </Button>
+    </div>
+  );
+}
+
+// ── Sort icon ──────────────────────────────────────────────────────────────────
+export function SortIcon({ column }) {
+  const s = column.getIsSorted();
+  if (s === "asc") return <ArrowUp className="ml-1 h-3 w-3 text-primary shrink-0" />;
+  if (s === "desc") return <ArrowDown className="ml-1 h-3 w-3 text-primary shrink-0" />;
+  return <ArrowUpDown className="ml-1 h-3 w-3 text-muted-foreground/40 shrink-0" />;
+}
+
+// ── Long text cell — truncate + "Eye · View" dialog trigger ────────────────────
+//
+// Generic, reusable across any table/column. Any value longer than the
+// threshold renders truncated with a small "View" indicator; clicking opens
+// a shadcn Dialog showing the full value. Values at or under the threshold
+// render plainly, same as the default text cell.
+//
+// Usage in any columns.config.jsx:
+//   import { longTextCell } from "@/utils/table.util";
+//   const cellOverrides = {
+//     completion_id: longTextCell("Completion ID"),
+//     note:          longTextCell("Note"),
+//   };
+
+const LONG_TEXT_THRESHOLD = 24; // characters — like UUIDs are 36, short notes may be under this
+
+function LongTextCell({ value, label = "Full value" }) {
+  const [open, setOpen] = useState(false);
+
+  if (value === null || value === undefined || value === "") {
+    return <span className="text-muted-foreground/40">-</span>;
+  }
+
+  const str = String(value);
+  if (str.length <= LONG_TEXT_THRESHOLD) {
+    return <span className="text-sm">{str}</span>;
+  }
+
+  return (
+    <>
+      <Button
+        type="button"
+        onClick={() => setOpen(true)}
+        variant="ghost"
+        size="sm"
+      >
+        <div className="truncate max-w-[160px]">{str}</div>
+        <div className="inline-flex items-center gap-1 text-xs text-muted-foreground shrink-0">
+          <Eye className="size-3.5" /> View
+        </div>
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{label}</DialogTitle>
+          </DialogHeader>
+          <p className="text-sm break-all bg-muted rounded-md p-3">{str}</p>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+export function longTextCell(label) {
+  return (info) => <LongTextCell value={info.getValue()} label={label} />;
+}
+
+// ── Build columns dynamically from attributes ──────────────────────────────────
+const columnHelper = createColumnHelper();
+
+export function buildColumns(attributes, { cellOverrides = {} } = {}) {
+  return attributes.map((attr) =>
+    columnHelper.accessor(attr.field, {
+      id: attr.field,
+      header: attr.name,
+      enableSorting: true,
+      enableColumnFilter: true,
+      filterFn: (row, colId, filterValue) => {
+        if (!filterValue) return true;
+        const val = String(row.getValue(colId) ?? "").toLowerCase();
+        return val.includes(String(filterValue).toLowerCase());
+      },
+      cell: (info) =>
+        cellOverrides[attr.field]        // ← check override first
+          ? cellOverrides[attr.field](info)
+          : renderCell(attr, info.getValue()),
+      meta: { attr },
+    })
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/utils/tierBadge.util.js b/apps/web/src/utils/tierBadge.util.js
new file mode 100644
index 0000000..ba99225
--- /dev/null
+++ b/apps/web/src/utils/tierBadge.util.js
@@ -0,0 +1,43 @@
+import { getTierColor } from './tierColors';
+
+/**
+ * Resolves badge + panel colors for a tier slug using the live tierMap from the API.
+ * The category's stored `color` key drives all styling — no rank-indexed arrays.
+ */
+export function resolveTierBadge(slug, tierMap = {}) {
+    const info     = tierMap[slug];
+    const colorKey = info?.color ?? ((!slug || slug === 'free') ? 'green' : 'purple');
+    const colors   = getTierColor(colorKey);
+    const rank     = info?.rank ?? 0;
+    const label    = info?.name ?? (slug ? slug.charAt(0).toUpperCase() + slug.slice(1) : 'Free');
+    // Just the "bg-gradient-to-r from-X to-Y" portion of the badge class —
+    // for surfaces that need the tier's actual gradient (not the pale panel
+    // tint) but supply their own text/border handling.
+    const gradient = colors.badge.replace(/\s*text-white\s*border-0\s*$/, '');
+    return { rank, label, cls: colors.badge, panel: colors.panel, gradient, colorKey };
+}
+
+/** Returns badge Tailwind class string for a stored color key. */
+export function tierBadgeClass(colorKey = 'green') {
+    return getTierColor(colorKey).badge;
+}
+
+/** Returns panel Tailwind classes { bg, border } for a stored color key. */
+export function tierPanelColors(colorKey = 'green') {
+    return getTierColor(colorKey).panel;
+}
+
+/**
+ * Picks the lowest-rank (cheapest) tier slug among several access paths —
+ * e.g. a Unit's own subscription plus every course that also unlocks it, or
+ * a Lesson's attached courses. Falls back to 'free' when none are gated.
+ */
+export function cheapestTierSlug(slugs = [], tierMap = {}) {
+    const gated = slugs.filter(Boolean);
+    if (!gated.length) return 'free';
+    return gated.reduce((cheapest, slug) => {
+        const rank = tierMap[slug]?.rank ?? 0;
+        const cheapestRank = tierMap[cheapest]?.rank ?? 0;
+        return rank < cheapestRank ? slug : cheapest;
+    }, gated[0]);
+}
diff --git a/apps/web/src/utils/tierColors.js b/apps/web/src/utils/tierColors.js
new file mode 100644
index 0000000..6d1d9f0
--- /dev/null
+++ b/apps/web/src/utils/tierColors.js
@@ -0,0 +1,236 @@
+/**
+ * Official Tailwind color palette for tier categories.
+ *
+ * Each key is stored in tier_categories.color (DB).
+ * badge   — classes applied to <Badge> components
+ * panel   — bg + border classes for upsell/info panels
+ * swatch  — hex for the color picker dot in the admin UI
+ */
+export const TIER_COLOR_MAP = {
+  green: {
+    label:  "Green",
+    swatch: "#22c55e",
+    badge:  "bg-green-500 text-white border-0",
+    panel:  { bg: "bg-green-50 dark:bg-green-950/30", border: "border-green-200 dark:border-green-800" },
+  },
+  purple: {
+    label:  "Purple",
+    swatch: "#a855f7",
+    badge:  "bg-gradient-to-r from-fuchsia-600 to-purple-600 text-white border-0",
+    panel:  { bg: "bg-fuchsia-50 dark:bg-fuchsia-950/30", border: "border-fuchsia-200 dark:border-fuchsia-800" },
+  },
+  rose: {
+    label:  "Rose",
+    swatch: "#f43f5e",
+    badge:  "bg-gradient-to-r from-rose-500 to-red-600 text-white border-0",
+    panel:  { bg: "bg-rose-50 dark:bg-rose-950/30", border: "border-rose-200 dark:border-rose-800" },
+  },
+  amber: {
+    label:  "Amber",
+    swatch: "#f59e0b",
+    badge:  "bg-gradient-to-r from-amber-400 to-orange-500 text-white border-0",
+    panel:  { bg: "bg-amber-50 dark:bg-amber-950/30", border: "border-amber-200 dark:border-amber-800" },
+  },
+  sky: {
+    label:  "Sky",
+    swatch: "#0ea5e9",
+    badge:  "bg-gradient-to-r from-sky-500 to-blue-600 text-white border-0",
+    panel:  { bg: "bg-sky-50 dark:bg-sky-950/30", border: "border-sky-200 dark:border-sky-800" },
+  },
+  indigo: {
+    label:  "Indigo",
+    swatch: "#6366f1",
+    badge:  "bg-gradient-to-r from-indigo-500 to-violet-600 text-white border-0",
+    panel:  { bg: "bg-indigo-50 dark:bg-indigo-950/30", border: "border-indigo-200 dark:border-indigo-800" },
+  },
+  teal: {
+    label:  "Teal",
+    swatch: "#14b8a6",
+    badge:  "bg-gradient-to-r from-teal-500 to-emerald-600 text-white border-0",
+    panel:  { bg: "bg-teal-50 dark:bg-teal-950/30", border: "border-teal-200 dark:border-teal-800" },
+  },
+  orange: {
+    label:  "Orange",
+    swatch: "#f97316",
+    badge:  "bg-gradient-to-r from-orange-500 to-red-500 text-white border-0",
+    panel:  { bg: "bg-orange-50 dark:bg-orange-950/30", border: "border-orange-200 dark:border-orange-800" },
+  },
+  pink: {
+    label:  "Pink",
+    swatch: "#ec4899",
+    badge:  "bg-gradient-to-r from-pink-500 to-rose-500 text-white border-0",
+    panel:  { bg: "bg-pink-50 dark:bg-pink-950/30", border: "border-pink-200 dark:border-pink-800" },
+  },
+  cyan: {
+    label:  "Cyan",
+    swatch: "#06b6d4",
+    badge:  "bg-gradient-to-r from-cyan-500 to-sky-500 text-white border-0",
+    panel:  { bg: "bg-cyan-50 dark:bg-cyan-950/30", border: "border-cyan-200 dark:border-cyan-800" },
+  },
+  lime: {
+    label:  "Lime",
+    swatch: "#84cc16",
+    badge:  "bg-gradient-to-r from-lime-500 to-green-600 text-white border-0",
+    panel:  { bg: "bg-lime-50 dark:bg-lime-950/30", border: "border-lime-200 dark:border-lime-800" },
+  },
+  slate: {
+    label:  "Slate",
+    swatch: "#64748b",
+    badge:  "bg-gradient-to-r from-slate-600 to-slate-800 text-white border-0",
+    panel:  { bg: "bg-slate-50 dark:bg-slate-950/30", border: "border-slate-200 dark:border-slate-700" },
+  },
+
+  // ── Extended palette (18 more → 30 total) ───────────────────────────────────
+  red: {
+    label:  "Red",
+    swatch: "#ef4444",
+    badge:  "bg-gradient-to-r from-red-500 to-red-700 text-white border-0",
+    panel:  { bg: "bg-red-50 dark:bg-red-950/30", border: "border-red-200 dark:border-red-800" },
+  },
+  yellow: {
+    label:  "Yellow",
+    swatch: "#eab308",
+    badge:  "bg-gradient-to-r from-yellow-400 to-yellow-600 text-white border-0",
+    panel:  { bg: "bg-yellow-50 dark:bg-yellow-950/30", border: "border-yellow-200 dark:border-yellow-800" },
+  },
+  violet: {
+    label:  "Violet",
+    swatch: "#7c3aed",
+    badge:  "bg-gradient-to-r from-violet-500 to-purple-700 text-white border-0",
+    panel:  { bg: "bg-violet-50 dark:bg-violet-950/30", border: "border-violet-200 dark:border-violet-800" },
+  },
+  fuchsia: {
+    label:  "Fuchsia",
+    swatch: "#d946ef",
+    badge:  "bg-gradient-to-r from-fuchsia-500 to-pink-700 text-white border-0",
+    panel:  { bg: "bg-fuchsia-50 dark:bg-fuchsia-950/30", border: "border-fuchsia-200 dark:border-fuchsia-800" },
+  },
+  emerald: {
+    label:  "Emerald",
+    swatch: "#10b981",
+    badge:  "bg-gradient-to-r from-emerald-400 to-emerald-700 text-white border-0",
+    panel:  { bg: "bg-emerald-50 dark:bg-emerald-950/30", border: "border-emerald-200 dark:border-emerald-800" },
+  },
+  blue: {
+    label:  "Blue",
+    swatch: "#3b82f6",
+    badge:  "bg-gradient-to-r from-blue-500 to-blue-700 text-white border-0",
+    panel:  { bg: "bg-blue-50 dark:bg-blue-950/30", border: "border-blue-200 dark:border-blue-800" },
+  },
+  zinc: {
+    label:  "Zinc",
+    swatch: "#71717a",
+    badge:  "bg-gradient-to-r from-zinc-500 to-zinc-700 text-white border-0",
+    panel:  { bg: "bg-zinc-50 dark:bg-zinc-950/30", border: "border-zinc-200 dark:border-zinc-800" },
+  },
+  stone: {
+    label:  "Stone",
+    swatch: "#78716c",
+    badge:  "bg-gradient-to-r from-stone-500 to-stone-700 text-white border-0",
+    panel:  { bg: "bg-stone-50 dark:bg-stone-950/30", border: "border-stone-200 dark:border-stone-800" },
+  },
+  brown: {
+    label:  "Brown",
+    swatch: "#a16207",
+    badge:  "bg-gradient-to-r from-yellow-700 to-amber-900 text-white border-0",
+    panel:  { bg: "bg-amber-50 dark:bg-amber-950/30", border: "border-amber-300 dark:border-amber-900" },
+  },
+  gold: {
+    label:  "Gold",
+    swatch: "#ca8a04",
+    badge:  "bg-gradient-to-r from-yellow-500 to-amber-700 text-white border-0",
+    panel:  { bg: "bg-yellow-50 dark:bg-yellow-950/30", border: "border-yellow-300 dark:border-yellow-800" },
+  },
+  navy: {
+    label:  "Navy",
+    swatch: "#1e40af",
+    badge:  "bg-gradient-to-r from-blue-700 to-blue-900 text-white border-0",
+    panel:  { bg: "bg-blue-50 dark:bg-blue-950/30", border: "border-blue-300 dark:border-blue-900" },
+  },
+  forest: {
+    label:  "Forest",
+    swatch: "#166534",
+    badge:  "bg-gradient-to-r from-green-700 to-green-900 text-white border-0",
+    panel:  { bg: "bg-green-50 dark:bg-green-950/30", border: "border-green-300 dark:border-green-900" },
+  },
+  wine: {
+    label:  "Wine",
+    swatch: "#9f1239",
+    badge:  "bg-gradient-to-r from-rose-800 to-rose-950 text-white border-0",
+    panel:  { bg: "bg-rose-50 dark:bg-rose-950/30", border: "border-rose-300 dark:border-rose-900" },
+  },
+  charcoal: {
+    label:  "Charcoal",
+    swatch: "#374151",
+    badge:  "bg-gradient-to-r from-gray-600 to-gray-900 text-white border-0",
+    panel:  { bg: "bg-gray-50 dark:bg-gray-950/30", border: "border-gray-300 dark:border-gray-800" },
+  },
+  midnight: {
+    label:  "Midnight",
+    swatch: "#312e81",
+    badge:  "bg-gradient-to-r from-indigo-800 to-indigo-950 text-white border-0",
+    panel:  { bg: "bg-indigo-50 dark:bg-indigo-950/30", border: "border-indigo-300 dark:border-indigo-900" },
+  },
+  lavender: {
+    label:  "Lavender",
+    swatch: "#a78bfa",
+    badge:  "bg-gradient-to-r from-violet-400 to-violet-600 text-white border-0",
+    panel:  { bg: "bg-violet-50 dark:bg-violet-950/30", border: "border-violet-200 dark:border-violet-700" },
+  },
+  salmon: {
+    label:  "Salmon",
+    swatch: "#fca5a5",
+    badge:  "bg-gradient-to-r from-red-300 to-rose-600 text-white border-0",
+    panel:  { bg: "bg-red-50 dark:bg-red-950/30", border: "border-red-200 dark:border-red-700" },
+  },
+  mint: {
+    label:  "Mint",
+    swatch: "#6ee7b7",
+    badge:  "bg-gradient-to-r from-emerald-300 to-teal-600 text-white border-0",
+    panel:  { bg: "bg-emerald-50 dark:bg-emerald-950/30", border: "border-emerald-200 dark:border-emerald-700" },
+  },
+};
+
+/** Ordered list for the color picker UI. */
+export const TIER_COLOR_OPTIONS = Object.entries(TIER_COLOR_MAP).map(([key, val]) => ({
+  key,
+  label:  val.label,
+  swatch: val.swatch,
+}));
+
+/** Darkens (negative percent) or lightens (positive percent) a hex color. */
+export function shadeColor(hex, percent) {
+  const num = parseInt(hex.replace("#", ""), 16);
+  const amt = Math.round(2.55 * percent);
+  const clamp = (v) => Math.max(0, Math.min(255, v));
+  const r = clamp((num >> 16) + amt);
+  const g = clamp(((num >> 8) & 0x00ff) + amt);
+  const b = clamp((num & 0x0000ff) + amt);
+  return "#" + (0x1000000 + r * 0x10000 + g * 0x100 + b).toString(16).slice(1);
+}
+
+// The perceived-brightness formula below underweights blue, so these read as
+// "dark enough for white text" even though they're visually too light for it.
+const FORCE_BLACK_TEXT = new Set(["sky", "blue", "cyan", "teal"]);
+
+/** Returns "#000000" or "#ffffff", whichever reads better on top of the given hex color. */
+export function getContrastText(hex, key) {
+  if (key && FORCE_BLACK_TEXT.has(key)) return "#000000";
+  const num = parseInt(hex.replace("#", ""), 16);
+  const r = (num >> 16) & 0xff;
+  const g = (num >> 8) & 0xff;
+  const b = num & 0xff;
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.6 ? "#000000" : "#ffffff";
+}
+
+/** Fallback when a stored color key is not in the map. */
+const FALLBACK = TIER_COLOR_MAP.purple;
+
+/**
+ * Returns the color definition for a stored color key.
+ * Falls back to purple for unknown keys.
+ */
+export function getTierColor(colorKey) {
+  return TIER_COLOR_MAP[colorKey] ?? FALLBACK;
+}
diff --git a/apps/web/src/utils/timestamp.util.js b/apps/web/src/utils/timestamp.util.js
new file mode 100644
index 0000000..d0cd19a
--- /dev/null
+++ b/apps/web/src/utils/timestamp.util.js
@@ -0,0 +1,44 @@
+export function getTimestamp() {
+  const now = new Date();
+
+  const YYYY = now.getFullYear();
+  const MM = String(now.getMonth() + 1).padStart(2, "0");
+  const DD = String(now.getDate()).padStart(2, "0");
+
+  const HH = String(now.getHours()).padStart(2, "0");
+  const mm = String(now.getMinutes()).padStart(2, "0");
+  const SS = String(now.getSeconds()).padStart(2, "0");
+
+  return `${YYYY}${MM}${DD}_${HH}${mm}${SS}`;
+}
+
+export function timeAgo(ts) {
+  if (!ts) return "—";
+  const diff = Math.floor((Date.now() - new Date(ts).getTime()) / 1000);
+  if (diff < 5)   return "just now";
+  if (diff < 60)  return `${diff} sec ago`;
+  const mins = Math.floor(diff / 60);
+  if (mins < 60)  return `${mins} min${mins !== 1 ? "s" : ""} ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24)   return `${hrs} hr${hrs !== 1 ? "s" : ""} ago`;
+  const days = Math.floor(hrs / 24);
+  if (days < 7)   return `${days} day${days !== 1 ? "s" : ""} ago`;
+  const weeks = Math.floor(days / 7);
+  if (weeks < 5)  return `${weeks} week${weeks !== 1 ? "s" : ""} ago`;
+  const months = Math.floor(days / 30);
+  if (months < 12) return `${months} month${months !== 1 ? "s" : ""} ago`;
+  const years = Math.floor(days / 365);
+  return `${years} year${years !== 1 ? "s" : ""} ago`;
+}
+
+export function formatDuration (secs) {
+  if (!secs) return "0 min";
+  const h = Math.floor(secs / 3600);
+  const m = Math.floor((secs % 3600) / 60);
+  const s = secs % 60;
+  const parts = [];
+  if (h) parts.push(`${h} hr`);
+  if (m) parts.push(`${m} min${m !== 1 ? "s" : ""}`);
+  if (!h && !m && s) parts.push(`${s} sec${s !== 1 ? "s" : ""}`);
+  return parts.join(" ");
+};
\ No newline at end of file
diff --git a/apps/web/vercel.json b/apps/web/vercel.json
new file mode 100644
index 0000000..4acab45
--- /dev/null
+++ b/apps/web/vercel.json
@@ -0,0 +1,5 @@
+{
+  "rewrites": [
+    { "source": "/(.*)", "destination": "/index.html" }
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/vite.config.js b/apps/web/vite.config.js
new file mode 100644
index 0000000..a5caa6a
--- /dev/null
+++ b/apps/web/vite.config.js
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from "path"
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3024',
+        changeOrigin: true,
+      },
+    },
+  },
+})
diff --git a/docker-compose.yml b/docker-compose.yml
index d3a5086..d40f757 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -2,9 +2,9 @@
 #  $APP_NAME — Docker Compose (self-hosted)
 #
 #  Prerequisites:
-#    1. Backend  → cp .env-production .env  and fill in all CHANGE_ME values
-#    2. Frontend → cd ../new_starr_app && cp .env.example .env → fill in values
-#                  → npm run build   (must run BEFORE building the Docker image)
+#    1. Backend  → cp apps/api/.env-production apps/api/.env  and fill in all CHANGE_ME values
+#    2. Frontend → cd apps/web && cp .env.example .env → fill in values
+#                  → pnpm --filter web build   (must run BEFORE building the Docker image)
 #    3. Run: docker compose up -d
 #
 #  ⚠  SSL NOTE — db.config.js and the session store both require SSL from
@@ -30,10 +30,12 @@ services:
 
   # ── Backend (Express) ───────────────────────────────────────────────────────
   backend:
-    build: .
+    build:
+      context: .
+      dockerfile: apps/api/Dockerfile
     ports:
       - "3024:3024"
-    env_file: .env
+    env_file: apps/api/.env
     depends_on:
       postgres:
         condition: service_healthy
@@ -44,9 +46,9 @@ services:
     restart: unless-stopped
 
   # ── Frontend (React / Nginx) ─────────────────────────────────────────────────
-  # Run `npm run build` inside ../new_starr_app before starting this service.
+  # Run `pnpm --filter web build` before starting this service.
   frontend:
-    build: ../new_starr_app
+    build: ./apps/web
     ports:
       - "80:80"
     restart: unless-stopped
@@ -86,13 +88,13 @@ services:
     image: dxflrs/garage
     entrypoint: ["/bin/sh", "/garage-init.sh"]
     volumes:
-      - ./config/garage.toml:/etc/garage.toml:ro
-      - ./scripts/garage-init.sh:/garage-init.sh:ro
+      - ./apps/api/config/garage.toml:/etc/garage.toml:ro
+      - ./apps/api/scripts/garage-init.sh:/garage-init.sh:ro
       - garage_meta:/var/lib/garage/meta
       - garage_data:/var/lib/garage/data
     ports:
       - "3900:3900"
-    env_file: .env
+    env_file: apps/api/.env
     healthcheck:
       test: ["CMD-SHELL", "test -f /var/lib/garage/meta/.ready && garage status > /dev/null 2>&1"]
       interval: 10s
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index eabb9a3..0000000
--- a/package-lock.json
+++ /dev/null
@@ -1,8771 +0,0 @@
-{
-  "name": "star-auth-system",
-  "version": "1.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "star-auth-system",
-      "version": "1.0.0",
-      "dependencies": {
-        "@aws-sdk/client-s3": "^3.1068.0",
-        "@aws-sdk/lib-storage": "^3.1085.0",
-        "@aws-sdk/s3-request-presigner": "^3.1068.0",
-        "axios": "^1.16.0",
-        "bcryptjs": "^2.4.3",
-        "connect-pg-simple": "^10.0.0",
-        "cookie-parser": "^1.4.6",
-        "cors": "^2.8.5",
-        "csurf": "^1.11.0",
-        "currency-codes": "^2.2.0",
-        "dotenv": "^16.0.3",
-        "express": "^4.18.2",
-        "express-rate-limit": "^6.10.0",
-        "express-session": "^1.17.3",
-        "express-validator": "^7.0.1",
-        "ffprobe-static": "^3.1.0",
-        "fluent-ffmpeg": "^2.1.3",
-        "form-data": "^4.0.5",
-        "google-auth-library": "^9.0.0",
-        "http-proxy-middleware": "^4.0.0",
-        "jsonwebtoken": "^9.0.1",
-        "multer": "^2.1.1",
-        "node-cron": "^4.2.1",
-        "nodemailer": "^6.9.5",
-        "path": "^0.12.7",
-        "pg": "^8.11.3",
-        "pg-hstore": "^2.3.4",
-        "rate-limit-redis": "^4.0.0",
-        "redis": "^4.6.7",
-        "sequelize": "^6.32.1",
-        "sharp": "^0.35.3",
-        "ua-parser-js": "^2.0.10",
-        "uuid": "^9.0.0"
-      },
-      "devDependencies": {
-        "jest": "^30.4.2",
-        "nodemon": "^3.0.1",
-        "sequelize-cli": "^6.6.5"
-      }
-    },
-    "node_modules/@aws-sdk/checksums": {
-      "version": "3.1000.16",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/checksums/-/checksums-3.1000.16.tgz",
-      "integrity": "sha512-EKnvkXSmz3IpA99tCNuI+dLFXyZyClSm8zns9sB/elvkU+MTuomAs6toJMPMBf98/fICG/urXDkzGz0/c3yyAQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/core": "^3.975.1",
-        "@aws-sdk/types": "^3.974.0",
-        "@smithy/core": "^3.29.2",
-        "@smithy/types": "^4.16.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/client-s3": {
-      "version": "3.1085.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/client-s3/-/client-s3-3.1085.0.tgz",
-      "integrity": "sha512-O0xe8sR50AYkwxlvRRsV0qytEO2dtXQTQ1CF3YBBdE5xtVkbu27H0vGa1mjQi1/+fbYM80AWEIPai5jZmXyubw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/checksums": "^3.1000.16",
-        "@aws-sdk/core": "^3.975.1",
-        "@aws-sdk/credential-provider-node": "^3.972.66",
-        "@aws-sdk/middleware-sdk-s3": "^3.972.62",
-        "@aws-sdk/signature-v4-multi-region": "^3.996.39",
-        "@aws-sdk/types": "^3.974.0",
-        "@smithy/core": "^3.29.2",
-        "@smithy/fetch-http-handler": "^5.6.4",
-        "@smithy/node-http-handler": "^4.9.4",
-        "@smithy/types": "^4.16.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/core": {
-      "version": "3.975.1",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/core/-/core-3.975.1.tgz",
-      "integrity": "sha512-8qh/6EYb7hl/ZwVfQufhbMEZs1gQIc7GbdrIf4eprQJ7cv042+74nE6l3YDfyWNzb9iPXb8fRyYSHkNIk5eE6Q==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/types": "^3.974.0",
-        "@aws-sdk/xml-builder": "^3.972.34",
-        "@aws/lambda-invoke-store": "^0.3.0",
-        "@smithy/core": "^3.29.2",
-        "@smithy/signature-v4": "^5.6.3",
-        "@smithy/types": "^4.16.0",
-        "bowser": "^2.11.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/credential-provider-env": {
-      "version": "3.972.57",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-env/-/credential-provider-env-3.972.57.tgz",
-      "integrity": "sha512-1RfJaF7SW1TOnvNGU7kaYjwUf5H3sfm+synGH1bHhRlqcnxCt3szebH3dmKEyY4tuGcbQ6ffzUT89cRitBV8OQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/core": "^3.975.1",
-        "@aws-sdk/types": "^3.974.0",
-        "@smithy/core": "^3.29.2",
-        "@smithy/types": "^4.16.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/credential-provider-http": {
-      "version": "3.972.59",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-http/-/credential-provider-http-3.972.59.tgz",
-      "integrity": "sha512-sRCkpTiFnCdQvuaRVjQ6SVoHu6i7RUpurVo1c4F81HWhPvUJ7Wdp5MNtSdX1O29CNXc8em3O5m52hCjVtAD9SA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/core": "^3.975.1",
-        "@aws-sdk/types": "^3.974.0",
-        "@smithy/core": "^3.29.2",
-        "@smithy/fetch-http-handler": "^5.6.4",
-        "@smithy/node-http-handler": "^4.9.4",
-        "@smithy/types": "^4.16.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/credential-provider-ini": {
-      "version": "3.973.1",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-ini/-/credential-provider-ini-3.973.1.tgz",
-      "integrity": "sha512-6d8H6ZAh3ZPKZ6fe1nG2OWeZEZPtt9ravoD1dezPdPtsSkJRoxGAnFSHwKT3E/Te6fHE30zRzjV6TD12rvF6yQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/core": "^3.975.1",
-        "@aws-sdk/credential-provider-env": "^3.972.57",
-        "@aws-sdk/credential-provider-http": "^3.972.59",
-        "@aws-sdk/credential-provider-login": "^3.972.63",
-        "@aws-sdk/credential-provider-process": "^3.972.57",
-        "@aws-sdk/credential-provider-sso": "^3.973.1",
-        "@aws-sdk/credential-provider-web-identity": "^3.972.63",
-        "@aws-sdk/nested-clients": "^3.997.31",
-        "@aws-sdk/types": "^3.974.0",
-        "@smithy/core": "^3.29.2",
-        "@smithy/credential-provider-imds": "^4.4.7",
-        "@smithy/types": "^4.16.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/credential-provider-login": {
-      "version": "3.972.63",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-login/-/credential-provider-login-3.972.63.tgz",
-      "integrity": "sha512-GREWRrMj0XnNKMaVa/Mauoaui26qBEHu71WWqXbwZOu/jFQOnPZjTf7u0KtGKC8VGa6VUs9kDWGgocrKNLS9vw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/core": "^3.975.1",
-        "@aws-sdk/nested-clients": "^3.997.31",
-        "@aws-sdk/types": "^3.974.0",
-        "@smithy/core": "^3.29.2",
-        "@smithy/types": "^4.16.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/credential-provider-node": {
-      "version": "3.972.66",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-node/-/credential-provider-node-3.972.66.tgz",
-      "integrity": "sha512-f+qjRXZpz7sgzbc4QB+6nLKfyKFgRRXzWdXbsKPv/VhVRyHsDyq4yBWC/B75BAJpFIcUeI2XR/3gdWJ677zB4A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/credential-provider-env": "^3.972.57",
-        "@aws-sdk/credential-provider-http": "^3.972.59",
-        "@aws-sdk/credential-provider-ini": "^3.973.1",
-        "@aws-sdk/credential-provider-process": "^3.972.57",
-        "@aws-sdk/credential-provider-sso": "^3.973.1",
-        "@aws-sdk/credential-provider-web-identity": "^3.972.63",
-        "@aws-sdk/types": "^3.974.0",
-        "@smithy/core": "^3.29.2",
-        "@smithy/credential-provider-imds": "^4.4.7",
-        "@smithy/types": "^4.16.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/credential-provider-process": {
-      "version": "3.972.57",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-process/-/credential-provider-process-3.972.57.tgz",
-      "integrity": "sha512-TiVQhuU0pbhIZAUZacbPHMyzrIdiH+lnx+PMY/Pu/b93dJrq3wdZwzUJ0TPpvNxaqbHsxJvQZW3/h/beLiKq7Q==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/core": "^3.975.1",
-        "@aws-sdk/types": "^3.974.0",
-        "@smithy/core": "^3.29.2",
-        "@smithy/types": "^4.16.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/credential-provider-sso": {
-      "version": "3.973.1",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-sso/-/credential-provider-sso-3.973.1.tgz",
-      "integrity": "sha512-3foTZUJ4821Ij60X7K3NJroygiZLnbBmarN+T//O2cjkISan90zElN3NBmgSlDrTQ7Gs6z/yO8V7h60QNcDZHQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/core": "^3.975.1",
-        "@aws-sdk/nested-clients": "^3.997.31",
-        "@aws-sdk/token-providers": "3.1083.0",
-        "@aws-sdk/types": "^3.974.0",
-        "@smithy/core": "^3.29.2",
-        "@smithy/types": "^4.16.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/credential-provider-web-identity": {
-      "version": "3.972.63",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/credential-provider-web-identity/-/credential-provider-web-identity-3.972.63.tgz",
-      "integrity": "sha512-8qZLFhM69eKcS37m459ctPR05Qimycm/74OPVioe6wNZabMT54GYhwBju0+J656RkMasNSawWQu+c8CmBe3TUQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/core": "^3.975.1",
-        "@aws-sdk/nested-clients": "^3.997.31",
-        "@aws-sdk/types": "^3.974.0",
-        "@smithy/core": "^3.29.2",
-        "@smithy/types": "^4.16.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/lib-storage": {
-      "version": "3.1085.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/lib-storage/-/lib-storage-3.1085.0.tgz",
-      "integrity": "sha512-S+yCGIMxQ5Zs2A5ZDdYfXwOxu5kKjBaCQVOxp6+mnwCQYXUNkBD/aKCnW1eniMTavzz3YidhD5eTFpDlcUv2gQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/core": "^3.29.2",
-        "@smithy/types": "^4.16.0",
-        "buffer": "5.6.0",
-        "events": "3.3.0",
-        "stream-browserify": "3.0.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      },
-      "peerDependencies": {
-        "@aws-sdk/client-s3": "^3.1085.0"
-      }
-    },
-    "node_modules/@aws-sdk/middleware-sdk-s3": {
-      "version": "3.972.62",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/middleware-sdk-s3/-/middleware-sdk-s3-3.972.62.tgz",
-      "integrity": "sha512-k8JJwYXVYlOOjWnPZDThQS1xDFJgi5Dokt73qFlDtrZAbdcint5aIdjB9XgJAAQVP5OoqcefQmh1FYXiPpvsvw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/core": "^3.975.1",
-        "@aws-sdk/signature-v4-multi-region": "^3.996.39",
-        "@aws-sdk/types": "^3.974.0",
-        "@smithy/core": "^3.29.2",
-        "@smithy/types": "^4.16.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/nested-clients": {
-      "version": "3.997.31",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/nested-clients/-/nested-clients-3.997.31.tgz",
-      "integrity": "sha512-BDHTpwcsZHEBNEJzOg/B1BkFYJxAXY50dau/NyVWs3d51F0WgIUGSWZot/Os+N3KpDhXeaXnz37mWffAvduREw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/core": "^3.975.1",
-        "@aws-sdk/signature-v4-multi-region": "^3.996.39",
-        "@aws-sdk/types": "^3.974.0",
-        "@smithy/core": "^3.29.2",
-        "@smithy/fetch-http-handler": "^5.6.4",
-        "@smithy/node-http-handler": "^4.9.4",
-        "@smithy/types": "^4.16.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/s3-request-presigner": {
-      "version": "3.1068.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/s3-request-presigner/-/s3-request-presigner-3.1068.0.tgz",
-      "integrity": "sha512-XTUoaBQH3pUlegqdoo7vkrOvlcRhSz/EO0/JYy9qKz4jdsOnPUlPY0p+rKTl27F91Gjgip8OXopiOFxVeN3Yvg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/core": "^3.974.20",
-        "@aws-sdk/signature-v4-multi-region": "^3.996.34",
-        "@aws-sdk/types": "^3.973.12",
-        "@smithy/core": "^3.24.6",
-        "@smithy/types": "^4.14.3",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/signature-v4-multi-region": {
-      "version": "3.996.39",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/signature-v4-multi-region/-/signature-v4-multi-region-3.996.39.tgz",
-      "integrity": "sha512-8+srXqYIF8KYMLC4FxMLEM5Ek7kUNibJu1R4m8/fUhhNYIZZz26oGtKkCr8I/HiG2fFQxBvaGgQZT4/mqRCSnA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/types": "^3.974.0",
-        "@smithy/signature-v4": "^5.6.3",
-        "@smithy/types": "^4.16.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/token-providers": {
-      "version": "3.1083.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/token-providers/-/token-providers-3.1083.0.tgz",
-      "integrity": "sha512-s0woKnxuHrExLc5L2ArIH5BMkbonHPtt+5hSBM8oknp9M6QTuUmmAmJ2E0EdzCGONrO+8+ADPqvv6UX0nNcc7A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@aws-sdk/core": "^3.975.1",
-        "@aws-sdk/nested-clients": "^3.997.31",
-        "@aws-sdk/types": "^3.974.0",
-        "@smithy/core": "^3.29.2",
-        "@smithy/types": "^4.16.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/types": {
-      "version": "3.974.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/types/-/types-3.974.0.tgz",
-      "integrity": "sha512-QIBrw90CDm4O0UaIIzkU6DrFdeJzEb2Va5EPEVpyldj6sHJxB6cshhStJuhZxk3wR3PmjJlYsjPmY1kNb+KGBg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/types": "^4.16.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/xml-builder": {
-      "version": "3.972.34",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/xml-builder/-/xml-builder-3.972.34.tgz",
-      "integrity": "sha512-wHhWL1y7sN3enBA8POrPpQM5jCcmu2ozyhbRei4c8OjVcEaEs6yLucLa/pla457ggS/ysuy7bosagz3HaJkZXA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/types": "^4.16.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      }
-    },
-    "node_modules/@aws/lambda-invoke-store": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@aws/lambda-invoke-store/-/lambda-invoke-store-0.3.0.tgz",
-      "integrity": "sha512-sl4Bm6yiMNYrZKkqqDFWN0UfnWhlS8ivKxrYl+6t0gCLrqr8y3B2IqZZbFRkfaVVp7C/baApyh71P+LeE1A2sQ==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@babel/code-frame": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
-      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.29.7",
-        "js-tokens": "^4.0.0",
-        "picocolors": "^1.1.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/compat-data": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
-      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/core": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
-      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.29.7",
-        "@babel/generator": "^7.29.7",
-        "@babel/helper-compilation-targets": "^7.29.7",
-        "@babel/helper-module-transforms": "^7.29.7",
-        "@babel/helpers": "^7.29.7",
-        "@babel/parser": "^7.29.7",
-        "@babel/template": "^7.29.7",
-        "@babel/traverse": "^7.29.7",
-        "@babel/types": "^7.29.7",
-        "@jridgewell/remapping": "^2.3.5",
-        "convert-source-map": "^2.0.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.3",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/babel"
-      }
-    },
-    "node_modules/@babel/core/node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@babel/core/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@babel/core/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/@babel/generator": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz",
-      "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.29.7",
-        "@babel/types": "^7.29.7",
-        "@jridgewell/gen-mapping": "^0.3.12",
-        "@jridgewell/trace-mapping": "^0.3.28",
-        "jsesc": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
-      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/compat-data": "^7.29.7",
-        "@babel/helper-validator-option": "^7.29.7",
-        "browserslist": "^4.24.0",
-        "lru-cache": "^5.1.1",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "yallist": "^3.0.2"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets/node_modules/yallist": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/@babel/helper-globals": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
-      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-imports": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
-      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.29.7",
-        "@babel/types": "^7.29.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-transforms": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
-      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.29.7",
-        "@babel/helper-validator-identifier": "^7.29.7",
-        "@babel/traverse": "^7.29.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz",
-      "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-string-parser": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
-      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
-      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-option": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
-      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helpers": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
-      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/template": "^7.29.7",
-        "@babel/types": "^7.29.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/parser": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
-      "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.29.7"
-      },
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-async-generators": {
-      "version": "7.8.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
-      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-bigint": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
-      "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-class-properties": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
-      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.12.13"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-class-static-block": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
-      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-import-attributes": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.29.7.tgz",
-      "integrity": "sha512-zGYcYfq/WmZ4V+kBIXQon9dSSc8ircGZqw9ZaNhhGj9nZkeBu1jHLBDQqYYi5WA9uawvA2sIMbry2nCFhf5Djg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.29.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-import-meta": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
-      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-json-strings": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
-      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-jsx": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.29.7.tgz",
-      "integrity": "sha512-TSu8+mHCoEaaCDEZ0I3+6mvTBYR4PCxQwf2z9/r5Tbztv6NaLR3B9thGTTxX2WGuGHJqRiAbKPeGTJ5XWXVg6A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.29.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
-      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
-      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-numeric-separator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
-      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-object-rest-spread": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
-      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-optional-catch-binding": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
-      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-optional-chaining": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
-      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-private-property-in-object": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
-      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-top-level-await": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
-      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-typescript": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.29.7.tgz",
-      "integrity": "sha512-ngr+82Sh0xMz25TPCZi+nC2iTzjfCdWS2ONXTp/PtSCHCgaCNBpdMqgvJ2ccdLlClVZ7sisIgB914j/JFe+RZA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.29.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/template": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
-      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.29.7",
-        "@babel/parser": "^7.29.7",
-        "@babel/types": "^7.29.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/traverse": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz",
-      "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.29.7",
-        "@babel/generator": "^7.29.7",
-        "@babel/helper-globals": "^7.29.7",
-        "@babel/parser": "^7.29.7",
-        "@babel/template": "^7.29.7",
-        "@babel/types": "^7.29.7",
-        "debug": "^4.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/traverse/node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@babel/traverse/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@babel/types": {
-      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
-      "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.29.7",
-        "@babel/helper-validator-identifier": "^7.29.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@bcoe/v8-coverage": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
-      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@emnapi/core": {
-      "version": "1.11.2",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.2.tgz",
-      "integrity": "sha512-TC8MkTuZUtcTSiFeuC0ksCh9QIJ5+F21MvZ4Wn4ORfYaFJ/0dsiudv5tVkejgwZlwQ39jL9WWDe2lz8x0WglOA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@emnapi/wasi-threads": "1.2.2",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@emnapi/runtime": {
-      "version": "1.11.2",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.2.tgz",
-      "integrity": "sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@emnapi/wasi-threads": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
-      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@img/colour": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
-      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.35.3.tgz",
-      "integrity": "sha512-RMnFX7YQsMoh7lWfcM4NEHHymBX/rLuKNPVM84XE9ONPcaSCDgE7CHIHpSgPcO2xcRthgBy1HfNO319mwhIAkg==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=20.9.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.3.2"
-      }
-    },
-    "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.35.3.tgz",
-      "integrity": "sha512-Xo+5uFBtLN0BKqieTxiFzFPQAUlBbbH5iBKyRX/z1JrbnYsHTfKJnUfL8+p2TPXr1pXqao4eeL4Rl144uDpK9w==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=20.9.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.3.2"
-      }
-    },
-    "node_modules/@img/sharp-freebsd-wasm32": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-freebsd-wasm32/-/sharp-freebsd-wasm32-0.35.3.tgz",
-      "integrity": "sha512-lUxcqWIj2wMQ9BrwNjngcr1gWUr5xgaGThBRqPPalIC2n67Cqj1uPh8NnA/ZhAg8hUbKl+kVHKwgUIwe6ZYPrg==",
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "dependencies": {
-        "@img/sharp-wasm32": "0.35.3"
-      },
-      "engines": {
-        "node": ">=20.9.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.3.2.tgz",
-      "integrity": "sha512-9J6ypZFpQBj4YnePGoq/S38w6nz+vqg5WZLrLGY4YuSemdMq47GMLBPO42MzwdGwpg/agZ7xzZcFHa48xlywfg==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.3.2.tgz",
-      "integrity": "sha512-m2pW1n6cns9VaubNwsZ+c3CRYjxNQWgJ5gPlnL1nbBcpkBvFm6SCFN5o0psFHI8w9n11NKhFkeEDns98tiqbEw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.3.2.tgz",
-      "integrity": "sha512-1eMLzy92I4J6rmi4mAT8yC3HxOtniyGELlzGbNMLLeqe052ahFQ0h6LFq+lh5DsDIdYViIDst08abvSbcEdLXQ==",
-      "cpu": [
-        "arm"
-      ],
-      "libc": [
-        "glibc"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.3.2.tgz",
-      "integrity": "sha512-dqVSFynCox4C/J8kT16V7SIFAns0IjgLwkvYT7p8LQVmJ5OS5b6tI9IGflxTeuBS//zXeFIUbwt5dwxyZ17cnA==",
-      "cpu": [
-        "arm64"
-      ],
-      "libc": [
-        "glibc"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-ppc64": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.3.2.tgz",
-      "integrity": "sha512-3z0NHDxD6n5I9gc05U1eW1AyRm+Gznzq3naMrthPNqE6oYykcogW0l/jfpJdjYnuNl8R7yI9pNbE1XiUeyq0Aw==",
-      "cpu": [
-        "ppc64"
-      ],
-      "libc": [
-        "glibc"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-riscv64": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.3.2.tgz",
-      "integrity": "sha512-bsb4rI+NldGOsXuej2r8OdSS8+zXDVaCWxyWrcv6kneTOlgAHtZABRzBBCwdsPiD90J4myNJuHpg6kA20ImW/w==",
-      "cpu": [
-        "riscv64"
-      ],
-      "libc": [
-        "glibc"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.3.2.tgz",
-      "integrity": "sha512-/ABshyj8gCpyIrNXnHn4LorDJ0HHm1VhXPBlxZ8zAtfVPAaSafXPGn+sUSIRiwaSBy0mmFjSjiXI5mkcwdChKQ==",
-      "cpu": [
-        "s390x"
-      ],
-      "libc": [
-        "glibc"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.3.2.tgz",
-      "integrity": "sha512-ITPEtgffGJ0S6G9dRyw/366tJQqFRcHWPHhC+Stpg3Z8AEMrDrTr2lhdz4f/Y/HMbRh//7Z5mBzEpVdi62Oc3w==",
-      "cpu": [
-        "x64"
-      ],
-      "libc": [
-        "glibc"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.3.2.tgz",
-      "integrity": "sha512-zE9EdiUzUmg5mDT5a1rk5fYJ6GWPloTwWBYDS14naqHsL+EaMpDj1AWnpLgh3u0YCORv2Tt50wrcrpYqkP97Kw==",
-      "cpu": [
-        "arm64"
-      ],
-      "libc": [
-        "musl"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.3.2.tgz",
-      "integrity": "sha512-m0lrLiUt+lBYnCFr8qV/65yMR4E/c7/wf78I5eKTdkEakFAlZ9QlzEM3QIhhAwVeUhLAHLcCq7a7Vszq/oFNZQ==",
-      "cpu": [
-        "x64"
-      ],
-      "libc": [
-        "musl"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-linux-arm": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.35.3.tgz",
-      "integrity": "sha512-affVWCTLooy8TSxbDx2qkzuDeaWLNVBA+P//FNBirHsXpP2fuBhk5AuboYUnrDnzoXes8GFjpTx0SBFOCRg+FA==",
-      "cpu": [
-        "arm"
-      ],
-      "libc": [
-        "glibc"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=20.9.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.3.2"
-      }
-    },
-    "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.35.3.tgz",
-      "integrity": "sha512-QgKDspHPnrU+GQ55XPhGwyhC8acLVOOSyAvo1oVfFmrIXLkDNmGWzAfDZ4xK8oSA1qBQrALcHX0G5UZni/SuFQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "libc": [
-        "glibc"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=20.9.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.3.2"
-      }
-    },
-    "node_modules/@img/sharp-linux-ppc64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.35.3.tgz",
-      "integrity": "sha512-sMd8rDxmpLOwv/7N44klFjOD5DUO7FLdjiXDI0hoxYaf7Ar262dQIEkosE98bps+5HPLtp/EvNqeqQtOycP/IA==",
-      "cpu": [
-        "ppc64"
-      ],
-      "libc": [
-        "glibc"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=20.9.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-ppc64": "1.3.2"
-      }
-    },
-    "node_modules/@img/sharp-linux-riscv64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.35.3.tgz",
-      "integrity": "sha512-0Eob78yjlYPfL5vMNWAW55l3R9Y6BQS/gOfe0ZcP9mEz9ohhKSt4im1hayiknXgf8AWrFqMvJcKIdmLmEe7yeQ==",
-      "cpu": [
-        "riscv64"
-      ],
-      "libc": [
-        "glibc"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=20.9.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-riscv64": "1.3.2"
-      }
-    },
-    "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.35.3.tgz",
-      "integrity": "sha512-KgAxQ0DxpNOq1rG2t5cgTgShJFGSuU7XO45cqC+1NVOuZnP6tlgZRuSYOfNupGkHID0o3cJOsw4DVeJpMovcGw==",
-      "cpu": [
-        "s390x"
-      ],
-      "libc": [
-        "glibc"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=20.9.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.3.2"
-      }
-    },
-    "node_modules/@img/sharp-linux-x64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.35.3.tgz",
-      "integrity": "sha512-8pqvxubL2PGdhlPy6GLqzDYMUjyRmKAwKHYKixpdJYBUK7PJ0C029XdsnpFIdgRZG68fZiGdHVWcKPvtiPB4cA==",
-      "cpu": [
-        "x64"
-      ],
-      "libc": [
-        "glibc"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=20.9.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.3.2"
-      }
-    },
-    "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.35.3.tgz",
-      "integrity": "sha512-Vz0iQjzzcSX3HCbfwFfCSG/9SCIqyO0mH2sXyiHaAYfBk0cRsCWXRyQYX0ovCK/PAQBbTzQ0dsPQHh5MAFL59w==",
-      "cpu": [
-        "arm64"
-      ],
-      "libc": [
-        "musl"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=20.9.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.3.2"
-      }
-    },
-    "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.35.3.tgz",
-      "integrity": "sha512-6O1NPKcDVj9QEdg7Hx549EX8U0rp6yXQERqru6yRN7fGBn32UvIRJUlWnk+8xDCiG76hXVBbX82NZ/ZKr0euIg==",
-      "cpu": [
-        "x64"
-      ],
-      "libc": [
-        "musl"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=20.9.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.3.2"
-      }
-    },
-    "node_modules/@img/sharp-wasm32": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.35.3.tgz",
-      "integrity": "sha512-cZ0XkcYGpHZkqW6iCkqTcmUC0CD9DhD5d/qeZlZkfRBn6GnHniZXLUo5+9xw8Iv76YE6LQFN9YNBlKREcCG76w==",
-      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/runtime": "^1.11.1"
-      },
-      "engines": {
-        "node": ">=20.9.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-webcontainers-wasm32": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-webcontainers-wasm32/-/sharp-webcontainers-wasm32-0.35.3.tgz",
-      "integrity": "sha512-2rnq7bX3NzeR2T4YWgz8qiG4h3TSdMe+vN1iQXpJleSJ3SM5zQ8Fy2SyyXAWlbxpEZ2Y+Z4u1BePgJEYbSy80Q==",
-      "cpu": [
-        "wasm32"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "dependencies": {
-        "@img/sharp-wasm32": "0.35.3"
-      },
-      "engines": {
-        "node": ">=20.9.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-win32-arm64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.35.3.tgz",
-      "integrity": "sha512-4bPwFdMbeC4JQ8L8LOyWp6nsHcboP5fxkp6iPOXz2Vg49R42TuMs2whkJ5OAP4/Ul035qOzy0AecOF9VOscn4w==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=20.9.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.35.3.tgz",
-      "integrity": "sha512-r53mXsBN6lFUDiST764SvgwUdHAqM4rPAiDzAmf4fLoB6X/rkfyTrLCg6+g17wJJiCmB3JYgHuUldCWUIRFSXw==",
-      "cpu": [
-        "ia32"
-      ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": "^20.9.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-win32-x64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.35.3.tgz",
-      "integrity": "sha512-D4y1vNeZrIIJCN+uHaWVtH86B+aCrdMYYjicy9pXHvbGZeGYLLSd3wdVuC37FxVXlU1ARsk84eKWfWMXGYEqvA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=20.9.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@istanbuljs/load-nyc-config": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
-      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "camelcase": "^5.3.1",
-        "find-up": "^4.1.0",
-        "get-package-type": "^0.1.0",
-        "js-yaml": "^3.13.1",
-        "resolve-from": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@istanbuljs/schema": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.6.tgz",
-      "integrity": "sha512-+Sg6GCR/wy1oSmQDFq4LQDAhm3ETKnorxN+y5nbLULOR3P0c14f2Wurzj3/xqPXtasLFfHd5iRFQ7AJt4KH2cw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@jest/console": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/@jest/console/-/console-30.4.1.tgz",
-      "integrity": "sha512-v3bhyxUh9Hgmo5p6hAOXe14/R3ZxZDOsvHleh4B07z3m/x4/ngPUXEm9XwK4sF4u+f+P2ORb0Ge+MgpaqRMVDA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "30.4.1",
-        "@types/node": "*",
-        "chalk": "^4.1.2",
-        "jest-message-util": "30.4.1",
-        "jest-util": "30.4.1",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@jest/core": {
-      "version": "30.4.2",
-      "resolved": "https://registry.npmjs.org/@jest/core/-/core-30.4.2.tgz",
-      "integrity": "sha512-TZJA6cPJUFxoWhxaLo8t0VX/MZX2wPWr0uIDvLSHIvN4gu9h02vSzqI2kBADG1ExqQlC+cY09xKMSreivvrChQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/console": "30.4.1",
-        "@jest/pattern": "30.4.0",
-        "@jest/reporters": "30.4.1",
-        "@jest/test-result": "30.4.1",
-        "@jest/transform": "30.4.1",
-        "@jest/types": "30.4.1",
-        "@types/node": "*",
-        "ansi-escapes": "^4.3.2",
-        "chalk": "^4.1.2",
-        "ci-info": "^4.2.0",
-        "exit-x": "^0.2.2",
-        "fast-json-stable-stringify": "^2.1.0",
-        "graceful-fs": "^4.2.11",
-        "jest-changed-files": "30.4.1",
-        "jest-config": "30.4.2",
-        "jest-haste-map": "30.4.1",
-        "jest-message-util": "30.4.1",
-        "jest-regex-util": "30.4.0",
-        "jest-resolve": "30.4.1",
-        "jest-resolve-dependencies": "30.4.2",
-        "jest-runner": "30.4.2",
-        "jest-runtime": "30.4.2",
-        "jest-snapshot": "30.4.1",
-        "jest-util": "30.4.1",
-        "jest-validate": "30.4.1",
-        "jest-watcher": "30.4.1",
-        "pretty-format": "30.4.1",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      },
-      "peerDependencies": {
-        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
-      },
-      "peerDependenciesMeta": {
-        "node-notifier": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@jest/diff-sequences": {
-      "version": "30.4.0",
-      "resolved": "https://registry.npmjs.org/@jest/diff-sequences/-/diff-sequences-30.4.0.tgz",
-      "integrity": "sha512-zOpzlfUs45l6u7jm39qr87JCHUDsaeCtvL+kQe/Vn9jSnRB4/5IPXISm0h9I1vZW/o00Kn4UTJ2MOlhnUGwv3g==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@jest/environment": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-30.4.1.tgz",
-      "integrity": "sha512-AK9yNRqgKxiabqMoe4oW+3/TSSeV8vkdC7BGaxZdU0AFXfOpofTLqdru2GXKZghP3sdgwE9XXpnVwfZ8JnFV4w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/fake-timers": "30.4.1",
-        "@jest/types": "30.4.1",
-        "@types/node": "*",
-        "jest-mock": "30.4.1"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@jest/expect": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/@jest/expect/-/expect-30.4.1.tgz",
-      "integrity": "sha512-ginrj6TMgh2GshLUGCjO94Ptx9HhdZA/I6A9iUfyeLKFtdAjnKzHDgzgP9HYQgbxM1lbXScQ2eUBz2lGeVDPWA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "expect": "30.4.1",
-        "jest-snapshot": "30.4.1"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@jest/expect-utils": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-30.4.1.tgz",
-      "integrity": "sha512-ZBn5CglH8fBsQsvs4VWNzD4aWfUYks+IdOOQU3MEK71ol/BcVm+P+rtb1KpiFBpSWSCE27uOahyyf1vfqOVbcQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/get-type": "30.1.0"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@jest/fake-timers": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-30.4.1.tgz",
-      "integrity": "sha512-iW5umdmfPeWzehrVhugFQZqCchSCud5S1l2YT0O9ZhjRR0ExclANDZkiSBwzqtnlOn0J1JXvO+HZ6rkuyOVOgQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "30.4.1",
-        "@sinonjs/fake-timers": "^15.4.0",
-        "@types/node": "*",
-        "jest-message-util": "30.4.1",
-        "jest-mock": "30.4.1",
-        "jest-util": "30.4.1"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@jest/get-type": {
-      "version": "30.1.0",
-      "resolved": "https://registry.npmjs.org/@jest/get-type/-/get-type-30.1.0.tgz",
-      "integrity": "sha512-eMbZE2hUnx1WV0pmURZY9XoXPkUYjpc55mb0CrhtdWLtzMQPFvu/rZkTLZFTsdaVQa+Tr4eWAteqcUzoawq/uA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@jest/globals": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-30.4.1.tgz",
-      "integrity": "sha512-ZbuY4cmXC8DkxYjfvT2DbcHWL2T6vmsMhXCDcmTB2T0y0gaezBI77ufq5ZAIdcRkYZ7NEQEDg1xFeKbxUJ5v5Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/environment": "30.4.1",
-        "@jest/expect": "30.4.1",
-        "@jest/types": "30.4.1",
-        "jest-mock": "30.4.1"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@jest/pattern": {
-      "version": "30.4.0",
-      "resolved": "https://registry.npmjs.org/@jest/pattern/-/pattern-30.4.0.tgz",
-      "integrity": "sha512-RAWn3+f9u8BsHijKJ71uHcFp6vmyEt6VvoWXkl6hKF3qVIuWNmudVjg12DlBPGup/frIl5UcUlH5HfEuvHpEXg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*",
-        "jest-regex-util": "30.4.0"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@jest/reporters": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-30.4.1.tgz",
-      "integrity": "sha512-/SnkPCzEQpUaBH81kjdEdDdo2WZl5hxw+BmLDGWjRkm8o7XlhjwsU36cqwe5PGBE5WYpBvDzRSdXx9rbGuJtNA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@bcoe/v8-coverage": "^0.2.3",
-        "@jest/console": "30.4.1",
-        "@jest/test-result": "30.4.1",
-        "@jest/transform": "30.4.1",
-        "@jest/types": "30.4.1",
-        "@jridgewell/trace-mapping": "^0.3.25",
-        "@types/node": "*",
-        "chalk": "^4.1.2",
-        "collect-v8-coverage": "^1.0.2",
-        "exit-x": "^0.2.2",
-        "glob": "^10.5.0",
-        "graceful-fs": "^4.2.11",
-        "istanbul-lib-coverage": "^3.0.0",
-        "istanbul-lib-instrument": "^6.0.0",
-        "istanbul-lib-report": "^3.0.0",
-        "istanbul-lib-source-maps": "^5.0.0",
-        "istanbul-reports": "^3.1.3",
-        "jest-message-util": "30.4.1",
-        "jest-util": "30.4.1",
-        "jest-worker": "30.4.1",
-        "slash": "^3.0.0",
-        "string-length": "^4.0.2",
-        "v8-to-istanbul": "^9.0.1"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      },
-      "peerDependencies": {
-        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
-      },
-      "peerDependenciesMeta": {
-        "node-notifier": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@jest/schemas": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-30.4.1.tgz",
-      "integrity": "sha512-i6b4qw5qnP8c5FEeBJg/uZQ4ddrkN6Ca8qISJh0pr7a5hfn3h3v5x60BEbOC7OYAGZNMs1LfFLwnW2CuK8F57Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@sinclair/typebox": "^0.34.0"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@jest/snapshot-utils": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/@jest/snapshot-utils/-/snapshot-utils-30.4.1.tgz",
-      "integrity": "sha512-ObY4ljvQ95mt6iwKtVLetR/4yXiAgl3H4nJxhztr0MTjrN97TwDYrnCp/kF60Ec9HdhkWTHSu+Hg05aXfngpOA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "30.4.1",
-        "chalk": "^4.1.2",
-        "graceful-fs": "^4.2.11",
-        "natural-compare": "^1.4.0"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@jest/source-map": {
-      "version": "30.0.1",
-      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-30.0.1.tgz",
-      "integrity": "sha512-MIRWMUUR3sdbP36oyNyhbThLHyJ2eEDClPCiHVbrYAe5g3CHRArIVpBw7cdSB5fr+ofSfIb2Tnsw8iEHL0PYQg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.25",
-        "callsites": "^3.1.0",
-        "graceful-fs": "^4.2.11"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@jest/test-result": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-30.4.1.tgz",
-      "integrity": "sha512-/ZG7pgEiOmmWkN9TplKbOu4id2N5lh7FHwRwlkgBVAzGdRH+OkkQ8wX/kIxg4zmd3ZQvAL1RwL2yWsvNYYECTw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/console": "30.4.1",
-        "@jest/types": "30.4.1",
-        "@types/istanbul-lib-coverage": "^2.0.6",
-        "collect-v8-coverage": "^1.0.2"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@jest/test-sequencer": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-30.4.1.tgz",
-      "integrity": "sha512-PeYE+4td5rKjoRPxztObrXU+H8hsjZfxKMXOcmrr34JerSyB/ROOxbbicz8B7A5j9R9VayDnVPvBmedqCsFCdw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/test-result": "30.4.1",
-        "graceful-fs": "^4.2.11",
-        "jest-haste-map": "30.4.1",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@jest/transform": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-30.4.1.tgz",
-      "integrity": "sha512-Wz0LyktlTvRefoymh+n64hQ84KNXsRGcwdoZ8CSa0Ea+fgYcHZlnk+hDP7v2MS7il2bQ5uTEIxf4/NNfhMN4KQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/core": "^7.27.4",
-        "@jest/types": "30.4.1",
-        "@jridgewell/trace-mapping": "^0.3.25",
-        "babel-plugin-istanbul": "^7.0.1",
-        "chalk": "^4.1.2",
-        "convert-source-map": "^2.0.0",
-        "fast-json-stable-stringify": "^2.1.0",
-        "graceful-fs": "^4.2.11",
-        "jest-haste-map": "30.4.1",
-        "jest-regex-util": "30.4.0",
-        "jest-util": "30.4.1",
-        "pirates": "^4.0.7",
-        "slash": "^3.0.0",
-        "write-file-atomic": "^5.0.1"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@jest/types": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-30.4.1.tgz",
-      "integrity": "sha512-f1x/vJXIfjOlEmejYpbkbgw1gOqpPECwMvMEtBqe47j7H2Hg8h8w3o3ikhSXq3MI15kg+oQ0exWO0uCtTNJLoQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/pattern": "30.4.0",
-        "@jest/schemas": "30.4.1",
-        "@types/istanbul-lib-coverage": "^2.0.6",
-        "@types/istanbul-reports": "^3.0.4",
-        "@types/node": "*",
-        "@types/yargs": "^17.0.33",
-        "chalk": "^4.1.2"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.13",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
-      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
-    "node_modules/@jridgewell/remapping": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
-      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
-    "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
-      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.31",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
-      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
-      }
-    },
-    "node_modules/@napi-rs/wasm-runtime": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz",
-      "integrity": "sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@tybys/wasm-util": "^0.10.3"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/Brooooooklyn"
-      },
-      "peerDependencies": {
-        "@emnapi/core": "^1.7.1",
-        "@emnapi/runtime": "^1.7.1"
-      }
-    },
-    "node_modules/@one-ini/wasm": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz",
-      "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/@pkgr/core": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.3.6.tgz",
-      "integrity": "sha512-SEeaJLb3qBNF/OaXnaR1NmmBbFYk1zC0ZH/52fATcRPLFg/p791YrcyFFy44Bo9sLaGuSuLp5Q6axbb/O+v/RA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^14.18.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/pkgr"
-      }
-    },
-    "node_modules/@redis/bloom": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@redis/bloom/-/bloom-1.2.0.tgz",
-      "integrity": "sha512-HG2DFjYKbpNmVXsa0keLHp/3leGJz1mjh09f2RLGGLQZzSHpkmZWuwJbAvo3QcRY8p80m5+ZdXZdYOSBLlp7Cg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@redis/client": "^1.0.0"
-      }
-    },
-    "node_modules/@redis/client": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@redis/client/-/client-1.6.1.tgz",
-      "integrity": "sha512-/KCsg3xSlR+nCK8/8ZYSknYxvXHwubJrU82F3Lm1Fp6789VQ0/3RJKfsmRXjqfaTA++23CvC3hqmqe/2GEt6Kw==",
-      "license": "MIT",
-      "dependencies": {
-        "cluster-key-slot": "1.1.2",
-        "generic-pool": "3.9.0",
-        "yallist": "4.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/@redis/graph": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@redis/graph/-/graph-1.1.1.tgz",
-      "integrity": "sha512-FEMTcTHZozZciLRl6GiiIB4zGm5z5F3F6a6FZCyrfxdKOhFlGkiAqlexWMBzCi4DcRoyiOsuLfW+cjlGWyExOw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@redis/client": "^1.0.0"
-      }
-    },
-    "node_modules/@redis/json": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@redis/json/-/json-1.0.7.tgz",
-      "integrity": "sha512-6UyXfjVaTBTJtKNG4/9Z8PSpKE6XgSyEb8iwaqDcy+uKrd/DGYHTWkUdnQDyzm727V7p21WUMhsqz5oy65kPcQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@redis/client": "^1.0.0"
-      }
-    },
-    "node_modules/@redis/search": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@redis/search/-/search-1.2.0.tgz",
-      "integrity": "sha512-tYoDBbtqOVigEDMAcTGsRlMycIIjwMCgD8eR2t0NANeQmgK/lvxNAvYyb6bZDD4frHRhIHkJu2TBRvB0ERkOmw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@redis/client": "^1.0.0"
-      }
-    },
-    "node_modules/@redis/time-series": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@redis/time-series/-/time-series-1.1.0.tgz",
-      "integrity": "sha512-c1Q99M5ljsIuc4YdaCwfUEXsofakb9c8+Zse2qxTadu8TalLXuAESzLvFAvNVbkmSlvlzIQOLpBCmWI9wTOt+g==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@redis/client": "^1.0.0"
-      }
-    },
-    "node_modules/@sinclair/typebox": {
-      "version": "0.34.49",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.49.tgz",
-      "integrity": "sha512-brySQQs7Jtn0joV8Xh9ZV/hZb9Ozb0pmazDIASBkYKCjXrXU3mpcFahmK/z4YDhGkQvP9mWJbVyahdtU5wQA+A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@sinonjs/commons": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.1.tgz",
-      "integrity": "sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "type-detect": "4.0.8"
-      }
-    },
-    "node_modules/@sinonjs/fake-timers": {
-      "version": "15.4.0",
-      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-15.4.0.tgz",
-      "integrity": "sha512-DsG+8/LscQIQg68J6Ef3dv10u6nVyetYn923s3/sus5eaGfTo1of5WMZSLf0UJc9KDuKPilPH0UDJCjvNbDNCA==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@sinonjs/commons": "^3.0.1"
-      }
-    },
-    "node_modules/@smithy/core": {
-      "version": "3.29.3",
-      "resolved": "https://registry.npmjs.org/@smithy/core/-/core-3.29.3.tgz",
-      "integrity": "sha512-L+Ys6ecjk5vwPMAKHBpPKlJ3DkqwNcnfEISXBZIsVvWG/XKXfsAP8mwIYlTeLcd2ElHdesPI8OuOmJSFAPhm6A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/types": "^4.16.1",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@smithy/credential-provider-imds": {
-      "version": "4.4.8",
-      "resolved": "https://registry.npmjs.org/@smithy/credential-provider-imds/-/credential-provider-imds-4.4.8.tgz",
-      "integrity": "sha512-q9J7JTiXrAhB8sDp4px97uEPT7CwKH61Co78grdNQvU8QZAdiuaSRhP0tUVf2ogy36RZTrlMU1rBmDEH+cnkiA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/core": "^3.29.3",
-        "@smithy/types": "^4.16.1",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@smithy/fetch-http-handler": {
-      "version": "5.6.5",
-      "resolved": "https://registry.npmjs.org/@smithy/fetch-http-handler/-/fetch-http-handler-5.6.5.tgz",
-      "integrity": "sha512-SuqeisTyPoiIPtIYru/sGxGyXzmZ+8nnFOhC+qRPglt06Ebd1yH//CDltZB2J/3WBNVhwfUaZ0EtHB3cm2X32g==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/core": "^3.29.3",
-        "@smithy/types": "^4.16.1",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@smithy/node-http-handler": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/@smithy/node-http-handler/-/node-http-handler-4.9.5.tgz",
-      "integrity": "sha512-bNqdxTQTxmLbomSmlkZFz8L6B/feQ2HHzw4L2zY7Ecp2XffYAZq2uzdWDdxJHJFbEvqd+SRuluJso0P8+xPdbw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/core": "^3.29.3",
-        "@smithy/types": "^4.16.1",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@smithy/signature-v4": {
-      "version": "5.6.4",
-      "resolved": "https://registry.npmjs.org/@smithy/signature-v4/-/signature-v4-5.6.4.tgz",
-      "integrity": "sha512-B89bpf2t/y/wia6LZ+4JfHXYQT9PnVftsH05rgJKKIStS7r/4XSs9HOjtPoLtgcA6HCW9jVqX5DBbq7E0PAkiQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@smithy/core": "^3.29.3",
-        "@smithy/types": "^4.16.1",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@smithy/types": {
-      "version": "4.16.1",
-      "resolved": "https://registry.npmjs.org/@smithy/types/-/types-4.16.1.tgz",
-      "integrity": "sha512-0JFs3V2y2M9tKW5na/qxe69Zv+uxLMO7QBbhxF/FHu/Gp2NFZAAL9tWl9PU02xxo07pb3G9FTyjNc6D5uZrJIg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@tybys/wasm-util": {
-      "version": "0.10.3",
-      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
-      "integrity": "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@types/babel__core": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
-      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.20.7",
-        "@babel/types": "^7.20.7",
-        "@types/babel__generator": "*",
-        "@types/babel__template": "*",
-        "@types/babel__traverse": "*"
-      }
-    },
-    "node_modules/@types/babel__generator": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
-      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "node_modules/@types/babel__template": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
-      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.1.0",
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "node_modules/@types/babel__traverse": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
-      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.28.2"
-      }
-    },
-    "node_modules/@types/debug": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz",
-      "integrity": "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/ms": "*"
-      }
-    },
-    "node_modules/@types/istanbul-lib-coverage": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
-      "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@types/istanbul-lib-report": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz",
-      "integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "*"
-      }
-    },
-    "node_modules/@types/istanbul-reports": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz",
-      "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/istanbul-lib-report": "*"
-      }
-    },
-    "node_modules/@types/ms": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
-      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
-      "license": "MIT"
-    },
-    "node_modules/@types/node": {
-      "version": "25.6.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.6.0.tgz",
-      "integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==",
-      "license": "MIT",
-      "dependencies": {
-        "undici-types": "~7.19.0"
-      }
-    },
-    "node_modules/@types/stack-utils": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
-      "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@types/validator": {
-      "version": "13.15.10",
-      "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.15.10.tgz",
-      "integrity": "sha512-T8L6i7wCuyoK8A/ZeLYt1+q0ty3Zb9+qbSSvrIVitzT3YjZqkTZ40IbRsPanlB4h1QB3JVL1SYCdR6ngtFYcuA==",
-      "license": "MIT"
-    },
-    "node_modules/@types/yargs": {
-      "version": "17.0.35",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.35.tgz",
-      "integrity": "sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/yargs-parser": "*"
-      }
-    },
-    "node_modules/@types/yargs-parser": {
-      "version": "21.0.3",
-      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
-      "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@ungap/structured-clone": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.2.tgz",
-      "integrity": "sha512-5jsZFwgR5rTdKwidH9Qmat75RKwqfpKlWWB1frDkljN127mwqBu8K0PYo7/hFpF03IEJpfVPpCQDY/eDx3iHvA==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/@unrs/resolver-binding-android-arm-eabi": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.12.2.tgz",
-      "integrity": "sha512-g5T90pqg1bo/7mytQx6F4iBNC0Wsh9cu+z9veDbFjc7HjpesJFWD7QMS0NGStXM075+7dJPPVvBbpZlnrdpi/w==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-android-arm64": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.12.2.tgz",
-      "integrity": "sha512-YGCRZv/9GLhwmz6mYDeTsm/92BAyR28l6c2ReweVW5pWgfsitWLY8upvfRlGdoyD8HjeTHSYJWyZGD4KJA/nFQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-darwin-arm64": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.12.2.tgz",
-      "integrity": "sha512-u9DiNT1auQMO20A9SyTuG3wUgQWB9Z7KjAg0uFuCDR1FsAY8A0CG2S6JpHS1xwm/w1G08bjXZDcyOCjv1WAm2w==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-darwin-x64": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.12.2.tgz",
-      "integrity": "sha512-f7rPLi/T1HVKZu/u6t87lroib16n8vrSzcyxI7lg4BGO9UF26KhQL44sd9eOUgrTYhvRXtWOIZT5PejdPyJfUA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-freebsd-x64": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.12.2.tgz",
-      "integrity": "sha512-BpcOjWCJub6nRZUS2zA20pmLvjtqAtGejETaIyRLiZiQf++cbrjltLA5NN/xaXfqeOBOSlMFbemIl5/S5tljmg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.12.2.tgz",
-      "integrity": "sha512-vZTDvdSISZjJx66OzJqtsOhzifbqRjbmI1Mnu49fQDwog5GtDI4QidRiEAYbZCRj9C8YZEW+3ZjqsyS9GR4k2A==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.12.2.tgz",
-      "integrity": "sha512-BiPI+IrIlwcW4nLLMM21+B1dFPzd55yAVgVGrdgDjNef+ch03GdxrcyaIz8X9SsQirh/kCQ7mviyWlMxdh2D7g==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.12.2.tgz",
-      "integrity": "sha512-zJc0H99FEPoFfSrNpa91HYfxzfAJCr502oxNK1cfdC9hlaFI43RT+JFCann9JUgZmLzzntChHyn13Sgn9ljHNg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.12.2.tgz",
-      "integrity": "sha512-KQ3Lki6l+Pz1k/eBipN41ES+YUK30beLGb9YqcB1O542cyLCNE6GaxrfcY3T6EezmGGk84wb5XyO9loTM9tkcA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-linux-loong64-gnu": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-loong64-gnu/-/resolver-binding-linux-loong64-gnu-1.12.2.tgz",
-      "integrity": "sha512-3SJGEh1DborhG6pyxvhPzCT4bbSIVihsvgJc13P1bHG7KLdNDaF9T3gsTwFc7Jw/5Y5/iWOjkEx7Zy0NvCGX3Q==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-linux-loong64-musl": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-loong64-musl/-/resolver-binding-linux-loong64-musl-1.12.2.tgz",
-      "integrity": "sha512-jiuG/Obbel7uw1PwHNFfrkiKhLAF6mnyZ6aWlOAVN9WqKm8v0OFGnciJIHu8+CMvXLQ8AD51LPzAoUfT21D5Ew==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.12.2.tgz",
-      "integrity": "sha512-q7xRvVpmcfeL+LlZg8Pbbo6QaTZwDU5BaGZbwfhkEsXJn3Was8xYfE0RBH266xZt0rM6B7i8xAYIvjthuUIWHg==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.12.2.tgz",
-      "integrity": "sha512-0CVdx6lcnT3Q9inOH8tsMIOJ6ImndllMjqJHg8RLVdB7Vq4SfkEXl9mCSsVNuNA4MCYycRicCUxPCabVHJRr6A==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.12.2.tgz",
-      "integrity": "sha512-iOwlRo9vnp6R6ohHQS11n0NnfdXx/omhkocmIfaPRpQhKZ+3BDMkkdRVh53qjkFkpPddf+FETA28NwGN7l5l+w==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.12.2.tgz",
-      "integrity": "sha512-HYJtLfXq94q8iZNFT1lknx258wlkkWhZeUXJRqzKBBUJ00CvZ+N33zgbCqimLjsyw5Va6uUxhVa12mI+kaveEw==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.12.2.tgz",
-      "integrity": "sha512-mPsUhunKKDih5O96Y6enDQyHc1SqBPlY1E/SfMWDM3EdJ95Z9CArPeCVwCCqbP45ljvivdEk8Fxn+SIb1rDAJQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-linux-x64-musl": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.12.2.tgz",
-      "integrity": "sha512-azrt6+5ydLd8Vt210AAFis/lZevSfPw93EJRIJG+xPu4WCJ8K0kppCTpMyLPcKT7H15M4Jnt2tMp5bOvCkRC6A==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-openharmony-arm64": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-openharmony-arm64/-/resolver-binding-openharmony-arm64-1.12.2.tgz",
-      "integrity": "sha512-YZ9hP4O0X9PQb8eO980qmLNGH4zT3I9+SZTdt0Pr0YyuGQhYKoOZkV02VzrzyOZJ5xIJ3UFIenKkUkGg8GjgWQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openharmony"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-wasm32-wasi": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.12.2.tgz",
-      "integrity": "sha512-tYFDIkMxSflfEc/h92ZWNsZlHSwgimbNHSO3PL2JWQHfCuC2q316jMyYU9TIWZsFK2bQwyK5VAdYgn8ygPj69A==",
-      "cpu": [
-        "wasm32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/core": "1.10.0",
-        "@emnapi/runtime": "1.10.0",
-        "@napi-rs/wasm-runtime": "^1.1.4"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/core": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
-      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/wasi-threads": "1.2.1",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/runtime": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
-      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
-      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.12.2.tgz",
-      "integrity": "sha512-qzNyg3xL0VPQmCaUh+N5jSitce6k+uCBfMDesWRnlULOZaqUkaJ0ybdT+UqlAWJoQjuqfIU/0Ptx9bteN4D82g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.12.2.tgz",
-      "integrity": "sha512-WD9sY00OfpHVGfsnHZoA8jVT+esS/Bg8z8jzxp5BnDCjjwsuKsPQrzswwpFy4J1AUJbXPRfkpcX0mXrzeXW79g==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.12.2.tgz",
-      "integrity": "sha512-nAB74NfSNKknqQ1RrYj6uz8FcXEomu/MATJZxh/x+BArzN2U3JbOYC0APYzUIGhVY3m5hRxA8VPNdPBoG8txlA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/abbrev": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
-      "integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/accepts": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
-      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
-      "license": "MIT",
-      "dependencies": {
-        "mime-types": "~2.1.34",
-        "negotiator": "0.6.3"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/agent-base": {
-      "version": "7.1.4",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
-      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/ansi-escapes": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
-      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "type-fest": "^0.21.3"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/ansi-regex": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
-      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/ansi-styles": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
-      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/append-field": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
-      "integrity": "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw==",
-      "license": "MIT"
-    },
-    "node_modules/argparse": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "sprintf-js": "~1.0.2"
-      }
-    },
-    "node_modules/array-flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
-      "license": "MIT"
-    },
-    "node_modules/async": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
-      "integrity": "sha512-eAkdoKxU6/LkKDBzLpT+t6Ff5EtfSF4wx1WfJiPEEV7WNLnDaRXk0oVysiEPm262roaachGexwUv94WhSgN5TQ=="
-    },
-    "node_modules/asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "license": "MIT"
-    },
-    "node_modules/at-least-node": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
-      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
-    "node_modules/axios": {
-      "version": "1.16.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.16.0.tgz",
-      "integrity": "sha512-6hp5CwvTPlN2A31g5dxnwAX0orzM7pmCRDLnZSX772mv8WDqICwFjowHuPs04Mc8deIld1+ejhtaMn5vp6b+1w==",
-      "license": "MIT",
-      "dependencies": {
-        "follow-redirects": "^1.16.0",
-        "form-data": "^4.0.5",
-        "proxy-from-env": "^2.1.0"
-      }
-    },
-    "node_modules/babel-jest": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-30.4.1.tgz",
-      "integrity": "sha512-fATAbM8piYxkiXQp3RBXmZHxZVNJZAVXXfyeyCN2Tida3+qJ8ea9UxhiJ2y4fLO90ZImKt6k9FlcH2+rLkJGhw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/transform": "30.4.1",
-        "@types/babel__core": "^7.20.5",
-        "babel-plugin-istanbul": "^7.0.1",
-        "babel-preset-jest": "30.4.0",
-        "chalk": "^4.1.2",
-        "graceful-fs": "^4.2.11",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.11.0 || ^8.0.0-0"
-      }
-    },
-    "node_modules/babel-plugin-istanbul": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-7.0.1.tgz",
-      "integrity": "sha512-D8Z6Qm8jCvVXtIRkBnqNHX0zJ37rQcFJ9u8WOS6tkYOsRdHBzypCstaxWiu5ZIlqQtviRYbgnRLSoCEvjqcqbA==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "workspaces": [
-        "test/babel-8"
-      ],
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@istanbuljs/load-nyc-config": "^1.0.0",
-        "@istanbuljs/schema": "^0.1.3",
-        "istanbul-lib-instrument": "^6.0.2",
-        "test-exclude": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/babel-plugin-jest-hoist": {
-      "version": "30.4.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-30.4.0.tgz",
-      "integrity": "sha512-9EdtWM/sSfXLOGLwSn+GS6pIXyBnL07/8gyJlwFXjWy4DxMOyItqyUT29d4lQiS380EZwYlX7/At4PgBS+m2aA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/babel__core": "^7.20.5"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/babel-preset-current-node-syntax": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.2.0.tgz",
-      "integrity": "sha512-E/VlAEzRrsLEb2+dv8yp3bo4scof3l9nR4lrld+Iy5NyVqgVYUJnDAmunkhPMisRI32Qc4iRiz425d8vM++2fg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/plugin-syntax-async-generators": "^7.8.4",
-        "@babel/plugin-syntax-bigint": "^7.8.3",
-        "@babel/plugin-syntax-class-properties": "^7.12.13",
-        "@babel/plugin-syntax-class-static-block": "^7.14.5",
-        "@babel/plugin-syntax-import-attributes": "^7.24.7",
-        "@babel/plugin-syntax-import-meta": "^7.10.4",
-        "@babel/plugin-syntax-json-strings": "^7.8.3",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
-        "@babel/plugin-syntax-top-level-await": "^7.14.5"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0 || ^8.0.0-0"
-      }
-    },
-    "node_modules/babel-preset-jest": {
-      "version": "30.4.0",
-      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-30.4.0.tgz",
-      "integrity": "sha512-lBY4jxsNmCnSiu7kquw8ZC9F4+XLMOKypT3RnNHPvU2Kpd4W0xaPuLr5ZkRyOsvLYAY4yaW1ZwTW4xB7NIiZzg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "babel-plugin-jest-hoist": "30.4.0",
-        "babel-preset-current-node-syntax": "^1.2.0"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.11.0 || ^8.0.0-beta.1"
-      }
-    },
-    "node_modules/balanced-match": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
-      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "18 || 20 || >=22"
-      }
-    },
-    "node_modules/base64-js": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/baseline-browser-mapping": {
-      "version": "2.10.40",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.40.tgz",
-      "integrity": "sha512-BSSLZ9/Cjjv7Gtj5B68ZzXcXUg8iOf3fme+FCuh8rC/Go+Kmh8cox7M3A8dolou16s64QjLPOSdngh7GxXvkSw==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "baseline-browser-mapping": "dist/cli.cjs"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/bcryptjs": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
-      "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ==",
-      "license": "MIT"
-    },
-    "node_modules/bignumber.js": {
-      "version": "9.3.1",
-      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.3.1.tgz",
-      "integrity": "sha512-Ko0uX15oIUS7wJ3Rb30Fs6SkVbLmPBAKdlm7q9+ak9bbIeFf0MwuBsQV6z7+X768/cHsfg+WlysDWJcmthjsjQ==",
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/bluebird": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/body-parser": {
-      "version": "1.20.5",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.5.tgz",
-      "integrity": "sha512-3grm+/2tUOvu2cjJkvsIxrv/wVpfXQW4PsQHYm7yk4vfpu7Ekl6nEsYBoJUL6qDwZUx8wUhQ8tR2qz+ad9c9OA==",
-      "license": "MIT",
-      "dependencies": {
-        "bytes": "~3.1.2",
-        "content-type": "~1.0.5",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "~1.2.0",
-        "http-errors": "~2.0.1",
-        "iconv-lite": "~0.4.24",
-        "on-finished": "~2.4.1",
-        "qs": "~6.15.1",
-        "raw-body": "~2.5.3",
-        "type-is": "~1.6.18",
-        "unpipe": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
-      }
-    },
-    "node_modules/body-parser/node_modules/qs": {
-      "version": "6.15.1",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.1.tgz",
-      "integrity": "sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "side-channel": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/bowser": {
-      "version": "2.14.1",
-      "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.14.1.tgz",
-      "integrity": "sha512-tzPjzCxygAKWFOJP011oxFHs57HzIhOEracIgAePE4pqB3LikALKnSzUyU4MGs9/iCEUuHlAJTjTc5M+u7YEGg==",
-      "license": "MIT"
-    },
-    "node_modules/brace-expansion": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
-      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^4.0.2"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
-      }
-    },
-    "node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "license": "MIT",
-      "dependencies": {
-        "fill-range": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/browserslist": {
-      "version": "4.28.4",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.4.tgz",
-      "integrity": "sha512-MTc8i/x9jBQd1iMw2CFGS+rwMa07eYjLR0CCTLDACl9xhxy+nIs3KeML/biicXtk9JrZ6dnnTatmc7ErPXIxqw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "baseline-browser-mapping": "^2.10.38",
-        "caniuse-lite": "^1.0.30001799",
-        "electron-to-chromium": "^1.5.376",
-        "node-releases": "^2.0.48",
-        "update-browserslist-db": "^1.2.3"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      },
-      "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      }
-    },
-    "node_modules/bser": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
-      "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "node-int64": "^0.4.0"
-      }
-    },
-    "node_modules/buffer": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.6.0.tgz",
-      "integrity": "sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==",
-      "license": "MIT",
-      "dependencies": {
-        "base64-js": "^1.0.2",
-        "ieee754": "^1.1.4"
-      }
-    },
-    "node_modules/buffer-equal-constant-time": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
-      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/buffer-from": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "license": "MIT"
-    },
-    "node_modules/busboy": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
-      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
-      "dependencies": {
-        "streamsearch": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=10.16.0"
-      }
-    },
-    "node_modules/bytes": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/call-bind-apply-helpers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
-      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/call-bound": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
-      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "get-intrinsic": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/callsites": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001799",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
-      "integrity": "sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "CC-BY-4.0"
-    },
-    "node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/chalk/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/chalk/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/chalk/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/char-regex": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
-      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/ci-info": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
-      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/sibiraj-s"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/cjs-module-lexer": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-2.2.0.tgz",
-      "integrity": "sha512-4bHTS2YuzUvtoLjdy+98ykbNB5jS0+07EvFNXerqZQJ89F7DI6ET7OQo/HJuW6K0aVsKA9hj9/RVb2kQVOrPDQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/cliui": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
-      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.0",
-        "wrap-ansi": "^7.0.0"
-      }
-    },
-    "node_modules/cliui/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/cliui/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/cliui/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/cliui/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/cliui/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/cliui/node_modules/wrap-ansi": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/cluster-key-slot": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz",
-      "integrity": "sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/co": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-      "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "iojs": ">= 1.0.0",
-        "node": ">= 0.12.0"
-      }
-    },
-    "node_modules/collect-v8-coverage": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.3.tgz",
-      "integrity": "sha512-1L5aqIkwPfiodaMgQunkF1zRhNqifHBmtbbbxcr6yVxxBnliw4TDOW6NxpO8DJLgJ16OT+Y4ztZqP6p/FtXnAw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "license": "MIT",
-      "dependencies": {
-        "delayed-stream": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/commander": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
-      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/concat-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
-      "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
-      "engines": [
-        "node >= 6.0"
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "buffer-from": "^1.0.0",
-        "inherits": "^2.0.3",
-        "readable-stream": "^3.0.2",
-        "typedarray": "^0.0.6"
-      }
-    },
-    "node_modules/config-chain": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
-      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ini": "^1.3.4",
-        "proto-list": "~1.2.1"
-      }
-    },
-    "node_modules/connect-pg-simple": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/connect-pg-simple/-/connect-pg-simple-10.0.0.tgz",
-      "integrity": "sha512-pBGVazlqiMrackzCr0eKhn4LO5trJXsOX0nQoey9wCOayh80MYtThCbq8eoLsjpiWgiok/h+1/uti9/2/Una8A==",
-      "license": "MIT",
-      "dependencies": {
-        "pg": "^8.12.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=22.0.0"
-      }
-    },
-    "node_modules/content-disposition": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
-      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
-      "license": "MIT",
-      "dependencies": {
-        "safe-buffer": "5.2.1"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/content-type": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
-      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/cookie": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
-      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/cookie-parser": {
-      "version": "1.4.7",
-      "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.7.tgz",
-      "integrity": "sha512-nGUvgXnotP3BsjiLX2ypbQnWoGUPIIfHQNZkkC668ntrzGWEZVW70HDEB1qnNGMicPje6EttlIgzo51YSwNQGw==",
-      "license": "MIT",
-      "dependencies": {
-        "cookie": "0.7.2",
-        "cookie-signature": "1.0.6"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/cookie-signature": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
-      "license": "MIT"
-    },
-    "node_modules/cors": {
-      "version": "2.8.6",
-      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
-      "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
-      "license": "MIT",
-      "dependencies": {
-        "object-assign": "^4",
-        "vary": "^1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/cross-spawn": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
-      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/cross-spawn/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/csrf": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/csrf/-/csrf-3.1.0.tgz",
-      "integrity": "sha512-uTqEnCvWRk042asU6JtapDTcJeeailFy4ydOQS28bj1hcLnYRiqi8SsD2jS412AY1I/4qdOwWZun774iqywf9w==",
-      "license": "MIT",
-      "dependencies": {
-        "rndm": "1.2.0",
-        "tsscmp": "1.0.6",
-        "uid-safe": "2.1.5"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/csurf": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/csurf/-/csurf-1.11.0.tgz",
-      "integrity": "sha512-UCtehyEExKTxgiu8UHdGvHj4tnpE/Qctue03Giq5gPgMQ9cg/ciod5blZQ5a4uCEenNQjxyGuzygLdKUmee/bQ==",
-      "deprecated": "This package is archived and no longer maintained. For support, visit https://github.com/expressjs/express/discussions",
-      "license": "MIT",
-      "dependencies": {
-        "cookie": "0.4.0",
-        "cookie-signature": "1.0.6",
-        "csrf": "3.1.0",
-        "http-errors": "~1.7.3"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/csurf/node_modules/cookie": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/csurf/node_modules/depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/csurf/node_modules/http-errors": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
-      "integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==",
-      "license": "MIT",
-      "dependencies": {
-        "depd": "~1.1.2",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.1.1",
-        "statuses": ">= 1.5.0 < 2",
-        "toidentifier": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/csurf/node_modules/setprototypeof": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
-      "license": "ISC"
-    },
-    "node_modules/csurf/node_modules/statuses": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/csurf/node_modules/toidentifier": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
-      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
-    "node_modules/currency-codes": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/currency-codes/-/currency-codes-2.2.0.tgz",
-      "integrity": "sha512-vpbQc5sEYHGdTVAYUhHnKv0DWiYLRvzl/KKyqeHzBh7HD/j3UlWoScpZ9tN/jG6w2feddWoObsBbaNVu5yDapg==",
-      "license": "MIT",
-      "dependencies": {
-        "first-match": "~0.0.1",
-        "nub": "~0.0.0"
-      }
-    },
-    "node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/dedent": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.7.2.tgz",
-      "integrity": "sha512-WzMx3mW98SN+zn3hgemf4OzdmyNhhhKz5Ay0pUfQiMQ3e1g+xmTJWp/pKdwKVXhdSkAEGIIzqeuWrL3mV/AXbA==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "babel-plugin-macros": "^3.1.0"
-      },
-      "peerDependenciesMeta": {
-        "babel-plugin-macros": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/deepmerge": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/depd": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/destroy": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
-      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
-      }
-    },
-    "node_modules/detect-europe-js": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/detect-europe-js/-/detect-europe-js-0.1.2.tgz",
-      "integrity": "sha512-lgdERlL3u0aUdHocoouzT10d9I89VVhk0qNRmll7mXdGfJT1/wqZ2ZLA4oJAjeACPY5fT1wsbq2AT+GkuInsow==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/faisalman"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/ua-parser-js"
-        },
-        {
-          "type": "paypal",
-          "url": "https://paypal.me/faisalman"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/detect-libc": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
-      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/detect-newline": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
-      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/dotenv": {
-      "version": "16.6.1",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
-      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://dotenvx.com"
-      }
-    },
-    "node_modules/dottie": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/dottie/-/dottie-2.0.7.tgz",
-      "integrity": "sha512-7lAK2A0b3zZr3UC5aE69CPdCFR4RHW1o2Dr74TqFykxkUCBXSRJum/yPc7g8zRHJqWKomPLHwFLLoUnn8PXXRg==",
-      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
-      "license": "MIT"
-    },
-    "node_modules/dunder-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
-      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.2.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/ecdsa-sig-formatter": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
-      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "node_modules/editorconfig": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.7.tgz",
-      "integrity": "sha512-e0GOtq/aTQhVdNyDU9e02+wz9oDDM+SIOQxWME2QRjzRX5yyLAuHDE+0aE8vHb9XRC8XD37eO2u57+F09JqFhw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@one-ini/wasm": "0.1.1",
-        "commander": "^10.0.0",
-        "minimatch": "^9.0.1",
-        "semver": "^7.5.3"
-      },
-      "bin": {
-        "editorconfig": "bin/editorconfig"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/editorconfig/node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/editorconfig/node_modules/brace-expansion": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.1.tgz",
-      "integrity": "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/editorconfig/node_modules/minimatch": {
-      "version": "9.0.9",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
-      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
-      "license": "MIT"
-    },
-    "node_modules/electron-to-chromium": {
-      "version": "1.5.380",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.380.tgz",
-      "integrity": "sha512-W6d5AbuEoRayO447cqrg6lKJIlscgRnnxOZl/08kfV71BQDoEBC7Wwis68z87LjyK6f4kWyTaubuDbhHKrZkbA==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/emittery": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.13.1.tgz",
-      "integrity": "sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/emittery?sponsor=1"
-      }
-    },
-    "node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/encodeurl": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
-      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/error-ex": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
-      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-arrayish": "^0.2.1"
-      }
-    },
-    "node_modules/es-define-property": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
-      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-object-atoms": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
-      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-set-tostringtag": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
-      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.6",
-        "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/escalade": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
-      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-      "license": "MIT"
-    },
-    "node_modules/escape-string-regexp": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/esprima": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "bin": {
-        "esparse": "bin/esparse.js",
-        "esvalidate": "bin/esvalidate.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/events": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.8.x"
-      }
-    },
-    "node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
-    "node_modules/execa/node_modules/signal-exit": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/exit-x": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/exit-x/-/exit-x-0.2.2.tgz",
-      "integrity": "sha512-+I6B/IkJc1o/2tiURyz/ivu/O0nKNEArIUB5O7zBrlDVJr22SCLH3xTeEry428LvFhRzIA1g8izguxJ/gbNcVQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/expect": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/expect/-/expect-30.4.1.tgz",
-      "integrity": "sha512-PMARsyh/JtqC20HoGqlFcIlQAyqUtW4PlI1rup1uhYJtKuwAjbvWi3GQMAn+STdHum/dk8xrKfUM1+5SAwpolA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/expect-utils": "30.4.1",
-        "@jest/get-type": "30.1.0",
-        "jest-matcher-utils": "30.4.1",
-        "jest-message-util": "30.4.1",
-        "jest-mock": "30.4.1",
-        "jest-util": "30.4.1"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/express": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.22.1.tgz",
-      "integrity": "sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==",
-      "license": "MIT",
-      "dependencies": {
-        "accepts": "~1.3.8",
-        "array-flatten": "1.1.1",
-        "body-parser": "~1.20.3",
-        "content-disposition": "~0.5.4",
-        "content-type": "~1.0.4",
-        "cookie": "~0.7.1",
-        "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.1",
-        "fresh": "~0.5.2",
-        "http-errors": "~2.0.0",
-        "merge-descriptors": "1.0.3",
-        "methods": "~1.1.2",
-        "on-finished": "~2.4.1",
-        "parseurl": "~1.3.3",
-        "path-to-regexp": "~0.1.12",
-        "proxy-addr": "~2.0.7",
-        "qs": "~6.14.0",
-        "range-parser": "~1.2.1",
-        "safe-buffer": "5.2.1",
-        "send": "~0.19.0",
-        "serve-static": "~1.16.2",
-        "setprototypeof": "1.2.0",
-        "statuses": "~2.0.1",
-        "type-is": "~1.6.18",
-        "utils-merge": "1.0.1",
-        "vary": "~1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.10.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/express-rate-limit": {
-      "version": "6.11.2",
-      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-6.11.2.tgz",
-      "integrity": "sha512-a7uwwfNTh1U60ssiIkuLFWHt4hAC5yxlLGU2VP0X4YNlyEDZAqF4tK3GD3NSitVBrCQmQ0++0uOyFOgC2y4DDw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "express": "^4 || ^5"
-      }
-    },
-    "node_modules/express-session": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/express-session/-/express-session-1.19.0.tgz",
-      "integrity": "sha512-0csaMkGq+vaiZTmSMMGkfdCOabYv192VbytFypcvI0MANrp+4i/7yEkJ0sbAEhycQjntaKGzYfjfXQyVb7BHMA==",
-      "license": "MIT",
-      "dependencies": {
-        "cookie": "~0.7.2",
-        "cookie-signature": "~1.0.7",
-        "debug": "~2.6.9",
-        "depd": "~2.0.0",
-        "on-headers": "~1.1.0",
-        "parseurl": "~1.3.3",
-        "safe-buffer": "~5.2.1",
-        "uid-safe": "~2.1.5"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/express-session/node_modules/cookie-signature": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz",
-      "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==",
-      "license": "MIT"
-    },
-    "node_modules/express-validator": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/express-validator/-/express-validator-7.3.2.tgz",
-      "integrity": "sha512-ctLw1Vl6dXVH62dIQMDdTAQkrh480mkFuG6/SGXOaVlwPNukhRAe7EgJIMJ2TSAni8iwHBRp530zAZE5ZPF2IA==",
-      "license": "MIT",
-      "dependencies": {
-        "lodash": "^4.18.1",
-        "validator": "~13.15.23"
-      },
-      "engines": {
-        "node": ">= 8.0.0"
-      }
-    },
-    "node_modules/extend": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "license": "MIT"
-    },
-    "node_modules/fast-json-stable-stringify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/fb-watchman": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz",
-      "integrity": "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "bser": "2.1.1"
-      }
-    },
-    "node_modules/ffprobe-static": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/ffprobe-static/-/ffprobe-static-3.1.0.tgz",
-      "integrity": "sha512-Dvpa9uhVMOYivhHKWLGDoa512J751qN1WZAIO+Xw4L/mrUSPxS4DApzSUDbCFE/LUq2+xYnznEahTd63AqBSpA==",
-      "license": "MIT"
-    },
-    "node_modules/fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "license": "MIT",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/finalhandler": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz",
-      "integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==",
-      "license": "MIT",
-      "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"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/first-match": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/first-match/-/first-match-0.0.1.tgz",
-      "integrity": "sha512-VvKbnaxrC0polTFDC+teKPTdl2mn6B/KUW+WB3C9RzKDeNwbzfLdnUz3FxC+tnjvus6bI0jWrWicQyVIPdS37A==",
-      "license": "MIT"
-    },
-    "node_modules/fluent-ffmpeg": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/fluent-ffmpeg/-/fluent-ffmpeg-2.1.3.tgz",
-      "integrity": "sha512-Be3narBNt2s6bsaqP6Jzq91heDgOEaDCJAXcE3qcma/EJBSy5FB4cvO31XBInuAuKBx8Kptf8dkhjK0IOru39Q==",
-      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
-      "license": "MIT",
-      "dependencies": {
-        "async": "^0.2.9",
-        "which": "^1.1.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/follow-redirects": {
-      "version": "1.16.0",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
-      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/foreground-child": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
-      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "cross-spawn": "^7.0.6",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/form-data": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
-      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
-      "license": "MIT",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.2",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/forwarded": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/fresh": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/fs-extra": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "at-least-node": "^1.0.0",
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/gaxios": {
-      "version": "6.7.1",
-      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-6.7.1.tgz",
-      "integrity": "sha512-LDODD4TMYx7XXdpwxAVRAIAuB0bzv0s+ywFonY46k126qzQHT9ygyoa9tncmOiQmmDrik65UYsEkv3lbfqQ3yQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "extend": "^3.0.2",
-        "https-proxy-agent": "^7.0.1",
-        "is-stream": "^2.0.0",
-        "node-fetch": "^2.6.9",
-        "uuid": "^9.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/gcp-metadata": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-6.1.1.tgz",
-      "integrity": "sha512-a4tiq7E0/5fTjxPAaH4jpjkSv/uCaU2p5KC6HVGrvl0cDjA8iBZv4vv1gyzlmK0ZUKqwpOyQMKzZQe3lTit77A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "gaxios": "^6.1.1",
-        "google-logging-utils": "^0.0.2",
-        "json-bigint": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/generic-pool": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/generic-pool/-/generic-pool-3.9.0.tgz",
-      "integrity": "sha512-hymDOu5B53XvN4QT9dBmZxPX4CWhBPPLguTZ9MMFeFa/Kg0xWVfylOVNlJji/E7yTZWFd/q9GO5TxDLq156D7g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4"
-      }
-    },
-    "node_modules/gensync": {
-      "version": "1.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/get-caller-file": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "6.* || 8.* || >= 10.*"
-      }
-    },
-    "node_modules/get-intrinsic": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
-      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "es-define-property": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.1.1",
-        "function-bind": "^1.1.2",
-        "get-proto": "^1.0.1",
-        "gopd": "^1.2.0",
-        "has-symbols": "^1.1.0",
-        "hasown": "^2.0.2",
-        "math-intrinsics": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-package-type": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
-      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/get-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
-      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "license": "MIT",
-      "dependencies": {
-        "dunder-proto": "^1.0.1",
-        "es-object-atoms": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/glob": {
-      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
-      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
-      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/glob/node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/glob/node_modules/brace-expansion": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.1.tgz",
-      "integrity": "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/glob/node_modules/minimatch": {
-      "version": "9.0.9",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
-      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/google-auth-library": {
-      "version": "9.15.1",
-      "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-9.15.1.tgz",
-      "integrity": "sha512-Jb6Z0+nvECVz+2lzSMt9u98UsoakXxA2HGHMCxh+so3n90XgYWkq5dur19JAJV7ONiJY22yBTyJB1TSkvPq9Ng==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "base64-js": "^1.3.0",
-        "ecdsa-sig-formatter": "^1.0.11",
-        "gaxios": "^6.1.1",
-        "gcp-metadata": "^6.1.0",
-        "gtoken": "^7.0.0",
-        "jws": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/google-logging-utils": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/google-logging-utils/-/google-logging-utils-0.0.2.tgz",
-      "integrity": "sha512-NEgUnEcBiP5HrPzufUkBzJOD/Sxsco3rLNo1F1TNf7ieU8ryUzBhqba8r756CjLX7rn3fHl6iLEwPYuqpoKgQQ==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/gopd": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
-      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/graceful-fs": {
-      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/gtoken": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/gtoken/-/gtoken-7.1.0.tgz",
-      "integrity": "sha512-pCcEwRi+TKpMlxAQObHDQ56KawURgyAf6jtIY046fJ5tIv3zDe/LEIubckAO8fj6JnAxLdmWkUfNyulQ2iKdEw==",
-      "license": "MIT",
-      "dependencies": {
-        "gaxios": "^6.0.0",
-        "jws": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/has-symbols": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
-      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-tostringtag": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
-      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "license": "MIT",
-      "dependencies": {
-        "has-symbols": "^1.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/hasown": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.3.tgz",
-      "integrity": "sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==",
-      "license": "MIT",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/html-escaper": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
-      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/http-errors": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
-      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
-      "license": "MIT",
-      "dependencies": {
-        "depd": "~2.0.0",
-        "inherits": "~2.0.4",
-        "setprototypeof": "~1.2.0",
-        "statuses": "~2.0.2",
-        "toidentifier": "~1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/http-proxy-middleware": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-4.0.0.tgz",
-      "integrity": "sha512-wuHwaUtmC0XzJNHqRp41zXtt5ojpHbusXGhq6781VvnjWUYPu7opmOF3eomGNujT07kEOnHWZyV9UZzKimVCKA==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.4.3",
-        "httpxy": "^0.5.1",
-        "is-glob": "^4.0.3",
-        "is-plain-obj": "^4.1.0",
-        "micromatch": "^4.0.8"
-      },
-      "engines": {
-        "node": "^22.15.0 || ^24.0.0 || >=26.0.0"
-      }
-    },
-    "node_modules/http-proxy-middleware/node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/http-proxy-middleware/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/https-proxy-agent": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
-      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
-      "license": "MIT",
-      "dependencies": {
-        "agent-base": "^7.1.2",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/https-proxy-agent/node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/https-proxy-agent/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/httpxy": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/httpxy/-/httpxy-0.5.3.tgz",
-      "integrity": "sha512-SMS9V6Sn7VWaS11lYhoAr0ceoaiolTWf4jYdJn0NJhCdKMu9R2H9Fh0LBDWBHQF6HRLI1PmaePYsjanSpE5PEw==",
-      "license": "MIT"
-    },
-    "node_modules/human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=10.17.0"
-      }
-    },
-    "node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/ieee754": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/ignore-by-default": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
-      "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/import-local": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
-      "integrity": "sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "pkg-dir": "^4.2.0",
-        "resolve-cwd": "^3.0.0"
-      },
-      "bin": {
-        "import-local-fixture": "fixtures/cli.js"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/imurmurhash": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.8.19"
-      }
-    },
-    "node_modules/inflection": {
-      "version": "1.13.4",
-      "resolved": "https://registry.npmjs.org/inflection/-/inflection-1.13.4.tgz",
-      "integrity": "sha512-6I/HUDeYFfuNCVS3td055BaXBwKYuzw7K3ExVMStBowKo9oOAMJIXIHvdyR3iboTCp1b+1i5DSkIZTcwIktuDw==",
-      "engines": [
-        "node >= 0.4.0"
-      ],
-      "license": "MIT"
-    },
-    "node_modules/inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "license": "ISC"
-    },
-    "node_modules/ini": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/ipaddr.js": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/is-arrayish": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-core-module": {
-      "version": "2.16.2",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
-      "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "hasown": "^2.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-generator-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
-      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/is-glob": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "license": "MIT",
-      "dependencies": {
-        "is-extglob": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/is-plain-obj": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
-      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/is-standalone-pwa": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-standalone-pwa/-/is-standalone-pwa-0.1.1.tgz",
-      "integrity": "sha512-9Cbovsa52vNQCjdXOzeQq5CnCbAcRk05aU62K20WO372NrTv0NxibLFCK6lQ4/iZEFdEA3p3t2VNOn8AJ53F5g==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/faisalman"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/ua-parser-js"
-        },
-        {
-          "type": "paypal",
-          "url": "https://paypal.me/faisalman"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "license": "ISC"
-    },
-    "node_modules/istanbul-lib-coverage": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
-      "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/istanbul-lib-instrument": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-6.0.3.tgz",
-      "integrity": "sha512-Vtgk7L/R2JHyyGW07spoFlB8/lpjiOLTjMdms6AFMraYt3BaJauod/NGrfnVG/y4Ix1JEuMRPDPEj2ua+zz1/Q==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@babel/core": "^7.23.9",
-        "@babel/parser": "^7.23.9",
-        "@istanbuljs/schema": "^0.1.3",
-        "istanbul-lib-coverage": "^3.2.0",
-        "semver": "^7.5.4"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/istanbul-lib-report": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
-      "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "istanbul-lib-coverage": "^3.0.0",
-        "make-dir": "^4.0.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/istanbul-lib-report/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/istanbul-lib-report/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/istanbul-lib-source-maps": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-5.0.6.tgz",
-      "integrity": "sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.23",
-        "debug": "^4.1.1",
-        "istanbul-lib-coverage": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/istanbul-lib-source-maps/node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/istanbul-lib-source-maps/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/istanbul-reports": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz",
-      "integrity": "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "html-escaper": "^2.0.0",
-        "istanbul-lib-report": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
-    "node_modules/jest": {
-      "version": "30.4.2",
-      "resolved": "https://registry.npmjs.org/jest/-/jest-30.4.2.tgz",
-      "integrity": "sha512-Yi1jqNC/Oq0N4hBgNH/YvBpP1P57QqundgytzYqy3yqAa7NZPNjSoi4SGbRAXDMdBzNE6xBCi5U7RgfrvMEUVQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/core": "30.4.2",
-        "@jest/types": "30.4.1",
-        "import-local": "^3.2.0",
-        "jest-cli": "30.4.2"
-      },
-      "bin": {
-        "jest": "bin/jest.js"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      },
-      "peerDependencies": {
-        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
-      },
-      "peerDependenciesMeta": {
-        "node-notifier": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/jest-changed-files": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-30.4.1.tgz",
-      "integrity": "sha512-IuctmYrxi21iOSOaIXpJWalHyPAsVv0GeBHKDn8C1CA4W5htHn7INL+wdnL4Bo0+olEndvAFkmb++tIQJG+vvg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "execa": "^5.1.1",
-        "jest-util": "30.4.1",
-        "p-limit": "^3.1.0"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-circus": {
-      "version": "30.4.2",
-      "resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-30.4.2.tgz",
-      "integrity": "sha512-rvHH7VlY6LgbJXJTQ87GW62g1FntOtbhh0zT+v04kC+pgL6aBKyYINXxWukCpj3dcIBMw5/XUbtDS9dU9JTXeQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/environment": "30.4.1",
-        "@jest/expect": "30.4.1",
-        "@jest/test-result": "30.4.1",
-        "@jest/types": "30.4.1",
-        "@types/node": "*",
-        "chalk": "^4.1.2",
-        "co": "^4.6.0",
-        "dedent": "^1.6.0",
-        "is-generator-fn": "^2.1.0",
-        "jest-each": "30.4.1",
-        "jest-matcher-utils": "30.4.1",
-        "jest-message-util": "30.4.1",
-        "jest-runtime": "30.4.2",
-        "jest-snapshot": "30.4.1",
-        "jest-util": "30.4.1",
-        "p-limit": "^3.1.0",
-        "pretty-format": "30.4.1",
-        "pure-rand": "^7.0.0",
-        "slash": "^3.0.0",
-        "stack-utils": "^2.0.6"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-cli": {
-      "version": "30.4.2",
-      "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-30.4.2.tgz",
-      "integrity": "sha512-jfA2ocvVHMXS2QijrJ0d31ektP+d/W0T5RpcTX2Pq+3sVqHlsXVCM2+FmwpL+bdY8OfHpIg9xMxLF17Zg0U49Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/core": "30.4.2",
-        "@jest/test-result": "30.4.1",
-        "@jest/types": "30.4.1",
-        "chalk": "^4.1.2",
-        "exit-x": "^0.2.2",
-        "import-local": "^3.2.0",
-        "jest-config": "30.4.2",
-        "jest-util": "30.4.1",
-        "jest-validate": "30.4.1",
-        "yargs": "^17.7.2"
-      },
-      "bin": {
-        "jest": "bin/jest.js"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      },
-      "peerDependencies": {
-        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
-      },
-      "peerDependenciesMeta": {
-        "node-notifier": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/jest-cli/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-cli/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/jest-cli/node_modules/cliui": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
-      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.1",
-        "wrap-ansi": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/jest-cli/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/jest-cli/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-cli/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-cli/node_modules/wrap-ansi": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/jest-cli/node_modules/yargs": {
-      "version": "17.7.3",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.3.tgz",
-      "integrity": "sha512-GZtjxm/J/4TSxuL3FNYjCmLktBTnIw/rVmKSIyKeYAZpmJB2ig9VauCC5xsa82GNKVKDAqpOn3KVzNt0zmrU0g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cliui": "^8.0.1",
-        "escalade": "^3.1.1",
-        "get-caller-file": "^2.0.5",
-        "require-directory": "^2.1.1",
-        "string-width": "^4.2.3",
-        "y18n": "^5.0.5",
-        "yargs-parser": "^21.1.1"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/jest-cli/node_modules/yargs-parser": {
-      "version": "21.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
-      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/jest-config": {
-      "version": "30.4.2",
-      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-30.4.2.tgz",
-      "integrity": "sha512-rNHAShJQqQwFNoL0hbf3BphSBOWnpOUAKvidLS/AjNVLPfoj5mSf4jQMfW3cYOs6hXeZC7nF7mDHaBnbxELOzg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/core": "^7.27.4",
-        "@jest/get-type": "30.1.0",
-        "@jest/pattern": "30.4.0",
-        "@jest/test-sequencer": "30.4.1",
-        "@jest/types": "30.4.1",
-        "babel-jest": "30.4.1",
-        "chalk": "^4.1.2",
-        "ci-info": "^4.2.0",
-        "deepmerge": "^4.3.1",
-        "glob": "^10.5.0",
-        "graceful-fs": "^4.2.11",
-        "jest-circus": "30.4.2",
-        "jest-docblock": "30.4.0",
-        "jest-environment-node": "30.4.1",
-        "jest-regex-util": "30.4.0",
-        "jest-resolve": "30.4.1",
-        "jest-runner": "30.4.2",
-        "jest-util": "30.4.1",
-        "jest-validate": "30.4.1",
-        "parse-json": "^5.2.0",
-        "pretty-format": "30.4.1",
-        "slash": "^3.0.0",
-        "strip-json-comments": "^3.1.1"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      },
-      "peerDependencies": {
-        "@types/node": "*",
-        "esbuild-register": ">=3.4.0",
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/node": {
-          "optional": true
-        },
-        "esbuild-register": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/jest-diff": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-30.4.1.tgz",
-      "integrity": "sha512-CRpFK0RtLriVDGcPPAnR6HMVI8bSR2jnUIgralhauzYQZIb4RH9AtEInTuQr65LmmGggGcRT6HIASxwqsVsmlA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/diff-sequences": "30.4.0",
-        "@jest/get-type": "30.1.0",
-        "chalk": "^4.1.2",
-        "pretty-format": "30.4.1"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-docblock": {
-      "version": "30.4.0",
-      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-30.4.0.tgz",
-      "integrity": "sha512-ZPMabUZCx5MpbZ2eBYSvZ0J8fvo3dR9oM+eeUpb3aKNQFuS2tu3Duw1TNlMoP8k3WQgKGJuhcMFvwcVuq6T7oA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "detect-newline": "^3.1.0"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-each": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-30.4.1.tgz",
-      "integrity": "sha512-/8MJbH6fuj48TstjrMf+u/pd06Qezz5xOXvZA6442heNOWr8bdeoGZX2d9fCn028CoMgYmroH9//zky5GfyYmA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/get-type": "30.1.0",
-        "@jest/types": "30.4.1",
-        "chalk": "^4.1.2",
-        "jest-util": "30.4.1",
-        "pretty-format": "30.4.1"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-environment-node": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-30.4.1.tgz",
-      "integrity": "sha512-4FZYVOk85hz2AyT6BbarKy9u37g6DbrDyCdFhsnDdXqyrueYQvB+0zO4f/kqLCRD0BsPRXPMNJeQwihKZV8naw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/environment": "30.4.1",
-        "@jest/fake-timers": "30.4.1",
-        "@jest/types": "30.4.1",
-        "@types/node": "*",
-        "jest-mock": "30.4.1",
-        "jest-util": "30.4.1",
-        "jest-validate": "30.4.1"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-haste-map": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-30.4.1.tgz",
-      "integrity": "sha512-rFrcONd8jeFsyw+Z9CrScJgglRf2+NFmNam8dKu7n+SoHqNYT47mn0DdEcVUZJpvh7Iz6/si7f7yUH7GJHVgnw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "30.4.1",
-        "@types/node": "*",
-        "anymatch": "^3.1.3",
-        "fb-watchman": "^2.0.2",
-        "graceful-fs": "^4.2.11",
-        "jest-regex-util": "30.4.0",
-        "jest-util": "30.4.1",
-        "jest-worker": "30.4.1",
-        "picomatch": "^4.0.3",
-        "walker": "^1.0.8"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      },
-      "optionalDependencies": {
-        "fsevents": "^2.3.3"
-      }
-    },
-    "node_modules/jest-haste-map/node_modules/picomatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
-      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/jest-leak-detector": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-30.4.1.tgz",
-      "integrity": "sha512-IpmyiioeHxiWDhesHnUFmOxcTzwCwKpgACgWajtAP+nYQXiY7DakTxB6Bx9JFiRMljr0AX1PvnQdaU1KFoz6NQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/get-type": "30.1.0",
-        "pretty-format": "30.4.1"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-matcher-utils": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-30.4.1.tgz",
-      "integrity": "sha512-zvYfX5CaeEkFrrLS9suWe9rvJrm9J1Iv3ua8kIBv9GEPzcnsfBf0bob37la7s67fs0nlBC3EuvkOLnXQKxtx4A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/get-type": "30.1.0",
-        "chalk": "^4.1.2",
-        "jest-diff": "30.4.1",
-        "pretty-format": "30.4.1"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-message-util": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-30.4.1.tgz",
-      "integrity": "sha512-kwCKIvq0MCW1HzLoGola9Te6JUdzgV0loyKJ3Qghrkz9i5/RRIHsL95BMQc2HBBhlBKC4j22K9p11TGHH8RBpQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@jest/types": "30.4.1",
-        "@types/stack-utils": "^2.0.3",
-        "chalk": "^4.1.2",
-        "graceful-fs": "^4.2.11",
-        "jest-util": "30.4.1",
-        "picomatch": "^4.0.3",
-        "pretty-format": "30.4.1",
-        "slash": "^3.0.0",
-        "stack-utils": "^2.0.6"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-message-util/node_modules/picomatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
-      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/jest-mock": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-30.4.1.tgz",
-      "integrity": "sha512-/i8SVb8/NSB7RfNi8gfqu8gxLV23KaL5EpAttyb9iz8qWRIqXRLflycz/32wXsYkOnaUlx8NAKnJYtpsmXUmfw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "30.4.1",
-        "@types/node": "*",
-        "jest-util": "30.4.1"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-pnp-resolver": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
-      "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      },
-      "peerDependencies": {
-        "jest-resolve": "*"
-      },
-      "peerDependenciesMeta": {
-        "jest-resolve": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/jest-regex-util": {
-      "version": "30.4.0",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-30.4.0.tgz",
-      "integrity": "sha512-mWlvLviKIgIQ8VCuM1xRdD0TWp3zlzionlmDBjuXVBs+VkmXq6FgW9T4Emr7oGz/Rk6feDCGyiugolcQEyp3mg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-resolve": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-30.4.1.tgz",
-      "integrity": "sha512-Zry8Yq/yJcNAZ7dJ5F2heic8AheXvbFZ7XI5V+h28nrYZ7Qoyy4dItq8OodjnYD270mvX+ZudmrNV9cysqhW5Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "chalk": "^4.1.2",
-        "graceful-fs": "^4.2.11",
-        "jest-haste-map": "30.4.1",
-        "jest-pnp-resolver": "^1.2.3",
-        "jest-util": "30.4.1",
-        "jest-validate": "30.4.1",
-        "slash": "^3.0.0",
-        "unrs-resolver": "^1.7.11"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-resolve-dependencies": {
-      "version": "30.4.2",
-      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-30.4.2.tgz",
-      "integrity": "sha512-gDiVh1I+GxYzz9oXlyw+1wv6VOYX1WYxMOfjsA3iGKePV2oxmbHhwxfkALxNxYy1ciw6APWwkW2zZONwP97aEQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "jest-regex-util": "30.4.0",
-        "jest-snapshot": "30.4.1"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-runner": {
-      "version": "30.4.2",
-      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-30.4.2.tgz",
-      "integrity": "sha512-2dw0PslVYXxffXGpLo+Ejad+KcI1Qkjn7f4X4619gf21oCUmL+SPfjqIa/losUem3yEOvfNZe/F1HWUcNpODcg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/console": "30.4.1",
-        "@jest/environment": "30.4.1",
-        "@jest/test-result": "30.4.1",
-        "@jest/transform": "30.4.1",
-        "@jest/types": "30.4.1",
-        "@types/node": "*",
-        "chalk": "^4.1.2",
-        "emittery": "^0.13.1",
-        "exit-x": "^0.2.2",
-        "graceful-fs": "^4.2.11",
-        "jest-docblock": "30.4.0",
-        "jest-environment-node": "30.4.1",
-        "jest-haste-map": "30.4.1",
-        "jest-leak-detector": "30.4.1",
-        "jest-message-util": "30.4.1",
-        "jest-resolve": "30.4.1",
-        "jest-runtime": "30.4.2",
-        "jest-util": "30.4.1",
-        "jest-watcher": "30.4.1",
-        "jest-worker": "30.4.1",
-        "p-limit": "^3.1.0",
-        "source-map-support": "0.5.13"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-runtime": {
-      "version": "30.4.2",
-      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-30.4.2.tgz",
-      "integrity": "sha512-3/5e8iPz2k/VLqlr8DgTftYyLUv8Su3FkCAO2/Od81UsUTpSxOrS6O5x5KkoQwyUjmpYyDJKeyAvg2T2nvpNkQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/environment": "30.4.1",
-        "@jest/fake-timers": "30.4.1",
-        "@jest/globals": "30.4.1",
-        "@jest/source-map": "30.0.1",
-        "@jest/test-result": "30.4.1",
-        "@jest/transform": "30.4.1",
-        "@jest/types": "30.4.1",
-        "@types/node": "*",
-        "chalk": "^4.1.2",
-        "cjs-module-lexer": "^2.1.0",
-        "collect-v8-coverage": "^1.0.2",
-        "glob": "^10.5.0",
-        "graceful-fs": "^4.2.11",
-        "jest-haste-map": "30.4.1",
-        "jest-message-util": "30.4.1",
-        "jest-mock": "30.4.1",
-        "jest-regex-util": "30.4.0",
-        "jest-resolve": "30.4.1",
-        "jest-snapshot": "30.4.1",
-        "jest-util": "30.4.1",
-        "slash": "^3.0.0",
-        "strip-bom": "^4.0.0"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-snapshot": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-30.4.1.tgz",
-      "integrity": "sha512-tEOkkfOMppUyeiHwjZswOQ3lcnoTnws/q5FnGIaeIh/jmoU0ZlgMYRR8sTlTj+nNGCoJ0RDq6SfxGxCsyMTPmw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/core": "^7.27.4",
-        "@babel/generator": "^7.27.5",
-        "@babel/plugin-syntax-jsx": "^7.27.1",
-        "@babel/plugin-syntax-typescript": "^7.27.1",
-        "@babel/types": "^7.27.3",
-        "@jest/expect-utils": "30.4.1",
-        "@jest/get-type": "30.1.0",
-        "@jest/snapshot-utils": "30.4.1",
-        "@jest/transform": "30.4.1",
-        "@jest/types": "30.4.1",
-        "babel-preset-current-node-syntax": "^1.2.0",
-        "chalk": "^4.1.2",
-        "expect": "30.4.1",
-        "graceful-fs": "^4.2.11",
-        "jest-diff": "30.4.1",
-        "jest-matcher-utils": "30.4.1",
-        "jest-message-util": "30.4.1",
-        "jest-util": "30.4.1",
-        "pretty-format": "30.4.1",
-        "semver": "^7.7.2",
-        "synckit": "^0.11.8"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-util": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-30.4.1.tgz",
-      "integrity": "sha512-vjQb1sACEiv13DKJMDToJpzVW0joCsIQrmbg0fi7CyOOt+g9jTuQl2A216pWRBYhOVt53XbL/2LbMKg1BECWOw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "30.4.1",
-        "@types/node": "*",
-        "chalk": "^4.1.2",
-        "ci-info": "^4.2.0",
-        "graceful-fs": "^4.2.11",
-        "picomatch": "^4.0.3"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-util/node_modules/picomatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
-      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/jest-validate": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-30.4.1.tgz",
-      "integrity": "sha512-PDWi4SOwLnwqNDfHZjOcsEFyZ4fc/2W2gVL3DEoyqnB6jCQMLRtfBong8s6omIw3lI0HWOus12xfnFmQtjW3fw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/get-type": "30.1.0",
-        "@jest/types": "30.4.1",
-        "camelcase": "^6.3.0",
-        "chalk": "^4.1.2",
-        "leven": "^3.1.0",
-        "pretty-format": "30.4.1"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-validate/node_modules/camelcase": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
-      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/jest-watcher": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-30.4.1.tgz",
-      "integrity": "sha512-/l9UonmvCwjHH7d2h3iAwIloLc1H0S8mJZ/LNK3i86hqwPAz8otUJjP9MfYtz9Tt77Su5FD2xGjZn8d31IZHlw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/test-result": "30.4.1",
-        "@jest/types": "30.4.1",
-        "@types/node": "*",
-        "ansi-escapes": "^4.3.2",
-        "chalk": "^4.1.2",
-        "emittery": "^0.13.1",
-        "jest-util": "30.4.1",
-        "string-length": "^4.0.2"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-worker": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-30.4.1.tgz",
-      "integrity": "sha512-SHynN/q/QD++iNyvMdy+WMmbCGk8jIsNcRxycXbWubSOhvo6T+j2afcfUSl+3hYsiBebOTo0cT7c2H7CXugu1g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*",
-        "@ungap/structured-clone": "^1.3.0",
-        "jest-util": "30.4.1",
-        "merge-stream": "^2.0.0",
-        "supports-color": "^8.1.1"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/jest-worker/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-worker/node_modules/supports-color": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
-      }
-    },
-    "node_modules/js-beautify": {
-      "version": "1.15.4",
-      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.15.4.tgz",
-      "integrity": "sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "config-chain": "^1.1.13",
-        "editorconfig": "^1.0.4",
-        "glob": "^10.4.2",
-        "js-cookie": "^3.0.5",
-        "nopt": "^7.2.1"
-      },
-      "bin": {
-        "css-beautify": "js/bin/css-beautify.js",
-        "html-beautify": "js/bin/html-beautify.js",
-        "js-beautify": "js/bin/js-beautify.js"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/js-cookie": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.8.tgz",
-      "integrity": "sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/js-yaml": {
-      "version": "3.15.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.15.0.tgz",
-      "integrity": "sha512-ttBQIIQPDeLjpPOohtUdXuXUVoA2uIB6fEH9HyJ7234s5mBJ5wTx20njxplLZQgLaOfpmPQA7X2t5AX6tIPbog==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
-    "node_modules/jsesc": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
-      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/json-bigint": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
-      "integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
-      "license": "MIT",
-      "dependencies": {
-        "bignumber.js": "^9.0.0"
-      }
-    },
-    "node_modules/json-parse-even-better-errors": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/jsonfile": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.1.tgz",
-      "integrity": "sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "universalify": "^2.0.0"
-      },
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
-    "node_modules/jsonwebtoken": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
-      "integrity": "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g==",
-      "license": "MIT",
-      "dependencies": {
-        "jws": "^4.0.1",
-        "lodash.includes": "^4.3.0",
-        "lodash.isboolean": "^3.0.3",
-        "lodash.isinteger": "^4.0.4",
-        "lodash.isnumber": "^3.0.3",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.isstring": "^4.0.1",
-        "lodash.once": "^4.0.0",
-        "ms": "^2.1.1",
-        "semver": "^7.5.4"
-      },
-      "engines": {
-        "node": ">=12",
-        "npm": ">=6"
-      }
-    },
-    "node_modules/jsonwebtoken/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/jwa": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
-      "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
-      "license": "MIT",
-      "dependencies": {
-        "buffer-equal-constant-time": "^1.0.1",
-        "ecdsa-sig-formatter": "1.0.11",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "node_modules/jws": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
-      "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
-      "license": "MIT",
-      "dependencies": {
-        "jwa": "^2.0.1",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "node_modules/leven": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
-      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/lodash": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
-      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.includes": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
-      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.isboolean": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
-      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.isinteger": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
-      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.isnumber": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
-      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.isplainobject": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.isstring": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.once": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
-      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
-      "license": "MIT"
-    },
-    "node_modules/lru-cache": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/make-dir": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
-      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "semver": "^7.5.3"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/makeerror": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
-      "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "tmpl": "1.0.5"
-      }
-    },
-    "node_modules/math-intrinsics": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
-      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/media-typer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/merge-descriptors": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
-      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/merge-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/methods": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "license": "MIT",
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "license": "MIT",
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "license": "MIT",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/minimatch": {
-      "version": "10.2.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
-      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "brace-expansion": "^5.0.5"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/minipass": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
-      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/moment": {
-      "version": "2.30.1",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
-      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/moment-timezone": {
-      "version": "0.5.48",
-      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.48.tgz",
-      "integrity": "sha512-f22b8LV1gbTO2ms2j2z13MuPogNoh5UzxL3nzNAYKGraILnbGc9NEE6dyiiiLv46DGRb8A4kg8UKWLjPthxBHw==",
-      "license": "MIT",
-      "dependencies": {
-        "moment": "^2.29.4"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "license": "MIT"
-    },
-    "node_modules/multer": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/multer/-/multer-2.1.1.tgz",
-      "integrity": "sha512-mo+QTzKlx8R7E5ylSXxWzGoXoZbOsRMpyitcht8By2KHvMbf3tjwosZ/Mu/XYU6UuJ3VZnODIrak5ZrPiPyB6A==",
-      "license": "MIT",
-      "dependencies": {
-        "append-field": "^1.0.0",
-        "busboy": "^1.6.0",
-        "concat-stream": "^2.0.0",
-        "type-is": "^1.6.18"
-      },
-      "engines": {
-        "node": ">= 10.16.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/napi-postinstall": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.4.tgz",
-      "integrity": "sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "napi-postinstall": "lib/cli.js"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/napi-postinstall"
-      }
-    },
-    "node_modules/natural-compare": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/negotiator": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
-      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/node-cron": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/node-cron/-/node-cron-4.2.1.tgz",
-      "integrity": "sha512-lgimEHPE/QDgFlywTd8yTR61ptugX3Qer29efeyWw2rv259HtGBNn1vZVmp8lB9uo9wC0t/AT4iGqXxia+CJFg==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/node-fetch": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
-      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-      "license": "MIT",
-      "dependencies": {
-        "whatwg-url": "^5.0.0"
-      },
-      "engines": {
-        "node": "4.x || >=6.0.0"
-      },
-      "peerDependencies": {
-        "encoding": "^0.1.0"
-      },
-      "peerDependenciesMeta": {
-        "encoding": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/node-int64": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
-      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/node-releases": {
-      "version": "2.0.50",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.50.tgz",
-      "integrity": "sha512-J6l92tKHX6w8Jy5nO1Vuc01NoIiRGi/d6qBKVxh+IQ8Cr3b6HbVNfKiF8ZpFKufTwpwxMmce2W3iQZ861ZRyTg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/nodemailer": {
-      "version": "6.10.1",
-      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.10.1.tgz",
-      "integrity": "sha512-Z+iLaBGVaSjbIzQ4pX6XV41HrooLsQ10ZWPUehGmuantvzWoDVBnmsdUcOIDM1t+yPor5pDhVlDESgOMEGxhHA==",
-      "license": "MIT-0",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/nodemon": {
-      "version": "3.1.14",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.14.tgz",
-      "integrity": "sha512-jakjZi93UtB3jHMWsXL68FXSAosbLfY0In5gtKq3niLSkrWznrVBzXFNOEMJUfc9+Ke7SHWoAZsiMkNP3vq6Jw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "chokidar": "^3.5.2",
-        "debug": "^4",
-        "ignore-by-default": "^1.0.1",
-        "minimatch": "^10.2.1",
-        "pstree.remy": "^1.1.8",
-        "semver": "^7.5.3",
-        "simple-update-notifier": "^2.0.0",
-        "supports-color": "^5.5.0",
-        "touch": "^3.1.0",
-        "undefsafe": "^2.0.5"
-      },
-      "bin": {
-        "nodemon": "bin/nodemon.js"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/nodemon"
-      }
-    },
-    "node_modules/nodemon/node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/nodemon/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/nopt": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.1.tgz",
-      "integrity": "sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "abbrev": "^2.0.0"
-      },
-      "bin": {
-        "nopt": "bin/nopt.js"
-      },
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/nub": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/nub/-/nub-0.0.0.tgz",
-      "integrity": "sha512-dK0Ss9C34R/vV0FfYJXuqDAqHlaW9fvWVufq9MmGF2umCuDbd5GRfRD9fpi/LiM0l4ZXf8IBB+RYmZExqCrf0w==",
-      "license": "MIT/X11",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-inspect": {
-      "version": "1.13.4",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
-      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/on-finished": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-      "license": "MIT",
-      "dependencies": {
-        "ee-first": "1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/on-headers": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.1.0.tgz",
-      "integrity": "sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
-    "node_modules/onetime": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "mimic-fn": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-limit": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "yocto-queue": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/p-locate/node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/package-json-from-dist": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
-      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0"
-    },
-    "node_modules/parse-json": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
-      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "error-ex": "^1.3.1",
-        "json-parse-even-better-errors": "^2.3.0",
-        "lines-and-columns": "^1.1.6"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/path": {
-      "version": "0.12.7",
-      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
-      "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==",
-      "license": "MIT",
-      "dependencies": {
-        "process": "^0.11.1",
-        "util": "^0.10.3"
-      }
-    },
-    "node_modules/path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/path-to-regexp": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.13.tgz",
-      "integrity": "sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==",
-      "license": "MIT"
-    },
-    "node_modules/pg": {
-      "version": "8.20.0",
-      "resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
-      "integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
-      "license": "MIT",
-      "dependencies": {
-        "pg-connection-string": "^2.12.0",
-        "pg-pool": "^3.13.0",
-        "pg-protocol": "^1.13.0",
-        "pg-types": "2.2.0",
-        "pgpass": "1.0.5"
-      },
-      "engines": {
-        "node": ">= 16.0.0"
-      },
-      "optionalDependencies": {
-        "pg-cloudflare": "^1.3.0"
-      },
-      "peerDependencies": {
-        "pg-native": ">=3.0.1"
-      },
-      "peerDependenciesMeta": {
-        "pg-native": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/pg-cloudflare": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.3.0.tgz",
-      "integrity": "sha512-6lswVVSztmHiRtD6I8hw4qP/nDm1EJbKMRhf3HCYaqud7frGysPv7FYJ5noZQdhQtN2xJnimfMtvQq21pdbzyQ==",
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/pg-connection-string": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.12.0.tgz",
-      "integrity": "sha512-U7qg+bpswf3Cs5xLzRqbXbQl85ng0mfSV/J0nnA31MCLgvEaAo7CIhmeyrmJpOr7o+zm0rXK+hNnT5l9RHkCkQ==",
-      "license": "MIT"
-    },
-    "node_modules/pg-hstore": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/pg-hstore/-/pg-hstore-2.3.4.tgz",
-      "integrity": "sha512-N3SGs/Rf+xA1M2/n0JBiXFDVMzdekwLZLAO0g7mpDY9ouX+fDI7jS6kTq3JujmYbtNSJ53TJ0q4G98KVZSM4EA==",
-      "license": "MIT",
-      "dependencies": {
-        "underscore": "^1.13.1"
-      },
-      "engines": {
-        "node": ">= 0.8.x"
-      }
-    },
-    "node_modules/pg-int8": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
-      "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/pg-pool": {
-      "version": "3.13.0",
-      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.13.0.tgz",
-      "integrity": "sha512-gB+R+Xud1gLFuRD/QgOIgGOBE2KCQPaPwkzBBGC9oG69pHTkhQeIuejVIk3/cnDyX39av2AxomQiyPT13WKHQA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "pg": ">=8.0"
-      }
-    },
-    "node_modules/pg-protocol": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.13.0.tgz",
-      "integrity": "sha512-zzdvXfS6v89r6v7OcFCHfHlyG/wvry1ALxZo4LqgUoy7W9xhBDMaqOuMiF3qEV45VqsN6rdlcehHrfDtlCPc8w==",
-      "license": "MIT"
-    },
-    "node_modules/pg-types": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz",
-      "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
-      "license": "MIT",
-      "dependencies": {
-        "pg-int8": "1.0.1",
-        "postgres-array": "~2.0.0",
-        "postgres-bytea": "~1.0.0",
-        "postgres-date": "~1.0.4",
-        "postgres-interval": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/pgpass": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz",
-      "integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==",
-      "license": "MIT",
-      "dependencies": {
-        "split2": "^4.1.0"
-      }
-    },
-    "node_modules/picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/picomatch": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
-      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/pirates": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
-      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/pkg-dir": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "find-up": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/postgres-array": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
-      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postgres-bytea": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.1.tgz",
-      "integrity": "sha512-5+5HqXnsZPE65IJZSMkZtURARZelel2oXUEO8rH83VS/hxH5vv1uHquPg5wZs8yMAfdv971IU+kcPUczi7NVBQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/postgres-date": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz",
-      "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/postgres-interval": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
-      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
-      "license": "MIT",
-      "dependencies": {
-        "xtend": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pretty-format": {
-      "version": "30.4.1",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.4.1.tgz",
-      "integrity": "sha512-K6KiKMHTL4jjX4u3Kir2EW07nRfcqVTXIImx50wbjHQTcZPgg+gjVeNTIT3l3L1Rd4UefxfogquC9J37SoFyyw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jest/schemas": "30.4.1",
-        "ansi-styles": "^5.2.0",
-        "react-is-18": "npm:react-is@^18.3.1",
-        "react-is-19": "npm:react-is@^19.2.5"
-      },
-      "engines": {
-        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
-      }
-    },
-    "node_modules/pretty-format/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/process": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
-    "node_modules/proto-list": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
-      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/proxy-addr": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-      "license": "MIT",
-      "dependencies": {
-        "forwarded": "0.2.0",
-        "ipaddr.js": "1.9.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/proxy-from-env": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
-      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/pstree.remy": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
-      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/pure-rand": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-7.0.1.tgz",
-      "integrity": "sha512-oTUZM/NAZS8p7ANR3SHh30kXB+zK2r2BPcEn/awJIbOvq82WoMN4p62AWWp3Hhw50G0xMsw1mhIBLqHw64EcNQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/dubzzz"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/fast-check"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/qs": {
-      "version": "6.14.2",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz",
-      "integrity": "sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "side-channel": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/random-bytes": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
-      "integrity": "sha512-iv7LhNVO047HzYR3InF6pUcUsPQiHTM1Qal51DcGSuZFBil1aBBWG5eHPNek7bvILMaYJ/8RU1e8w1AMdHmLQQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/rate-limit-redis": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/rate-limit-redis/-/rate-limit-redis-4.3.1.tgz",
-      "integrity": "sha512-+a1zU8+D7L8siDK9jb14refQXz60vq427VuiplgnaLk9B2LnvGe/APLTfhwb4uNIL7eWVknh8GnRp/unCj+lMA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 16"
-      },
-      "peerDependencies": {
-        "express-rate-limit": ">= 6"
-      }
-    },
-    "node_modules/raw-body": {
-      "version": "2.5.3",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz",
-      "integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==",
-      "license": "MIT",
-      "dependencies": {
-        "bytes": "~3.1.2",
-        "http-errors": "~2.0.1",
-        "iconv-lite": "~0.4.24",
-        "unpipe": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/react-is-18": {
-      "name": "react-is",
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/react-is-19": {
-      "name": "react-is",
-      "version": "19.2.7",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.7.tgz",
-      "integrity": "sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "license": "MIT",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/redis": {
-      "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/redis/-/redis-4.7.1.tgz",
-      "integrity": "sha512-S1bJDnqLftzHXHP8JsT5II/CtHWQrASX5K96REjWjlmWKrviSOLWmM7QnRLstAWsu1VBBV1ffV6DzCvxNP0UJQ==",
-      "license": "MIT",
-      "workspaces": [
-        "./packages/*"
-      ],
-      "dependencies": {
-        "@redis/bloom": "1.2.0",
-        "@redis/client": "1.6.1",
-        "@redis/graph": "1.1.1",
-        "@redis/json": "1.0.7",
-        "@redis/search": "1.2.0",
-        "@redis/time-series": "1.1.0"
-      }
-    },
-    "node_modules/require-directory": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/resolve": {
-      "version": "1.22.12",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
-      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "is-core-module": "^2.16.1",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/resolve-cwd": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
-      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "resolve-from": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/resolve-from": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/retry-as-promised": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/retry-as-promised/-/retry-as-promised-7.1.1.tgz",
-      "integrity": "sha512-hMD7odLOt3LkTjcif8aRZqi/hybjpLNgSk5oF5FCowfCjok6LukpN2bDX7R5wDmbgBQFn7YoBxSagmtXHaJYJw==",
-      "license": "MIT"
-    },
-    "node_modules/rndm": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/rndm/-/rndm-1.2.0.tgz",
-      "integrity": "sha512-fJhQQI5tLrQvYIYFpOnFinzv9dwmR7hRnUz1XqP3OJ1jIweTNOd6aTO4jwQSgcBSFUB+/KHJxuGneime+FdzOw==",
-      "license": "MIT"
-    },
-    "node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "license": "MIT"
-    },
-    "node_modules/semver": {
-      "version": "7.8.5",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
-      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/send": {
-      "version": "0.19.2",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz",
-      "integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==",
-      "license": "MIT",
-      "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"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/send/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/sequelize": {
-      "version": "6.37.8",
-      "resolved": "https://registry.npmjs.org/sequelize/-/sequelize-6.37.8.tgz",
-      "integrity": "sha512-HJ0IQFqcTsTiqbEgiuioYFMSD00TP6Cz7zoTti+zVVBwVe9fEhev9cH6WnM3XU31+ABS356durAb99ZuOthnKw==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/sequelize"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@types/debug": "^4.1.8",
-        "@types/validator": "^13.7.17",
-        "debug": "^4.3.4",
-        "dottie": "^2.0.6",
-        "inflection": "^1.13.4",
-        "lodash": "^4.17.21",
-        "moment": "^2.29.4",
-        "moment-timezone": "^0.5.43",
-        "pg-connection-string": "^2.6.1",
-        "retry-as-promised": "^7.0.4",
-        "semver": "^7.5.4",
-        "sequelize-pool": "^7.1.0",
-        "toposort-class": "^1.0.1",
-        "uuid": "^8.3.2",
-        "validator": "^13.9.0",
-        "wkx": "^0.5.0"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependenciesMeta": {
-        "ibm_db": {
-          "optional": true
-        },
-        "mariadb": {
-          "optional": true
-        },
-        "mysql2": {
-          "optional": true
-        },
-        "oracledb": {
-          "optional": true
-        },
-        "pg": {
-          "optional": true
-        },
-        "pg-hstore": {
-          "optional": true
-        },
-        "snowflake-sdk": {
-          "optional": true
-        },
-        "sqlite3": {
-          "optional": true
-        },
-        "tedious": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/sequelize-cli": {
-      "version": "6.6.5",
-      "resolved": "https://registry.npmjs.org/sequelize-cli/-/sequelize-cli-6.6.5.tgz",
-      "integrity": "sha512-DqyISCULOaEbTM+rRQH4YvcUWeOC1XDiSKcjsC6TfAnT7W837mNkChJhtB/Z4FdCFHRCojmiP7zsrA4pARmacA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fs-extra": "^9.1.0",
-        "js-beautify": "1.15.4",
-        "lodash": "^4.17.21",
-        "picocolors": "^1.1.1",
-        "resolve": "^1.22.1",
-        "umzug": "^2.3.0",
-        "yargs": "^16.2.0"
-      },
-      "bin": {
-        "sequelize": "lib/sequelize",
-        "sequelize-cli": "lib/sequelize"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/sequelize-pool": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/sequelize-pool/-/sequelize-pool-7.1.0.tgz",
-      "integrity": "sha512-G9c0qlIWQSK29pR/5U2JF5dDQeqqHRragoyahj/Nx4KOOQ3CPPfzxnfqFPCSB7x5UgjOgnZ61nSxz+fjDpRlJg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
-    "node_modules/sequelize/node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/sequelize/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/sequelize/node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "deprecated": "uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).",
-      "license": "MIT",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
-    "node_modules/serve-static": {
-      "version": "1.16.3",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.3.tgz",
-      "integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==",
-      "license": "MIT",
-      "dependencies": {
-        "encodeurl": "~2.0.0",
-        "escape-html": "~1.0.3",
-        "parseurl": "~1.3.3",
-        "send": "~0.19.1"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/setprototypeof": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
-      "license": "ISC"
-    },
-    "node_modules/sharp": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.35.3.tgz",
-      "integrity": "sha512-ej0zVHuZGHCiABXcNxeYhpRnPNPAcvbG8RMdBAhDAxLKkCRVSpK3Iyu7qbqw3JMzoj0REeM6f3tJLtVwl0023Q==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@img/colour": "^1.1.0",
-        "detect-libc": "^2.1.2",
-        "semver": "^7.8.5"
-      },
-      "engines": {
-        "node": ">=20.9.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.35.3",
-        "@img/sharp-darwin-x64": "0.35.3",
-        "@img/sharp-freebsd-wasm32": "0.35.3",
-        "@img/sharp-libvips-darwin-arm64": "1.3.2",
-        "@img/sharp-libvips-darwin-x64": "1.3.2",
-        "@img/sharp-libvips-linux-arm": "1.3.2",
-        "@img/sharp-libvips-linux-arm64": "1.3.2",
-        "@img/sharp-libvips-linux-ppc64": "1.3.2",
-        "@img/sharp-libvips-linux-riscv64": "1.3.2",
-        "@img/sharp-libvips-linux-s390x": "1.3.2",
-        "@img/sharp-libvips-linux-x64": "1.3.2",
-        "@img/sharp-libvips-linuxmusl-arm64": "1.3.2",
-        "@img/sharp-libvips-linuxmusl-x64": "1.3.2",
-        "@img/sharp-linux-arm": "0.35.3",
-        "@img/sharp-linux-arm64": "0.35.3",
-        "@img/sharp-linux-ppc64": "0.35.3",
-        "@img/sharp-linux-riscv64": "0.35.3",
-        "@img/sharp-linux-s390x": "0.35.3",
-        "@img/sharp-linux-x64": "0.35.3",
-        "@img/sharp-linuxmusl-arm64": "0.35.3",
-        "@img/sharp-linuxmusl-x64": "0.35.3",
-        "@img/sharp-webcontainers-wasm32": "0.35.3",
-        "@img/sharp-win32-arm64": "0.35.3",
-        "@img/sharp-win32-ia32": "0.35.3",
-        "@img/sharp-win32-x64": "0.35.3"
-      },
-      "peerDependenciesMeta": {
-        "@types/node": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/side-channel": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
-      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3",
-        "side-channel-list": "^1.0.0",
-        "side-channel-map": "^1.0.1",
-        "side-channel-weakmap": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-list": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
-      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-map": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
-      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.5",
-        "object-inspect": "^1.13.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-weakmap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
-      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.5",
-        "object-inspect": "^1.13.3",
-        "side-channel-map": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/signal-exit": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
-      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/simple-update-notifier": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
-      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "semver": "^7.5.3"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/source-map-support": {
-      "version": "0.5.13",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
-      "integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
-    "node_modules/split2": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
-      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
-      "license": "ISC",
-      "engines": {
-        "node": ">= 10.x"
-      }
-    },
-    "node_modules/sprintf-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
-      "dev": true,
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/stack-utils": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
-      "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "escape-string-regexp": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/statuses": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
-      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/stream-browserify": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-3.0.0.tgz",
-      "integrity": "sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==",
-      "license": "MIT",
-      "dependencies": {
-        "inherits": "~2.0.4",
-        "readable-stream": "^3.5.0"
-      }
-    },
-    "node_modules/streamsearch": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
-      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "license": "MIT",
-      "dependencies": {
-        "safe-buffer": "~5.2.0"
-      }
-    },
-    "node_modules/string-length": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
-      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "char-regex": "^1.0.2",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/string-length/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-length/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/string-width-cjs/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-ansi": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
-      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.2.2"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-bom": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
-      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/strip-json-comments": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
-      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/synckit": {
-      "version": "0.11.13",
-      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.13.tgz",
-      "integrity": "sha512-eNRKgb3z66Yp3D2CixVujOUvXLFUTij/zVnV8KRyvFdQwpz7I5DS8UfRkTeLzb64u+dkzDSdelE24izu+zSSUg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@pkgr/core": "^0.3.6"
-      },
-      "engines": {
-        "node": "^14.18.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/synckit"
-      }
-    },
-    "node_modules/test-exclude": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
-      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "@istanbuljs/schema": "^0.1.2",
-        "glob": "^7.1.4",
-        "minimatch": "^3.0.4"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/test-exclude/node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/test-exclude/node_modules/brace-expansion": {
-      "version": "1.1.15",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.15.tgz",
-      "integrity": "sha512-EwOCDEex4quD37XhqM3omwtMoJjr//isUZz1JopUNWms+4Z2ViyM/k1YIRePpoVNnQhENnxtFjLaxNHrT7xIUg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/test-exclude/node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/test-exclude/node_modules/minimatch": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
-      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/tmpl": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
-      "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
-      "dev": true,
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "license": "MIT",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
-    "node_modules/toidentifier": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
-    "node_modules/toposort-class": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/toposort-class/-/toposort-class-1.0.1.tgz",
-      "integrity": "sha512-OsLcGGbYF3rMjPUf8oKktyvCiUxSbqMMS39m33MAjLTC1DVIH6x3WSt63/M77ihI09+Sdfk1AXvfhCEeUmC7mg==",
-      "license": "MIT"
-    },
-    "node_modules/touch": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz",
-      "integrity": "sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "nodetouch": "bin/nodetouch.js"
-      }
-    },
-    "node_modules/tr46": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "license": "MIT"
-    },
-    "node_modules/tslib": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
-    },
-    "node_modules/tsscmp": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/tsscmp/-/tsscmp-1.0.6.tgz",
-      "integrity": "sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.6.x"
-      }
-    },
-    "node_modules/type-detect": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
-      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/type-fest": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
-      "dev": true,
-      "license": "(MIT OR CC0-1.0)",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/type-is": {
-      "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-      "license": "MIT",
-      "dependencies": {
-        "media-typer": "0.3.0",
-        "mime-types": "~2.1.24"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/typedarray": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
-      "license": "MIT"
-    },
-    "node_modules/ua-is-frozen": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/ua-is-frozen/-/ua-is-frozen-0.1.2.tgz",
-      "integrity": "sha512-RwKDW2p3iyWn4UbaxpP2+VxwqXh0jpvdxsYpZ5j/MLLiQOfbsV5shpgQiw93+KMYQPcteeMQ289MaAFzs3G9pw==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/faisalman"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/ua-parser-js"
-        },
-        {
-          "type": "paypal",
-          "url": "https://paypal.me/faisalman"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/ua-parser-js": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-2.0.10.tgz",
-      "integrity": "sha512-t+3Ktbq0Ies2vaSezfOaWiolH4OigQIO1dk+1xDpOydB1COVPocVYOrEV5rqZ0kFY9XYG1v9LutCyMgYBpABcw==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/ua-parser-js"
-        },
-        {
-          "type": "paypal",
-          "url": "https://paypal.me/faisalman"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/faisalman"
-        }
-      ],
-      "license": "AGPL-3.0-or-later",
-      "dependencies": {
-        "detect-europe-js": "^0.1.2",
-        "is-standalone-pwa": "^0.1.1",
-        "ua-is-frozen": "^0.1.2"
-      },
-      "bin": {
-        "ua-parser-js": "script/cli.js"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/uid-safe": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz",
-      "integrity": "sha512-KPHm4VL5dDXKz01UuEd88Df+KzynaohSL9fBh096KWAxSKZQDI2uBrVqtvRM4rwrIrRRKsdLNML/lnaaVSRioA==",
-      "license": "MIT",
-      "dependencies": {
-        "random-bytes": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/umzug": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/umzug/-/umzug-2.3.0.tgz",
-      "integrity": "sha512-Z274K+e8goZK8QJxmbRPhl89HPO1K+ORFtm6rySPhFKfKc5GHhqdzD0SGhSWHkzoXasqJuItdhorSvY7/Cgflw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "bluebird": "^3.7.2"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/undefsafe": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
-      "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/underscore": {
-      "version": "1.13.8",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.8.tgz",
-      "integrity": "sha512-DXtD3ZtEQzc7M8m4cXotyHR+FAS18C64asBYY5vqZexfYryNNnDc02W4hKg3rdQuqOYas1jkseX0+nZXjTXnvQ==",
-      "license": "MIT"
-    },
-    "node_modules/undici-types": {
-      "version": "7.19.2",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.19.2.tgz",
-      "integrity": "sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg==",
-      "license": "MIT"
-    },
-    "node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
-    "node_modules/unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/unrs-resolver": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.12.2.tgz",
-      "integrity": "sha512-dmlRxBJJayXjqTwC+JtF1HhJmgf3ftQ3YejFcZrf4+KKtJv0qDsK1pjqaaVjG7wJ5NJ6UVP1OqRMQ71Z4C3rxQ==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "dependencies": {
-        "napi-postinstall": "^0.3.4"
-      },
-      "funding": {
-        "url": "https://opencollective.com/unrs-resolver"
-      },
-      "optionalDependencies": {
-        "@unrs/resolver-binding-android-arm-eabi": "1.12.2",
-        "@unrs/resolver-binding-android-arm64": "1.12.2",
-        "@unrs/resolver-binding-darwin-arm64": "1.12.2",
-        "@unrs/resolver-binding-darwin-x64": "1.12.2",
-        "@unrs/resolver-binding-freebsd-x64": "1.12.2",
-        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.12.2",
-        "@unrs/resolver-binding-linux-arm-musleabihf": "1.12.2",
-        "@unrs/resolver-binding-linux-arm64-gnu": "1.12.2",
-        "@unrs/resolver-binding-linux-arm64-musl": "1.12.2",
-        "@unrs/resolver-binding-linux-loong64-gnu": "1.12.2",
-        "@unrs/resolver-binding-linux-loong64-musl": "1.12.2",
-        "@unrs/resolver-binding-linux-ppc64-gnu": "1.12.2",
-        "@unrs/resolver-binding-linux-riscv64-gnu": "1.12.2",
-        "@unrs/resolver-binding-linux-riscv64-musl": "1.12.2",
-        "@unrs/resolver-binding-linux-s390x-gnu": "1.12.2",
-        "@unrs/resolver-binding-linux-x64-gnu": "1.12.2",
-        "@unrs/resolver-binding-linux-x64-musl": "1.12.2",
-        "@unrs/resolver-binding-openharmony-arm64": "1.12.2",
-        "@unrs/resolver-binding-wasm32-wasi": "1.12.2",
-        "@unrs/resolver-binding-win32-arm64-msvc": "1.12.2",
-        "@unrs/resolver-binding-win32-ia32-msvc": "1.12.2",
-        "@unrs/resolver-binding-win32-x64-msvc": "1.12.2"
-      }
-    },
-    "node_modules/update-browserslist-db": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
-      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "escalade": "^3.2.0",
-        "picocolors": "^1.1.1"
-      },
-      "bin": {
-        "update-browserslist-db": "cli.js"
-      },
-      "peerDependencies": {
-        "browserslist": ">= 4.21.0"
-      }
-    },
-    "node_modules/util": {
-      "version": "0.10.4",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
-      "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
-      "license": "MIT",
-      "dependencies": {
-        "inherits": "2.0.3"
-      }
-    },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "license": "MIT"
-    },
-    "node_modules/util/node_modules/inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
-      "license": "ISC"
-    },
-    "node_modules/utils-merge": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
-    "node_modules/uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
-      "deprecated": "uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).",
-      "funding": [
-        "https://github.com/sponsors/broofa",
-        "https://github.com/sponsors/ctavan"
-      ],
-      "license": "MIT",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
-    "node_modules/v8-to-istanbul": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.3.0.tgz",
-      "integrity": "sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.12",
-        "@types/istanbul-lib-coverage": "^2.0.1",
-        "convert-source-map": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10.12.0"
-      }
-    },
-    "node_modules/validator": {
-      "version": "13.15.35",
-      "resolved": "https://registry.npmjs.org/validator/-/validator-13.15.35.tgz",
-      "integrity": "sha512-TQ5pAGhd5whStmqWvYF4OjQROlmv9SMFVt37qoCBdqRffuuklWYQlCNnEs2ZaIBD1kZRNnikiZOS1eqgkar0iw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/walker": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
-      "integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "makeerror": "1.0.12"
-      }
-    },
-    "node_modules/webidl-conversions": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "license": "BSD-2-Clause"
-    },
-    "node_modules/whatwg-url": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "license": "MIT",
-      "dependencies": {
-        "tr46": "~0.0.3",
-        "webidl-conversions": "^3.0.0"
-      }
-    },
-    "node_modules/which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-      "license": "ISC",
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "which": "bin/which"
-      }
-    },
-    "node_modules/wkx": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/wkx/-/wkx-0.5.0.tgz",
-      "integrity": "sha512-Xng/d4Ichh8uN4l0FToV/258EjMGU9MGcA0HV2d9B/ZpZB3lqQm7nkOdZdm5GhKtLLhAE7PiVQwN4eN+2YJJUg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/write-file-atomic": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz",
-      "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "imurmurhash": "^0.1.4",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.4"
-      }
-    },
-    "node_modules/y18n": {
-      "version": "5.0.8",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
-      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "license": "ISC"
-    },
-    "node_modules/yargs": {
-      "version": "16.2.2",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.2.tgz",
-      "integrity": "sha512-Nt9ZJjXTv5R8MHbqby/wXQ6Gi0Bb3TcYZkR1bzuL4yB2OxWPkXknz513gEF0GoA6tn00UpbPvERW8rzCuWCA6w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cliui": "^7.0.2",
-        "escalade": "^3.1.1",
-        "get-caller-file": "^2.0.5",
-        "require-directory": "^2.1.1",
-        "string-width": "^4.2.0",
-        "y18n": "^5.0.5",
-        "yargs-parser": "^20.2.2"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/yargs-parser": {
-      "version": "20.2.9",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
-      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/yargs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/yargs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/yargs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/yargs/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/yocto-queue": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
-      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    }
-  }
-}
diff --git a/package.json b/package.json
index 044bc49..ccf6244 100644
--- a/package.json
+++ b/package.json
@@ -1,63 +1,13 @@
 {
-  "name": "star-auth-system",
-  "version": "1.0.0",
-  "description": "STAR Phase 1 - Tier 1 Auth System with CSRF, Rate Limiting, RBAC, Google & System Auth",
-  "main": "server.js",
+  "name": "new_starr",
+  "private": true,
+  "packageManager": "pnpm@11.3.0",
   "scripts": {
-    "start": "node server.js",
-    "dev": "nodemon server.js",
-    "test": "jest",
-    "db:migrate": "sequelize-cli db:migrate",
-    "db:migrate:undo": "sequelize-cli db:migrate:undo",
-    "db:migrate:undo:all": "sequelize-cli db:migrate:undo:all",
-    "db:migrate:status": "sequelize-cli db:migrate:status",
-    "db:seed": "sequelize-cli db:seed:all",
-    "db:seed:undo": "sequelize-cli db:seed:undo:all"
-  },
-  "dependencies": {
-    "@aws-sdk/client-s3": "^3.1068.0",
-    "@aws-sdk/lib-storage": "^3.1085.0",
-    "@aws-sdk/s3-request-presigner": "^3.1068.0",
-    "axios": "^1.16.0",
-    "bcryptjs": "^2.4.3",
-    "connect-pg-simple": "^10.0.0",
-    "cookie-parser": "^1.4.6",
-    "cors": "^2.8.5",
-    "csurf": "^1.11.0",
-    "currency-codes": "^2.2.0",
-    "dotenv": "^16.0.3",
-    "express": "^4.18.2",
-    "express-rate-limit": "^6.10.0",
-    "express-session": "^1.17.3",
-    "express-validator": "^7.0.1",
-    "ffprobe-static": "^3.1.0",
-    "fluent-ffmpeg": "^2.1.3",
-    "form-data": "^4.0.5",
-    "google-auth-library": "^9.0.0",
-    "http-proxy-middleware": "^4.0.0",
-    "jsonwebtoken": "^9.0.1",
-    "multer": "^2.1.1",
-    "node-cron": "^4.2.1",
-    "nodemailer": "^6.9.5",
-    "path": "^0.12.7",
-    "pg": "^8.11.3",
-    "pg-hstore": "^2.3.4",
-    "rate-limit-redis": "^4.0.0",
-    "redis": "^4.6.7",
-    "sequelize": "^6.32.1",
-    "sharp": "^0.35.3",
-    "ua-parser-js": "^2.0.10",
-    "uuid": "^9.0.0"
+    "dev": "concurrently -n api,web -c blue,green \"pnpm --filter api dev\" \"pnpm --filter web dev\"",
+    "build": "pnpm --filter web build",
+    "start": "pnpm --filter api start"
   },
   "devDependencies": {
-    "jest": "^30.4.2",
-    "nodemon": "^3.0.1",
-    "sequelize-cli": "^6.6.5"
-  },
-  "jest": {
-    "testMatch": [
-      "**/tests/**/*.test.js"
-    ],
-    "forceExit": true
+    "concurrently": "^9.2.1"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b8674bc..e4831e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,19 +7,25 @@ settings:
 importers:
 
   .:
+    devDependencies:
+      concurrently:
+        specifier: ^9.2.1
+        version: 9.2.4
+
+  apps/api:
     dependencies:
       '@aws-sdk/client-s3':
         specifier: ^3.1068.0
-        version: 3.1085.0
+        version: 3.1116.0
       '@aws-sdk/lib-storage':
         specifier: ^3.1085.0
-        version: 3.1085.0(@aws-sdk/client-s3@3.1085.0)
+        version: 3.1116.0(@aws-sdk/client-s3@3.1116.0)
       '@aws-sdk/s3-request-presigner':
         specifier: ^3.1068.0
-        version: 3.1085.0
+        version: 3.1116.0
       axios:
         specifier: ^1.16.0
-        version: 1.16.1
+        version: 1.19.0
       bcryptjs:
         specifier: ^2.4.3
         version: 2.4.3
@@ -61,7 +67,7 @@ importers:
         version: 2.1.3
       form-data:
         specifier: ^4.0.5
-        version: 4.0.5
+        version: 4.0.6
       google-auth-library:
         specifier: ^9.0.0
         version: 9.15.1
@@ -73,7 +79,7 @@ importers:
         version: 9.0.3
       multer:
         specifier: ^2.1.1
-        version: 2.1.1
+        version: 2.2.0
       node-cron:
         specifier: ^4.2.1
         version: 4.6.0
@@ -85,7 +91,7 @@ importers:
         version: 0.12.7
       pg:
         specifier: ^8.11.3
-        version: 8.21.0
+        version: 8.23.0
       pg-hstore:
         specifier: ^2.3.4
         version: 2.3.4
@@ -97,7 +103,10 @@ importers:
         version: 4.7.1
       sequelize:
         specifier: ^6.32.1
-        version: 6.37.8(pg-hstore@2.3.4)(pg@8.21.0)
+        version: 6.37.8(pg-hstore@2.3.4)(pg@8.23.0)
+      sharp:
+        specifier: ^0.35.3
+        version: 0.35.3(@types/node@26.2.0)
       ua-parser-js:
         specifier: ^2.0.10
         version: 2.0.10
@@ -107,7 +116,7 @@ importers:
     devDependencies:
       jest:
         specifier: ^30.4.2
-        version: 30.4.2(@types/node@25.9.1)
+        version: 30.4.2(@types/node@26.2.0)
       nodemon:
         specifier: ^3.0.1
         version: 3.1.14
@@ -115,84 +124,250 @@ importers:
         specifier: ^6.6.5
         version: 6.6.5
 
+  apps/web:
+    dependencies:
+      '@base-ui/react':
+        specifier: ^1.4.1
+        version: 1.7.0(@date-fns/tz@1.5.0)(@types/react@19.2.18)(date-fns@4.4.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@fontsource-variable/geist':
+        specifier: ^5.2.8
+        version: 5.3.0
+      '@hookform/resolvers':
+        specifier: ^5.2.2
+        version: 5.9.1(@sinclair/typebox@0.34.52)(@standard-schema/spec@1.1.0)(ajv-formats@2.1.1(ajv@8.20.0))(ajv@8.20.0)(react-hook-form@7.86.0(react@19.2.8))(zod@4.4.3)
+      '@radix-ui/react-tabs':
+        specifier: ^1.1.13
+        version: 1.1.21(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@tailwindcss/vite':
+        specifier: ^4.2.4
+        version: 4.3.3(vite@8.2.2(@types/node@26.2.0)(jiti@2.7.0))
+      '@tanstack/react-table':
+        specifier: ^8.21.3
+        version: 8.21.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@tauri-apps/api':
+        specifier: ^2.11.0
+        version: 2.11.1
+      axios:
+        specifier: ^1.16.0
+        version: 1.19.0
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      cmdk:
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      date-fns:
+        specifier: ^4.1.0
+        version: 4.4.0
+      embla-carousel-react:
+        specifier: ^8.6.0
+        version: 8.6.0(react@19.2.8)
+      framer-motion:
+        specifier: ^12.38.0
+        version: 12.43.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      input-otp:
+        specifier: ^1.4.2
+        version: 1.5.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      lucide-react:
+        specifier: ^1.14.0
+        version: 1.33.0(react@19.2.8)
+      nanoid:
+        specifier: ^5.1.11
+        version: 5.1.16
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      pdfjs-dist:
+        specifier: ^6.0.227
+        version: 6.2.108
+      qrcode.react:
+        specifier: ^4.2.0
+        version: 4.2.0(react@19.2.8)
+      radix-ui:
+        specifier: ^1.4.3
+        version: 1.6.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react:
+        specifier: ^19.2.5
+        version: 19.2.8
+      react-day-picker:
+        specifier: ^9.14.0
+        version: 9.14.0(react@19.2.8)
+      react-dom:
+        specifier: ^19.2.5
+        version: 19.2.8(react@19.2.8)
+      react-easy-crop:
+        specifier: ^6.0.2
+        version: 6.2.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react-helmet-async:
+        specifier: ^3.0.0
+        version: 3.0.0(react@19.2.8)
+      react-hook-form:
+        specifier: ^7.75.0
+        version: 7.86.0(react@19.2.8)
+      react-icons:
+        specifier: ^5.6.0
+        version: 5.7.0(react@19.2.8)
+      react-markdown:
+        specifier: ^10.1.0
+        version: 10.1.0(@types/react@19.2.18)(react@19.2.8)
+      react-phone-number-input:
+        specifier: ^3.4.17
+        version: 3.4.18(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react-photo-view:
+        specifier: ^1.2.7
+        version: 1.2.7(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react-resizable-panels:
+        specifier: ^4.11.0
+        version: 4.12.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react-router-dom:
+        specifier: ^7.14.2
+        version: 7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      recharts:
+        specifier: 3.8.0
+        version: 3.8.0(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@19.2.8)(react@19.2.8)(redux@5.0.1)
+      remark-gfm:
+        specifier: ^4.0.1
+        version: 4.0.1
+      shadcn:
+        specifier: ^4.6.0
+        version: 4.19.0
+      sonner:
+        specifier: ^2.0.7
+        version: 2.0.8(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      tailwind-merge:
+        specifier: ^3.5.0
+        version: 3.6.0
+      tw-animate-css:
+        specifier: ^1.4.0
+        version: 1.4.0
+      vaul:
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      xlsx-js-style:
+        specifier: ^1.2.0
+        version: 1.2.0
+      zod:
+        specifier: ^4.4.3
+        version: 4.4.3
+    devDependencies:
+      '@eslint/js':
+        specifier: ^10.0.1
+        version: 10.0.1(eslint@10.9.0(jiti@2.7.0))
+      '@types/react':
+        specifier: ^19.2.14
+        version: 19.2.18
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.4(@types/react@19.2.18)
+      '@vitejs/plugin-react':
+        specifier: ^6.0.1
+        version: 6.1.0(vite@8.2.2(@types/node@26.2.0)(jiti@2.7.0))
+      autoprefixer:
+        specifier: ^10.5.0
+        version: 10.5.4(postcss@8.5.26)
+      eslint:
+        specifier: ^10.2.1
+        version: 10.9.0(jiti@2.7.0)
+      eslint-plugin-react-hooks:
+        specifier: ^7.1.1
+        version: 7.1.1(eslint@10.9.0(jiti@2.7.0))
+      eslint-plugin-react-refresh:
+        specifier: ^0.5.2
+        version: 0.5.4(eslint@10.9.0(jiti@2.7.0))
+      globals:
+        specifier: ^17.5.0
+        version: 17.11.0
+      postcss:
+        specifier: ^8.5.13
+        version: 8.5.26
+      tailwindcss:
+        specifier: ^4.2.4
+        version: 4.3.3
+      vite:
+        specifier: ^8.0.10
+        version: 8.2.2(@types/node@26.2.0)(jiti@2.7.0)
+
 packages:
 
-  '@aws-sdk/checksums@3.1000.16':
-    resolution: {integrity: sha512-EKnvkXSmz3IpA99tCNuI+dLFXyZyClSm8zns9sB/elvkU+MTuomAs6toJMPMBf98/fICG/urXDkzGz0/c3yyAQ==}
+  '@aws-sdk/checksums@3.1000.29':
+    resolution: {integrity: sha512-Dtu0gr4dnATZAPwEYbpCsG+MpLM7OAliy2gTepEFQwl1vZ6DL3QMH2FveMa3HLvPsOdhJsPRB3KtxVhph9T75A==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/client-s3@3.1085.0':
-    resolution: {integrity: sha512-O0xe8sR50AYkwxlvRRsV0qytEO2dtXQTQ1CF3YBBdE5xtVkbu27H0vGa1mjQi1/+fbYM80AWEIPai5jZmXyubw==}
+  '@aws-sdk/client-s3@3.1116.0':
+    resolution: {integrity: sha512-UKRl9qSVW0rZpvSOauQNpYAy8+ONBAVYnpfKVtCyOF+FZVT1tl6MunYuHvuarCrroD2/YJs+tHTALYNgAlec3Q==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/core@3.975.1':
-    resolution: {integrity: sha512-8qh/6EYb7hl/ZwVfQufhbMEZs1gQIc7GbdrIf4eprQJ7cv042+74nE6l3YDfyWNzb9iPXb8fRyYSHkNIk5eE6Q==}
+  '@aws-sdk/core@3.977.9':
+    resolution: {integrity: sha512-reqPFEQrZxDZpeGj4PFMepBeR5LGYHRqq/L0motTzgFkCRBA4rFdaVXDSLYyGHhxVz7sT2PDnPN9CluGSfgyJA==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/credential-provider-env@3.972.57':
-    resolution: {integrity: sha512-1RfJaF7SW1TOnvNGU7kaYjwUf5H3sfm+synGH1bHhRlqcnxCt3szebH3dmKEyY4tuGcbQ6ffzUT89cRitBV8OQ==}
+  '@aws-sdk/credential-provider-env@3.972.70':
+    resolution: {integrity: sha512-H404B7dJl2mCrBqahDEYsanB0xhdDp6tXnXcTUnXmmpy2Q3J0Ho0bUajZ2jr/RdwzCyS59Gi8xXIFwPLGBl6Uw==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/credential-provider-http@3.972.59':
-    resolution: {integrity: sha512-sRCkpTiFnCdQvuaRVjQ6SVoHu6i7RUpurVo1c4F81HWhPvUJ7Wdp5MNtSdX1O29CNXc8em3O5m52hCjVtAD9SA==}
+  '@aws-sdk/credential-provider-http@3.972.72':
+    resolution: {integrity: sha512-X98zYOrVOeuosCX+6ktf29FC2N2GHPLia7qv6mzPzTc+RPAuHWCDS++Z6JK7eGYqb/v6uaW7bAXaOvDBfol+0w==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/credential-provider-ini@3.973.1':
-    resolution: {integrity: sha512-6d8H6ZAh3ZPKZ6fe1nG2OWeZEZPtt9ravoD1dezPdPtsSkJRoxGAnFSHwKT3E/Te6fHE30zRzjV6TD12rvF6yQ==}
+  '@aws-sdk/credential-provider-ini@3.973.15':
+    resolution: {integrity: sha512-Rykg6s5ceBuynMOGWgoowO4N+27JfnqXAnVaSunZl0hOO1XodSrxGNz6sCEbnmS0lAfQZDKyb3fbr46gSuv6Sg==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/credential-provider-login@3.972.63':
-    resolution: {integrity: sha512-GREWRrMj0XnNKMaVa/Mauoaui26qBEHu71WWqXbwZOu/jFQOnPZjTf7u0KtGKC8VGa6VUs9kDWGgocrKNLS9vw==}
+  '@aws-sdk/credential-provider-login@3.972.77':
+    resolution: {integrity: sha512-Jb59xfEISoN5mmbnA+HYqdtrSX3CgCtJoof+V5D8/TgUI56W63GEEd5Y58WijU3Ou6+WEgaLD1feVzaRXV5IDQ==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/credential-provider-node@3.972.66':
-    resolution: {integrity: sha512-f+qjRXZpz7sgzbc4QB+6nLKfyKFgRRXzWdXbsKPv/VhVRyHsDyq4yBWC/B75BAJpFIcUeI2XR/3gdWJ677zB4A==}
+  '@aws-sdk/credential-provider-node@3.972.81':
+    resolution: {integrity: sha512-Rml+WitoFvXmv6JZ18U/xGdGDGGvB/mOin0ya0lTnTrdC0Z1lrVxTYh7iNklZBcvcRMrs4DoEf6xy1KWyrLQQw==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/credential-provider-process@3.972.57':
-    resolution: {integrity: sha512-TiVQhuU0pbhIZAUZacbPHMyzrIdiH+lnx+PMY/Pu/b93dJrq3wdZwzUJ0TPpvNxaqbHsxJvQZW3/h/beLiKq7Q==}
+  '@aws-sdk/credential-provider-process@3.972.70':
+    resolution: {integrity: sha512-2ry03fGRJr4sV3jI+ocjj5JqALnFD6ymM5KiNCDZMvq8bX2GSbE0vji4aM43TVCl2nXqqLRZaUxdq/KeWRAY4Q==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/credential-provider-sso@3.973.1':
-    resolution: {integrity: sha512-3foTZUJ4821Ij60X7K3NJroygiZLnbBmarN+T//O2cjkISan90zElN3NBmgSlDrTQ7Gs6z/yO8V7h60QNcDZHQ==}
+  '@aws-sdk/credential-provider-sso@3.973.14':
+    resolution: {integrity: sha512-jkhg/8ocAAoc0RFyLMhCw+/zZh7gystQgd4F4hznNa8P4Cc501PQmxd+jGLiMHodPJ+7Zv/3znM62gZojyasmA==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/credential-provider-web-identity@3.972.63':
-    resolution: {integrity: sha512-8qZLFhM69eKcS37m459ctPR05Qimycm/74OPVioe6wNZabMT54GYhwBju0+J656RkMasNSawWQu+c8CmBe3TUQ==}
+  '@aws-sdk/credential-provider-web-identity@3.972.76':
+    resolution: {integrity: sha512-d3AGyVu759PGr35mEB2s22xxlNEA5rpdxtSPJthfPFJvoQ8dt357iVPECqWfUxXp1toJAvKmbtcIYVGigaGsCA==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/lib-storage@3.1085.0':
-    resolution: {integrity: sha512-S+yCGIMxQ5Zs2A5ZDdYfXwOxu5kKjBaCQVOxp6+mnwCQYXUNkBD/aKCnW1eniMTavzz3YidhD5eTFpDlcUv2gQ==}
+  '@aws-sdk/lib-storage@3.1116.0':
+    resolution: {integrity: sha512-40z1NyzCbRX9bD6g3dJ6E4WDbYPDod6XHTIbNZPnGDYMYH2TPIj6LyRZ94fWPKGYnJpO0Q0Uhi2lSnn2E7PIdg==}
     engines: {node: '>=20.0.0'}
     peerDependencies:
-      '@aws-sdk/client-s3': ^3.1085.0
+      '@aws-sdk/client-s3': ^3.1116.0
 
-  '@aws-sdk/middleware-sdk-s3@3.972.62':
-    resolution: {integrity: sha512-k8JJwYXVYlOOjWnPZDThQS1xDFJgi5Dokt73qFlDtrZAbdcint5aIdjB9XgJAAQVP5OoqcefQmh1FYXiPpvsvw==}
+  '@aws-sdk/middleware-sdk-s3@3.972.75':
+    resolution: {integrity: sha512-wMIsNumRVKaNMKhvU/s9VrdEwE8S6gSzXp4RygFG5BEMnGkkXf8cjh8zf7cKJBpUDpqTWqwbz5isEgp9rH6Lng==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/nested-clients@3.997.31':
-    resolution: {integrity: sha512-BDHTpwcsZHEBNEJzOg/B1BkFYJxAXY50dau/NyVWs3d51F0WgIUGSWZot/Os+N3KpDhXeaXnz37mWffAvduREw==}
+  '@aws-sdk/nested-clients@3.997.44':
+    resolution: {integrity: sha512-NhEgryjlBF9w38ZXqGymQV28IhkYa1mKhlbYnqIis57AYwWGVYfUPgg/qC2rLRqOUfblxx++irvju10kVTa8Vw==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/s3-request-presigner@3.1085.0':
-    resolution: {integrity: sha512-h8fv0zGAHPCjCpmAYdCeFE6trxXxLRxza0NRIajMZdnFgugtcIWcRAdAtc7rHvRTaXsej/I5YWXbq9SgKuCKow==}
+  '@aws-sdk/s3-request-presigner@3.1116.0':
+    resolution: {integrity: sha512-WwaaVpvrZyML5L8SNY7sUGsYlMeCHzQ/8A/ms7dz/7sfYRvPn+qf0OasUWk+zuT8qGwjsYhILD0WVtlqUU08pQ==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/signature-v4-multi-region@3.996.39':
-    resolution: {integrity: sha512-8+srXqYIF8KYMLC4FxMLEM5Ek7kUNibJu1R4m8/fUhhNYIZZz26oGtKkCr8I/HiG2fFQxBvaGgQZT4/mqRCSnA==}
+  '@aws-sdk/signature-v4-multi-region@3.996.46':
+    resolution: {integrity: sha512-L+2xZTye/2T96f3lwCws0Zw6GG2JHZW9e8FpVgGBeeExSKyeoZ6CWRpBml/7DNiK/O26jrgPM9F+Ay8VkgzUWQ==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/token-providers@3.1083.0':
-    resolution: {integrity: sha512-s0woKnxuHrExLc5L2ArIH5BMkbonHPtt+5hSBM8oknp9M6QTuUmmAmJ2E0EdzCGONrO+8+ADPqvv6UX0nNcc7A==}
+  '@aws-sdk/token-providers@3.1116.0':
+    resolution: {integrity: sha512-ygIivKqh8aHzNkucOCXHyIBgBpLPfrSI0mCqXF+vLBsPTUKqj0VSqAY0GFPe7lQl4HntjOcQ+KSyS7oUV2C54Q==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/types@3.974.0':
-    resolution: {integrity: sha512-QIBrw90CDm4O0UaIIzkU6DrFdeJzEb2Va5EPEVpyldj6sHJxB6cshhStJuhZxk3wR3PmjJlYsjPmY1kNb+KGBg==}
+  '@aws-sdk/types@3.974.5':
+    resolution: {integrity: sha512-LkwLL2BLbC6wNNm4JaH9mbEqBMdOZCct6VAYqhdN4U1xrWM+fUJQEfbHwQgDypapOWTRtlk25akb5afM0P8CIQ==}
     engines: {node: '>=20.0.0'}
 
-  '@aws-sdk/xml-builder@3.972.34':
-    resolution: {integrity: sha512-wHhWL1y7sN3enBA8POrPpQM5jCcmu2ozyhbRei4c8OjVcEaEs6yLucLa/pla457ggS/ysuy7bosagz3HaJkZXA==}
+  '@aws-sdk/xml-builder@3.972.40':
+    resolution: {integrity: sha512-wlFmCIGUlwF4zx/kncw+bmxTQh1HeSJq4mYV/V5cZUSJadDP3kXvGW8Rn21cimj/7y9ju+47oYWXi97vF7czaA==}
     engines: {node: '>=20.0.0'}
 
   '@aws/lambda-invoke-store@0.3.0':
@@ -211,18 +386,32 @@ packages:
     resolution: {integrity: sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.29.7':
-    resolution: {integrity: sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==}
+  '@babel/generator@7.29.8':
+    resolution: {integrity: sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-annotate-as-pure@7.29.7':
+    resolution: {integrity: sha512-OoK6239jHPuSQOoS0kfTVKn0b/rVTk0seKq4Gd2UMLtmOVLjDC0ki3e+c90Trqv2gMfvJFqkiljrr568+qddiw==}
     engines: {node: '>=6.9.0'}
 
   '@babel/helper-compilation-targets@7.29.7':
     resolution: {integrity: sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-create-class-features-plugin@7.29.7':
+    resolution: {integrity: sha512-IY3ZD9Tmooqr3TUhc3DUWxiuo8xx1DWLhd5M7hQ+ZWJamqM2BbalrBJb2MisSLoYorOj75U03qULCxQTY9r3hg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
   '@babel/helper-globals@7.29.7':
     resolution: {integrity: sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-member-expression-to-functions@7.29.7':
+    resolution: {integrity: sha512-j+7JYmk1JYDtACIGj0QJqqWZjoUpMoEikQGADMaHgCMCSDqd2+P32rfcibUNrGOMWrlzK1WJBdxrB3JJQZwWtg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-module-imports@7.29.7':
     resolution: {integrity: sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==}
     engines: {node: '>=6.9.0'}
@@ -233,10 +422,24 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
+  '@babel/helper-optimise-call-expression@7.29.7':
+    resolution: {integrity: sha512-+kmGVjcT9RGYzoDwdwEqEvGgKe3BYq+O1iGzjFubaNgZHwYHP6lsF2Yghf4kEuv9BV7tYDZ913aBW9am6YKong==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-plugin-utils@7.29.7':
     resolution: {integrity: sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-replace-supers@7.29.7':
+    resolution: {integrity: sha512-atfGXWSeCiF4DnKZIfmJfQRkSw9b9gNNXR1kqKjbhG4pGYCOnkp8OcTB8E3NXjBu8NpheSnOeNKz8KT7UNFTmQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.29.7':
+    resolution: {integrity: sha512-brcMGQaVzIeUb+6/bs1Av0f8YuNNjKY2JyvfRCsFuFsdKccEQ5Ges2y74D74NZ1Rz8lKJ9ksJkfqwQFJ/iNEyQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-string-parser@7.29.7':
     resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
     engines: {node: '>=6.9.0'}
@@ -253,8 +456,8 @@ packages:
     resolution: {integrity: sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.29.7':
-    resolution: {integrity: sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==}
+  '@babel/parser@7.29.8':
+    resolution: {integrity: sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
@@ -349,30 +552,415 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-transform-modules-commonjs@7.29.7':
+    resolution: {integrity: sha512-j0vCldybPC5b5dwCQOJ21uKtHzt7hxLygJTg9eF1ScfaikEDNfzn94XoW5Fi+seBR0nCyL23xaBFFkq7dTM8XQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-typescript@7.29.7':
+    resolution: {integrity: sha512-jK52h8LaLc7JarhQV2ofeFMts4H7vnOXnqZNA6fYglBTZewRBE51KWt3BUltW1P+KoPsYkHoJeXePuz4zo2LMw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/preset-typescript@7.29.7':
+    resolution: {integrity: sha512-/Foi8vKY2EVbed/1eZx0gJEEwHAIxogrySI7rULcRIvhZzbvoE/b5qG5Ghc0WKAFKOHA9SD1x7RsFlOYdutIiQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/runtime@7.29.7':
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.29.7':
     resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.29.7':
-    resolution: {integrity: sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==}
+  '@babel/traverse@7.29.8':
+    resolution: {integrity: sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.29.7':
-    resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
+  '@babel/types@7.29.8':
+    resolution: {integrity: sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==}
     engines: {node: '>=6.9.0'}
 
+  '@base-ui/react@1.7.0':
+    resolution: {integrity: sha512-j+8QjX44C32jrXD/qyEAGpFr70FRpGL2CY61mQd9nBPWN737CK0xxD1ceJ055rW4RtdvFDT1e7otzdlfxvsYug==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@date-fns/tz': ^1.2.0
+      '@types/react': ^17 || ^18 || ^19
+      date-fns: ^4.0.0
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@date-fns/tz':
+        optional: true
+      '@types/react':
+        optional: true
+      date-fns:
+        optional: true
+
+  '@base-ui/utils@0.3.2':
+    resolution: {integrity: sha512-oWy1aq/I2GmYjpl4PhEAhzflF8VPGKgZeq0xAWTbfD5KBWyxcN0ZP2+WHSUm/5Z6lVMBDLReLcoXwSYoRc/zNQ==}
+    peerDependencies:
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@bcoe/v8-coverage@0.2.3':
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
 
+  '@date-fns/tz@1.5.0':
+    resolution: {integrity: sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg==}
+
+  '@dotenvx/dotenvx@1.75.1':
+    resolution: {integrity: sha512-/BITOC9dmS/edY2zQwZNicQ059O6RKabtQfyEafV0nGtfYRNHYy1DIPiYVcov40+tob9hfmBnbR963dS+EQ1DQ==}
+    hasBin: true
+
+  '@dotenvx/primitives@0.8.0':
+    resolution: {integrity: sha512-VYJy0uhFm9zTJ1TxBaW/pA8bjbOM/OttaNMwZ1RHG4JKyRG7DhSdiqD1ipQoAyoD22olUtxbP78W9xY3Wd11bg==}
+
   '@emnapi/core@1.10.0':
     resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
 
   '@emnapi/runtime@1.10.0':
     resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
 
+  '@emnapi/runtime@1.11.3':
+    resolution: {integrity: sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==}
+
   '@emnapi/wasi-threads@1.2.1':
     resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
 
+  '@eslint-community/eslint-utils@4.10.1':
+    resolution: {integrity: sha512-cuadcxVFE8sDK6iWJbs8Sn0av2Nrh2QSGQhVlBW9AaAHqHwjWsZHT8LJ4hFGPh7ASBV2deFdM7H/DPjulmh8rg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.12.2':
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/config-array@0.23.5':
+    resolution: {integrity: sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/config-helpers@0.7.0':
+    resolution: {integrity: sha512-DObd/KKUsU+FaFv4PLxSRenpXfQWmPXXP3pPZ6/K1PCrMu2vQpMDMuQe/BqYeoLcz8ro0bVDF1RxOJgfVEdhUw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/core@1.2.1':
+    resolution: {integrity: sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/js@10.0.1':
+    resolution: {integrity: sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    peerDependencies:
+      eslint: ^10.0.0
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+
+  '@eslint/object-schema@3.0.5':
+    resolution: {integrity: sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/plugin-kit@0.7.2':
+    resolution: {integrity: sha512-+CNAzxglkrpNf/kKywqQfk74QjtceuOE7Qm+AF8miRvPF/wmmK5+OJOgVh3AVTT3RP2mH3+FOaxlE5v72owk0A==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@floating-ui/core@1.8.0':
+    resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}
+
+  '@floating-ui/dom@1.8.0':
+    resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==}
+
+  '@floating-ui/react-dom@2.1.9':
+    resolution: {integrity: sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.12':
+    resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
+
+  '@fontsource-variable/geist@5.3.0':
+    resolution: {integrity: sha512-j0m+vLQuG5XAYoHtGCVu0spvlGreR3EzpECUVzkFmI1mTVnAO38l/NEPDCFgZ177JxzYJCLSmTQibIiYPilGrA==}
+
+  '@hono/node-server@2.1.1':
+    resolution: {integrity: sha512-ELuehkj5VCBdgEw9zs+ivkKwyzzUCSQuE96YmiPvn1ECBoZCczbFXJLeEGMTYjphP6gydh4pHMqEYPVMYUVgQg==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      hono: ^4
+
+  '@hookform/resolvers@5.9.1':
+    resolution: {integrity: sha512-7b7vsbraJxKgjVSA1Nur9tLwj539WGJUBLA7QNvXnFoT2pM5Z7G+6rlukk4B2/QrTZy6huRtH6wKeESPKuIr6w==}
+    peerDependencies:
+      '@sinclair/typebox': '>=0.25.24'
+      '@standard-schema/spec': ^1.0.0
+      '@typeschema/main': '>=0.13.7'
+      '@vinejs/vine': ^2.0.0 || ^3.0.0 || ^4.0.0
+      ajv: ^8.12.0
+      ajv-errors: ^3.0.0
+      ajv-formats: ^2.1.1
+      arktype: ^2.0.0
+      ata-validator: ^1.2.0
+      class-transformer: '>=0.4.0'
+      class-validator: '>=0.12.0'
+      computed-types: ^1.0.0
+      effect: ^3.10.3
+      fluentvalidation-ts: ^3.0.0
+      fp-ts: ^2.7.0
+      io-ts: ^2.0.0
+      joi: ^17.0.0 || ^18.0.0
+      nope-validator: '>=0.12.0'
+      react-hook-form: ^7.55.0
+      superstruct: '>=0.12.0'
+      typanion: ^3.3.2
+      valibot: '>=0.31.0 || ^1.0.0-beta.4 || ^1.0.0-rc'
+      vest: '>=6.0.0'
+      yup: ^1.0.0
+      zod: ^3.25.0 || ^4.0.0
+    peerDependenciesMeta:
+      '@sinclair/typebox':
+        optional: true
+      '@standard-schema/spec':
+        optional: true
+      '@typeschema/main':
+        optional: true
+      '@vinejs/vine':
+        optional: true
+      ajv:
+        optional: true
+      ajv-errors:
+        optional: true
+      ajv-formats:
+        optional: true
+      arktype:
+        optional: true
+      ata-validator:
+        optional: true
+      class-transformer:
+        optional: true
+      class-validator:
+        optional: true
+      computed-types:
+        optional: true
+      effect:
+        optional: true
+      fluentvalidation-ts:
+        optional: true
+      fp-ts:
+        optional: true
+      io-ts:
+        optional: true
+      joi:
+        optional: true
+      nope-validator:
+        optional: true
+      superstruct:
+        optional: true
+      typanion:
+        optional: true
+      valibot:
+        optional: true
+      vest:
+        optional: true
+      yup:
+        optional: true
+      zod:
+        optional: true
+
+  '@humanfs/core@0.19.2':
+    resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.8':
+    resolution: {integrity: sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/types@0.15.0':
+    resolution: {integrity: sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+
+  '@img/colour@1.1.0':
+    resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
+    engines: {node: '>=18'}
+
+  '@img/sharp-darwin-arm64@0.35.3':
+    resolution: {integrity: sha512-RMnFX7YQsMoh7lWfcM4NEHHymBX/rLuKNPVM84XE9ONPcaSCDgE7CHIHpSgPcO2xcRthgBy1HfNO319mwhIAkg==}
+    engines: {node: '>=20.9.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.35.3':
+    resolution: {integrity: sha512-Xo+5uFBtLN0BKqieTxiFzFPQAUlBbbH5iBKyRX/z1JrbnYsHTfKJnUfL8+p2TPXr1pXqao4eeL4Rl144uDpK9w==}
+    engines: {node: '>=20.9.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-freebsd-wasm32@0.35.3':
+    resolution: {integrity: sha512-lUxcqWIj2wMQ9BrwNjngcr1gWUr5xgaGThBRqPPalIC2n67Cqj1uPh8NnA/ZhAg8hUbKl+kVHKwgUIwe6ZYPrg==}
+    engines: {node: '>=20.9.0'}
+    os: [freebsd]
+
+  '@img/sharp-libvips-darwin-arm64@1.3.2':
+    resolution: {integrity: sha512-9J6ypZFpQBj4YnePGoq/S38w6nz+vqg5WZLrLGY4YuSemdMq47GMLBPO42MzwdGwpg/agZ7xzZcFHa48xlywfg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.3.2':
+    resolution: {integrity: sha512-m2pW1n6cns9VaubNwsZ+c3CRYjxNQWgJ5gPlnL1nbBcpkBvFm6SCFN5o0psFHI8w9n11NKhFkeEDns98tiqbEw==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-linux-arm64@1.3.2':
+    resolution: {integrity: sha512-dqVSFynCox4C/J8kT16V7SIFAns0IjgLwkvYT7p8LQVmJ5OS5b6tI9IGflxTeuBS//zXeFIUbwt5dwxyZ17cnA==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-arm@1.3.2':
+    resolution: {integrity: sha512-1eMLzy92I4J6rmi4mAT8yC3HxOtniyGELlzGbNMLLeqe052ahFQ0h6LFq+lh5DsDIdYViIDst08abvSbcEdLXQ==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-ppc64@1.3.2':
+    resolution: {integrity: sha512-3z0NHDxD6n5I9gc05U1eW1AyRm+Gznzq3naMrthPNqE6oYykcogW0l/jfpJdjYnuNl8R7yI9pNbE1XiUeyq0Aw==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-riscv64@1.3.2':
+    resolution: {integrity: sha512-bsb4rI+NldGOsXuej2r8OdSS8+zXDVaCWxyWrcv6kneTOlgAHtZABRzBBCwdsPiD90J4myNJuHpg6kA20ImW/w==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-s390x@1.3.2':
+    resolution: {integrity: sha512-/ABshyj8gCpyIrNXnHn4LorDJ0HHm1VhXPBlxZ8zAtfVPAaSafXPGn+sUSIRiwaSBy0mmFjSjiXI5mkcwdChKQ==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-x64@1.3.2':
+    resolution: {integrity: sha512-ITPEtgffGJ0S6G9dRyw/366tJQqFRcHWPHhC+Stpg3Z8AEMrDrTr2lhdz4f/Y/HMbRh//7Z5mBzEpVdi62Oc3w==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.3.2':
+    resolution: {integrity: sha512-zE9EdiUzUmg5mDT5a1rk5fYJ6GWPloTwWBYDS14naqHsL+EaMpDj1AWnpLgh3u0YCORv2Tt50wrcrpYqkP97Kw==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-libvips-linuxmusl-x64@1.3.2':
+    resolution: {integrity: sha512-m0lrLiUt+lBYnCFr8qV/65yMR4E/c7/wf78I5eKTdkEakFAlZ9QlzEM3QIhhAwVeUhLAHLcCq7a7Vszq/oFNZQ==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-linux-arm64@0.35.3':
+    resolution: {integrity: sha512-QgKDspHPnrU+GQ55XPhGwyhC8acLVOOSyAvo1oVfFmrIXLkDNmGWzAfDZ4xK8oSA1qBQrALcHX0G5UZni/SuFQ==}
+    engines: {node: '>=20.9.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-arm@0.35.3':
+    resolution: {integrity: sha512-affVWCTLooy8TSxbDx2qkzuDeaWLNVBA+P//FNBirHsXpP2fuBhk5AuboYUnrDnzoXes8GFjpTx0SBFOCRg+FA==}
+    engines: {node: '>=20.9.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-ppc64@0.35.3':
+    resolution: {integrity: sha512-sMd8rDxmpLOwv/7N44klFjOD5DUO7FLdjiXDI0hoxYaf7Ar262dQIEkosE98bps+5HPLtp/EvNqeqQtOycP/IA==}
+    engines: {node: '>=20.9.0'}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-riscv64@0.35.3':
+    resolution: {integrity: sha512-0Eob78yjlYPfL5vMNWAW55l3R9Y6BQS/gOfe0ZcP9mEz9ohhKSt4im1hayiknXgf8AWrFqMvJcKIdmLmEe7yeQ==}
+    engines: {node: '>=20.9.0'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-s390x@0.35.3':
+    resolution: {integrity: sha512-KgAxQ0DxpNOq1rG2t5cgTgShJFGSuU7XO45cqC+1NVOuZnP6tlgZRuSYOfNupGkHID0o3cJOsw4DVeJpMovcGw==}
+    engines: {node: '>=20.9.0'}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-x64@0.35.3':
+    resolution: {integrity: sha512-8pqvxubL2PGdhlPy6GLqzDYMUjyRmKAwKHYKixpdJYBUK7PJ0C029XdsnpFIdgRZG68fZiGdHVWcKPvtiPB4cA==}
+    engines: {node: '>=20.9.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linuxmusl-arm64@0.35.3':
+    resolution: {integrity: sha512-Vz0iQjzzcSX3HCbfwFfCSG/9SCIqyO0mH2sXyiHaAYfBk0cRsCWXRyQYX0ovCK/PAQBbTzQ0dsPQHh5MAFL59w==}
+    engines: {node: '>=20.9.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-linuxmusl-x64@0.35.3':
+    resolution: {integrity: sha512-6O1NPKcDVj9QEdg7Hx549EX8U0rp6yXQERqru6yRN7fGBn32UvIRJUlWnk+8xDCiG76hXVBbX82NZ/ZKr0euIg==}
+    engines: {node: '>=20.9.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-wasm32@0.35.3':
+    resolution: {integrity: sha512-cZ0XkcYGpHZkqW6iCkqTcmUC0CD9DhD5d/qeZlZkfRBn6GnHniZXLUo5+9xw8Iv76YE6LQFN9YNBlKREcCG76w==}
+    engines: {node: '>=20.9.0'}
+
+  '@img/sharp-webcontainers-wasm32@0.35.3':
+    resolution: {integrity: sha512-2rnq7bX3NzeR2T4YWgz8qiG4h3TSdMe+vN1iQXpJleSJ3SM5zQ8Fy2SyyXAWlbxpEZ2Y+Z4u1BePgJEYbSy80Q==}
+    engines: {node: '>=20.9.0'}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-arm64@0.35.3':
+    resolution: {integrity: sha512-4bPwFdMbeC4JQ8L8LOyWp6nsHcboP5fxkp6iPOXz2Vg49R42TuMs2whkJ5OAP4/Ul035qOzy0AecOF9VOscn4w==}
+    engines: {node: '>=20.9.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@img/sharp-win32-ia32@0.35.3':
+    resolution: {integrity: sha512-r53mXsBN6lFUDiST764SvgwUdHAqM4rPAiDzAmf4fLoB6X/rkfyTrLCg6+g17wJJiCmB3JYgHuUldCWUIRFSXw==}
+    engines: {node: ^20.9.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.35.3':
+    resolution: {integrity: sha512-D4y1vNeZrIIJCN+uHaWVtH86B+aCrdMYYjicy9pXHvbGZeGYLLSd3wdVuC37FxVXlU1ARsk84eKWfWMXGYEqvA==}
+    engines: {node: '>=20.9.0'}
+    cpu: [x64]
+    os: [win32]
+
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -483,15 +1071,116 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
-  '@napi-rs/wasm-runtime@1.1.6':
-    resolution: {integrity: sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==}
+  '@modelcontextprotocol/sdk@1.30.0':
+    resolution: {integrity: sha512-xKd8OIzlqNzcqcNumGAa6g+PW2kjD5vrpcKOnfldAUPP3j7lnqMPwlTXQm8gF+UwH72z0lqaRbjr9hqGz0eITA==}
+    engines: {node: '>=18'}
     peerDependencies:
-      '@emnapi/core': ^1.7.1
-      '@emnapi/runtime': ^1.7.1
+      '@cfworker/json-schema': ^4.1.1
+      zod: ^3.25 || ^4.0
+    peerDependenciesMeta:
+      '@cfworker/json-schema':
+        optional: true
+
+  '@napi-rs/canvas-android-arm64@1.0.7':
+    resolution: {integrity: sha512-d5p4hHTykc/9PjiBXkvCH/IC5hT5jH7BjQ1u8ITq+G8x4VmvveOHdy/4BWYcC3ebWRmrG9zEc/oCTy+Yf3iZ4A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@napi-rs/canvas-darwin-arm64@1.0.7':
+    resolution: {integrity: sha512-jKfZl2QDqBr6/Ap/8NKkX0Po9SFfVjUPBJbQQmYGVtQQIazWWIAO60riH3Mz2sOyysa2oJO39sLEfXerypu0vg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@napi-rs/canvas-darwin-x64@1.0.7':
+    resolution: {integrity: sha512-v1asrnKBu0tD+sdSD2qVIUfhoXSrr8LFTn7z76pN+8xsiOrmFcAVty57R/5DB8ZNqNLKsUBDXFSrzf4Wt9NaSg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@napi-rs/canvas-linux-arm-gnueabihf@1.0.7':
+    resolution: {integrity: sha512-c4Hcu4L5bXCgLY8jrZ2hy/Avl65MsbfH9DqNWrrd9InbpBZZF/rmrh7XkgmTUmOFcUrt/PaFSBinW2C0moDgcA==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@napi-rs/canvas-linux-arm64-gnu@1.0.7':
+    resolution: {integrity: sha512-OVW6T1x65BTVfWb//xylCoWxbdII+nzHu3L5T035aerBAnZ5e0nmeTMkMEO9qQrVJq4WcWW8hp+T0dF+JvJPUQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-arm64-musl@1.0.7':
+    resolution: {integrity: sha512-KX/k1UO61XdKlXxhtIkq1ZUH8uP+NNK4vSrBcM2/4wWUUCZaG93BU5s0KuE9n+TFn0jEoqLSlXOuH1pYuV5dcQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@napi-rs/canvas-linux-riscv64-gnu@1.0.7':
+    resolution: {integrity: sha512-r+0Bg+fK8r2AsrbeT7JwBUAERZSjlyhfAMQfZE/zxYGmbswS92hN0FPjynVWbeuz5fIrLfZ6JA5pH8V6drN6qw==}
+    engines: {node: '>= 10'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-x64-gnu@1.0.7':
+    resolution: {integrity: sha512-0tT9KzEcTfb6MWdUWIDfy6uq6UNF691r/9NfXxxl8s9+G5QrD7VP1UC+PAwzsCzJTClIKyidNau/grYTL+QmHw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-x64-musl@1.0.7':
+    resolution: {integrity: sha512-rvT0xo1xA+C7e+U/2ngsxWsl9gC5knHU+z8KTT5VK0Zos4AQbWZvtjvegrmzxm4o2yHE32Lexj6CDEJNvuTczA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@napi-rs/canvas-win32-arm64-msvc@1.0.7':
+    resolution: {integrity: sha512-N6s3yoFFPUDkfRpjUiKERVYkli7ex5Sf0Bu/My6D6gOGYxYolC1KvL6x8U0aN+ScCWAzbkIWcMYR9g0OGsFuVw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@napi-rs/canvas-win32-x64-msvc@1.0.7':
+    resolution: {integrity: sha512-SKTNdBV/ljfhkPsLhXjm4x2PQ0ILpc0PhkBzRHuroJXidZUaF5yh0j3s3dIzB8PrRmW+nEASzyMTaWT3nH1ywQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@napi-rs/canvas@1.0.7':
+    resolution: {integrity: sha512-26wVFEgs6gbe7wmzCrud1pK8q6oOgcUu7OOF24BuazB8ZUCskU9ZSLrCjoWIFVxx09rjAxsXxPleaWowHvdPCA==}
+    engines: {node: '>= 10'}
+
+  '@napi-rs/wasm-runtime@1.2.3':
+    resolution: {integrity: sha512-UMduMbqO5s5zF2NkNacMT/yK5Y5QiKvWr2+50bzIIxFDwVJ2h49b+oyjaCGPhJxd2/gC2x39EHv/gHVuu36x2Q==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=23.5.0}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1 || ^2.0.0-alpha.4
+      '@emnapi/runtime': ^1.7.1 || ^2.0.0-alpha.4
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
 
   '@one-ini/wasm@0.1.1':
     resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
 
+  '@oxc-project/types@0.146.0':
+    resolution: {integrity: sha512-XC0QsnnhVe7sLIWmYmdPw7x5P0h4W8vUU3Nv1ySgWXtvCz8NizoAEpGXA0sOYoJQV2Rl13LgURAHQ5cI5ILCSA==}
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -500,6 +1189,696 @@ packages:
     resolution: {integrity: sha512-SEeaJLb3qBNF/OaXnaR1NmmBbFYk1zC0ZH/52fATcRPLFg/p791YrcyFFy44Bo9sLaGuSuLp5Q6axbb/O+v/RA==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
+  '@radix-ui/number@1.1.3':
+    resolution: {integrity: sha512-Road2bidD0uu/1BGDOWNdPI06g0lIRy6IF9GZcIrDK2KGItfor8IQwQa+yM2ERgHM1MmHxaxpTzk0/Jp42lNfA==}
+
+  '@radix-ui/primitive@1.1.7':
+    resolution: {integrity: sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q==}
+
+  '@radix-ui/react-accessible-icon@1.1.15':
+    resolution: {integrity: sha512-WTQwcAvQf5sOcuUyi90lKPbhwcvQ+j55cjrSmeaN+L2vKU3DooOvlKw2MDeiJ5IkV5N905KW0/fGojKOBhD11A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-accordion@1.2.20':
+    resolution: {integrity: sha512-jDhG9FvAEnlhnjrsINbNXcUa4G+L1KqSkJSunkbKEzFRcAb52jvM0PjPxPRvhe1HNc5F5yc0yzzWeeqlH4yBIg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-alert-dialog@1.1.23':
+    resolution: {integrity: sha512-VAYOiQRqj3GPpYJE0I9J+X8Ip05cyVlNdKOFeiGS2Ou1HHGfpl0BxOyZm6nmVDyU+W+NF3/XLzmjHmVGydhwgA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-arrow@1.1.15':
+    resolution: {integrity: sha512-v4zggRcjadnI+ClKDuijlQEW4tw3NoaeHc/PwpKnLoLLKNUG4InLegkstooLcRIUWCs+8L22dGURCVuFfOKfnA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-aspect-ratio@1.1.15':
+    resolution: {integrity: sha512-fy+dyVR+90nelK8rqIznFlxzx7uPcGbhxH8Nfr2bHb4UfSe+e3hklOC0luK0hDwVwnRX7xTRySpsrQVeW+/oNQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-avatar@1.2.6':
+    resolution: {integrity: sha512-4ULOTJ/mqy2hT9GlWa/MFHxHSvH3nJzHnZM1waNsc5Bonv7i70aNenghXmD97S6OJ81ekXONGGt4nT1r0PfEdA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-checkbox@1.3.11':
+    resolution: {integrity: sha512-Gnptr9pDDQxD3hgq2dtPbtrp/c2qH1mBwIzw3X/ivrMb2e1t0jMTi606fVEqFPaQR1ggXIVQWKj3P2WW9v7zGQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collapsible@1.1.20':
+    resolution: {integrity: sha512-mcGesGplBnzN2sbvJETzpCNfSMyPnb29q1GRLU+Ib7bJrpIG2ywmRoh2V5VbA2uNvKikKUlVbAPks7JDjz4A8Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.15':
+    resolution: {integrity: sha512-9W+B9NPF0NaaPh/1NJd3+KqsnlLqU9H7T2rvww+fp+T/evVXdNAyYcnfRQZFOjkR1ajQp3yORlqnI8soawLvNA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-compose-refs@1.1.5':
+    resolution: {integrity: sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context-menu@2.3.7':
+    resolution: {integrity: sha512-CtXP35dxaB5T3zXSd+E3uHe/QpXcpYnZmxp6OaIbfthtfW4wyb77M23BG+bwIJDtsMwEP/YssdsmNyZu7jhWew==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-context@1.2.2':
+    resolution: {integrity: sha512-RHCUGwKHDr0hDGg4X7ma4JG4/+12qxw8rkh5QKdDldlCvtja6nUx1Ef/8HVrJze81lEsgLQlqjzjGNHantgnQA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dialog@1.1.23':
+    resolution: {integrity: sha512-Ksw4WeROkO4rC9k/onilX/Ao2Cr1ku1unMNH+XSCcP4jSXYu7HDsg9n4ojMjVb22XpYjAQ9qfrFlVbru1vXDUA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.4':
+    resolution: {integrity: sha512-5pzg4FGQNpExhnhT2zlrP1wZFaYCd1K0nYWoFAdcYoYK868IEigqMX3B3f8yIoRlAhAeDWciLI6ZdCKHF9P4Vg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.19':
+    resolution: {integrity: sha512-8g4pfOL9HoKKLWGiypT+dphVqjFfmcXO5GBnhsG6zI+lxAx/8feQpr+1LSN8Re3hiZ+XkLNS4O9ztK11/LzQ6w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dropdown-menu@2.1.24':
+    resolution: {integrity: sha512-geq8l2rJkxvkXsT9RMgtUE3P8pITFpTsvYpbySi1IH4fZEABD/Gp85myayFgxk0ktljGMJnCbeFkyTusvSvv7g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.6':
+    resolution: {integrity: sha512-RNOJjfZMTyBM6xYmV3IVGXkPjIhcBAuv48POevAXwrGJhkWZ9p1rFoIS1JFooPuT193AZmRsCPhpoVJxx6OPoQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.16':
+    resolution: {integrity: sha512-wmRZ2WWLvmt6KHy2rNPOdPUjwq5xOHY02+m+udwJTn0aNIox/rkskAvJTyTLGhPK6KgrUjlJUJpgmx/+wFiFIQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-form@0.1.16':
+    resolution: {integrity: sha512-Q4TLEn2A7TAypxwmd6R9EwrlXDvkfYSDMrq9/887AXAGh+G1rH+kYJKSTv+Si9Y0JPKTwKYv6PviAJosysNimA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-hover-card@1.1.23':
+    resolution: {integrity: sha512-H8qONfZd3ltrU3+jHCIgITbWo6e1iTKvP9DHdrvYbX48ooRM5FjEDTn16AMwdfuOGkWdZEhpl3PLL/Wk/AnHDQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.4':
+    resolution: {integrity: sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-label@2.1.15':
+    resolution: {integrity: sha512-o/rdYEwZTTo5tjknnPeyQFU45kUC4i/XyeDPP+HGyi6XqpOP6Zf5Ya5vh/Yfe9Id5JiuWnnAx2XqIeD3UYZt0g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-menu@2.1.24':
+    resolution: {integrity: sha512-uW7RVuU6Lp/ZtfeY4b3kL32zccgEWvPv1+cf17ubYzHa9cL8AHokmk36cG/XEiH/smbQvumnieXX9j/e9RqJWA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-menubar@1.1.24':
+    resolution: {integrity: sha512-eeVs0vf7cuqXaM0qLQCPcufImiJNVBXdJDLu7ZGYl2732UH23Qat/foNGrr6vYV3/DdTsBqASoggUFgH14OcZA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-navigation-menu@1.2.22':
+    resolution: {integrity: sha512-ou7iLEJ+yrhQndkkA4U21XIdS/CS45F4iXIkTZcb6/Ne9EMsOuDudVmCwmDnfFZZ+y1FZqXRNSIgBy+YMvZVZg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-one-time-password-field@0.1.16':
+    resolution: {integrity: sha512-Tj9P6ntAJEw52oq/F0AGknXR4XncxEt7XU47O3xJQOiWfLzEy3d9gtgKfvjSzGxzHkfL+VzvxGu2KTFsloJqXw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-password-toggle-field@0.1.11':
+    resolution: {integrity: sha512-4gvFnmDXu3dgj21CqsufzIameRvlRd4SBqaWhcrlrNhRo0Y5i/49AmRJYe1fdAM3G2VNBbmin4b0D6cdQocwgw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popover@1.1.23':
+    resolution: {integrity: sha512-mw58MrBlyHWFisTOYignD0vf/3gdcgAR+9of1s9G/38CbFiUwH1nCDkc0AUM9IrXFgN5Ue8n45j9WCgyM1sbiQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.3.7':
+    resolution: {integrity: sha512-UsJrrd7w4wuKKTdvd/DNERVlwSlUcyXzjhyDwBk+3aPOsCjOY6ZSbxuw8E6lZTjjfP8Cpd0J8VVkrYUWyGYXyg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.17':
+    resolution: {integrity: sha512-vKQLcWypUnwZVvfV7UkGahH2g6ySe8M8R+zYBwPrv5byZ9QAW6cQVvNKo7GgmD+p8aYb6D9JBuvy8/WhOno2wQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.10':
+    resolution: {integrity: sha512-3wyzCQ6+ubRA+D4uv9m95JYLXxmOHp05qjrkjeA7uKHHtjpPggQzc6DAb0URl7j67oR0K2foO4ip27TiX037Bw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.10':
+    resolution: {integrity: sha512-MucOnzh6hR5mid6VpkbglRAMYMjKLqRnGBbjXkzjK52fuQDd1qbkx78a5P40mkcnVXJdEVxm26E9OPAiUq7nBg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-progress@1.1.16':
+    resolution: {integrity: sha512-5XnomAsoZZCY+KNTxbIghpGqPruZvKFNlvcAljVAOdDRDsH4/OZQxhtwo5wdtoDM5R6MhJBb2sPnDuRFep3lzg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-radio-group@1.4.7':
+    resolution: {integrity: sha512-cgYFEkntCxppHZgtSZ+7vh0wbZQ+IC7PPMw8DSnRG27B6kDd32/Zw0OJt7dGDigCoprMuWHjg2PvUn3PYvPFoQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.19':
+    resolution: {integrity: sha512-V9jI6hDjT7l3jsCQD9bLNvDLM3tH/gdbOTp7Tefp3hbbgCGQoK7tUvrWiRlcoBHIZ809ElXwNQwVo0B98LuTXQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-scroll-area@1.2.18':
+    resolution: {integrity: sha512-Zn5Cd171wxsO3Dfg8HaW6RifTb9CYTKQJHs/G4+LN1GfmJpaQMZQyQxMprVPHpaz7QY4l9BxK2JwQuzHsXC8nA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-select@2.3.7':
+    resolution: {integrity: sha512-WFGImkmbzcfxeIwq/+4HvRN0pizBwbwQUED4I13ezQsDdfl38ZntN6TmR8XaSzPBqoCToe8rF75j6NPNDSzhbg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-separator@1.1.15':
+    resolution: {integrity: sha512-jOLO4lssEzWpoDu7G+Ze4VjwMRUBt291pnZD0gmalREZipnTX3wadQo7Fy48GCTfe14/YRN6rw/rOJqrE85Wxw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slider@1.4.7':
+    resolution: {integrity: sha512-mTSLf1GC/C0moWjTbvCM6Qn/gBjvlFt1azuWF2v7MN5C3Zq2U2J2lN3ZEYkpujuOU5Ro7A28wkviSxaKnG0BYg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.3.3':
+    resolution: {integrity: sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-switch@1.3.7':
+    resolution: {integrity: sha512-48tB/4dn2UVLBCYhTu9AuR63IHl73l/qLbLgxd86noTUor4/K4LFDAcYjK+isP5313qxaFpjPVogE7+Y0/V3Kw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tabs@1.1.21':
+    resolution: {integrity: sha512-UKxJlZid7FVtsk/WTxj4i4uSEgj2Au+KBbS7SQyTlzMhhn+86Cz3tISZdTa87bfEfcuvZezf2ZsxD4xuEKtkog==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toast@1.2.23':
+    resolution: {integrity: sha512-ofhyAsYaocRGOs/n0XWdUOSVzEAG6BfrMVM8z0c0kLEWY38w/0WuMFPTJP/HVaZPYkMvHZoKIIhNcjbTCBILPg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle-group@1.1.19':
+    resolution: {integrity: sha512-OtnwuSVjd1Ofi+AdnvhsjQdyuhCDwYs1w9RyB5BN/OavXOVQo42SYqQjwUnbPnaiPFBpQ9aX70dWeee+v2oBLA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle@1.1.18':
+    resolution: {integrity: sha512-7lonPlKfSacd20GlOBx2ltuVKz9oqWYZz+oMQyOltw6t1y2nyftj2ZmwwUHYn49kqfDWcp8dNZm5NgV+5Z+mug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toolbar@1.1.19':
+    resolution: {integrity: sha512-Ph0IvtYw4VB12ZnZg+YtrGs8yJQsnizwo/zu0R4Y/nWugtJzA7Pg1eWeuDR9+LSqn+xjamss+UOSOJJJ4gx8jw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tooltip@1.2.16':
+    resolution: {integrity: sha512-6EamKFRRnlpdadndbZ6LMwycfwkwPte1B42hs6QA0gYhjaOKqW4PZ4pjaW9UrlDX5eVt/OjncE7BFTPL5nmZhg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.4':
+    resolution: {integrity: sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.6':
+    resolution: {integrity: sha512-uEQJGT97ZA/TgP/Hydw47lHu+/vQj6z/0jA+WeTbK1o9Rx45GImjpD0tc3W5ad3D6XTSR6e1yEO0FvGq6WQfVQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.5':
+    resolution: {integrity: sha512-7cshFL8HGS/7HEiHH+9kL9HBwp2sa9yX18Knwek6KYWmXwM7pegMgta2AXMQKI+rq3JnfSj9x8wYqFMTdG1Jgg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.5':
+    resolution: {integrity: sha512-ge3ipobwSXTj4JyVtswQ7qZj0ZHdtbGuOno/LrgAAeSxtsJ6Vs4Gz5IkPH2bmqpjcLUFoqGhA/mueuIf63UXlA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-is-hydrated@0.1.3':
+    resolution: {integrity: sha512-umO/aJ+82CpOnhDZUTbILCQf7kU/g0iv+oGs/Q8jw7IkhWBzaEP4sA268PhFAJTFetbwp3ICc6ktpI4TqtxcIw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.4':
+    resolution: {integrity: sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-previous@1.1.4':
+    resolution: {integrity: sha512-XoSLhbRbqxFtgJoi2fNHA3C6pDlY34x508vUpUGoFZfvePfHXHbE1lC4FYFMnJWgiCRroSTw6fOsXQoVS9RwZg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.4':
+    resolution: {integrity: sha512-cSOCh6JlkmfjLyNcLiu2nB4v+nm+dkZ+Q5KHWk/soo4U7ZLiEQFKHK9/YmtBHjfCEaU43IBKQOc4/uJmCaiCTQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.4':
+    resolution: {integrity: sha512-D3anSY15EJoxrihpsXI6SMrmmonnQtR2ni7arO+Lfdg3O95b9hNXxONk8jA5C8ANdF/h5HMAxejgs8PWJ6rlhw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.2.11':
+    resolution: {integrity: sha512-NFS86RYYZb4/exihaESBGOpMJFz8MGLAfu3mOBSGByVnVPC9JPASfYubxd/8KbkQK0sYAv8lVQDEQukDX/qXvQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/rect@1.1.3':
+    resolution: {integrity: sha512-JtyZR+mqgBibTo8xea3B6ZRmzZiM/YeVBtUkas6zMuXjAlfIFIW2FgqeM9eLyvEaYX66vr6DJMK+4U6LV0KhNw==}
+
   '@redis/bloom@1.2.0':
     resolution: {integrity: sha512-HG2DFjYKbpNmVXsa0keLHp/3leGJz1mjh09f2RLGGLQZzSHpkmZWuwJbAvo3QcRY8p80m5+ZdXZdYOSBLlp7Cg==}
     peerDependencies:
@@ -529,39 +1908,277 @@ packages:
     peerDependencies:
       '@redis/client': ^1.0.0
 
+  '@reduxjs/toolkit@2.12.0':
+    resolution: {integrity: sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==}
+    peerDependencies:
+      react: ^16.9.0 || ^17.0.0 || ^18 || ^19
+      react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-redux:
+        optional: true
+
+  '@rolldown/binding-android-arm-eabi@1.2.5':
+    resolution: {integrity: sha512-DLe/i+l8ynIBY7XEQ191TeZvCoowIGa18R+dIV30GW7DiOtp74i/xX8hs8GUjW5ARV7VZuie3d6AumSmCwbeRA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@rolldown/binding-android-arm64@1.2.5':
+    resolution: {integrity: sha512-zXcwKlQApYAOELHd8PwKDFkagYF9Wy4e0RJ+0qnzl9Pjnpj75TEG8ufv40p2J7kCEfwZAsNiuzRIyNNMWT38ig==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@rolldown/binding-darwin-arm64@1.2.5':
+    resolution: {integrity: sha512-dK4QakI42nzWgJT5sm4y4y/O//D4OxM75/cH28RLV+nzIN9AY+YsbuUVrUTjlLjXR6vpyxFbSsbmNuJ6BP9sww==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-x64@1.2.5':
+    resolution: {integrity: sha512-fqSALaUu1Wjd1nK2uW2kJDWdLCc8lx1IcY+MTY26Aurfdx19anlzhqXOgCFbBFQnlFDTn4TC1/7Nz4Bl2mLP3A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rolldown/binding-freebsd-x64@1.2.5':
+    resolution: {integrity: sha512-/vCnNxlkxs9tKxNDcyWUePpJ/PgTzxIaVhoM5SmG8UV+GR/IcPam4VYxi7GIMo7PSDuNqlJqvprqii9NqqVCMw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.5':
+    resolution: {integrity: sha512-abk0NLA519LxRCszmbE0jYKuQ9YPocOXTiOXOo6Yr+YAT95VH+PtqYAjOJvGKt3viEd/x4qzabAlwd5bHOOARg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-gnu@1.2.5':
+    resolution: {integrity: sha512-Y7eALiJ8lr0M2HH103Js+g7V34wf6snlpZLAsHI90uLhr3PVlNsbFVAXJC9d/V6BnPyKtpSwI+NcB/RLxsQxuA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-arm64-musl@1.2.5':
+    resolution: {integrity: sha512-xMvZgnbZg4YVnR/AX2b3oOPDTFYJvUVaJg5FedA/LuvexAtXibZQej4cnTkw3rjsJ/ggUROB64TdtETiim+FYA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-ppc64-gnu@1.2.5':
+    resolution: {integrity: sha512-GRjeqTUDHTo5GwntsLaAMcBahG3nlpjftXWZLN73HiYQlhwEowvarFgQnRnQZtIp4keXX7quXFbG38uPZBa2EA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-s390x-gnu@1.2.5':
+    resolution: {integrity: sha512-vLNTR45F2Uwc8AufkNXPmB4VliaXs+FvcheEogIzOXzO4l+LzieXF5A/TWxLy5HtqpsRCHUfd0lPVrrdgXdLHQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-gnu@1.2.5':
+    resolution: {integrity: sha512-Mgj59/HTuYeK9Gz2MA+mBWKnHsAgkBSec15ZMb1st3oIfFbX7gCjOae7GydHhzcyQi9Z/7M1QuN9bR3oFqF0jQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-musl@1.2.5':
+    resolution: {integrity: sha512-mY8AP0/ichsbhAxGnLa3d3+MwV0EfgrPND2bplI3Ym8T6R2pJ0N87bvrKVwNXmdy3jnr6eQBecdqx/HMknBmpA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-openharmony-arm64@1.2.5':
+    resolution: {integrity: sha512-8SLssA2oweAxyRgDp789ACfRb/3P+zNRJpzZxSizxF9m8NUDQ4+3xjo8ttjhVGGw6Qxb70oZiEtIjaKikCO7Yw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rolldown/binding-win32-arm64-msvc@1.2.5':
+    resolution: {integrity: sha512-vGbruD5zquhoc8D9SViXgN2FBJtNdTyQ4DtG+SWiEGlJiAzoKcZ2xp+xuXCffhubVdt0NJlTZqkeRuERy7g8Cw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.2.5':
+    resolution: {integrity: sha512-e/SXpgISz+IoqVcSSI0rx/d/he8zqLex+/rCWpnHpmVfmPIUjag9H6P7zotf0gJHwPUhQxZ/mF8tr6acebT9yw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/pluginutils@1.0.1':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
+
+  '@sec-ant/readable-stream@0.4.1':
+    resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
+
   '@sinclair/typebox@0.34.52':
     resolution: {integrity: sha512-XiMQh7qqVlxZzcVD+kkGMNGMzcTrDMLWI7S4x7z1MkCkbDPrekpZXEUK0eZqZFMuHQg2a2DZOcDIh9o5v3Gonw==}
 
+  '@sindresorhus/merge-streams@4.0.0':
+    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
+    engines: {node: '>=18'}
+
   '@sinonjs/commons@3.0.1':
     resolution: {integrity: sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==}
 
   '@sinonjs/fake-timers@15.4.0':
     resolution: {integrity: sha512-DsG+8/LscQIQg68J6Ef3dv10u6nVyetYn923s3/sus5eaGfTo1of5WMZSLf0UJc9KDuKPilPH0UDJCjvNbDNCA==}
 
-  '@smithy/core@3.29.3':
-    resolution: {integrity: sha512-L+Ys6ecjk5vwPMAKHBpPKlJ3DkqwNcnfEISXBZIsVvWG/XKXfsAP8mwIYlTeLcd2ElHdesPI8OuOmJSFAPhm6A==}
+  '@smithy/core@3.33.3':
+    resolution: {integrity: sha512-CsOeKq/9kA3y6VJHt+/+VTCtBaxJ4OTFpgrjIUhPpDIKxBci1k2bJaQASF2h/ELWrulGp+t97DZ0mevfAD8idg==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/credential-provider-imds@4.4.8':
-    resolution: {integrity: sha512-q9J7JTiXrAhB8sDp4px97uEPT7CwKH61Co78grdNQvU8QZAdiuaSRhP0tUVf2ogy36RZTrlMU1rBmDEH+cnkiA==}
+  '@smithy/credential-provider-imds@4.5.2':
+    resolution: {integrity: sha512-A9uSdn72ozbRUSit0eib0TW7nXuNPlaeM0zcGkJ+nE6tFcSDbnmtwoxbTCFBukVQcszDAyvsd7+rTduPTXpygg==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/fetch-http-handler@5.6.5':
-    resolution: {integrity: sha512-SuqeisTyPoiIPtIYru/sGxGyXzmZ+8nnFOhC+qRPglt06Ebd1yH//CDltZB2J/3WBNVhwfUaZ0EtHB3cm2X32g==}
+  '@smithy/fetch-http-handler@5.7.2':
+    resolution: {integrity: sha512-nZyWTmSpJEXl6VtWVMBJve/7x12DZu6sIX1z1a+ZMaHlQQRs9Zpu6NbTe/gmxYXVRpkjxyDYpZ5gx2IM6f/Wkw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/node-http-handler@4.9.5':
-    resolution: {integrity: sha512-bNqdxTQTxmLbomSmlkZFz8L6B/feQ2HHzw4L2zY7Ecp2XffYAZq2uzdWDdxJHJFbEvqd+SRuluJso0P8+xPdbw==}
+  '@smithy/node-http-handler@4.11.3':
+    resolution: {integrity: sha512-2jY1tSpERfPfWqyBV2pH+iGFaghVsIJszJNsT7hxtQYhVJpWDyc0LqOWI+nXOxOAHaEfZ4PXXtp1wW1TGpHhkA==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/signature-v4@5.6.4':
-    resolution: {integrity: sha512-B89bpf2t/y/wia6LZ+4JfHXYQT9PnVftsH05rgJKKIStS7r/4XSs9HOjtPoLtgcA6HCW9jVqX5DBbq7E0PAkiQ==}
+  '@smithy/signature-v4@5.7.3':
+    resolution: {integrity: sha512-7ImGm+FkHRLcBaRttIAMZ6bzJZWb2cJGoYjq46F2UjycujWzrL9GEN9h4w7eQyXJYnltrUhxbbieBAIRrdqpow==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/types@4.16.1':
-    resolution: {integrity: sha512-0JFs3V2y2M9tKW5na/qxe69Zv+uxLMO7QBbhxF/FHu/Gp2NFZAAL9tWl9PU02xxo07pb3G9FTyjNc6D5uZrJIg==}
+  '@smithy/types@4.17.2':
+    resolution: {integrity: sha512-FOKpVZob9MPTn2znRzGrnsMHv7BOsKVw3XiP/cOyYLDVZ9qKp4nifIiSCuUU/fIj5Vu0UOAxCFr+qRAtG0NUkA==}
     engines: {node: '>=18.0.0'}
 
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+
+  '@tabby_ai/hijri-converter@1.0.5':
+    resolution: {integrity: sha512-r5bClKrcIusDoo049dSL8CawnHR6mRdDwhlQuIgZRNty68q0x8k3Lf1BtPAMxRf/GgnHBnIO4ujd3+GQdLWzxQ==}
+    engines: {node: '>=16.0.0'}
+
+  '@tailwindcss/node@4.3.3':
+    resolution: {integrity: sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg==}
+
+  '@tailwindcss/oxide-android-arm64@4.3.3':
+    resolution: {integrity: sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.3':
+    resolution: {integrity: sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.3.3':
+    resolution: {integrity: sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.3':
+    resolution: {integrity: sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3':
+    resolution: {integrity: sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.3':
+    resolution: {integrity: sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.3':
+    resolution: {integrity: sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.3':
+    resolution: {integrity: sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.3':
+    resolution: {integrity: sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.3':
+    resolution: {integrity: sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ==}
+    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.3.3':
+    resolution: {integrity: sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.3':
+    resolution: {integrity: sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.3.3':
+    resolution: {integrity: sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/vite@4.3.3':
+    resolution: {integrity: sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7 || ^8
+
+  '@tanstack/react-table@8.21.3':
+    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
+  '@tanstack/table-core@8.21.3':
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
+    engines: {node: '>=12'}
+
+  '@tauri-apps/api@2.11.1':
+    resolution: {integrity: sha512-M2FPuYND2m+wh5hfW9ZpSdxMPdEJovPBWwoHJmwUpysTYNHaOkVFN419m/K0LIgjb/7KU2vBgsUepJWugQCvAA==}
+
+  '@ts-morph/common@0.27.0':
+    resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==}
+
   '@tybys/wasm-util@0.10.3':
     resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==}
 
@@ -577,9 +2194,48 @@ packages:
   '@types/babel__traverse@7.28.0':
     resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
 
+  '@types/d3-array@3.2.2':
+    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-shape@3.2.0':
+    resolution: {integrity: sha512-kVd74ta9eof3eJOvbNd1vGKS/XERRyQbT26Og63hIsvDO84cjD5gEOhsXf26w3FSoNlPVz84DOFcKv/oou+fMw==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
   '@types/debug@4.1.13':
     resolution: {integrity: sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==}
 
+  '@types/esrecurse@4.3.1':
+    resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}
+
+  '@types/estree-jsx@1.0.5':
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+
+  '@types/estree@1.0.9':
+    resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
+
+  '@types/hast@3.0.5':
+    resolution: {integrity: sha512-rp/ezSWaD1m44dPKICGhiskI13nVr7qTloFwDa/IYkhhf5nzwP+zIQcIJh3WIFSBOy/H1PzB40jPjMDksN4F+g==}
+
   '@types/istanbul-lib-coverage@2.0.6':
     resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
 
@@ -589,15 +2245,41 @@ packages:
   '@types/istanbul-reports@3.0.4':
     resolution: {integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==}
 
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
   '@types/ms@2.1.0':
     resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
 
-  '@types/node@25.9.1':
-    resolution: {integrity: sha512-xfrlY7UD5rMJk3ZVJP8BNzS28J36YJg+xp+LPXV1TdWxr8uMH5A860QNxYDGQe/ylDSgjxE52Q9VnO7p75tJxg==}
+  '@types/node@26.2.0':
+    resolution: {integrity: sha512-5IviulTZeRNp2vAJ514cc/HUlY5nZ9fCbq9DMyC52BrhFZACo3nI0R7qBxhQmo/d27NFe96ur/b7Wwxklda+kg==}
+
+  '@types/react-dom@19.2.4':
+    resolution: {integrity: sha512-Bsc+QHgp+P/F02XDzNCY9jnZNCUuLki36KT7VKrTXXLdHf+vHMNZnW1rVu5DNW/rCK+fya3DATySbLM4yhtKUw==}
+    peerDependencies:
+      '@types/react': ^19.2.0
+
+  '@types/react@19.2.18':
+    resolution: {integrity: sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==}
 
   '@types/stack-utils@2.0.3':
     resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
 
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
+  '@types/use-sync-external-store@0.0.6':
+    resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
+
+  '@types/validate-npm-package-name@4.0.2':
+    resolution: {integrity: sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw==}
+
   '@types/validator@13.15.10':
     resolution: {integrity: sha512-T8L6i7wCuyoK8A/ZeLYt1+q0ty3Zb9+qbSSvrIVitzT3YjZqkTZ40IbRsPanlB4h1QB3JVL1SYCdR6ngtFYcuA==}
 
@@ -730,6 +2412,22 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@vitejs/plugin-react@6.1.0':
+    resolution: {integrity: sha512-qd2BzUBehkov86WFhg0JkEFEYyCLG9uPCe6qWTY/kRlss9OvJrOF2UbIWT7p+8IzZHkEu0DNGHc4HSv+JdDLsw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      '@rolldown/plugin-babel': ^0.1.7 || ^0.2.0
+      babel-plugin-react-compiler: ^1.0.0
+      oxc-transform-react: ^0.145.0
+      vite: ^8.0.0
+    peerDependenciesMeta:
+      '@rolldown/plugin-babel':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
+      oxc-transform-react:
+        optional: true
+
   abbrev@2.0.0:
     resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -738,6 +2436,29 @@ packages:
     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'}
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn@8.18.0:
+    resolution: {integrity: sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  adler-32@1.2.0:
+    resolution: {integrity: sha512-/vUqU/UY4MVeFsg+SsK6c+/05RZXIHZMGJA+PX5JyWI0ZRcBpupnRuPLU/NXXoFwMYCPCoxIfElM2eS+DUXCqQ==}
+    engines: {node: '>=0.8'}
+    hasBin: true
+
+  adler-32@1.3.1:
+    resolution: {integrity: sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==}
+    engines: {node: '>=0.8'}
+
   agent-base@6.0.2:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
@@ -746,6 +2467,32 @@ packages:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
 
+  ajv-formats@2.1.1:
+    resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv-formats@3.0.1:
+    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv@6.15.0:
+    resolution: {integrity: sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==}
+
+  ajv@8.20.0:
+    resolution: {integrity: sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==}
+
+  ansi-colors@4.1.3:
+    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
+    engines: {node: '>=6'}
+
   ansi-escapes@4.3.2:
     resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
     engines: {node: '>=8'}
@@ -754,8 +2501,8 @@ packages:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
 
-  ansi-regex@6.2.2:
-    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+  ansi-regex@6.3.0:
+    resolution: {integrity: sha512-WpDfL7NO6j7tH88IDBNVdUJxDh9nmCteAVW9dsep846XdwF4naCBK+/tGLX3KJgcpgMRXCFlTM2hKGoK9FsdrQ==}
     engines: {node: '>=12'}
 
   ansi-styles@4.3.0:
@@ -780,9 +2527,20 @@ packages:
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
   array-flatten@1.1.1:
     resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
 
+  ast-types@0.16.1:
+    resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
+    engines: {node: '>=4'}
+
   async@0.2.10:
     resolution: {integrity: sha512-eAkdoKxU6/LkKDBzLpT+t6Ff5EtfSF4wx1WfJiPEEV7WNLnDaRXk0oVysiEPm262roaachGexwUv94WhSgN5TQ==}
 
@@ -793,8 +2551,19 @@ packages:
     resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
     engines: {node: '>= 4.0.0'}
 
-  axios@1.16.1:
-    resolution: {integrity: sha512-caYkukvroVPO8KrzuJEb50Hm07KwfBZPEC3VeFHTsqWHvKTsy54hjJz9BS/cdaypROE2rH6xvm9mHX4fgWkr3A==}
+  atomically@1.7.0:
+    resolution: {integrity: sha512-Xcz9l0z7y9yQ9rdDaxlmaI4uJHf/T8g9hOEzJcsEqX2SjCj4J20uK7+ldkDHMbpJDK76wF7xEIgxc/vSlsfw5w==}
+    engines: {node: '>=10.12.0'}
+
+  autoprefixer@10.5.4:
+    resolution: {integrity: sha512-MaU0U/za7N3r6brxD4YB/l4NSrFzLPlANv6wEuQVaIPlD3L4W9rFcQPbL/EilY9BHhHvhfcz3gInDLrEtWT4EA==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
+  axios@1.19.0:
+    resolution: {integrity: sha512-ht/iuYZXEjFxLH/Hkezgd7m6JKlHHXEUSneaDz8uZe1Gj5QZtCnpyDsckvAiEnT89OEbCLmnte4R4sn7P0EKFw==}
 
   babel-jest@30.4.1:
     resolution: {integrity: sha512-fATAbM8piYxkiXQp3RBXmZHxZVNJZAVXXfyeyCN2Tida3+qJ8ea9UxhiJ2y4fLO90ZImKt6k9FlcH2+rLkJGhw==}
@@ -821,6 +2590,9 @@ packages:
     peerDependencies:
       '@babel/core': ^7.11.0 || ^8.0.0-beta.1
 
+  bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -831,8 +2603,8 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  baseline-browser-mapping@2.10.43:
-    resolution: {integrity: sha512-AjYpR78kDWAY3Efj+cDTFH9t9SCoL7OoTp1BOb0mQV7S+6CiLwnWM3FyxhJtdPufDFKzmCSFoUncKjWgJEZTCQ==}
+  baseline-browser-mapping@2.11.18:
+    resolution: {integrity: sha512-1iEmLEYSiE1SeBoAfPo/Mnx3PzfzHUkDK61ASkCpuk3YXugYLH5DYK1SzqV55F8FMI6s0F+/tCP7Polz1QRjxw==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
@@ -849,29 +2621,33 @@ packages:
   bluebird@3.7.2:
     resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
 
-  body-parser@1.20.5:
-    resolution: {integrity: sha512-3grm+/2tUOvu2cjJkvsIxrv/wVpfXQW4PsQHYm7yk4vfpu7Ekl6nEsYBoJUL6qDwZUx8wUhQ8tR2qz+ad9c9OA==}
+  body-parser@1.20.6:
+    resolution: {integrity: sha512-p5tAzS57i5MV9fZFDj9LeIiTZEufbSe2eDozP+ElheSUq1m74CRq1jI4mYNDdVs9vQztXFLuk/Gd6BWTdwRJ5g==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
 
+  body-parser@2.3.0:
+    resolution: {integrity: sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw==}
+    engines: {node: '>=18'}
+
   bowser@2.14.1:
     resolution: {integrity: sha512-tzPjzCxygAKWFOJP011oxFHs57HzIhOEracIgAePE4pqB3LikALKnSzUyU4MGs9/iCEUuHlAJTjTc5M+u7YEGg==}
 
-  brace-expansion@1.1.16:
-    resolution: {integrity: sha512-IDw48K2/2kRkg9LdJxurvq3lV3aBgq0REY89duEqFRthjlPdXHKMj7EnQOXVckxzgisinf3nHfrcE2FufFLXMw==}
+  brace-expansion@1.1.18:
+    resolution: {integrity: sha512-Edep/X9fGqVNmzKBVsDYIOtD+z1tuezV70LBjdCst9Tqu76lsnvRiZ6oTic1n+/BIwX6QDGAO94PN4N2SADvtw==}
 
-  brace-expansion@2.1.2:
-    resolution: {integrity: sha512-w5JZcKgdhDOgOwm8H+KgbosopHMuGcl6qbulwjtz3SM7I7P3yW1eAjzMPLrIE+NQ9vjgANKHWeMHnrT0OXW1oA==}
+  brace-expansion@2.1.4:
+    resolution: {integrity: sha512-hGfVzPxthbf3+2yjg/RBs60cB0FhqBS/zvdV/4wn4/BmN0bNMMHPc4V/BbFieqf1TKAGGAHnY4eSjajCl0f2Xg==}
 
-  brace-expansion@5.0.6:
-    resolution: {integrity: sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==}
-    engines: {node: 18 || 20 || >=22}
+  brace-expansion@5.0.9:
+    resolution: {integrity: sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==}
+    engines: {node: 20 || >=22}
 
   braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  browserslist@4.28.6:
-    resolution: {integrity: sha512-FQBYNK15VMslhLHpA7+n+n1GOlF1kId2xcCg7/j95f24AOF6VDYMNH4mFxF7KuaTdv627faazpOAjFzMrfJOUw==}
+  browserslist@4.28.8:
+    resolution: {integrity: sha512-V2NpofLblG64mfOtSgDhOJESZEGogzDMBv/q+W6oc4LXWP/q75eOXoOaaOu1EOadB9U4Bwx/e0yzbvwKH8zalA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
@@ -887,6 +2663,10 @@ packages:
   buffer@5.6.0:
     resolution: {integrity: sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==}
 
+  bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
+
   busboy@1.6.0:
     resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
     engines: {node: '>=10.16.0'}
@@ -915,17 +2695,40 @@ packages:
     resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
     engines: {node: '>=10'}
 
-  caniuse-lite@1.0.30001805:
-    resolution: {integrity: sha512-52noaS3DubycKSXaU30TwPGIp+POyQSUVa5jBEq3vkRkY0kjyb3LQgvhU6WGyCcyXqVLWO0Cw0Q6BSdD0kUfVA==}
+  caniuse-lite@1.0.30001809:
+    resolution: {integrity: sha512-xxWVywk6a6Arlk+hymeycyn/VgqEfLDxupvhH/xiY5SJ/18kmi9o6MiO320DCUzypORHLtvh0I4i04tUhCNHNQ==}
+
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
+  cfb@1.2.2:
+    resolution: {integrity: sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==}
+    engines: {node: '>=0.8'}
 
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  chalk@5.6.2:
+    resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
   char-regex@1.0.2:
     resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
     engines: {node: '>=10'}
 
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
+  character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+
+  character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -934,8 +2737,22 @@ packages:
     resolution: {integrity: sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==}
     engines: {node: '>=8'}
 
-  cjs-module-lexer@2.2.0:
-    resolution: {integrity: sha512-4bHTS2YuzUvtoLjdy+98ykbNB5jS0+07EvFNXerqZQJ89F7DI6ET7OQo/HJuW6K0aVsKA9hj9/RVb2kQVOrPDQ==}
+  cjs-module-lexer@2.2.1:
+    resolution: {integrity: sha512-Ca8swihM+/4yKecYHY52kgJd300hi2lADU/a1RxNTRe+RJ9jvqQlESpbz9DnG9mowez8qwXHB8qYdIUw9e+F5Q==}
+
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  classnames@2.5.1:
+    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
+
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+
+  cli-spinners@2.9.2:
+    resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
+    engines: {node: '>=6'}
 
   cliui@7.0.4:
     resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
@@ -944,14 +2761,32 @@ packages:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   cluster-key-slot@1.1.2:
     resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
     engines: {node: '>=0.10.0'}
 
+  cmdk@1.1.1:
+    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
   co@4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
 
+  code-block-writer@13.0.3:
+    resolution: {integrity: sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==}
+
+  codepage@1.14.0:
+    resolution: {integrity: sha512-iz3zJLhlrg37/gYRWgEPkaFTtzmnEv1h+r7NgZum2lFElYQPi0/5bnmuDfODHxfp0INEfnRqyfyeIJDbb7ahRw==}
+    engines: {node: '>=0.8'}
+    hasBin: true
+
   collect-v8-coverage@1.0.3:
     resolution: {integrity: sha512-1L5aqIkwPfiodaMgQunkF1zRhNqifHBmtbbbxcr6yVxxBnliw4TDOW6NxpO8DJLgJ16OT+Y4ztZqP6p/FtXnAw==}
 
@@ -966,10 +2801,27 @@ packages:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
   commander@10.0.1:
     resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
     engines: {node: '>=14'}
 
+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+
+  commander@14.0.3:
+    resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
+    engines: {node: '>=20'}
+
+  commander@2.14.1:
+    resolution: {integrity: sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw==}
+
+  commander@2.17.1:
+    resolution: {integrity: sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==}
+
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -977,6 +2829,15 @@ packages:
     resolution: {integrity: sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==}
     engines: {'0': node >= 6.0}
 
+  concurrently@9.2.4:
+    resolution: {integrity: sha512-TZ0CEhyzvFjgtAvHTusDMgj7wNdihCh7LLLrzdUOXIhdlnL2JBBGA9eJxR24rtqgmdjh3OA3hrN1rCHj6HM8qA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  conf@10.2.0:
+    resolution: {integrity: sha512-8fLl9F04EJqjSqH+QjITQfJF8BrOVaYr1jewVgSRAEWePfxT0sku4w2hrGQ60BC/TNLGQ2pgxNlTbWQmMPFvXg==}
+    engines: {node: '>=12'}
+
   config-chain@1.1.13:
     resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
 
@@ -988,10 +2849,18 @@ packages:
     resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
     engines: {node: '>= 0.6'}
 
+  content-disposition@1.1.0:
+    resolution: {integrity: sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==}
+    engines: {node: '>=18'}
+
   content-type@1.0.5:
     resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
     engines: {node: '>= 0.6'}
 
+  content-type@2.1.0:
+    resolution: {integrity: sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==}
+    engines: {node: '>=18'}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -1005,6 +2874,10 @@ packages:
   cookie-signature@1.0.7:
     resolution: {integrity: sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==}
 
+  cookie-signature@1.2.2:
+    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
+    engines: {node: '>=6.6.0'}
+
   cookie@0.4.0:
     resolution: {integrity: sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==}
     engines: {node: '>= 0.6'}
@@ -1013,10 +2886,31 @@ packages:
     resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
     engines: {node: '>= 0.6'}
 
+  cookie@1.1.1:
+    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
+    engines: {node: '>=18'}
+
   cors@2.8.6:
     resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==}
     engines: {node: '>= 0.10'}
 
+  cosmiconfig@9.0.2:
+    resolution: {integrity: sha512-gtTZxTDau1wL7Y7zifc2dd8jHSK/k6BTx/2Xp/BpdlAdnlYWFVt7qhJqgwi7637yRwRQ3qL4ZidbB4I8tA5VOg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  country-flag-icons@1.6.20:
+    resolution: {integrity: sha512-py8JiEKzjhYw6HPJ0L7SxLgCYim36UPRTZX43/kqGueUCZLSvnrqAiwW8HtQibur7mdkFQUkjOgdK+o/9FBtaw==}
+
+  crc-32@1.2.2:
+    resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
+    engines: {node: '>=0.8'}
+    hasBin: true
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -1025,6 +2919,14 @@ packages:
     resolution: {integrity: sha512-uTqEnCvWRk042asU6JtapDTcJeeailFy4ydOQS28bj1hcLnYRiqi8SsD2jS412AY1I/4qdOwWZun774iqywf9w==}
     engines: {node: '>= 0.8'}
 
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
   csurf@1.11.0:
     resolution: {integrity: sha512-UCtehyEExKTxgiu8UHdGvHj4tnpE/Qctue03Giq5gPgMQ9cg/ciod5blZQ5a4uCEenNQjxyGuzygLdKUmee/bQ==}
     engines: {node: '>= 0.8.0'}
@@ -1033,6 +2935,60 @@ packages:
   currency-codes@2.2.0:
     resolution: {integrity: sha512-vpbQc5sEYHGdTVAYUhHnKv0DWiYLRvzl/KKyqeHzBh7HD/j3UlWoScpZ9tN/jG6w2feddWoObsBbaNVu5yDapg==}
 
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.2:
+    resolution: {integrity: sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  date-fns-jalali@4.1.0-0:
+    resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
+
+  date-fns@4.4.0:
+    resolution: {integrity: sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==}
+
+  debounce-fn@4.0.0:
+    resolution: {integrity: sha512-8pYCQiL9Xdcg0UPSD3d+0KMlOjp+KGU5EPwYddgzQ7DATsg4fuUDjQtsYLmWjnk2obnNHgV3vE2Y4jejSOJVBQ==}
+    engines: {node: '>=10'}
+
   debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -1050,6 +3006,12 @@ packages:
       supports-color:
         optional: true
 
+  decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+
+  decode-named-character-reference@1.3.0:
+    resolution: {integrity: sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==}
+
   dedent@1.7.2:
     resolution: {integrity: sha512-WzMx3mW98SN+zn3hgemf4OzdmyNhhhKz5Ay0pUfQiMQ3e1g+xmTJWp/pKdwKVXhdSkAEGIIzqeuWrL3mV/AXbA==}
     peerDependencies:
@@ -1058,10 +3020,29 @@ packages:
       babel-plugin-macros:
         optional: true
 
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
   deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
+  default-browser-id@5.0.1:
+    resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
+    engines: {node: '>=18'}
+
+  default-browser@5.5.1:
+    resolution: {integrity: sha512-m1pAzaJgZ/gssEqlOhJkPJp8Xly7QyW6xcrkUa2KKcDeDSEMP7X8xipU3snUcfisTQx0w1AGae+9UtJSfVnXGw==}
+    engines: {node: '>=18'}
+
+  define-lazy-prop@2.0.0:
+    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+    engines: {node: '>=8'}
+
+  define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+
   delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -1074,6 +3055,10 @@ packages:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
 
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
   destroy@1.2.0:
     resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
@@ -1081,14 +3066,36 @@ packages:
   detect-europe-js@0.1.2:
     resolution: {integrity: sha512-lgdERlL3u0aUdHocoouzT10d9I89VVhk0qNRmll7mXdGfJT1/wqZ2ZLA4oJAjeACPY5fT1wsbq2AT+GkuInsow==}
 
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
   detect-newline@3.1.0:
     resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
     engines: {node: '>=8'}
 
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
+  diff@8.0.4:
+    resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
+    engines: {node: '>=0.3.1'}
+
+  dot-prop@6.0.1:
+    resolution: {integrity: sha512-tE7ztYzXHIeyvc7N+hR3oi7FIbf/NIjVP9hmAt3yMXzrQ072/fpjGLx2GxNxGxUl5V73MEqYzioOMoVhGMJ5cA==}
+    engines: {node: '>=10'}
+
   dotenv@16.6.1:
     resolution: {integrity: sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==}
     engines: {node: '>=12'}
 
+  dotenv@17.4.2:
+    resolution: {integrity: sha512-nI4U3TottKAcAD9LLud4Cb7b2QztQMUEfHbvhTH09bqXTxnSie8WnjPALV/WMCrJZ6UV/qHJ6L03OqO3LcdYZw==}
+    engines: {node: '>=12'}
+
   dottie@2.0.7:
     resolution: {integrity: sha512-7lAK2A0b3zZr3UC5aE69CPdCFR4RHW1o2Dr74TqFykxkUCBXSRJum/yPc7g8zRHJqWKomPLHwFLLoUnn8PXXRg==}
     deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
@@ -1111,13 +3118,29 @@ packages:
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
-  electron-to-chromium@1.5.389:
-    resolution: {integrity: sha512-cEto7aeOqBfU1D+c5py5pE+ooscKE75JifxLBdFUZsqAxRS6y7kebtxAZvICszSl05gPjYHDTjY+lXpyGvpJbg==}
+  electron-to-chromium@1.5.412:
+    resolution: {integrity: sha512-z4rMe3esBzlzovKHj4gxJnsCGZRK5l4baUvm+gCGJBPE+gsyUMKsuU9tnEUtI1dOebXz1ytAPGjvXhmQ7rIPwA==}
+
+  embla-carousel-react@8.6.0:
+    resolution: {integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  embla-carousel-reactive-utils@8.6.0:
+    resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel@8.6.0:
+    resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
 
   emittery@0.13.1:
     resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
     engines: {node: '>=12'}
 
+  emoji-regex@10.6.0:
+    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
+
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
@@ -1128,6 +3151,18 @@ packages:
     resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
     engines: {node: '>= 0.8'}
 
+  enhanced-resolve@5.24.5:
+    resolution: {integrity: sha512-L1l8TNvomm6UVW5B253AGxQagSQr+vGwhMlrrfRS2qmhx46AMpMVJKQYLvWYbysTMY8VoicOvzHzoHMbyzB+4A==}
+    engines: {node: '>=10.13.0'}
+
+  enquirer@2.4.1:
+    resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
+    engines: {node: '>=8.6'}
+
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+
   error-ex@1.3.4:
     resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
 
@@ -1139,14 +3174,17 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
-  es-object-atoms@1.1.1:
-    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+  es-object-atoms@1.1.2:
+    resolution: {integrity: sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==}
     engines: {node: '>= 0.4'}
 
   es-set-tostringtag@2.1.0:
     resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
     engines: {node: '>= 0.4'}
 
+  es-toolkit@1.51.0:
+    resolution: {integrity: sha512-zC2lQGkM7QX+Gm6iM3+WIdZJzthsEd14LvRNJneSO2hzyz/zNBENR8+YXWo1cKxgPBtV6ksPYHELbcwBRzmdCw==}
+
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -1158,23 +3196,106 @@ packages:
     resolution: {integrity: sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==}
     engines: {node: '>=8'}
 
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
+  eslint-plugin-react-hooks@7.1.1:
+    resolution: {integrity: sha512-f2I7Gw6JbvCexzIInuSbZpfdQ44D7iqdWX01FKLvrPgqxoE7oMj8clOfto8U6vYiz4yd5oKu39rRSVOe1zRu0g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 || ^10.0.0
+
+  eslint-plugin-react-refresh@0.5.4:
+    resolution: {integrity: sha512-7bqTKz7T0r+HKWFarNXByDE9/5+73wI2ru+M3zuqGbR7s/b/5/pQJXZoufWlrngqGqoZto73ZkGumCdLxk+4rw==}
+    peerDependencies:
+      eslint: ^9 || ^10
+
+  eslint-scope@9.1.2:
+    resolution: {integrity: sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@5.0.1:
+    resolution: {integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  eslint@10.9.0:
+    resolution: {integrity: sha512-5KeEOJZBfEVA47boFiBsf+6MmmJpffM7qEBg4pLla2e4nlKgdKlqCW0oSLOGsT8Wl5uCGJptLV1bkaiShj90Gw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@11.2.0:
+    resolution: {integrity: sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
     hasBin: true
 
+  esquery@1.7.0:
+    resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
   etag@1.8.1:
     resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
     engines: {node: '>= 0.6'}
 
+  eventemitter3@5.0.4:
+    resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
+
   events@3.3.0:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
 
+  eventsource-parser@3.1.1:
+    resolution: {integrity: sha512-EKN1vKAMcZ8MlYMpaNuxN6R9yakzH6uajHcHVTqWJzvu5pWw9DyhbP35HH8MVBQ+dZjAfDxk+A8NiR9KWaXiyQ==}
+    engines: {node: '>=18.0.0'}
+
+  eventsource@3.0.7:
+    resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
+    engines: {node: '>=18.0.0'}
+
   execa@5.1.1:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
     engines: {node: '>=10'}
 
+  execa@9.6.1:
+    resolution: {integrity: sha512-9Be3ZoN4LmYR90tUoVu2te2BsbzHfhJyfEiAVfz7N5/zv+jduIfLrV2xdQXOHbaD6KgpGdO9PRPM1Y4Q9QkPkA==}
+    engines: {node: ^18.19.0 || >=20.5.0}
+
+  exit-on-epipe@1.0.1:
+    resolution: {integrity: sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw==}
+    engines: {node: '>=0.8'}
+
   exit-x@0.2.2:
     resolution: {integrity: sha512-+I6B/IkJc1o/2tiURyz/ivu/O0nKNEArIUB5O7zBrlDVJr22SCLH3xTeEry428LvFhRzIA1g8izguxJ/gbNcVQ==}
     engines: {node: '>= 0.8.0'}
@@ -1189,6 +3310,12 @@ packages:
     peerDependencies:
       express: ^4 || ^5
 
+  express-rate-limit@8.6.2:
+    resolution: {integrity: sha512-YH4ru+eOJxQABscKFfRCy9R7x9QFGdezclVMwwgFFndzS2Xnm0uo6B0ABZsLhcpeptGv2qvuJVWlQr9gQZoC3A==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      express: '>= 4.11'
+
   express-session@1.19.0:
     resolution: {integrity: sha512-0csaMkGq+vaiZTmSMMGkfdCOabYv192VbytFypcvI0MANrp+4i/7yEkJ0sbAEhycQjntaKGzYfjfXQyVb7BHMA==}
     engines: {node: '>= 0.8.0'}
@@ -1201,18 +3328,58 @@ packages:
     resolution: {integrity: sha512-IuL+Elrou2ZvCFHs18/CIzy2Nzvo25nZ1/D2eIZlz7c+QUayAcYoiM2BthCjs+EBHVpjYjcuLDAiCWgeIX3X1Q==}
     engines: {node: '>= 0.10.0'}
 
+  express@5.2.1:
+    resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==}
+    engines: {node: '>= 18'}
+
   extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
 
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fast-uri@3.1.6:
+    resolution: {integrity: sha512-7Ical1vFEMr0onbVzEDIreM22I4khW+fzyQPwvAFWBp1iwdshSZRsL4jjRvPG9JP1uiqMHRto+YU6R2/CzDz5Q==}
+
+  fastq@1.20.1:
+    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
+
   fb-watchman@2.0.2:
     resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
 
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fflate@0.3.11:
+    resolution: {integrity: sha512-Rr5QlUeGN1mbOHlaqcSYMKVpPbgLy0AWT/W0EHxA6NGI12yO1jpoui2zBBvU2G824ltM6Ut8BFgfHSBGfkmS0A==}
+
   ffprobe-static@3.1.0:
     resolution: {integrity: sha512-Dvpa9uhVMOYivhHKWLGDoa512J751qN1WZAIO+Xw4L/mrUSPxS4DApzSUDbCFE/LUq2+xYnznEahTd63AqBSpA==}
 
+  figures@6.1.0:
+    resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
+    engines: {node: '>=18'}
+
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
@@ -1221,13 +3388,32 @@ packages:
     resolution: {integrity: sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==}
     engines: {node: '>= 0.8'}
 
+  finalhandler@2.1.1:
+    resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==}
+    engines: {node: '>= 18.0.0'}
+
+  find-up@3.0.0:
+    resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
+    engines: {node: '>=6'}
+
   find-up@4.1.0:
     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
     engines: {node: '>=8'}
 
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
   first-match@0.0.1:
     resolution: {integrity: sha512-VvKbnaxrC0polTFDC+teKPTdl2mn6B/KUW+WB3C9RzKDeNwbzfLdnUz3FxC+tnjvus6bI0jWrWicQyVIPdS37A==}
 
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+
+  flatted@3.4.4:
+    resolution: {integrity: sha512-5+ybhBZANEJxaH3X5evAFatUxLfEHSr7n6kYJ+1Qd0mUqr4eu9gIf6GDbWHf8RJijHrjjO8G+la14SlL2SeS1Q==}
+
   fluent-ffmpeg@2.1.3:
     resolution: {integrity: sha512-Be3narBNt2s6bsaqP6Jzq91heDgOEaDCJAXcE3qcma/EJBSy5FB4cvO31XBInuAuKBx8Kptf8dkhjK0IOru39Q==}
     engines: {node: '>=18'}
@@ -1246,18 +3432,47 @@ packages:
     resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
 
-  form-data@4.0.5:
-    resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
+  form-data@4.0.6:
+    resolution: {integrity: sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==}
     engines: {node: '>= 6'}
 
   forwarded@0.2.0:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
 
+  frac@1.1.2:
+    resolution: {integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==}
+    engines: {node: '>=0.8'}
+
+  fraction.js@5.3.4:
+    resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
+
+  framer-motion@12.43.0:
+    resolution: {integrity: sha512-1eaL3RvR/kAlbG7UYcpMptEyzPoENO0c6w7ZnB3/hh2vSAz/6uGAFn6fdoqTBguNstf3MsFhJHsD/0DHiclG+g==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   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'}
+
+  fs-extra@11.4.0:
+    resolution: {integrity: sha512-EQsFzMUJkCKGr1ePqlYADkIUmHW1s3ZXr5Yqy6wbGrfUCphpl2maM/kyOIRA2HpP3AaFQTZXD4ldjek+nccddA==}
+    engines: {node: '>=14.14'}
+
   fs-extra@9.1.0:
     resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
     engines: {node: '>=10'}
@@ -1273,6 +3488,9 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
+  fuzzysort@3.1.0:
+    resolution: {integrity: sha512-sR9BNCjBg6LNgwvxlBd0sBABvQitkLzoVY9MYYROQVX/FvfJ4Mai9LsGhDgd8qYdds0bY77VzYd5iuB+v5rwQQ==}
+
   gaxios@6.7.1:
     resolution: {integrity: sha512-LDODD4TMYx7XXdpwxAVRAIAuB0bzv0s+ywFonY46k126qzQHT9ygyoa9tncmOiQmmDrik65UYsEkv3lbfqQ3yQ==}
     engines: {node: '>=14'}
@@ -1293,10 +3511,22 @@ packages:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
 
+  get-east-asian-width@1.6.0:
+    resolution: {integrity: sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==}
+    engines: {node: '>=18'}
+
   get-intrinsic@1.3.0:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
+  get-own-enumerable-keys@1.0.0:
+    resolution: {integrity: sha512-PKsK2FSrQCyxcGHsGrLDcK0lx+0Ke+6e8KFFozA9/fIQLhQzPaRvJFdcz7+Axg3jUH/Mq+NI4xa5u/UT2tQskA==}
+    engines: {node: '>=14.16'}
+
   get-package-type@0.1.0:
     resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
     engines: {node: '>=8.0.0'}
@@ -1309,10 +3539,18 @@ packages:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
 
+  get-stream@9.0.1:
+    resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
+    engines: {node: '>=18'}
+
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
 
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
   glob@10.5.0:
     resolution: {integrity: sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==}
     deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
@@ -1322,6 +3560,10 @@ packages:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
+  globals@17.11.0:
+    resolution: {integrity: sha512-Z2I8hM+PbJDXQDq3Icgpzv+mPdwr68iZUU9d5WW4FuXfDUQfkZaZuvjMv42/5crNyw154+9+VWXbYrUgDXbxNw==}
+    engines: {node: '>=18'}
+
   google-auth-library@9.15.1:
     resolution: {integrity: sha512-Jb6Z0+nvECVz+2lzSMt9u98UsoakXxA2HGHMCxh+so3n90XgYWkq5dur19JAJV7ONiJY22yBTyJB1TSkvPq9Ng==}
     engines: {node: '>=14'}
@@ -1357,13 +3599,32 @@ packages:
     resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
     engines: {node: '>= 0.4'}
 
-  hasown@2.0.3:
-    resolution: {integrity: sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==}
+  hasown@2.0.4:
+    resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
     engines: {node: '>= 0.4'}
 
+  hast-util-to-jsx-runtime@2.3.6:
+    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
+  hermes-estree@0.25.1:
+    resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==}
+
+  hermes-parser@0.25.1:
+    resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
+
+  hono@4.13.3:
+    resolution: {integrity: sha512-r8AO2mYHoLxSHkgafNeC/BXyb2vWRxD3jem4Ts+ptav8oTG5FIRifAjuJEmZI4bSvvc2ns0GxmIYiZnHqN3mMw==}
+    engines: {node: '>=16.9.0'}
+
   html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
 
+  html-url-attributes@3.0.1:
+    resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
+
   http-errors@1.7.3:
     resolution: {integrity: sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==}
     engines: {node: '>= 0.6'}
@@ -1391,16 +3652,38 @@ packages:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
 
+  human-signals@8.0.1:
+    resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==}
+    engines: {node: '>=18.18.0'}
+
   iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
 
+  iconv-lite@0.7.3:
+    resolution: {integrity: sha512-IKXpvIzjnC9XTAUbVBcMfGS0EPaIXtW6v+zr+RRp+hqULEpo0owZax6wyRwPOJbWbzjYspQwusTsfVr0ifh4uQ==}
+    engines: {node: '>=0.10.0'}
+
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
   ignore-by-default@1.0.1:
     resolution: {integrity: sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==}
 
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  immer@10.2.0:
+    resolution: {integrity: sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==}
+
+  immer@11.1.18:
+    resolution: {integrity: sha512-EQyQtLiYW029lyoczMl/Hh4Xu7cDecSc58JRYpHyL4tIAu3eqd1yJzQX04d2BZHDkzFFvm6qJEJWOtfDSWAXbQ==}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
   import-local@3.2.0:
     resolution: {integrity: sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==}
     engines: {node: '>=8'}
@@ -1427,10 +3710,47 @@ packages:
   ini@1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
 
+  inline-style-parser@0.2.7:
+    resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
+
+  input-format@0.3.14:
+    resolution: {integrity: sha512-gHMrgrbCgmT4uK5Um5eVDUohuV9lcs95ZUUN9Px2Y0VIfjTzT2wF8Q3Z4fwLFm7c5Z2OXCm53FHoovj6SlOKdg==}
+    peerDependencies:
+      react: '>=18.1.0'
+      react-dom: '>=18.1.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
+  input-otp@1.5.0:
+    resolution: {integrity: sha512-3AcfdW1sNG0FmSA5hHMBXG7jNW5CdcdKs8ln8JOmn6S2SRkoXoJx+2UwC+ZvjflfnOdHJx0SfQ9/YjlxVYLtGQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
+  invariant@2.2.4:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+
+  ip-address@10.5.0:
+    resolution: {integrity: sha512-R5SnVLJmgYYvf2F2ZgwSBnelz5G4q5AxIC277GDfUaNbrZKNANcBC7RHqYYePlszf4kBolVkJauG0ZjHHFh55g==}
+    engines: {node: '>= 12'}
+
   ipaddr.js@1.9.1:
     resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
     engines: {node: '>= 0.10'}
 
+  is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+
+  is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+
   is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
@@ -1442,6 +3762,19 @@ packages:
     resolution: {integrity: sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==}
     engines: {node: '>= 0.4'}
 
+  is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+
+  is-docker@2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -1458,14 +3791,45 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+
+  is-in-ssh@1.0.0:
+    resolution: {integrity: sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==}
+    engines: {node: '>=20'}
+
+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+
+  is-interactive@2.0.0:
+    resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
+    engines: {node: '>=12'}
+
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
+  is-obj@2.0.0:
+    resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
+    engines: {node: '>=8'}
+
+  is-obj@3.0.0:
+    resolution: {integrity: sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==}
+    engines: {node: '>=12'}
+
   is-plain-obj@4.1.0:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
 
+  is-promise@4.0.0:
+    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
+
+  is-regexp@3.1.0:
+    resolution: {integrity: sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA==}
+    engines: {node: '>=12'}
+
   is-standalone-pwa@0.1.1:
     resolution: {integrity: sha512-9Cbovsa52vNQCjdXOzeQq5CnCbAcRk05aU62K20WO372NrTv0NxibLFCK6lQ4/iZEFdEA3p3t2VNOn8AJ53F5g==}
 
@@ -1473,9 +3837,33 @@ packages:
     resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
     engines: {node: '>=8'}
 
+  is-stream@4.0.1:
+    resolution: {integrity: sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==}
+    engines: {node: '>=18'}
+
+  is-unicode-supported@1.3.0:
+    resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==}
+    engines: {node: '>=12'}
+
+  is-unicode-supported@2.1.0:
+    resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==}
+    engines: {node: '>=18'}
+
+  is-wsl@2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
+
+  is-wsl@3.1.1:
+    resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
+    engines: {node: '>=16'}
+
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
+  isexe@3.1.5:
+    resolution: {integrity: sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==}
+    engines: {node: '>=18'}
+
   istanbul-lib-coverage@3.2.2:
     resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
     engines: {node: '>=8'}
@@ -1627,6 +4015,13 @@ packages:
       node-notifier:
         optional: true
 
+  jiti@2.7.0:
+    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
+    hasBin: true
+
+  jose@6.2.10:
+    resolution: {integrity: sha512-iiW7J9qRFlGxvCOIBDBDxFePQSn7ZMAnrYGhrrOo6siO/MIqwfyilLR27pkfDgUk+raLuzADS8A3S/KLBisc0g==}
+
   js-beautify@1.15.4:
     resolution: {integrity: sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==}
     engines: {node: '>=14'}
@@ -1638,8 +4033,12 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  js-yaml@3.15.0:
-    resolution: {integrity: sha512-ttBQIIQPDeLjpPOohtUdXuXUVoA2uIB6fEH9HyJ7234s5mBJ5wTx20njxplLZQgLaOfpmPQA7X2t5AX6tIPbog==}
+  js-yaml@3.15.1:
+    resolution: {integrity: sha512-S99WuO3HlhO3XN41EtYUNl9zzXjoJx7QvmipxsJVxtCBT0YHEFy+iOJhjSvrmV12nYhWpZaM8lPHkJm0yUMbag==}
+    hasBin: true
+
+  js-yaml@4.3.1:
+    resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==}
     hasBin: true
 
   jsesc@3.1.0:
@@ -1650,9 +4049,27 @@ packages:
   json-bigint@1.0.0:
     resolution: {integrity: sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==}
 
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
   json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  json-schema-typed@7.0.3:
+    resolution: {integrity: sha512-7DE8mpG+/fVw+dTpjbxnx47TaMnDfOI1jwft9g1VybltZCduyRQPJPvc+zzKY9WPHxhPWczyFuYa6I8Mw4iU5A==}
+
+  json-schema-typed@8.0.2:
+    resolution: {integrity: sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
   json5@2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
@@ -1671,17 +4088,191 @@ packages:
   jws@4.0.1:
     resolution: {integrity: sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==}
 
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  kleur@3.0.3:
+    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
+    engines: {node: '>=6'}
+
+  kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+
   leven@3.1.0:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}
 
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  libphonenumber-js@1.13.11:
+    resolution: {integrity: sha512-ETER2kMaIFTI/Nh1a8Gk03dUF/SL0VZqtI+CcVHZxp5WIHYwNS7S+uiYZDYCvLy3lOR4/DAD5jf0h5WkePPpqg==}
+
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-android-arm64@1.33.0:
+    resolution: {integrity: sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-arm64@1.33.0:
+    resolution: {integrity: sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    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-darwin-x64@1.33.0:
+    resolution: {integrity: sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-freebsd-x64@1.33.0:
+    resolution: {integrity: sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm-gnueabihf@1.33.0:
+    resolution: {integrity: sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-gnu@1.33.0:
+    resolution: {integrity: sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-arm64-musl@1.33.0:
+    resolution: {integrity: sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-gnu@1.33.0:
+    resolution: {integrity: sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  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]
+    libc: [musl]
+
+  lightningcss-linux-x64-musl@1.33.0:
+    resolution: {integrity: sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-arm64-msvc@1.33.0:
+    resolution: {integrity: sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    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-win32-x64-msvc@1.33.0:
+    resolution: {integrity: sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+
+  lightningcss@1.33.0:
+    resolution: {integrity: sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==}
+    engines: {node: '>= 12.0.0'}
+
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
+  locate-path@3.0.0:
+    resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
+    engines: {node: '>=6'}
+
   locate-path@5.0.0:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
 
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
   lodash.includes@4.3.0:
     resolution: {integrity: sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==}
 
@@ -1706,12 +4297,31 @@ packages:
   lodash@4.18.1:
     resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==}
 
+  log-symbols@6.0.0:
+    resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==}
+    engines: {node: '>=18'}
+
+  longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucide-react@1.33.0:
+    resolution: {integrity: sha512-MTRwMy0ZlL8Ur/vOAiJ9XGHE+kFPC7brq6MxAm0GiGXEBj0qy0jA/pG4N675oSzciO/UCdX8T+5yUQdmDeTLxg==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
   make-dir@4.0.0:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
@@ -1719,24 +4329,168 @@ packages:
   makeerror@1.0.12:
     resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==}
 
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  mdast-util-find-and-replace@3.0.2:
+    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
+
+  mdast-util-from-markdown@2.0.3:
+    resolution: {integrity: sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==}
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
+
+  mdast-util-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
+
+  mdast-util-gfm-table@2.0.0:
+    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
+
+  mdast-util-gfm@3.1.0:
+    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
+
+  mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+
+  mdast-util-mdx-jsx@3.2.0:
+    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
+
+  mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+
+  mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+
+  mdast-util-to-hast@13.2.1:
+    resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
+
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
+
+  mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+
   media-typer@0.3.0:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
     engines: {node: '>= 0.6'}
 
+  media-typer@1.1.1:
+    resolution: {integrity: sha512-yz3xRaG20c6/BOzvYoDaGtPmGscs7YivItZEEqe6GbwNfHuxu9YNmvnEkMzKldAGY4/80pRcQRZSEnhquk9XuQ==}
+    engines: {node: '>= 0.8'}
+
   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'}
+
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
+  merge2@1.4.1:
+    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==}
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
+
+  micromark-extension-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
+
+  micromark-extension-gfm-table@2.1.1:
+    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
+
+  micromark-extension-gfm@3.0.0:
+    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
+
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
+  micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -1745,10 +4499,18 @@ packages:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
 
+  mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
+    engines: {node: '>= 0.6'}
+
   mime-types@2.1.35:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
 
+  mime-types@3.0.2:
+    resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
+    engines: {node: '>=18'}
+
   mime@1.6.0:
     resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
     engines: {node: '>=4'}
@@ -1758,8 +4520,16 @@ packages:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
 
-  minimatch@10.2.5:
-    resolution: {integrity: sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==}
+  mimic-fn@3.1.0:
+    resolution: {integrity: sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==}
+    engines: {node: '>=8'}
+
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
+  minimatch@10.2.6:
+    resolution: {integrity: sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==}
     engines: {node: 18 || 20 || >=22}
 
   minimatch@3.1.5:
@@ -1769,6 +4539,9 @@ packages:
     resolution: {integrity: sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
   minipass@7.1.3:
     resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -1779,16 +4552,32 @@ packages:
   moment@2.30.1:
     resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}
 
+  motion-dom@12.43.0:
+    resolution: {integrity: sha512-azKON4d9S65PEoFUiQTMTgPheEmzf2QngdRc50AKfJp9Q9mmcBVw22c8eMq9k8kxOFHdL7+WZY7N/5F/lwiDag==}
+
+  motion-utils@12.39.0:
+    resolution: {integrity: sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==}
+
   ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
 
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  multer@2.1.1:
-    resolution: {integrity: sha512-mo+QTzKlx8R7E5ylSXxWzGoXoZbOsRMpyitcht8By2KHvMbf3tjwosZ/Mu/XYU6UuJ3VZnODIrak5ZrPiPyB6A==}
+  multer@2.2.0:
+    resolution: {integrity: sha512-6rdyFg2kLrMh9Jee7/BMPuV9lEAd7lLW2YUpF9/YxR7njyoUwwQ0ZPh3TaIY50Sw6vlyD2HW3wGOkTS4P79xrQ==}
     engines: {node: '>= 10.16.0'}
 
+  nanoid@3.3.18:
+    resolution: {integrity: sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  nanoid@5.1.16:
+    resolution: {integrity: sha512-kVrnsrJqMR8+oLJnGEmSWw9BivK5mt7H3FZatVRjrc5wGqFYuBxX1yG7+A7Gi5AefkX6t/oCkizcQgpu0cY1dQ==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
   napi-postinstall@0.3.4:
     resolution: {integrity: sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
@@ -1801,6 +4590,16 @@ packages:
     resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
     engines: {node: '>= 0.6'}
 
+  negotiator@1.1.0:
+    resolution: {integrity: sha512-NMPBRMJgiQHjbd8phG3Vebdx4kZ1H121rbl5IkMqeOsahptB9BKo/d7oJ3zTXqTgagn2bWlNSXkh0QUGM31RYg==}
+    engines: {node: '>=18'}
+
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
   node-cron@4.6.0:
     resolution: {integrity: sha512-Si/bzYiKRHOB8/a99T2+SDGN582ONDMSTlJr5oCkT6GtnqPjZ2s10eoQRYkW9ZHwjVxONL+W8Fb+qR0AHMQsdg==}
     engines: {node: '>=20'}
@@ -1817,8 +4616,8 @@ packages:
   node-int64@0.4.0:
     resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
 
-  node-releases@2.0.51:
-    resolution: {integrity: sha512-wRNIrw4DmVLKQlbgOMdkMx27Wrpzes2hh5Jtbi2bjPd+4wJstWIqP5A+lscnqbm0xxmT5Bpg8Lec5ItEBwx6BQ==}
+  node-releases@2.0.53:
+    resolution: {integrity: sha512-D9UOmYG3UH1V+ENW56t5QXBwJw1YEY18ruVeus89Rw+SyIgjPkCO84bRzO3uNIYosJbNwiabWVn48o3uJLjxFQ==}
     engines: {node: '>=18'}
 
   nodemailer@6.10.1:
@@ -1839,10 +4638,17 @@ packages:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
+  normalize-wheel@1.0.1:
+    resolution: {integrity: sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==}
+
   npm-run-path@4.0.1:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
 
+  npm-run-path@6.0.0:
+    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
+    engines: {node: '>=18'}
+
   nub@0.0.0:
     resolution: {integrity: sha512-dK0Ss9C34R/vV0FfYJXuqDAqHlaW9fvWVufq9MmGF2umCuDbd5GRfRD9fpi/LiM0l4ZXf8IBB+RYmZExqCrf0w==}
 
@@ -1854,6 +4660,10 @@ packages:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
 
+  object-treeify@1.1.33:
+    resolution: {integrity: sha512-EFVjAYfzWqWsBMRHPMAXLCDIJnpMhdWAqR7xG6M6a2cs6PMFpl/+Z20w9zDW4vkxOFfddegBKq9Rehd0bxWE7A==}
+    engines: {node: '>= 10'}
+
   on-finished@2.4.1:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
     engines: {node: '>= 0.8'}
@@ -1869,6 +4679,26 @@ packages:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
 
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
+  open@11.0.1:
+    resolution: {integrity: sha512-NzwMUB6C1D0+Kd+9iMS/H4k+Ck3cTX6Ckyfr/gAGlmvSE1LUQZnEZvWBi4PYmMwH/S5SMeTXnE+9uAz8uF+pWw==}
+    engines: {node: '>=20'}
+
+  open@8.4.2:
+    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
+    engines: {node: '>=12'}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  ora@8.2.0:
+    resolution: {integrity: sha512-weP+BZ8MVNnlCm8c0Qdc1WSWq4Qn7I+9CJGm7Qali6g44e/PUzbjNqJX5NJ9ljlNMosfJvg1fKEGILklK9cwnw==}
+    engines: {node: '>=18'}
+
   p-limit@2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
@@ -1877,10 +4707,18 @@ packages:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
 
+  p-locate@3.0.0:
+    resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==}
+    engines: {node: '>=6'}
+
   p-locate@4.1.0:
     resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
     engines: {node: '>=8'}
 
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
   p-try@2.2.0:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
@@ -1888,14 +4726,32 @@ packages:
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
+
   parse-json@5.2.0:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
 
+  parse-ms@4.0.0:
+    resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
+    engines: {node: '>=18'}
+
   parseurl@1.3.3:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
 
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
+  path-exists@3.0.0:
+    resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
+    engines: {node: '>=4'}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -1908,6 +4764,10 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
+  path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
@@ -1918,14 +4778,21 @@ packages:
   path-to-regexp@0.1.13:
     resolution: {integrity: sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==}
 
+  path-to-regexp@8.4.2:
+    resolution: {integrity: sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==}
+
   path@0.12.7:
     resolution: {integrity: sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==}
 
+  pdfjs-dist@6.2.108:
+    resolution: {integrity: sha512-YxFb+SQcodN2rnX9Tn3dHYlqfb7NjlzzfONPpJd+AKoKtUjEdevTfbC07d5TcczzOK6261auRkP/M8OBHs9vFQ==}
+    engines: {node: '>=22.13.0 || >=24'}
+
   pg-cloudflare@1.4.0:
     resolution: {integrity: sha512-Vo7z/6rrQYxpNRylp4Tlob2elzbh+N/MOQbxFVWCxS7oEx6jF53GTJFxK2WWpKuBRkmiin4Mt+xofFDjx09R0A==}
 
-  pg-connection-string@2.13.0:
-    resolution: {integrity: sha512-EMnU9E2fSULdsbErBbMaXJvFeD9B4+nPcM3f+4lsiCR0BHLPrLVjv3DbyM2hgQQviKJaTWIRRTjKjWlHg3p2ig==}
+  pg-connection-string@2.14.0:
+    resolution: {integrity: sha512-XwWDGcLRGCXAR8F/AM5bG7Q+A3Wm2s6QeEjlOKZLlH3UYcguiqCWKyWXVag5TLTIjR7oOJUY8kcADaZgWPyLeg==}
 
   pg-hstore@2.3.4:
     resolution: {integrity: sha512-N3SGs/Rf+xA1M2/n0JBiXFDVMzdekwLZLAO0g7mpDY9ouX+fDI7jS6kTq3JujmYbtNSJ53TJ0q4G98KVZSM4EA==}
@@ -1940,15 +4807,15 @@ packages:
     peerDependencies:
       pg: '>=8.0'
 
-  pg-protocol@1.14.0:
-    resolution: {integrity: sha512-n5taZ1kO3s9ngDTVxsEznOqCyToTgz0FLuPq0B33COy5pPpuWJpY3/2oRBVETuOgzdqRXfWpM9HIhp2LBBT1BA==}
+  pg-protocol@1.16.0:
+    resolution: {integrity: sha512-sILXutLVjCLjcDuOmvhX5e2Z4cS5qG/6Bu3VkpFwdf/633ElGLpEh9bgmuI5I4sqKqkifQiGyiCcx1HdtrK7tg==}
 
   pg-types@2.2.0:
     resolution: {integrity: sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==}
     engines: {node: '>=4'}
 
-  pg@8.21.0:
-    resolution: {integrity: sha512-AUP1EYJuHraQGsVoCQVIcM7TEJVGtDzxWtGFZd8rds9d+CCXlU5Js1rYgfLNvxy9iJrpHjGrRjoi/3BT9fRyiA==}
+  pg@8.23.0:
+    resolution: {integrity: sha512-Ip2EQCngowJLGOfCwkFhPXU7/ljlhn6Rxlmy4XYfL2Y+vyRM59+8uR2xqRWKdYmbXmxCFOAmKxBuSUCdF34qLg==}
     engines: {node: '>= 16.0.0'}
     peerDependencies:
       pg-native: '>=3.0.1'
@@ -1974,10 +4841,29 @@ packages:
     resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
     engines: {node: '>= 6'}
 
+  pkce-challenge@5.0.1:
+    resolution: {integrity: sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==}
+    engines: {node: '>=16.20.0'}
+
   pkg-dir@4.2.0:
     resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
     engines: {node: '>=8'}
 
+  pkg-up@3.1.0:
+    resolution: {integrity: sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==}
+    engines: {node: '>=8'}
+
+  postcss-selector-parser@7.1.5:
+    resolution: {integrity: sha512-KvvtD7SrlBP7dlgkBghEE3r84CABm5SmV2aNcG4oCA+qDnJ/tvKonFVvwWAyyWUEwxuNawdfEAZKP9zM3oZ2Uw==}
+    engines: {node: '>=4'}
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@8.5.26:
+    resolution: {integrity: sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
   postgres-array@2.0.0:
     resolution: {integrity: sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==}
     engines: {node: '>=4'}
@@ -1994,14 +4880,45 @@ packages:
     resolution: {integrity: sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==}
     engines: {node: '>=0.10.0'}
 
+  powershell-utils@0.1.0:
+    resolution: {integrity: sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==}
+    engines: {node: '>=20'}
+
+  powershell-utils@0.2.0:
+    resolution: {integrity: sha512-ZlsFlG7MtSFCoc5xreOvBAozCJ6Pf06opgJjh9ONEv418xpZSAzNjstD36C6+JwOnfSqOW/9uDkqKjezTdxZhw==}
+    engines: {node: '>=20'}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
   pretty-format@30.4.1:
     resolution: {integrity: sha512-K6KiKMHTL4jjX4u3Kir2EW07nRfcqVTXIImx50wbjHQTcZPgg+gjVeNTIT3l3L1Rd4UefxfogquC9J37SoFyyw==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
+  pretty-ms@9.3.0:
+    resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
+    engines: {node: '>=18'}
+
+  printj@1.1.2:
+    resolution: {integrity: sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ==}
+    engines: {node: '>=0.8'}
+    hasBin: true
+
   process@0.11.10:
     resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
     engines: {node: '>= 0.6.0'}
 
+  prompts@2.4.2:
+    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
+    engines: {node: '>= 6'}
+
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
+  property-information@7.2.0:
+    resolution: {integrity: sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==}
+
   proto-list@1.2.4:
     resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
 
@@ -2016,13 +4933,38 @@ packages:
   pstree.remy@1.1.8:
     resolution: {integrity: sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==}
 
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
   pure-rand@7.0.1:
     resolution: {integrity: sha512-oTUZM/NAZS8p7ANR3SHh30kXB+zK2r2BPcEn/awJIbOvq82WoMN4p62AWWp3Hhw50G0xMsw1mhIBLqHw64EcNQ==}
 
-  qs@6.15.2:
-    resolution: {integrity: sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==}
+  qrcode.react@4.2.0:
+    resolution: {integrity: sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  qs@6.15.3:
+    resolution: {integrity: sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==}
     engines: {node: '>=0.6'}
 
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  radix-ui@1.6.7:
+    resolution: {integrity: sha512-QBdhh1arIEUvPC0dQ5+nwWAxt7+N+oP/9jPwjJkGFoSk/sqxg32gJtSXGtFh8frAIcS6oC9cx2Q+7KYCQLOAeA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   random-bytes@1.0.0:
     resolution: {integrity: sha512-iv7LhNVO047HzYR3InF6pUcUsPQiHTM1Qal51DcGSuZFBil1aBBWG5eHPNek7bvILMaYJ/8RU1e8w1AMdHmLQQ==}
     engines: {node: '>= 0.8'}
@@ -2031,6 +4973,10 @@ packages:
     resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
     engines: {node: '>= 0.6'}
 
+  range-parser@1.3.0:
+    resolution: {integrity: sha512-hek2mFQpPuI4E1BBKrSto+BU3e3x4xuarsbiwr3+lf7p44juvFMV0XFWQAP3xUyqXA4RrXLIoaSUGbSt056ZMw==}
+    engines: {node: '>= 0.6'}
+
   rate-limit-redis@4.3.1:
     resolution: {integrity: sha512-+a1zU8+D7L8siDK9jb14refQXz60vq427VuiplgnaLk9B2LnvGe/APLTfhwb4uNIL7eWVknh8GnRp/unCj+lMA==}
     engines: {node: '>= 16'}
@@ -2041,11 +4987,141 @@ packages:
     resolution: {integrity: sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==}
     engines: {node: '>= 0.8'}
 
+  raw-body@3.0.2:
+    resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==}
+    engines: {node: '>= 0.10'}
+
+  react-day-picker@9.14.0:
+    resolution: {integrity: sha512-tBaoDWjPwe0M5pGrum4H0SR6Lyk+BO9oHnp9JbKpGKW2mlraNPgP9BMfsg5pWpwrssARmeqk7YBl2oXutZTaHA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  react-dom@19.2.8:
+    resolution: {integrity: sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==}
+    peerDependencies:
+      react: ^19.2.8
+
+  react-easy-crop@6.2.3:
+    resolution: {integrity: sha512-ebimG3OGlzizjxEZ77Cj9CVLcg5vDZ6QVz8ud1rx4WmsCDWHIROEhgMi0GpJ/jKAuwHrH0M+QZUK4hyvxbYhOA==}
+    peerDependencies:
+      react: '>=16.4.0'
+      react-dom: '>=16.4.0'
+
+  react-fast-compare@3.2.2:
+    resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
+
+  react-helmet-async@3.0.0:
+    resolution: {integrity: sha512-nA3IEZfXiclgrz4KLxAhqJqIfFDuvzQwlKwpdmzZIuC1KNSghDEIXmyU0TKtbM+NafnkICcwx8CECFrZ/sL/1w==}
+    peerDependencies:
+      react: ^16.6.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  react-hook-form@7.86.0:
+    resolution: {integrity: sha512-4kbWJrh5jPZt1+YqVcXcGKffGcXV/XVbozknLh0Yjh0KhpoAkus21TAQhzRYqNwFkkObmnSvRlZZ3GT+ehoIrA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
+  react-icons@5.7.0:
+    resolution: {integrity: sha512-LBLy340Rzqy6+/yVhZKT3B/QpP1BZaesGqasf09HPOBzRarcDIFH0WwXlXQfE7q7ipxK4MSiC5DIBWURCny6fw==}
+    peerDependencies:
+      react: '*'
+
+  react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
-  react-is@19.2.7:
-    resolution: {integrity: sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A==}
+  react-is@19.2.8:
+    resolution: {integrity: sha512-s5un28nYxKJw5gvUHyW5PCC28CvBqLu9r3cWgzHT4Vo/5fqqkFcdRYsGcKf50WMPpjjFZS5d76fn3YCo2njKwQ==}
+
+  react-markdown@10.1.0:
+    resolution: {integrity: sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==}
+    peerDependencies:
+      '@types/react': '>=18'
+      react: '>=18'
+
+  react-phone-number-input@3.4.18:
+    resolution: {integrity: sha512-EmPhJFSxQB7CTmLAlQfGAQQPF+WmJECU08gjyUt50zd2iESb4ETsm6z+BRfUEjH+TXct4EWvJvub+OztJxb/Cg==}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
+  react-photo-view@1.2.7:
+    resolution: {integrity: sha512-MfOWVPxuibncRLaycZUNxqYU8D9IA+rbGDDaq6GM8RIoGJal592hEJoRAyRSI7ZxyyJNJTLMUWWL3UIXHJJOpw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  react-redux@9.3.0:
+    resolution: {integrity: sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==}
+    peerDependencies:
+      '@types/react': ^18.2.25 || ^19
+      react: ^18.0 || ^19
+      redux: ^5.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      redux:
+        optional: true
+
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.2:
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-resizable-panels@4.12.3:
+    resolution: {integrity: sha512-GHMJWnDXui/3RX4bT+cgBP+N3N2nkwcoZATr/2xLFpqQQe7TlBrE0cGM0dUa9ceT7A90tUrSRsiqgRG+g0/2AA==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+
+  react-router-dom@7.18.2:
+    resolution: {integrity: sha512-AIKJ/jgGlFb3EbfCXk5Gzshiwt+l3mqbCrNjmEWMMjqQxNJ3svBa6bgzFyCC2Sw3RA0VWF1kg3uQf2OFhxb8hw==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+
+  react-router@7.18.2:
+    resolution: {integrity: sha512-aUVMjFm3GAPTTZL7oYr5E7ETiqfQCHRLH+B+5afnICvf0r7kkK4eR6SMuwbSTJw/7t+12khT/Kahij49fqOCIg==}
+    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'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react@19.2.8:
+    resolution: {integrity: sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==}
+    engines: {node: '>=0.10.0'}
 
   readable-stream@3.6.2:
     resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
@@ -2055,17 +5131,63 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  recast@0.23.21:
+    resolution: {integrity: sha512-mFAyJq9vUbSTARLZUvAEf1z3YxlvAwswbmxMx2mPA/MSm4KmpwvwvhsH/NIrZhyOuwD60Lzyw2qh83uCbgTPYw==}
+    engines: {node: '>= 4'}
+
+  recharts@3.8.0:
+    resolution: {integrity: sha512-Z/m38DX3L73ExO4Tpc9/iZWHmHnlzWG4njQbxsF5aSjwqmHNDDIm0rdEBArkwsBvR8U6EirlEHiQNYWCVh9sGQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-is: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   redis@4.7.1:
     resolution: {integrity: sha512-S1bJDnqLftzHXHP8JsT5II/CtHWQrASX5K96REjWjlmWKrviSOLWmM7QnRLstAWsu1VBBV1ffV6DzCvxNP0UJQ==}
 
+  redux-thunk@3.1.0:
+    resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
+    peerDependencies:
+      redux: ^5.0.0
+
+  redux@5.0.1:
+    resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
+
+  remark-gfm@4.0.1:
+    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
+
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+
+  remark-rehype@11.1.2:
+    resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
+
+  remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
 
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  reselect@5.1.1:
+    resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
+
+  reselect@5.3.0:
+    resolution: {integrity: sha512-XGoLeRAVzUTcJ1qkxPQhDJyIZ5d6zzZD9nT7AEZOaaU9UbWclhycElmhO+VD5bFeLuzhPBaOV2oXC8uG35ZSpg==}
+
   resolve-cwd@3.0.0:
     resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==}
     engines: {node: '>=8'}
 
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
   resolve-from@5.0.0:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
@@ -2075,24 +5197,54 @@ packages:
     engines: {node: '>= 0.4'}
     hasBin: true
 
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+
   retry-as-promised@7.1.1:
     resolution: {integrity: sha512-hMD7odLOt3LkTjcif8aRZqi/hybjpLNgSk5oF5FCowfCjok6LukpN2bDX7R5wDmbgBQFn7YoBxSagmtXHaJYJw==}
 
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
   rndm@1.2.0:
     resolution: {integrity: sha512-fJhQQI5tLrQvYIYFpOnFinzv9dwmR7hRnUz1XqP3OJ1jIweTNOd6aTO4jwQSgcBSFUB+/KHJxuGneime+FdzOw==}
 
+  rolldown@1.2.5:
+    resolution: {integrity: sha512-VD2IE5PUG4Oj8zz2VGykiYd5wbnjdIiSsNQb8Qu5B+noEp+A78mu2iVvpp27g8es14Tk9rofNs5Tku9iQCS4fA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  router@2.2.0:
+    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
+    engines: {node: '>= 18'}
+
+  run-applescript@7.1.0:
+    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
+    engines: {node: '>=18'}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  rxjs@7.8.2:
+    resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
+
   safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
 
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
-  semver@7.8.0:
-    resolution: {integrity: sha512-AcM7dV/5ul4EekoQ29Agm5vri8JNqRyj39o0qpX6vDF2GZrtutZl5RwgD1XnZjiTAfncsJhMI48QQH3sN87YNA==}
+  semver@7.8.5:
+    resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -2100,6 +5252,10 @@ packages:
     resolution: {integrity: sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==}
     engines: {node: '>= 0.8.0'}
 
+  send@1.2.1:
+    resolution: {integrity: sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==}
+    engines: {node: '>= 18'}
+
   sequelize-cli@6.6.5:
     resolution: {integrity: sha512-DqyISCULOaEbTM+rRQH4YvcUWeOC1XDiSKcjsC6TfAnT7W837mNkChJhtB/Z4FdCFHRCojmiP7zsrA4pARmacA==}
     engines: {node: '>=10.0.0'}
@@ -2146,12 +5302,36 @@ packages:
     resolution: {integrity: sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==}
     engines: {node: '>= 0.8.0'}
 
+  serve-static@2.2.1:
+    resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
+    engines: {node: '>= 18'}
+
+  set-cookie-parser@2.7.2:
+    resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}
+
   setprototypeof@1.1.1:
     resolution: {integrity: sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==}
 
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
+  shadcn@4.19.0:
+    resolution: {integrity: sha512-EQF6R+CUXTsEP2BpyhxrUEAFesrtFD1POvVOf5jM+wkgtA4kG1EW1+1Wlmi9LqiprSL681JJXBcS0u8WkVVVyQ==}
+    engines: {node: '>=20.18.1'}
+    hasBin: true
+
+  shallowequal@1.1.0:
+    resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==}
+
+  sharp@0.35.3:
+    resolution: {integrity: sha512-ej0zVHuZGHCiABXcNxeYhpRnPNPAcvbG8RMdBAhDAxLKkCRVSpK3Iyu7qbqw3JMzoj0REeM6f3tJLtVwl0023Q==}
+    engines: {node: '>=20.9.0'}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -2160,6 +5340,10 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  shell-quote@1.9.0:
+    resolution: {integrity: sha512-Iov+JwFv/2HcTpcwNMKd8+IWNb8tboQJNQTkAY/LLVK7gGH9jy+LGkVqPxfekHl+yMmiqXszdGWXgkfml7hjqA==}
+    engines: {node: '>= 0.4'}
+
   side-channel-list@1.0.1:
     resolution: {integrity: sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==}
     engines: {node: '>= 0.4'}
@@ -2172,8 +5356,8 @@ packages:
     resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
     engines: {node: '>= 0.4'}
 
-  side-channel@1.1.0:
-    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+  side-channel@1.1.1:
+    resolution: {integrity: sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==}
     engines: {node: '>= 0.4'}
 
   signal-exit@3.0.7:
@@ -2187,10 +5371,35 @@ packages:
     resolution: {integrity: sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==}
     engines: {node: '>=10'}
 
+  sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+
   slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
 
+  smart-buffer@4.2.0:
+    resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
+    engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
+
+  socks@2.8.9:
+    resolution: {integrity: sha512-LJhUYUvItdQ0LkJTmPeaEObWXAqFyfmP85x0tch/ez9cahmhlBBLbIqDFnvBnUJGagb0JbIQrkBs1wJ+yRYpEw==}
+    engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
+
+  sonner@2.0.8:
+    resolution: {integrity: sha512-UM/ByIoFra8yzV75n1o0Puu0bw5U/9UNnDacrJNspekBewIfsQ3D6ez1nvlWpt7aTsO6rujQtifBpycwIivqlg==}
+    peerDependencies:
+      '@types/react': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
   source-map-support@0.5.13:
     resolution: {integrity: sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==}
 
@@ -2198,6 +5407,9 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
   split2@4.2.0:
     resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
     engines: {node: '>= 10.x'}
@@ -2205,6 +5417,10 @@ packages:
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
+  ssf@0.11.2:
+    resolution: {integrity: sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==}
+    engines: {node: '>=0.8'}
+
   stack-utils@2.0.6:
     resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
     engines: {node: '>=10'}
@@ -2217,6 +5433,10 @@ packages:
     resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
     engines: {node: '>= 0.8'}
 
+  stdin-discarder@0.2.2:
+    resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==}
+    engines: {node: '>=18'}
+
   stream-browserify@3.0.0:
     resolution: {integrity: sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==}
 
@@ -2236,9 +5456,20 @@ packages:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
     engines: {node: '>=12'}
 
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
   string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
 
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
+  stringify-object@5.0.0:
+    resolution: {integrity: sha512-zaJYxz2FtcMb4f+g60KsRNFOpVMUyuJgA51Zi5Z1DOTC3S59+OQiVOzE9GZt0x72uBGWKsQIuBKeF9iusmKFsg==}
+    engines: {node: '>=14.16'}
+
   strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -2247,6 +5478,10 @@ packages:
     resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
     engines: {node: '>=12'}
 
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
   strip-bom@4.0.0:
     resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
     engines: {node: '>=8'}
@@ -2255,10 +5490,20 @@ packages:
     resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
     engines: {node: '>=6'}
 
+  strip-final-newline@4.0.0:
+    resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
+    engines: {node: '>=18'}
+
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  style-to-js@1.1.21:
+    resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==}
+
+  style-to-object@1.0.14:
+    resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
+
   supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -2279,10 +5524,33 @@ packages:
     resolution: {integrity: sha512-eNRKgb3z66Yp3D2CixVujOUvXLFUTij/zVnV8KRyvFdQwpz7I5DS8UfRkTeLzb64u+dkzDSdelE24izu+zSSUg==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
+  systeminformation@5.33.1:
+    resolution: {integrity: sha512-DEN6ICHk3Tk0Uf/hrAHh7xlt7iL5CJFBtPZinA0H62DrGG/KPKqq/Nzj6lCXPS4Ay/sf/14zNnk9LpqKzBIc+w==}
+    engines: {node: '>=10.0.0'}
+    os: [darwin, linux, win32, freebsd, openbsd, netbsd, sunos, android]
+    hasBin: true
+
+  tailwind-merge@3.6.0:
+    resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
+
+  tailwindcss@4.3.3:
+    resolution: {integrity: sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==}
+
+  tapable@2.3.3:
+    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
+    engines: {node: '>=6'}
+
   test-exclude@6.0.0:
     resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
     engines: {node: '>=8'}
 
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
+
   tmpl@1.0.5:
     resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==}
 
@@ -2308,6 +5576,23 @@ packages:
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
+  tree-kill@1.2.2:
+    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
+    hasBin: true
+
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
+  trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+
+  ts-morph@26.0.0:
+    resolution: {integrity: sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==}
+
+  tsconfig-paths@4.2.0:
+    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+    engines: {node: '>=6'}
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -2315,6 +5600,13 @@ packages:
     resolution: {integrity: sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==}
     engines: {node: '>=0.6.x'}
 
+  tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
   type-detect@4.0.8:
     resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
     engines: {node: '>=4'}
@@ -2327,6 +5619,10 @@ packages:
     resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
     engines: {node: '>= 0.6'}
 
+  type-is@2.1.0:
+    resolution: {integrity: sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==}
+    engines: {node: '>= 18'}
+
   typedarray@0.0.6:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
 
@@ -2351,8 +5647,34 @@ packages:
   underscore@1.13.8:
     resolution: {integrity: sha512-DXtD3ZtEQzc7M8m4cXotyHR+FAS18C64asBYY5vqZexfYryNNnDc02W4hKg3rdQuqOYas1jkseX0+nZXjTXnvQ==}
 
-  undici-types@7.24.6:
-    resolution: {integrity: sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==}
+  undici-types@8.3.0:
+    resolution: {integrity: sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==}
+
+  undici@7.29.0:
+    resolution: {integrity: sha512-IDxfleLmmbSskfWSUATiN1nfn2rDuvnMOqb5CWR92iIfojA0Ud+ulOAAEQ57LPr9rWmsreUyf5lwyao+7GNNVw==}
+    engines: {node: '>=20.18.1'}
+
+  unicorn-magic@0.3.0:
+    resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
+    engines: {node: '>=18'}
+
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+
+  unist-util-is@6.0.1:
+    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.2:
+    resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
+
+  unist-util-visit@5.1.0:
+    resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
 
   universalify@2.0.1:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
@@ -2365,12 +5687,40 @@ packages:
   unrs-resolver@1.12.2:
     resolution: {integrity: sha512-dmlRxBJJayXjqTwC+JtF1HhJmgf3ftQ3YejFcZrf4+KKtJv0qDsK1pjqaaVjG7wJ5NJ6UVP1OqRMQ71Z4C3rxQ==}
 
-  update-browserslist-db@1.2.3:
-    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+  update-browserslist-db@1.3.1:
+    resolution: {integrity: sha512-ZZ61DsRsOnakl74HAmp3oSN4aXUmEWXf+i/yv0h7tIBfICc3VdrFErQKUUKPgu3AMsTUMbcongALEN4l6GSUrQ==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -2395,6 +5745,10 @@ packages:
     resolution: {integrity: sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==}
     engines: {node: '>=10.12.0'}
 
+  validate-npm-package-name@7.0.2:
+    resolution: {integrity: sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
   validator@13.15.35:
     resolution: {integrity: sha512-TQ5pAGhd5whStmqWvYF4OjQROlmv9SMFVt37qoCBdqRffuuklWYQlCNnEs2ZaIBD1kZRNnikiZOS1eqgkar0iw==}
     engines: {node: '>= 0.10'}
@@ -2403,6 +5757,64 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vaul@1.1.2:
+    resolution: {integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
+  victory-vendor@37.3.6:
+    resolution: {integrity: sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==}
+
+  vite@8.2.2:
+    resolution: {integrity: sha512-cFKLV/PRgAUlIRm5WjMjJ86jrftzpqcgH+Us+DS8mI3CDNiH30Whrz8uHL3+MOLPAgqbMBAqWdAHAphOAM+z/Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      '@vitejs/devtools': ^0.4.0 || ^0.5.0
+      esbuild: ^0.27.0 || ^0.28.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      '@vitejs/devtools':
+        optional: true
+      esbuild:
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
   walker@1.0.8:
     resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
 
@@ -2421,9 +5833,26 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
+  which@4.0.0:
+    resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==}
+    engines: {node: ^16.13.0 || >=18.0.0}
+    hasBin: true
+
   wkx@0.5.0:
     resolution: {integrity: sha512-Xng/d4Ichh8uN4l0FToV/258EjMGU9MGcA0HV2d9B/ZpZB3lqQm7nkOdZdm5GhKtLLhAE7PiVQwN4eN+2YJJUg==}
 
+  wmf@1.0.2:
+    resolution: {integrity: sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==}
+    engines: {node: '>=0.8'}
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  word@0.3.0:
+    resolution: {integrity: sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==}
+    engines: {node: '>=0.8'}
+
   wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
@@ -2439,6 +5868,15 @@ packages:
     resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  wsl-utils@1.0.0:
+    resolution: {integrity: sha512-Hl0ZOAs672vg+06kfujwRhoS6/jehvULrlFkuF2dRu6pHgA8U06h3xqNIqNNU1LTXPcedxByAR4GS6pwQK0mgA==}
+    engines: {node: '>=20'}
+
+  xlsx-js-style@1.2.0:
+    resolution: {integrity: sha512-DDT4FXFSWfT4DXMSok/m3TvmP1gvO3dn0Eu/c+eXHW5Kzmp7IczNkxg/iEPnImbG9X0Vb8QhROda5eatSR/97Q==}
+    engines: {node: '>=0.8'}
+    hasBin: true
+
   xtend@4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
@@ -2465,6 +5903,10 @@ packages:
     resolution: {integrity: sha512-Nt9ZJjXTv5R8MHbqby/wXQ6Gi0Bb3TcYZkR1bzuL4yB2OxWPkXknz513gEF0GoA6tn00UpbPvERW8rzCuWCA6w==}
     engines: {node: '>=10'}
 
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
   yargs@17.7.3:
     resolution: {integrity: sha512-GZtjxm/J/4TSxuL3FNYjCmLktBTnIw/rVmKSIyKeYAZpmJB2ig9VauCC5xsa82GNKVKDAqpOn3KVzNt0zmrU0g==}
     engines: {node: '>=12'}
@@ -2473,188 +5915,216 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  yocto-spinner@1.2.2:
+    resolution: {integrity: sha512-DODGl1wJjA/s5pnJFKau9lIYHT81lnhob1i3e1TjxZRxEhWRKl74nTbWE6H5KlkViQQTo/Z29YFdxzTZAMY3ng==}
+    engines: {node: '>=18.19'}
+
+  yoctocolors@2.2.0:
+    resolution: {integrity: sha512-xYqdZFUK/VYazNl/oCDYN+3WloWQwMfZxBoiNt6qNyk+xfOdi598muWE42rNZFp1kNOiqW936q5RhUdnpqElSg==}
+    engines: {node: '>=18'}
+
+  zod-to-json-schema@3.25.2:
+    resolution: {integrity: sha512-O/PgfnpT1xKSDeQYSCfRI5Gy3hPf91mKVDuYLUHZJMiDFptvP41MSnWofm8dnCm0256ZNfZIM7DSzuSMAFnjHA==}
+    peerDependencies:
+      zod: ^3.25.28 || ^4
+
+  zod-validation-error@4.0.2:
+    resolution: {integrity: sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      zod: ^3.25.0 || ^4.0.0
+
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
+  zod@4.4.3:
+    resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
+
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
 snapshots:
 
-  '@aws-sdk/checksums@3.1000.16':
+  '@aws-sdk/checksums@3.1000.29':
     dependencies:
-      '@aws-sdk/core': 3.975.1
-      '@aws-sdk/types': 3.974.0
-      '@smithy/core': 3.29.3
-      '@smithy/types': 4.16.1
+      '@aws-sdk/core': 3.977.9
+      '@aws-sdk/types': 3.974.5
+      '@smithy/core': 3.33.3
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@aws-sdk/client-s3@3.1085.0':
+  '@aws-sdk/client-s3@3.1116.0':
     dependencies:
-      '@aws-sdk/checksums': 3.1000.16
-      '@aws-sdk/core': 3.975.1
-      '@aws-sdk/credential-provider-node': 3.972.66
-      '@aws-sdk/middleware-sdk-s3': 3.972.62
-      '@aws-sdk/signature-v4-multi-region': 3.996.39
-      '@aws-sdk/types': 3.974.0
-      '@smithy/core': 3.29.3
-      '@smithy/fetch-http-handler': 5.6.5
-      '@smithy/node-http-handler': 4.9.5
-      '@smithy/types': 4.16.1
+      '@aws-sdk/checksums': 3.1000.29
+      '@aws-sdk/core': 3.977.9
+      '@aws-sdk/credential-provider-node': 3.972.81
+      '@aws-sdk/middleware-sdk-s3': 3.972.75
+      '@aws-sdk/signature-v4-multi-region': 3.996.46
+      '@aws-sdk/types': 3.974.5
+      '@smithy/core': 3.33.3
+      '@smithy/fetch-http-handler': 5.7.2
+      '@smithy/node-http-handler': 4.11.3
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@aws-sdk/core@3.975.1':
+  '@aws-sdk/core@3.977.9':
     dependencies:
-      '@aws-sdk/types': 3.974.0
-      '@aws-sdk/xml-builder': 3.972.34
+      '@aws-sdk/types': 3.974.5
+      '@aws-sdk/xml-builder': 3.972.40
       '@aws/lambda-invoke-store': 0.3.0
-      '@smithy/core': 3.29.3
-      '@smithy/signature-v4': 5.6.4
-      '@smithy/types': 4.16.1
+      '@smithy/core': 3.33.3
+      '@smithy/signature-v4': 5.7.3
+      '@smithy/types': 4.17.2
       bowser: 2.14.1
       tslib: 2.8.1
 
-  '@aws-sdk/credential-provider-env@3.972.57':
+  '@aws-sdk/credential-provider-env@3.972.70':
     dependencies:
-      '@aws-sdk/core': 3.975.1
-      '@aws-sdk/types': 3.974.0
-      '@smithy/core': 3.29.3
-      '@smithy/types': 4.16.1
+      '@aws-sdk/core': 3.977.9
+      '@aws-sdk/types': 3.974.5
+      '@smithy/core': 3.33.3
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@aws-sdk/credential-provider-http@3.972.59':
+  '@aws-sdk/credential-provider-http@3.972.72':
     dependencies:
-      '@aws-sdk/core': 3.975.1
-      '@aws-sdk/types': 3.974.0
-      '@smithy/core': 3.29.3
-      '@smithy/fetch-http-handler': 5.6.5
-      '@smithy/node-http-handler': 4.9.5
-      '@smithy/types': 4.16.1
+      '@aws-sdk/core': 3.977.9
+      '@aws-sdk/types': 3.974.5
+      '@smithy/core': 3.33.3
+      '@smithy/fetch-http-handler': 5.7.2
+      '@smithy/node-http-handler': 4.11.3
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@aws-sdk/credential-provider-ini@3.973.1':
+  '@aws-sdk/credential-provider-ini@3.973.15':
     dependencies:
-      '@aws-sdk/core': 3.975.1
-      '@aws-sdk/credential-provider-env': 3.972.57
-      '@aws-sdk/credential-provider-http': 3.972.59
-      '@aws-sdk/credential-provider-login': 3.972.63
-      '@aws-sdk/credential-provider-process': 3.972.57
-      '@aws-sdk/credential-provider-sso': 3.973.1
-      '@aws-sdk/credential-provider-web-identity': 3.972.63
-      '@aws-sdk/nested-clients': 3.997.31
-      '@aws-sdk/types': 3.974.0
-      '@smithy/core': 3.29.3
-      '@smithy/credential-provider-imds': 4.4.8
-      '@smithy/types': 4.16.1
+      '@aws-sdk/core': 3.977.9
+      '@aws-sdk/credential-provider-env': 3.972.70
+      '@aws-sdk/credential-provider-http': 3.972.72
+      '@aws-sdk/credential-provider-login': 3.972.77
+      '@aws-sdk/credential-provider-process': 3.972.70
+      '@aws-sdk/credential-provider-sso': 3.973.14
+      '@aws-sdk/credential-provider-web-identity': 3.972.76
+      '@aws-sdk/nested-clients': 3.997.44
+      '@aws-sdk/types': 3.974.5
+      '@smithy/core': 3.33.3
+      '@smithy/credential-provider-imds': 4.5.2
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@aws-sdk/credential-provider-login@3.972.63':
+  '@aws-sdk/credential-provider-login@3.972.77':
     dependencies:
-      '@aws-sdk/core': 3.975.1
-      '@aws-sdk/nested-clients': 3.997.31
-      '@aws-sdk/types': 3.974.0
-      '@smithy/core': 3.29.3
-      '@smithy/types': 4.16.1
+      '@aws-sdk/core': 3.977.9
+      '@aws-sdk/nested-clients': 3.997.44
+      '@aws-sdk/types': 3.974.5
+      '@smithy/core': 3.33.3
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@aws-sdk/credential-provider-node@3.972.66':
+  '@aws-sdk/credential-provider-node@3.972.81':
     dependencies:
-      '@aws-sdk/credential-provider-env': 3.972.57
-      '@aws-sdk/credential-provider-http': 3.972.59
-      '@aws-sdk/credential-provider-ini': 3.973.1
-      '@aws-sdk/credential-provider-process': 3.972.57
-      '@aws-sdk/credential-provider-sso': 3.973.1
-      '@aws-sdk/credential-provider-web-identity': 3.972.63
-      '@aws-sdk/types': 3.974.0
-      '@smithy/core': 3.29.3
-      '@smithy/credential-provider-imds': 4.4.8
-      '@smithy/types': 4.16.1
+      '@aws-sdk/credential-provider-env': 3.972.70
+      '@aws-sdk/credential-provider-http': 3.972.72
+      '@aws-sdk/credential-provider-ini': 3.973.15
+      '@aws-sdk/credential-provider-process': 3.972.70
+      '@aws-sdk/credential-provider-sso': 3.973.14
+      '@aws-sdk/credential-provider-web-identity': 3.972.76
+      '@aws-sdk/types': 3.974.5
+      '@smithy/core': 3.33.3
+      '@smithy/credential-provider-imds': 4.5.2
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@aws-sdk/credential-provider-process@3.972.57':
+  '@aws-sdk/credential-provider-process@3.972.70':
     dependencies:
-      '@aws-sdk/core': 3.975.1
-      '@aws-sdk/types': 3.974.0
-      '@smithy/core': 3.29.3
-      '@smithy/types': 4.16.1
+      '@aws-sdk/core': 3.977.9
+      '@aws-sdk/types': 3.974.5
+      '@smithy/core': 3.33.3
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@aws-sdk/credential-provider-sso@3.973.1':
+  '@aws-sdk/credential-provider-sso@3.973.14':
     dependencies:
-      '@aws-sdk/core': 3.975.1
-      '@aws-sdk/nested-clients': 3.997.31
-      '@aws-sdk/token-providers': 3.1083.0
-      '@aws-sdk/types': 3.974.0
-      '@smithy/core': 3.29.3
-      '@smithy/types': 4.16.1
+      '@aws-sdk/core': 3.977.9
+      '@aws-sdk/nested-clients': 3.997.44
+      '@aws-sdk/token-providers': 3.1116.0
+      '@aws-sdk/types': 3.974.5
+      '@smithy/core': 3.33.3
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@aws-sdk/credential-provider-web-identity@3.972.63':
+  '@aws-sdk/credential-provider-web-identity@3.972.76':
     dependencies:
-      '@aws-sdk/core': 3.975.1
-      '@aws-sdk/nested-clients': 3.997.31
-      '@aws-sdk/types': 3.974.0
-      '@smithy/core': 3.29.3
-      '@smithy/types': 4.16.1
+      '@aws-sdk/core': 3.977.9
+      '@aws-sdk/nested-clients': 3.997.44
+      '@aws-sdk/types': 3.974.5
+      '@smithy/core': 3.33.3
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@aws-sdk/lib-storage@3.1085.0(@aws-sdk/client-s3@3.1085.0)':
+  '@aws-sdk/lib-storage@3.1116.0(@aws-sdk/client-s3@3.1116.0)':
     dependencies:
-      '@aws-sdk/client-s3': 3.1085.0
-      '@smithy/core': 3.29.3
-      '@smithy/types': 4.16.1
+      '@aws-sdk/client-s3': 3.1116.0
+      '@smithy/core': 3.33.3
+      '@smithy/types': 4.17.2
       buffer: 5.6.0
       events: 3.3.0
       stream-browserify: 3.0.0
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-sdk-s3@3.972.62':
+  '@aws-sdk/middleware-sdk-s3@3.972.75':
     dependencies:
-      '@aws-sdk/core': 3.975.1
-      '@aws-sdk/signature-v4-multi-region': 3.996.39
-      '@aws-sdk/types': 3.974.0
-      '@smithy/core': 3.29.3
-      '@smithy/types': 4.16.1
+      '@aws-sdk/core': 3.977.9
+      '@aws-sdk/signature-v4-multi-region': 3.996.46
+      '@aws-sdk/types': 3.974.5
+      '@smithy/core': 3.33.3
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@aws-sdk/nested-clients@3.997.31':
+  '@aws-sdk/nested-clients@3.997.44':
     dependencies:
-      '@aws-sdk/core': 3.975.1
-      '@aws-sdk/signature-v4-multi-region': 3.996.39
-      '@aws-sdk/types': 3.974.0
-      '@smithy/core': 3.29.3
-      '@smithy/fetch-http-handler': 5.6.5
-      '@smithy/node-http-handler': 4.9.5
-      '@smithy/types': 4.16.1
+      '@aws-sdk/core': 3.977.9
+      '@aws-sdk/signature-v4-multi-region': 3.996.46
+      '@aws-sdk/types': 3.974.5
+      '@smithy/core': 3.33.3
+      '@smithy/fetch-http-handler': 5.7.2
+      '@smithy/node-http-handler': 4.11.3
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@aws-sdk/s3-request-presigner@3.1085.0':
+  '@aws-sdk/s3-request-presigner@3.1116.0':
     dependencies:
-      '@aws-sdk/core': 3.975.1
-      '@aws-sdk/signature-v4-multi-region': 3.996.39
-      '@aws-sdk/types': 3.974.0
-      '@smithy/core': 3.29.3
-      '@smithy/types': 4.16.1
+      '@aws-sdk/core': 3.977.9
+      '@aws-sdk/signature-v4-multi-region': 3.996.46
+      '@aws-sdk/types': 3.974.5
+      '@smithy/core': 3.33.3
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@aws-sdk/signature-v4-multi-region@3.996.39':
+  '@aws-sdk/signature-v4-multi-region@3.996.46':
     dependencies:
-      '@aws-sdk/types': 3.974.0
-      '@smithy/signature-v4': 5.6.4
-      '@smithy/types': 4.16.1
+      '@aws-sdk/types': 3.974.5
+      '@smithy/signature-v4': 5.7.3
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@aws-sdk/token-providers@3.1083.0':
+  '@aws-sdk/token-providers@3.1116.0':
     dependencies:
-      '@aws-sdk/core': 3.975.1
-      '@aws-sdk/nested-clients': 3.997.31
-      '@aws-sdk/types': 3.974.0
-      '@smithy/core': 3.29.3
-      '@smithy/types': 4.16.1
+      '@aws-sdk/core': 3.977.9
+      '@aws-sdk/nested-clients': 3.997.44
+      '@aws-sdk/types': 3.974.5
+      '@smithy/core': 3.33.3
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@aws-sdk/types@3.974.0':
+  '@aws-sdk/types@3.974.5':
     dependencies:
-      '@smithy/types': 4.16.1
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@aws-sdk/xml-builder@3.972.34':
+  '@aws-sdk/xml-builder@3.972.40':
     dependencies:
-      '@smithy/types': 4.16.1
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
   '@aws/lambda-invoke-store@0.3.0': {}
@@ -2670,14 +6140,14 @@ snapshots:
   '@babel/core@7.29.7':
     dependencies:
       '@babel/code-frame': 7.29.7
-      '@babel/generator': 7.29.7
+      '@babel/generator': 7.29.8
       '@babel/helper-compilation-targets': 7.29.7
       '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
       '@babel/helpers': 7.29.7
-      '@babel/parser': 7.29.7
+      '@babel/parser': 7.29.8
       '@babel/template': 7.29.7
-      '@babel/traverse': 7.29.7
-      '@babel/types': 7.29.7
+      '@babel/traverse': 7.29.8
+      '@babel/types': 7.29.8
       '@jridgewell/remapping': 2.3.5
       convert-source-map: 2.0.0
       debug: 4.4.3(supports-color@5.5.0)
@@ -2687,28 +6157,52 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.29.7':
+  '@babel/generator@7.29.8':
     dependencies:
-      '@babel/parser': 7.29.7
-      '@babel/types': 7.29.7
+      '@babel/parser': 7.29.8
+      '@babel/types': 7.29.8
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.31
       jsesc: 3.1.0
 
+  '@babel/helper-annotate-as-pure@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.8
+
   '@babel/helper-compilation-targets@7.29.7':
     dependencies:
       '@babel/compat-data': 7.29.7
       '@babel/helper-validator-option': 7.29.7
-      browserslist: 4.28.6
+      browserslist: 4.28.8
       lru-cache: 5.1.1
       semver: 6.3.1
 
+  '@babel/helper-create-class-features-plugin@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-member-expression-to-functions': 7.29.7
+      '@babel/helper-optimise-call-expression': 7.29.7
+      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+      '@babel/traverse': 7.29.8
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-globals@7.29.7': {}
 
+  '@babel/helper-member-expression-to-functions@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.8
+      '@babel/types': 7.29.8
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-module-imports@7.29.7':
     dependencies:
-      '@babel/traverse': 7.29.7
-      '@babel/types': 7.29.7
+      '@babel/traverse': 7.29.8
+      '@babel/types': 7.29.8
     transitivePeerDependencies:
       - supports-color
 
@@ -2717,12 +6211,32 @@ snapshots:
       '@babel/core': 7.29.7
       '@babel/helper-module-imports': 7.29.7
       '@babel/helper-validator-identifier': 7.29.7
-      '@babel/traverse': 7.29.7
+      '@babel/traverse': 7.29.8
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/helper-optimise-call-expression@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.8
+
   '@babel/helper-plugin-utils@7.29.7': {}
 
+  '@babel/helper-replace-supers@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-member-expression-to-functions': 7.29.7
+      '@babel/helper-optimise-call-expression': 7.29.7
+      '@babel/traverse': 7.29.8
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.8
+      '@babel/types': 7.29.8
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-string-parser@7.29.7': {}
 
   '@babel/helper-validator-identifier@7.29.7': {}
@@ -2732,11 +6246,11 @@ snapshots:
   '@babel/helpers@7.29.7':
     dependencies:
       '@babel/template': 7.29.7
-      '@babel/types': 7.29.7
+      '@babel/types': 7.29.8
 
-  '@babel/parser@7.29.7':
+  '@babel/parser@7.29.8':
     dependencies:
-      '@babel/types': 7.29.7
+      '@babel/types': 7.29.8
 
   '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.29.7)':
     dependencies:
@@ -2823,31 +6337,111 @@ snapshots:
       '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.29.7
 
+  '@babel/plugin-transform-modules-commonjs@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-typescript@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/preset-typescript@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-modules-commonjs': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-typescript': 7.29.7(@babel/core@7.29.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/runtime@7.29.7': {}
+
   '@babel/template@7.29.7':
     dependencies:
       '@babel/code-frame': 7.29.7
-      '@babel/parser': 7.29.7
-      '@babel/types': 7.29.7
+      '@babel/parser': 7.29.8
+      '@babel/types': 7.29.8
 
-  '@babel/traverse@7.29.7':
+  '@babel/traverse@7.29.8':
     dependencies:
       '@babel/code-frame': 7.29.7
-      '@babel/generator': 7.29.7
+      '@babel/generator': 7.29.8
       '@babel/helper-globals': 7.29.7
-      '@babel/parser': 7.29.7
+      '@babel/parser': 7.29.8
       '@babel/template': 7.29.7
-      '@babel/types': 7.29.7
+      '@babel/types': 7.29.8
       debug: 4.4.3(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.29.7':
+  '@babel/types@7.29.8':
     dependencies:
       '@babel/helper-string-parser': 7.29.7
       '@babel/helper-validator-identifier': 7.29.7
 
+  '@base-ui/react@1.7.0(@date-fns/tz@1.5.0)(@types/react@19.2.18)(date-fns@4.4.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@base-ui/utils': 0.3.2(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@floating-ui/utils': 0.2.12
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      use-sync-external-store: 1.6.0(react@19.2.8)
+    optionalDependencies:
+      '@date-fns/tz': 1.5.0
+      '@types/react': 19.2.18
+      date-fns: 4.4.0
+
+  '@base-ui/utils@0.3.2(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@floating-ui/utils': 0.2.12
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      reselect: 5.3.0
+      use-sync-external-store: 1.6.0(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+
   '@bcoe/v8-coverage@0.2.3': {}
 
+  '@date-fns/tz@1.5.0': {}
+
+  '@dotenvx/dotenvx@1.75.1':
+    dependencies:
+      '@dotenvx/primitives': 0.8.0
+      commander: 11.1.0
+      conf: 10.2.0
+      dotenv: 17.4.2
+      enquirer: 2.4.1
+      env-paths: 2.2.1
+      execa: 5.1.1
+      fdir: 6.5.0(picomatch@4.0.5)
+      ignore: 5.3.2
+      object-treeify: 1.1.33
+      open: 8.4.2
+      picomatch: 4.0.5
+      systeminformation: 5.33.1
+      undici: 7.29.0
+      which: 4.0.0
+      yocto-spinner: 1.2.2
+
+  '@dotenvx/primitives@0.8.0': {}
+
   '@emnapi/core@1.10.0':
     dependencies:
       '@emnapi/wasi-threads': 1.2.1
@@ -2859,11 +6453,206 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@emnapi/runtime@1.11.3':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/wasi-threads@1.2.1':
     dependencies:
       tslib: 2.8.1
     optional: true
 
+  '@eslint-community/eslint-utils@4.10.1(eslint@10.9.0(jiti@2.7.0))':
+    dependencies:
+      eslint: 10.9.0(jiti@2.7.0)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.2': {}
+
+  '@eslint/config-array@0.23.5':
+    dependencies:
+      '@eslint/object-schema': 3.0.5
+      debug: 4.4.3(supports-color@5.5.0)
+      minimatch: 10.2.6
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.7.0':
+    dependencies:
+      '@eslint/core': 1.2.1
+
+  '@eslint/core@1.2.1':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/js@10.0.1(eslint@10.9.0(jiti@2.7.0))':
+    optionalDependencies:
+      eslint: 10.9.0(jiti@2.7.0)
+
+  '@eslint/object-schema@3.0.5': {}
+
+  '@eslint/plugin-kit@0.7.2':
+    dependencies:
+      '@eslint/core': 1.2.1
+      levn: 0.4.1
+
+  '@floating-ui/core@1.8.0':
+    dependencies:
+      '@floating-ui/utils': 0.2.12
+
+  '@floating-ui/dom@1.8.0':
+    dependencies:
+      '@floating-ui/core': 1.8.0
+      '@floating-ui/utils': 0.2.12
+
+  '@floating-ui/react-dom@2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
+  '@floating-ui/utils@0.2.12': {}
+
+  '@fontsource-variable/geist@5.3.0': {}
+
+  '@hono/node-server@2.1.1(hono@4.13.3)':
+    dependencies:
+      hono: 4.13.3
+
+  '@hookform/resolvers@5.9.1(@sinclair/typebox@0.34.52)(@standard-schema/spec@1.1.0)(ajv-formats@2.1.1(ajv@8.20.0))(ajv@8.20.0)(react-hook-form@7.86.0(react@19.2.8))(zod@4.4.3)':
+    dependencies:
+      '@standard-schema/utils': 0.3.0
+      react-hook-form: 7.86.0(react@19.2.8)
+    optionalDependencies:
+      '@sinclair/typebox': 0.34.52
+      '@standard-schema/spec': 1.1.0
+      ajv: 8.20.0
+      ajv-formats: 2.1.1(ajv@8.20.0)
+      zod: 4.4.3
+
+  '@humanfs/core@0.19.2':
+    dependencies:
+      '@humanfs/types': 0.15.0
+
+  '@humanfs/node@0.16.8':
+    dependencies:
+      '@humanfs/core': 0.19.2
+      '@humanfs/types': 0.15.0
+      '@humanwhocodes/retry': 0.4.3
+
+  '@humanfs/types@0.15.0': {}
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@img/colour@1.1.0': {}
+
+  '@img/sharp-darwin-arm64@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.3.2
+    optional: true
+
+  '@img/sharp-darwin-x64@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.3.2
+    optional: true
+
+  '@img/sharp-freebsd-wasm32@0.35.3':
+    dependencies:
+      '@img/sharp-wasm32': 0.35.3
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.3.2':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.3.2':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.3.2':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.3.2':
+    optional: true
+
+  '@img/sharp-libvips-linux-ppc64@1.3.2':
+    optional: true
+
+  '@img/sharp-libvips-linux-riscv64@1.3.2':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.3.2':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.3.2':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.3.2':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.3.2':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.3.2
+    optional: true
+
+  '@img/sharp-linux-arm@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.3.2
+    optional: true
+
+  '@img/sharp-linux-ppc64@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-ppc64': 1.3.2
+    optional: true
+
+  '@img/sharp-linux-riscv64@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-riscv64': 1.3.2
+    optional: true
+
+  '@img/sharp-linux-s390x@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.3.2
+    optional: true
+
+  '@img/sharp-linux-x64@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.3.2
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.3.2
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.3.2
+    optional: true
+
+  '@img/sharp-wasm32@0.35.3':
+    dependencies:
+      '@emnapi/runtime': 1.11.3
+    optional: true
+
+  '@img/sharp-webcontainers-wasm32@0.35.3':
+    dependencies:
+      '@img/sharp-wasm32': 0.35.3
+    optional: true
+
+  '@img/sharp-win32-arm64@0.35.3':
+    optional: true
+
+  '@img/sharp-win32-ia32@0.35.3':
+    optional: true
+
+  '@img/sharp-win32-x64@0.35.3':
+    optional: true
+
   '@isaacs/cliui@8.0.2':
     dependencies:
       string-width: 5.1.2
@@ -2878,7 +6667,7 @@ snapshots:
       camelcase: 5.3.1
       find-up: 4.1.0
       get-package-type: 0.1.0
-      js-yaml: 3.15.0
+      js-yaml: 3.15.1
       resolve-from: 5.0.0
 
   '@istanbuljs/schema@0.1.6': {}
@@ -2886,7 +6675,7 @@ snapshots:
   '@jest/console@30.4.1':
     dependencies:
       '@jest/types': 30.4.1
-      '@types/node': 25.9.1
+      '@types/node': 26.2.0
       chalk: 4.1.2
       jest-message-util: 30.4.1
       jest-util: 30.4.1
@@ -2900,7 +6689,7 @@ snapshots:
       '@jest/test-result': 30.4.1
       '@jest/transform': 30.4.1
       '@jest/types': 30.4.1
-      '@types/node': 25.9.1
+      '@types/node': 26.2.0
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       ci-info: 4.4.0
@@ -2908,7 +6697,7 @@ snapshots:
       fast-json-stable-stringify: 2.1.0
       graceful-fs: 4.2.11
       jest-changed-files: 30.4.1
-      jest-config: 30.4.2(@types/node@25.9.1)
+      jest-config: 30.4.2(@types/node@26.2.0)
       jest-haste-map: 30.4.1
       jest-message-util: 30.4.1
       jest-regex-util: 30.4.0
@@ -2934,7 +6723,7 @@ snapshots:
     dependencies:
       '@jest/fake-timers': 30.4.1
       '@jest/types': 30.4.1
-      '@types/node': 25.9.1
+      '@types/node': 26.2.0
       jest-mock: 30.4.1
 
   '@jest/expect-utils@30.4.1':
@@ -2952,7 +6741,7 @@ snapshots:
     dependencies:
       '@jest/types': 30.4.1
       '@sinonjs/fake-timers': 15.4.0
-      '@types/node': 25.9.1
+      '@types/node': 26.2.0
       jest-message-util: 30.4.1
       jest-mock: 30.4.1
       jest-util: 30.4.1
@@ -2970,7 +6759,7 @@ snapshots:
 
   '@jest/pattern@30.4.0':
     dependencies:
-      '@types/node': 25.9.1
+      '@types/node': 26.2.0
       jest-regex-util: 30.4.0
 
   '@jest/reporters@30.4.1':
@@ -2981,7 +6770,7 @@ snapshots:
       '@jest/transform': 30.4.1
       '@jest/types': 30.4.1
       '@jridgewell/trace-mapping': 0.3.31
-      '@types/node': 25.9.1
+      '@types/node': 26.2.0
       chalk: 4.1.2
       collect-v8-coverage: 1.0.3
       exit-x: 0.2.2
@@ -3057,7 +6846,7 @@ snapshots:
       '@jest/schemas': 30.4.1
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
-      '@types/node': 25.9.1
+      '@types/node': 26.2.0
       '@types/yargs': 17.0.35
       chalk: 4.1.2
 
@@ -3080,20 +6869,851 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
+  '@modelcontextprotocol/sdk@1.30.0(zod@3.25.76)':
+    dependencies:
+      '@hono/node-server': 2.1.1(hono@4.13.3)
+      ajv: 8.20.0
+      ajv-formats: 3.0.1(ajv@8.20.0)
+      content-type: 1.0.5
+      cors: 2.8.6
+      cross-spawn: 7.0.6
+      eventsource: 3.0.7
+      eventsource-parser: 3.1.1
+      express: 5.2.1
+      express-rate-limit: 8.6.2(express@5.2.1)
+      hono: 4.13.3
+      jose: 6.2.10
+      json-schema-typed: 8.0.2
+      pkce-challenge: 5.0.1
+      raw-body: 3.0.2
+      zod: 3.25.76
+      zod-to-json-schema: 3.25.2(zod@3.25.76)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@napi-rs/canvas-android-arm64@1.0.7':
+    optional: true
+
+  '@napi-rs/canvas-darwin-arm64@1.0.7':
+    optional: true
+
+  '@napi-rs/canvas-darwin-x64@1.0.7':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm-gnueabihf@1.0.7':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm64-gnu@1.0.7':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm64-musl@1.0.7':
+    optional: true
+
+  '@napi-rs/canvas-linux-riscv64-gnu@1.0.7':
+    optional: true
+
+  '@napi-rs/canvas-linux-x64-gnu@1.0.7':
+    optional: true
+
+  '@napi-rs/canvas-linux-x64-musl@1.0.7':
+    optional: true
+
+  '@napi-rs/canvas-win32-arm64-msvc@1.0.7':
+    optional: true
+
+  '@napi-rs/canvas-win32-x64-msvc@1.0.7':
+    optional: true
+
+  '@napi-rs/canvas@1.0.7':
+    optionalDependencies:
+      '@napi-rs/canvas-android-arm64': 1.0.7
+      '@napi-rs/canvas-darwin-arm64': 1.0.7
+      '@napi-rs/canvas-darwin-x64': 1.0.7
+      '@napi-rs/canvas-linux-arm-gnueabihf': 1.0.7
+      '@napi-rs/canvas-linux-arm64-gnu': 1.0.7
+      '@napi-rs/canvas-linux-arm64-musl': 1.0.7
+      '@napi-rs/canvas-linux-riscv64-gnu': 1.0.7
+      '@napi-rs/canvas-linux-x64-gnu': 1.0.7
+      '@napi-rs/canvas-linux-x64-musl': 1.0.7
+      '@napi-rs/canvas-win32-arm64-msvc': 1.0.7
+      '@napi-rs/canvas-win32-x64-msvc': 1.0.7
+    optional: true
+
+  '@napi-rs/wasm-runtime@1.2.3(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
       '@emnapi/core': 1.10.0
       '@emnapi/runtime': 1.10.0
       '@tybys/wasm-util': 0.10.3
     optional: true
 
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.20.1
+
   '@one-ini/wasm@0.1.1': {}
 
+  '@oxc-project/types@0.146.0': {}
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
   '@pkgr/core@0.3.6': {}
 
+  '@radix-ui/number@1.1.3': {}
+
+  '@radix-ui/primitive@1.1.7': {}
+
+  '@radix-ui/react-accessible-icon@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-accordion@1.2.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collapsible': 1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-alert-dialog@1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dialog': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-arrow@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-aspect-ratio@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-avatar@1.2.6(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-checkbox@1.3.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-collapsible@1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-collection@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-compose-refs@1.1.5(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-context-menu@2.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-context@1.2.2(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-dialog@1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      aria-hidden: 1.2.6
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-direction@1.1.4(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-dismissable-layer@1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-dropdown-menu@2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-focus-guards@1.1.6(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-focus-scope@1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-form@0.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-label': 2.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-hover-card@1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-id@1.1.4(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-label@2.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-menu@2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      aria-hidden: 1.2.6
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-menubar@1.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-navigation-menu@1.2.22(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-previous': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-one-time-password-field@0.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/number': 1.1.3
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-password-toggle-field@0.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-popover@1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      aria-hidden: 1.2.6
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-popper@1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-arrow': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-rect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/rect': 1.1.3
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-portal@1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-presence@1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-primitive@2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-progress@1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-radio-group@1.4.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-roving-focus@1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-scroll-area@1.2.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/number': 1.1.3
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-select@2.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/number': 1.1.3
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-previous': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      aria-hidden: 1.2.6
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-separator@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-slider@1.4.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/number': 1.1.3
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-previous': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-slot@1.3.3(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-switch@1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-tabs@1.1.21(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-toast@1.2.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-toggle-group@1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toggle': 1.1.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-toggle@1.1.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-toolbar@1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toggle-group': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-tooltip@1.2.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/react-use-callback-ref@1.1.4(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-controllable-state@1.2.6(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-effect-event@0.0.5(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-escape-keydown@1.1.5(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-is-hydrated@0.1.3(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-layout-effect@1.1.4(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-previous@1.1.4(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-rect@1.1.4(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/rect': 1.1.3
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-size@1.1.4(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-visually-hidden@1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
+  '@radix-ui/rect@1.1.3': {}
+
   '@redis/bloom@1.2.0(@redis/client@1.6.1)':
     dependencies:
       '@redis/client': 1.6.1
@@ -3120,8 +7740,71 @@ snapshots:
     dependencies:
       '@redis/client': 1.6.1
 
+  '@reduxjs/toolkit@2.12.0(react-redux@9.3.0(@types/react@19.2.18)(react@19.2.8)(redux@5.0.1))(react@19.2.8)':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@standard-schema/utils': 0.3.0
+      immer: 11.1.18
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.1.1
+    optionalDependencies:
+      react: 19.2.8
+      react-redux: 9.3.0(@types/react@19.2.18)(react@19.2.8)(redux@5.0.1)
+
+  '@rolldown/binding-android-arm-eabi@1.2.5':
+    optional: true
+
+  '@rolldown/binding-android-arm64@1.2.5':
+    optional: true
+
+  '@rolldown/binding-darwin-arm64@1.2.5':
+    optional: true
+
+  '@rolldown/binding-darwin-x64@1.2.5':
+    optional: true
+
+  '@rolldown/binding-freebsd-x64@1.2.5':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.5':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.2.5':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.2.5':
+    optional: true
+
+  '@rolldown/binding-linux-ppc64-gnu@1.2.5':
+    optional: true
+
+  '@rolldown/binding-linux-s390x-gnu@1.2.5':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.2.5':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.2.5':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.2.5':
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.2.5':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.2.5':
+    optional: true
+
+  '@rolldown/pluginutils@1.0.1': {}
+
+  '@sec-ant/readable-stream@0.4.1': {}
+
   '@sinclair/typebox@0.34.52': {}
 
+  '@sindresorhus/merge-streams@4.0.0': {}
+
   '@sinonjs/commons@3.0.1':
     dependencies:
       type-detect: 4.0.8
@@ -3130,39 +7813,129 @@ snapshots:
     dependencies:
       '@sinonjs/commons': 3.0.1
 
-  '@smithy/core@3.29.3':
+  '@smithy/core@3.33.3':
     dependencies:
-      '@smithy/types': 4.16.1
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@smithy/credential-provider-imds@4.4.8':
+  '@smithy/credential-provider-imds@4.5.2':
     dependencies:
-      '@smithy/core': 3.29.3
-      '@smithy/types': 4.16.1
+      '@smithy/core': 3.33.3
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@smithy/fetch-http-handler@5.6.5':
+  '@smithy/fetch-http-handler@5.7.2':
     dependencies:
-      '@smithy/core': 3.29.3
-      '@smithy/types': 4.16.1
+      '@smithy/core': 3.33.3
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@smithy/node-http-handler@4.9.5':
+  '@smithy/node-http-handler@4.11.3':
     dependencies:
-      '@smithy/core': 3.29.3
-      '@smithy/types': 4.16.1
+      '@smithy/core': 3.33.3
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@smithy/signature-v4@5.6.4':
+  '@smithy/signature-v4@5.7.3':
     dependencies:
-      '@smithy/core': 3.29.3
-      '@smithy/types': 4.16.1
+      '@smithy/core': 3.33.3
+      '@smithy/types': 4.17.2
       tslib: 2.8.1
 
-  '@smithy/types@4.16.1':
+  '@smithy/types@4.17.2':
     dependencies:
       tslib: 2.8.1
 
+  '@standard-schema/spec@1.1.0': {}
+
+  '@standard-schema/utils@0.3.0': {}
+
+  '@tabby_ai/hijri-converter@1.0.5': {}
+
+  '@tailwindcss/node@4.3.3':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.24.5
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.3.3
+
+  '@tailwindcss/oxide-android-arm64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide@4.3.3':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.3.3
+      '@tailwindcss/oxide-darwin-arm64': 4.3.3
+      '@tailwindcss/oxide-darwin-x64': 4.3.3
+      '@tailwindcss/oxide-freebsd-x64': 4.3.3
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.3
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.3
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.3
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.3
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.3
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.3
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.3
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.3
+
+  '@tailwindcss/vite@4.3.3(vite@8.2.2(@types/node@26.2.0)(jiti@2.7.0))':
+    dependencies:
+      '@tailwindcss/node': 4.3.3
+      '@tailwindcss/oxide': 4.3.3
+      tailwindcss: 4.3.3
+      vite: 8.2.2(@types/node@26.2.0)(jiti@2.7.0)
+
+  '@tanstack/react-table@8.21.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@tanstack/table-core': 8.21.3
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
+  '@tanstack/table-core@8.21.3': {}
+
+  '@tauri-apps/api@2.11.1': {}
+
+  '@ts-morph/common@0.27.0':
+    dependencies:
+      fast-glob: 3.3.3
+      minimatch: 10.2.6
+      path-browserify: 1.0.1
+
   '@tybys/wasm-util@0.10.3':
     dependencies:
       tslib: 2.8.1
@@ -3170,29 +7943,65 @@ snapshots:
 
   '@types/babel__core@7.20.5':
     dependencies:
-      '@babel/parser': 7.29.7
-      '@babel/types': 7.29.7
+      '@babel/parser': 7.29.8
+      '@babel/types': 7.29.8
       '@types/babel__generator': 7.27.0
       '@types/babel__template': 7.4.4
       '@types/babel__traverse': 7.28.0
 
   '@types/babel__generator@7.27.0':
     dependencies:
-      '@babel/types': 7.29.7
+      '@babel/types': 7.29.8
 
   '@types/babel__template@7.4.4':
     dependencies:
-      '@babel/parser': 7.29.7
-      '@babel/types': 7.29.7
+      '@babel/parser': 7.29.8
+      '@babel/types': 7.29.8
 
   '@types/babel__traverse@7.28.0':
     dependencies:
-      '@babel/types': 7.29.7
+      '@babel/types': 7.29.8
+
+  '@types/d3-array@3.2.2': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-shape@3.2.0':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
 
   '@types/debug@4.1.13':
     dependencies:
       '@types/ms': 2.1.0
 
+  '@types/esrecurse@4.3.1': {}
+
+  '@types/estree-jsx@1.0.5':
+    dependencies:
+      '@types/estree': 1.0.9
+
+  '@types/estree@1.0.9': {}
+
+  '@types/hast@3.0.5':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/istanbul-lib-coverage@2.0.6': {}
 
   '@types/istanbul-lib-report@3.0.3':
@@ -3203,14 +8012,36 @@ snapshots:
     dependencies:
       '@types/istanbul-lib-report': 3.0.3
 
+  '@types/json-schema@7.0.15': {}
+
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/ms@2.1.0': {}
 
-  '@types/node@25.9.1':
+  '@types/node@26.2.0':
     dependencies:
-      undici-types: 7.24.6
+      undici-types: 8.3.0
+
+  '@types/react-dom@19.2.4(@types/react@19.2.18)':
+    dependencies:
+      '@types/react': 19.2.18
+
+  '@types/react@19.2.18':
+    dependencies:
+      csstype: 3.2.3
 
   '@types/stack-utils@2.0.3': {}
 
+  '@types/unist@2.0.11': {}
+
+  '@types/unist@3.0.3': {}
+
+  '@types/use-sync-external-store@0.0.6': {}
+
+  '@types/validate-npm-package-name@4.0.2': {}
+
   '@types/validator@13.15.10': {}
 
   '@types/yargs-parser@21.0.3': {}
@@ -3279,7 +8110,7 @@ snapshots:
     dependencies:
       '@emnapi/core': 1.10.0
       '@emnapi/runtime': 1.10.0
-      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      '@napi-rs/wasm-runtime': 1.2.3(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     optional: true
 
   '@unrs/resolver-binding-win32-arm64-msvc@1.12.2':
@@ -3291,6 +8122,11 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.12.2':
     optional: true
 
+  '@vitejs/plugin-react@6.1.0(vite@8.2.2(@types/node@26.2.0)(jiti@2.7.0))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.1
+      vite: 8.2.2(@types/node@26.2.0)(jiti@2.7.0)
+
   abbrev@2.0.0: {}
 
   accepts@1.3.8:
@@ -3298,6 +8134,24 @@ snapshots:
       mime-types: 2.1.35
       negotiator: 0.6.3
 
+  accepts@2.0.0:
+    dependencies:
+      mime-types: 3.0.2
+      negotiator: 1.1.0
+
+  acorn-jsx@5.3.2(acorn@8.18.0):
+    dependencies:
+      acorn: 8.18.0
+
+  acorn@8.18.0: {}
+
+  adler-32@1.2.0:
+    dependencies:
+      exit-on-epipe: 1.0.1
+      printj: 1.1.2
+
+  adler-32@1.3.1: {}
+
   agent-base@6.0.2:
     dependencies:
       debug: 4.4.3(supports-color@5.5.0)
@@ -3306,13 +8160,37 @@ snapshots:
 
   agent-base@7.1.4: {}
 
+  ajv-formats@2.1.1(ajv@8.20.0):
+    optionalDependencies:
+      ajv: 8.20.0
+
+  ajv-formats@3.0.1(ajv@8.20.0):
+    optionalDependencies:
+      ajv: 8.20.0
+
+  ajv@6.15.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ajv@8.20.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.6
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  ansi-colors@4.1.3: {}
+
   ansi-escapes@4.3.2:
     dependencies:
       type-fest: 0.21.3
 
   ansi-regex@5.0.1: {}
 
-  ansi-regex@6.2.2: {}
+  ansi-regex@6.3.0: {}
 
   ansi-styles@4.3.0:
     dependencies:
@@ -3333,18 +8211,39 @@ snapshots:
     dependencies:
       sprintf-js: 1.0.3
 
+  argparse@2.0.1: {}
+
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
   array-flatten@1.1.1: {}
 
+  ast-types@0.16.1:
+    dependencies:
+      tslib: 2.8.1
+
   async@0.2.10: {}
 
   asynckit@0.4.0: {}
 
   at-least-node@1.0.0: {}
 
-  axios@1.16.1:
+  atomically@1.7.0: {}
+
+  autoprefixer@10.5.4(postcss@8.5.26):
+    dependencies:
+      browserslist: 4.28.8
+      caniuse-lite: 1.0.30001809
+      fraction.js: 5.3.4
+      picocolors: 1.1.1
+      postcss: 8.5.26
+      postcss-value-parser: 4.2.0
+
+  axios@1.19.0:
     dependencies:
       follow-redirects: 1.16.0
-      form-data: 4.0.5
+      form-data: 4.0.6
       https-proxy-agent: 5.0.1
       proxy-from-env: 2.1.0
     transitivePeerDependencies:
@@ -3403,13 +8302,15 @@ snapshots:
       babel-plugin-jest-hoist: 30.4.0
       babel-preset-current-node-syntax: 1.2.0(@babel/core@7.29.7)
 
+  bail@2.0.2: {}
+
   balanced-match@1.0.2: {}
 
   balanced-match@4.0.4: {}
 
   base64-js@1.5.1: {}
 
-  baseline-browser-mapping@2.10.43: {}
+  baseline-browser-mapping@2.11.18: {}
 
   bcryptjs@2.4.3: {}
 
@@ -3419,7 +8320,7 @@ snapshots:
 
   bluebird@3.7.2: {}
 
-  body-parser@1.20.5:
+  body-parser@1.20.6:
     dependencies:
       bytes: 3.1.2
       content-type: 1.0.5
@@ -3429,25 +8330,39 @@ snapshots:
       http-errors: 2.0.1
       iconv-lite: 0.4.24
       on-finished: 2.4.1
-      qs: 6.15.2
+      qs: 6.15.3
       raw-body: 2.5.3
       type-is: 1.6.18
       unpipe: 1.0.0
     transitivePeerDependencies:
       - supports-color
 
+  body-parser@2.3.0:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 2.1.0
+      debug: 4.4.3(supports-color@5.5.0)
+      http-errors: 2.0.1
+      iconv-lite: 0.7.3
+      on-finished: 2.4.1
+      qs: 6.15.3
+      raw-body: 3.0.2
+      type-is: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+
   bowser@2.14.1: {}
 
-  brace-expansion@1.1.16:
+  brace-expansion@1.1.18:
     dependencies:
       balanced-match: 1.0.2
       concat-map: 0.0.1
 
-  brace-expansion@2.1.2:
+  brace-expansion@2.1.4:
     dependencies:
       balanced-match: 1.0.2
 
-  brace-expansion@5.0.6:
+  brace-expansion@5.0.9:
     dependencies:
       balanced-match: 4.0.4
 
@@ -3455,13 +8370,13 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  browserslist@4.28.6:
+  browserslist@4.28.8:
     dependencies:
-      baseline-browser-mapping: 2.10.43
-      caniuse-lite: 1.0.30001805
-      electron-to-chromium: 1.5.389
-      node-releases: 2.0.51
-      update-browserslist-db: 1.2.3(browserslist@4.28.6)
+      baseline-browser-mapping: 2.11.18
+      caniuse-lite: 1.0.30001809
+      electron-to-chromium: 1.5.412
+      node-releases: 2.0.53
+      update-browserslist-db: 1.3.1(browserslist@4.28.8)
 
   bser@2.1.1:
     dependencies:
@@ -3476,6 +8391,10 @@ snapshots:
       base64-js: 1.5.1
       ieee754: 1.2.1
 
+  bundle-name@4.1.0:
+    dependencies:
+      run-applescript: 7.1.0
+
   busboy@1.6.0:
     dependencies:
       streamsearch: 1.1.0
@@ -3498,15 +8417,32 @@ snapshots:
 
   camelcase@6.3.0: {}
 
-  caniuse-lite@1.0.30001805: {}
+  caniuse-lite@1.0.30001809: {}
+
+  ccount@2.0.1: {}
+
+  cfb@1.2.2:
+    dependencies:
+      adler-32: 1.3.1
+      crc-32: 1.2.2
 
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  chalk@5.6.2: {}
+
   char-regex@1.0.2: {}
 
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
+  character-entities@2.0.2: {}
+
+  character-reference-invalid@2.0.1: {}
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -3521,7 +8457,19 @@ snapshots:
 
   ci-info@4.4.0: {}
 
-  cjs-module-lexer@2.2.0: {}
+  cjs-module-lexer@2.2.1: {}
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  classnames@2.5.1: {}
+
+  cli-cursor@5.0.0:
+    dependencies:
+      restore-cursor: 5.1.0
+
+  cli-spinners@2.9.2: {}
 
   cliui@7.0.4:
     dependencies:
@@ -3535,10 +8483,31 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
+  clsx@2.1.1: {}
+
   cluster-key-slot@1.1.2: {}
 
+  cmdk@1.1.1(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dialog': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   co@4.6.0: {}
 
+  code-block-writer@13.0.3: {}
+
+  codepage@1.14.0:
+    dependencies:
+      commander: 2.14.1
+      exit-on-epipe: 1.0.1
+
   collect-v8-coverage@1.0.3: {}
 
   color-convert@2.0.1:
@@ -3551,8 +8520,18 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
+  comma-separated-tokens@2.0.3: {}
+
   commander@10.0.1: {}
 
+  commander@11.1.0: {}
+
+  commander@14.0.3: {}
+
+  commander@2.14.1: {}
+
+  commander@2.17.1: {}
+
   concat-map@0.0.1: {}
 
   concat-stream@2.0.0:
@@ -3562,6 +8541,28 @@ snapshots:
       readable-stream: 3.6.2
       typedarray: 0.0.6
 
+  concurrently@9.2.4:
+    dependencies:
+      chalk: 4.1.2
+      rxjs: 7.8.2
+      shell-quote: 1.9.0
+      supports-color: 8.1.1
+      tree-kill: 1.2.2
+      yargs: 17.7.2
+
+  conf@10.2.0:
+    dependencies:
+      ajv: 8.20.0
+      ajv-formats: 2.1.1(ajv@8.20.0)
+      atomically: 1.7.0
+      debounce-fn: 4.0.0
+      dot-prop: 6.0.1
+      env-paths: 2.2.1
+      json-schema-typed: 7.0.3
+      onetime: 5.1.2
+      pkg-up: 3.1.0
+      semver: 7.8.5
+
   config-chain@1.1.13:
     dependencies:
       ini: 1.3.8
@@ -3569,7 +8570,7 @@ snapshots:
 
   connect-pg-simple@10.0.0:
     dependencies:
-      pg: 8.21.0
+      pg: 8.23.0
     transitivePeerDependencies:
       - pg-native
 
@@ -3577,8 +8578,12 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
+  content-disposition@1.1.0: {}
+
   content-type@1.0.5: {}
 
+  content-type@2.1.0: {}
+
   convert-source-map@2.0.0: {}
 
   cookie-parser@1.4.7:
@@ -3590,15 +8595,30 @@ snapshots:
 
   cookie-signature@1.0.7: {}
 
+  cookie-signature@1.2.2: {}
+
   cookie@0.4.0: {}
 
   cookie@0.7.2: {}
 
+  cookie@1.1.1: {}
+
   cors@2.8.6:
     dependencies:
       object-assign: 4.1.1
       vary: 1.1.2
 
+  cosmiconfig@9.0.2:
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.1
+      js-yaml: 4.3.1
+      parse-json: 5.2.0
+
+  country-flag-icons@1.6.20: {}
+
+  crc-32@1.2.2: {}
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -3611,6 +8631,10 @@ snapshots:
       tsscmp: 1.0.6
       uid-safe: 2.1.5
 
+  cssesc@3.0.0: {}
+
+  csstype@3.2.3: {}
+
   csurf@1.11.0:
     dependencies:
       cookie: 0.4.0
@@ -3623,6 +8647,52 @@ snapshots:
       first-match: 0.0.1
       nub: 0.0.0
 
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-color@3.1.0: {}
+
+  d3-ease@3.0.1: {}
+
+  d3-format@3.1.2: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
+  date-fns-jalali@4.1.0-0: {}
+
+  date-fns@4.4.0: {}
+
+  debounce-fn@4.0.0:
+    dependencies:
+      mimic-fn: 3.1.0
+
   debug@2.6.9:
     dependencies:
       ms: 2.0.0
@@ -3633,24 +8703,61 @@ snapshots:
     optionalDependencies:
       supports-color: 5.5.0
 
+  decimal.js-light@2.5.1: {}
+
+  decode-named-character-reference@1.3.0:
+    dependencies:
+      character-entities: 2.0.2
+
   dedent@1.7.2: {}
 
+  deep-is@0.1.4: {}
+
   deepmerge@4.3.1: {}
 
+  default-browser-id@5.0.1: {}
+
+  default-browser@5.5.1:
+    dependencies:
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.1
+
+  define-lazy-prop@2.0.0: {}
+
+  define-lazy-prop@3.0.0: {}
+
   delayed-stream@1.0.0: {}
 
   depd@1.1.2: {}
 
   depd@2.0.0: {}
 
+  dequal@2.0.3: {}
+
   destroy@1.2.0: {}
 
   detect-europe-js@0.1.2: {}
 
+  detect-libc@2.1.2: {}
+
   detect-newline@3.1.0: {}
 
+  detect-node-es@1.1.0: {}
+
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
+  diff@8.0.4: {}
+
+  dot-prop@6.0.1:
+    dependencies:
+      is-obj: 2.0.0
+
   dotenv@16.6.1: {}
 
+  dotenv@17.4.2: {}
+
   dottie@2.0.7: {}
 
   dunder-proto@1.0.1:
@@ -3670,20 +8777,46 @@ snapshots:
       '@one-ini/wasm': 0.1.1
       commander: 10.0.1
       minimatch: 9.0.9
-      semver: 7.8.0
+      semver: 7.8.5
 
   ee-first@1.1.1: {}
 
-  electron-to-chromium@1.5.389: {}
+  electron-to-chromium@1.5.412: {}
+
+  embla-carousel-react@8.6.0(react@19.2.8):
+    dependencies:
+      embla-carousel: 8.6.0
+      embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
+      react: 19.2.8
+
+  embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel@8.6.0: {}
 
   emittery@0.13.1: {}
 
+  emoji-regex@10.6.0: {}
+
   emoji-regex@8.0.0: {}
 
   emoji-regex@9.2.2: {}
 
   encodeurl@2.0.0: {}
 
+  enhanced-resolve@5.24.5:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.3
+
+  enquirer@2.4.1:
+    dependencies:
+      ansi-colors: 4.1.3
+      strip-ansi: 6.0.1
+
+  env-paths@2.2.1: {}
+
   error-ex@1.3.4:
     dependencies:
       is-arrayish: 0.2.1
@@ -3692,7 +8825,7 @@ snapshots:
 
   es-errors@1.3.0: {}
 
-  es-object-atoms@1.1.1:
+  es-object-atoms@1.1.2:
     dependencies:
       es-errors: 1.3.0
 
@@ -3701,7 +8834,9 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
       has-tostringtag: 1.0.2
-      hasown: 2.0.3
+      hasown: 2.0.4
+
+  es-toolkit@1.51.0: {}
 
   escalade@3.2.0: {}
 
@@ -3709,12 +8844,107 @@ snapshots:
 
   escape-string-regexp@2.0.0: {}
 
+  escape-string-regexp@4.0.0: {}
+
+  escape-string-regexp@5.0.0: {}
+
+  eslint-plugin-react-hooks@7.1.1(eslint@10.9.0(jiti@2.7.0)):
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/parser': 7.29.8
+      eslint: 10.9.0(jiti@2.7.0)
+      hermes-parser: 0.25.1
+      zod: 4.4.3
+      zod-validation-error: 4.0.2(zod@4.4.3)
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-react-refresh@0.5.4(eslint@10.9.0(jiti@2.7.0)):
+    dependencies:
+      eslint: 10.9.0(jiti@2.7.0)
+
+  eslint-scope@9.1.2:
+    dependencies:
+      '@types/esrecurse': 4.3.1
+      '@types/estree': 1.0.9
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint-visitor-keys@5.0.1: {}
+
+  eslint@10.9.0(jiti@2.7.0):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.10.1(eslint@10.9.0(jiti@2.7.0))
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.23.5
+      '@eslint/config-helpers': 0.7.0
+      '@eslint/core': 1.2.1
+      '@eslint/plugin-kit': 0.7.2
+      '@humanfs/node': 0.16.8
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.9
+      ajv: 6.15.0
+      cross-spawn: 7.0.6
+      debug: 4.4.3(supports-color@5.5.0)
+      escape-string-regexp: 4.0.0
+      eslint-scope: 9.1.2
+      eslint-visitor-keys: 5.0.1
+      espree: 11.2.0
+      esquery: 1.7.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      minimatch: 10.2.6
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.7.0
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@11.2.0:
+    dependencies:
+      acorn: 8.18.0
+      acorn-jsx: 5.3.2(acorn@8.18.0)
+      eslint-visitor-keys: 5.0.1
+
   esprima@4.0.1: {}
 
+  esquery@1.7.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@5.3.0: {}
+
+  estree-util-is-identifier-name@3.0.0: {}
+
+  esutils@2.0.3: {}
+
   etag@1.8.1: {}
 
+  eventemitter3@5.0.4: {}
+
   events@3.3.0: {}
 
+  eventsource-parser@3.1.1: {}
+
+  eventsource@3.0.7:
+    dependencies:
+      eventsource-parser: 3.1.1
+
   execa@5.1.1:
     dependencies:
       cross-spawn: 7.0.6
@@ -3727,6 +8957,23 @@ snapshots:
       signal-exit: 3.0.7
       strip-final-newline: 2.0.0
 
+  execa@9.6.1:
+    dependencies:
+      '@sindresorhus/merge-streams': 4.0.0
+      cross-spawn: 7.0.6
+      figures: 6.1.0
+      get-stream: 9.0.1
+      human-signals: 8.0.1
+      is-plain-obj: 4.1.0
+      is-stream: 4.0.1
+      npm-run-path: 6.0.0
+      pretty-ms: 9.3.0
+      signal-exit: 4.1.0
+      strip-final-newline: 4.0.0
+      yoctocolors: 2.2.0
+
+  exit-on-epipe@1.0.1: {}
+
   exit-x@0.2.2: {}
 
   expect@30.4.1:
@@ -3742,6 +8989,14 @@ snapshots:
     dependencies:
       express: 4.22.2
 
+  express-rate-limit@8.6.2(express@5.2.1):
+    dependencies:
+      debug: 4.4.3(supports-color@5.5.0)
+      express: 5.2.1
+      ip-address: 10.5.0
+    transitivePeerDependencies:
+      - supports-color
+
   express-session@1.19.0:
     dependencies:
       cookie: 0.7.2
@@ -3764,7 +9019,7 @@ snapshots:
     dependencies:
       accepts: 1.3.8
       array-flatten: 1.1.1
-      body-parser: 1.20.5
+      body-parser: 1.20.6
       content-disposition: 0.5.4
       content-type: 1.0.5
       cookie: 0.7.2
@@ -3783,7 +9038,7 @@ snapshots:
       parseurl: 1.3.3
       path-to-regexp: 0.1.13
       proxy-addr: 2.0.7
-      qs: 6.15.2
+      qs: 6.15.3
       range-parser: 1.2.1
       safe-buffer: 5.2.1
       send: 0.19.2
@@ -3796,16 +9051,81 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  express@5.2.1:
+    dependencies:
+      accepts: 2.0.0
+      body-parser: 2.3.0
+      content-disposition: 1.1.0
+      content-type: 1.0.5
+      cookie: 0.7.2
+      cookie-signature: 1.2.2
+      debug: 4.4.3(supports-color@5.5.0)
+      depd: 2.0.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 2.1.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      merge-descriptors: 2.0.0
+      mime-types: 3.0.2
+      on-finished: 2.4.1
+      once: 1.4.0
+      parseurl: 1.3.3
+      proxy-addr: 2.0.7
+      qs: 6.15.3
+      range-parser: 1.3.0
+      router: 2.2.0
+      send: 1.2.1
+      serve-static: 2.2.1
+      statuses: 2.0.2
+      type-is: 2.1.0
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   extend@3.0.2: {}
 
+  fast-deep-equal@3.1.3: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
   fast-json-stable-stringify@2.1.0: {}
 
+  fast-levenshtein@2.0.6: {}
+
+  fast-uri@3.1.6: {}
+
+  fastq@1.20.1:
+    dependencies:
+      reusify: 1.1.0
+
   fb-watchman@2.0.2:
     dependencies:
       bser: 2.1.1
 
+  fdir@6.5.0(picomatch@4.0.5):
+    optionalDependencies:
+      picomatch: 4.0.5
+
+  fflate@0.3.11: {}
+
   ffprobe-static@3.1.0: {}
 
+  figures@6.1.0:
+    dependencies:
+      is-unicode-supported: 2.1.0
+
+  file-entry-cache@8.0.0:
+    dependencies:
+      flat-cache: 4.0.1
+
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
@@ -3822,13 +9142,40 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  finalhandler@2.1.1:
+    dependencies:
+      debug: 4.4.3(supports-color@5.5.0)
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  find-up@3.0.0:
+    dependencies:
+      locate-path: 3.0.0
+
   find-up@4.1.0:
     dependencies:
       locate-path: 5.0.0
       path-exists: 4.0.0
 
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
   first-match@0.0.1: {}
 
+  flat-cache@4.0.1:
+    dependencies:
+      flatted: 3.4.4
+      keyv: 4.5.4
+
+  flatted@3.4.4: {}
+
   fluent-ffmpeg@2.1.3:
     dependencies:
       async: 0.2.10
@@ -3841,18 +9188,39 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
-  form-data@4.0.5:
+  form-data@4.0.6:
     dependencies:
       asynckit: 0.4.0
       combined-stream: 1.0.8
       es-set-tostringtag: 2.1.0
-      hasown: 2.0.3
+      hasown: 2.0.4
       mime-types: 2.1.35
 
   forwarded@0.2.0: {}
 
+  frac@1.1.2: {}
+
+  fraction.js@5.3.4: {}
+
+  framer-motion@12.43.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      motion-dom: 12.43.0
+      motion-utils: 12.39.0
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
   fresh@0.5.2: {}
 
+  fresh@2.0.0: {}
+
+  fs-extra@11.4.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.1
+      universalify: 2.0.1
+
   fs-extra@9.1.0:
     dependencies:
       at-least-node: 1.0.0
@@ -3867,6 +9235,8 @@ snapshots:
 
   function-bind@1.1.2: {}
 
+  fuzzysort@3.1.0: {}
+
   gaxios@6.7.1:
     dependencies:
       extend: 3.0.2
@@ -3893,32 +9263,47 @@ snapshots:
 
   get-caller-file@2.0.5: {}
 
+  get-east-asian-width@1.6.0: {}
+
   get-intrinsic@1.3.0:
     dependencies:
       call-bind-apply-helpers: 1.0.2
       es-define-property: 1.0.1
       es-errors: 1.3.0
-      es-object-atoms: 1.1.1
+      es-object-atoms: 1.1.2
       function-bind: 1.1.2
       get-proto: 1.0.1
       gopd: 1.2.0
       has-symbols: 1.1.0
-      hasown: 2.0.3
+      hasown: 2.0.4
       math-intrinsics: 1.1.0
 
+  get-nonce@1.0.1: {}
+
+  get-own-enumerable-keys@1.0.0: {}
+
   get-package-type@0.1.0: {}
 
   get-proto@1.0.1:
     dependencies:
       dunder-proto: 1.0.1
-      es-object-atoms: 1.1.1
+      es-object-atoms: 1.1.2
 
   get-stream@6.0.1: {}
 
+  get-stream@9.0.1:
+    dependencies:
+      '@sec-ant/readable-stream': 0.4.1
+      is-stream: 4.0.1
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
 
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
   glob@10.5.0:
     dependencies:
       foreground-child: 3.3.1
@@ -3937,6 +9322,8 @@ snapshots:
       once: 1.4.0
       path-is-absolute: 1.0.1
 
+  globals@17.11.0: {}
+
   google-auth-library@9.15.1:
     dependencies:
       base64-js: 1.5.1
@@ -3973,12 +9360,46 @@ snapshots:
     dependencies:
       has-symbols: 1.1.0
 
-  hasown@2.0.3:
+  hasown@2.0.4:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-to-jsx-runtime@2.3.6:
+    dependencies:
+      '@types/estree': 1.0.9
+      '@types/hast': 3.0.5
+      '@types/unist': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.2.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.21
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.5
+
+  hermes-estree@0.25.1: {}
+
+  hermes-parser@0.25.1:
+    dependencies:
+      hermes-estree: 0.25.1
+
+  hono@4.13.3: {}
+
   html-escaper@2.0.2: {}
 
+  html-url-attributes@3.0.1: {}
+
   http-errors@1.7.3:
     dependencies:
       depd: 1.1.2
@@ -4023,14 +9444,31 @@ snapshots:
 
   human-signals@2.1.0: {}
 
+  human-signals@8.0.1: {}
+
   iconv-lite@0.4.24:
     dependencies:
       safer-buffer: 2.1.2
 
+  iconv-lite@0.7.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
   ieee754@1.2.1: {}
 
   ignore-by-default@1.0.1: {}
 
+  ignore@5.3.2: {}
+
+  immer@10.2.0: {}
+
+  immer@11.1.18: {}
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
   import-local@3.2.0:
     dependencies:
       pkg-dir: 4.2.0
@@ -4051,8 +9489,37 @@ snapshots:
 
   ini@1.3.8: {}
 
+  inline-style-parser@0.2.7: {}
+
+  input-format@0.3.14(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      prop-types: 15.8.1
+    optionalDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
+  input-otp@1.5.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
+  internmap@2.0.3: {}
+
+  invariant@2.2.4:
+    dependencies:
+      loose-envify: 1.4.0
+
+  ip-address@10.5.0: {}
+
   ipaddr.js@1.9.1: {}
 
+  is-alphabetical@2.0.1: {}
+
+  is-alphanumerical@2.0.1:
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+
   is-arrayish@0.2.1: {}
 
   is-binary-path@2.1.0:
@@ -4061,7 +9528,13 @@ snapshots:
 
   is-core-module@2.16.2:
     dependencies:
-      hasown: 2.0.3
+      hasown: 2.0.4
+
+  is-decimal@2.0.1: {}
+
+  is-docker@2.2.1: {}
+
+  is-docker@3.0.0: {}
 
   is-extglob@2.1.1: {}
 
@@ -4073,25 +9546,59 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-hexadecimal@2.0.1: {}
+
+  is-in-ssh@1.0.0: {}
+
+  is-inside-container@1.0.0:
+    dependencies:
+      is-docker: 3.0.0
+
+  is-interactive@2.0.0: {}
+
   is-number@7.0.0: {}
 
+  is-obj@2.0.0: {}
+
+  is-obj@3.0.0: {}
+
   is-plain-obj@4.1.0: {}
 
+  is-promise@4.0.0: {}
+
+  is-regexp@3.1.0: {}
+
   is-standalone-pwa@0.1.1: {}
 
   is-stream@2.0.1: {}
 
+  is-stream@4.0.1: {}
+
+  is-unicode-supported@1.3.0: {}
+
+  is-unicode-supported@2.1.0: {}
+
+  is-wsl@2.2.0:
+    dependencies:
+      is-docker: 2.2.1
+
+  is-wsl@3.1.1:
+    dependencies:
+      is-inside-container: 1.0.0
+
   isexe@2.0.0: {}
 
+  isexe@3.1.5: {}
+
   istanbul-lib-coverage@3.2.2: {}
 
   istanbul-lib-instrument@6.0.3:
     dependencies:
       '@babel/core': 7.29.7
-      '@babel/parser': 7.29.7
+      '@babel/parser': 7.29.8
       '@istanbuljs/schema': 0.1.6
       istanbul-lib-coverage: 3.2.2
-      semver: 7.8.0
+      semver: 7.8.5
     transitivePeerDependencies:
       - supports-color
 
@@ -4132,7 +9639,7 @@ snapshots:
       '@jest/expect': 30.4.1
       '@jest/test-result': 30.4.1
       '@jest/types': 30.4.1
-      '@types/node': 25.9.1
+      '@types/node': 26.2.0
       chalk: 4.1.2
       co: 4.6.0
       dedent: 1.7.2
@@ -4152,7 +9659,7 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
-  jest-cli@30.4.2(@types/node@25.9.1):
+  jest-cli@30.4.2(@types/node@26.2.0):
     dependencies:
       '@jest/core': 30.4.2
       '@jest/test-result': 30.4.1
@@ -4160,7 +9667,7 @@ snapshots:
       chalk: 4.1.2
       exit-x: 0.2.2
       import-local: 3.2.0
-      jest-config: 30.4.2(@types/node@25.9.1)
+      jest-config: 30.4.2(@types/node@26.2.0)
       jest-util: 30.4.1
       jest-validate: 30.4.1
       yargs: 17.7.3
@@ -4171,7 +9678,7 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest-config@30.4.2(@types/node@25.9.1):
+  jest-config@30.4.2(@types/node@26.2.0):
     dependencies:
       '@babel/core': 7.29.7
       '@jest/get-type': 30.1.0
@@ -4197,7 +9704,7 @@ snapshots:
       slash: 3.0.0
       strip-json-comments: 3.1.1
     optionalDependencies:
-      '@types/node': 25.9.1
+      '@types/node': 26.2.0
     transitivePeerDependencies:
       - babel-plugin-macros
       - supports-color
@@ -4226,7 +9733,7 @@ snapshots:
       '@jest/environment': 30.4.1
       '@jest/fake-timers': 30.4.1
       '@jest/types': 30.4.1
-      '@types/node': 25.9.1
+      '@types/node': 26.2.0
       jest-mock: 30.4.1
       jest-util: 30.4.1
       jest-validate: 30.4.1
@@ -4234,7 +9741,7 @@ snapshots:
   jest-haste-map@30.4.1:
     dependencies:
       '@jest/types': 30.4.1
-      '@types/node': 25.9.1
+      '@types/node': 26.2.0
       anymatch: 3.1.3
       fb-watchman: 2.0.2
       graceful-fs: 4.2.11
@@ -4274,7 +9781,7 @@ snapshots:
   jest-mock@30.4.1:
     dependencies:
       '@jest/types': 30.4.1
-      '@types/node': 25.9.1
+      '@types/node': 26.2.0
       jest-util: 30.4.1
 
   jest-pnp-resolver@1.2.3(jest-resolve@30.4.1):
@@ -4308,7 +9815,7 @@ snapshots:
       '@jest/test-result': 30.4.1
       '@jest/transform': 30.4.1
       '@jest/types': 30.4.1
-      '@types/node': 25.9.1
+      '@types/node': 26.2.0
       chalk: 4.1.2
       emittery: 0.13.1
       exit-x: 0.2.2
@@ -4337,9 +9844,9 @@ snapshots:
       '@jest/test-result': 30.4.1
       '@jest/transform': 30.4.1
       '@jest/types': 30.4.1
-      '@types/node': 25.9.1
+      '@types/node': 26.2.0
       chalk: 4.1.2
-      cjs-module-lexer: 2.2.0
+      cjs-module-lexer: 2.2.1
       collect-v8-coverage: 1.0.3
       glob: 10.5.0
       graceful-fs: 4.2.11
@@ -4358,10 +9865,10 @@ snapshots:
   jest-snapshot@30.4.1:
     dependencies:
       '@babel/core': 7.29.7
-      '@babel/generator': 7.29.7
+      '@babel/generator': 7.29.8
       '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7)
       '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7)
-      '@babel/types': 7.29.7
+      '@babel/types': 7.29.8
       '@jest/expect-utils': 30.4.1
       '@jest/get-type': 30.1.0
       '@jest/snapshot-utils': 30.4.1
@@ -4376,7 +9883,7 @@ snapshots:
       jest-message-util: 30.4.1
       jest-util: 30.4.1
       pretty-format: 30.4.1
-      semver: 7.8.0
+      semver: 7.8.5
       synckit: 0.11.13
     transitivePeerDependencies:
       - supports-color
@@ -4384,7 +9891,7 @@ snapshots:
   jest-util@30.4.1:
     dependencies:
       '@jest/types': 30.4.1
-      '@types/node': 25.9.1
+      '@types/node': 26.2.0
       chalk: 4.1.2
       ci-info: 4.4.0
       graceful-fs: 4.2.11
@@ -4403,7 +9910,7 @@ snapshots:
     dependencies:
       '@jest/test-result': 30.4.1
       '@jest/types': 30.4.1
-      '@types/node': 25.9.1
+      '@types/node': 26.2.0
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       emittery: 0.13.1
@@ -4412,18 +9919,18 @@ snapshots:
 
   jest-worker@30.4.1:
     dependencies:
-      '@types/node': 25.9.1
+      '@types/node': 26.2.0
       '@ungap/structured-clone': 1.3.3
       jest-util: 30.4.1
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jest@30.4.2(@types/node@25.9.1):
+  jest@30.4.2(@types/node@26.2.0):
     dependencies:
       '@jest/core': 30.4.2
       '@jest/types': 30.4.1
       import-local: 3.2.0
-      jest-cli: 30.4.2(@types/node@25.9.1)
+      jest-cli: 30.4.2(@types/node@26.2.0)
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -4431,6 +9938,10 @@ snapshots:
       - supports-color
       - ts-node
 
+  jiti@2.7.0: {}
+
+  jose@6.2.10: {}
+
   js-beautify@1.15.4:
     dependencies:
       config-chain: 1.1.13
@@ -4443,19 +9954,35 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
-  js-yaml@3.15.0:
+  js-yaml@3.15.1:
     dependencies:
       argparse: 1.0.10
       esprima: 4.0.1
 
+  js-yaml@4.3.1:
+    dependencies:
+      argparse: 2.0.1
+
   jsesc@3.1.0: {}
 
   json-bigint@1.0.0:
     dependencies:
       bignumber.js: 9.3.1
 
+  json-buffer@3.0.1: {}
+
   json-parse-even-better-errors@2.3.1: {}
 
+  json-schema-traverse@0.4.1: {}
+
+  json-schema-traverse@1.0.0: {}
+
+  json-schema-typed@7.0.3: {}
+
+  json-schema-typed@8.0.2: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
   json5@2.2.3: {}
 
   jsonfile@6.2.1:
@@ -4475,7 +10002,7 @@ snapshots:
       lodash.isstring: 4.0.1
       lodash.once: 4.1.1
       ms: 2.1.3
-      semver: 7.8.0
+      semver: 7.8.5
 
   jwa@2.0.1:
     dependencies:
@@ -4488,14 +10015,136 @@ snapshots:
       jwa: 2.0.1
       safe-buffer: 5.2.1
 
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  kleur@3.0.3: {}
+
+  kleur@4.1.5: {}
+
   leven@3.1.0: {}
 
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  libphonenumber-js@1.13.11: {}
+
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
+  lightningcss-android-arm64@1.33.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.33.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.33.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.33.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.33.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.33.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.33.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.33.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.33.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.33.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.33.0:
+    optional: true
+
+  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
+
+  lightningcss@1.33.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.33.0
+      lightningcss-darwin-arm64: 1.33.0
+      lightningcss-darwin-x64: 1.33.0
+      lightningcss-freebsd-x64: 1.33.0
+      lightningcss-linux-arm-gnueabihf: 1.33.0
+      lightningcss-linux-arm64-gnu: 1.33.0
+      lightningcss-linux-arm64-musl: 1.33.0
+      lightningcss-linux-x64-gnu: 1.33.0
+      lightningcss-linux-x64-musl: 1.33.0
+      lightningcss-win32-arm64-msvc: 1.33.0
+      lightningcss-win32-x64-msvc: 1.33.0
+
   lines-and-columns@1.2.4: {}
 
+  locate-path@3.0.0:
+    dependencies:
+      p-locate: 3.0.0
+      path-exists: 3.0.0
+
   locate-path@5.0.0:
     dependencies:
       p-locate: 4.1.0
 
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
   lodash.includes@4.3.0: {}
 
   lodash.isboolean@3.0.3: {}
@@ -4512,30 +10161,401 @@ snapshots:
 
   lodash@4.18.1: {}
 
+  log-symbols@6.0.0:
+    dependencies:
+      chalk: 5.6.2
+      is-unicode-supported: 1.3.0
+
+  longest-streak@3.1.0: {}
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
   lru-cache@10.4.3: {}
 
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
 
+  lucide-react@1.33.0(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   make-dir@4.0.0:
     dependencies:
-      semver: 7.8.0
+      semver: 7.8.5
 
   makeerror@1.0.12:
     dependencies:
       tmpl: 1.0.5
 
+  markdown-table@3.0.4: {}
+
   math-intrinsics@1.1.0: {}
 
+  mdast-util-find-and-replace@3.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      escape-string-regexp: 5.0.0
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
+  mdast-util-from-markdown@2.0.3:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.2
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-find-and-replace: 3.0.2
+      micromark-util-character: 2.1.1
+
+  mdast-util-gfm-footnote@2.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-table@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm@3.1.0:
+    dependencies:
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-gfm-autolink-literal: 2.0.1
+      mdast-util-gfm-footnote: 2.1.0
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-expression@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.5
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-jsx@3.2.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.5
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
+      stringify-entities: 4.0.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdxjs-esm@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.5
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-phrasing@4.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.1
+
+  mdast-util-to-hast@13.2.1:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.3
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+
+  mdast-util-to-markdown@2.1.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      unist-util-visit: 5.1.0
+      zwitch: 2.0.4
+
+  mdast-util-to-string@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+
   media-typer@0.3.0: {}
 
+  media-typer@1.1.1: {}
+
   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.3.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-footnote@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-table@2.1.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm@3.0.0:
+    dependencies:
+      micromark-extension-gfm-autolink-literal: 2.1.0
+      micromark-extension-gfm-footnote: 2.1.0
+      micromark-extension-gfm-strikethrough: 2.1.0
+      micromark-extension-gfm-table: 2.1.1
+      micromark-extension-gfm-tagfilter: 2.0.0
+      micromark-extension-gfm-task-list-item: 2.1.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-destination@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-label@2.0.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-space@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-title@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-whitespace@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-chunked@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-classify-character@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-combine-extensions@2.0.1:
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-decode-string@2.0.1:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-html-tag-name@2.0.1: {}
+
+  micromark-util-normalize-identifier@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-resolve-all@2.0.1:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-subtokenize@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
+  micromark@4.0.2:
+    dependencies:
+      '@types/debug': 4.1.13
+      debug: 4.4.3(supports-color@5.5.0)
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
@@ -4543,25 +10563,37 @@ snapshots:
 
   mime-db@1.52.0: {}
 
+  mime-db@1.54.0: {}
+
   mime-types@2.1.35:
     dependencies:
       mime-db: 1.52.0
 
+  mime-types@3.0.2:
+    dependencies:
+      mime-db: 1.54.0
+
   mime@1.6.0: {}
 
   mimic-fn@2.1.0: {}
 
-  minimatch@10.2.5:
+  mimic-fn@3.1.0: {}
+
+  mimic-function@5.0.1: {}
+
+  minimatch@10.2.6:
     dependencies:
-      brace-expansion: 5.0.6
+      brace-expansion: 5.0.9
 
   minimatch@3.1.5:
     dependencies:
-      brace-expansion: 1.1.16
+      brace-expansion: 1.1.18
 
   minimatch@9.0.9:
     dependencies:
-      brace-expansion: 2.1.2
+      brace-expansion: 2.1.4
+
+  minimist@1.2.8: {}
 
   minipass@7.1.3: {}
 
@@ -4571,23 +10603,42 @@ snapshots:
 
   moment@2.30.1: {}
 
+  motion-dom@12.43.0:
+    dependencies:
+      motion-utils: 12.39.0
+
+  motion-utils@12.39.0: {}
+
   ms@2.0.0: {}
 
   ms@2.1.3: {}
 
-  multer@2.1.1:
+  multer@2.2.0:
     dependencies:
       append-field: 1.0.0
       busboy: 1.6.0
       concat-stream: 2.0.0
       type-is: 1.6.18
 
+  nanoid@3.3.18: {}
+
+  nanoid@5.1.16: {}
+
   napi-postinstall@0.3.4: {}
 
   natural-compare@1.4.0: {}
 
   negotiator@0.6.3: {}
 
+  negotiator@1.1.0:
+    dependencies:
+      content-type: 2.1.0
+
+  next-themes@0.4.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
   node-cron@4.6.0: {}
 
   node-fetch@2.7.0:
@@ -4596,7 +10647,7 @@ snapshots:
 
   node-int64@0.4.0: {}
 
-  node-releases@2.0.51: {}
+  node-releases@2.0.53: {}
 
   nodemailer@6.10.1: {}
 
@@ -4605,9 +10656,9 @@ snapshots:
       chokidar: 3.6.0
       debug: 4.4.3(supports-color@5.5.0)
       ignore-by-default: 1.0.1
-      minimatch: 10.2.5
+      minimatch: 10.2.6
       pstree.remy: 1.1.8
-      semver: 7.8.0
+      semver: 7.8.5
       simple-update-notifier: 2.0.0
       supports-color: 5.5.0
       touch: 3.1.1
@@ -4619,16 +10670,25 @@ snapshots:
 
   normalize-path@3.0.0: {}
 
+  normalize-wheel@1.0.1: {}
+
   npm-run-path@4.0.1:
     dependencies:
       path-key: 3.1.1
 
+  npm-run-path@6.0.0:
+    dependencies:
+      path-key: 4.0.0
+      unicorn-magic: 0.3.0
+
   nub@0.0.0: {}
 
   object-assign@4.1.1: {}
 
   object-inspect@1.13.4: {}
 
+  object-treeify@1.1.33: {}
+
   on-finished@2.4.1:
     dependencies:
       ee-first: 1.1.1
@@ -4643,6 +10703,46 @@ snapshots:
     dependencies:
       mimic-fn: 2.1.0
 
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
+  open@11.0.1:
+    dependencies:
+      default-browser: 5.5.1
+      define-lazy-prop: 3.0.0
+      is-in-ssh: 1.0.0
+      is-inside-container: 1.0.0
+      powershell-utils: 0.2.0
+      wsl-utils: 1.0.0
+
+  open@8.4.2:
+    dependencies:
+      define-lazy-prop: 2.0.0
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  ora@8.2.0:
+    dependencies:
+      chalk: 5.6.2
+      cli-cursor: 5.0.0
+      cli-spinners: 2.9.2
+      is-interactive: 2.0.0
+      is-unicode-supported: 2.1.0
+      log-symbols: 6.0.0
+      stdin-discarder: 0.2.2
+      string-width: 7.2.0
+      strip-ansi: 7.2.0
+
   p-limit@2.3.0:
     dependencies:
       p-try: 2.2.0
@@ -4651,14 +10751,36 @@ snapshots:
     dependencies:
       yocto-queue: 0.1.0
 
+  p-locate@3.0.0:
+    dependencies:
+      p-limit: 2.3.0
+
   p-locate@4.1.0:
     dependencies:
       p-limit: 2.3.0
 
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
   p-try@2.2.0: {}
 
   package-json-from-dist@1.0.1: {}
 
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  parse-entities@4.0.2:
+    dependencies:
+      '@types/unist': 2.0.11
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.3.0
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+
   parse-json@5.2.0:
     dependencies:
       '@babel/code-frame': 7.29.7
@@ -4666,14 +10788,22 @@ snapshots:
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
+  parse-ms@4.0.0: {}
+
   parseurl@1.3.3: {}
 
+  path-browserify@1.0.1: {}
+
+  path-exists@3.0.0: {}
+
   path-exists@4.0.0: {}
 
   path-is-absolute@1.0.1: {}
 
   path-key@3.1.1: {}
 
+  path-key@4.0.0: {}
+
   path-parse@1.0.7: {}
 
   path-scurry@1.11.1:
@@ -4683,15 +10813,21 @@ snapshots:
 
   path-to-regexp@0.1.13: {}
 
+  path-to-regexp@8.4.2: {}
+
   path@0.12.7:
     dependencies:
       process: 0.11.10
       util: 0.10.4
 
+  pdfjs-dist@6.2.108:
+    optionalDependencies:
+      '@napi-rs/canvas': 1.0.7
+
   pg-cloudflare@1.4.0:
     optional: true
 
-  pg-connection-string@2.13.0: {}
+  pg-connection-string@2.14.0: {}
 
   pg-hstore@2.3.4:
     dependencies:
@@ -4699,11 +10835,11 @@ snapshots:
 
   pg-int8@1.0.1: {}
 
-  pg-pool@3.14.0(pg@8.21.0):
+  pg-pool@3.14.0(pg@8.23.0):
     dependencies:
-      pg: 8.21.0
+      pg: 8.23.0
 
-  pg-protocol@1.14.0: {}
+  pg-protocol@1.16.0: {}
 
   pg-types@2.2.0:
     dependencies:
@@ -4713,11 +10849,11 @@ snapshots:
       postgres-date: 1.0.7
       postgres-interval: 1.2.0
 
-  pg@8.21.0:
+  pg@8.23.0:
     dependencies:
-      pg-connection-string: 2.13.0
-      pg-pool: 3.14.0(pg@8.21.0)
-      pg-protocol: 1.14.0
+      pg-connection-string: 2.14.0
+      pg-pool: 3.14.0(pg@8.23.0)
+      pg-protocol: 1.16.0
       pg-types: 2.2.0
       pgpass: 1.0.5
     optionalDependencies:
@@ -4735,10 +10871,29 @@ snapshots:
 
   pirates@4.0.7: {}
 
+  pkce-challenge@5.0.1: {}
+
   pkg-dir@4.2.0:
     dependencies:
       find-up: 4.1.0
 
+  pkg-up@3.1.0:
+    dependencies:
+      find-up: 3.0.0
+
+  postcss-selector-parser@7.1.5:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-value-parser@4.2.0: {}
+
+  postcss@8.5.26:
+    dependencies:
+      nanoid: 3.3.18
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   postgres-array@2.0.0: {}
 
   postgres-bytea@1.0.1: {}
@@ -4749,15 +10904,40 @@ snapshots:
     dependencies:
       xtend: 4.0.2
 
+  powershell-utils@0.1.0: {}
+
+  powershell-utils@0.2.0: {}
+
+  prelude-ls@1.2.1: {}
+
   pretty-format@30.4.1:
     dependencies:
       '@jest/schemas': 30.4.1
       ansi-styles: 5.2.0
       react-is-18: react-is@18.3.1
-      react-is-19: react-is@19.2.7
+      react-is-19: react-is@19.2.8
+
+  pretty-ms@9.3.0:
+    dependencies:
+      parse-ms: 4.0.0
+
+  printj@1.1.2: {}
 
   process@0.11.10: {}
 
+  prompts@2.4.2:
+    dependencies:
+      kleur: 3.0.3
+      sisteransi: 1.0.5
+
+  prop-types@15.8.1:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
+  property-information@7.2.0: {}
+
   proto-list@1.2.4: {}
 
   proxy-addr@2.0.7:
@@ -4769,16 +10949,90 @@ snapshots:
 
   pstree.remy@1.1.8: {}
 
+  punycode@2.3.1: {}
+
   pure-rand@7.0.1: {}
 
-  qs@6.15.2:
+  qrcode.react@4.2.0(react@19.2.8):
     dependencies:
-      side-channel: 1.1.0
+      react: 19.2.8
+
+  qs@6.15.3:
+    dependencies:
+      es-define-property: 1.0.1
+      side-channel: 1.1.1
+
+  queue-microtask@1.2.3: {}
+
+  radix-ui@1.6.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-accessible-icon': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-accordion': 1.2.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-alert-dialog': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-arrow': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-aspect-ratio': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-avatar': 1.2.6(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-checkbox': 1.3.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-collapsible': 1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context-menu': 2.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-dialog': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-dropdown-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-form': 0.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-hover-card': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-label': 2.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-menubar': 1.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-navigation-menu': 1.2.22(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-one-time-password-field': 0.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-password-toggle-field': 0.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-popover': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-progress': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-radio-group': 1.4.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-scroll-area': 1.2.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-select': 2.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slider': 1.4.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-switch': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-tabs': 1.1.21(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toast': 1.2.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toggle': 1.1.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toggle-group': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-toolbar': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-tooltip': 1.2.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-escape-keydown': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
   random-bytes@1.0.0: {}
 
   range-parser@1.2.1: {}
 
+  range-parser@1.3.0: {}
+
   rate-limit-redis@4.3.1(express-rate-limit@6.11.2(express@4.22.2)):
     dependencies:
       express-rate-limit: 6.11.2(express@4.22.2)
@@ -4790,9 +11044,144 @@ snapshots:
       iconv-lite: 0.4.24
       unpipe: 1.0.0
 
+  raw-body@3.0.2:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.1
+      iconv-lite: 0.7.3
+      unpipe: 1.0.0
+
+  react-day-picker@9.14.0(react@19.2.8):
+    dependencies:
+      '@date-fns/tz': 1.5.0
+      '@tabby_ai/hijri-converter': 1.0.5
+      date-fns: 4.4.0
+      date-fns-jalali: 4.1.0-0
+      react: 19.2.8
+
+  react-dom@19.2.8(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      scheduler: 0.27.0
+
+  react-easy-crop@6.2.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      normalize-wheel: 1.0.1
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
+  react-fast-compare@3.2.2: {}
+
+  react-helmet-async@3.0.0(react@19.2.8):
+    dependencies:
+      invariant: 2.2.4
+      react: 19.2.8
+      react-fast-compare: 3.2.2
+      shallowequal: 1.1.0
+
+  react-hook-form@7.86.0(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+
+  react-icons@5.7.0(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+
+  react-is@16.13.1: {}
+
   react-is@18.3.1: {}
 
-  react-is@19.2.7: {}
+  react-is@19.2.8: {}
+
+  react-markdown@10.1.0(@types/react@19.2.18)(react@19.2.8):
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/mdast': 4.0.4
+      '@types/react': 19.2.18
+      devlop: 1.1.0
+      hast-util-to-jsx-runtime: 2.3.6
+      html-url-attributes: 3.0.1
+      mdast-util-to-hast: 13.2.1
+      react: 19.2.8
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      unified: 11.0.5
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  react-phone-number-input@3.4.18(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      classnames: 2.5.1
+      country-flag-icons: 1.6.20
+      input-format: 0.3.14(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      libphonenumber-js: 1.13.11
+      prop-types: 15.8.1
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
+  react-photo-view@1.2.7(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
+  react-redux@9.3.0(@types/react@19.2.18)(react@19.2.8)(redux@5.0.1):
+    dependencies:
+      '@types/use-sync-external-store': 0.0.6
+      react: 19.2.8
+      use-sync-external-store: 1.6.0(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      redux: 5.0.1
+
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.18)(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-style-singleton: 2.2.3(@types/react@19.2.18)(react@19.2.8)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  react-remove-scroll@2.7.2(@types/react@19.2.18)(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.18)(react@19.2.8)
+      react-style-singleton: 2.2.3(@types/react@19.2.18)(react@19.2.8)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      use-sidecar: 1.1.3(@types/react@19.2.18)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  react-resizable-panels@4.12.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
+  react-router-dom@7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-router: 7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+
+  react-router@7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      cookie: 1.1.1
+      react: 19.2.8
+      set-cookie-parser: 2.7.2
+    optionalDependencies:
+      react-dom: 19.2.8(react@19.2.8)
+
+  react-style-singleton@2.2.3(@types/react@19.2.18)(react@19.2.8):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.2.8
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  react@19.2.8: {}
 
   readable-stream@3.6.2:
     dependencies:
@@ -4804,6 +11193,34 @@ snapshots:
     dependencies:
       picomatch: 2.3.2
 
+  recast@0.23.21:
+    dependencies:
+      ast-types: 0.16.1
+      esprima: 4.0.1
+      source-map: 0.6.1
+      tiny-invariant: 1.3.3
+      tslib: 2.8.1
+
+  recharts@3.8.0(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@19.2.8)(react@19.2.8)(redux@5.0.1):
+    dependencies:
+      '@reduxjs/toolkit': 2.12.0(react-redux@9.3.0(@types/react@19.2.18)(react@19.2.8)(redux@5.0.1))(react@19.2.8)
+      clsx: 2.1.1
+      decimal.js-light: 2.5.1
+      es-toolkit: 1.51.0
+      eventemitter3: 5.0.4
+      immer: 10.2.0
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-is: 19.2.8
+      react-redux: 9.3.0(@types/react@19.2.18)(react@19.2.8)(redux@5.0.1)
+      reselect: 5.1.1
+      tiny-invariant: 1.3.3
+      use-sync-external-store: 1.6.0(react@19.2.8)
+      victory-vendor: 37.3.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - redux
+
   redis@4.7.1:
     dependencies:
       '@redis/bloom': 1.2.0(@redis/client@1.6.1)
@@ -4813,12 +11230,60 @@ snapshots:
       '@redis/search': 1.2.0(@redis/client@1.6.1)
       '@redis/time-series': 1.1.0(@redis/client@1.6.1)
 
+  redux-thunk@3.1.0(redux@5.0.1):
+    dependencies:
+      redux: 5.0.1
+
+  redux@5.0.1: {}
+
+  remark-gfm@4.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-gfm: 3.1.0
+      micromark-extension-gfm: 3.0.0
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-parse@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.3
+      micromark-util-types: 2.0.2
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-rehype@11.1.2:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/mdast': 4.0.4
+      mdast-util-to-hast: 13.2.1
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  remark-stringify@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-to-markdown: 2.1.2
+      unified: 11.0.5
+
   require-directory@2.1.1: {}
 
+  require-from-string@2.0.2: {}
+
+  reselect@5.1.1: {}
+
+  reselect@5.3.0: {}
+
   resolve-cwd@3.0.0:
     dependencies:
       resolve-from: 5.0.0
 
+  resolve-from@4.0.0: {}
+
   resolve-from@5.0.0: {}
 
   resolve@1.22.12:
@@ -4828,17 +11293,67 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
+  restore-cursor@5.1.0:
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+
   retry-as-promised@7.1.1: {}
 
+  reusify@1.1.0: {}
+
   rndm@1.2.0: {}
 
+  rolldown@1.2.5:
+    dependencies:
+      '@oxc-project/types': 0.146.0
+      '@rolldown/pluginutils': 1.0.1
+    optionalDependencies:
+      '@rolldown/binding-android-arm-eabi': 1.2.5
+      '@rolldown/binding-android-arm64': 1.2.5
+      '@rolldown/binding-darwin-arm64': 1.2.5
+      '@rolldown/binding-darwin-x64': 1.2.5
+      '@rolldown/binding-freebsd-x64': 1.2.5
+      '@rolldown/binding-linux-arm-gnueabihf': 1.2.5
+      '@rolldown/binding-linux-arm64-gnu': 1.2.5
+      '@rolldown/binding-linux-arm64-musl': 1.2.5
+      '@rolldown/binding-linux-ppc64-gnu': 1.2.5
+      '@rolldown/binding-linux-s390x-gnu': 1.2.5
+      '@rolldown/binding-linux-x64-gnu': 1.2.5
+      '@rolldown/binding-linux-x64-musl': 1.2.5
+      '@rolldown/binding-openharmony-arm64': 1.2.5
+      '@rolldown/binding-win32-arm64-msvc': 1.2.5
+      '@rolldown/binding-win32-x64-msvc': 1.2.5
+
+  router@2.2.0:
+    dependencies:
+      debug: 4.4.3(supports-color@5.5.0)
+      depd: 2.0.0
+      is-promise: 4.0.0
+      parseurl: 1.3.3
+      path-to-regexp: 8.4.2
+    transitivePeerDependencies:
+      - supports-color
+
+  run-applescript@7.1.0: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  rxjs@7.8.2:
+    dependencies:
+      tslib: 2.8.1
+
   safe-buffer@5.2.1: {}
 
   safer-buffer@2.1.2: {}
 
+  scheduler@0.27.0: {}
+
   semver@6.3.1: {}
 
-  semver@7.8.0: {}
+  semver@7.8.5: {}
 
   send@0.19.2:
     dependencies:
@@ -4858,6 +11373,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  send@1.2.1:
+    dependencies:
+      debug: 4.4.3(supports-color@5.5.0)
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      mime-types: 3.0.2
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.3.0
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   sequelize-cli@6.6.5:
     dependencies:
       fs-extra: 9.1.0
@@ -4870,7 +11401,7 @@ snapshots:
 
   sequelize-pool@7.1.0: {}
 
-  sequelize@6.37.8(pg-hstore@2.3.4)(pg@8.21.0):
+  sequelize@6.37.8(pg-hstore@2.3.4)(pg@8.23.0):
     dependencies:
       '@types/debug': 4.1.13
       '@types/validator': 13.15.10
@@ -4880,16 +11411,16 @@ snapshots:
       lodash: 4.18.1
       moment: 2.30.1
       moment-timezone: 0.5.48
-      pg-connection-string: 2.13.0
+      pg-connection-string: 2.14.0
       retry-as-promised: 7.1.1
-      semver: 7.8.0
+      semver: 7.8.5
       sequelize-pool: 7.1.0
       toposort-class: 1.0.1
       uuid: 8.3.2
       validator: 13.15.35
       wkx: 0.5.0
     optionalDependencies:
-      pg: 8.21.0
+      pg: 8.23.0
       pg-hstore: 2.3.4
     transitivePeerDependencies:
       - supports-color
@@ -4903,16 +11434,105 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  serve-static@2.2.1:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 1.2.1
+    transitivePeerDependencies:
+      - supports-color
+
+  set-cookie-parser@2.7.2: {}
+
   setprototypeof@1.1.1: {}
 
   setprototypeof@1.2.0: {}
 
+  shadcn@4.19.0:
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/parser': 7.29.8
+      '@babel/plugin-transform-typescript': 7.29.7(@babel/core@7.29.7)
+      '@babel/preset-typescript': 7.29.7(@babel/core@7.29.7)
+      '@dotenvx/dotenvx': 1.75.1
+      '@modelcontextprotocol/sdk': 1.30.0(zod@3.25.76)
+      '@types/validate-npm-package-name': 4.0.2
+      browserslist: 4.28.8
+      commander: 14.0.3
+      cosmiconfig: 9.0.2
+      dedent: 1.7.2
+      deepmerge: 4.3.1
+      diff: 8.0.4
+      execa: 9.6.1
+      fast-glob: 3.3.3
+      fs-extra: 11.4.0
+      fuzzysort: 3.1.0
+      kleur: 4.1.5
+      open: 11.0.1
+      ora: 8.2.0
+      postcss: 8.5.26
+      postcss-selector-parser: 7.1.5
+      prompts: 2.4.2
+      recast: 0.23.21
+      socks: 2.8.9
+      stringify-object: 5.0.0
+      tailwind-merge: 3.6.0
+      ts-morph: 26.0.0
+      tsconfig-paths: 4.2.0
+      undici: 7.29.0
+      validate-npm-package-name: 7.0.2
+      zod: 3.25.76
+      zod-to-json-schema: 3.25.2(zod@3.25.76)
+    transitivePeerDependencies:
+      - '@cfworker/json-schema'
+      - babel-plugin-macros
+      - supports-color
+      - typescript
+
+  shallowequal@1.1.0: {}
+
+  sharp@0.35.3(@types/node@26.2.0):
+    dependencies:
+      '@img/colour': 1.1.0
+      detect-libc: 2.1.2
+      semver: 7.8.5
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.35.3
+      '@img/sharp-darwin-x64': 0.35.3
+      '@img/sharp-freebsd-wasm32': 0.35.3
+      '@img/sharp-libvips-darwin-arm64': 1.3.2
+      '@img/sharp-libvips-darwin-x64': 1.3.2
+      '@img/sharp-libvips-linux-arm': 1.3.2
+      '@img/sharp-libvips-linux-arm64': 1.3.2
+      '@img/sharp-libvips-linux-ppc64': 1.3.2
+      '@img/sharp-libvips-linux-riscv64': 1.3.2
+      '@img/sharp-libvips-linux-s390x': 1.3.2
+      '@img/sharp-libvips-linux-x64': 1.3.2
+      '@img/sharp-libvips-linuxmusl-arm64': 1.3.2
+      '@img/sharp-libvips-linuxmusl-x64': 1.3.2
+      '@img/sharp-linux-arm': 0.35.3
+      '@img/sharp-linux-arm64': 0.35.3
+      '@img/sharp-linux-ppc64': 0.35.3
+      '@img/sharp-linux-riscv64': 0.35.3
+      '@img/sharp-linux-s390x': 0.35.3
+      '@img/sharp-linux-x64': 0.35.3
+      '@img/sharp-linuxmusl-arm64': 0.35.3
+      '@img/sharp-linuxmusl-x64': 0.35.3
+      '@img/sharp-webcontainers-wasm32': 0.35.3
+      '@img/sharp-win32-arm64': 0.35.3
+      '@img/sharp-win32-ia32': 0.35.3
+      '@img/sharp-win32-x64': 0.35.3
+      '@types/node': 26.2.0
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
 
   shebang-regex@3.0.0: {}
 
+  shell-quote@1.9.0: {}
+
   side-channel-list@1.0.1:
     dependencies:
       es-errors: 1.3.0
@@ -4933,7 +11553,7 @@ snapshots:
       object-inspect: 1.13.4
       side-channel-map: 1.0.1
 
-  side-channel@1.1.0:
+  side-channel@1.1.1:
     dependencies:
       es-errors: 1.3.0
       object-inspect: 1.13.4
@@ -4947,10 +11567,28 @@ snapshots:
 
   simple-update-notifier@2.0.0:
     dependencies:
-      semver: 7.8.0
+      semver: 7.8.5
+
+  sisteransi@1.0.5: {}
 
   slash@3.0.0: {}
 
+  smart-buffer@4.2.0: {}
+
+  socks@2.8.9:
+    dependencies:
+      ip-address: 10.5.0
+      smart-buffer: 4.2.0
+
+  sonner@2.0.8(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  source-map-js@1.2.1: {}
+
   source-map-support@0.5.13:
     dependencies:
       buffer-from: 1.1.2
@@ -4958,10 +11596,16 @@ snapshots:
 
   source-map@0.6.1: {}
 
+  space-separated-tokens@2.0.2: {}
+
   split2@4.2.0: {}
 
   sprintf-js@1.0.3: {}
 
+  ssf@0.11.2:
+    dependencies:
+      frac: 1.1.2
+
   stack-utils@2.0.6:
     dependencies:
       escape-string-regexp: 2.0.0
@@ -4970,6 +11614,8 @@ snapshots:
 
   statuses@2.0.2: {}
 
+  stdin-discarder@0.2.2: {}
+
   stream-browserify@3.0.0:
     dependencies:
       inherits: 2.0.4
@@ -4994,24 +11640,53 @@ snapshots:
       emoji-regex: 9.2.2
       strip-ansi: 7.2.0
 
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.6.0
+      get-east-asian-width: 1.6.0
+      strip-ansi: 7.2.0
+
   string_decoder@1.3.0:
     dependencies:
       safe-buffer: 5.2.1
 
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
+  stringify-object@5.0.0:
+    dependencies:
+      get-own-enumerable-keys: 1.0.0
+      is-obj: 3.0.0
+      is-regexp: 3.1.0
+
   strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
 
   strip-ansi@7.2.0:
     dependencies:
-      ansi-regex: 6.2.2
+      ansi-regex: 6.3.0
+
+  strip-bom@3.0.0: {}
 
   strip-bom@4.0.0: {}
 
   strip-final-newline@2.0.0: {}
 
+  strip-final-newline@4.0.0: {}
+
   strip-json-comments@3.1.1: {}
 
+  style-to-js@1.1.21:
+    dependencies:
+      style-to-object: 1.0.14
+
+  style-to-object@1.0.14:
+    dependencies:
+      inline-style-parser: 0.2.7
+
   supports-color@5.5.0:
     dependencies:
       has-flag: 3.0.0
@@ -5030,12 +11705,27 @@ snapshots:
     dependencies:
       '@pkgr/core': 0.3.6
 
+  systeminformation@5.33.1: {}
+
+  tailwind-merge@3.6.0: {}
+
+  tailwindcss@4.3.3: {}
+
+  tapable@2.3.3: {}
+
   test-exclude@6.0.0:
     dependencies:
       '@istanbuljs/schema': 0.1.6
       glob: 7.2.3
       minimatch: 3.1.5
 
+  tiny-invariant@1.3.3: {}
+
+  tinyglobby@0.2.17:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.5)
+      picomatch: 4.0.5
+
   tmpl@1.0.5: {}
 
   to-regex-range@5.0.1:
@@ -5052,10 +11742,33 @@ snapshots:
 
   tr46@0.0.3: {}
 
+  tree-kill@1.2.2: {}
+
+  trim-lines@3.0.1: {}
+
+  trough@2.2.0: {}
+
+  ts-morph@26.0.0:
+    dependencies:
+      '@ts-morph/common': 0.27.0
+      code-block-writer: 13.0.3
+
+  tsconfig-paths@4.2.0:
+    dependencies:
+      json5: 2.2.3
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
   tslib@2.8.1: {}
 
   tsscmp@1.0.6: {}
 
+  tw-animate-css@1.4.0: {}
+
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
   type-detect@4.0.8: {}
 
   type-fest@0.21.3: {}
@@ -5065,6 +11778,12 @@ snapshots:
       media-typer: 0.3.0
       mime-types: 2.1.35
 
+  type-is@2.1.0:
+    dependencies:
+      content-type: 2.1.0
+      media-typer: 1.1.1
+      mime-types: 3.0.2
+
   typedarray@0.0.6: {}
 
   ua-is-frozen@0.1.2: {}
@@ -5087,7 +11806,44 @@ snapshots:
 
   underscore@1.13.8: {}
 
-  undici-types@7.24.6: {}
+  undici-types@8.3.0: {}
+
+  undici@7.29.0: {}
+
+  unicorn-magic@0.3.0: {}
+
+  unified@11.0.5:
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+
+  unist-util-is@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.2:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+
+  unist-util-visit@5.1.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
 
   universalify@2.0.1: {}
 
@@ -5120,12 +11876,35 @@ snapshots:
       '@unrs/resolver-binding-win32-ia32-msvc': 1.12.2
       '@unrs/resolver-binding-win32-x64-msvc': 1.12.2
 
-  update-browserslist-db@1.2.3(browserslist@4.28.6):
+  update-browserslist-db@1.3.1(browserslist@4.28.8):
     dependencies:
-      browserslist: 4.28.6
+      browserslist: 4.28.8
       escalade: 3.2.0
       picocolors: 1.1.1
 
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  use-callback-ref@1.3.3(@types/react@19.2.18)(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  use-sidecar@1.1.3(@types/react@19.2.18)(react@19.2.8):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.2.8
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  use-sync-external-store@1.6.0(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+
   util-deprecate@1.0.2: {}
 
   util@0.10.4:
@@ -5144,10 +11923,60 @@ snapshots:
       '@types/istanbul-lib-coverage': 2.0.6
       convert-source-map: 2.0.0
 
+  validate-npm-package-name@7.0.2: {}
+
   validator@13.15.35: {}
 
   vary@1.1.2: {}
 
+  vaul@1.1.2(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
+  vfile-message@4.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
+
+  victory-vendor@37.3.6:
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.2.0
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
+  vite@8.2.2(@types/node@26.2.0)(jiti@2.7.0):
+    dependencies:
+      lightningcss: 1.33.0
+      picomatch: 4.0.5
+      postcss: 8.5.26
+      rolldown: 1.2.5
+      tinyglobby: 0.2.17
+    optionalDependencies:
+      '@types/node': 26.2.0
+      fsevents: 2.3.3
+      jiti: 2.7.0
+
   walker@1.0.8:
     dependencies:
       makeerror: 1.0.12
@@ -5167,9 +11996,19 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  which@4.0.0:
+    dependencies:
+      isexe: 3.1.5
+
   wkx@0.5.0:
     dependencies:
-      '@types/node': 25.9.1
+      '@types/node': 26.2.0
+
+  wmf@1.0.2: {}
+
+  word-wrap@1.2.5: {}
+
+  word@0.3.0: {}
 
   wrap-ansi@7.0.0:
     dependencies:
@@ -5190,6 +12029,24 @@ snapshots:
       imurmurhash: 0.1.4
       signal-exit: 4.1.0
 
+  wsl-utils@1.0.0:
+    dependencies:
+      is-wsl: 3.1.1
+      powershell-utils: 0.1.0
+
+  xlsx-js-style@1.2.0:
+    dependencies:
+      adler-32: 1.2.0
+      cfb: 1.2.2
+      codepage: 1.14.0
+      commander: 2.17.1
+      crc-32: 1.2.2
+      exit-on-epipe: 1.0.1
+      fflate: 0.3.11
+      ssf: 0.11.2
+      wmf: 1.0.2
+      word: 0.3.0
+
   xtend@4.0.2: {}
 
   y18n@5.0.8: {}
@@ -5212,6 +12069,16 @@ snapshots:
       y18n: 5.0.8
       yargs-parser: 20.2.9
 
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
   yargs@17.7.3:
     dependencies:
       cliui: 8.0.1
@@ -5223,3 +12090,23 @@ snapshots:
       yargs-parser: 21.1.1
 
   yocto-queue@0.1.0: {}
+
+  yocto-spinner@1.2.2:
+    dependencies:
+      yoctocolors: 2.2.0
+
+  yoctocolors@2.2.0: {}
+
+  zod-to-json-schema@3.25.2(zod@3.25.76):
+    dependencies:
+      zod: 3.25.76
+
+  zod-validation-error@4.0.2(zod@4.4.3):
+    dependencies:
+      zod: 4.4.3
+
+  zod@3.25.76: {}
+
+  zod@4.4.3: {}
+
+  zwitch@2.0.4: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 6c750ff..3c578c3 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,2 +1,5 @@
+packages:
+  - "apps/*"
 allowBuilds:
   unrs-resolver: true
+  msw: true