diff --git a/webui/src/features/tasks/TasksSummaryWidget.tsx b/webui/src/features/tasks/TasksSummaryWidget.tsx
index c9b6b10..ae3b1cf 100644
--- a/webui/src/features/tasks/TasksSummaryWidget.tsx
+++ b/webui/src/features/tasks/TasksSummaryWidget.tsx
@@ -1,3 +1,4 @@
+import { MetricGrid } from "@govoplan/core-webui";
 import { useEffect, useState } from "react";
 import { Link } from "react-router";
 import {
@@ -35,11 +36,11 @@ export default function TasksSummaryWidget({ settings, refreshKey }: { settings:
   return (
     <LoadingFrame loading={loading} label="i18n:govoplan-tasks.loading_summary">
       {error ? <DismissibleAlert tone="warning" resetKey={error}>{error}</DismissibleAlert> : null}
-      <div className="metric-grid inside dashboard-widget-metrics">
+      <MetricGrid columns={3} spacing="none">
         <MetricCard label="i18n:govoplan-tasks.open" value={(summary?.open ?? 0) + (summary?.in_progress ?? 0)} tone="info" detail="i18n:govoplan-tasks.actionable_work" />
         <MetricCard label="i18n:govoplan-tasks.overdue" value={summary?.overdue ?? 0} tone={summary?.overdue ? "danger" : "good"} detail="i18n:govoplan-tasks.due_date_passed" />
         <MetricCard label="i18n:govoplan-tasks.blocked" value={summary?.blocked ?? 0} tone={summary?.blocked ? "warning" : "good"} detail="i18n:govoplan-tasks.needs_resolution" />
-      </div>
+      </MetricGrid>
       <div className="tasks-widget-actions"><Link className="btn btn-secondary" to="/tasks">i18n:govoplan-tasks.open_work_inbox</Link></div>
     </LoadingFrame>
   );