diff --git a/webui/package.json b/webui/package.json
index 6f3f711..dfc2a72 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -29,6 +29,7 @@
     "test:module-capabilities": "rm -rf .module-test-build && mkdir -p .module-test-build && printf '{\"type\":\"commonjs\"}\n' > .module-test-build/package.json && tsc -p tsconfig.module-tests.json && node .module-test-build/tests/module-capabilities.test.js && node .module-test-build/tests/privacy-policy.test.js && node .module-test-build/tests/help-context.test.js",
     "test:module-permutations": "node scripts/test-module-permutations.mjs",
     "test:mail-components": "rm -rf .component-test-build && mkdir -p .component-test-build && printf '{\"type\":\"commonjs\"}\\n' > .component-test-build/package.json && tsc -p tsconfig.component-tests.json && node .component-test-build/tests/mail-components.test.js",
+    "test:metric-card": "rm -rf .component-test-build && mkdir -p .component-test-build && printf '{\"type\":\"commonjs\"}\\n' > .component-test-build/package.json && tsc -p tsconfig.component-tests.json && node .component-test-build/tests/metric-card.test.js",
     "test:people-picker": "rm -rf .component-test-build && mkdir -p .component-test-build && printf '{\"type\":\"commonjs\"}\\n' > .component-test-build/package.json && tsc -p tsconfig.component-tests.json && node .component-test-build/tests/people-picker.test.js",
     "test:resource-access": "rm -rf .component-test-build && mkdir -p .component-test-build && printf '{\"type\":\"commonjs\"}\\n' > .component-test-build/package.json && tsc -p tsconfig.component-tests.json && node .component-test-build/tests/resource-access-explanation.test.js",
     "test:selection-list": "rm -rf .component-test-build && mkdir -p .component-test-build && printf '{\"type\":\"commonjs\"}\\n' > .component-test-build/package.json && tsc -p tsconfig.component-tests.json && node .component-test-build/tests/selection-list.test.js"
diff --git a/webui/src/components/MetricCard.tsx b/webui/src/components/MetricCard.tsx
index b8293d1..870eebc 100644
--- a/webui/src/components/MetricCard.tsx
+++ b/webui/src/components/MetricCard.tsx
@@ -1,9 +1,14 @@
+import { usePlatformLanguage } from "../i18n/LanguageContext";
+
 export default function MetricCard({ label, value, tone = "neutral", detail }: { label: string; value: string | number; tone?: "neutral" | "good" | "warning" | "danger" | "info"; detail?: string }) {
+  const { translateText } = usePlatformLanguage();
+  const renderedValue = typeof value === "string" ? translateText(value) : value;
+
   return (
     <div className={`metric-card metric-${tone}`}>
-      <div className="metric-label">{label}</div>
-      <div className="metric-value">{value}</div>
-      {detail && <div className="metric-detail">{detail}</div>}
+      <div className="metric-label">{translateText(label)}</div>
+      <div className="metric-value">{renderedValue}</div>
+      {detail && <div className="metric-detail">{translateText(detail)}</div>}
     </div>
   );
 }
diff --git a/webui/tests/metric-card.test.tsx b/webui/tests/metric-card.test.tsx
new file mode 100644
index 0000000..0891f7d
--- /dev/null
+++ b/webui/tests/metric-card.test.tsx
@@ -0,0 +1,26 @@
+function assert(condition: unknown, message = "assertion failed"): void {
+  if (!condition) throw new Error(message);
+}
+
+import { renderToStaticMarkup } from "react-dom/server";
+import MetricCard from "../src/components/MetricCard";
+import { PlatformLanguageProvider } from "../src/i18n/LanguageContext";
+
+const translatedMarkup = renderToStaticMarkup(
+  <PlatformLanguageProvider>
+    <MetricCard
+      label="i18n:govoplan-core.installed_modules.32b3e799"
+      value="i18n:govoplan-core.core_only.d46ce7d9"
+      detail="i18n:govoplan-core.install_the_campaign_module_to_show_campaign_act.3085f23e"
+      tone="info"
+    />
+  </PlatformLanguageProvider>
+);
+
+assert(translatedMarkup.includes('class="metric-card metric-info"'), "the visual tone is preserved");
+assert(translatedMarkup.includes('class="metric-label">Installed modules</div>'), "the label is translated");
+assert(translatedMarkup.includes('class="metric-value">Core only</div>'), "a string value is translated");
+assert(!translatedMarkup.includes("i18n:govoplan-core."), "translation keys never leak into visible card text");
+
+const numericMarkup = renderToStaticMarkup(<MetricCard label="Count" value={7} />);
+assert(numericMarkup.includes('class="metric-value">7</div>'), "numeric values are preserved");
diff --git a/webui/tsconfig.component-tests.json b/webui/tsconfig.component-tests.json
index 0e41d2b..71bed4f 100644
--- a/webui/tsconfig.component-tests.json
+++ b/webui/tsconfig.component-tests.json
@@ -23,6 +23,7 @@
     "tests/explorer-tree.test.tsx",
     "tests/icon-button.test.tsx",
     "tests/mail-components.test.tsx",
+    "tests/metric-card.test.tsx",
     "tests/people-picker.test.tsx",
     "tests/resource-access-explanation.test.tsx",
     "tests/selection-list.test.tsx",
@@ -30,6 +31,7 @@
     "src/components/email/EmailAddressInput.tsx",
     "src/components/PasswordField.tsx",
     "src/components/MessageDisplayPanel.tsx",
+    "src/components/MetricCard.tsx",
     "src/components/people/PeoplePicker.tsx",
     "src/components/people/peoplePickerTypes.ts",
     "src/components/ResourceAccessExplanation.tsx",