diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 39c905341..391152009 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -41,14 +41,17 @@ jobs:
         ./clever-tools-latest_linux/clever link $CLEVER_APP_ID
         ./clever-tools-latest_linux/clever deploy -f
 
-    - name: Deploy frontend to Clever Cloud (PROD)
+    # The frontend used to be a Next.js Node.js app on Clever; it's now a
+    # Vite-built SPA served by Clever's static (Caddy) engine. The deploy
+    # command is identical (git push), only the target app changes —
+    # `FE_CLEVER_APP_ID_PROD` must be pointed at the new static app and
+    # `FE_CLEVER_APP_ALIAS_PROD` set to that app's alias (no underscores;
+    # see https://github.com/CleverCloud/clever-tools for the alias-escape
+    # workaround required by `clever deploy -a <alias>`).
+    - name: Deploy frontend (static SPA) to Clever Cloud (PROD)
       env:
         CLEVER_APP_ID: ${{ secrets.FE_CLEVER_APP_ID_PROD }}
-        APP_NAME: cc_dashboard_prod
+        CLEVER_APP_ALIAS: ${{ secrets.FE_CLEVER_APP_ALIAS_PROD }}
       run: |
-        echo $CLEVER_APP_ID
-        echo $APP_NAME
         ./clever-tools-latest_linux/clever link $CLEVER_APP_ID
-        # As the clever tools CLI aliasing is escaping _ character, a temporary hard-coded value is needed
-        # waiting for a fix from Clever
-        ./clever-tools-latest_linux/clever deploy -f -a ccdashboardprod --quiet
+        ./clever-tools-latest_linux/clever deploy -f -a $CLEVER_APP_ALIAS --quiet
diff --git a/webapp/.env.development b/webapp/.env.development
new file mode 100644
index 000000000..6c316dc40
--- /dev/null
+++ b/webapp/.env.development
@@ -0,0 +1,15 @@
+# Local dev defaults. Loaded automatically by Vite on `npm run dev`.
+# Override per-developer with `.env.development.local` (gitignored).
+
+# Empty VITE_API_URL → the mock fetch interceptor catches every
+# same-origin /api request and serves from src/api/mock/data.ts.
+# Set this to a real API base (e.g. http://localhost:8008) and unset
+# VITE_USE_MOCK_DATA to talk to a local carbonserver instead.
+VITE_API_URL=
+VITE_BASE_URL=http://localhost:3000
+
+VITE_USE_MOCK_DATA=true
+
+# Used by share-project-button to produce shareable public links.
+# Any 32-byte (256-bit) hex string works for dev.
+VITE_PROJECT_ENCRYPTION_KEY=0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef
diff --git a/webapp/.env.example b/webapp/.env.example
new file mode 100644
index 000000000..a58959bd0
--- /dev/null
+++ b/webapp/.env.example
@@ -0,0 +1,24 @@
+# Example webapp env. Copy to `.env.development.local` (gitignored) to
+# override local dev defaults from `.env.development`, or to
+# `.env.production.local` for production builds.
+
+# Base URL of the carbonserver API. Leave empty in mock mode.
+VITE_API_URL=http://localhost:8008
+
+# Public origin of this webapp. Used to build OAuth redirect URLs and
+# share links.
+VITE_BASE_URL=http://localhost:3000
+
+# Toggle the in-browser mock service (src/api/mock/). When "true", every
+# same-origin fetch is resolved from synthetic data and no carbonserver
+# is required.
+VITE_USE_MOCK_DATA=false
+
+# AES key used to encrypt project ids in shareable public links. Must be
+# 64 hex chars (256 bits). Keep stable across the fleet — rotating it
+# invalidates existing links.
+VITE_PROJECT_ENCRYPTION_KEY=
+
+# Fief profile base URL — surfaces a "Profile" item in the navbar that
+# links to the IdP's account page. Leave empty to hide it.
+VITE_FIEF_BASE_URL=
diff --git a/webapp/e2e/landing.spec.ts b/webapp/e2e/landing.spec.ts
index 273db3b2a..6947dee84 100644
--- a/webapp/e2e/landing.spec.ts
+++ b/webapp/e2e/landing.spec.ts
@@ -11,7 +11,7 @@ test.describe("Landing page (mock mode)", () => {
         ).toBeVisible();
 
         // In mock mode the real-login button is hidden — there is no real
-        // OAuth backend in this build.
+        // OAuth backend in this build. Only the mock button is rendered.
         await expect(page.getByTestId("real-login")).toHaveCount(0);
         await expect(page.getByTestId("mock-login")).toBeVisible();
     });
diff --git a/webapp/src/api/experiments.ts b/webapp/src/api/experiments.ts
index f00cb8e14..206d45696 100644
--- a/webapp/src/api/experiments.ts
+++ b/webapp/src/api/experiments.ts
@@ -19,17 +19,10 @@ export async function createExperiment(
 
 export async function getExperiments(projectId: string): Promise<Experiment[]> {
     try {
-        const result = await fetchApi(
+        return await fetchApi(
             `/projects/${projectId}/experiments`,
             ExperimentSchema.array(),
         );
-        // Drop experiments that somehow lack a usable id — they cannot be
-        // selected, fetched, or rendered downstream. Keeping them would
-        // surface as unselectable rows whose click silently clears the
-        // selection.
-        return result.filter(
-            (e) => typeof e.id === "string" && e.id.length > 0,
-        );
     } catch (error) {
         console.error("[getExperiments] failed", error);
         return [];
@@ -54,12 +47,7 @@ export async function getProjectEmissionsByExperiment(
     }
 
     try {
-        const result = await fetchApi(url, ExperimentReportSchema.array());
-        return result.filter(
-            (r) =>
-                typeof r.experiment_id === "string" &&
-                r.experiment_id.length > 0,
-        );
+        return await fetchApi(url, ExperimentReportSchema.array());
     } catch (error) {
         console.error("[getProjectEmissionsByExperiment] failed", error);
         return [];
diff --git a/webapp/src/api/mock/handlers.ts b/webapp/src/api/mock/handlers.ts
index 64b059016..f2d49b18f 100644
--- a/webapp/src/api/mock/handlers.ts
+++ b/webapp/src/api/mock/handlers.ts
@@ -101,16 +101,6 @@ const handlers: Handler[] = [
             }
             if (method === "DELETE") return noContent();
         }
-        const publicMatch = pathname.match(/^\/projects\/public\/([^/]+)$/);
-        if (method === "GET" && publicMatch) {
-            // Treat the encrypted_id as the project id for mock purposes.
-            const project = MOCK.project.byId[publicMatch[1]];
-            return project ? ok(project) : notFound();
-        }
-        const shareLink = pathname.match(/^\/projects\/([^/]+)\/share-link$/);
-        if (method === "GET" && shareLink) {
-            return ok({ encrypted_id: shareLink[1] });
-        }
         return undefined;
     },
 
diff --git a/webapp/src/api/mock/index.ts b/webapp/src/api/mock/index.ts
index c04f6f09e..94bfbd9cb 100644
--- a/webapp/src/api/mock/index.ts
+++ b/webapp/src/api/mock/index.ts
@@ -14,7 +14,7 @@ export function installMockFetch(): void {
 
     const apiBase = (import.meta.env.VITE_API_URL ?? "").replace(/\/$/, "");
     const apiPathPrefix = apiBase
-        ? new URL(apiBase).pathname.replace(/\/$/, "")
+        ? (safeUrl(apiBase)?.pathname.replace(/\/$/, "") ?? "")
         : "";
     const realFetch = window.fetch.bind(window);
 
@@ -29,16 +29,26 @@ export function installMockFetch(): void {
                   ? input.toString()
                   : input.url;
 
-        const isApiCall = apiBase ? rawUrl.startsWith(apiBase) : false;
+        // With an explicit VITE_API_URL we only intercept requests aimed at
+        // it. With no VITE_API_URL (the default dev/mock setup), every
+        // same-origin fetch is treated as an API call — Vite's static
+        // assets are loaded via <script>/<link>/<img>, not fetch(), so
+        // this interception is safe.
+        const absoluteUrl = new URL(rawUrl, window.location.origin);
+        const isApiCall = apiBase
+            ? rawUrl.startsWith(apiBase)
+            : absoluteUrl.origin === window.location.origin;
 
         if (!isApiCall) return realFetch(input, init);
 
-        const url = new URL(rawUrl);
         const relPath =
-            apiPathPrefix && url.pathname.startsWith(apiPathPrefix)
-                ? url.pathname.slice(apiPathPrefix.length) || "/"
-                : url.pathname;
-        const relUrl = new URL(relPath + url.search, "http://mock.local");
+            apiPathPrefix && absoluteUrl.pathname.startsWith(apiPathPrefix)
+                ? absoluteUrl.pathname.slice(apiPathPrefix.length) || "/"
+                : absoluteUrl.pathname;
+        const relUrl = new URL(
+            relPath + absoluteUrl.search,
+            "http://mock.local",
+        );
         const method = (init?.method ?? "GET").toUpperCase();
         const parsedBody = parseBody(init?.body);
         const result = resolveMock(relUrl, method, parsedBody);
@@ -61,6 +71,14 @@ export function installMockFetch(): void {
     );
 }
 
+function safeUrl(value: string): URL | null {
+    try {
+        return new URL(value);
+    } catch {
+        return null;
+    }
+}
+
 function parseBody(body: BodyInit | null | undefined): unknown {
     if (typeof body !== "string") return undefined;
     try {
diff --git a/webapp/src/api/runs.ts b/webapp/src/api/runs.ts
index 8e592dc73..2f44eddcb 100644
--- a/webapp/src/api/runs.ts
+++ b/webapp/src/api/runs.ts
@@ -2,12 +2,10 @@ import { z } from "zod";
 import { fetchApi } from "./client";
 import {
     Emission,
-    EmissionSchema,
     EmissionsTimeSeries,
     RunMetadata,
     RunMetadataSchema,
     RunReport,
-    RunReportSchema,
 } from "./schemas";
 
 export async function getRunMetadata(
@@ -85,39 +83,12 @@ export async function getEmissionsTimeSeries(
             ),
         ]);
 
-        const metadata: RunMetadata = {
-            timestamp: runMetadataData.timestamp,
-            experiment_id: runMetadataData.experiment_id,
-            os: runMetadataData.os,
-            python_version: runMetadataData.python_version,
-            codecarbon_version: runMetadataData.codecarbon_version,
-            cpu_count: runMetadataData.cpu_count,
-            cpu_model: runMetadataData.cpu_model,
-            gpu_count: runMetadataData.gpu_count,
-            gpu_model: runMetadataData.gpu_model,
-            longitude: runMetadataData.longitude,
-            latitude: runMetadataData.latitude,
-            region: runMetadataData.region,
-            provider: runMetadataData.provider,
-            ram_total_size: runMetadataData.ram_total_size,
-            tracking_mode: runMetadataData.tracking_mode,
-        };
-
         const emissions: Emission[] = emissionsData.items.map((item) => ({
+            ...item,
             emission_id: item.run_id,
-            timestamp: item.timestamp,
-            emissions_sum: item.emissions_sum,
-            emissions_rate: item.emissions_rate,
-            cpu_power: item.cpu_power,
-            gpu_power: item.gpu_power,
-            ram_power: item.ram_power,
-            cpu_energy: item.cpu_energy,
-            gpu_energy: item.gpu_energy,
-            ram_energy: item.ram_energy,
-            energy_consumed: item.energy_consumed,
         }));
 
-        return { runId, emissions, metadata };
+        return { runId, emissions, metadata: runMetadataData };
     } catch (error) {
         console.error("[getEmissionsTimeSeries] failed", error);
         return { runId, emissions: [], metadata: null };
diff --git a/webapp/src/api/schemas.ts b/webapp/src/api/schemas.ts
index 23073a0dc..a0c3886d9 100644
--- a/webapp/src/api/schemas.ts
+++ b/webapp/src/api/schemas.ts
@@ -57,21 +57,22 @@ export const ProjectTokenSchema = z.object({
 });
 export type IProjectToken = z.infer<typeof ProjectTokenSchema>;
 
-// `id` is required when reading from the API (the backend never returns
-// experiments without one). It is allowed to be absent only on the
-// create path — see `ExperimentInputSchema` below.
+// Backend's `Optional[...]` fields are serialized as JSON `null` (Pydantic
+// default, no `exclude_none`). Zod's `.optional()` accepts `undefined`
+// only — `.nullish()` accepts `null | undefined`, which is what we need
+// for every column the backend marks as nullable.
 export const ExperimentSchema = z.object({
     id: z.string().min(1),
-    timestamp: z.string().optional(),
+    timestamp: z.string().nullish(),
     name: z.string(),
     description: z.string(),
-    on_cloud: z.boolean().optional(),
+    on_cloud: z.boolean().nullish(),
     project_id: z.string(),
-    country_name: z.string().optional(),
-    country_iso_code: z.string().optional(),
-    region: z.string().optional(),
-    cloud_provider: z.string().optional(),
-    cloud_region: z.string().optional(),
+    country_name: z.string().nullish(),
+    country_iso_code: z.string().nullish(),
+    region: z.string().nullish(),
+    cloud_provider: z.string().nullish(),
+    cloud_region: z.string().nullish(),
 });
 export type Experiment = z.infer<typeof ExperimentSchema>;
 
@@ -86,7 +87,7 @@ export const ExperimentReportSchema = z.object({
     emissions: z.number(),
     energy_consumed: z.number(),
     duration: z.number(),
-    description: z.string().optional(),
+    description: z.string().nullish(),
 });
 export type ExperimentReport = z.infer<typeof ExperimentReportSchema>;
 
@@ -117,19 +118,19 @@ export type Emission = z.infer<typeof EmissionSchema>;
 export const RunMetadataSchema = z.object({
     timestamp: z.string(),
     experiment_id: z.string(),
-    os: z.string(),
-    python_version: z.string(),
-    codecarbon_version: z.string(),
-    cpu_count: z.number(),
-    cpu_model: z.string(),
-    gpu_count: z.number(),
-    gpu_model: z.string(),
-    longitude: z.number(),
-    latitude: z.number(),
-    region: z.string(),
-    provider: z.string(),
-    ram_total_size: z.number(),
-    tracking_mode: z.string(),
+    os: z.string().nullish(),
+    python_version: z.string().nullish(),
+    codecarbon_version: z.string().nullish(),
+    cpu_count: z.number().nullish(),
+    cpu_model: z.string().nullish(),
+    gpu_count: z.number().nullish(),
+    gpu_model: z.string().nullish(),
+    longitude: z.number().nullish(),
+    latitude: z.number().nullish(),
+    region: z.string().nullish(),
+    provider: z.string().nullish(),
+    ram_total_size: z.number().nullish(),
+    tracking_mode: z.string().nullish(),
 });
 export type RunMetadata = z.infer<typeof RunMetadataSchema>;
 
diff --git a/webapp/src/components/createOrganizationModal.tsx b/webapp/src/components/createOrganizationModal.tsx
index 2482d5661..8d402e97e 100644
--- a/webapp/src/components/createOrganizationModal.tsx
+++ b/webapp/src/components/createOrganizationModal.tsx
@@ -102,6 +102,11 @@ const CreateOrganizationModal: React.FC<ModalProps> = ({
                             placeholder="Organization Name"
                         />
                     </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="org-description">
+                            Organization Description
+                        </Label>
+                    </div>
                     <div className="space-y-2">
                         <Label htmlFor="org-description">
                             Organization Description
diff --git a/webapp/src/components/createProjectModal.tsx b/webapp/src/components/createProjectModal.tsx
index 3cf3549d7..7597cf87b 100644
--- a/webapp/src/components/createProjectModal.tsx
+++ b/webapp/src/components/createProjectModal.tsx
@@ -98,6 +98,11 @@ const CreateProjectModal: React.FC<ModalProps> = ({
                             placeholder="Project Name"
                         />
                     </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="project-description">
+                            Project Description
+                        </Label>
+                    </div>
                     <div className="space-y-2">
                         <Label htmlFor="project-description">
                             Project Description
diff --git a/webapp/src/components/navbar.tsx b/webapp/src/components/navbar.tsx
index cedb167c9..6ed3f6534 100644
--- a/webapp/src/components/navbar.tsx
+++ b/webapp/src/components/navbar.tsx
@@ -36,7 +36,13 @@ export default function NavBar({
     const [selected, setSelected] = useState<string | null>(null);
     const navigate = useNavigate();
     const [isCollapsed, setIsCollapsed] = useState(false);
-    const [selectedOrg, setSelectedOrg] = useState<string | null>(null);
+    const [selectedOrg, setSelectedOrg] = useState<string | null>(() => {
+        try {
+            return localStorage.getItem("organizationId");
+        } catch {
+            return null;
+        }
+    });
     const iconStyles = "h-4 w-4 flex-shrink-0 text-muted-foreground";
     const { pathname } = useLocation();
     const newOrgModal = useModal();
@@ -156,6 +162,7 @@ export default function NavBar({
                             <NavItem
                                 isSelected={selected === "projects"}
                                 onClick={() => {
+                                    if (!selectedOrg) return;
                                     setSelected("projects");
                                     setSheetOpened?.(false);
                                     navigate(`/${selectedOrg}/projects`);
@@ -168,6 +175,7 @@ export default function NavBar({
                             <NavItem
                                 isSelected={selected === "members"}
                                 onClick={() => {
+                                    if (!selectedOrg) return;
                                     setSelected("members");
                                     setSheetOpened?.(false);
                                     navigate(`/${selectedOrg}/members`);
diff --git a/webapp/src/components/project-dashboard-base.tsx b/webapp/src/components/project-dashboard-base.tsx
index f51ce717e..01c6f33a8 100644
--- a/webapp/src/components/project-dashboard-base.tsx
+++ b/webapp/src/components/project-dashboard-base.tsx
@@ -14,8 +14,20 @@ import ChartSkeleton from "./chart-skeleton";
 import CreateExperimentModal from "./createExperimentModal";
 import { Button } from "./ui/button";
 import { Card, CardContent } from "./ui/card";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "./ui/select";
 import { Skeleton } from "./ui/skeleton";
-import { Table, TableBody, TableHeader } from "./ui/table";
+import { Copy } from "lucide-react";
+import { toast } from "sonner";
+
+// Sentinel value for the "show data from every experiment" option in the
+// experiment dropdown. Radix Select forbids an empty string as an item value.
+const ALL_EXPERIMENTS = "__all__";
 
 const RadialChart = lazy(() => import("@/components/radial-chart"));
 const ExperimentsBarChart = lazy(
@@ -81,6 +93,23 @@ export default function ProjectDashboardBase({
         (experiment) => experiment.experiment_id === selectedExperimentId,
     )?.name;
 
+    const selectedExperiment = projectExperiments.find(
+        (e) => e.id === selectedExperimentId,
+    );
+
+    const handleSelectExperiment = (value: string) => {
+        onExperimentClick(value === ALL_EXPERIMENTS ? "" : value);
+    };
+
+    const handleCopyExperimentId = async (id: string) => {
+        try {
+            await navigator.clipboard.writeText(id);
+            toast.success("Experiment id copied");
+        } catch {
+            toast.error("Failed to copy");
+        }
+    };
+
     return (
         <div className="flex flex-col gap-4">
             <div className="flex flex-col md:flex-row justify-between md:items-center gap-4">
@@ -266,46 +295,68 @@ export default function ProjectDashboardBase({
                     )}
                 </div>
                 {projectExperiments.length !== 0 && (
-                    <Card className="flex flex-col md:flex-row justify-between md:items-center gap-4 py-4 px-4 w-full max-w-3/4">
-                        <Table>
-                            <TableHeader>
-                                <tr>
-                                    <th className="text-left">Experiment</th>
-                                    <th className="text-left">Description</th>
-                                    {!isPublicView && (
-                                        <th className="text-left">
+                    <div className="flex flex-col gap-3 w-full md:w-2/3">
+                        <Select
+                            value={selectedExperimentId || ALL_EXPERIMENTS}
+                            onValueChange={handleSelectExperiment}
+                        >
+                            <SelectTrigger
+                                data-testid="experiment-select"
+                                aria-label="Select an experiment"
+                            >
+                                <SelectValue placeholder="Select an experiment" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value={ALL_EXPERIMENTS}>
+                                    All experiments
+                                </SelectItem>
+                                {projectExperiments.map((experiment) => (
+                                    <SelectItem
+                                        key={experiment.id}
+                                        value={experiment.id}
+                                        data-testid={`experiment-option-${experiment.id}`}
+                                    >
+                                        {experiment.name}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                        {selectedExperiment && (
+                            <Card
+                                className="p-4 flex flex-col gap-2"
+                                data-testid="experiment-details"
+                            >
+                                {selectedExperiment.description && (
+                                    <p className="text-sm text-muted-foreground">
+                                        {selectedExperiment.description}
+                                    </p>
+                                )}
+                                {!isPublicView && (
+                                    <div className="flex items-center gap-2">
+                                        <span className="text-xs font-medium text-muted-foreground">
                                             Experiment id
-                                        </th>
-                                    )}
-                                </tr>
-                            </TableHeader>
-                            <TableBody>
-                                {projectExperiments
-                                    .filter((e) => !!e.id)
-                                    .map((experiment) => (
-                                        <tr
-                                            key={experiment.id}
-                                            data-testid={`experiment-row-${experiment.id}`}
-                                            className={`cursor-pointer hover:bg-muted/50 ${
-                                                experiment.id ===
-                                                selectedExperimentId
-                                                    ? "bg-primary/10"
-                                                    : ""
-                                            }`}
+                                        </span>
+                                        <code className="text-xs bg-muted px-2 py-1 rounded font-mono break-all">
+                                            {selectedExperiment.id}
+                                        </code>
+                                        <Button
+                                            variant="ghost"
+                                            size="icon"
+                                            className="h-7 w-7"
+                                            aria-label="Copy experiment id"
                                             onClick={() =>
-                                                onExperimentClick(experiment.id)
+                                                handleCopyExperimentId(
+                                                    selectedExperiment.id,
+                                                )
                                             }
                                         >
-                                            <td>{experiment.name}</td>
-                                            <td>{experiment.description}</td>
-                                            {!isPublicView && (
-                                                <td>{experiment.id}</td>
-                                            )}
-                                        </tr>
-                                    ))}
-                            </TableBody>
-                        </Table>
-                    </Card>
+                                            <Copy className="h-4 w-4" />
+                                        </Button>
+                                    </div>
+                                )}
+                            </Card>
+                        )}
+                    </div>
                 )}
             </Card>
             <div className="grid gap-8 md:grid-cols-2">
diff --git a/webapp/src/components/runs-scatter-chart.tsx b/webapp/src/components/runs-scatter-chart.tsx
index 564fa8d3e..67a988b32 100644
--- a/webapp/src/components/runs-scatter-chart.tsx
+++ b/webapp/src/components/runs-scatter-chart.tsx
@@ -50,21 +50,24 @@ export default function RunsScatterChart({
     );
     const [isExporting, setIsExporting] = useState(false);
     useEffect(() => {
-        const fetchData = async () => {
+        let cancelled = false;
+        (async () => {
             const data = await getRunEmissionsByExperiment(
                 params.experimentId,
                 params.startDate,
                 params.endDate,
             );
-            // Sort the data by timestamp
+            if (cancelled) return;
             const sortedData = data.sort(
                 (a, b) =>
                     new Date(a.timestamp).getTime() -
                     new Date(b.timestamp).getTime(),
             );
             setExperimentsReportData(sortedData);
+        })();
+        return () => {
+            cancelled = true;
         };
-        fetchData();
     }, [params.experimentId, params.startDate, params.endDate]);
 
     // Add this custom tooltip function
diff --git a/webapp/src/components/share-project-button.tsx b/webapp/src/components/share-project-button.tsx
index 1a7d822e6..40ee6e67d 100644
--- a/webapp/src/components/share-project-button.tsx
+++ b/webapp/src/components/share-project-button.tsx
@@ -1,4 +1,3 @@
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -6,10 +5,9 @@ import {
     PopoverContent,
     PopoverTrigger,
 } from "@/components/ui/popover";
-import { fetchApi } from "@/api/client";
-import { z } from "zod";
+import { encryptProjectId } from "@/utils/crypto";
 import copy from "copy-to-clipboard";
-import { CheckIcon, CopyIcon, LockIcon, Share2Icon } from "lucide-react";
+import { CheckIcon, CopyIcon, Share2Icon } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 
@@ -36,26 +34,26 @@ export default function ShareProjectButton({
     }, []);
 
     useEffect(() => {
-        const fetchEncryptedId = async () => {
-            if (isPublic && projectId && isOpen && !encryptedId) {
-                try {
-                    setIsLoading(true);
-                    const result = await fetchApi(
-                        `/projects/${projectId}/share-link`,
-                        z.object({ encrypted_id: z.string() }),
-                    );
-                    const encrypted = result.encrypted_id;
-                    setEncryptedId(encrypted);
-                } catch (error) {
-                    console.error("Failed to encrypt project ID:", error);
+        let cancelled = false;
+        const computeEncryptedId = async () => {
+            if (!(isPublic && projectId && isOpen && !encryptedId)) return;
+            try {
+                setIsLoading(true);
+                const encrypted = await encryptProjectId(projectId);
+                if (!cancelled) setEncryptedId(encrypted);
+            } catch (error) {
+                console.error("Failed to encrypt project ID:", error);
+                if (!cancelled) {
                     toast.error("Failed to generate secure sharing link");
-                } finally {
-                    setIsLoading(false);
                 }
+            } finally {
+                if (!cancelled) setIsLoading(false);
             }
         };
-
-        fetchEncryptedId();
+        computeEncryptedId();
+        return () => {
+            cancelled = true;
+        };
     }, [projectId, isPublic, isOpen, encryptedId]);
 
     const publicUrl = encryptedId
diff --git a/webapp/src/pages/OrgDashboardPage.tsx b/webapp/src/pages/OrgDashboardPage.tsx
index 78cc9bd36..d111317a2 100644
--- a/webapp/src/pages/OrgDashboardPage.tsx
+++ b/webapp/src/pages/OrgDashboardPage.tsx
@@ -155,6 +155,9 @@ export default function OrgDashboardPage() {
                             <p className="text-sm font-medium">
                                 Of watching TV
                             </p>
+                            <p className="text-sm font-medium">
+                                Of watching TV
+                            </p>
                         </div>
                     </div>
                     <div className="grid grid-cols-3 gap-4">
diff --git a/webapp/src/pages/ProjectDashboardPage.tsx b/webapp/src/pages/ProjectDashboardPage.tsx
index 31328e45f..620475db7 100644
--- a/webapp/src/pages/ProjectDashboardPage.tsx
+++ b/webapp/src/pages/ProjectDashboardPage.tsx
@@ -1,10 +1,11 @@
 import BreadcrumbHeader from "@/components/breadcrumb";
 import ProjectDashboard from "@/components/project-dashboard";
 import {
-    getEquivalentCarKm,
-    getEquivalentCitizenPercentage,
-    getEquivalentTvTime,
-} from "@/helpers/constants";
+    calculateConvertedValues,
+    calculateRadialChartData,
+    getDefaultConvertedValues,
+    getDefaultRadialChartData,
+} from "@/helpers/dashboard-calculations";
 import { getDefaultDateRange } from "@/helpers/date-utils";
 import {
     getExperiments,
@@ -12,7 +13,7 @@ import {
 } from "@/api/experiments";
 import { getOneProject } from "@/api/projects";
 import { Experiment, ExperimentReport, Project } from "@/api/schemas";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { DateRange } from "react-day-picker";
 
@@ -21,112 +22,67 @@ export default function ProjectDashboardPage() {
         projectId: string;
         organizationId: string;
     }>();
-    const [isLoading, setIsLoading] = useState(true);
 
     const [project, setProject] = useState({
         name: "",
         description: "",
     } as Project);
-
-    const default_date = getDefaultDateRange();
-    const [date, setDate] = useState<DateRange>(default_date);
-
-    const [radialChartData, setRadialChartData] = useState({
-        energy: { label: "kWh", value: 0 },
-        emissions: { label: "kg eq CO2", value: 0 },
-        duration: { label: "days", value: 0 },
-    });
     const [projectExperiments, setProjectExperiments] = useState<Experiment[]>(
         [],
     );
     const [experimentsReportData, setExperimentsReportData] = useState<
         ExperimentReport[]
     >([]);
+    const [isLoading, setIsLoading] = useState(true);
 
-    const [runData, setRunData] = useState({
-        experimentId: "",
-        startDate: default_date.from.toISOString(),
-        endDate: default_date.to.toISOString(),
-    });
-
-    const [convertedValues, setConvertedValues] = useState({
-        citizen: "0",
-        transportation: "0",
-        tvTime: "0",
-    });
-
+    const [date, setDate] = useState<DateRange>(() => getDefaultDateRange());
     const [selectedExperimentId, setSelectedExperimentId] =
         useState<string>("");
     const [selectedRunId, setSelectedRunId] = useState<string>("");
 
-    const refreshExperimentList = useCallback(async () => {
-        const experiments: Experiment[] = await getExperiments(projectId!);
+    const radialChartData = useMemo(
+        () =>
+            experimentsReportData.length > 0
+                ? calculateRadialChartData(experimentsReportData)
+                : getDefaultRadialChartData(),
+        [experimentsReportData],
+    );
+    const convertedValues = useMemo(
+        () =>
+            experimentsReportData.length > 0
+                ? calculateConvertedValues(radialChartData)
+                : getDefaultConvertedValues(),
+        [experimentsReportData.length, radialChartData],
+    );
+    const runData = useMemo(
+        () => ({
+            experimentId: selectedExperimentId,
+            startDate: date.from?.toISOString() ?? "",
+            endDate: date.to?.toISOString() ?? "",
+        }),
+        [date, selectedExperimentId],
+    );
+
+    const loadProjectAndExperiments = useCallback(async () => {
+        if (!projectId) return;
+        const [p, experiments] = await Promise.all([
+            getOneProject(projectId),
+            getExperiments(projectId),
+        ]);
+        if (p) setProject(p);
         setProjectExperiments(experiments);
     }, [projectId]);
 
-    const fetchEmissionsReport = useCallback(
+    const loadReport = useCallback(
         async (dateRange: DateRange) => {
+            if (!projectId) return;
             setIsLoading(true);
             try {
                 const report = await getProjectEmissionsByExperiment(
-                    projectId!,
+                    projectId,
                     dateRange,
                 );
-
-                const newRadialChartData = {
-                    energy: {
-                        label: "kWh",
-                        value: parseFloat(
-                            report
-                                .reduce(
-                                    (n, { energy_consumed }) =>
-                                        n + energy_consumed,
-                                    0,
-                                )
-                                .toFixed(2),
-                        ),
-                    },
-                    emissions: {
-                        label: "kg eq CO2",
-                        value: parseFloat(
-                            report
-                                .reduce((n, { emissions }) => n + emissions, 0)
-                                .toFixed(2),
-                        ),
-                    },
-                    duration: {
-                        label: "days",
-                        value: parseFloat(
-                            report
-                                .reduce(
-                                    (n, { duration }) => n + duration / 86400,
-                                    0,
-                                )
-                                .toFixed(2),
-                        ),
-                    },
-                };
-                setRadialChartData(newRadialChartData);
                 setExperimentsReportData(report);
-                setRunData({
-                    experimentId: report[0]?.experiment_id ?? "",
-                    startDate: dateRange?.from?.toISOString() ?? "",
-                    endDate: dateRange?.to?.toISOString() ?? "",
-                });
-                setSelectedExperimentId(report[0]?.experiment_id ?? "");
-                setConvertedValues({
-                    citizen: getEquivalentCitizenPercentage(
-                        newRadialChartData.emissions.value,
-                    ).toFixed(2),
-                    transportation: getEquivalentCarKm(
-                        newRadialChartData.emissions.value,
-                    ).toFixed(2),
-                    tvTime: getEquivalentTvTime(
-                        newRadialChartData.energy.value,
-                    ).toFixed(2),
-                });
-            } catch (error) {
-                console.error("Error fetching project data:", error);
             } finally {
                 setIsLoading(false);
             }
@@ -134,55 +90,30 @@ export default function ProjectDashboardPage() {
         [projectId],
     );
 
-    const handleSettingsClick = async () => {
-        try {
-            const updatedProject = await getOneProject(projectId!);
-            if (updatedProject) {
-                setProject(updatedProject);
-            }
-        } catch (error) {
-            console.error("Error refreshing project data:", error);
-        }
-    };
-
-    const handleRefresh = useCallback(async () => {
-        const projectPromise = getOneProject(projectId!).then((p) => {
-            if (p) setProject(p);
-        });
-        const experimentsPromise = refreshExperimentList();
-        const reportPromise = fetchEmissionsReport(date);
-        await Promise.all([projectPromise, experimentsPromise, reportPromise]);
-    }, [projectId, date, refreshExperimentList, fetchEmissionsReport]);
+    useEffect(() => {
+        loadProjectAndExperiments();
+    }, [loadProjectAndExperiments]);
 
     useEffect(() => {
-        const fetchProjectDetails = async () => {
-            try {
-                const p = await getOneProject(projectId!);
-                if (!p) return;
-                setProject(p);
-            } catch (error) {
-                console.error("Error fetching project description:", error);
-            }
-        };
+        loadReport(date);
+    }, [loadReport, date]);
 
-        fetchProjectDetails();
-        refreshExperimentList();
-    }, [projectId, refreshExperimentList]);
+    const handleRefresh = useCallback(() => {
+        loadProjectAndExperiments();
+        loadReport(date);
+    }, [loadProjectAndExperiments, loadReport, date]);
 
-    useEffect(() => {
-        if (projectId) {
-            fetchEmissionsReport(date);
-        }
-    }, [projectId, date, fetchEmissionsReport]);
+    const handleSettingsClick = async () => {
+        if (!projectId) return;
+        const updatedProject = await getOneProject(projectId);
+        if (updatedProject) setProject(updatedProject);
+    };
 
     const handleExperimentClick = useCallback(
         (experimentId: string) => {
-            if (experimentId === selectedExperimentId) {
-                setSelectedExperimentId("");
-                setSelectedRunId("");
-                return;
-            }
-            setSelectedExperimentId(experimentId);
+            setSelectedExperimentId(
+                experimentId === selectedExperimentId ? "" : experimentId,
+            );
             setSelectedRunId("");
         },
         [selectedExperimentId],
@@ -190,11 +121,7 @@ export default function ProjectDashboardPage() {
 
     const handleRunClick = useCallback(
         (runId: string) => {
-            if (runId === selectedRunId) {
-                setSelectedRunId("");
-                return;
-            }
-            setSelectedRunId(runId);
+            setSelectedRunId(runId === selectedRunId ? "" : runId);
         },
         [selectedRunId],
     );
diff --git a/webapp/src/pages/PublicProjectPage.tsx b/webapp/src/pages/PublicProjectPage.tsx
index 93cbca39a..af9c6062b 100644
--- a/webapp/src/pages/PublicProjectPage.tsx
+++ b/webapp/src/pages/PublicProjectPage.tsx
@@ -19,6 +19,7 @@ import Loader from "@/components/loader";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { AlertCircle } from "lucide-react";
 import { getDefaultDateRange } from "@/helpers/date-utils";
+import { decryptProjectId } from "@/utils/crypto";
 
 export default function PublicProjectPage() {
     const { projectId: encryptedId } = useParams<{ projectId: string }>();
@@ -71,28 +72,55 @@ export default function PublicProjectPage() {
         }
     }, [projectId]);
 
-    // Decrypt the project ID via the backend
+    // Decrypt the project ID client-side. The encrypted token is computed
+    // with the same key in `ShareProjectButton`, so decryption is purely
+    // local — no backend round-trip required.
     useEffect(() => {
         const decrypt = async () => {
+            if (!encryptedId) return;
             try {
-                setIsLoading(true);
-                const result = await fetchApi(
-                    `/projects/public/${encryptedId}`,
-                    ProjectSchema,
-                );
-                setProjectId(result.id);
-                setProject(result);
-            } catch {
+                const decryptedId = await decryptProjectId(encryptedId);
+                setProjectId(decryptedId);
+            } catch (err) {
+                console.error("Failed to decrypt project ID:", err);
                 setError(
                     "Invalid project link or the project no longer exists.",
                 );
-            } finally {
                 setIsLoading(false);
             }
         };
         decrypt();
     }, [encryptedId]);
 
+    // Once we have the real project id, fetch the project. The backend
+    // already serves public projects through the regular endpoint without
+    // authentication.
+    useEffect(() => {
+        const fetchProjectData = async () => {
+            if (!projectId || project) return;
+            try {
+                setIsLoading(true);
+                const projectData = await fetchApi(
+                    `/projects/${projectId}`,
+                    ProjectSchema,
+                );
+                if (!projectData.public) {
+                    setError(
+                        "This project is not available for public viewing.",
+                    );
+                    return;
+                }
+                setProject(projectData);
+            } catch (err) {
+                console.error("Error fetching project:", err);
+                setError("Failed to load project data.");
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        fetchProjectData();
+    }, [projectId, project]);
+
     useEffect(() => {
         if (projectId && project) {
             refreshExperimentList();
diff --git a/webapp/src/utils/crypto.ts b/webapp/src/utils/crypto.ts
new file mode 100644
index 000000000..066867831
--- /dev/null
+++ b/webapp/src/utils/crypto.ts
@@ -0,0 +1,152 @@
+// Client-side encryption for public project sharing links.
+//
+// Port of the original Node `crypto` implementation (see git history on
+// master, pre-React-migration) to the browser's Web Crypto API. The
+// algorithm is:
+//
+//   1. Derive a deterministic 16-byte IV per project id:
+//        IV = HMAC-SHA256(secret, projectId).slice(0, 16)
+//      This guarantees the same project id always encrypts to the same
+//      string — useful for caching and clean URLs.
+//   2. Pad the secret to exactly 32 ASCII bytes:
+//        aesKey = utf8(secret.substring(0, 32).padEnd(32, "0"))
+//   3. AES-256-CBC encrypt the projectId.
+//   4. Output: base64url(IV ‖ ciphertext)
+//
+// `VITE_PROJECT_ENCRYPTION_KEY` is exposed to the browser via the bundle.
+// This is *obfuscation*, not real security: anyone with the bundle can
+// recover real project ids from encrypted links. That trade-off is
+// inherent to a client-only architecture — the threat model is "make ids
+// non-guessable in URLs", not "hide ids from a determined attacker".
+
+const TEXT_ENCODER = new TextEncoder();
+const TEXT_DECODER = new TextDecoder();
+
+function getSecret(): string {
+    const secret = import.meta.env.VITE_PROJECT_ENCRYPTION_KEY;
+    if (!secret || typeof secret !== "string") {
+        throw new Error(
+            "VITE_PROJECT_ENCRYPTION_KEY is not set. " +
+                "Add it to webapp/.env (see .env.example) to enable share links.",
+        );
+    }
+    return secret;
+}
+
+function getSubtle(): SubtleCrypto {
+    const subtle =
+        typeof globalThis.crypto !== "undefined"
+            ? globalThis.crypto.subtle
+            : undefined;
+    if (!subtle) {
+        throw new Error(
+            "Web Crypto (crypto.subtle) is unavailable in this environment.",
+        );
+    }
+    return subtle;
+}
+
+// Returns a freshly-allocated Uint8Array backed by a non-shared
+// ArrayBuffer. Required by `SubtleCrypto.encrypt`'s `iv` field under
+// TS 5.7+ where ArrayBufferView is generic over its buffer type.
+function copyBytes(view: Uint8Array): Uint8Array<ArrayBuffer> {
+    const buffer = new ArrayBuffer(view.byteLength);
+    const out = new Uint8Array(buffer);
+    out.set(view);
+    return out;
+}
+
+async function deriveIv(
+    projectId: string,
+    secret: string,
+): Promise<Uint8Array<ArrayBuffer>> {
+    const subtle = getSubtle();
+    const key = await subtle.importKey(
+        "raw",
+        TEXT_ENCODER.encode(secret),
+        { name: "HMAC", hash: "SHA-256" },
+        false,
+        ["sign"],
+    );
+    const signature = await subtle.sign(
+        "HMAC",
+        key,
+        TEXT_ENCODER.encode(projectId),
+    );
+    return copyBytes(new Uint8Array(signature).subarray(0, 16));
+}
+
+async function deriveAesKey(secret: string): Promise<CryptoKey> {
+    const subtle = getSubtle();
+    const padded = secret.substring(0, 32).padEnd(32, "0");
+    const rawKey = TEXT_ENCODER.encode(padded).slice(0, 32);
+    return subtle.importKey("raw", rawKey, { name: "AES-CBC" }, false, [
+        "encrypt",
+        "decrypt",
+    ]);
+}
+
+function toBase64Url(bytes: Uint8Array): string {
+    let bin = "";
+    for (const b of bytes) bin += String.fromCharCode(b);
+    return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+
+function fromBase64Url(value: string): Uint8Array {
+    const padded = value
+        .replace(/-/g, "+")
+        .replace(/_/g, "/")
+        .padEnd(value.length + ((4 - (value.length % 4)) % 4), "=");
+    const bin = atob(padded);
+    const out = new Uint8Array(bin.length);
+    for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+    return out;
+}
+
+/**
+ * Encrypt a project id into a URL-safe sharing token.
+ * Deterministic: the same project id always produces the same output.
+ */
+export async function encryptProjectId(projectId: string): Promise<string> {
+    const secret = getSecret();
+    const subtle = getSubtle();
+
+    const iv = await deriveIv(projectId, secret);
+    const key = await deriveAesKey(secret);
+
+    const ciphertext = await subtle.encrypt(
+        { name: "AES-CBC", iv },
+        key,
+        TEXT_ENCODER.encode(projectId),
+    );
+    const ciphertextBytes = new Uint8Array(ciphertext);
+
+    const combined = new Uint8Array(iv.byteLength + ciphertextBytes.byteLength);
+    combined.set(iv, 0);
+    combined.set(ciphertextBytes, iv.byteLength);
+    return toBase64Url(combined);
+}
+
+/**
+ * Decrypt a sharing token back into the original project id.
+ * Throws if the token is malformed or the secret is wrong.
+ */
+export async function decryptProjectId(encrypted: string): Promise<string> {
+    const secret = getSecret();
+    const subtle = getSubtle();
+
+    const combined = fromBase64Url(encrypted);
+    if (combined.byteLength <= 16) {
+        throw new Error("Invalid sharing token");
+    }
+    const iv = copyBytes(combined.subarray(0, 16));
+    const ciphertext = copyBytes(combined.subarray(16));
+
+    const key = await deriveAesKey(secret);
+    const plaintext = await subtle.decrypt(
+        { name: "AES-CBC", iv },
+        key,
+        ciphertext,
+    );
+    return TEXT_DECODER.decode(plaintext);
+}
diff --git a/webapp/src/vite-env.d.ts b/webapp/src/vite-env.d.ts
index c6b0c9b0d..ffbafe041 100644
--- a/webapp/src/vite-env.d.ts
+++ b/webapp/src/vite-env.d.ts
@@ -4,6 +4,7 @@ interface ImportMetaEnv {
     readonly VITE_API_URL: string;
     readonly VITE_BASE_URL: string;
     readonly VITE_USE_MOCK_DATA?: string;
+    readonly VITE_PROJECT_ENCRYPTION_KEY?: string;
 }
 
 interface ImportMeta {
diff --git a/webapp/tests/api/mock/handlers.test.ts b/webapp/tests/api/mock/handlers.test.ts
index c82ed6d41..b0dd2c4ca 100644
--- a/webapp/tests/api/mock/handlers.test.ts
+++ b/webapp/tests/api/mock/handlers.test.ts
@@ -76,17 +76,6 @@ describe("resolveMock — projects", () => {
         expect((r.body as { id: string }).id).toBe(ID.projects.training);
     });
 
-    it("returns a share-link encrypted_id", () => {
-        const r = resolveMock(
-            url(`/projects/${ID.projects.inference}/share-link`),
-            "GET",
-        );
-        expect(r.status).toBe(200);
-        expect((r.body as { encrypted_id: string }).encrypted_id).toBe(
-            ID.projects.inference,
-        );
-    });
-
     it("204s on project deletion", () => {
         const r = resolveMock(
             url(`/projects/${ID.projects.training}`),
diff --git a/webapp/tests/api/schemas.test.ts b/webapp/tests/api/schemas.test.ts
index 1a08b9a32..926bf6c10 100644
--- a/webapp/tests/api/schemas.test.ts
+++ b/webapp/tests/api/schemas.test.ts
@@ -64,4 +64,25 @@ describe("ExperimentSchema", () => {
         });
         expect(r.success).toBe(true);
     });
+
+    // Pydantic serializes `Optional[str] = None` as JSON `null` (no
+    // `exclude_none`), so the wire shape commonly carries `null` on
+    // cloud/region/timestamp columns. Zod's plain `.optional()` rejects
+    // null — `.nullish()` is what matches the actual backend.
+    it("accepts null on backend-Optional fields", () => {
+        const r = ExperimentSchema.safeParse({
+            id: "e1",
+            name: "exp",
+            description: "d",
+            project_id: "p1",
+            timestamp: null,
+            on_cloud: null,
+            country_name: null,
+            country_iso_code: null,
+            region: null,
+            cloud_provider: null,
+            cloud_region: null,
+        });
+        expect(r.success).toBe(true);
+    });
 });
diff --git a/webapp/tests/components/project-dashboard-base.test.tsx b/webapp/tests/components/project-dashboard-base.test.tsx
index 683c8cc07..4e8bf6a95 100644
--- a/webapp/tests/components/project-dashboard-base.test.tsx
+++ b/webapp/tests/components/project-dashboard-base.test.tsx
@@ -15,6 +15,14 @@ if (!HTMLCanvasElement.prototype.getContext) {
     HTMLCanvasElement.prototype.getContext = (() => null) as never;
 }
 
+// Radix Select uses these APIs that jsdom doesn't implement.
+if (!Element.prototype.hasPointerCapture) {
+    Element.prototype.hasPointerCapture = () => false;
+}
+if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = () => {};
+}
+
 vi.mock("@/api/runs", () => ({
     getRunEmissionsByExperiment: vi.fn().mockResolvedValue([]),
     getEmissionsTimeSeries: vi.fn(),
@@ -63,7 +71,7 @@ describe("ProjectDashboardBase", () => {
         ).toBeInTheDocument();
     });
 
-    it("calls onExperimentClick with the row's id (not empty string)", async () => {
+    it("calls onExperimentClick with the picked id when an option is chosen", async () => {
         const onExperimentClick = vi.fn();
         renderWithRouter(
             <ProjectDashboardBase
@@ -79,25 +87,31 @@ describe("ProjectDashboardBase", () => {
                 ]}
             />,
         );
-        await userEvent.click(screen.getByTestId("experiment-row-exp-42"));
+        await userEvent.click(screen.getByTestId("experiment-select"));
+        await userEvent.click(screen.getByTestId("experiment-option-exp-42"));
         expect(onExperimentClick).toHaveBeenCalledWith("exp-42");
     });
 
-    it("filters out experiments with no id (defensive against bad data)", () => {
+    it("shows the selected experiment's description and id with a copy button", () => {
         renderWithRouter(
             <ProjectDashboardBase
                 {...baseProps}
+                selectedExperimentId="exp-42"
                 projectExperiments={[
                     {
-                        id: "",
-                        name: "Broken",
-                        description: "no id",
+                        id: "exp-42",
+                        name: "Run 1",
+                        description: "first run",
                         project_id: "p1",
                     },
                 ]}
             />,
         );
-        // Broken experiment shouldn't be rendered as a row.
-        expect(screen.queryByText("Broken")).not.toBeInTheDocument();
+        const details = screen.getByTestId("experiment-details");
+        expect(details).toHaveTextContent("first run");
+        expect(details).toHaveTextContent("exp-42");
+        expect(
+            screen.getByRole("button", { name: /copy experiment id/i }),
+        ).toBeInTheDocument();
     });
 });
diff --git a/webapp/tests/components/share-project-button.test.tsx b/webapp/tests/components/share-project-button.test.tsx
index 8ff40e942..339c27dac 100644
--- a/webapp/tests/components/share-project-button.test.tsx
+++ b/webapp/tests/components/share-project-button.test.tsx
@@ -1,19 +1,27 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { render, screen } from "@testing-library/react";
-import ShareProjectButton from "@/components/share-project-button";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const encryptProjectIdMock = vi.hoisted(() => vi.fn());
+vi.mock("@/utils/crypto", () => ({
+    encryptProjectId: encryptProjectIdMock,
+}));
 
-const originalFetch = globalThis.fetch;
+const copyMock = vi.hoisted(() => vi.fn(() => true));
+vi.mock("copy-to-clipboard", () => ({
+    default: copyMock,
+}));
+
+import ShareProjectButton from "@/components/share-project-button";
 
 beforeEach(() => {
-    globalThis.fetch = vi.fn(async () => ({
-        ok: true,
-        status: 200,
-        json: async () => ({ encrypted_id: "enc-123" }),
-    })) as unknown as typeof fetch;
+    encryptProjectIdMock.mockReset();
+    encryptProjectIdMock.mockResolvedValue("enc-token-xyz");
+    copyMock.mockReset();
+    copyMock.mockReturnValue(true);
 });
 
 afterEach(() => {
-    globalThis.fetch = originalFetch;
     vi.restoreAllMocks();
 });
 
@@ -23,6 +31,7 @@ describe("ShareProjectButton", () => {
             <ShareProjectButton projectId="p1" isPublic={false} />,
         );
         expect(container.textContent).toBe("");
+        expect(encryptProjectIdMock).not.toHaveBeenCalled();
     });
 
     it("renders the share trigger for public projects", () => {
@@ -31,4 +40,27 @@ describe("ShareProjectButton", () => {
             screen.getByRole("button", { name: /share project/i }),
         ).toBeInTheDocument();
     });
+
+    it("computes the encrypted id client-side when the popover opens", async () => {
+        render(<ShareProjectButton projectId="p1" isPublic={true} />);
+
+        await userEvent.click(
+            screen.getByRole("button", { name: /share project/i }),
+        );
+
+        await waitFor(() =>
+            expect(encryptProjectIdMock).toHaveBeenCalledWith("p1"),
+        );
+
+        // The encrypted token shows up in the share-link input.
+        const input = await screen.findByDisplayValue(
+            /\/public\/projects\/enc-token-xyz$/,
+        );
+        expect(input).toBeInTheDocument();
+    });
+
+    it("does not call the encryptor before the popover is opened", () => {
+        render(<ShareProjectButton projectId="p1" isPublic={true} />);
+        expect(encryptProjectIdMock).not.toHaveBeenCalled();
+    });
 });