diff --git a/astro.config.mjs b/astro.config.mjs
index 48502240b77..c9c80cdeaf3 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -178,6 +178,7 @@ export default defineConfig({
       components: {
         Footer: "./src/components/Footer.astro",
         Head: "./src/components/Head.astro",
+        PageTitle: "./src/components/PageTitle.astro",
         SiteTitle: "./src/components/SiteTitle.astro",
         SocialIcons: "./src/components/SocialIcons.astro",
       },
diff --git a/src/components/FeatureGrid.astro b/src/components/FeatureGrid.astro
deleted file mode 100644
index cdb7871877a..00000000000
--- a/src/components/FeatureGrid.astro
+++ /dev/null
@@ -1,43 +0,0 @@
----
-/**
- * FeatureGrid Component
- * Creates a grid of feature cards with icons, titles, and descriptions.
- *
- * Usage in MDX:
- * <FeatureGrid items={[
- *   { icon: "code", title: "No Coding Required", description: "Simple YAML configuration" },
- *   { icon: "wifi", title: "Wireless Updates", description: "OTA updates" },
- * ]} />
- */
-
-interface FeatureItem {
-  icon: string;
-  title: string;
-  description: string;
-}
-
-interface Props {
-  items: FeatureItem[];
-}
-
-const { items } = Astro.props;
-
-// Map icon names to SVG paths in public/images/icons
-function getIconPath(icon: string): string {
-  return `/images/icons/${icon}.svg`;
-}
----
-
-<div class="feature-grid">
-  {
-    items.map((item) => (
-      <div class="feature-card">
-        <div class="feature-icon">
-          <img src={getIconPath(item.icon)} alt="" loading="lazy" />
-        </div>
-        <div class="feature-text">{item.title}</div>
-        <p set:html={item.description} />
-      </div>
-    ))
-  }
-</div>
diff --git a/src/components/GettingStartedGrid.astro b/src/components/GettingStartedGrid.astro
deleted file mode 100644
index 4da33af9eba..00000000000
--- a/src/components/GettingStartedGrid.astro
+++ /dev/null
@@ -1,62 +0,0 @@
----
-/**
- * GettingStartedGrid Component
- * Creates a grid of getting started cards with icons, descriptions, and action buttons.
- *
- * Usage in MDX:
- * <GettingStartedGrid items={[
- *   {
- *     icon: "home-assistant",
- *     title: "From Home Assistant",
- *     description: "The easiest way to get started",
- *     url: "/guides/getting_started_hassio/",
- *     button_text: "Home Assistant Guide"
- *   },
- * ]} />
- */
-
-interface GettingStartedItem {
-  icon: string;
-  title: string;
-  description: string;
-  url?: string;
-  button_text?: string;
-  steps?: string[];
-}
-
-interface Props {
-  items: GettingStartedItem[];
-}
-
-const { items } = Astro.props;
-
-function getIconPath(icon: string): string {
-  return `/images/icons/${icon}.svg`;
-}
----
-
-<div class="getting-started-grid">
-  {
-    items.map((item) => (
-      <div class="feature-card">
-        <div class="feature-icon">
-          <img src={getIconPath(item.icon)} alt="" loading="lazy" />
-        </div>
-        <div class="getting-started-heading">{item.title}</div>
-        <p>{item.description}</p>
-        {item.steps && item.steps.length > 0 && (
-          <ol>
-            {item.steps.map((step) => (
-              <li set:html={step} />
-            ))}
-          </ol>
-        )}
-        {item.url && (
-          <a href={item.url} class="btn btn-primary">
-            {item.button_text}
-          </a>
-        )}
-      </div>
-    ))
-  }
-</div>
diff --git a/src/components/PageTitle.astro b/src/components/PageTitle.astro
new file mode 100644
index 00000000000..7b7553ae0f0
--- /dev/null
+++ b/src/components/PageTitle.astro
@@ -0,0 +1,13 @@
+---
+/**
+ * PageTitle override
+ *
+ * The homepage renders its own <h1> inside its custom Hero markup, so Starlight's default
+ * page title (the h1#_top normally shown above the content) is suppressed there.
+ */
+import Default from "@astrojs/starlight/components/PageTitle.astro";
+
+const isHomepage = Astro.url.pathname === "/";
+---
+
+{!isHomepage && <Default {...Astro.props} />}
diff --git a/src/content/docs/images/hero-placeholder.jpg b/src/content/docs/images/hero-placeholder.jpg
new file mode 100644
index 00000000000..d97b522eb1a
Binary files /dev/null and b/src/content/docs/images/hero-placeholder.jpg differ
diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx
deleted file mode 100644
index e4964ee85ad..00000000000
--- a/src/content/docs/index.mdx
+++ /dev/null
@@ -1,75 +0,0 @@
----
-description: "Smart Home Made Simple. ESPHome turns ESP32, ESP8266, and RP2040 microcontrollers into fully-featured smart home devices."
-title: "ESPHome"
-head:
-  - tag: title
-    content: "ESPHome - Smart Home Made Simple"
-template: splash
-hero:
-  tagline: Turn your ESP32, ESP8266, BK72xx, RP2040, and other supported boards into powerful smart home devices with simple YAML configuration.
-  image:
-    html: <img src="/images/hero.png" alt="ESPHome dashboard showing connected devices" loading="eager" decoding="async" />
-  actions:
-    - text: Installation Guide
-      link: /guides/getting_started_hassio/
-      icon: right-arrow
-    - text: Browse Components
-      link: /components/
-      variant: minimal
-    - text: Device List
-      link: https://devices.esphome.io/
-      variant: minimal
----
-
-<div class="feature-grid not-content">
-  <div class="feature-card">
-    <div class="feature-text">No Coding Required</div>
-    <p>Simple YAML configuration files instead of complex C++ code.</p>
-  </div>
-  <div class="feature-card">
-    <div class="feature-text">Wireless Updates</div>
-    <p>Update your devices over-the-air without physical access.</p>
-  </div>
-  <div class="feature-card">
-    <div class="feature-text">Modular Design</div>
-    <p>Support for hundreds of sensors, displays, and other components.</p>
-  </div>
-  <div class="feature-card">
-    <div class="feature-text">Local Control</div>
-    <p>Devices work locally without cloud dependencies.</p>
-  </div>
-</div>
-
-## Who Uses ESPHome?
-
-- **DIY Enthusiasts** - Create custom sensors, switches, and displays tailored to specific needs
-- **Smart Home Hobbyists** - Extend their home automation systems with affordable custom devices
-- **Professional Integrators** - Deploy reliable, locally-controlled smart devices for clients
-- **Manufacturers** - Create [Made for ESPHome](/guides/made_for_esphome/) certified products with standardized firmware
-
-## Which microcontrollers does ESPHome support?
-
-- **Espressif ESP32 and ESP8266** - Wide support for ESP32 and ESP8266 microcontrollers, the heart of many IoT projects.
-- **RP2040** - Support for Raspberry Pi's RP2040 microcontroller.
-- **Others** - Nordic Semiconductor nRF52, Realtek RTL87xx, and Beken BK72xx chips are supported.
-- **Desktop** - Many ESPHome components can be run on a desktop computer using the *host* platform!
-
-## Getting Started
-
-<div class="getting-started-grid not-content">
-  <div class="feature-card">
-    <div class="getting-started-heading">From Home Assistant</div>
-    <p>The easiest way to get started with ESPHome is through the Home Assistant app.</p>
-    <a href="/guides/getting_started_hassio/" class="btn btn-primary">Home Assistant Guide</a>
-  </div>
-  <div class="feature-card">
-    <div class="getting-started-heading">Command Line</div>
-    <p>For advanced users who prefer working with the command line.</p>
-    <a href="/guides/getting_started_command_line/" class="btn btn-primary">Command Line Guide</a>
-  </div>
-  <div class="feature-card">
-    <div class="getting-started-heading">Ready-Made Projects</div>
-    <p>Start with a pre-configured project for common use cases.</p>
-    <a href="/projects/" class="btn btn-primary">Browse Projects</a>
-  </div>
-</div>
diff --git a/src/headerNav.ts b/src/headerNav.ts
index 642f3292324..e759a0303b5 100644
--- a/src/headerNav.ts
+++ b/src/headerNav.ts
@@ -5,4 +5,9 @@ export interface HeaderNavItem {
 
 // Header navigation items rendered to the left of the social icons.
 // Add or reorder entries here to change the header nav.
-export const headerNavItems: HeaderNavItem[] = [{ label: "Blog", href: "/blog/" }];
+export const headerNavItems: HeaderNavItem[] = [
+  { label: "Components", href: "/components/" },
+  { label: "Device List", href: "https://devices.esphome.io/" },
+  { label: "Docs", href: "/guides/getting_started_hassio/" },
+  { label: "Blog", href: "/blog/" },
+];
diff --git a/src/pages/index.astro b/src/pages/index.astro
new file mode 100644
index 00000000000..8fd38e5c4d8
--- /dev/null
+++ b/src/pages/index.astro
@@ -0,0 +1,51 @@
+---
+import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
+---
+
+<StarlightPage
+  frontmatter={{
+    title: "ESPHome",
+    description: "Smart Home Made Simple.",
+    template: "splash",
+    head: [{ tag: "title", content: "ESPHome - Smart Home Made Simple" }],
+  }}
+  hasSidebar={false}
+>
+  <div class="custom-hero">
+    <p>HERO</p>
+  </div>
+</StarlightPage>
+
+<style>
+  html:not([data-has-sidebar]) {
+    --sl-content-width: 100%;
+  }
+
+  :global(.content-panel) {
+    padding: 0;
+    border: none;
+  }
+
+  :global(footer) {
+    --sl-content-width: 75rem;
+
+    width: 100%;
+    max-width: var(--sl-content-width);
+    margin: 0 auto;
+    padding: 0 var(--sl-content-pad-x);
+  }
+
+  .custom-hero {
+    text-align: center;
+    padding: 4rem 1rem;
+  }
+  .cta-button {
+    display: inline-block;
+    background: var(--sl-color-accent);
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    text-decoration: none;
+    margin-top: 1rem;
+  }
+</style>
diff --git a/src/styles/custom.css b/src/styles/custom.css
index 2c23eea3145..1b069434c58 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -82,72 +82,6 @@ dialog::backdrop {
   filter: invert(1) hue-rotate(180deg);
 }
 
-/* Feature grid styles */
-.feature-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1.5rem;
-  margin: 2rem 0;
-}
-
-.feature-card {
-  padding: 1.5rem;
-  border-radius: 8px;
-  background-color: var(--sl-color-gray-6);
-}
-
-.feature-icon {
-  width: 48px;
-  height: 48px;
-  margin-bottom: 1rem;
-}
-
-.feature-icon svg {
-  width: 100%;
-  height: 100%;
-  fill: currentColor;
-}
-
-.feature-text {
-  font-weight: 600;
-  font-size: 1.1rem;
-  margin-bottom: 0.5rem;
-}
-
-/* Getting started grid */
-.getting-started-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1.5rem;
-  margin: 2rem 0;
-}
-
-.getting-started-heading {
-  font-weight: 600;
-  font-size: 1.2rem;
-  margin-bottom: 0.75rem;
-}
-
-/* Button styles */
-.btn {
-  display: inline-block;
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  text-decoration: none;
-  font-weight: 500;
-  margin-top: 1rem;
-}
-
-.btn-primary {
-  background-color: var(--sl-color-accent);
-  color: #fff;
-}
-
-.btn-primary:hover {
-  background-color: var(--sl-color-accent-high);
-  color: #fff;
-}
-
 /* Sidebar nav item spacing */
 .sidebar-content ul li summary {
   padding-block: 0.5em;
@@ -327,18 +261,6 @@ article.preview {
   background: repeating-conic-gradient(#999 0% 25%, transparent 10% 50%) 50% / 10px 10px;
 }
 
-/* Better hero image */
-html[data-has-hero] .hero img {
-  width: auto;
-  max-width: 100%;
-}
-
-@media (min-width: 800px) {
-  html[data-has-hero] .hero {
-    grid-template-columns: 5fr 4fr;
-  }
-}
-
 /* ---------- 404 page ---------- */
 
 .error-404 {