diff --git a/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx b/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx
index 0d850038c..072e2bf44 100644
--- a/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx
@@ -19,7 +19,7 @@ interface IProps {
 }
 
 type Props = IProps & RouteComponentProps;
-const MAX_CARDS = 30
+const MAX_CARDS = 29;
 function DashboardHeader(props: Props) {
   const { siteId, dashboardId } = props;
   const { dashboardStore } = useStore();
diff --git a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
index 1f618544f..ab412676f 100644
--- a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
@@ -73,7 +73,7 @@ function MetricsList({
           toggleSelection={toggleMetricSelection}
           allSelected={cards.length === selectedMetrics.length}
           toggleAll={({ target: { checked, name } }) =>
-            setSelectedMetrics(checked ? cards.map((i: any) => i.metricId) : [])
+            setSelectedMetrics(checked ? cards.map((i: any) => i.metricId).slice(0, 30 - existingCardIds!.length) : [])
           }
         />
       ) : (