diff --git a/frontend/src/component/insights/InsightsCharts.tsx b/frontend/src/component/insights/InsightsCharts.tsx
index e7c478443d..c80a4d1662 100644
--- a/frontend/src/component/insights/InsightsCharts.tsx
+++ b/frontend/src/component/insights/InsightsCharts.tsx
@@ -19,6 +19,7 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { WidgetTitle } from './components/WidgetTitle/WidgetTitle.tsx';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useUiFlag } from 'hooks/useUiFlag.ts';
+import { LegacyInsightsCharts } from './LegacyInsightsCharts.tsx';
 
 export interface IChartsProps {
     flagTrends: InstanceInsightsSchema['flagTrends'];
@@ -101,7 +102,17 @@ const Section: FC<PropsWithChildren<{ title: string }>> = ({
     </section>
 );
 
-export const InsightsCharts: FC<IChartsProps> = ({
+export const InsightsCharts: FC<IChartsProps> = (props) => {
+    const useNewInsightsCharts = useUiFlag('lifecycleMetrics');
+
+    return useNewInsightsCharts ? (
+        <NewInsightsCharts {...props} />
+    ) : (
+        <LegacyInsightsCharts {...props} />
+    );
+};
+
+const NewInsightsCharts: FC<IChartsProps> = ({
     projects,
     summary,
     userTrends,
diff --git a/frontend/src/component/insights/LegacyInsightsCharts.tsx b/frontend/src/component/insights/LegacyInsightsCharts.tsx
index 1c53bb5bab..512b4fdd73 100644
--- a/frontend/src/component/insights/LegacyInsightsCharts.tsx
+++ b/frontend/src/component/insights/LegacyInsightsCharts.tsx
@@ -90,7 +90,7 @@ const StyledChartContainer = styled(Box)(({ theme }) => ({
     padding: theme.spacing(3),
 }));
 
-export const InsightsCharts: FC<IChartsProps> = ({
+export const LegacyInsightsCharts: FC<IChartsProps> = ({
     projects,
     summary,
     userTrends,