diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 5023b3cdc328d9..2e6d1ae6848838 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -4,27 +4,7 @@ export default defineConfig({
   title: 'Vite',
   description: 'Next Generation Frontend Tooling',
 
-  head: [
-    ['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }],
-
-    // TODO: This is neeeded to get smooth dark mode appearance on initial
-    // load. And this will be gone when VitePress figures out how to handle
-    // this in core.
-    [
-      'script',
-      {},
-      `
-        ;(() => {
-          const saved = localStorage.getItem('vitepress-theme-appearance')
-          const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-
-          if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
-            document.documentElement.classList.add('dark')
-          }
-        })()
-      `
-    ]
-  ],
+  head: [['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }]],
 
   vue: {
     reactivityTransform: true
@@ -40,6 +20,12 @@ export default defineConfig({
       text: 'Suggest changes to this page'
     },
 
+    socialLinks: [
+      { icon: 'twitter', link: 'https://twitter.com/vite_js' },
+      { icon: 'discord', link: 'https://chat.vitejs.dev' },
+      { icon: 'github', link: 'https://github.com/vitejs/vite' }
+    ],
+
     algolia: {
       apiKey: 'b573aa848fd57fb47d693b531297403c',
       indexName: 'vitejs',
@@ -61,6 +47,11 @@ export default defineConfig({
       ]
     },
 
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2019-present Evan You & Vite Contributors'
+    },
+
     nav: [
       { text: 'Guide', link: '/guide/' },
       { text: 'Config', link: '/config/' },
@@ -106,7 +97,7 @@ export default defineConfig({
     ],
 
     sidebar: {
-      '/': [
+      '/guide/': [
         {
           text: 'Guide',
           items: [
diff --git a/docs/.vitepress/theme/SponsorsGroup.vue b/docs/.vitepress/theme/SponsorsGroup.vue
deleted file mode 100644
index 691f5f5b0f1dc2..00000000000000
--- a/docs/.vitepress/theme/SponsorsGroup.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<script lang="ts">
-// shared data across instances so we load only once
-let data = $ref<SponsorData>()
-
-const base = `https://sponsors.vuejs.org`
-const dataUrl = `${base}/vite.json`
-</script>
-
-<script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
-
-interface Sponsor {
-  url: string
-  img: string
-  name: string
-}
-
-interface SponsorData {
-  special: Sponsor[]
-  platinum: Sponsor[]
-  platinum_china: Sponsor[]
-  gold: Sponsor[]
-  silver: Sponsor[]
-  bronze: Sponsor[]
-}
-
-const { tier, placement = 'aside' } = defineProps<{
-  tier: keyof SponsorData
-  placement?: 'aside' | 'page' | 'landing'
-}>()
-
-let container = $ref<HTMLElement>()
-let visible = $ref(false)
-
-onMounted(async () => {
-  // only render when entering view
-  const observer = new IntersectionObserver(
-    (entries) => {
-      if (entries[0].isIntersecting) {
-        visible = true
-        observer.disconnect()
-      }
-    },
-    { rootMargin: '0px 0px 300px 0px' }
-  )
-  observer.observe(container)
-  onUnmounted(() => observer.disconnect())
-
-  // load data
-  if (!data) {
-    data = await (await fetch(dataUrl)).json()
-  }
-})
-</script>
-
-<template>
-  <div
-    ref="container"
-    class="sponsor-container"
-    :class="[tier.startsWith('plat') ? 'platinum' : tier, placement]"
-  >
-    <template v-if="data && visible">
-      <a
-        v-for="{ url, img, name } of data[tier]"
-        class="sponsor-item"
-        :href="url"
-        target="_blank"
-        rel="sponsored noopener"
-      >
-        <picture v-if="img.endsWith('png')">
-          <source
-            type="image/avif"
-            :srcset="`${base}/images/${img.replace(/\.png$/, '.avif')}`"
-          />
-          <img :src="`${base}/images/${img}`" :alt="name" />
-        </picture>
-        <img v-else :src="`${base}/images/${img}`" :alt="name" />
-      </a>
-    </template>
-  </div>
-</template>
-
-<style scoped>
-.sponsor-container {
-  --max-width: 100%;
-  display: flex;
-  justify-content: space-evenly;
-  flex-wrap: wrap;
-}
-
-.sponsor-container.platinum {
-  --max-width: 260px;
-}
-.sponsor-container.gold {
-  --max-width: 160px;
-}
-.sponsor-container.silver {
-  --max-width: 140px;
-}
-
-.sponsor-item {
-  margin: 2px 0;
-  display: flex;
-  align-items: center;
-  border-radius: 2px;
-  transition: background-color 0.2s ease;
-  height: calc(var(--max-width) / 2 - 6px);
-}
-.sponsor-item.action {
-  font-size: 11px;
-  color: #999;
-}
-.sponsor-item img {
-  width: 100%;
-  max-width: calc(var(--max-width) - 30px);
-  max-height: calc(var(--max-width) / 2 - 20px);
-  margin: 10px 20px;
-}
-.special .sponsor-item {
-  height: 160px;
-}
-.special .sponsor-item img {
-  max-width: 300px;
-  max-height: 150px;
-}
-
-/* aside mode (on content pages) */
-.sponsor-container.platinum.aside {
-  --max-width: 200px;
-}
-.sponsor-container.gold.aside {
-  --max-width: 124px;
-}
-.aside .sponsor-item {
-  margin: 0;
-}
-</style>
diff --git a/docs/.vitepress/theme/SponsorsSidebar.vue b/docs/.vitepress/theme/SponsorsSidebar.vue
deleted file mode 100644
index bb27c8b5ee157d..00000000000000
--- a/docs/.vitepress/theme/SponsorsSidebar.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import SponsorsGroup from './SponsorsGroup.vue'
-import { useData } from 'vitepress'
-const { frontmatter } = useData()
-</script>
-
-<template>
-  <div v-if="frontmatter.sponsors !== false">
-    <a
-      class="sponsors-aside-text"
-      href="https://github.com/sponsors/yyx990803"
-      target="_blank"
-      >Sponsors</a
-    >
-    <SponsorsGroup tier="platinum" />
-    <SponsorsGroup tier="gold" />
-  </div>
-</template>
-
-<style>
-a.sponsors-aside-text {
-  color: #999;
-  display: block;
-  margin: 3em 0 1em;
-  font-weight: 700;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.4px;
-  padding-left: 2em;
-}
-</style>
diff --git a/docs/.vitepress/theme/components/HomeSponsors.vue b/docs/.vitepress/theme/components/HomeSponsors.vue
new file mode 100644
index 00000000000000..5eec6e1d8cd5cb
--- /dev/null
+++ b/docs/.vitepress/theme/components/HomeSponsors.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { VPHomeSponsors } from 'vitepress/theme'
+import { useSponsor } from '../composables/sponsor'
+
+const { data } = useSponsor()
+</script>
+
+<template>
+  <VPHomeSponsors
+    v-if="data"
+    message="Vite is free and open source, made possible by wonderful sponsors."
+    action-link="https://github.com/sponsors/yyx990803"
+    :data="data"
+  />
+</template>
diff --git a/docs/.vitepress/theme/composables/sponsor.ts b/docs/.vitepress/theme/composables/sponsor.ts
new file mode 100644
index 00000000000000..b6a98ce18622bb
--- /dev/null
+++ b/docs/.vitepress/theme/composables/sponsor.ts
@@ -0,0 +1,61 @@
+import { ref, onMounted } from 'vue'
+
+interface Sponsors {
+  special: Sponsor[]
+  platinum: Sponsor[]
+  platinum_china: Sponsor[]
+  gold: Sponsor[]
+  silver: Sponsor[]
+  bronze: Sponsor[]
+}
+
+interface Sponsor {
+  name: string
+  img: string
+  url: string
+}
+
+// shared data across instances so we load only once.
+const data = ref()
+
+const dataHost = 'https://sponsors.vuejs.org'
+const dataUrl = `${dataHost}/vite.json`
+
+export function useSponsor() {
+  onMounted(async () => {
+    if (data.value) {
+      return
+    }
+
+    const result = await fetch(dataUrl)
+    const json = await result.json()
+
+    data.value = mapSponsors(json)
+  })
+
+  return {
+    data
+  }
+}
+
+function mapSponsors(sponsors: Sponsors) {
+  return [
+    {
+      tier: 'Platinum Sponsor',
+      size: 'big',
+      items: mapImgPath(sponsors['platinum'])
+    },
+    {
+      tier: 'Gold Sponsors',
+      size: 'medium',
+      items: mapImgPath(sponsors['gold'])
+    }
+  ]
+}
+
+function mapImgPath(sponsors: Sponsor[]) {
+  return sponsors.map((sponsor) => ({
+    ...sponsor,
+    img: `${dataHost}/images/${sponsor.img}`
+  }))
+}
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 4c75157f96c18e..ec9259a0ee08a5 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,15 +1,14 @@
 import { h } from 'vue'
 import Theme from 'vitepress/theme'
-import SponsorsSidebar from './SponsorsSidebar.vue'
 import './styles/vars.css'
 import './styles/custom.css'
+import HomeSponsors from './components/HomeSponsors.vue'
 
 export default {
   ...Theme,
   Layout() {
     return h(Theme.Layout, null, {
-      'sidebar-bottom': () =>
-        h('div', { class: 'sponsors sidebar' }, [h(SponsorsSidebar)])
+      'home-features-after': () => h(HomeSponsors)
     })
   }
 }
diff --git a/docs/.vitepress/theme/styles/custom.css b/docs/.vitepress/theme/styles/custom.css
index 2678c12e6b4283..69671d732acc5c 100644
--- a/docs/.vitepress/theme/styles/custom.css
+++ b/docs/.vitepress/theme/styles/custom.css
@@ -1,35 +1,15 @@
-.home-hero .image {
-  width: 200px;
-  height: 200px;
-}
-
-.nav-bar .logo {
-  height: 30px;
-  margin-right: 2px;
-}
-
-.content img {
-  border-radius: 10px;
-}
-
-.nav-dropdown-link-item .icon {
-  display: none;
-}
-
-.custom-block.tip {
-  border-color: var(--vp-c-brand-light);
-}
-
-.DocSearch {
-  --docsearch-primary-color: var(--vp-c-brand) !important;
-}
+@media (min-width: 640px) {
+  .VPHero .text {
+    max-width: 592px;
+  }
 
-#play-vite-audio {
-  padding: 0;
-  margin-left: 5px;
-  display: inline-flex;
+  .VPHero .tagline {
+    max-width: 440px;
+  }
 }
 
-#play-vite-audio img {
-  opacity: 0.8;
+@media (min-width: 960px) {
+  .VPHero .tagline {
+    max-width: 480px;
+  }
 }
diff --git a/docs/.vitepress/theme/styles/vars.css b/docs/.vitepress/theme/styles/vars.css
index 1d2dc2b93d8a96..11e06d0c2ae061 100644
--- a/docs/.vitepress/theme/styles/vars.css
+++ b/docs/.vitepress/theme/styles/vars.css
@@ -1,5 +1,48 @@
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
 :root {
   --vp-c-brand: #646cff;
   --vp-c-brand-light: #747bff;
+  --vp-c-brand-lighter: #9499ff;
   --vp-c-brand-dark: #535bf2;
+  --vp-c-brand-darker: #454ce1;
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: var(--vp-c-brand-light);
+  --vp-button-brand-text: var(--vp-c-text-dark-1);
+  --vp-button-brand-bg: var(--vp-c-brand);
+  --vp-button-brand-hover-border: var(--vp-c-brand-light);
+  --vp-button-brand-hover-text: var(--vp-c-text-dark-1);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
+  --vp-button-brand-active-border: var(--vp-c-brand-light);
+  --vp-button-brand-active-text: var(--vp-c-text-dark-1);
+  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #bd34fe 30%,
+    #41d1ff
+  );
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand) !important;
 }
diff --git a/docs/index.md b/docs/index.md
index f1e950b19e8582..05a85262022650 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,40 +1,38 @@
 ---
-home: true
-heroImage: /logo.svg
-actionText: Get Started
-actionLink: /guide/
-
-altActionText: Learn More
-altActionLink: /guide/why
+layout: home
+
+hero:
+  name: Vite
+  text: Next Generation Frontend Tooling
+  tagline: Get ready for a development environment that can finally catch up with you.
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /guide/why
+    - theme: alt
+      text: Why Vite?
+      link: /guide/
+    - theme: alt
+      text: View on GitHub
+      link: https://github.com/vitejs/vite
 
 features:
-  - title: 💡 Instant Server Start
+  - icon: 💡
+    title: Instant Server Start
     details: On demand file serving over native ESM, no bundling required!
-  - title: ⚡️ Lightning Fast HMR
+  - icon: ⚡️
+    title: Lightning Fast HMR
     details: Hot Module Replacement (HMR) that stays fast regardless of app size.
-  - title: 🛠️ Rich Features
+  - icon: 🛠️
+    title: Rich Features
     details: Out-of-the-box support for TypeScript, JSX, CSS and more.
-  - title: 📦 Optimized Build
+  - icon: 📦
+    title: Optimized Build
     details: Pre-configured Rollup build with multi-page and library mode support.
-  - title: 🔩 Universal Plugins
+  - icon: 🔩
+    title: Universal Plugins
     details: Rollup-superset plugin interface shared between dev and build.
-  - title: 🔑 Fully Typed APIs
+  - icon: 🔑
+    title: Fully Typed APIs
     details: Flexible programmatic APIs with full TypeScript typing.
-footer: MIT Licensed | Copyright © 2019-present Evan You & Vite Contributors
 ---
-
-> TODO: Home Page feature is not ready in VitePress Next just yet! So this page looks broken for now.
-
-<script setup>
-import SponsorsGroup from './.vitepress/theme/SponsorsGroup.vue'
-</script>
-
-<h3 style="text-align:center;color:#999">Sponsors</h3>
-
-<SponsorsGroup tier="platinum" placement="landing" />
-
-<SponsorsGroup tier="gold" placement="landing" />
-
-<p style="text-align:center;margin-bottom:3em">
-  <a style="color: #999;font-size:.9em;" href="https://github.com/sponsors/yyx990803" target="_blank" rel="noopener">Become a sponsor on GitHub</a>
-</p>
diff --git a/package.json b/package.json
index ab04bb5940c95b..b6169ae96647b1 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
     "typescript": "^4.6.4",
     "unbuild": "^0.7.4",
     "vite": "workspace:*",
-    "vitepress": "1.0.0-draft.1",
+    "vitepress": "1.0.0-draft.3",
     "vitest": "^0.12.4",
     "vue": "^3.2.33"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b4f5275c59186b..233ac8f55efc12 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,7 +62,7 @@ importers:
       typescript: ^4.6.4
       unbuild: ^0.7.4
       vite: workspace:*
-      vitepress: 1.0.0-draft.1
+      vitepress: 1.0.0-draft.3
       vitest: ^0.12.4
       vue: ^3.2.33
     devDependencies:
@@ -118,7 +118,7 @@ importers:
       typescript: 4.6.4
       unbuild: 0.7.4
       vite: link:packages/vite
-      vitepress: 1.0.0-draft.1
+      vitepress: 1.0.0-draft.3
       vitest: 0.12.4
       vue: 3.2.33
 
@@ -4508,7 +4508,7 @@ packages:
     engines: {node: '>= 10.17.0'}
     hasBin: true
     dependencies:
-      debug: 4.3.3
+      debug: 4.3.4
       get-stream: 5.2.0
       yauzl: 2.10.0
     optionalDependencies:
@@ -5025,7 +5025,7 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.3
+      debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -7500,7 +7500,7 @@ packages:
     engines: {node: '>= 10'}
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.3
+      debug: 4.3.4
       socks: 2.6.2
     transitivePeerDependencies:
       - supports-color
@@ -8393,8 +8393,8 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /vitepress/1.0.0-draft.1:
-    resolution: {integrity: sha512-9tNpUu0dwd5w5DNCBlgsmw4HlEl55o8jdOk/tQIxQ2j//0UkEAPT32TL5KRuro1Bp5OM6njZ37s8Y8g26MnooQ==}
+  /vitepress/1.0.0-draft.3:
+    resolution: {integrity: sha512-DTbej4xFhfYQ0/RPjORibMXu8DC5QY0L9UjsmT6+Bes6pNULNx0k6rCRZnvv/obJD8ClEaY/CkZ7vzBK+lt+zQ==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies: