diff --git a/.changeset/selfish-flowers-approve.md b/.changeset/selfish-flowers-approve.md
new file mode 100644
index 000000000000..4bdba41d241f
--- /dev/null
+++ b/.changeset/selfish-flowers-approve.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Update Table to use CSS Modules behind feature flag
diff --git a/packages/react/src/DataTable/Table.module.css b/packages/react/src/DataTable/Table.module.css
new file mode 100644
index 000000000000..099788b216d4
--- /dev/null
+++ b/packages/react/src/DataTable/Table.module.css
@@ -0,0 +1,283 @@
+/* Container ---------------------------------------------------------------- */
+.TableContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas:
+    'title actions'
+    'divider divider'
+    'subtitle subtitle'
+    'filter filter'
+    'table table'
+    'footer footer';
+  column-gap: var(--base-size-8);
+}
+
+/* TableTitle */
+.TableTitle {
+  margin: 0;
+  font-size: var(--text-body-size-small);
+  font-weight: var(--base-text-weight-semibold);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: calc(20 / 14);
+  color: var(--fgColor-default);
+  grid-area: title;
+  align-self: center;
+}
+
+/* TableSubtitle */
+.TableSubtitle {
+  margin: 0;
+  font-size: var(--text-body-size-small);
+  font-weight: var(--base-text-weight-normal);
+  line-height: var(--text-body-lineHeight-small);
+  color: var(--fgColor-default);
+  grid-area: subtitle;
+}
+
+/* TableActions */
+.TableActions {
+  display: flex;
+  column-gap: var(--base-size-8);
+  align-items: center;
+  grid-area: actions;
+  justify-self: end;
+}
+
+/* TableDivider */
+.TableDivider {
+  width: 100%;
+  height: 1px;
+  /* stylelint-disable-next-line primer/colors */
+  background-color: var(--borderColor-default);
+  grid-area: divider;
+  margin-block-start: var(--base-size-16);
+  margin-block-end: var(--base-size-8);
+}
+
+/* Spacing before the table */
+.TableTitle + .TableOverflowWrapper,
+.TableSubtitle + .TableOverflowWrapper,
+.TableActions + .TableOverflowWrapper {
+  margin-block-start: var(--base-size-8);
+}
+
+.TableOverflowWrapper {
+  grid-area: table;
+}
+
+/* Table -------------------------------------------------------------------- */
+.Table {
+  /* Default table styles */
+  --table-border-radius: 0.375rem;
+  --table-cell-padding: var(--cell-padding-block, 0.5rem) var(--cell-padding-inline, 0.75rem);
+  --table-font-size: 0.75rem;
+
+  display: grid;
+  width: 100%;
+  /* stylelint-disable-next-line primer/typography */
+  font-size: var(--table-font-size);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: calc(20 / 12);
+  border-spacing: 0;
+  /* stylelint-disable-next-line primer/borders */
+  border-collapse: separate;
+  background-color: var(--bgColor-default);
+  grid-area: table;
+  grid-template-columns: var(--grid-template-columns);
+
+  /* Density modes: condensed, normal, spacious */
+  &:where([data-cell-padding='condensed']) {
+    --cell-padding-block: 0.25rem;
+    --cell-padding-inline: 0.5rem;
+  }
+
+  &:where([data-cell-padding='normal']) {
+    --cell-padding-block: 0.5rem;
+    --cell-padding-inline: 0.75rem;
+  }
+
+  &:where([data-cell-padding='spacious']) {
+    --cell-padding-block: 0.75rem;
+    --cell-padding-inline: 1rem;
+  }
+}
+
+/* Borders */
+.TableCell:first-child,
+.TableHeader:first-child {
+  border-inline-start: var(--borderWidth-thin) solid var(--borderColor-default);
+}
+
+.TableCell:last-child,
+.TableHeader:last-child {
+  border-inline-end: var(--borderWidth-thin) solid var(--borderColor-default);
+}
+
+.TableHeader,
+.TableCell {
+  display: flex;
+  /* stylelint-disable-next-line primer/spacing */
+  padding: var(--table-cell-padding);
+  text-align: start;
+  align-items: center;
+  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);
+}
+
+.TableHeader:where([data-cell-align='end']),
+.TableCell:where([data-cell-align='end']) {
+  display: flex;
+  text-align: end;
+  justify-content: flex-end;
+}
+
+.TableHeader[data-cell-align='end'] .TableSortButton {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.TableHead .TableRow:first-of-type .TableHeader {
+  border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);
+}
+
+/* Border radius */
+/* stylelint-disable-next-line selector-max-specificity */
+.TableHead .TableRow:first-of-type .TableHeader:first-child {
+  /* stylelint-disable-next-line primer/borders */
+  border-top-left-radius: var(--table-border-radius);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.TableHead .TableRow:first-of-type .TableHeader:last-child {
+  /* stylelint-disable-next-line primer/borders */
+  border-top-right-radius: var(--table-border-radius);
+}
+
+/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */
+.TableOverflowWrapper:last-child .Table .TableBody .TableRow:last-of-type .TableCell:first-child {
+  /* stylelint-disable-next-line primer/borders */
+  border-bottom-left-radius: var(--table-border-radius);
+}
+
+/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */
+.TableOverflowWrapper:last-child .Table .TableBody .TableRow:last-of-type .TableCell:last-child {
+  /* stylelint-disable-next-line primer/borders */
+  border-bottom-right-radius: var(--table-border-radius);
+}
+
+/**
+ * Offset padding to make sure type aligns regardless of cell padding
+ * selection
+ */
+.TableRow > *:first-child:not(.TableCellSkeleton),
+.TableRow > *:first-child .TableCellSkeletonItem {
+  padding-inline-start: var(--base-size-16);
+}
+
+.TableRow > *:last-child:not(.TableCellSkeleton),
+.TableRow > *:last-child .TableCellSkeletonItem {
+  padding-inline-end: var(--base-size-16);
+}
+
+/* TableHeader */
+.TableHeader {
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--fgColor-muted);
+  background-color: var(--bgColor-muted);
+  border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);
+}
+
+.TableHeader:where([aria-sort='descending']),
+.TableHeader:where([aria-sort='ascending']) {
+  color: var(--fgColor-default);
+}
+
+/* Control visibility of sort icons */
+.TableSortIcon {
+  visibility: hidden;
+}
+
+/* The ASC icon is visible if the header is sortable and is hovered or focused */
+.TableHeader:hover .TableSortIcon--ascending,
+.TableHeader .TableSortButton:focus .TableSortIcon--ascending {
+  visibility: visible;
+}
+
+/* Each sort icon is visible if the TableHeader is currently in the corresponding sort state */
+.TableHeader[aria-sort='ascending'] .TableSortIcon--ascending,
+.TableHeader[aria-sort='descending'] .TableSortIcon--descending {
+  visibility: visible;
+}
+
+/* TableRow */
+.TableRow:hover .TableCell:not(.TableCellSkeleton) {
+  background-color: var(--control-transparent-bgColor-hover);
+}
+
+/* TableCell */
+.TableCell:where([scope='row']) {
+  display: flex;
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--fgColor-default);
+  align-items: center;
+}
+
+/* TableCellSkeleton */
+.TableCellSkeleton {
+  padding: 0;
+}
+
+.TableCellSkeletonItems {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+
+.TableCellSkeletonItem {
+  /* stylelint-disable-next-line primer/spacing */
+  padding: var(--table-cell-padding);
+
+  &:nth-of-type(5n + 1) {
+    --skeleton-item-width: 85%;
+  }
+
+  &:nth-of-type(5n + 2) {
+    --skeleton-item-width: 67.5%;
+  }
+
+  &:nth-of-type(5n + 3) {
+    --skeleton-item-width: 80%;
+  }
+
+  &:nth-of-type(5n + 4) {
+    --skeleton-item-width: 60%;
+  }
+
+  &:nth-of-type(5n + 5) {
+    --skeleton-item-width: 75%;
+  }
+}
+
+.TableCellSkeletonItem [data-component='SkeletonText'] {
+  width: var(--skeleton-item-width);
+}
+
+.TableCellSkeletonItem:not(:last-of-type) {
+  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);
+}
+
+/* Grid layout */
+.TableHead,
+.TableBody,
+.TableRow {
+  display: contents;
+}
+
+@supports (grid-template-columns: subgrid) {
+  .TableHead,
+  .TableBody,
+  .TableRow {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: -1 /1;
+  }
+}
diff --git a/packages/react/src/DataTable/Table.tsx b/packages/react/src/DataTable/Table.tsx
index b4bf6796eb7d..5c63b2d082eb 100644
--- a/packages/react/src/DataTable/Table.tsx
+++ b/packages/react/src/DataTable/Table.tsx
@@ -2,7 +2,6 @@ import {SortAscIcon, SortDescIcon} from '@primer/octicons-react'
 import {clsx} from 'clsx'
 import React from 'react'
 import styled from 'styled-components'
-import Box from '../Box'
 import Text from '../Text'
 import {get} from '../constants'
 import type {SxProp} from '../sx'
@@ -14,213 +13,223 @@ import {SortDirection} from './sorting'
 import {useTableLayout} from './useTable'
 import {SkeletonText} from '../experimental/Skeleton/SkeletonText'
 import {ScrollableRegion} from '../ScrollableRegion'
+import {useFeatureFlag} from '../FeatureFlags'
+import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
+import {Button} from '../internal/components/ButtonReset'
+import classes from './Table.module.css'
+
+const cssModulesFlag = 'primer_react_css_modules_team'
 
 // ----------------------------------------------------------------------------
 // Table
 // ----------------------------------------------------------------------------
 
-const StyledTable = styled.table<React.ComponentPropsWithoutRef<'table'>>`
-  /* Default table styles */
-  --table-border-radius: 0.375rem;
-  --table-cell-padding: var(--cell-padding-block, 0.5rem) var(--cell-padding-inline, 0.75rem);
-  --table-font-size: 0.75rem;
-
-  background-color: ${get('colors.canvas.default')};
-  border-spacing: 0;
-  border-collapse: separate;
-  display: grid;
-  font-size: var(--table-font-size);
-  grid-template-columns: var(--grid-template-columns);
-  line-height: calc(20 / 12);
-  width: 100%;
-
-  /* Density modes: condensed, normal, spacious */
-  &[data-cell-padding='condensed'] {
-    --cell-padding-block: 0.25rem;
-    --cell-padding-inline: 0.5rem;
-  }
-
-  &[data-cell-padding='normal'] {
-    --cell-padding-block: 0.5rem;
-    --cell-padding-inline: 0.75rem;
-  }
-
-  &[data-cell-padding='spacious'] {
-    --cell-padding-block: 0.75rem;
-    --cell-padding-inline: 1rem;
-  }
-
-  /* Borders */
-  .TableCell:first-child,
-  .TableHeader:first-child {
-    border-left: 1px solid ${get('colors.border.default')};
-  }
-
-  .TableCell:last-child,
-  .TableHeader:last-child {
-    border-right: 1px solid ${get('colors.border.default')};
-  }
-
-  .TableHeader,
-  .TableCell {
-    text-align: start;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid ${get('colors.border.default')};
-    padding: var(--table-cell-padding);
-  }
-
-  .TableHeader[data-cell-align='end'],
-  .TableCell[data-cell-align='end'] {
-    text-align: end;
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .TableHeader[data-cell-align='end'] .TableSortButton {
-    display: flex;
-    flex-direction: row-reverse;
-  }
-
-  .TableHead .TableRow:first-of-type .TableHeader {
-    border-top: 1px solid ${get('colors.border.default')};
-  }
-
-  /* Border radius */
-  .TableHead .TableRow:first-of-type .TableHeader:first-child {
-    border-top-left-radius: var(--table-border-radius);
-  }
-
-  .TableHead .TableRow:first-of-type .TableHeader:last-child {
-    border-top-right-radius: var(--table-border-radius);
-  }
-
-  .TableOverflowWrapper:last-child & .TableBody .TableRow:last-of-type .TableCell:first-child {
-    border-bottom-left-radius: var(--table-border-radius);
-  }
-
-  .TableOverflowWrapper:last-child & .TableBody .TableRow:last-of-type .TableCell:last-child {
-    border-bottom-right-radius: var(--table-border-radius);
-  }
+const StyledTable = toggleStyledComponent(
+  cssModulesFlag,
+  'table',
+  styled.table<React.ComponentPropsWithoutRef<'table'>>`
+    /* Default table styles */
+    --table-border-radius: 0.375rem;
+    --table-cell-padding: var(--cell-padding-block, 0.5rem) var(--cell-padding-inline, 0.75rem);
+    --table-font-size: 0.75rem;
+
+    background-color: ${get('colors.canvas.default')};
+    border-spacing: 0;
+    border-collapse: separate;
+    display: grid;
+    font-size: var(--table-font-size);
+    grid-template-columns: var(--grid-template-columns);
+    line-height: calc(20 / 12);
+    width: 100%;
 
-  /**
+    /* Density modes: condensed, normal, spacious */
+    &[data-cell-padding='condensed'] {
+      --cell-padding-block: 0.25rem;
+      --cell-padding-inline: 0.5rem;
+    }
+
+    &[data-cell-padding='normal'] {
+      --cell-padding-block: 0.5rem;
+      --cell-padding-inline: 0.75rem;
+    }
+
+    &[data-cell-padding='spacious'] {
+      --cell-padding-block: 0.75rem;
+      --cell-padding-inline: 1rem;
+    }
+
+    /* Borders */
+    .TableCell:first-child,
+    .TableHeader:first-child {
+      border-left: 1px solid ${get('colors.border.default')};
+    }
+
+    .TableCell:last-child,
+    .TableHeader:last-child {
+      border-right: 1px solid ${get('colors.border.default')};
+    }
+
+    .TableHeader,
+    .TableCell {
+      text-align: start;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid ${get('colors.border.default')};
+      padding: var(--table-cell-padding);
+    }
+
+    .TableHeader[data-cell-align='end'],
+    .TableCell[data-cell-align='end'] {
+      text-align: end;
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    .TableHeader[data-cell-align='end'] .TableSortButton {
+      display: flex;
+      flex-direction: row-reverse;
+    }
+
+    .TableHead .TableRow:first-of-type .TableHeader {
+      border-top: 1px solid ${get('colors.border.default')};
+    }
+
+    /* Border radius */
+    .TableHead .TableRow:first-of-type .TableHeader:first-child {
+      border-top-left-radius: var(--table-border-radius);
+    }
+
+    .TableHead .TableRow:first-of-type .TableHeader:last-child {
+      border-top-right-radius: var(--table-border-radius);
+    }
+
+    .TableOverflowWrapper:last-child & .TableBody .TableRow:last-of-type .TableCell:first-child {
+      border-bottom-left-radius: var(--table-border-radius);
+    }
+
+    .TableOverflowWrapper:last-child & .TableBody .TableRow:last-of-type .TableCell:last-child {
+      border-bottom-right-radius: var(--table-border-radius);
+    }
+
+    /**
    * Offset padding to make sure type aligns regardless of cell padding
    * selection
    */
-  .TableRow > *:first-child:not(.TableCellSkeleton),
-  .TableRow > *:first-child .TableCellSkeletonItem {
-    padding-inline-start: 1rem;
-  }
-
-  .TableRow > *:last-child:not(.TableCellSkeleton),
-  .TableRow > *:last-child .TableCellSkeletonItem {
-    padding-inline-end: 1rem;
-  }
-
-  /* TableHeader */
-  .TableHeader {
-    background-color: ${get('colors.canvas.subtle')};
-    color: ${get('colors.fg.muted')};
-    font-weight: 600;
-    border-top: 1px solid ${get('colors.border.default')};
-  }
-
-  .TableHeader[aria-sort='descending'],
-  .TableHeader[aria-sort='ascending'] {
-    color: ${get('colors.fg.default')};
-  }
-
-  /* Control visibility of sort icons */
-  .TableSortIcon {
-    visibility: hidden;
-  }
-
-  /* The ASC icon is visible if the header is sortable and is hovered or focused */
-  .TableHeader:hover .TableSortIcon--ascending,
-  .TableHeader .TableSortButton:focus .TableSortIcon--ascending {
-    visibility: visible;
-  }
-
-  /* Each sort icon is visible if the TableHeader is currently in the corresponding sort state */
-  .TableHeader[aria-sort='ascending'] .TableSortIcon--ascending,
-  .TableHeader[aria-sort='descending'] .TableSortIcon--descending {
-    visibility: visible;
-  }
-
-  /* TableRow */
-  .TableRow:hover .TableCell:not(.TableCellSkeleton) {
-    /* TODO: update this token when the new primitive tokens are released */
-    background-color: ${get('colors.actionListItem.default.hoverBg')};
-  }
-
-  /* TableCell */
-  .TableCell[scope='row'] {
-    align-items: center;
-    display: flex;
-    color: ${get('colors.fg.default')};
-    font-weight: 600;
-  }
-
-  /* TableCellSkeleton */
-  .TableCellSkeleton {
-    padding: 0;
-  }
-
-  .TableCellSkeletonItems {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
+    .TableRow > *:first-child:not(.TableCellSkeleton),
+    .TableRow > *:first-child .TableCellSkeletonItem {
+      padding-inline-start: 1rem;
+    }
+
+    .TableRow > *:last-child:not(.TableCellSkeleton),
+    .TableRow > *:last-child .TableCellSkeletonItem {
+      padding-inline-end: 1rem;
+    }
+
+    /* TableHeader */
+    .TableHeader {
+      background-color: ${get('colors.canvas.subtle')};
+      color: ${get('colors.fg.muted')};
+      font-weight: 600;
+      border-top: 1px solid ${get('colors.border.default')};
+    }
+
+    .TableHeader[aria-sort='descending'],
+    .TableHeader[aria-sort='ascending'] {
+      color: ${get('colors.fg.default')};
+    }
 
-  .TableCellSkeletonItem {
-    padding: var(--table-cell-padding);
+    /* Control visibility of sort icons */
+    .TableSortIcon {
+      visibility: hidden;
+    }
+
+    /* The ASC icon is visible if the header is sortable and is hovered or focused */
+    .TableHeader:hover .TableSortIcon--ascending,
+    .TableHeader .TableSortButton:focus .TableSortIcon--ascending {
+      visibility: visible;
+    }
 
-    &:nth-of-type(5n + 1) {
-      --skeleton-item-width: 85%;
+    /* Each sort icon is visible if the TableHeader is currently in the corresponding sort state */
+    .TableHeader[aria-sort='ascending'] .TableSortIcon--ascending,
+    .TableHeader[aria-sort='descending'] .TableSortIcon--descending {
+      visibility: visible;
     }
 
-    &:nth-of-type(5n + 2) {
-      --skeleton-item-width: 67.5%;
+    /* TableRow */
+    .TableRow:hover .TableCell:not(.TableCellSkeleton) {
+      /* TODO: update this token when the new primitive tokens are released */
+      background-color: ${get('colors.actionListItem.default.hoverBg')};
     }
 
-    &:nth-of-type(5n + 3) {
-      --skeleton-item-width: 80%;
+    /* TableCell */
+    .TableCell[scope='row'] {
+      align-items: center;
+      display: flex;
+      color: ${get('colors.fg.default')};
+      font-weight: 600;
     }
 
-    &:nth-of-type(5n + 4) {
-      --skeleton-item-width: 60%;
+    /* TableCellSkeleton */
+    .TableCellSkeleton {
+      padding: 0;
     }
 
-    &:nth-of-type(5n + 5) {
-      --skeleton-item-width: 75%;
+    .TableCellSkeletonItems {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
     }
-  }
 
-  .TableCellSkeletonItem [data-component='SkeletonText'] {
-    width: var(--skeleton-item-width);
-  }
+    .TableCellSkeletonItem {
+      padding: var(--table-cell-padding);
+
+      &:nth-of-type(5n + 1) {
+        --skeleton-item-width: 85%;
+      }
+
+      &:nth-of-type(5n + 2) {
+        --skeleton-item-width: 67.5%;
+      }
+
+      &:nth-of-type(5n + 3) {
+        --skeleton-item-width: 80%;
+      }
+
+      &:nth-of-type(5n + 4) {
+        --skeleton-item-width: 60%;
+      }
+
+      &:nth-of-type(5n + 5) {
+        --skeleton-item-width: 75%;
+      }
+    }
 
-  .TableCellSkeletonItem:not(:last-of-type) {
-    border-bottom: 1px solid ${get('colors.border.default')};
-  }
+    .TableCellSkeletonItem [data-component='SkeletonText'] {
+      width: var(--skeleton-item-width);
+    }
 
-  /* Grid layout */
-  .TableHead,
-  .TableBody,
-  .TableRow {
-    display: contents;
-  }
+    .TableCellSkeletonItem:not(:last-of-type) {
+      border-bottom: 1px solid ${get('colors.border.default')};
+    }
 
-  @supports (grid-template-columns: subgrid) {
+    /* Grid layout */
     .TableHead,
     .TableBody,
     .TableRow {
-      display: grid;
-      grid-template-columns: subgrid;
-      grid-column: -1 /1;
+      display: contents;
     }
-  }
-`
+
+    @supports (grid-template-columns: subgrid) {
+      .TableHead,
+      .TableBody,
+      .TableRow {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: -1 /1;
+      }
+    }
+  `,
+)
 
 export type TableProps = React.ComponentPropsWithoutRef<'table'> & {
   /**
@@ -249,15 +258,25 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(function Table(
   {'aria-labelledby': labelledby, cellPadding = 'normal', className, gridTemplateColumns, ...rest},
   ref,
 ) {
+  const enabled = useFeatureFlag(cssModulesFlag)
+
   return (
     // TODO update type to be non-optional in next major release
     // @ts-expect-error this type should be required in the next major version
-    <ScrollableRegion aria-labelledby={labelledby} className="TableOverflowWrapper">
+    <ScrollableRegion
+      aria-labelledby={labelledby}
+      className={clsx('TableOverflowWrapper', {
+        [classes.TableOverflowWrapper]: enabled,
+      })}
+    >
       <StyledTable
         {...rest}
         aria-labelledby={labelledby}
         data-cell-padding={cellPadding}
-        className={clsx('Table', className)}
+        className={clsx(className, {
+          Table: true,
+          [classes.Table]: enabled,
+        })}
         role="table"
         ref={ref}
         style={{'--grid-template-columns': gridTemplateColumns} as React.CSSProperties}
@@ -273,10 +292,16 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(function Table(
 export type TableHeadProps = React.ComponentPropsWithoutRef<'thead'>
 
 function TableHead({children}: TableHeadProps) {
+  const enabled = useFeatureFlag(cssModulesFlag)
   return (
     // We need to explicitly pass this role because some ATs and browsers drop table semantics
     // when we use `display: contents` or `display: grid` in the table
-    <thead className="TableHead" role="rowgroup">
+    <thead
+      className={clsx('TableHead', {
+        [classes.TableHead]: enabled,
+      })}
+      role="rowgroup"
+    >
       {children}
     </thead>
   )
@@ -289,10 +314,16 @@ function TableHead({children}: TableHeadProps) {
 export type TableBodyProps = React.ComponentPropsWithoutRef<'tbody'>
 
 function TableBody({children}: TableBodyProps) {
+  const enabled = useFeatureFlag(cssModulesFlag)
   return (
     // We need to explicitly pass this role because some ATs and browsers drop table semantics
     // when we use `display: contents` or `display: grid` in the table
-    <tbody className="TableBody" role="rowgroup">
+    <tbody
+      className={clsx('TableBody', {
+        [classes.TableBody]: enabled,
+      })}
+      role="rowgroup"
+    >
       {children}
     </tbody>
   )
@@ -310,8 +341,17 @@ export type TableHeaderProps = Omit<React.ComponentPropsWithoutRef<'th'>, 'align
 }
 
 function TableHeader({align, children, ...rest}: TableHeaderProps) {
+  const enabled = useFeatureFlag(cssModulesFlag)
   return (
-    <th {...rest} className="TableHeader" role="columnheader" scope="col" data-cell-align={align}>
+    <th
+      {...rest}
+      className={clsx('TableHeader', {
+        [classes.TableHeader]: enabled,
+      })}
+      role="columnheader"
+      scope="col"
+      data-cell-align={align}
+    >
       {children}
     </th>
   )
@@ -331,22 +371,37 @@ type TableSortHeaderProps = TableHeaderProps & {
 }
 
 function TableSortHeader({align, children, direction, onToggleSort, ...rest}: TableSortHeaderProps) {
+  const enabled = useFeatureFlag(cssModulesFlag)
   const ariaSort = direction === 'DESC' ? 'descending' : direction === 'ASC' ? 'ascending' : undefined
 
   return (
     <TableHeader {...rest} aria-sort={ariaSort} align={align}>
       <Button
         type="button"
-        className="TableSortButton"
+        className={clsx('TableSortButton', {
+          [classes.TableSortButton]: enabled,
+        })}
         onClick={() => {
           onToggleSort()
         }}
       >
         {children}
         {direction === SortDirection.NONE || direction === SortDirection.ASC ? (
-          <SortAscIcon className="TableSortIcon TableSortIcon--ascending" />
+          <SortAscIcon
+            className={clsx('TableSortIcon', 'TableSortIcon--ascending', {
+              [classes.TableSortIcon]: enabled,
+              // [classes['TableSortIcon--ascending']]: enabled,
+            })}
+          />
+        ) : null}
+        {direction === SortDirection.DESC ? (
+          <SortDescIcon
+            className={clsx('TableSortIcon', 'TableSortIcon--descending', {
+              [classes.TableSortIcon]: enabled,
+              // [classes['TableSortIcon--descending']]: enabled,
+            })}
+          />
         ) : null}
-        {direction === SortDirection.DESC ? <SortDescIcon className="TableSortIcon TableSortIcon--descending" /> : null}
       </Button>
     </TableHeader>
   )
@@ -359,8 +414,15 @@ function TableSortHeader({align, children, direction, onToggleSort, ...rest}: Ta
 export type TableRowProps = React.ComponentPropsWithoutRef<'tr'>
 
 function TableRow({children, ...rest}: TableRowProps) {
+  const enabled = useFeatureFlag(cssModulesFlag)
   return (
-    <tr {...rest} className="TableRow" role="row">
+    <tr
+      {...rest}
+      className={clsx('TableRow', {
+        [classes.TableRow]: enabled,
+      })}
+      role="row"
+    >
       {children}
     </tr>
   )
@@ -384,11 +446,20 @@ export type TableCellProps = Omit<React.ComponentPropsWithoutRef<'td'>, 'align'>
 }
 
 function TableCell({align, className, children, scope, ...rest}: TableCellProps) {
+  const enabled = useFeatureFlag(cssModulesFlag)
   const BaseComponent = scope ? 'th' : 'td'
   const role = scope ? 'rowheader' : 'cell'
 
   return (
-    <BaseComponent {...rest} className={clsx('TableCell', className)} scope={scope} role={role} data-cell-align={align}>
+    <BaseComponent
+      {...rest}
+      className={clsx('TableCell', className, {
+        [classes.TableCell]: enabled,
+      })}
+      scope={scope}
+      role={role}
+      data-cell-align={align}
+    >
       {children}
     </BaseComponent>
   )
@@ -403,68 +474,82 @@ function TableCellPlaceholder({children}: TableCellPlaceholderProps) {
 // ----------------------------------------------------------------------------
 // TableContainer
 // ----------------------------------------------------------------------------
-const StyledTableContainer = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-areas:
-    'title actions'
-    'divider divider'
-    'subtitle subtitle'
-    'filter filter'
-    'table table'
-    'footer footer';
-  column-gap: ${get('space.2')};
-
-  ${sx}
-
-  /* TableTitle */
-  .TableTitle {
-    grid-area: title;
-    align-self: center;
-  }
-
-  /* TableSubtitle */
-  .TableSubtitle {
-    grid-area: subtitle;
-  }
-
-  /* TableActions */
-  .TableActions {
-    display: flex;
+const StyledTableContainer = toggleStyledComponent(
+  cssModulesFlag,
+  'div',
+  styled.div`
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+      'title actions'
+      'divider divider'
+      'subtitle subtitle'
+      'filter filter'
+      'table table'
+      'footer footer';
     column-gap: ${get('space.2')};
-    align-items: center;
-    grid-area: actions;
-    justify-self: end;
-  }
-
-  /* TableDivider */
-  .TableDivider {
-    grid-area: divider;
-    margin-top: ${get('space.3')};
-    margin-bottom: ${get('space.2')};
-  }
-
-  /* Table */
-  .Table {
-    grid-area: table;
-  }
-
-  /* Spacing before the table */
-  .TableTitle + .TableOverflowWrapper,
-  .TableSubtitle + .TableOverflowWrapper,
-  .TableActions + .TableOverflowWrapper {
-    margin-top: ${get('space.2')};
-  }
-
-  .TableOverflowWrapper {
-    grid-area: table;
-  }
-`
+
+    ${sx}
+
+    /* TableTitle */
+    .TableTitle {
+      grid-area: title;
+      align-self: center;
+    }
+
+    /* TableSubtitle */
+    .TableSubtitle {
+      grid-area: subtitle;
+    }
+
+    /* TableActions */
+    .TableActions {
+      display: flex;
+      column-gap: ${get('space.2')};
+      align-items: center;
+      grid-area: actions;
+      justify-self: end;
+    }
+
+    /* TableDivider */
+    .TableDivider {
+      grid-area: divider;
+      margin-top: ${get('space.3')};
+      margin-bottom: ${get('space.2')};
+    }
+
+    /* Table */
+    .Table {
+      grid-area: table;
+    }
+
+    /* Spacing before the table */
+    .TableTitle + .TableOverflowWrapper,
+    .TableSubtitle + .TableOverflowWrapper,
+    .TableActions + .TableOverflowWrapper {
+      margin-top: ${get('space.2')};
+    }
+
+    .TableOverflowWrapper {
+      grid-area: table;
+    }
+  `,
+)
 
 export type TableContainerProps = React.PropsWithChildren<SxProp>
 
 function TableContainer({children, sx}: TableContainerProps) {
-  return <StyledTableContainer sx={sx}>{children}</StyledTableContainer>
+  const enabled = useFeatureFlag(cssModulesFlag)
+  return (
+    <StyledTableContainer
+      className={clsx({
+        [classes.TableContainer]: enabled,
+      })}
+      sx={sx}
+    >
+      {children}
+    </StyledTableContainer>
+  )
 }
 
 export type TableTitleProps = React.PropsWithChildren<{
@@ -483,25 +568,33 @@ export type TableTitleProps = React.PropsWithChildren<{
 }>
 
 const TableTitle = React.forwardRef<HTMLElement, TableTitleProps>(function TableTitle({as = 'h2', children, id}, ref) {
+  const enabled = useFeatureFlag(cssModulesFlag)
   return (
-    <Box
+    <StyledTableTitle
       as={as}
-      className="TableTitle"
+      className={clsx('TableTitle', {
+        [classes.TableTitle]: enabled,
+      })}
       id={id}
       ref={ref}
-      sx={{
-        color: 'fg.default',
-        fontWeight: 'bold',
-        fontSize: 1,
-        lineHeight: 'calc(20 / 14)',
-        margin: 0,
-      }}
     >
       {children}
-    </Box>
+    </StyledTableTitle>
   )
 })
 
+const StyledTableTitle = toggleStyledComponent(
+  cssModulesFlag,
+  'h2',
+  styled.h2`
+    color: var(--fgColor-default);
+    font-size: var(--text-body-size-small);
+    font-weight: var(--base-text-weight-semibold);
+    line-height: calc(20 / 14);
+    margin: 0;
+  `,
+)
+
 export type TableSubtitleProps = React.PropsWithChildren<{
   /**
    * Provide an alternate element or component to use as the container for
@@ -518,42 +611,67 @@ export type TableSubtitleProps = React.PropsWithChildren<{
 }>
 
 function TableSubtitle({as, children, id}: TableSubtitleProps) {
+  const enabled = useFeatureFlag(cssModulesFlag)
   return (
-    <Box
+    <StyledTableSubtitle
       as={as}
-      className="TableSubtitle"
+      className={clsx('TableSubtitle', {
+        [classes.TableSubtitle]: enabled,
+      })}
       id={id}
-      sx={{
-        color: 'fg.default',
-        fontWeight: 'normal',
-        fontSize: 0,
-        lineHeight: 'default',
-        margin: 0,
-      }}
     >
       {children}
-    </Box>
+    </StyledTableSubtitle>
   )
 }
 
+const StyledTableSubtitle = toggleStyledComponent(
+  cssModulesFlag,
+  'div',
+  styled.div`
+    color: var(--fgColor-default);
+    font-weight: var(--base-text-weight-normal);
+    font-size: var(--text-body-size-small);
+    line-height: var(--text-body-lineHeight-small);
+    margin: 0;
+  `,
+)
+
 function TableDivider() {
+  const enabled = useFeatureFlag(cssModulesFlag)
   return (
-    <Box
-      className="TableDivider"
+    <StyledTableDivider
+      className={clsx('TableDivider', {
+        [classes.TableDivider]: enabled,
+      })}
       role="presentation"
-      sx={{
-        backgroundColor: 'border.default',
-        width: '100%',
-        height: 1,
-      }}
     />
   )
 }
 
+const StyledTableDivider = toggleStyledComponent(
+  cssModulesFlag,
+  'div',
+  styled.div`
+    background-color: var(--borderColor-default);
+    width: 100%;
+    height: 1px;
+  `,
+)
+
 export type TableActionsProps = React.PropsWithChildren
 
 function TableActions({children}: TableActionsProps) {
-  return <div className="TableActions">{children}</div>
+  const enabled = useFeatureFlag(cssModulesFlag)
+  return (
+    <div
+      className={clsx('TableActions', {
+        [classes.TableActions]: enabled,
+      })}
+    >
+      {children}
+    </div>
+  )
 }
 
 // ----------------------------------------------------------------------------
@@ -580,6 +698,7 @@ export type TableSkeletonProps<Data extends UniqueRow> = React.ComponentPropsWit
 }
 
 function TableSkeleton<Data extends UniqueRow>({cellPadding, columns, rows = 10, ...rest}: TableSkeletonProps<Data>) {
+  const enabled = useFeatureFlag(cssModulesFlag)
   const {gridTemplateColumns} = useTableLayout(columns)
   return (
     <Table {...rest} cellPadding={cellPadding} gridTemplateColumns={gridTemplateColumns}>
@@ -600,12 +719,26 @@ function TableSkeleton<Data extends UniqueRow>({cellPadding, columns, rows = 10,
         <TableRow>
           {Array.from({length: columns.length}).map((_, i) => {
             return (
-              <TableCell key={i} className="TableCellSkeleton">
+              <TableCell
+                key={i}
+                className={clsx('TableCellSkeleton', {
+                  [classes.TableCellSkeleton]: enabled,
+                })}
+              >
                 <VisuallyHidden>Loading</VisuallyHidden>
-                <div className="TableCellSkeletonItems">
+                <div
+                  className={clsx('TableCellSkeletonItems', {
+                    [classes.TableCellSkeletonItems]: enabled,
+                  })}
+                >
                   {Array.from({length: rows}).map((_, i) => {
                     return (
-                      <div key={i} className="TableCellSkeletonItem">
+                      <div
+                        key={i}
+                        className={clsx('TableCellSkeletonItem', {
+                          [classes.TableCellSkeletonItem]: enabled,
+                        })}
+                      >
                         <SkeletonText />
                       </div>
                     )
@@ -620,32 +753,6 @@ function TableSkeleton<Data extends UniqueRow>({cellPadding, columns, rows = 10,
   )
 }
 
-// ----------------------------------------------------------------------------
-// Utilities
-// ----------------------------------------------------------------------------
-
-// Button "reset" component that provides an unstyled <button> element for use
-// in the table
-const Button = styled.button`
-  padding: 0;
-  border: 0;
-  margin: 0;
-  display: inline-flex;
-  padding: 0;
-  border: 0;
-  appearance: none;
-  background: none;
-  cursor: pointer;
-  text-align: start;
-  font: inherit;
-  color: inherit;
-  column-gap: 0.5rem;
-  align-items: center;
-  &::-moz-focus-inner {
-    border: 0;
-  }
-`
-
 export {
   TableContainer,
   TableTitle,