diff --git a/src/fireedge/src/client/components/Cards/DatastoreCard.js b/src/fireedge/src/client/components/Cards/DatastoreCard.js
index 3475e296b0..13ef4704d3 100644
--- a/src/fireedge/src/client/components/Cards/DatastoreCard.js
+++ b/src/fireedge/src/client/components/Cards/DatastoreCard.js
@@ -51,7 +51,7 @@ const DatastoreCard = memo(
             <Typography title={NAME} noWrap component='span'>
               {NAME}
             </Typography>
-            <StatusChip stateColor={'#c6c6c6'} text={type.name} />
+            <StatusChip text={type.name} />
           </span>
         }
         subheader={`#${ID}`}
diff --git a/src/fireedge/src/client/components/Cards/HostCard.js b/src/fireedge/src/client/components/Cards/HostCard.js
index ed5bb8a8dc..00b2abb494 100644
--- a/src/fireedge/src/client/components/Cards/HostCard.js
+++ b/src/fireedge/src/client/components/Cards/HostCard.js
@@ -54,7 +54,7 @@ const HostCard = memo(
             <Typography title={NAME} noWrap component='span'>
               {NAME}
             </Typography>
-            <StatusChip stateColor={'#c6c6c6'} text={mad} />
+            <StatusChip text={mad} />
           </span>
         }
         subheader={`#${ID}`}
diff --git a/src/fireedge/src/client/components/Status/Chip.js b/src/fireedge/src/client/components/Status/Chip.js
index 9d6a7b37d1..adb2045f22 100644
--- a/src/fireedge/src/client/components/Status/Chip.js
+++ b/src/fireedge/src/client/components/Status/Chip.js
@@ -6,9 +6,10 @@ import { addOpacityToColor } from 'client/utils'
 
 const useStyles = makeStyles(theme => {
   const getBackgroundColor = theme.palette.type === 'dark' ? lighten : darken
+  const defaultStateColor = theme.palette.grey[theme.palette.type === 'dark' ? 300 : 700]
 
   return {
-    root: ({ stateColor = theme.palette.primary.main }) => ({
+    root: ({ stateColor = defaultStateColor }) => ({
       color: getBackgroundColor(stateColor, 0.75),
       backgroundColor: addOpacityToColor(stateColor, 0.2),
       cursor: 'default',
@@ -21,11 +22,11 @@ const useStyles = makeStyles(theme => {
   }
 })
 
-const StatusChip = memo(({ stateColor, text }) => {
+const StatusChip = memo(({ stateColor, text = '', ...props }) => {
   const classes = useStyles({ stateColor })
 
   return (
-    <Typography component="span" className={classes.root}>
+    <Typography component='span' className={classes.root} {...props}>
       {text}
     </Typography>
   )
@@ -40,11 +41,6 @@ StatusChip.propTypes = {
   text: PropTypes.string
 }
 
-StatusChip.defaultProps = {
-  stateColor: undefined,
-  text: ''
-}
-
 StatusChip.displayName = 'StatusChip'
 
 export default StatusChip
diff --git a/src/fireedge/src/client/components/Tables/Datastores/row.js b/src/fireedge/src/client/components/Tables/Datastores/row.js
index f54f41d84b..ab4ee780a6 100644
--- a/src/fireedge/src/client/components/Tables/Datastores/row.js
+++ b/src/fireedge/src/client/components/Tables/Datastores/row.js
@@ -29,7 +29,7 @@ const Row = ({ original, value, ...props }) => {
           </Typography>
           <span className={classes.labels}>
             {LOCK && <Lock size={20} />}
-            <StatusChip stateColor={'#c6c6c6'} text={TYPE?.name} />
+            <StatusChip text={TYPE?.name} />
           </span>
         </div>
         <div className={classes.caption}>
diff --git a/src/fireedge/src/client/components/Tables/Hosts/row.js b/src/fireedge/src/client/components/Tables/Hosts/row.js
index 587f55cc4a..b250606328 100644
--- a/src/fireedge/src/client/components/Tables/Hosts/row.js
+++ b/src/fireedge/src/client/components/Tables/Hosts/row.js
@@ -39,7 +39,7 @@ const Row = ({ original, value, ...props }) => {
           </Typography>
           <span className={classes.labels}>
             {labels.map(label => (
-              <StatusChip key={label} stateColor={'#c6c6c6'} text={label} />
+              <StatusChip key={label} text={label} />
             ))}
           </span>
         </div>
diff --git a/src/fireedge/src/client/components/Tables/Images/row.js b/src/fireedge/src/client/components/Tables/Images/row.js
index 09101d0886..8abc5bee2d 100644
--- a/src/fireedge/src/client/components/Tables/Images/row.js
+++ b/src/fireedge/src/client/components/Tables/Images/row.js
@@ -39,7 +39,7 @@ const Row = ({ original, value, ...props }) => {
           {LOCK && <Lock size={20} />}
           <span className={classes.labels}>
             {labels.map(label => (
-              <StatusChip key={label} stateColor={'#c6c6c6'} text={label} />
+              <StatusChip key={label} text={label} />
             ))}
           </span>
         </div>
diff --git a/src/fireedge/src/client/components/Tables/MarketplaceApps/row.js b/src/fireedge/src/client/components/Tables/MarketplaceApps/row.js
index 97045d8824..0fece49e47 100644
--- a/src/fireedge/src/client/components/Tables/MarketplaceApps/row.js
+++ b/src/fireedge/src/client/components/Tables/MarketplaceApps/row.js
@@ -35,7 +35,7 @@ const Row = ({ original, value, ...props }) => {
           </Typography>
           {LOCK && <Lock size={20} />}
           <span className={classes.labels}>
-            <StatusChip stateColor={'#c6c6c6'} text={TYPE} />
+            <StatusChip text={TYPE} />
           </span>
         </div>
         <div className={classes.caption}>
@@ -58,8 +58,8 @@ const Row = ({ original, value, ...props }) => {
       </div>
       <div className={classes.secondary}>
         <span className={classes.labels}>
-          <StatusChip stateColor={'#c6c6c6'} text={`Zone ${ZONE_ID}`} />
-          <StatusChip stateColor={'#c6c6c6'} text={prettyBytes(+SIZE, 'MB')} />
+          <StatusChip text={`Zone ${ZONE_ID}`} />
+          <StatusChip text={prettyBytes(+SIZE, 'MB')} />
         </span>
       </div>
     </div>
diff --git a/src/fireedge/src/client/components/Tables/Marketplaces/row.js b/src/fireedge/src/client/components/Tables/Marketplaces/row.js
index a54f66c3bc..dc57def32b 100644
--- a/src/fireedge/src/client/components/Tables/Marketplaces/row.js
+++ b/src/fireedge/src/client/components/Tables/Marketplaces/row.js
@@ -28,7 +28,7 @@ const Row = ({ original, value, ...props }) => {
             {NAME}
           </Typography>
           <span className={classes.labels}>
-            <StatusChip stateColor={'#c6c6c6'} text={MARKET_MAD} />
+            <StatusChip text={MARKET_MAD} />
           </span>
         </div>
         <div className={classes.caption}>
diff --git a/src/fireedge/src/client/components/Tables/VmTemplates/row.js b/src/fireedge/src/client/components/Tables/VmTemplates/row.js
index dbcc6aa545..715db408ea 100644
--- a/src/fireedge/src/client/components/Tables/VmTemplates/row.js
+++ b/src/fireedge/src/client/components/Tables/VmTemplates/row.js
@@ -25,7 +25,7 @@ const Row = ({ original, value, ...props }) => {
           </Typography>
           <span className={classes.labels}>
             {LOCK && <Lock size={20} />}
-            {VROUTER && <StatusChip stateColor={'#c6c6c6'} text={VROUTER} />}
+            {VROUTER && <StatusChip text={VROUTER} />}
           </span>
         </div>
         <div className={classes.caption}>
diff --git a/src/fireedge/src/client/components/Tables/Vms/multiple.js b/src/fireedge/src/client/components/Tables/Vms/multiple.js
index c39bbc6c4f..01de7d7b22 100644
--- a/src/fireedge/src/client/components/Tables/Vms/multiple.js
+++ b/src/fireedge/src/client/components/Tables/Vms/multiple.js
@@ -13,7 +13,7 @@ const Multiple = ({ tags, limitTags = 1 }) => {
   const more = tags.length - limitTags
 
   const Tags = tags.splice(0, limitTags).map(tag => (
-    <StatusChip key={tag} text={tag} stateColor='#ececec' />
+    <StatusChip key={tag} text={tag} />
   ))
 
   return (