diff --git a/playground/named-layouts/pages/_layouts/landing.tsx b/playground/named-layouts/pages/_layouts/landing.tsx
index 2463fe6d8..e8e3ee5f8 100644
--- a/playground/named-layouts/pages/_layouts/landing.tsx
+++ b/playground/named-layouts/pages/_layouts/landing.tsx
@@ -1,3 +1,20 @@
 export default function LandingLayout({ children }: { children: React.ReactNode }) {
-  return <div data-layout="landing">{children}</div>;
+  return (
+    <div data-layout="landing" style={{ minHeight: '100vh', margin: -8 }}>
+      <header
+        style={{
+          boxSizing: 'border-box',
+          width: '100%',
+          padding: '16px 24px',
+          background: '#305CDE',
+          color: '#ffffff',
+          fontWeight: 700,
+          textAlign: 'center',
+        }}
+      >
+        Landing
+      </header>
+      <main style={{ padding: 16 }}>{children}</main>
+    </div>
+  );
 }
diff --git a/playground/named-layouts/pages/docs/_layouts/api.tsx b/playground/named-layouts/pages/docs/_layouts/api.tsx
index 2554485c2..d2d4f843d 100644
--- a/playground/named-layouts/pages/docs/_layouts/api.tsx
+++ b/playground/named-layouts/pages/docs/_layouts/api.tsx
@@ -1,3 +1,20 @@
 export default function ApiLayout({ children }: { children: React.ReactNode }) {
-  return <div data-layout="api">{children}</div>;
+  return (
+    <div data-layout="api" style={{ minHeight: '100vh', margin: -8 }}>
+      <header
+        style={{
+          boxSizing: 'border-box',
+          width: '100%',
+          padding: '16px 24px',
+          background: '#006400',
+          color: '#ffffff',
+          fontWeight: 700,
+          textAlign: 'center',
+        }}
+      >
+        API
+      </header>
+      <main style={{ padding: 16 }}>{children}</main>
+    </div>
+  );
 }
diff --git a/playground/named-layouts/pages/docs/layout.tsx b/playground/named-layouts/pages/docs/layout.tsx
index 1f6bd2089..3a6e200bc 100644
--- a/playground/named-layouts/pages/docs/layout.tsx
+++ b/playground/named-layouts/pages/docs/layout.tsx
@@ -1,3 +1,20 @@
 export default function DocsLayout({ children }: { children: React.ReactNode }) {
-  return <div data-layout="docs">{children}</div>;
+  return (
+    <div data-layout="docs" style={{ minHeight: '100vh', margin: -8 }}>
+      <header
+        style={{
+          boxSizing: 'border-box',
+          width: '100%',
+          padding: '16px 24px',
+          background: '#FFCE1B',
+          color: '#ffffff',
+          fontWeight: 700,
+          textAlign: 'center',
+        }}
+      >
+        Docs
+      </header>
+      <main style={{ padding: 16 }}>{children}</main>
+    </div>
+  );
 }
diff --git a/playground/named-layouts/pages/layout.tsx b/playground/named-layouts/pages/layout.tsx
index dca16dd6e..b177d5452 100644
--- a/playground/named-layouts/pages/layout.tsx
+++ b/playground/named-layouts/pages/layout.tsx
@@ -1,3 +1,20 @@
 export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return <div data-layout="root">{children}</div>;
+  return (
+    <div data-layout="root" style={{ minHeight: '100vh', margin: -8 }}>
+      <header
+        style={{
+          boxSizing: 'border-box',
+          width: '100%',
+          padding: '16px 24px',
+          background: '#dc2626',
+          color: '#ffffff',
+          fontWeight: 700,
+          textAlign: 'center',
+        }}
+      >
+        Layout
+      </header>
+      <main style={{ padding: 16 }}>{children}</main>
+    </div>
+  );
 }