diff --git a/apps/vr-tests-react-components/src/stories/Table.stories.tsx b/apps/vr-tests-react-components/src/stories/Table.stories.tsx
index 77f34c603f4d48..d59978d23a2f85 100644
--- a/apps/vr-tests-react-components/src/stories/Table.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Table.stories.tsx
@@ -118,6 +118,49 @@ storiesOf('Table - cell actions', module)
       </Table>
     ),
     { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
+  )
+  .addStory(
+    'always visible',
+    () => (
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {columns.map(column => (
+              <TableHeaderCell key={column.columnKey}>{column.label}</TableHeaderCell>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {items.map(item => (
+            <TableRow key={item.file.label} className="row">
+              <TableCell>
+                <TableCellLayout media={item.file.icon}>
+                  {item.file.label}
+                  <TableCellActions visible>
+                    <Button icon={<EditRegular />} appearance="subtle" />
+                    <Button icon={<MoreHorizontalRegular />} appearance="subtle" />
+                  </TableCellActions>
+                </TableCellLayout>
+              </TableCell>
+              <TableCell>
+                <TableCellLayout
+                  media={
+                    <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
+                  }
+                >
+                  {item.author.label}
+                </TableCellLayout>
+              </TableCell>
+              <TableCell>{item.lastUpdated.label}</TableCell>
+              <TableCell>
+                <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    ),
+    { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
   );
 
 storiesOf('Table', module)
diff --git a/change/@fluentui-react-table-d3a482b6-52de-46b3-9dee-14bff160bbe6.json b/change/@fluentui-react-table-d3a482b6-52de-46b3-9dee-14bff160bbe6.json
new file mode 100644
index 00000000000000..72b1ee6c5f24e5
--- /dev/null
+++ b/change/@fluentui-react-table-d3a482b6-52de-46b3-9dee-14bff160bbe6.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: Adds `visible` prop to `TableCellActions`",
+  "packageName": "@fluentui/react-table",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-table/etc/react-table.api.md b/packages/react-components/react-table/etc/react-table.api.md
index a049e92436d115..32023ee3e96a1b 100644
--- a/packages/react-components/react-table/etc/react-table.api.md
+++ b/packages/react-components/react-table/etc/react-table.api.md
@@ -99,7 +99,9 @@ export const TableCellActions: ForwardRefComponent<TableCellActionsProps>;
 export const tableCellActionsClassNames: SlotClassNames<TableCellActionsSlots>;
 
 // @public
-export type TableCellActionsProps = ComponentProps<TableCellActionsSlots> & {};
+export type TableCellActionsProps = ComponentProps<TableCellActionsSlots> & {
+    visible?: boolean;
+};
 
 // @public (undocumented)
 export type TableCellActionsSlots = {
@@ -107,7 +109,7 @@ export type TableCellActionsSlots = {
 };
 
 // @public
-export type TableCellActionsState = ComponentState<TableCellActionsSlots>;
+export type TableCellActionsState = ComponentState<TableCellActionsSlots> & Pick<Required<TableCellActionsProps>, 'visible'>;
 
 // @public (undocumented)
 export const tableCellClassName = "fui-TableCell";
diff --git a/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.types.ts b/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.types.ts
index 66a8611567bf8e..7523f628c2d2d4 100644
--- a/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.types.ts
+++ b/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.types.ts
@@ -7,9 +7,16 @@ export type TableCellActionsSlots = {
 /**
  * TableCellActions Props
  */
-export type TableCellActionsProps = ComponentProps<TableCellActionsSlots> & {};
+export type TableCellActionsProps = ComponentProps<TableCellActionsSlots> & {
+  /**
+   * When true, the actions are always visible regardless of row hover.
+   * Can be useful keeping the actions visible when a popout surface is opened.
+   */
+  visible?: boolean;
+};
 
 /**
  * State used in rendering TableCellActions
  */
-export type TableCellActionsState = ComponentState<TableCellActionsSlots>;
+export type TableCellActionsState = ComponentState<TableCellActionsSlots> &
+  Pick<Required<TableCellActionsProps>, 'visible'>;
diff --git a/packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts b/packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts
index edad8db4e0a576..a37db7b444d68c 100644
--- a/packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts
+++ b/packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts
@@ -24,5 +24,6 @@ export const useTableCellActions_unstable = (
       ref: useMergedRefs(ref, useFocusWithin()),
       ...props,
     }),
+    visible: props.visible ?? false,
   };
 };
diff --git a/packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts b/packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts
index c4e77441cb50bb..7f194415f60771 100644
--- a/packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts
+++ b/packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts
@@ -1,5 +1,4 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
 import type { TableCellActionsSlots, TableCellActionsState } from './TableCellActions.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
@@ -19,7 +18,6 @@ const useStyles = makeStyles({
     transform: 'translateY(-50%)',
     opacity: 0,
     marginLeft: 'auto',
-    backgroundColor: tokens.colorNeutralBackground1Hover,
 
     ...createCustomFocusIndicatorStyle(
       {
@@ -28,6 +26,10 @@ const useStyles = makeStyles({
       { selector: 'focus-within' },
     ),
   },
+
+  visible: {
+    opacity: 1,
+  },
 });
 
 /**
@@ -35,7 +37,12 @@ const useStyles = makeStyles({
  */
 export const useTableCellActionsStyles_unstable = (state: TableCellActionsState): TableCellActionsState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(tableCellActionsClassNames.root, styles.root, state.root.className);
+  state.root.className = mergeClasses(
+    tableCellActionsClassNames.root,
+    styles.root,
+    state.visible && styles.visible,
+    state.root.className,
+  );
 
   return state;
 };
diff --git a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts
index 8ddf4e50a82d3b..bc46615dfb0ff9 100644
--- a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts
+++ b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts
@@ -18,7 +18,9 @@ const useStyles = makeStyles({
     color: tokens.colorNeutralForeground1,
     ':hover': {
       backgroundColor: tokens.colorNeutralBackground1Hover,
+      color: tokens.colorNeutralForeground1Hover,
       [`& .${tableCellActionsClassNames.root}`]: {
+        backgroundColor: tokens.colorNeutralBackground1Hover,
         opacity: 1,
       },
     },