diff --git a/change/@fluentui-react-components-5596cfa5-301f-4b16-81ef-f2d953a7f397.json b/change/@fluentui-react-components-5596cfa5-301f-4b16-81ef-f2d953a7f397.json
new file mode 100644
index 0000000000000..995090f9644e0
--- /dev/null
+++ b/change/@fluentui-react-components-5596cfa5-301f-4b16-81ef-f2d953a7f397.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: Export table cell layout components from unstable",
+  "packageName": "@fluentui/react-components",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-table-563b3e0b-f140-4bac-bcae-d4974090994d.json b/change/@fluentui-react-table-563b3e0b-f140-4bac-bcae-d4974090994d.json
new file mode 100644
index 0000000000000..ad3a13752fef0
--- /dev/null
+++ b/change/@fluentui-react-table-563b3e0b-f140-4bac-bcae-d4974090994d.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: Implement table cell 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 4577ffa79a7b5..2be227e69f860 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
@@ -153,6 +153,8 @@ import { renderTable_unstable } from '@fluentui/react-table';
 import { renderTableBody_unstable } from '@fluentui/react-table';
 import { renderTableCell_unstable } from '@fluentui/react-table';
 import { renderTableCellActions_unstable } from '@fluentui/react-table';
+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';
@@ -191,6 +193,10 @@ import { TableCellActionsSlots } from '@fluentui/react-table';
 import { TableCellActionsState } from '@fluentui/react-table';
 import { tableCellClassName } from '@fluentui/react-table';
 import { tableCellClassNames } from '@fluentui/react-table';
+import { TableCellLayout } from '@fluentui/react-table';
+import { tableCellLayoutClassNames } from '@fluentui/react-table';
+import { TableCellPrimaryLayout } from '@fluentui/react-table';
+import { tableCellPrimaryLayoutClassNames } from '@fluentui/react-table';
 import { TableCellProps } from '@fluentui/react-table';
 import { TableCellSlots } from '@fluentui/react-table';
 import { TableCellState } from '@fluentui/react-table';
@@ -295,6 +301,10 @@ import { useTableBodyStyles_unstable } from '@fluentui/react-table';
 import { useTableCell_unstable } from '@fluentui/react-table';
 import { useTableCellActions_unstable } from '@fluentui/react-table';
 import { useTableCellActionsStyles_unstable } from '@fluentui/react-table';
+import { useTableCellLayout_unstable } from '@fluentui/react-table';
+import { useTableCellLayoutStyles_unstable } from '@fluentui/react-table';
+import { useTableCellPrimaryLayout_unstable } from '@fluentui/react-table';
+import { useTableCellPrimaryLayoutStyles_unstable } from '@fluentui/react-table';
 import { useTableCellStyles_unstable } from '@fluentui/react-table';
 import { useTableContext } from '@fluentui/react-table';
 import { useTableHeader_unstable } from '@fluentui/react-table';
@@ -610,6 +620,10 @@ export { renderTableCell_unstable }
 
 export { renderTableCellActions_unstable }
 
+export { renderTableCellLayout_unstable }
+
+export { renderTableCellPrimaryLayout_unstable }
+
 export { renderTableHeader_unstable }
 
 export { renderTableHeaderCell_unstable }
@@ -686,6 +700,14 @@ export { tableCellClassName }
 
 export { tableCellClassNames }
 
+export { TableCellLayout }
+
+export { tableCellLayoutClassNames }
+
+export { TableCellPrimaryLayout }
+
+export { tableCellPrimaryLayoutClassNames }
+
 export { TableCellProps }
 
 export { TableCellSlots }
@@ -894,6 +916,14 @@ export { useTableCellActions_unstable }
 
 export { useTableCellActionsStyles_unstable }
 
+export { useTableCellLayout_unstable }
+
+export { useTableCellLayoutStyles_unstable }
+
+export { useTableCellPrimaryLayout_unstable }
+
+export { useTableCellPrimaryLayoutStyles_unstable }
+
 export { useTableCellStyles_unstable }
 
 export { useTableContext }
diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts
index c37cfc4d640c6..1e2f4bc81476b 100644
--- a/packages/react-components/react-components/src/unstable/index.ts
+++ b/packages/react-components/react-components/src/unstable/index.ts
@@ -271,6 +271,16 @@ export {
   useTableCellActionsStyles_unstable,
   useTableCellActions_unstable,
   renderTableCellActions_unstable,
+  TableCellLayout,
+  useTableCellLayout_unstable,
+  useTableCellLayoutStyles_unstable,
+  renderTableCellLayout_unstable,
+  tableCellLayoutClassNames,
+  TableCellPrimaryLayout,
+  useTableCellPrimaryLayout_unstable,
+  useTableCellPrimaryLayoutStyles_unstable,
+  renderTableCellPrimaryLayout_unstable,
+  tableCellPrimaryLayoutClassNames,
 } from '@fluentui/react-table';
 export type {
   SortDirection,
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 97d76626592cf..81b2a1bfa2bcf 100644
--- a/packages/react-components/react-table/etc/react-table.api.md
+++ b/packages/react-components/react-table/etc/react-table.api.md
@@ -43,6 +43,12 @@ export const renderTableCell_unstable: (state: TableCellState) => JSX.Element;
 // @public
 export const renderTableCellActions_unstable: (state: TableCellActionsState) => JSX.Element;
 
+// @public
+export const renderTableCellLayout_unstable: (state: TableCellLayoutState) => JSX.Element;
+
+// @public
+export const renderTableCellPrimaryLayout_unstable: (state: TableCellPrimaryLayoutState) => JSX.Element;
+
 // @public
 export const renderTableHeader_unstable: (state: TableHeaderState) => JSX.Element;
 
@@ -119,6 +125,43 @@ export const tableCellClassName = "fui-TableCell";
 // @public (undocumented)
 export const tableCellClassNames: SlotClassNames<TableCellSlots>;
 
+// @public
+export const TableCellLayout: ForwardRefComponent<TableCellLayoutProps>;
+
+// @public (undocumented)
+export const tableCellLayoutClassNames: SlotClassNames<TableCellLayoutSlots>;
+
+// @public
+export type TableCellLayoutProps = ComponentProps<TableCellLayoutSlots> & {};
+
+// @public (undocumented)
+export type TableCellLayoutSlots = {
+    root: Slot<'div'>;
+    media?: Slot<'span'>;
+};
+
+// @public
+export type TableCellLayoutState = ComponentState<TableCellLayoutSlots>;
+
+// @public
+export const TableCellPrimaryLayout: ForwardRefComponent<TableCellPrimaryLayoutProps>;
+
+// @public (undocumented)
+export const tableCellPrimaryLayoutClassNames: SlotClassNames<TableCellPrimaryLayoutSlots>;
+
+// @public
+export type TableCellPrimaryLayoutProps = ComponentProps<Partial<TableCellPrimaryLayoutSlots>> & {};
+
+// @public (undocumented)
+export type TableCellPrimaryLayoutSlots = {
+    main: Slot<'span'>;
+    secondary: Slot<'span'>;
+    wrapper: Slot<'div'>;
+} & TableCellLayoutSlots;
+
+// @public
+export type TableCellPrimaryLayoutState = ComponentState<TableCellPrimaryLayoutSlots>;
+
 // @public
 export type TableCellProps = ComponentProps<TableCellSlots> & {};
 
@@ -314,6 +357,18 @@ export const useTableCellActions_unstable: (props: TableCellActionsProps, ref: R
 // @public
 export const useTableCellActionsStyles_unstable: (state: TableCellActionsState) => TableCellActionsState;
 
+// @public
+export const useTableCellLayout_unstable: (props: TableCellLayoutProps, ref: React_2.Ref<HTMLElement>) => TableCellLayoutState;
+
+// @public
+export const useTableCellLayoutStyles_unstable: (state: TableCellLayoutState) => TableCellLayoutState;
+
+// @public
+export const useTableCellPrimaryLayout_unstable: (props: TableCellPrimaryLayoutProps, ref: React_2.Ref<HTMLElement>) => TableCellPrimaryLayoutState;
+
+// @public
+export const useTableCellPrimaryLayoutStyles_unstable: (state: TableCellPrimaryLayoutState) => TableCellPrimaryLayoutState;
+
 // @public
 export const useTableCellStyles_unstable: (state: TableCellState) => TableCellState;
 
diff --git a/packages/react-components/react-table/src/TableCellLayout.ts b/packages/react-components/react-table/src/TableCellLayout.ts
new file mode 100644
index 0000000000000..2ef0ff4cf59b2
--- /dev/null
+++ b/packages/react-components/react-table/src/TableCellLayout.ts
@@ -0,0 +1 @@
+export * from './components/TableCellLayout/index';
diff --git a/packages/react-components/react-table/src/TableCellPrimaryLayout.ts b/packages/react-components/react-table/src/TableCellPrimaryLayout.ts
new file mode 100644
index 0000000000000..741ed2619aa79
--- /dev/null
+++ b/packages/react-components/react-table/src/TableCellPrimaryLayout.ts
@@ -0,0 +1 @@
+export * from './components/TableCellPrimaryLayout/index';
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.test.tsx b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.test.tsx
new file mode 100644
index 0000000000000..8b35fbb5f1804
--- /dev/null
+++ b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.test.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { TableCellLayout } from './TableCellLayout';
+import { isConformant } from '../../common/isConformant';
+
+describe('TableCellLayout', () => {
+  isConformant({
+    Component: TableCellLayout,
+    displayName: 'TableCellLayout',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            media: 'Test Icon',
+          },
+        },
+      ],
+    },
+  });
+
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<TableCellLayout>Default TableCellLayout</TableCellLayout>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx
new file mode 100644
index 0000000000000..dd3368d98c97e
--- /dev/null
+++ b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useTableCellLayout_unstable } from './useTableCellLayout';
+import { renderTableCellLayout_unstable } from './renderTableCellLayout';
+import { useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles';
+import type { TableCellLayoutProps } from './TableCellLayout.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+
+/**
+ * TableCellLayout component - TODO: add more docs
+ */
+export const TableCellLayout: ForwardRefComponent<TableCellLayoutProps> = React.forwardRef((props, ref) => {
+  const state = useTableCellLayout_unstable(props, ref);
+
+  useTableCellLayoutStyles_unstable(state);
+  return renderTableCellLayout_unstable(state);
+});
+
+TableCellLayout.displayName = 'TableCellLayout';
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts
new file mode 100644
index 0000000000000..967390ee9ceff
--- /dev/null
+++ b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts
@@ -0,0 +1,17 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type TableCellLayoutSlots = {
+  root: Slot<'div'>;
+
+  media?: Slot<'span'>;
+};
+
+/**
+ * TableCellLayout Props
+ */
+export type TableCellLayoutProps = ComponentProps<TableCellLayoutSlots> & {};
+
+/**
+ * State used in rendering TableCellLayout
+ */
+export type TableCellLayoutState = ComponentState<TableCellLayoutSlots>;
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/__snapshots__/TableCellLayout.test.tsx.snap b/packages/react-components/react-table/src/components/TableCellLayout/__snapshots__/TableCellLayout.test.tsx.snap
new file mode 100644
index 0000000000000..1f6faf8bb8d11
--- /dev/null
+++ b/packages/react-components/react-table/src/components/TableCellLayout/__snapshots__/TableCellLayout.test.tsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TableCellLayout renders a default state 1`] = `
+<div>
+  <div
+    class="fui-TableCellLayout"
+  >
+     
+    Default TableCellLayout
+  </div>
+</div>
+`;
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/index.ts b/packages/react-components/react-table/src/components/TableCellLayout/index.ts
new file mode 100644
index 0000000000000..c76976f4a904e
--- /dev/null
+++ b/packages/react-components/react-table/src/components/TableCellLayout/index.ts
@@ -0,0 +1,5 @@
+export * from './TableCellLayout';
+export * from './TableCellLayout.types';
+export * from './renderTableCellLayout';
+export * from './useTableCellLayout';
+export * from './useTableCellLayoutStyles';
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx b/packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx
new file mode 100644
index 0000000000000..8d430bb7c5179
--- /dev/null
+++ b/packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import type { TableCellLayoutState, TableCellLayoutSlots } from './TableCellLayout.types';
+
+/**
+ * Render the final JSX of TableCellLayout
+ */
+export const renderTableCellLayout_unstable = (state: TableCellLayoutState) => {
+  const { slots, slotProps } = getSlots<TableCellLayoutSlots>(state);
+
+  return (
+    <slots.root {...slotProps.root}>
+      {slots.media && <slots.media {...slotProps.media} />} {slotProps.root.children}
+    </slots.root>
+  );
+};
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts
new file mode 100644
index 0000000000000..a3de2e40be6bf
--- /dev/null
+++ b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import type { TableCellLayoutProps, TableCellLayoutState } from './TableCellLayout.types';
+
+/**
+ * Create the state required to render TableCellLayout.
+ *
+ * The returned state can be modified with hooks such as useTableCellLayoutStyles_unstable,
+ * before being passed to renderTableCellLayout_unstable.
+ *
+ * @param props - props from this instance of TableCellLayout
+ * @param ref - reference to root HTMLElement of TableCellLayout
+ */
+export const useTableCellLayout_unstable = (
+  props: TableCellLayoutProps,
+  ref: React.Ref<HTMLElement>,
+): TableCellLayoutState => {
+  return {
+    components: {
+      root: 'div',
+      media: 'span',
+    },
+    root: getNativeElementProps('div', {
+      ref,
+      ...props,
+    }),
+    media: resolveShorthand(props.media),
+  };
+};
diff --git a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts
new file mode 100644
index 0000000000000..0e4bd57fe1305
--- /dev/null
+++ b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts
@@ -0,0 +1,41 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import type { TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+export const tableCellLayoutClassNames: SlotClassNames<TableCellLayoutSlots> = {
+  root: 'fui-TableCellLayout',
+  media: 'fui-TableCellLayout__media',
+};
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    ...shorthands.gap(tokens.spacingHorizontalS),
+    ...shorthands.flex(1, 1, '0px'),
+  },
+
+  media: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+
+  // TODO add additional classes for different states and/or slots
+});
+
+/**
+ * Apply styling to the TableCellLayout slots based on the state
+ */
+export const useTableCellLayoutStyles_unstable = (state: TableCellLayoutState): TableCellLayoutState => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(tableCellLayoutClassNames.root, styles.root, state.root.className);
+  if (state.media) {
+    state.media.className = mergeClasses(tableCellLayoutClassNames.media, styles.media, state.media.className);
+  }
+
+  return state;
+};
diff --git a/packages/react-components/react-table/src/components/TableCellPrimaryLayout/TableCellPrimaryLayout.test.tsx b/packages/react-components/react-table/src/components/TableCellPrimaryLayout/TableCellPrimaryLayout.test.tsx
new file mode 100644
index 0000000000000..15e1bf135848d
--- /dev/null
+++ b/packages/react-components/react-table/src/components/TableCellPrimaryLayout/TableCellPrimaryLayout.test.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { TableCellPrimaryLayout } from './TableCellPrimaryLayout';
+import { isConformant } from '../../common/isConformant';
+import { TableCellPrimaryLayoutProps } from './TableCellPrimaryLayout.types';
+
+describe('TableCellPrimaryLayout', () => {
+  isConformant({
+    Component: TableCellPrimaryLayout as React.FC<TableCellPrimaryLayoutProps>,
+    displayName: 'TableCellPrimaryLayout',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            media: 'Test Icon',
+            main: 'Main content',
+            secondary: 'Secondary content',
+          },
+        },
+      ],
+    },
+  });
+
+  it('renders a default state', () => {
+    const result = render(<TableCellPrimaryLayout>Default TableCellPrimaryLayout</TableCellPrimaryLayout>);
+    expect(result.container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-components/react-table/src/components/TableCellPrimaryLayout/TableCellPrimaryLayout.tsx b/packages/react-components/react-table/src/components/TableCellPrimaryLayout/TableCellPrimaryLayout.tsx
new file mode 100644
index 0000000000000..30f2c0a63a5db
--- /dev/null
+++ b/packages/react-components/react-table/src/components/TableCellPrimaryLayout/TableCellPrimaryLayout.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useTableCellPrimaryLayout_unstable } from './useTableCellPrimaryLayout';
+import { renderTableCellPrimaryLayout_unstable } from './renderTableCellPrimaryLayout';
+import { useTableCellPrimaryLayoutStyles_unstable } from './useTableCellPrimaryLayoutStyles';
+import type { TableCellPrimaryLayoutProps } from './TableCellPrimaryLayout.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+
+/**
+ * TableCellPrimaryLayout component - TODO: add more docs
+ */
+export const TableCellPrimaryLayout: ForwardRefComponent<TableCellPrimaryLayoutProps> = React.forwardRef(
+  (props, ref) => {
+    const state = useTableCellPrimaryLayout_unstable(props, ref);
+
+    useTableCellPrimaryLayoutStyles_unstable(state);
+    return renderTableCellPrimaryLayout_unstable(state);
+  },
+);
+
+TableCellPrimaryLayout.displayName = 'TableCellPrimaryLayout';
diff --git a/packages/react-components/react-table/src/components/TableCellPrimaryLayout/TableCellPrimaryLayout.types.ts b/packages/react-components/react-table/src/components/TableCellPrimaryLayout/TableCellPrimaryLayout.types.ts
new file mode 100644
index 0000000000000..8f4eda28070f0
--- /dev/null
+++ b/packages/react-components/react-table/src/components/TableCellPrimaryLayout/TableCellPrimaryLayout.types.ts
@@ -0,0 +1,20 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { TableCellLayoutSlots } from '../TableCellLayout';
+
+export type TableCellPrimaryLayoutSlots = {
+  main: Slot<'span'>;
+
+  secondary: Slot<'span'>;
+
+  wrapper: Slot<'div'>;
+} & TableCellLayoutSlots;
+
+/**
+ * TableCellPrimaryLayout Props
+ */
+export type TableCellPrimaryLayoutProps = ComponentProps<Partial<TableCellPrimaryLayoutSlots>> & {};
+
+/**
+ * State used in rendering TableCellPrimaryLayout
+ */
+export type TableCellPrimaryLayoutState = ComponentState<TableCellPrimaryLayoutSlots>;
diff --git a/packages/react-components/react-table/src/components/TableCellPrimaryLayout/__snapshots__/TableCellPrimaryLayout.test.tsx.snap b/packages/react-components/react-table/src/components/TableCellPrimaryLayout/__snapshots__/TableCellPrimaryLayout.test.tsx.snap
new file mode 100644
index 0000000000000..20f0c33321210
--- /dev/null
+++ b/packages/react-components/react-table/src/components/TableCellPrimaryLayout/__snapshots__/TableCellPrimaryLayout.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TableCellPrimaryLayout renders a default state 1`] = `
+<div>
+  <div
+    class="fui-TableCellPrimaryLayout fui-TableCellLayout"
+  >
+    Default TableCellPrimaryLayout
+  </div>
+</div>
+`;
diff --git a/packages/react-components/react-table/src/components/TableCellPrimaryLayout/index.ts b/packages/react-components/react-table/src/components/TableCellPrimaryLayout/index.ts
new file mode 100644
index 0000000000000..074adee24798e
--- /dev/null
+++ b/packages/react-components/react-table/src/components/TableCellPrimaryLayout/index.ts
@@ -0,0 +1,5 @@
+export * from './TableCellPrimaryLayout';
+export * from './TableCellPrimaryLayout.types';
+export * from './renderTableCellPrimaryLayout';
+export * from './useTableCellPrimaryLayout';
+export * from './useTableCellPrimaryLayoutStyles';
diff --git a/packages/react-components/react-table/src/components/TableCellPrimaryLayout/renderTableCellPrimaryLayout.tsx b/packages/react-components/react-table/src/components/TableCellPrimaryLayout/renderTableCellPrimaryLayout.tsx
new file mode 100644
index 0000000000000..0f13dd1245ca7
--- /dev/null
+++ b/packages/react-components/react-table/src/components/TableCellPrimaryLayout/renderTableCellPrimaryLayout.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import type { TableCellPrimaryLayoutState, TableCellPrimaryLayoutSlots } from './TableCellPrimaryLayout.types';
+
+/**
+ * Render the final JSX of TableCellPrimaryLayout
+ */
+export const renderTableCellPrimaryLayout_unstable = (state: TableCellPrimaryLayoutState) => {
+  const { slots, slotProps } = getSlots<TableCellPrimaryLayoutSlots>(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/TableCellPrimaryLayout/useTableCellPrimaryLayout.ts b/packages/react-components/react-table/src/components/TableCellPrimaryLayout/useTableCellPrimaryLayout.ts
new file mode 100644
index 0000000000000..92019aad28ed8
--- /dev/null
+++ b/packages/react-components/react-table/src/components/TableCellPrimaryLayout/useTableCellPrimaryLayout.ts
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { resolveShorthand } from '@fluentui/react-utilities';
+import type { TableCellPrimaryLayoutProps, TableCellPrimaryLayoutState } from './TableCellPrimaryLayout.types';
+import { useTableCellLayout_unstable } from '../TableCellLayout/useTableCellLayout';
+
+/**
+ * Create the state required to render TableCellPrimaryLayout.
+ *
+ * The returned state can be modified with hooks such as useTableCellPrimaryLayoutStyles_unstable,
+ * before being passed to renderTableCellPrimaryLayout_unstable.
+ *
+ * @param props - props from this instance of TableCellPrimaryLayout
+ * @param ref - reference to root HTMLElement of TableCellPrimaryLayout
+ */
+export const useTableCellPrimaryLayout_unstable = (
+  props: TableCellPrimaryLayoutProps,
+  ref: React.Ref<HTMLElement>,
+): TableCellPrimaryLayoutState => {
+  const tableCellState = useTableCellLayout_unstable(props, ref);
+
+  return {
+    ...tableCellState,
+    components: {
+      ...tableCellState.components,
+      main: 'span',
+      secondary: 'span',
+      wrapper: 'div',
+      media: 'span',
+    },
+    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/TableCellPrimaryLayout/useTableCellPrimaryLayoutStyles.ts b/packages/react-components/react-table/src/components/TableCellPrimaryLayout/useTableCellPrimaryLayoutStyles.ts
new file mode 100644
index 0000000000000..34488ec57e031
--- /dev/null
+++ b/packages/react-components/react-table/src/components/TableCellPrimaryLayout/useTableCellPrimaryLayoutStyles.ts
@@ -0,0 +1,76 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import type { TableCellPrimaryLayoutSlots, TableCellPrimaryLayoutState } from './TableCellPrimaryLayout.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import { useTableCellLayoutStyles_unstable } from '../TableCellLayout/useTableCellLayoutStyles';
+
+export const tableCellPrimaryLayoutClassNames: SlotClassNames<TableCellPrimaryLayoutSlots> = {
+  root: 'fui-TableCellPrimaryLayout',
+  media: 'fui-TableCellPrimaryLayout__media',
+  main: 'fui-TableCellPrimaryLayout__main',
+  secondary: 'fui-TableCellPrimaryLayout__secondary',
+  wrapper: 'fui-TableCellPrimaryLayout__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,
+  },
+});
+
+/**
+ * Apply styling to the TableCellPrimaryLayout slots based on the state
+ */
+export const useTableCellPrimaryLayoutStyles_unstable = (
+  state: TableCellPrimaryLayoutState,
+): TableCellPrimaryLayoutState => {
+  useTableCellLayoutStyles_unstable(state);
+  const styles = useStyles();
+  state.root.className = mergeClasses(tableCellPrimaryLayoutClassNames.root, state.root.className);
+
+  if (state.media) {
+    state.media.className = mergeClasses(tableCellPrimaryLayoutClassNames.media, styles.media, state.media.className);
+  }
+
+  if (state.main) {
+    state.main.className = mergeClasses(tableCellPrimaryLayoutClassNames.main, styles.main, state.main.className);
+  }
+
+  if (state.secondary) {
+    state.secondary.className = mergeClasses(
+      tableCellPrimaryLayoutClassNames.secondary,
+      styles.secondary,
+      state.secondary.className,
+    );
+  }
+
+  if (state.wrapper) {
+    state.wrapper.className = mergeClasses(
+      tableCellPrimaryLayoutClassNames.wrapper,
+      styles.wrapper,
+      state.wrapper.className,
+    );
+  }
+
+  return state;
+};
diff --git a/packages/react-components/react-table/src/index.ts b/packages/react-components/react-table/src/index.ts
index bf062106c3fcd..a1b14a1b461d1 100644
--- a/packages/react-components/react-table/src/index.ts
+++ b/packages/react-components/react-table/src/index.ts
@@ -97,3 +97,25 @@ export {
 } 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,
+  useTableCellPrimaryLayoutStyles_unstable,
+  useTableCellPrimaryLayout_unstable,
+  renderTableCellPrimaryLayout_unstable,
+} from './TableCellPrimaryLayout';
+export type {
+  TableCellPrimaryLayoutProps,
+  TableCellPrimaryLayoutSlots,
+  TableCellPrimaryLayoutState,
+} from './TableCellPrimaryLayout';