diff --git a/.changeset/shiny-chefs-matter.md b/.changeset/shiny-chefs-matter.md
new file mode 100644
index 00000000000..dc0ccd0325b
--- /dev/null
+++ b/.changeset/shiny-chefs-matter.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Update `SubNav` component to use CSS modules behind the feature flag primer_react_css_modules_team
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-dark-colorblind-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-dark-colorblind-linux.png
new file mode 100644
index 00000000000..65e722a5bcc
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-dark-dimmed-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-dark-dimmed-linux.png
new file mode 100644
index 00000000000..70f0e626d18
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-dark-high-contrast-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..84195a877b2
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-dark-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-dark-linux.png
new file mode 100644
index 00000000000..27f0e0be0da
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-dark-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-dark-tritanopia-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..6f5f68b71b4
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-light-colorblind-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-light-colorblind-linux.png
new file mode 100644
index 00000000000..a99147e0059
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-light-high-contrast-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-light-high-contrast-linux.png
new file mode 100644
index 00000000000..c3d90cc3a68
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-light-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-light-linux.png
new file mode 100644
index 00000000000..4aeddbe6e03
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-light-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-light-tritanopia-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-light-tritanopia-linux.png
new file mode 100644
index 00000000000..3061962a774
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithCSS-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-dark-colorblind-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-dark-colorblind-linux.png
new file mode 100644
index 00000000000..860ac151f38
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-dark-dimmed-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-dark-dimmed-linux.png
new file mode 100644
index 00000000000..74132d45826
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-dark-high-contrast-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..0e560eaf0ea
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-dark-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-dark-linux.png
new file mode 100644
index 00000000000..370ff8df54d
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-dark-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-dark-tritanopia-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..370ff8df54d
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-light-colorblind-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-light-colorblind-linux.png
new file mode 100644
index 00000000000..cf9f751fd88
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-light-high-contrast-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-light-high-contrast-linux.png
new file mode 100644
index 00000000000..06e19d5a8cc
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-light-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-light-linux.png
new file mode 100644
index 00000000000..58945d4f5af
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-light-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-light-tritanopia-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-light-tritanopia-linux.png
new file mode 100644
index 00000000000..58945d4f5af
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSx-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-dark-colorblind-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-dark-colorblind-linux.png
new file mode 100644
index 00000000000..860ac151f38
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-dark-dimmed-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-dark-dimmed-linux.png
new file mode 100644
index 00000000000..3011c2dcb6c
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-dark-high-contrast-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..0e560eaf0ea
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-dark-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-dark-linux.png
new file mode 100644
index 00000000000..370ff8df54d
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-dark-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-dark-tritanopia-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..370ff8df54d
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-light-colorblind-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-light-colorblind-linux.png
new file mode 100644
index 00000000000..cf9f751fd88
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-light-high-contrast-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-light-high-contrast-linux.png
new file mode 100644
index 00000000000..06e19d5a8cc
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-light-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-light-linux.png
new file mode 100644
index 00000000000..58945d4f5af
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-light-linux.png differ
diff --git a/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-light-tritanopia-linux.png b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-light-tritanopia-linux.png
new file mode 100644
index 00000000000..58945d4f5af
Binary files /dev/null and b/.playwright/snapshots/components/SubNav.test.ts-snapshots/SubNav-Dev-WithSxAndCSS-light-tritanopia-linux.png differ
diff --git a/e2e/components/SubNav.test.ts b/e2e/components/SubNav.test.ts
index 3cd1fc9ea7b..71336dcad7e 100644
--- a/e2e/components/SubNav.test.ts
+++ b/e2e/components/SubNav.test.ts
@@ -36,4 +36,58 @@ test.describe('SubNav', () => {
       })
     }
   })
+
+  test.describe('Dev: With Sx', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-subnav-dev--with-sx',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`SubNav.Dev.WithSx.${theme}.png`)
+        })
+      })
+    }
+  })
+
+  test.describe('Dev: With CSS', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-subnav-dev--with-css',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`SubNav.Dev.WithCSS.${theme}.png`)
+        })
+      })
+    }
+  })
+
+  test.describe('Dev: With Sx and CSS', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-subnav-dev--with-sx-and-css',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`SubNav.Dev.WithSxAndCSS.${theme}.png`)
+        })
+      })
+    }
+  })
 })
diff --git a/packages/react/src/SubNav/SubNav.dev.module.css b/packages/react/src/SubNav/SubNav.dev.module.css
new file mode 100644
index 00000000000..61807842f42
--- /dev/null
+++ b/packages/react/src/SubNav/SubNav.dev.module.css
@@ -0,0 +1,17 @@
+.SubNavDev {
+  padding: var(--base-size-4);
+  border: var(--borderWidth-thick) solid var(--borderColor-default);
+}
+
+.SubNavLinksDev {
+  margin: var(--base-size-8);
+}
+
+.SubNavLinkDev {
+  font-weight: var(--text-title-weight-large);
+  color: var(--fgColor-accent);
+
+  &:is([data-selected]) {
+    background-color: var(--bgColor-open-emphasis);
+  }
+}
diff --git a/packages/react/src/SubNav/SubNav.dev.stories.tsx b/packages/react/src/SubNav/SubNav.dev.stories.tsx
new file mode 100644
index 00000000000..69889e38ac0
--- /dev/null
+++ b/packages/react/src/SubNav/SubNav.dev.stories.tsx
@@ -0,0 +1,92 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import SubNav from './SubNav'
+import type {ComponentProps} from '../utils/types'
+import {FeatureFlags} from '../FeatureFlags'
+
+import styles from './SubNav.dev.module.css'
+
+export default {
+  title: 'Components/SubNav/Dev',
+  component: SubNav,
+  subcomponents: {
+    'SubNav.Link': SubNav.Link,
+  },
+} as Meta<ComponentProps<typeof SubNav>>
+
+export const WithCss = () => (
+  <FeatureFlags
+    flags={{
+      primer_react_css_modules_team: true,
+      primer_react_css_modules_staff: true,
+      primer_react_css_modules_ga: true,
+    }}
+  >
+    <SubNav aria-label="Main" className={styles.SubNavDev}>
+      <SubNav.Links className={styles.SubNavLinksDev}>
+        <SubNav.Link href="#home" selected className={styles.SubNavLinkDev}>
+          Home
+        </SubNav.Link>
+        <SubNav.Link href="#documentation" className={styles.SubNavLinkDev}>
+          Documentation
+        </SubNav.Link>
+        <SubNav.Link href="#support" className={styles.SubNavLinkDev}>
+          Support
+        </SubNav.Link>
+      </SubNav.Links>
+    </SubNav>
+  </FeatureFlags>
+)
+
+export const WithSx = () => (
+  <SubNav aria-label="Main" sx={{p: 1, display: 'flex', border: '2px solid', borderColor: 'border.default'}}>
+    <SubNav.Links sx={{m: 2}}>
+      <SubNav.Link
+        href="#home"
+        selected
+        sx={{color: 'accent.fg', fontWeight: 'bold', '&:is([data-selected])': {backgroundColor: 'danger.fg'}}}
+      >
+        Home
+      </SubNav.Link>
+      <SubNav.Link href="#documentation" sx={{color: 'accent.fg', fontWeight: 'bold'}}>
+        Documentation
+      </SubNav.Link>
+      <SubNav.Link href="#support" sx={{color: 'accent.fg', fontWeight: 'bold'}}>
+        Support
+      </SubNav.Link>
+    </SubNav.Links>
+  </SubNav>
+)
+
+export const WithSxAndCSS = () => (
+  <FeatureFlags
+    flags={{
+      primer_react_css_modules_team: true,
+      primer_react_css_modules_staff: true,
+      primer_react_css_modules_ga: true,
+    }}
+  >
+    <SubNav
+      aria-label="Main"
+      sx={{p: 1, display: 'flex', border: '2px solid', borderColor: 'border.default'}}
+      className={styles.SubNavDev}
+    >
+      <SubNav.Links sx={{m: 2}} className={styles.SubNavLinksDev}>
+        <SubNav.Link
+          href="#home"
+          selected
+          className={styles.SubNavLinkDev}
+          sx={{'&:is([data-selected])': {backgroundColor: 'danger.fg'}}}
+        >
+          Home
+        </SubNav.Link>
+        <SubNav.Link href="#documentation" className={styles.SubNavLinkDev}>
+          Documentation
+        </SubNav.Link>
+        <SubNav.Link href="#support" sx={{color: 'accent.fg', fontWeight: 'bold'}} className={styles.SubNavLinkDev}>
+          Support
+        </SubNav.Link>
+      </SubNav.Links>
+    </SubNav>
+  </FeatureFlags>
+)
diff --git a/packages/react/src/SubNav/SubNav.module.css b/packages/react/src/SubNav/SubNav.module.css
new file mode 100644
index 00000000000..bb6a4c52c81
--- /dev/null
+++ b/packages/react/src/SubNav/SubNav.module.css
@@ -0,0 +1,69 @@
+.SubNav {
+  display: flex;
+  justify-content: space-between;
+}
+
+.Body {
+  display: flex;
+  /* stylelint-disable-next-line primer/spacing */
+  margin-bottom: -1px;
+
+  & > * {
+    margin-left: var(--base-size-8);
+  }
+
+  & > *:first-child {
+    margin-left: 0;
+  }
+}
+
+.Actions {
+  align-self: center;
+}
+
+.Links {
+  display: flex;
+}
+
+.Link {
+  display: flex;
+  min-height: 34px; /* custom values for SubNav */
+  padding-right: var(--base-size-16);
+  padding-left: var(--base-size-16);
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-medium);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 20px; /* custom values for SubNav */
+  color: var(--fgColor-default);
+  text-align: center;
+  text-decoration: none;
+  border-top: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-right: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
+  align-items: center;
+
+  &:first-of-type {
+    border-left: var(--borderWidth-thin) solid var(--borderColor-default);
+    border-top-left-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
+  }
+
+  &:last-of-type {
+    border-top-right-radius: var(--borderRadius-medium);
+    border-bottom-right-radius: var(--borderRadius-medium);
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    background-color: var(--bgColor-muted);
+    transition: background-color 0.2s ease;
+  }
+
+  &:is([data-selected]) {
+    color: var(--fgColor-onEmphasis);
+    background-color: var(--bgColor-accent-emphasis);
+    /* stylelint-disable-next-line primer/colors */
+    border-color: var(--bgColor-accent-emphasis);
+  }
+}
diff --git a/packages/react/src/SubNav/SubNav.tsx b/packages/react/src/SubNav/SubNav.tsx
index 48ccc8e5640..7ab40ad702d 100644
--- a/packages/react/src/SubNav/SubNav.tsx
+++ b/packages/react/src/SubNav/SubNav.tsx
@@ -6,118 +6,166 @@ import {get} from '../constants'
 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'
 
-const ITEM_CLASS = 'SubNav-item'
-const SELECTED_CLASS = 'selected'
+import styles from './SubNav.module.css'
 
-const SubNavBase = styled.nav<SxProp>`
-  display: flex;
-  justify-content: space-between;
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
 
-  .SubNav-body {
+type StyledSubNavProps = React.ComponentProps<'nav'> & {
+  actions?: React.ReactNode
+  align?: 'right'
+  full?: boolean
+  label?: string
+} & SxProp
+type StyledSubNavLinksProps = React.ComponentProps<'div'> & SxProp
+type StyledSubNavLinkProps = React.ComponentProps<'a'> & SxProp & {to?: To; selected?: boolean}
+
+// SubNav
+
+const StyledSubNav = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'nav',
+  styled.nav<SxProp>`
     display: flex;
-    margin-bottom: -1px;
+    justify-content: space-between;
+
+    .SubNav-body {
+      display: flex;
+      margin-bottom: -1px;
 
-    > * {
-      margin-left: ${get('space.2')};
+      > * {
+        margin-left: ${get('space.2')};
+      }
+
+      > *:first-child {
+        margin-left: 0;
+      }
     }
 
-    > *:first-child {
-      margin-left: 0;
+    .SubNav-actions {
+      align-self: center;
     }
-  }
 
-  .SubNav-actions {
-    align-self: center;
-  }
+    ${sx};
+  `,
+)
 
-  ${sx};
-`
+const SubNav = React.forwardRef<HTMLElement, StyledSubNavProps>(function SubNav(
+  {actions, className, children, label, ...rest},
+  forwardRef,
+) {
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+  return (
+    <StyledSubNav
+      ref={forwardRef}
+      className={clsx(className, 'SubNav', {[styles.SubNav]: enabled})}
+      aria-label={label}
+      {...rest}
+    >
+      <div className={clsx('SubNav-body', {[styles.Body]: enabled})}>{children}</div>
+      {actions && <div className={clsx('SubNav-actions', {[styles.Actions]: enabled})}>{actions}</div>}
+    </StyledSubNav>
+  )
+})
+SubNav.displayName = 'SubNav'
 
-export type SubNavProps = {
-  actions?: React.ReactNode
-  align?: 'right'
-  full?: boolean
-  label?: string
-} & ComponentProps<typeof SubNavBase>
+// SubNav.Links
 
-function SubNav({actions, className, children, label, ...rest}: SubNavProps) {
-  const classes = clsx(className, 'SubNav')
+const StyledSubNavLinks = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'div',
+  styled.div<SubNavLinksProps>`
+    display: flex;
+    ${sx};
+  `,
+)
+
+const SubNavLinks = React.forwardRef<HTMLElement, StyledSubNavLinksProps>(function SubNavLink(
+  {children, className, ...rest},
+  forwardRef,
+) {
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
   return (
-    <SubNavBase className={classes} aria-label={label} {...rest}>
-      <div className="SubNav-body">{children}</div>
-      {actions && <div className="SubNav-actions">{actions}</div>}
-    </SubNavBase>
+    <StyledSubNavLinks ref={forwardRef} className={clsx(className, enabled && styles.Links)} {...rest}>
+      {children}
+    </StyledSubNavLinks>
   )
-}
-
-export type SubNavLinksProps = SxProp
+})
+SubNavLinks.displayName = 'SubNav.Links'
 
-const SubNavLinks = styled.div<SubNavLinksProps>`
-  display: flex;
-  ${sx};
-`
+// SubNav.Link
+
+const StyledSubNavLink = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'a',
+  styled.a.attrs<StyledSubNavLinkProps>(props => ({
+    className: clsx('SubNav-item', props.selected && 'selected', props.className),
+  }))<StyledSubNavLinkProps>`
+    padding-left: ${get('space.3')};
+    padding-right: ${get('space.3')};
+    font-weight: ${get('fontWeights.semibold')};
+    font-size: ${get('fontSizes.1')};
+    line-height: 20px; //custom value for SubNav
+    min-height: 34px; //custom value for SubNav
+    color: ${get('colors.fg.default')};
+    text-align: center;
+    text-decoration: none;
+    border-top: 1px solid ${get('colors.border.default')};
+    border-bottom: 1px solid ${get('colors.border.default')};
+    border-right: 1px solid ${get('colors.border.default')};
+    display: flex;
+    align-items: center;
 
-type StyledSubNavLinkProps = {
-  to?: To
-  selected?: boolean
-} & SxProp
+    &:first-of-type {
+      border-top-left-radius: ${get('radii.2')};
+      border-bottom-left-radius: ${get('radii.2')};
+      border-left: 1px solid ${get('colors.border.default')};
+    }
 
-const SubNavLink = styled.a.attrs<StyledSubNavLinkProps>(props => ({
-  className: clsx(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className),
-}))<StyledSubNavLinkProps>`
-  padding-left: ${get('space.3')};
-  padding-right: ${get('space.3')};
-  font-weight: ${get('fontWeights.semibold')};
-  font-size: ${get('fontSizes.1')};
-  line-height: 20px; //custom value for SubNav
-  min-height: 34px; //custom value for SubNav
-  color: ${get('colors.fg.default')};
-  text-align: center;
-  text-decoration: none;
-  border-top: 1px solid ${get('colors.border.default')};
-  border-bottom: 1px solid ${get('colors.border.default')};
-  border-right: 1px solid ${get('colors.border.default')};
-  display: flex;
-  align-items: center;
-
-  &:first-of-type {
-    border-top-left-radius: ${get('radii.2')};
-    border-bottom-left-radius: ${get('radii.2')};
-    border-left: 1px solid ${get('colors.border.default')};
-  }
-
-  &:last-of-type {
-    border-top-right-radius: ${get('radii.2')};
-    border-bottom-right-radius: ${get('radii.2')};
-  }
-
-  &:hover,
-  &:focus {
-    text-decoration: none;
-    background-color: ${get('colors.canvas.subtle')};
-    transition: background-color 0.2s ease;
+    &:last-of-type {
+      border-top-right-radius: ${get('radii.2')};
+      border-bottom-right-radius: ${get('radii.2')};
+    }
 
-    .SubNav-octicon {
-      color: ${get('colors.fg.muted')};
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      background-color: ${get('colors.canvas.subtle')};
+      transition: background-color 0.2s ease;
     }
-  }
 
-  &.selected {
-    color: ${get('colors.fg.onEmphasis')};
-    background-color: ${get('colors.accent.emphasis')};
-    border-color: ${get('colors.accent.emphasis')};
-    .SubNav-octicon {
+    &.selected {
       color: ${get('colors.fg.onEmphasis')};
+      background-color: ${get('colors.accent.emphasis')};
+      border-color: ${get('colors.accent.emphasis')};
     }
-  }
 
-  ${sx};
-`
+    ${sx};
+  `,
+)
 
-SubNavLink.displayName = 'SubNav.Link'
+const SubNavLink = React.forwardRef<HTMLElement, StyledSubNavLinkProps>(function SubNavLink(
+  {children, className, ...rest},
+  forwardRef,
+) {
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+  return (
+    <StyledSubNavLink
+      ref={forwardRef}
+      className={clsx(className, enabled && styles.Link)}
+      data-selected={rest.selected}
+      {...rest}
+    >
+      {children}
+    </StyledSubNavLink>
+  )
+})
 
-SubNavLinks.displayName = 'SubNav.Links'
+SubNavLink.displayName = 'SubNav.Link'
 
+export type SubNavProps = ComponentProps<typeof SubNav>
+export type SubNavLinksProps = ComponentProps<typeof SubNavLinks>
 export type SubNavLinkProps = ComponentProps<typeof SubNavLink>
 export default Object.assign(SubNav, {Link: SubNavLink, Links: SubNavLinks})
diff --git a/packages/react/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
index 53f3a831a46..b9018c8172a 100644
--- a/packages/react/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
@@ -45,23 +45,15 @@ exports[`SubNav.Link respects the "selected" prop 1`] = `
   transition: background-color 0.2s ease;
 }
 
-.c0:hover .SubNav-octicon,
-.c0:focus .SubNav-octicon {
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-}
-
 .c0.selected {
   color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
   background-color: var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
   border-color: var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
 }
 
-.c0.selected .SubNav-octicon {
-  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
-}
-
 <a
   className="c0 SubNav-item selected"
+  data-selected={true}
   selected={true}
 />
 `;