diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index f02062077..74497db8a 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -20,7 +20,7 @@ wa-page {
 }
 
 /* Header */
-wa-page::part(drawer__dialog) {
+wa-page::part(header) {
   background-color: var(--wa-color-surface-default);
   border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
 }
diff --git a/docs/docs/components/page-samples/documentation.md b/docs/docs/components/page-samples/documentation.md
index 06dd05910..794fb62ed 100644
--- a/docs/docs/components/page-samples/documentation.md
+++ b/docs/docs/components/page-samples/documentation.md
@@ -25,7 +25,7 @@ layout: blank
   wa-page[view='mobile'] #search {
     display: none;
   }
-  [slot='banner'] {  
+  [slot='banner'] {
     --wa-color-text-link: var(--wa-color-neutral-on-loud);
     background-color: var(--wa-color-neutral-fill-loud);
   }
@@ -117,7 +117,7 @@ layout: blank
     <a href="#behavior">Behavior</a>
     <a href="#conservation">Conservation</a>
   </nav>
-  <nav slot="navigation-footer">      
+  <nav slot="navigation-footer">
     <a href="#" class="wa-flank" style="--flank-size: 1.25em;">
       <wa-icon name="camera"></wa-icon>
       <span>Photo Gallery</span>
diff --git a/src/components/page/page.styles.ts b/src/components/page/page.styles.ts
index ea28da538..8619f0b01 100644
--- a/src/components/page/page.styles.ts
+++ b/src/components/page/page.styles.ts
@@ -242,6 +242,10 @@ export default css`
     grid-template-columns: minmax(0, 1fr);
     grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
   }
+
+  [part~="drawer"]::part(dialog) {
+    background-color: var(--wa-color-surface-default);
+  }
 `;
 
 export const mobileStyles = (breakpoint: number) => `