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 975c49a8ee50e..91eba5122e299 100644
--- a/apps/vr-tests-react-components/src/stories/Table.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Table.stories.tsx
@@ -18,7 +18,8 @@ import {
   TableHeaderCell,
   TableCell,
   TableRow,
-  TablePrimaryCell,
+  TableCellLayout,
+  TableCellPrimaryLayout,
   TableSelectionCell,
   TableCellActions,
 } from '@fluentui/react-table';
@@ -90,22 +91,28 @@ storiesOf('Table - cell actions', module)
         <TableBody>
           {items.map(item => (
             <TableRow key={item.file.label} className="row">
-              <TableCell media={item.file.icon}>
-                {item.file.label}
-                <TableCellActions>
-                  <Button icon={<EditRegular />} appearance="subtle" />
-                  <Button icon={<MoreHorizontalRegular />} appearance="subtle" />
-                </TableCellActions>
+              <TableCell>
+                <TableCellLayout media={item.file.icon}>
+                  {item.file.label}
+                  <TableCellActions>
+                    <Button icon={<EditRegular />} appearance="subtle" />
+                    <Button icon={<MoreHorizontalRegular />} appearance="subtle" />
+                  </TableCellActions>
+                </TableCellLayout>
               </TableCell>
-              <TableCell
-                media={
-                  <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
-                }
-              >
-                {item.author.label}
+              <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 media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+              <TableCell>
+                <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>
@@ -129,16 +136,24 @@ storiesOf('Table', module)
         <TableBody>
           {items.map(item => (
             <TableRow key={item.file.label}>
-              <TableCell media={item.file.icon}>{item.file.label}</TableCell>
-              <TableCell
-                media={
-                  <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
-                }
-              >
-                {item.author.label}
+              <TableCell>
+                <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>
+              </TableCell>
+              <TableCell>
+                <TableCellLayout
+                  media={
+                    <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
+                  }
+                >
+                  {item.author.label}
+                </TableCellLayout>
+              </TableCell>
+              <TableCell>
+                <TableCellLayout>{item.lastUpdated.label}</TableCellLayout>
+              </TableCell>
+              <TableCell>
+                <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
               </TableCell>
-              <TableCell>{item.lastUpdated.label}</TableCell>
-              <TableCell media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
             </TableRow>
           ))}
         </TableBody>
@@ -158,20 +173,26 @@ storiesOf('Table', module)
       <TableBody>
         {items.map(item => (
           <TableRow key={item.file.label}>
-            <TableCell media={item.file.icon}>{item.file.label}</TableCell>
-            <TableCell
-              media={
-                <Avatar
-                  name={item.author.label}
-                  size={24}
-                  badge={{ status: item.author.status as PresenceBadgeStatus }}
-                />
-              }
-            >
-              {item.author.label}
+            <TableCell>
+              <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>
+            </TableCell>
+            <TableCell>
+              <TableCellLayout
+                media={
+                  <Avatar
+                    name={item.author.label}
+                    size={24}
+                    badge={{ status: item.author.status as PresenceBadgeStatus }}
+                  />
+                }
+              >
+                {item.author.label}
+              </TableCellLayout>
             </TableCell>
             <TableCell>{item.lastUpdated.label}</TableCell>
-            <TableCell media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
@@ -189,20 +210,26 @@ storiesOf('Table', module)
       <TableBody>
         {items.map(item => (
           <TableRow key={item.file.label}>
-            <TableCell media={item.file.icon}>{item.file.label}</TableCell>
-            <TableCell
-              media={
-                <Avatar
-                  name={item.author.label}
-                  size={20}
-                  badge={{ status: item.author.status as PresenceBadgeStatus }}
-                />
-              }
-            >
-              {item.author.label}
+            <TableCell>
+              <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>
+            </TableCell>
+            <TableCell>
+              <TableCellLayout
+                media={
+                  <Avatar
+                    name={item.author.label}
+                    size={20}
+                    badge={{ status: item.author.status as PresenceBadgeStatus }}
+                  />
+                }
+              >
+                {item.author.label}
+              </TableCellLayout>
             </TableCell>
             <TableCell>{item.lastUpdated.label}</TableCell>
-            <TableCell media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
@@ -220,14 +247,18 @@ storiesOf('Table', module)
       <TableBody>
         {items.map(item => (
           <TableRow key={item.file.label}>
-            <TablePrimaryCell media={item.file.icon} main={item.file.label} secondary="Your organization" />
-            <TableCell
+            <TableCell>
+              <TableCellPrimaryLayout media={item.file.icon} main={item.file.label} secondary="Your organization" />
+            </TableCell>
+            <TableCellLayout
               media={<Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />}
             >
               {item.author.label}
-            </TableCell>
+            </TableCellLayout>
             <TableCell>{item.lastUpdated.label}</TableCell>
-            <TableCell media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
@@ -249,16 +280,22 @@ storiesOf('Table', module)
           {items.map(item => (
             <TableRow key={item.file.label}>
               <TableSelectionCell />
-              <TableCell media={item.file.icon}>{item.file.label}</TableCell>
-              <TableCell
-                media={
-                  <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
-                }
-              >
-                {item.author.label}
+              <TableCell>
+                <TableCellLayout media={item.file.icon}>{item.file.label}</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 media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+              <TableCell>
+                <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>
@@ -282,16 +319,22 @@ storiesOf('Table', module)
           {items.map(item => (
             <TableRow key={item.file.label}>
               <TableSelectionCell checked={true} />
-              <TableCell media={item.file.icon}>{item.file.label}</TableCell>
-              <TableCell
-                media={
-                  <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
-                }
-              >
-                {item.author.label}
+              <TableCell>
+                <TableCellLayout media={item.file.icon}>{item.file.label}</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 media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+              <TableCell>
+                <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>
@@ -315,16 +358,22 @@ storiesOf('Table', module)
           {items.map((item, i) => (
             <TableRow key={item.file.label}>
               <TableSelectionCell checked={!!(i % 2)} />
-              <TableCell media={item.file.icon}>{item.file.label}</TableCell>
-              <TableCell
-                media={
-                  <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
-                }
-              >
-                {item.author.label}
+              <TableCell>
+                <TableCellLayout media={item.file.icon}>{item.file.label}</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 media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+              <TableCell>
+                <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>
@@ -348,16 +397,22 @@ storiesOf('Table', module)
           {items.map(item => (
             <TableRow key={item.file.label}>
               <TableSelectionCell type="radio" />
-              <TableCell media={item.file.icon}>{item.file.label}</TableCell>
-              <TableCell
-                media={
-                  <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
-                }
-              >
-                {item.author.label}
+              <TableCell>
+                <TableCellLayout media={item.file.icon}>{item.file.label}</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 media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+              <TableCell>
+                <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>
@@ -381,16 +436,23 @@ storiesOf('Table', module)
           {items.map((item, i) => (
             <TableRow key={item.file.label}>
               <TableSelectionCell type="radio" checked={i === 1} />
-              <TableCell media={item.file.icon}>{item.file.label}</TableCell>
-              <TableCell
-                media={
-                  <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
-                }
-              >
-                {item.author.label}
+              <TableCell>
+                <TableCellLayout media={item.file.icon}>{item.file.label}</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 media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+              <TableCell>
+                <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>
diff --git a/change/@fluentui-react-components-2046632a-d072-42f5-96ee-708958bc4c0c.json b/change/@fluentui-react-components-2046632a-d072-42f5-96ee-708958bc4c0c.json
new file mode 100644
index 0000000000000..3811fc8efe53b
--- /dev/null
+++ b/change/@fluentui-react-components-2046632a-d072-42f5-96ee-708958bc4c0c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Stop exporting TablePrimaryCell and associated utilities and types",
+  "packageName": "@fluentui/react-components",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-table-4d5c0e81-f51c-477b-93ee-ed16314a396f.json b/change/@fluentui-react-table-4d5c0e81-f51c-477b-93ee-ed16314a396f.json
new file mode 100644
index 0000000000000..f78fd6590bd40
--- /dev/null
+++ b/change/@fluentui-react-table-4d5c0e81-f51c-477b-93ee-ed16314a396f.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: TableCell layouts are handled by layout components",
+  "packageName": "@fluentui/react-table",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-components/etc/react-components.unstable.api.md b/packages/react-components/react-components/etc/react-components.unstable.api.md
index 2be227e69f860..86e63ab358207 100644
--- a/packages/react-components/react-components/etc/react-components.unstable.api.md
+++ b/packages/react-components/react-components/etc/react-components.unstable.api.md
@@ -157,7 +157,6 @@ import { renderTableCellLayout_unstable } from '@fluentui/react-table';
 import { renderTableCellPrimaryLayout_unstable } from '@fluentui/react-table';
 import { renderTableHeader_unstable } from '@fluentui/react-table';
 import { renderTableHeaderCell_unstable } from '@fluentui/react-table';
-import { renderTablePrimaryCell_unstable } from '@fluentui/react-table';
 import { renderTableRow_unstable } from '@fluentui/react-table';
 import { renderTableSelectionCell_unstable } from '@fluentui/react-table';
 import { renderToolbar_unstable } from '@fluentui/react-toolbar';
@@ -217,10 +216,6 @@ import { tableHeaderClassNames } from '@fluentui/react-table';
 import { TableHeaderProps } from '@fluentui/react-table';
 import { TableHeaderSlots } from '@fluentui/react-table';
 import { TableHeaderState } from '@fluentui/react-table';
-import { TablePrimaryCell } from '@fluentui/react-table';
-import { TablePrimaryCellProps } from '@fluentui/react-table';
-import { TablePrimaryCellSlots } from '@fluentui/react-table';
-import { TablePrimaryCellState } from '@fluentui/react-table';
 import { TableProps } from '@fluentui/react-table';
 import { TableRow } from '@fluentui/react-table';
 import { tableRowClassName } from '@fluentui/react-table';
@@ -311,8 +306,6 @@ import { useTableHeader_unstable } from '@fluentui/react-table';
 import { useTableHeaderCell_unstable } from '@fluentui/react-table';
 import { useTableHeaderCellStyles_unstable } from '@fluentui/react-table';
 import { useTableHeaderStyles_unstable } from '@fluentui/react-table';
-import { useTablePrimaryCell_unstable } from '@fluentui/react-table';
-import { useTablePrimaryCellStyles_unstable } from '@fluentui/react-table';
 import { useTableRow_unstable } from '@fluentui/react-table';
 import { useTableRowStyles_unstable } from '@fluentui/react-table';
 import { useTableSelectionCell_unstable } from '@fluentui/react-table';
@@ -628,8 +621,6 @@ export { renderTableHeader_unstable }
 
 export { renderTableHeaderCell_unstable }
 
-export { renderTablePrimaryCell_unstable }
-
 export { renderTableRow_unstable }
 
 export { renderTableSelectionCell_unstable }
@@ -748,14 +739,6 @@ export { TableHeaderSlots }
 
 export { TableHeaderState }
 
-export { TablePrimaryCell }
-
-export { TablePrimaryCellProps }
-
-export { TablePrimaryCellSlots }
-
-export { TablePrimaryCellState }
-
 export { TableProps }
 
 export { TableRow }
@@ -936,10 +919,6 @@ export { useTableHeaderCellStyles_unstable }
 
 export { useTableHeaderStyles_unstable }
 
-export { useTablePrimaryCell_unstable }
-
-export { useTablePrimaryCellStyles_unstable }
-
 export { useTableRow_unstable }
 
 export { useTableRowStyles_unstable }
diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts
index 1e2f4bc81476b..61c1a5682127f 100644
--- a/packages/react-components/react-components/src/unstable/index.ts
+++ b/packages/react-components/react-components/src/unstable/index.ts
@@ -263,10 +263,6 @@ export {
   useTableSelectionCell_unstable,
   renderTableSelectionCell_unstable,
   tableSelectionCellClassNames,
-  TablePrimaryCell,
-  useTablePrimaryCellStyles_unstable,
-  useTablePrimaryCell_unstable,
-  renderTablePrimaryCell_unstable,
   TableCellActions,
   useTableCellActionsStyles_unstable,
   useTableCellActions_unstable,
@@ -310,9 +306,6 @@ export type {
   TableCellActionsProps,
   TableCellActionsState,
   TableCellActionsSlots,
-  TablePrimaryCellProps,
-  TablePrimaryCellSlots,
-  TablePrimaryCellState,
 } from '@fluentui/react-table';
 
 export {
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 81b2a1bfa2bcf..e841abaac9645 100644
--- a/packages/react-components/react-table/etc/react-table.api.md
+++ b/packages/react-components/react-table/etc/react-table.api.md
@@ -55,9 +55,6 @@ export const renderTableHeader_unstable: (state: TableHeaderState) => JSX.Elemen
 // @public
 export const renderTableHeaderCell_unstable: (state: TableHeaderCellState) => JSX.Element;
 
-// @public
-export const renderTablePrimaryCell_unstable: (state: TablePrimaryCellState) => JSX.Element;
-
 // @public
 export const renderTableRow_unstable: (state: TableRowState) => JSX.Element;
 
@@ -168,7 +165,6 @@ export type TableCellProps = ComponentProps<TableCellSlots> & {};
 // @public (undocumented)
 export type TableCellSlots = {
     root: Slot<'td', 'div'>;
-    media?: Slot<'span'>;
 };
 
 // @public
@@ -241,25 +237,6 @@ export type TableHeaderSlots = {
 // @public
 export type TableHeaderState = ComponentState<TableHeaderSlots>;
 
-// @public
-export const TablePrimaryCell: ForwardRefComponent<TablePrimaryCellProps>;
-
-// @public (undocumented)
-export const tablePrimaryCellClassNames: SlotClassNames<TablePrimaryCellSlots>;
-
-// @public
-export type TablePrimaryCellProps = ComponentProps<Partial<TablePrimaryCellSlots>> & {};
-
-// @public (undocumented)
-export type TablePrimaryCellSlots = {
-    main: Slot<'span'>;
-    secondary: Slot<'span'>;
-    wrapper: Slot<'div'>;
-} & TableCellSlots;
-
-// @public
-export type TablePrimaryCellState = ComponentState<TablePrimaryCellSlots>;
-
 // @public
 export type TableProps = ComponentProps<TableSlots> & Partial<TableContextValue>;
 
@@ -304,7 +281,7 @@ export type TableSelectionCellSlots = {
 } & Pick<TableCellSlots, 'root'>;
 
 // @public
-export type TableSelectionCellState = ComponentState<TableSelectionCellSlots> & Pick<TableCellState, 'media'> & Pick<Required<TableSelectionCellProps>, 'type' | 'checked'>;
+export type TableSelectionCellState = ComponentState<TableSelectionCellSlots> & Pick<Required<TableSelectionCellProps>, 'type' | 'checked'>;
 
 // @public (undocumented)
 export interface TableSelectionState {
@@ -407,12 +384,6 @@ export interface UseTableOptions<TItem, TRowState extends RowState<TItem> = RowS
     sortState?: SortState;
 }
 
-// @public
-export const useTablePrimaryCell_unstable: (props: TablePrimaryCellProps, ref: React_2.Ref<HTMLElement>) => TablePrimaryCellState;
-
-// @public
-export const useTablePrimaryCellStyles_unstable: (state: TablePrimaryCellState) => TablePrimaryCellState;
-
 // @public
 export const useTableRow_unstable: (props: TableRowProps, ref: React_2.Ref<HTMLElement>) => TableRowState;
 
diff --git a/packages/react-components/react-table/src/TablePrimaryCell.ts b/packages/react-components/react-table/src/TablePrimaryCell.ts
deleted file mode 100644
index be51f7bfd1965..0000000000000
--- a/packages/react-components/react-table/src/TablePrimaryCell.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/TablePrimaryCell/index';
diff --git a/packages/react-components/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap b/packages/react-components/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap
index 11da18e06fec2..b31cd41ccc1cd 100644
--- a/packages/react-components/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap
+++ b/packages/react-components/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap
@@ -34,7 +34,6 @@ exports[`Table renders as div if \`noNativeElements\` is set 1`] = `
           class="fui-TableCell"
           role="cell"
         >
-           
           Cell
         </div>
       </div>
diff --git a/packages/react-components/react-table/src/components/Table/useTableStyles.ts b/packages/react-components/react-table/src/components/Table/useTableStyles.ts
index 4ea585c732a08..c7a5c1e276408 100644
--- a/packages/react-components/react-table/src/components/Table/useTableStyles.ts
+++ b/packages/react-components/react-table/src/components/Table/useTableStyles.ts
@@ -12,7 +12,11 @@ export const tableClassNames: SlotClassNames<TableSlots> = {
  */
 const useStyles = makeStyles({
   root: {
+    verticalAlign: 'middle',
+    borderCollapse: 'collapse',
     width: '100%',
+    display: 'table',
+    tableLayout: 'fixed',
   },
 });
 
diff --git a/packages/react-components/react-table/src/components/TableBody/useTableBodyStyles.ts b/packages/react-components/react-table/src/components/TableBody/useTableBodyStyles.ts
index 061f9ff43a9b5..c819d69fb6fd0 100644
--- a/packages/react-components/react-table/src/components/TableBody/useTableBodyStyles.ts
+++ b/packages/react-components/react-table/src/components/TableBody/useTableBodyStyles.ts
@@ -1,7 +1,13 @@
-import { mergeClasses } from '@griffel/react';
+import { mergeClasses, makeStyles } from '@griffel/react';
 import type { TableBodySlots, TableBodyState } from './TableBody.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
+const useStyles = makeStyles({
+  root: {
+    display: 'table-row-group',
+  },
+});
+
 export const tableBodyClassName = 'fui-TableBody';
 export const tableBodyClassNames: SlotClassNames<TableBodySlots> = {
   root: 'fui-TableBody',
@@ -11,7 +17,8 @@ export const tableBodyClassNames: SlotClassNames<TableBodySlots> = {
  * Apply styling to the TableBody slots based on the state
  */
 export const useTableBodyStyles_unstable = (state: TableBodyState): TableBodyState => {
-  state.root.className = mergeClasses(tableBodyClassName, state.root.className);
+  const styles = useStyles();
+  state.root.className = mergeClasses(tableBodyClassName, styles.root, state.root.className);
 
   return state;
 };
diff --git a/packages/react-components/react-table/src/components/TableCell/TableCell.test.tsx b/packages/react-components/react-table/src/components/TableCell/TableCell.test.tsx
index 7828ca24e7242..a46a4f3e13e01 100644
--- a/packages/react-components/react-table/src/components/TableCell/TableCell.test.tsx
+++ b/packages/react-components/react-table/src/components/TableCell/TableCell.test.tsx
@@ -16,15 +16,6 @@ describe('TableCell', () => {
     renderOptions: {
       container: tr,
     },
-    testOptions: {
-      'has-static-classnames': [
-        {
-          props: {
-            media: 'Test Icon',
-          },
-        },
-      ],
-    },
     displayName: 'TableCell',
   });
 
diff --git a/packages/react-components/react-table/src/components/TableCell/TableCell.types.ts b/packages/react-components/react-table/src/components/TableCell/TableCell.types.ts
index c01684a836618..d3227e64d45e9 100644
--- a/packages/react-components/react-table/src/components/TableCell/TableCell.types.ts
+++ b/packages/react-components/react-table/src/components/TableCell/TableCell.types.ts
@@ -2,8 +2,6 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utili
 
 export type TableCellSlots = {
   root: Slot<'td', 'div'>;
-
-  media?: Slot<'span'>;
 };
 
 /**
diff --git a/packages/react-components/react-table/src/components/TableCell/__snapshots__/TableCell.test.tsx.snap b/packages/react-components/react-table/src/components/TableCell/__snapshots__/TableCell.test.tsx.snap
index 6aabb853b15d1..c26a4ce09475b 100644
--- a/packages/react-components/react-table/src/components/TableCell/__snapshots__/TableCell.test.tsx.snap
+++ b/packages/react-components/react-table/src/components/TableCell/__snapshots__/TableCell.test.tsx.snap
@@ -5,7 +5,6 @@ exports[`TableCell renders a default state 1`] = `
   <td
     class="fui-TableCell"
   >
-     
     Default TableCell
   </td>
 </tr>
diff --git a/packages/react-components/react-table/src/components/TableCell/renderTableCell.tsx b/packages/react-components/react-table/src/components/TableCell/renderTableCell.tsx
index 7c4c4a84d841f..308a9675c3b25 100644
--- a/packages/react-components/react-table/src/components/TableCell/renderTableCell.tsx
+++ b/packages/react-components/react-table/src/components/TableCell/renderTableCell.tsx
@@ -8,10 +8,5 @@ import type { TableCellState, TableCellSlots } from './TableCell.types';
 export const renderTableCell_unstable = (state: TableCellState) => {
   const { slots, slotProps } = getSlots<TableCellSlots>(state);
 
-  // TODO Add additional slots in the appropriate place
-  return (
-    <slots.root {...slotProps.root}>
-      {slots.media && <slots.media {...slotProps.media} />} {slotProps.root.children}
-    </slots.root>
-  );
+  return <slots.root {...slotProps.root} />;
 };
diff --git a/packages/react-components/react-table/src/components/TableCell/useTableCell.ts b/packages/react-components/react-table/src/components/TableCell/useTableCell.ts
index 3b19ff4644325..1d64891da000e 100644
--- a/packages/react-components/react-table/src/components/TableCell/useTableCell.ts
+++ b/packages/react-components/react-table/src/components/TableCell/useTableCell.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { getNativeElementProps } from '@fluentui/react-utilities';
 import type { TableCellProps, TableCellState } from './TableCell.types';
 import { useTableContext } from '../../contexts/tableContext';
 
@@ -20,9 +20,7 @@ export const useTableCell_unstable = (props: TableCellProps, ref: React.Ref<HTML
   return {
     components: {
       root: rootComponent,
-      media: 'span',
     },
-    media: resolveShorthand(props.media),
     root: getNativeElementProps(rootComponent, {
       ref,
       role: rootComponent === 'div' ? 'cell' : undefined,
diff --git a/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.ts b/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.ts
index 84dd3d9a109be..26916faa33be0 100644
--- a/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.ts
+++ b/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.ts
@@ -6,7 +6,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 export const tableCellClassName = 'fui-TableCell';
 export const tableCellClassNames: SlotClassNames<TableCellSlots> = {
   root: tableCellClassName,
-  media: 'fui-TableCell__media',
 };
 
 /**
@@ -14,16 +13,9 @@ export const tableCellClassNames: SlotClassNames<TableCellSlots> = {
  */
 const useStyles = makeStyles({
   root: {
+    verticalAlign: 'middle',
+    display: 'table-cell',
     ...shorthands.padding('0px', tokens.spacingHorizontalS),
-    display: 'flex',
-    alignItems: 'center',
-    ...shorthands.gap(tokens.spacingHorizontalS),
-    ...shorthands.flex(1, 1, '0px'),
-  },
-
-  media: {
-    display: 'flex',
-    alignItems: 'center',
   },
 });
 
@@ -33,9 +25,5 @@ const useStyles = makeStyles({
 export const useTableCellStyles_unstable = (state: TableCellState): TableCellState => {
   const styles = useStyles();
   state.root.className = mergeClasses(tableCellClassNames.root, styles.root, state.root.className);
-  if (state.media) {
-    state.media.className = mergeClasses(tableCellClassNames.media, styles.media);
-  }
-
   return state;
 };
diff --git a/packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts b/packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts
index fb7a52fcb4612..8e58908c1d231 100644
--- a/packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts
+++ b/packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts
@@ -1,4 +1,4 @@
-import { mergeClasses } from '@griffel/react';
+import { mergeClasses, makeStyles } from '@griffel/react';
 import type { TableHeaderSlots, TableHeaderState } from './TableHeader.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
@@ -7,11 +7,18 @@ export const tableHeaderClassNames: SlotClassNames<TableHeaderSlots> = {
   root: 'fui-TableHeader',
 };
 
+const useStyles = makeStyles({
+  root: {
+    display: 'table-row-group',
+  },
+});
+
 /**
  * Apply styling to the TableHeader slots based on the state
  */
 export const useTableHeaderStyles_unstable = (state: TableHeaderState): TableHeaderState => {
-  state.root.className = mergeClasses(tableHeaderClassName, state.root.className);
+  const styles = useStyles();
+  state.root.className = mergeClasses(tableHeaderClassName, styles.root, state.root.className);
 
   return state;
 };
diff --git a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts
index 659ed3d2a17f3..5bd080863990d 100644
--- a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts
+++ b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts
@@ -15,14 +15,13 @@ export const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {
  */
 const useStyles = makeStyles({
   root: {
-    minHeight: '44px',
+    display: 'table-cell',
+    verticalAlign: 'middle',
     ...shorthands.padding('0px', tokens.spacingHorizontalS),
-    display: 'flex',
-    alignItems: 'center',
-    ...shorthands.flex(1, 1, '0px'),
   },
 
   resetButton: {
+    resize: 'horizontal',
     boxSizing: 'content-box',
     backgroundColor: 'inherit',
     color: 'inherit',
@@ -36,11 +35,14 @@ const useStyles = makeStyles({
     textAlign: 'unset',
   },
   button: {
+    width: '100%',
     display: 'flex',
     flexGrow: 1,
     height: '100%',
     alignItems: 'center',
     ...shorthands.gap(tokens.spacingHorizontalS),
+    minHeight: '44px',
+    ...shorthands.flex(1, 1, '0px'),
   },
   sortable: {
     cursor: 'pointer',
diff --git a/packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.test.tsx b/packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.test.tsx
deleted file mode 100644
index 667c97cf883b9..0000000000000
--- a/packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.test.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { TablePrimaryCell } from './TablePrimaryCell';
-import { isConformant } from '../../common/isConformant';
-import { TablePrimaryCellProps } from './TablePrimaryCell.types';
-import { tableContextDefaultValue, TableContextProvider } from '../../contexts/tableContext';
-
-const tr = document.createElement('tr');
-describe('TablePrimaryCell', () => {
-  beforeEach(() => {
-    document.body.appendChild(tr);
-  });
-  isConformant({
-    Component: TablePrimaryCell as React.FC<TablePrimaryCellProps>,
-    displayName: 'TablePrimaryCell',
-    renderOptions: {
-      container: tr,
-    },
-    testOptions: {
-      'has-static-classnames': [
-        {
-          props: {
-            media: 'Test Icon',
-            main: 'Main content',
-            secondary: 'Secondary content',
-          },
-        },
-      ],
-    },
-  });
-
-  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
-
-  it('renders a default state', () => {
-    const result = render(<TablePrimaryCell>Default TablePrimaryCell</TablePrimaryCell>, { container: tr });
-    expect(result.container).toMatchSnapshot();
-  });
-
-  it('renders as div if `noNativeElements` is set', () => {
-    const { container } = render(
-      <TableContextProvider value={{ ...tableContextDefaultValue, noNativeElements: true }}>
-        <TablePrimaryCell>Table cell</TablePrimaryCell>
-      </TableContextProvider>,
-    );
-    expect(container.firstElementChild?.tagName).toEqual('DIV');
-    expect(container.firstElementChild?.getAttribute('role')).toEqual('cell');
-  });
-});
diff --git a/packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.tsx b/packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.tsx
deleted file mode 100644
index e6bae5635b1ac..0000000000000
--- a/packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { useTablePrimaryCell_unstable } from './useTablePrimaryCell';
-import { renderTablePrimaryCell_unstable } from './renderTablePrimaryCell';
-import { useTablePrimaryCellStyles_unstable } from './useTablePrimaryCellStyles';
-import type { TablePrimaryCellProps } from './TablePrimaryCell.types';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-
-/**
- * TablePrimaryCell component - TODO: add more docs
- */
-export const TablePrimaryCell: ForwardRefComponent<TablePrimaryCellProps> = React.forwardRef((props, ref) => {
-  const state = useTablePrimaryCell_unstable(props, ref);
-
-  useTablePrimaryCellStyles_unstable(state);
-  return renderTablePrimaryCell_unstable(state);
-});
-
-TablePrimaryCell.displayName = 'TablePrimaryCell';
diff --git a/packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.types.ts b/packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.types.ts
deleted file mode 100644
index 5db1364645676..0000000000000
--- a/packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.types.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { TableCellSlots } from '../TableCell/TableCell.types';
-
-export type TablePrimaryCellSlots = {
-  main: Slot<'span'>;
-
-  secondary: Slot<'span'>;
-
-  wrapper: Slot<'div'>;
-} & TableCellSlots;
-
-/**
- * TablePrimaryCell Props
- */
-export type TablePrimaryCellProps = ComponentProps<Partial<TablePrimaryCellSlots>> & {};
-
-/**
- * State used in rendering TablePrimaryCell
- */
-export type TablePrimaryCellState = ComponentState<TablePrimaryCellSlots>;
diff --git a/packages/react-components/react-table/src/components/TablePrimaryCell/__snapshots__/TablePrimaryCell.test.tsx.snap b/packages/react-components/react-table/src/components/TablePrimaryCell/__snapshots__/TablePrimaryCell.test.tsx.snap
deleted file mode 100644
index 020bc1a82b272..0000000000000
--- a/packages/react-components/react-table/src/components/TablePrimaryCell/__snapshots__/TablePrimaryCell.test.tsx.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TablePrimaryCell renders a default state 1`] = `
-<tr>
-  <td
-    class="fui-TablePrimaryCell fui-TableCell"
-  >
-    Default TablePrimaryCell
-  </td>
-</tr>
-`;
diff --git a/packages/react-components/react-table/src/components/TablePrimaryCell/index.ts b/packages/react-components/react-table/src/components/TablePrimaryCell/index.ts
deleted file mode 100644
index 8d155e177b544..0000000000000
--- a/packages/react-components/react-table/src/components/TablePrimaryCell/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './TablePrimaryCell';
-export * from './TablePrimaryCell.types';
-export * from './renderTablePrimaryCell';
-export * from './useTablePrimaryCell';
-export * from './useTablePrimaryCellStyles';
diff --git a/packages/react-components/react-table/src/components/TablePrimaryCell/renderTablePrimaryCell.tsx b/packages/react-components/react-table/src/components/TablePrimaryCell/renderTablePrimaryCell.tsx
deleted file mode 100644
index 3d9be317354ca..0000000000000
--- a/packages/react-components/react-table/src/components/TablePrimaryCell/renderTablePrimaryCell.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
-import type { TablePrimaryCellState, TablePrimaryCellSlots } from './TablePrimaryCell.types';
-
-/**
- * Render the final JSX of TablePrimaryCell
- */
-export const renderTablePrimaryCell_unstable = (state: TablePrimaryCellState) => {
-  const { slots, slotProps } = getSlots<TablePrimaryCellSlots>(state);
-
-  return (
-    <slots.root {...slotProps.root}>
-      {slots.media && <slots.media {...slotProps.media} />}
-      {slots.wrapper && (
-        <slots.wrapper {...slotProps.wrapper}>
-          {slots.main && <slots.main {...slotProps.main} />}
-          {slots.secondary && <slots.secondary {...slotProps.secondary} />}
-        </slots.wrapper>
-      )}
-      {slotProps.root.children}
-    </slots.root>
-  );
-};
diff --git a/packages/react-components/react-table/src/components/TablePrimaryCell/useTablePrimaryCell.ts b/packages/react-components/react-table/src/components/TablePrimaryCell/useTablePrimaryCell.ts
deleted file mode 100644
index aa86812ae6a56..0000000000000
--- a/packages/react-components/react-table/src/components/TablePrimaryCell/useTablePrimaryCell.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { resolveShorthand } from '@fluentui/react-utilities';
-import type { TablePrimaryCellProps, TablePrimaryCellState } from './TablePrimaryCell.types';
-import { useTableCell_unstable } from '../TableCell/useTableCell';
-
-/**
- * Create the state required to render TablePrimaryCell.
- *
- * The returned state can be modified with hooks such as useTablePrimaryCellStyles_unstable,
- * before being passed to renderTablePrimaryCell_unstable.
- *
- * @param props - props from this instance of TablePrimaryCell
- * @param ref - reference to root HTMLElement of TablePrimaryCell
- */
-export const useTablePrimaryCell_unstable = (
-  props: TablePrimaryCellProps,
-  ref: React.Ref<HTMLElement>,
-): TablePrimaryCellState => {
-  const tableCellState = useTableCell_unstable(props, ref);
-
-  return {
-    ...tableCellState,
-    components: {
-      ...tableCellState.components,
-      main: 'span',
-      secondary: 'span',
-      wrapper: 'div',
-    },
-    main: resolveShorthand(props.secondary),
-    secondary: resolveShorthand(props.main),
-    wrapper: resolveShorthand(props.wrapper, { required: !!props.main || !!props.secondary }),
-  };
-};
diff --git a/packages/react-components/react-table/src/components/TablePrimaryCell/useTablePrimaryCellStyles.ts b/packages/react-components/react-table/src/components/TablePrimaryCell/useTablePrimaryCellStyles.ts
deleted file mode 100644
index ac72f919ad5f5..0000000000000
--- a/packages/react-components/react-table/src/components/TablePrimaryCell/useTablePrimaryCellStyles.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
-import type { TablePrimaryCellSlots, TablePrimaryCellState } from './TablePrimaryCell.types';
-import type { SlotClassNames } from '@fluentui/react-utilities';
-import { useTableCellStyles_unstable } from '../TableCell/useTableCellStyles';
-
-export const tablePrimaryCellClassNames: SlotClassNames<TablePrimaryCellSlots> = {
-  root: 'fui-TablePrimaryCell',
-  media: 'fui-TablePrimaryCell__media',
-  main: 'fui-TablePrimaryCell__main',
-  secondary: 'fui-TablePrimaryCell__secondary',
-  wrapper: 'fui-TablePrimaryCell__wrapper',
-};
-
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  wrapper: {
-    display: 'flex',
-    flexDirection: 'column',
-  },
-
-  media: {
-    '& svg': {
-      width: '28px',
-      height: '28px',
-    },
-  },
-
-  main: {
-    fontWeight: tokens.fontWeightSemibold,
-  },
-
-  secondary: {
-    fontSize: tokens.fontSizeBase300,
-    color: tokens.colorNeutralForeground2,
-  },
-
-  // TODO add additional classes for different states and/or slots
-});
-
-/**
- * Apply styling to the TablePrimaryCell slots based on the state
- */
-export const useTablePrimaryCellStyles_unstable = (state: TablePrimaryCellState): TablePrimaryCellState => {
-  useTableCellStyles_unstable(state);
-  const styles = useStyles();
-  state.root.className = mergeClasses(tablePrimaryCellClassNames.root, state.root.className);
-
-  if (state.media) {
-    state.media.className = mergeClasses(tablePrimaryCellClassNames.media, styles.media, state.media.className);
-  }
-
-  if (state.main) {
-    state.main.className = mergeClasses(tablePrimaryCellClassNames.main, styles.main, state.main.className);
-  }
-
-  if (state.secondary) {
-    state.secondary.className = mergeClasses(
-      tablePrimaryCellClassNames.secondary,
-      styles.secondary,
-      state.secondary.className,
-    );
-  }
-
-  if (state.wrapper) {
-    state.wrapper.className = mergeClasses(tablePrimaryCellClassNames.wrapper, styles.wrapper, state.wrapper.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 aab746793a516..8ddf4e50a82d3 100644
--- a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts
+++ b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts
@@ -14,7 +14,7 @@ export const tableRowClassNames: SlotClassNames<TableRowSlots> = {
  */
 const useStyles = makeStyles({
   root: {
-    display: 'flex',
+    display: 'table-row',
     color: tokens.colorNeutralForeground1,
     ':hover': {
       backgroundColor: tokens.colorNeutralBackground1Hover,
@@ -25,17 +25,17 @@ const useStyles = makeStyles({
   },
 
   medium: {
-    minHeight: '44px',
+    height: '44px',
     ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),
   },
 
   small: {
-    minHeight: '34px',
+    height: '34px',
     ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),
   },
 
   smaller: {
-    minHeight: '24px',
+    height: '24px',
     fontSize: tokens.fontSizeBase200,
   },
 });
diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.types.ts b/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.types.ts
index 339d0a7e0ddfb..c8ff497d29eb3 100644
--- a/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.types.ts
+++ b/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.types.ts
@@ -1,6 +1,6 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 import type { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';
-import { TableCellSlots, TableCellState } from '../TableCell/TableCell.types';
+import { TableCellSlots } from '../TableCell/TableCell.types';
 
 export type TableSelectionCellSlots = {
   /**
@@ -28,5 +28,4 @@ export type TableSelectionCellProps = ComponentProps<Partial<Omit<TableSelection
  * State used in rendering TableSelectionCell
  */
 export type TableSelectionCellState = ComponentState<TableSelectionCellSlots> &
-  Pick<TableCellState, 'media'> &
   Pick<Required<TableSelectionCellProps>, 'type' | 'checked'>;
diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts b/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts
index 3581d7d83bbc3..f0522e8214b1b 100644
--- a/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts
+++ b/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts
@@ -1,5 +1,4 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
 import type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
@@ -14,17 +13,18 @@ export const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlot
  */
 const useStyles = makeStyles({
   root: {
-    ...shorthands.padding('0px', tokens.spacingHorizontalS),
-    display: 'flex',
-    alignItems: 'center',
-    ...shorthands.gap(tokens.spacingHorizontalS),
-    ...shorthands.flex(0, 1, '0px'),
+    width: '44px',
+    textAlign: 'center',
+    whiteSpace: 'nowrap',
+    ...shorthands.padding(0),
+    display: 'table-cell',
   },
 
   radioIndicator: {
     display: 'flex',
+    flexGrow: 1,
     alignItems: 'center',
-    ...shorthands.padding('0px', tokens.spacingHorizontalS),
+    justifyContent: 'center',
     '& svg': {
       width: '16px',
       height: '16px',
diff --git a/packages/react-components/react-table/src/index.ts b/packages/react-components/react-table/src/index.ts
index a1b14a1b461d1..eee9b573e7707 100644
--- a/packages/react-components/react-table/src/index.ts
+++ b/packages/react-components/react-table/src/index.ts
@@ -88,25 +88,6 @@ export {
 } from './TableCellActions';
 
 export type { TableCellActionsProps, TableCellActionsSlots, TableCellActionsState } from './TableCellActions';
-export {
-  TablePrimaryCell,
-  tablePrimaryCellClassNames,
-  useTablePrimaryCellStyles_unstable,
-  useTablePrimaryCell_unstable,
-  renderTablePrimaryCell_unstable,
-} from './TablePrimaryCell';
-
-export type { TablePrimaryCellProps, TablePrimaryCellSlots, TablePrimaryCellState } from './TablePrimaryCell';
-
-export {
-  TableCellLayout,
-  useTableCellLayoutStyles_unstable,
-  useTableCellLayout_unstable,
-  renderTableCellLayout_unstable,
-  tableCellLayoutClassNames,
-} from './TableCellLayout';
-export type { TableCellLayoutProps, TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout';
-
 export {
   TableCellPrimaryLayout,
   tableCellPrimaryLayoutClassNames,
@@ -119,3 +100,12 @@ export type {
   TableCellPrimaryLayoutSlots,
   TableCellPrimaryLayoutState,
 } from './TableCellPrimaryLayout';
+
+export {
+  TableCellLayout,
+  useTableCellLayoutStyles_unstable,
+  useTableCellLayout_unstable,
+  renderTableCellLayout_unstable,
+  tableCellLayoutClassNames,
+} from './TableCellLayout';
+export type { TableCellLayoutProps, TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout';
diff --git a/packages/react-components/react-table/src/stories/Table/CellActions.stories.tsx b/packages/react-components/react-table/src/stories/Table/CellActions.stories.tsx
index c5c4fa8776b25..573a62367077d 100644
--- a/packages/react-components/react-table/src/stories/Table/CellActions.stories.tsx
+++ b/packages/react-components/react-table/src/stories/Table/CellActions.stories.tsx
@@ -10,7 +10,16 @@ import {
   MoreHorizontalRegular,
 } from '@fluentui/react-icons';
 import { PresenceBadgeStatus, Avatar, Button } from '@fluentui/react-components';
-import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell, TableCellActions } from '../..';
+import {
+  TableBody,
+  TableCell,
+  TableRow,
+  Table,
+  TableHeader,
+  TableHeaderCell,
+  TableCellActions,
+  TableCellLayout,
+} from '../..';
 
 const items = [
   {
@@ -71,20 +80,28 @@ export const CellActions = () => {
       <TableBody>
         {items.map(item => (
           <TableRow key={item.file.label}>
-            <TableCell media={item.file.icon}>
-              {item.file.label}
-              <TableCellActions>
-                <Button icon={<EditRegular />} appearance="subtle" />
-                <Button icon={<MoreHorizontalRegular />} appearance="subtle" />
-              </TableCellActions>
+            <TableCell>
+              <TableCellLayout media={item.file.icon}>
+                {item.file.label}
+                <TableCellActions>
+                  <Button icon={<EditRegular />} appearance="subtle" />
+                  <Button icon={<MoreHorizontalRegular />} appearance="subtle" />
+                </TableCellActions>
+              </TableCellLayout>
             </TableCell>
-            <TableCell
-              media={<Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />}
-            >
-              {item.author.label}
+            <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 media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
diff --git a/packages/react-components/react-table/src/stories/Table/CellNavigationMode.stories.tsx b/packages/react-components/react-table/src/stories/Table/CellNavigationMode.stories.tsx
index d0f5b9377bbdf..a6d865cb0f7cb 100644
--- a/packages/react-components/react-table/src/stories/Table/CellNavigationMode.stories.tsx
+++ b/packages/react-components/react-table/src/stories/Table/CellNavigationMode.stories.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react';
 import {
-  Folder16Regular as FolderRegular,
-  Edit16Regular as EditRegular,
-  Open16Regular as OpenRegular,
-  Document16Regular as DocumentRegular,
-  People16Regular as PeopleRegular,
-  DocumentPdf16Regular as DocumentPdfRegular,
-  Video16Regular as VideoRegular,
+  FolderRegular,
+  EditRegular,
+  OpenRegular,
+  DocumentRegular,
+  PeopleRegular,
+  DocumentPdfRegular,
+  VideoRegular,
 } from '@fluentui/react-icons';
 import { PresenceBadgeStatus, Avatar, Button } from '@fluentui/react-components';
-import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell } from '../..';
+import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell, TableCellLayout } from '../..';
 import { useNavigationMode } from '../../navigationModes';
 
 const items = [
@@ -75,21 +75,26 @@ export const CellNavigationMode = () => {
       <TableBody>
         {items.map(item => (
           <TableRow key={item.file.label}>
-            <TableCell tabIndex={0} media={item.file.icon}>
-              {item.file.label}
+            <TableCell tabIndex={0}>
+              <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>
             </TableCell>
-            <TableCell
-              tabIndex={0}
-              media={<Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />}
-            >
-              {item.author.label}
+            <TableCell tabIndex={0}>
+              <TableCellLayout
+                media={
+                  <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
+                }
+              >
+                {item.author.label}
+              </TableCellLayout>
             </TableCell>
             <TableCell tabIndex={0}>{item.lastUpdated.label}</TableCell>
-            <TableCell tabIndex={0} media={item.lastUpdate.icon}>
-              {item.lastUpdate.label}
+            <TableCell tabIndex={0}>
+              <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
             </TableCell>
             <TableCell>
-              <Button icon={<EditRegular />}>Edit</Button>
+              <TableCellLayout>
+                <Button icon={<EditRegular />}>Edit</Button>
+              </TableCellLayout>
             </TableCell>
           </TableRow>
         ))}
diff --git a/packages/react-components/react-table/src/stories/Table/CompositeNavigationMode.stories.tsx b/packages/react-components/react-table/src/stories/Table/CompositeNavigationMode.stories.tsx
index fdf79fd07aa37..bab98a90d6c89 100644
--- a/packages/react-components/react-table/src/stories/Table/CompositeNavigationMode.stories.tsx
+++ b/packages/react-components/react-table/src/stories/Table/CompositeNavigationMode.stories.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react';
 import {
-  Folder16Regular as FolderRegular,
-  Edit16Regular as EditRegular,
-  Open16Regular as OpenRegular,
-  Document16Regular as DocumentRegular,
-  People16Regular as PeopleRegular,
-  DocumentPdf16Regular as DocumentPdfRegular,
-  Video16Regular as VideoRegular,
+  FolderRegular,
+  EditRegular,
+  OpenRegular,
+  DocumentRegular,
+  PeopleRegular,
+  DocumentPdfRegular,
+  VideoRegular,
 } from '@fluentui/react-icons';
 import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
-import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell } from '../..';
+import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell, TableCellLayout } from '../..';
 import { useNavigationMode } from '../../navigationModes';
 
 const items = [
@@ -74,18 +74,21 @@ export const CompositeNavigationMode = () => {
       <TableBody>
         {items.map(item => (
           <TableRow tabIndex={0} key={item.file.label}>
-            <TableCell tabIndex={0} media={item.file.icon}>
-              {item.file.label}
+            <TableCell tabIndex={0}>
+              <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>
             </TableCell>
-            <TableCell
-              tabIndex={0}
-              media={<Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />}
-            >
-              {item.author.label}
+            <TableCell tabIndex={0}>
+              <TableCellLayout
+                media={
+                  <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
+                }
+              >
+                {item.author.label}
+              </TableCellLayout>
             </TableCell>
             <TableCell tabIndex={0}>{item.lastUpdated.label}</TableCell>
-            <TableCell tabIndex={0} media={item.lastUpdate.icon}>
-              {item.lastUpdate.label}
+            <TableCell tabIndex={0}>
+              <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
             </TableCell>
           </TableRow>
         ))}
diff --git a/packages/react-components/react-table/src/stories/Table/Default.stories.tsx b/packages/react-components/react-table/src/stories/Table/Default.stories.tsx
index a996a0783f7b3..02e78d202dddc 100644
--- a/packages/react-components/react-table/src/stories/Table/Default.stories.tsx
+++ b/packages/react-components/react-table/src/stories/Table/Default.stories.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react';
 import {
-  Folder16Regular as FolderRegular,
-  Edit16Regular as EditRegular,
-  Open16Regular as OpenRegular,
-  Document16Regular as DocumentRegular,
-  People16Regular as PeopleRegular,
-  DocumentPdf16Regular as DocumentPdfRegular,
-  Video16Regular as VideoRegular,
+  FolderRegular,
+  EditRegular,
+  OpenRegular,
+  DocumentRegular,
+  PeopleRegular,
+  DocumentPdfRegular,
+  VideoRegular,
 } from '@fluentui/react-icons';
 import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
-import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell } from '../..';
+import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell, TableCellLayout } from '../..';
 
 const items = [
   {
@@ -70,14 +70,22 @@ export const Default = () => {
       <TableBody>
         {items.map(item => (
           <TableRow key={item.file.label}>
-            <TableCell media={item.file.icon}>{item.file.label}</TableCell>
-            <TableCell
-              media={<Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />}
-            >
-              {item.author.label}
+            <TableCell>
+              <TableCellLayout media={item.file.icon}>{item.file.label}</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 media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
diff --git a/packages/react-components/react-table/src/stories/Table/MultipleSelect.stories.tsx b/packages/react-components/react-table/src/stories/Table/MultipleSelect.stories.tsx
index 95cc79b9f02f4..26b03adcca052 100644
--- a/packages/react-components/react-table/src/stories/Table/MultipleSelect.stories.tsx
+++ b/packages/react-components/react-table/src/stories/Table/MultipleSelect.stories.tsx
@@ -9,7 +9,16 @@ import {
   VideoRegular,
 } from '@fluentui/react-icons';
 import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
-import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell, TableSelectionCell } from '../..';
+import {
+  TableBody,
+  TableCell,
+  TableRow,
+  Table,
+  TableHeader,
+  TableHeaderCell,
+  TableSelectionCell,
+  TableCellLayout,
+} from '../..';
 import { useTable, ColumnDefinition } from '../../hooks';
 import { useNavigationMode } from '../../navigationModes/useNavigationMode';
 
@@ -135,10 +144,18 @@ export const MultipleSelect = () => {
         {rows.map(({ item, selected, onClick, onKeyDown }) => (
           <TableRow tabIndex={0} key={item.file.label} onClick={onClick} onKeyDown={onKeyDown} aria-selected={selected}>
             <TableSelectionCell checkboxIndicator={{ tabIndex: -1 }} checked={selected} />
-            <TableCell media={item.file.icon}>{item.file.label}</TableCell>
-            <TableCell media={<Avatar badge={{ status: item.author.status }} />}>{item.author.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>
+            </TableCell>
+            <TableCell>
+              <TableCellLayout media={<Avatar badge={{ status: item.author.status }} />}>
+                {item.author.label}
+              </TableCellLayout>
+            </TableCell>
             <TableCell>{item.lastUpdated.label}</TableCell>
-            <TableCell media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
diff --git a/packages/react-components/react-table/src/stories/Table/MultipleSelectControlled.stories.tsx b/packages/react-components/react-table/src/stories/Table/MultipleSelectControlled.stories.tsx
index 052fe68b0b88e..dbe12ff30fd27 100644
--- a/packages/react-components/react-table/src/stories/Table/MultipleSelectControlled.stories.tsx
+++ b/packages/react-components/react-table/src/stories/Table/MultipleSelectControlled.stories.tsx
@@ -9,7 +9,16 @@ import {
   VideoRegular,
 } from '@fluentui/react-icons';
 import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
-import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell, TableSelectionCell } from '../..';
+import {
+  TableBody,
+  TableCell,
+  TableRow,
+  Table,
+  TableHeader,
+  TableHeaderCell,
+  TableSelectionCell,
+  TableCellLayout,
+} from '../..';
 import { useTable, ColumnDefinition, RowId } from '../../hooks';
 import { useNavigationMode } from '../../navigationModes/useNavigationMode';
 
@@ -137,10 +146,18 @@ export const MultipleSelectControlled = () => {
         {rows.map(({ item, selected, onClick, onKeyDown }) => (
           <TableRow tabIndex={0} key={item.file.label} onClick={onClick} onKeyDown={onKeyDown} aria-selected={selected}>
             <TableSelectionCell checkboxIndicator={{ tabIndex: -1 }} checked={selected} />
-            <TableCell media={item.file.icon}>{item.file.label}</TableCell>
-            <TableCell media={<Avatar badge={{ status: item.author.status }} />}>{item.author.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>
+            </TableCell>
+            <TableCell>
+              <TableCellLayout media={<Avatar badge={{ status: item.author.status }} />}>
+                {item.author.label}
+              </TableCellLayout>
+            </TableCell>
             <TableCell>{item.lastUpdated.label}</TableCell>
-            <TableCell media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
diff --git a/packages/react-components/react-table/src/stories/Table/NonNativeElements.stories.tsx b/packages/react-components/react-table/src/stories/Table/NonNativeElements.stories.tsx
index c1260f8e4b271..39214a5be76fc 100644
--- a/packages/react-components/react-table/src/stories/Table/NonNativeElements.stories.tsx
+++ b/packages/react-components/react-table/src/stories/Table/NonNativeElements.stories.tsx
@@ -10,6 +10,7 @@ import {
 } from '@fluentui/react-icons';
 import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
 import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell } from '../..';
+import { TableCellLayout } from '../../components/TableCellLayout/TableCellLayout';
 
 const items = [
   {
@@ -70,14 +71,22 @@ export const NonNativeElements = () => {
       <TableBody>
         {items.map(item => (
           <TableRow key={item.file.label}>
-            <TableCell media={item.file.icon}>{item.file.label}</TableCell>
-            <TableCell
-              media={<Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />}
-            >
-              {item.author.label}
+            <TableCell>
+              <TableCellLayout media={item.file.icon}>{item.file.label}</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 media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
diff --git a/packages/react-components/react-table/src/stories/Table/PrimaryCell.stories.tsx b/packages/react-components/react-table/src/stories/Table/PrimaryCell.stories.tsx
index 453718573c987..68def6ba55c8b 100644
--- a/packages/react-components/react-table/src/stories/Table/PrimaryCell.stories.tsx
+++ b/packages/react-components/react-table/src/stories/Table/PrimaryCell.stories.tsx
@@ -18,7 +18,8 @@ import {
   TableHeader,
   TableHeaderCell,
   TableCellActions,
-  TablePrimaryCell,
+  TableCellPrimaryLayout,
+  TableCellLayout,
 } from '../..';
 
 const items = [
@@ -80,19 +81,27 @@ export const PrimaryCell = () => {
       <TableBody>
         {items.map(item => (
           <TableRow key={item.file.label}>
-            <TablePrimaryCell media={item.file.icon} main={item.file.label} secondary="Your organization">
-              <TableCellActions>
-                <Button icon={<EditRegular />} appearance="subtle" />
-                <Button icon={<MoreHorizontalRegular />} appearance="subtle" />
-              </TableCellActions>
-            </TablePrimaryCell>
-            <TableCell
-              media={<Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />}
-            >
-              {item.author.label}
+            <TableCell>
+              <TableCellPrimaryLayout media={item.file.icon} main={item.file.label} secondary="Your organization">
+                <TableCellActions>
+                  <Button icon={<EditRegular />} appearance="subtle" />
+                  <Button icon={<MoreHorizontalRegular />} appearance="subtle" />
+                </TableCellActions>
+              </TableCellPrimaryLayout>
+            </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 media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
diff --git a/packages/react-components/react-table/src/stories/Table/RowNavigationMode.stories.tsx b/packages/react-components/react-table/src/stories/Table/RowNavigationMode.stories.tsx
index 207145c4b6279..ec657176ee507 100644
--- a/packages/react-components/react-table/src/stories/Table/RowNavigationMode.stories.tsx
+++ b/packages/react-components/react-table/src/stories/Table/RowNavigationMode.stories.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react';
 import {
-  Folder16Regular as FolderRegular,
-  Edit16Regular as EditRegular,
-  Open16Regular as OpenRegular,
-  Document16Regular as DocumentRegular,
-  People16Regular as PeopleRegular,
-  DocumentPdf16Regular as DocumentPdfRegular,
-  Video16Regular as VideoRegular,
+  FolderRegular,
+  EditRegular,
+  OpenRegular,
+  DocumentRegular,
+  PeopleRegular,
+  DocumentPdfRegular,
+  VideoRegular,
 } from '@fluentui/react-icons';
 import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
-import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell } from '../..';
+import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell, TableCellLayout } from '../..';
 import { useNavigationMode } from '../../navigationModes/useNavigationMode';
 
 const items = [
@@ -73,14 +73,22 @@ export const RowNavigationMode = () => {
       <TableBody>
         {items.map(item => (
           <TableRow tabIndex={0} key={item.file.label}>
-            <TableCell media={item.file.icon}>{item.file.label}</TableCell>
-            <TableCell
-              media={<Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />}
-            >
-              {item.author.label}
+            <TableCell>
+              <TableCellLayout media={item.file.icon}>{item.file.label}</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 media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
diff --git a/packages/react-components/react-table/src/stories/Table/SingleSelect.stories.tsx b/packages/react-components/react-table/src/stories/Table/SingleSelect.stories.tsx
index 8f9f98fb7a73d..c488d00e1c57d 100644
--- a/packages/react-components/react-table/src/stories/Table/SingleSelect.stories.tsx
+++ b/packages/react-components/react-table/src/stories/Table/SingleSelect.stories.tsx
@@ -12,6 +12,7 @@ import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
 import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell, TableSelectionCell } from '../..';
 import { useTable, ColumnDefinition } from '../../hooks';
 import { useNavigationMode } from '../../navigationModes/useNavigationMode';
+import { TableCellLayout } from '../../components/TableCellLayout/TableCellLayout';
 
 type FileCell = {
   label: string;
@@ -128,11 +129,19 @@ export const SingleSelect = () => {
       <TableBody>
         {rows.map(({ item, selected, onClick, onKeyDown }) => (
           <TableRow tabIndex={0} key={item.file.label} onClick={onClick} onKeyDown={onKeyDown} aria-selected={selected}>
-            <TableSelectionCell type="radio" checked={selected} />
-            <TableCell media={item.file.icon}>{item.file.label}</TableCell>
-            <TableCell media={<Avatar badge={{ status: item.author.status }} />}>{item.author.label}</TableCell>
+            <TableSelectionCell checkboxIndicator={{ tabIndex: -1 }} checked={selected} type="radio" />
+            <TableCell>
+              <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>
+            </TableCell>
+            <TableCell>
+              <TableCellLayout media={<Avatar badge={{ status: item.author.status }} />}>
+                {item.author.label}
+              </TableCellLayout>
+            </TableCell>
             <TableCell>{item.lastUpdated.label}</TableCell>
-            <TableCell media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
diff --git a/packages/react-components/react-table/src/stories/Table/SingleSelectControlled.stories.tsx b/packages/react-components/react-table/src/stories/Table/SingleSelectControlled.stories.tsx
index 6f90817f93c36..95aea34239042 100644
--- a/packages/react-components/react-table/src/stories/Table/SingleSelectControlled.stories.tsx
+++ b/packages/react-components/react-table/src/stories/Table/SingleSelectControlled.stories.tsx
@@ -12,6 +12,7 @@ import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
 import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell, TableSelectionCell } from '../..';
 import { useTable, ColumnDefinition, RowId } from '../../hooks';
 import { useNavigationMode } from '../../navigationModes/useNavigationMode';
+import { TableCellLayout } from '../../components/TableCellLayout/TableCellLayout';
 
 type FileCell = {
   label: string;
@@ -130,11 +131,19 @@ export const SingleSelectControlled = () => {
       <TableBody>
         {rows.map(({ item, selected, onClick, onKeyDown }) => (
           <TableRow tabIndex={0} key={item.file.label} onClick={onClick} onKeyDown={onKeyDown} aria-selected={selected}>
-            <TableSelectionCell type="radio" checked={selected} />
-            <TableCell media={item.file.icon}>{item.file.label}</TableCell>
-            <TableCell media={<Avatar badge={{ status: item.author.status }} />}>{item.author.label}</TableCell>
+            <TableSelectionCell checkboxIndicator={{ tabIndex: -1 }} checked={selected} type="radio" />
+            <TableCell>
+              <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>
+            </TableCell>
+            <TableCell>
+              <TableCellLayout media={<Avatar badge={{ status: item.author.status }} />}>
+                {item.author.label}
+              </TableCellLayout>
+            </TableCell>
             <TableCell>{item.lastUpdated.label}</TableCell>
-            <TableCell media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
diff --git a/packages/react-components/react-table/src/stories/Table/SizeSmall.stories.tsx b/packages/react-components/react-table/src/stories/Table/SizeSmall.stories.tsx
index a3d514af5f1ee..63c172514a430 100644
--- a/packages/react-components/react-table/src/stories/Table/SizeSmall.stories.tsx
+++ b/packages/react-components/react-table/src/stories/Table/SizeSmall.stories.tsx
@@ -10,6 +10,7 @@ import {
 } from '@fluentui/react-icons';
 import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
 import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell } from '../..';
+import { TableCellLayout } from '../../components/TableCellLayout/TableCellLayout';
 
 const items = [
   {
@@ -59,7 +60,7 @@ const columns = [
 
 export const SizeSmall = () => {
   return (
-    <Table noNativeElements size="small">
+    <Table size="small">
       <TableHeader>
         <TableRow>
           {columns.map(column => (
@@ -70,20 +71,26 @@ export const SizeSmall = () => {
       <TableBody>
         {items.map(item => (
           <TableRow key={item.file.label}>
-            <TableCell media={item.file.icon}>{item.file.label}</TableCell>
-            <TableCell
-              media={
-                <Avatar
-                  size={24}
-                  name={item.author.label}
-                  badge={{ status: item.author.status as PresenceBadgeStatus }}
-                />
-              }
-            >
-              {item.author.label}
+            <TableCell>
+              <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>
+            </TableCell>
+            <TableCell>
+              <TableCellLayout
+                media={
+                  <Avatar
+                    name={item.author.label}
+                    badge={{ status: item.author.status as PresenceBadgeStatus }}
+                    size={24}
+                  />
+                }
+              >
+                {item.author.label}
+              </TableCellLayout>
             </TableCell>
             <TableCell>{item.lastUpdated.label}</TableCell>
-            <TableCell media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
diff --git a/packages/react-components/react-table/src/stories/Table/SizeSmaller.stories.tsx b/packages/react-components/react-table/src/stories/Table/SizeSmaller.stories.tsx
index 66331d24896a4..7d431c1cac5a2 100644
--- a/packages/react-components/react-table/src/stories/Table/SizeSmaller.stories.tsx
+++ b/packages/react-components/react-table/src/stories/Table/SizeSmaller.stories.tsx
@@ -9,7 +9,7 @@ import {
   VideoRegular,
 } from '@fluentui/react-icons';
 import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
-import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell } from '../..';
+import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell, TableCellLayout } from '../..';
 
 const items = [
   {
@@ -59,7 +59,7 @@ const columns = [
 
 export const SizeSmaller = () => {
   return (
-    <Table noNativeElements size="smaller">
+    <Table size="smaller">
       <TableHeader>
         <TableRow>
           {columns.map(column => (
@@ -70,20 +70,26 @@ export const SizeSmaller = () => {
       <TableBody>
         {items.map(item => (
           <TableRow key={item.file.label}>
-            <TableCell media={item.file.icon}>{item.file.label}</TableCell>
-            <TableCell
-              media={
-                <Avatar
-                  size={20}
-                  name={item.author.label}
-                  badge={{ status: item.author.status as PresenceBadgeStatus }}
-                />
-              }
-            >
-              {item.author.label}
+            <TableCell>
+              <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>
+            </TableCell>
+            <TableCell>
+              <TableCellLayout
+                media={
+                  <Avatar
+                    name={item.author.label}
+                    badge={{ status: item.author.status as PresenceBadgeStatus }}
+                    size={20}
+                  />
+                }
+              >
+                {item.author.label}
+              </TableCellLayout>
             </TableCell>
             <TableCell>{item.lastUpdated.label}</TableCell>
-            <TableCell media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
diff --git a/packages/react-components/react-table/src/stories/Table/Sort.stories.tsx b/packages/react-components/react-table/src/stories/Table/Sort.stories.tsx
index 61134b2301487..b8de8eb98eadf 100644
--- a/packages/react-components/react-table/src/stories/Table/Sort.stories.tsx
+++ b/packages/react-components/react-table/src/stories/Table/Sort.stories.tsx
@@ -11,6 +11,7 @@ import {
 import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
 import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell } from '../..';
 import { useTable, ColumnDefinition, ColumnId } from '../../hooks';
+import { TableCellLayout } from '../../components/TableCellLayout/TableCellLayout';
 
 type FileCell = {
   label: string;
@@ -131,10 +132,22 @@ export const Sort = () => {
       <TableBody>
         {rows.map(({ item }) => (
           <TableRow key={item.file.label}>
-            <TableCell media={item.file.icon}>{item.file.label}</TableCell>
-            <TableCell media={<Avatar badge={{ status: item.author.status }} />}>{item.author.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.file.icon}>{item.file.label}</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 media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
diff --git a/packages/react-components/react-table/src/stories/Table/SortControlled.stories.tsx b/packages/react-components/react-table/src/stories/Table/SortControlled.stories.tsx
index a2eb8791b7b86..22ca7cdc51aa8 100644
--- a/packages/react-components/react-table/src/stories/Table/SortControlled.stories.tsx
+++ b/packages/react-components/react-table/src/stories/Table/SortControlled.stories.tsx
@@ -11,6 +11,7 @@ import {
 import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
 import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell } from '../..';
 import { useTable, ColumnDefinition, ColumnId, SortState } from '../../hooks';
+import { TableCellLayout } from '../../components/TableCellLayout/TableCellLayout';
 
 type FileCell = {
   label: string;
@@ -134,10 +135,22 @@ export const SortControlled = () => {
       <TableBody>
         {rows.map(({ item }) => (
           <TableRow key={item.file.label}>
-            <TableCell media={item.file.icon}>{item.file.label}</TableCell>
-            <TableCell media={<Avatar badge={{ status: item.author.status }} />}>{item.author.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.file.icon}>{item.file.label}</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 media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCell>
+            <TableCell>
+              <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>