diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 0e7ba37f..cdb9edbc 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,4 +1,4 @@
-import Theme from 'vitepress/theme'
+import Theme from 'vitepress/theme/v2'
 import 'virtual:group-icons.css'
 import './styles.css'
 
diff --git a/docs/.vitepress/theme/styles.css b/docs/.vitepress/theme/styles.css
index 2635e80d..9f8b4c78 100644
--- a/docs/.vitepress/theme/styles.css
+++ b/docs/.vitepress/theme/styles.css
@@ -1,3 +1,5 @@
+/* TODO: Check this file and update if needed. */
+
 :root:where(:lang(fa)) {
   --vp-font-family-base:
     'Vazirmatn', 'Inter', ui-sans-serif, system-ui, sans-serif,
diff --git a/package.json b/package.json
index 507c94fa..d39e174d 100644
--- a/package.json
+++ b/package.json
@@ -30,9 +30,17 @@
       "types": "./theme.d.ts",
       "default": "./dist/client/theme-default/index.js"
     },
+    "./theme/v2": {
+      "types": "./theme/v2.d.ts",
+      "default": "./dist/client/theme-default-v2/index.js"
+    },
     "./theme-without-fonts": {
       "types": "./theme-without-fonts.d.ts",
       "default": "./dist/client/theme-default/without-fonts.js"
+    },
+    "./theme-without-fonts/v2": {
+      "types": "./theme/v2.d.ts",
+      "default": "./dist/client/theme-default-v2/without-fonts.js"
     }
   },
   "main": "dist/node/index.js",
diff --git a/src/client/theme-default-v2/Layout.vue b/src/client/theme-default-v2/Layout.vue
new file mode 100644
index 00000000..2af45c66
--- /dev/null
+++ b/src/client/theme-default-v2/Layout.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, provide, useSlots } from 'vue'
+import VPBackdrop from './components/VPBackdrop.vue'
+import VPContent from './components/VPContent.vue'
+import VPFooter from './components/VPFooter.vue'
+import VPLocalNav from './components/VPLocalNav.vue'
+import VPNav from './components/VPNav.vue'
+import VPSidebar from './components/VPSidebar.vue'
+import VPSkipLink from './components/VPSkipLink.vue'
+import { useData } from './composables/data'
+import { layoutInfoInjectionKey, registerWatchers } from './composables/layout'
+import { useSidebarControl } from './composables/sidebar'
+
+const {
+  isOpen: isSidebarOpen,
+  open: openSidebar,
+  close: closeSidebar
+} = useSidebarControl()
+
+registerWatchers({ closeSidebar })
+
+const { frontmatter } = useData()
+
+const slots = useSlots()
+const heroImageSlotExists = computed(() => !!slots['home-hero-image'])
+
+// TODO: Check if we still need this.
+provide(layoutInfoInjectionKey, { heroImageSlotExists })
+</script>
+
+<template>
+  <div
+    v-if="frontmatter.layout !== false"
+    class="vp-layout"
+    :class="frontmatter.pageClass"
+  >
+    <slot name="layout-top" />
+    <VPSkipLink />
+    <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
+    <VPNav>
+      <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
+      <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
+      <template #nav-bar-content-before><slot name="nav-bar-content-before" /></template>
+      <template #nav-bar-content-after><slot name="nav-bar-content-after" /></template>
+      <template #nav-screen-content-before><slot name="nav-screen-content-before" /></template>
+      <template #nav-screen-content-after><slot name="nav-screen-content-after" /></template>
+    </VPNav>
+    <!-- <VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" /> -->
+
+    <!-- <VPSidebar :open="isSidebarOpen">
+      <template #sidebar-nav-before><slot name="sidebar-nav-before" /></template>
+      <template #sidebar-nav-after><slot name="sidebar-nav-after" /></template>
+    </VPSidebar> -->
+
+    <VPContent>
+      <template #page-top><slot name="page-top" /></template>
+      <template #page-bottom><slot name="page-bottom" /></template>
+
+      <template #not-found><slot name="not-found" /></template>
+      <template #home-hero-before><slot name="home-hero-before" /></template>
+      <template #home-hero-info-before><slot name="home-hero-info-before" /></template>
+      <template #home-hero-info><slot name="home-hero-info" /></template>
+      <template #home-hero-info-after><slot name="home-hero-info-after" /></template>
+      <template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
+      <template #home-hero-image><slot name="home-hero-image" /></template>
+      <template #home-hero-after><slot name="home-hero-after" /></template>
+      <template #home-features-before><slot name="home-features-before" /></template>
+      <template #home-features-after><slot name="home-features-after" /></template>
+
+      <template #doc-footer-before><slot name="doc-footer-before" /></template>
+      <template #doc-before><slot name="doc-before" /></template>
+      <template #doc-after><slot name="doc-after" /></template>
+      <template #doc-top><slot name="doc-top" /></template>
+      <template #doc-bottom><slot name="doc-bottom" /></template>
+
+      <template #aside-top><slot name="aside-top" /></template>
+      <template #aside-bottom><slot name="aside-bottom" /></template>
+      <template #aside-outline-before><slot name="aside-outline-before" /></template>
+      <template #aside-outline-after><slot name="aside-outline-after" /></template>
+      <template #aside-ads-before><slot name="aside-ads-before" /></template>
+      <template #aside-ads-after><slot name="aside-ads-after" /></template>
+    </VPContent>
+
+    <!-- <VPFooter /> -->
+    <slot name="layout-bottom" />
+  </div>
+  <Content v-else />
+</template>
+
+<style>
+.vp-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+</style>
diff --git a/src/client/theme-default-v2/NotFound.vue b/src/client/theme-default-v2/NotFound.vue
new file mode 100644
index 00000000..f65d3a6d
--- /dev/null
+++ b/src/client/theme-default-v2/NotFound.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { withBase } from 'vitepress'
+import { useData } from './composables/data'
+import { useLangs } from './composables/langs'
+
+const { theme } = useData()
+const { currentLang } = useLangs()
+</script>
+
+<template>
+  <div class="NotFound">
+    <p class="code">{{ theme.notFound?.code ?? '404' }}</p>
+    <h1 class="title">{{ theme.notFound?.title ?? 'PAGE NOT FOUND' }}</h1>
+    <div class="divider" />
+    <blockquote class="quote">
+      {{
+        theme.notFound?.quote ??
+        "But if you don't change your direction, and if you keep looking, you may end up where you are heading."
+      }}
+    </blockquote>
+
+    <div class="action">
+      <a
+        class="link"
+        :href="withBase(theme.notFound?.link ?? currentLang.link)"
+        :aria-label="theme.notFound?.linkLabel ?? 'go to home'"
+      >
+        {{ theme.notFound?.linkText ?? 'Take me home' }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.NotFound {
+  padding: 64px 24px 96px;
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .NotFound {
+    padding: 96px 32px 168px;
+  }
+}
+
+.code {
+  line-height: 64px;
+  font-size: 64px;
+  font-weight: 600;
+}
+
+.title {
+  padding-top: 12px;
+  letter-spacing: 2px;
+  line-height: 20px;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.divider {
+  margin: 24px auto 18px;
+  width: 64px;
+  height: 1px;
+  background-color: var(--vp-c-divider);
+}
+
+.quote {
+  margin: 0 auto;
+  max-width: 256px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.action {
+  padding-top: 20px;
+}
+
+.link {
+  display: inline-block;
+  border: 1px solid var(--vp-c-brand-1);
+  border-radius: 16px;
+  padding: 3px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+  transition:
+    border-color 0.25s,
+    color 0.25s;
+}
+
+.link:hover {
+  border-color: var(--vp-c-brand-2);
+  color: var(--vp-c-brand-2);
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPAlgoliaSearchBox.vue b/src/client/theme-default-v2/components/VPAlgoliaSearchBox.vue
new file mode 100644
index 00000000..02baf5b7
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPAlgoliaSearchBox.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import docsearch from '@docsearch/js'
+import { useRouter } from 'vitepress'
+import type { DefaultTheme } from 'vitepress/theme'
+import { nextTick, onMounted, watch } from 'vue'
+import { useData } from '../composables/data'
+
+const props = defineProps<{
+  algolia: DefaultTheme.AlgoliaSearchOptions
+}>()
+
+const router = useRouter()
+const { site, localeIndex, lang } = useData()
+
+onMounted(update)
+watch(localeIndex, update)
+
+async function update() {
+  await nextTick()
+  const options = {
+    ...props.algolia,
+    ...props.algolia.locales?.[localeIndex.value]
+  }
+  const rawFacetFilters = options.searchParameters?.facetFilters ?? []
+  const facetFilters = [
+    ...(Array.isArray(rawFacetFilters)
+      ? rawFacetFilters
+      : [rawFacetFilters]
+    ).filter((f) => !f.startsWith('lang:')),
+    `lang:${lang.value}`
+  ]
+
+  // Rebuild the askAi prop as an object:
+  // If the askAi prop is a string, treat it as the assistantId and use
+  // the default indexName, apiKey and appId from the main options.
+  // If the askAi prop is an object, spread its explicit values.
+  const askAiProp = options.askAi
+  const isAskAiString = typeof askAiProp === 'string'
+
+  const askAi = askAiProp
+    ? {
+        indexName: isAskAiString ? options.indexName : askAiProp.indexName,
+        apiKey: isAskAiString ? options.apiKey : askAiProp.apiKey,
+        appId: isAskAiString ? options.appId : askAiProp.appId,
+        assistantId: isAskAiString ? askAiProp : askAiProp.assistantId,
+        // Re-use the merged facetFilters from the search parameters so that
+        // Ask AI uses the same language filtering as the regular search.
+        searchParameters: facetFilters.length ? { facetFilters } : undefined
+      }
+    : undefined
+
+  initialize({
+    ...options,
+    searchParameters: {
+      ...options.searchParameters,
+      facetFilters
+    },
+    askAi
+  })
+}
+
+function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
+  const options = Object.assign({}, userOptions, {
+    container: '#docsearch',
+
+    navigator: {
+      navigate(item: { itemUrl: string }) {
+        router.go(item.itemUrl)
+      }
+    },
+
+    transformItems(items: { url: string }[]) {
+      return items.map((item) => {
+        return Object.assign({}, item, {
+          url: getRelativePath(item.url)
+        })
+      })
+    }
+  })
+
+  docsearch(options as any)
+}
+
+function getRelativePath(url: string) {
+  const { pathname, hash } = new URL(url, location.origin)
+  return pathname.replace(/\.html$/, site.value.cleanUrls ? '' : '.html') + hash
+}
+</script>
+
+<template>
+  <div id="docsearch" />
+</template>
diff --git a/src/client/theme-default-v2/components/VPBackdrop.vue b/src/client/theme-default-v2/components/VPBackdrop.vue
new file mode 100644
index 00000000..8b0757d4
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPBackdrop.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+defineProps<{
+  show: boolean
+}>()
+</script>
+
+<template>
+  <transition name="fade">
+    <div v-if="show" class="VPBackdrop" />
+  </transition>
+</template>
+
+<style scoped>
+.VPBackdrop {
+  position: fixed;
+  top: 0;
+  /*rtl:ignore*/
+  right: 0;
+  bottom: 0;
+  /*rtl:ignore*/
+  left: 0;
+  z-index: var(--vp-z-index-backdrop);
+  background: var(--vp-backdrop-bg-color);
+  transition: opacity 0.5s;
+}
+
+.VPBackdrop.fade-enter-from,
+.VPBackdrop.fade-leave-to {
+  opacity: 0;
+}
+
+.VPBackdrop.fade-leave-active {
+  transition-duration: .25s;
+}
+
+@media (min-width: 1280px) {
+  .VPBackdrop {
+    display: none;
+  }
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPBadge.vue b/src/client/theme-default-v2/components/VPBadge.vue
new file mode 100644
index 00000000..1d5c1678
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPBadge.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+interface Props {
+  text?: string
+  type?: 'info' | 'tip' | 'warning' | 'danger'
+}
+withDefaults(defineProps<Props>(), {
+  type: 'tip'
+})
+</script>
+
+<template>
+  <span class="VPBadge" :class="type">
+    <slot>{{ text }}</slot>
+  </span>
+</template>
+
+<style>
+.VPBadge {
+  display: inline-block;
+  margin-left: 2px;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  padding: 0 10px;
+  line-height: 22px;
+  font-size: 12px;
+  font-weight: 500;
+  transform: translateY(-2px);
+}
+
+.VPBadge.small {
+  padding: 0 6px;
+  line-height: 18px;
+  font-size: 10px;
+  transform: translateY(-8px);
+}
+
+.VPDocFooter .VPBadge {
+  display: none;
+}
+
+.vp-doc h1 > .VPBadge {
+  margin-top: 4px;
+  vertical-align: top;
+}
+
+.vp-doc h2 > .VPBadge {
+  margin-top: 3px;
+  padding: 0 8px;
+  vertical-align: top;
+}
+
+.vp-doc h3 > .VPBadge {
+  vertical-align: middle;
+}
+
+.vp-doc h4 > .VPBadge,
+.vp-doc h5 > .VPBadge,
+.vp-doc h6 > .VPBadge {
+  vertical-align: middle;
+  line-height: 18px;
+}
+
+.VPBadge.info {
+  border-color: var(--vp-badge-info-border);
+  color: var(--vp-badge-info-text);
+  background-color: var(--vp-badge-info-bg);
+}
+
+.VPBadge.tip {
+  border-color: var(--vp-badge-tip-border);
+  color: var(--vp-badge-tip-text);
+  background-color: var(--vp-badge-tip-bg);
+}
+
+.VPBadge.warning {
+  border-color: var(--vp-badge-warning-border);
+  color: var(--vp-badge-warning-text);
+  background-color: var(--vp-badge-warning-bg);
+}
+
+.VPBadge.danger {
+  border-color: var(--vp-badge-danger-border);
+  color: var(--vp-badge-danger-text);
+  background-color: var(--vp-badge-danger-bg);
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPButton.vue b/src/client/theme-default-v2/components/VPButton.vue
new file mode 100644
index 00000000..d0a5de70
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPButton.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { normalizeLink } from '../support/utils'
+import { EXTERNAL_URL_RE } from '../../shared'
+
+interface Props {
+  tag?: string
+  size?: 'medium' | 'big'
+  theme?: 'brand' | 'alt' | 'sponsor'
+  text?: string
+  href?: string
+  target?: string;
+  rel?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium',
+  theme: 'brand'
+})
+
+const isExternal = computed(
+  () => props.href && EXTERNAL_URL_RE.test(props.href)
+)
+
+const component = computed(() => {
+  return props.tag || (props.href ? 'a' : 'button')
+})
+</script>
+
+<template>
+  <component
+    :is="component"
+    class="VPButton"
+    :class="[size, theme]"
+    :href="href ? normalizeLink(href) : undefined"
+    :target="props.target ?? (isExternal ? '_blank' : undefined)"
+    :rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)"
+  >
+    <slot>{{ text }}</slot>
+  </component>
+</template>
+
+<style scoped>
+.VPButton {
+  display: inline-block;
+  border: 1px solid transparent;
+  text-align: center;
+  font-weight: 600;
+  white-space: nowrap;
+  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+}
+
+.VPButton:active {
+  transition: color 0.1s, border-color 0.1s, background-color 0.1s;
+}
+
+.VPButton.medium {
+  border-radius: 20px;
+  padding: 0 20px;
+  line-height: 38px;
+  font-size: 14px;
+}
+
+.VPButton.big {
+  border-radius: 24px;
+  padding: 0 24px;
+  line-height: 46px;
+  font-size: 16px;
+}
+
+.VPButton.brand {
+  border-color: var(--vp-button-brand-border);
+  color: var(--vp-button-brand-text);
+  background-color: var(--vp-button-brand-bg);
+}
+
+.VPButton.brand:hover {
+  border-color: var(--vp-button-brand-hover-border);
+  color: var(--vp-button-brand-hover-text);
+  background-color: var(--vp-button-brand-hover-bg);
+}
+
+.VPButton.brand:active {
+  border-color: var(--vp-button-brand-active-border);
+  color: var(--vp-button-brand-active-text);
+  background-color: var(--vp-button-brand-active-bg);
+}
+
+.VPButton.alt {
+  border-color: var(--vp-button-alt-border);
+  color: var(--vp-button-alt-text);
+  background-color: var(--vp-button-alt-bg);
+}
+
+.VPButton.alt:hover {
+  border-color: var(--vp-button-alt-hover-border);
+  color: var(--vp-button-alt-hover-text);
+  background-color: var(--vp-button-alt-hover-bg);
+}
+
+.VPButton.alt:active {
+  border-color: var(--vp-button-alt-active-border);
+  color: var(--vp-button-alt-active-text);
+  background-color: var(--vp-button-alt-active-bg);
+}
+
+.VPButton.sponsor {
+  border-color: var(--vp-button-sponsor-border);
+  color: var(--vp-button-sponsor-text);
+  background-color: var(--vp-button-sponsor-bg);
+}
+
+.VPButton.sponsor:hover {
+  border-color: var(--vp-button-sponsor-hover-border);
+  color: var(--vp-button-sponsor-hover-text);
+  background-color: var(--vp-button-sponsor-hover-bg);
+}
+
+.VPButton.sponsor:active {
+  border-color: var(--vp-button-sponsor-active-border);
+  color: var(--vp-button-sponsor-active-text);
+  background-color: var(--vp-button-sponsor-active-bg);
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPCarbonAds.vue b/src/client/theme-default-v2/components/VPCarbonAds.vue
new file mode 100644
index 00000000..a233d1ef
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPCarbonAds.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+import { ref, watch, onMounted } from 'vue'
+import { useAside } from '../composables/aside'
+import { useData } from '../composables/data'
+
+const { page } = useData()
+const props = defineProps<{
+  carbonAds: DefaultTheme.CarbonAdsOptions
+}>()
+
+const carbonOptions = props.carbonAds
+
+const { isAsideEnabled } = useAside()
+const container = ref()
+
+let isInitialized = false
+
+function init() {
+  if (!isInitialized) {
+    isInitialized = true
+    const s = document.createElement('script')
+    s.id = '_carbonads_js'
+    s.src = `//cdn.carbonads.com/carbon.js?serve=${carbonOptions.code}&placement=${carbonOptions.placement}`
+    s.async = true
+    container.value.appendChild(s)
+  }
+}
+
+watch(() => page.value.relativePath, () => {
+  if (isInitialized && isAsideEnabled.value) {
+    ;(window as any)._carbonads?.refresh()
+  }
+})
+
+// no need to account for option changes during dev, we can just
+// refresh the page
+if (carbonOptions) {
+  onMounted(() => {
+    // if the page is loaded when aside is active, load carbon directly.
+    // otherwise, only load it if the page resizes to wide enough. this avoids
+    // loading carbon at all on mobile where it's never shown
+    if (isAsideEnabled.value) {
+      init()
+    } else {
+      watch(isAsideEnabled, (wide) => wide && init())
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="VPCarbonAds" ref="container" />
+</template>
+
+<style scoped>
+.VPCarbonAds {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 24px;
+  border-radius: 12px;
+  min-height: 256px;
+  text-align: center;
+  line-height: 18px;
+  font-size: 12px;
+  font-weight: 500;
+  background-color: var(--vp-carbon-ads-bg-color);
+}
+
+.VPCarbonAds :deep(img) {
+  margin: 0 auto;
+  border-radius: 6px;
+}
+
+.VPCarbonAds :deep(.carbon-text) {
+  display: block;
+  margin: 0 auto;
+  padding-top: 12px;
+  color: var(--vp-carbon-ads-text-color);
+  transition: color 0.25s;
+}
+
+.VPCarbonAds :deep(.carbon-text:hover) {
+  color: var(--vp-carbon-ads-hover-text-color);
+}
+
+.VPCarbonAds :deep(.carbon-poweredby) {
+  display: block;
+  padding-top: 6px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--vp-carbon-ads-poweredby-color);
+  text-transform: uppercase;
+  transition: color 0.25s;
+}
+
+.VPCarbonAds :deep(.carbon-poweredby:hover) {
+  color: var(--vp-carbon-ads-hover-poweredby-color);
+}
+
+.VPCarbonAds :deep(> div) {
+  display: none;
+}
+
+.VPCarbonAds :deep(> div:first-of-type) {
+  display: block;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPContent.vue b/src/client/theme-default-v2/components/VPContent.vue
new file mode 100644
index 00000000..8b033785
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPContent.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import NotFound from '../NotFound.vue'
+import { useData } from '../composables/data'
+import { useLayout } from '../composables/layout'
+import VPDoc from './VPDoc.vue'
+import VPHome from './VPHome.vue'
+import VPPage from './VPPage.vue'
+
+const { page, frontmatter } = useData()
+const { isHome, hasSidebar } = useLayout()
+</script>
+
+<template>
+  <div
+    class="VPContent"
+    id="VPContent"
+    :class="{ 'has-sidebar': hasSidebar, 'is-home': isHome }"
+  >
+    <slot name="not-found" v-if="page.isNotFound"><NotFound /></slot>
+
+    <VPPage v-else-if="frontmatter.layout === 'page'">
+      <template #page-top><slot name="page-top" /></template>
+      <template #page-bottom><slot name="page-bottom" /></template>
+    </VPPage>
+
+    <VPHome v-else-if="frontmatter.layout === 'home'">
+      <template #home-hero-before><slot name="home-hero-before" /></template>
+      <template #home-hero-info-before><slot name="home-hero-info-before" /></template>
+      <template #home-hero-info><slot name="home-hero-info" /></template>
+      <template #home-hero-info-after><slot name="home-hero-info-after" /></template>
+      <template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
+      <template #home-hero-image><slot name="home-hero-image" /></template>
+      <template #home-hero-after><slot name="home-hero-after" /></template>
+      <template #home-features-before><slot name="home-features-before" /></template>
+      <template #home-features-after><slot name="home-features-after" /></template>
+    </VPHome>
+
+    <component
+      v-else-if="frontmatter.layout && frontmatter.layout !== 'doc'"
+      :is="frontmatter.layout"
+    />
+
+    <VPDoc v-else>
+      <template #doc-top><slot name="doc-top" /></template>
+      <template #doc-bottom><slot name="doc-bottom" /></template>
+
+      <template #doc-footer-before><slot name="doc-footer-before" /></template>
+      <template #doc-before><slot name="doc-before" /></template>
+      <template #doc-after><slot name="doc-after" /></template>
+
+      <template #aside-top><slot name="aside-top" /></template>
+      <template #aside-outline-before><slot name="aside-outline-before" /></template>
+      <template #aside-outline-after><slot name="aside-outline-after" /></template>
+      <template #aside-ads-before><slot name="aside-ads-before" /></template>
+      <template #aside-ads-after><slot name="aside-ads-after" /></template>
+      <template #aside-bottom><slot name="aside-bottom" /></template>
+    </VPDoc>
+  </div>
+</template>
+
+<style scoped>
+.VPContent {
+  flex-grow: 1;
+  flex-shrink: 0;
+  margin: var(--vp-layout-top-height, 0px) auto 0;
+  width: 100%;
+}
+
+.VPContent.is-home {
+  width: 100%;
+  max-width: 100%;
+}
+
+.VPContent.has-sidebar {
+  margin: 0;
+}
+
+@media (min-width: 960px) {
+  .VPContent {
+    padding-top: var(--vp-nav-height);
+  }
+
+  .VPContent.has-sidebar {
+    margin: var(--vp-layout-top-height, 0px) 0 0;
+    padding-left: var(--vp-sidebar-width);
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPContent.has-sidebar {
+    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
+    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+  }
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPDoc.vue b/src/client/theme-default-v2/components/VPDoc.vue
new file mode 100644
index 00000000..4ac18bd9
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPDoc.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { useRoute } from 'vitepress'
+import { computed } from 'vue'
+import { useData } from '../composables/data'
+import { useLayout } from '../composables/layout'
+import VPDocAside from './VPDocAside.vue'
+import VPDocFooter from './VPDocFooter.vue'
+
+const { theme } = useData()
+
+const route = useRoute()
+const { hasSidebar, hasAside, leftAside } = useLayout()
+
+const pageName = computed(() =>
+  route.path.replace(/[./]+/g, '_').replace(/_html$/, '')
+)
+</script>
+
+<template>
+  <div
+    class="VPDoc"
+    :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside }"
+  >
+    <slot name="doc-top" />
+    <div class="container">
+      <div v-if="hasAside" class="aside" :class="{'left-aside': leftAside}">
+        <div class="aside-curtain" />
+        <div class="aside-container">
+          <div class="aside-content">
+            <VPDocAside>
+              <template #aside-top><slot name="aside-top" /></template>
+              <template #aside-bottom><slot name="aside-bottom" /></template>
+              <template #aside-outline-before><slot name="aside-outline-before" /></template>
+              <template #aside-outline-after><slot name="aside-outline-after" /></template>
+              <template #aside-ads-before><slot name="aside-ads-before" /></template>
+              <template #aside-ads-after><slot name="aside-ads-after" /></template>
+            </VPDocAside>
+          </div>
+        </div>
+      </div>
+
+      <div class="content">
+        <div class="content-container">
+          <slot name="doc-before" />
+          <main class="main">
+            <Content
+              class="vp-doc"
+              :class="[
+                pageName,
+                theme.externalLinkIcon && 'external-link-icon-enabled'
+              ]"
+            />
+          </main>
+          <VPDocFooter>
+            <template #doc-footer-before><slot name="doc-footer-before" /></template>
+          </VPDocFooter>
+          <slot name="doc-after" />
+        </div>
+      </div>
+    </div>
+    <slot name="doc-bottom" />
+  </div>
+</template>
+
+<style scoped>
+.VPDoc {
+  padding: 32px 24px 96px;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .VPDoc {
+    padding: 48px 32px 128px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPDoc {
+    padding: 48px 32px 0;
+  }
+
+  .VPDoc:not(.has-sidebar) .container {
+    display: flex;
+    justify-content: center;
+    max-width: 992px;
+  }
+
+  .VPDoc:not(.has-sidebar) .content {
+    max-width: 752px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .VPDoc .container {
+    display: flex;
+    justify-content: center;
+  }
+
+  .VPDoc .aside {
+    display: block;
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPDoc:not(.has-sidebar) .content {
+    max-width: 784px;
+  }
+
+  .VPDoc:not(.has-sidebar) .container {
+    max-width: 1104px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  width: 100%;
+}
+
+.aside {
+  position: relative;
+  display: none;
+  order: 2;
+  flex-grow: 1;
+  padding-left: 32px;
+  width: 100%;
+  max-width: 256px;
+}
+
+.left-aside {
+  order: 1;
+  padding-left: unset;
+  padding-right: 32px;
+}
+
+.aside-container {
+  position: fixed;
+  top: 0;
+  padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 48px);
+  width: 224px;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.aside-container::-webkit-scrollbar {
+  display: none;
+}
+
+.aside-curtain {
+  position: fixed;
+  bottom: 0;
+  z-index: 10;
+  width: 224px;
+  height: 32px;
+  background: linear-gradient(transparent, var(--vp-c-bg) 70%);
+  pointer-events: none;
+}
+
+.aside-content {
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px));
+  padding-bottom: 32px;
+}
+
+.content {
+  position: relative;
+  margin: 0 auto;
+  width: 100%;
+}
+
+@media (min-width: 960px) {
+  .content {
+    padding: 0 32px 128px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .content {
+    order: 1;
+    margin: 0;
+    min-width: 640px;
+  }
+}
+
+.content-container {
+  margin: 0 auto;
+}
+
+.VPDoc.has-aside .content-container {
+  max-width: 688px;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPDocAside.vue b/src/client/theme-default-v2/components/VPDocAside.vue
new file mode 100644
index 00000000..314e8a4b
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPDocAside.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useData } from '../composables/data'
+import VPDocAsideOutline from './VPDocAsideOutline.vue'
+import VPDocAsideCarbonAds from './VPDocAsideCarbonAds.vue'
+
+const { theme } = useData()
+</script>
+
+<template>
+  <div class="VPDocAside">
+    <slot name="aside-top" />
+
+    <slot name="aside-outline-before" />
+    <VPDocAsideOutline />
+    <slot name="aside-outline-after" />
+
+    <div class="spacer" />
+
+    <slot name="aside-ads-before" />
+    <VPDocAsideCarbonAds v-if="theme.carbonAds" :carbon-ads="theme.carbonAds" />
+    <slot name="aside-ads-after" />
+
+    <slot name="aside-bottom" />
+  </div>
+</template>
+
+<style scoped>
+.VPDocAside {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.spacer {
+  flex-grow: 1;
+}
+
+.VPDocAside :deep(.spacer + .VPDocAsideSponsors),
+.VPDocAside :deep(.spacer + .VPDocAsideCarbonAds) {
+  margin-top: 24px;
+}
+
+.VPDocAside :deep(.VPDocAsideSponsors + .VPDocAsideCarbonAds) {
+  margin-top: 16px;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPDocAsideCarbonAds.vue b/src/client/theme-default-v2/components/VPDocAsideCarbonAds.vue
new file mode 100644
index 00000000..d10598dd
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPDocAsideCarbonAds.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
+import type { DefaultTheme } from 'vitepress/theme'
+
+defineProps<{
+  carbonAds: DefaultTheme.CarbonAdsOptions
+}>()
+
+const VPCarbonAds = __CARBON__
+  ? defineAsyncComponent(() => import('./VPCarbonAds.vue'))
+  : () => null
+</script>
+
+<template>
+  <div class="VPDocAsideCarbonAds">
+    <VPCarbonAds :carbon-ads="carbonAds" />
+  </div>
+</template>
diff --git a/src/client/theme-default-v2/components/VPDocAsideOutline.vue b/src/client/theme-default-v2/components/VPDocAsideOutline.vue
new file mode 100644
index 00000000..efaadc09
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPDocAsideOutline.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useData } from '../composables/data'
+import { resolveTitle, useActiveAnchor } from '../composables/outline'
+import VPDocOutlineItem from './VPDocOutlineItem.vue'
+import { useLayout } from '../composables/layout'
+
+const { theme } = useData()
+
+const container = ref()
+const marker = ref()
+
+const { headers, hasLocalNav } = useLayout()
+
+useActiveAnchor(container, marker)
+</script>
+
+<template>
+  <nav
+    aria-labelledby="doc-outline-aria-label"
+    class="VPDocAsideOutline"
+    :class="{ 'has-outline': hasLocalNav }"
+    ref="container"
+  >
+    <div class="content">
+      <div class="outline-marker" ref="marker" />
+
+      <div
+        aria-level="2"
+        class="outline-title"
+        id="doc-outline-aria-label"
+        role="heading"
+      >
+        {{ resolveTitle(theme) }}
+      </div>
+
+      <VPDocOutlineItem :headers :root="true" />
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+.VPDocAsideOutline {
+  display: none;
+}
+
+.VPDocAsideOutline.has-outline {
+  display: block;
+}
+
+.content {
+  position: relative;
+  border-left: 1px solid var(--vp-c-divider);
+  padding-left: 16px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.outline-marker {
+  position: absolute;
+  top: 32px;
+  left: -1px;
+  z-index: 0;
+  opacity: 0;
+  width: 2px;
+  border-radius: 2px;
+  height: 18px;
+  background-color: var(--vp-c-brand-1);
+  transition:
+    top 0.25s cubic-bezier(0, 1, 0.5, 1),
+    background-color 0.5s,
+    opacity 0.25s;
+}
+
+.outline-title {
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 600;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPDocAsideSponsors.vue b/src/client/theme-default-v2/components/VPDocAsideSponsors.vue
new file mode 100644
index 00000000..9e023dbc
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPDocAsideSponsors.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { Sponsors } from './VPSponsors.vue'
+import type { Sponsor } from './VPSponsorsGrid.vue'
+import VPSponsors from './VPSponsors.vue'
+
+defineProps<{
+  tier?: string
+  size?: 'xmini' | 'mini' | 'small'
+  data: Sponsors[] | Sponsor[]
+}>()
+</script>
+
+<template>
+  <div class="VPDocAsideSponsors">
+    <VPSponsors mode="aside" :tier :size :data />
+  </div>
+</template>
diff --git a/src/client/theme-default-v2/components/VPDocFooter.vue b/src/client/theme-default-v2/components/VPDocFooter.vue
new file mode 100644
index 00000000..0b6ff2a8
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPDocFooter.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from '../composables/data'
+import { useEditLink } from '../composables/edit-link'
+import { usePrevNext } from '../composables/prev-next'
+import VPLink from './VPLink.vue'
+import VPDocFooterLastUpdated from './VPDocFooterLastUpdated.vue'
+
+const { theme, page, frontmatter } = useData()
+
+const editLink = useEditLink()
+const control = usePrevNext()
+
+const hasEditLink = computed(
+  () => theme.value.editLink && frontmatter.value.editLink !== false
+)
+const hasLastUpdated = computed(() => page.value.lastUpdated)
+const showFooter = computed(
+  () =>
+    hasEditLink.value ||
+    hasLastUpdated.value ||
+    control.value.prev ||
+    control.value.next
+)
+</script>
+
+<template>
+  <footer v-if="showFooter" class="VPDocFooter">
+    <slot name="doc-footer-before" />
+
+    <div v-if="hasEditLink || hasLastUpdated" class="edit-info">
+      <div v-if="hasEditLink" class="edit-link">
+        <VPLink class="edit-link-button" :href="editLink.url" :no-icon="true">
+          <span class="vpi-square-pen edit-link-icon" />
+          {{ editLink.text }}
+        </VPLink>
+      </div>
+
+      <div v-if="hasLastUpdated" class="last-updated">
+        <VPDocFooterLastUpdated />
+      </div>
+    </div>
+
+    <nav
+      v-if="control.prev?.link || control.next?.link"
+      class="prev-next"
+      aria-labelledby="doc-footer-aria-label"
+    >
+      <span class="visually-hidden" id="doc-footer-aria-label">Pager</span>
+
+      <div class="pager">
+        <VPLink
+          v-if="control.prev?.link"
+          class="pager-link prev"
+          :href="control.prev.link"
+        >
+          <span
+            class="desc"
+            v-html="theme.docFooter?.prev || 'Previous page'"
+          ></span>
+          <span class="title" v-html="control.prev.text"></span>
+        </VPLink>
+      </div>
+      <div class="pager">
+        <VPLink
+          v-if="control.next?.link"
+          class="pager-link next"
+          :href="control.next.link"
+        >
+          <span
+            class="desc"
+            v-html="theme.docFooter?.next || 'Next page'"
+          ></span>
+          <span class="title" v-html="control.next.text"></span>
+        </VPLink>
+      </div>
+    </nav>
+  </footer>
+</template>
+
+<style scoped>
+.VPDocFooter {
+  margin-top: 64px;
+}
+
+.edit-info {
+  padding-bottom: 18px;
+}
+
+@media (min-width: 640px) {
+  .edit-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 14px;
+  }
+}
+
+.edit-link-button {
+  display: flex;
+  align-items: center;
+  border: 0;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+  transition: color 0.25s;
+}
+
+.edit-link-button:hover {
+  color: var(--vp-c-brand-2);
+}
+
+.edit-link-icon {
+  margin-right: 8px;
+}
+
+.prev-next {
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 24px;
+  display: grid;
+  grid-row-gap: 8px;
+}
+
+@media (min-width: 640px) {
+  .prev-next {
+    grid-template-columns: repeat(2, 1fr);
+    grid-column-gap: 16px;
+  }
+}
+
+.pager-link {
+  display: block;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 11px 16px 13px;
+  width: 100%;
+  height: 100%;
+  transition: border-color 0.25s;
+}
+
+.pager-link:hover {
+  border-color: var(--vp-c-brand-1);
+}
+
+.pager-link.next {
+  margin-left: auto;
+  text-align: right;
+}
+
+.desc {
+  display: block;
+  line-height: 20px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.title {
+  display: block;
+  line-height: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+  transition: color 0.25s;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPDocFooterLastUpdated.vue b/src/client/theme-default-v2/components/VPDocFooterLastUpdated.vue
new file mode 100644
index 00000000..5ec3cfeb
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPDocFooterLastUpdated.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect, onMounted } from 'vue'
+import { useData } from '../composables/data'
+
+const { theme, page, lang } = useData()
+
+const date = computed(
+  () => new Date(page.value.lastUpdated!)
+)
+const isoDatetime = computed(() => date.value.toISOString())
+const datetime = ref('')
+
+// set time on mounted hook to avoid hydration mismatch due to
+// potential differences in timezones of the server and clients
+onMounted(() => {
+  watchEffect(() => {
+    datetime.value = new Intl.DateTimeFormat(
+      theme.value.lastUpdated?.formatOptions?.forceLocale ? lang.value : undefined,
+      theme.value.lastUpdated?.formatOptions ?? {
+        dateStyle: 'short',
+        timeStyle: 'short'
+      }
+    ).format(date.value)
+  })
+})
+</script>
+
+<template>
+  <p class="VPLastUpdated">
+    {{ theme.lastUpdated?.text || theme.lastUpdatedText || 'Last updated' }}:
+    <time :datetime="isoDatetime">{{ datetime }}</time>
+  </p>
+</template>
+
+<style scoped>
+.VPLastUpdated {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+@media (min-width: 640px) {
+  .VPLastUpdated {
+    line-height: 32px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPDocOutlineItem.vue b/src/client/theme-default-v2/components/VPDocOutlineItem.vue
new file mode 100644
index 00000000..c945fc21
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPDocOutlineItem.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+
+defineProps<{
+  headers: DefaultTheme.OutlineItem[]
+  root?: boolean
+}>()
+
+function onClick({ target: el }: Event) {
+  const id = (el as HTMLAnchorElement).href!.split('#')[1]
+  const heading = document.getElementById(decodeURIComponent(id))
+  heading?.focus({ preventScroll: true })
+}
+</script>
+
+<template>
+  <ul class="VPDocOutlineItem" :class="root ? 'root' : 'nested'">
+    <li v-for="{ children, link, title } in headers">
+      <a class="outline-link" :href="link" @click="onClick" :title>
+        {{ title }}
+      </a>
+      <template v-if="children?.length">
+        <VPDocOutlineItem :headers="children" />
+      </template>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.root {
+  position: relative;
+  z-index: 1;
+}
+
+.nested {
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.outline-link {
+  display: block;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--vp-c-text-2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.5s;
+}
+
+.outline-link:hover,
+.outline-link.active {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.outline-link.nested {
+  padding-left: 13px;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPFeature.vue b/src/client/theme-default-v2/components/VPFeature.vue
new file mode 100644
index 00000000..ff36fe97
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPFeature.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+import VPImage from './VPImage.vue'
+import VPLink from './VPLink.vue'
+
+defineProps<{
+  icon?: DefaultTheme.FeatureIcon
+  title: string
+  details?: string
+  link?: string
+  linkText?: string
+  rel?: string
+  target?: string
+}>()
+</script>
+
+<template>
+  <VPLink
+    class="VPFeature"
+    :href="link"
+    :rel
+    :target
+    :no-icon="true"
+    :tag="link ? 'a' : 'div'"
+  >
+    <article class="box">
+      <div v-if="typeof icon === 'object' && icon.wrap" class="icon">
+        <VPImage
+          :image="icon"
+          :alt="icon.alt"
+          :height="icon.height || 48"
+          :width="icon.width || 48"
+        />
+      </div>
+      <VPImage
+        v-else-if="typeof icon === 'object'"
+        :image="icon"
+        :alt="icon.alt"
+        :height="icon.height || 48"
+        :width="icon.width || 48"
+      />
+      <div v-else-if="icon" class="icon" v-html="icon"></div>
+      <h2 class="title" v-html="title"></h2>
+      <p v-if="details" class="details" v-html="details"></p>
+
+      <div v-if="linkText" class="link-text">
+        <p class="link-text-value">
+          {{ linkText }} <span class="vpi-arrow-right link-text-icon" />
+        </p>
+      </div>
+    </article>
+  </VPLink>
+</template>
+
+<style scoped>
+.VPFeature {
+  display: block;
+  border: 1px solid var(--vp-c-bg-soft);
+  border-radius: 12px;
+  height: 100%;
+  background-color: var(--vp-c-bg-soft);
+  transition: border-color 0.25s, background-color 0.25s;
+}
+
+.VPFeature.link:hover {
+  border-color: var(--vp-c-brand-1);
+}
+
+.box {
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  height: 100%;
+}
+
+.box > :deep(.VPImage) {
+  margin-bottom: 20px;
+}
+
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+  border-radius: 6px;
+  background-color: var(--vp-c-default-soft);
+  width: 48px;
+  height: 48px;
+  font-size: 24px;
+  transition: background-color 0.25s;
+}
+
+.title {
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.details {
+  flex-grow: 1;
+  padding-top: 8px;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.link-text {
+  padding-top: 8px;
+}
+
+.link-text-value {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+}
+
+.link-text-icon {
+  margin-left: 6px;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPFeatures.vue b/src/client/theme-default-v2/components/VPFeatures.vue
new file mode 100644
index 00000000..1868aac4
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPFeatures.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+import { computed } from 'vue'
+import VPFeature from './VPFeature.vue'
+
+export interface Feature {
+  icon?: DefaultTheme.FeatureIcon
+  title: string
+  details: string
+  link?: string
+  linkText?: string
+  rel?: string
+  target?: string
+}
+
+const props = defineProps<{
+  features: Feature[]
+}>()
+
+const grid = computed(() => {
+  const length = props.features.length
+
+  if (!length) {
+    return
+  } else if (length === 2) {
+    return 'grid-2'
+  } else if (length === 3) {
+    return 'grid-3'
+  } else if (length % 3 === 0) {
+    return 'grid-6'
+  } else if (length > 3) {
+    return 'grid-4'
+  }
+})
+</script>
+
+<template>
+  <div v-if="features" class="VPFeatures">
+    <div class="container">
+      <div class="items">
+        <div
+          v-for="feature in features"
+          :key="feature.title"
+          class="item"
+          :class="[grid]"
+        >
+          <VPFeature
+            :icon="feature.icon"
+            :title="feature.title"
+            :details="feature.details"
+            :link="feature.link"
+            :link-text="feature.linkText"
+            :rel="feature.rel"
+            :target="feature.target"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPFeatures {
+  position: relative;
+  padding: 0 24px;
+}
+
+@media (min-width: 640px) {
+  .VPFeatures {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPFeatures {
+    padding: 0 64px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 1152px;
+}
+
+.items {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -8px;
+}
+
+.item {
+  padding: 8px;
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .item.grid-2,
+  .item.grid-4,
+  .item.grid-6 {
+    width: calc(100% / 2);
+  }
+}
+
+@media (min-width: 768px) {
+  .item.grid-2,
+  .item.grid-4 {
+    width: calc(100% / 2);
+  }
+
+  .item.grid-3,
+  .item.grid-6 {
+    width: calc(100% / 3);
+  }
+}
+
+@media (min-width: 960px) {
+  .item.grid-4 {
+    width: calc(100% / 4);
+  }
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPFlyout.vue b/src/client/theme-default-v2/components/VPFlyout.vue
new file mode 100644
index 00000000..c05c579c
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPFlyout.vue
@@ -0,0 +1,137 @@
+<script lang="ts" setup generic="T extends DefaultTheme.NavItem">
+import type { DefaultTheme } from 'vitepress/theme'
+import { ref } from 'vue'
+import { useFlyout } from '../composables/flyout'
+import VPMenu from './VPMenu.vue'
+
+defineProps<{
+  icon?: string
+  button?: string
+  label?: string
+  items?: T[]
+}>()
+
+const open = ref(false)
+const el = ref<HTMLElement>()
+
+useFlyout({ el, onBlur })
+
+function onBlur() {
+  open.value = false
+}
+</script>
+
+<template>
+  <div
+    class="VPFlyout"
+    ref="el"
+    @mouseenter="open = true"
+    @mouseleave="open = false"
+  >
+    <button
+      type="button"
+      class="button"
+      aria-haspopup="true"
+      :aria-expanded="open"
+      :aria-label="label"
+      @click="open = !open"
+    >
+      <span v-if="button || icon" class="text">
+        <span v-if="icon" :class="[icon, 'option-icon']" />
+        <span v-if="button" v-html="button"></span>
+        <span class="vpi-chevron-down text-icon" />
+      </span>
+
+      <span v-else class="vpi-more-horizontal icon" />
+    </button>
+
+    <div class="menu">
+      <VPMenu :items>
+        <slot />
+      </VPMenu>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPFlyout {
+  position: relative;
+}
+
+.VPFlyout:hover {
+  color: var(--vp-c-brand-1);
+  transition: color 0.25s;
+}
+
+.VPFlyout:hover .text {
+  color: var(--vp-c-text-2);
+}
+
+.VPFlyout:hover .icon {
+  fill: var(--vp-c-text-2);
+}
+
+.VPFlyout.active .text {
+  color: var(--vp-c-brand-1);
+}
+
+.VPFlyout.active:hover .text {
+  color: var(--vp-c-brand-2);
+}
+
+.button[aria-expanded="false"] + .menu {
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(0);
+}
+
+.VPFlyout:hover .menu,
+.button[aria-expanded="true"] + .menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  height: var(--vp-nav-height);
+  color: var(--vp-c-text-1);
+  transition: color 0.5s;
+}
+
+.text {
+  display: flex;
+  align-items: center;
+  line-height: var(--vp-nav-height);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.option-icon {
+  margin-right: 0px;
+  font-size: 16px;
+}
+
+.text-icon {
+  margin-left: 4px;
+  font-size: 14px;
+}
+
+.icon {
+  font-size: 20px;
+  transition: fill 0.25s;
+}
+
+.menu {
+  position: absolute;
+  top: calc(var(--vp-nav-height) / 2 + 20px);
+  right: 0;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPFooter.vue b/src/client/theme-default-v2/components/VPFooter.vue
new file mode 100644
index 00000000..63638044
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPFooter.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { useData } from '../composables/data'
+import { useLayout } from '../composables/layout'
+
+const { theme, frontmatter } = useData()
+const { hasSidebar } = useLayout()
+</script>
+
+<template>
+  <footer v-if="theme.footer && frontmatter.footer !== false" class="VPFooter" :class="{ 'has-sidebar': hasSidebar }">
+    <div class="container">
+      <p v-if="theme.footer.message" class="message" v-html="theme.footer.message"></p>
+      <p v-if="theme.footer.copyright" class="copyright" v-html="theme.footer.copyright"></p>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.VPFooter {
+  position: relative;
+  z-index: var(--vp-z-index-footer);
+  border-top: 1px solid var(--vp-c-gutter);
+  padding: 32px 24px;
+  background-color: var(--vp-c-bg);
+}
+
+.VPFooter.has-sidebar {
+  display: none;
+}
+
+.VPFooter :deep(a) {
+  text-decoration-line: underline;
+  text-underline-offset: 2px;
+  transition: color 0.25s;
+}
+
+.VPFooter :deep(a:hover) {
+  color: var(--vp-c-text-1);
+}
+
+@media (min-width: 768px) {
+  .VPFooter {
+    padding: 32px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: var(--vp-layout-max-width);
+  text-align: center;
+}
+
+.message,
+.copyright {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPHero.vue b/src/client/theme-default-v2/components/VPHero.vue
new file mode 100644
index 00000000..4e1e2e9b
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPHero.vue
@@ -0,0 +1,346 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+import { inject } from 'vue'
+import { layoutInfoInjectionKey } from '../composables/layout'
+import VPButton from './VPButton.vue'
+import VPImage from './VPImage.vue'
+
+export interface HeroAction {
+  theme?: 'brand' | 'alt'
+  text: string
+  link: string
+  target?: string
+  rel?: string
+}
+
+defineProps<{
+  name?: string
+  text?: string
+  tagline?: string
+  image?: DefaultTheme.ThemeableImage
+  actions?: HeroAction[]
+}>()
+
+const { heroImageSlotExists } = inject(layoutInfoInjectionKey)!
+</script>
+
+<template>
+  <div class="VPHero" :class="{ 'has-image': image || heroImageSlotExists }">
+    <div class="container">
+      <div class="main">
+        <slot name="home-hero-info-before" />
+        <slot name="home-hero-info">
+          <h1 class="heading">
+            <span v-if="name" v-html="name" class="name clip"></span>
+            <span v-if="text" v-html="text" class="text"></span>
+          </h1>
+          <p v-if="tagline" v-html="tagline" class="tagline"></p>
+        </slot>
+        <slot name="home-hero-info-after" />
+
+        <div v-if="actions" class="actions">
+          <div v-for="action in actions" :key="action.link" class="action">
+            <VPButton
+              tag="a"
+              size="medium"
+              :theme="action.theme"
+              :text="action.text"
+              :href="action.link"
+              :target="action.target"
+              :rel="action.rel"
+            />
+          </div>
+        </div>
+        <slot name="home-hero-actions-after" />
+      </div>
+
+      <div v-if="image || heroImageSlotExists" class="image">
+        <div class="image-container">
+          <div class="image-bg" />
+          <slot name="home-hero-image">
+            <VPImage v-if="image" class="image-src" :image />
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPHero {
+  margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
+  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
+}
+
+@media (min-width: 640px) {
+  .VPHero {
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPHero {
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px;
+  }
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  max-width: 1152px;
+}
+
+@media (min-width: 960px) {
+  .container {
+    flex-direction: row;
+  }
+}
+
+.main {
+  position: relative;
+  z-index: 10;
+  order: 2;
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+.VPHero.has-image .container {
+  text-align: center;
+}
+
+@media (min-width: 960px) {
+  .VPHero.has-image .container {
+    text-align: left;
+  }
+}
+
+@media (min-width: 960px) {
+  .main {
+    order: 1;
+    width: calc((100% / 3) * 2);
+  }
+
+  .VPHero.has-image .main {
+    max-width: 592px;
+  }
+}
+
+.heading {
+  display: flex;
+  flex-direction: column;
+}
+
+.name,
+.text {
+  width: fit-content;
+  max-width: 392px;
+  letter-spacing: -0.4px;
+  line-height: 40px;
+  font-size: 32px;
+  font-weight: 700;
+  white-space: pre-wrap;
+}
+
+.VPHero.has-image .name,
+.VPHero.has-image .text {
+  margin: 0 auto;
+}
+
+.name {
+  color: var(--vp-home-hero-name-color);
+}
+
+.clip {
+  background: var(--vp-home-hero-name-background);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: var(--vp-home-hero-name-color);
+}
+
+@media (min-width: 640px) {
+  .name,
+  .text {
+    max-width: 576px;
+    line-height: 56px;
+    font-size: 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .name,
+  .text {
+    line-height: 64px;
+    font-size: 56px;
+  }
+
+  .VPHero.has-image .name,
+  .VPHero.has-image .text {
+    margin: 0;
+  }
+}
+
+.tagline {
+  padding-top: 8px;
+  max-width: 392px;
+  line-height: 28px;
+  font-size: 18px;
+  font-weight: 500;
+  white-space: pre-wrap;
+  color: var(--vp-c-text-2);
+}
+
+.VPHero.has-image .tagline {
+  margin: 0 auto;
+}
+
+@media (min-width: 640px) {
+  .tagline {
+    padding-top: 12px;
+    max-width: 576px;
+    line-height: 32px;
+    font-size: 20px;
+  }
+}
+
+@media (min-width: 960px) {
+  .tagline {
+    line-height: 36px;
+    font-size: 24px;
+  }
+
+  .VPHero.has-image .tagline {
+    margin: 0;
+  }
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -6px;
+  padding-top: 24px;
+}
+
+.VPHero.has-image .actions {
+  justify-content: center;
+}
+
+@media (min-width: 640px) {
+  .actions {
+    padding-top: 32px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPHero.has-image .actions {
+    justify-content: flex-start;
+  }
+}
+
+.action {
+  flex-shrink: 0;
+  padding: 6px;
+}
+
+.image {
+  order: 1;
+  margin: -76px -24px -48px;
+}
+
+@media (min-width: 640px) {
+  .image {
+    margin: -108px -24px -48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .image {
+    flex-grow: 1;
+    order: 2;
+    margin: 0;
+    min-height: 100%;
+  }
+}
+
+.image-container {
+  position: relative;
+  margin: 0 auto;
+  width: 320px;
+  height: 320px;
+}
+
+@media (min-width: 640px) {
+  .image-container {
+    width: 392px;
+    height: 392px;
+  }
+}
+
+@media (min-width: 960px) {
+  .image-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    /*rtl:ignore*/
+    transform: translate(-32px, -32px);
+  }
+}
+
+.image-bg {
+  position: absolute;
+  top: 50%;
+  /*rtl:ignore*/
+  left: 50%;
+  border-radius: 50%;
+  width: 192px;
+  height: 192px;
+  background-image: var(--vp-home-hero-image-background-image);
+  filter: var(--vp-home-hero-image-filter);
+  /*rtl:ignore*/
+  transform: translate(-50%, -50%);
+}
+
+@media (min-width: 640px) {
+  .image-bg {
+    width: 256px;
+    height: 256px;
+  }
+}
+
+@media (min-width: 960px) {
+  .image-bg {
+    width: 320px;
+    height: 320px;
+  }
+}
+
+:deep(.image-src) {
+  position: absolute;
+  top: 50%;
+  /*rtl:ignore*/
+  left: 50%;
+  max-width: 192px;
+  max-height: 192px;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  /*rtl:ignore*/
+  transform: translate(-50%, -50%);
+}
+
+@media (min-width: 640px) {
+  :deep(.image-src) {
+    max-width: 256px;
+    max-height: 256px;
+  }
+}
+
+@media (min-width: 960px) {
+  :deep(.image-src) {
+    max-width: 320px;
+    max-height: 320px;
+  }
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPHome.vue b/src/client/theme-default-v2/components/VPHome.vue
new file mode 100644
index 00000000..0467e5f7
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPHome.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import VPHomeHero from './VPHomeHero.vue'
+import VPHomeFeatures from './VPHomeFeatures.vue'
+import VPHomeContent from './VPHomeContent.vue'
+import { useData } from '../composables/data'
+
+const { frontmatter, theme } = useData()
+</script>
+
+<template>
+  <div 
+    class="VPHome" 
+    :class="{
+      'external-link-icon-enabled': theme.externalLinkIcon
+    }">
+    <slot name="home-hero-before" />
+    <VPHomeHero>
+      <template #home-hero-info-before><slot name="home-hero-info-before" /></template>
+      <template #home-hero-info><slot name="home-hero-info" /></template>
+      <template #home-hero-info-after><slot name="home-hero-info-after" /></template>
+      <template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
+      <template #home-hero-image><slot name="home-hero-image" /></template>
+    </VPHomeHero>
+    <slot name="home-hero-after" />
+
+    <slot name="home-features-before" />
+    <VPHomeFeatures />
+    <slot name="home-features-after" />
+
+    <VPHomeContent v-if="frontmatter.markdownStyles !== false">
+      <Content />
+    </VPHomeContent>
+    <Content v-else />
+  </div>
+</template>
+
+<style scoped>
+.VPHome {
+  margin-bottom: 96px;
+}
+
+@media (min-width: 768px) {
+  .VPHome {
+    margin-bottom: 128px;
+  }
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPHomeContent.vue b/src/client/theme-default-v2/components/VPHomeContent.vue
new file mode 100644
index 00000000..3e026235
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPHomeContent.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+
+const { width: vw } = useWindowSize({
+  initialWidth: 0,
+  includeScrollbar: false
+})
+</script>
+
+<template>
+  <div
+    class="vp-doc container"
+    :style="vw ? { '--vp-offset': `calc(50% - ${vw / 2}px)` } : {}"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.container {
+  margin: auto;
+  width: 100%;
+  max-width: 1280px;
+  padding: 0 24px;
+}
+
+@media (min-width: 640px) {
+  .container {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .container {
+    width: 100%;
+    padding: 0 64px;
+  }
+}
+
+.vp-doc :deep(.VPHomeSponsors),
+.vp-doc :deep(.VPTeamPage) {
+  margin-left: var(--vp-offset, calc(50% - 50vw));
+  margin-right: var(--vp-offset, calc(50% - 50vw));
+}
+
+.vp-doc :deep(.VPHomeSponsors h2) {
+  border-top: none;
+  letter-spacing: normal;
+}
+
+.vp-doc :deep(.VPHomeSponsors a),
+.vp-doc :deep(.VPTeamPage a) {
+  text-decoration: none;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPHomeFeatures.vue b/src/client/theme-default-v2/components/VPHomeFeatures.vue
new file mode 100644
index 00000000..ed4565cf
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPHomeFeatures.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useData } from '../composables/data'
+import VPFeatures from './VPFeatures.vue'
+
+const { frontmatter: fm } = useData()
+</script>
+
+<template>
+  <VPFeatures
+    v-if="fm.features"
+    class="VPHomeFeatures"
+    :features="fm.features"
+  />
+</template>
diff --git a/src/client/theme-default-v2/components/VPHomeHero.vue b/src/client/theme-default-v2/components/VPHomeHero.vue
new file mode 100644
index 00000000..972a1f61
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPHomeHero.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useData } from '../composables/data'
+import VPHero from './VPHero.vue'
+
+const { frontmatter: fm } = useData()
+</script>
+
+<template>
+  <VPHero
+    v-if="fm.hero"
+    class="VPHomeHero"
+    :name="fm.hero.name"
+    :text="fm.hero.text"
+    :tagline="fm.hero.tagline"
+    :image="fm.hero.image"
+    :actions="fm.hero.actions"
+  >
+    <template #home-hero-info-before><slot name="home-hero-info-before" /></template>
+    <template #home-hero-info><slot name="home-hero-info" /></template>
+    <template #home-hero-info-after><slot name="home-hero-info-after" /></template>
+    <template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
+    <template #home-hero-image><slot name="home-hero-image" /></template>
+  </VPHero>
+</template>
diff --git a/src/client/theme-default-v2/components/VPHomeSponsors.vue b/src/client/theme-default-v2/components/VPHomeSponsors.vue
new file mode 100644
index 00000000..d4eaacd2
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPHomeSponsors.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import VPButton from './VPButton.vue'
+import VPSponsors from './VPSponsors.vue'
+
+export interface Sponsors {
+  tier: string
+  size?: 'medium' | 'big'
+  items: Sponsor[]
+}
+
+export interface Sponsor {
+  name: string
+  img: string
+  url: string
+}
+interface Props {
+  message?: string
+  actionText?: string
+  actionLink?: string
+  data: Sponsors[]
+}
+
+withDefaults(defineProps<Props>(), {
+  actionText: 'Become a sponsor'
+})
+</script>
+
+<template>
+  <section class="VPHomeSponsors">
+    <div class="container">
+      <div class="header">
+        <div class="love">
+          <span class="vpi-heart icon" />
+        </div>
+        <h2 v-if="message" class="message">{{ message }}</h2>
+      </div>
+
+      <div class="sponsors">
+        <VPSponsors :data />
+      </div>
+
+      <div v-if="actionLink" class="action">
+        <VPButton theme="sponsor" :text="actionText" :href="actionLink" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.VPHomeSponsors {
+  border-top: 1px solid var(--vp-c-gutter);
+  padding-top: 88px !important;
+}
+
+.VPHomeSponsors {
+  margin: 96px 0;
+}
+
+@media (min-width: 768px) {
+  .VPHomeSponsors {
+    margin: 128px 0;
+  }
+}
+
+.VPHomeSponsors {
+  padding: 0 24px;
+}
+
+@media (min-width: 768px) {
+  .VPHomeSponsors {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPHomeSponsors {
+    padding: 0 64px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 1152px;
+}
+
+.love {
+  margin: 0 auto;
+  width: fit-content;
+  font-size: 28px;
+  color: var(--vp-c-text-3);
+}
+
+.icon {
+  display: inline-block;
+}
+
+.message {
+  margin: 0 auto;
+  padding-top: 10px;
+  max-width: 320px;
+  text-align: center;
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.sponsors {
+  padding-top: 32px;
+}
+
+.action {
+  padding-top: 40px;
+  text-align: center;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPImage.vue b/src/client/theme-default-v2/components/VPImage.vue
new file mode 100644
index 00000000..79e2c6ae
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPImage.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+import { withBase } from 'vitepress'
+
+defineProps<{
+  image: DefaultTheme.ThemeableImage
+  alt?: string
+}>()
+
+defineOptions({ inheritAttrs: false })
+</script>
+
+<template>
+  <template v-if="image">
+    <img
+      v-if="typeof image === 'string' || 'src' in image"
+      class="vp-image"
+      v-bind="typeof image === 'string' ? $attrs : { ...image, ...$attrs }"
+      :src="withBase(typeof image === 'string' ? image : image.src)"
+      :alt="alt ?? (typeof image === 'string' ? '' : image.alt || '')"
+    />
+    <template v-else>
+      <VPImage
+        class="vp-image--dark"
+        :image="image.dark"
+        :alt="image.alt"
+        v-bind="$attrs"
+      />
+      <VPImage
+        class="vp-image--light"
+        :image="image.light"
+        :alt="image.alt"
+        v-bind="$attrs"
+      />
+    </template>
+  </template>
+</template>
+
+<style>
+html:not(.dark) .vp-image--dark {
+  display: none;
+}
+
+.dark .vp-image--dark {
+  display: none;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPLink.vue b/src/client/theme-default-v2/components/VPLink.vue
new file mode 100644
index 00000000..f57e3328
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPLink.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { normalizeLink } from '../support/utils'
+import { EXTERNAL_URL_RE } from '../../shared'
+
+const props = defineProps<{
+  tag?: string
+  href?: string
+  noIcon?: boolean
+  target?: string
+  rel?: string
+}>()
+
+const tag = computed(() => props.tag ?? (props.href ? 'a' : 'span'))
+const isExternal = computed(
+  () =>
+    (props.href && EXTERNAL_URL_RE.test(props.href)) ||
+    props.target === '_blank'
+)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="VPLink"
+    :class="{
+      link: href,
+      'vp-external-link-icon': isExternal,
+      'no-icon': noIcon
+    }"
+    :href="href ? normalizeLink(href) : undefined"
+    :target="target ?? (isExternal ? '_blank' : undefined)"
+    :rel="rel ?? (isExternal ? 'noreferrer' : undefined)"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/src/client/theme-default-v2/components/VPLocalNav.vue b/src/client/theme-default-v2/components/VPLocalNav.vue
new file mode 100644
index 00000000..b950205a
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPLocalNav.vue
@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import { useWindowScroll } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
+import { useData } from '../composables/data'
+import { useLayout } from '../composables/layout'
+import VPLocalNavOutlineDropdown from './VPLocalNavOutlineDropdown.vue'
+
+defineProps<{
+  open: boolean
+}>()
+
+defineEmits<{
+  (e: 'open-menu'): void
+}>()
+
+const { theme } = useData()
+const { isHome, hasSidebar, headers, hasLocalNav } = useLayout()
+const { y } = useWindowScroll()
+
+const navHeight = ref(0)
+
+onMounted(() => {
+  navHeight.value = parseInt(
+    getComputedStyle(document.documentElement).getPropertyValue(
+      '--vp-nav-height'
+    )
+  )
+})
+
+const classes = computed(() => {
+  return {
+    VPLocalNav: true,
+    'has-sidebar': hasSidebar.value,
+    empty: !hasLocalNav.value,
+    fixed: !hasLocalNav.value && !hasSidebar.value
+  }
+})
+</script>
+
+<template>
+  <div
+    v-if="!isHome && (hasLocalNav || hasSidebar || y >= navHeight)"
+    :class="classes"
+  >
+    <div class="container">
+      <button
+        v-if="hasSidebar"
+        class="menu"
+        :aria-expanded="open"
+        aria-controls="VPSidebarNav"
+        @click="$emit('open-menu')"
+      >
+        <span class="vpi-align-left menu-icon"></span>
+        <span class="menu-text">
+          {{ theme.sidebarMenuLabel || 'Menu' }}
+        </span>
+      </button>
+
+      <VPLocalNavOutlineDropdown :headers :navHeight />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPLocalNav {
+  position: sticky;
+  top: 0;
+  /*rtl:ignore*/
+  left: 0;
+  z-index: var(--vp-z-index-local-nav);
+  border-bottom: 1px solid var(--vp-c-gutter);
+  padding-top: var(--vp-layout-top-height, 0px);
+  width: 100%;
+  background-color: var(--vp-local-nav-bg-color);
+}
+
+.VPLocalNav.fixed {
+  position: fixed;
+}
+
+@media (min-width: 960px) {
+  .VPLocalNav {
+    top: var(--vp-nav-height);
+  }
+
+  .VPLocalNav.has-sidebar {
+    padding-left: var(--vp-sidebar-width);
+  }
+
+  .VPLocalNav.empty {
+    display: none;
+  }
+}
+
+@media (min-width: 1280px) {
+  .VPLocalNav {
+    display: none;
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPLocalNav.has-sidebar {
+    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+  }
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.menu {
+  display: flex;
+  align-items: center;
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+}
+
+.menu:hover {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+@media (min-width: 960px) {
+  .menu {
+    display: none;
+  }
+}
+
+.menu-icon {
+  margin-right: 8px;
+  font-size: 14px;
+}
+
+.menu,
+:deep(.VPLocalNavOutlineDropdown > button) {
+  padding: 12px 24px 11px;
+}
+
+@media (min-width: 768px) {
+  .menu,
+  :deep(.VPLocalNavOutlineDropdown > button) {
+    padding: 12px 32px 11px;
+  }
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPLocalNavOutlineDropdown.vue b/src/client/theme-default-v2/components/VPLocalNavOutlineDropdown.vue
new file mode 100644
index 00000000..cf842baa
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPLocalNavOutlineDropdown.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { onKeyStroke } from '@vueuse/core'
+import { onContentUpdated } from 'vitepress'
+import type { DefaultTheme } from 'vitepress/theme'
+import { nextTick, ref, watch } from 'vue'
+import { useData } from '../composables/data'
+import { resolveTitle } from '../composables/outline'
+import VPDocOutlineItem from './VPDocOutlineItem.vue'
+
+const props = defineProps<{
+  headers: DefaultTheme.OutlineItem[]
+  navHeight: number
+}>()
+
+const { theme } = useData()
+const open = ref(false)
+const vh = ref(0)
+const main = ref<HTMLDivElement>()
+const items = ref<HTMLDivElement>()
+
+function closeOnClickOutside(e: Event) {
+  if (!main.value?.contains(e.target as Node)) {
+    open.value = false
+  }
+}
+
+watch(open, (value) => {
+  if (value) {
+    document.addEventListener('click', closeOnClickOutside)
+    return
+  }
+  document.removeEventListener('click', closeOnClickOutside)
+})
+
+onKeyStroke('Escape', () => {
+  open.value = false
+})
+
+onContentUpdated(() => {
+  open.value = false
+})
+
+function toggle() {
+  open.value = !open.value
+  vh.value = window.innerHeight + Math.min(window.scrollY - props.navHeight, 0)
+}
+
+function onItemClick(e: Event) {
+  if ((e.target as HTMLElement).classList.contains('outline-link')) {
+    // disable animation on hash navigation when page jumps
+    if (items.value) {
+      items.value.style.transition = 'none'
+    }
+    nextTick(() => {
+      open.value = false
+    })
+  }
+}
+
+function scrollToTop() {
+  open.value = false
+  window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+}
+</script>
+
+<template>
+  <div
+    class="VPLocalNavOutlineDropdown"
+    :style="{ '--vp-vh': vh + 'px' }"
+    ref="main"
+  >
+    <button @click="toggle" :class="{ open }" v-if="headers.length > 0">
+      <span class="menu-text">{{ resolveTitle(theme) }}</span>
+      <span class="vpi-chevron-right icon" />
+    </button>
+    <button @click="scrollToTop" v-else>
+      {{ theme.returnToTopLabel || 'Return to top' }}
+    </button>
+    <Transition name="flyout">
+      <div v-if="open" ref="items" class="items" @click="onItemClick">
+        <div class="header">
+          <a class="top-link" href="#" @click="scrollToTop">
+            {{ theme.returnToTopLabel || 'Return to top' }}
+          </a>
+        </div>
+        <div class="outline">
+          <VPDocOutlineItem :headers />
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.VPLocalNavOutlineDropdown button {
+  display: block;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 24px;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+  position: relative;
+}
+
+.VPLocalNavOutlineDropdown button:hover {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.VPLocalNavOutlineDropdown button.open {
+  color: var(--vp-c-text-1);
+}
+
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 2px;
+  font-size: 14px;
+  transform: rotate(0) /*rtl:rotate(180deg)*/;
+  transition: transform 0.25s;
+}
+
+@media (min-width: 960px) {
+  .VPLocalNavOutlineDropdown button {
+    font-size: 14px;
+  }
+
+  .icon {
+    font-size: 16px;
+  }
+}
+
+.open > .icon {
+  /*rtl:ignore*/
+  transform: rotate(90deg);
+}
+
+.items {
+  position: absolute;
+  top: 40px;
+  right: 16px;
+  left: 16px;
+  display: grid;
+  gap: 1px;
+  border: 1px solid var(--vp-c-border);
+  border-radius: 8px;
+  background-color: var(--vp-c-gutter);
+  max-height: calc(var(--vp-vh, 100vh) - 86px);
+  overflow: hidden auto;
+  box-shadow: var(--vp-shadow-3);
+}
+
+@media (min-width: 960px) {
+  .items {
+    right: auto;
+    left: calc(var(--vp-sidebar-width) + 32px);
+    width: 320px;
+  }
+}
+
+.header {
+  background-color: var(--vp-c-bg-soft);
+}
+
+.top-link {
+  display: block;
+  padding: 0 16px;
+  line-height: 48px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+}
+
+.outline {
+  padding: 8px 0;
+  background-color: var(--vp-c-bg-soft);
+}
+
+.flyout-enter-active {
+  transition: all 0.2s ease-out;
+}
+
+.flyout-leave-active {
+  transition: all 0.15s ease-in;
+}
+
+.flyout-enter-from,
+.flyout-leave-to {
+  opacity: 0;
+  transform: translateY(-16px);
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPLocalSearchBox.vue b/src/client/theme-default-v2/components/VPLocalSearchBox.vue
new file mode 100644
index 00000000..825a22b5
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPLocalSearchBox.vue
@@ -0,0 +1,877 @@
+<script lang="ts" setup>
+import localSearchIndex from '@localSearchIndex'
+import {
+  computedAsync,
+  debouncedWatch,
+  onKeyStroke,
+  useEventListener,
+  useLocalStorage,
+  useScrollLock,
+  useSessionStorage
+} from '@vueuse/core'
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+import Mark from 'mark.js/src/vanilla.js'
+import MiniSearch, { type SearchResult } from 'minisearch'
+import { dataSymbol, inBrowser, useRouter } from 'vitepress'
+import {
+  computed,
+  createApp,
+  markRaw,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  watch,
+  watchEffect,
+  type Ref
+} from 'vue'
+import type { ModalTranslations } from '../../../../types/local-search'
+import { pathToFile } from '../../app/utils'
+import { escapeRegExp } from '../../shared'
+import { useData } from '../composables/data'
+import { LRUCache } from '../support/lru'
+import { createSearchTranslate } from '../support/translation'
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const el = shallowRef<HTMLElement>()
+const resultsEl = shallowRef<HTMLElement>()
+
+/* Search */
+
+const searchIndexData = shallowRef(localSearchIndex)
+
+// hmr
+if (import.meta.hot) {
+  import.meta.hot.accept('@localSearchIndex', (m) => {
+    if (m) {
+      searchIndexData.value = m.default
+    }
+  })
+}
+
+interface Result {
+  title: string
+  titles: string[]
+  text?: string
+}
+
+const vitePressData = useData()
+const { activate } = useFocusTrap(el, {
+  immediate: true,
+  allowOutsideClick: true,
+  clickOutsideDeactivates: true,
+  escapeDeactivates: true
+})
+const { localeIndex, theme } = vitePressData
+const searchIndex = computedAsync(async () =>
+  markRaw(
+    MiniSearch.loadJSON<Result>(
+      (await searchIndexData.value[localeIndex.value]?.())?.default,
+      {
+        fields: ['title', 'titles', 'text'],
+        storeFields: ['title', 'titles'],
+        searchOptions: {
+          fuzzy: 0.2,
+          prefix: true,
+          boost: { title: 4, text: 2, titles: 1 },
+          ...(theme.value.search?.provider === 'local' &&
+            theme.value.search.options?.miniSearch?.searchOptions)
+        },
+        ...(theme.value.search?.provider === 'local' &&
+          theme.value.search.options?.miniSearch?.options)
+      }
+    )
+  )
+)
+
+const disableQueryPersistence = computed(() => {
+  return (
+    theme.value.search?.provider === 'local' &&
+    theme.value.search.options?.disableQueryPersistence === true
+  )
+})
+
+const filterText = disableQueryPersistence.value
+  ? ref('')
+  : useSessionStorage('vitepress:local-search-filter', '')
+
+const showDetailedList = useLocalStorage(
+  'vitepress:local-search-detailed-list',
+  theme.value.search?.provider === 'local' &&
+    theme.value.search.options?.detailedView === true
+)
+
+const disableDetailedView = computed(() => {
+  return (
+    theme.value.search?.provider === 'local' &&
+    (theme.value.search.options?.disableDetailedView === true ||
+      theme.value.search.options?.detailedView === false)
+  )
+})
+
+const buttonText = computed(() => {
+  const options = theme.value.search?.options ?? theme.value.algolia
+
+  return (
+    options?.locales?.[localeIndex.value]?.translations?.button?.buttonText ||
+    options?.translations?.button?.buttonText ||
+    'Search'
+  )
+})
+
+watchEffect(() => {
+  if (disableDetailedView.value) {
+    showDetailedList.value = false
+  }
+})
+
+const results: Ref<(SearchResult & Result)[]> = shallowRef([])
+
+const enableNoResults = ref(false)
+
+watch(filterText, () => {
+  enableNoResults.value = false
+})
+
+const mark = computedAsync(async () => {
+  if (!resultsEl.value) return
+  return markRaw(new Mark(resultsEl.value))
+}, null)
+
+const cache = new LRUCache<string, Map<string, string>>(16) // 16 files
+
+debouncedWatch(
+  () => [searchIndex.value, filterText.value, showDetailedList.value] as const,
+  async ([index, filterTextValue, showDetailedListValue], old, onCleanup) => {
+    if (old?.[0] !== index) {
+      // in case of hmr
+      cache.clear()
+    }
+
+    let canceled = false
+    onCleanup(() => {
+      canceled = true
+    })
+
+    if (!index) return
+
+    // Search
+    results.value = index
+      .search(filterTextValue)
+      .slice(0, 16) as (SearchResult & Result)[]
+    enableNoResults.value = true
+
+    // Highlighting
+    const mods = showDetailedListValue
+      ? await Promise.all(results.value.map((r) => fetchExcerpt(r.id)))
+      : []
+    if (canceled) return
+    for (const { id, mod } of mods) {
+      const mapId = id.slice(0, id.indexOf('#'))
+      let map = cache.get(mapId)
+      if (map) continue
+      map = new Map()
+      cache.set(mapId, map)
+      const comp = mod.default ?? mod
+      if (comp?.render || comp?.setup) {
+        const app = createApp(comp)
+        // Silence warnings about missing components
+        app.config.warnHandler = () => {}
+        app.provide(dataSymbol, vitePressData)
+        Object.defineProperties(app.config.globalProperties, {
+          $frontmatter: {
+            get() {
+              return vitePressData.frontmatter.value
+            }
+          },
+          $params: {
+            get() {
+              return vitePressData.page.value.params
+            }
+          }
+        })
+        const div = document.createElement('div')
+        app.mount(div)
+        const headings = div.querySelectorAll('h1, h2, h3, h4, h5, h6')
+        headings.forEach((el) => {
+          const href = el.querySelector('a')?.getAttribute('href')
+          const anchor = href?.startsWith('#') && href.slice(1)
+          if (!anchor) return
+          let html = ''
+          while ((el = el.nextElementSibling!) && !/^h[1-6]$/i.test(el.tagName))
+            html += el.outerHTML
+          map!.set(anchor, html)
+        })
+        app.unmount()
+      }
+      if (canceled) return
+    }
+
+    const terms = new Set<string>()
+
+    results.value = results.value.map((r) => {
+      const [id, anchor] = r.id.split('#')
+      const map = cache.get(id)
+      const text = map?.get(anchor) ?? ''
+      for (const term in r.match) {
+        terms.add(term)
+      }
+      return { ...r, text }
+    })
+
+    await nextTick()
+    if (canceled) return
+
+    await new Promise((r) => {
+      mark.value?.unmark({
+        done: () => {
+          mark.value?.markRegExp(formMarkRegex(terms), { done: r })
+        }
+      })
+    })
+
+    const excerpts = el.value?.querySelectorAll('.result .excerpt') ?? []
+    for (const excerpt of excerpts) {
+      excerpt
+        .querySelector('mark[data-markjs="true"]')
+        ?.scrollIntoView({ block: 'center' })
+    }
+    // FIXME: without this whole page scrolls to the bottom
+    resultsEl.value?.firstElementChild?.scrollIntoView({ block: 'start' })
+  },
+  { debounce: 200, immediate: true }
+)
+
+async function fetchExcerpt(id: string) {
+  const file = pathToFile(id.slice(0, id.indexOf('#')))
+  try {
+    if (!file) throw new Error(`Cannot find file for id: ${id}`)
+    return { id, mod: await import(/*@vite-ignore*/ file) }
+  } catch (e) {
+    console.error(e)
+    return { id, mod: {} }
+  }
+}
+
+/* Search input focus */
+
+const searchInput = ref<HTMLInputElement>()
+const disableReset = computed(() => {
+  return filterText.value?.length <= 0
+})
+function focusSearchInput(select = true) {
+  searchInput.value?.focus()
+  select && searchInput.value?.select()
+}
+
+onMounted(() => {
+  focusSearchInput()
+})
+
+function onSearchBarClick(event: PointerEvent) {
+  if (event.pointerType === 'mouse') {
+    focusSearchInput()
+  }
+}
+
+/* Search keyboard selection */
+
+const selectedIndex = ref(-1)
+const disableMouseOver = ref(true)
+
+watch(results, (r) => {
+  selectedIndex.value = r.length ? 0 : -1
+  scrollToSelectedResult()
+})
+
+function scrollToSelectedResult() {
+  nextTick(() => {
+    const selectedEl = document.querySelector('.result.selected')
+    selectedEl?.scrollIntoView({ block: 'nearest' })
+  })
+}
+
+onKeyStroke('ArrowUp', (event) => {
+  event.preventDefault()
+  selectedIndex.value--
+  if (selectedIndex.value < 0) {
+    selectedIndex.value = results.value.length - 1
+  }
+  disableMouseOver.value = true
+  scrollToSelectedResult()
+})
+
+onKeyStroke('ArrowDown', (event) => {
+  event.preventDefault()
+  selectedIndex.value++
+  if (selectedIndex.value >= results.value.length) {
+    selectedIndex.value = 0
+  }
+  disableMouseOver.value = true
+  scrollToSelectedResult()
+})
+
+const router = useRouter()
+
+onKeyStroke('Enter', (e) => {
+  if (e.isComposing) return
+
+  if (e.target instanceof HTMLButtonElement && e.target.type !== 'submit')
+    return
+
+  const selectedPackage = results.value[selectedIndex.value]
+  if (e.target instanceof HTMLInputElement && !selectedPackage) {
+    e.preventDefault()
+    return
+  }
+
+  if (selectedPackage) {
+    router.go(selectedPackage.id)
+    emit('close')
+  }
+})
+
+onKeyStroke('Escape', () => {
+  emit('close')
+})
+
+// Translations
+const defaultTranslations: { modal: ModalTranslations } = {
+  modal: {
+    displayDetails: 'Display detailed list',
+    resetButtonTitle: 'Reset search',
+    backButtonTitle: 'Close search',
+    noResultsText: 'No results for',
+    footer: {
+      selectText: 'to select',
+      selectKeyAriaLabel: 'enter',
+      navigateText: 'to navigate',
+      navigateUpKeyAriaLabel: 'up arrow',
+      navigateDownKeyAriaLabel: 'down arrow',
+      closeText: 'to close',
+      closeKeyAriaLabel: 'escape'
+    }
+  }
+}
+
+const translate = createSearchTranslate(defaultTranslations)
+
+// Back
+
+onMounted(() => {
+  // Prevents going to previous site
+  window.history.pushState(null, '', null)
+})
+
+useEventListener('popstate', (event) => {
+  event.preventDefault()
+  emit('close')
+})
+
+/** Lock body */
+const isLocked = useScrollLock(inBrowser ? document.body : null)
+
+onMounted(() => {
+  nextTick(() => {
+    isLocked.value = true
+    nextTick().then(() => activate())
+  })
+})
+
+onBeforeUnmount(() => {
+  isLocked.value = false
+})
+
+function resetSearch() {
+  filterText.value = ''
+  nextTick().then(() => focusSearchInput(false))
+}
+
+function formMarkRegex(terms: Set<string>) {
+  return new RegExp(
+    [...terms]
+      .sort((a, b) => b.length - a.length)
+      .map((term) => `(${escapeRegExp(term)})`)
+      .join('|'),
+    'gi'
+  )
+}
+
+function onMouseMove(e: MouseEvent) {
+  if (!disableMouseOver.value) return
+  const el = (e.target as HTMLElement)?.closest<HTMLAnchorElement>('.result')
+  const index = Number.parseInt(el?.dataset.index!)
+  if (index >= 0 && index !== selectedIndex.value) {
+    selectedIndex.value = index
+  }
+  disableMouseOver.value = false
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      ref="el"
+      role="button"
+      :aria-owns="results?.length ? 'localsearch-list' : undefined"
+      aria-expanded="true"
+      aria-haspopup="listbox"
+      aria-labelledby="localsearch-label"
+      class="VPLocalSearchBox"
+    >
+      <div class="backdrop" @click="$emit('close')" />
+
+      <div class="shell">
+        <form
+          class="search-bar"
+          @pointerup="onSearchBarClick($event)"
+          @submit.prevent=""
+        >
+          <label
+            :title="buttonText"
+            id="localsearch-label"
+            for="localsearch-input"
+          >
+            <span aria-hidden="true" class="vpi-search search-icon local-search-icon" />
+          </label>
+          <div class="search-actions before">
+            <button
+              class="back-button"
+              :title="translate('modal.backButtonTitle')"
+              @click="$emit('close')"
+            >
+              <span class="vpi-arrow-left local-search-icon" />
+            </button>
+          </div>
+          <input
+            ref="searchInput"
+            v-model="filterText"
+            :aria-activedescendant="selectedIndex > -1 ? ('localsearch-item-' + selectedIndex) : undefined"
+            aria-autocomplete="both"
+            :aria-controls="results?.length ? 'localsearch-list' : undefined"
+            aria-labelledby="localsearch-label"
+            autocapitalize="off"
+            autocomplete="off"
+            autocorrect="off"
+            class="search-input"
+            id="localsearch-input"
+            enterkeyhint="go"
+            maxlength="64"
+            :placeholder="buttonText"
+            spellcheck="false"
+            type="search"
+          />
+          <div class="search-actions">
+            <button
+              v-if="!disableDetailedView"
+              class="toggle-layout-button"
+              type="button"
+              :class="{ 'detailed-list': showDetailedList }"
+              :title="translate('modal.displayDetails')"
+              @click="
+                selectedIndex > -1 && (showDetailedList = !showDetailedList)
+              "
+            >
+              <span class="vpi-layout-list local-search-icon" />
+            </button>
+
+            <button
+              class="clear-button"
+              type="reset"
+              :disabled="disableReset"
+              :title="translate('modal.resetButtonTitle')"
+              @click="resetSearch"
+            >
+              <span class="vpi-delete local-search-icon" />
+            </button>
+          </div>
+        </form>
+
+        <ul
+          ref="resultsEl"
+          :id="results?.length ? 'localsearch-list' : undefined"
+          :role="results?.length ? 'listbox' : undefined"
+          :aria-labelledby="results?.length ? 'localsearch-label' : undefined"
+          class="results"
+          @mousemove="onMouseMove"
+        >
+          <li
+            v-for="(p, index) in results"
+            :key="p.id"
+            :id="'localsearch-item-' + index"
+            :aria-selected="selectedIndex === index ? 'true' : 'false'"
+            role="option"
+          >
+            <a
+              :href="p.id"
+              class="result"
+              :class="{
+                selected: selectedIndex === index
+              }"
+              :aria-label="[...p.titles, p.title].join(' > ')"
+              @mouseenter="!disableMouseOver && (selectedIndex = index)"
+              @focusin="selectedIndex = index"
+              @click="$emit('close')"
+              :data-index="index"
+            >
+              <div>
+                <div class="titles">
+                  <span class="title-icon">#</span>
+                  <span
+                    v-for="(t, index) in p.titles"
+                    :key="index"
+                    class="title"
+                  >
+                    <span class="text" v-html="t" />
+                    <span class="vpi-chevron-right local-search-icon" />
+                  </span>
+                  <span class="title main">
+                    <span class="text" v-html="p.title" />
+                  </span>
+                </div>
+
+                <div v-if="showDetailedList" class="excerpt-wrapper">
+                  <div v-if="p.text" class="excerpt" inert>
+                    <div class="vp-doc" v-html="p.text" />
+                  </div>
+                  <div class="excerpt-gradient-bottom" />
+                  <div class="excerpt-gradient-top" />
+                </div>
+              </div>
+            </a>
+          </li>
+          <li
+            v-if="filterText && !results.length && enableNoResults"
+            class="no-results"
+          >
+            {{ translate('modal.noResultsText') }} "<strong>{{ filterText }}</strong
+            >"
+          </li>
+        </ul>
+
+        <div class="search-keyboard-shortcuts">
+          <span>
+            <kbd :aria-label="translate('modal.footer.navigateUpKeyAriaLabel')">
+              <span class="vpi-arrow-up navigate-icon" />
+            </kbd>
+            <kbd :aria-label="translate('modal.footer.navigateDownKeyAriaLabel')">
+              <span class="vpi-arrow-down navigate-icon" />
+            </kbd>
+            {{ translate('modal.footer.navigateText') }}
+          </span>
+          <span>
+            <kbd :aria-label="translate('modal.footer.selectKeyAriaLabel')">
+              <span class="vpi-corner-down-left navigate-icon" />
+            </kbd>
+            {{ translate('modal.footer.selectText') }}
+          </span>
+          <span>
+            <kbd :aria-label="translate('modal.footer.closeKeyAriaLabel')">esc</kbd>
+            {{ translate('modal.footer.closeText') }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.VPLocalSearchBox {
+  position: fixed;
+  z-index: 100;
+  inset: 0;
+  display: flex;
+}
+
+.backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--vp-backdrop-bg-color);
+  transition: opacity 0.5s;
+}
+
+.shell {
+  position: relative;
+  padding: 12px;
+  margin: 64px auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  background: var(--vp-local-search-bg);
+  width: min(100vw - 60px, 900px);
+  height: min-content;
+  max-height: min(100vh - 128px, 900px);
+  border-radius: 6px;
+}
+
+@media (max-width: 767px) {
+  .shell {
+    margin: 0;
+    width: 100vw;
+    height: 100vh;
+    max-height: none;
+    border-radius: 0;
+  }
+}
+
+.search-bar {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  cursor: text;
+}
+
+@media (max-width: 767px) {
+  .search-bar {
+    padding: 0 8px;
+  }
+}
+
+.search-bar:focus-within {
+  border-color: var(--vp-c-brand-1);
+}
+
+.local-search-icon {
+  display: block;
+  font-size: 18px;
+}
+
+.navigate-icon {
+  display: block;
+  font-size: 14px;
+}
+
+.search-icon {
+  margin: 8px;
+}
+
+@media (max-width: 767px) {
+  .search-icon {
+    display: none;
+  }
+}
+
+.search-input {
+  padding: 6px 12px;
+  font-size: inherit;
+  width: 100%;
+}
+
+.search-input::-webkit-search-cancel-button {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .search-input {
+    padding: 6px 4px;
+  }
+}
+
+.search-actions {
+  display: flex;
+  gap: 4px;
+}
+
+@media (any-pointer: coarse) {
+  .search-actions {
+    gap: 8px;
+  }
+}
+
+@media (min-width: 769px) {
+  .search-actions.before {
+    display: none;
+  }
+}
+
+.search-actions button {
+  padding: 8px;
+}
+
+.search-actions button:not([disabled]):hover,
+.toggle-layout-button.detailed-list {
+  color: var(--vp-c-brand-1);
+}
+
+.search-actions button.clear-button:disabled {
+  opacity: 0.37;
+}
+
+.search-keyboard-shortcuts {
+  font-size: 0.8rem;
+  opacity: 75%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  line-height: 14px;
+}
+
+.search-keyboard-shortcuts span {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+@media (max-width: 767px) {
+  .search-keyboard-shortcuts {
+    display: none;
+  }
+}
+
+.search-keyboard-shortcuts kbd {
+  background: rgba(128, 128, 128, 0.1);
+  border-radius: 4px;
+  padding: 3px 6px;
+  min-width: 24px;
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  border: 1px solid rgba(128, 128, 128, 0.15);
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+}
+
+.results {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.result {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 4px;
+  transition: none;
+  line-height: 1rem;
+  border: solid 2px var(--vp-local-search-result-border);
+  outline: none;
+}
+
+.result > div {
+  margin: 12px;
+  width: 100%;
+  overflow: hidden;
+}
+
+@media (max-width: 767px) {
+  .result > div {
+    margin: 8px;
+  }
+}
+
+.titles {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  position: relative;
+  z-index: 1001;
+  padding: 2px 0;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.title.main {
+  font-weight: 500;
+}
+
+.title-icon {
+  opacity: 0.5;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+}
+
+.title svg {
+  opacity: 0.5;
+}
+
+.result.selected {
+  --vp-local-search-result-bg: var(--vp-local-search-result-selected-bg);
+  border-color: var(--vp-local-search-result-selected-border);
+}
+
+.excerpt-wrapper {
+  position: relative;
+}
+
+.excerpt {
+  opacity: 50%;
+  pointer-events: none;
+  max-height: 140px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 4px;
+}
+
+.result.selected .excerpt {
+  opacity: 1;
+}
+
+.excerpt :deep(*) {
+  font-size: 0.8rem !important;
+  line-height: 130% !important;
+}
+
+.titles :deep(mark),
+.excerpt :deep(mark) {
+  background-color: var(--vp-local-search-highlight-bg);
+  color: var(--vp-local-search-highlight-text);
+  border-radius: 2px;
+  padding: 0 2px;
+}
+
+.excerpt :deep(.vp-code-group) .tabs {
+  display: none;
+}
+
+.excerpt :deep(.vp-code-group) div[class*='language-'] {
+  border-radius: 8px !important;
+}
+
+.excerpt-gradient-bottom {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+  height: 8px;
+  background: linear-gradient(transparent, var(--vp-local-search-result-bg));
+  z-index: 1000;
+}
+
+.excerpt-gradient-top {
+  position: absolute;
+  top: -1px;
+  left: 0;
+  width: 100%;
+  height: 8px;
+  background: linear-gradient(var(--vp-local-search-result-bg), transparent);
+  z-index: 1000;
+}
+
+.result.selected .titles,
+.result.selected .title-icon {
+  color: var(--vp-c-brand-1) !important;
+}
+
+.no-results {
+  font-size: 0.9rem;
+  text-align: center;
+  padding: 12px;
+}
+
+svg {
+  flex: none;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPMenu.vue b/src/client/theme-default-v2/components/VPMenu.vue
new file mode 100644
index 00000000..91ebb404
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPMenu.vue
@@ -0,0 +1,78 @@
+<script lang="ts" setup generic="T extends DefaultTheme.NavItem">
+import type { DefaultTheme } from 'vitepress/theme'
+import VPMenuLink from './VPMenuLink.vue'
+import VPMenuGroup from './VPMenuGroup.vue'
+
+defineProps<{
+  items?: T[]
+}>()
+</script>
+
+<template>
+  <div class="VPMenu">
+    <div v-if="items" class="items">
+      <template v-for="item in items" :key="JSON.stringify(item)">
+        <VPMenuLink v-if="'link' in item" :item />
+        <component
+          v-else-if="'component' in item"
+          :is="item.component"
+          v-bind="item.props"
+        />
+        <VPMenuGroup v-else :text="item.text" :items="item.items" />
+      </template>
+    </div>
+
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.VPMenu {
+  border-radius: 12px;
+  padding: 12px;
+  min-width: 128px;
+  border: 1px solid var(--vp-c-divider);
+  background-color: var(--vp-c-bg-elv);
+  box-shadow: var(--vp-shadow-3);
+  transition: background-color 0.5s;
+  max-height: calc(100vh - var(--vp-nav-height));
+  overflow-y: auto;
+}
+
+.VPMenu :deep(.group) {
+  margin: 0 -12px;
+  padding: 0 12px 12px;
+}
+
+.VPMenu :deep(.group + .group) {
+  border-top: 1px solid var(--vp-c-divider);
+  padding: 11px 12px 12px;
+}
+
+.VPMenu :deep(.group:last-child) {
+  padding-bottom: 0;
+}
+
+.VPMenu :deep(.group + .item) {
+  border-top: 1px solid var(--vp-c-divider);
+  padding: 11px 16px 0;
+}
+
+.VPMenu :deep(.item) {
+  padding: 0 16px;
+  white-space: nowrap;
+}
+
+.VPMenu :deep(.label) {
+  flex-grow: 1;
+  line-height: 28px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+}
+
+.VPMenu :deep(.action) {
+  padding-left: 24px;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPMenuGroup.vue b/src/client/theme-default-v2/components/VPMenuGroup.vue
new file mode 100644
index 00000000..7d12eb75
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPMenuGroup.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup generic="T extends (DefaultTheme.NavItemComponent | DefaultTheme.NavItemChildren | DefaultTheme.NavItemWithLink)">
+import type { DefaultTheme } from 'vitepress/theme'
+import VPMenuLink from './VPMenuLink.vue'
+
+defineProps<{
+  text?: string
+  items: T[]
+}>()
+</script>
+
+<template>
+  <div class="VPMenuGroup">
+    <p v-if="text" class="title">{{ text }}</p>
+
+    <template v-for="item in items" :key="JSON.stringify(item)">
+      <VPMenuLink v-if="'link' in item" :item />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.VPMenuGroup {
+  margin: 12px -12px 0;
+  border-top: 1px solid var(--vp-c-divider);
+  padding: 12px 12px 0;
+}
+
+.VPMenuGroup:first-child {
+  margin-top: 0;
+  border-top: 0;
+  padding-top: 0;
+}
+
+.VPMenuGroup + .VPMenuGroup {
+  margin-top: 12px;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.title {
+  padding: 0 12px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  white-space: nowrap;
+  transition: color 0.25s;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPMenuLink.vue b/src/client/theme-default-v2/components/VPMenuLink.vue
new file mode 100644
index 00000000..0a708186
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPMenuLink.vue
@@ -0,0 +1,63 @@
+<script lang="ts" setup generic="T extends DefaultTheme.NavItemWithLink">
+import type { DefaultTheme } from 'vitepress/theme'
+import { useData } from '../composables/data'
+import { isActive } from '../../shared'
+import VPLink from './VPLink.vue'
+
+defineProps<{
+  item: T
+}>()
+
+const { page } = useData()
+</script>
+
+<template>
+  <div class="VPMenuLink">
+    <VPLink
+      :class="{
+        active: isActive(
+          page.relativePath,
+          item.activeMatch || item.link,
+          !!item.activeMatch
+        )
+      }"
+      :href="item.link"
+      :target="item.target"
+      :rel="item.rel"
+      :no-icon="item.noIcon"
+    >
+      <span v-html="item.text"></span>
+    </VPLink>
+  </div>
+</template>
+
+<style scoped>
+.VPMenuGroup + .VPMenuLink {
+  margin: 12px -12px 0;
+  border-top: 1px solid var(--vp-c-divider);
+  padding: 12px 12px 0;
+}
+
+.link {
+  display: block;
+  border-radius: 6px;
+  padding: 0 12px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  white-space: nowrap;
+  transition:
+    background-color 0.25s,
+    color 0.25s;
+}
+
+.link:hover {
+  color: var(--vp-c-brand-1);
+  background-color: var(--vp-c-default-soft);
+}
+
+.link.active {
+  color: var(--vp-c-brand-1);
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPNav.vue b/src/client/theme-default-v2/components/VPNav.vue
new file mode 100644
index 00000000..ccbe62f6
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNav.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { inBrowser } from 'vitepress'
+import { computed, provide, watchEffect } from 'vue'
+import { useData } from '../composables/data'
+import { navInjectionKey, useNav } from '../composables/nav'
+import VPNavBar from './VPNavBar.vue'
+import VPNavScreen from './VPNavScreen.vue'
+
+const { isScreenOpen, closeScreen, toggleScreen } = useNav()
+const { frontmatter } = useData()
+
+const hasNavbar = computed(() => {
+  return frontmatter.value.navbar !== false
+})
+
+provide(navInjectionKey, { closeScreen })
+
+watchEffect(() => {
+  if (inBrowser) {
+    document.documentElement.classList.toggle('hide-nav', !hasNavbar.value)
+  }
+})
+</script>
+
+<template>
+  <header v-if="hasNavbar" class="vp-nav">
+    <VPNavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen">
+      <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
+      <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
+      <template #nav-bar-content-before><slot name="nav-bar-content-before" /></template>
+      <template #nav-bar-content-after><slot name="nav-bar-content-after" /></template>
+    </VPNavBar>
+    <VPNavScreen :open="isScreenOpen">
+      <template #nav-screen-content-before><slot name="nav-screen-content-before" /></template>
+      <template #nav-screen-content-after><slot name="nav-screen-content-after" /></template>
+    </VPNavScreen>
+  </header>
+</template>
+
+<style>
+.vp-nav {
+  position: relative;
+  top: var(--vp-layout-top-height, 0px);
+  /*rtl:ignore*/
+  left: 0;
+  z-index: var(--vp-z-index-nav);
+  width: 100%;
+  height: var(--vp-nav-height);
+  /* pointer-events: none; */
+
+  @media (min-width: 1024px) {
+    position: fixed;
+  }
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPNavBar.vue b/src/client/theme-default-v2/components/VPNavBar.vue
new file mode 100644
index 00000000..026d45e6
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavBar.vue
@@ -0,0 +1,166 @@
+<script lang="ts" setup>
+import { useWindowScroll } from '@vueuse/core'
+import { ref, watchPostEffect } from 'vue'
+import { useLayout } from '../composables/layout'
+import VPNavBarAppearance from './VPNavBarAppearance.vue'
+import VPNavBarExtra from './VPNavBarExtra.vue'
+import VPNavBarHamburger from './VPNavBarHamburger.vue'
+import VPNavBarMenu from './VPNavBarMenu.vue'
+import VPNavBarSearch from './VPNavBarSearch.vue'
+import VPNavBarSocialLinks from './VPNavBarSocialLinks.vue'
+import VPNavBarTitle from './VPNavBarTitle.vue'
+import VPNavBarTranslations from './VPNavBarTranslations.vue'
+
+const props = defineProps<{
+  isScreenOpen: boolean
+}>()
+
+defineEmits<{
+  'toggle-screen': []
+}>()
+
+const { y } = useWindowScroll()
+const { isHome, hasSidebar } = useLayout()
+
+const classes = ref<Record<string, boolean>>({})
+
+// TODO: Organize these classes.
+watchPostEffect(() => {
+  classes.value = {
+    'has-sidebar': hasSidebar.value,
+    'home': isHome.value,
+    'vp-nav-bar__has-scrolled': y.value > 0,
+    'vp-nav-bar__is-screen-open': props.isScreenOpen
+  }
+})
+</script>
+
+<template>
+  <div class="vp-nav-bar" :class="classes">
+    <div class="vp-nav-bar__wrapper">
+      <div class="vp-nav-bar__container">
+        <div class="vp-nav-bar__title">
+          <VPNavBarTitle>
+            <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
+            <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
+          </VPNavBarTitle>
+        </div>
+
+        <div class="vp-nav-bar__content">
+          <div class="vp-nav-bar__content-body">
+            <slot name="nav-bar-content-before" />
+            <VPNavBarSearch />
+            <VPNavBarMenu class="menu" />
+            <VPNavBarTranslations class="translations" />
+            <VPNavBarAppearance class="appearance" />
+            <VPNavBarSocialLinks class="social-links" />
+            <VPNavBarExtra class="extra" />
+            <slot name="nav-bar-content-after" />
+            <VPNavBarHamburger :active="isScreenOpen" @click="$emit('toggle-screen')" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.vp-nav-bar {
+  position: relative;
+  /* TODO: Maybe consider a way to customize the border via css var? */
+  border-bottom: 1px solid var(--vp-c-gutter);
+  height: var(--vp-nav-height);
+  white-space: nowrap;
+  transition: background-color 0.25s;
+
+  /* TODO: Why do we need this? */
+  /* pointer-events: none; */
+}
+
+.vp-nav-bar__has-scrolled {
+  @media (min-width: 1024px) {
+    background-color: var(--vp-nav-bg-color);
+  }
+}
+
+.vp-nav-bar__is-screen-open {
+  background-color: var(--vp-nav-bg-color);
+  transition: none;
+}
+
+.vp-nav-bar__wrapper {
+  padding: 0 12px 0 24px;
+
+  @media (min-width: 768px) {
+    padding: 0 32px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPNavBar.has-sidebar .wrapper {
+    padding: 0;
+  }
+}
+
+.vp-nav-bar__container {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  /* pointer-events: none; */
+}
+
+/* .vp-nav-bar__container > .title, */
+/* .vp-nav-bar__container > .content { */
+  /* pointer-events: none; */
+/* } */
+
+/* .vp-nav-bar__container :deep(*) { */
+  /* pointer-events: auto; */
+/* } */
+
+.vp-nav-bar__title {
+  flex-shrink: 0;
+}
+
+.vp-nav-bar__content {
+  flex-grow: 1;
+}
+
+.vp-nav-bar__content-body {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+/* @media (max-width: 767px) {
+  .content-body {
+    column-gap: 0.5rem;
+  }
+} */
+
+.menu + .translations::before,
+.menu + .appearance::before,
+.menu + .social-links::before,
+.translations + .appearance::before,
+.appearance + .social-links::before {
+  margin-right: 8px;
+  margin-left: 8px;
+  width: 1px;
+  height: 24px;
+  background-color: var(--vp-c-divider);
+  content: "";
+}
+
+.menu + .appearance::before,
+.translations + .appearance::before {
+  margin-right: 16px;
+}
+
+.appearance + .social-links::before {
+  margin-left: 16px;
+}
+
+.social-links {
+  margin-right: -8px;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPNavBarAppearance.vue b/src/client/theme-default-v2/components/VPNavBarAppearance.vue
new file mode 100644
index 00000000..523e5b6b
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavBarAppearance.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { useData } from '../composables/data'
+import VPSwitchAppearance from './VPSwitchAppearance.vue'
+
+const { site } = useData()
+</script>
+
+<template>
+  <div
+    v-if="
+      site.appearance &&
+      site.appearance !== 'force-dark' &&
+      site.appearance !== 'force-auto'
+    "
+    class="VPNavBarAppearance"
+  >
+    <VPSwitchAppearance />
+  </div>
+</template>
+
+<style scoped>
+.VPNavBarAppearance {
+  display: none;
+}
+
+@media (min-width: 1280px) {
+  .VPNavBarAppearance {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPNavBarExtra.vue b/src/client/theme-default-v2/components/VPNavBarExtra.vue
new file mode 100644
index 00000000..988a814a
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavBarExtra.vue
@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import VPFlyout from './VPFlyout.vue'
+import VPMenuLink from './VPMenuLink.vue'
+import VPSwitchAppearance from './VPSwitchAppearance.vue'
+import VPSocialLinks from './VPSocialLinks.vue'
+import { useData } from '../composables/data'
+import { useLangs } from '../composables/langs'
+
+const { site, theme } = useData()
+const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
+
+const hasExtraContent = computed(
+  () =>
+    (localeLinks.value.length && currentLang.value.label) ||
+    site.value.appearance ||
+    theme.value.socialLinks
+)
+</script>
+
+<template>
+  <VPFlyout
+    v-if="hasExtraContent"
+    class="VPNavBarExtra"
+    label="extra navigation"
+  >
+    <div
+      v-if="localeLinks.length && currentLang.label"
+      class="group translations"
+    >
+      <p class="trans-title">{{ currentLang.label }}</p>
+
+      <template v-for="locale in localeLinks" :key="locale.link">
+        <VPMenuLink :item="locale" />
+      </template>
+    </div>
+
+    <div
+      v-if="
+        site.appearance &&
+        site.appearance !== 'force-dark' &&
+        site.appearance !== 'force-auto'
+      "
+      class="group"
+    >
+      <div class="item appearance">
+        <p class="label">
+          {{ theme.darkModeSwitchLabel || 'Appearance' }}
+        </p>
+        <div class="appearance-action">
+          <VPSwitchAppearance />
+        </div>
+      </div>
+    </div>
+
+    <div v-if="theme.socialLinks" class="group">
+      <div class="item social-links">
+        <VPSocialLinks class="social-links-list" :links="theme.socialLinks" />
+      </div>
+    </div>
+  </VPFlyout>
+</template>
+
+<style scoped>
+.VPNavBarExtra {
+  display: none;
+  margin-right: -12px;
+}
+
+@media (min-width: 768px) {
+  .VPNavBarExtra {
+    display: block;
+  }
+}
+
+@media (min-width: 1280px) {
+  .VPNavBarExtra {
+    display: none;
+  }
+}
+
+.trans-title {
+  padding: 0 24px 0 12px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+}
+
+.item.appearance,
+.item.social-links {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+}
+
+.item.appearance {
+  min-width: 176px;
+}
+
+.appearance-action {
+  margin-right: -2px;
+}
+
+.social-links-list {
+  margin: -4px -8px;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPNavBarHamburger.vue b/src/client/theme-default-v2/components/VPNavBarHamburger.vue
new file mode 100644
index 00000000..dabc1bd5
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavBarHamburger.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+defineProps<{
+  active: boolean
+}>()
+
+defineEmits<{
+  click: []
+}>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="vp-nav-bar-hamburger"
+    :class="{ 'vp-nav-bar-hamburger--is-active': active }"
+    aria-label="mobile navigation"
+    :aria-expanded="active"
+    aria-controls="vp-nav-screen"
+    @click="$emit('click')"
+  >
+    <span class="vp-nav-bar-hamburger__container">
+      <span class="vp-nav-bar-hamburger__top" />
+      <span class="vp-nav-bar-hamburger__middle" />
+      <span class="vp-nav-bar-hamburger__bottom" />
+    </span>
+  </button>
+</template>
+
+<style>
+.vp-nav-bar-hamburger {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: var(--vp-nav-height);
+
+  @media (min-width: 768px) {
+    display: none;
+  }
+}
+
+:where(.vp-nav-bar-hamburger:hover) {
+  .vp-nav-bar-hamburger__top    { top: 0; left: 0; transform: translateX(4px); }
+  .vp-nav-bar-hamburger__middle { top: 6px; left: 0; transform: translateX(0); }
+  .vp-nav-bar-hamburger__bottom { top: 12px; left: 0; transform: translateX(8px); }
+}
+
+:where(.vp-nav-bar-hamburger--is-active),
+:where(.vp-nav-bar-hamburger--is-active:hover) {
+  .vp-nav-bar-hamburger__top,
+  .vp-nav-bar-hamburger__middle,
+  .vp-nav-bar-hamburger__bottom {
+    background-color: var(--vp-c-text-2);
+    transition: top .25s, background-color .25s, transform .25s;
+  }
+
+  .vp-nav-bar-hamburger__top    { top: 6px; transform: translateX(0) rotate(225deg); }
+  .vp-nav-bar-hamburger__middle { top: 6px; transform: translateX(16px); }
+  .vp-nav-bar-hamburger__bottom { top: 6px; transform: translateX(0) rotate(135deg); }
+}
+
+.vp-nav-bar-hamburger__container {
+  position: relative;
+  width: 16px;
+  height: 14px;
+  overflow: hidden;
+}
+
+.vp-nav-bar-hamburger__top,
+.vp-nav-bar-hamburger__middle,
+.vp-nav-bar-hamburger__bottom {
+  position: absolute;
+  width: 16px;
+  height: 2px;
+  background-color: var(--vp-c-text-1);
+  transition: top .25s, background-color .5s, transform .25s;
+}
+
+.vp-nav-bar-hamburger__top    { top: 0; left: 0; transform: translateX(0); }
+.vp-nav-bar-hamburger__middle { top: 6px; left: 0; transform: translateX(8px); }
+.vp-nav-bar-hamburger__bottom { top: 12px; left: 0; transform: translateX(4px); }
+</style>
diff --git a/src/client/theme-default-v2/components/VPNavBarMenu.vue b/src/client/theme-default-v2/components/VPNavBarMenu.vue
new file mode 100644
index 00000000..c4d741b9
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavBarMenu.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { useData } from '../composables/data'
+import VPNavBarMenuLink from './VPNavBarMenuLink.vue'
+import VPNavBarMenuGroup from './VPNavBarMenuGroup.vue'
+
+const { theme } = useData()
+</script>
+
+<template>
+  <nav
+    v-if="theme.nav"
+    aria-labelledby="main-nav-aria-label"
+    class="VPNavBarMenu"
+  >
+    <span id="main-nav-aria-label" class="visually-hidden">
+      Main Navigation
+    </span>
+    <template v-for="item in theme.nav" :key="JSON.stringify(item)">
+      <VPNavBarMenuLink v-if="'link' in item" :item />
+      <component
+        v-else-if="'component' in item"
+        :is="item.component"
+        v-bind="item.props"
+      />
+      <VPNavBarMenuGroup v-else :item />
+    </template>
+  </nav>
+</template>
+
+<style scoped>
+.VPNavBarMenu {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .VPNavBarMenu {
+    display: flex;
+  }
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPNavBarMenuGroup.vue b/src/client/theme-default-v2/components/VPNavBarMenuGroup.vue
new file mode 100644
index 00000000..12e8cf6f
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavBarMenuGroup.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import type { DefaultTheme } from 'vitepress/theme'
+import { computed } from 'vue'
+import { useData } from '../composables/data'
+import { isActive } from '../../shared'
+import VPFlyout from './VPFlyout.vue'
+
+const props = defineProps<{
+  item: DefaultTheme.NavItemWithChildren
+}>()
+
+const { page } = useData()
+
+const isChildActive = (navItem: DefaultTheme.NavItem) => {
+  if ('component' in navItem) return false
+
+  if ('link' in navItem) {
+    return isActive(
+      page.value.relativePath,
+      navItem.link,
+      !!props.item.activeMatch
+    )
+  }
+
+  return navItem.items.some(isChildActive)
+}
+
+const childrenActive = computed(() => isChildActive(props.item))
+</script>
+
+<template>
+  <VPFlyout
+    :class="{
+      VPNavBarMenuGroup: true,
+      active:
+        isActive(page.relativePath, item.activeMatch, !!item.activeMatch) ||
+        childrenActive
+    }"
+    :button="item.text"
+    :items="item.items"
+  />
+</template>
diff --git a/src/client/theme-default-v2/components/VPNavBarMenuLink.vue b/src/client/theme-default-v2/components/VPNavBarMenuLink.vue
new file mode 100644
index 00000000..6f504791
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavBarMenuLink.vue
@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import type { DefaultTheme } from 'vitepress/theme'
+import { useData } from '../composables/data'
+import { isActive } from '../../shared'
+import VPLink from './VPLink.vue'
+
+defineProps<{
+  item: DefaultTheme.NavItemWithLink
+}>()
+
+const { page } = useData()
+</script>
+
+<template>
+  <VPLink
+    :class="{
+      VPNavBarMenuLink: true,
+      active: isActive(
+        page.relativePath,
+        item.activeMatch || item.link,
+        !!item.activeMatch
+      )
+    }"
+    :href="item.link"
+    :target="item.target"
+    :rel="item.rel"
+    :no-icon="item.noIcon"
+    tabindex="0"
+  >
+    <span v-html="item.text"></span>
+  </VPLink>
+</template>
+
+<style scoped>
+.VPNavBarMenuLink {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  line-height: var(--vp-nav-height);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.VPNavBarMenuLink.active {
+  color: var(--vp-c-brand-1);
+}
+
+.VPNavBarMenuLink:hover {
+  color: var(--vp-c-brand-1);
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPNavBarSearch.vue b/src/client/theme-default-v2/components/VPNavBarSearch.vue
new file mode 100644
index 00000000..e04afe39
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavBarSearch.vue
@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import '@docsearch/css'
+import { onKeyStroke } from '@vueuse/core'
+import type { DefaultTheme } from 'vitepress/theme'
+import { defineAsyncComponent, onMounted, onUnmounted, ref } from 'vue'
+import { useData } from '../composables/data'
+import VPNavBarSearchButton from './VPNavBarSearchButton.vue'
+
+const VPLocalSearchBox = __VP_LOCAL_SEARCH__
+  ? defineAsyncComponent(() => import('./VPLocalSearchBox.vue'))
+  : () => null
+
+const VPAlgoliaSearchBox = __ALGOLIA__
+  ? defineAsyncComponent(() => import('./VPAlgoliaSearchBox.vue'))
+  : () => null
+
+const { theme } = useData()
+
+// to avoid loading the docsearch js upfront (which is more than 1/3 of the
+// payload), we delay initializing it until the user has actually clicked or
+// hit the hotkey to invoke it.
+const loaded = ref(false)
+const actuallyLoaded = ref(false)
+
+const preconnect = () => {
+  const id = 'VPAlgoliaPreconnect'
+
+  const rIC = window.requestIdleCallback || setTimeout
+  rIC(() => {
+    const preconnect = document.createElement('link')
+    preconnect.id = id
+    preconnect.rel = 'preconnect'
+    preconnect.href = `https://${
+      ((theme.value.search?.options as DefaultTheme.AlgoliaSearchOptions) ??
+        theme.value.algolia)!.appId
+    }-dsn.algolia.net`
+    preconnect.crossOrigin = ''
+    document.head.appendChild(preconnect)
+  })
+}
+
+onMounted(() => {
+  if (!__ALGOLIA__) {
+    return
+  }
+
+  preconnect()
+
+  const handleSearchHotKey = (event: KeyboardEvent) => {
+    if (
+      (event.key?.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) ||
+      (!isEditingContent(event) && event.key === '/')
+    ) {
+      event.preventDefault()
+      load()
+      remove()
+    }
+  }
+
+  const remove = () => {
+    window.removeEventListener('keydown', handleSearchHotKey)
+  }
+
+  window.addEventListener('keydown', handleSearchHotKey)
+
+  onUnmounted(remove)
+})
+
+function load() {
+  if (!loaded.value) {
+    loaded.value = true
+    setTimeout(poll, 16)
+  }
+}
+
+function poll() {
+  // programmatically open the search box after initialize
+  const e = new Event('keydown') as any
+
+  e.key = 'k'
+  e.metaKey = true
+
+  window.dispatchEvent(e)
+
+  setTimeout(() => {
+    if (!document.querySelector('.DocSearch-Modal')) {
+      poll()
+    }
+  }, 16)
+}
+
+function isEditingContent(event: KeyboardEvent): boolean {
+  const element = event.target as HTMLElement
+  const tagName = element.tagName
+
+  return (
+    element.isContentEditable ||
+    tagName === 'INPUT' ||
+    tagName === 'SELECT' ||
+    tagName === 'TEXTAREA'
+  )
+}
+
+// Local search
+
+const showSearch = ref(false)
+
+if (__VP_LOCAL_SEARCH__) {
+  onKeyStroke('k', (event) => {
+    if (event.ctrlKey || event.metaKey) {
+      event.preventDefault()
+      showSearch.value = true
+    }
+  })
+
+  onKeyStroke('/', (event) => {
+    if (!isEditingContent(event)) {
+      event.preventDefault()
+      showSearch.value = true
+    }
+  })
+}
+
+const provider = __ALGOLIA__ ? 'algolia' : __VP_LOCAL_SEARCH__ ? 'local' : ''
+</script>
+
+<template>
+  <div class="vp-nav-bar-search">
+    <template v-if="provider === 'local'">
+      <VPLocalSearchBox
+        v-if="showSearch"
+        @close="showSearch = false"
+      />
+
+      <div id="local-search">
+        <VPNavBarSearchButton @click="showSearch = true" />
+      </div>
+    </template>
+
+    <template v-else-if="provider === 'algolia'">
+      <VPAlgoliaSearchBox
+        v-if="loaded"
+        :algolia="theme.search?.options ?? theme.algolia"
+        @vue:beforeMount="actuallyLoaded = true"
+      />
+
+      <div v-if="!actuallyLoaded" id="docsearch">
+        <VPNavBarSearchButton @click="load" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style>
+.vp-nav-bar-search {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPNavBarSearchButton.vue b/src/client/theme-default-v2/components/VPNavBarSearchButton.vue
new file mode 100644
index 00000000..5830f487
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavBarSearchButton.vue
@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import type { ButtonTranslations } from '../../../../types/local-search'
+import { createSearchTranslate } from '../support/translation'
+
+// button translations
+const defaultTranslations: { button: ButtonTranslations } = {
+  button: {
+    buttonText: 'Search',
+    buttonAriaLabel: 'Search'
+  }
+}
+
+const translate = createSearchTranslate(defaultTranslations)
+</script>
+
+<template>
+  <button
+    type="button"
+    class="vp-nav-bar-search-button"
+    :aria-label="translate('button.buttonAriaLabel')"
+    aria-keyshortcuts="/ control+k meta+k"
+  >
+    <!-- <span class="vp-nav-bar-search-button__container"> -->
+      <span class="vp-nav-bar-search-button__icon vpi-search"></span>
+      <span class="DocSearch-Button-Placeholder">{{ translate('button.buttonText') }}</span>
+    <!-- </span> -->
+    <!-- <span class="DocSearch-Button-Keys">
+      <kbd class="DocSearch-Button-Key"></kbd>
+      <kbd class="DocSearch-Button-Key"></kbd>
+    </span> -->
+  </button>
+</template>
+
+<style>
+.vp-nav-bar-search-button {
+  --docsearch-muted-color: var(--docsearch-text-color);
+  --docsearch-searchbox-background: transparent;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: var(--vp-nav-height);
+}
+
+.vp-nav-bar-search-button__icon {
+  width: 20px;
+  height: 20px;
+  color: var(--vp-c-text-1);
+}
+
+/**
+ * Styles for loaded Algolia components. Algolia uses `DocSearch` as a
+ * class name to their elements, such as `DocSearch-Button`.
+ */
+[class*='DocSearch'] {
+  --docsearch-actions-height: auto;
+  --docsearch-actions-width: auto;
+  --docsearch-background-color: var(--vp-c-bg-soft);
+  --docsearch-container-background: var(--vp-backdrop-bg-color);
+  --docsearch-focus-color: var(--vp-c-brand-1);
+  --docsearch-footer-background: var(--vp-c-bg-1);
+  --docsearch-highlight-color: var(--vp-c-brand-1);
+  --docsearch-hit-background: var(--vp-c-default-soft);
+  --docsearch-hit-color: var(--vp-c-text-1);
+  --docsearch-hit-highlight-color: var(--vp-c-brand-soft);
+  --docsearch-icon-color: var(--vp-c-text-2);
+  --docsearch-key-background: transparent;
+  --docsearch-key-color: var(--vp-c-text-2);
+  --docsearch-modal-background: var(--vp-c-bg-soft);
+  --docsearch-muted-color: var(--vp-c-text-2);
+  --docsearch-primary-color: var(--vp-c-brand-1);
+  --docsearch-searchbox-focus-background: transparent;
+  --docsearch-secondary-text-color: var(--vp-c-text-2);
+  --docsearch-soft-primary-color: var(--vp-c-brand-soft);
+  --docsearch-subtle-color: var(--vp-c-divider);
+  --docsearch-success-color: var(--vp-c-brand-soft);
+  --docsearch-text-color: var(--vp-c-text-1);
+}
+
+.dark [class*='DocSearch-button'] {
+  --docsearch-modal-shadow: none;
+}
+
+.DocSearch-Button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: 6px;
+  padding: 0;
+  width: 40px;
+  height: var(--vp-nav-height);
+  background-color: transparent;
+  color: var(--vp-c-text-1);
+}
+
+.DocSearch-Search-Icon {
+  width: 20px;
+  height: 20px;
+  color: inherit !important;
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button {
+    /* --docsearch-muted-color: var(--docsearch-secondary-text-color);
+    --docsearch-searchbox-background: var(--vp-c-bg-alt); */
+  }
+
+  .DocSearch-Search-Icon {
+    width: 15px;
+    height: 15px;
+  }
+
+  .DocSearch-Button-Placeholder {
+    /* font-size: 13px; */
+  }
+}
+
+.DocSearch-Button-Keys {
+  min-width: auto;
+  margin: 0;
+  padding: 4px 6px;
+  background-color: var(--docsearch-key-background);
+  border: 1px solid var(--docsearch-subtle-color);
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--docsearch-key-color);
+}
+
+.DocSearch-Button-Keys > * {
+  display: none;
+}
+
+.DocSearch-Button-Keys:after {
+  /*rtl:ignore*/
+  direction: ltr;
+  content: 'Ctrl K';
+}
+
+.mac .DocSearch-Button-Keys:after {
+  content: '\2318  K';
+}
+
+.DocSearch-Clear {
+  padding: 0 8px;
+}
+
+.DocSearch-Commands-Key {
+  border: 1px solid var(--docsearch-subtle-color);
+  border-radius: 4px;
+  padding: 4px;
+}
+
+.DocSearch-Hit a:focus-visible {
+  outline: 2px solid var(--docsearch-focus-color);
+}
+
+.DocSearch-Logo [class^='cls-'] {
+  fill: currentColor;
+}
+
+.DocSearch-SearchBar + .DocSearch-Footer {
+  border-top-color: transparent;
+}
+
+.DocSearch-Title {
+  font-size: revert;
+  line-height: revert;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPNavBarSocialLinks.vue b/src/client/theme-default-v2/components/VPNavBarSocialLinks.vue
new file mode 100644
index 00000000..1adc8037
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavBarSocialLinks.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { useData } from '../composables/data'
+import VPSocialLinks from './VPSocialLinks.vue'
+
+const { theme } = useData()
+</script>
+
+<template>
+  <VPSocialLinks
+    v-if="theme.socialLinks"
+    class="VPNavBarSocialLinks"
+    :links="theme.socialLinks"
+  />
+</template>
+
+<style scoped>
+.VPNavBarSocialLinks {
+  display: none;
+}
+
+@media (min-width: 1280px) {
+  .VPNavBarSocialLinks {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPNavBarTitle.vue b/src/client/theme-default-v2/components/VPNavBarTitle.vue
new file mode 100644
index 00000000..3f0c1d37
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavBarTitle.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from '../composables/data'
+import { useLangs } from '../composables/langs'
+import { normalizeLink } from '../support/utils'
+import VPImage from './VPImage.vue'
+
+const { site, theme } = useData()
+const { currentLang } = useLangs()
+
+const link = computed(() =>
+  typeof theme.value.logoLink === 'string'
+    ? theme.value.logoLink
+    : theme.value.logoLink?.link
+)
+
+const rel = computed(() =>
+  typeof theme.value.logoLink === 'string'
+    ? undefined
+    : theme.value.logoLink?.rel
+)
+
+const target = computed(() =>
+  typeof theme.value.logoLink === 'string'
+    ? undefined
+    : theme.value.logoLink?.target
+)
+</script>
+
+<template>
+  <div class="vp-nav-bar-title">
+    <a
+      class="vp-nav-bar-title__link"
+      :href="link ?? normalizeLink(currentLang.link)"
+      :rel
+      :target
+    >
+      <slot name="nav-bar-title-before" />
+      <VPImage v-if="theme.logo" class="vp-nav-bar-title__logo" :image="theme.logo" />
+      <span v-if="theme.siteTitle" class="vp-nav-bar-title__name" v-html="theme.siteTitle"></span>
+      <span v-else-if="theme.siteTitle === undefined" class="vp-nav-bar-title__name">{{ site.title }}</span>
+      <slot name="nav-bar-title-after" />
+    </a>
+  </div>
+</template>
+
+<style>
+.vp-nav-bar-title__link {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--vp-nav-height);
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  transition: opacity 0.25s;
+
+  &:hover {
+    opacity: 0.6;
+  }
+
+  @media (min-width: 960px) {
+    flex-shrink: 0;
+  }
+}
+
+.vp-nav-bar-title__logo {
+  height: var(--vp-nav-logo-height);
+}
+
+.vp-nav-bar-title__logo + .vp-nav-bar-title__name {
+  margin-left: 4px;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPNavBarTranslations.vue b/src/client/theme-default-v2/components/VPNavBarTranslations.vue
new file mode 100644
index 00000000..a92aad8c
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavBarTranslations.vue
@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import VPFlyout from './VPFlyout.vue'
+import VPMenuLink from './VPMenuLink.vue'
+import { useData } from '../composables/data'
+import { useLangs } from '../composables/langs'
+
+const { theme } = useData()
+const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
+</script>
+
+<template>
+  <VPFlyout
+    v-if="localeLinks.length && currentLang.label"
+    class="VPNavBarTranslations"
+    icon="vpi-languages"
+    :label="theme.langMenuLabel || 'Change language'"
+  >
+    <div class="items">
+      <p class="title">{{ currentLang.label }}</p>
+
+      <template v-for="locale in localeLinks" :key="locale.link">
+        <VPMenuLink :item="locale" />
+      </template>
+    </div>
+  </VPFlyout>
+</template>
+
+<style scoped>
+.VPNavBarTranslations {
+  display: none;
+}
+
+@media (min-width: 1280px) {
+  .VPNavBarTranslations {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.title {
+  padding: 0 24px 0 12px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPNavScreen.vue b/src/client/theme-default-v2/components/VPNavScreen.vue
new file mode 100644
index 00000000..d9d3b776
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavScreen.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { useScrollLock } from '@vueuse/core'
+import { inBrowser } from 'vitepress'
+import { ref } from 'vue'
+import VPNavScreenMenu from './VPNavScreenMenu.vue'
+import VPNavScreenSocialLinks from './VPNavScreenSocialLinks.vue'
+import VPNavScreenActions from './VPNavScreenActions.vue'
+
+defineProps<{
+  open: boolean
+}>()
+
+const screen = ref<HTMLElement | null>(null)
+const isLocked = useScrollLock(inBrowser ? document.body : null)
+</script>
+
+<template>
+  <transition
+    name="fade"
+    @enter="isLocked = true"
+    @after-leave="isLocked = false"
+  >
+    <div v-if="open" class="vp-nav-screen" ref="screen" id="VPNavScreen">
+      <div class="vp-nav-screen__container">
+        <slot name="nav-screen-content-before" />
+        <VPNavScreenMenu />
+        <VPNavScreenActions />
+        <VPNavScreenSocialLinks />
+        <slot name="nav-screen-content-after" />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style>
+.vp-nav-screen {
+  position: fixed;
+  top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));
+  /*rtl:ignore*/
+  right: 0;
+  bottom: 0;
+  /*rtl:ignore*/
+  left: 0;
+  padding: 0 24px;
+  width: 100%;
+  background-color: var(--vp-nav-screen-bg-color);
+  overflow-y: auto;
+  transition: background-color 0.25s;
+  pointer-events: auto;
+
+  @media (min-width: 768px) {
+    display: none;
+  }
+}
+
+.vp-nav-screen.fade-enter-active,
+.vp-nav-screen.fade-leave-active {
+  transition: opacity 0.25s;
+
+  .vp-nav-screen__container {
+    transition: transform 0.25s ease;
+  }
+}
+
+.vp-nav-screen.fade-enter-from,
+.vp-nav-screen.fade-leave-to {
+  opacity: 0;
+
+  .vp-nav-screen__container {
+    transform: translateY(-8px);
+  }
+}
+
+.vp-nav-screen__container {
+  margin: 0 auto;
+  padding: 24px 0 96px;
+  max-width: 288px;
+}
+
+.vp-nav-screen-menu + .vp-nav-screen-actions,
+.vp-nav-screen-menu + .vp-nav-screen-social-links {
+  margin-top: 32px;
+}
+
+.vp-nav-screen-actions + .vp-nav-screen-social-links {
+  margin-top: 24px;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPNavScreenActions.vue b/src/client/theme-default-v2/components/VPNavScreenActions.vue
new file mode 100644
index 00000000..abb8811b
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavScreenActions.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { useLangs } from '../composables/langs'
+import { computed } from 'vue'
+import { useData } from '../composables/data'
+import VPSwitchAppearance from './VPSwitchAppearance.vue'
+
+const { site, theme } = useData()
+const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
+
+const state = computed(() => {
+  const appearance = site.value.appearance
+
+  const hasLanguages = localeLinks.value.length && currentLang.value.label
+  const hasTheme = appearance && appearance !== 'force-dark' && appearance !== 'force-auto'
+  const hasAction = hasLanguages || hasTheme
+
+  return {
+    hasAction,
+    hasTheme,
+    hasLanguages
+  }
+})
+
+function onLanguageSelect(e: Event) {
+  const select = e.target as HTMLSelectElement
+  window.location.href = select.value
+}
+</script>
+
+<template>
+  <div class="vp-nav-screen-actions">
+    <div v-if="state.hasLanguages" class="vp-nav-screen-actions__item">
+      <!-- TODO: i18n -->
+      <div class="vp-nav-screen-actions__label">
+        Language
+      </div>
+      <div class="vp-nav-screen-actions__value">
+        <div class="vp-nav-screen-actions__select">
+          <select
+            class="vp-nav-screen-actions__select-input"
+            id="vp-nav-screen-actions-language"
+            @change="onLanguageSelect"
+          >
+            <option :value="currentLang.link" selected>
+              {{ currentLang.label }}
+            </option>
+            <option v-for="locale in localeLinks" :key="locale.link" :value="locale.link">
+              {{ locale.text }}
+            </option>
+          </select>
+          <div class="vp-nav-screen-actions__select-icon vpi-chevron-down" />
+        </div>
+      </div>
+    </div>
+    <div v-if="state.hasTheme" class="vp-nav-screen-actions__item">
+      <div class="vp-nav-screen-actions__label">
+        {{ theme.darkModeSwitchLabel || 'Appearance' }}
+      </div>
+      <div class="vp-nav-screen-actions__value">
+        <VPSwitchAppearance />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.vp-nav-screen-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+  border-radius: 6px;
+  background-color: var(--vp-c-gutter);
+  overflow: clip;
+}
+
+.vp-nav-screen-actions__item {
+  display: flex;
+  align-items: center;
+  padding: 0 8px 0 16px;
+  width: 100%;
+  height: 48px;
+  background-color: var(--vp-c-bg-2);
+}
+
+.vp-nav-screen-actions__label {
+  flex-shrink: 0;
+  width: 112px;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.vp-nav-screen-actions__value {
+  display: flex;
+  justify-content: flex-end;
+  flex-grow: 1;
+}
+
+.vp-nav-screen-actions__select {
+  position: relative;
+  width: 100%;
+}
+
+.vp-nav-screen-actions__select-input {
+  position: relative;
+  z-index: 1;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 0 10px;
+  width: 100%;
+  height: 32px;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+  background-color: transparent;
+}
+
+.vp-nav-screen-actions__select-icon {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 0;
+  width: 16px;
+  height: 16px;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPNavScreenAppearance.vue b/src/client/theme-default-v2/components/VPNavScreenAppearance.vue
new file mode 100644
index 00000000..4f7d2640
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavScreenAppearance.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { useData } from '../composables/data'
+import VPSwitchAppearance from './VPSwitchAppearance.vue'
+
+const { site, theme } = useData()
+</script>
+
+<template>
+  <div
+    v-if="
+      site.appearance &&
+      site.appearance !== 'force-dark' &&
+      site.appearance !== 'force-auto'
+    "
+    class="VPNavScreenAppearance"
+  >
+    <p class="text">
+      {{ theme.darkModeSwitchLabel || 'Appearance' }}
+    </p>
+    <VPSwitchAppearance />
+  </div>
+</template>
+
+<style scoped>
+.VPNavScreenAppearance {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 8px;
+  padding: 12px 14px 12px 16px;
+  background-color: var(--vp-c-bg-soft);
+}
+
+.text {
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPNavScreenMenu.vue b/src/client/theme-default-v2/components/VPNavScreenMenu.vue
new file mode 100644
index 00000000..9c248ebd
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavScreenMenu.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { useData } from '../composables/data'
+import VPNavScreenMenuLink from './VPNavScreenMenuLink.vue'
+import VPNavScreenMenuGroup from './VPNavScreenMenuGroup.vue'
+
+const { theme } = useData()
+</script>
+
+<template>
+  <nav v-if="theme.nav" class="vp-nav-screen-menu">
+    <template v-for="item in theme.nav" :key="JSON.stringify(item)">
+      <VPNavScreenMenuLink v-if="'link' in item" :item />
+      <component
+        v-else-if="'component' in item"
+        :is="item.component"
+        v-bind="item.props"
+        screen-menu
+      />
+      <VPNavScreenMenuGroup
+        v-else
+        :text="item.text || ''"
+        :items="item.items"
+      />
+    </template>
+  </nav>
+</template>
diff --git a/src/client/theme-default-v2/components/VPNavScreenMenuGroup.vue b/src/client/theme-default-v2/components/VPNavScreenMenuGroup.vue
new file mode 100644
index 00000000..d2b6e50d
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavScreenMenuGroup.vue
@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
+import VPNavScreenMenuGroupSection from './VPNavScreenMenuGroupSection.vue'
+
+const props = defineProps<{
+  text: string
+  items: any[]
+}>()
+
+const isOpen = ref(false)
+
+const groupId = computed(
+  () => `NavScreenGroup-${props.text.replace(' ', '-').toLowerCase()}`
+)
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<template>
+  <div class="vp-nav-screen-menu-group" :class="{ 'vp-nav-screen-menu-group--is-open': isOpen }">
+    <button
+      class="vp-nav-screen-menu-group__button"
+      :aria-controls="groupId"
+      :aria-expanded="isOpen"
+      @click="toggle"
+    >
+      <span class="vp-nav-screen-menu-group__button-text" v-html="text" />
+      <span class="vp-nav-screen-menu-group__button-icon vpi-plus" />
+    </button>
+
+    <div :id="groupId" class="vp-nav-screen-menu-group__items">
+      <template v-for="item in items" :key="JSON.stringify(item)">
+        <div v-if="'link' in item" class="vp-nav-screen-menu-group__item">
+          <VPNavScreenMenuGroupLink :item />
+        </div>
+
+        <div v-else-if="'component' in item" class="vp-nav-screen-menu-group__item">
+          <component :is="item.component" v-bind="item.props" screen-menu />
+        </div>
+
+        <div v-else class="vp-nav-screen-menu-group__nest">
+          <VPNavScreenMenuGroupSection :text="item.text" :items="item.items" />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.vp-nav-screen-menu-group {
+  border-bottom: 1px solid var(--vp-c-divider);
+  height: 48px;
+  overflow: hidden;
+  transition: border-color 0.5s;
+
+  &:first-child {
+    padding-top: 0;
+  }
+}
+
+.vp-nav-screen-menu-group--is-open {
+  padding-bottom: 10px;
+  height: auto;
+}
+
+.vp-nav-screen-menu-group--is-open {
+  .vp-nav-screen-menu-group__button {
+    padding-bottom: 4px;
+    color: var(--vp-c-brand-1);
+  }
+
+  .vp-nav-screen-menu-group__button-icon {
+    /*rtl:ignore*/
+    transform: rotate(45deg);
+  }
+
+  .vp-nav-screen-menu-group__items {
+    visibility: visible;
+  }
+}
+
+.vp-nav-screen-menu-group__button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 4px 11px 0;
+  width: 100%;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+
+  &:hover {
+    color: var(--vp-c-brand-1);
+  }
+}
+
+.vp-nav-screen-menu-group__button-icon {
+  transition: transform 0.25s;
+}
+
+.vp-nav-screen-menu-group__nest + .vp-nav-screen-menu-group__nest,
+.vp-nav-screen-menu-group__nest + .vp-nav-screen-menu-group__item {
+  padding-top: 4px;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPNavScreenMenuGroupLink.vue b/src/client/theme-default-v2/components/VPNavScreenMenuGroupLink.vue
new file mode 100644
index 00000000..6481c391
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavScreenMenuGroupLink.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import type { DefaultTheme } from 'vitepress/theme'
+import { inject } from 'vue'
+import { navInjectionKey } from '../composables/nav'
+import VPLink from './VPLink.vue'
+
+defineProps<{
+  item: DefaultTheme.NavItemWithLink
+}>()
+
+const { closeScreen } = inject(navInjectionKey)!
+</script>
+
+<template>
+  <VPLink
+    class="vp-nav-screen-menu-group-link"
+    :href="item.link"
+    :target="item.target"
+    :rel="item.rel"
+    :no-icon="item.noIcon"
+    @click="closeScreen"
+  >
+    <span v-html="item.text" />
+  </VPLink>
+</template>
+
+<style scoped>
+.vp-nav-screen-menu-group-link {
+  display: block;
+  margin-left: 12px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+
+  &:hover {
+    color: var(--vp-c-brand-1);
+  }
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPNavScreenMenuGroupSection.vue b/src/client/theme-default-v2/components/VPNavScreenMenuGroupSection.vue
new file mode 100644
index 00000000..f401bd3b
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavScreenMenuGroupSection.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { DefaultTheme } from 'vitepress/theme'
+import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
+
+defineProps<{
+  text?: string
+  items: DefaultTheme.NavItemWithLink[]
+}>()
+</script>
+
+<template>
+  <div class="vp-nav-screen-menu-group-section">
+    <p v-if="text" class="vp-nav-screen-menu-group-section__title">{{ text }}</p>
+    <VPNavScreenMenuGroupLink v-for="item in items" :key="item.text" :item />
+  </div>
+</template>
+
+<style scoped>
+.vp-nav-screen-menu-group-section {
+  display: block;
+}
+
+.vp-nav-screen-menu-group-section__title {
+  line-height: 32px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.25s;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPNavScreenMenuLink.vue b/src/client/theme-default-v2/components/VPNavScreenMenuLink.vue
new file mode 100644
index 00000000..38beb9c2
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavScreenMenuLink.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import type { DefaultTheme } from 'vitepress/theme'
+import { inject } from 'vue'
+import { navInjectionKey } from '../composables/nav'
+import VPLink from './VPLink.vue'
+
+defineProps<{
+  item: DefaultTheme.NavItemWithLink
+}>()
+
+const { closeScreen } = inject(navInjectionKey)!
+</script>
+
+<template>
+  <VPLink
+    class="vp-nav-screen-menu-link"
+    :href="item.link"
+    :target="item.target"
+    :rel="item.rel"
+    :no-icon="item.noIcon"
+    @click="closeScreen"
+  >
+    <span v-html="item.text" />
+  </VPLink>
+</template>
+
+<style>
+.vp-nav-screen-menu-link {
+  display: block;
+  border-bottom: 1px solid var(--vp-c-divider);
+  padding: 12px 0 11px;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  transition:
+    color 0.25s,
+    border-color 0.25s;
+
+  &:hover {
+    color: var(--vp-c-brand-1);
+  }
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPNavScreenSocialLinks.vue b/src/client/theme-default-v2/components/VPNavScreenSocialLinks.vue
new file mode 100644
index 00000000..f5311024
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPNavScreenSocialLinks.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { useData } from '../composables/data'
+import VPSocialLinks from './VPSocialLinks.vue'
+
+const { theme } = useData()
+</script>
+
+<template>
+  <VPSocialLinks
+    v-if="theme.socialLinks"
+    class="vp-nav-screen-social-links"
+    :links="theme.socialLinks"
+  />
+</template>
diff --git a/src/client/theme-default-v2/components/VPPage.vue b/src/client/theme-default-v2/components/VPPage.vue
new file mode 100644
index 00000000..8e735fd0
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPPage.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="VPPage">
+    <slot name="page-top" />
+    <Content />
+    <slot name="page-bottom" />
+  </div>
+</template>
diff --git a/src/client/theme-default-v2/components/VPSidebar.vue b/src/client/theme-default-v2/components/VPSidebar.vue
new file mode 100644
index 00000000..b27d8028
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPSidebar.vue
@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import { useScrollLock } from '@vueuse/core'
+import { inBrowser } from 'vitepress'
+import { ref, watch } from 'vue'
+import { useLayout } from '../composables/layout'
+import VPSidebarGroup from './VPSidebarGroup.vue'
+
+const { sidebarGroups, hasSidebar } = useLayout()
+
+const props = defineProps<{
+  open: boolean
+}>()
+
+// a11y: focus Nav element when menu has opened
+const navEl = ref<HTMLElement | null>(null)
+const isLocked = useScrollLock(inBrowser ? document.body : null)
+
+watch(
+  [props, navEl],
+  () => {
+    if (props.open) {
+      isLocked.value = true
+      navEl.value?.focus()
+    } else isLocked.value = false
+  },
+  { immediate: true, flush: 'post' }
+)
+
+const key = ref(0)
+
+watch(
+  sidebarGroups,
+  () => {
+    key.value += 1
+  },
+  { deep: true }
+)
+</script>
+
+<template>
+  <aside
+    v-if="hasSidebar"
+    class="VPSidebar"
+    :class="{ open }"
+    ref="navEl"
+    @click.stop
+  >
+    <div class="curtain" />
+
+    <nav
+      class="nav"
+      id="VPSidebarNav"
+      aria-labelledby="sidebar-aria-label"
+      tabindex="-1"
+    >
+      <span class="visually-hidden" id="sidebar-aria-label">
+        Sidebar Navigation
+      </span>
+
+      <slot name="sidebar-nav-before" />
+      <VPSidebarGroup :items="sidebarGroups" :key />
+      <slot name="sidebar-nav-after" />
+    </nav>
+  </aside>
+</template>
+
+<style scoped>
+.VPSidebar {
+  position: fixed;
+  top: var(--vp-layout-top-height, 0px);
+  bottom: 0;
+  left: 0;
+  z-index: var(--vp-z-index-sidebar);
+  padding: 32px 32px 96px;
+  width: calc(100vw - 64px);
+  max-width: 320px;
+  background-color: var(--vp-sidebar-bg-color);
+  opacity: 0;
+  box-shadow: var(--vp-c-shadow-3);
+  overflow-x: hidden;
+  overflow-y: auto;
+  transform: translateX(-100%);
+  transition: opacity 0.5s, transform 0.25s ease;
+  overscroll-behavior: contain;
+}
+
+.VPSidebar.open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(0);
+  transition: opacity 0.25s,
+    transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.dark .VPSidebar {
+  box-shadow: var(--vp-shadow-1);
+}
+
+@media (min-width: 960px) {
+  .VPSidebar {
+    padding-top: var(--vp-nav-height);
+    width: var(--vp-sidebar-width);
+    max-width: 100%;
+    background-color: var(--vp-sidebar-bg-color);
+    opacity: 1;
+    visibility: visible;
+    box-shadow: none;
+    transform: translateX(0);
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPSidebar {
+    padding-left: max(32px, calc((100vw - (var(--vp-layout-max-width) - 64px)) / 2));
+    width: calc((100vw - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
+  }
+}
+
+@media (min-width: 960px) {
+  .curtain {
+    position: sticky;
+    top: -64px;
+    left: 0;
+    z-index: 1;
+    margin-top: calc(var(--vp-nav-height) * -1);
+    margin-right: -32px;
+    margin-left: -32px;
+    height: var(--vp-nav-height);
+    background-color: var(--vp-sidebar-bg-color);
+  }
+}
+
+.nav {
+  outline: 0;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPSidebarGroup.vue b/src/client/theme-default-v2/components/VPSidebarGroup.vue
new file mode 100644
index 00000000..0c200174
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPSidebarGroup.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import VPSidebarItem from './VPSidebarItem.vue'
+
+defineProps<{
+  items: DefaultTheme.SidebarItem[]
+}>()
+
+const disableTransition = ref(true)
+
+let timer: ReturnType<typeof setTimeout> | null = null
+
+onMounted(() => {
+  timer = setTimeout(() => {
+    timer = null
+    disableTransition.value = false
+  }, 300)
+})
+
+onBeforeUnmount(() => {
+  if (timer != null) {
+    clearTimeout(timer)
+    timer = null
+  }
+})
+</script>
+
+<template>
+  <div
+    v-for="item in items"
+    :key="item.text"
+    class="group"
+    :class="{ 'no-transition': disableTransition }"
+  >
+    <VPSidebarItem :item :depth="0" />
+  </div>
+</template>
+
+<style scoped>
+.no-transition :deep(.caret-icon) {
+  transition: none;
+}
+
+.group + .group {
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 10px;
+}
+
+@media (min-width: 960px) {
+  .group {
+    padding-top: 10px;
+    width: calc(var(--vp-sidebar-width) - 64px);
+  }
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPSidebarItem.vue b/src/client/theme-default-v2/components/VPSidebarItem.vue
new file mode 100644
index 00000000..d71d1062
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPSidebarItem.vue
@@ -0,0 +1,251 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+import { computed } from 'vue'
+import { useSidebarItemControl } from '../composables/sidebar'
+import VPLink from './VPLink.vue'
+
+const props = defineProps<{
+  item: DefaultTheme.SidebarItem
+  depth: number
+}>()
+
+const {
+  collapsed,
+  collapsible,
+  isLink,
+  isActiveLink,
+  hasActiveLink,
+  hasChildren,
+  toggle
+} = useSidebarItemControl(computed(() => props.item))
+
+const sectionTag = computed(() => (hasChildren.value ? 'section' : `div`))
+
+const linkTag = computed(() => (isLink.value ? 'a' : 'div'))
+
+const textTag = computed(() => {
+  return !hasChildren.value
+    ? 'p'
+    : props.depth + 2 === 7
+      ? 'p'
+      : `h${props.depth + 2}`
+})
+
+const itemRole = computed(() => (isLink.value ? undefined : 'button'))
+
+const classes = computed(() => [
+  [`level-${props.depth}`],
+  { collapsible: collapsible.value },
+  { collapsed: collapsed.value },
+  { 'is-link': isLink.value },
+  { 'is-active': isActiveLink.value },
+  { 'has-active': hasActiveLink.value }
+])
+
+function onItemInteraction(e: MouseEvent | Event) {
+  if ('key' in e && e.key !== 'Enter') {
+    return
+  }
+  !props.item.link && toggle()
+}
+
+function onCaretClick() {
+  props.item.link && toggle()
+}
+</script>
+
+<template>
+  <component :is="sectionTag" class="VPSidebarItem" :class="classes">
+    <div
+      v-if="item.text"
+      class="item"
+      :role="itemRole"
+      v-on="
+        item.items
+          ? { click: onItemInteraction, keydown: onItemInteraction }
+          : {}
+      "
+      :tabindex="item.items && 0"
+    >
+      <div class="indicator" />
+
+      <VPLink
+        v-if="item.link"
+        :tag="linkTag"
+        class="link"
+        :href="item.link"
+        :rel="item.rel"
+        :target="item.target"
+      >
+        <component :is="textTag" class="text" v-html="item.text" />
+      </VPLink>
+      <component v-else :is="textTag" class="text" v-html="item.text" />
+
+      <div
+        v-if="item.collapsed != null && item.items && item.items.length"
+        class="caret"
+        role="button"
+        aria-label="toggle section"
+        @click="onCaretClick"
+        @keydown.enter="onCaretClick"
+        tabindex="0"
+      >
+        <span class="vpi-chevron-right caret-icon" />
+      </div>
+    </div>
+
+    <div v-if="item.items && item.items.length" class="items">
+      <template v-if="depth < 5">
+        <VPSidebarItem
+          v-for="i in item.items"
+          :key="i.text"
+          :item="i"
+          :depth="depth + 1"
+        />
+      </template>
+    </div>
+  </component>
+</template>
+
+<style scoped>
+.VPSidebarItem.level-0 {
+  padding-bottom: 24px;
+}
+
+.VPSidebarItem.collapsed.level-0 {
+  padding-bottom: 10px;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+
+.VPSidebarItem.collapsible > .item {
+  cursor: pointer;
+}
+
+.indicator {
+  position: absolute;
+  top: 6px;
+  bottom: 6px;
+  left: -17px;
+  width: 2px;
+  border-radius: 2px;
+  transition: background-color 0.25s;
+}
+
+.VPSidebarItem.level-2.is-active > .item > .indicator,
+.VPSidebarItem.level-3.is-active > .item > .indicator,
+.VPSidebarItem.level-4.is-active > .item > .indicator,
+.VPSidebarItem.level-5.is-active > .item > .indicator {
+  background-color: var(--vp-c-brand-1);
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.text {
+  flex-grow: 1;
+  padding: 4px 0;
+  line-height: 24px;
+  font-size: 14px;
+  transition: color 0.25s;
+}
+
+.VPSidebarItem.level-0 .text {
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+}
+
+.VPSidebarItem.level-1 .text,
+.VPSidebarItem.level-2 .text,
+.VPSidebarItem.level-3 .text,
+.VPSidebarItem.level-4 .text,
+.VPSidebarItem.level-5 .text {
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.VPSidebarItem.level-0.is-link > .item > .link:hover .text,
+.VPSidebarItem.level-1.is-link > .item > .link:hover .text,
+.VPSidebarItem.level-2.is-link > .item > .link:hover .text,
+.VPSidebarItem.level-3.is-link > .item > .link:hover .text,
+.VPSidebarItem.level-4.is-link > .item > .link:hover .text,
+.VPSidebarItem.level-5.is-link > .item > .link:hover .text {
+  color: var(--vp-c-brand-1);
+}
+
+.VPSidebarItem.level-0.has-active > .item > .text,
+.VPSidebarItem.level-1.has-active > .item > .text,
+.VPSidebarItem.level-2.has-active > .item > .text,
+.VPSidebarItem.level-3.has-active > .item > .text,
+.VPSidebarItem.level-4.has-active > .item > .text,
+.VPSidebarItem.level-5.has-active > .item > .text,
+.VPSidebarItem.level-0.has-active > .item > .link > .text,
+.VPSidebarItem.level-1.has-active > .item > .link > .text,
+.VPSidebarItem.level-2.has-active > .item > .link > .text,
+.VPSidebarItem.level-3.has-active > .item > .link > .text,
+.VPSidebarItem.level-4.has-active > .item > .link > .text,
+.VPSidebarItem.level-5.has-active > .item > .link > .text {
+  color: var(--vp-c-text-1);
+}
+
+.VPSidebarItem.level-0.is-active > .item .link > .text,
+.VPSidebarItem.level-1.is-active > .item .link > .text,
+.VPSidebarItem.level-2.is-active > .item .link > .text,
+.VPSidebarItem.level-3.is-active > .item .link > .text,
+.VPSidebarItem.level-4.is-active > .item .link > .text,
+.VPSidebarItem.level-5.is-active > .item .link > .text {
+  color: var(--vp-c-brand-1);
+}
+
+.caret {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: -7px;
+  width: 32px;
+  height: 32px;
+  color: var(--vp-c-text-3);
+  cursor: pointer;
+  transition: color 0.25s;
+  flex-shrink: 0;
+}
+
+.item:hover .caret {
+  color: var(--vp-c-text-2);
+}
+
+.item:hover .caret:hover {
+  color: var(--vp-c-text-1);
+}
+
+.caret-icon {
+  font-size: 18px;
+  /*rtl:ignore*/
+  transform: rotate(90deg);
+  transition: transform 0.25s;
+}
+
+.VPSidebarItem.collapsed .caret-icon {
+  transform: rotate(0)/*rtl:rotate(180deg)*/;
+}
+
+.VPSidebarItem.level-1 .items,
+.VPSidebarItem.level-2 .items,
+.VPSidebarItem.level-3 .items,
+.VPSidebarItem.level-4 .items,
+.VPSidebarItem.level-5 .items {
+  border-left: 1px solid var(--vp-c-divider);
+  padding-left: 16px;
+}
+
+.VPSidebarItem.collapsed .items {
+  display: none;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPSkipLink.vue b/src/client/theme-default-v2/components/VPSkipLink.vue
new file mode 100644
index 00000000..ad56622d
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPSkipLink.vue
@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { useRoute } from 'vitepress'
+import { useData } from '../composables/data'
+
+const { theme } = useData()
+const route = useRoute()
+const backToTop = ref()
+
+watch(() => route.path, () => backToTop.value.focus())
+
+function focusOnTargetAnchor({ target }: Event) {
+  const el = document.getElementById(
+    decodeURIComponent((target as HTMLAnchorElement).hash).slice(1)
+  )
+
+  if (el) {
+    const removeTabIndex = () => {
+      el.removeAttribute('tabindex')
+      el.removeEventListener('blur', removeTabIndex)
+    }
+
+    el.setAttribute('tabindex', '-1')
+    el.addEventListener('blur', removeTabIndex)
+    el.focus()
+    window.scrollTo(0, 0)
+  }
+}
+</script>
+
+<template>
+  <span ref="backToTop" tabindex="-1" />
+  <a
+    href="#VPContent"
+    class="VPSkipLink visually-hidden"
+    @click="focusOnTargetAnchor"
+  >
+    {{ theme.skipToContentLabel || 'Skip to content' }}
+  </a>
+</template>
+
+<style scoped>
+.VPSkipLink {
+  top: 8px;
+  left: 8px;
+  padding: 8px 16px;
+  z-index: 999;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: bold;
+  text-decoration: none;
+  color: var(--vp-c-brand-1);
+  box-shadow: var(--vp-shadow-3);
+  background-color: var(--vp-c-bg);
+}
+
+.VPSkipLink:focus {
+  height: auto;
+  width: auto;
+  clip: auto;
+  clip-path: none;
+}
+
+@media (min-width: 1280px) {
+  .VPSkipLink {
+    top: 14px;
+    left: 16px;
+  }
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPSocialLink.vue b/src/client/theme-default-v2/components/VPSocialLink.vue
new file mode 100644
index 00000000..a9059a28
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPSocialLink.vue
@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import type { DefaultTheme } from 'vitepress/theme'
+import { computed, nextTick, onMounted, ref, useSSRContext } from 'vue'
+import type { SSGContext } from '../../shared'
+
+const props = defineProps<{
+  icon: DefaultTheme.SocialLinkIcon
+  link: string
+  ariaLabel?: string
+  me: boolean
+}>()
+
+const el = ref<HTMLAnchorElement>()
+
+onMounted(async () => {
+  await nextTick()
+  const span = el.value?.children[0]
+  if (
+    span instanceof HTMLElement &&
+    span.className.startsWith('vpi-social-') &&
+    (getComputedStyle(span).maskImage ||
+      getComputedStyle(span).webkitMaskImage) === 'none'
+  ) {
+    span.style.setProperty(
+      '--icon',
+      `url('https://api.iconify.design/simple-icons/${props.icon}.svg')`
+    )
+  }
+})
+
+const svg = computed(() => {
+  if (typeof props.icon === 'object') return props.icon.svg
+  return `<span class="vpi-social-${props.icon}"></span>`
+})
+
+if (import.meta.env.SSR) {
+  typeof props.icon === 'string' &&
+    useSSRContext<SSGContext>()?.vpSocialIcons.add(props.icon)
+}
+</script>
+
+<template>
+  <a
+    ref="el"
+    class="vp-social-link no-icon"
+    :href="link"
+    :aria-label="ariaLabel ?? (typeof icon === 'string' ? icon : '')"
+    target="_blank"
+    :rel="me ? 'me noopener' : 'noopener'"
+    v-html="svg"
+  />
+</template>
+
+<style>
+.vp-social-link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  color: var(--vp-c-text-2);
+  transition: color 0.25s;
+
+  &:hover {
+    color: var(--vp-c-text-1);
+    transition: color 0.25s;
+  }
+}
+
+.vp-social-link svg,
+.vp-social-link [class^="vpi-social-"] {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPSocialLinks.vue b/src/client/theme-default-v2/components/VPSocialLinks.vue
new file mode 100644
index 00000000..d10b34da
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPSocialLinks.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import type { DefaultTheme } from 'vitepress/theme'
+import VPSocialLink from './VPSocialLink.vue'
+
+withDefaults(defineProps<{
+  links: DefaultTheme.SocialLink[]
+  me?: boolean
+}>(), {
+  me: true
+})
+</script>
+
+<template>
+  <div class="vp-social-links">
+    <VPSocialLink
+      v-for="{ link, icon, ariaLabel } in links"
+      :key="link"
+      :icon
+      :link
+      :ariaLabel
+      :me
+    />
+  </div>
+</template>
+
+<style>
+.vp-social-links {
+  display: flex;
+  justify-content: center;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPSponsors.vue b/src/client/theme-default-v2/components/VPSponsors.vue
new file mode 100644
index 00000000..e7e739dc
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPSponsors.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { GridSize } from '../composables/sponsor-grid'
+import type { Sponsor } from './VPSponsorsGrid.vue'
+import { computed } from 'vue'
+import VPSponsorsGrid from './VPSponsorsGrid.vue'
+
+export interface Sponsors {
+  tier?: string
+  size?: GridSize
+  items: Sponsor[]
+}
+interface Props {
+  mode?: 'normal' | 'aside'
+  tier?: string
+  size?: GridSize
+  data: Sponsors[] | Sponsor[]
+}
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'normal'
+})
+
+const sponsors = computed(() => {
+  const isSponsors = props.data.some((s) => {
+    return 'items' in s
+  })
+
+  if (isSponsors) {
+    return props.data as Sponsors[]
+  }
+
+  return [
+    { tier: props.tier, size: props.size, items: props.data as Sponsor[] }
+  ]
+})
+</script>
+
+<template>
+  <div class="VPSponsors vp-sponsor" :class="[mode]">
+    <section
+      v-for="(sponsor, index) in sponsors"
+      :key="index"
+      class="vp-sponsor-section"
+    >
+      <h3 v-if="sponsor.tier" class="vp-sponsor-tier">{{ sponsor.tier }}</h3>
+      <VPSponsorsGrid :size="sponsor.size" :data="sponsor.items" />
+    </section>
+  </div>
+</template>
diff --git a/src/client/theme-default-v2/components/VPSponsorsGrid.vue b/src/client/theme-default-v2/components/VPSponsorsGrid.vue
new file mode 100644
index 00000000..29312c55
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPSponsorsGrid.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { GridSize } from '../composables/sponsor-grid'
+import { ref } from 'vue'
+import { useSponsorsGrid } from '../composables/sponsor-grid'
+
+export interface Sponsor {
+  name: string
+  img: string
+  url: string
+}
+interface Props {
+  size?: GridSize
+  data: Sponsor[]
+}
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium'
+})
+
+const el = ref(null)
+
+useSponsorsGrid({ el, size: props.size })
+</script>
+
+<template>
+  <div class="VPSponsorsGrid vp-sponsor-grid" :class="[size]" ref="el">
+    <div
+      v-for="sponsor in data"
+      :key="sponsor.name"
+      class="vp-sponsor-grid-item"
+    >
+      <a
+        class="vp-sponsor-grid-link"
+        :href="sponsor.url"
+        target="_blank"
+        rel="sponsored noopener"
+      >
+        <article class="vp-sponsor-grid-box">
+          <img
+            class="vp-sponsor-grid-image"
+            :src="sponsor.img"
+            :alt="sponsor.name"
+          />
+        </article>
+      </a>
+    </div>
+  </div>
+</template>
diff --git a/src/client/theme-default-v2/components/VPSwitch.vue b/src/client/theme-default-v2/components/VPSwitch.vue
new file mode 100644
index 00000000..36af1cba
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPSwitch.vue
@@ -0,0 +1,63 @@
+<template>
+  <button class="VPSwitch" type="button" role="switch">
+    <span class="check">
+      <span class="icon" v-if="$slots.default">
+        <slot />
+      </span>
+    </span>
+  </button>
+</template>
+
+<style scoped>
+.VPSwitch {
+  position: relative;
+  border-radius: 11px;
+  display: block;
+  width: 40px;
+  height: 22px;
+  flex-shrink: 0;
+  border: 1px solid var(--vp-input-border-color);
+  background-color: var(--vp-input-switch-bg-color);
+  transition: border-color 0.25s !important;
+}
+
+.VPSwitch:hover {
+  border-color: var(--vp-c-brand-1);
+}
+
+.check {
+  position: absolute;
+  top: 1px;
+  /*rtl:ignore*/
+  left: 1px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: var(--vp-c-neutral-inverse);
+  box-shadow: var(--vp-shadow-1);
+  transition: transform 0.25s !important;
+}
+
+.icon {
+  position: relative;
+  display: block;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.icon :deep([class^='vpi-']) {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 12px;
+  height: 12px;
+  color: var(--vp-c-text-2);
+}
+
+.dark .icon :deep([class^='vpi-']) {
+  color: var(--vp-c-text-1);
+  transition: opacity 0.25s !important;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPSwitchAppearance.vue b/src/client/theme-default-v2/components/VPSwitchAppearance.vue
new file mode 100644
index 00000000..f42e249f
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPSwitchAppearance.vue
@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import { inject } from 'vue'
+import { useData } from '../composables/data'
+
+const { isDark, theme } = useData()
+
+const toggleAppearance = inject('toggle-appearance', () => {
+  isDark.value = !isDark.value
+})
+
+function onClick(theme: 'light' | 'dark') {
+  if ((theme === 'light' && isDark.value) || (theme === 'dark' && !isDark.value)) {
+    toggleAppearance()
+  }
+}
+</script>
+
+<template>
+  <div class="vp-switch-appearance">
+    <button
+      class="vp-switch-appearance__button"
+      :class="{ 'vp-switch-appearance__button--is-active': !isDark }"
+      :title="theme.lightModeSwitchTitle"
+      @click="onClick('light')"
+    >
+      <span class="vp-switch-appearance__icon vpi-sun" />
+    </button>
+    <button
+      class="vp-switch-appearance__button"
+      :class="{ 'vp-switch-appearance__button--is-active': isDark }"
+      :title="theme.darkModeSwitchTitle"
+      @click="onClick('dark')"
+    >
+      <span class="vp-switch-appearance__icon vpi-moon" />
+    </button>
+  </div>
+</template>
+
+<style>
+.vp-switch-appearance {
+  display: flex;
+  gap: 2px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 2px;
+  width: 100%;
+}
+
+.vp-switch-appearance__button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  height: 26px;
+  color: var(--vp-c-text-2);
+  overflow: hidden;
+}
+
+.vp-switch-appearance__button--is-active {
+  border-color: var(--vp-c-divider);
+  color: var(--vp-c-text-1);
+  background-color: var(--vp-c-bg-3);
+}
+
+.vp-switch-appearance__icon {
+  width: 14px;
+  height: 14px;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPTeamMembers.vue b/src/client/theme-default-v2/components/VPTeamMembers.vue
new file mode 100644
index 00000000..0337eb5a
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPTeamMembers.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+import { computed } from 'vue'
+import VPTeamMembersItem from './VPTeamMembersItem.vue'
+
+interface Props {
+  size?: 'small' | 'medium'
+  members: DefaultTheme.TeamMember[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium'
+})
+
+const classes = computed(() => [props.size, `count-${props.members.length}`])
+</script>
+
+<template>
+  <div class="VPTeamMembers" :class="classes">
+    <div class="container">
+      <div v-for="member in members" :key="member.name" class="item">
+        <VPTeamMembersItem :size :member />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPTeamMembers.small .container {
+  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
+}
+
+.VPTeamMembers.small.count-1 .container {
+  max-width: 276px;
+}
+.VPTeamMembers.small.count-2 .container {
+  max-width: calc(276px * 2 + 24px);
+}
+.VPTeamMembers.small.count-3 .container {
+  max-width: calc(276px * 3 + 24px * 2);
+}
+
+.VPTeamMembers.medium .container {
+  grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
+}
+
+@media (min-width: 375px) {
+  .VPTeamMembers.medium .container {
+    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
+  }
+}
+
+.VPTeamMembers.medium.count-1 .container {
+  max-width: 368px;
+}
+.VPTeamMembers.medium.count-2 .container {
+  max-width: calc(368px * 2 + 24px);
+}
+
+.container {
+  display: grid;
+  gap: 24px;
+  margin: 0 auto;
+  max-width: 1152px;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPTeamMembersItem.vue b/src/client/theme-default-v2/components/VPTeamMembersItem.vue
new file mode 100644
index 00000000..a4dc411b
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPTeamMembersItem.vue
@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+import VPLink from './VPLink.vue'
+import VPSocialLinks from './VPSocialLinks.vue'
+
+interface Props {
+  size?: 'small' | 'medium'
+  member: DefaultTheme.TeamMember
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'medium'
+})
+</script>
+
+<template>
+  <article class="VPTeamMembersItem" :class="[size]">
+    <div class="profile">
+      <figure class="avatar">
+        <img class="avatar-img" :src="member.avatar" :alt="member.name" />
+      </figure>
+      <div class="data">
+        <h1 class="name">
+          {{ member.name }}
+        </h1>
+        <p v-if="member.title || member.org" class="affiliation">
+          <span v-if="member.title" class="title">
+            {{ member.title }}
+          </span>
+          <span v-if="member.title && member.org" class="at"> @ </span>
+          <VPLink
+            v-if="member.org"
+            class="org"
+            :class="{ link: member.orgLink }"
+            :href="member.orgLink"
+            no-icon
+          >
+            {{ member.org }}
+          </VPLink>
+        </p>
+        <p v-if="member.desc" class="desc" v-html="member.desc" />
+        <div v-if="member.links" class="links">
+          <VPSocialLinks :links="member.links" :me="false" />
+        </div>
+      </div>
+    </div>
+    <div v-if="member.sponsor" class="sp">
+      <VPLink class="sp-link" :href="member.sponsor" no-icon>
+        <span class="vpi-heart sp-icon" /> {{ member.actionText || 'Sponsor' }}
+      </VPLink>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.VPTeamMembersItem {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border-radius: 12px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.VPTeamMembersItem.small .profile {
+  padding: 32px;
+}
+
+.VPTeamMembersItem.small .data {
+  padding-top: 20px;
+}
+
+.VPTeamMembersItem.small .avatar {
+  width: 64px;
+  height: 64px;
+}
+
+.VPTeamMembersItem.small .name {
+  line-height: 24px;
+  font-size: 16px;
+}
+
+.VPTeamMembersItem.small .affiliation {
+  padding-top: 4px;
+  line-height: 20px;
+  font-size: 14px;
+}
+
+.VPTeamMembersItem.small .desc {
+  padding-top: 12px;
+  line-height: 20px;
+  font-size: 14px;
+}
+
+.VPTeamMembersItem.small .links {
+  margin: 0 -16px -20px;
+  padding: 10px 0 0;
+}
+
+.VPTeamMembersItem.medium .profile {
+  padding: 48px 32px;
+}
+
+.VPTeamMembersItem.medium .data {
+  padding-top: 24px;
+  text-align: center;
+}
+
+.VPTeamMembersItem.medium .avatar {
+  width: 96px;
+  height: 96px;
+}
+
+.VPTeamMembersItem.medium .name {
+  letter-spacing: 0.15px;
+  line-height: 28px;
+  font-size: 20px;
+}
+
+.VPTeamMembersItem.medium .affiliation {
+  padding-top: 4px;
+  font-size: 16px;
+}
+
+.VPTeamMembersItem.medium .desc {
+  padding-top: 16px;
+  max-width: 288px;
+  font-size: 16px;
+}
+
+.VPTeamMembersItem.medium .links {
+  margin: 0 -16px -12px;
+  padding: 16px 12px 0;
+}
+
+.profile {
+  flex-grow: 1;
+  background-color: var(--vp-c-bg-soft);
+}
+
+.data {
+  text-align: center;
+}
+
+.avatar {
+  position: relative;
+  flex-shrink: 0;
+  margin: 0 auto;
+  border-radius: 50%;
+  box-shadow: var(--vp-shadow-3);
+}
+
+.avatar-img {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.name {
+  margin: 0;
+  font-weight: 600;
+}
+
+.affiliation {
+  margin: 0;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.org.link {
+  color: var(--vp-c-text-2);
+  transition: color 0.25s;
+}
+
+.org.link:hover {
+  color: var(--vp-c-brand-1);
+}
+
+.desc {
+  margin: 0 auto;
+}
+
+.desc :deep(a) {
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+  text-decoration-style: dotted;
+  transition: color 0.25s;
+}
+
+.links {
+  display: flex;
+  justify-content: center;
+  height: 56px;
+}
+
+.sp-link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-sponsor);
+  background-color: var(--vp-c-bg-soft);
+  transition: color 0.25s, background-color 0.25s;
+}
+
+.sp .sp-link.link:hover,
+.sp .sp-link.link:focus {
+  outline: none;
+  color: var(--vp-c-white);
+  background-color: var(--vp-c-sponsor);
+}
+
+.sp-icon {
+  margin-right: 8px;
+  font-size: 16px;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPTeamPage.vue b/src/client/theme-default-v2/components/VPTeamPage.vue
new file mode 100644
index 00000000..71d9bdb5
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPTeamPage.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="VPTeamPage">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.VPTeamPage {
+  margin: 96px 0;
+}
+
+@media (min-width: 768px) {
+  .VPTeamPage {
+    margin: 128px 0;
+  }
+}
+
+.VPHome :slotted(.VPTeamPageTitle) {
+  border-top: 1px solid var(--vp-c-gutter);
+  padding-top: 88px !important;
+}
+
+:slotted(.VPTeamPageSection + .VPTeamPageSection),
+:slotted(.VPTeamMembers + .VPTeamPageSection) {
+  margin-top: 64px;
+}
+
+:slotted(.VPTeamMembers + .VPTeamMembers) {
+  margin-top: 24px;
+}
+
+@media (min-width: 768px) {
+  :slotted(.VPTeamPageTitle + .VPTeamPageSection) {
+    margin-top: 16px;
+  }
+
+  :slotted(.VPTeamPageSection + .VPTeamPageSection),
+  :slotted(.VPTeamMembers + .VPTeamPageSection) {
+    margin-top: 96px;
+  }
+}
+
+:slotted(.VPTeamMembers) {
+  padding: 0 24px;
+}
+
+@media (min-width: 768px) {
+  :slotted(.VPTeamMembers) {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  :slotted(.VPTeamMembers) {
+    padding: 0 64px;
+  }
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPTeamPageSection.vue b/src/client/theme-default-v2/components/VPTeamPageSection.vue
new file mode 100644
index 00000000..2bb52ab9
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPTeamPageSection.vue
@@ -0,0 +1,77 @@
+<template>
+  <section class="VPTeamPageSection">
+    <div class="title">
+      <div class="title-line" />
+      <h2 v-if="$slots.title" class="title-text">
+        <slot name="title" />
+      </h2>
+    </div>
+    <p v-if="$slots.lead" class="lead">
+      <slot name="lead" />
+    </p>
+    <div v-if="$slots.members" class="members">
+      <slot name="members" />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.VPTeamPageSection {
+  padding: 0 32px;
+}
+
+@media (min-width: 768px) {
+  .VPTeamPageSection {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPTeamPageSection {
+    padding: 0 64px;
+  }
+}
+
+.title {
+  position: relative;
+  margin: 0 auto;
+  max-width: 1152px;
+  text-align: center;
+  color: var(--vp-c-text-2);
+}
+
+.title-line {
+  position: absolute;
+  top: 16px;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--vp-c-divider);
+}
+
+.title-text {
+  position: relative;
+  display: inline-block;
+  padding: 0 24px;
+  letter-spacing: 0;
+  line-height: 32px;
+  font-size: 20px;
+  font-weight: 500;
+  background-color: var(--vp-c-bg);
+}
+
+.lead {
+  margin: 0 auto;
+  max-width: 480px;
+  padding-top: 12px;
+  text-align: center;
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.members {
+  padding-top: 40px;
+}
+</style>
diff --git a/src/client/theme-default-v2/components/VPTeamPageTitle.vue b/src/client/theme-default-v2/components/VPTeamPageTitle.vue
new file mode 100644
index 00000000..9751a188
--- /dev/null
+++ b/src/client/theme-default-v2/components/VPTeamPageTitle.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="VPTeamPageTitle">
+    <h1 v-if="$slots.title" class="title">
+      <slot name="title" />
+    </h1>
+    <p v-if="$slots.lead" class="lead">
+      <slot name="lead" />
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.VPTeamPageTitle {
+  padding: 48px 32px;
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .VPTeamPageTitle {
+    padding: 64px 48px 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPTeamPageTitle {
+    padding: 80px 64px 48px;
+  }
+}
+
+.title {
+  letter-spacing: 0;
+  line-height: 44px;
+  font-size: 36px;
+  font-weight: 500;
+}
+
+@media (min-width: 768px) {
+  .title {
+    letter-spacing: -0.5px;
+    line-height: 56px;
+    font-size: 48px;
+  }
+}
+
+.lead {
+  margin: 0 auto;
+  max-width: 512px;
+  padding-top: 12px;
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+@media (min-width: 768px) {
+  .lead {
+    max-width: 592px;
+    letter-spacing: 0.15px;
+    line-height: 28px;
+    font-size: 20px;
+  }
+}
+</style>
diff --git a/src/client/theme-default-v2/components/icons/VPIconAlignJustify.vue b/src/client/theme-default-v2/components/icons/VPIconAlignJustify.vue
new file mode 100644
index 00000000..653dab13
--- /dev/null
+++ b/src/client/theme-default-v2/components/icons/VPIconAlignJustify.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M21,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,11,21,11z" />
+    <path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z" />
+    <path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z" />
+    <path d="M21,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,19,21,19z" />
+  </svg>
+</template>
diff --git a/src/client/theme-default-v2/components/icons/VPIconAlignLeft.vue b/src/client/theme-default-v2/components/icons/VPIconAlignLeft.vue
new file mode 100644
index 00000000..8dc84eae
--- /dev/null
+++ b/src/client/theme-default-v2/components/icons/VPIconAlignLeft.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z" />
+    <path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z" />
+    <path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z" />
+    <path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z" />
+  </svg>
+</template>
diff --git a/src/client/theme-default-v2/components/icons/VPIconAlignRight.vue b/src/client/theme-default-v2/components/icons/VPIconAlignRight.vue
new file mode 100644
index 00000000..16cbb3c7
--- /dev/null
+++ b/src/client/theme-default-v2/components/icons/VPIconAlignRight.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M21,11H7c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S21.6,11,21,11z" />
+    <path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z" />
+    <path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z" />
+    <path d="M21,19H7c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S21.6,19,21,19z" />
+  </svg>
+</template>
diff --git a/src/client/theme-default-v2/components/icons/VPIconArrowLeft.vue b/src/client/theme-default-v2/components/icons/VPIconArrowLeft.vue
new file mode 100644
index 00000000..3f65b866
--- /dev/null
+++ b/src/client/theme-default-v2/components/icons/VPIconArrowLeft.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"
+    />
+  </svg>
+</template>
diff --git a/src/client/theme-default-v2/components/icons/VPIconArrowRight.vue b/src/client/theme-default-v2/components/icons/VPIconArrowRight.vue
new file mode 100644
index 00000000..ed89263f
--- /dev/null
+++ b/src/client/theme-default-v2/components/icons/VPIconArrowRight.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"
+    />
+  </svg>
+</template>
diff --git a/src/client/theme-default-v2/components/icons/VPIconChevronDown.vue b/src/client/theme-default-v2/components/icons/VPIconChevronDown.vue
new file mode 100644
index 00000000..d72f4ee8
--- /dev/null
+++ b/src/client/theme-default-v2/components/icons/VPIconChevronDown.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z" />
+  </svg>
+</template>
diff --git a/src/client/theme-default-v2/components/icons/VPIconChevronLeft.vue b/src/client/theme-default-v2/components/icons/VPIconChevronLeft.vue
new file mode 100644
index 00000000..013eb7fd
--- /dev/null
+++ b/src/client/theme-default-v2/components/icons/VPIconChevronLeft.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M15,19c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4l6-6c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4L10.4,12l5.3,5.3c0.4,0.4,0.4,1,0,1.4C15.5,18.9,15.3,19,15,19z" />
+  </svg>
+</template>
diff --git a/src/client/theme-default-v2/components/icons/VPIconChevronRight.vue b/src/client/theme-default-v2/components/icons/VPIconChevronRight.vue
new file mode 100644
index 00000000..cf72418f
--- /dev/null
+++ b/src/client/theme-default-v2/components/icons/VPIconChevronRight.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z" />
+  </svg>
+</template>
diff --git a/src/client/theme-default-v2/components/icons/VPIconChevronUp.vue b/src/client/theme-default-v2/components/icons/VPIconChevronUp.vue
new file mode 100644
index 00000000..0b6a873e
--- /dev/null
+++ b/src/client/theme-default-v2/components/icons/VPIconChevronUp.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M18,16c-0.3,0-0.5-0.1-0.7-0.3L12,10.4l-5.3,5.3c-0.4,0.4-1,0.4-1.4,0s-0.4-1,0-1.4l6-6c0.4-0.4,1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4C18.5,15.9,18.3,16,18,16z" />
+  </svg>
+</template>
diff --git a/src/client/theme-default-v2/components/icons/VPIconEdit.vue b/src/client/theme-default-v2/components/icons/VPIconEdit.vue
new file mode 100644
index 00000000..f30a62dd
--- /dev/null
+++ b/src/client/theme-default-v2/components/icons/VPIconEdit.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z" />
+    <path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z" />
+  </svg>
+</template>
diff --git a/src/client/theme-default-v2/components/icons/VPIconHeart.vue b/src/client/theme-default-v2/components/icons/VPIconHeart.vue
new file mode 100644
index 00000000..d408828f
--- /dev/null
+++ b/src/client/theme-default-v2/components/icons/VPIconHeart.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M12,22.2c-0.3,0-0.5-0.1-0.7-0.3l-8.8-8.8c-2.5-2.5-2.5-6.7,0-9.2c2.5-2.5,6.7-2.5,9.2,0L12,4.3l0.4-0.4c0,0,0,0,0,0C13.6,2.7,15.2,2,16.9,2c0,0,0,0,0,0c1.7,0,3.4,0.7,4.6,1.9l0,0c1.2,1.2,1.9,2.9,1.9,4.6c0,1.7-0.7,3.4-1.9,4.6l-8.8,8.8C12.5,22.1,12.3,22.2,12,22.2zM7,4C5.9,4,4.7,4.4,3.9,5.3c-1.8,1.8-1.8,4.6,0,6.4l8.1,8.1l8.1-8.1c0.9-0.9,1.3-2,1.3-3.2c0-1.2-0.5-2.3-1.3-3.2l0,0C19.3,4.5,18.2,4,17,4c0,0,0,0,0,0c-1.2,0-2.3,0.5-3.2,1.3c0,0,0,0,0,0l-1.1,1.1c-0.4,0.4-1,0.4-1.4,0l-1.1-1.1C9.4,4.4,8.2,4,7,4z" />
+  </svg>
+</template>
diff --git a/src/client/theme-default-v2/components/icons/VPIconLanguages.vue b/src/client/theme-default-v2/components/icons/VPIconLanguages.vue
new file mode 100644
index 00000000..71a728fc
--- /dev/null
+++ b/src/client/theme-default-v2/components/icons/VPIconLanguages.vue
@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"></path>
+    <path
+      d=" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z "
+      class="css-c4d79v"
+    ></path>
+  </svg>
+</template>
diff --git a/src/client/theme-default-v2/components/icons/VPIconMinus.vue b/src/client/theme-default-v2/components/icons/VPIconMinus.vue
new file mode 100644
index 00000000..e0229195
--- /dev/null
+++ b/src/client/theme-default-v2/components/icons/VPIconMinus.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M22,13H2a1,1,0,0,1,0-2H22a1,1,0,0,1,0,2Z" />
+  </svg>
+</template>
diff --git a/src/client/theme-default-v2/components/icons/VPIconMinusSquare.vue b/src/client/theme-default-v2/components/icons/VPIconMinusSquare.vue
new file mode 100644
index 00000000..266ae3da
--- /dev/null
+++ b/src/client/theme-default-v2/components/icons/VPIconMinusSquare.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+    <path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z" />
+    <path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z" />
+  </svg>
+</template>
diff --git a/src/client/theme-default-v2/components/icons/VPIconMoon.vue b/src/client/theme-default-v2/components/icons/VPIconMoon.vue
new file mode 100644
index 00000000..a9b205c6
--- /dev/null
+++ b/src/client/theme-default-v2/components/icons/VPIconMoon.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" />
+  </svg>
+</template>
diff --git a/src/client/theme-default-v2/components/icons/VPIconMoreHorizontal.vue b/src/client/theme-default-v2/components/icons/VPIconMoreHorizontal.vue
new file mode 100644
index 00000000..6fa7fca2
--- /dev/null
+++ b/src/client/theme-default-v2/components/icons/VPIconMoreHorizontal.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <circle cx="12" cy="12" r="2" />
+    <circle cx="19" cy="12" r="2" />
+    <circle cx="5" cy="12" r="2" />
+  </svg>
+</template>
diff --git a/src/client/theme-default-v2/components/icons/VPIconPlus.vue b/src/client/theme-default-v2/components/icons/VPIconPlus.vue
new file mode 100644
index 00000000..74d9f695
--- /dev/null
+++ b/src/client/theme-default-v2/components/icons/VPIconPlus.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M18.9,10.9h-6v-6c0-0.6-0.4-1-1-1s-1,0.4-1,1v6h-6c-0.6,0-1,0.4-1,1s0.4,1,1,1h6v6c0,0.6,0.4,1,1,1s1-0.4,1-1v-6h6c0.6,0,1-0.4,1-1S19.5,10.9,18.9,10.9z" />
+  </svg>
+</template>
diff --git a/src/client/theme-default-v2/components/icons/VPIconPlusSquare.vue b/src/client/theme-default-v2/components/icons/VPIconPlusSquare.vue
new file mode 100644
index 00000000..88e5b5cf
--- /dev/null
+++ b/src/client/theme-default-v2/components/icons/VPIconPlusSquare.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z" />
+    <path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z" />
+  </svg>
+</template>
diff --git a/src/client/theme-default-v2/components/icons/VPIconSun.vue b/src/client/theme-default-v2/components/icons/VPIconSun.vue
new file mode 100644
index 00000000..8ecb25ba
--- /dev/null
+++ b/src/client/theme-default-v2/components/icons/VPIconSun.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" />
+    <path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" />
+    <path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" />
+    <path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" />
+    <path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" />
+    <path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" />
+    <path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
+    <path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" />
+    <path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
+  </svg>
+</template>
diff --git a/src/client/theme-default-v2/composables/aside.ts b/src/client/theme-default-v2/composables/aside.ts
new file mode 100644
index 00000000..50f20626
--- /dev/null
+++ b/src/client/theme-default-v2/composables/aside.ts
@@ -0,0 +1,21 @@
+import { useMediaQuery } from '@vueuse/core'
+import { computed } from 'vue'
+import { useLayout } from './layout'
+
+export function useAside() {
+  const { hasSidebar } = useLayout()
+  const is960 = useMediaQuery('(min-width: 960px)')
+  const is1280 = useMediaQuery('(min-width: 1280px)')
+
+  const isAsideEnabled = computed(() => {
+    if (!is1280.value && !is960.value) {
+      return false
+    }
+
+    return hasSidebar.value ? is1280.value : is960.value
+  })
+
+  return {
+    isAsideEnabled
+  }
+}
diff --git a/src/client/theme-default-v2/composables/data.ts b/src/client/theme-default-v2/composables/data.ts
new file mode 100644
index 00000000..513b2c53
--- /dev/null
+++ b/src/client/theme-default-v2/composables/data.ts
@@ -0,0 +1,4 @@
+import { useData as useData$ } from 'vitepress'
+import type { DefaultTheme } from 'vitepress/theme'
+
+export const useData: typeof useData$<DefaultTheme.Config> = useData$
diff --git a/src/client/theme-default-v2/composables/edit-link.ts b/src/client/theme-default-v2/composables/edit-link.ts
new file mode 100644
index 00000000..75fecc03
--- /dev/null
+++ b/src/client/theme-default-v2/composables/edit-link.ts
@@ -0,0 +1,18 @@
+import { computed } from 'vue'
+import { useData } from './data'
+
+export function useEditLink() {
+  const { theme, page } = useData()
+
+  return computed(() => {
+    const { text = 'Edit this page', pattern = '' } = theme.value.editLink || {}
+    let url: string
+    if (typeof pattern === 'function') {
+      url = pattern(page.value)
+    } else {
+      url = pattern.replace(/:path/g, page.value.filePath)
+    }
+
+    return { url, text }
+  })
+}
diff --git a/src/client/theme-default-v2/composables/flyout.ts b/src/client/theme-default-v2/composables/flyout.ts
new file mode 100644
index 00000000..9b10a704
--- /dev/null
+++ b/src/client/theme-default-v2/composables/flyout.ts
@@ -0,0 +1,59 @@
+import { onUnmounted, readonly, type Ref, ref, watch } from 'vue'
+import { inBrowser } from '../../shared'
+
+interface UseFlyoutOptions {
+  el: Ref<HTMLElement | undefined>
+  onFocus?(): void
+  onBlur?(): void
+}
+
+export const focusedElement = ref<HTMLElement>()
+
+let active = false
+let listeners = 0
+
+export function useFlyout(options: UseFlyoutOptions) {
+  const focus = ref(false)
+
+  if (inBrowser) {
+    !active && activateFocusTracking()
+
+    listeners++
+
+    const unwatch = watch(focusedElement, (el) => {
+      if (el === options.el.value || options.el.value?.contains(el!)) {
+        focus.value = true
+        options.onFocus?.()
+      } else {
+        focus.value = false
+        options.onBlur?.()
+      }
+    })
+
+    onUnmounted(() => {
+      unwatch()
+
+      listeners--
+
+      if (!listeners) {
+        deactivateFocusTracking()
+      }
+    })
+  }
+
+  return readonly(focus)
+}
+
+function activateFocusTracking() {
+  document.addEventListener('focusin', handleFocusIn)
+  active = true
+  focusedElement.value = document.activeElement as HTMLElement
+}
+
+function deactivateFocusTracking() {
+  document.removeEventListener('focusin', handleFocusIn)
+}
+
+function handleFocusIn() {
+  focusedElement.value = document.activeElement as HTMLElement
+}
diff --git a/src/client/theme-default-v2/composables/langs.ts b/src/client/theme-default-v2/composables/langs.ts
new file mode 100644
index 00000000..7d5a2e4c
--- /dev/null
+++ b/src/client/theme-default-v2/composables/langs.ts
@@ -0,0 +1,50 @@
+import { computed } from 'vue'
+import { ensureStartingSlash } from '../support/utils'
+import { useData } from './data'
+
+export function useLangs({ correspondingLink = false } = {}) {
+  const { site, localeIndex, page, theme, hash } = useData()
+  const currentLang = computed(() => ({
+    label: site.value.locales[localeIndex.value]?.label,
+    link:
+      site.value.locales[localeIndex.value]?.link ||
+      (localeIndex.value === 'root' ? '/' : `/${localeIndex.value}/`)
+  }))
+
+  const localeLinks = computed(() =>
+    Object.entries(site.value.locales).flatMap(([key, value]) =>
+      currentLang.value.label === value.label
+        ? []
+        : {
+            text: value.label,
+            link:
+              normalizeLink(
+                value.link || (key === 'root' ? '/' : `/${key}/`),
+                theme.value.i18nRouting !== false && correspondingLink,
+                page.value.relativePath.slice(
+                  currentLang.value.link.length - 1
+                ),
+                !site.value.cleanUrls
+              ) + hash.value
+          }
+    )
+  )
+
+  return { localeLinks, currentLang }
+}
+
+function normalizeLink(
+  link: string,
+  addPath: boolean,
+  path: string,
+  addExt: boolean
+) {
+  return addPath
+    ? link.replace(/\/$/, '') +
+        ensureStartingSlash(
+          path
+            .replace(/(^|\/)index\.md$/, '$1')
+            .replace(/\.md$/, addExt ? '.html' : '')
+        )
+    : link
+}
diff --git a/src/client/theme-default-v2/composables/layout.ts b/src/client/theme-default-v2/composables/layout.ts
new file mode 100644
index 00000000..e0484cf2
--- /dev/null
+++ b/src/client/theme-default-v2/composables/layout.ts
@@ -0,0 +1,118 @@
+import { inBrowser, onContentUpdated, useRoute } from 'vitepress'
+import type { DefaultTheme, useLayout as expected } from 'vitepress/theme'
+import {
+  computed,
+  shallowReadonly,
+  shallowRef,
+  watch,
+  type ComputedRef,
+  type InjectionKey
+} from 'vue'
+import { getSidebar, getSidebarGroups } from '../support/sidebar'
+import { useData } from './data'
+import { getHeaders } from './outline'
+import { useCloseSidebarOnEscape } from './sidebar'
+
+const headers = shallowRef<DefaultTheme.OutlineItem[]>([])
+const sidebar = shallowRef<DefaultTheme.SidebarItem[]>([])
+
+const is960 = shallowRef(false)
+
+export function useLayout(): ReturnType<typeof expected> {
+  const { frontmatter, theme } = useData()
+
+  const isHome = computed(() => {
+    return !!(frontmatter.value.isHome ?? frontmatter.value.layout === 'home')
+  })
+
+  const hasSidebar = computed(() => {
+    return (
+      frontmatter.value.sidebar !== false &&
+      sidebar.value.length > 0 &&
+      !isHome.value
+    )
+  })
+
+  const isSidebarEnabled = computed(() => hasSidebar.value && is960.value)
+
+  const sidebarGroups = computed(() => {
+    return hasSidebar.value ? getSidebarGroups(sidebar.value) : []
+  })
+
+  const hasAside = computed(() => {
+    if (isHome.value) return false
+    if (frontmatter.value.aside != null) return !!frontmatter.value.aside
+    return theme.value.aside !== false
+  })
+
+  const leftAside = computed(() => {
+    if (!hasAside.value) return false
+    return frontmatter.value.aside == null
+      ? theme.value.aside === 'left'
+      : frontmatter.value.aside === 'left'
+  })
+
+  const hasLocalNav = computed(() => {
+    return headers.value.length > 0
+  })
+
+  return {
+    isHome,
+    sidebar: shallowReadonly(sidebar),
+    sidebarGroups,
+    hasSidebar,
+    isSidebarEnabled,
+    hasAside,
+    leftAside,
+    headers: shallowReadonly(headers),
+    hasLocalNav
+  }
+}
+
+interface RegisterWatchersOptions {
+  closeSidebar: () => void
+}
+
+export function registerWatchers({ closeSidebar }: RegisterWatchersOptions) {
+  const { frontmatter, page, theme } = useData()
+
+  watch(
+    () => [page.value.relativePath, theme.value.sidebar] as const,
+    ([relativePath, sidebarConfig]) => {
+      const newSidebar = sidebarConfig
+        ? getSidebar(sidebarConfig, relativePath)
+        : []
+      if (JSON.stringify(newSidebar) !== JSON.stringify(sidebar.value)) {
+        sidebar.value = newSidebar
+      }
+    },
+    { immediate: true, deep: true, flush: 'sync' }
+  )
+
+  onContentUpdated(() => {
+    headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
+  })
+
+  if (inBrowser) {
+    is960.value = window.innerWidth >= 960
+    window.addEventListener(
+      'resize',
+      () => {
+        is960.value = window.innerWidth >= 960
+      },
+      { passive: true }
+    )
+  }
+
+  const route = useRoute()
+  watch(() => route.path, closeSidebar)
+
+  useCloseSidebarOnEscape(closeSidebar)
+}
+
+export interface LayoutInfo {
+  heroImageSlotExists: ComputedRef<boolean>
+}
+
+export const layoutInfoInjectionKey: InjectionKey<LayoutInfo> =
+  Symbol('layout-info')
diff --git a/src/client/theme-default-v2/composables/nav.ts b/src/client/theme-default-v2/composables/nav.ts
new file mode 100644
index 00000000..370c9e08
--- /dev/null
+++ b/src/client/theme-default-v2/composables/nav.ts
@@ -0,0 +1,43 @@
+import { useRoute } from 'vitepress'
+import { ref, watch, type InjectionKey } from 'vue'
+
+export function useNav() {
+  const isScreenOpen = ref(false)
+
+  function openScreen() {
+    isScreenOpen.value = true
+    window.addEventListener('resize', closeScreenOnTabletWindow)
+  }
+
+  function closeScreen() {
+    isScreenOpen.value = false
+    window.removeEventListener('resize', closeScreenOnTabletWindow)
+  }
+
+  function toggleScreen() {
+    isScreenOpen.value ? closeScreen() : openScreen()
+  }
+
+  /**
+   * Close screen when the user resizes the window wider than tablet size.
+   */
+  function closeScreenOnTabletWindow() {
+    window.outerWidth >= 768 && closeScreen()
+  }
+
+  const route = useRoute()
+  watch(() => route.path, closeScreen)
+
+  return {
+    isScreenOpen,
+    openScreen,
+    closeScreen,
+    toggleScreen
+  }
+}
+
+export interface NavExposedMethods {
+  closeScreen: () => void
+}
+
+export const navInjectionKey: InjectionKey<NavExposedMethods> = Symbol('nav')
diff --git a/src/client/theme-default-v2/composables/outline.ts b/src/client/theme-default-v2/composables/outline.ts
new file mode 100644
index 00000000..d9eda9c1
--- /dev/null
+++ b/src/client/theme-default-v2/composables/outline.ts
@@ -0,0 +1,232 @@
+import { getScrollOffset } from 'vitepress'
+import type { DefaultTheme } from 'vitepress/theme'
+import { onMounted, onUnmounted, onUpdated, type Ref } from 'vue'
+import { throttleAndDebounce } from '../support/utils'
+import { useAside } from './aside'
+
+const ignoreRE = /\b(?:VPBadge|header-anchor|footnote-ref|ignore-header)\b/
+
+// cached list of anchor elements from resolveHeaders
+const resolvedHeaders: { element: HTMLHeadElement; link: string }[] = []
+
+export function resolveTitle(theme: DefaultTheme.Config): string {
+  return (
+    (typeof theme.outline === 'object' &&
+      !Array.isArray(theme.outline) &&
+      theme.outline.label) ||
+    theme.outlineTitle ||
+    'On this page'
+  )
+}
+
+export function getHeaders(
+  range: DefaultTheme.Config['outline']
+): DefaultTheme.OutlineItem[] {
+  const headers = [
+    ...document.querySelectorAll('.VPDoc :where(h1,h2,h3,h4,h5,h6)')
+  ]
+    .filter((el) => el.id && el.hasChildNodes())
+    .map((el) => {
+      const level = Number(el.tagName[1])
+      return {
+        element: el as HTMLHeadElement,
+        title: serializeHeader(el),
+        link: '#' + el.id,
+        level
+      }
+    })
+
+  return resolveHeaders(headers, range)
+}
+
+function serializeHeader(h: Element): string {
+  let ret = ''
+  for (const node of h.childNodes) {
+    if (node.nodeType === 1) {
+      if (ignoreRE.test((node as Element).className)) continue
+      ret += node.textContent
+    } else if (node.nodeType === 3) {
+      ret += node.textContent
+    }
+  }
+  return ret.trim()
+}
+
+export function resolveHeaders(
+  headers: DefaultTheme.OutlineItem[],
+  range?: DefaultTheme.Config['outline']
+): DefaultTheme.OutlineItem[] {
+  if (range === false) {
+    return []
+  }
+
+  const levelsRange =
+    (typeof range === 'object' && !Array.isArray(range)
+      ? range.level
+      : range) || 2
+
+  const [high, low]: [number, number] =
+    typeof levelsRange === 'number'
+      ? [levelsRange, levelsRange]
+      : levelsRange === 'deep'
+        ? [2, 6]
+        : levelsRange
+
+  return buildTree(headers, high, low)
+}
+
+export function useActiveAnchor(
+  container: Ref<HTMLElement>,
+  marker: Ref<HTMLElement>
+): void {
+  const { isAsideEnabled } = useAside()
+
+  const onScroll = throttleAndDebounce(setActiveLink, 100)
+
+  let prevActiveLink: HTMLAnchorElement | null = null
+
+  onMounted(() => {
+    requestAnimationFrame(setActiveLink)
+    window.addEventListener('scroll', onScroll)
+  })
+
+  onUpdated(() => {
+    // sidebar update means a route change
+    activateLink(location.hash)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('scroll', onScroll)
+  })
+
+  function setActiveLink() {
+    if (!isAsideEnabled.value) {
+      return
+    }
+
+    const scrollY = window.scrollY
+    const innerHeight = window.innerHeight
+    const offsetHeight = document.body.offsetHeight
+    const isBottom = Math.abs(scrollY + innerHeight - offsetHeight) < 1
+
+    // resolvedHeaders may be repositioned, hidden or fix positioned
+    const headers = resolvedHeaders
+      .map(({ element, link }) => ({
+        link,
+        top: getAbsoluteTop(element)
+      }))
+      .filter(({ top }) => !Number.isNaN(top))
+      .sort((a, b) => a.top - b.top)
+
+    // no headers available for active link
+    if (!headers.length) {
+      activateLink(null)
+      return
+    }
+
+    // page top
+    if (scrollY < 1) {
+      activateLink(null)
+      return
+    }
+
+    // page bottom - highlight last link
+    if (isBottom) {
+      activateLink(headers[headers.length - 1].link)
+      return
+    }
+
+    // find the last header above the top of viewport
+    let activeLink: string | null = null
+    for (const { link, top } of headers) {
+      if (top > scrollY + getScrollOffset() + 4) {
+        break
+      }
+      activeLink = link
+    }
+    activateLink(activeLink)
+  }
+
+  function activateLink(hash: string | null) {
+    if (prevActiveLink) {
+      prevActiveLink.classList.remove('active')
+    }
+
+    if (hash == null) {
+      prevActiveLink = null
+    } else {
+      prevActiveLink = container.value.querySelector(
+        `a[href="${decodeURIComponent(hash)}"]`
+      )
+    }
+
+    const activeLink = prevActiveLink
+
+    if (activeLink) {
+      activeLink.classList.add('active')
+      marker.value.style.top = activeLink.offsetTop + 39 + 'px'
+      marker.value.style.opacity = '1'
+    } else {
+      marker.value.style.top = '33px'
+      marker.value.style.opacity = '0'
+    }
+  }
+}
+
+function getAbsoluteTop(element: HTMLElement): number {
+  let offsetTop = 0
+  while (element !== document.body) {
+    if (element === null) {
+      // child element is:
+      // - not attached to the DOM (display: none)
+      // - set to fixed position (not scrollable)
+      // - body or html element (null offsetParent)
+      return NaN
+    }
+    offsetTop += element.offsetTop
+    element = element.offsetParent as HTMLElement
+  }
+  return offsetTop
+}
+
+function buildTree(
+  data: DefaultTheme.OutlineItem[],
+  min: number,
+  max: number
+): DefaultTheme.OutlineItem[] {
+  resolvedHeaders.length = 0
+
+  const result: DefaultTheme.OutlineItem[] = []
+  const stack: (
+    | DefaultTheme.OutlineItem
+    | { level: number; shouldIgnore: true }
+  )[] = []
+
+  data.forEach((item) => {
+    const node = { ...item, children: [] }
+    let parent = stack[stack.length - 1]
+
+    while (parent && parent.level >= node.level) {
+      stack.pop()
+      parent = stack[stack.length - 1]
+    }
+
+    if (
+      node.element.classList.contains('ignore-header') ||
+      (parent && 'shouldIgnore' in parent)
+    ) {
+      stack.push({ level: node.level, shouldIgnore: true })
+      return
+    }
+
+    if (node.level > max || node.level < min) return
+    resolvedHeaders.push({ element: node.element, link: node.link })
+
+    if (parent) parent.children!.push(node)
+    else result.push(node)
+
+    stack.push(node)
+  })
+
+  return result
+}
diff --git a/src/client/theme-default-v2/composables/prev-next.ts b/src/client/theme-default-v2/composables/prev-next.ts
new file mode 100644
index 00000000..494242a6
--- /dev/null
+++ b/src/client/theme-default-v2/composables/prev-next.ts
@@ -0,0 +1,74 @@
+import { computed } from 'vue'
+import { isActive } from '../../shared'
+import { getFlatSideBarLinks, getSidebar } from '../support/sidebar'
+import { useData } from './data'
+
+export function usePrevNext() {
+  const { page, theme, frontmatter } = useData()
+
+  return computed(() => {
+    const sidebar = getSidebar(theme.value.sidebar, page.value.relativePath)
+    const links = getFlatSideBarLinks(sidebar)
+
+    // ignore inner-page links with hashes
+    const candidates = uniqBy(links, (link) => link.link.replace(/[?#].*$/, ''))
+
+    const index = candidates.findIndex((link) => {
+      return isActive(page.value.relativePath, link.link)
+    })
+
+    const hidePrev =
+      (theme.value.docFooter?.prev === false && !frontmatter.value.prev) ||
+      frontmatter.value.prev === false
+
+    const hideNext =
+      (theme.value.docFooter?.next === false && !frontmatter.value.next) ||
+      frontmatter.value.next === false
+
+    return {
+      prev: hidePrev
+        ? undefined
+        : {
+            text:
+              (typeof frontmatter.value.prev === 'string'
+                ? frontmatter.value.prev
+                : typeof frontmatter.value.prev === 'object'
+                  ? frontmatter.value.prev.text
+                  : undefined) ??
+              candidates[index - 1]?.docFooterText ??
+              candidates[index - 1]?.text,
+            link:
+              (typeof frontmatter.value.prev === 'object'
+                ? frontmatter.value.prev.link
+                : undefined) ?? candidates[index - 1]?.link
+          },
+      next: hideNext
+        ? undefined
+        : {
+            text:
+              (typeof frontmatter.value.next === 'string'
+                ? frontmatter.value.next
+                : typeof frontmatter.value.next === 'object'
+                  ? frontmatter.value.next.text
+                  : undefined) ??
+              candidates[index + 1]?.docFooterText ??
+              candidates[index + 1]?.text,
+            link:
+              (typeof frontmatter.value.next === 'object'
+                ? frontmatter.value.next.link
+                : undefined) ?? candidates[index + 1]?.link
+          }
+    } as {
+      prev?: { text?: string; link?: string }
+      next?: { text?: string; link?: string }
+    }
+  })
+}
+
+function uniqBy<T>(array: T[], keyFn: (item: T) => any): T[] {
+  const seen = new Set()
+  return array.filter((item) => {
+    const k = keyFn(item)
+    return seen.has(k) ? false : seen.add(k)
+  })
+}
diff --git a/src/client/theme-default-v2/composables/sidebar.ts b/src/client/theme-default-v2/composables/sidebar.ts
new file mode 100644
index 00000000..b693cc89
--- /dev/null
+++ b/src/client/theme-default-v2/composables/sidebar.ts
@@ -0,0 +1,128 @@
+import type { DefaultTheme } from 'vitepress/theme'
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+  watchEffect,
+  watchPostEffect,
+  type ComputedRef
+} from 'vue'
+import { isActive } from '../../shared'
+import { hasActiveLink as containsActiveLink } from '../support/sidebar'
+import { useData } from './data'
+
+const isOpen = ref(false)
+
+/**
+ * a11y: cache the element that opened the Sidebar (the menu button) then
+ * focus that button again when Menu is closed with Escape key.
+ */
+export function useCloseSidebarOnEscape(close: () => void) {
+  let triggerElement: HTMLButtonElement | undefined
+
+  watchEffect(() => {
+    triggerElement = isOpen.value
+      ? (document.activeElement as HTMLButtonElement)
+      : undefined
+  })
+
+  onMounted(() => {
+    window.addEventListener('keyup', onEscape)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('keyup', onEscape)
+  })
+
+  function onEscape(e: KeyboardEvent) {
+    if (e.key === 'Escape' && isOpen.value) {
+      close()
+      triggerElement?.focus()
+    }
+  }
+}
+
+export function useSidebarControl() {
+  function open() {
+    isOpen.value = true
+  }
+
+  function close() {
+    isOpen.value = false
+  }
+
+  function toggle() {
+    isOpen.value ? close() : open()
+  }
+
+  return {
+    isOpen,
+    open,
+    close,
+    toggle
+  }
+}
+
+export function useSidebarItemControl(
+  item: ComputedRef<DefaultTheme.SidebarItem>
+) {
+  const { page, hash } = useData()
+
+  const collapsed = ref(false)
+
+  const collapsible = computed(() => {
+    return item.value.collapsed != null
+  })
+
+  const isLink = computed(() => {
+    return !!item.value.link
+  })
+
+  const isActiveLink = ref(false)
+  const updateIsActiveLink = () => {
+    isActiveLink.value = isActive(page.value.relativePath, item.value.link)
+  }
+
+  watch([page, item, hash], updateIsActiveLink)
+  onMounted(updateIsActiveLink)
+
+  const hasActiveLink = computed(() => {
+    if (isActiveLink.value) {
+      return true
+    }
+
+    return item.value.items
+      ? containsActiveLink(page.value.relativePath, item.value.items)
+      : false
+  })
+
+  const hasChildren = computed(() => {
+    return !!(item.value.items && item.value.items.length)
+  })
+
+  watchEffect(() => {
+    collapsed.value = !!(collapsible.value && item.value.collapsed)
+  })
+
+  watchPostEffect(() => {
+    ;(isActiveLink.value || hasActiveLink.value) && (collapsed.value = false)
+  })
+
+  function toggle() {
+    if (collapsible.value) {
+      collapsed.value = !collapsed.value
+    }
+  }
+
+  return {
+    collapsed,
+    collapsible,
+    isLink,
+    isActiveLink,
+    hasActiveLink,
+    hasChildren,
+    toggle
+  }
+}
diff --git a/src/client/theme-default-v2/composables/sponsor-grid.ts b/src/client/theme-default-v2/composables/sponsor-grid.ts
new file mode 100644
index 00000000..3a6f7e3b
--- /dev/null
+++ b/src/client/theme-default-v2/composables/sponsor-grid.ts
@@ -0,0 +1,135 @@
+import { type Ref, onMounted, onUnmounted } from 'vue'
+import { throttleAndDebounce } from '../support/utils'
+
+export interface GridSetting {
+  [size: string]: [number, number][]
+}
+
+export type GridSize = 'xmini' | 'mini' | 'small' | 'medium' | 'big'
+
+export interface UseSponsorsGridOptions {
+  el: Ref<HTMLElement | null>
+  size?: GridSize
+}
+
+/**
+ * Defines grid configuration for each sponsor size in tuple.
+ *
+ * [Screen width, Column size]
+ *
+ * It sets grid size on matching screen size. For example, `[768, 5]` will
+ * set 5 columns when screen size is bigger or equal to 768px.
+ *
+ * Column will set only when item size is bigger than the column size. For
+ * example, even we define 5 columns, if we only have 1 sponsor yet, we would
+ * like to show it in 1 column to make it stand out.
+ */
+const GridSettings: GridSetting = {
+  xmini: [[0, 2]],
+  mini: [],
+  small: [
+    [920, 6],
+    [768, 5],
+    [640, 4],
+    [480, 3],
+    [0, 2]
+  ],
+  medium: [
+    [960, 5],
+    [832, 4],
+    [640, 3],
+    [480, 2]
+  ],
+  big: [
+    [832, 3],
+    [640, 2]
+  ]
+}
+
+export function useSponsorsGrid({
+  el,
+  size = 'medium'
+}: UseSponsorsGridOptions) {
+  const onResize = throttleAndDebounce(manage, 100)
+
+  onMounted(() => {
+    manage()
+    window.addEventListener('resize', onResize)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', onResize)
+  })
+
+  function manage() {
+    adjustSlots(el.value!, size)
+  }
+}
+
+function adjustSlots(el: HTMLElement, size: GridSize) {
+  const tsize = el.children.length
+  const asize = el.querySelectorAll('.vp-sponsor-grid-item:not(.empty)').length
+
+  const grid = setGrid(el, size, asize)
+
+  manageSlots(el, grid, tsize, asize)
+}
+
+function setGrid(el: HTMLElement, size: GridSize, items: number) {
+  const settings = GridSettings[size]
+  const screen = window.innerWidth
+
+  let grid = 1
+
+  settings.some(([breakpoint, value]) => {
+    if (screen >= breakpoint) {
+      grid = items < value ? items : value
+      return true
+    }
+  })
+
+  setGridData(el, grid)
+
+  return grid
+}
+
+function setGridData(el: HTMLElement, value: number) {
+  el.dataset.vpGrid = String(value)
+}
+
+function manageSlots(
+  el: HTMLElement,
+  grid: number,
+  tsize: number,
+  asize: number
+) {
+  const diff = tsize - asize
+  const rem = asize % grid
+  const drem = rem === 0 ? rem : grid - rem
+
+  neutralizeSlots(el, drem - diff)
+}
+
+function neutralizeSlots(el: HTMLElement, count: number) {
+  if (count === 0) {
+    return
+  }
+
+  count > 0 ? addSlots(el, count) : removeSlots(el, count * -1)
+}
+
+function addSlots(el: HTMLElement, count: number) {
+  for (let i = 0; i < count; i++) {
+    const slot = document.createElement('div')
+
+    slot.classList.add('vp-sponsor-grid-item', 'empty')
+
+    el.append(slot)
+  }
+}
+
+function removeSlots(el: HTMLElement, count: number) {
+  for (let i = 0; i < count; i++) {
+    el.removeChild(el.lastElementChild!)
+  }
+}
diff --git a/src/client/theme-default-v2/fonts/inter-italic-cyrillic-ext.woff2 b/src/client/theme-default-v2/fonts/inter-italic-cyrillic-ext.woff2
new file mode 100644
index 00000000..b6b603d5
Binary files /dev/null and b/src/client/theme-default-v2/fonts/inter-italic-cyrillic-ext.woff2 differ
diff --git a/src/client/theme-default-v2/fonts/inter-italic-cyrillic.woff2 b/src/client/theme-default-v2/fonts/inter-italic-cyrillic.woff2
new file mode 100644
index 00000000..def40a4f
Binary files /dev/null and b/src/client/theme-default-v2/fonts/inter-italic-cyrillic.woff2 differ
diff --git a/src/client/theme-default-v2/fonts/inter-italic-greek-ext.woff2 b/src/client/theme-default-v2/fonts/inter-italic-greek-ext.woff2
new file mode 100644
index 00000000..e070c3d3
Binary files /dev/null and b/src/client/theme-default-v2/fonts/inter-italic-greek-ext.woff2 differ
diff --git a/src/client/theme-default-v2/fonts/inter-italic-greek.woff2 b/src/client/theme-default-v2/fonts/inter-italic-greek.woff2
new file mode 100644
index 00000000..a3c16ca4
Binary files /dev/null and b/src/client/theme-default-v2/fonts/inter-italic-greek.woff2 differ
diff --git a/src/client/theme-default-v2/fonts/inter-italic-latin-ext.woff2 b/src/client/theme-default-v2/fonts/inter-italic-latin-ext.woff2
new file mode 100644
index 00000000..2210a899
Binary files /dev/null and b/src/client/theme-default-v2/fonts/inter-italic-latin-ext.woff2 differ
diff --git a/src/client/theme-default-v2/fonts/inter-italic-latin.woff2 b/src/client/theme-default-v2/fonts/inter-italic-latin.woff2
new file mode 100644
index 00000000..790d62dc
Binary files /dev/null and b/src/client/theme-default-v2/fonts/inter-italic-latin.woff2 differ
diff --git a/src/client/theme-default-v2/fonts/inter-italic-vietnamese.woff2 b/src/client/theme-default-v2/fonts/inter-italic-vietnamese.woff2
new file mode 100644
index 00000000..1eec0775
Binary files /dev/null and b/src/client/theme-default-v2/fonts/inter-italic-vietnamese.woff2 differ
diff --git a/src/client/theme-default-v2/fonts/inter-roman-cyrillic-ext.woff2 b/src/client/theme-default-v2/fonts/inter-roman-cyrillic-ext.woff2
new file mode 100644
index 00000000..2cfe6153
Binary files /dev/null and b/src/client/theme-default-v2/fonts/inter-roman-cyrillic-ext.woff2 differ
diff --git a/src/client/theme-default-v2/fonts/inter-roman-cyrillic.woff2 b/src/client/theme-default-v2/fonts/inter-roman-cyrillic.woff2
new file mode 100644
index 00000000..e3886dd1
Binary files /dev/null and b/src/client/theme-default-v2/fonts/inter-roman-cyrillic.woff2 differ
diff --git a/src/client/theme-default-v2/fonts/inter-roman-greek-ext.woff2 b/src/client/theme-default-v2/fonts/inter-roman-greek-ext.woff2
new file mode 100644
index 00000000..36d67487
Binary files /dev/null and b/src/client/theme-default-v2/fonts/inter-roman-greek-ext.woff2 differ
diff --git a/src/client/theme-default-v2/fonts/inter-roman-greek.woff2 b/src/client/theme-default-v2/fonts/inter-roman-greek.woff2
new file mode 100644
index 00000000..2bed1e85
Binary files /dev/null and b/src/client/theme-default-v2/fonts/inter-roman-greek.woff2 differ
diff --git a/src/client/theme-default-v2/fonts/inter-roman-latin-ext.woff2 b/src/client/theme-default-v2/fonts/inter-roman-latin-ext.woff2
new file mode 100644
index 00000000..9a8d1e2b
Binary files /dev/null and b/src/client/theme-default-v2/fonts/inter-roman-latin-ext.woff2 differ
diff --git a/src/client/theme-default-v2/fonts/inter-roman-latin.woff2 b/src/client/theme-default-v2/fonts/inter-roman-latin.woff2
new file mode 100644
index 00000000..07d3c53a
Binary files /dev/null and b/src/client/theme-default-v2/fonts/inter-roman-latin.woff2 differ
diff --git a/src/client/theme-default-v2/fonts/inter-roman-vietnamese.woff2 b/src/client/theme-default-v2/fonts/inter-roman-vietnamese.woff2
new file mode 100644
index 00000000..57bdc22a
Binary files /dev/null and b/src/client/theme-default-v2/fonts/inter-roman-vietnamese.woff2 differ
diff --git a/src/client/theme-default-v2/index.ts b/src/client/theme-default-v2/index.ts
new file mode 100644
index 00000000..fe52cd65
--- /dev/null
+++ b/src/client/theme-default-v2/index.ts
@@ -0,0 +1,4 @@
+import './styles/fonts.css'
+
+export * from './without-fonts'
+export { default as default } from './without-fonts'
diff --git a/src/client/theme-default-v2/styles/base.css b/src/client/theme-default-v2/styles/base.css
new file mode 100644
index 00000000..f5bcad1d
--- /dev/null
+++ b/src/client/theme-default-v2/styles/base.css
@@ -0,0 +1,251 @@
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-delay: -1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    background-attachment: initial !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+}
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+html {
+  line-height: 1.4;
+  font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+}
+
+html.dark {
+  color-scheme: dark;
+}
+
+body {
+  margin: 0;
+  width: 100%;
+  min-width: 320px;
+  min-height: 100vh;
+  line-height: var(--vp-leading-base);
+  font-family: var(--vp-font-family-base);
+  font-size: var(--vp-font-size-base);
+  font-weight: 400;
+  color: var(--vp-c-text-1);
+  background-color: var(--vp-c-bg-1);
+  font-synthesis: style;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+main {
+  display: block;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  line-height: var(--vp-leading-base);
+  font-size: var(--vp-font-size-base);
+  font-weight: 400;
+}
+
+p {
+  margin: 0;
+}
+
+strong,
+b {
+  font-weight: 600;
+}
+
+/**
+ * Avoid 300ms click delay on touch devices that support the `touch-action`
+ * CSS property.
+ *
+ * In particular, unlike most other browsers, IE11+Edge on Windows 10 on
+ * touch devices and IE Mobile 10-11 DON'T remove the click delay when
+ * `<meta name="viewport" content="width=device-width">` is present.
+ * However, they DO support removing the click delay via
+ * `touch-action: manipulation`.
+ *
+ * See:
+ * - http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
+ * - http://caniuse.com/#feat=css-touch-action
+ * - http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
+ */
+a,
+area,
+button,
+[role='button'],
+input,
+label,
+select,
+summary,
+textarea {
+  touch-action: manipulation;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+blockquote {
+  margin: 0;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: var(--vp-font-family-mono);
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+}
+
+figure {
+  margin: 0;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  border: 0;
+  padding: 0;
+  line-height: inherit;
+  color: inherit;
+}
+
+button {
+  padding: 0;
+  font-family: inherit;
+  background-color: transparent;
+  background-image: none;
+}
+
+button:enabled,
+[role='button']:enabled {
+  cursor: pointer;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 1px dotted;
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+button:focus:not(:focus-visible) {
+  outline: none !important;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  background-color: transparent;
+}
+
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+  color: var(--vp-c-text-3);
+}
+
+input::-ms-input-placeholder,
+textarea::-ms-input-placeholder {
+  color: var(--vp-c-text-3);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--vp-c-text-3);
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+textarea {
+  resize: vertical;
+}
+
+select {
+  -webkit-appearance: none;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+li,
+p {
+  overflow-wrap: break-word;
+}
+
+vite-error-overlay {
+  z-index: 9999;
+}
+
+mjx-container {
+  overflow-x: auto;
+}
+
+mjx-container > svg {
+  display: inline-block;
+  margin: auto;
+}
diff --git a/src/client/theme-default-v2/styles/components/custom-block.css b/src/client/theme-default-v2/styles/components/custom-block.css
new file mode 100644
index 00000000..a960381c
--- /dev/null
+++ b/src/client/theme-default-v2/styles/components/custom-block.css
@@ -0,0 +1,208 @@
+.custom-block {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 16px 16px 8px;
+  line-height: 24px;
+  font-size: var(--vp-custom-block-font-size);
+  color: var(--vp-c-text-2);
+}
+
+.custom-block.info {
+  border-color: var(--vp-custom-block-info-border);
+  color: var(--vp-custom-block-info-text);
+  background-color: var(--vp-custom-block-info-bg);
+}
+
+.custom-block.info a,
+.custom-block.info code {
+  color: var(--vp-c-brand-1);
+}
+
+.custom-block.info a:hover,
+.custom-block.info a:hover > code {
+  color: var(--vp-c-brand-2);
+}
+
+.custom-block.info code {
+  background-color: var(--vp-custom-block-info-code-bg);
+}
+
+.custom-block.note {
+  border-color: var(--vp-custom-block-note-border);
+  color: var(--vp-custom-block-note-text);
+  background-color: var(--vp-custom-block-note-bg);
+}
+
+.custom-block.note a,
+.custom-block.note code {
+  color: var(--vp-c-brand-1);
+}
+
+.custom-block.note a:hover,
+.custom-block.note a:hover > code {
+  color: var(--vp-c-brand-2);
+}
+
+.custom-block.note code {
+  background-color: var(--vp-custom-block-note-code-bg);
+}
+
+.custom-block.tip {
+  border-color: var(--vp-custom-block-tip-border);
+  color: var(--vp-custom-block-tip-text);
+  background-color: var(--vp-custom-block-tip-bg);
+}
+
+.custom-block.tip a,
+.custom-block.tip code {
+  color: var(--vp-c-tip-1);
+}
+
+.custom-block.tip a:hover,
+.custom-block.tip a:hover > code {
+  color: var(--vp-c-tip-2);
+}
+
+.custom-block.tip code {
+  background-color: var(--vp-custom-block-tip-code-bg);
+}
+
+.custom-block.important {
+  border-color: var(--vp-custom-block-important-border);
+  color: var(--vp-custom-block-important-text);
+  background-color: var(--vp-custom-block-important-bg);
+}
+
+.custom-block.important a,
+.custom-block.important code {
+  color: var(--vp-c-important-1);
+}
+
+.custom-block.important a:hover,
+.custom-block.important a:hover > code {
+  color: var(--vp-c-important-2);
+}
+
+.custom-block.important code {
+  background-color: var(--vp-custom-block-important-code-bg);
+}
+
+.custom-block.warning {
+  border-color: var(--vp-custom-block-warning-border);
+  color: var(--vp-custom-block-warning-text);
+  background-color: var(--vp-custom-block-warning-bg);
+}
+
+.custom-block.warning a,
+.custom-block.warning code {
+  color: var(--vp-c-warning-1);
+}
+
+.custom-block.warning a:hover,
+.custom-block.warning a:hover > code {
+  color: var(--vp-c-warning-2);
+}
+
+.custom-block.warning code {
+  background-color: var(--vp-custom-block-warning-code-bg);
+}
+
+.custom-block.danger {
+  border-color: var(--vp-custom-block-danger-border);
+  color: var(--vp-custom-block-danger-text);
+  background-color: var(--vp-custom-block-danger-bg);
+}
+
+.custom-block.danger a,
+.custom-block.danger code {
+  color: var(--vp-c-danger-1);
+}
+
+.custom-block.danger a:hover,
+.custom-block.danger a:hover > code {
+  color: var(--vp-c-danger-2);
+}
+
+.custom-block.danger code {
+  background-color: var(--vp-custom-block-danger-code-bg);
+}
+
+.custom-block.caution {
+  border-color: var(--vp-custom-block-caution-border);
+  color: var(--vp-custom-block-caution-text);
+  background-color: var(--vp-custom-block-caution-bg);
+}
+
+.custom-block.caution a,
+.custom-block.caution code {
+  color: var(--vp-c-caution-1);
+}
+
+.custom-block.caution a:hover,
+.custom-block.caution a:hover > code {
+  color: var(--vp-c-caution-2);
+}
+
+.custom-block.caution code {
+  background-color: var(--vp-custom-block-caution-code-bg);
+}
+
+.custom-block.details {
+  border-color: var(--vp-custom-block-details-border);
+  color: var(--vp-custom-block-details-text);
+  background-color: var(--vp-custom-block-details-bg);
+}
+
+.custom-block.details a {
+  color: var(--vp-c-brand-1);
+}
+
+.custom-block.details a:hover,
+.custom-block.details a:hover > code {
+  color: var(--vp-c-brand-2);
+}
+
+.custom-block.details code {
+  background-color: var(--vp-custom-block-details-code-bg);
+}
+
+.custom-block-title {
+  font-weight: 600;
+}
+
+.custom-block p + p {
+  margin: 8px 0;
+}
+
+.custom-block.details summary {
+  margin: 0 0 8px;
+  font-weight: 700;
+  cursor: pointer;
+  user-select: none;
+}
+
+.custom-block.details summary + p {
+  margin: 8px 0;
+}
+
+.custom-block a {
+  color: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: opacity 0.25s;
+}
+
+.custom-block a:hover {
+  opacity: 0.75;
+}
+
+.custom-block code {
+  font-size: var(--vp-custom-block-code-font-size);
+}
+
+.custom-block.custom-block th,
+.custom-block.custom-block blockquote > p {
+  font-size: var(--vp-custom-block-font-size);
+  color: inherit;
+}
diff --git a/src/client/theme-default-v2/styles/components/vp-code-group.css b/src/client/theme-default-v2/styles/components/vp-code-group.css
new file mode 100644
index 00000000..4f23a416
--- /dev/null
+++ b/src/client/theme-default-v2/styles/components/vp-code-group.css
@@ -0,0 +1,85 @@
+.vp-code-group {
+  margin-top: 16px;
+}
+
+.vp-code-group .tabs {
+  position: relative;
+  display: flex;
+  margin-right: -24px;
+  margin-left: -24px;
+  padding: 0 12px;
+  background-color: var(--vp-code-tab-bg);
+  overflow-x: auto;
+  overflow-y: hidden;
+  box-shadow: inset 0 -1px var(--vp-code-tab-divider);
+}
+
+@media (min-width: 640px) {
+  .vp-code-group .tabs {
+    margin-right: 0;
+    margin-left: 0;
+    border-radius: 8px 8px 0 0;
+  }
+}
+
+.vp-code-group .tabs input {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.vp-code-group .tabs label {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px solid transparent;
+  padding: 0 12px;
+  line-height: 48px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-code-tab-text-color);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color 0.25s;
+}
+
+.vp-code-group .tabs label::after {
+  position: absolute;
+  right: 8px;
+  bottom: -1px;
+  left: 8px;
+  z-index: 1;
+  height: 2px;
+  border-radius: 2px;
+  content: '';
+  background-color: transparent;
+  transition: background-color 0.25s;
+}
+
+.vp-code-group label:hover {
+  color: var(--vp-code-tab-hover-text-color);
+}
+
+.vp-code-group input:checked + label {
+  color: var(--vp-code-tab-active-text-color);
+}
+
+.vp-code-group input:checked + label::after {
+  background-color: var(--vp-code-tab-active-bar-color);
+}
+
+.vp-code-group div[class*='language-'],
+.vp-block {
+  display: none;
+  margin-top: 0 !important;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
+
+.vp-code-group div[class*='language-'].active,
+.vp-block.active {
+  display: block;
+}
+
+.vp-block {
+  padding: 20px 24px;
+}
diff --git a/src/client/theme-default-v2/styles/components/vp-code.css b/src/client/theme-default-v2/styles/components/vp-code.css
new file mode 100644
index 00000000..5c42b9ca
--- /dev/null
+++ b/src/client/theme-default-v2/styles/components/vp-code.css
@@ -0,0 +1,7 @@
+.dark .shiki span {
+  color: var(--shiki-dark, inherit);
+}
+
+html:not(.dark) .shiki span {
+  color: var(--shiki-light, inherit);
+}
diff --git a/src/client/theme-default-v2/styles/components/vp-doc.css b/src/client/theme-default-v2/styles/components/vp-doc.css
new file mode 100644
index 00000000..caf8c3b6
--- /dev/null
+++ b/src/client/theme-default-v2/styles/components/vp-doc.css
@@ -0,0 +1,571 @@
+/**
+ * Headings
+ * -------------------------------------------------------------------------- */
+
+.vp-doc h1,
+.vp-doc h2,
+.vp-doc h3,
+.vp-doc h4,
+.vp-doc h5,
+.vp-doc h6 {
+  position: relative;
+  font-weight: 600;
+  outline: none;
+}
+
+.vp-doc h1 {
+  letter-spacing: -0.02em;
+  line-height: 40px;
+  font-size: 28px;
+}
+
+.vp-doc h2 {
+  margin: 48px 0 16px;
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 24px;
+  letter-spacing: -0.02em;
+  line-height: 32px;
+  font-size: 24px;
+}
+
+.vp-doc h3 {
+  margin: 32px 0 0;
+  letter-spacing: -0.01em;
+  line-height: 28px;
+  font-size: 20px;
+}
+
+.vp-doc h4 {
+  margin: 24px 0 0;
+  letter-spacing: -0.01em;
+  line-height: 24px;
+  font-size: 18px;
+}
+
+.vp-doc .header-anchor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin-left: -0.87em;
+  font-weight: 500;
+  user-select: none;
+  opacity: 0;
+  text-decoration: none;
+  transition:
+    color 0.25s,
+    opacity 0.25s;
+}
+
+.vp-doc .header-anchor:before {
+  content: var(--vp-header-anchor-symbol);
+}
+
+.vp-doc h1:hover .header-anchor,
+.vp-doc h1 .header-anchor:focus,
+.vp-doc h2:hover .header-anchor,
+.vp-doc h2 .header-anchor:focus,
+.vp-doc h3:hover .header-anchor,
+.vp-doc h3 .header-anchor:focus,
+.vp-doc h4:hover .header-anchor,
+.vp-doc h4 .header-anchor:focus,
+.vp-doc h5:hover .header-anchor,
+.vp-doc h5 .header-anchor:focus,
+.vp-doc h6:hover .header-anchor,
+.vp-doc h6 .header-anchor:focus {
+  opacity: 1;
+}
+
+@media (min-width: 768px) {
+  .vp-doc h1 {
+    letter-spacing: -0.02em;
+    line-height: 40px;
+    font-size: 32px;
+  }
+}
+
+.vp-doc h2 .header-anchor {
+  top: 24px;
+}
+
+/**
+ * Paragraph and inline elements
+ * -------------------------------------------------------------------------- */
+
+.vp-doc p,
+.vp-doc summary {
+  margin: 16px 0;
+}
+
+.vp-doc p {
+  line-height: 28px;
+}
+
+.vp-doc blockquote {
+  margin: 16px 0;
+  border-left: 2px solid var(--vp-c-divider);
+  padding-left: 16px;
+  transition: border-color 0.5s;
+  color: var(--vp-c-text-2);
+}
+
+.vp-doc blockquote > p {
+  margin: 0;
+  font-size: 16px;
+  transition: color 0.5s;
+}
+
+.vp-doc a {
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition:
+    color 0.25s,
+    opacity 0.25s;
+}
+
+.vp-doc a:hover {
+  color: var(--vp-c-brand-2);
+}
+
+.vp-doc strong {
+  font-weight: 600;
+}
+
+/**
+ * Lists
+ * -------------------------------------------------------------------------- */
+
+.vp-doc ul,
+.vp-doc ol {
+  padding-left: 1.25rem;
+  margin: 16px 0;
+}
+
+.vp-doc ul {
+  list-style: disc;
+}
+
+.vp-doc ol {
+  list-style: decimal;
+}
+
+.vp-doc li + li {
+  margin-top: 8px;
+}
+
+.vp-doc li > ol,
+.vp-doc li > ul {
+  margin: 8px 0 0;
+}
+
+/**
+ * Table
+ * -------------------------------------------------------------------------- */
+
+.vp-doc table {
+  display: block;
+  border-collapse: collapse;
+  margin: 20px 0;
+  overflow-x: auto;
+}
+
+.vp-doc tr {
+  background-color: var(--vp-c-bg);
+  border-top: 1px solid var(--vp-c-divider);
+  transition: background-color 0.5s;
+}
+
+.vp-doc tr:nth-child(2n) {
+  background-color: var(--vp-c-bg-soft);
+}
+
+.vp-doc th,
+.vp-doc td {
+  border: 1px solid var(--vp-c-divider);
+  padding: 8px 16px;
+}
+
+.vp-doc th {
+  text-align: left;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  background-color: var(--vp-c-bg-soft);
+}
+
+.vp-doc td {
+  font-size: 14px;
+}
+
+/**
+ * Decorational elements
+ * -------------------------------------------------------------------------- */
+
+.vp-doc hr {
+  margin: 16px 0;
+  border: none;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+/**
+ * Custom Block
+ * -------------------------------------------------------------------------- */
+
+.vp-doc .custom-block {
+  margin: 16px 0;
+}
+
+.vp-doc .custom-block p {
+  margin: 8px 0;
+  line-height: 24px;
+}
+
+.vp-doc .custom-block p:first-child {
+  margin: 0;
+}
+
+.vp-doc .custom-block div[class*='language-'] {
+  margin: 8px 0;
+  border-radius: 8px;
+}
+
+.vp-doc .custom-block div[class*='language-'] code {
+  font-weight: 400;
+  background-color: transparent;
+}
+
+.vp-doc .custom-block .vp-code-group .tabs {
+  margin: 0;
+  border-radius: 8px 8px 0 0;
+}
+
+/**
+ * Code
+ * -------------------------------------------------------------------------- */
+
+/* inline code */
+.vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-color);
+}
+
+.vp-doc :not(pre) > code {
+  border-radius: 4px;
+  padding: 3px 6px;
+  background-color: var(--vp-code-bg);
+  transition:
+    color 0.25s,
+    background-color 0.5s;
+}
+
+.vp-doc a > code {
+  color: var(--vp-code-link-color);
+}
+
+.vp-doc a:hover > code {
+  color: var(--vp-code-link-hover-color);
+}
+
+.vp-doc h1 > code,
+.vp-doc h2 > code,
+.vp-doc h3 > code,
+.vp-doc h4 > code {
+  font-size: 0.9em;
+}
+
+.vp-doc div[class*='language-'],
+.vp-block {
+  position: relative;
+  margin: 16px -24px;
+  background-color: var(--vp-code-block-bg);
+  overflow-x: auto;
+  transition: background-color 0.5s;
+}
+
+@media (min-width: 640px) {
+  .vp-doc div[class*='language-'],
+  .vp-block {
+    border-radius: 8px;
+    margin: 16px 0;
+  }
+}
+
+@media (max-width: 639px) {
+  .vp-doc li div[class*='language-'] {
+    border-radius: 8px 0 0 8px;
+  }
+}
+
+.vp-doc div[class*='language-'] + div[class*='language-'],
+.vp-doc div[class$='-api'] + div[class*='language-'],
+.vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
+  margin-top: -8px;
+}
+
+.vp-doc [class*='language-'] pre,
+.vp-doc [class*='language-'] code {
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+}
+
+.vp-doc [class*='language-'] pre {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  padding: 20px 0;
+  background: transparent;
+  overflow-x: auto;
+  /*rtl:ignore*/
+  text-align: left;
+}
+
+.vp-doc [class*='language-'] code {
+  display: block;
+  padding: 0 24px;
+  width: fit-content;
+  min-width: 100%;
+  line-height: var(--vp-code-line-height);
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-block-color);
+  transition: color 0.5s;
+}
+
+.vp-doc [class*='language-'] code .highlighted {
+  background-color: var(--vp-code-line-highlight-color);
+  transition: background-color 0.5s;
+  margin: 0 -24px;
+  padding: 0 24px;
+  width: calc(100% + 2 * 24px);
+  display: inline-block;
+}
+
+.vp-doc [class*='language-'] code .highlighted.error {
+  background-color: var(--vp-code-line-error-color);
+}
+
+.vp-doc [class*='language-'] code .highlighted.warning {
+  background-color: var(--vp-code-line-warning-color);
+}
+
+.vp-doc [class*='language-'] code .diff {
+  transition: background-color 0.5s;
+  margin: 0 -24px;
+  padding: 0 24px;
+  width: calc(100% + 2 * 24px);
+  display: inline-block;
+}
+
+.vp-doc [class*='language-'] code .diff::before {
+  position: absolute;
+  left: 10px;
+}
+
+.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  filter: blur(0.095rem);
+  opacity: 0.4;
+  transition:
+    filter 0.35s,
+    opacity 0.35s;
+}
+
+.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  opacity: 0.7;
+  transition:
+    filter 0.35s,
+    opacity 0.35s;
+}
+
+.vp-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus) {
+  filter: blur(0);
+  opacity: 1;
+}
+
+.vp-doc [class*='language-'] code .diff.remove {
+  background-color: var(--vp-code-line-diff-remove-color);
+  opacity: 0.7;
+}
+
+.vp-doc [class*='language-'] code .diff.remove::before {
+  content: '-';
+  color: var(--vp-code-line-diff-remove-symbol-color);
+}
+
+.vp-doc [class*='language-'] code .diff.add {
+  background-color: var(--vp-code-line-diff-add-color);
+}
+
+.vp-doc [class*='language-'] code .diff.add::before {
+  content: '+';
+  color: var(--vp-code-line-diff-add-symbol-color);
+}
+
+.vp-doc div[class*='language-'].line-numbers-mode {
+  /*rtl:ignore*/
+  padding-left: 32px;
+}
+
+.vp-doc .line-numbers-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  /*rtl:ignore*/
+  left: 0;
+  z-index: 3;
+  /*rtl:ignore*/
+  border-right: 1px solid var(--vp-code-block-divider-color);
+  padding-top: 20px;
+  width: 32px;
+  text-align: center;
+  font-family: var(--vp-font-family-mono);
+  line-height: var(--vp-code-line-height);
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-line-number-color);
+  transition:
+    border-color 0.5s,
+    color 0.5s;
+}
+
+.vp-doc [class*='language-'] > button.copy {
+  /*rtl:ignore*/
+  direction: ltr;
+  position: absolute;
+  top: 12px;
+  /*rtl:ignore*/
+  right: 12px;
+  z-index: 3;
+  border: 1px solid var(--vp-code-copy-code-border-color);
+  border-radius: 4px;
+  width: 40px;
+  height: 40px;
+  background-color: var(--vp-code-copy-code-bg);
+  opacity: 0;
+  cursor: pointer;
+  background-image: var(--vp-icon-copy);
+  background-position: 50%;
+  background-size: 20px;
+  background-repeat: no-repeat;
+  transition:
+    border-color 0.25s,
+    background-color 0.25s,
+    opacity 0.25s;
+}
+
+.vp-doc [class*='language-']:hover > button.copy,
+.vp-doc [class*='language-'] > button.copy:focus {
+  opacity: 1;
+}
+
+.vp-doc [class*='language-'] > button.copy:hover,
+.vp-doc [class*='language-'] > button.copy.copied {
+  border-color: var(--vp-code-copy-code-hover-border-color);
+  background-color: var(--vp-code-copy-code-hover-bg);
+}
+
+.vp-doc [class*='language-'] > button.copy.copied,
+.vp-doc [class*='language-'] > button.copy:hover.copied {
+  /*rtl:ignore*/
+  border-radius: 0 4px 4px 0;
+  background-color: var(--vp-code-copy-code-hover-bg);
+  background-image: var(--vp-icon-copied);
+}
+
+.vp-doc [class*='language-'] > button.copy.copied::before,
+.vp-doc [class*='language-'] > button.copy:hover.copied::before {
+  position: relative;
+  top: -1px;
+  /*rtl:ignore*/
+  transform: translateX(calc(-100% - 1px));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--vp-code-copy-code-hover-border-color);
+  /*rtl:ignore*/
+  border-right: 0;
+  /*rtl:ignore*/
+  border-radius: 4px 0 0 4px;
+  padding: 0 10px;
+  width: fit-content;
+  height: 40px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-code-copy-code-active-text);
+  background-color: var(--vp-code-copy-code-hover-bg);
+  white-space: nowrap;
+  content: var(--vp-code-copy-copied-text-content);
+}
+
+.vp-doc [class*='language-'] > span.lang {
+  position: absolute;
+  top: 2px;
+  /*rtl:ignore*/
+  right: 8px;
+  z-index: 2;
+  font-size: 12px;
+  font-weight: 500;
+  user-select: none;
+  color: var(--vp-code-lang-color);
+  transition:
+    color 0.4s,
+    opacity 0.4s;
+}
+
+.vp-doc [class*='language-']:hover > button.copy + span.lang,
+.vp-doc [class*='language-'] > button.copy:focus + span.lang {
+  opacity: 0;
+}
+
+/**
+ * Component: Team
+ * -------------------------------------------------------------------------- */
+
+.vp-doc .VPTeamMembers {
+  margin-top: 24px;
+}
+
+.vp-doc .VPTeamMembers.small.count-1 .container {
+  margin: 0 !important;
+  max-width: calc((100% - 24px) / 2) !important;
+}
+
+.vp-doc .VPTeamMembers.small.count-2 .container,
+.vp-doc .VPTeamMembers.small.count-3 .container {
+  max-width: 100% !important;
+}
+
+.vp-doc .VPTeamMembers.medium.count-1 .container {
+  margin: 0 !important;
+  max-width: calc((100% - 24px) / 2) !important;
+}
+
+/**
+ * External links
+ * -------------------------------------------------------------------------- */
+
+/* prettier-ignore */
+:is(.vp-external-link-icon, .vp-doc a[href*='://'], .vp-doc a[target='_blank']):not(:is(.no-icon, svg a, :has(img, svg)))::after {
+  display: inline-block;
+  margin-top: -1px;
+  margin-left: 4px;
+  width: 11px;
+  height: 11px;
+  background: currentColor;
+  color: var(--vp-c-text-3);
+  flex-shrink: 0;
+  --icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");
+  -webkit-mask-image: var(--icon);
+  mask-image: var(--icon);
+  /*rtl:raw:transform: scaleX(-1);*/
+}
+
+.vp-external-link-icon::after {
+  content: '';
+}
+
+/* prettier-ignore */
+.external-link-icon-enabled :is(.vp-doc a[href*='://'], .vp-doc a[target='_blank']):not(:is(.no-icon, svg a, :has(img, svg)))::after {
+  content: '';
+  color: currentColor;
+}
diff --git a/src/client/theme-default-v2/styles/components/vp-sponsor.css b/src/client/theme-default-v2/styles/components/vp-sponsor.css
new file mode 100644
index 00000000..9e677ab9
--- /dev/null
+++ b/src/client/theme-default-v2/styles/components/vp-sponsor.css
@@ -0,0 +1,155 @@
+/**
+ * VPSponsors styles are defined as global because a new class gets
+ * allied in onMounted` hook and we can't use scoped style.
+ */
+.vp-sponsor {
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.vp-sponsor.aside {
+  border-radius: 12px;
+}
+
+.vp-sponsor-section + .vp-sponsor-section {
+  margin-top: 4px;
+}
+
+.vp-sponsor-tier {
+  margin: 0 0 4px !important;
+  text-align: center;
+  letter-spacing: 1px !important;
+  line-height: 24px;
+  width: 100%;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  background-color: var(--vp-c-bg-soft);
+}
+
+.vp-sponsor.normal .vp-sponsor-tier {
+  padding: 13px 0 11px;
+  font-size: 14px;
+}
+
+.vp-sponsor.aside .vp-sponsor-tier {
+  padding: 9px 0 7px;
+  font-size: 12px;
+}
+
+.vp-sponsor-grid + .vp-sponsor-tier {
+  margin-top: 4px;
+}
+
+.vp-sponsor-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.vp-sponsor-grid.xmini .vp-sponsor-grid-link {
+  height: 64px;
+}
+.vp-sponsor-grid.xmini .vp-sponsor-grid-image {
+  max-width: 64px;
+  max-height: 22px;
+}
+
+.vp-sponsor-grid.mini .vp-sponsor-grid-link {
+  height: 72px;
+}
+.vp-sponsor-grid.mini .vp-sponsor-grid-image {
+  max-width: 96px;
+  max-height: 24px;
+}
+
+.vp-sponsor-grid.small .vp-sponsor-grid-link {
+  height: 96px;
+}
+.vp-sponsor-grid.small .vp-sponsor-grid-image {
+  max-width: 96px;
+  max-height: 24px;
+}
+
+.vp-sponsor-grid.medium .vp-sponsor-grid-link {
+  height: 112px;
+}
+.vp-sponsor-grid.medium .vp-sponsor-grid-image {
+  max-width: 120px;
+  max-height: 36px;
+}
+
+.vp-sponsor-grid.big .vp-sponsor-grid-link {
+  height: 184px;
+}
+.vp-sponsor-grid.big .vp-sponsor-grid-image {
+  max-width: 192px;
+  max-height: 56px;
+}
+
+.vp-sponsor-grid[data-vp-grid='2'] .vp-sponsor-grid-item {
+  width: calc((100% - 4px) / 2);
+}
+
+.vp-sponsor-grid[data-vp-grid='3'] .vp-sponsor-grid-item {
+  width: calc((100% - 4px * 2) / 3);
+}
+
+.vp-sponsor-grid[data-vp-grid='4'] .vp-sponsor-grid-item {
+  width: calc((100% - 4px * 3) / 4);
+}
+
+.vp-sponsor-grid[data-vp-grid='5'] .vp-sponsor-grid-item {
+  width: calc((100% - 4px * 4) / 5);
+}
+
+.vp-sponsor-grid[data-vp-grid='6'] .vp-sponsor-grid-item {
+  width: calc((100% - 4px * 5) / 6);
+}
+
+.vp-sponsor-grid-item {
+  flex-shrink: 0;
+  width: 100%;
+  background-color: var(--vp-c-bg-soft);
+  transition: background-color 0.25s;
+}
+
+.vp-sponsor-grid-item:hover {
+  background-color: var(--vp-c-default-soft);
+}
+
+.vp-sponsor-grid-item:hover .vp-sponsor-grid-image {
+  filter: grayscale(0) invert(0);
+}
+
+.vp-sponsor-grid-item.empty:hover {
+  background-color: var(--vp-c-bg-soft);
+}
+
+.dark .vp-sponsor-grid-item:hover {
+  background-color: var(--vp-c-white);
+}
+
+.dark .vp-sponsor-grid-item.empty:hover {
+  background-color: var(--vp-c-bg-soft);
+}
+
+.vp-sponsor-grid-link {
+  display: flex;
+}
+
+.vp-sponsor-grid-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.vp-sponsor-grid-image {
+  max-width: 100%;
+  filter: grayscale(1);
+  transition: filter 0.25s;
+}
+
+.dark .vp-sponsor-grid-image {
+  filter: grayscale(1) invert(1);
+}
diff --git a/src/client/theme-default-v2/styles/fonts.css b/src/client/theme-default-v2/styles/fonts.css
new file mode 100644
index 00000000..2e5521c0
--- /dev/null
+++ b/src/client/theme-default-v2/styles/fonts.css
@@ -0,0 +1,195 @@
+/* webfont-marker-begin */
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+/* webfont-marker-end */
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-roman-cyrillic-ext.woff2') format('woff2');
+  unicode-range:
+    U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-roman-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-roman-greek-ext.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-roman-greek.woff2') format('woff2');
+  unicode-range:
+    U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-roman-vietnamese.woff2') format('woff2');
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
+    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+    U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-roman-latin-ext.woff2') format('woff2');
+  unicode-range:
+    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
+    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-roman-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-italic-cyrillic-ext.woff2') format('woff2');
+  unicode-range:
+    U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-italic-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-italic-greek-ext.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-italic-greek.woff2') format('woff2');
+  unicode-range:
+    U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-italic-vietnamese.woff2') format('woff2');
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
+    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+    U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-italic-latin-ext.woff2') format('woff2');
+  unicode-range:
+    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
+    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-italic-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Punctuation SC';
+  font-weight: 400;
+  src:
+    local('PingFang SC Regular'), local('Noto Sans CJK SC'),
+    local('Microsoft YaHei');
+  unicode-range:
+    U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
+    U+007E, U+002F;
+}
+
+@font-face {
+  font-family: 'Punctuation SC';
+  font-weight: 500;
+  src:
+    local('PingFang SC Medium'), local('Noto Sans CJK SC'),
+    local('Microsoft YaHei');
+  unicode-range:
+    U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
+    U+007E, U+002F;
+}
+
+@font-face {
+  font-family: 'Punctuation SC';
+  font-weight: 600;
+  src:
+    local('PingFang SC Semibold'), local('Noto Sans CJK SC Bold'),
+    local('Microsoft YaHei Bold');
+  unicode-range:
+    U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
+    U+007E, U+002F;
+}
+
+@font-face {
+  font-family: 'Punctuation SC';
+  font-weight: 700;
+  src:
+    local('PingFang SC Semibold'), local('Noto Sans CJK SC Bold'),
+    local('Microsoft YaHei Bold');
+  unicode-range:
+    U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
+    U+007E, U+002F;
+}
+
+/* Generate the subsetted fonts using: `pyftsubset <file>.woff2 --unicodes="<range>" --output-file="inter-<style>-<subset>.woff2" --flavor=woff2` */
diff --git a/src/client/theme-default-v2/styles/icons.css b/src/client/theme-default-v2/styles/icons.css
new file mode 100644
index 00000000..5297cab0
--- /dev/null
+++ b/src/client/theme-default-v2/styles/icons.css
@@ -0,0 +1,93 @@
+[class^='vpi-'],
+[class*=' vpi-'],
+.vp-icon {
+  width: 1em;
+  height: 1em;
+}
+[class^='vpi-'].bg,
+[class*=' vpi-'].bg,
+.vp-icon.bg {
+  background-size: 100% 100%;
+  background-color: transparent;
+}
+[class^='vpi-']:not(.bg),
+[class*=' vpi-']:not(.bg),
+.vp-icon:not(.bg) {
+  -webkit-mask: var(--icon) no-repeat;
+  mask: var(--icon) no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  background-color: currentColor;
+  color: inherit;
+}
+
+/* internal icons - used under ISC from https://lucide.dev/ */
+.vpi-align-left {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 12H3m14 6H3M21 6H3'/%3E%3C/svg%3E");
+}
+.vpi-arrow-right,
+.vpi-arrow-down,
+.vpi-arrow-left,
+.vpi-arrow-up {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-7-7l7 7l-7 7'/%3E%3C/svg%3E");
+}
+.vpi-chevron-right,
+.vpi-chevron-down,
+.vpi-chevron-left,
+.vpi-chevron-up {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18l6-6l-6-6'/%3E%3C/svg%3E");
+}
+.vpi-chevron-down,
+.vpi-arrow-down {
+  /*rtl:ignore*/
+  transform: rotate(90deg);
+}
+.vpi-chevron-left,
+.vpi-arrow-left {
+  /*rtl:ignore*/
+  transform: rotate(180deg);
+}
+.vpi-chevron-up,
+.vpi-arrow-up {
+  /*rtl:ignore*/
+  transform: rotate(-90deg);
+}
+.vpi-square-pen {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z'/%3E%3C/g%3E%3C/svg%3E");
+}
+.vpi-plus {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-7-7v14'/%3E%3C/svg%3E");
+}
+.vpi-sun {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/g%3E%3C/svg%3E");
+}
+.vpi-moon {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3a6 6 0 0 0 9 9a9 9 0 1 1-9-9'/%3E%3C/svg%3E");
+}
+.vpi-more-horizontal {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/g%3E%3C/svg%3E");
+}
+.vpi-languages {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 8l6 6m-7 0l6-6l2-3M2 5h12M7 2h1m14 20l-5-10l-5 10m2-4h6'/%3E%3C/svg%3E");
+}
+.vpi-heart {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2c-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
+}
+.vpi-search {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'%3E%3Cpath d='m21 21l-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E");
+}
+.vpi-layout-list {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3Cpath d='M14 4h7m-7 5h7m-7 6h7m-7 5h7'/%3E%3C/g%3E%3C/svg%3E");
+}
+.vpi-delete {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 5a2 2 0 0 0-1.344.519l-6.328 5.74a1 1 0 0 0 0 1.481l6.328 5.741A2 2 0 0 0 10 19h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm2 4l6 6m0-6l-6 6'/%3E%3C/svg%3E");
+}
+.vpi-corner-down-left {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'/%3E%3Cpath d='m9 10l-5 5l5 5'/%3E%3C/g%3E%3C/svg%3E");
+}
+:root {
+  /* clipboard */
+  --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/g%3E%3C/svg%3E");
+  /* clipboard-check */
+  --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14l2 2l4-4'/%3E%3C/g%3E%3C/svg%3E");
+}
diff --git a/src/client/theme-default-v2/styles/utils.css b/src/client/theme-default-v2/styles/utils.css
new file mode 100644
index 00000000..65c7e55e
--- /dev/null
+++ b/src/client/theme-default-v2/styles/utils.css
@@ -0,0 +1,9 @@
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  white-space: nowrap;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+}
diff --git a/src/client/theme-default-v2/styles/vars.css b/src/client/theme-default-v2/styles/vars.css
new file mode 100644
index 00000000..cc9317a7
--- /dev/null
+++ b/src/client/theme-default-v2/styles/vars.css
@@ -0,0 +1,603 @@
+/**
+ * Colors: Solid
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-white: #ffffff;
+  --vp-c-black: #000000;
+
+  --vp-c-neutral: var(--vp-c-black);
+  --vp-c-neutral-inverse: var(--vp-c-white);
+}
+
+.dark {
+  --vp-c-neutral: var(--vp-c-white);
+  --vp-c-neutral-inverse: var(--vp-c-black);
+}
+
+/**
+ * Colors: Palette
+ *
+ * The primitive colors used for accent colors. These colors are referenced
+ * by functional colors such as "Text", "Background", or "Brand".
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *    It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *    top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *    or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *    on top of it.
+ *
+ *    The soft color must be semi transparent alpha channel. This is crucial
+ *    because it allows adding multiple "soft" colors on top of each other
+ *    to create a accent, such as when having inline code block inside
+ *    custom containers.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-gray-1: #dddde3;
+  --vp-c-gray-2: #e4e4e9;
+  --vp-c-gray-3: #ebebef;
+  --vp-c-gray-soft: rgba(142, 150, 170, 0.14);
+
+  --vp-c-indigo-1: #3451b2;
+  --vp-c-indigo-2: #3a5ccc;
+  --vp-c-indigo-3: #5672cd;
+  --vp-c-indigo-soft: rgba(100, 108, 255, 0.14);
+
+  --vp-c-purple-1: #6f42c1;
+  --vp-c-purple-2: #7e4cc9;
+  --vp-c-purple-3: #8e5cd9;
+  --vp-c-purple-soft: rgba(159, 122, 234, 0.14);
+
+  --vp-c-green-1: #18794e;
+  --vp-c-green-2: #299764;
+  --vp-c-green-3: #30a46c;
+  --vp-c-green-soft: rgba(16, 185, 129, 0.14);
+
+  --vp-c-yellow-1: #915930;
+  --vp-c-yellow-2: #946300;
+  --vp-c-yellow-3: #9f6a00;
+  --vp-c-yellow-soft: rgba(234, 179, 8, 0.14);
+
+  --vp-c-red-1: #b8272c;
+  --vp-c-red-2: #d5393e;
+  --vp-c-red-3: #e0575b;
+  --vp-c-red-soft: rgba(244, 63, 94, 0.14);
+
+  --vp-c-sponsor: #db2777;
+}
+
+.dark {
+  --vp-c-gray-1: #515c67;
+  --vp-c-gray-2: #414853;
+  --vp-c-gray-3: #32363f;
+  --vp-c-gray-soft: rgba(101, 117, 133, 0.16);
+
+  --vp-c-indigo-1: #a8b1ff;
+  --vp-c-indigo-2: #5c73e7;
+  --vp-c-indigo-3: #3e63dd;
+  --vp-c-indigo-soft: rgba(100, 108, 255, 0.16);
+
+  --vp-c-purple-1: #c8abfa;
+  --vp-c-purple-2: #a879e6;
+  --vp-c-purple-3: #8e5cd9;
+  --vp-c-purple-soft: rgba(159, 122, 234, 0.16);
+
+  --vp-c-green-1: #3dd68c;
+  --vp-c-green-2: #30a46c;
+  --vp-c-green-3: #298459;
+  --vp-c-green-soft: rgba(16, 185, 129, 0.16);
+
+  --vp-c-yellow-1: #f9b44e;
+  --vp-c-yellow-2: #da8b17;
+  --vp-c-yellow-3: #a46a0a;
+  --vp-c-yellow-soft: rgba(234, 179, 8, 0.16);
+
+  --vp-c-red-1: #f66f81;
+  --vp-c-red-2: #f14158;
+  --vp-c-red-3: #b62a3c;
+  --vp-c-red-soft: rgba(244, 63, 94, 0.16);
+}
+
+/**
+ * Colors: Background
+ *
+ * TODO: Revise descriptions.
+ *
+ * - `bg`: The bg color used for main screen.
+ *
+ * - `bg-alt`: The alternative bg color used in places such as "sidebar",
+ *   or "code block".
+ *
+ * - `bg-elv`: The elevated bg color. This is used at parts where it "floats",
+ *   such as "dialog".
+ *
+ * - `bg-soft`: The bg color to slightly distinguish some components from
+ *   the page. Used for things like "carbon ads" or "table".
+ * -------------------------------------------------------------------------- */
+
+/* TODO: Maybe remove alt and elv. */
+:root {
+  --vp-c-bg-1: #ffffff;
+  --vp-c-bg-2: #f6f6f7;
+  --vp-c-bg-3: #f6f6f7;
+
+  --vp-c-bg-alt: #f6f6f7;
+  --vp-c-bg-elv: #ffffff;
+  --vp-c-bg-soft: #f6f6f7;
+}
+
+.dark {
+  --vp-c-bg-1: #151517;
+  --vp-c-bg-2: #1b1b1f;
+  --vp-c-bg-3: #202127;
+
+  --vp-c-bg-alt: #161618;
+  --vp-c-bg-elv: #202127;
+  --vp-c-bg-soft: #202127;
+}
+
+/**
+ * Colors: Borders
+ *
+ * - `divider`: This is used for separators. This is used to divide sections
+ *   within the same components, such as having separator on "h2" heading.
+ *
+ * - `border`: This is designed for borders on interactive components.
+ *   For example this should be used for a button outline.
+ *
+ * - `gutter`: This is used to divide components in the page. For example
+ *   the header and the lest of the page.
+ * -------------------------------------------------------------------------- */
+
+/* TODO: Maybe remove divider and use border everywhere. */
+:root {
+  --vp-c-border: #c2c2c4;
+  --vp-c-divider: #e2e2e3;
+  --vp-c-gutter: #e2e2e3;
+}
+
+.dark {
+  --vp-c-border: #3c3f44;
+  --vp-c-divider: #2e2e32;
+  --vp-c-gutter: #000000;
+}
+
+/**
+ * Colors: Text
+ *
+ * - `text-1`: Used for primary text.
+ *
+ * - `text-2`: Used for muted texts, such as "inactive menu" or "info texts".
+ *
+ * - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon".
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-text-1: #3c3c43;
+  --vp-c-text-2: #67676c;
+  --vp-c-text-3: #929295;
+}
+
+.dark {
+  --vp-c-text-1: #dfdfd6;
+  --vp-c-text-2: #98989f;
+  --vp-c-text-3: #6a6a71;
+}
+
+/**
+ * Colors: Function
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attached to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ *
+ * To understand the scaling system, refer to "Colors: Palette" section.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  /* DEPRECATED: Use `--vp-c-brand-1` instead. */
+  --vp-c-brand: var(--vp-c-brand-1);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-note-1: var(--vp-c-brand-1);
+  --vp-c-note-2: var(--vp-c-brand-2);
+  --vp-c-note-3: var(--vp-c-brand-3);
+  --vp-c-note-soft: var(--vp-c-brand-soft);
+
+  --vp-c-success-1: var(--vp-c-green-1);
+  --vp-c-success-2: var(--vp-c-green-2);
+  --vp-c-success-3: var(--vp-c-green-3);
+  --vp-c-success-soft: var(--vp-c-green-soft);
+
+  --vp-c-important-1: var(--vp-c-purple-1);
+  --vp-c-important-2: var(--vp-c-purple-2);
+  --vp-c-important-3: var(--vp-c-purple-3);
+  --vp-c-important-soft: var(--vp-c-purple-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+
+  --vp-c-caution-1: var(--vp-c-red-1);
+  --vp-c-caution-2: var(--vp-c-red-2);
+  --vp-c-caution-3: var(--vp-c-red-3);
+  --vp-c-caution-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Typography
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-font-family-base:
+    'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --vp-font-family-mono:
+    ui-monospace, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono',
+    'Courier New', monospace;
+
+  --vp-font-size-base: 1rem; /* 16px */
+
+  --vp-leading-base: calc(var(--vp-font-size-base) * 1.75); /* 28px */
+
+  font-optical-sizing: auto;
+}
+
+:root:where(:lang(zh)) {
+  --vp-font-family-base:
+    'Punctuation SC', 'Inter', ui-sans-serif, system-ui, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+/**
+ * Shadows
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
+  --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
+  --vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
+  --vp-shadow-5:
+    0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
+}
+
+/**
+ * Z-indexes
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-z-index-footer: 10;
+  --vp-z-index-local-nav: 20;
+  --vp-z-index-nav: 30;
+  --vp-z-index-layout-top: 40;
+  --vp-z-index-backdrop: 50;
+  --vp-z-index-sidebar: 60;
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-z-index-sidebar: 25;
+  }
+}
+
+/**
+ * Layouts
+ * -------------------------------------------------------------------------- */
+
+:root {
+  /* TODO: Maybe remove? */
+  --vp-layout-max-width: 1440px;
+}
+
+/**
+ * Component: Header Anchor
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-header-anchor-symbol: '#';
+}
+
+/**
+ * Component: Code
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-code-line-height: 1.7;
+  --vp-code-font-size: 0.875em;
+  --vp-code-color: var(--vp-c-brand-1);
+  --vp-code-link-color: var(--vp-c-brand-1);
+  --vp-code-link-hover-color: var(--vp-c-brand-2);
+  --vp-code-bg: var(--vp-c-default-soft);
+
+  --vp-code-block-color: var(--vp-c-text-2);
+  --vp-code-block-bg: var(--vp-c-bg-alt);
+  --vp-code-block-divider-color: var(--vp-c-gutter);
+
+  --vp-code-lang-color: var(--vp-c-text-2);
+
+  --vp-code-line-highlight-color: var(--vp-c-default-soft);
+  --vp-code-line-number-color: var(--vp-c-text-2);
+
+  --vp-code-line-diff-add-color: var(--vp-c-success-soft);
+  --vp-code-line-diff-add-symbol-color: var(--vp-c-success-1);
+
+  --vp-code-line-diff-remove-color: var(--vp-c-danger-soft);
+  --vp-code-line-diff-remove-symbol-color: var(--vp-c-danger-1);
+
+  --vp-code-line-warning-color: var(--vp-c-warning-soft);
+  --vp-code-line-error-color: var(--vp-c-danger-soft);
+
+  --vp-code-copy-code-border-color: var(--vp-c-divider);
+  --vp-code-copy-code-bg: var(--vp-c-bg-soft);
+  --vp-code-copy-code-hover-border-color: var(--vp-c-divider);
+  --vp-code-copy-code-hover-bg: var(--vp-c-bg);
+  --vp-code-copy-code-active-text: var(--vp-c-text-2);
+  --vp-code-copy-copied-text-content: 'Copied';
+
+  --vp-code-tab-divider: var(--vp-code-block-divider-color);
+  --vp-code-tab-text-color: var(--vp-c-text-2);
+  --vp-code-tab-bg: var(--vp-code-block-bg);
+  --vp-code-tab-hover-text-color: var(--vp-c-text-1);
+  --vp-code-tab-active-text-color: var(--vp-c-text-1);
+  --vp-code-tab-active-bar-color: var(--vp-c-brand-1);
+}
+
+:lang(es),
+:lang(pt) {
+  --vp-code-copy-copied-text-content: 'Copiado';
+}
+:lang(fa) {
+  --vp-code-copy-copied-text-content: 'کپی شد';
+}
+:lang(ko) {
+  --vp-code-copy-copied-text-content: '복사됨';
+}
+:lang(ru) {
+  --vp-code-copy-copied-text-content: 'Скопировано';
+}
+:lang(zh) {
+  --vp-code-copy-copied-text-content: '已复制';
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+
+  --vp-button-alt-border: transparent;
+  --vp-button-alt-text: var(--vp-c-text-1);
+  --vp-button-alt-bg: var(--vp-c-default-3);
+  --vp-button-alt-hover-border: transparent;
+  --vp-button-alt-hover-text: var(--vp-c-text-1);
+  --vp-button-alt-hover-bg: var(--vp-c-default-2);
+  --vp-button-alt-active-border: transparent;
+  --vp-button-alt-active-text: var(--vp-c-text-1);
+  --vp-button-alt-active-bg: var(--vp-c-default-1);
+
+  --vp-button-sponsor-border: var(--vp-c-text-2);
+  --vp-button-sponsor-text: var(--vp-c-text-2);
+  --vp-button-sponsor-bg: transparent;
+  --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
+  --vp-button-sponsor-hover-text: var(--vp-c-sponsor);
+  --vp-button-sponsor-hover-bg: transparent;
+  --vp-button-sponsor-active-border: var(--vp-c-sponsor);
+  --vp-button-sponsor-active-text: var(--vp-c-sponsor);
+  --vp-button-sponsor-active-bg: transparent;
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-font-size: 14px;
+  --vp-custom-block-code-font-size: 13px;
+
+  --vp-custom-block-info-border: transparent;
+  --vp-custom-block-info-text: var(--vp-c-text-1);
+  --vp-custom-block-info-bg: var(--vp-c-default-soft);
+  --vp-custom-block-info-code-bg: var(--vp-c-default-soft);
+
+  --vp-custom-block-note-border: transparent;
+  --vp-custom-block-note-text: var(--vp-c-text-1);
+  --vp-custom-block-note-bg: var(--vp-c-default-soft);
+  --vp-custom-block-note-code-bg: var(--vp-c-default-soft);
+
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-tip-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-tip-soft);
+
+  --vp-custom-block-important-border: transparent;
+  --vp-custom-block-important-text: var(--vp-c-text-1);
+  --vp-custom-block-important-bg: var(--vp-c-important-soft);
+  --vp-custom-block-important-code-bg: var(--vp-c-important-soft);
+
+  --vp-custom-block-warning-border: transparent;
+  --vp-custom-block-warning-text: var(--vp-c-text-1);
+  --vp-custom-block-warning-bg: var(--vp-c-warning-soft);
+  --vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);
+
+  --vp-custom-block-danger-border: transparent;
+  --vp-custom-block-danger-text: var(--vp-c-text-1);
+  --vp-custom-block-danger-bg: var(--vp-c-danger-soft);
+  --vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);
+
+  --vp-custom-block-caution-border: transparent;
+  --vp-custom-block-caution-text: var(--vp-c-text-1);
+  --vp-custom-block-caution-bg: var(--vp-c-caution-soft);
+  --vp-custom-block-caution-code-bg: var(--vp-c-caution-soft);
+
+  --vp-custom-block-details-border: var(--vp-custom-block-info-border);
+  --vp-custom-block-details-text: var(--vp-custom-block-info-text);
+  --vp-custom-block-details-bg: var(--vp-custom-block-info-bg);
+  --vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg);
+}
+
+/**
+ * Component: Input
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-input-border-color: var(--vp-c-border);
+  --vp-input-bg-color: var(--vp-c-bg-alt);
+
+  --vp-input-switch-bg-color: var(--vp-c-default-soft);
+}
+
+/**
+ * Component: Nav
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-nav-height: 56px;
+  --vp-nav-bg-color: var(--vp-c-bg-1);
+  --vp-nav-screen-bg-color: var(--vp-c-bg-1);
+  --vp-nav-logo-height: 24px;
+}
+
+.hide-nav {
+  --vp-nav-height: 0px;
+}
+
+.hide-nav .VPSidebar {
+  --vp-nav-height: 22px;
+}
+
+/**
+ * Component: Local Nav
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-local-nav-bg-color: var(--vp-c-bg);
+}
+
+/**
+ * Component: Sidebar
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-sidebar-width: 272px;
+  --vp-sidebar-bg-color: var(--vp-c-bg-alt);
+}
+
+/**
+ * Colors Backdrop
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-backdrop-bg-color: rgba(0, 0, 0, 0.6);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: var(--vp-c-brand-1);
+  --vp-home-hero-name-background: transparent;
+
+  --vp-home-hero-image-background-image: none;
+  --vp-home-hero-image-filter: none;
+}
+
+/**
+ * Component: Badge
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-badge-info-border: transparent;
+  --vp-badge-info-text: var(--vp-c-text-2);
+  --vp-badge-info-bg: var(--vp-c-default-soft);
+
+  --vp-badge-tip-border: transparent;
+  --vp-badge-tip-text: var(--vp-c-tip-1);
+  --vp-badge-tip-bg: var(--vp-c-tip-soft);
+
+  --vp-badge-warning-border: transparent;
+  --vp-badge-warning-text: var(--vp-c-warning-1);
+  --vp-badge-warning-bg: var(--vp-c-warning-soft);
+
+  --vp-badge-danger-border: transparent;
+  --vp-badge-danger-text: var(--vp-c-danger-1);
+  --vp-badge-danger-bg: var(--vp-c-danger-soft);
+}
+
+/**
+ * Component: Carbon Ads
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-carbon-ads-text-color: var(--vp-c-text-1);
+  --vp-carbon-ads-poweredby-color: var(--vp-c-text-2);
+  --vp-carbon-ads-bg-color: var(--vp-c-bg-soft);
+  --vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);
+  --vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1);
+}
+
+/**
+  * Component: Local Search
+  * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-local-search-bg: var(--vp-c-bg);
+  --vp-local-search-result-bg: var(--vp-c-bg);
+  --vp-local-search-result-border: var(--vp-c-divider);
+  --vp-local-search-result-selected-bg: var(--vp-c-bg);
+  --vp-local-search-result-selected-border: var(--vp-c-brand-1);
+  --vp-local-search-highlight-bg: var(--vp-c-brand-1);
+  --vp-local-search-highlight-text: var(--vp-c-neutral-inverse);
+}
diff --git a/src/client/theme-default-v2/support/lru.ts b/src/client/theme-default-v2/support/lru.ts
new file mode 100644
index 00000000..b6673512
--- /dev/null
+++ b/src/client/theme-default-v2/support/lru.ts
@@ -0,0 +1,37 @@
+// adapted from https://stackoverflow.com/a/46432113/11613622
+
+export class LRUCache<K, V> {
+  private max: number
+  private cache: Map<K, V>
+
+  constructor(max: number = 10) {
+    this.max = max
+    this.cache = new Map<K, V>()
+  }
+
+  get(key: K): V | undefined {
+    let item = this.cache.get(key)
+    if (item !== undefined) {
+      // refresh key
+      this.cache.delete(key)
+      this.cache.set(key, item)
+    }
+    return item
+  }
+
+  set(key: K, val: V): void {
+    // refresh key
+    if (this.cache.has(key)) this.cache.delete(key)
+    // evict oldest
+    else if (this.cache.size === this.max) this.cache.delete(this.first()!)
+    this.cache.set(key, val)
+  }
+
+  first(): K | undefined {
+    return this.cache.keys().next().value
+  }
+
+  clear(): void {
+    this.cache.clear()
+  }
+}
diff --git a/src/client/theme-default-v2/support/sidebar.ts b/src/client/theme-default-v2/support/sidebar.ts
new file mode 100644
index 00000000..13cd0aad
--- /dev/null
+++ b/src/client/theme-default-v2/support/sidebar.ts
@@ -0,0 +1,120 @@
+import type { DefaultTheme } from 'vitepress/theme'
+import { isActive } from '../../shared'
+import { ensureStartingSlash } from './utils'
+
+export interface SidebarLink {
+  text: string
+  link: string
+  docFooterText?: string
+}
+
+type SidebarItem = DefaultTheme.SidebarItem
+
+/**
+ * Get the `Sidebar` from sidebar option. This method will ensure to get correct
+ * sidebar config from `MultiSideBarConfig` with various path combinations such
+ * as matching `guide/` and `/guide/`. If no matching config was found, it will
+ * return empty array.
+ */
+export function getSidebar(
+  _sidebar: DefaultTheme.Sidebar | undefined,
+  path: string
+): SidebarItem[] {
+  if (Array.isArray(_sidebar)) return addBase(_sidebar)
+  if (_sidebar == null) return []
+
+  path = ensureStartingSlash(path)
+
+  const dir = Object.keys(_sidebar)
+    .sort((a, b) => {
+      return b.split('/').length - a.split('/').length
+    })
+    .find((dir) => {
+      // make sure the multi sidebar key starts with slash too
+      return path.startsWith(ensureStartingSlash(dir))
+    })
+
+  const sidebar = dir ? _sidebar[dir] : []
+  return Array.isArray(sidebar)
+    ? addBase(sidebar)
+    : addBase(sidebar.items, sidebar.base)
+}
+
+/**
+ * Get or generate sidebar group from the given sidebar items.
+ */
+export function getSidebarGroups(sidebar: SidebarItem[]): SidebarItem[] {
+  const groups: SidebarItem[] = []
+
+  let lastGroupIndex: number = 0
+
+  for (const index in sidebar) {
+    const item = sidebar[index]
+
+    if (item.items) {
+      lastGroupIndex = groups.push(item)
+      continue
+    }
+
+    if (!groups[lastGroupIndex]) {
+      groups.push({ items: [] })
+    }
+
+    groups[lastGroupIndex]!.items!.push(item)
+  }
+
+  return groups
+}
+
+export function getFlatSideBarLinks(sidebar: SidebarItem[]): SidebarLink[] {
+  const links: SidebarLink[] = []
+
+  function recursivelyExtractLinks(items: SidebarItem[]) {
+    for (const item of items) {
+      if (item.text && item.link) {
+        links.push({
+          text: item.text,
+          link: item.link,
+          docFooterText: item.docFooterText
+        })
+      }
+
+      if (item.items) {
+        recursivelyExtractLinks(item.items)
+      }
+    }
+  }
+
+  recursivelyExtractLinks(sidebar)
+
+  return links
+}
+
+/**
+ * Check if the given sidebar item contains any active link.
+ */
+export function hasActiveLink(
+  path: string,
+  items: SidebarItem | SidebarItem[]
+): boolean {
+  if (Array.isArray(items)) {
+    return items.some((item) => hasActiveLink(path, item))
+  }
+
+  return isActive(path, items.link)
+    ? true
+    : items.items
+      ? hasActiveLink(path, items.items)
+      : false
+}
+
+function addBase(items: SidebarItem[], _base?: string): SidebarItem[] {
+  return [...items].map((_item) => {
+    const item = { ..._item }
+    const base = item.base || _base
+    if (base && item.link)
+      item.link = base + item.link.replace(/^\//, base.endsWith('/') ? '' : '/')
+    if (item.items) item.items = addBase(item.items, base)
+    return item
+  })
+}
diff --git a/src/client/theme-default-v2/support/translation.ts b/src/client/theme-default-v2/support/translation.ts
new file mode 100644
index 00000000..12ade37b
--- /dev/null
+++ b/src/client/theme-default-v2/support/translation.ts
@@ -0,0 +1,60 @@
+import { useData } from '../composables/data'
+
+/**
+ * @param themeObject Can be an object with `translations` and `locales` properties
+ */
+export function createSearchTranslate(
+  defaultTranslations: Record<string, any>
+): (key: string) => string {
+  const { localeIndex, theme } = useData()
+
+  function translate(key: string): string {
+    const keyPath = key.split('.')
+    const themeObject = theme.value.search?.options
+
+    const isObject = themeObject && typeof themeObject === 'object'
+    const locales =
+      (isObject && themeObject.locales?.[localeIndex.value]?.translations) ||
+      null
+    const translations = (isObject && themeObject.translations) || null
+
+    let localeResult: Record<string, any> | null = locales
+    let translationResult: Record<string, any> | null = translations
+    let defaultResult: Record<string, any> | null = defaultTranslations
+
+    const lastKey = keyPath.pop()!
+    for (const k of keyPath) {
+      let fallbackResult: Record<string, any> | null = null
+      const foundInFallback: any = defaultResult?.[k]
+      if (foundInFallback) {
+        fallbackResult = defaultResult = foundInFallback
+      }
+      const foundInTranslation: any = translationResult?.[k]
+      if (foundInTranslation) {
+        fallbackResult = translationResult = foundInTranslation
+      }
+      const foundInLocale: any = localeResult?.[k]
+      if (foundInLocale) {
+        fallbackResult = localeResult = foundInLocale
+      }
+      // Put fallback into unresolved results
+      if (!foundInFallback) {
+        defaultResult = fallbackResult
+      }
+      if (!foundInTranslation) {
+        translationResult = fallbackResult
+      }
+      if (!foundInLocale) {
+        localeResult = fallbackResult
+      }
+    }
+    return (
+      localeResult?.[lastKey] ??
+      translationResult?.[lastKey] ??
+      defaultResult?.[lastKey] ??
+      ''
+    )
+  }
+
+  return translate
+}
diff --git a/src/client/theme-default-v2/support/utils.ts b/src/client/theme-default-v2/support/utils.ts
new file mode 100644
index 00000000..d615e703
--- /dev/null
+++ b/src/client/theme-default-v2/support/utils.ts
@@ -0,0 +1,48 @@
+import { withBase } from 'vitepress'
+import { isExternal, treatAsHtml } from '../../shared'
+import { useData } from '../composables/data'
+
+export function throttleAndDebounce(fn: () => void, delay: number): () => void {
+  let timeoutId: NodeJS.Timeout
+  let called = false
+
+  return () => {
+    if (timeoutId) clearTimeout(timeoutId)
+
+    if (!called) {
+      fn()
+      ;(called = true) && setTimeout(() => (called = false), delay)
+    } else timeoutId = setTimeout(fn, delay)
+  }
+}
+
+export function ensureStartingSlash(path: string): string {
+  return path.startsWith('/') ? path : `/${path}`
+}
+
+export function normalizeLink(url: string): string {
+  const { pathname, search, hash, protocol } = new URL(url, 'http://a.com')
+
+  if (
+    isExternal(url) ||
+    url.startsWith('#') ||
+    !protocol.startsWith('http') ||
+    !treatAsHtml(pathname)
+  )
+    return url
+
+  const { site } = useData()
+
+  const normalizedPath =
+    pathname.endsWith('/') || pathname.endsWith('.html')
+      ? url
+      : url.replace(
+          /(?:(^\.+)\/)?.*$/,
+          `$1${pathname.replace(
+            /(\.md)?$/,
+            site.value.cleanUrls ? '' : '.html'
+          )}${search}${hash}`
+        )
+
+  return withBase(normalizedPath)
+}
diff --git a/src/client/theme-default-v2/without-fonts.ts b/src/client/theme-default-v2/without-fonts.ts
new file mode 100644
index 00000000..c32fb364
--- /dev/null
+++ b/src/client/theme-default-v2/without-fonts.ts
@@ -0,0 +1,43 @@
+import './styles/vars.css'
+import './styles/base.css'
+import './styles/icons.css'
+import './styles/utils.css'
+import './styles/components/custom-block.css'
+import './styles/components/vp-code.css'
+import './styles/components/vp-code-group.css'
+import './styles/components/vp-doc.css'
+import './styles/components/vp-sponsor.css'
+
+import type { Theme } from 'vitepress'
+import VPBadge from './components/VPBadge.vue'
+import Layout from './Layout.vue'
+
+export { default as VPBadge } from './components/VPBadge.vue'
+export { default as VPButton } from './components/VPButton.vue'
+export { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue'
+export { default as VPFeatures } from './components/VPFeatures.vue'
+export { default as VPHomeContent } from './components/VPHomeContent.vue'
+export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue'
+export { default as VPHomeHero } from './components/VPHomeHero.vue'
+export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue'
+export { default as VPImage } from './components/VPImage.vue'
+export { default as VPLink } from './components/VPLink.vue'
+export { default as VPNavBarSearch } from './components/VPNavBarSearch.vue'
+export { default as VPSocialLink } from './components/VPSocialLink.vue'
+export { default as VPSocialLinks } from './components/VPSocialLinks.vue'
+export { default as VPSponsors } from './components/VPSponsors.vue'
+export { default as VPTeamMembers } from './components/VPTeamMembers.vue'
+export { default as VPTeamPage } from './components/VPTeamPage.vue'
+export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue'
+export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue'
+
+export { useLayout } from './composables/layout'
+
+const theme: Theme = {
+  Layout,
+  enhanceApp: ({ app }) => {
+    app.component('Badge', VPBadge)
+  }
+}
+
+export default theme
diff --git a/src/node/alias.ts b/src/node/alias.ts
index ad9eae4b..5008100a 100644
--- a/src/node/alias.ts
+++ b/src/node/alias.ts
@@ -41,6 +41,10 @@ export function resolveAliases(
     {
       find: /^vitepress\/theme$/,
       replacement: join(DIST_CLIENT_PATH, '/theme-default/index.js')
+    },
+    {
+      find: /^vitepress\/theme\/v2$/,
+      replacement: join(DIST_CLIENT_PATH, '/theme-default-v2/index.js')
     }
   ]