diff --git a/webui/src/features/scheduling/SchedulingPage.tsx b/webui/src/features/scheduling/SchedulingPage.tsx
index af19f28..a4e0c98 100644
--- a/webui/src/features/scheduling/SchedulingPage.tsx
+++ b/webui/src/features/scheduling/SchedulingPage.tsx
@@ -1,3 +1,4 @@
+import { MetricGrid } from "@govoplan/core-webui";
 import { useCallback, useEffect, useMemo, useRef, useState, type FormEvent } from "react";
 import { useSearchParams } from "react-router";
 import {
@@ -1702,12 +1703,12 @@ function ParticipationStats({
   const rate = responseCount === null ? null : total ? Math.round((knownResponseCount / total) * 100) : 0;
   return (
     <Card title={I18N.participation}>
-      <div className="metric-grid inside">
+      <MetricGrid spacing="inset">
         <MetricCard label={I18N.participants} value={total} />
         <MetricCard label={I18N.responses} value={loading ? "…" : responseCount ?? "—"} tone="good" />
         <MetricCard label={I18N.awaiting} value={loading ? "…" : awaiting ?? "—"} tone={awaiting ? "warning" : "neutral"} />
         <MetricCard label={I18N.participationRate} value={loading ? "…" : rate === null ? "—" : `${rate}%`} tone="info" />
-      </div>
+      </MetricGrid>
     </Card>
   );
 }