diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx
index 966b240943..c14537f3db 100644
--- a/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx
+++ b/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx
@@ -10,7 +10,6 @@ const HealthContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(3),
     borderRadius: theme.shape.borderRadiusExtraLarge,
     minWidth: '300px',
-    fontSize: theme.spacing(1.75),
 }));
 
 const ChartRow = styled('div')(({ theme }) => ({
@@ -25,6 +24,7 @@ const StyledSVG = styled('svg')({
 
 const DescriptionText = styled(Typography)(({ theme }) => ({
     color: theme.palette.text.secondary,
+    marginBottom: theme.spacing(2),
 }));
 
 export const ProjectHealth = () => {
@@ -43,10 +43,17 @@ export const ProjectHealth = () => {
     const offset = 0.75 - gapLength / 2;
     const healthLength = (averageHealth / 100) * circumference * 0.7;
 
+    const healthColor =
+        averageHealth >= 0 && averageHealth <= 24
+            ? theme.palette.error.main
+            : averageHealth >= 25 && averageHealth <= 74
+              ? theme.palette.warning.border
+              : theme.palette.success.border;
+
     return (
         <HealthContainer>
             <ChartRow>
-                <StyledSVG viewBox='0 0 100'>
+                <StyledSVG viewBox='0 0 100 100'>
                     <circle
                         cx='50'
                         cy='50'
@@ -62,7 +69,7 @@ export const ProjectHealth = () => {
                         cy='50'
                         r={radius}
                         fill='none'
-                        stroke={theme.palette.warning.border}
+                        stroke={healthColor}
                         strokeWidth={strokeWidth}
                         strokeDasharray={`${healthLength} ${circumference - healthLength}`}
                         strokeDashoffset={offset * circumference}