diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx
index 6a62f99818448c..5d53a9b03d7100 100644
--- a/docs/src/components/header/HeaderNavBar.tsx
+++ b/docs/src/components/header/HeaderNavBar.tsx
@@ -27,8 +27,8 @@ const Navigation = styled('nav')(({ theme }) => [
     },
     '& li': {
       ...theme.typography.body2,
-      color: (theme.vars || theme).palette.text.primary,
-      fontWeight: theme.typography.fontWeightBold,
+      color: (theme.vars || theme).palette.text.secondary,
+      fontWeight: theme.typography.fontWeightSemiBold,
       '& > a, & > button': {
         display: 'inline-block',
         color: 'inherit',
@@ -38,7 +38,7 @@ const Navigation = styled('nav')(({ theme }) => [
         borderRadius: (theme.vars || theme).shape.borderRadius,
         border: '1px solid transparent',
         '&:hover': {
-          color: (theme.vars || theme).palette.grey[900],
+          color: (theme.vars || theme).palette.text.primary,
           backgroundColor: (theme.vars || theme).palette.grey[50],
           borderColor: (theme.vars || theme).palette.grey[100],
           '@media (hover: none)': {