diff --git a/frontend/src/component/project/Project/ProjectInfo/HealthWidget.tsx b/frontend/src/component/project/Project/ProjectInfo/HealthWidget.tsx
new file mode 100644
index 0000000000..4f7752030a
--- /dev/null
+++ b/frontend/src/component/project/Project/ProjectInfo/HealthWidget.tsx
@@ -0,0 +1,34 @@
+import {
+    StyledArrowIcon,
+    StyledDivInfoContainer,
+    StyledDivPercentageContainer,
+    StyledLink,
+    StyledParagraphEmphasizedText,
+    StyledParagraphSubtitle,
+    StyledSpanLinkText,
+} from './ProjectInfo.styles';
+import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
+
+interface IHealthWidgetProps {
+    projectId: string;
+    health: number;
+}
+export const HealthWidget = ({ projectId, health }: IHealthWidgetProps) => {
+    return (
+        <StyledDivInfoContainer>
+            <StyledDivPercentageContainer>
+                <PercentageCircle percentage={health} />
+            </StyledDivPercentageContainer>
+            <StyledParagraphSubtitle data-loading>
+                Overall health rating
+            </StyledParagraphSubtitle>
+            <StyledParagraphEmphasizedText data-loading>
+                {health}%
+            </StyledParagraphEmphasizedText>
+            <StyledLink data-loading to={`/projects/${projectId}/health`}>
+                <StyledSpanLinkText data-loading>view more </StyledSpanLinkText>
+                <StyledArrowIcon data-loading />
+            </StyledLink>
+        </StyledDivInfoContainer>
+    );
+};
diff --git a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts
index 94e495114a..a91b1339c7 100644
--- a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts
+++ b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts
@@ -51,6 +51,17 @@ export const StyledParagraphSubtitle = styled('p')(({ theme }) => ({
     marginBottom: theme.spacing(2),
 }));
 
+export const StyledParagraphGridRow = styled('div')(({ theme }) => ({
+    display: 'grid',
+    gridGap: theme.spacing(2),
+    gridTemplateColumns: '10% 70% 20%',
+    margin: theme.spacing(1, 2, 1, 2),
+    fontSize: theme.fontSizes.smallBody,
+    color: theme.palette.tertiary.dark,
+    textAlign: 'left',
+    alignItems: 'center',
+}));
+
 export const StyledParagraphEmphasizedText = styled('p')(({ theme }) => ({
     fontSize: '1.5rem',
     marginBottom: theme.spacing(2),
@@ -60,6 +71,12 @@ export const StyledParagraphEmphasizedText = styled('p')(({ theme }) => ({
     },
 }));
 
+export const StyledCount = styled('p')(({ theme }) => ({
+    fontSize: '1.2rem',
+    fontWeight: 'bold',
+    color: theme.palette.text.primary,
+}));
+
 export const StyledSpanLinkText = styled('p')(({ theme }) => ({
     [theme.breakpoints.down('md')]: {
         display: 'none',
diff --git a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
index 105f8f276d..c711887418 100644
--- a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
+++ b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
@@ -1,28 +1,34 @@
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
-import { DEFAULT_PROJECT_ID } from '../../../../hooks/api/getters/useDefaultProject/useDefaultProjectId';
+import { DEFAULT_PROJECT_ID } from 'hooks/api/getters/useDefaultProject/useDefaultProjectId';
 import {
+    StyledArrowIcon,
     StyledDivContainer,
     StyledDivInfoContainer,
-    StyledDivPercentageContainer,
-    StyledParagraphSubtitle,
-    StyledParagraphEmphasizedText,
     StyledLink,
+    StyledParagraphEmphasizedText,
+    StyledParagraphSubtitle,
     StyledSpanLinkText,
-    StyledArrowIcon,
 } from './ProjectInfo.styles';
+import { IFeatureToggleListItem } from '../../../../interfaces/featureToggle';
+import { HealthWidget } from './HealthWidget';
+import { ToggleTypesWidget } from './ToggleTypesWidget';
 
 interface IProjectInfoProps {
     id: string;
     memberCount: number;
-    featureCount: number;
+    features: IFeatureToggleListItem[];
     health: number;
     description?: string;
 }
 
-const ProjectInfo = ({ id, memberCount, health }: IProjectInfoProps) => {
+const ProjectInfo = ({
+    id,
+    memberCount,
+    health,
+    features,
+}: IProjectInfoProps) => {
     const { uiConfig } = useUiConfig();
 
     let link = `/admin/users`;
@@ -34,23 +40,7 @@ const ProjectInfo = ({ id, memberCount, health }: IProjectInfoProps) => {
     return (
         <aside>
             <StyledDivContainer>
-                <StyledDivInfoContainer>
-                    <StyledDivPercentageContainer>
-                        <PercentageCircle percentage={health} />
-                    </StyledDivPercentageContainer>
-                    <StyledParagraphSubtitle data-loading>
-                        Overall health rating
-                    </StyledParagraphSubtitle>
-                    <StyledParagraphEmphasizedText data-loading>
-                        {health}%
-                    </StyledParagraphEmphasizedText>
-                    <StyledLink data-loading to={`/projects/${id}/health`}>
-                        <StyledSpanLinkText data-loading>
-                            view more{' '}
-                        </StyledSpanLinkText>
-                        <StyledArrowIcon data-loading />
-                    </StyledLink>
-                </StyledDivInfoContainer>
+                <HealthWidget projectId={id} health={health} />
                 <ConditionallyRender
                     condition={id !== DEFAULT_PROJECT_ID}
                     show={
@@ -70,6 +60,7 @@ const ProjectInfo = ({ id, memberCount, health }: IProjectInfoProps) => {
                         </StyledDivInfoContainer>
                     }
                 />
+                <ToggleTypesWidget features={features} />
             </StyledDivContainer>
         </aside>
     );
diff --git a/frontend/src/component/project/Project/ProjectInfo/ToggleTypesWidget.tsx b/frontend/src/component/project/Project/ProjectInfo/ToggleTypesWidget.tsx
new file mode 100644
index 0000000000..62c57fc534
--- /dev/null
+++ b/frontend/src/component/project/Project/ProjectInfo/ToggleTypesWidget.tsx
@@ -0,0 +1,81 @@
+import { IFeatureToggleListItem } from '../../../../interfaces/featureToggle';
+import { useMemo } from 'react';
+import {
+    StyledCount,
+    StyledDivInfoContainer,
+    StyledParagraphGridRow,
+    StyledParagraphSubtitle,
+} from './ProjectInfo.styles';
+import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
+
+export interface IToggleTypesWidgetProps {
+    features: IFeatureToggleListItem[];
+}
+
+export const ToggleTypesWidget = ({ features }: IToggleTypesWidgetProps) => {
+    const { release, experiment, operational, kill, permission } =
+        useMemo(() => {
+            const release =
+                features?.filter(feature => feature.type === 'release')
+                    .length || 0;
+            const experiment =
+                features?.filter(feature => feature.type === 'experiment')
+                    .length || 0;
+            const operational =
+                features?.filter(feature => feature.type === 'operational')
+                    .length || 0;
+            const kill =
+                features?.filter(feature => feature.type === 'kill-switch')
+                    .length || 0;
+            const permission =
+                features?.filter(feature => feature.type === 'permission')
+                    .length || 0;
+
+            return {
+                release,
+                experiment,
+                operational,
+                kill,
+                permission,
+            };
+        }, [features]);
+
+    const ReleaseToggleIcon = getFeatureTypeIcons('release');
+    const ExperimentToggleIcon = getFeatureTypeIcons('experiment');
+    const OperationalToggleIcon = getFeatureTypeIcons('operational');
+    const KillToggleIcon = getFeatureTypeIcons('kill-switch');
+    const PermissionToggleIcon = getFeatureTypeIcons('permission');
+
+    return (
+        <StyledDivInfoContainer>
+            <StyledParagraphSubtitle data-loading>
+                Toggle types used
+            </StyledParagraphSubtitle>
+            <StyledParagraphGridRow data-loading>
+                <ReleaseToggleIcon fontSize="inherit" data-loading />
+                <div>Release</div>
+                <StyledCount>{release}</StyledCount>
+            </StyledParagraphGridRow>
+            <StyledParagraphGridRow data-loading>
+                <ExperimentToggleIcon fontSize="inherit" data-loading />
+                <div>Experiment</div>
+                <StyledCount>{experiment}</StyledCount>
+            </StyledParagraphGridRow>
+            <StyledParagraphGridRow data-loading>
+                <OperationalToggleIcon fontSize="inherit" data-loading />
+                <div>Operational</div>
+                <StyledCount>{operational}</StyledCount>
+            </StyledParagraphGridRow>
+            <StyledParagraphGridRow data-loading>
+                <KillToggleIcon fontSize="inherit" data-loading />
+                <div>Kill switch</div>
+                <StyledCount>{kill}</StyledCount>
+            </StyledParagraphGridRow>
+            <StyledParagraphGridRow data-loading>
+                <PermissionToggleIcon fontSize="inherit" data-loading />
+                <div>Permission</div>
+                <StyledCount>{permission}</StyledCount>
+            </StyledParagraphGridRow>
+        </StyledDivInfoContainer>
+    );
+};
diff --git a/frontend/src/component/project/Project/ProjectOverview.tsx b/frontend/src/component/project/Project/ProjectOverview.tsx
index 8dfa58bb57..31908223b5 100644
--- a/frontend/src/component/project/Project/ProjectOverview.tsx
+++ b/frontend/src/component/project/Project/ProjectOverview.tsx
@@ -8,7 +8,6 @@ import { usePageTitle } from 'hooks/usePageTitle';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { useLastViewedProject } from '../../../hooks/useLastViewedProject';
 import { useEffect } from 'react';
-import { StatusBox } from './ProjectStatus/StatusBox';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { ProjectStatus } from './ProjectStatus/ProjectStatus';
@@ -53,7 +52,7 @@ const ProjectOverview = () => {
                 description={description}
                 memberCount={members}
                 health={health}
-                featureCount={features?.length}
+                features={features}
             />
             <StyledContentContainer>
                 <ConditionallyRender