diff --git a/.changeset/clean-mails-accept.md b/.changeset/clean-mails-accept.md
new file mode 100644
index 00000000000..00d788b60fc
--- /dev/null
+++ b/.changeset/clean-mails-accept.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert Details to css module behind feature flag
diff --git a/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-colorblind-linux.png b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-colorblind-linux.png
new file mode 100644
index 00000000000..a418326a301
Binary files /dev/null and b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-colorblind-open-linux.png b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-colorblind-open-linux.png
new file mode 100644
index 00000000000..aa412d4fbf9
Binary files /dev/null and b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-colorblind-open-linux.png differ
diff --git a/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-dimmed-linux.png b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-dimmed-linux.png
new file mode 100644
index 00000000000..65a4cf998d2
Binary files /dev/null and b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-dimmed-open-linux.png b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-dimmed-open-linux.png
new file mode 100644
index 00000000000..0411e98abc3
Binary files /dev/null and b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-dimmed-open-linux.png differ
diff --git a/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-high-contrast-linux.png b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..a79c7c11b82
Binary files /dev/null and b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-high-contrast-open-linux.png b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-high-contrast-open-linux.png
new file mode 100644
index 00000000000..948de9ecd4f
Binary files /dev/null and b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-high-contrast-open-linux.png differ
diff --git a/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-linux.png b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-linux.png
new file mode 100644
index 00000000000..a418326a301
Binary files /dev/null and b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-open-linux.png b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-open-linux.png
new file mode 100644
index 00000000000..aa412d4fbf9
Binary files /dev/null and b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-open-linux.png differ
diff --git a/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-tritanopia-linux.png b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..a418326a301
Binary files /dev/null and b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-tritanopia-open-linux.png b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-tritanopia-open-linux.png
new file mode 100644
index 00000000000..5ac39bfc2c9
Binary files /dev/null and b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-dark-tritanopia-open-linux.png differ
diff --git a/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-colorblind-linux.png b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-colorblind-linux.png
new file mode 100644
index 00000000000..512f3f8eb1f
Binary files /dev/null and b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-colorblind-open-linux.png b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-colorblind-open-linux.png
new file mode 100644
index 00000000000..2dba72bd269
Binary files /dev/null and b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-colorblind-open-linux.png differ
diff --git a/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-high-contrast-linux.png b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-high-contrast-linux.png
new file mode 100644
index 00000000000..79afd90c3fe
Binary files /dev/null and b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-high-contrast-open-linux.png b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-high-contrast-open-linux.png
new file mode 100644
index 00000000000..fe4c17e567b
Binary files /dev/null and b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-high-contrast-open-linux.png differ
diff --git a/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-linux.png b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-linux.png
new file mode 100644
index 00000000000..512f3f8eb1f
Binary files /dev/null and b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-linux.png differ
diff --git a/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-open-linux.png b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-open-linux.png
new file mode 100644
index 00000000000..2dba72bd269
Binary files /dev/null and b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-open-linux.png differ
diff --git a/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-tritanopia-linux.png b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-tritanopia-linux.png
new file mode 100644
index 00000000000..512f3f8eb1f
Binary files /dev/null and b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-tritanopia-open-linux.png b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-tritanopia-open-linux.png
new file mode 100644
index 00000000000..2dba72bd269
Binary files /dev/null and b/.playwright/snapshots/components/Details.test.ts-snapshots/Details-SX-Prop-Stress-Test-light-tritanopia-open-linux.png differ
diff --git a/e2e/components/Details.test.ts b/e2e/components/Details.test.ts
index 4f51edaeb18..5cd2a157d80 100644
--- a/e2e/components/Details.test.ts
+++ b/e2e/components/Details.test.ts
@@ -2,43 +2,56 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('Details', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-details--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
+const stories: Array<{title: string; id: string}> = [
+  {
+    title: 'Default',
+    id: 'components-details--default',
+  },
+  {
+    title: 'SX Prop Stress Test',
+    id: 'components-details-dev--sx-prop-stress-test',
+  },
+]
 
-          // Default state - closed
-          expect(await page.screenshot()).toMatchSnapshot(`Details.Default.${theme}.png`)
-          // Click the summary to open
-          await page.getByText('See Details').click()
-          await page.getByText('This is some content').waitFor()
-          // Open state
-          expect(await page.screenshot()).toMatchSnapshot(`Details.Default.${theme}.open.png`)
-        })
+test.describe('Details', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
 
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-details--default',
-            globals: {
-              colorScheme: theme,
-            },
+            // Default state - closed
+            expect(await page.screenshot()).toMatchSnapshot(`Details.${story.title}.${theme}.png`)
+            // Click the summary to open
+            await page.getByText('See Details').click()
+            await page.getByText('This is some content').waitFor()
+            // Open state
+            expect(await page.screenshot()).toMatchSnapshot(`Details.${story.title}.${theme}.open.png`)
           })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: false,
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations({
+              rules: {
+                'color-contrast': {
+                  enabled: false,
+                },
               },
-            },
+            })
           })
         })
-      })
-    }
-  })
+      }
+    })
+  }
 })
diff --git a/packages/react/src/Details/Details.dev.stories.tsx b/packages/react/src/Details/Details.dev.stories.tsx
new file mode 100644
index 00000000000..15d83468997
--- /dev/null
+++ b/packages/react/src/Details/Details.dev.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import type {StoryFn, Meta} from '@storybook/react'
+import Details from './Details'
+import {Button} from '../Button'
+import useDetails from '../hooks/useDetails'
+
+export default {
+  title: 'Components/Details/Dev',
+  component: Details,
+} as Meta<typeof Details>
+
+export const SxPropStressTest: StoryFn<typeof Details> = () => {
+  const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
+  return (
+    <Details
+      {...getDetailsProps()}
+      sx={{
+        backgroundColor: 'accent.emphasis',
+        color: 'accent.fg',
+        p: 4,
+      }}
+    >
+      <Button as="summary">See Details</Button>
+      This is some content
+    </Details>
+  )
+}
diff --git a/packages/react/src/Details/Details.module.css b/packages/react/src/Details/Details.module.css
new file mode 100644
index 00000000000..a0e787b9844
--- /dev/null
+++ b/packages/react/src/Details/Details.module.css
@@ -0,0 +1,7 @@
+.Details > summary {
+  list-style: none;
+}
+
+.Details > summary::-webkit-details-marker {
+  display: none;
+}
diff --git a/packages/react/src/Details/Details.tsx b/packages/react/src/Details/Details.tsx
index e0aaf17d828..d90f76a7e2a 100644
--- a/packages/react/src/Details/Details.tsx
+++ b/packages/react/src/Details/Details.tsx
@@ -1,20 +1,41 @@
+import React, {type ComponentPropsWithoutRef, type ReactElement} from 'react'
 import styled from 'styled-components'
 import type {SxProp} from '../sx'
 import sx from '../sx'
-import type {ComponentProps} from '../utils/types'
+import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
+import {useFeatureFlag} from '../FeatureFlags'
+import {clsx} from 'clsx'
+import classes from './Details.module.css'
 
-const Details = styled.details<SxProp>`
-  & > summary {
-    list-style: none;
-  }
-  & > summary::-webkit-details-marker {
-    display: none;
-  }
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
 
-  ${sx};
-`
+const StyledDetails = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'details',
+  styled.details<SxProp>`
+    & > summary {
+      list-style: none;
+    }
+    & > summary::-webkit-details-marker {
+      display: none;
+    }
+
+    ${sx};
+  `,
+)
+
+const Details = React.forwardRef<HTMLDetailsElement, DetailsProps>(
+  ({className, children, ...rest}, ref): ReactElement => {
+    const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+    return (
+      <StyledDetails className={clsx(className, {[classes.Details]: enabled})} {...rest} ref={ref}>
+        {children}
+      </StyledDetails>
+    )
+  },
+)
 
 Details.displayName = 'Details'
 
-export type DetailsProps = ComponentProps<typeof Details>
+export type DetailsProps = ComponentPropsWithoutRef<'details'> & SxProp
 export default Details