diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/PeriodSelector.tsx b/frontend/src/component/admin/network/NetworkTrafficUsage/PeriodSelector.tsx
index 0c8b2c5666..e4fffcaddc 100644
--- a/frontend/src/component/admin/network/NetworkTrafficUsage/PeriodSelector.tsx
+++ b/frontend/src/component/admin/network/NetworkTrafficUsage/PeriodSelector.tsx
@@ -72,6 +72,7 @@ const Wrapper = styled('article')(({ theme }) => ({
         fontSize: theme.typography.body1.fontSize,
         padding: theme.spacing(0.5),
         borderRadius: theme.shape.borderRadius,
+        color: theme.palette.text.primary,
 
         '&.selected': {
             backgroundColor: theme.palette.secondary.light,
@@ -79,6 +80,7 @@ const Wrapper = styled('article')(({ theme }) => ({
     },
     'button:disabled': {
         cursor: 'default',
+        color: theme.palette.text.disabled,
     },
 }));