diff --git a/web/ui/mantine-ui/src/pages/AlertsPage.tsx b/web/ui/mantine-ui/src/pages/AlertsPage.tsx
index 18325350b6..a659bae2ab 100644
--- a/web/ui/mantine-ui/src/pages/AlertsPage.tsx
+++ b/web/ui/mantine-ui/src/pages/AlertsPage.tsx
@@ -12,6 +12,7 @@ import {
   TextInput,
   Anchor,
   Pagination,
+  rem,
 } from "@mantine/core";
 import { useSuspenseAPIQuery } from "../api/api";
 import { AlertingRule, AlertingRulesResult } from "../api/responseTypes/rules";
@@ -222,7 +223,7 @@ export default function AlertsPage() {
           p="md"
           key={i} // TODO: Find a stable and definitely unique key.
         >
-          <Group mb="md" mt="xs" ml="xs" justify="space-between">
+          <Group mb="sm" justify="space-between">
             <Group align="baseline">
               <Text fz="xl" fw={600} c="var(--mantine-primary-color-filled)">
                 {g.name}
@@ -280,6 +281,7 @@ export default function AlertsPage() {
                   {items.map((r, j) => {
                     return (
                       <Accordion.Item
+                        mt={rem(5)}
                         styles={{
                           item: {
                             // TODO: This transparency hack is an OK workaround to make the collapsed items
@@ -299,7 +301,9 @@ export default function AlertsPage() {
                               : panelClasses.panelHealthOk
                         }
                       >
-                        <Accordion.Control>
+                        <Accordion.Control
+                          styles={{ label: { paddingBlock: rem(10) } }}
+                        >
                           <Group wrap="nowrap" justify="space-between" mr="lg">
                             <Text>{r.rule.name}</Text>
                             <Group gap="xs">
diff --git a/web/ui/mantine-ui/src/pages/RulesPage.tsx b/web/ui/mantine-ui/src/pages/RulesPage.tsx
index 0888fe4737..ef1e1d6243 100644
--- a/web/ui/mantine-ui/src/pages/RulesPage.tsx
+++ b/web/ui/mantine-ui/src/pages/RulesPage.tsx
@@ -91,10 +91,9 @@ export default function RulesPage() {
             shadow="xs"
             withBorder
             p="md"
-            mb="md"
             key={i} // TODO: Find a stable and definitely unique key.
           >
-            <Group mb="md" mt="xs" ml="xs" justify="space-between">
+            <Group mb="sm" justify="space-between">
               <Group align="baseline">
                 <Text fz="xl" fw={600} c="var(--mantine-primary-color-filled)">
                   {g.name}
@@ -147,6 +146,7 @@ export default function RulesPage() {
                 <Accordion multiple variant="separated">
                   {items.map((r, j) => (
                     <Accordion.Item
+                      mt={rem(5)}
                       styles={{
                         item: {
                           // TODO: This transparency hack is an OK workaround to make the collapsed items
@@ -167,7 +167,9 @@ export default function RulesPage() {
                               : "5px solid var(--mantine-color-green-4)",
                       }}
                     >
-                      <Accordion.Control>
+                      <Accordion.Control
+                        styles={{ label: { paddingBlock: rem(10) } }}
+                      >
                         <Group justify="space-between" mr="lg">
                           <Group gap="xs" wrap="nowrap">
                             {r.type === "alerting" ? (