diff --git a/src/components/ProgressBar/ProgressBar.md b/src/components/ProgressBar/ProgressBar.md
index 890e865d..284e690b 100644
--- a/src/components/ProgressBar/ProgressBar.md
+++ b/src/components/ProgressBar/ProgressBar.md
@@ -15,6 +15,7 @@ import Stack from 'aws-northstar/layouts/Stack';
 
     <Container headingVariant='h4' title="Circular progress bar">
         <ProgressBar label="Circular progress bar completed" variant={'circular'} value={100} displayValue={true} />
+        <ProgressBar label="Circular progress bar empty" variant={'circular'} value={0} displayValue={true} />
     </Container>
 </Stack>    
 ```
diff --git a/src/components/ProgressBar/index.tsx b/src/components/ProgressBar/index.tsx
index 3c4ec543..12232d1c 100644
--- a/src/components/ProgressBar/index.tsx
+++ b/src/components/ProgressBar/index.tsx
@@ -36,12 +36,12 @@ const useStyles = makeStyles((theme: Theme) => ({
         marginTop: '8px',
     },
     circularColorPrimary: {
-        color: theme.palette.info.dark,
+        color: `${theme.palette.info.dark} !important`,
         position: 'absolute',
         left: 0,
     },
     circularColorBottom: {
-        color: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
+        color: `${theme.palette.grey[theme.palette.type === 'light' ? 200 : 700]} !important`,
     },
     barColorPrimary: {
         backgroundColor: theme.palette.info.dark,