diff --git a/webui/src/features/riskCompliance/RiskCompliancePage.tsx b/webui/src/features/riskCompliance/RiskCompliancePage.tsx
index 774f69d..535e1f7 100644
--- a/webui/src/features/riskCompliance/RiskCompliancePage.tsx
+++ b/webui/src/features/riskCompliance/RiskCompliancePage.tsx
@@ -1,3 +1,4 @@
+import { MetricGrid } from "@govoplan/core-webui";
 import {
   CheckCircle2,
   Database,
@@ -1249,7 +1250,7 @@ function AssurancePane({
             documentation={RISK_COMPLIANCE_DOCUMENTATION}
           />
         )}
-        <div className="metric-grid risk-assurance-metrics">
+        <MetricGrid minimum="fluid" className="risk-assurance-metrics">
           <MetricCard label="Objects" value={summary?.node_count ?? 0} tone="neutral" />
           <MetricCard label="Relationships" value={summary?.edge_count ?? 0} tone="neutral" />
           <MetricCard label="Risks" value={summary?.by_kind.risk ?? 0} tone="warning" />
@@ -1258,7 +1259,7 @@ function AssurancePane({
             value={summary?.by_state.open ?? 0}
             tone={(summary?.by_state.open ?? 0) > 0 ? "danger" : "good"}
           />
-        </div>
+        </MetricGrid>
       </div>
       <div className="risk-assurance-columns">
         <aside className="risk-panel">
diff --git a/webui/src/styles/risk-compliance.css b/webui/src/styles/risk-compliance.css
index b59db36..e3bf2cf 100644
--- a/webui/src/styles/risk-compliance.css
+++ b/webui/src/styles/risk-compliance.css
@@ -79,10 +79,6 @@
   gap: 10px;
 }
 
-.risk-assurance-metrics {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
 .risk-assurance-columns {
   display: grid;
   min-width: 0;