diff --git a/.changeset/mighty-pugs-flow.md b/.changeset/mighty-pugs-flow.md
new file mode 100644
index 00000000000..8276383fc76
--- /dev/null
+++ b/.changeset/mighty-pugs-flow.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+PageHeader: Update the layout styles to make it compatible with the new recommended dom ordering by keeping the visual design same. This is a breaking change however PageHeader is still a draft component so we are releasing the changes as minor. 
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-colorblind-linux.png
index fb4c87c11a3..3ae091e796b 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-dimmed-linux.png
index 4ddb7579d4d..f877dd325c3 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-high-contrast-linux.png
index d363107169f..1d0452ac56f 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-linux.png
index 57c25a6bb6c..6e18eb8738a 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-tritanopia-linux.png
index fb4c87c11a3..3ae091e796b 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-colorblind-linux.png
index eb4761bbc74..724c1c0b40e 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-high-contrast-linux.png
index 1396f518461..f166f564039 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-linux.png
index da40e47155f..ef51d9504f5 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-tritanopia-linux.png
index eb4761bbc74..724c1c0b40e 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-colorblind-linux.png
index fb4c87c11a3..3ae091e796b 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-dimmed-linux.png
index 4ddb7579d4d..f877dd325c3 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-high-contrast-linux.png
index d363107169f..1d0452ac56f 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-linux.png
index 57c25a6bb6c..6e18eb8738a 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-tritanopia-linux.png
index fb4c87c11a3..3ae091e796b 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-colorblind-linux.png
index eb4761bbc74..724c1c0b40e 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-high-contrast-linux.png
index 1396f518461..f166f564039 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-linux.png
index da40e47155f..ef51d9504f5 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-tritanopia-linux.png
index eb4761bbc74..724c1c0b40e 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-on-Narrow-Viewport-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-colorblind-linux.png
new file mode 100644
index 00000000000..3e4fa9cd396
Binary files /dev/null and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-dimmed-linux.png
new file mode 100644
index 00000000000..8f62c1110e8
Binary files /dev/null and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..524f7ab4b42
Binary files /dev/null and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-linux.png
new file mode 100644
index 00000000000..c0acd39457b
Binary files /dev/null and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..3e4fa9cd396
Binary files /dev/null and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-colorblind-linux.png
new file mode 100644
index 00000000000..3ec14d50357
Binary files /dev/null and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-high-contrast-linux.png
new file mode 100644
index 00000000000..197b16c86d4
Binary files /dev/null and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-linux.png
new file mode 100644
index 00000000000..2fbca858173
Binary files /dev/null and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-tritanopia-linux.png
new file mode 100644
index 00000000000..3ec14d50357
Binary files /dev/null and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Large-Variant-with-Multiline-Title-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png
index 122b3fac8da..6ac42523150 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-dimmed-linux.png
index e2e5c20535b..79510610f0d 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-high-contrast-linux.png
index 3a9ee1b4a2e..698c496af4b 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png
index 7cd0a615f62..302e81dce68 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png
index d96ed482ba5..14d80f8020f 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png
index f23d0f77b7c..02aaf375eb1 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-high-contrast-linux.png
index b87e3f1c719..25e06de1782 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png
index 9e6aaf2805f..a2929b08f00 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png
index facc86b63ce..09a4559f2ca 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png
index 122b3fac8da..6ac42523150 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-dimmed-linux.png
index e2e5c20535b..79510610f0d 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-high-contrast-linux.png
index 3a9ee1b4a2e..698c496af4b 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png
index 7cd0a615f62..302e81dce68 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png
index d96ed482ba5..14d80f8020f 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png
index f23d0f77b7c..02aaf375eb1 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-high-contrast-linux.png
index b87e3f1c719..25e06de1782 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png
index 9e6aaf2805f..a2929b08f00 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png
index facc86b63ce..09a4559f2ca 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-colorblind-linux.png
index a48ccf8b16e..244d78d37f7 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-dimmed-linux.png
index 3751c490481..7fda017543c 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-high-contrast-linux.png
index 6e62e4d84a3..10948550911 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-linux.png
index 54be0fe3fbd..ab7436289f3 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-tritanopia-linux.png
index a48ccf8b16e..244d78d37f7 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-colorblind-linux.png
index 5d7cbce8a95..d9d5648d19b 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-high-contrast-linux.png
index 0b26ac05bbe..baa255dd1e9 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-linux.png
index e001f993cb6..65890f3ec93 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-tritanopia-linux.png
index 5d7cbce8a95..d9d5648d19b 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Description-Slot-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png
index bb85294eb08..1189f37b75a 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png
index 1f8a8ba8573..82faa4ba149 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png
index 0dd41bd0261..db6ad5eb989 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png
index 81bff546325..72336fb86da 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png
index 0aaba0effb4..b73d823ea25 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png
index 31541b70283..ee1d7ced68e 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png
index 7c739735eb3..fbb8f752b05 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png
index 6ea202b82cf..43a8ff2a590 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png
index af9b4208bb3..edbae8374e0 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png differ
diff --git a/e2e/components/PageHeader.test.ts b/e2e/components/PageHeader.test.ts
index e19dddf0b30..577e6a3e906 100644
--- a/e2e/components/PageHeader.test.ts
+++ b/e2e/components/PageHeader.test.ts
@@ -673,4 +673,38 @@ test.describe('PageHeader', () => {
       })
     }
   })
+
+  test.describe('Large Variant with Multiline Title', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-pageheader-devonly--large-variant-with-multiline-title',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`PageHeader.Large Variant with Multiline Title.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-pageheader-devonly--large-variant-with-multiline-title',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
 })
diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js
index 484e0f90814..51e91333e26 100644
--- a/script/generate-e2e-tests.js
+++ b/script/generate-e2e-tests.js
@@ -871,6 +871,10 @@ const components = new Map([
           id: 'drafts-components-pageheader-features--with-parent-link-and-actions-of-context-area',
           name: 'With Parent Link and Actions of Context Area',
         },
+        {
+          id: 'drafts-components-pageheader-devonly--large-variant-with-multiline-title',
+          name: 'Large Variant with Multiline Title',
+        },
       ],
     },
   ],
diff --git a/src/PageHeader/PageHeader.dev.stories.tsx b/src/PageHeader/PageHeader.dev.stories.tsx
new file mode 100644
index 00000000000..b2510669467
--- /dev/null
+++ b/src/PageHeader/PageHeader.dev.stories.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import {Meta} from '@storybook/react'
+import {Button, IconButton, Box} from '..'
+import Label from '../Label'
+import {GitBranchIcon, PencilIcon, SidebarExpandIcon} from '@primer/octicons-react'
+
+import {PageHeader} from './PageHeader'
+
+export default {
+  title: 'Drafts/Components/PageHeader/DevOnly',
+  parameters: {
+    layout: 'fullscreen',
+    controls: {expanded: true},
+  },
+} as Meta
+
+export const LargeVariantWithMultilineTitle = () => (
+  <Box sx={{padding: 3}}>
+    <PageHeader>
+      <PageHeader.LeadingAction>
+        <IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
+      </PageHeader.LeadingAction>
+      <PageHeader.TitleArea variant="large">
+        <PageHeader.LeadingVisual>
+          <GitBranchIcon />
+        </PageHeader.LeadingVisual>
+        <PageHeader.Title>
+          Title long title some extra loooong looong words here some extra loooong looong words here some extra loooong
+          looong words here some extra loooong looong words here some extra loooong looong words here
+        </PageHeader.Title>
+        <PageHeader.TrailingVisual>
+          <Label>Beta</Label>
+        </PageHeader.TrailingVisual>
+      </PageHeader.TitleArea>
+      <PageHeader.TrailingAction>
+        <IconButton aria-label="Expand sidebar" icon={SidebarExpandIcon} variant="invisible" />
+      </PageHeader.TrailingAction>
+      <PageHeader.Actions>
+        <Button variant="primary">Add Item</Button>
+      </PageHeader.Actions>
+    </PageHeader>
+  </Box>
+)
diff --git a/src/PageHeader/PageHeader.examples.stories.tsx b/src/PageHeader/PageHeader.examples.stories.tsx
index e8f1d116a37..2c2a582a335 100644
--- a/src/PageHeader/PageHeader.examples.stories.tsx
+++ b/src/PageHeader/PageHeader.examples.stories.tsx
@@ -12,6 +12,7 @@ import {
   ArrowRightIcon,
   TriangleDownIcon,
   CheckIcon,
+  CopyIcon,
 } from '@primer/octicons-react'
 
 import {PageHeader} from './PageHeader'
@@ -19,7 +20,6 @@ import {Hidden} from '../Hidden'
 import {UnderlineNav} from '../UnderlineNav'
 import {ActionMenu} from '../ActionMenu'
 import {ActionList} from '../ActionList'
-import VisuallyHidden from '../_VisuallyHidden'
 
 const meta: Meta = {
   title: 'Drafts/Components/PageHeader/Examples',
@@ -38,22 +38,24 @@ const setViewportParamToNarrow = {
 export const Webhooks = () => (
   <Box sx={{padding: 3}}>
     <PageHeader>
-      <PageHeader.ContextArea>
-        <PageHeader.ParentLink href="http://github.com">Repository settings</PageHeader.ParentLink>
-      </PageHeader.ContextArea>
       <PageHeader.TitleArea>
         <PageHeader.Title as="h2">Webhooks</PageHeader.Title>
-
-        <PageHeader.Actions>
-          <Hidden when={['narrow']}>
-            <Button variant="primary">New webhook</Button>
-          </Hidden>
-
-          <Hidden when={['regular', 'wide']}>
-            <Button variant="primary">New</Button>
-          </Hidden>
-        </PageHeader.Actions>
       </PageHeader.TitleArea>
+      <PageHeader.ContextArea>
+        <PageHeader.ParentLink href="http://github.com">Repository settings</PageHeader.ParentLink>
+        <PageHeader.ContextBar>context bar</PageHeader.ContextBar>
+        <PageHeader.ContextAreaActions>
+          <Button>Context action</Button>
+        </PageHeader.ContextAreaActions>
+      </PageHeader.ContextArea>
+      <PageHeader.Actions>
+        <Hidden when={['narrow']}>
+          <Button variant="primary">New webhook</Button>
+        </Hidden>
+        <Hidden when={['regular', 'wide']}>
+          <Button variant="primary">New</Button>
+        </Hidden>
+      </PageHeader.Actions>
     </PageHeader>
   </Box>
 )
@@ -67,36 +69,35 @@ WebhooksOnNarrowViewport.parameters = setViewportParamToNarrow
 export const PullRequestPage = () => (
   <Box sx={{padding: 3}}>
     <PageHeader>
-      <PageHeader.ContextArea>
-        <PageHeader.ParentLink href="http://github.com">Pull requests</PageHeader.ParentLink>
-      </PageHeader.ContextArea>
       <PageHeader.TitleArea>
         <PageHeader.Title as="h1">
           PageHeader component initial layout explorations extra long pull request title
         </PageHeader.Title>
-        <PageHeader.Actions>
-          <Hidden when={['regular', 'wide']}>
-            <ActionMenu>
-              <ActionMenu.Anchor>
-                <IconButton aria-label="More pull request actions" icon={KebabHorizontalIcon} />
-              </ActionMenu.Anchor>
-              <ActionMenu.Overlay width="small">
-                <ActionList>
-                  <ActionList.Item onSelect={() => alert('Edit button action')}>Edit</ActionList.Item>
-                  <ActionList.Item onSelect={() => alert('Code button action')}>Code</ActionList.Item>
-                </ActionList>
-              </ActionMenu.Overlay>
-            </ActionMenu>
-          </Hidden>
-
-          <Hidden when={['narrow']}>
-            <Box sx={{display: 'flex'}}>
-              <Button>Edit</Button>
-              <Button leadingVisual={CodeIcon}>Code</Button>
-            </Box>
-          </Hidden>
-        </PageHeader.Actions>
       </PageHeader.TitleArea>
+      <PageHeader.ContextArea>
+        <PageHeader.ParentLink href="http://github.com">Pull requests</PageHeader.ParentLink>
+      </PageHeader.ContextArea>
+      <PageHeader.Actions>
+        <Hidden when={['regular', 'wide']}>
+          <ActionMenu>
+            <ActionMenu.Anchor>
+              <IconButton aria-label="More pull request actions" icon={KebabHorizontalIcon} />
+            </ActionMenu.Anchor>
+            <ActionMenu.Overlay width="small">
+              <ActionList>
+                <ActionList.Item onSelect={() => alert('Edit button action')}>Edit</ActionList.Item>
+                <ActionList.Item onSelect={() => alert('Code button action')}>Code</ActionList.Item>
+              </ActionList>
+            </ActionMenu.Overlay>
+          </ActionMenu>
+        </Hidden>
+        <Hidden when={['narrow']}>
+          <Box sx={{display: 'flex', gap: '0.5rem'}}>
+            <Button>Edit</Button>
+            <Button leadingVisual={CodeIcon}>Code</Button>
+          </Box>
+        </Hidden>
+      </PageHeader.Actions>
       <PageHeader.Description>
         <StateLabel status="pullOpened">Open</StateLabel>
         <Hidden when={['narrow']}>
@@ -145,8 +146,15 @@ PullRequestPageOnNarrowViewport.parameters = setViewportParamToNarrow
 export const FilesPage = () => (
   <Box sx={{padding: 3}}>
     <PageHeader>
+      <PageHeader.TitleArea sx={{alignItems: 'center'}}>
+        <Text sx={{color: 'rgb(101, 109, 118)', fontSize: '14px'}}>/</Text>
+        <PageHeader.Title as="h1" sx={{fontSize: '14px', height: '21px'}}>
+          PageHeader.tsx
+        </PageHeader.Title>
+      </PageHeader.TitleArea>
+
       <PageHeader.ContextArea>
-        <PageHeader.ParentLink>Files</PageHeader.ParentLink>
+        <PageHeader.ParentLink href="/">Files</PageHeader.ParentLink>
         <PageHeader.ContextAreaActions>
           <ActionMenu>
             <ActionMenu.Anchor>
@@ -209,60 +217,63 @@ export const FilesPage = () => (
           </ActionMenu>
         </PageHeader.ContextAreaActions>
       </PageHeader.ContextArea>
-      <PageHeader.TitleArea>
+      {/* This is a hack for now. Breadcrumbs are not leading visuals but for now we are displaying them as leading action until we find a better solution. */}
+      <PageHeader.LeadingAction hidden={false}>
         <Breadcrumbs>
           <Breadcrumbs.Item href="https://github.com/primer/react/tree/main">react</Breadcrumbs.Item>
           <Breadcrumbs.Item href="https://github.com/primer/react/tree/main/src">src</Breadcrumbs.Item>
           <Breadcrumbs.Item href="https://github.com/primer/react/tree/main/src/PageHeader">
             PageHeader
           </Breadcrumbs.Item>
-          <Breadcrumbs.Item href="https://github.com/primer/react/blob/main/src/PageHeader/PageHeader.tsx">
-            PageHeader.tsx
-          </Breadcrumbs.Item>
+          {/* The last item of the breadcrumb is usually has "selected" prop and it renders as a plain text. We are not leveraging this here because the title
+          (last item of the breacdrumb component) is a heading and it is should be the first dom element in the page to avoid any interactive content before the heading (A11y feedback.) */}
         </Breadcrumbs>
-        <VisuallyHidden as="h2">PageHeader.tsx</VisuallyHidden>
-        <PageHeader.Actions hidden={{narrow: true}}>
-          <ActionMenu>
-            <ActionMenu.Anchor>
-              <IconButton size="small" aria-label="More file actions" icon={KebabHorizontalIcon} />
-            </ActionMenu.Anchor>
-            <ActionMenu.Overlay width="medium">
-              <ActionList>
-                <ActionList.Group title="Raw file content">
-                  <ActionList.Item onSelect={() => alert('Download')}>Download</ActionList.Item>
-                </ActionList.Group>
-                <ActionList.Divider />
-                <ActionList.Item onSelect={() => alert('Jump to line')}>
-                  Jump to line
-                  <ActionList.TrailingVisual>L</ActionList.TrailingVisual>
-                </ActionList.Item>
-                <ActionList.Divider />
-                <ActionList.Item onSelect={() => alert('Copy path')}>
-                  Copy path
-                  <ActionList.TrailingVisual>⌘⇧.</ActionList.TrailingVisual>
-                </ActionList.Item>
-                <ActionList.Item onSelect={() => alert('Copy permalink')}>
-                  Copy permalink
-                  <ActionList.TrailingVisual>⌘⇧,</ActionList.TrailingVisual>
-                </ActionList.Item>
-                <ActionList.Divider />
-                <ActionList.Group title="View Options">
-                  <ActionList.Item onSelect={() => alert('Show code folding buttons')}>
-                    Show code folding buttons
-                  </ActionList.Item>
-                  <ActionList.Item onSelect={() => alert('Wrap lines')}>Wrap lines</ActionList.Item>
-                  <ActionList.Item onSelect={() => alert('Center content')}>Center content</ActionList.Item>
-                </ActionList.Group>
-                <ActionList.Divider />
-                <ActionList.Item variant="danger" onSelect={() => alert('Delete file clicked')}>
-                  Delete file
-                  <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+      </PageHeader.LeadingAction>
+      <PageHeader.TrailingAction>
+        <IconButton size="small" variant="invisible" aria-label="Copy to clipboard" icon={CopyIcon} />
+      </PageHeader.TrailingAction>
+
+      <PageHeader.Actions>
+        <ActionMenu>
+          <ActionMenu.Anchor>
+            <IconButton size="small" aria-label="More file actions" icon={KebabHorizontalIcon} />
+          </ActionMenu.Anchor>
+          <ActionMenu.Overlay width="medium">
+            <ActionList>
+              <ActionList.Group title="Raw file content">
+                <ActionList.Item onSelect={() => alert('Download')}>Download</ActionList.Item>
+              </ActionList.Group>
+              <ActionList.Divider />
+              <ActionList.Item onSelect={() => alert('Jump to line')}>
+                Jump to line
+                <ActionList.TrailingVisual>L</ActionList.TrailingVisual>
+              </ActionList.Item>
+              <ActionList.Divider />
+              <ActionList.Item onSelect={() => alert('Copy path')}>
+                Copy path
+                <ActionList.TrailingVisual>⌘⇧.</ActionList.TrailingVisual>
+              </ActionList.Item>
+              <ActionList.Item onSelect={() => alert('Copy permalink')}>
+                Copy permalink
+                <ActionList.TrailingVisual>⌘⇧,</ActionList.TrailingVisual>
+              </ActionList.Item>
+              <ActionList.Divider />
+              <ActionList.Group title="View Options">
+                <ActionList.Item onSelect={() => alert('Show code folding buttons')}>
+                  Show code folding buttons
                 </ActionList.Item>
-              </ActionList>
-            </ActionMenu.Overlay>
-          </ActionMenu>
-        </PageHeader.Actions>
-      </PageHeader.TitleArea>
+                <ActionList.Item onSelect={() => alert('Wrap lines')}>Wrap lines</ActionList.Item>
+                <ActionList.Item onSelect={() => alert('Center content')}>Center content</ActionList.Item>
+              </ActionList.Group>
+              <ActionList.Divider />
+              <ActionList.Item variant="danger" onSelect={() => alert('Delete file clicked')}>
+                Delete file
+                <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+              </ActionList.Item>
+            </ActionList>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+      </PageHeader.Actions>
     </PageHeader>
   </Box>
 )
@@ -276,38 +287,38 @@ export const WithPageLayout = () => {
     <PageLayout>
       <PageLayout.Header>
         <PageHeader>
-          <PageHeader.ContextArea>
-            <PageHeader.ParentLink href="http://github.com">Pull requests</PageHeader.ParentLink>
-          </PageHeader.ContextArea>
           <PageHeader.TitleArea>
             <PageHeader.Title as="h1">
               PageHeader component initial layout explorations extra long pull request title &nbsp;
               <Text sx={{color: 'fg.muted', fontWeight: 'light'}}>#1831</Text>
             </PageHeader.Title>
-            <PageHeader.Actions>
-              <Hidden when={['regular', 'wide']}>
-                {/* Pop up actions */}
-                <ActionMenu>
-                  <ActionMenu.Anchor>
-                    <IconButton aria-label="More pull request actions" icon={KebabHorizontalIcon} />
-                  </ActionMenu.Anchor>
-                  <ActionMenu.Overlay width="small">
-                    <ActionList>
-                      <ActionList.Item onSelect={() => alert('Edit button action')}>Edit</ActionList.Item>
-                      <ActionList.Item onSelect={() => alert('Code button action')}>Code</ActionList.Item>
-                    </ActionList>
-                  </ActionMenu.Overlay>
-                </ActionMenu>
-              </Hidden>
-
-              <Hidden when={['narrow']}>
-                <Box sx={{display: 'flex'}}>
-                  <Button>Edit</Button>
-                  <Button leadingVisual={CodeIcon}>Code</Button>
-                </Box>
-              </Hidden>
-            </PageHeader.Actions>
           </PageHeader.TitleArea>
+          <PageHeader.ContextArea>
+            <PageHeader.ParentLink href="http://github.com">Pull requests</PageHeader.ParentLink>
+          </PageHeader.ContextArea>
+          <PageHeader.Actions>
+            <Hidden when={['regular', 'wide']}>
+              {/* Pop up actions */}
+              <ActionMenu>
+                <ActionMenu.Anchor>
+                  <IconButton aria-label="More pull request actions" icon={KebabHorizontalIcon} />
+                </ActionMenu.Anchor>
+                <ActionMenu.Overlay width="small">
+                  <ActionList>
+                    <ActionList.Item onSelect={() => alert('Edit button action')}>Edit</ActionList.Item>
+                    <ActionList.Item onSelect={() => alert('Code button action')}>Code</ActionList.Item>
+                  </ActionList>
+                </ActionMenu.Overlay>
+              </ActionMenu>
+            </Hidden>
+
+            <Hidden when={['narrow']}>
+              <Box sx={{display: 'flex', gap: '0.5rem'}}>
+                <Button>Edit</Button>
+                <Button leadingVisual={CodeIcon}>Code</Button>
+              </Box>
+            </Hidden>
+          </PageHeader.Actions>
           <PageHeader.Description>
             <StateLabel status="pullOpened">Open</StateLabel>
             <Hidden when={['narrow']}>
@@ -354,6 +365,7 @@ export const WithPageLayout = () => {
         <Box sx={{display: 'flex', flexDirection: 'column', gap: 3}}>
           <Box>
             <Text sx={{fontSize: 0, fontWeight: 'bold', display: 'block', color: 'fg.muted'}}>Assignees</Text>
+
             <Text sx={{fontSize: 0, color: 'fg.muted', lineHeight: 'condensed', display: 'flex', alignItems: 'center'}}>
               No one —
               <Button
diff --git a/src/PageHeader/PageHeader.features.stories.tsx b/src/PageHeader/PageHeader.features.stories.tsx
index 793cf3453ed..8aa4af429ab 100644
--- a/src/PageHeader/PageHeader.features.stories.tsx
+++ b/src/PageHeader/PageHeader.features.stories.tsx
@@ -16,7 +16,6 @@ import {
   GitBranchIcon,
   KebabHorizontalIcon,
 } from '@primer/octicons-react'
-import VisuallyHidden from '../_VisuallyHidden'
 
 import {PageHeader} from './PageHeader'
 import {Hidden} from '../Hidden'
@@ -66,26 +65,6 @@ export const WithLeadingAndTrailingVisuals = () => (
   </Box>
 )
 
-export const WithComponentAsATitle = () => (
-  <Box sx={{padding: 3}}>
-    <PageHeader>
-      <PageHeader.TitleArea>
-        <Breadcrumbs>
-          <Breadcrumbs.Item href="https://github.com/primer/react/tree/main">react</Breadcrumbs.Item>
-          <Breadcrumbs.Item href="https://github.com/primer/react/tree/main/src">src</Breadcrumbs.Item>
-          <Breadcrumbs.Item href="https://github.com/primer/react/tree/main/src/PageHeader">
-            PageHeader
-          </Breadcrumbs.Item>
-          <Breadcrumbs.Item href="https://github.com/primer/react/blob/main/src/PageHeader/PageHeader.tsx">
-            PageHeader.tsx
-          </Breadcrumbs.Item>
-        </Breadcrumbs>
-        <VisuallyHidden as="h2">PageHeader.tsx</VisuallyHidden>
-      </PageHeader.TitleArea>
-    </PageHeader>
-  </Box>
-)
-
 export const WithLeadingVisualHiddenOnRegularViewport = () => (
   <Box sx={{padding: 3}}>
     <PageHeader>
@@ -113,32 +92,34 @@ export const WithActions = () => (
     <PageHeader>
       <PageHeader.TitleArea>
         <PageHeader.Title>Title</PageHeader.Title>
-        <PageHeader.Actions>
-          <IconButton aria-label="Workflows" icon={WorkflowIcon} />
-          <IconButton aria-label="Insights" icon={GraphIcon} />
-          <Button variant="primary" trailingVisual={TriangleDownIcon}>
-            Add Item
-          </Button>
-          <IconButton aria-label="Settings" icon={GearIcon} />
-        </PageHeader.Actions>
       </PageHeader.TitleArea>
+      <PageHeader.Actions>
+        <IconButton aria-label="Workflows" icon={WorkflowIcon} />
+        <IconButton aria-label="Insights" icon={GraphIcon} />
+        <Button variant="primary" trailingVisual={TriangleDownIcon}>
+          Add Item
+        </Button>
+        <IconButton aria-label="Settings" icon={GearIcon} />
+      </PageHeader.Actions>
     </PageHeader>
   </Box>
 )
 
 export const WithDescriptionSlot = () => (
   <Box sx={{padding: 3}}>
-    <PageHeader.TitleArea>
-      <PageHeader.Title>add-pageheader-docs</PageHeader.Title>
-    </PageHeader.TitleArea>
-    <PageHeader.Description>
-      <Text sx={{fontSize: 1, color: 'fg.muted'}}>
-        <Link href="https://github.com/broccolinisoup" sx={{fontWeight: 'bold'}}>
-          broccolinisoup
-        </Link>{' '}
-        created this branch 5 days ago · 14 commits · updated today
-      </Text>
-    </PageHeader.Description>
+    <PageHeader>
+      <PageHeader.TitleArea>
+        <PageHeader.Title>add-pageheader-docs</PageHeader.Title>
+      </PageHeader.TitleArea>
+      <PageHeader.Description>
+        <Text sx={{fontSize: 1, color: 'fg.muted'}}>
+          <Link href="https://github.com/broccolinisoup" sx={{fontWeight: 'bold'}}>
+            broccolinisoup
+          </Link>{' '}
+          created this branch 5 days ago · 14 commits · updated today
+        </Text>
+      </PageHeader.Description>
+    </PageHeader>
   </Box>
 )
 
@@ -194,14 +175,14 @@ export const WithLeadingAndTrailingActions = () => (
   <Box sx={{padding: 3}}>
     <PageHeader>
       <PageHeader.TitleArea>
-        <PageHeader.LeadingAction>
-          <IconButton aria-label="Expand" icon={SidebarExpandIcon} variant="invisible" />
-        </PageHeader.LeadingAction>
         <PageHeader.Title>Title</PageHeader.Title>
-        <PageHeader.TrailingAction>
-          <IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
-        </PageHeader.TrailingAction>
       </PageHeader.TitleArea>
+      <PageHeader.LeadingAction>
+        <IconButton aria-label="Expand" icon={SidebarExpandIcon} variant="invisible" />
+      </PageHeader.LeadingAction>
+      <PageHeader.TrailingAction>
+        <IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
+      </PageHeader.TrailingAction>
     </PageHeader>
   </Box>
 )
@@ -209,6 +190,9 @@ export const WithLeadingAndTrailingActions = () => (
 export const WithParentLinkAndActionsOfContextArea = () => (
   <Box sx={{padding: 3}}>
     <PageHeader>
+      <PageHeader.TitleArea>
+        <PageHeader.Title>Title</PageHeader.Title>
+      </PageHeader.TitleArea>
       <PageHeader.ContextArea>
         <PageHeader.ParentLink href="http://github.com">Parent Link</PageHeader.ParentLink>
 
@@ -219,9 +203,6 @@ export const WithParentLinkAndActionsOfContextArea = () => (
           <IconButton size="small" aria-label="More Options" icon={KebabHorizontalIcon} />
         </PageHeader.ContextAreaActions>
       </PageHeader.ContextArea>
-      <PageHeader.TitleArea>
-        <PageHeader.Title>Title</PageHeader.Title>
-      </PageHeader.TitleArea>
     </PageHeader>
   </Box>
 )
@@ -235,6 +216,9 @@ WithParentLinkAndActionsOfContextArea.parameters = {
 export const WithContextBarAndActionsOfContextArea = () => (
   <Box sx={{padding: 3}}>
     <PageHeader>
+      <PageHeader.TitleArea>
+        <PageHeader.Title>Title</PageHeader.Title>
+      </PageHeader.TitleArea>
       <PageHeader.ContextArea>
         <PageHeader.ContextBar>
           <Breadcrumbs>
@@ -255,9 +239,6 @@ export const WithContextBarAndActionsOfContextArea = () => (
           <IconButton size="small" aria-label="More Options" icon={KebabHorizontalIcon} />
         </PageHeader.ContextAreaActions>
       </PageHeader.ContextArea>
-      <PageHeader.TitleArea>
-        <PageHeader.Title>Title</PageHeader.Title>
-      </PageHeader.TitleArea>
     </PageHeader>
   </Box>
 )
@@ -272,15 +253,15 @@ export const WithActionsThatHaveResponsiveContent = () => (
     <PageHeader>
       <PageHeader.TitleArea>
         <PageHeader.Title as="h2">Webhooks</PageHeader.Title>
-        <PageHeader.Actions>
-          <Hidden when={['narrow']}>
-            <Button variant="primary">New webhook</Button>
-          </Hidden>
-          <Hidden when={['regular', 'wide']}>
-            <Button variant="primary">New</Button>
-          </Hidden>
-        </PageHeader.Actions>
       </PageHeader.TitleArea>
+      <PageHeader.Actions>
+        <Hidden when={['narrow']}>
+          <Button variant="primary">New webhook</Button>
+        </Hidden>
+        <Hidden when={['regular', 'wide']}>
+          <Button variant="primary">New</Button>
+        </Hidden>
+      </PageHeader.Actions>
     </PageHeader>
   </Box>
 )
diff --git a/src/PageHeader/PageHeader.stories.tsx b/src/PageHeader/PageHeader.stories.tsx
index b9b4921872d..12601d26c4c 100644
--- a/src/PageHeader/PageHeader.stories.tsx
+++ b/src/PageHeader/PageHeader.stories.tsx
@@ -186,6 +186,21 @@ export default {
 export const Playground: Story = args => (
   <Box sx={{padding: 3}}>
     <PageHeader>
+      <PageHeader.TitleArea
+        variant={{
+          narrow: args['Title.variant'],
+          regular: args['Title.variant'],
+          wide: args['Title.variant'],
+        }}
+      >
+        <PageHeader.LeadingVisual hidden={!args.hasLeadingVisual}>{<args.LeadingVisual />}</PageHeader.LeadingVisual>
+        <PageHeader.Title as={args['Title.as']} hidden={!args.hasTitle}>
+          {args.Title}
+        </PageHeader.Title>
+        <PageHeader.TrailingVisual hidden={!args.hasTrailingVisual}>
+          <Label>Beta</Label>
+        </PageHeader.TrailingVisual>
+      </PageHeader.TitleArea>
       <PageHeader.ContextArea hidden={!args.hasContextArea}>
         <PageHeader.ParentLink href="http://github.com" hidden={!args.hasParentLink}>
           {args.ParentLink}
@@ -211,37 +226,22 @@ export const Playground: Story = args => (
           <IconButton size="small" aria-label="More" icon={KebabHorizontalIcon} />
         </PageHeader.ContextAreaActions>
       </PageHeader.ContextArea>
-      <PageHeader.TitleArea
-        variant={{
-          narrow: args['Title.variant'],
-          regular: args['Title.variant'],
-          wide: args['Title.variant'],
-        }}
-      >
-        <PageHeader.LeadingAction hidden={!args.hasLeadingAction}>
-          <IconButton aria-label="Expand" icon={SidebarExpandIcon} variant="invisible" />{' '}
-        </PageHeader.LeadingAction>
-        <PageHeader.LeadingVisual hidden={!args.hasLeadingVisual}>{<args.LeadingVisual />}</PageHeader.LeadingVisual>
-        <PageHeader.Title as={args['Title.as']} hidden={!args.hasTitle}>
-          {args.Title}
-        </PageHeader.Title>
-        <PageHeader.TrailingVisual hidden={!args.hasTrailingVisual}>
-          <Label>Beta</Label>
-        </PageHeader.TrailingVisual>
-        <PageHeader.TrailingAction hidden={!args.hasTrailingAction}>
-          <IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
-        </PageHeader.TrailingAction>
-        <PageHeader.Actions hidden={!args.hasActions}>
-          <Hidden when={['narrow']}>
-            <Button variant="primary">New Branch</Button>
-          </Hidden>
+      <PageHeader.LeadingAction hidden={!args.hasLeadingAction}>
+        <IconButton aria-label="Expand" icon={SidebarExpandIcon} variant="invisible" />{' '}
+      </PageHeader.LeadingAction>
+      <PageHeader.TrailingAction hidden={!args.hasTrailingAction}>
+        <IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
+      </PageHeader.TrailingAction>
+      <PageHeader.Actions hidden={!args.hasActions}>
+        <Hidden when={['narrow']}>
+          <Button variant="primary">New Branch</Button>
+        </Hidden>
 
-          <Hidden when={['regular', 'wide', 'narrow']}>
-            <Button variant="primary">New</Button>
-          </Hidden>
-          <IconButton aria-label="More" icon={KebabHorizontalIcon} />
-        </PageHeader.Actions>
-      </PageHeader.TitleArea>
+        <Hidden when={['regular', 'wide', 'narrow']}>
+          <Button variant="primary">New</Button>
+        </Hidden>
+        <IconButton aria-label="More" icon={KebabHorizontalIcon} />
+      </PageHeader.Actions>
       <PageHeader.Description hidden={!args.hasDescription}>
         <StateLabel status="pullOpened">Open</StateLabel>
         <Hidden when={['narrow']}>
diff --git a/src/PageHeader/PageHeader.test.tsx b/src/PageHeader/PageHeader.test.tsx
index 7878b6c1a64..bdd81b5d31b 100644
--- a/src/PageHeader/PageHeader.test.tsx
+++ b/src/PageHeader/PageHeader.test.tsx
@@ -4,13 +4,23 @@ import {PageHeader} from '.'
 import MatchMediaMock from 'jest-matchmedia-mock'
 import {behavesAsComponent, checkExports, renderStyles} from '../utils/testing'
 import {IconButton} from '../Button'
-import {ChevronLeftIcon, GitBranchIcon, PencilIcon, SidebarExpandIcon} from '@primer/octicons-react'
+import {SidebarExpandIcon} from '@primer/octicons-react'
 import {mediaQueries} from '../utils/layout'
 
 let matchmedia: MatchMediaMock
 describe('PageHeader', () => {
   beforeAll(() => {
     matchmedia = new MatchMediaMock()
+    const observe = jest.fn()
+    window.IntersectionObserver = jest.fn(() => ({
+      observe,
+      unobserve: jest.fn(),
+      takeRecords: jest.fn(),
+      disconnect: jest.fn(),
+      root: null,
+      rootMargin: '',
+      thresholds: [],
+    })) as jest.Mock<IntersectionObserver>
   })
   afterAll(() => {
     matchmedia.clear()
@@ -20,8 +30,8 @@ describe('PageHeader', () => {
     options: {skipAs: true, skipSx: true},
     toRender: () => (
       <PageHeader>
-        <PageHeader.ContextArea></PageHeader.ContextArea>
         <PageHeader.TitleArea></PageHeader.TitleArea>
+        <PageHeader.ContextArea></PageHeader.ContextArea>
         <PageHeader.Description></PageHeader.Description>
         <PageHeader.Navigation></PageHeader.Navigation>
       </PageHeader>
@@ -34,8 +44,8 @@ describe('PageHeader', () => {
   it('renders default layout', () => {
     const {container} = render(
       <PageHeader>
-        <PageHeader.ContextArea>ContextArea</PageHeader.ContextArea>
         <PageHeader.TitleArea>TitleArea</PageHeader.TitleArea>
+        <PageHeader.ContextArea>ContextArea</PageHeader.ContextArea>
         <PageHeader.Description>Description</PageHeader.Description>
         <PageHeader.Navigation>Navigation</PageHeader.Navigation>
       </PageHeader>,
@@ -50,11 +60,9 @@ describe('PageHeader', () => {
     const expectedStyles = {
       '-ms-flex-align': 'center',
       '-ms-flex-direction': 'row',
-      '-ms-flex-order': '0',
       '-webkit-align-items': 'center',
       '-webkit-box-align': 'center',
       '-webkit-flex-direction': 'row',
-      '-webkit-order': '0',
       [`@media screen and (max-width:calc(768px - 0.02px))`]: {
         display: 'flex',
       },
@@ -65,7 +73,9 @@ describe('PageHeader', () => {
       display: 'flex',
       'flex-direction': 'row',
       gap: '0.5rem',
-      order: '0',
+      'grid-area': 'context-area',
+      'padding-bottom': '0.5rem',
+      'grid-row': '1',
     }
 
     expect(renderStyles(<PageHeader.ContextArea>ContextArea</PageHeader.ContextArea>)).toEqual(
@@ -76,11 +86,9 @@ describe('PageHeader', () => {
     const expectedStyles = {
       '-ms-flex-align': 'center',
       '-ms-flex-direction': 'row',
-      '-ms-flex-order': '0',
       '-webkit-align-items': 'center',
       '-webkit-box-align': 'center',
       '-webkit-flex-direction': 'row',
-      '-webkit-order': '0',
       [`@media screen and (max-width:calc(768px - 0.02px))`]: {
         display: 'flex',
       },
@@ -94,7 +102,9 @@ describe('PageHeader', () => {
       display: 'flex',
       'flex-direction': 'row',
       gap: '0.5rem',
-      order: '0',
+      'grid-area': 'context-area',
+      'grid-row': '1',
+      'padding-bottom': '0.5rem',
     }
 
     expect(
@@ -123,7 +133,10 @@ describe('PageHeader', () => {
         display: 'flex',
       },
       'align-items': 'center',
-      height: '2rem',
+      display: 'flex',
+      'grid-area': 'leading-action',
+      'grid-row': '2',
+      'padding-right': '0.5rem',
     }
 
     expect(
@@ -137,49 +150,20 @@ describe('PageHeader', () => {
   it('respects the title variant prop', () => {
     const {getByText} = render(
       <PageHeader>
-        <PageHeader.ContextArea>ContextArea</PageHeader.ContextArea>
         <PageHeader.TitleArea variant="large">
           <PageHeader.Title>Title</PageHeader.Title>
         </PageHeader.TitleArea>
-      </PageHeader>,
-    )
-    expect(getByText('Title')).toHaveStyle('font-size: 2rem')
-  })
-  it("respects the title variant prop and updates the children components' container height accordingly", () => {
-    const {getByText} = render(
-      <PageHeader>
         <PageHeader.ContextArea>ContextArea</PageHeader.ContextArea>
-        <PageHeader.TitleArea variant="large">
-          <PageHeader.LeadingAction>
-            Leading Action
-            <IconButton aria-label="Expand" icon={SidebarExpandIcon} variant="invisible" />
-          </PageHeader.LeadingAction>
-          <PageHeader.LeadingVisual>
-            Leading Visual
-            <GitBranchIcon />
-          </PageHeader.LeadingVisual>
-          <PageHeader.Title>Title</PageHeader.Title>
-          <PageHeader.TrailingAction>
-            Trailing Action
-            <IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
-          </PageHeader.TrailingAction>
-          <PageHeader.TrailingVisual>
-            Trailing Visual
-            <ChevronLeftIcon />
-          </PageHeader.TrailingVisual>
-        </PageHeader.TitleArea>
       </PageHeader>,
     )
-
-    expect(getByText('Leading Visual')).toHaveStyle('height: 3rem')
-    expect(getByText('Trailing Visual')).toHaveStyle('height: 3rem')
-    expect(getByText('Leading Action')).toHaveStyle('height: 3rem')
-    expect(getByText('Trailing Action')).toHaveStyle('height: 3rem')
-    // add actions here
+    expect(getByText('Title')).toHaveStyle('font-size: 32px')
   })
   it('renders "aria-label" prop when Navigation is rendered as "nav" landmark', () => {
     const {getByLabelText, getByText} = render(
       <PageHeader>
+        <PageHeader.TitleArea>
+          <PageHeader.Title>Title</PageHeader.Title>
+        </PageHeader.TitleArea>
         <PageHeader.Navigation as="nav" aria-label="Custom">
           Navigation
         </PageHeader.Navigation>
@@ -191,6 +175,9 @@ describe('PageHeader', () => {
   it('does not renders "aria-label" prop when Navigation is rendered as "div"', () => {
     const {getByText} = render(
       <PageHeader>
+        <PageHeader.TitleArea>
+          <PageHeader.Title>Title</PageHeader.Title>
+        </PageHeader.TitleArea>
         <PageHeader.Navigation aria-label="Custom">Navigation</PageHeader.Navigation>
       </PageHeader>,
     )
@@ -200,6 +187,9 @@ describe('PageHeader', () => {
     const consoleSpy = jest.spyOn(global.console, 'warn').mockImplementation()
     render(
       <PageHeader>
+        <PageHeader.TitleArea>
+          <PageHeader.Title>Title</PageHeader.Title>
+        </PageHeader.TitleArea>
         <PageHeader.Navigation as="nav">Navigation</PageHeader.Navigation>
       </PageHeader>,
     )
diff --git a/src/PageHeader/PageHeader.tsx b/src/PageHeader/PageHeader.tsx
index 8fd6258c72d..519ea1a792c 100644
--- a/src/PageHeader/PageHeader.tsx
+++ b/src/PageHeader/PageHeader.tsx
@@ -1,18 +1,30 @@
 import React from 'react'
 import {Box} from '..'
 import {useResponsiveValue, ResponsiveValue} from '../hooks/useResponsiveValue'
-import {SxProp, merge, BetterSystemStyleObject} from '../sx'
+import {SxProp, merge, BetterSystemStyleObject, CSSCustomProperties} from '../sx'
 import Heading from '../Heading'
 import {ArrowLeftIcon} from '@primer/octicons-react'
 import Link, {LinkProps as BaseLinkProps} from '../Link'
+import {useProvidedRefOrCreate} from '../hooks'
 
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {getBreakpointDeclarations} from '../utils/getBreakpointDeclarations'
-const REGION_ORDER = {
-  ContextArea: 0,
-  TitleArea: 1,
-  Description: 2,
-  Navigation: 3,
+import {invariant} from '../utils/invariant'
+import {warning} from '../utils/warning'
+const GRID_ROW_ORDER = {
+  ContextArea: 1,
+  LeadingAction: 2,
+  TitleArea: 2,
+  TrailingAction: 2,
+  Actions: 2,
+  Description: 3,
+  Navigation: 4,
+}
+
+const TITLE_AREA_REGION_ORDER = {
+  LeadingVisual: 0,
+  Title: 1,
+  TrailingVisual: 2,
 }
 
 const CONTEXT_AREA_REGION_ORDER = {
@@ -21,14 +33,8 @@ const CONTEXT_AREA_REGION_ORDER = {
   ContextAreaActions: 2,
 }
 
-const TITLE_AREA_REGION_ORDER = {
-  LeadingAction: 0,
-  LeadingVisual: 1,
-  Title: 2,
-  TrailingVisual: 3,
-  TrailingAction: 4,
-  Actions: 5,
-}
+const MEDIUM_TITLE_HEIGHT = '2rem'
+const LARGE_TITLE_HEIGHT = '3rem'
 
 // Types that are shared between PageHeader children components
 export type ChildrenPropTypes = {
@@ -56,19 +62,103 @@ export type PageHeaderProps = {
   as?: React.ElementType | 'header' | 'div'
 } & SxProp
 
-const Root: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children, sx = {}, as = 'div'}) => {
-  const rootStyles = {
-    display: 'flex',
-    flexDirection: 'column',
-    // TODO: We used hard-coded values for the spacing and font size in this component. Update them to use new design tokens when they are ready to use.
-    gap: '0.5rem',
-  }
-  return (
-    <Box as={as} sx={merge<BetterSystemStyleObject>(rootStyles, sx)}>
-      {children}
-    </Box>
-  )
-}
+const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeaderProps>>(
+  ({children, sx = {}, as = 'div'}, forwardedRef) => {
+    const rootStyles = {
+      display: 'grid',
+      // We have max 4 columns.
+      gridTemplateColumns: 'auto auto auto 1fr',
+      gridTemplateAreas: `
+      'context-area context-area context-area context-area'
+      'leading-action title-area trailing-action actions'
+      'description description description description'
+      'navigation navigation navigation navigation'
+    `,
+      //  --custom-height is a custom property (passed by sx) that can be used to override the set height.
+      // We don't want these values to be overriden but still want to allow consumers to override them if needed.
+      '&[data-size-variant="large"]': {
+        '[data-component="PH_LeadingAction"], [data-component="PH_TrailingAction"],[data-component="PH_Actions"], [data-component="PH_LeadingVisual"], [data-component="PH_TrailingVisual"]':
+          {
+            height: `var(--custom-height, ${LARGE_TITLE_HEIGHT})`,
+          },
+      },
+      '&[data-size-variant="medium"]': {
+        '[data-component="PH_LeadingAction"], [data-component="PH_TrailingAction"],[data-component="PH_Actions"], [data-component="PH_LeadingVisual"], [data-component="PH_TrailingVisual"]':
+          {
+            height: `var(--custom-height, ${MEDIUM_TITLE_HEIGHT})`,
+          },
+      },
+      '&[data-size-variant="subtitle"]': {
+        '[data-component="PH_LeadingAction"], [data-component="PH_TrailingAction"],[data-component="PH_Actions"], [data-component="PH_LeadingVisual"], [data-component="PH_TrailingVisual"]':
+          {
+            height: `var(--custom-height, ${MEDIUM_TITLE_HEIGHT})`,
+          },
+      },
+    }
+
+    const rootRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement>)
+
+    const isInteractive = (element: HTMLElement) => {
+      return (
+        ['a', 'button'].some(selector => element.matches(selector)) ||
+        (element.hasAttribute('role') && element.getAttribute('role') === 'button') ||
+        (element.hasAttribute('link') && element.getAttribute('role') === 'link') ||
+        element.hasAttribute('tabindex')
+      )
+    }
+
+    const [hasContextArea, setHasContextArea] = React.useState(false)
+    const [hasLeadingAction, setHasLeadingAction] = React.useState(false)
+    const [titleVariant, setTitleVariant] = React.useState<string | undefined>('')
+
+    React.useEffect(() => {
+      if (!rootRef.current || rootRef.current.children.length <= 0) return
+      const titleArea = Array.from(rootRef.current.children as HTMLCollection).find(child => {
+        return child instanceof HTMLElement && child.getAttribute('data-component') === 'TitleArea'
+      })
+
+      // It is very unlikely to have a PageHeader without a TitleArea, but we still want to make sure we don't break the page if that happens.
+      if (!titleArea) return
+
+      // // grab the data-size-variant attribute from the titleArea
+      const sizeVariant = titleArea.getAttribute('data-size-variant')
+      setTitleVariant(sizeVariant as string)
+
+      for (const child of React.Children.toArray(children)) {
+        if (React.isValidElement(child) && child.type === ContextArea) {
+          setHasContextArea(true)
+        }
+        if (React.isValidElement(child) && child.type === LeadingAction) {
+          setHasLeadingAction(true)
+        }
+      }
+      // Check if TitleArea has any interactive children or grandchildren.
+      const hasInteractiveContent = Array.from(titleArea.childNodes).some(child => {
+        return (
+          (child instanceof HTMLElement && isInteractive(child)) ||
+          Array.from(child.childNodes).some(child => {
+            return child instanceof HTMLElement && isInteractive(child)
+          })
+        )
+      })
+
+      // PageHeader.TitleArea should be the first element in the DOM if ContextArea or LeadingAction is present.
+      // Motivation behind this rule to make sure context area and leading action are always rendered after the title (a heading tag)
+      // so that screen reader users who are navigating via heading menu won't miss these actions.
+      if (hasContextArea || hasLeadingAction) {
+        invariant(
+          !hasInteractiveContent,
+          'When PageHeader.ContextArea or PageHeader.LeadingAction is present, PageHeader.TitleArea cannot include interactive elements to make sure the focus order is intact.',
+        )
+      }
+    }, [children, rootRef, hasContextArea, hasLeadingAction])
+    return (
+      <Box ref={rootRef} as={as} sx={merge<BetterSystemStyleObject>(rootStyles, sx)} data-size-variant={titleVariant}>
+        {children}
+      </Box>
+    )
+  },
+) as PolymorphicForwardRefComponent<'div', PageHeaderProps>
 
 // PageHeader.ContextArea : Only visible on narrow viewports by default to provide user context of where they are at their journey. `hidden` prop available
 // to manage their custom visibility but consumers should be careful if they choose to hide this on narrow viewports.
@@ -80,11 +170,14 @@ const ContextArea: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   sx = {},
 }) => {
   const contentNavStyles = {
+    gridRow: GRID_ROW_ORDER.ContextArea,
+    gridArea: 'context-area',
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
+    paddingBottom: '0.5rem',
     gap: '0.5rem',
-    order: REGION_ORDER.ContextArea,
+
     ...getBreakpointDeclarations(hidden, 'display', value => {
       return value ? 'none' : 'flex'
     }),
@@ -189,23 +282,12 @@ const ContextAreaActions: React.FC<React.PropsWithChildren<ChildrenPropTypes>> =
   )
 }
 
-const MEDIUM_TITLE_HEIGHT = '2rem'
-const LARGE_TITLE_HEIGHT = '3rem'
-
-const TitleAreaContext = React.createContext<{
-  titleVariant: 'subtitle' | 'medium' | 'large'
-  titleAreaHeight?: string | number
-}>({
-  titleVariant: 'medium',
-  titleAreaHeight: MEDIUM_TITLE_HEIGHT,
-})
-
 type TitleAreaProps = {
   variant?: 'subtitle' | 'medium' | 'large' | ResponsiveValue<'subtitle' | 'medium' | 'large'>
 } & ChildrenPropTypes
 // PageHeader.TitleArea: The main title area of the page. Visible on all viewports.
-// PageHeader.TitleArea Sub Components: PageHeader.LeadingAction, PageHeader.LeadingVisual,
-// PageHeader.Title, PageTitle.TrailingVisual, PageHeader.TrailingAction, PageHeader.Actions
+// PageHeader.TitleArea Sub Components: PageHeader.LeadingVisual,
+// PageHeader.Title, PageTitle.TrailingVisual
 // ---------------------------------------------------------------------
 
 const TitleArea: React.FC<React.PropsWithChildren<TitleAreaProps>> = ({
@@ -215,27 +297,45 @@ const TitleArea: React.FC<React.PropsWithChildren<TitleAreaProps>> = ({
   variant = 'medium',
 }) => {
   const currentVariant = useResponsiveValue(variant, 'medium')
-  const height = currentVariant === 'large' ? LARGE_TITLE_HEIGHT : MEDIUM_TITLE_HEIGHT
   return (
-    <TitleAreaContext.Provider value={{titleVariant: currentVariant, titleAreaHeight: height}}>
-      <Box
-        sx={merge<BetterSystemStyleObject>(
-          {
-            display: 'flex',
-            gap: '0.5rem',
-            order: REGION_ORDER.TitleArea,
-            ...getBreakpointDeclarations(hidden, 'display', value => {
-              return value ? 'none' : 'flex'
-            }),
-            flexDirection: 'row',
-            alignItems: 'flex-start',
+    <Box
+      data-component="TitleArea"
+      data-size-variant={currentVariant}
+      sx={merge<BetterSystemStyleObject>(
+        {
+          gridRow: GRID_ROW_ORDER.TitleArea,
+          gridArea: 'title-area',
+          display: 'flex',
+          gap: '0.5rem',
+          ...getBreakpointDeclarations(hidden, 'display', value => {
+            return value ? 'none' : 'flex'
+          }),
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          // line-height is calculated with calc(height/font-size) and the below numbers are from @primer/primitives
+          //  --custom-font-size, --custom-line-height, --custom-font-weight are custom properties (passed by sx) that can be used to override the below values
+          // We don't want these values to be overriden but still want to allow consumers to override them if needed.
+          '&[data-size-variant="large"] [data-component="PH_Title"]': {
+            fontSize: 'var(--custom-font-size, var(--text-title-size-large, 2rem))',
+            lineHeight: 'var(--custom-line-height, var(--text-title-lineHeight-large, 1.5))', // calc(48/32)
+            fontWeight: 'var(--custom-font-weight, var(--base-text-weight-normal, 400))',
           },
-          sx,
-        )}
-      >
-        {children}
-      </Box>
-    </TitleAreaContext.Provider>
+          '&[data-size-variant="medium"] [data-component="PH_Title"]': {
+            fontSize: 'var(--custom-font-size, var(--text-title-size-medium, 1.25rem))',
+            lineHeight: 'var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6))', // calc(32/20)
+            fontWeight: 'var(--custom-font-weight, var(--base-text-weight-semibold, 600))',
+          },
+          '&[data-size-variant="subtitle"] [data-component="PH_Title"]': {
+            fontSize: 'var(--custom-font-size, var(--text-title-size-medium, 1.25rem))',
+            lineHeight: 'var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6))', // calc(32/20)
+            fontWeight: 'var(--custom-font-weight, var(--base-text-weight-normal, 400))',
+          },
+        },
+        sx,
+      )}
+    >
+      {children}
+    </Box>
   )
 }
 
@@ -246,22 +346,27 @@ const LeadingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   sx = {},
   hidden = hiddenOnNarrow,
 }) => {
-  const {titleAreaHeight} = React.useContext(TitleAreaContext)
-
+  const style: CSSCustomProperties = {}
+  // @ts-ignore sx has height attribute
+  const {height} = sx
+  if (height) style['--custom-height'] = height
   return (
     <Box
+      data-component="PH_LeadingAction"
       sx={merge<BetterSystemStyleObject>(
         {
+          gridRow: GRID_ROW_ORDER.LeadingAction,
+          gridArea: 'leading-action',
+          paddingRight: '0.5rem',
           display: 'flex',
-          order: TITLE_AREA_REGION_ORDER.LeadingAction,
           ...getBreakpointDeclarations(hidden, 'display', value => {
             return value ? 'none' : 'flex'
           }),
           alignItems: 'center',
-          height: titleAreaHeight,
         },
         sx,
       )}
+      style={style}
     >
       {children}
     </Box>
@@ -270,21 +375,26 @@ const LeadingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
 
 // PageHeader.LeadingVisual and PageHeader.TrailingVisual should remain visible on narrow viewports.
 const LeadingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, sx = {}, hidden = false}) => {
-  const {titleAreaHeight} = React.useContext(TitleAreaContext)
+  const style: CSSCustomProperties = {}
+  // @ts-ignore sx has height attribute
+  const {height} = sx
+  if (height) style['--custom-height'] = height
   return (
     <Box
+      data-component="PH_LeadingVisual"
       sx={merge<BetterSystemStyleObject>(
         {
+          // using flex and order to display the leading visual in the title area.
           display: 'flex',
           order: TITLE_AREA_REGION_ORDER.LeadingVisual,
           ...getBreakpointDeclarations(hidden, 'display', value => {
             return value ? 'none' : 'flex'
           }),
           alignItems: 'center',
-          height: titleAreaHeight,
         },
         sx,
       )}
+      style={style}
     >
       {children}
     </Box>
@@ -296,32 +406,25 @@ export type TitleProps = {
 } & ChildrenPropTypes
 
 const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({children, sx = {}, hidden = false, as = 'h2'}) => {
-  const {titleVariant} = React.useContext(TitleAreaContext)
+  const style: CSSCustomProperties = {}
+  // @ts-ignore sxProp can have color attribute
+  const {fontSize, lineHeight, fontWeight} = sx
+  if (fontSize) style['--custom-font-size'] = fontSize
+  if (lineHeight) style['--custom-line-height'] = lineHeight
+  if (fontWeight) style['--custom-font-weight'] = fontWeight
+
   return (
     <Heading
+      data-component="PH_Title"
       as={as}
+      style={style}
       sx={merge<BetterSystemStyleObject>(
         {
-          fontSize: {
-            large: '2rem',
-            medium: '1.25rem',
-            subtitle: '1.25rem',
-          }[titleVariant],
-          // line-height is calculated with calc(height/font-size) and the below numbers are from @primer/primitives
-          lineHeight: {
-            large: 1.5, // calc(48/32)
-            medium: 1.6, // calc(32/20)
-            subtitle: 1.6, // calc(32/20)
-          }[titleVariant],
-          fontWeight: {
-            large: '400',
-            medium: '600',
-            subtitle: '400',
-          }[titleVariant],
+          // using flex and order to display the title in the title area.
           display: 'flex',
           order: TITLE_AREA_REGION_ORDER.Title,
           ...getBreakpointDeclarations(hidden, 'display', value => {
-            return value ? 'none' : 'flex'
+            return value ? 'none' : 'block'
           }),
         },
         sx,
@@ -334,22 +437,26 @@ const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({children, sx = {}
 
 // PageHeader.LeadingVisual and PageHeader.TrailingVisual should remain visible on narrow viewports.
 const TrailingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, sx = {}, hidden = false}) => {
-  const {titleAreaHeight} = React.useContext(TitleAreaContext)
-
+  const style: CSSCustomProperties = {}
+  // @ts-ignore sx has height attribute
+  const {height} = sx
+  if (height) style['--custom-height'] = height
   return (
     <Box
+      data-component="PH_TrailingVisual"
       sx={merge<BetterSystemStyleObject>(
         {
+          // using flex and order to display the trailing visual in the title area.
           display: 'flex',
           order: TITLE_AREA_REGION_ORDER.TrailingVisual,
           ...getBreakpointDeclarations(hidden, 'display', value => {
             return value ? 'none' : 'flex'
           }),
           alignItems: 'center',
-          height: titleAreaHeight,
         },
         sx,
       )}
+      style={style}
     >
       {children}
     </Box>
@@ -361,22 +468,27 @@ const TrailingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   sx = {},
   hidden = hiddenOnNarrow,
 }) => {
-  const {titleAreaHeight} = React.useContext(TitleAreaContext)
-
+  const style: CSSCustomProperties = {}
+  // @ts-ignore sx has height attribute
+  const {height} = sx
+  if (height) style['--custom-height'] = height
   return (
     <Box
+      data-component="PH_TrailingAction"
       sx={merge<BetterSystemStyleObject>(
         {
+          gridRow: GRID_ROW_ORDER.TrailingAction,
+          gridArea: 'trailing-action',
+          paddingLeft: '0.5rem',
           display: 'flex',
-          order: TITLE_AREA_REGION_ORDER.TrailingAction,
           ...getBreakpointDeclarations(hidden, 'display', value => {
             return value ? 'none' : 'flex'
           }),
           alignItems: 'center',
-          height: titleAreaHeight,
         },
         sx,
       )}
+      style={style}
     >
       {children}
     </Box>
@@ -384,25 +496,31 @@ const TrailingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
 }
 
 const Actions: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, sx = {}, hidden = false}) => {
-  const {titleAreaHeight} = React.useContext(TitleAreaContext)
+  const style: CSSCustomProperties = {}
+  // @ts-ignore sx has height attribute
+  const {height} = sx
+  if (height) style['--custom-height'] = height
   return (
     <Box
+      data-component="PH_Actions"
       sx={merge<BetterSystemStyleObject>(
         {
+          gridRow: GRID_ROW_ORDER.Actions,
+          gridArea: 'actions',
           display: 'flex',
-          order: TITLE_AREA_REGION_ORDER.Actions,
           ...getBreakpointDeclarations(hidden, 'display', value => {
             return value ? 'none' : 'flex'
           }),
           flexDirection: 'row',
+          paddingLeft: '0.5rem',
           gap: '0.5rem',
           flexGrow: '1',
           justifyContent: 'right',
-          height: titleAreaHeight,
           alignItems: 'center',
         },
         sx,
       )}
+      style={style}
     >
       {children}
     </Box>
@@ -415,13 +533,15 @@ const Description: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({chil
     <Box
       sx={merge<BetterSystemStyleObject>(
         {
+          gridRow: GRID_ROW_ORDER.Description,
+          gridArea: 'description',
           display: 'flex',
-          order: REGION_ORDER.Description,
           ...getBreakpointDeclarations(hidden, 'display', value => {
             return value ? 'none' : 'flex'
           }),
           flexDirection: 'row',
           alignItems: 'center',
+          paddingTop: '0.5rem',
           gap: '0.5rem',
         },
         sx,
@@ -447,15 +567,11 @@ const Navigation: React.FC<React.PropsWithChildren<NavigationProps>> = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
 }) => {
-  // TODO: use warning utility function when it is merged https://github.com/primer/react/pull/2901/
-  if (__DEV__) {
-    if (as === 'nav' && !ariaLabel && !ariaLabelledBy) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        'Use `aria-label` or `aria-labelledby` prop to provide an accessible label to the `nav` landmark for assistive technology',
-      )
-    }
-  }
+  warning(
+    as === 'nav' && !ariaLabel && !ariaLabelledBy,
+    'Use `aria-label` or `aria-labelledby` prop to provide an accessible label to the `nav` landmark for assistive technology',
+  )
+
   return (
     <Box
       as={as}
@@ -464,8 +580,10 @@ const Navigation: React.FC<React.PropsWithChildren<NavigationProps>> = ({
       aria-labelledby={as === 'nav' ? ariaLabelledBy : undefined}
       sx={merge<BetterSystemStyleObject>(
         {
+          gridRow: GRID_ROW_ORDER.Navigation,
+          gridArea: 'navigation',
+          paddingTop: '0.5rem',
           display: 'flex',
-          order: REGION_ORDER.Navigation,
           ...getBreakpointDeclarations(hidden, 'display', value => {
             return value ? 'none' : 'block'
           }),
@@ -482,8 +600,8 @@ export const PageHeader = Object.assign(Root, {
   ContextArea,
   ParentLink,
   ContextBar,
-  ContextAreaActions,
   TitleArea,
+  ContextAreaActions,
   LeadingAction,
   LeadingVisual,
   Title,
@@ -493,3 +611,5 @@ export const PageHeader = Object.assign(Root, {
   Description,
   Navigation,
 })
+
+PageHeader.displayName = 'PageHeader'
diff --git a/src/PageHeader/__snapshots__/PageHeader.test.tsx.snap b/src/PageHeader/__snapshots__/PageHeader.test.tsx.snap
index 6094c0b4893..5aae3666622 100644
--- a/src/PageHeader/__snapshots__/PageHeader.test.tsx.snap
+++ b/src/PageHeader/__snapshots__/PageHeader.test.tsx.snap
@@ -1,18 +1,74 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PageHeader renders default layout 1`] = `
+exports[`PageHeader renders consistently 1`] = `
 .c0 {
+  display: grid;
+  grid-template-columns: auto auto auto 1fr;
+  grid-template-areas: 'context-area context-area context-area context-area' 'leading-action title-area trailing-action actions' 'description description description description' 'navigation navigation navigation navigation';
+}
+
+.c0[data-size-variant="large"] [data-component="PH_LeadingAction"],
+.c0[data-size-variant="large"] [data-component="PH_TrailingAction"],
+.c0[data-size-variant="large"] [data-component="PH_Actions"],
+.c0[data-size-variant="large"] [data-component="PH_LeadingVisual"],
+.c0[data-size-variant="large"] [data-component="PH_TrailingVisual"] {
+  height: var(--custom-height,3rem);
+}
+
+.c0[data-size-variant="medium"] [data-component="PH_LeadingAction"],
+.c0[data-size-variant="medium"] [data-component="PH_TrailingAction"],
+.c0[data-size-variant="medium"] [data-component="PH_Actions"],
+.c0[data-size-variant="medium"] [data-component="PH_LeadingVisual"],
+.c0[data-size-variant="medium"] [data-component="PH_TrailingVisual"] {
+  height: var(--custom-height,2rem);
+}
+
+.c0[data-size-variant="subtitle"] [data-component="PH_LeadingAction"],
+.c0[data-size-variant="subtitle"] [data-component="PH_TrailingAction"],
+.c0[data-size-variant="subtitle"] [data-component="PH_Actions"],
+.c0[data-size-variant="subtitle"] [data-component="PH_LeadingVisual"],
+.c0[data-size-variant="subtitle"] [data-component="PH_TrailingVisual"] {
+  height: var(--custom-height,2rem);
+}
+
+.c1 {
+  grid-row: 2;
+  grid-area: title-area;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
   gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
 }
 
-.c1 {
+.c1[data-size-variant="large"] [data-component="PH_Title"] {
+  font-size: var(--custom-font-size,var(--text-title-size-large,2rem));
+  line-height: var(--custom-line-height,var(--text-title-lineHeight-large,1.5));
+  font-weight: var(--custom-font-weight,var(--base-text-weight-normal,400));
+}
+
+.c1[data-size-variant="medium"] [data-component="PH_Title"] {
+  font-size: var(--custom-font-size,var(--text-title-size-medium,1.25rem));
+  line-height: var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));
+  font-weight: var(--custom-font-weight,var(--base-text-weight-semibold,600));
+}
+
+.c1[data-size-variant="subtitle"] [data-component="PH_Title"] {
+  font-size: var(--custom-font-size,var(--text-title-size-medium,1.25rem));
+  line-height: var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));
+  font-weight: var(--custom-font-weight,var(--base-text-weight-normal,400));
+}
+
+.c2 {
+  grid-row: 1;
+  grid-area: context-area;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -24,21 +80,110 @@ exports[`PageHeader renders default layout 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  padding-bottom: 0.5rem;
   gap: 0.5rem;
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
 }
 
-.c2 {
+.c3 {
+  grid-row: 3;
+  grid-area: description;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding-top: 0.5rem;
+  gap: 0.5rem;
+}
+
+.c4 {
+  grid-row: 4;
+  grid-area: navigation;
+  padding-top: 0.5rem;
+  display: block;
+}
+
+@media screen and (max-width:calc(768px - 0.02px)) {
+  .c2 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .c2 {
+    display: none;
+  }
+}
+
+<div
+  className="c0"
+  data-size-variant=""
+>
+  <div
+    className="c1"
+    data-component="TitleArea"
+    data-size-variant="medium"
+  />
+  <div
+    className="c2"
+  />
+  <div
+    className="c3"
+  />
+  <div
+    className="c4"
+  />
+</div>
+`;
+
+exports[`PageHeader renders default layout 1`] = `
+.c0 {
+  display: grid;
+  grid-template-columns: auto auto auto 1fr;
+  grid-template-areas: 'context-area context-area context-area context-area' 'leading-action title-area trailing-action actions' 'description description description description' 'navigation navigation navigation navigation';
+}
+
+.c0[data-size-variant="large"] [data-component="PH_LeadingAction"],
+.c0[data-size-variant="large"] [data-component="PH_TrailingAction"],
+.c0[data-size-variant="large"] [data-component="PH_Actions"],
+.c0[data-size-variant="large"] [data-component="PH_LeadingVisual"],
+.c0[data-size-variant="large"] [data-component="PH_TrailingVisual"] {
+  height: var(--custom-height,3rem);
+}
+
+.c0[data-size-variant="medium"] [data-component="PH_LeadingAction"],
+.c0[data-size-variant="medium"] [data-component="PH_TrailingAction"],
+.c0[data-size-variant="medium"] [data-component="PH_Actions"],
+.c0[data-size-variant="medium"] [data-component="PH_LeadingVisual"],
+.c0[data-size-variant="medium"] [data-component="PH_TrailingVisual"] {
+  height: var(--custom-height,2rem);
+}
+
+.c0[data-size-variant="subtitle"] [data-component="PH_LeadingAction"],
+.c0[data-size-variant="subtitle"] [data-component="PH_TrailingAction"],
+.c0[data-size-variant="subtitle"] [data-component="PH_Actions"],
+.c0[data-size-variant="subtitle"] [data-component="PH_LeadingVisual"],
+.c0[data-size-variant="subtitle"] [data-component="PH_TrailingVisual"] {
+  height: var(--custom-height,2rem);
+}
+
+.c1 {
+  grid-row: 2;
+  grid-area: title-area;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   gap: 0.5rem;
-  -webkit-order: 1;
-  -ms-flex-order: 1;
-  order: 1;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -48,14 +193,49 @@ exports[`PageHeader renders default layout 1`] = `
   align-items: flex-start;
 }
 
+.c1[data-size-variant="large"] [data-component="PH_Title"] {
+  font-size: var(--custom-font-size,var(--text-title-size-large,2rem));
+  line-height: var(--custom-line-height,var(--text-title-lineHeight-large,1.5));
+  font-weight: var(--custom-font-weight,var(--base-text-weight-normal,400));
+}
+
+.c1[data-size-variant="medium"] [data-component="PH_Title"] {
+  font-size: var(--custom-font-size,var(--text-title-size-medium,1.25rem));
+  line-height: var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));
+  font-weight: var(--custom-font-weight,var(--base-text-weight-semibold,600));
+}
+
+.c1[data-size-variant="subtitle"] [data-component="PH_Title"] {
+  font-size: var(--custom-font-size,var(--text-title-size-medium,1.25rem));
+  line-height: var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));
+  font-weight: var(--custom-font-weight,var(--base-text-weight-normal,400));
+}
+
+.c2 {
+  grid-row: 1;
+  grid-area: context-area;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding-bottom: 0.5rem;
+  gap: 0.5rem;
+}
+
 .c3 {
+  grid-row: 3;
+  grid-area: description;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-order: 2;
-  -ms-flex-order: 2;
-  order: 2;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -63,18 +243,19 @@ exports[`PageHeader renders default layout 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  padding-top: 0.5rem;
   gap: 0.5rem;
 }
 
 .c4 {
+  grid-row: 4;
+  grid-area: navigation;
+  padding-top: 0.5rem;
   display: block;
-  -webkit-order: 3;
-  -ms-flex-order: 3;
-  order: 3;
 }
 
 @media screen and (max-width:calc(768px - 0.02px)) {
-  .c1 {
+  .c2 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -83,7 +264,7 @@ exports[`PageHeader renders default layout 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c1 {
+  .c2 {
     display: none;
   }
 }
@@ -91,16 +272,19 @@ exports[`PageHeader renders default layout 1`] = `
 <div>
   <div
     class="c0"
+    data-size-variant="medium"
   >
     <div
       class="c1"
+      data-component="TitleArea"
+      data-size-variant="medium"
     >
-      ContextArea
+      TitleArea
     </div>
     <div
       class="c2"
     >
-      TitleArea
+      ContextArea
     </div>
     <div
       class="c3"