diff --git a/.github/workflows/website-ci.yml b/.github/workflows/website-ci.yml
index 068598c2d1..5a677c8998 100644
--- a/.github/workflows/website-ci.yml
+++ b/.github/workflows/website-ci.yml
@@ -133,60 +133,95 @@ jobs:
         uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea
         with:
           script: |
-            const fs = require('fs');
-            const steps = [
-              { name: 'Checkout', id: 'checkout', emoji: '📦' },
-              { name: 'Setup Node', id: 'setup-node', emoji: '⚙️' },
-              { name: 'Install dependencies', id: 'install', emoji: '📥' },
-              { name: 'Lint', id: 'lint', emoji: '🔍' },
-              { name: 'Type Check', id: 'typecheck', emoji: '🔎' },
-              { name: 'Unit Tests & Coverage', id: 'tests', emoji: '🧪' }
+            const stepMeta = [
+              { name: 'Checkout', id: 'checkout', emoji: '📦', fix: null },
+              { name: 'Setup Node', id: 'setup-node', emoji: '⚙️', fix: null },
+              { name: 'Install dependencies', id: 'install', emoji: '📥', fix: '`rm -rf node_modules && npm ci`' },
+              { name: 'Lint', id: 'lint', emoji: '🔍', fix: '`npm run lint:fix`' },
+              { name: 'Type Check', id: 'typecheck', emoji: '🔎', fix: 'Fix TypeScript errors listed below' },
+              { name: 'Unit Tests & Coverage', id: 'tests', emoji: '🧪', fix: '`npm run test:coverage` locally' }
             ];
 
+            // Fetch jobs via API (workflow_run payload doesn't include step outcomes)
+            const { data: jobsData } = await github.rest.actions.listJobsForWorkflowRun({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              run_id: context.runId,
+              per_page: 100
+            });
+
             const failedSteps = [];
-            for (const step of steps) {
-              const outcome = context.payload.workflow_run?.jobs?.[0]?.steps?.find(
-                s => s.name === step.name
-              )?.outcome;
-              if (outcome === 'failed') {
-                failedSteps.push(step);
+            const failedLogs = [];
+
+            for (const job of jobsData.jobs || []) {
+              for (const step of job.steps || []) {
+                if (step.conclusion === 'failure') {
+                  const meta = stepMeta.find(s => s.name === step.name);
+                  if (meta) {
+                    failedSteps.push({ ...meta, apiName: step.name });
+                  } else {
+                    failedSteps.push({ name: step.name, id: 'unknown', emoji: '❌', fix: null, apiName: step.name });
+                  }
+
+                  // Attempt to fetch the step log for context
+                  try {
+                    const { data: logs } = await github.rest.actions.downloadJobLogsForWorkflowRun({
+                      owner: context.repo.owner,
+                      repo: context.repo.repo,
+                      job_id: job.id
+                    });
+                    if (logs) {
+                      failedLogs.push({ step: step.name, logUrl: `${context.serverUrl}/${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId}/job/${job.id}` });
+                    }
+                  } catch (e) {
+                    // Logs may not be available; continue without them
+                  }
+                }
               }
             }
 
-            // Fallback: if we couldn't determine exact step, assume tests or lint
+            // Fallback when step detection fails
             if (failedSteps.length === 0) {
-              failedSteps.push({ name: 'Unknown step', id: 'unknown', emoji: '❌' });
+              failedSteps.push({ name: 'Build', id: 'build', emoji: '❌', fix: 'Check the workflow logs for details' });
             }
 
             const runUrl = `${context.serverUrl}/${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId}`;
-            const failedList = failedSteps.map(s => `${s.emoji} **${s.name}**`).join('\n');
-
-            const body = [
-              '## ❌ Website CI Failed',
-              '',
-              `**Failed step(s):**`,
-              failedList,
-              '',
-              '### Next Steps',
-              '',
-            ];
 
-            if (failedSteps.some(s => s.id === 'lint')) {
-              body.push('- Run `npm run lint:fix` to auto-fix lint issues');
-            }
-            if (failedSteps.some(s => s.id === 'typecheck')) {
-              body.push('- Check TypeScript errors above and fix type issues');
+            // Build the comment body
+            const body = [];
+            body.push('## ❌ Website CI Failed');
+            body.push('');
+
+            // Failed steps summary
+            body.push('**Failed step(s):**');
+            body.push('');
+            for (const s of failedSteps) {
+              body.push(`- ${s.emoji} **${s.name}**`);
             }
-            if (failedSteps.some(s => s.id === 'tests')) {
-              body.push('- Run `npm run test:coverage` locally to see test failures');
+            body.push('');
+
+            // Actionable next steps
+            body.push('### How to Fix');
+            body.push('');
+            for (const s of failedSteps) {
+              if (s.fix) {
+                body.push(`- **${s.name}:** ${s.fix}`);
+              }
             }
-            if (failedSteps.some(s => s.id === 'install')) {
-              body.push('- Check for dependency issues, try `rm -rf node_modules && npm install`');
+            body.push('');
+
+            // Links
+            body.push('### Resources');
+            body.push('');
+            body.push(`- [View full workflow run](${runUrl})`);
+            if (failedLogs.length > 0) {
+              for (const log of failedLogs) {
+                body.push(`- [View logs for \`${log.step}\`](${log.logUrl})`);
+              }
             }
-
-            body.push('', `🔗 [View workflow run](${runUrl})`);
-            body.push('', '---');
-            body.push('*Please fix the issues and push again.*');
+            body.push('');
+            body.push('---');
+            body.push('*Please fix the issues and push again to re-trigger CI.*');
 
             // Find and update existing comment or create new one
             const marker = '## ❌ Website CI Failed';
@@ -196,8 +231,7 @@ jobs:
               issue_number: context.issue.number,
               per_page: 100
             });
-
-            const existing = comments.find(c => c.body.includes(marker));
+            const existing = comments.find(c => c.body && c.body.includes(marker));
 
             if (existing) {
               await github.rest.issues.updateComment({
diff --git a/docs/clean-air-forum-followups.md b/docs/clean-air-forum-followups.md
new file mode 100644
index 0000000000..291e3bde04
--- /dev/null
+++ b/docs/clean-air-forum-followups.md
@@ -0,0 +1,119 @@
+# Clean Air Forum selfie feature — follow-ups for other teams
+
+This feature (mobile selfie filter/sticker + `/selfies` conference wall
+display) was built as a **temporary, fully client-side-and-mock-API
+implementation** so it could be demoed end-to-end before any backend or
+infra work existed for it. Everything below is scaffolding, explicitly
+marked `TEMPORARY` in code, and needs real ownership before/soon after the
+event it launches with.
+
+Related PRs: [#3755](https://github.com/airqo-platform/AirQo-frontend/pull/3755) (mobile), [#3756](https://github.com/airqo-platform/AirQo-frontend/pull/3756) (website)
+
+## 1. Backend team — replace the mock submissions API
+
+**What exists today**: `src/website/src/services/cleanAirForumSelfiesStore.ts`
+is a plain in-memory array behind `src/website/src/app/api/clean-air-forum/selfies/`
+(`GET`/`POST`) and `.../selfies/[id]/` (`PATCH` to hide). It:
+
+- Resets on every redeploy and isn't shared across replicas — a submission
+  can vanish mid-event if the website pod restarts or scales out.
+- Has no real auth beyond a shared secret/PIN (see §3) — fine for a
+  short-lived event, not something to keep long-term.
+
+**What's needed**: equivalent endpoints on the real AirQo backend, with
+persistent storage (even a simple table is enough — submissions are
+small: image URL + AQI metadata + timestamp + hidden flag). The
+request/response shapes in the mock were deliberately kept simple so they
+can carry over almost unchanged:
+
+- `POST /selfies` — body `{ eventId, imageUrl, locationName?, pm25Value?, aqiCategory?, displayName? }` → `201 { submission }`
+- `GET /selfies?eventId=...` — → `200 { submissions: [...] }`, newest first, hidden ones excluded
+- `PATCH /selfies/:id` — hides (soft-deletes) a submission, used by wall moderation
+
+Once these exist, the two Next.js routes above should just proxy to them
+(or be deleted in favor of calling the real API directly from
+`SelfiesWallPage.tsx` and the mobile app).
+
+## 2. Cloudinary / whoever owns that account — harden the upload preset
+
+Selfies are uploaded directly from the mobile app to Cloudinary using an
+**unsigned upload preset** (`NEXT_PUBLIC_CLOUDINARY_NAME` /
+`NEXT_PUBLIC_CLOUDINARY_PRESET`, read in
+`src/mobile/lib/src/app/shared/services/clean_air_forum_submission_service.dart`).
+Unsigned presets are bundled in the app binary by design (that's how
+unsigned uploads work), so anyone who decompiles the app can extract the
+preset name and cloud name and upload directly to this Cloudinary account.
+
+Please apply, at minimum, on the `clean_air_forum_selfies` preset:
+
+- **Folder lock** — restrict the preset to only write into
+  `clean_air_forum_selfies/` (prevents overwriting/polluting other
+  folders in the account).
+- **File size / format limits** — cap to a few MB, images only.
+- **Moderation** — consider enabling Cloudinary's built-in moderation
+  add-on (or at least manual review capability) given this feeds a public
+  venue display.
+- Longer-term: move to a **signed upload** flow (mobile app calls our own
+  backend for a signature, backend calls Cloudinary) once the real backend
+  from §1 exists — this closes the preset-exposure issue completely
+  instead of just mitigating it.
+
+The website route already validates that submitted `imageUrl`s are
+`https://res.cloudinary.com/.../clean_air_forum_selfies/...` before
+accepting them (defense in depth), but that alone doesn't stop someone
+with the preset from uploading directly to Cloudinary — it only stops them
+from getting arbitrary *other* URLs onto the wall via our API.
+
+## 3. DevOps / whoever manages GitHub Actions secrets — wire up new env vars
+
+Two new secrets need to be created and referenced in the deploy workflows
+(`.github/workflows/deploy-frontends-to-staging.yml`,
+`deploy-frontends-to-production.yml`, the Azure equivalents, and
+`deploy-frontend-pr-previews.yml` if selfie testing on PR previews matters).
+These are **server-only** vars (no `NEXT_PUBLIC_` prefix), so they only need
+adding to each workflow's `.env.yaml` generation step (same pattern as
+`SLACK_WEBHOOK_URL`) — no Docker `--build-arg` needed.
+
+| Env var | Where it's used | What it does |
+|---|---|---|
+| `CLEAN_AIR_FORUM_WALL_PIN` | `src/website/src/app/api/clean-air-forum/selfies/[id]/route.ts` | Staff PIN required to remove a photo from the wall via double-tap/long-press |
+| `CLEAN_AIR_FORUM_SUBMISSION_SECRET` | `src/website/src/app/api/clean-air-forum/selfies/route.ts` | Shared secret the mobile app sends (`x-clean-air-forum-secret` header) so only the app can post to the wall |
+
+**Important**: both checks now **fail closed in production** if the
+corresponding env var is missing (they only fail open in
+development/preview, for local testing convenience) — see
+`src/website/src/services/cleanAirForumAuth.ts`. If these aren't
+configured before a production deploy, moderation and/or submissions will
+be rejected outright (with a `console.warn` in the server logs), not
+silently left open. **Please set both before the forum goes live in
+production.**
+
+The mobile app also needs a matching secret in its own env
+(`CLEAN_AIR_FORUM_API_SECRET` in `src/mobile/.env.prod` /
+`.env.dev` — not committed to the repo) equal to whatever
+`CLEAN_AIR_FORUM_SUBMISSION_SECRET` is set to on the website side.
+
+## 4. Rate limiting — needs a real (distributed) solution
+
+`route.ts` currently has a best-effort **in-memory, per-server-instance**
+rate limit (5 submissions/IP/minute) as a stopgap — it resets per instance
+and doesn't hold across replicas, so it only blunts casual spam, not a
+determined abuser hitting a load-balanced deployment. If abuse becomes a
+real concern for the event, this needs a proper distributed rate limiter
+(e.g. Cloudflare in front of the site, or a Redis/Upstash-backed limiter)
+— that's an infra decision beyond what this PR can set up.
+
+## 5. Content moderation policy
+
+Right now, moderation is manual only: a staff member double-taps or
+long-presses a bad photo on the wall display itself and enters a shared
+PIN. There's no automated image moderation (nudity/violence detection,
+etc.). Given this is a public-facing conference wall, it may be worth
+asking whoever owns Cloudinary to enable an automated moderation add-on
+(see §2) as a first line of defense, with manual removal as the backstop.
+
+## Event details
+
+`src/mobile/lib/src/app/dashboard/utils/clean_air_forum_branding.dart`
+has `edition = 'Pretoria 2026'` and `dateRange = '13TH-16TH JULY'` — both
+confirmed correct as of 2026-07-07. No action needed here.
diff --git a/src/website/AGENTS.md b/src/website/AGENTS.md
index 835eb7288d..9ffdd2f7cd 100644
--- a/src/website/AGENTS.md
+++ b/src/website/AGENTS.md
@@ -5,53 +5,222 @@
 - Next.js 14 App Router (standalone output)
 - React 18 + TypeScript 5.5
 - Tailwind CSS 3 + shadcn/ui (new-york style)
-- Redux Toolkit + Tanstack React Query
-- Jest + Testing Library (jsdom)
+- Redux Toolkit + Tanstack React Query v5
+- Jest 29 + Testing Library (jsdom)
+- Framer Motion for animations
 
 ## Commands
 
 ```bash
 npm run dev          # dev server on localhost:3000
 npm run build        # production build
+npm run start        # start production server
 npm run lint         # ESLint
 npm run lint:fix     # ESLint auto-fix
-npm run format       # Prettier
-npm run test         # Jest
+npm run format       # Prettier (write all files)
+npm run test         # Jest unit tests
+npm run test:watch   # Jest in watch mode
+npm run test:coverage # Jest with coverage report
+npm run e2e          # E2E tests (headless, Mocha + Selenium)
+npm run e2e:headed   # E2E tests with visible browser
 ```
 
 Run from `src/website/`. No monorepo task runner; each app is independent.
 
+**Validation**: After making changes, always run:
+
+```bash
+npm run lint && npm run format && npm run build
+```
+
 ## Project Structure
 
-- `src/app/` - Next.js routes. Route groups `(main)` and `(main)/(about)` organize pages without affecting URLs.
-- `src/views/` - Page components (actual UI logic). App pages are thin wrappers that delegate here.
-- `src/components/` - Reusable components. `ui/` has shadcn primitives, `layouts/` has MainLayout/Navbar/Footer.
-- `src/services/` - API client and hooks. `apiClient.ts` handles server vs client routing.
-- `src/store/` - Redux slices.
-- `src/configs/` - Static config data (package listings, etc.).
-- `src/lib/utils.ts` - `cn()` helper for Tailwind class merging.
+```
+src/
+├── __mocks__/          # Jest mocks (fileMock, mapbox-gl, recharts)
+├── app/                # Next.js App Router routes and layouts
+│   ├── (site)/         # Main site pages (home, about, careers, contact, events, etc.)
+│   ├── (products)/     # Product pages (8 routes)
+│   ├── (solutions)/    # Solution pages (5 routes)
+│   ├── (programs)/     # Program pages (africa-clean-air-forum, faces-of-clean-air)
+│   ├── (content)/      # Content pages (blogs)
+│   ├── (developers)/   # Developer pages (devcon, packages)
+│   ├── (legal)/        # Legal pages (terms, privacy, cookies)
+│   ├── (utility)/      # Utility pages (explore-data, billboard)
+│   └── api/            # API routes (proxy, geocode, translate, log)
+├── components/         # Reusable UI components
+│   ├── ui/             # shadcn/ui primitives (18 components)
+│   ├── layout/         # Layout shells (MainLayout, Navbar, Footer, etc.)
+│   ├── providers/      # Context providers (Redux, Query, ForumData)
+│   ├── sections/       # Page sections (AirQualityBillboard, footer, etc.)
+│   ├── feedback/       # Feedback components (EmptyState, ErrorState, LoadingState)
+│   └── dialogs/        # Dialog components (EngagementDialog, LanguageModal)
+├── config/             # Static configuration data
+│   ├── cleanAirForumConfig.ts  # Clean Air Forum constants
+│   ├── env.config.ts           # Environment variable validation
+│   ├── navigation.config.ts    # Navigation structure
+│   ├── packages.config.ts      # Package listings
+│   ├── routes.config.ts        # Route definitions
+│   ├── seo.config.ts           # SEO defaults
+│   └── site.config.ts          # Site metadata
+├── features/           # Feature modules (page-level UI logic)
+│   ├── about/          # About page with components, hooks, services
+│   ├── blogs/          # Blog listing and detail pages
+│   ├── careers/        # Career listing and detail pages
+│   ├── clean-air-forum/ # Africa Clean Air Forum (11 sub-features)
+│   ├── clean-air-network/ # Clean Air Network
+│   ├── contact/        # Contact form
+│   ├── developers/     # Developer pages (DevCon)
+│   ├── events/         # Event listing and detail
+│   ├── explore-data/   # Data exploration
+│   ├── faces-of-clean-air/ # Faces of Clean Air carousel page
+│   ├── faqs/           # FAQ page
+│   ├── home/           # Home page with deferred sections
+│   ├── legal/          # Legal pages (TOS, Privacy, etc.)
+│   ├── packages/       # Icon packages browser
+│   ├── partners/       # Partners listing
+│   ├── press/          # Press/media page
+│   ├── products/       # Product marketing pages (8 products)
+│   ├── resources/      # Resources page
+│   └── solutions/      # Solution pages (5 solutions)
+├── hooks/              # Custom React hooks
+├── lib/                # Utilities and helpers
+│   ├── utils/          # Utility functions (cn, formatDate, slugify, etc.)
+│   ├── security/       # Security utilities (sanitizeHtml, safeExternalLink)
+│   ├── analytics/      # Analytics utilities
+│   └── metadata/       # SEO metadata generation
+├── queries/            # Tanstack React Query definitions
+├── services/           # API client and service layer
+│   ├── api/            # Core API layer (client, routes, base service)
+│   ├── external/       # External integrations (analytics, cloudinary, maps, faces-of-clean-air)
+│   └── website/        # Website business services (20 service files)
+├── store/              # Redux Toolkit slices (country, forum, modal)
+├── styles/             # CSS files (theme, typography, utilities)
+└── types/              # TypeScript type definitions
+```
 
 ## Path Aliases
 
-Configured in `tsconfig.json`: `@/*` maps to `./src/*`. Also `@/components/*`, `@/utils/*`, `@/hooks/*`, `@/store/*`, `@/types/*`, `@/lib/*`, `@/services/*`, `@/context/*`, `@/views/*`, `@/configs/*`.
+Configured in `tsconfig.json`:
+
+- `@/*` -> `./src/*`
+- `@/components/*` -> `./src/components/*`
+- `@/lib/*` -> `./src/lib/*`
+- `@/hooks/*` -> `./src/hooks/*`
+- `@/store/*` -> `./src/store/*`
+- `@/types/*` -> `./src/types/*`
+- `@/services/*` -> `./src/services/*`
+- `@/features/*` -> `./src/features/*`
+- `@/config/*` -> `./src/config/*`
+- `@/queries/*` -> `./src/queries/*`
+- `@/styles/*` -> `./src/styles/*`
+- `@public/*` -> `./public/*`
 
 ## API Client
 
-`src/services/apiClient.ts` - Server-side calls use `API_URL` env var directly with `API_TOKEN` query param. Client-side calls go through Next.js proxy at `/api/v2`. Do not hard-code backend URLs.
+`src/services/api/api-client.ts` - Dual-mode API client:
+
+- **Server-side**: Direct backend API call using `API_URL` env var with `API_TOKEN` query param
+- **Client-side**: Next.js proxy at `/api/v2` (hides backend from browser)
+
+**Important**: API routes in `api-routes.ts` are defined differently for server vs client:
+
+- `WEBSITE` routes use `/website/api/v2/...` prefix (server-side normalization handles client proxy)
+- `USERS` routes use `users/selfies` format (no `/api/v2/` prefix, client proxy adds it)
+- Never hard-code backend URLs; always use `API_ROUTES` constants
+
+## Services Structure
+
+### `src/services/api/` - Core API Layer
+
+- `api-client.ts` - Fetch-based API client with server/client dual routing
+- `api-routes.ts` - All API endpoint constants (WEBSITE, DEVICES, USERS, PREDICT, PAYMENTS)
+- `base.ts` - `BaseApiService` class with CRUD methods and pagination transformer
+- `api-error.ts` - Enhanced error types with status codes
+- `api-response.ts` - Response type definitions
+
+### `src/services/external/` - External Integrations
+
+- `analytics.service.ts` - Analytics and grid data
+- `cloudinary.service.ts` - Cloudinary image management
+- `faces-of-clean-air.service.ts` - Faces of Clean Air API
+- `maps.service.ts` - Map-related services
+
+### `src/services/website/` - Website Business Services (20 files)
+
+Services for blogs, careers, events, forum-events, grids, partners, press, publications, team, etc.
+
+## Features Pattern
+
+Pages use the **features pattern** (NOT views pattern):
+
+1. **App pages are thin wrappers** that delegate to feature components:
+
+   ```tsx
+   // src/app/(site)/home/page.tsx
+   import HomePage from '@/features/home/HomePage';
+
+   const page = () => <HomePage />;
+   export default page;
+   ```
+
+2. **Route groups** organize pages without affecting URLs. Each group can have its own `layout.tsx`.
+
+3. **MainLayout** wraps most pages (navbar + footer). Exceptions: contact (custom layout), faces-of-clean-air (no layout wrapper).
 
 ## Environment Variables
 
-Copy `.env.sample` to `.env`. Server-side: `API_URL`, `API_TOKEN`, `OPENCAGE_API_KEY`, `SLACK_WEBHOOK_URL`, `SLACK_CHANNEL`, `GOOGLE_SITE_VERIFICATION`. Client-side: `NEXT_PUBLIC_SITE_URL`, `NEXT_PUBLIC_GA_MEASUREMENT_ID`, `NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN`. Never commit `.env`.
+Copy `.env.sample` to `.env`. Never commit `.env`.
+
+### Server-side
+
+| Variable                   | Purpose                               |
+| -------------------------- | ------------------------------------- |
+| `API_URL`                  | Backend API base URL                  |
+| `API_TOKEN`                | Authentication token for API requests |
+| `OPENCAGE_API_KEY`         | OpenCage geocoding API key            |
+| `SLACK_WEBHOOK_URL`        | Slack notification webhook            |
+| `SLACK_CHANNEL`            | Slack notification channel            |
+| `GOOGLE_SITE_VERIFICATION` | Google Search Console verification    |
+
+### Client-side (NEXT*PUBLIC* prefix)
+
+| Variable                               | Purpose                                            |
+| -------------------------------------- | -------------------------------------------------- |
+| `NEXT_PUBLIC_SITE_URL`                 | Comma-separated site URLs (first = canonical base) |
+| `NEXT_PUBLIC_GA_MEASUREMENT_ID`        | Google Analytics measurement ID                    |
+| `NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN`      | Mapbox GL access token                             |
+| `NEXT_PUBLIC_CLEAN_AIR_FORUM_EVENT_ID` | Forum edition ID for faces-of-clean-air page       |
 
 When adding new env vars, update `.env.sample` and CI workflow YAML files in `.github/workflows/`.
 
 ## Linting
 
-ESLint enforces: `simple-import-sort` (auto-sorted imports), `unused-imports` (warn on unused), `prettier` formatting errors. `@typescript-eslint/no-explicit-any` is off. Fix order: `npm run lint:fix && npm run format`.
+ESLint enforces:
+
+- `simple-import-sort` (auto-sorted imports) - **error**
+- `unused-imports` (warn on unused)
+- `prettier` formatting errors
+- `@typescript-eslint/no-explicit-any` is **off**
+
+Fix order: `npm run lint:fix && npm run format`
 
 ## Testing
 
-Jest with `ts-jest` and `jsdom`. Module aliases mirror tsconfig. CSS mocked via `identity-obj-proxy`. No test files exist yet; use `@testing-library/react` patterns when adding tests.
+### Unit Tests (Jest)
+
+- Framework: Jest 29 with `ts-jest` preset (`js-with-ts-esm`)
+- Environment: `jsdom`
+- 36 test files across: `src/lib/utils/__tests__/`, `src/lib/security/__tests__/`, `src/store/slices/__tests__/`, `src/services/api/__tests__/`, `src/queries/__tests__/`, `src/hooks/__tests__/`, `src/config/__tests__/`
+- Module aliases mirror tsconfig
+- CSS mocked via `identity-obj-proxy`
+- Test patterns: `src/**/__tests__/**/*.{ts,tsx}` and `src/**/*.{spec,test}.{ts,tsx}`
+
+### E2E Tests (Mocha + Selenium)
+
+- Framework: Mocha 11 with `selenium-webdriver` 4
+- Config: `e2e/.mocharc.yml` (60s timeout)
+- 9 page tests + 4 navigation tests
 
 ## Docker
 
@@ -64,9 +233,11 @@ Requires `.env` file in the website directory.
 
 ## Key Conventions
 
-- Root `/` redirects to `/home`.
-- Pages use the views pattern: `app/[route]/page.tsx` delegates to `views/[route]/[Name]Page.tsx`.
-- MainLayout wraps most pages (navbar + footer). Exceptions: contact (no footer), partners (no footer), forum (custom layout).
+- Root `/` redirects to `/home` (via `next.config.mjs` redirect).
+- Pages use the features pattern: `app/[route]/page.tsx` delegates to `features/[route]/[Name]Page.tsx`.
+- MainLayout wraps most pages (navbar + footer). Exceptions: contact (custom layout), faces-of-clean-air (no layout wrapper).
 - `cn()` from `@/lib/utils` for conditional Tailwind classes.
 - Server-side API calls append `API_TOKEN` as query param automatically.
 - `NEXT_PUBLIC_SITE_URL` is comma-separated; first entry is canonical base.
+- FloatingMiniBillboard is suppressed on `/packages`, `/solutions/network-coverage`, and `/faces-of-clean-air` routes.
+- Metadata is generated per-page using `METADATA_CONFIGS` from `@/lib/metadata`.
diff --git a/src/website/README.md b/src/website/README.md
index 7ce3bad8b6..42b06fe0ef 100644
--- a/src/website/README.md
+++ b/src/website/README.md
@@ -1,6 +1,6 @@
 # Website
 
-![codecov](https://codecov.io/gh/airqo-platform/AirQo-frontend/graph/badge.svg?token=LsBcFL42rz) ![passing](https://img.shields.io/badge/passing-803%20%E2%80%94%20100%25-brightgreen?style=flat-square) ![failing](https://img.shields.io/badge/failing-1-brightgreen?style=flat-square) ![coverage](https://img.shields.io/badge/coverage-84%25-brightgreen?style=flat-square)
+![codecov](https://codecov.io/gh/airqo-platform/AirQo-frontend/graph/badge.svg?token=LsBcFL42rz) ![passing](https://img.shields.io/badge/passing-803%20%E2%80%94%20100%25-brightgreen?style=flat-square) ![failing](https://img.shields.io/badge/failing-1-brightgreen?style=flat-square) ![coverage](https://img.shields.io/badge/coverage-84%25-brightgreen?style=flat-square) ![Node.js](https://img.shields.io/badge/Node.js-20+-339933?style=flat-square&logo=node.js&logoColor=white) ![TypeScript](https://img.shields.io/badge/TypeScript-5.5-blue?style=flat-square&logo=typescript&logoColor=white)
 
 **Website** is the AirQo marketing and analytics application for air quality data visualization. Built with Next.js 14, React 18, TypeScript, Tailwind CSS, Redux Toolkit, and TanStack React Query. The live website is at [airqo.net](https://airqo.net).
 
diff --git a/src/website/public/assets/images/white-logo.png b/src/website/public/assets/images/white-logo.png
new file mode 100644
index 0000000000..0ae6ba5797
Binary files /dev/null and b/src/website/public/assets/images/white-logo.png differ
diff --git a/src/website/public/favicon.ico b/src/website/public/favicon.ico
new file mode 100644
index 0000000000..1a323901ae
Binary files /dev/null and b/src/website/public/favicon.ico differ
diff --git a/src/website/src/app/(programs)/faces-of-clean-air/page.tsx b/src/website/src/app/(programs)/faces-of-clean-air/page.tsx
new file mode 100644
index 0000000000..539f51fbd5
--- /dev/null
+++ b/src/website/src/app/(programs)/faces-of-clean-air/page.tsx
@@ -0,0 +1,15 @@
+import FacesOfCleanAirPage from '@/features/faces-of-clean-air/FacesOfCleanAirPage';
+import { generateMetadata } from '@/lib/metadata';
+
+export const metadata = generateMetadata({
+  title: 'Faces of Clean Air | AirQo',
+  description:
+    'See the faces of clean air advocates from the Africa Clean Air Forum. View selfies shared by attendees showcasing air quality readings from their locations.',
+  keywords:
+    'Faces of Clean Air, Africa Clean Air Forum selfies, air quality advocates, PM2.5 readings Africa, clean air community, air quality conference photos',
+  url: '/faces-of-clean-air',
+});
+
+export default function FacesOfCleanAirRoute() {
+  return <FacesOfCleanAirPage />;
+}
diff --git a/src/website/src/app/layout.tsx b/src/website/src/app/layout.tsx
index a4e0d731f5..7f8ddf186d 100644
--- a/src/website/src/app/layout.tsx
+++ b/src/website/src/app/layout.tsx
@@ -178,7 +178,14 @@ export const metadata: Metadata = {
     ],
   },
   icons: {
-    icon: '/web-app-manifest-192x192.png',
+    icon: [
+      { url: '/assets/images/white-logo.png', sizes: 'any', type: 'image/png' },
+      {
+        url: '/web-app-manifest-192x192.png',
+        sizes: '192x192',
+        type: 'image/png',
+      },
+    ],
     apple: '/web-app-manifest-192x192.png',
   },
   verification: {
@@ -313,6 +320,8 @@ export default async function RootLayout({
           crossOrigin="anonymous"
         />
 
+        <meta name="referrer" content="no-referrer" />
+
         {/* Structured data */}
         {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Static JSON-LD data, not user input */}
         <Script
@@ -323,8 +332,12 @@ export default async function RootLayout({
         />
       </head>
       <body>
-        <GoogleTranslate />
-        <ExternalLinkDecorator />
+        <ErrorBoundary fallback={null}>
+          <GoogleTranslate />
+        </ErrorBoundary>
+        <ErrorBoundary fallback={null}>
+          <ExternalLinkDecorator />
+        </ErrorBoundary>
         <Suspense fallback={null}>
           <GoogleAnalytics measurementId={GOOGLE_ANALYTICS_MEASUREMENT_ID} />
         </Suspense>
diff --git a/src/website/src/components/FloatingMiniBillboard.tsx b/src/website/src/components/FloatingMiniBillboard.tsx
index b8f8112f36..775de6619c 100644
--- a/src/website/src/components/FloatingMiniBillboard.tsx
+++ b/src/website/src/components/FloatingMiniBillboard.tsx
@@ -85,6 +85,17 @@ export default function FloatingMiniBillboard({
       } as React.CSSProperties;
     }
 
+    // Use solid dark background for 'no-value' to ensure visibility
+    if (level === 'no-value') {
+      return {
+        backgroundColor: categoryColor,
+        color: '#ffffff',
+        border: `1px solid ${hexToRgba(categoryColor, 0.9)}`,
+        boxShadow: 'inset 0 -2px 0 rgba(0,0,0,0.06)',
+        fontFamily: '"Inter", system-ui, -apple-system, sans-serif',
+      } as React.CSSProperties;
+    }
+
     // Default subtle style for other categories
     return {
       backgroundColor: hexToRgba(categoryColor, 0.14),
diff --git a/src/website/src/components/FloatingMiniBillboardWrapper.tsx b/src/website/src/components/FloatingMiniBillboardWrapper.tsx
index 1a176e08ce..6189331fcd 100644
--- a/src/website/src/components/FloatingMiniBillboardWrapper.tsx
+++ b/src/website/src/components/FloatingMiniBillboardWrapper.tsx
@@ -53,7 +53,8 @@ export default function FloatingMiniBillboardWrapper() {
   useEffect(() => {
     if (
       pathname?.startsWith('/packages') ||
-      pathname?.startsWith('/solutions/network-coverage')
+      pathname?.startsWith('/solutions/network-coverage') ||
+      pathname?.startsWith('/faces-of-clean-air')
     ) {
       // Suppressed routes: skip fetching to avoid unnecessary load
       setLoading(false);
@@ -193,12 +194,13 @@ export default function FloatingMiniBillboardWrapper() {
     };
   }, [pathname]);
 
-  // Don't render anything while loading or if there's no data or if on packages page
+  // Don't render anything while loading or if there's no data or if on suppressed pages
   if (
     loading ||
     billboardData.length === 0 ||
     pathname?.startsWith('/packages') ||
-    pathname?.startsWith('/solutions/network-coverage')
+    pathname?.startsWith('/solutions/network-coverage') ||
+    pathname?.startsWith('/faces-of-clean-air')
   ) {
     return null;
   }
diff --git a/src/website/src/components/dialogs/EngagementDialog.tsx b/src/website/src/components/dialogs/EngagementDialog.tsx
index d9c1e60287..36a86eb0ce 100644
--- a/src/website/src/components/dialogs/EngagementDialog.tsx
+++ b/src/website/src/components/dialogs/EngagementDialog.tsx
@@ -442,7 +442,7 @@ const EngagementDialog = () => {
               </h2>
               <p className="text-gray-500">
                 Access real-time and historic air quality information across
-                Africa through our easy-to-use AirQo Nexus dashboard.
+                Africa through our easy-to-use AirQo Nexus.
               </p>
             </motion.div>
           </motion.div>
diff --git a/src/website/src/components/layout/Footer.tsx b/src/website/src/components/layout/Footer.tsx
index 77497f450a..f393260d76 100644
--- a/src/website/src/components/layout/Footer.tsx
+++ b/src/website/src/components/layout/Footer.tsx
@@ -39,6 +39,7 @@ const footerLinks = {
     { label: 'Events', href: '/events' },
     { label: 'FAQs', href: '/faqs' },
     { label: 'Africa Clean Air Forum', href: '/africa-clean-air-forum' },
+    { label: 'Faces of Clean Air', href: '/faces-of-clean-air' },
     { label: 'Press', href: '/press' },
     { label: 'Careers', href: '/careers' },
     { label: 'Contact Us', href: '/contact' },
diff --git a/src/website/src/components/ui/ErrorBoundary.tsx b/src/website/src/components/ui/ErrorBoundary.tsx
index 21bb6e273c..145c029855 100644
--- a/src/website/src/components/ui/ErrorBoundary.tsx
+++ b/src/website/src/components/ui/ErrorBoundary.tsx
@@ -1,246 +1,249 @@
-'use client';
-import React, { Component, ErrorInfo, ReactNode } from 'react';
-
-import { isGoogleTranslationActive } from '@/lib/utils/googleTranslate';
-import logger from '@/lib/utils/logger';
-import {
-  getSessionStorageItem,
-  setSessionStorageItem,
-} from '@/lib/utils/storageUtils';
-
-import CustomButton from './CustomButton';
-
-type ErrorBoundaryProps = {
-  children: ReactNode;
-  fallback?: ReactNode;
-  showErrorDetails?: boolean;
-};
-
-type ErrorBoundaryState = {
-  hasError: boolean;
-  error: Error | null;
-  errorInfo: ErrorInfo | null;
-  errorId: string | null;
-};
-
-class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-    this.state = {
-      hasError: false,
-      error: null,
-      errorInfo: null,
-      errorId: null,
-    };
-  }
-
-  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
-    // Generate a unique error ID for tracking
-    const errorId = `ERR_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    return {
-      hasError: true,
-      error,
-      errorId,
-    };
-  }
-
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    const errorId = this.state.errorId || 'UNKNOWN';
-
-    // Enhanced error logging with structured data
-    logger.error('React Error Boundary caught an error', error, {
-      errorId,
-      errorInfo: {
-        componentStack: errorInfo.componentStack,
-        errorBoundary: this.constructor.name,
-      },
-      errorDetails: {
-        name: error.name,
-        message: error.message,
-        stack: error.stack,
-      },
-      timestamp: new Date().toISOString(),
-      userAgent: typeof window !== 'undefined' ? navigator.userAgent : 'SSR',
-      url: typeof window !== 'undefined' ? window.location.href : 'SSR',
-    });
-
-    // Auto-recovery for Google Translate related errors
-    if (typeof window !== 'undefined') {
-      const isTranslated = isGoogleTranslationActive();
-
-      if (isTranslated) {
-        const isDomError =
-          error.message.includes('removeChild') ||
-          error.message.includes('insertBefore') ||
-          error.message.includes('Hydration') ||
-          error.message.includes('Minified React error');
-
-        if (isDomError) {
-          const lastReload = getSessionStorageItem<string>('gt_reload_ts');
-          const now = Date.now();
-
-          // Prevent infinite loops: only reload if last reload was > 10 seconds ago
-          if (!lastReload || now - parseInt(lastReload, 10) > 10000) {
-            setSessionStorageItem('gt_reload_ts', now.toString());
-            window.location.reload();
-            return;
-          }
-        }
-      }
-    }
-
-    this.setState({ errorInfo });
-  }
-
-  private handleReload = () => {
-    // Log the reload action
-    logger.info('User initiated page reload from error boundary', {
-      errorId: this.state.errorId,
-      action: 'reload',
-    });
-
-    window.location.reload();
-  };
-
-  private handleRetry = () => {
-    // Log the retry action
-    logger.info('User initiated error boundary retry', {
-      errorId: this.state.errorId,
-      action: 'retry',
-    });
-
-    this.setState({
-      hasError: false,
-      error: null,
-      errorInfo: null,
-      errorId: null,
-    });
-  };
-
-  render() {
-    if (this.state.hasError) {
-      // Use custom fallback if provided
-      if (this.props.fallback) {
-        return this.props.fallback;
-      }
-
-      const { error, errorId } = this.state;
-      const isDevelopment = process.env.NODE_ENV === 'development';
-
-      return (
-        <div className="min-h-screen flex flex-col justify-center items-center bg-gray-50 text-center px-4">
-          {/* Error Icon */}
-          <div className="mb-6">
-            <svg
-              className="w-20 h-20 text-red-500 mx-auto"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
-              ></path>
-            </svg>
-          </div>
-
-          {/* Error Message */}
-          <div className="max-w-2xl space-y-4">
-            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
-              Oops! Something went wrong
-            </h1>
-            <p className="text-lg text-gray-600 mb-6">
-              We&apos;re sorry for the inconvenience. Our team has been notified
-              and is working to fix this issue.
-            </p>
-
-            {/* Error ID for support */}
-            {errorId && (
-              <div className="bg-gray-100 rounded-lg p-4 mb-6">
-                <p className="text-sm text-gray-700">
-                  <span className="font-semibold">Error ID:</span>{' '}
-                  <code className="bg-gray-200 px-2 py-1 rounded text-xs">
-                    {errorId}
-                  </code>
-                </p>
-                <p className="text-xs text-gray-500 mt-2">
-                  Please include this ID when contacting support.
-                </p>
-              </div>
-            )}
-
-            {/* Development Error Details */}
-            {isDevelopment && this.props.showErrorDetails && error && (
-              <details className="bg-red-50 border border-red-200 rounded-lg p-4 text-left mb-6">
-                <summary className="font-semibold text-red-800 cursor-pointer mb-2">
-                  Error Details (Development Only)
-                </summary>
-                <div className="space-y-2">
-                  <div>
-                    <strong className="text-red-700">Error:</strong>
-                    <pre className="text-red-600 text-sm mt-1 overflow-auto">
-                      {error.message}
-                    </pre>
-                  </div>
-                  {error.stack && (
-                    <div>
-                      <strong className="text-red-700">Stack Trace:</strong>
-                      <pre className="text-red-600 text-xs mt-1 overflow-auto max-h-40">
-                        {error.stack}
-                      </pre>
-                    </div>
-                  )}
-                  {this.state.errorInfo?.componentStack && (
-                    <div>
-                      <strong className="text-red-700">Component Stack:</strong>
-                      <pre className="text-red-600 text-xs mt-1 overflow-auto max-h-40">
-                        {this.state.errorInfo.componentStack}
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              </details>
-            )}
-
-            {/* Action Buttons */}
-            <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <CustomButton
-                className="bg-blue-600 text-white px-6 py-3 rounded-lg shadow-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none transition-colors"
-                onClick={this.handleRetry}
-              >
-                Try Again
-              </CustomButton>
-              <CustomButton
-                className="bg-gray-600 text-white px-6 py-3 rounded-lg shadow-lg hover:bg-gray-700 focus:ring-2 focus:ring-gray-500 focus:outline-none transition-colors"
-                onClick={this.handleReload}
-              >
-                Reload Page
-              </CustomButton>
-            </div>
-
-            {/* Contact Support */}
-            <div className="mt-8 text-sm text-gray-500">
-              <p>
-                If this problem persists, please{' '}
-                <a
-                  href="/contact"
-                  className="text-blue-600 hover:text-blue-800 underline"
-                >
-                  contact our support team
-                </a>
-                .
-              </p>
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}
-
-export default ErrorBoundary;
+'use client';
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+import { isGoogleTranslationActive } from '@/lib/utils/googleTranslate';
+import logger from '@/lib/utils/logger';
+import {
+  getSessionStorageItem,
+  setSessionStorageItem,
+} from '@/lib/utils/storageUtils';
+
+import CustomButton from './CustomButton';
+
+type ErrorBoundaryProps = {
+  children: ReactNode;
+  fallback?: ReactNode;
+  showErrorDetails?: boolean;
+};
+
+type ErrorBoundaryState = {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+  errorId: string | null;
+};
+
+const GOOGLE_TRANSLATE_DOM_ERROR_PATTERNS = [
+  'removeChild',
+  'insertBefore',
+  'Hydration',
+  'Minified React error',
+  'Failed to execute',
+  'NotFoundError',
+];
+
+function isGoogleTranslateDomError(error: Error): boolean {
+  if (typeof window === 'undefined') return false;
+  if (!isGoogleTranslationActive()) return false;
+
+  return GOOGLE_TRANSLATE_DOM_ERROR_PATTERNS.some(
+    (pattern) =>
+      error.message.includes(pattern) || error.name.includes(pattern),
+  );
+}
+
+function shouldSilentlyReload(error: Error): boolean {
+  if (typeof window === 'undefined') return false;
+  return isGoogleTranslateDomError(error);
+}
+
+function canAttemptSilentReload(): boolean {
+  const lastReload = getSessionStorageItem<string>('gt_reload_ts');
+  if (!lastReload) return true;
+  return Date.now() - parseInt(lastReload, 10) > 10000;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      errorId: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+    // For Google Translate DOM errors, trigger silent reload instead of showing error UI
+    if (shouldSilentlyReload(error) && canAttemptSilentReload()) {
+      setSessionStorageItem('gt_reload_ts', Date.now().toString());
+      // Delay reload to avoid synchronous navigation during render
+      setTimeout(() => window.location.reload(), 0);
+      // Return no error state — keep children mounted while reload pending
+      return {};
+    }
+
+    const errorId = `ERR_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    return {
+      hasError: true,
+      error,
+      errorId,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    const errorId = this.state.errorId || 'UNKNOWN';
+
+    logger.error('React Error Boundary caught an error', error, {
+      errorId,
+      errorInfo: {
+        componentStack: errorInfo.componentStack,
+        errorBoundary: this.constructor.name,
+      },
+      errorDetails: {
+        name: error.name,
+        message: error.message,
+        stack: error.stack,
+      },
+      timestamp: new Date().toISOString(),
+      userAgent: typeof window !== 'undefined' ? navigator.userAgent : 'SSR',
+      url: typeof window !== 'undefined' ? window.location.href : 'SSR',
+    });
+
+    this.setState({ errorInfo });
+  }
+
+  private handleReload = () => {
+    logger.info('User initiated page reload from error boundary', {
+      errorId: this.state.errorId,
+      action: 'reload',
+    });
+
+    window.location.reload();
+  };
+
+  private handleRetry = () => {
+    logger.info('User initiated error boundary retry', {
+      errorId: this.state.errorId,
+      action: 'retry',
+    });
+
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      errorId: null,
+    });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      const { error, errorId } = this.state;
+      const isDevelopment = process.env.NODE_ENV === 'development';
+
+      return (
+        <div className="min-h-screen flex flex-col justify-center items-center bg-gray-50 text-center px-4">
+          <div className="mb-6">
+            <svg
+              className="w-20 h-20 text-red-500 mx-auto"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
+              ></path>
+            </svg>
+          </div>
+
+          <div className="max-w-2xl space-y-4">
+            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+              Oops! Something went wrong
+            </h1>
+            <p className="text-lg text-gray-600 mb-6">
+              We&apos;re sorry for the inconvenience. Our team has been notified
+              and is working to fix this issue.
+            </p>
+
+            {errorId && (
+              <div className="bg-gray-100 rounded-lg p-4 mb-6">
+                <p className="text-sm text-gray-700">
+                  <span className="font-semibold">Error ID:</span>{' '}
+                  <code className="bg-gray-200 px-2 py-1 rounded text-xs">
+                    {errorId}
+                  </code>
+                </p>
+                <p className="text-xs text-gray-500 mt-2">
+                  Please include this ID when contacting support.
+                </p>
+              </div>
+            )}
+
+            {isDevelopment && this.props.showErrorDetails && error && (
+              <details className="bg-red-50 border border-red-200 rounded-lg p-4 text-left mb-6">
+                <summary className="font-semibold text-red-800 cursor-pointer mb-2">
+                  Error Details (Development Only)
+                </summary>
+                <div className="space-y-2">
+                  <div>
+                    <strong className="text-red-700">Error:</strong>
+                    <pre className="text-red-600 text-sm mt-1 overflow-auto">
+                      {error.message}
+                    </pre>
+                  </div>
+                  {error.stack && (
+                    <div>
+                      <strong className="text-red-700">Stack Trace:</strong>
+                      <pre className="text-red-600 text-xs mt-1 overflow-auto max-h-40">
+                        {error.stack}
+                      </pre>
+                    </div>
+                  )}
+                  {this.state.errorInfo?.componentStack && (
+                    <div>
+                      <strong className="text-red-700">Component Stack:</strong>
+                      <pre className="text-red-600 text-xs mt-1 overflow-auto max-h-40">
+                        {this.state.errorInfo.componentStack}
+                      </pre>
+                    </div>
+                  )}
+                </div>
+              </details>
+            )}
+
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <CustomButton
+                className="bg-blue-600 text-white px-6 py-3 rounded-lg shadow-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none transition-colors"
+                onClick={this.handleRetry}
+              >
+                Try Again
+              </CustomButton>
+              <CustomButton
+                className="bg-gray-600 text-white px-6 py-3 rounded-lg shadow-lg hover:bg-gray-700 focus:ring-2 focus:ring-gray-500 focus:outline-none transition-colors"
+                onClick={this.handleReload}
+              >
+                Reload Page
+              </CustomButton>
+            </div>
+
+            <div className="mt-8 text-sm text-gray-500">
+              <p>
+                If this problem persists, please{' '}
+                <a
+                  href="/contact"
+                  className="text-blue-600 hover:text-blue-800 underline"
+                >
+                  contact our support team
+                </a>
+                .
+              </p>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/src/website/src/config/cleanAirForumConfig.ts b/src/website/src/config/cleanAirForumConfig.ts
new file mode 100644
index 0000000000..85c1aba293
--- /dev/null
+++ b/src/website/src/config/cleanAirForumConfig.ts
@@ -0,0 +1,19 @@
+/**
+ * Config for the Clean Air Forum conference wall display.
+ *
+ * The wall page (`/faces-of-clean-air`) and the mobile app's submission flow both
+ * need to agree on which forum edition is "current".
+ */
+export const CLEAN_AIR_FORUM_CURRENT_EVENT_ID = 'clean-air-forum-2026';
+
+/**
+ * How often the wall page polls for new submissions when the tab is active.
+ * 45 seconds balances responsiveness for the booth scenario with server load.
+ * Pauses entirely when the tab is hidden (Page Visibility API).
+ */
+export const CLEAN_AIR_FORUM_WALL_ACTIVE_POLL_INTERVAL_MS = 45 * 1000;
+
+/**
+ * Fallback polling interval used when the Page Visibility API is unavailable.
+ */
+export const CLEAN_AIR_FORUM_WALL_POLL_INTERVAL_MS = 2 * 60 * 1000;
diff --git a/src/website/src/features/blogs/BlogsPage.tsx b/src/website/src/features/blogs/BlogsPage.tsx
index 9bc68f8420..c0c9e71e0d 100644
--- a/src/website/src/features/blogs/BlogsPage.tsx
+++ b/src/website/src/features/blogs/BlogsPage.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { motion } from 'framer-motion';
 import Image from 'next/image';
 import Link from 'next/link';
 import React, { useEffect, useMemo, useState } from 'react';
@@ -16,6 +17,19 @@ import {
   normalizeBlogImageUrl,
 } from './blogUtils';
 
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1, duration: 0.5, ease: 'easeOut' },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: 'easeOut' } },
+};
+
 const PAGE_SIZE = 9;
 
 const BlogCardSkeleton = () => (
@@ -307,14 +321,22 @@ const BlogsPage: React.FC = () => {
             </div>
           ) : (
             <>
-              <div className="divide-y divide-gray-200">
+              <motion.div
+                className="divide-y divide-gray-200"
+                initial="hidden"
+                whileInView="visible"
+                viewport={{ once: true, amount: 0.1 }}
+                variants={containerVariants}
+              >
                 {blogs.map((blog) => (
-                  <BlogCard
+                  <motion.div
                     key={blog.public_identifier || blog.id}
-                    blog={blog}
-                  />
+                    variants={itemVariants}
+                  >
+                    <BlogCard blog={blog} />
+                  </motion.div>
                 ))}
-              </div>
+              </motion.div>
 
               {!error && data && data.total_pages > 1 && blogs.length > 0 && (
                 <div className="mt-10">
diff --git a/src/website/src/features/developers/airqo-devcon/AirQoDevConPage.tsx b/src/website/src/features/developers/airqo-devcon/AirQoDevConPage.tsx
index 66fe9c223c..037f6bd656 100644
--- a/src/website/src/features/developers/airqo-devcon/AirQoDevConPage.tsx
+++ b/src/website/src/features/developers/airqo-devcon/AirQoDevConPage.tsx
@@ -1,3 +1,6 @@
+'use client';
+
+import { motion } from 'framer-motion';
 import Image from 'next/image';
 import Link from 'next/link';
 import type { IconType } from 'react-icons';
@@ -8,7 +11,6 @@ import {
   FiCheckCircle,
   FiCode,
   FiCpu,
-  FiExternalLink,
   FiMapPin,
   FiTool,
   FiUsers,
@@ -16,14 +18,23 @@ import {
 
 import { CustomButton } from '@/components/ui';
 import mainConfig from '@/config/site.config';
-import {
-  DEVCON_APPLY_URL,
-  DEVCON_COUNTDOWN_TARGET,
-  DEVCON_IMAGE_SRC,
-} from '@/lib/devcon';
+import { DEVCON_COUNTDOWN_TARGET, DEVCON_IMAGE_SRC } from '@/lib/devcon';
 
 import CountdownTimer from './CountdownTimer';
 
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1, duration: 0.5, ease: 'easeOut' },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: 'easeOut' } },
+};
+
 type InfoCard = {
   icon: IconType;
   label: string;
@@ -101,8 +112,8 @@ const AirQoDevConPage = () => {
                   <FiCalendar className="w-3.5 h-3.5" /> 17&ndash;18 June 2026
                 </span>
                 <span className="text-[#d4d4d8]">&middot;</span>
-                <span className="inline-flex items-center gap-1.5 text-[13px] text-[#059669]">
-                  <FiCheckCircle className="w-3.5 h-3.5" /> Applications open
+                <span className="inline-flex items-center gap-1.5 text-[13px] text-[#dc2626]">
+                  <FiCheckCircle className="w-3.5 h-3.5" /> Applications closed
                 </span>
               </div>
               <h1 className="text-[32px] md:text-[36px] font-semibold tracking-[-0.025em] text-[#18181b] leading-[1.15] mb-4">
@@ -117,16 +128,6 @@ const AirQoDevConPage = () => {
                 Learn. Build. Break things. Fix them. Ship.
               </p>
               <div className="flex flex-col gap-3 sm:flex-row">
-                <a
-                  href={DEVCON_APPLY_URL}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <CustomButton className="px-5 py-3 text-[13px]">
-                    Apply Now
-                    <FiExternalLink className="w-3.5 h-3.5 ml-1.5" />
-                  </CustomButton>
-                </a>
                 <Link href="#devcon-tracks">
                   <CustomButton className="px-5 py-3 text-[13px] bg-white text-[#18181b] border border-[#e4e4e7] hover:bg-[#f4f4f5]">
                     Explore tracks
@@ -149,11 +150,17 @@ const AirQoDevConPage = () => {
         </div>
       </section>
 
-      <section className="px-4">
+      <motion.section
+        className="px-4"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, amount: 0.2 }}
+        variants={containerVariants}
+      >
         <div
           className={`${mainConfig.containerClass} grid grid-cols-1 gap-8 lg:grid-cols-[0.85fr_1.15fr] lg:items-center`}
         >
-          <div>
+          <motion.div variants={itemVariants}>
             <p className="mb-2 text-[11px] font-medium uppercase tracking-[0.06em] text-blue-600">
               Countdown
             </p>
@@ -165,21 +172,28 @@ const AirQoDevConPage = () => {
               Register your interest now and we will share joining details and
               preparation notes with registered students.
             </p>
-          </div>
-          <div>
+          </motion.div>
+          <motion.div variants={itemVariants}>
             <CountdownTimer targetDate={DEVCON_COUNTDOWN_TARGET} />
-          </div>
+          </motion.div>
         </div>
-      </section>
+      </motion.section>
 
-      <section className="bg-blue-50">
+      <motion.section
+        className="bg-blue-50"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, amount: 0.2 }}
+        variants={containerVariants}
+      >
         <div className={`${mainConfig.containerClass} py-10 px-4`}>
           <div className="grid grid-cols-2 sm:grid-cols-5 gap-3">
             {devconStats.map((stat) => {
               const Icon = stat.icon;
               return (
-                <div
+                <motion.div
                   key={stat.label}
+                  variants={itemVariants}
                   className="border border-[#e4e4e7] rounded-lg p-4"
                 >
                   <Icon className="w-5 h-5 text-[#71717a] mb-3" />
@@ -189,16 +203,22 @@ const AirQoDevConPage = () => {
                   <p className="text-[15px] font-semibold text-[#18181b]">
                     {stat.value}
                   </p>
-                </div>
+                </motion.div>
               );
             })}
           </div>
         </div>
-      </section>
+      </motion.section>
 
-      <section className={`${mainConfig.containerClass} px-4`}>
+      <motion.section
+        className={`${mainConfig.containerClass} px-4`}
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, amount: 0.2 }}
+        variants={containerVariants}
+      >
         <div className="grid grid-cols-1 gap-8 lg:grid-cols-[0.9fr_1.1fr]">
-          <div>
+          <motion.div variants={itemVariants}>
             <p className="text-[11px] font-medium uppercase tracking-[0.06em] text-blue-600 mb-2">
               About AirQo DevCon
             </p>
@@ -215,14 +235,15 @@ const AirQoDevConPage = () => {
               how the systems behind clean air data are built, maintained, and
               improved.
             </p>
-          </div>
+          </motion.div>
 
           <div className="grid gap-3">
             {tracks.map((track) => {
               const Icon = track.icon;
               return (
-                <div
+                <motion.div
                   key={track.title}
+                  variants={itemVariants}
                   className="border border-[#e4e4e7] rounded-lg p-5"
                 >
                   <div className="flex gap-4">
@@ -236,29 +257,37 @@ const AirQoDevConPage = () => {
                       </p>
                     </div>
                   </div>
-                </div>
+                </motion.div>
               );
             })}
           </div>
         </div>
-      </section>
+      </motion.section>
 
-      <section id="devcon-tracks" className="bg-[#EDF3FF]">
+      <motion.section
+        id="devcon-tracks"
+        className="bg-[#EDF3FF]"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, amount: 0.2 }}
+        variants={containerVariants}
+      >
         <div className={`${mainConfig.containerClass} py-12 px-4`}>
-          <div className="mb-8">
+          <motion.div className="mb-8" variants={itemVariants}>
             <p className="text-[11px] font-medium uppercase tracking-[0.06em] text-blue-600 mb-2">
               Your track
             </p>
             <h2 className="text-[24px] md:text-[28px] font-semibold tracking-[-0.02em] text-[#18181b]">
               Pick your superpower.
             </h2>
-          </div>
+          </motion.div>
           <div className="bg-white border border-blue-200 rounded-lg divide-y divide-blue-100">
             {tracks.map((track) => {
               const Icon = track.icon;
               return (
-                <article
+                <motion.article
                   key={track.title}
+                  variants={itemVariants}
                   className="p-6 grid gap-4 lg:grid-cols-[48px_1fr_200px] lg:items-start"
                 >
                   <Icon className="w-6 h-6 text-[#71717a] mt-0.5" />
@@ -278,17 +307,23 @@ const AirQoDevConPage = () => {
                       {track.tools.join(' / ')}
                     </p>
                   </div>
-                </article>
+                </motion.article>
               );
             })}
           </div>
         </div>
-      </section>
+      </motion.section>
 
-      <section className="border-t border-[#e4e4e7]">
+      <motion.section
+        className="border-t border-[#e4e4e7]"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, amount: 0.2 }}
+        variants={containerVariants}
+      >
         <div className={`${mainConfig.containerClass} py-12 px-4`}>
           <div className="grid grid-cols-1 gap-8 lg:grid-cols-[1fr_0.8fr]">
-            <div>
+            <motion.div variants={itemVariants}>
               <p className="text-[11px] font-medium uppercase tracking-[0.06em] text-blue-600 mb-2">
                 What you leave with
               </p>
@@ -299,8 +334,11 @@ const AirQoDevConPage = () => {
               <p className="text-[15px] text-[#71717a] leading-[1.6]">
                 The event is designed for students who want more than a talk.
               </p>
-            </div>
-            <div className="border border-[#e4e4e7] rounded-lg p-5">
+            </motion.div>
+            <motion.div
+              variants={itemVariants}
+              className="border border-[#e4e4e7] rounded-lg p-5"
+            >
               <ul className="space-y-3">
                 {outcomes.map((outcome) => (
                   <li
@@ -312,38 +350,36 @@ const AirQoDevConPage = () => {
                   </li>
                 ))}
               </ul>
-            </div>
+            </motion.div>
           </div>
         </div>
-      </section>
+      </motion.section>
 
-      <section>
+      <motion.section
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, amount: 0.2 }}
+        variants={containerVariants}
+      >
         <div className={`${mainConfig.containerClass} py-12 px-4`}>
-          <div className="bg-blue-600 rounded-lg p-6 lg:p-8 text-white">
+          <motion.div
+            variants={itemVariants}
+            className="bg-blue-600 rounded-lg p-6 lg:p-8 text-white"
+          >
             <div className="grid grid-cols-1 gap-6 lg:grid-cols-[1fr_auto] lg:items-center">
               <div>
                 <h2 className="text-[24px] md:text-[28px] font-semibold tracking-[-0.02em] mb-2">
-                  Spots are limited. Apply while registration is open.
+                  Applications are now closed.
                 </h2>
                 <p className="text-[14px] text-blue-100">
                   Free to attend &middot; Official AirQo gear &middot;
                   Certificate &middot; Open-source credits
                 </p>
               </div>
-              <a
-                href={DEVCON_APPLY_URL}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <CustomButton className="px-5 py-3 text-[13px] bg-white text-blue-600 hover:bg-blue-50">
-                  Apply Now
-                  <FiExternalLink className="w-3.5 h-3.5 ml-1.5" />
-                </CustomButton>
-              </a>
             </div>
-          </div>
+          </motion.div>
         </div>
-      </section>
+      </motion.section>
     </div>
   );
 };
diff --git a/src/website/src/features/explore-data/ExplorePage.tsx b/src/website/src/features/explore-data/ExplorePage.tsx
index 4528a99b63..15bee6d938 100644
--- a/src/website/src/features/explore-data/ExplorePage.tsx
+++ b/src/website/src/features/explore-data/ExplorePage.tsx
@@ -98,8 +98,7 @@ const ExplorePage = () => {
                 variants={textReveal}
               >
                 Access real-time and historic air quality information across
-                Africa through our easy-to-use AirQo Nexus dashboard or mobile
-                app.
+                Africa through our easy-to-use AirQo Nexus or mobile app.
               </motion.p>
             </div>
 
@@ -144,7 +143,7 @@ const ExplorePage = () => {
                     </div>
                   </div>
                   <p className="text-gray-700 mb-2 text-sm text-center">
-                    An interactive AirQo Nexus platform
+                    An interactive AirQo Nexus
                   </p>
                   <CustomButton
                     onClick={() =>
diff --git a/src/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx b/src/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx
new file mode 100644
index 0000000000..4b13d98331
--- /dev/null
+++ b/src/website/src/features/faces-of-clean-air/FacesOfCleanAirPage.tsx
@@ -0,0 +1,1473 @@
+'use client';
+
+import {
+  AnimatePresence,
+  motion,
+  type PanInfo,
+  useMotionTemplate,
+  useMotionValue,
+  useReducedMotion,
+  useSpring,
+  useTransform,
+  type Variants,
+} from 'framer-motion';
+import Image from 'next/image';
+import Link from 'next/link';
+import {
+  type KeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { FiCamera } from 'react-icons/fi';
+
+import {
+  CLEAN_AIR_FORUM_CURRENT_EVENT_ID,
+  CLEAN_AIR_FORUM_WALL_ACTIVE_POLL_INTERVAL_MS,
+} from '@/config/cleanAirForumConfig';
+import { usePollingWithVisibility } from '@/hooks/usePollingWithVisibility';
+import { facesOfCleanAirService } from '@/services/external';
+import type { CleanAirSubmission } from '@/services/external/faces-of-clean-air.service';
+
+const AIRQO_LOGO_URL = '/assets/images/white-logo.png';
+
+const DESKTOP_CARDS_PER_PAGE = 8;
+const CAROUSEL_INTERVAL_MS = 7600;
+
+const SWIPE_DISTANCE_THRESHOLD = 70;
+const SWIPE_VELOCITY_THRESHOLD = 500;
+const MOBILE_MEDIA_QUERY = '(max-width: 639px)';
+
+const EVENT_LABEL = 'Africa CLEAN-Air Forum';
+const EVENT_LOCATION_AND_YEAR = 'Pretoria 2026';
+const EVENT_DATES_BADGE = '14TH-16TH JULY';
+
+const SMOOTH_SPRING = {
+  stiffness: 150,
+  damping: 25,
+  mass: 0.9,
+};
+
+type FetchState = 'idle' | 'loading' | 'success' | 'error';
+
+type CategoryStyle = {
+  label: string;
+  className: string;
+};
+
+function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+
+    const updateMatch = () => {
+      setMatches(mediaQuery.matches);
+    };
+
+    updateMatch();
+    mediaQuery.addEventListener('change', updateMatch);
+
+    return () => {
+      mediaQuery.removeEventListener('change', updateMatch);
+    };
+  }, [query]);
+
+  return matches;
+}
+
+function formatPm25(value: number | null | undefined): string {
+  if (typeof value !== 'number' || !Number.isFinite(value)) {
+    return '--';
+  }
+
+  return value.toFixed(1);
+}
+
+function getFallbackCategory(pm25: number): CategoryStyle {
+  if (pm25 <= 12) {
+    return {
+      label: 'Good',
+      className: 'bg-emerald-100 text-emerald-700',
+    };
+  }
+
+  if (pm25 <= 35.4) {
+    return {
+      label: 'Moderate',
+      className: 'bg-amber-100 text-amber-700',
+    };
+  }
+
+  if (pm25 <= 55.4) {
+    return {
+      label: 'Sensitive',
+      className: 'bg-orange-100 text-orange-700',
+    };
+  }
+
+  return {
+    label: 'Unhealthy',
+    className: 'bg-red-100 text-red-700',
+  };
+}
+
+function getCategoryStyle(
+  category: string | null | undefined,
+  pm25: number,
+): CategoryStyle {
+  const normalizedCategory = category?.trim().toLowerCase();
+
+  if (!normalizedCategory) {
+    return getFallbackCategory(pm25);
+  }
+
+  if (normalizedCategory.includes('good')) {
+    return {
+      label: category!,
+      className: 'bg-emerald-100 text-emerald-700',
+    };
+  }
+
+  if (normalizedCategory.includes('moderate')) {
+    return {
+      label: category!,
+      className: 'bg-amber-100 text-amber-700',
+    };
+  }
+
+  if (normalizedCategory.includes('sensitive')) {
+    return {
+      label: category!,
+      className: 'bg-orange-100 text-orange-700',
+    };
+  }
+
+  return {
+    label: category!,
+    className: 'bg-red-100 text-red-700',
+  };
+}
+
+function AmbientBackground({ reduceMotion }: { reduceMotion: boolean | null }) {
+  return (
+    <div
+      aria-hidden="true"
+      className="pointer-events-none absolute inset-0 overflow-hidden"
+    >
+      {/* Dark blue gradient from top right corner */}
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            'radial-gradient(ellipse at 100% 0%, #02143B 0%, transparent 60%)',
+        }}
+      />
+
+      {/* Main grid lines */}
+      <div
+        className="absolute inset-0 opacity-[0.1]"
+        style={{
+          backgroundImage: `
+            linear-gradient(
+              rgba(255, 255, 255, 0.32) 1px,
+              transparent 1px
+            ),
+            linear-gradient(
+              90deg,
+              rgba(255, 255, 255, 0.32) 1px,
+              transparent 1px
+            )
+          `,
+          backgroundSize: '72px 72px',
+          maskImage:
+            'linear-gradient(to bottom, black 0%, black 45%, transparent 84%)',
+          WebkitMaskImage:
+            'linear-gradient(to bottom, black 0%, black 45%, transparent 84%)',
+        }}
+      />
+
+      {/* Fine secondary grid */}
+      <div
+        className="absolute inset-0 opacity-[0.035]"
+        style={{
+          backgroundImage: `
+            linear-gradient(
+              rgba(255, 255, 255, 0.45) 1px,
+              transparent 1px
+            ),
+            linear-gradient(
+              90deg,
+              rgba(255, 255, 255, 0.45) 1px,
+              transparent 1px
+            )
+          `,
+          backgroundSize: '24px 24px',
+          maskImage: 'linear-gradient(to bottom, black 0%, transparent 70%)',
+          WebkitMaskImage:
+            'linear-gradient(to bottom, black 0%, transparent 70%)',
+        }}
+      />
+
+      {/* Right atmospheric glow */}
+      <motion.div
+        className="absolute -right-[55%] top-[5%] h-[420px] w-[420px] rounded-full bg-blue-300/20 blur-[100px] sm:-right-[14%] sm:h-[540px] sm:w-[540px] sm:blur-[110px]"
+        animate={
+          reduceMotion
+            ? undefined
+            : {
+                x: [0, -38, 14, 0],
+                y: [0, 26, -12, 0],
+                scale: [1, 1.09, 0.97, 1],
+              }
+        }
+        transition={{
+          duration: 22,
+          repeat: Infinity,
+          ease: 'easeInOut',
+        }}
+      />
+
+      {/* Left atmospheric glow */}
+      <motion.div
+        className="absolute -left-[60%] top-[28%] h-[380px] w-[380px] rounded-full bg-cyan-300/12 blur-[100px] sm:-left-[13%] sm:top-[20%] sm:h-[450px] sm:w-[450px] sm:blur-[115px]"
+        animate={
+          reduceMotion
+            ? undefined
+            : {
+                x: [0, 45, -8, 0],
+                y: [0, -22, 28, 0],
+                scale: [1, 0.94, 1.06, 1],
+              }
+        }
+        transition={{
+          duration: 25,
+          repeat: Infinity,
+          ease: 'easeInOut',
+        }}
+      />
+
+      {/* Travelling soft light */}
+      <motion.div
+        className="absolute left-[28%] top-[17%] h-32 w-32 rounded-full bg-white/10 blur-[60px] sm:left-[34%] sm:top-[12%] sm:h-40 sm:w-40 sm:blur-[68px]"
+        animate={
+          reduceMotion
+            ? undefined
+            : {
+                x: [-45, 120, -15, -45],
+                y: [0, 58, -26, 0],
+                opacity: [0.2, 0.5, 0.28, 0.2],
+              }
+        }
+        transition={{
+          duration: 20,
+          repeat: Infinity,
+          ease: 'easeInOut',
+        }}
+      />
+
+      <div className="absolute inset-x-0 bottom-0 h-[30%] bg-gradient-to-b from-transparent via-white/15 to-white/70 sm:h-[36%] sm:via-white/20 sm:to-white/80" />
+    </div>
+  );
+}
+
+function SkeletonCard({
+  index,
+  reduceMotion,
+}: {
+  index: number;
+  reduceMotion: boolean | null;
+}) {
+  return (
+    <motion.div
+      initial={
+        reduceMotion
+          ? false
+          : {
+              opacity: 0,
+              y: 24,
+              scale: 0.96,
+            }
+      }
+      animate={{
+        opacity: 1,
+        y: 0,
+        scale: 1,
+      }}
+      transition={{
+        duration: reduceMotion ? 0 : 0.62,
+        delay: reduceMotion ? 0 : index * 0.075,
+        ease: [0.22, 1, 0.36, 1],
+      }}
+      className="relative aspect-[3/4] w-full overflow-hidden rounded-xl border border-white/15 bg-white/20 shadow-[0_24px_60px_-32px_rgba(2,6,23,0.8)] backdrop-blur-md"
+      aria-hidden="true"
+    >
+      <div className="absolute inset-0 bg-gradient-to-br from-white/30 via-blue-100/15 to-blue-600/20" />
+
+      {!reduceMotion && (
+        <motion.div
+          className="absolute inset-y-0 -left-[75%] w-[65%] skew-x-[-18deg] bg-gradient-to-r from-transparent via-white/45 to-transparent"
+          animate={{
+            x: ['0%', '330%'],
+          }}
+          transition={{
+            duration: 2.15,
+            delay: index * 0.1,
+            repeat: Infinity,
+            repeatDelay: 0.7,
+            ease: 'easeInOut',
+          }}
+        />
+      )}
+
+      <div className="absolute left-3 top-3 flex items-center gap-2">
+        <div className="h-6 w-10 rounded-full bg-white/35" />
+
+        <div className="space-y-1">
+          <div className="h-2 w-16 rounded-full bg-white/35" />
+          <div className="h-2 w-12 rounded-full bg-white/25" />
+        </div>
+      </div>
+
+      <div className="absolute inset-x-0 bottom-0 h-[50%] bg-gradient-to-t from-blue-700/80 via-blue-600/50 to-transparent" />
+
+      <div className="absolute inset-x-3 bottom-3 space-y-2">
+        <div className="h-5 w-3/4 rounded-full bg-white/45" />
+        <div className="h-2 w-1/2 rounded-full bg-white/30" />
+
+        <div className="flex items-end gap-2">
+          <div className="h-8 w-16 rounded-lg bg-white/45" />
+          <div className="h-4 w-14 rounded-full bg-white/35" />
+        </div>
+
+        <div className="flex justify-between border-t border-white/15 pt-2">
+          <div className="h-4 w-24 rounded-full bg-white/35" />
+          <div className="h-3 w-20 rounded-full bg-white/25" />
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+const cardVariants: Variants = {
+  enter: {
+    opacity: 0,
+    y: 28,
+    scale: 0.94,
+  },
+  center: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+  },
+  exit: {
+    opacity: 0,
+    y: -16,
+    scale: 0.96,
+  },
+};
+
+function FaceCard({
+  submission,
+  priority,
+  reduceMotion,
+}: {
+  submission: CleanAirSubmission;
+  priority: boolean;
+  reduceMotion: boolean | null;
+}) {
+  const pointerX = useMotionValue(0.5);
+  const pointerY = useMotionValue(0.5);
+
+  const transformedRotateX = useTransform(pointerY, [0, 1], [5, -5]);
+  const transformedRotateY = useTransform(pointerX, [0, 1], [-5, 5]);
+
+  const rotateX = useSpring(transformedRotateX, SMOOTH_SPRING);
+  const rotateY = useSpring(transformedRotateY, SMOOTH_SPRING);
+
+  const glareX = useTransform(pointerX, [0, 1], [0, 100]);
+  const glareY = useTransform(pointerY, [0, 1], [0, 100]);
+
+  const glareBackground = useMotionTemplate`
+    radial-gradient(
+      circle at ${glareX}% ${glareY}%,
+      rgba(255,255,255,0.30) 0%,
+      rgba(255,255,255,0.12) 16%,
+      rgba(255,255,255,0) 44%
+    )
+  `;
+
+  const pm25 = submission.pm25Value ?? 0;
+  const category = getCategoryStyle(submission.aqiCategory, pm25);
+
+  const displayName =
+    submission.displayName?.trim() ||
+    submission.locationName?.trim() ||
+    'Clean Air Champion';
+
+  const location =
+    submission.locationName?.trim() || 'Pretoria, Gauteng, South Africa';
+
+  const handlePointerMove = useCallback(
+    (event: ReactPointerEvent<HTMLElement>) => {
+      if (reduceMotion || event.pointerType !== 'mouse') {
+        return;
+      }
+
+      const cardBounds = event.currentTarget.getBoundingClientRect();
+
+      const relativeX = (event.clientX - cardBounds.left) / cardBounds.width;
+
+      const relativeY = (event.clientY - cardBounds.top) / cardBounds.height;
+
+      pointerX.set(Math.min(Math.max(relativeX, 0), 1));
+      pointerY.set(Math.min(Math.max(relativeY, 0), 1));
+    },
+    [pointerX, pointerY, reduceMotion],
+  );
+
+  const resetPointerPosition = useCallback(() => {
+    pointerX.set(0.5);
+    pointerY.set(0.5);
+  }, [pointerX, pointerY]);
+
+  return (
+    <motion.article
+      layout
+      variants={cardVariants}
+      transition={{
+        duration: reduceMotion ? 0 : 0.68,
+        ease: [0.22, 1, 0.36, 1],
+      }}
+      whileHover={
+        reduceMotion
+          ? undefined
+          : {
+              y: -8,
+              scale: 1.015,
+              transition: {
+                type: 'spring',
+                stiffness: 240,
+                damping: 24,
+              },
+            }
+      }
+      whileTap={
+        reduceMotion
+          ? undefined
+          : {
+              scale: 0.986,
+            }
+      }
+      onPointerMove={handlePointerMove}
+      onPointerLeave={resetPointerPosition}
+      style={{
+        rotateX: reduceMotion ? 0 : rotateX,
+        rotateY: reduceMotion ? 0 : rotateY,
+        transformPerspective: 1000,
+      }}
+      className="group relative aspect-[3/4] w-full overflow-hidden rounded-xl border border-white/15 bg-blue-950 shadow-[0_28px_70px_-35px_rgba(2,6,23,0.95)] [transform-style:preserve-3d] will-change-transform"
+    >
+      <Image
+        src={submission.imageUrl}
+        alt={`${displayName} at ${location}`}
+        fill
+        priority={priority}
+        unoptimized
+        className="object-cover transition-transform duration-1000 ease-out sm:group-hover:scale-[1.05]"
+        sizes="(max-width: 639px) 86vw, (max-width: 1023px) 42vw, (max-width: 1279px) 25vw, 22vw"
+      />
+
+      <div className="absolute inset-x-0 top-0 h-[31%] bg-gradient-to-b from-black/35 via-black/10 to-transparent" />
+
+      <div className="absolute inset-x-0 bottom-0 h-[51%] bg-gradient-to-t from-blue-800 via-blue-600/95 via-[58%] to-transparent" />
+
+      {!reduceMotion && (
+        <motion.div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 mix-blend-screen"
+          style={{
+            backgroundImage: glareBackground,
+          }}
+        />
+      )}
+
+      <motion.div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-[1px] rounded-[11px] ring-1 ring-inset ring-white/10"
+        animate={
+          reduceMotion
+            ? undefined
+            : {
+                boxShadow: [
+                  'inset 0 0 0 rgba(255,255,255,0)',
+                  'inset 0 0 24px rgba(255,255,255,0.05)',
+                  'inset 0 0 0 rgba(255,255,255,0)',
+                ],
+              }
+        }
+        transition={{
+          duration: 5.2,
+          repeat: Infinity,
+          ease: 'easeInOut',
+        }}
+      />
+
+      <div className="absolute left-3 top-3 flex items-center gap-2.5 text-white">
+        <Image
+          src={AIRQO_LOGO_URL}
+          alt="AirQo"
+          width={40}
+          height={26}
+          unoptimized
+          className="h-6 w-auto drop-shadow-lg"
+        />
+
+        <div className="border-l border-white/40 pl-2.5 leading-[1.1]">
+          <p className="text-[11px] font-semibold drop-shadow-sm">
+            Clean Air Forum
+          </p>
+
+          <p className="text-[10px] italic text-white/85">
+            {EVENT_LOCATION_AND_YEAR}
+          </p>
+        </div>
+      </div>
+
+      <div className="absolute inset-x-0 bottom-0 px-3 pb-2.5 text-white sm:px-3.5 sm:pb-3">
+        <motion.div
+          initial={false}
+          whileHover={
+            reduceMotion
+              ? undefined
+              : {
+                  x: 2,
+                }
+          }
+          transition={{
+            type: 'spring',
+            stiffness: 260,
+            damping: 25,
+          }}
+        >
+          <h2
+            className="truncate text-[16px] font-semibold leading-tight sm:text-[17px]"
+            title={displayName}
+          >
+            {displayName}
+          </h2>
+
+          <p
+            className="mt-0.5 truncate text-[7px] font-medium text-white/80 sm:text-[8px]"
+            title={location}
+          >
+            {location}
+          </p>
+        </motion.div>
+
+        <div className="mt-1.5 flex items-end gap-2">
+          <motion.span
+            className="text-[28px] font-bold leading-none tracking-[-0.03em] sm:text-[30px]"
+            whileHover={
+              reduceMotion
+                ? undefined
+                : {
+                    scale: 1.04,
+                    x: 1,
+                  }
+            }
+          >
+            {formatPm25(submission.pm25Value)}
+          </motion.span>
+
+          <div className="mb-0.5 flex min-w-0 items-center gap-1.5">
+            <span className="whitespace-nowrap text-[6px] font-semibold text-white/85 sm:text-[7px]">
+              PM2.5 µg/m³
+            </span>
+
+            <motion.span
+              whileHover={
+                reduceMotion
+                  ? undefined
+                  : {
+                      scale: 1.07,
+                    }
+              }
+              className={`max-w-[92px] truncate rounded px-1.5 py-0.5 text-[6px] font-semibold sm:text-[7px] ${category.className}`}
+              title={category.label}
+            >
+              {category.label}
+            </motion.span>
+          </div>
+        </div>
+
+        <div className="mt-2 flex items-center justify-between gap-2 border-t border-white/20 pt-2">
+          <span className="truncate rounded bg-white px-2 py-0.5 text-[6px] font-semibold text-blue-700 sm:text-[7px]">
+            Shared from the AirQo app
+          </span>
+
+          <span className="whitespace-nowrap text-[7px] font-semibold sm:text-[8px]">
+            {EVENT_DATES_BADGE}
+          </span>
+        </div>
+      </div>
+    </motion.article>
+  );
+}
+
+function EmptyState({ reduceMotion }: { reduceMotion: boolean | null }) {
+  return (
+    <motion.div
+      initial={
+        reduceMotion
+          ? false
+          : {
+              opacity: 0,
+              y: 26,
+              scale: 0.96,
+            }
+      }
+      animate={{
+        opacity: 1,
+        y: 0,
+        scale: 1,
+      }}
+      exit={{
+        opacity: 0,
+        y: -16,
+        scale: 0.97,
+      }}
+      transition={{
+        duration: reduceMotion ? 0 : 0.68,
+        ease: [0.22, 1, 0.36, 1],
+      }}
+      className="mx-auto flex min-h-[200px] w-[90vw] max-w-[520px] flex-col items-center justify-center rounded-2xl border border-white/20 bg-white/15 px-5 py-7 text-center shadow-[0_30px_80px_-45px_rgba(2,6,23,0.85)] backdrop-blur-xl sm:min-h-[240px] sm:w-full sm:px-8 sm:py-10"
+    >
+      <div className="relative mb-4 flex h-14 w-14 items-center justify-center sm:mb-5 sm:h-16 sm:w-16">
+        {!reduceMotion && (
+          <>
+            <motion.span
+              className="absolute inset-0 rounded-full border border-white/25"
+              animate={{
+                scale: [1, 1.65],
+                opacity: [0.55, 0],
+              }}
+              transition={{
+                duration: 2.6,
+                repeat: Infinity,
+                ease: 'easeOut',
+              }}
+            />
+
+            <motion.span
+              className="absolute inset-0 rounded-full border border-blue-200/30"
+              animate={{
+                scale: [1, 1.45],
+                opacity: [0.45, 0],
+              }}
+              transition={{
+                duration: 2.6,
+                delay: 0.9,
+                repeat: Infinity,
+                ease: 'easeOut',
+              }}
+            />
+          </>
+        )}
+
+        <motion.div
+          animate={
+            reduceMotion
+              ? undefined
+              : {
+                  y: [0, -4, 0],
+                  rotate: [0, -2, 2, 0],
+                }
+          }
+          transition={{
+            duration: 4,
+            repeat: Infinity,
+            ease: 'easeInOut',
+          }}
+          className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full border border-white/25 bg-white/20 shadow-lg backdrop-blur-md sm:h-14 sm:w-14"
+        >
+          <FiCamera className="h-6 w-6 text-white sm:h-7 sm:w-7" />
+        </motion.div>
+      </div>
+
+      <h2 className="text-lg font-bold text-white sm:text-xl">No faces yet</h2>
+
+      <p className="mt-2 max-w-sm text-xs leading-5 text-blue-50/80 sm:text-sm sm:leading-6">
+        Be the first to share an air quality selfie from the Africa Clean Air
+        Forum.
+      </p>
+    </motion.div>
+  );
+}
+
+function ErrorState({
+  onRetry,
+  reduceMotion,
+}: {
+  onRetry: () => void;
+  reduceMotion: boolean | null;
+}) {
+  return (
+    <motion.div
+      initial={
+        reduceMotion
+          ? false
+          : {
+              opacity: 0,
+              y: 22,
+              scale: 0.97,
+            }
+      }
+      animate={{
+        opacity: 1,
+        y: 0,
+        scale: 1,
+      }}
+      exit={{
+        opacity: 0,
+        y: -14,
+        scale: 0.98,
+      }}
+      role="alert"
+      transition={{
+        duration: reduceMotion ? 0 : 0.64,
+        ease: [0.22, 1, 0.36, 1],
+      }}
+      className="mx-auto flex min-h-[200px] w-[90vw] max-w-[520px] flex-col items-center justify-center rounded-2xl border border-white/20 bg-white/15 px-5 py-7 text-center shadow-[0_30px_80px_-45px_rgba(2,6,23,0.85)] backdrop-blur-xl sm:min-h-[240px] sm:w-full sm:px-8 sm:py-10"
+    >
+      <h2 className="text-lg font-bold text-white sm:text-xl">
+        We could not load the selfie wall
+      </h2>
+
+      <p className="mt-2 text-xs leading-5 text-blue-50/80 sm:text-sm sm:leading-6">
+        Please check the connection and try again.
+      </p>
+
+      <motion.button
+        type="button"
+        onClick={onRetry}
+        whileHover={
+          reduceMotion
+            ? undefined
+            : {
+                scale: 1.04,
+                y: -2,
+              }
+        }
+        whileTap={
+          reduceMotion
+            ? undefined
+            : {
+                scale: 0.96,
+              }
+        }
+        className="mt-5 rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-blue-950/20 transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-blue-600"
+      >
+        Try again
+      </motion.button>
+    </motion.div>
+  );
+}
+
+function DesktopPagination({
+  page,
+  totalPages,
+  isPaused,
+  reduceMotion,
+  onPageChange,
+}: {
+  page: number;
+  totalPages: number;
+  isPaused: boolean;
+  reduceMotion: boolean | null;
+  onPageChange: (page: number) => void;
+}) {
+  return (
+    <nav
+      className="mt-8 hidden items-center justify-center gap-3 sm:flex"
+      aria-label="Selfie carousel pages"
+    >
+      {Array.from({ length: totalPages }).map((_, index) => {
+        const isActive = index === page;
+
+        return (
+          <motion.button
+            layout
+            key={index}
+            type="button"
+            onClick={() => onPageChange(index)}
+            aria-label={`Show selfie page ${index + 1} of ${totalPages}`}
+            aria-current={isActive ? 'page' : undefined}
+            whileHover={
+              reduceMotion
+                ? undefined
+                : {
+                    scale: 1.1,
+                    y: -1,
+                  }
+            }
+            whileTap={
+              reduceMotion
+                ? undefined
+                : {
+                    scale: 0.92,
+                  }
+            }
+            transition={{
+              type: 'spring',
+              stiffness: 320,
+              damping: 30,
+            }}
+            className={`relative h-2.5 overflow-hidden rounded-full border border-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-transparent ${
+              isActive
+                ? 'w-11 bg-white/30'
+                : 'w-2.5 bg-white/30 hover:bg-white/50'
+            }`}
+          >
+            {isActive && (
+              <>
+                <motion.span
+                  layoutId="active-carousel-indicator"
+                  className="absolute inset-0 rounded-full bg-blue-300/20"
+                  transition={{
+                    type: 'spring',
+                    stiffness: 320,
+                    damping: 32,
+                  }}
+                />
+
+                {!reduceMotion && !isPaused && (
+                  <motion.span
+                    key={`desktop-progress-${page}`}
+                    initial={{
+                      scaleX: 0,
+                    }}
+                    animate={{
+                      scaleX: 1,
+                    }}
+                    transition={{
+                      duration: CAROUSEL_INTERVAL_MS / 1000,
+                      ease: 'linear',
+                    }}
+                    className="absolute inset-0 origin-left rounded-full bg-blue-600"
+                  />
+                )}
+
+                {(reduceMotion || isPaused) && (
+                  <span className="absolute inset-0 rounded-full bg-blue-600" />
+                )}
+              </>
+            )}
+          </motion.button>
+        );
+      })}
+    </nav>
+  );
+}
+
+function MobilePagination({
+  page,
+  totalPages,
+  reduceMotion,
+}: {
+  page: number;
+  totalPages: number;
+  reduceMotion: boolean | null;
+}) {
+  return (
+    <div
+      className="mt-3 flex items-center justify-center gap-3 sm:hidden"
+      aria-label={`Selfie ${page + 1} of ${totalPages}`}
+    >
+      <div className="h-1.5 w-24 overflow-hidden rounded-full bg-white/20">
+        <motion.div
+          key={`mobile-progress-${page}`}
+          initial={{
+            scaleX: 0,
+          }}
+          animate={{
+            scaleX: 1,
+          }}
+          transition={{
+            duration: reduceMotion ? 0 : CAROUSEL_INTERVAL_MS / 1000,
+            ease: 'linear',
+          }}
+          className="h-full origin-left rounded-full bg-white"
+        />
+      </div>
+
+      <span className="min-w-[38px] text-center text-[11px] font-semibold tabular-nums text-white/85">
+        {page + 1}/{totalPages}
+      </span>
+    </div>
+  );
+}
+
+const headerContainerVariants: Variants = {
+  hidden: {},
+  visible: {
+    transition: {
+      delayChildren: 0.1,
+      staggerChildren: 0.16,
+    },
+  },
+};
+
+const headerItemVariants: Variants = {
+  hidden: {
+    opacity: 0,
+    y: -20,
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.78,
+      ease: [0.22, 1, 0.36, 1],
+    },
+  },
+};
+
+export default function FacesOfCleanAirPage() {
+  const shouldReduceMotion = useReducedMotion();
+  const isMobile = useMediaQuery(MOBILE_MEDIA_QUERY);
+
+  const [submissions, setSubmissions] = useState<CleanAirSubmission[]>([]);
+  const [fetchState, setFetchState] = useState<FetchState>('idle');
+  const [page, setPage] = useState(0);
+  const [direction, setDirection] = useState(1);
+  const [isPaused, setIsPaused] = useState(false);
+
+  const hasLoadedRef = useRef(false);
+
+  const fetchSubmissions = useCallback(async () => {
+    if (!hasLoadedRef.current) {
+      setFetchState('loading');
+    }
+
+    try {
+      const data = await facesOfCleanAirService.getSubmissions(
+        CLEAN_AIR_FORUM_CURRENT_EVENT_ID,
+      );
+
+      setSubmissions(Array.isArray(data) ? data : []);
+      setFetchState('success');
+      hasLoadedRef.current = true;
+    } catch (error) {
+      console.error('Failed to load clean air faces:', error);
+
+      if (!hasLoadedRef.current) {
+        setFetchState('error');
+      }
+    }
+  }, []);
+
+  usePollingWithVisibility(
+    fetchSubmissions,
+    CLEAN_AIR_FORUM_WALL_ACTIVE_POLL_INTERVAL_MS,
+  );
+
+  const totalSlides = useMemo(() => {
+    if (isMobile) {
+      return Math.max(1, submissions.length);
+    }
+
+    return Math.max(1, Math.ceil(submissions.length / DESKTOP_CARDS_PER_PAGE));
+  }, [isMobile, submissions.length]);
+
+  const visibleItems = useMemo(() => {
+    if (isMobile) {
+      return submissions.slice(page, page + 1);
+    }
+
+    const startIndex = page * DESKTOP_CARDS_PER_PAGE;
+
+    return submissions.slice(startIndex, startIndex + DESKTOP_CARDS_PER_PAGE);
+  }, [isMobile, page, submissions]);
+
+  /*
+   * Mobile indexes individual cards while desktop indexes groups of six.
+   * Reset when crossing the breakpoint so an old index is never reused
+   * against a different pagination model.
+   */
+  useEffect(() => {
+    setPage(0);
+    setDirection(1);
+    setIsPaused(false);
+  }, [isMobile]);
+
+  useEffect(() => {
+    setPage((currentPage) => Math.min(currentPage, totalSlides - 1));
+  }, [totalSlides]);
+
+  const goToPage = useCallback(
+    (nextPage: number) => {
+      if (nextPage === page || nextPage < 0 || nextPage >= totalSlides) {
+        return;
+      }
+
+      setDirection(nextPage > page ? 1 : -1);
+      setPage(nextPage);
+    },
+    [page, totalSlides],
+  );
+
+  const goToRelativePage = useCallback(
+    (offset: number) => {
+      if (totalSlides <= 1) {
+        return;
+      }
+
+      const nextPage = (page + offset + totalSlides) % totalSlides;
+
+      setDirection(offset > 0 ? 1 : -1);
+      setPage(nextPage);
+    },
+    [page, totalSlides],
+  );
+
+  useEffect(() => {
+    if (
+      fetchState !== 'success' ||
+      totalSlides <= 1 ||
+      isPaused ||
+      shouldReduceMotion
+    ) {
+      return;
+    }
+
+    const carouselTimer = window.setTimeout(() => {
+      goToRelativePage(1);
+    }, CAROUSEL_INTERVAL_MS);
+
+    return () => {
+      window.clearTimeout(carouselTimer);
+    };
+  }, [
+    fetchState,
+    goToRelativePage,
+    isPaused,
+    page,
+    shouldReduceMotion,
+    totalSlides,
+  ]);
+
+  const handleCarouselKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLElement>) => {
+      if (totalSlides <= 1) {
+        return;
+      }
+
+      if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        goToRelativePage(1);
+      }
+
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        goToRelativePage(-1);
+      }
+    },
+    [goToRelativePage, totalSlides],
+  );
+
+  const handleDragEnd = useCallback(
+    (
+      _event: MouseEvent | TouchEvent | globalThis.PointerEvent,
+      info: PanInfo,
+    ) => {
+      if (totalSlides <= 1) {
+        return;
+      }
+
+      const movedLeft =
+        info.offset.x < -SWIPE_DISTANCE_THRESHOLD ||
+        info.velocity.x < -SWIPE_VELOCITY_THRESHOLD;
+
+      const movedRight =
+        info.offset.x > SWIPE_DISTANCE_THRESHOLD ||
+        info.velocity.x > SWIPE_VELOCITY_THRESHOLD;
+
+      if (movedLeft) {
+        goToRelativePage(1);
+      } else if (movedRight) {
+        goToRelativePage(-1);
+      }
+    },
+    [goToRelativePage, totalSlides],
+  );
+
+  const pageVariants: Variants = {
+    enter: (slideDirection: number) => ({
+      x: shouldReduceMotion
+        ? 0
+        : slideDirection > 0
+          ? isMobile
+            ? 78
+            : 120
+          : isMobile
+            ? -78
+            : -120,
+      rotateY: shouldReduceMotion
+        ? 0
+        : isMobile
+          ? slideDirection > 0
+            ? 9
+            : -9
+          : 0,
+      opacity: 0,
+      scale: isMobile ? 0.92 : 0.96,
+    }),
+
+    center: {
+      x: 0,
+      rotateY: 0,
+      opacity: 1,
+      scale: 1,
+      transition: {
+        duration: shouldReduceMotion ? 0 : isMobile ? 0.82 : 0.74,
+        ease: [0.22, 1, 0.36, 1],
+        staggerChildren: shouldReduceMotion ? 0 : isMobile ? 0 : 0.08,
+        delayChildren: shouldReduceMotion ? 0 : isMobile ? 0 : 0.07,
+      },
+    },
+
+    exit: (slideDirection: number) => ({
+      x: shouldReduceMotion
+        ? 0
+        : slideDirection > 0
+          ? isMobile
+            ? -72
+            : -100
+          : isMobile
+            ? 72
+            : 100,
+      rotateY: shouldReduceMotion
+        ? 0
+        : isMobile
+          ? slideDirection > 0
+            ? -8
+            : 8
+          : 0,
+      opacity: 0,
+      scale: isMobile ? 0.94 : 0.972,
+      transition: {
+        duration: shouldReduceMotion ? 0 : isMobile ? 0.56 : 0.46,
+        ease: [0.4, 0, 1, 1],
+        staggerChildren: shouldReduceMotion ? 0 : isMobile ? 0 : 0.035,
+        staggerDirection: -1,
+      },
+    }),
+  };
+
+  const isInitialLoading = fetchState === 'idle' || fetchState === 'loading';
+
+  const showError = fetchState === 'error' && submissions.length === 0;
+
+  const showEmpty = fetchState === 'success' && submissions.length === 0;
+
+  const skeletonCount = isMobile ? 1 : DESKTOP_CARDS_PER_PAGE;
+
+  return (
+    <div
+      className="relative h-[100svh] overflow-hidden sm:h-auto sm:min-h-[100svh]"
+      style={{
+        background:
+          'linear-gradient(180deg, #02143B 0%, #145FFF 50%, #FFFFFF 100%)',
+      }}
+    >
+      <AmbientBackground reduceMotion={shouldReduceMotion} />
+
+      <div className="relative mx-auto flex h-full w-full max-w-[1400px] flex-col px-4 pb-3 pt-4 sm:min-h-[100svh] sm:px-8 sm:pb-12 sm:pt-8 lg:px-12">
+        <motion.header
+          variants={headerContainerVariants}
+          initial={shouldReduceMotion ? false : 'hidden'}
+          animate="visible"
+          className="mx-auto grid w-full max-w-[1200px] flex-none grid-cols-[52px_minmax(0,1fr)] items-center gap-3 sm:grid-cols-[76px_minmax(0,1fr)_190px] sm:gap-6"
+        >
+          <motion.div
+            variants={headerItemVariants}
+            className="flex justify-start"
+          >
+            <Link href="/home" aria-label="Go to the AirQo homepage">
+              <Image
+                src={AIRQO_LOGO_URL}
+                alt="AirQo"
+                width={78}
+                height={51}
+                priority
+                unoptimized
+                className="h-auto w-[50px] drop-shadow-[0_10px_24px_rgba(0,0,0,0.18)] sm:w-[72px]"
+              />
+            </Link>
+          </motion.div>
+
+          <div className="min-w-0">
+            <motion.h1
+              variants={headerItemVariants}
+              className="whitespace-nowrap text-left leading-none text-white"
+            >
+              <span
+                className="text-[25px] font-normal tracking-[-0.05em] sm:text-[42px]"
+                style={{
+                  fontFamily:
+                    '"Brush Script MT", "Segoe Script", "URW Chancery L", cursive',
+                }}
+              >
+                Faces of
+              </span>{' '}
+              <span className="text-[23px] font-extrabold tracking-[-0.045em] sm:text-[40px]">
+                Air Quality
+              </span>
+            </motion.h1>
+
+            <motion.div
+              variants={headerItemVariants}
+              className="mt-1 text-[9px] leading-tight text-white/85 sm:hidden"
+            >
+              <span className="font-bold">{EVENT_LABEL}</span>
+              <span aria-hidden="true">•</span>
+              <span className="italic">{EVENT_LOCATION_AND_YEAR}</span>
+            </motion.div>
+          </div>
+
+          <motion.div
+            variants={headerItemVariants}
+            className="hidden text-left text-white sm:block"
+          >
+            <p className="text-[13px] font-bold leading-tight">{EVENT_LABEL}</p>
+
+            <p className="mt-0.5 text-[13px] italic text-white/85">
+              {EVENT_LOCATION_AND_YEAR}
+            </p>
+          </motion.div>
+        </motion.header>
+
+        <main className="mx-auto flex min-h-0 w-full max-w-[1200px] flex-1 items-center justify-center pt-2 sm:min-h-[60svh] sm:flex-none sm:pt-10">
+          <section
+            tabIndex={0}
+            aria-label="Faces of Air Quality selfie carousel"
+            aria-roledescription="carousel"
+            className="flex h-full w-full min-h-0 flex-col justify-center rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-4 focus-visible:ring-offset-transparent sm:block sm:h-auto"
+            onKeyDown={handleCarouselKeyDown}
+            onMouseEnter={() => {
+              if (!isMobile) {
+                setIsPaused(true);
+              }
+            }}
+            onMouseLeave={() => {
+              if (!isMobile) {
+                setIsPaused(false);
+              }
+            }}
+            onFocusCapture={() => {
+              if (!isMobile) {
+                setIsPaused(true);
+              }
+            }}
+            onBlurCapture={() => {
+              if (!isMobile) {
+                setIsPaused(false);
+              }
+            }}
+          >
+            <AnimatePresence mode="wait" initial={false}>
+              {isInitialLoading && (
+                <motion.div
+                  key="loading"
+                  initial={{
+                    opacity: 0,
+                  }}
+                  animate={{
+                    opacity: 1,
+                  }}
+                  exit={{
+                    opacity: 0,
+                    scale: 0.985,
+                  }}
+                  transition={{
+                    duration: shouldReduceMotion ? 0 : 0.64,
+                  }}
+                  className={
+                    isMobile
+                      ? 'flex h-full min-h-0 items-center justify-center'
+                      : 'grid grid-cols-1 justify-items-center gap-4 sm:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-8'
+                  }
+                >
+                  {Array.from({
+                    length: skeletonCount,
+                  }).map((_, index) => (
+                    <div
+                      key={index}
+                      className={
+                        isMobile
+                          ? 'w-full'
+                          : 'w-full max-w-[320px] lg:max-w-[360px] xl:max-w-[400px]'
+                      }
+                      style={
+                        isMobile
+                          ? {
+                              width: 'min(86vw, calc(100svh - 205px), 360px)',
+                            }
+                          : undefined
+                      }
+                    >
+                      <SkeletonCard
+                        index={index}
+                        reduceMotion={shouldReduceMotion}
+                      />
+                    </div>
+                  ))}
+                </motion.div>
+              )}
+
+              {showError && (
+                <ErrorState
+                  key="error"
+                  reduceMotion={shouldReduceMotion}
+                  onRetry={() => void fetchSubmissions()}
+                />
+              )}
+
+              {showEmpty && (
+                <EmptyState key="empty" reduceMotion={shouldReduceMotion} />
+              )}
+
+              {!isInitialLoading && !showError && !showEmpty && (
+                <motion.div
+                  key="content"
+                  initial={
+                    shouldReduceMotion
+                      ? false
+                      : {
+                          opacity: 0,
+                          y: 18,
+                        }
+                  }
+                  animate={{
+                    opacity: 1,
+                    y: 0,
+                  }}
+                  exit={{
+                    opacity: 0,
+                    y: -12,
+                  }}
+                  transition={{
+                    duration: shouldReduceMotion ? 0 : 0.68,
+                    ease: [0.22, 1, 0.36, 1],
+                  }}
+                  className={
+                    isMobile
+                      ? 'flex h-full min-h-0 flex-col items-center justify-center'
+                      : undefined
+                  }
+                >
+                  <div
+                    className={
+                      isMobile
+                        ? 'flex min-h-0 w-full flex-1 items-center justify-center'
+                        : undefined
+                    }
+                  >
+                    <AnimatePresence
+                      initial={false}
+                      mode="wait"
+                      custom={direction}
+                    >
+                      <motion.div
+                        key={`${isMobile ? 'mobile' : 'desktop'}-${page}`}
+                        custom={direction}
+                        variants={pageVariants}
+                        initial="enter"
+                        animate="center"
+                        exit="exit"
+                        aria-live="polite"
+                        drag={
+                          totalSlides > 1 && !shouldReduceMotion ? 'x' : false
+                        }
+                        dragConstraints={{
+                          left: 0,
+                          right: 0,
+                        }}
+                        dragElastic={isMobile ? 0.2 : 0.14}
+                        dragMomentum={false}
+                        onDragEnd={handleDragEnd}
+                        style={{
+                          transformPerspective: 1200,
+                        }}
+                        className={
+                          isMobile
+                            ? 'flex touch-pan-y cursor-grab items-center justify-center active:cursor-grabbing'
+                            : 'grid touch-pan-y cursor-grab grid-cols-1 justify-items-center gap-4 active:cursor-grabbing sm:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-8'
+                        }
+                      >
+                        {visibleItems.map((submission, index) => (
+                          <div
+                            key={
+                              submission.id ??
+                              `${submission.imageUrl}-${page}-${index}`
+                            }
+                            className={
+                              isMobile
+                                ? 'w-full'
+                                : 'w-full max-w-[320px] lg:max-w-[360px] xl:max-w-[400px]'
+                            }
+                            style={
+                              isMobile
+                                ? {
+                                    width:
+                                      'min(86vw, calc(100svh - 205px), 360px)',
+                                  }
+                                : undefined
+                            }
+                          >
+                            <FaceCard
+                              submission={submission}
+                              priority={
+                                isMobile ? page === 0 : page === 0 && index < 3
+                              }
+                              reduceMotion={shouldReduceMotion}
+                            />
+                          </div>
+                        ))}
+                      </motion.div>
+                    </AnimatePresence>
+                  </div>
+
+                  {totalSlides > 1 && (
+                    <>
+                      <MobilePagination
+                        page={page}
+                        totalPages={totalSlides}
+                        reduceMotion={shouldReduceMotion}
+                      />
+
+                      <DesktopPagination
+                        page={page}
+                        totalPages={totalSlides}
+                        isPaused={isPaused}
+                        reduceMotion={shouldReduceMotion}
+                        onPageChange={goToPage}
+                      />
+                    </>
+                  )}
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </section>
+        </main>
+
+        {/* Keeps mobile spacing balanced without making the page scroll. */}
+        <div className="h-2 flex-none sm:hidden" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/website/src/features/home/HomePage.tsx b/src/website/src/features/home/HomePage.tsx
index bcb840d9cc..056b5da59b 100644
--- a/src/website/src/features/home/HomePage.tsx
+++ b/src/website/src/features/home/HomePage.tsx
@@ -32,7 +32,7 @@ const HomePage = () => {
       <AnalyticsContentSection
         title="An interactive air quality platform"
         subtitle="AirQo Nexus"
-        description="Access and visualise real-time and historical air quality information across Africa through our easy-to-use AirQo Nexus dashboard."
+        description="Access and visualise real-time and historical air quality information across Africa through our easy-to-use AirQo Nexus."
         buttonText="Learn more"
         buttonLink="/products/analytics"
         imageUrl="https://res.cloudinary.com/dbibjvyhm/image/upload/v1728175853/website/photos/analyticsHome_l3hgcy.png"
diff --git a/src/website/src/features/packages/PackagesPage.tsx b/src/website/src/features/packages/PackagesPage.tsx
index e0249b121d..6b4fec3468 100644
--- a/src/website/src/features/packages/PackagesPage.tsx
+++ b/src/website/src/features/packages/PackagesPage.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { motion } from 'framer-motion';
 import Link from 'next/link';
 import React, { useState } from 'react';
 import toast, { Toaster } from 'react-hot-toast';
@@ -9,6 +10,19 @@ import StatCard from '@/components/packages/StatCard';
 import { CustomButton } from '@/components/ui';
 import { getAllPackages } from '@/config/packages.config';
 
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1, duration: 0.5, ease: 'easeOut' },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: 'easeOut' } },
+};
+
 export default function PackagesPage() {
   const packages = getAllPackages();
   const [activeFramework, setActiveFramework] = useState<string>(
@@ -84,36 +98,57 @@ export default function PackagesPage() {
         </section>
 
         {/* Stats Overview */}
-        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <motion.div
+          className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, amount: 0.2 }}
+          variants={containerVariants}
+        >
           <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-            <StatCard
-              icon={<FiBox className="w-5 h-5" />}
-              label="Total Libraries"
-              value={totalPackages}
-              description={
-                totalPackages === 1
-                  ? 'More coming soon'
-                  : 'Production-ready packages'
-              }
-            />
-            <StatCard
-              icon={<FiDownload className="w-5 h-5" />}
-              label="Total Downloads"
-              value={activePackage.totalDownloads}
-              description="For this package"
-            />
-            <StatCard
-              icon={<FiCheckCircle className="w-5 h-5" />}
-              label="Framework Support"
-              value={`${allFrameworks.size}+`}
-              description={Array.from(allFrameworks).join(', ')}
-            />
+            <motion.div variants={itemVariants}>
+              <StatCard
+                icon={<FiBox className="w-5 h-5" />}
+                label="Total Libraries"
+                value={totalPackages}
+                description={
+                  totalPackages === 1
+                    ? 'More coming soon'
+                    : 'Production-ready packages'
+                }
+              />
+            </motion.div>
+            <motion.div variants={itemVariants}>
+              <StatCard
+                icon={<FiDownload className="w-5 h-5" />}
+                label="Total Downloads"
+                value={activePackage.totalDownloads}
+                description="For this package"
+              />
+            </motion.div>
+            <motion.div variants={itemVariants}>
+              <StatCard
+                icon={<FiCheckCircle className="w-5 h-5" />}
+                label="Framework Support"
+                value={`${allFrameworks.size}+`}
+                description={Array.from(allFrameworks).join(', ')}
+              />
+            </motion.div>
           </div>
-        </div>
+        </motion.div>
 
         {/* Main Package Showcase */}
-        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pb-12">
-          <div className="bg-white border border-[#e4e4e7] rounded-lg overflow-hidden">
+        <motion.div
+          className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pb-12"
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, amount: 0.2 }}
+          variants={containerVariants}
+        >
+          <motion.div
+            variants={itemVariants}
+            className="bg-white border border-[#e4e4e7] rounded-lg overflow-hidden"
+          >
             <div className="grid lg:grid-cols-2 gap-0">
               {/* Left: Info */}
               <div className="p-6 lg:p-8">
@@ -241,12 +276,21 @@ export default function PackagesPage() {
                 </div>
               </div>
             </div>
-          </div>
-        </div>
+          </motion.div>
+        </motion.div>
 
         {/* More Coming Soon */}
-        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
-          <div className="bg-[#fafafa] border border-[#e4e4e7] rounded-lg p-8 text-center">
+        <motion.div
+          className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pb-16"
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, amount: 0.2 }}
+          variants={containerVariants}
+        >
+          <motion.div
+            variants={itemVariants}
+            className="bg-[#fafafa] border border-[#e4e4e7] rounded-lg p-8 text-center"
+          >
             <h2 className="text-[20px] font-semibold tracking-[-0.02em] text-[#18181b] mb-2">
               More Packages Coming Soon
             </h2>
@@ -263,8 +307,8 @@ export default function PackagesPage() {
                 Follow on GitHub
               </CustomButton>
             </a>
-          </div>
-        </div>
+          </motion.div>
+        </motion.div>
       </div>
     </>
   );
diff --git a/src/website/src/features/products/AnalyticsPage.tsx b/src/website/src/features/products/AnalyticsPage.tsx
index 690ee4d956..feab219608 100644
--- a/src/website/src/features/products/AnalyticsPage.tsx
+++ b/src/website/src/features/products/AnalyticsPage.tsx
@@ -3,7 +3,7 @@
 import { motion } from 'framer-motion';
 import Image from 'next/image';
 import React from 'react';
-import { BiDownload } from 'react-icons/bi';
+import { BiLinkExternal } from 'react-icons/bi';
 
 import { CustomButton } from '@/components/ui';
 import mainConfig from '@/config/site.config';
@@ -144,13 +144,14 @@ const AnalyticsPage = () => {
             <CustomButton
               onClick={() =>
                 window.open(
-                  'https://res.cloudinary.com/dbibjvyhm/image/upload/v1716038899/website/docs/AirQoAnalyticsPlatformUserGuide_ssyebk.pdf?#view=FitH',
+                  'https://platform.airqo.net/docs/nexus/intro/',
+                  '_blank',
                 )
               }
               className="flex items-center justify-center bg-transparent text-gray-700 border-2 border-black px-4 py-3 bg-none w-full font-semibold hover:bg-gray-100 transition-colors"
             >
-              User Guide
-              <BiDownload className="ml-2 text-xl" />
+              Documentation
+              <BiLinkExternal className="ml-2 text-xl" />
             </CustomButton>
           </motion.div>
 
diff --git a/src/website/src/hooks/usePollingWithVisibility.ts b/src/website/src/hooks/usePollingWithVisibility.ts
new file mode 100644
index 0000000000..bde1c437e5
--- /dev/null
+++ b/src/website/src/hooks/usePollingWithVisibility.ts
@@ -0,0 +1,90 @@
+'use client';
+
+import { useCallback, useEffect, useRef } from 'react';
+
+const MAX_BACKOFF_MS = 5 * 60 * 1000; // 5 minutes max backoff
+const BACKOFF_MULTIPLIER = 1.5;
+
+/**
+ * Polls `callback` at `activeIntervalMs` when the page is visible,
+ * and pauses entirely when the tab is hidden (Page Visibility API).
+ *
+ * Implements exponential backoff on errors and guards against overlapping
+ * async invocations to avoid stale data overwriting fresh results.
+ * Returns a `refresh` function that triggers an immediate fetch.
+ */
+export function usePollingWithVisibility(
+  callback: () => void | Promise<void>,
+  activeIntervalMs: number,
+): { refresh: () => void } {
+  const callbackRef = useRef(callback);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const inFlightRef = useRef(false);
+  const backoffRef = useRef(1);
+  const errorCountRef = useRef(0);
+
+  // Keep the callback ref fresh without re-triggering the effect.
+  callbackRef.current = callback;
+
+  const stop = useCallback(() => {
+    if (intervalRef.current !== null) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+
+  const invoke = useCallback(async () => {
+    if (inFlightRef.current) return;
+    inFlightRef.current = true;
+    try {
+      await callbackRef.current();
+    } finally {
+      inFlightRef.current = false;
+    }
+  }, []);
+
+  const start = useCallback(() => {
+    stop();
+    const currentInterval = Math.min(
+      activeIntervalMs * Math.pow(BACKOFF_MULTIPLIER, errorCountRef.current),
+      MAX_BACKOFF_MS,
+    );
+    intervalRef.current = setInterval(() => {
+      void invoke();
+    }, currentInterval);
+  }, [activeIntervalMs, stop, invoke]);
+
+  const refresh = useCallback(() => {
+    errorCountRef.current = 0;
+    backoffRef.current = 1;
+    void invoke();
+  }, [invoke]);
+
+  // Kick off an initial fetch + start polling.
+  useEffect(() => {
+    void invoke();
+    start();
+
+    return stop;
+  }, [invoke, start, stop]);
+
+  // React to visibility changes.
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        errorCountRef.current = 0;
+        start();
+      } else {
+        stop();
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [start, stop]);
+
+  return { refresh };
+}
diff --git a/src/website/src/lib/utils/airQuality.ts b/src/website/src/lib/utils/airQuality.ts
index a2bfabea8d..652b156de4 100644
--- a/src/website/src/lib/utils/airQuality.ts
+++ b/src/website/src/lib/utils/airQuality.ts
@@ -56,7 +56,7 @@ export const AIR_QUALITY_COLORS: Record<AirQualityLevel, string> = {
   unhealthy: '#F7453C',
   'very-unhealthy': '#AC5CD9',
   hazardous: '#D95BA3',
-  'no-value': '#6B7280',
+  'no-value': '#475569',
 } as const;
 
 export const AIR_QUALITY_INFO = {
diff --git a/src/website/src/services/api/api-routes.ts b/src/website/src/services/api/api-routes.ts
index 6963fe291e..261ece796c 100644
--- a/src/website/src/services/api/api-routes.ts
+++ b/src/website/src/services/api/api-routes.ts
@@ -50,6 +50,7 @@ export const API_ROUTES = {
   USERS: {
     NEWSLETTER_SUBSCRIBE: '/api/v2/users/newsletter/subscribe',
     CONTACT_US: '/api/v2/users/inquiries/register',
+    SELFIES: 'users/selfies',
   },
   PREDICT: {
     DAILY_FORECAST: 'predict/daily-forecast',
diff --git a/src/website/src/services/external/faces-of-clean-air.service.ts b/src/website/src/services/external/faces-of-clean-air.service.ts
new file mode 100644
index 0000000000..3583ee76b9
--- /dev/null
+++ b/src/website/src/services/external/faces-of-clean-air.service.ts
@@ -0,0 +1,39 @@
+import { API_ROUTES, BaseApiService, ServiceOptions } from '@/services/api';
+
+export interface CleanAirSubmission {
+  id: string;
+  eventId: string;
+  imageUrl: string;
+  locationName: string | null;
+  pm25Value: number | null;
+  aqiCategory: string | null;
+  displayName: string | null;
+  avatarEmoji: string | null;
+  createdAt: string;
+}
+
+class FacesOfCleanAirService extends BaseApiService {
+  constructor() {
+    super('FacesOfCleanAirService');
+  }
+
+  async getSubmissions(
+    eventId: string,
+    options: ServiceOptions = {},
+  ): Promise<CleanAirSubmission[]> {
+    const response = await this.get<{ selfies: CleanAirSubmission[] }>(
+      API_ROUTES.USERS.SELFIES,
+      { eventId },
+      { ...options, throwOnError: false },
+    );
+
+    if (response.success && response.data) {
+      return response.data.selfies ?? [];
+    }
+
+    return [];
+  }
+}
+
+export const facesOfCleanAirService = new FacesOfCleanAirService();
+export default facesOfCleanAirService;
diff --git a/src/website/src/services/external/index.ts b/src/website/src/services/external/index.ts
index 989324f5a8..ba7bc4d6b8 100644
--- a/src/website/src/services/external/index.ts
+++ b/src/website/src/services/external/index.ts
@@ -1,3 +1,4 @@
 export { externalService } from './analytics.service';
 export { default as cloudinaryService } from './cloudinary.service';
+export { default as facesOfCleanAirService } from './faces-of-clean-air.service';
 export { default as mapsService } from './maps.service';