diff --git a/frontend/src/component/feature/FeatureView2/EnvironmentMetricComponent/EnvironmentMetricComponent.style.ts b/frontend/src/component/feature/FeatureView2/EnvironmentMetricComponent/EnvironmentMetricComponent.style.ts
deleted file mode 100644
index 29ae6d3a66..0000000000
--- a/frontend/src/component/feature/FeatureView2/EnvironmentMetricComponent/EnvironmentMetricComponent.style.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import { makeStyles } from '@material-ui/core/styles';
-
-export const useStyles = makeStyles(theme => ({
-    container: {
-        display: 'flex',
-        borderRadius: '10px',
-        backgroundColor: '#fff',
-        padding: '2rem 2rem 2rem 2rem',
-        marginBottom: '1rem',
-        flexDirection: 'column',
-        width: '50%',
-        position: 'relative'
-    },
-    environmentContainer: {
-        display: 'flex',
-        marginBottom: '1rem',
-        width: '100%',
-        position: 'relative'
-    },
-    environmentHeader: {
-        display: 'flex',
-        width: '100%',
-        fontSize: theme.fontSizes.subHeader,
-        fontWeight: 'bold'
-    },
-    applicationHeader: {
-        display: 'flex',
-        width: '100%',
-        fontSize: theme.fontSizes.subHeader,
-        fontWeight: 'bold'
-    },
-    applicationContainer: {
-        display: 'flex',
-        width: '100%',
-        position: 'relative',
-        marginBottom: '1rem'
-    },
-    [theme.breakpoints.down(1000)]: {
-        container: {
-            width: '100%'
-        }
-    },
-    headerContainer: {
-        display: 'flex',
-        width: '100%',
-        alignItems: 'center',
-        justifyContent: 'space-between'
-    },
-    title: {
-        fontSize: theme.fontSizes.subHeader,
-        fontWeight: 'normal',
-        margin: 0
-    },
-    bodyContainer: {
-        display: 'flex',
-        align: 'items',
-        marginTop: '1rem',
-        height: '100%'
-    },
-    trueCountContainer: {
-        marginBottom: '0.5rem',
-        display: 'flex',
-        alignItems: 'center'
-    },
-    trueCount: {
-        width: '10px',
-        height: '10px',
-        borderRadius: '50%',
-        marginRight: '0.75rem',
-        backgroundColor: theme.palette.primary.main
-    },
-    falseCount: {
-        width: '10px',
-        height: '10px',
-        borderRadius: '50%',
-        marginRight: '0.75rem',
-        backgroundColor: theme.palette.grey[300]
-    },
-    paragraph: {
-        fontSize: theme.fontSizes.smallBody
-    },
-    textContainer: {
-        marginRight: '1rem',
-        maxWidth: '150px'
-    },
-    primaryMetric: {
-        width: '100%'
-    },
-    icon: {
-        fill: theme.palette.grey[300],
-        height: '75px',
-        width: '75px'
-    },
-    chartContainer: {
-        width: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-    }
-}));
diff --git a/frontend/src/component/feature/FeatureView2/EnvironmentMetricComponent/EnvironmentMetricComponent.tsx b/frontend/src/component/feature/FeatureView2/EnvironmentMetricComponent/EnvironmentMetricComponent.tsx
deleted file mode 100644
index ed3b4b1c29..0000000000
--- a/frontend/src/component/feature/FeatureView2/EnvironmentMetricComponent/EnvironmentMetricComponent.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import useFeatureMetrics from '../../../../hooks/api/getters/useFeatureMetrics/useFeatureMetrics';
-import { useParams } from 'react-router-dom';
-import { IFeatureViewParams } from '../../../../interfaces/params';
-import React from 'react';
-import useFeature from '../../../../hooks/api/getters/useFeature/useFeature';
-import FeatureEnvironmentMetrics from '../FeatureOverview/FeatureEnvironmentMetrics/FeatureEnvironmentMetrics';
-import FeatureSeenApplications from '../FeatureSeenApplications/FeatureSeenApplications';
-import { useStyles } from './EnvironmentMetricComponent.style';
-
-const emptyMetric = (environment: string) => ({
-    yes: 0,
-    no: 0,
-    environment,
-    timestamp: ''
-});
-const EnvironmentMetricComponent: React.FC = () => {
-    const { projectId, featureId } = useParams<IFeatureViewParams>();
-    const { feature } = useFeature(projectId, featureId);
-    const { metrics } = useFeatureMetrics(projectId, featureId);
-    const styles = useStyles();
-
-    const featureMetrics = feature?.environments.map(env => {
-        const envMetric = metrics.lastHourUsage.find(
-            metric => metric.environment === env.name
-        );
-        return envMetric || emptyMetric(env.name);
-    });
-
-    const metricComponents = featureMetrics.map(metric => {
-        return (
-            <FeatureEnvironmentMetrics key={metric.environment} metric={metric} />
-        );
-    });
-
-    return (
-        <>
-            <div className={styles.environmentHeader}>Environments</div>
-            <div className={styles.environmentContainer}>
-                {metricComponents}
-            </div>
-            <div className={styles.applicationHeader}>Applications</div>
-            <div className={styles.applicationsContainer}>
-                <FeatureSeenApplications />
-            </div>
-        </>
-    )
-        ;
-};
-
-export default EnvironmentMetricComponent;
diff --git a/frontend/src/component/feature/FeatureView2/FeatureMetrics/FeatureMetrics.styles.ts b/frontend/src/component/feature/FeatureView2/FeatureMetrics/FeatureMetrics.styles.ts
index 10dae26fef..55bd00db65 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureMetrics/FeatureMetrics.styles.ts
+++ b/frontend/src/component/feature/FeatureView2/FeatureMetrics/FeatureMetrics.styles.ts
@@ -1,9 +1,26 @@
 import { makeStyles } from '@material-ui/core/styles';
 
 export const useStyles = makeStyles(theme => ({
-    container: {
-        borderRadius: '12.5px',
-        backgroundColor: '#fff',
-        padding: '2rem',
+    environmentContainer: {
+        display: 'flex',
+        marginBottom: '1rem',
+        flexWrap: 'wrap',
+        width: '100%',
+        position: 'relative',
+        justifyContent: 'center',
+    },
+    environmentMetrics: {
+        border: `1px solid ${theme.palette.grey[300]}`,
+        margin: '1rem',
+        width: '30%',
+        [theme.breakpoints.down(1000)]: {
+            width: '40%',
+        },
+        [theme.breakpoints.down(750)]: {
+            width: '100%',
+        },
+    },
+    secondaryContent: {
+        marginTop: '1rem',
     },
 }));
diff --git a/frontend/src/component/feature/FeatureView2/FeatureMetrics/FeatureMetrics.tsx b/frontend/src/component/feature/FeatureView2/FeatureMetrics/FeatureMetrics.tsx
index 2a896cf81c..0dec136ad7 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureMetrics/FeatureMetrics.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureMetrics/FeatureMetrics.tsx
@@ -1,26 +1,59 @@
 import { useParams } from 'react-router';
 import useFeature from '../../../../hooks/api/getters/useFeature/useFeature';
-import MetricComponent from '../../view/metric-container';
 import { useStyles } from './FeatureMetrics.styles';
 import { IFeatureViewParams } from '../../../../interfaces/params';
-import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
-import ConditionallyRender from '../../../common/ConditionallyRender';
-import EnvironmentMetricComponent from '../EnvironmentMetricComponent/EnvironmentMetricComponent';
+import useFeatureMetrics from '../../../../hooks/api/getters/useFeatureMetrics/useFeatureMetrics';
+import FeatureEnvironmentMetrics from '../FeatureOverview/FeatureEnvironmentMetrics/FeatureEnvironmentMetrics';
+import FeatureSeenApplications from '../FeatureSeenApplications/FeatureSeenApplications';
+import PageContent from '../../../common/PageContent';
+
+const emptyMetric = (environment: string) => ({
+    yes: 0,
+    no: 0,
+    environment,
+    timestamp: '',
+});
 
 const FeatureMetrics = () => {
-    const styles = useStyles();
     const { projectId, featureId } = useParams<IFeatureViewParams>();
     const { feature } = useFeature(projectId, featureId);
-    const { uiConfig } = useUiConfig();
-    const isEnterprise = uiConfig.flags.E;
+    const { metrics } = useFeatureMetrics(projectId, featureId);
+    const styles = useStyles();
+
+    const featureMetrics = feature?.environments.map(env => {
+        const envMetric = metrics.lastHourUsage.find(
+            metric => metric.environment === env.name
+        );
+        return envMetric || emptyMetric(env.name);
+    });
+
+    const metricComponents = featureMetrics.map(metric => {
+        return (
+            <FeatureEnvironmentMetrics
+                key={metric.environment}
+                className={styles.environmentMetrics}
+                metric={metric}
+            />
+        );
+    });
 
     return (
-        <div className={styles.container}>
-            <ConditionallyRender condition={isEnterprise}
-                                 show={<EnvironmentMetricComponent />}
-                                 elseShow={<MetricComponent featureToggle={feature} />}
-            />
-        </div>
+        <>
+            <PageContent headerContent="Environment metrics">
+                <div className={styles.environmentContainer}>
+                    {metricComponents}
+                </div>
+            </PageContent>
+
+            <PageContent
+                headerContent="Applications"
+                className={styles.secondaryContent}
+            >
+                <div className={styles.applicationsContainer}>
+                    <FeatureSeenApplications />
+                </div>
+            </PageContent>
+        </>
     );
 };