diff --git a/.changeset/loud-glasses-shake.md b/.changeset/loud-glasses-shake.md
new file mode 100644
index 00000000000..e6d4f666afd
--- /dev/null
+++ b/.changeset/loud-glasses-shake.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fixes missing draft content warning in dev on pages using the hero layout
diff --git a/packages/starlight/components/ContentNotice.astro b/packages/starlight/components/ContentNotice.astro
index da226887f6f..bb3aa22ca68 100644
--- a/packages/starlight/components/ContentNotice.astro
+++ b/packages/starlight/components/ContentNotice.astro
@@ -28,6 +28,7 @@ const { icon, label } = Astro.props;
 			gap: 0.75em;
 			font-size: var(--sl-text-body-sm);
 			line-height: var(--sl-line-height-headings);
+			text-align: start;
 		}
 	}
 </style>
diff --git a/packages/starlight/components/Hero.astro b/packages/starlight/components/Hero.astro
index e537a592777..b7cd313d293 100644
--- a/packages/starlight/components/Hero.astro
+++ b/packages/starlight/components/Hero.astro
@@ -1,5 +1,6 @@
 ---
 import { Image } from 'astro:assets';
+import DraftContentNotice from 'virtual:starlight/components/DraftContentNotice';
 import { PAGE_TITLE_ID } from '../constants';
 import LinkButton from '../user-components/LinkButton.astro';
 
@@ -44,6 +45,7 @@ if (image) {
 	<div class="sl-flex stack">
 		<div class="sl-flex copy">
 			<h1 id={PAGE_TITLE_ID} data-page-title set:html={title} />
+			{data.draft && <DraftContentNotice />}
 			{tagline && <div class="tagline" set:html={tagline} />}
 		</div>
 		{
@@ -67,6 +69,7 @@ if (image) {
 	@layer starlight.core {
 		.hero {
 			display: grid;
+			grid-template-columns: 100%;
 			align-items: center;
 			gap: 1rem;
 			padding-bottom: 1rem;