diff --git a/services/frontend/src/components/material/InfoBox/index.tsx b/services/frontend/src/components/material/InfoBox/index.tsx
index ff335d7b77..5e35a6748b 100644
--- a/services/frontend/src/components/material/InfoBox/index.tsx
+++ b/services/frontend/src/components/material/InfoBox/index.tsx
@@ -23,7 +23,7 @@ export const InfoBox = ({
       }
     >
       {mini ? (
-        <IconButton data-cy={`${cypress}InfoBoxButton`}>
+        <IconButton data-cy={`${cypress}InfoBoxButton`} sx={{ padding: 0 }}>
           <HelpOutline fontSize="small" />
         </IconButton>
       ) : (
diff --git a/services/frontend/src/components/material/TableHeaderWithTooltip.tsx b/services/frontend/src/components/material/TableHeaderWithTooltip.tsx
new file mode 100644
index 0000000000..a3b0d9954c
--- /dev/null
+++ b/services/frontend/src/components/material/TableHeaderWithTooltip.tsx
@@ -0,0 +1,10 @@
+import { Stack } from '@mui/material'
+
+import { InfoBox } from './InfoBox'
+
+export const TableHeaderWithTooltip = ({ header, tooltipText }: { header: string; tooltipText: string }) => (
+  <Stack direction="row" gap={1}>
+    <span style={{ whiteSpace: 'wrap', minWidth: '80px' }}>{header}</span>
+    <InfoBox content={tooltipText} mini />
+  </Stack>
+)
diff --git a/services/frontend/src/components/material/Toggle/index.tsx b/services/frontend/src/components/material/Toggle/index.tsx
index d79a40893e..1289d85a84 100644
--- a/services/frontend/src/components/material/Toggle/index.tsx
+++ b/services/frontend/src/components/material/Toggle/index.tsx
@@ -20,10 +20,12 @@ export const Toggle = ({
   infoBoxContent?: string
 }) => {
   return (
-    <Stack alignItems="center" direction="row">
-      <Typography color={disabled ? 'text.secondary' : 'text.primary'}>{firstLabel}</Typography>
-      <Switch checked={value} data-cy={cypress} disabled={disabled} onChange={() => setValue(!value)} />
-      <Typography color={disabled ? 'text.secondary' : 'text.primary'}>{secondLabel}</Typography>
+    <Stack alignItems="center" direction="row" gap={1}>
+      <Stack alignItems="center" direction="row">
+        <Typography color={disabled ? 'text.secondary' : 'text.primary'}>{firstLabel}</Typography>
+        <Switch checked={value} data-cy={cypress} disabled={disabled} onChange={() => setValue(!value)} />
+        <Typography color={disabled ? 'text.secondary' : 'text.primary'}>{secondLabel}</Typography>
+      </Stack>
       {infoBoxContent && <InfoBox content={infoBoxContent} mini />}
     </Stack>
   )