diff --git a/frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx b/frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx
index bd4c4082a3..776d3e37a8 100644
--- a/frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx
+++ b/frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx
@@ -103,12 +103,12 @@ export const ImpactMetrics: FC<ImpactMetricsProps> = () => {
             <StyledWidget>
                 <StyledWidgetStats>
                     <Box
-                        sx={{
+                        sx={(theme) => ({
                             display: 'flex',
                             flexDirection: 'column',
-                            gap: 2,
+                            gap: theme.spacing(2),
                             width: '100%',
-                        }}
+                        })}
                     >
                         <ImpactMetricsControls
                             selectedSeries={selectedSeries}