diff --git a/.changeset/gold-geckos-send.md b/.changeset/gold-geckos-send.md
new file mode 100644
index 00000000000..5e3441f4a4a
--- /dev/null
+++ b/.changeset/gold-geckos-send.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Removes sx prop from PageLayout and subcomponents
diff --git a/packages/react/src/PageLayout/PageLayout.dev.stories.module.css b/packages/react/src/PageLayout/PageLayout.dev.stories.module.css
new file mode 100644
index 00000000000..35584590235
--- /dev/null
+++ b/packages/react/src/PageLayout/PageLayout.dev.stories.module.css
@@ -0,0 +1,9 @@
+.DebugPageLayout {
+  /* `red` is just used for debugging purposes. VRTs fail if changed. */
+  /* stylelint-disable-next-line color-named */
+  border: var(--borderWidth-thin) solid red;
+}
+
+.SuccessColor {
+  color: var(--fgColor-success);
+}
diff --git a/packages/react/src/PageLayout/PageLayout.dev.stories.tsx b/packages/react/src/PageLayout/PageLayout.dev.stories.tsx
index 1eca843ae20..5be8f52ffad 100644
--- a/packages/react/src/PageLayout/PageLayout.dev.stories.tsx
+++ b/packages/react/src/PageLayout/PageLayout.dev.stories.tsx
@@ -1,6 +1,7 @@
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import {Placeholder} from '../Placeholder'
 import {PageLayout} from './PageLayout'
+import classes from './PageLayout.dev.stories.module.css'
 
 const meta: Meta = {
   title: 'Components/PageLayout/Dev',
@@ -346,11 +347,11 @@ export const Default: StoryFn = args => (
     padding={args.padding}
     rowGap={args.rowGap}
     columnGap={args.columnGap}
-    sx={{border: '1px solid red'}}
+    className={classes.DebugPageLayout}
   >
     <PageLayout.Header
       padding={args['Header.padding']}
-      sx={{color: 'var(--fgColor-success)'}}
+      className={classes.SuccessColor}
       divider={{
         narrow: args['Header.divider.narrow'],
         regular: args['Header.divider.regular'],
@@ -365,7 +366,7 @@ export const Default: StoryFn = args => (
       <Placeholder height={args['Header placeholder height']} label="Header" />
     </PageLayout.Header>
     <PageLayout.Content
-      sx={{color: 'var(--fgColor-success)'}}
+      className={classes.SuccessColor}
       width={args['Content.width']}
       padding={args['Content.padding']}
       hidden={{
@@ -377,7 +378,7 @@ export const Default: StoryFn = args => (
       <Placeholder height={args['Content placeholder height']} label="Content" />
     </PageLayout.Content>
     <PageLayout.Pane
-      sx={{color: 'var(--fgColor-success)'}}
+      className={classes.SuccessColor}
       position={{
         narrow: args['Pane.position.narrow'],
         regular: args['Pane.position.regular'],
@@ -402,7 +403,7 @@ export const Default: StoryFn = args => (
       <Placeholder height={args['Pane placeholder height']} label="Pane" />
     </PageLayout.Pane>
     <PageLayout.Footer
-      sx={{color: 'var(--fgColor-success)'}}
+      className={classes.SuccessColor}
       padding={args['Footer.padding']}
       divider={{
         narrow: args['Footer.divider.narrow'],
diff --git a/packages/react/src/PageLayout/PageLayout.module.css b/packages/react/src/PageLayout/PageLayout.module.css
index 53a33ce483d..453ccba6ddb 100644
--- a/packages/react/src/PageLayout/PageLayout.module.css
+++ b/packages/react/src/PageLayout/PageLayout.module.css
@@ -325,3 +325,23 @@ body[data-page-layout-dragging='true'] * {
   /* stylelint-disable-next-line primer/spacing */
   padding: var(--spacing);
 }
+
+.DraggableHandle {
+  position: absolute;
+  inset: 0 -2px;
+  cursor: col-resize;
+  background-color: transparent;
+  transition-delay: 0.1s;
+}
+
+.DraggableHandle:hover {
+  background-color: var(--bgColor-neutral-muted);
+}
+
+.DraggableHandle[data-dragging='true'] {
+  background-color: var(--bgColor-accent-emphasis);
+}
+
+.DraggableHandle[data-dragging='true']:hover {
+  background-color: var(--bgColor-accent-emphasis);
+}
diff --git a/packages/react/src/PageLayout/PageLayout.stories.tsx b/packages/react/src/PageLayout/PageLayout.stories.tsx
index 6a69d66234d..b05896973fb 100644
--- a/packages/react/src/PageLayout/PageLayout.stories.tsx
+++ b/packages/react/src/PageLayout/PageLayout.stories.tsx
@@ -349,7 +349,6 @@ export const Default: StoryFn = args => (
     padding={args.padding}
     rowGap={args.rowGap}
     columnGap={args.columnGap}
-    sx={args.sx}
   >
     {args['Render header?'] ? (
       <PageLayout.Header
diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx
index 1db19d71951..4fc12fe3805 100644
--- a/packages/react/src/PageLayout/PageLayout.tsx
+++ b/packages/react/src/PageLayout/PageLayout.tsx
@@ -1,18 +1,15 @@
 import React, {useRef} from 'react'
 import {clsx} from 'clsx'
-import Box from '../Box'
 import {useId} from '../hooks/useId'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {isResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue'
 import {useSlots} from '../hooks/useSlots'
-import type {SxProp} from '../sx'
 import {canUseDOM} from '../utils/environment'
 import {useOverflow} from '../hooks/useOverflow'
 import {warning} from '../utils/warning'
 
 import classes from './PageLayout.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 const REGION_ORDER = {
   header: 0,
@@ -56,7 +53,7 @@ export type PageLayoutProps = {
   _slotsConfig?: Record<'header' | 'footer', React.ElementType>
   className?: string
   style?: React.CSSProperties
-} & SxProp
+}
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const containerWidths = {
@@ -73,7 +70,6 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
   rowGap = 'normal',
   columnGap = 'normal',
   children,
-  sx,
   className,
   style,
   _slotsConfig: slotsConfig,
@@ -93,14 +89,13 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
 
   return (
     <PageLayoutContext.Provider value={memoizedContextValue}>
-      <BoxWithFallback
+      <div
         style={
           {
             '--spacing': `var(--spacing-${padding})`,
             ...style,
           } as React.CSSProperties
         }
-        sx={sx}
         className={clsx(classes.PageLayoutRoot, className)}
       >
         <div className={classes.PageLayoutWrapper} data-width={containerWidth}>
@@ -108,7 +103,7 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
           <div className={clsx(classes.PageLayoutContent)}>{rest}</div>
           {slots.footer}
         </div>
-      </BoxWithFallback>
+      </div>
     </PageLayoutContext.Provider>
   )
 }
@@ -123,11 +118,10 @@ type DividerProps = {
   className?: string
   style?: React.CSSProperties
   position?: keyof typeof panePositions
-} & SxProp
+}
 
 const HorizontalDivider: React.FC<React.PropsWithChildren<DividerProps>> = ({
   variant = 'none',
-  sx,
   className,
   position,
   style,
@@ -136,8 +130,7 @@ const HorizontalDivider: React.FC<React.PropsWithChildren<DividerProps>> = ({
   const responsiveVariant = useResponsiveValue(variant, 'none')
 
   return (
-    <BoxWithFallback
-      sx={sx}
+    <div
       className={clsx(classes.HorizontalDivider, className)}
       data-variant={responsiveVariant}
       data-position={position}
@@ -169,7 +162,6 @@ const VerticalDivider: React.FC<React.PropsWithChildren<DividerProps & Draggable
   position,
   className,
   style,
-  sx,
 }) => {
   const [isDragging, setIsDragging] = React.useState(false)
   const [isKeyboardDrag, setIsKeyboardDrag] = React.useState(false)
@@ -268,8 +260,7 @@ const VerticalDivider: React.FC<React.PropsWithChildren<DividerProps & Draggable
   }, [isDragging, isKeyboardDrag, currentWidth, minWidth, maxWidth])
 
   return (
-    <BoxWithFallback
-      sx={sx}
+    <div
       className={clsx(classes.VerticalDivider, className)}
       data-variant={responsiveVariant}
       data-position={position}
@@ -277,47 +268,37 @@ const VerticalDivider: React.FC<React.PropsWithChildren<DividerProps & Draggable
     >
       {draggable ? (
         // Drag handle
-        <>
-          <Box
-            sx={{
-              position: 'absolute',
-              inset: '0 -2px',
-              cursor: 'col-resize',
-              bg: isDragging || isKeyboardDrag ? 'accent.fg' : 'transparent',
-              transitionDelay: '0.1s',
-              '&:hover': {
-                bg: isDragging || isKeyboardDrag ? 'accent.fg' : 'neutral.muted',
-              },
-            }}
-            role="slider"
-            aria-label="Draggable pane splitter"
-            aria-valuemin={minWidth}
-            aria-valuemax={maxWidth}
-            aria-valuenow={currentWidth}
-            aria-valuetext={`Pane width ${currentWidth} pixels`}
-            tabIndex={0}
-            onMouseDown={event => {
-              if (event.button === 0) {
-                setIsDragging(true)
-                onDragStart?.()
-              }
-            }}
-            onKeyDown={event => {
-              if (
-                event.key === 'ArrowLeft' ||
-                event.key === 'ArrowRight' ||
-                event.key === 'ArrowUp' ||
-                event.key === 'ArrowDown'
-              ) {
-                setIsKeyboardDrag(true)
-                onDragStart?.()
-              }
-            }}
-            onDoubleClick={onDoubleClick}
-          />
-        </>
+        <div
+          className={classes.DraggableHandle}
+          data-dragging={isDragging || isKeyboardDrag}
+          role="slider"
+          aria-label="Draggable pane splitter"
+          aria-valuemin={minWidth}
+          aria-valuemax={maxWidth}
+          aria-valuenow={currentWidth}
+          aria-valuetext={`Pane width ${currentWidth} pixels`}
+          tabIndex={0}
+          onMouseDown={(event: React.MouseEvent) => {
+            if (event.button === 0) {
+              setIsDragging(true)
+              onDragStart?.()
+            }
+          }}
+          onKeyDown={(event: React.KeyboardEvent) => {
+            if (
+              event.key === 'ArrowLeft' ||
+              event.key === 'ArrowRight' ||
+              event.key === 'ArrowUp' ||
+              event.key === 'ArrowDown'
+            ) {
+              setIsKeyboardDrag(true)
+              onDragStart?.()
+            }
+          }}
+          onDoubleClick={onDoubleClick}
+        />
       ) : null}
-    </BoxWithFallback>
+    </div>
   )
 }
 
@@ -355,7 +336,7 @@ export type PageLayoutHeaderProps = {
   hidden?: boolean | ResponsiveValue<boolean>
   className?: string
   style?: React.CSSProperties
-} & SxProp
+}
 
 const Header: React.FC<React.PropsWithChildren<PageLayoutHeaderProps>> = ({
   'aria-label': label,
@@ -366,7 +347,6 @@ const Header: React.FC<React.PropsWithChildren<PageLayoutHeaderProps>> = ({
   hidden = false,
   children,
   style,
-  sx,
   className,
 }) => {
   // Combine divider and dividerWhenNarrow for backwards compatibility
@@ -380,12 +360,10 @@ const Header: React.FC<React.PropsWithChildren<PageLayoutHeaderProps>> = ({
   const {rowGap} = React.useContext(PageLayoutContext)
 
   return (
-    <BoxWithFallback
-      as="header"
+    <header
       aria-label={label}
       aria-labelledby={labelledBy}
       hidden={isHidden}
-      sx={sx}
       className={clsx(classes.Header, className)}
       style={
         {
@@ -413,7 +391,7 @@ const Header: React.FC<React.PropsWithChildren<PageLayoutHeaderProps>> = ({
           } as React.CSSProperties
         }
       />
-    </BoxWithFallback>
+    </header>
   )
 }
 
@@ -443,7 +421,7 @@ export type PageLayoutContentProps = {
   hidden?: boolean | ResponsiveValue<boolean>
   className?: string
   style?: React.CSSProperties
-} & SxProp
+}
 
 // TODO: Account for pane width when centering content
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -462,19 +440,17 @@ const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
   padding = 'none',
   hidden = false,
   children,
-  sx,
   className,
   style,
 }) => {
   const isHidden = useResponsiveValue(hidden, false)
+  const Component = as
 
   return (
-    <BoxWithFallback
-      as={as}
+    <Component
       aria-label={label}
       aria-labelledby={labelledBy}
       style={style}
-      sx={sx}
       className={clsx(classes.ContentWrapper, className)}
       data-is-hidden={isHidden}
     >
@@ -489,7 +465,7 @@ const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
       >
         {children}
       </div>
-    </BoxWithFallback>
+    </Component>
   )
 }
 
@@ -563,7 +539,7 @@ export type PageLayoutPaneProps = {
   id?: string
   className?: string
   style?: React.CSSProperties
-} & SxProp
+}
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const panePositions = {
@@ -601,7 +577,6 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
       hidden: responsiveHidden = false,
       children,
       id,
-      sx,
       className,
       style,
     },
@@ -685,15 +660,16 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
     }
 
     return (
-      <BoxWithFallback
-        sx={sx}
+      <div
         className={clsx(classes.PaneWrapper, className)}
-        style={{
-          '--offset-header': typeof offsetHeader === 'number' ? `${offsetHeader}px` : offsetHeader,
-          '--spacing-row': `var(--spacing-${rowGap})`,
-          '--spacing-column': `var(--spacing-${columnGap})`,
-          ...style,
-        }}
+        style={
+          {
+            '--offset-header': typeof offsetHeader === 'number' ? `${offsetHeader}px` : offsetHeader,
+            '--spacing-row': `var(--spacing-${rowGap})`,
+            '--spacing-column': `var(--spacing-${columnGap})`,
+            ...style,
+          } as React.CSSProperties
+        }
         data-is-hidden={isHidden}
         data-position={position}
         data-sticky={sticky || undefined}
@@ -763,7 +739,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
             } as React.CSSProperties
           }
         />
-      </BoxWithFallback>
+      </div>
     )
   },
 )
@@ -803,7 +779,7 @@ export type PageLayoutFooterProps = {
   hidden?: boolean | ResponsiveValue<boolean>
   className?: string
   style?: React.CSSProperties
-} & SxProp
+}
 
 const Footer: React.FC<React.PropsWithChildren<PageLayoutFooterProps>> = ({
   'aria-label': label,
@@ -813,7 +789,6 @@ const Footer: React.FC<React.PropsWithChildren<PageLayoutFooterProps>> = ({
   dividerWhenNarrow = 'inherit',
   hidden = false,
   children,
-  sx,
   className,
   style,
 }) => {
@@ -828,13 +803,11 @@ const Footer: React.FC<React.PropsWithChildren<PageLayoutFooterProps>> = ({
   const {rowGap} = React.useContext(PageLayoutContext)
 
   return (
-    <BoxWithFallback
-      as="footer"
+    <footer
       aria-label={label}
       aria-labelledby={labelledBy}
       hidden={isHidden}
       className={clsx(classes.FooterWrapper, className)}
-      sx={sx}
       style={
         {
           '--spacing': `var(--spacing-${rowGap})`,
@@ -861,7 +834,7 @@ const Footer: React.FC<React.PropsWithChildren<PageLayoutFooterProps>> = ({
       >
         {children}
       </div>
-    </BoxWithFallback>
+    </footer>
   )
 }
 
diff --git a/packages/styled-react/src/components/PageLayout.tsx b/packages/styled-react/src/components/PageLayout.tsx
new file mode 100644
index 00000000000..de4670c6528
--- /dev/null
+++ b/packages/styled-react/src/components/PageLayout.tsx
@@ -0,0 +1,57 @@
+import React, {type PropsWithChildren} from 'react'
+import styled from 'styled-components'
+import type {
+  PageLayoutProps as PrimerPageLayoutProps,
+  PageLayoutContentProps as PrimerPageLayoutContentProps,
+  PageLayoutHeaderProps as PrimerPageLayoutHeaderProps,
+  PageLayoutPaneProps as PrimerPageLayoutPaneProps,
+  PageLayoutFooterProps as PrimerPageLayoutFooterProps,
+} from '@primer/react'
+import {PageLayout as PrimerPageLayout} from '@primer/react'
+import {sx, type SxProp} from '../sx'
+
+const Wrapper = styled.div<SxProp>`
+  ${sx}
+`
+
+type PageLayoutProps = PropsWithChildren<PrimerPageLayoutProps> & SxProp
+
+const PageLayoutImpl = React.forwardRef<HTMLDivElement, PageLayoutProps>((props, ref) => {
+  // @ts-expect-error - PrimerPageLayout is not recognized as a valid component type
+  return <Wrapper as={PrimerPageLayout} ref={ref} {...props} />
+})
+
+type PageLayoutContentProps = PropsWithChildren<PrimerPageLayoutContentProps> & SxProp
+
+const PageLayoutContent = React.forwardRef<HTMLDivElement, PageLayoutContentProps>((props, ref) => {
+  return <Wrapper as={PrimerPageLayout.Content} ref={ref} {...props} />
+})
+
+type PageLayoutHeaderProps = PropsWithChildren<PrimerPageLayoutHeaderProps> & SxProp
+
+const PageLayoutHeader = React.forwardRef<HTMLDivElement, PageLayoutHeaderProps>((props, ref) => {
+  // @ts-expect-error - PrimerPageLayout.Header is not recognized as a valid component type
+  return <Wrapper as={PrimerPageLayout.Header} ref={ref} {...props} />
+})
+
+type PageLayoutPaneProps = PropsWithChildren<PrimerPageLayoutPaneProps> & SxProp
+
+const PageLayoutPane = React.forwardRef<HTMLDivElement, PageLayoutPaneProps>((props, ref) => {
+  return <Wrapper as={PrimerPageLayout.Pane} ref={ref} {...props} />
+})
+
+type PageLayoutFooterProps = PropsWithChildren<PrimerPageLayoutFooterProps> & SxProp
+
+const PageLayoutFooter = React.forwardRef<HTMLDivElement, PageLayoutFooterProps>((props, ref) => {
+  // @ts-expect-error - PrimerPageLayout.Footer is not recognized as a valid component type
+  return <Wrapper as={PrimerPageLayout.Footer} ref={ref} {...props} />
+})
+
+const PageLayout = Object.assign(PageLayoutImpl, {
+  Content: PageLayoutContent,
+  Header: PageLayoutHeader,
+  Pane: PageLayoutPane,
+  Footer: PageLayoutFooter,
+})
+
+export {PageLayout, type PageLayoutProps}
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index 8be52072298..53e0249daa4 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -16,7 +16,6 @@ export {Label} from '@primer/react'
 export {Link} from '@primer/react'
 export {NavList} from '@primer/react'
 export {Overlay} from '@primer/react'
-export {PageLayout} from '@primer/react'
 export {ProgressBar} from '@primer/react'
 export {Select} from '@primer/react'
 export {Text} from '@primer/react'
@@ -40,6 +39,7 @@ export {CounterLabel, type CounterLabelProps} from './components/CounterLabel'
 export {Flash} from './components/Flash'
 export {Header, type HeaderProps} from './components/Header'
 export {LinkButton, type LinkButtonProps} from './components/LinkButton'
+export {PageLayout, type PageLayoutProps} from './components/PageLayout'
 export {
   PageHeader,
   type PageHeaderProps,