diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-colorblind-linux.png
new file mode 100644
index 00000000000..44732f68459
Binary files /dev/null and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-dimmed-linux.png
new file mode 100644
index 00000000000..f533d7bc3ba
Binary files /dev/null and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..c0f38226507
Binary files /dev/null and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-linux.png
new file mode 100644
index 00000000000..44732f68459
Binary files /dev/null and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..44732f68459
Binary files /dev/null and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-light-colorblind-linux.png
new file mode 100644
index 00000000000..b3ba0d6ae80
Binary files /dev/null and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-light-high-contrast-linux.png
new file mode 100644
index 00000000000..9aa451e42b8
Binary files /dev/null and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-light-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-light-linux.png
new file mode 100644
index 00000000000..cabb36e5169
Binary files /dev/null and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-light-tritanopia-linux.png
new file mode 100644
index 00000000000..b3ba0d6ae80
Binary files /dev/null and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-colorblind-linux.png
new file mode 100644
index 00000000000..44732f68459
Binary files /dev/null and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-dimmed-linux.png
new file mode 100644
index 00000000000..f533d7bc3ba
Binary files /dev/null and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..c0f38226507
Binary files /dev/null and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-linux.png
new file mode 100644
index 00000000000..44732f68459
Binary files /dev/null and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..44732f68459
Binary files /dev/null and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-light-colorblind-linux.png
new file mode 100644
index 00000000000..b3ba0d6ae80
Binary files /dev/null and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-light-high-contrast-linux.png
new file mode 100644
index 00000000000..9aa451e42b8
Binary files /dev/null and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-light-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-light-linux.png
new file mode 100644
index 00000000000..cabb36e5169
Binary files /dev/null and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-light-linux.png differ
diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-light-tritanopia-linux.png
new file mode 100644
index 00000000000..b3ba0d6ae80
Binary files /dev/null and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-light-tritanopia-linux.png differ
diff --git a/docs/content/Popover.md b/docs/content/Popover.md
index bb6e2e0611e..5c1e9d1fb47 100644
--- a/docs/content/Popover.md
+++ b/docs/content/Popover.md
@@ -6,7 +6,7 @@ status: Alpha
 source: https://github.com/primer/react/blob/main/src/Popover.tsx
 ---
 
-import data from '../../src/Popover.docs.json'
+import data from '../../src/Popover/Popover.docs.json'
 
 ```js
 import {Popover} from '@primer/react'
diff --git a/e2e/components/Popover.test.ts b/e2e/components/Popover.test.ts
new file mode 100644
index 00000000000..7a80f28cda4
--- /dev/null
+++ b/e2e/components/Popover.test.ts
@@ -0,0 +1,61 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('Popover', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-popover--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Popover.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-popover--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Playground', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-popover--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Popover.Playground.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-popover--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})
diff --git a/generated/components.json b/generated/components.json
index 258ef082452..323f1485b24 100644
--- a/generated/components.json
+++ b/generated/components.json
@@ -208,60 +208,6 @@
       ],
       "subcomponents": []
     },
-    "popover": {
-      "id": "popover",
-      "name": "Popover",
-      "status": "alpha",
-      "a11yReviewed": false,
-      "stories": [],
-      "props": [
-        {
-          "name": "as",
-          "type": "string",
-          "defaultValue": "div",
-          "description": "Sets the underlying HTML tag for the component"
-        },
-        {
-          "name": "caret",
-          "type": "| 'top' | 'bottom' | 'left' | 'right' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top' ",
-          "defaultValue": "'top'",
-          "description": "Controls the position of the caret"
-        },
-        {
-          "name": "open",
-          "type": "boolean",
-          "defaultValue": "false",
-          "description": "Controls the visibility of the popover."
-        },
-        {
-          "name": "relative",
-          "type": "boolean",
-          "defaultValue": "false",
-          "description": "Set to true to render the popover using relative positioning. "
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject"
-        }
-      ],
-      "subcomponents": [
-        {
-          "name": "Popover.Content",
-          "props": [
-            {
-              "name": "as",
-              "type": "string",
-              "defaultValue": "div",
-              "description": "Sets the underlying HTML tag for the component"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject"
-            }
-          ]
-        }
-      ]
-    },
     "styled_octicon": {
       "id": "styled_octicon",
       "name": "StyledOcticon",
@@ -3184,6 +3130,65 @@
       ],
       "subcomponents": []
     },
+    "popover": {
+      "id": "popover",
+      "name": "Popover",
+      "status": "alpha",
+      "a11yReviewed": false,
+      "stories": [
+        {
+          "id": "components-popover--default",
+          "code": "() => (\n  <Popover relative open={true} caret=\"top\">\n    <Popover.Content\n      sx={{\n        marginTop: 2,\n      }}\n    >\n      <Heading\n        sx={{\n          fontSize: 2,\n        }}\n      >\n        Popover heading\n      </Heading>\n      <Text as=\"p\">Message about popovers</Text>\n      <Button>Got it!</Button>\n    </Popover.Content>\n  </Popover>\n)"
+        }
+      ],
+      "props": [
+        {
+          "name": "as",
+          "type": "string",
+          "defaultValue": "div",
+          "description": "Sets the underlying HTML tag for the component"
+        },
+        {
+          "name": "caret",
+          "type": "| 'top' | 'bottom' | 'left' | 'right' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top' ",
+          "defaultValue": "'top'",
+          "description": "Controls the position of the caret"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Controls the visibility of the popover."
+        },
+        {
+          "name": "relative",
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Set to true to render the popover using relative positioning. "
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ],
+      "subcomponents": [
+        {
+          "name": "Popover.Content",
+          "props": [
+            {
+              "name": "as",
+              "type": "string",
+              "defaultValue": "div",
+              "description": "Sets the underlying HTML tag for the component"
+            },
+            {
+              "name": "sx",
+              "type": "SystemStyleObject"
+            }
+          ]
+        }
+      ]
+    },
     "portal": {
       "id": "portal",
       "name": "Portal",
diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js
index 9a01ef258ec..1b00b871f8b 100644
--- a/script/generate-e2e-tests.js
+++ b/script/generate-e2e-tests.js
@@ -779,6 +779,21 @@ const components = new Map([
       ],
     },
   ],
+  [
+    'Popover',
+    {
+      stories: [
+        {
+          id: 'components-popover--default',
+          name: 'Default',
+        },
+        {
+          id: 'components-popover--playground',
+          name: 'Playground',
+        },
+      ],
+    },
+  ],
   [
     'ProgressBar',
     {
diff --git a/src/Popover.docs.json b/src/Popover/Popover.docs.json
similarity index 100%
rename from src/Popover.docs.json
rename to src/Popover/Popover.docs.json
diff --git a/src/Popover/Popover.stories.tsx b/src/Popover/Popover.stories.tsx
new file mode 100644
index 00000000000..1e4fda61660
--- /dev/null
+++ b/src/Popover/Popover.stories.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import {Meta, ComponentStory} from '@storybook/react'
+import Heading from '../Heading'
+import Popover from './Popover'
+import Text from '../Text'
+import {Button} from '../Button'
+
+export default {
+  title: 'Components/Popover',
+  component: Popover,
+} as Meta<typeof Popover>
+
+export const Default = () => (
+  <Popover relative open={true} caret="top">
+    <Popover.Content sx={{marginTop: 2}}>
+      <Heading sx={{fontSize: 2}}>Popover heading</Heading>
+      <Text as="p">Message about popovers</Text>
+      <Button>Got it!</Button>
+    </Popover.Content>
+  </Popover>
+)
+
+export const Playground: ComponentStory<typeof Popover> = args => (
+  <Popover {...args}>
+    <Popover.Content sx={{marginTop: 2}}>
+      <Heading sx={{fontSize: 2}}>Popover heading</Heading>
+      <Text as="p">Message about popovers</Text>
+      <Button>Got it!</Button>
+    </Popover.Content>
+  </Popover>
+)
+
+Playground.args = {
+  caret: 'top',
+  open: true,
+  relative: true,
+}
+
+Playground.argTypes = {
+  caret: {
+    control: {
+      type: 'radio',
+    },
+    options: [
+      'top',
+      'bottom',
+      'left',
+      'right',
+      'bottom-left',
+      'bottom-right',
+      'top-left',
+      'top-right',
+      'left-bottom',
+      'left-top',
+      'right-bottom',
+      'right-top',
+    ],
+  },
+  open: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  relative: {
+    control: {
+      type: 'boolean',
+    },
+  },
+}
diff --git a/src/Popover.tsx b/src/Popover/Popover.tsx
similarity index 97%
rename from src/Popover.tsx
rename to src/Popover/Popover.tsx
index 4fcc53d8524..3048627c793 100644
--- a/src/Popover.tsx
+++ b/src/Popover/Popover.tsx
@@ -1,8 +1,8 @@
 import classnames from 'classnames'
 import styled from 'styled-components'
-import {get} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
+import {get} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
 
 type CaretPosition =
   | 'top'
diff --git a/src/Popover/index.ts b/src/Popover/index.ts
new file mode 100644
index 00000000000..43a648fdd86
--- /dev/null
+++ b/src/Popover/index.ts
@@ -0,0 +1 @@
+export {default, PopoverProps, PopoverContentProps} from './Popover'