diff --git a/.changeset/mosaic-menu-item-color.md b/.changeset/mosaic-menu-item-color.md
new file mode 100644
index 00000000000..7f749129636
--- /dev/null
+++ b/.changeset/mosaic-menu-item-color.md
@@ -0,0 +1,5 @@
+---
+'@clerk/mosaic': patch
+---
+
+Menu items now use the secondary foreground color at rest and the primary foreground color on hover, matching the `UserButton` menu rows.
diff --git a/packages/mosaic/src/components/menu/menu.styles.ts b/packages/mosaic/src/components/menu/menu.styles.ts
index fe23ca7bd38..11ec39b5c9a 100644
--- a/packages/mosaic/src/components/menu/menu.styles.ts
+++ b/packages/mosaic/src/components/menu/menu.styles.ts
@@ -95,6 +95,13 @@ export const item = stylex.create({
         ':hover': colorVars['--cl-color-neutral-alpha-100'],
       },
     },
+    color: {
+      default: colorVars['--cl-color-foreground-secondary'],
+      ':is([data-active])': colorVars['--cl-color-foreground'],
+      '@media (hover: hover)': {
+        ':hover': colorVars['--cl-color-foreground'],
+      },
+    },
     cursor: { default: 'pointer', ':is([data-disabled])': 'not-allowed' },
     display: 'flex',
     // The viewport is a height-capped flex column: without this the rows squash to fit the cap