diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/PeriodSelector.tsx b/frontend/src/component/admin/network/NetworkTrafficUsage/PeriodSelector.tsx
index e4fffcaddc..2a35f1a1dc 100644
--- a/frontend/src/component/admin/network/NetworkTrafficUsage/PeriodSelector.tsx
+++ b/frontend/src/component/admin/network/NetworkTrafficUsage/PeriodSelector.tsx
@@ -73,6 +73,7 @@ const Wrapper = styled('article')(({ theme }) => ({
         padding: theme.spacing(0.5),
         borderRadius: theme.shape.borderRadius,
         color: theme.palette.text.primary,
+        transition: 'background-color 0.2s ease',
 
         '&.selected': {
             backgroundColor: theme.palette.secondary.light,
@@ -82,6 +83,9 @@ const Wrapper = styled('article')(({ theme }) => ({
         cursor: 'default',
         color: theme.palette.text.disabled,
     },
+    'button:hover': {
+        backgroundColor: theme.palette.action.hover,
+    },
 }));
 
 const MonthSelector = styled('article')(({ theme }) => ({