diff --git a/packages/react-components/react-tags-preview/src/components/InteractionTag/useInteractionTagStyles.styles.ts b/packages/react-components/react-tags-preview/src/components/InteractionTag/useInteractionTagStyles.styles.ts
index 7f0bac31248648..b16b66090f49c2 100644
--- a/packages/react-components/react-tags-preview/src/components/InteractionTag/useInteractionTagStyles.styles.ts
+++ b/packages/react-components/react-tags-preview/src/components/InteractionTag/useInteractionTagStyles.styles.ts
@@ -99,6 +99,7 @@ const useContentButtonStyles = makeStyles({
 
       [`& .${iconFilledClassName}`]: {
         display: 'inline',
+        color: tokens.colorNeutralForeground2BrandHover,
       },
       [`& .${iconRegularClassName}`]: {
         display: 'none',
@@ -110,6 +111,7 @@ const useContentButtonStyles = makeStyles({
 
       [`& .${iconFilledClassName}`]: {
         display: 'inline',
+        color: tokens.colorNeutralForeground2BrandPressed,
       },
       [`& .${iconRegularClassName}`]: {
         display: 'none',
@@ -118,15 +120,15 @@ const useContentButtonStyles = makeStyles({
   },
   brand: {
     backgroundColor: tokens.colorBrandBackground2,
-    color: tokens.colorBrandForeground2,
+    color: tokens.colorBrandForeground1,
     ':hover': {
       cursor: 'pointer',
       backgroundColor: tokens.colorBrandBackground2Hover,
-      color: tokens.colorBrandForeground2Hover,
+      color: tokens.colorCompoundBrandForeground1Hover,
     },
     ':hover:active': {
       backgroundColor: tokens.colorBrandBackground2Pressed,
-      color: tokens.colorBrandForeground2Pressed,
+      color: tokens.colorCompoundBrandForeground1Pressed,
     },
   },
 
@@ -256,16 +258,16 @@ const useDismissButtonStyles = makeStyles({
   },
   brand: {
     backgroundColor: tokens.colorBrandBackground2,
-    color: tokens.colorBrandForeground2,
+    color: tokens.colorBrandForeground1,
     borderLeftColor: tokens.colorBrandStroke2, // divider
     ':hover': {
       cursor: 'pointer',
       backgroundColor: tokens.colorBrandBackground2Hover,
-      color: tokens.colorBrandForeground2Hover,
+      color: tokens.colorCompoundBrandForeground1Hover,
     },
     ':hover:active': {
       backgroundColor: tokens.colorBrandBackground2Pressed,
-      color: tokens.colorBrandForeground2Pressed,
+      color: tokens.colorCompoundBrandForeground1Pressed,
     },
   },
 
diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx
index f6aadab05c227c..b9d6387ef45d60 100644
--- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TagGroup, Tag, TagProps } from '@fluentui/react-tags-preview';
+import { TagGroup, Tag, TagProps, tagClassNames } from '@fluentui/react-tags-preview';
 import {
   makeStyles,
   shorthands,
@@ -50,7 +50,14 @@ type OverflowMenuItemProps = {
 };
 
 const useMenuItemStyles = makeStyles({
-  menuItem: shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalXS),
+  menuItem: {
+    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalXS),
+    ':hover': {
+      [`& .${tagClassNames.root}`]: {
+        color: tokens.colorNeutralForeground2Hover,
+      },
+    },
+  },
   tag: {
     backgroundColor: 'transparent',
     ...shorthands.borderColor('transparent'),