diff --git a/.changeset/odd-apes-guess.md b/.changeset/odd-apes-guess.md
new file mode 100644
index 00000000000..e15f28b4809
--- /dev/null
+++ b/.changeset/odd-apes-guess.md
@@ -0,0 +1,12 @@
+---
+"@primer/react": major
+---
+
+`PageLayout` is being graduated from the `drafts` bundle to the `main` bundle. 
+
+To upgrade, rewrite your imports accordingly:
+
+```diff
+- import {PageLayout} from '@primer/react/drafts'
++ import {PageLayout} from '@primer/react'
+```
diff --git a/docs/content/drafts/PageLayout.mdx b/docs/content/PageLayout.mdx
similarity index 97%
rename from docs/content/drafts/PageLayout.mdx
rename to docs/content/PageLayout.mdx
index a04cfc87307..64d439c49d3 100644
--- a/docs/content/drafts/PageLayout.mdx
+++ b/docs/content/PageLayout.mdx
@@ -7,7 +7,7 @@ storybook: https://primer.style/react/storybook?path=/story/layout-pagelayout--p
 ---
 
 ```js
-import {PageLayout} from '@primer/react/drafts'
+import {PageLayout} from '@primer/react'
 ```
 
 ## Examples
@@ -20,7 +20,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 
 ### Default
 
-```jsx live drafts
+```jsx live
 <PageLayout>
   <PageLayout.Header>
     <Placeholder label="Header" height={64} />
@@ -39,7 +39,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 
 ### With dividers
 
-```jsx live drafts
+```jsx live
 <PageLayout>
   <PageLayout.Header divider="line">
     <Placeholder label="Header" height={64} />
@@ -58,7 +58,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 
 ### With pane on left
 
-```jsx live drafts
+```jsx live
 <PageLayout>
   <PageLayout.Header>
     <Placeholder label="Header" height={64} />
@@ -77,7 +77,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 
 ### With condensed spacing
 
-```jsx live drafts
+```jsx live
 <PageLayout padding="condensed" rowGap="condensed" columnGap="condensed">
   <PageLayout.Header>
     <Placeholder label="Header" height={64} />
@@ -96,7 +96,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 
 ### Without header or footer
 
-```jsx live drafts
+```jsx live
 <PageLayout>
   <PageLayout.Content>
     <Placeholder label="Content" height={240} />
diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
index 9584bf38cf0..0a313c91e00 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -87,6 +87,8 @@
       url: /Overlay
     - title: Pagehead
       url: /Pagehead
+    - title: PageLayout
+      url: /PageLayout
     - title: Pagination
       url: /Pagination
     - title: PointerBox
diff --git a/src/drafts/index.ts b/src/drafts/index.ts
index 291e56dafbb..efa9ff196c5 100644
--- a/src/drafts/index.ts
+++ b/src/drafts/index.ts
@@ -11,4 +11,3 @@ export * from '../Button2'
 export * from '../ActionMenu2'
 export * from '../DropdownMenu2'
 export * from '../Label2'
-export * from '../PageLayout'
diff --git a/src/index.ts b/src/index.ts
index a7b04414ec3..ff38b050969 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -8,6 +8,14 @@ export type {ThemeProviderProps} from './ThemeProvider'
 // Layout
 export {default as Box} from './Box'
 export type {BoxProps} from './Box'
+export {PageLayout} from './PageLayout'
+export type {
+  PageLayoutProps,
+  PageLayoutHeaderProps,
+  PageLayoutContentProps,
+  PageLayoutPaneProps,
+  PageLayoutFooterProps
+} from './PageLayout'
 
 // Hooks
 export {default as useDetails} from './hooks/useDetails'