diff --git a/packages/docs/auto-imports.d.ts b/packages/docs/auto-imports.d.ts
index 8a1a9b1878b..c996198571d 100644
--- a/packages/docs/auto-imports.d.ts
+++ b/packages/docs/auto-imports.d.ts
@@ -172,6 +172,9 @@ declare global {
   export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
   // @ts-ignore
+  export type { CodeSection } from './src/composables/playground'
+  import('./src/composables/playground')
+  // @ts-ignore
   export type { Category } from './src/stores/app'
   import('./src/stores/app')
   // @ts-ignore
diff --git a/packages/docs/components.d.ts b/packages/docs/components.d.ts
index 572f87f0385..9db87a6fa0b 100644
--- a/packages/docs/components.d.ts
+++ b/packages/docs/components.d.ts
@@ -99,7 +99,6 @@ declare module 'vue' {
     DocMadeWithVueAttribution: typeof import('./src/components/doc/MadeWithVueAttribution.vue')['default']
     DocMadeWithVuetifyGallery: typeof import('./src/components/doc/MadeWithVuetifyGallery.vue')['default']
     DocMadeWithVuetifyLink: typeof import('./src/components/doc/MadeWithVuetifyLink.vue')['default']
-    DocPremiumThemesGallery: typeof import('./src/components/doc/PremiumThemesGallery.vue')['default']
     DocReadyForMore: typeof import('./src/components/doc/ReadyForMore.vue')['default']
     DocRelatedPage: typeof import('./src/components/doc/RelatedPage.vue')['default']
     DocRelatedPages: typeof import('./src/components/doc/RelatedPages.vue')['default']
@@ -119,13 +118,35 @@ declare module 'vue' {
     FeaturesSassApi: typeof import('./src/components/features/SassApi.vue')['default']
     GettingStartedWireframeExamples: typeof import('./src/components/getting-started/WireframeExamples.vue')['default']
     HomeActionBtns: typeof import('./src/components/home/ActionBtns.vue')['default']
+    HomeBlogs: typeof import('./src/components/home/Blogs.vue')['default']
+    HomeCommonCard: typeof import('./src/components/home/Common/Card.vue')['default']
+    HomeCommonGradient: typeof import('./src/components/home/Common/Gradient.vue')['default']
+    HomeCommonMarquee: typeof import('./src/components/home/Common/Marquee.vue')['default']
+    HomeCommonTitle: typeof import('./src/components/home/Common/Title.vue')['default']
+    HomeComponentGallery: typeof import('./src/components/home/ComponentGallery.vue')['default']
+    HomeDiscord: typeof import('./src/components/home/Discord.vue')['default']
+    HomeEcosystem: typeof import('./src/components/home/Ecosystem.vue')['default']
     HomeEntry: typeof import('./src/components/home/Entry.vue')['default']
     HomeEpicmaxSupport: typeof import('./src/components/home/EpicmaxSupport.vue')['default']
-    HomeFeatures: typeof import('./src/components/home/Features.vue')['default']
     HomeFooter: typeof import('./src/components/home/Footer.vue')['default']
+    HomeGalleryChatChat: typeof import('./src/components/home/Gallery/Chat/Chat.vue')['default']
+    HomeGalleryChatDetail: typeof import('./src/components/home/Gallery/Chat/Detail.vue')['default']
+    HomeGalleryChatInbox: typeof import('./src/components/home/Gallery/Chat/Inbox.vue')['default']
+    HomeGalleryChatList: typeof import('./src/components/home/Gallery/Chat/List.vue')['default']
+    HomeGalleryComponentGallery: typeof import('./src/components/home/Gallery/ComponentGallery.vue')['default']
+    HomeGalleryComponents: typeof import('./src/components/home/Gallery/Components.vue')['default']
+    HomeGalleryData: typeof import('./src/components/home/Gallery/Data.vue')['default']
+    HomeGalleryForm: typeof import('./src/components/home/Gallery/Form.vue')['default']
+    HomeGalleryLogin: typeof import('./src/components/home/Gallery/Login.vue')['default']
+    HomeGallerySelection: typeof import('./src/components/home/Gallery/Selection.vue')['default']
     HomeLogo: typeof import('./src/components/home/Logo.vue')['default']
+    HomeSnips: typeof import('./src/components/home/Snips.vue')['default']
     HomeSpecialSponsor: typeof import('./src/components/home/SpecialSponsor.vue')['default']
     HomeSponsors: typeof import('./src/components/home/Sponsors.vue')['default']
+    HomeStore: typeof import('./src/components/home/Store.vue')['default']
+    HomeSupport: typeof import('./src/components/home/Support.vue')['default']
+    HomeTooling: typeof import('./src/components/home/Tooling.vue')['default']
+    HomeVuetifyOne: typeof import('./src/components/home/VuetifyOne.vue')['default']
     IconsChevronDown: typeof import('./src/components/icons/ChevronDown.vue')['default']
     IntroductionComparison: typeof import('./src/components/introduction/Comparison.vue')['default']
     IntroductionConsultingServices: typeof import('./src/components/introduction/ConsultingServices.vue')['default']
diff --git a/packages/docs/src/components/app/Markup.vue b/packages/docs/src/components/app/Markup.vue
index 5e3c3c3be01..3760cba4272 100644
--- a/packages/docs/src/components/app/Markup.vue
+++ b/packages/docs/src/components/app/Markup.vue
@@ -53,18 +53,18 @@
             <v-btn
               v-if="isHovering"
               :key="icon"
+              :icon="needsPlaygroundLink ? '$vuetify-play' : '$vuetify-bin'"
               class="text-disabled me-12 mt-2 app-markup-btn position-absolute right-0 top-0"
               density="comfortable"
-              icon="$vuetify-bin"
               size="small"
               v-bind="activatorProps"
               variant="text"
-              @click="bin"
+              @click="openCode"
             />
           </v-fade-transition>
         </template>
 
-        <span>{{ t('open-in-vuetify-bin') }}</span>
+        <span>{{ t(needsPlaygroundLink ? 'open-in-playground' : 'open-in-vuetify-bin') }}</span>
       </v-tooltip>
 
       <div class="pa-4 pe-12">
@@ -97,7 +97,10 @@
 
   const props = defineProps({
     resource: String,
-    code: null,
+    code: {
+      type: [String, Array] as PropType<string | CodeSection[]>,
+      default: '',
+    },
     inline: Boolean,
     language: {
       type: String,
@@ -130,16 +133,35 @@
   const root = ref<ComponentPublicInstance>()
 
   const highlighted = shallowRef('')
-  watchEffect(async () => {
-    highlighted.value = props.code && props.language && Prism.highlight(await props.code, Prism.languages[props.language], props.language)
-  })
 
   const className = computed(() => `language-${props.language}`)
   const icon = computed(() => clicked.value ? 'mdi-check' : 'mdi-clipboard-text-outline')
 
-  async function bin () {
+  const needsPlaygroundLink = computed(() => Array.isArray(props.code))
+
+  const displayedCode = computed(() => {
+    if (typeof props.code === 'string') {
+      return props.code
+    }
+
+    return props.code.map((section: CodeSection) => section.content).join('\n\n')
+  })
+
+  watchEffect(async () => {
+    highlighted.value = displayedCode.value && props.language && Prism.highlight(await displayedCode.value, Prism.languages[props.language], props.language)
+  })
+
+  function openCode () {
+    if (needsPlaygroundLink.value) {
+      openPlayground()
+    } else {
+      openBin()
+    }
+  }
+
+  async function openBin () {
     const el = root.value?.$el.querySelector('code')
-    const code = props.code || el?.innerText || ''
+    const code = displayedCode.value || el?.innerText || ''
     const language = props.language || 'markdown'
     const title = props.resource
 
@@ -148,10 +170,18 @@
     window.open(compressed, '_blank')
   }
 
+  async function openPlayground () {
+    if (typeof props.code === 'string') return
+
+    const url = usePlayground(props.code)
+
+    window.open(url, '_blank')
+  }
+
   async function copy () {
     const el = root.value?.$el.querySelector('code')
 
-    navigator.clipboard.writeText(props.code || el?.innerText || '')
+    navigator.clipboard.writeText(displayedCode.value || el?.innerText || '')
 
     clicked.value = true
 
diff --git a/packages/docs/src/components/doc/PremiumThemesGallery.vue b/packages/docs/src/components/doc/PremiumThemesGallery.vue
deleted file mode 100644
index e987f82af57..00000000000
--- a/packages/docs/src/components/doc/PremiumThemesGallery.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <v-sheet
-    class="mx-auto text-center pa-3 mb-4"
-    color="transparent"
-    max-width="900"
-  >
-    <v-row v-if="!items.length">
-      <v-col
-        v-for="n in 9"
-        :key="n"
-        cols="12"
-        md="4"
-      >
-        <v-skeleton-loader class="rounded-b-0" height="180" />
-
-        <v-skeleton-loader class="rounded-t-0" type="text" />
-      </v-col>
-    </v-row>
-
-    <v-data-iterator
-      v-else
-      :items="items"
-      :items-per-page="itemsPerPage"
-      :page="page"
-    >
-      <template #default="{ items: _items }">
-        <v-row style="min-height: 750px;">
-          <v-col
-            v-for="product in _items"
-            :key="product.raw.id"
-            cols="12"
-            sm="4"
-          >
-            <a
-              :href="`https://store.vuetifyjs.com/products/${product.raw.handle}`"
-              class="d-block text-decoration-none"
-              rel="noopener noreferrer"
-              style="min-height: 205px;"
-              target="_blank"
-            >
-              <DocThemeCard
-                :product="{
-                  title: product.raw.title,
-                  src: product.raw.image,
-                }"
-                class="text-center"
-              />
-            </a>
-          </v-col>
-        </v-row>
-      </template>
-    </v-data-iterator>
-  </v-sheet>
-
-  <v-btn
-    append-icon="mdi-open-in-new"
-    aria-label="See More Templates"
-    color="primary"
-    href="https://store.vuetifyjs.com"
-    rel="noopener noreferrer"
-    size="large"
-    target="_blank"
-    variant="outlined"
-  >
-    <span class="text-capitalize font-weight-regular">
-      See More Templates
-    </span>
-  </v-btn>
-</template>
-
-<script setup>
-  defineProps({
-    itemsPerPage: {
-      type: [Number, String],
-      default: 9,
-    },
-  })
-
-  const page = shallowRef(1)
-
-  const products = useProductsStore()
-
-  const items = shallowRef([])
-
-  onMounted(async () => {
-    await products.index()
-
-    items.value = products.randomize(products.themes)
-  })
-</script>
diff --git a/packages/docs/src/components/home/ActionBtns.vue b/packages/docs/src/components/home/ActionBtns.vue
deleted file mode 100644
index e379c7ccdcb..00000000000
--- a/packages/docs/src/components/home/ActionBtns.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <v-row :justify="mdAndDown ? 'center' : undefined">
-    <v-col
-      v-for="({ icon, text, ...attrs }, i) in buttons"
-      :key="`home-btn-${i}`"
-      cols="auto"
-    >
-      <v-btn
-        :min-width="btnWidth"
-        v-bind="attrs"
-        class="text-none"
-        size="x-large"
-      >
-        <v-icon :icon="icon" start />
-        {{ t(text) }}
-      </v-btn>
-    </v-col>
-  </v-row>
-</template>
-
-<script setup>
-  const { mdAndDown } = useDisplay()
-
-  const { t } = useI18n()
-
-  const buttons = [
-    {
-      color: 'primary',
-      flat: true,
-      icon: 'mdi-speedometer',
-      text: 'home.get-started',
-      to: rpath('/getting-started/installation/'),
-    },
-    {
-      color: 'primary',
-      icon: '$vuetify',
-      variant: 'outlined',
-      text: 'home.why-vuetify',
-      to: rpath('/introduction/why-vuetify/'),
-    },
-    {
-      color: '#212121',
-      theme: 'dark',
-      flat: true,
-      href: 'https://github.com/vuetifyjs/vuetify',
-      icon: 'mdi-github',
-      rel: 'noopener',
-      target: '_blank',
-      text: 'github',
-    },
-  ]
-  const btnWidth = 215
-</script>
diff --git a/packages/docs/src/components/home/Blogs.vue b/packages/docs/src/components/home/Blogs.vue
new file mode 100644
index 00000000000..6d41e0295b7
--- /dev/null
+++ b/packages/docs/src/components/home/Blogs.vue
@@ -0,0 +1,137 @@
+<template>
+  <v-responsive class="py-16">
+    <HomeCommonGradient opacity-class="opacity-10" />
+
+    <v-container class="pt-0">
+      <HomeCommonTitle
+        class="mb-16"
+        description="Stay up to date with the latest news and updates from the Vuetify team."
+        subtitle="Latest news and updates"
+        title="Vuetify Blog"
+      />
+
+      <v-row align="center" class="text-left" justify="space-between">
+        <v-col v-if="latestBlog" cols="12" md="7">
+          <v-card
+            class="pr-10 overflow-hidden"
+            color="transparent"
+            flat
+          >
+            <v-img
+              v-if="latestBlog.image"
+              :src="latestBlog.image"
+              gradient="to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)"
+              max-height="150"
+              rounded="lg"
+              width="100%"
+              cover
+            />
+
+            <v-card-subtitle class="pt-3 pb-1 text-subtitle-2 pl-0">
+              {{ latestBlog.date }}
+            </v-card-subtitle>
+
+            <v-card-title class="text-pre-wrap pl-0 pt-0">
+              {{ latestBlog.title }}
+            </v-card-title>
+
+            <div class="text-medium-emphasis text-subtitle-1 pl-0">
+              {{ latestBlog.shortDescription }}
+            </div>
+
+            <v-card-text class="pl-0 pt-2">
+              <div class="d-flex align-center ga-2 text-subtitle-2 text-medium-emphasis">
+                <v-icon size="small">mdi-circle-edit-outline</v-icon>
+                {{ latestBlog.personName }}
+
+                <v-btn
+                  class="text-none px-0 ml-5"
+                  color="primary"
+                  text="Read more"
+                  variant="text"
+                />
+              </div>
+            </v-card-text>
+          </v-card>
+        </v-col>
+
+        <v-col cols="12" md="5">
+          <v-card
+            v-for="(item , index) in remainingBlogs"
+            :key="index"
+            class="d-flex flex-column"
+            color="transparent"
+            rounded="lg"
+            flat
+          >
+            <v-card-subtitle class="pt-5 text-body-2">
+              {{ item.date }}
+            </v-card-subtitle>
+
+            <v-card-title class="text-subtitle-1 pt-1">
+              {{ item.title }}
+            </v-card-title>
+
+            <v-card-text :class="{ 'text-truncate': smAndDown}" class="text-medium-emphasis text-subtitle-1 py-0">
+              {{ item.shortDescription }}
+            </v-card-text>
+
+            <v-card-text class="text-body-2 text-medium-emphasis pt-2">
+              <div class="d-flex align-center ga-2 text-body-2 text-medium-emphasis">
+                <v-icon size="small">mdi-circle-edit-outline</v-icon>
+                {{ item.personName }}
+              </div>
+            </v-card-text>
+
+            <v-divider v-if="index !== remainingBlogs.length - 1" />
+          </v-card>
+        </v-col>
+      </v-row>
+
+      <v-btn
+        :to="rpath('/blog/')"
+        append-icon="mdi-open-in-new"
+        aria-label="See More Templates"
+        class="text-none mt-10"
+        color="primary"
+        rel="noopener noreferrer"
+        rounded="lg"
+        size="large"
+        target="_blank"
+        variant="flat"
+      >
+        All Blogs
+      </v-btn>
+
+    </v-container>
+  </v-responsive>
+</template>
+
+<script setup lang="ts">
+  const { smAndDown } = useDisplay()
+
+  const items = [
+    {
+      image: 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      title: 'August 2025 Update',
+      shortDescription: 'August marks a pivotal moment in Vuetify’s evolution as we prepare to release the pre-alpha of Vuetify0 (v0), launch our redesigned issues page, and continue delivering powerful components and improvements. This month brings exciting developments including the “Mastering Vuetify Theming',
+      date: 'Apr 5, 2023',
+      personName: 'John Leider',
+    },
+    {
+      title: 'July 2025 Update',
+      shortDescription: 'Earum molestias dolores autem quam natus. Aut velit fugiat excepturi minus voluptatem rerum voluptas. Ea rerum nemo quaerat...',
+      date: 'Sep 15, 2023',
+      personName: 'John Leider',
+    },
+    {
+      title: 'State of the Union 2024 - Post Mortem',
+      shortDescription: 'Qui voluptatum molestiae sint et atque facere. Distinctio ipsum voluptatum asperiores fuga consequatur aliquam.',
+      date: 'Feb 20, 2022',
+      personName: 'John Leider',
+    },
+  ]
+
+  const latestBlog = computed(() => smAndDown.value ? null : items[0])
+  const remainingBlogs = computed(() => smAndDown.value ? items : items.slice(1))
+</script>
diff --git a/packages/docs/src/components/home/Common/Card.vue b/packages/docs/src/components/home/Common/Card.vue
new file mode 100644
index 00000000000..ab0c1198656
--- /dev/null
+++ b/packages/docs/src/components/home/Common/Card.vue
@@ -0,0 +1,50 @@
+<template>
+  <v-card
+    border="primary md"
+    class="pa-6 d-md-flex justify-space-between align-center h-100"
+    elevation="0"
+    rounded="xl"
+    link
+  >
+    <HomeCommonGradient color="primary" opacity-class="opacity-30" />
+
+    <v-img
+      v-if="props.image"
+      :src="props.image"
+      class="mr-4 my-2"
+      max-height="80"
+      width="120"
+    />
+
+    <div>
+      <h6 v-if="props.title" class="text-subtitle-1 font-weight-bold mb-2">
+        {{ props.title }}
+      </h6>
+
+      <p
+        v-if="props.description"
+        class="text-medium-emphasis text-body-2 text-left mb-0 mt-3 my-md-0"
+        style="line-height: 1.6;"
+      >
+        {{ props.description }}
+      </p>
+    </div>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    image: {
+      type: String,
+      default: undefined,
+    },
+    description: {
+      type: String,
+      default: undefined,
+    },
+    title: {
+      type: String,
+      default: undefined,
+    },
+  })
+</script>
diff --git a/packages/docs/src/components/home/Common/Gradient.vue b/packages/docs/src/components/home/Common/Gradient.vue
new file mode 100644
index 00000000000..f4eab2768b3
--- /dev/null
+++ b/packages/docs/src/components/home/Common/Gradient.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="v-bg position-absolute top-0 right-0 left-0 bottom-0">
+    <div
+      :class="{
+        [`bg-${props.color || defaultColor}`]: true,
+        [props.opacityClass]: true,
+      }"
+      aria-hidden="true"
+      class="overflow-hidden w-100 h-100"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  const theme = useTheme()
+
+  const props = defineProps({
+    color: {
+      type: String,
+    },
+    opacityClass: {
+      type: String,
+      default: 'opacity-20',
+    },
+  })
+
+  const defaultColor = computed(() => {
+    return theme.current.value.dark ? 'grey-darken-3' : 'blue-grey-lighten-3'
+  })
+</script>
+
+<style scoped>
+  .v-bg {
+    filter: blur(100px);
+    pointer-events: none;
+  }
+
+  .v-bg > div {
+    background: rgb(var(--v-theme-primary));
+    z-index: -10;
+    clip-path: polygon(
+      0% 0%,
+      100% 0%,
+      100% 40%,
+      0% 40%
+    )
+  }
+</style>
diff --git a/packages/docs/src/components/home/Common/Marquee.vue b/packages/docs/src/components/home/Common/Marquee.vue
new file mode 100644
index 00000000000..44e1c499fca
--- /dev/null
+++ b/packages/docs/src/components/home/Common/Marquee.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="marquee">
+    <div class="marquee-content">
+      <div
+        v-for="(item, index) in props.items"
+        :key="index"
+        class="marquee-item"
+      >
+        <slot :item="item" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    items: {
+      type: Array as PropType<any[]>,
+      required: true,
+    },
+  })
+</script>
+
+<style scoped>
+.marquee {
+  overflow: hidden;
+  white-space: nowrap;
+  position: relative;
+  width: 100%;
+}
+
+.marquee::before,
+.marquee::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 60px;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.marquee::before {
+  left: 0;
+  background: linear-gradient(to right, rgb(var(--v-theme-background)), transparent);
+}
+
+.marquee::after {
+  right: 0;
+  background: linear-gradient(to left, rgb(var(--v-theme-background)), transparent);
+}
+
+.marquee-content {
+  display: inline-flex;
+  align-items: center;
+  animation: scroll 30s linear infinite;
+  gap: 2rem;
+}
+
+.marquee-item {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateX(-50%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+</style>
diff --git a/packages/docs/src/components/home/Common/Title.vue b/packages/docs/src/components/home/Common/Title.vue
new file mode 100644
index 00000000000..c4c9869c71c
--- /dev/null
+++ b/packages/docs/src/components/home/Common/Title.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <slot name="subtitle">
+      <p v-if="props.subtitle" class="text-primary font-weight-bold mb-3">
+        {{ props.subtitle }}
+      </p>
+    </slot>
+
+    <h4 class="text-h4 font-weight-bold mb-5">
+      {{ props.title }}
+    </h4>
+
+    <v-responsive class="mx-auto" max-width="700">
+      <h6 class="text-h6 font-weight-regular text-medium-emphasis">
+        {{ props.description }}
+      </h6>
+    </v-responsive>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    title: {
+      type: String,
+      required: true,
+    },
+    subtitle: {
+      type: String,
+      default: undefined,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+  })
+</script>
diff --git a/packages/docs/src/components/home/Discord.vue b/packages/docs/src/components/home/Discord.vue
new file mode 100644
index 00000000000..a3bc11312a0
--- /dev/null
+++ b/packages/docs/src/components/home/Discord.vue
@@ -0,0 +1,37 @@
+<template>
+  <v-responsive :class="theme.current.value.dark ? 'bg-surface' : 'bg-primary'">
+    <v-container class="pa-6 text-left">
+      <v-row justify="center">
+        <v-col
+          class="pa-6 pa-md-12 text-center"
+          cols="12"
+        >
+          <v-icon class="mb-5" size="60">
+            mdi-discord
+          </v-icon>
+
+          <h4 class="text-h4 font-weight-bold mb-5">
+            Join our community of 40k+ developers
+          </h4>
+
+          <p class="text-h6 font-weight-regular mb-6 w-100 w-md-50 mx-auto">
+            Join us to get help with your Vuetify projects, share your work, and connect with other developers on Discord.
+          </p>
+
+          <v-btn
+            append-icon="mdi-open-in-new"
+            class="mr-4 text-none"
+            rounded="lg"
+            size="large"
+            text="Join Discord"
+            variant="outlined"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-responsive>
+</template>
+
+<script setup lang="ts">
+  const theme = useTheme()
+</script>
diff --git a/packages/docs/src/components/home/Ecosystem.vue b/packages/docs/src/components/home/Ecosystem.vue
new file mode 100644
index 00000000000..293cdc82f66
--- /dev/null
+++ b/packages/docs/src/components/home/Ecosystem.vue
@@ -0,0 +1,70 @@
+<template>
+  <v-responsive class="py-15">
+    <v-container>
+      <HomeCommonGradient opacity-class="opacity-10" />
+
+      <HomeCommonTitle
+        class="mb-10"
+        description="Vuetify is a complete Vue ecosystem that provides you with all of the tools necessary to create beautiful content rich web applications."
+        subtitle="A complete Vue ecosystem"
+        title="More than just Components"
+      />
+
+      <HomeCommonMarquee :items="features" class="my-5">
+        <template #default="{ item }">
+          <v-img
+            :src="item.image"
+            class="px-6"
+            width="200"
+          />
+        </template>
+      </HomeCommonMarquee>
+    </v-container>
+  </v-responsive>
+</template>
+
+<script setup lang="ts">
+  const theme = useTheme()
+  const features = computed(() => [
+    {
+      description: 'Vuetify MCP is a tool for managing your Vuetify projects. You can manage your projects and see the status of the project.',
+      image: `https://cdn.vuetifyjs.com/docs/images/logos/vone-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
+    },
+    {
+      description: 'Vuetify MCP is a tool for managing your Vuetify projects. You can manage your projects and see the status of the project.',
+      image: `https://cdn.vuetifyjs.com/docs/images/logos/v0-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
+    },
+    {
+      image: `https://cdn.vuetifyjs.com/docs/images/one/logos/vplay-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
+      description: 'You can use Vuetify Playground to experiment with Vuetify components and see how they work.',
+    },
+    {
+      description: 'Bin is a tool for sharing code snippets. You can save your snippets with a unique URL.',
+      image: `https://cdn.vuetifyjs.com/docs/images/one/logos/vbin-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
+    },
+    {
+      description: 'Vuetify Link can be used to shorten long URLs. You can save them for later use.',
+      image: `https://cdn.vuetifyjs.com/docs/images/one/logos/vlink-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
+    },
+    {
+      description: 'Vuetify Studio is a tool for creating Vuetify components. You can create your own components and share them with others.',
+      image: `https://cdn.vuetifyjs.com/docs/images/one/logos/vstudio-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
+    },
+    {
+      description: 'Vuetify Issues is a tool for reporting issues with Vuetify. You can report issues and see the status of the issue.',
+      image: `https://cdn.vuetifyjs.com/docs/images/one/logos/vissues-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
+    },
+    {
+      description: 'Vuetify MCP is a tool for managing your Vuetify projects. You can manage your projects and see the status of the project.',
+      image: `https://cdn.vuetifyjs.com/docs/images/logos/vmcp-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
+    },
+    {
+      description: 'Vuetify MCP is a tool for managing your Vuetify projects. You can manage your projects and see the status of the project.',
+      image: `https://cdn.vuetifyjs.com/docs/images/logos/vsnips-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
+    },
+    {
+      description: 'Vuetify MCP is a tool for managing your Vuetify projects. You can manage your projects and see the status of the project.',
+      image: `https://cdn.vuetifyjs.com/docs/images/logos/vloader-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
+    },
+  ])
+</script>
diff --git a/packages/docs/src/components/home/Entry.vue b/packages/docs/src/components/home/Entry.vue
index 97baed3e2c5..891336d2422 100644
--- a/packages/docs/src/components/home/Entry.vue
+++ b/packages/docs/src/components/home/Entry.vue
@@ -1,112 +1,172 @@
 <template>
-  <v-container class="pt-12">
-    <v-row
-      align="center"
-      justify="center"
-    >
-      <v-col cols="auto">
-        <HomeLogo size="300" />
-      </v-col>
-
-      <v-col class="text-center text-lg-start" cols="auto">
-        <h1 class="text-h2 font-weight-medium mb-3 ms-n1">
-          Vue Component Framework
-        </h1>
-
-        <p class="mb-10 mx-auto ms-lg-0" style="max-width: 568px;">
-          Vuetify is a no design skills required Open Source UI Library with beautifully handcrafted Vue Components.
-        </p>
-
-        <HomeActionBtns />
-
-        <br>
-
-        <v-row :justify="mdAndDown ? 'center' : undefined">
-          <v-col cols="auto">
+  <v-responsive class="pb-5">
+    <v-container class="text-left position-relative">
+      <v-row
+        align="center"
+        class="py-16"
+        justify="center"
+      >
+        <v-col cols="12" md="6">
+          <v-chip color="primary">
+            #1 Vue UI Library
+          </v-chip>
+
+          <h1 class="text-h3 text-md-h2 font-weight-bold my-5">
+            A complete <br class="d-none d-md-block"> <span class="text-primary">design system</span> that works.
+          </h1>
+
+          <h2 class="text-h6 font-weight-regular text-medium-emphasis my-5">
+            Built by the Vue Community, Backed by Sponsors.
+          </h2>
+
+          <div class="d-flex flex-wrap ga-4 justify-start my-5">
+            <v-btn
+              :to="rpath('/getting-started/installation/')"
+              class="text-none"
+              color="primary"
+              rounded="lg"
+              size="large"
+              text="Get started"
+              flat
+            />
+
+            <v-btn
+              append-icon="mdi-chevron-right"
+              class="text-none"
+              color="primary"
+              rounded="lg"
+              size="large"
+              text="Explore Ecosystem"
+              variant="tonal"
+              flat
+            />
+          </div>
+
+          <div class="d-flex flex-wrap ga-4 align-center">
             <v-hover v-slot="{ isHovering, props }">
               <v-sheet
                 class="px-2 py-2 d-inline-flex align-center text-mono text-body-2 text-no-wrap"
                 color="surface"
-                width="215"
                 border
                 rounded
                 v-bind="props"
               >
-                <v-icon
-                  class="me-1"
-                  color="medium-emphasis"
-                  icon="mdi-chevron-right"
-                  size="16"
-                />
 
-                {{ randomPackage }} create
+                <v-menu offset="4">
+                  <template #activator="{ props: iconProps }">
+                    <v-icon-btn
+                      v-bind="iconProps"
+                      class="mr-2"
+                      color="primary"
+                      cursor="pointer"
+                      height="20"
+                      icon="mdi-chevron-down"
+                      icon-size="16"
+                      rounded="lg"
+                      variant="text"
+                      width="20"
+                    />
+                  </template>
+
+                  <v-list density="compact" rounded="lg">
+                    <v-list-item
+                      v-for="manager in packageManagers"
+                      :key="manager"
+                      :value="manager"
+                      @click="selectedPackageManager = manager"
+                    >
+                      <v-list-item-title>
+                        {{ manager }}
+                      </v-list-item-title>
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
+
+                {{ commands[selectedPackageManager] }}
 
                 <span class="text-primary font-weight-medium ms-2">
                   vuetify
                 </span>
 
                 <v-icon
+                  :color="isCopying ? 'success' : 'medium-emphasis'"
                   :icon="isCopying ? 'mdi-check' : 'mdi-clipboard-text-outline'"
                   :style="{
                     opacity: isHovering || isCopying ? 1 : 0,
                   }"
                   class="ms-auto"
-                  color="medium-emphasis"
                   size="17"
                   @click="copy"
                 />
               </v-sheet>
             </v-hover>
-          </v-col>
-
-          <v-col cols="auto">
-            <v-sheet
-              class="pa-1 ps-3 d-inline-flex align-center justify-space-between text-caption"
-              color="surface"
-              width="215"
-              border
-              rounded
-            >
-              <span class="me-2">Latest Commit:</span>
-
-              <AppCommitBtn />
-            </v-sheet>
-          </v-col>
 
-          <v-col cols="auto">
             <v-sheet
-              class="pa-1 ps-3 d-inline-flex align-center justify-space-between text-caption"
+              class="pa-1 ps-3 d-inline-flex align-center justify-space-between"
               color="surface"
-              width="215"
               border
               rounded
             >
-              <span class="me-2">Latest Release:</span>
+              <span class="text-body-2 me-2">Latest</span>
 
               <AppVersionBtn />
             </v-sheet>
-          </v-col>
-        </v-row>
-      </v-col>
-
-      <v-col cols="12">
-        <VoPromotionsCardHighlight class="mb-n8" max-width="1096" slug="vuetify-snips" />
-      </v-col>
-    </v-row>
-  </v-container>
+          </div>
+
+        </v-col>
+
+        <v-col class="d-md-block d-none" cols="12" md="6">
+          <v-sheet class="rounded-lg bg-surface elevation-10">
+            <AppMarkup
+              :code="code"
+              class="bg-black rounded-lg pa-5"
+              open-in-playground
+            />
+          </v-sheet>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <HomeCommonGradient color="primary" />
+  </v-responsive>
 </template>
 
-<script setup>
-  const isCopying = shallowRef(false)
+<script setup lang="ts">
+  const codeContent = `<template>
+  <v-app>
+    <v-container>
+      <v-btn color="primary">
+        Hello Vuetify!
+      </v-btn>
+    </v-container>
+  </v-app>
+</template>`
+
+  const code = [
+    {
+      name: 'template',
+      content: codeContent,
+      language: 'html',
+    },
+  ]
+
+  const packageManagers = ['npm', 'pnpm', 'yarn', 'bun']
+  const randomPackageManager = packageManagers[Math.floor(Math.random() * packageManagers.length)]
+
+  const commands: Record<string, string> = {
+    pnpm: 'pnpm create',
+    yarn: 'yarn create',
+    npm: 'npm create',
+    bun: 'bun create',
+  }
 
-  const { mdAndDown } = useDisplay()
-  const packages = ['pnpm', 'yarn', 'npm', 'bun']
-  const randomPackage = packages[Math.floor(Math.random() * packages.length)]
+  const isCopying = shallowRef(false)
+  const selectedPackageManager = shallowRef(randomPackageManager)
 
   function copy () {
     isCopying.value = true
 
-    navigator.clipboard.writeText(`${randomPackage} create vuetify`)
+    navigator.clipboard.writeText(`${commands[selectedPackageManager.value]} vuetify`)
 
     setTimeout(() => {
       isCopying.value = false
@@ -114,7 +174,8 @@
   }
 </script>
 
-<style lang="sass" scoped>
-  :deep(.v-card-item)
-    max-width: 100%
+<style scoped>
+  .code-shadow {
+    box-shadow: 10px 10px 100px -5px #00000044;
+  }
 </style>
diff --git a/packages/docs/src/components/home/Features.vue b/packages/docs/src/components/home/Features.vue
deleted file mode 100644
index 94aedf45db4..00000000000
--- a/packages/docs/src/components/home/Features.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <v-responsive class="text-center">
-    <v-container>
-      <v-row justify="center">
-        <v-col
-          v-for="(feature, i) in features"
-          :key="i"
-          class="d-flex flex-shrink-1"
-          cols="auto"
-        >
-          <v-card
-            :href="feature.href"
-            :rel="feature.href && 'noopener noreferrer'"
-            :target="feature.href && '_blank'"
-            :to="feature.to"
-            class="text-center mx-auto"
-            max-width="350"
-            border
-            flat
-          >
-            <v-img
-              :alt="feature.title"
-              :aspect-ratio="2.6"
-              :src="feature.src"
-              width="100%"
-              cover
-            />
-            <v-card-text>
-              <h3
-                class="text-subheading-1 font-weight-bold mb-2"
-                v-text="feature.title"
-              />
-              <p
-                class="mb-2"
-                v-text="feature.text"
-              />
-            </v-card-text>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-responsive>
-</template>
-
-<script setup>
-  const features = [
-    {
-      text: 'When you run into a roadblock, you need assistance right away. Vuetify offers support in our massive community on Discord.',
-      title: 'Vibrant Community',
-      src: 'https://cdn.vuetifyjs.com/docs/images/featured/feature-1.png',
-      href: 'https://community.vuetifyjs.com',
-    },
-    {
-      text: 'Be prepared for an armada of specialized components at your disposal. With over 80 in total, there is a solution to any situation.',
-      title: 'Semantic Vue Components',
-      src: 'https://cdn.vuetifyjs.com/docs/images/featured/feature-2.png',
-      to: rpath('/components/all/'),
-    },
-    {
-      text: 'Vuetify supports the future of Vite tooling through its create plugin. This allows you to scaffold a new project in seconds.',
-      title: 'Ready-Made Project Scaffolding',
-      src: 'https://cdn.vuetifyjs.com/docs/images/featured/feature-3.png',
-      href: 'https://tryvuetify.com',
-    },
-  ]
-</script>
diff --git a/packages/docs/src/components/home/Gallery/Chat/Chat.vue b/packages/docs/src/components/home/Gallery/Chat/Chat.vue
new file mode 100644
index 00000000000..2377ab9a889
--- /dev/null
+++ b/packages/docs/src/components/home/Gallery/Chat/Chat.vue
@@ -0,0 +1,238 @@
+<template>
+  <v-container class="bg-surface-light overflow-hidden" height="100%" fluid>
+    <v-row class="fill-height my-0">
+      <template v-if="!mobile">
+        <v-col class="fill-height" cols="4">
+          <VChatList
+            :chats="chats"
+            :selected-chat="selectedChat"
+            @select-chat="selectChat"
+          />
+        </v-col>
+
+        <v-col class="fill-height" cols="8">
+          <VChatDetail :chat="selectedChat" :messages="messages" />
+        </v-col>
+      </template>
+
+      <template v-else>
+        <v-col v-if="selectedChat" class="fill-height" cols="12">
+          <VChatDetail
+            :chat="selectedChat"
+            :messages="messages"
+            @back="selectedChat = null"
+          />
+        </v-col>
+
+        <v-col v-else class="fill-height" cols="12">
+          <VChatList
+            :chats="chats"
+            :selected-chat="selectedChat"
+            @select-chat="selectChat"
+          />
+        </v-col>
+      </template>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import { useDisplay } from 'vuetify'
+  import VChatList from '@/components/home/Gallery/Chat/List.vue'
+  import VChatDetail from '@/components/home/Gallery/Chat/Detail.vue'
+
+  const chats = [
+    {
+      id: 1,
+      avatar: 'https://avatars.githubusercontent.com/u/9064066?v=4',
+      name: 'John Leider',
+      date: '2025-08-05',
+      message: `I'll be in your neighborhood doing errands this weekend. Do you want to hang out?`,
+    },
+    {
+      id: 2,
+      avatar: 'https://avatars.githubusercontent.com/u/58872083?v=4',
+      name: 'Heather Leider',
+      date: '2025-08-05',
+      message: `&mdash; Wish I could come, but I'm out of town this weekend.`,
+    },
+    {
+      id: 3,
+      avatar: 'https://avatars.githubusercontent.com/u/16421948?v=4',
+      name: 'Kael Watts-Deuchar',
+      date: '2025-08-05',
+      message: 'Do you have Paris recommendations? Have you ever been?',
+    },
+    {
+      id: 12,
+      avatar: 'https://avatars.githubusercontent.com/u/17315781',
+      name: 'Ishan Subedi',
+      date: '2025-08-05',
+      message: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
+    },
+    {
+      id: 4,
+      avatar: 'https://avatars.githubusercontent.com/u/27827979?v=4',
+      name: 'Andrew Henry',
+      date: '2025-08-05',
+      message: 'Have any ideas about what we should get Heidi for her birthday?',
+    },
+    {
+      id: 5,
+      avatar: 'https://avatars.githubusercontent.com/u/42892508?v=4',
+      name: 'Blaine Landowski',
+      date: '2025-08-05',
+      message: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
+    },
+    {
+      id: 8,
+      avatar: 'https://avatars.githubusercontent.com/u/20162853?s=96&v=4',
+      name: 'Jacek Czarniecki',
+      date: '2025-08-05',
+      message: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
+    },
+    {
+      id: 9,
+      avatar: 'https://avatars.githubusercontent.com/u/11574195',
+      name: 'Shubham Patlani',
+      date: '2025-08-05',
+      message: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
+    },
+    {
+      id: 10,
+      avatar: 'https://avatars.githubusercontent.com/u/47291268',
+      name: 'Isaias Briones',
+      date: '2025-08-05',
+      message: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
+    },
+    {
+      id: 11,
+      avatar: 'https://avatars.githubusercontent.com/u/108551827?s=96&v=4',
+      name: 'Henry Aviles',
+      date: '2025-08-05',
+      message: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
+    },
+    {
+      id: 13,
+      avatar: 'https://avatars.githubusercontent.com/u/11289484?s=96&v=4',
+      name: 'Andrei Elkin',
+      date: '2025-08-05',
+      message: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
+    },
+    {
+      id: 14,
+      avatar: 'https://avatars.githubusercontent.com/u/37642320?s=96&v=4',
+      name: 'JC Puno',
+      date: '2025-08-05',
+      message: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
+    },
+    {
+      id: 15,
+      avatar: 'https://gravatar.com/avatar/7d1a8ba680ab9d49bd9cdaeff05d0e76',
+      name: 'Abdelouahed Oumoussa',
+      date: '2025-08-05',
+      message: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
+    },
+  ]
+
+  const { mobile } = useDisplay()
+
+  const messages = ref([
+    {
+      id: 1,
+      date: '2025-08-05',
+      message: `I'll be in your neighborhood doing errands this weekend. Do you want to hang out?`,
+      isMine: true,
+    },
+    {
+      id: 2,
+      date: '2025-08-05',
+      message: `Just finished that book you recommended - it was amazing! We should discuss it over coffee sometime.`,
+    },
+    {
+      id: 3,
+      date: '2025-08-05',
+      message: 'Do you have Paris recommendations? Have you ever been?',
+      isMine: true,
+    },
+    {
+      id: 4,
+      date: '2025-08-05',
+      message: 'Have any ideas about what we should get Heidi for her birthday?',
+    },
+    {
+      id: 5,
+      date: '2025-08-05',
+      isMine: true,
+      message: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
+    },
+    {
+      id: 6,
+      date: '2025-08-05',
+      message: 'Hey, are you going to the concert next weekend? I have an extra ticket!',
+    },
+    {
+      id: 7,
+      date: '2025-08-05',
+      message: 'Can you send me the notes from yesterday\'s meeting? I had to leave early.',
+      isMine: true,
+    },
+    {
+      id: 8,
+      date: '2025-08-05',
+      message: 'Check out this new recipe I tried - it turned out incredible!',
+    },
+    {
+      id: 9,
+      date: '2025-08-05',
+      message: 'Remember that cafe we visited last summer? They\'re opening a new location downtown!',
+      isMine: true,
+    },
+    {
+      id: 10,
+      date: '2025-08-05',
+      message: 'Happy birthday! Hope you have an amazing day filled with joy and celebration!',
+    },
+    {
+      id: 11,
+      date: '2025-08-05',
+      message: 'Did you see the season finale last night? We need to talk about that ending!',
+      isMine: true,
+    },
+    {
+      id: 12,
+      date: '2025-08-05',
+      message: 'Thanks for helping me move yesterday. I owe you dinner!',
+    },
+    {
+      id: 13,
+      date: '2025-08-05',
+      message: 'My sister just got engaged! Save the date for the wedding in September.',
+      isMine: true,
+    },
+    {
+      id: 14,
+      date: '2025-08-05',
+      message: 'Found this amazing hiking trail yesterday. We should check it out this weekend!',
+    },
+    {
+      id: 15,
+      date: '2025-08-05',
+      message: 'Can you believe it\'s been 5 years since college? Time flies!',
+      isMine: true,
+    },
+    {
+      id: 17,
+      date: '2025-08-05',
+      message: 'I just saw this place and thought of you!',
+    },
+  ])
+
+  const selectedChat = ref(chats[0])
+
+  function selectChat (chat) {
+    selectedChat.value = chat
+    messages.value = messages.value.reverse()
+  }
+</script>
diff --git a/packages/docs/src/components/home/Gallery/Chat/Detail.vue b/packages/docs/src/components/home/Gallery/Chat/Detail.vue
new file mode 100644
index 00000000000..6a6bfa0e053
--- /dev/null
+++ b/packages/docs/src/components/home/Gallery/Chat/Detail.vue
@@ -0,0 +1,132 @@
+<template>
+  <v-card
+    class="d-flex flex-column"
+    elevation="0"
+    height="100%"
+    rounded="xl"
+    weight="100%"
+    border
+  >
+    <v-card-title class="d-flex align-center">
+      <v-btn
+        v-if="mobile"
+        size="small"
+        variant="text"
+        icon
+        @click="emit('back')"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+
+      <v-avatar class="mx-2">
+        <v-img :src="chat.avatar" />
+      </v-avatar>
+
+      <div class="text-body-1 font-weight-medium">
+        {{ chat.name }}
+      </div>
+
+      <v-spacer />
+    </v-card-title>
+
+    <v-divider />
+
+    <v-card-text
+      ref="messagesContainer"
+      class="d-flex flex-column flex-fill overflow-y-auto"
+    >
+      <v-spacer />
+
+      <div
+        v-for="message in [...props.messages, ...newMessages]"
+        :key="message.id"
+        class="d-flex my-5"
+      >
+        <v-spacer v-if="message.isMine" />
+
+        <v-sheet
+          :max-width="mobile ? '80%' : '50%'"
+          class="d-flex align-center"
+        >
+          <v-avatar v-if="!message.isMine" class="mr-2" size="x-small">
+            <v-img :src="chat.avatar" />
+          </v-avatar>
+
+          <v-card
+            :color="message.isMine ? 'primary' : 'surface-light'"
+            class="rounded-xl px-4 py-2"
+            elevation="0"
+            border
+          >
+            {{ message.message }}
+          </v-card>
+        </v-sheet>
+      </div>
+    </v-card-text>
+
+    <v-card-actions>
+      <v-text-field
+        v-model="newMessage"
+        bg-color="surface-light"
+        placeholder="Type a message"
+        rounded="xl"
+        variant="solo"
+        flat
+        hide-details
+        @keyup.enter="sendMessage"
+      >
+        <template #append-inner>
+          <v-btn color="primary" icon="mdi-send" @click="sendMessage" />
+        </template>
+      </v-text-field>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+  import { nextTick, onMounted, ref } from 'vue'
+  import { useDisplay } from 'vuetify'
+
+  const { mobile } = useDisplay()
+
+  const props = defineProps({
+    chat: {
+      type: Object,
+      required: true,
+    },
+    messages: {
+      type: Array,
+      required: true,
+    },
+  })
+
+  const emit = defineEmits(['back'])
+
+  const messagesContainer = ref(null)
+  const newMessage = ref('')
+  const newMessages = ref([])
+
+  onMounted(() => {
+    scrollToBottomOfChat()
+  })
+
+  function scrollToBottomOfChat () {
+    const messageListContainerEl = messagesContainer.value.$el
+
+    messageListContainerEl.scrollTop = messageListContainerEl.scrollHeight
+  }
+
+  function sendMessage () {
+    newMessages.value.push({
+      id: Date.now(),
+      message: newMessage.value,
+      isMine: true,
+    })
+
+    newMessage.value = ''
+
+    nextTick(() => {
+      scrollToBottomOfChat()
+    })
+  }
+</script>
diff --git a/packages/docs/src/components/home/Gallery/Chat/List.vue b/packages/docs/src/components/home/Gallery/Chat/List.vue
new file mode 100644
index 00000000000..c1b885585bf
--- /dev/null
+++ b/packages/docs/src/components/home/Gallery/Chat/List.vue
@@ -0,0 +1,74 @@
+<template>
+  <v-card
+    class="d-flex flex-column"
+    elevation="0"
+    height="100%"
+    rounded="xl"
+    weight="100%"
+    border
+  >
+    <v-card-title>
+      <div>Chat</div>
+
+      <v-text-field
+        v-model="searchTerm"
+        bg-color="surface-light"
+        class="mt-5"
+        density="compact"
+        placeholder="Search"
+        prepend-inner-icon="mdi-magnify"
+        rounded="xl"
+        variant="solo"
+        flat
+        hide-details
+      />
+    </v-card-title>
+
+    <v-card-text
+      v-if="filteredChats.length"
+      class="d-flex flex-column overflow-hidden px-0"
+    >
+      <v-list lines="three" item-props>
+        <v-list-item
+          v-for="chat in filteredChats"
+          :key="chat.id"
+          :active="selectedChat?.id === chat.id"
+          :prepend-avatar="chat.avatar"
+          :subtitle="chat.message"
+          :title="chat.name"
+          @click="emit('selectChat', chat)"
+        >
+          <template #subtitle="{ subtitle }">
+            <div>
+              {{ subtitle }} <span class="text-grey">{{ chat.date }}</span>
+            </div>
+          </template>
+        </v-list-item>
+      </v-list>
+    </v-card-text>
+
+    <v-card-text v-else class="py-5 text-center"> No chats found </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+  import { computed, ref } from 'vue'
+
+  const props = defineProps({
+    chats: {
+      type: Array,
+      required: true,
+    },
+    selectedChat: {
+      type: [Object, null],
+      required: true,
+    },
+  })
+
+  const emit = defineEmits(['selectChat'])
+
+  const searchTerm = ref('')
+
+  const filteredChats = computed(() =>
+    props.chats.filter(chat => chat.name.toLowerCase().includes(searchTerm.value.toLowerCase())))
+</script>
diff --git a/packages/docs/src/components/home/Gallery/Components.vue b/packages/docs/src/components/home/Gallery/Components.vue
new file mode 100644
index 00000000000..e633569af3d
--- /dev/null
+++ b/packages/docs/src/components/home/Gallery/Components.vue
@@ -0,0 +1,243 @@
+<template>
+  <v-theme-provider :theme="currentTheme">
+    <v-defaults-provider :defaults="defaults">
+      <v-card class="py-16" color="background" elevation="0">
+        <v-container class="pt-0">
+          <HomeCommonTitle
+            class="mb-10"
+            description="Vuetify provides a comprehensive collection of components that can be used to build your application."
+            title="Component Gallery"
+          />
+
+          <v-sheet class="mx-auto" color="transparent" max-width="1200px">
+            <v-card
+              class="my-1"
+              color="transparent"
+              elevation="0"
+              rounded="lg"
+            >
+              <div class="d-flex flex-wrap align-center justify-center">
+                <div
+                  v-for="(config, themeName) in themes"
+                  :key="themeName"
+                  class="d-flex flex-column align-center justify-center mr-3 my-3"
+                >
+                  <v-avatar
+                    :color="config.colors.primary"
+                    class="d-flex align-center justify-center cursor-pointer"
+                    height="50"
+                    width="50"
+                    @click="currentTheme = themeName"
+                  >
+                    <v-icon v-if="currentTheme === themeName" icon="mdi-check" />
+                  </v-avatar>
+                </div>
+              </div>
+            </v-card>
+
+            <v-card class="text-left" elevation="5" rounded="lg">
+              <v-layout>
+                <v-system-bar class="justify-center" theme="dark" window>
+                  <div class="position-absolute left-0 ml-3">
+                    <v-avatar class="mx-1" color="error" size="12" />
+                    <v-avatar class="mx-1" color="warning" size="12" />
+                    <v-avatar class="mx-1" color="success" size="12" />
+                  </div>
+
+                  <v-icon class="mx-2" icon="mdi-earth" />
+
+                  <span>Vuetify Gallery</span>
+                </v-system-bar>
+
+                <v-app-bar
+                  v-if="!selectedComponent.isNavigationHiden"
+                  class="ps-4"
+                  color="primary"
+                  elevation="0"
+                  flat
+                >
+                  <v-app-bar-nav-icon class="mr-3" @click="drawer = !drawer" />
+
+                  <v-avatar
+                    class="pa-1"
+                    color="surface"
+                    image="https://cdn.vuetifyjs.com/docs/images/logos/v.svg"
+                    size="40"
+                  />
+
+                  <v-app-bar-title>Vuetify</v-app-bar-title>
+
+                  <template #append>
+                    <v-btn class="text-none me-1 px-3" height="48" slim>
+                      <template #prepend>
+                        <v-avatar color="surface-light" image="https://cdn.vuetifyjs.com/images/john.png" size="32" start />
+                      </template>
+
+                      <span class="hidden-sm-and-down">John Leider</span>
+
+                      <v-menu activator="parent">
+                        <v-list density="compact" nav>
+                          <v-list-item title="Settings" link @click="selectedComponent = formComponent" />
+
+                          <v-list-item title="Logout" @click="selectedComponent = loginComponent" />
+                        </v-list>
+                      </v-menu>
+
+                      <template #append>
+                        <v-icon icon="mdi-chevron-down" />
+                      </template>
+                    </v-btn>
+                  </template>
+                </v-app-bar>
+
+                <v-navigation-drawer
+                  v-if="!selectedComponent.isNavigationHiden"
+                  v-model="drawer"
+                  :rail="selectedComponent.hasRailsDrawer"
+                  color="surface"
+                >
+                  <v-list
+                    :items="components"
+                    density="compact"
+                    nav
+                  >
+                    <v-list-item
+                      v-for="(item, i) in components"
+                      :key="i"
+                      v-bind="item"
+                      :active="item.title === selectedComponent.title"
+                      active-class="text-primary"
+                      nav
+                      @click="selectedComponent = item"
+                    />
+                  </v-list>
+
+                  <template #append>
+                    <v-list-item
+                      class="ma-2"
+                      prepend-icon="mdi-cog-outline"
+                      title="Settings"
+                      link
+                      nav
+                      @click="selectedComponent = formComponent"
+                    />
+                  </template>
+                </v-navigation-drawer>
+
+                <v-main>
+                  <v-sheet
+                    border="sm"
+                    class="overflow-y-auto"
+                    height="600"
+                    max-width="100%"
+                  >
+                    <v-slide-x-transition>
+                      <component
+                        :is="selectedComponent.component"
+                        @login="selectedComponent = components[0]"
+                      />
+                    </v-slide-x-transition>
+                  </v-sheet>
+                </v-main>
+              </v-layout>
+            </v-card>
+          </v-sheet>
+        </v-container>
+      </v-card>
+    </v-defaults-provider>
+  </v-theme-provider>
+</template>
+
+<script setup lang="ts">
+  import { defineAsyncComponent } from 'vue'
+
+  interface SelectedComponent {
+    title: string
+    prependIcon?: string
+    component: Component
+    hasRailsDrawer?: boolean
+    link?: boolean
+    isNavigationHiden?: boolean
+  }
+
+  const Form = defineAsyncComponent(() => import('@/components/home/Gallery/Form.vue'))
+  const Data = defineAsyncComponent(() => import('@/components/home/Gallery/Data.vue'))
+  const Chat = defineAsyncComponent(() => import('@/components/home/Gallery/Chat/Chat.vue'))
+  const Login = defineAsyncComponent(() => import('@/components/home/Gallery/Login.vue'))
+
+  const theme = useTheme()
+
+  const defaults = {
+    VCard: {
+      elevation: 5,
+    },
+  }
+
+  const themes = {
+    light: theme.themes.value.light,
+    dark: theme.themes.value.dark,
+    nebula: theme.themes.value.nebula,
+    odyssey: theme.themes.value.odyssey,
+    blackguard: theme.themes.value.blackguard,
+  }
+
+  const drawer = ref(true)
+  const currentTheme = ref(theme.name.value)
+
+  const loginComponent: SelectedComponent = {
+    title: 'Login',
+    component: Login,
+    isNavigationHiden: true,
+  }
+
+  const formComponent: SelectedComponent = {
+    title: 'Form',
+    prependIcon: 'mdi-circle-edit-outline',
+    link: true,
+    component: Form,
+  }
+
+  const components: SelectedComponent[] = [
+    {
+      title: 'Dashboard',
+      prependIcon: 'mdi-view-dashboard-outline',
+      link: true,
+      component: Data,
+    },
+    formComponent,
+    {
+      title: 'Chat',
+      component: Chat,
+      link: true,
+      prependIcon: 'mdi-message-outline',
+      hasRailsDrawer: true,
+    },
+  ]
+
+  const selectedComponent = shallowRef<SelectedComponent>(components[0])
+</script>
+
+<style scoped>
+  /* Make scrollbar thinner */
+  .overflow-y-auto {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(var(--v-theme-on-surface), 0.3) transparent;
+  }
+
+  .overflow-y-auto::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .overflow-y-auto::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .overflow-y-auto::-webkit-scrollbar-thumb {
+    background-color: rgba(var(--v-theme-on-surface), 0.3);
+    border-radius: 3px;
+  }
+
+  .overflow-y-auto::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(var(--v-theme-on-surface), 0.5);
+  }
+</style>
diff --git a/packages/docs/src/components/home/Gallery/Data.vue b/packages/docs/src/components/home/Gallery/Data.vue
new file mode 100644
index 00000000000..00387f70c1d
--- /dev/null
+++ b/packages/docs/src/components/home/Gallery/Data.vue
@@ -0,0 +1,288 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col
+        v-for="(item, i) in statItems"
+        :key="i"
+        cols="12"
+        md="3"
+        sm="6"
+      >
+        <v-card
+          class="border-sm border-opacity-50"
+          elevation="0"
+          rounded="lg"
+          variant="outlined"
+        >
+          <v-card-item class="pt-4" height="64">
+            <v-card-title class="py-0 text-caption">{{ item.subtitle }}</v-card-title>
+
+            <v-card-title class="py-0">{{ item.title }}</v-card-title>
+
+            <template #append>
+              <v-icon :icon="item.icon" size="30" />
+            </template>
+          </v-card-item>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-card class="my-5" elevation="0" rounded="lg" title="Recent Orders">
+      <div class="px-4">
+        <v-text-field
+          v-model="search"
+          density="compact"
+          placeholder="Search"
+          prepend-inner-icon="mdi-magnify"
+          variant="outlined"
+          hide-details
+          rounded
+        />
+      </div>
+
+      <div class="px-4">
+        <v-data-table :headers="headers" :items="tableItems" :search="search" hide-default-footer>
+          <template #item.name="{ item }">
+            <div class="d-flex align-center ga-4">
+              <v-avatar :image="item.avatar" color="surface-light" />
+
+              <span>{{ item.name }}</span>
+            </div>
+          </template>
+
+          <template #item.status="{ item }">
+            <v-chip :text="item.status" color="primary" size="small" label />
+          </template>
+        </v-data-table>
+      </div>
+    </v-card>
+
+    <v-divider class="my-5" />
+
+    <v-row>
+      <v-col cols="12" md="6">
+        <v-card elevation="0" rounded="lg" title="Transactions" border>
+          <template #append>
+            <div class="my-5" />
+          </template>
+
+          <template #text>
+            <v-list-item
+              v-for="(item, i) in listItems"
+              :key="i"
+              :class="i !== 0 && 'mt-4'"
+              :subtitle="item.subtitle"
+              :title="item.title"
+              class="px-0"
+              lines="one"
+            >
+              <template #prepend>
+                <v-avatar
+                  :icon="item.icon"
+                  :text="item.initials"
+                  color="primary"
+                  variant="tonal"
+                  rounded
+                />
+              </template>
+
+              <template #append>
+                <span class="text-subtitle-1 font-weight-regular">
+                  {{ item.amount }}
+                </span>
+              </template>
+            </v-list-item>
+          </template>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-card elevation="0" rounded="lg" title="Summary" border>
+          <template #append>
+            <div class="my-5" />
+          </template>
+
+          <template #text>
+            <v-list-item
+              v-for="(item, i) in summaryItems"
+              :key="i"
+              :class="i !== 0 && 'mt-4'"
+              class="px-0"
+            >
+              <template #prepend>
+                <v-avatar :text="item.text" color="primary" size="large" variant="tonal" />
+              </template>
+
+              <template #title>
+                <div class="d-flex justify-space-between align-center text-medium-emphasis">
+                  <span>{{ item.title }}</span>
+
+                  <span>{{ item.value }}</span>
+                </div>
+              </template>
+
+              <template #subtitle>
+                <div class="py-1">
+                  <v-progress-linear
+                    :model-value="item.progress"
+                    bg-color="surface-light"
+                    bg-opacity="1"
+                    color="primary"
+                    height="8"
+                    rounded
+                  />
+                </div>
+              </template>
+            </v-list-item>
+          </template>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+  import { shallowRef } from 'vue'
+
+  const search = shallowRef('')
+
+  const headers = [
+    { title: 'Name', key: 'name' },
+    { title: 'Amount', key: 'amount', value: item => `$${item.amount}` },
+    { title: 'Vendor', key: 'vendor' },
+    { title: 'Status', key: 'status' },
+    { title: 'Rating', key: 'rating' },
+  ]
+
+  const tableItems = [
+    {
+      avatar: 'https://picsum.photos/id/244/200/300',
+      name: 'Sports Shoes',
+      amount: 149,
+      vendor: 'Nike',
+      status: 'Completed',
+      rating: '5.0',
+    },
+    {
+      avatar: 'https://picsum.photos/id/122/200/300',
+      name: 'Headphones',
+      amount: 79,
+      vendor: 'Sony',
+      status: 'Pending',
+      rating: '4.5',
+    },
+    {
+      avatar: 'https://picsum.photos/id/312/200/300',
+      name: 'Smart Watch',
+      amount: 299,
+      vendor: 'Apple',
+      status: 'Completed',
+      rating: '4.8',
+    },
+    {
+      avatar: 'https://picsum.photos/id/420/200/300',
+      name: 'Wireless Mouse',
+      amount: 29,
+      vendor: 'Logitech',
+      status: 'Completed',
+      rating: '4.2',
+    },
+    {
+      avatar: 'https://picsum.photos/id/600/200/300',
+      name: 'Wireless Keyboard',
+      amount: 49,
+      vendor: 'Logitech',
+      status: 'Cancelled',
+      rating: '4.0',
+    },
+  ]
+
+  const statItems = [
+    {
+      subtitle: 'Total subscribers',
+      title: '23,412',
+      icon: 'mdi-account-group-outline',
+    },
+    {
+      subtitle: 'Total revenue',
+      title: '$14,301',
+      icon: 'mdi-star-outline',
+    },
+    {
+      subtitle: 'Total orders',
+      title: '402',
+      icon: 'mdi-cart-outline',
+    },
+    {
+      subtitle: 'Total products',
+      title: '76',
+      icon: 'mdi-shape-outline',
+    },
+  ]
+
+  const listItems = [
+    {
+      title: 'John Leider',
+      initials: 'JL',
+      amount: '+$36.11',
+      subtitle: '21 Mar 8:00PM',
+    },
+    {
+      title: 'ATM withdrawal',
+      initials: '$',
+      amount: '-$20.00',
+      subtitle: '21 Mar 6:00PM',
+    },
+    {
+      title: 'Jane Doe',
+      initials: 'JD',
+      amount: '+$45.00',
+      subtitle: '21 Mar 4:00PM',
+    },
+    {
+      title: 'Amazon',
+      initials: 'A',
+      amount: '-$99.99',
+      subtitle: '21 Mar 10:00AM',
+    },
+    {
+      title: 'Water Bill',
+      initials: 'W',
+      amount: '-$25.00',
+      subtitle: '16 Mar 9:00AM',
+    },
+    {
+      title: 'Electricity Bill',
+      initials: 'E',
+      amount: '-$45.00',
+      subtitle: '14 Mar 8:00AM',
+    },
+  ]
+
+  const summaryItems = [
+    {
+      title: 'Revenue',
+      progress: 80,
+      text: 'R',
+      value: '$47,230',
+    },
+    {
+      title: 'Sales',
+      progress: 60,
+      text: 'S',
+      value: '$14,345',
+    },
+    {
+      title: 'Cost',
+      progress: 40,
+      text: 'C',
+      value: '$12,345',
+    },
+    {
+      title: 'Profit',
+      progress: 20,
+      text: 'P',
+      value: '$34,567',
+    },
+  ]
+</script>
diff --git a/packages/docs/src/components/home/Gallery/Form.vue b/packages/docs/src/components/home/Gallery/Form.vue
new file mode 100644
index 00000000000..4530b36cb8a
--- /dev/null
+++ b/packages/docs/src/components/home/Gallery/Form.vue
@@ -0,0 +1,254 @@
+<template>
+  <div>
+    <v-container class="px-md-6 py-5" fluid>
+      <v-row>
+        <v-col cols="12">
+          <h5 class="text-h6 font-weight-medium">Personal Information</h5>
+
+          <p class="text-body-2 text-medium-emphasis">Use a permanent address where you can receive mail.</p>
+        </v-col>
+
+        <v-col cols="12">
+          <div class="d-flex align-center ga-3">
+            <v-avatar image="https://cdn.vuetifyjs.com/images/john.jpg" rounded="lg" size="80" />
+
+            <div>
+              <v-btn
+                :loading="saving === 'change-avatar'"
+                class="mb-2 text-none"
+                color="surface-light"
+                text="Change avatar"
+                variant="flat"
+                @click="save('change-avatar')"
+              />
+
+              <p class="text-body-2 text-medium-emphasis">JPG, GIF or PNG. 1MB max.</p>
+            </div>
+          </div>
+
+          <v-form>
+            <v-container class="px-0">
+              <v-row>
+                <v-col cols="12" sm="6">
+                  <v-label>First name</v-label>
+
+                  <v-text-field
+                    color="primary"
+                    density="compact"
+                    variant="outlined"
+                    hide-details
+                  />
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <v-label>Last name</v-label>
+
+                  <v-text-field
+                    color="primary"
+                    density="compact"
+                    variant="outlined"
+                    hide-details
+                  />
+                </v-col>
+
+                <v-col cols="12">
+                  <v-label>Email address</v-label>
+
+                  <v-text-field
+                    color="primary"
+                    density="compact"
+                    variant="outlined"
+                    hide-details
+                  />
+                </v-col>
+
+                <v-col cols="12">
+                  <v-label>Username</v-label>
+
+                  <v-text-field
+                    color="primary"
+                    density="compact"
+                    placeholder="jonesmith"
+                    variant="outlined"
+                    hide-details
+                  >
+                    <template #prepend-inner>
+                      <span>example.com/</span>
+                    </template>
+                  </v-text-field>
+                </v-col>
+
+                <v-col cols="12">
+                  <v-label>Timezone</v-label>
+                  <v-select
+                    :items="['Pacific Standard Time', 'Eastern Standard Time', 'Greenwich Mean Time']"
+                    :model-value="'Pacific Standard Time'"
+                    color="primary"
+                    density="compact"
+                    variant="outlined"
+                    hide-details
+                  />
+                </v-col>
+
+                <v-col cols="12">
+                  <v-btn
+                    :loading="saving === 'personal'"
+                    class="text-none"
+                    color="primary"
+                    text="Save"
+                    variant="flat"
+                    @click="save('personal')"
+                  />
+                </v-col>
+              </v-row>
+            </v-container>
+          </v-form>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <v-divider />
+
+    <v-container class="px-md-6 py-12" fluid>
+      <v-row>
+        <v-col cols="12">
+          <h5 class="text-h6 font-weight-medium">Change password</h5>
+
+          <p class="text-body-2 text-medium-emphasis">Update your password associated with your account.  </p>
+        </v-col>
+
+        <v-col cols="12">
+          <v-form>
+            <v-container class="px-0 pt-0">
+              <v-row>
+                <v-col cols="12">
+                  <v-label>Current password</v-label>
+
+                  <v-text-field
+                    color="primary"
+                    density="compact"
+                    type="password"
+                    variant="outlined"
+                    hide-details
+                  />
+                </v-col>
+
+                <v-col cols="12">
+                  <v-label>New password</v-label>
+
+                  <v-text-field
+                    color="primary"
+                    density="compact"
+                    type="password"
+                    variant="outlined"
+                    hide-details
+                  />
+                </v-col>
+
+                <v-col cols="12">
+                  <v-label>Confirm password</v-label>
+
+                  <v-text-field
+                    color="primary"
+                    density="compact"
+                    type="password"
+                    variant="outlined"
+                    hide-details
+                  />
+                </v-col>
+
+                <v-col cols="12">
+                  <v-btn
+                    :loading="saving === 'password'"
+                    class="text-none"
+                    color="primary"
+                    text="Save"
+                    variant="flat"
+                    @click="save('password')"
+                  />
+                </v-col>
+              </v-row>
+            </v-container>
+          </v-form>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <v-divider />
+
+    <v-container class="px-md-6 py-12" fluid>
+      <v-row>
+        <v-col cols="12" md="4">
+          <h5 class="text-subtitle-1 font-weight-medium">Log out other sessions</h5>
+
+          <p class="text-body-2 text-medium-emphasis">Please enter your password to confirm you would like to log out of your other sessions across all of your devices.</p>
+        </v-col>
+
+        <v-col cols="12" md="8">
+          <v-form>
+            <v-container class="px-0 pt-0">
+              <v-row>
+                <v-col cols="12">
+                  <v-label>Your password</v-label>
+
+                  <v-text-field
+                    color="primary"
+                    density="compact"
+                    variant="outlined"
+                    hide-details
+                  />
+                </v-col>
+
+                <v-col cols="12">
+                  <v-btn
+                    :loading="saving === 'other-sessions'"
+                    class="text-none"
+                    color="primary"
+                    text="Log out other sessions"
+                    variant="flat"
+                    @click="save('other-sessions')"
+                  />
+                </v-col>
+              </v-row>
+            </v-container>
+          </v-form>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <v-divider />
+
+    <v-container class="px-md-6 py-12" fluid>
+      <v-row align="center">
+        <v-col cols="12" md="4">
+          <h5 class="text-subtitle-1 font-weight-medium">Delete account</h5>
+
+          <p class="text-body-2 text-medium-emphasis">No longer want to use our service? You can delete your account here. This action is not reversible. All information related to this account will be deleted permanently.</p>
+        </v-col>
+
+        <v-col cols="12" md="8">
+          <v-btn
+            :loading="saving === 'delete-account'"
+            class="text-none"
+            color="error"
+            text="Yes, delete my account"
+            variant="flat"
+            @click="save('delete-account')"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const saving = ref('')
+
+  function save (value: string) {
+    saving.value = value
+
+    setTimeout(() => {
+      saving.value = ''
+    }, 2000)
+  }
+</script>
diff --git a/packages/docs/src/components/home/Gallery/Login.vue b/packages/docs/src/components/home/Gallery/Login.vue
new file mode 100644
index 00000000000..3ff347c1111
--- /dev/null
+++ b/packages/docs/src/components/home/Gallery/Login.vue
@@ -0,0 +1,77 @@
+<template>
+  <v-container class="h-100 pa-4" fluid>
+    <v-row align="center" class="h-100" justify="center">
+      <v-sheet class="flex-1-1 px-4" color="background" max-width="420">
+        <v-img
+          class="mx-auto mb-4"
+          max-width="60"
+          src="https://vuetifyjs.b-cdn.net/docs/images/logos/v.svg"
+        />
+
+        <div class="text-h5 text-center mb-8 font-weight-medium">Log into your account</div>
+
+        <v-sheet border="opacity-25 thin" class="overflow-hidden" rounded="lg">
+          <v-text-field
+            density="compact"
+            placeholder="Email"
+            rounded="lg"
+            variant="solo"
+            flat
+            hide-details
+          />
+
+          <v-divider />
+
+          <v-text-field
+            density="compact"
+            placeholder="Password"
+            variant="solo"
+            flat
+            hide-details
+          />
+        </v-sheet>
+
+        <div class="py-4">
+          <div class="d-flex justify-space-between align-center">
+            <v-checkbox-btn class="ms-n3" color="primary" label="Remember me">
+              <template #label>
+                <span class="text-body-2">Remember me</span>
+              </template>
+            </v-checkbox-btn>
+
+            <a
+              class="text-decoration-none text-primary text-body-2 font-weight-medium cursor-pointer"
+              @click="emit('login')"
+            >
+              Forgot password?
+            </a>
+          </div>
+        </div>
+
+        <v-btn
+          class="text-none mb-8"
+          color="primary"
+          rounded="lg"
+          text="Log In"
+          block
+          flat
+          @click="emit('login')"
+        />
+
+        <div class="text-center text-body-2">
+          Don't have an account?
+          <a
+            class="text-decoration-none text-primary font-weight-medium cursor-pointer"
+            @click="emit('login')"
+          >
+            Sign up
+          </a>
+        </div>
+      </v-sheet>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+  const emit = defineEmits(['login'])
+</script>
diff --git a/packages/docs/src/components/home/Snips.vue b/packages/docs/src/components/home/Snips.vue
new file mode 100644
index 00000000000..46fa401e4b6
--- /dev/null
+++ b/packages/docs/src/components/home/Snips.vue
@@ -0,0 +1,58 @@
+<template>
+  <v-responsive class="py-5">
+    <HomeCommonGradient color="primary" opacity-class="opacity-10" />
+
+    <v-container class="text-center text-md-left py-16">
+      <v-row align="center">
+        <v-col cols="12" md="7" order="1" order-md="0">
+          <p class="font-weight-medium d-none d-md-block text-primary">
+            From the creators of Vuetify
+          </p>
+
+          <h4 class="text-h4 font-weight-bold my-4">
+            Beautiful UI snippets, built with Vuetify
+          </h4>
+
+          <h6 class="text-h6 font-weight-regular text-medium-emphasis mb-5">
+            Vuetify Snips is a collection of over 500 beautifully crafted UI snippets, built with Vuetify,
+            aimed at making your development process easier and faster.
+          </h6>
+
+          <div>
+            <v-btn
+              class="mr-4 text-none"
+              color="primary"
+              rounded="lg"
+              size="large"
+              text="Get Started"
+              variant="flat"
+            />
+
+            <v-btn
+              class="mr-4 text-none"
+              color="primary"
+              rounded="lg"
+              size="large"
+              text="Learn More"
+              variant="text"
+            />
+          </div>
+
+        </v-col>
+
+        <v-col cols="12" md="5" order="0" order-md="1">
+          <v-img
+            :rounded="$vuetify.display.smAndDown ? true : 's-lg'"
+            :src="src"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-responsive>
+</template>
+
+<script setup lang="ts">
+  const theme = useTheme()
+
+  const src = computed(() => `https://cdn.vuetifyjs.com/docs/images/logos/vsnips-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`)
+</script>
diff --git a/packages/docs/src/components/home/SpecialSponsor.vue b/packages/docs/src/components/home/SpecialSponsor.vue
index 9abf5f32531..b7f9959f324 100644
--- a/packages/docs/src/components/home/SpecialSponsor.vue
+++ b/packages/docs/src/components/home/SpecialSponsor.vue
@@ -1,23 +1,30 @@
 <template>
-  <div v-if="specialSponsor" class="mb-8">
-    <v-divider class="mx-auto" />
+  <v-responsive v-if="specialSponsor">
+    <v-divider color="primary" />
+
+    <HomeCommonGradient
+      :opacity-class="isDark ? 'opacity-40' : 'opacity-20'"
+      color="primary"
+    />
 
     <div class="d-flex align-center justify-center my-1 px-4">
-      <small class="font-weight-bold me-4 text-no-wrap">Special Sponsor</small>
+      <small class="font-weight-bold text-no-wrap">Special Sponsor</small>
 
       <SponsorCard
         :slug="specialSponsor.slug"
         min-height="64"
-        width="240"
+        width="200"
       />
     </div>
 
-    <v-divider class="mx-auto" />
-  </div>
+    <v-divider color="primary" />
+  </v-responsive>
 </template>
 
 <script setup>
+  const theme = useTheme()
   const store = useSponsorsStore()
 
+  const isDark = computed(() => theme.current.value.dark)
   const specialSponsor = computed(() => store.byTier[-2]?.[0])
 </script>
diff --git a/packages/docs/src/components/home/Sponsors.vue b/packages/docs/src/components/home/Sponsors.vue
index 0b4c436211b..f4fce025ed4 100644
--- a/packages/docs/src/components/home/Sponsors.vue
+++ b/packages/docs/src/components/home/Sponsors.vue
@@ -1,40 +1,57 @@
 <template>
-  <v-sheet
-    id="home-sponsors"
-    class="mx-auto pa-3"
-    color="transparent"
-    max-width="700"
-  >
-    <v-responsive min-height="500">
-      <v-row
-        justify="center"
-        dense
+  <v-responsive class="pb-16">
+    <HomeCommonGradient opacity-class="opacity-10" />
+
+    <v-container class="pt-10">
+
+      <HomeCommonTitle
+        class="mb-5"
+        description="Vuetify is proudly supported by these amazing companies and individuals. If you'd like to join them, please consider sponsoring Vuetify's development."
+        title="Sponsors & Backers"
       >
-        <v-col
-          v-for="sponsor in sponsors"
-          :key="sponsor.slug"
-          class="d-flex align-center justify-center"
-          cols="auto"
+        <template #subtitle>
+          <v-icon class="mb-5" color="red-lighten-2" size="60">
+            mdi-heart-outline
+          </v-icon>
+        </template>
+      </HomeCommonTitle>
+
+      <v-btn
+        class="text-none my-5"
+        color="primary"
+        prepend-icon="mdi-heart-outline"
+        rounded="lg"
+        size="large"
+        text="Become a Sponsor"
+        flat
+      />
+
+      <v-responsive class="mt-5 mx-auto" max-width="800">
+        <v-row
+          justify="center"
+          dense
         >
-          <SponsorCard
-            :comfortable="Number(sponsor.metadata.tier) === 2"
-            :compact="Number(sponsor.metadata.tier) > 2"
-            :sponsor="sponsor"
-            v-bind="$attrs"
-            :width="Number(sponsor.metadata.tier) > 1 && smAndDown ? 90 : undefined"
-          />
-        </v-col>
-      </v-row>
-    </v-responsive>
-
-    <br>
-    <br>
-
-    <SponsorLink append-icon="mdi-page-next" size="large" />
-  </v-sheet>
+          <v-col
+            v-for="sponsor in sponsors"
+            :key="sponsor.slug"
+            class="d-flex align-center justify-center ma-1"
+            cols="auto"
+          >
+            <SponsorCard
+              :comfortable="Number(sponsor.metadata.tier) === 2"
+              :compact="Number(sponsor.metadata.tier) > 2"
+              :sponsor="sponsor"
+              v-bind="$attrs"
+              :width="Number(sponsor.metadata.tier) > 1 && smAndDown ? 90 : undefined"
+            />
+          </v-col>
+        </v-row>
+      </v-responsive>
+    </v-container>
+  </v-responsive>
 </template>
 
-<script setup>
+<script setup lang="ts">
   const { smAndDown } = useDisplay()
   const sponsorStore = useSponsorsStore()
 
@@ -51,9 +68,3 @@
       }, [])
   })
 </script>
-
-<script>
-  export default {
-    inheritAttrs: false,
-  }
-</script>
diff --git a/packages/docs/src/components/home/Store.vue b/packages/docs/src/components/home/Store.vue
new file mode 100644
index 00000000000..1a854741119
--- /dev/null
+++ b/packages/docs/src/components/home/Store.vue
@@ -0,0 +1,102 @@
+<template>
+  <v-responsive class="py-16">
+    <HomeCommonGradient opacity-class="opacity-10" />
+
+    <v-container class="pt-0">
+      <HomeCommonTitle
+        class="mb-10"
+        description="Browse our collection of premium templates, themes and UI kits. All themes are built with Vuetify and are available for everyone."
+        title="Vuetify Store"
+      >
+        <template #subtitle>
+          <v-icon class="mb-5" color="primary" size="60">
+            mdi-store-outline
+          </v-icon>
+        </template>
+      </HomeCommonTitle>
+
+      <v-row v-if="!items.length">
+        <v-col
+          v-for="n in 9"
+          :key="n"
+          cols="12"
+          md="4"
+        >
+          <v-skeleton-loader class="rounded-b-0" height="180" />
+
+          <v-skeleton-loader class="rounded-t-0" type="text" />
+        </v-col>
+      </v-row>
+
+      <v-slide-group
+        v-else
+        class="mb-10"
+        content-class="mx-3"
+        show-arrows
+      >
+        <template #next>
+          <v-btn
+            class="mb-15"
+            icon="mdi-chevron-right"
+          />
+        </template>
+        <template #prev>
+          <v-btn
+            class="mb-15"
+            icon="mdi-chevron-left"
+          />
+        </template>
+
+        <v-slide-group-item
+          v-for="product in items"
+          :key="product.id"
+        >
+          <a
+            :href="`https://store.vuetifyjs.com/products/${product.handle}`"
+            class="d-block text-decoration-none mx-5"
+            rel="noopener noreferrer"
+            style="width: 300px"
+            target="_blank"
+          >
+            <DocThemeCard
+              :product="{
+                title: product.title,
+                src: product.image,
+              }"
+              class="text-center"
+            />
+          </a>
+        </v-slide-group-item>
+      </v-slide-group>
+
+      <v-btn
+        append-icon="mdi-open-in-new"
+        aria-label="See More Templates"
+        class="text-none"
+        color="primary"
+        href="https://store.vuetifyjs.com"
+        rel="noopener noreferrer"
+        rounded="lg"
+        size="large"
+        target="_blank"
+        variant="flat"
+      >
+        Shop More
+      </v-btn>
+    </v-container>
+  </v-responsive>
+</template>
+
+<script setup lang="ts">
+  import type { ShopifyProduct } from '@vuetify/one'
+
+  const products = useProductsStore()
+
+  const items = shallowRef<ShopifyProduct[]>([])
+
+  onMounted(async () => {
+    await products.index()
+
+    items.value = products.randomize(products.themes)
+  })
+</script>
diff --git a/packages/docs/src/components/home/Support.vue b/packages/docs/src/components/home/Support.vue
new file mode 100644
index 00000000000..844f0098c99
--- /dev/null
+++ b/packages/docs/src/components/home/Support.vue
@@ -0,0 +1,87 @@
+<template>
+  <v-responsive class="py-5">
+    <HomeCommonGradient color="primary" opacity-class="opacity-10" />
+
+    <v-container class="text-center text-md-left py-16">
+      <v-row align="end">
+        <v-col class="pr-md-15" cols="12" md="6">
+          <p class="font-weight-medium text-primary mb-4">
+            Vuetify Support Services
+          </p>
+
+          <h4 class="text-h4 font-weight-bold mb-5">
+            Need support with your Vuetify project?
+          </h4>
+
+          <h6 class="text-h6 font-weight-regular text-medium-emphasis my-5">
+            We've got you covered. We offer a range of support options to help you get the most out of Vuetify.
+          </h6>
+
+          <div class="my-5">
+            <v-btn
+              :to="rpath('introduction/enterprise-support/')"
+              class="mr-4 text-none"
+              color="primary"
+              rounded="lg"
+              size="large"
+              text="Learn More"
+              variant="flat"
+            />
+          </div>
+        </v-col>
+
+        <v-col cols="12" md="6">
+          <v-card color="transparent" rounded="lg" flat>
+            <v-list
+              :items="supportServices"
+              :lines="false"
+              class="py-3 bg-transparent text-left"
+              item-props
+            >
+              <template #prepend="{ item }">
+                <v-avatar :image="item.avatar" size="small" />
+              </template>
+
+              <template #append>
+                <v-icon-btn
+                  class="text-none mt-3 ml-2"
+                  color="primary"
+                  icon="mdi-open-in-new"
+                  roundeed="circle"
+                  size="small"
+                  variant="text"
+                />
+              </template>
+            </v-list>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-responsive>
+</template>
+
+<script setup lang="ts">
+  const supportServices = [
+    {
+      // TODO: Use proper image URL
+      avatar: 'https://avatars.githubusercontent.com/u/22138497',
+      title: 'Single Developer Support',
+      subtitle: 'Get professional support from the experts behind Vuetify.',
+    },
+    { type: 'divider', class: 'my-4', inset: true },
+    {
+      // TODO: Use proper image URL
+      avatar: 'https://avatars.githubusercontent.com/u/30595047',
+      title: 'Consulting Services',
+      subtitle: 'Epicmax provides consulting services for your project.',
+    },
+    { type: 'divider', class: 'my-4', inset: true },
+    {
+      // TODO: Use proper image URL
+      avatar: 'https://avatars.githubusercontent.com/u/35441165',
+      title: 'Extended LTS support',
+      class: 'mb-2',
+      subtitle: 'HeroDevs provides extended long-term support for Vuetify 2 users.',
+    },
+  ]
+</script>
diff --git a/packages/docs/src/components/home/Tooling.vue b/packages/docs/src/components/home/Tooling.vue
new file mode 100644
index 00000000000..c458b58251c
--- /dev/null
+++ b/packages/docs/src/components/home/Tooling.vue
@@ -0,0 +1,63 @@
+<template>
+  <v-responsive class="py-16">
+    <HomeCommonGradient opacity-class="opacity-10" />
+
+    <v-container>
+      <HomeCommonTitle
+        class="mb-16"
+        description="Vuetify provides a suite of tools for managing your Vuetify projects."
+        subtitle="Tools & Resources"
+        title="Vuetify Tooling"
+      />
+
+      <v-row class="text-left mb-10">
+        <v-col
+          v-for="(item, i) in features"
+          :key="i"
+          cols="12"
+          lg="6"
+          sm="6"
+        >
+          <HomeCommonCard
+            :description="item.description"
+            :image="item.image"
+            :title="item.title"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-responsive>
+</template>
+
+<script setup lang="ts">
+  const theme = useTheme()
+
+  const isDark = computed(() => theme.current.value.dark)
+
+  const features = computed(() => [
+    {
+      title: 'Vuetify Create',
+      // TODO: Use proper image
+      image: `https://cdn.vuetifyjs.com/docs/images/logos/vcreate-logo-${isDark.value ? 'dark' : 'light'}.png`,
+      description: `Scaffold your next Vuetify application with just a few commands. Perfect for getting started with Vuetify.`,
+    },
+    {
+      title: 'Figma UI Kit',
+      // TODO: Use proper image
+      image: 'https://upload.wikimedia.org/wikipedia/commons/3/33/Figma-logo.svg',
+      description: `Fully optimized for Figma and based on Material Design - Vuetify UI Kit. You can use it to create your own Vuetify components and use them in your projects.`,
+    },
+    {
+      title: 'Vuetify ESLint Config',
+      description: `An opinionated eslint config for Vuetify, crafted to keep your code clean and consistent! You can use it to keep your code clean and consistent.`,
+      // TODO: Use proper image
+      image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/ESLint_logo.svg/1200px-ESLint_logo.svg.png',
+    },
+    {
+      title: 'Vuetify ESLint Plugin',
+      // TODO: Use proper image
+      image: 'https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-light-atom.svg',
+      description: `Version upgrade automation eslint plugin, to keep your code clean and consistent! You can use it to keep your code clean and consistent.`,
+    },
+  ])
+</script>
diff --git a/packages/docs/src/components/home/VuetifyOne.vue b/packages/docs/src/components/home/VuetifyOne.vue
new file mode 100644
index 00000000000..afd7ab31190
--- /dev/null
+++ b/packages/docs/src/components/home/VuetifyOne.vue
@@ -0,0 +1,72 @@
+<template>
+  <v-responsive class="py-10">
+    <HomeCommonGradient opacity-class="opacity-10" />
+
+    <v-container>
+      <HomeCommonTitle
+        description="A unified platform providing powerful all Ecosystem Tools in one place. Build faster, collaborate better, and create stunning Vuetify applications."
+        subtitle="Everything in One Place"
+        title="Vuetify One"
+      />
+
+      <v-row class="text-left my-10">
+        <v-col
+          v-for="(item, i) in toolings"
+          :key="i"
+          cols="12"
+          lg="6"
+          sm="6"
+        >
+          <HomeCommonCard
+            :description="item.description"
+            :image="item.image"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-responsive>
+</template>
+
+<script setup lang="ts">
+  const theme = useTheme()
+  const isDark = computed(() => theme.current.value.dark)
+
+  const toolings = computed(() => [
+    {
+      name: 'Vuetify Play',
+      image: `https://cdn.vuetifyjs.com/docs/images/logos/vplay-logo-${isDark.value ? 'dark' : 'light'}.png`,
+      description:
+        'Interactive playground to experiment with Vuetify components. Create, save, and share your projects with the community.',
+    },
+    {
+      name: 'Vuetify Bin',
+      image: `https://cdn.vuetifyjs.com/docs/images/logos/vbin-logo-${isDark.value ? 'dark' : 'light'}.png`,
+      description:
+        'Save and share code snippets instantly. Features complete syntax highlighting and code formatting for a seamless experience.',
+    },
+    {
+      name: 'Vuetify Link',
+      image: `https://cdn.vuetifyjs.com/docs/images/one/logos/vlink-logo-${isDark.value ? 'dark' : 'light'}.png`,
+      description:
+        'Generate shareable links to documentation, components, and resources. Simplify collaboration and streamline your workflow.',
+    },
+    {
+      name: 'Vuetify Studio',
+      image: `https://cdn.vuetifyjs.com/docs/images/logos/vstudio-logo-${isDark.value ? 'dark' : 'light'}.png`,
+      description:
+        'Visual design tool for building Vuetify applications. Drag and drop components to create beautiful interfaces in minutes.',
+    },
+    {
+      name: 'Vuetify Issues',
+      image: `https://cdn.vuetifyjs.com/docs/images/logos/vissues-logo-${isDark.value ? 'dark' : 'light'}.png`,
+      description:
+        'Integrated issue tracking for Vuetify projects. Report bugs, request features, and stay updated with development progress.',
+    },
+    {
+      name: 'Vuetify MCP',
+      image: `https://cdn.vuetifyjs.com/docs/images/logos/vloader-logo-${isDark.value ? 'dark' : 'light'}.png`,
+      description:
+        'Modular component provider for seamless integration. Access pre-built components and utilities to accelerate development.',
+    },
+  ])
+</script>
diff --git a/packages/docs/src/composables/playground.ts b/packages/docs/src/composables/playground.ts
index 1a35d39dcc0..f4c71e7fe75 100644
--- a/packages/docs/src/composables/playground.ts
+++ b/packages/docs/src/composables/playground.ts
@@ -3,6 +3,12 @@ import { strFromU8, strToU8, zlibSync } from 'fflate'
 import { version as vuetifyVersion } from 'vuetify'
 import { version as vueVersion } from 'vue'
 
+export type CodeSection = {
+  name: string
+  content: string
+  language: string
+}
+
 // This is copied directly from playground
 function utoa (data: string): string {
   const buffer = strToU8(data)
@@ -12,7 +18,7 @@ function utoa (data: string): string {
 }
 
 export function usePlayground (
-  sections: ({ name: string, content: string, language: string})[] = [],
+  sections: CodeSection[] = [],
   css: string[] = [],
   imports: Record<string, string> = {},
   setup?: string,
diff --git a/packages/docs/src/i18n/messages/en.json b/packages/docs/src/i18n/messages/en.json
index f32e5fa2af1..26f7a26509e 100644
--- a/packages/docs/src/i18n/messages/en.json
+++ b/packages/docs/src/i18n/messages/en.json
@@ -138,6 +138,7 @@
   "discord": "Discord",
   "done": "All done",
   "edit-in-playground": "Edit in Vuetify Playground",
+  "open-in-playground": "Open in Vuetify Playground",
   "edit-this-page": "Edit this page on",
   "edit": "Edit",
   "enable-banners": "Enable banners",
diff --git a/packages/docs/src/layouts/home.vue b/packages/docs/src/layouts/home.vue
index 9eaa631cc2f..a9ee1e1cd52 100644
--- a/packages/docs/src/layouts/home.vue
+++ b/packages/docs/src/layouts/home.vue
@@ -6,7 +6,9 @@
 
     <AppBarBar />
 
-    <v-main class="text-center font-weight-light">
+    <AppBackToTop />
+
+    <v-main class="text-center">
       <router-view />
     </v-main>
 
diff --git a/packages/docs/src/pages/en/index.md b/packages/docs/src/pages/en/index.md
index bca124a674d..0c6d7be837c 100644
--- a/packages/docs/src/pages/en/index.md
+++ b/packages/docs/src/pages/en/index.md
@@ -8,42 +8,46 @@ meta:
 
 <HomeEntry />
 
-<br>
+<HomeSpecialSponsor />
 
-<HomeFeatures />
+<HomeGalleryComponents />
 
-<br>
+<v-divider />
 
-<HomeSpecialSponsor />
+<HomeSponsors />
 
-<br>
+<v-divider />
 
-## Project Sponsors
+<HomeEcosystem />
 
-The continued development and maintenance of Vuetify is made possible by these generous sponsors:{style="max-width: 568px" .mx-auto .px-4}
+<v-divider  />
 
-<HomeSponsors />
+<HomeVuetifyOne />
+
+<v-divider />
+
+<HomeTooling />
 
-<v-divider style="max-width: 500px;" class="mx-auto my-16" />
+<v-divider color="primary" />
 
-## Templates Built With Vuetify
+<HomeSnips />
 
-Check out these premium templates built using Vuetify.{style="max-width: 568px" .mx-auto .px-4}
+<v-divider />
 
-<DocPremiumThemesGallery />
+<HomeStore />
 
-<v-divider style="max-width: 500px;" class="mx-auto my-16" />
+<v-divider color="primary" />
 
-## Made With Vuetify
+<HomeSupport />
 
-Check out these beautiful apps, plugins, and themes built using Vuetify.{style="max-width: 568px" .mx-auto .px-4}
+<v-divider />
 
-<DocMadeWithVuetifyGallery class="pa-3 mb-4" />
+<HomeDiscord />
 
-<DocMadeWithVuetifyLink />
+<v-divider />
 
-<br>
-<br>
-<br>
+<HomeBlogs />
 
-<HomeEpicmaxSupport />
+<script setup>
+  const theme = useTheme()
+</script>
diff --git a/packages/docs/src/plugins/icons.ts b/packages/docs/src/plugins/icons.ts
index a14235a69cf..4e49ec13467 100644
--- a/packages/docs/src/plugins/icons.ts
+++ b/packages/docs/src/plugins/icons.ts
@@ -74,6 +74,7 @@ export {
   mdiCakeVariant,
   mdiCalendar,
   mdiCalendarBlank,
+  mdiCalendarBlankOutline,
   mdiCalendarRange,
   mdiCallSplit,
   mdiCamera,
@@ -165,6 +166,7 @@ export {
   mdiEyedropper,
   mdiEyeOff,
   mdiFacebook,
+  mdiFactory,
   mdiFastForward,
   mdiFileDocumentOutline,
   mdiFileExcel,