diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx
index c136fa434eb8bc..fccd9fb634faa0 100644
--- a/docs/src/components/header/HeaderNavBar.tsx
+++ b/docs/src/components/header/HeaderNavBar.tsx
@@ -369,7 +369,9 @@ export default function HeaderNavBar() {
                         href={ROUTES.productToolpad}
                         icon={<IconImage name="product-toolpad" />}
                         name="MUI Toolpad"
-                        chip={<Chip label="Alpha" size="small" color="grey" />}
+                        chip={
+                          <Chip label="Alpha" size="small" color="primary" variant="outlined" />
+                        }
                         description="Low-code admin builder."
                         onKeyDown={handleKeyDown}
                       />
diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx
index c2fd0eaeb03e51..637165e365fac9 100644
--- a/docs/src/components/header/HeaderNavDropdown.tsx
+++ b/docs/src/components/header/HeaderNavDropdown.tsx
@@ -224,7 +224,12 @@ export default function HeaderNavDropdown() {
                           >
                             {item.name}
                             {item.chip ? (
-                              <Chip size="small" label={item.chip} color="grey" />
+                              <Chip
+                                size="small"
+                                label={item.chip}
+                                color="primary"
+                                variant="outlined"
+                              />
                             ) : null}
                           </Box>
                           <Typography variant="body2" color="text.secondary">
@@ -270,7 +275,12 @@ export default function HeaderNavDropdown() {
                           >
                             {item.name}
                             {item.chip ? (
-                              <Chip size="small" label={item.chip} color="grey" />
+                              <Chip
+                                size="small"
+                                label={item.chip}
+                                color="primary"
+                                variant="outlined"
+                              />
                             ) : null}
                           </Box>
                           <Typography variant="body2" color="text.secondary">
diff --git a/docs/src/modules/components/MuiProductSelector.tsx b/docs/src/modules/components/MuiProductSelector.tsx
index 204ec4ba6e44e0..a86c8195ef635e 100644
--- a/docs/src/modules/components/MuiProductSelector.tsx
+++ b/docs/src/modules/components/MuiProductSelector.tsx
@@ -198,7 +198,7 @@ export default function MuiProductSelector() {
             icon={<IconImage name="product-toolpad" />}
             name="MUI Toolpad"
             description="Low-code admin builder."
-            chip={<Chip size="small" label="Alpha" color="grey" />}
+            chip={<Chip size="small" label="Alpha" color="primary" variant="outlined" />}
           />
         </Link>
       </li>