diff --git a/docs/app/pages/[...slug].vue b/docs/app/pages/[...slug].vue
index a2c7d219..5ec1a4c3 100644
--- a/docs/app/pages/[...slug].vue
+++ b/docs/app/pages/[...slug].vue
@@ -39,25 +39,21 @@ defineOgImageComponent('Docs', {
   headline: headline.value
 })
 
-// const communityLinks = computed(() => [{
-//   icon: 'i-heroicons-pencil-square',
-//   label: 'Edit this page',
-//   to: `https://github.com/nuxt/ui/edit/dev/docs/content/${page?.value?._file}`,
-//   target: '_blank'
-// }, {
-//   icon: 'i-heroicons-star',
-//   label: 'Star on GitHub',
-//   to: 'https://github.com/nuxt/ui',
-//   target: '_blank'
-// }, {
-//   icon: 'i-heroicons-lifebuoy',
-//   label: 'Contributing',
-//   to: '/getting-started/contributing'
-// }, {
-//   label: 'Roadmap',
-//   icon: 'i-heroicons-map',
-//   to: '/roadmap'
-// }])
+const communityLinks = computed(() => [{
+  icon: 'i-heroicons-pencil-square',
+  label: 'Edit this page',
+  to: `https://github.com/nuxt/ui/edit/v3/docs/content/${page?.value?._file}`,
+  target: '_blank'
+}, {
+  icon: 'i-heroicons-star',
+  label: 'Star on GitHub',
+  to: 'https://github.com/nuxt/ui',
+  target: '_blank'
+}, {
+  label: 'Roadmap',
+  icon: 'i-heroicons-map',
+  to: '/roadmap'
+}])
 
 // const resourcesLinks = [{
 //   icon: 'i-simple-icons-figma',
@@ -95,20 +91,20 @@ defineOgImageComponent('Docs', {
 
     <template v-if="page?.body?.toc?.links?.length" #right>
       <UContentToc :links="page.body.toc.links">
-        <!-- <template #bottom>
+        <template #bottom>
           <USeparator v-if="page.body?.toc?.links?.length" type="dashed" />
 
           <UPageLinks title="Community" :links="communityLinks" />
 
-          <USeparator type="dashed" />
+          <!-- <USeparator type="dashed" />
 
           <UPageLinks title="Resources" :links="resourcesLinks" />
 
           <USeparator type="dashed" />
 
           <AdsPro />
-          <AdsCarbon />
-        </template> -->
+          <AdsCarbon /> -->
+        </template>
       </UContentToc>
     </template>
   </UPage>
diff --git a/docs/app/pages/roadmap.vue b/docs/app/pages/roadmap.vue
new file mode 100644
index 00000000..3cf97b5b
--- /dev/null
+++ b/docs/app/pages/roadmap.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const title = 'Roadmap'
+const description = 'Discover our Volta board for @nuxt/ui development status.'
+
+useSeoMeta({
+  titleTemplate: '%s - Nuxt UI',
+  title,
+  ogTitle: 'Nuxt UI Roadmap',
+  description
+})
+
+defineOgImageComponent('Docs')
+
+const appConfig = useAppConfig()
+const colorMode = useColorMode()
+
+const token = 'eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsImJhY2tsb2ciLCJ0b2RvIiwiaW5fcHJvZ3Jlc3MiLCJpbl9yZXZpZXciLCJkb25lIiwicmVsZWFzZWQiXSwiYm9hcmRMaW5rZWRQcnMiOmZhbHNlLCJsaXN0R3JvdXAiOiJzdGF0ZSIsImxpc3RPcmRlciI6ImNyZWF0ZWRfYXQiLCJ0aW1lbGluZVpvb20iOiJtb250aCIsInRpbWVsaW5lT3JkZXIiOiJzdGF0ZSIsInRpbWVsaW5lRGlzcGxheSI6ImFsbF9taWxlc3RvbmVzIiwiZmlsdGVycyI6e30sIm93bmVyIjoibnV4dCIsIm5hbWUiOiJ1aSJ9'
+
+const src = computed(() => `https://volta.net/embed/${token}?theme=${colorMode.value}&gray=${appConfig.ui.gray}&primary=${appConfig.ui.primary}`)
+</script>
+
+<template>
+  <div class="h-[calc(100vh-var(--header-height)-var(--header-height)-1px)]">
+    <ClientOnly>
+      <iframe :src="src" width="100%" height="100%" />
+    </ClientOnly>
+  </div>
+</template>