diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx
index e642080de3..83edd91db1 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx
@@ -129,6 +129,9 @@ export const FeatureImpactMetrics: FC = () => {
         [impactMetrics.configs, projectId],
     );
 
+    const maxChartsReached = impactMetrics.configs.length >= 20;
+    const isDisabled = metadataLoading || !!metadataError || maxChartsReached;
+
     return (
         <PageContent>
             <PageHeader
@@ -140,9 +143,17 @@ export const FeatureImpactMetrics: FC = () => {
                         variant='contained'
                         startIcon={<Add />}
                         onClick={handleAddChart}
-                        disabled={metadataLoading || !!metadataError}
+                        disabled={isDisabled}
                         permission={UPDATE_FEATURE}
                         projectId={projectId}
+                        tooltipProps={
+                            maxChartsReached
+                                ? {
+                                      title: 'Maximum of 20 impact metrics charts allowed',
+                                      arrow: true,
+                                  }
+                                : undefined
+                        }
                     >
                         Add Chart
                     </PermissionButton>
diff --git a/frontend/src/component/impact-metrics/ImpactMetrics.tsx b/frontend/src/component/impact-metrics/ImpactMetrics.tsx
index cfea8a6010..32621ce6e5 100644
--- a/frontend/src/component/impact-metrics/ImpactMetrics.tsx
+++ b/frontend/src/component/impact-metrics/ImpactMetrics.tsx
@@ -139,6 +139,8 @@ export const ImpactMetrics: FC = () => {
 
     const hasError = metadataError || settingsError;
     const isLoading = metadataLoading || settingsLoading;
+    const maxChartsReached = charts.length >= 20;
+    const isDisabled = isLoading || !!hasError || maxChartsReached;
 
     return (
         <>
@@ -154,8 +156,16 @@ export const ImpactMetrics: FC = () => {
                         variant='contained'
                         startIcon={<Add />}
                         onClick={handleAddChart}
-                        disabled={isLoading || !!hasError}
+                        disabled={isDisabled}
                         permission={ADMIN}
+                        tooltipProps={
+                            maxChartsReached
+                                ? {
+                                      title: 'Maximum of 20 impact metrics charts allowed',
+                                      arrow: true,
+                                  }
+                                : undefined
+                        }
                     >
                         Add Chart
                     </PermissionButton>