diff --git a/src/.vitepress/theme/components/NewsLetter.vue b/src/.vitepress/theme/components/NewsLetter.vue
index 43de4c2f6e..f9561e49d6 100644
--- a/src/.vitepress/theme/components/NewsLetter.vue
+++ b/src/.vitepress/theme/components/NewsLetter.vue
@@ -54,7 +54,7 @@ import { VTLink } from '@vue/theme'
 
 <style scoped>
 .NewsLetter {
-  border-top: 1px solid transparent;
+  border-top: 1px solid var(--vt-c-divider-light);
   border-bottom: 1px solid var(--vt-c-divider-light);
   padding: 32px 24px;
   background: var(--vt-c-bg-soft);
diff --git a/src/.vitepress/theme/components/SponsorBoard.vue b/src/.vitepress/theme/components/SponsorBoard.vue
new file mode 100644
index 0000000000..4705fcdcf1
--- /dev/null
+++ b/src/.vitepress/theme/components/SponsorBoard.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { Sponsor } from '../data/Sponsor'
+
+defineProps<{
+  sponsors: Sponsor[]
+}>()
+</script>
+
+<template>
+  <div class="SponsorBoard">
+    <div v-for="sponsor in sponsors" :key="sponsor.name" class="item">
+      <a class="link" :href="http://github.com/sponsor.url" target="_blank">
+        <img class="image" :src="http://github.com/%60/images/sponsors/$%7Bsponsor.img%7D%60" :alt="sponsor.name">
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>
diff --git a/src/.vitepress/theme/components/SponsorSection.vue b/src/.vitepress/theme/components/SponsorSection.vue
new file mode 100644
index 0000000000..c669a563f8
--- /dev/null
+++ b/src/.vitepress/theme/components/SponsorSection.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import sponsors from '../data/sponsors.json'
+import SponsorSectionHero from './SponsorSectionHero.vue'
+import SponsorBoard from './SponsorBoard.vue'
+</script>
+
+<template>
+  <section class="SponsorSection" id="sponsors">
+    <SponsorSectionHero>
+      <template #lead>
+        Sponsors
+      </template>
+      <template #title>
+        Trusted and loved by progressive companies all over the world.
+      </template>
+    </SponsorSectionHero>
+
+    <section class="section">
+      <SponsorBoard :sponsors="sponsors.platinum" />
+    </section>
+  </section>
+</template>
+
+<style scoped>
+.SponsorSection {
+  margin: 0;
+  border-top: 1px solid transparent;
+  padding: 64px 0;
+  background-color: var(--vt-c-bg-soft);
+  transition: background-color 0.5s;
+}
+
+.dark .SponsorSection {
+  border-top-color: var(--vt-c-divider-light);
+  background-color: var(--vt-c-bg);
+}
+</style>
diff --git a/src/.vitepress/theme/components/SponsorSectionHero.vue b/src/.vitepress/theme/components/SponsorSectionHero.vue
new file mode 100644
index 0000000000..a6083f7dfb
--- /dev/null
+++ b/src/.vitepress/theme/components/SponsorSectionHero.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="SponsorSectionHero">
+    <div class="container">
+      <p class="lead">
+        <slot name="lead" />
+      </p>
+
+      <div class="main">
+        <h2 class="title">
+          <slot name="title" />
+        </h2>
+
+        <div class="action">
+          <a class="action-link" href="http://github.com/sponsor/">
+            Become a Sponsor
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.SponsorSectionHero {
+  padding: 0 24px;
+}
+
+@media (min-width: 768px) {
+  .SponsorSectionHero {
+    padding: 0 32px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 960px;
+}
+
+@media (min-width: 640px) {
+  .main {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.lead {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--vt-c-brand);
+}
+
+.title {
+  padding-top: 4px;
+  max-width: 420px;
+  line-height: 28px;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.action {
+  padding-top: 16px;
+  transform: translateX(-4px);
+}
+
+@media (min-width: 640px) {
+  .action {
+    padding-top: 0;
+    transform: translateX(0);
+  }
+}
+
+.action-link {
+  display: inline-block;
+  border: 1px solid var(--vt-c-brand);
+  border-radius: 20px;
+  padding: 7px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vt-c-brand);
+  transition: border-color 0.25s, color 0.25s;
+}
+
+.action-link:hover {
+  border-color: var(--vt-c-brand-dark);
+  color: var(--vt-c-brand-dark);
+}
+</style>
diff --git a/src/.vitepress/theme/data/Sponsor.ts b/src/.vitepress/theme/data/Sponsor.ts
new file mode 100644
index 0000000000..2a13d3b1b0
--- /dev/null
+++ b/src/.vitepress/theme/data/Sponsor.ts
@@ -0,0 +1,5 @@
+export interface Sponsor {
+  url: string
+  img: string
+  name: string
+}
diff --git a/src/.vitepress/theme/data/sponsors.json b/src/.vitepress/theme/data/sponsors.json
new file mode 100644
index 0000000000..6766c0f32b
--- /dev/null
+++ b/src/.vitepress/theme/data/sponsors.json
@@ -0,0 +1,180 @@
+{
+  "platinum": [
+    {
+      "url": "https://vueschool.io/?utm_source=Vuejs.org&utm_medium=Banner&utm_campaign=Sponsored%20Banner&utm_content=V1",
+      "img": "vueschool.png",
+      "name": "VueSchool"
+    },
+    {
+      "url": "https://vehikl.com/",
+      "img": "vehikl.png",
+      "name": "Vehikl"
+    },
+    {
+      "url": "https://retool.com/?utm_source=sponsor&utm_campaign=vue",
+      "img": "retool.png",
+      "name": "Retool"
+    },
+    {
+      "url": "https://passionatepeople.io/",
+      "img": "passionate_people.png",
+      "name": "Passionate People"
+    },
+    {
+      "url": "https://www.storyblok.com/",
+      "img": "storyblok.svg",
+      "name": "Storyblok"
+    },
+    {
+      "url": "https://ionicframework.com/vue?utm_source=partner&utm_medium=referral&utm_campaign=vuesponsorship&utm_content=vuedocs",
+      "img": "ionic.png",
+      "name": "Ionic"
+    }
+  ],
+  "gold_sponsors": [
+    {
+      "url": "https://www.vuemastery.com/",
+      "img": "vuemastery.png",
+      "name": "VueMastery"
+    },
+    {
+      "url": "https://laravel.com/",
+      "img": "laravel.png",
+      "name": "Laravel"
+    },
+    {
+      "url": "https://htmlburger.com/",
+      "img": "html_burger.png",
+      "name": "HTML Burger"
+    },
+    {
+      "url": "https://www.frontenddeveloperlove.com/",
+      "img": "frontendlove.png",
+      "name": "FrontendLove"
+    },
+    {
+      "url": "https://onsen.io/vue/",
+      "img": "onsen_ui.png",
+      "name": "Onsen UI"
+    },
+    {
+      "url": "https://neds.com.au/",
+      "img": "neds.png",
+      "name": "Neds"
+    },
+    {
+      "url": "https://vuejobs.com/?ref=vuejs",
+      "img": "vuejobs.png",
+      "name": "VueJobs"
+    },
+    {
+      "url": "https://tidelift.com/subscription/npm/vue",
+      "img": "tidelift.png",
+      "name": "Tidelift"
+    },
+    {
+      "url": "https://www.firesticktricks.com/",
+      "img": "firestick_tricks.png",
+      "name": "Firestick Tricks"
+    },
+    {
+      "url": "https://intygrate.com/",
+      "img": "intygrate.png",
+      "name": "Intygrate"
+    },
+    {
+      "url": "http://en.shopware.com/",
+      "img": "shopware_ag.png",
+      "name": "shopware AG"
+    },
+    {
+      "url": "https://www.vpnranks.com/",
+      "img": "vpnranks.png",
+      "name": "VPNRanks"
+    },
+    {
+      "url": "https://www.bacancytechnology.com/",
+      "img": "bacancy_technology.png",
+      "name": "Bacancy Technology"
+    },
+    {
+      "url": "https://www.bestvpn.co/",
+      "img": "bestvpn_co.png",
+      "name": "BestVPN.co"
+    },
+    {
+      "url": "https://www.y8.com/",
+      "img": "y8.png",
+      "name": "Y8"
+    },
+    {
+      "url": "https://js.devexpress.com/",
+      "img": "devexpress.png",
+      "name": "DevExpress"
+    },
+    {
+      "url": "https://fastcoding.jp/javascript/",
+      "img": "fastcoding_inc.svg",
+      "name": "FASTCODING Inc"
+    },
+    {
+      "url": "https://usave.co.uk/utilities/broadband",
+      "img": "usave.png",
+      "name": "usave"
+    },
+    {
+      "url": "https://www.foo.software/",
+      "img": "foo.png",
+      "name": "Foo"
+    },
+    {
+      "url": "https://flatlogic.com/templates",
+      "img": "flatlogic_templates.svg",
+      "name": "Flatlogic Templates"
+    },
+    {
+      "url": "http://moovweb.com/",
+      "img": "moovweb.png",
+      "name": "Moovweb"
+    }
+  ],
+  "silver_sponsors": [
+    {
+      "url": "https://roadster.com/",
+      "img": "roadster.png",
+      "name": "Roadster"
+    },
+    {
+      "url": "https://www.inkoop.io/",
+      "img": "inkoop.png",
+      "name": "Inkoop"
+    },
+    {
+      "url": "https://www.thecasinodb.com/",
+      "img": "isolutions_uk_limited.png",
+      "name": "iSolutions UK Limited"
+    }
+  ],
+  "bronze_sponsors": [
+    {
+      "url": "https://www.accelebrate.com/",
+      "img": "accelebrate.png",
+      "name": "Accelebrate"
+    },
+    {
+      "url": "https://polyglotengineer.com/derek.pollard",
+      "img": "derek_pollard.png",
+      "name": "Derek Pollard"
+    },
+    {
+      "url": "https://www.earthlink.ro/",
+      "img": "earthlink.png",
+      "name": "Earthlink"
+    },
+    {
+      "url": "https://www.webucator.com/",
+      "img": "webucator.png",
+      "name": "Webucator"
+    }
+  ]
+}
diff --git a/src/index.md b/src/index.md
index eed7814bb1..822e9c7563 100644
--- a/src/index.md
+++ b/src/index.md
@@ -3,6 +3,7 @@ page: true
 ---
 
 <script setup>
+import SponsorSection from './.vitepress/theme/components/SponsorSection.vue'
 import NewsLetter from './.vitepress/theme/components/NewsLetter.vue'
 </script>
 
@@ -42,17 +43,15 @@ import NewsLetter from './.vitepress/theme/components/NewsLetter.vue'
   </div>
 </section>
 
-<section id="sponsors">
-  <!-- TODO -->
-</section>
+<SponsorSection />
 
-<section id="ways-to-use">
+<!-- <section id="ways-to-use"> -->
   <!-- TODO show toggleable example between CDN vs. SFC usage -->
-</section>
+<!-- </section> -->
 
-<section id="tooling">
+<!-- <section id="tooling"> -->
   <!-- TODO show tooling screenshots -->
-</section>
+<!-- </section> -->
 
 <NewsLetter />