diff --git a/web/ui/mantine-ui/src/pages/AlertsPage.tsx b/web/ui/mantine-ui/src/pages/AlertsPage.tsx
index 4ce42d9059..87b0d01cb9 100644
--- a/web/ui/mantine-ui/src/pages/AlertsPage.tsx
+++ b/web/ui/mantine-ui/src/pages/AlertsPage.tsx
@@ -215,12 +215,12 @@ export default function AlertsPage() {
   // convenient to have in the same file IMO).
   const renderedPageItems = useMemo(
     () =>
-      currentPageGroups.map((g, i) => (
+      currentPageGroups.map((g) => (
         <Card
           shadow="xs"
           withBorder
           p="md"
-          key={i} // TODO: Find a stable and definitely unique key.
+          key={`${g.file}-${g.name}`}
         >
           <Group mb="md" mt="xs" ml="xs" justify="space-between">
             <Group align="baseline">
diff --git a/web/ui/mantine-ui/src/pages/RulesPage.tsx b/web/ui/mantine-ui/src/pages/RulesPage.tsx
index 0888fe4737..90ddc89195 100644
--- a/web/ui/mantine-ui/src/pages/RulesPage.tsx
+++ b/web/ui/mantine-ui/src/pages/RulesPage.tsx
@@ -86,13 +86,13 @@ export default function RulesPage() {
           (effectiveActivePage - 1) * ruleGroupsPerPage,
           effectiveActivePage * ruleGroupsPerPage
         )
-        .map((g, i) => (
+        .map((g) => (
           <Card
             shadow="xs"
             withBorder
             p="md"
             mb="md"
-            key={i} // TODO: Find a stable and definitely unique key.
+            key={`${g.file}-${g.name}`}
           >
             <Group mb="md" mt="xs" ml="xs" justify="space-between">
               <Group align="baseline">