diff --git a/package.json b/package.json
index 3b47efd4..c61d75df 100644
--- a/package.json
+++ b/package.json
@@ -32,11 +32,13 @@
     "@iconify-json/fluent": "catalog:icons",
     "@iconify-json/fluent-emoji-flat": "catalog:icons",
     "@iconify-json/logos": "catalog:icons",
+    "@iconify-json/material-icon-theme": "catalog:icons",
     "@iconify-json/octicon": "catalog:icons",
     "@iconify-json/ph": "catalog:icons",
     "@iconify-json/ri": "catalog:icons",
     "@iconify-json/simple-icons": "catalog:icons",
     "@iconify-json/svg-spinners": "catalog:icons",
+    "@iconify-json/system-uicons": "catalog:icons",
     "@iconify-json/tabler": "catalog:icons",
     "@nuxt/devtools": "catalog:devtools",
     "@nuxt/eslint": "catalog:devtools",
diff --git a/packages/vite/package.json b/packages/vite/package.json
index e868c4df..5a430b30 100644
--- a/packages/vite/package.json
+++ b/packages/vite/package.json
@@ -39,6 +39,7 @@
     "@vitejs/devtools-kit": "workspace:*",
     "@vitejs/devtools-rpc": "workspace:*",
     "birpc": "catalog:deps",
+    "envinfo": "catalog:deps",
     "get-port-please": "catalog:deps",
     "h3": "catalog:deps",
     "ohash": "catalog:deps",
@@ -48,6 +49,7 @@
     "ws": "catalog:deps"
   },
   "devDependencies": {
+    "@types/envinfo": "catalog:types",
     "@unocss/nuxt": "catalog:build",
     "@vueuse/core": "catalog:frontend",
     "@vueuse/nuxt": "catalog:build",
diff --git a/packages/vite/src/app/app.vue b/packages/vite/src/app/app.vue
index 0157e029..41afe9fe 100644
--- a/packages/vite/src/app/app.vue
+++ b/packages/vite/src/app/app.vue
@@ -1,21 +1,41 @@
 <script setup lang="ts">
 import { useHead } from '#app/composables/head'
+import PanelSideNav from '@vitejs/devtools-ui/components/PanelSideNav.vue'
+import { useSideNav } from '@vitejs/devtools-ui/composables/nav'
+import { connect, rpcConnectionState } from './composables/rpc'
 import './styles/global.css'
 import '@vitejs/devtools-ui/composables/dark'
+import 'floating-vue/dist/style.css'
 
 useHead({
   title: 'Vite DevTools',
 })
 
-const connected = false
+connect()
+
+useSideNav(() => {
+  return [
+    {
+      title: 'Home',
+      icon: 'i-ph-house-duotone',
+      to: '/home',
+    },
+  ]
+})
 </script>
 
 <template>
+  <div v-if="rpcConnectionState.error" text-red>
+    {{ rpcConnectionState.error }}
+  </div>
   <VisualLoading
-    v-if="!connected"
-    text="Coming Soon..."
+    v-else-if="!rpcConnectionState.connected"
+    text="Connecting..."
   />
-  <div v-else h-vh>
-    <NuxtPage />
+  <div v-else grid="~ cols-[max-content_1fr]" h-screen w-screen max-w-screen max-h-screen of-hidden>
+    <PanelSideNav />
+    <div of-auto h-screen max-h-screen relative>
+      <NuxtPage />
+    </div>
   </div>
 </template>
diff --git a/packages/vite/src/app/pages/home.vue b/packages/vite/src/app/pages/home.vue
new file mode 100644
index 00000000..46ac10ed
--- /dev/null
+++ b/packages/vite/src/app/pages/home.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { useRpc } from '#imports'
+import { useAsyncState } from '@vueuse/core'
+import { computed } from 'vue'
+
+const rpc = useRpc()
+const { state, isLoading } = useAsyncState(
+  async () => {
+    const [metadata, envInfo] = await Promise.all([
+      rpc.value.call(
+        'vite:meta-info',
+      ),
+      rpc.value.call(
+        'vite:env-info',
+      ),
+    ])
+
+    return {
+      metadata,
+      envInfo,
+    }
+  },
+  null,
+)
+
+const projectMetadata = computed(() => state.value?.metadata)
+const environmentMetadata = computed(() => state.value?.envInfo)
+
+const metadata = computed(() => [
+  {
+    id: 'project',
+    icon: 'i-material-icon-theme:vite',
+    rows: [
+      {
+        id: 'root',
+        icon: 'i-ph-folder-duotone',
+        label: 'Root',
+        value: projectMetadata.value?.root,
+      },
+      {
+        id: 'base',
+        icon: 'i-ph-folder-duotone',
+        label: 'Base',
+        value: projectMetadata.value?.base,
+      },
+      {
+        id: 'plugins',
+        icon: 'i-ph-plugs-duotone',
+        label: 'Plugins',
+        value: projectMetadata.value?.plugins.length ?? 0,
+      },
+    ],
+  },
+  {
+    id: 'system',
+    icon: 'i-ph:desktop',
+    rows: [
+      {
+        id: 'os',
+        icon: 'i-ph-folder-duotone',
+        label: 'OS',
+        value: environmentMetadata.value?.os,
+      },
+      {
+        id: 'cpu',
+        icon: 'i-ph:cpu',
+        label: 'CPU',
+        value: environmentMetadata.value?.cpu,
+      },
+      {
+        id: 'memory',
+        icon: 'i-ph:memory',
+        label: 'Memory',
+        value: environmentMetadata.value?.memory,
+      },
+    ],
+  },
+  {
+    id: 'runtime',
+    icon: 'i-system-uicons:version',
+    rows: [
+      {
+        id: 'node',
+        icon: 'i-ri:nodejs-fill',
+        label: 'Node',
+        value: environmentMetadata.value?.node,
+      },
+      {
+        id: 'npm',
+        icon: 'i-ri:npmjs-fill',
+        label: 'NPM',
+        value: environmentMetadata.value?.npm,
+      },
+      {
+        id: 'pnpm',
+        icon: 'i-catppuccin:pnpm',
+        label: 'PNPM',
+        value: environmentMetadata.value?.pnpm,
+      },
+      {
+        id: 'yarn',
+        icon: 'i-catppuccin:yarn',
+        label: 'Yarn',
+        value: environmentMetadata.value?.yarn,
+      },
+    ],
+  },
+])
+</script>
+
+<template>
+  <VisualLoading
+    v-if="isLoading"
+    text="Connecting..."
+  />
+  <div v-else p4 flex="~ col gap-4" items-center justify-center relative>
+    <VisualLogoBanner />
+
+    <div border="~ base rounded" p2 flex="~ col gap-4 justify-center">
+      <div
+        v-for="section in metadata"
+        :key="section.id"
+        p4
+        flex="~ gap-14 items-center"
+      >
+        <div class="text-3xl flex ml3" :class="section.icon" />
+        <div>
+          <div
+            v-for="row in section.rows"
+            :key="row.id"
+            grid="~ cols-[max-content_80px_2fr] gap-2 items-center"
+          >
+            <div :class="row.icon" />
+            <div>
+              {{ row.label }}
+            </div>
+            <div font-mono>
+              {{ row.value }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/vite/src/app/pages/index.vue b/packages/vite/src/app/pages/index.vue
index ce65592a..4ec001bf 100644
--- a/packages/vite/src/app/pages/index.vue
+++ b/packages/vite/src/app/pages/index.vue
@@ -1,7 +1,9 @@
+<script lang="ts" setup>
+import { navigateTo } from '#app/composables/router'
+
+navigateTo('/home')
+</script>
+
 <template>
-  <div p10 flex="~ col" items-center justify-center>
-    <h1 text-2xl font-bold>
-      Vite DevTools
-    </h1>
-  </div>
+  <div p10 flex="~ col" items-center justify-center />
 </template>
diff --git a/packages/vite/src/app/plugins/floating-vue.ts b/packages/vite/src/app/plugins/floating-vue.ts
new file mode 100644
index 00000000..f7e80c47
--- /dev/null
+++ b/packages/vite/src/app/plugins/floating-vue.ts
@@ -0,0 +1,8 @@
+import { defineNuxtPlugin } from '#app/nuxt'
+import FloatingVue from 'floating-vue'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(FloatingVue, {
+    overflowPadding: 20,
+  })
+})
diff --git a/packages/vite/src/node/rpc/functions/hi.ts b/packages/vite/src/node/rpc/functions/hi.ts
deleted file mode 100644
index 4b1df426..00000000
--- a/packages/vite/src/node/rpc/functions/hi.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { defineRpcFunction } from '@vitejs/devtools-kit'
-
-export const viteHi = defineRpcFunction({
-  name: 'vite:hi',
-  type: 'query',
-  setup: (context) => {
-    return {
-      handler: async () => {
-        return {
-          message: 'Hi from server.',
-          cwd: context.cwd,
-          timestamp: Date.now(),
-        }
-      },
-    }
-  },
-})
diff --git a/packages/vite/src/node/rpc/functions/vite-env-info.ts b/packages/vite/src/node/rpc/functions/vite-env-info.ts
new file mode 100644
index 00000000..c7edd722
--- /dev/null
+++ b/packages/vite/src/node/rpc/functions/vite-env-info.ts
@@ -0,0 +1,33 @@
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+
+export const viteEnvInfo = defineRpcFunction({
+  name: 'vite:env-info',
+  type: 'query',
+  setup: () => {
+    return {
+      handler: async () => {
+        const { default: { helpers } } = await import('envinfo')
+
+        const [cpu, os, memory, node, npm, pnpm, yarn] = await Promise.all([
+          helpers.getCPUInfo().then(([,res]) => res),
+          helpers.getOSInfo().then(([,res]) => res),
+          helpers.getMemoryInfo().then(([,res]) => res),
+          helpers.getNodeInfo().then(([,res]) => res),
+          helpers.getnpmInfo().then(([,res]) => res),
+          helpers.getpnpmInfo().then(([,res]) => res),
+          helpers.getYarnInfo().then(([,res]) => res),
+        ])
+
+        return {
+          cpu,
+          os,
+          memory,
+          node,
+          npm,
+          pnpm,
+          yarn,
+        }
+      },
+    }
+  },
+})
diff --git a/packages/vite/src/node/rpc/functions/vite-meta-info.ts b/packages/vite/src/node/rpc/functions/vite-meta-info.ts
new file mode 100644
index 00000000..dcba5d21
--- /dev/null
+++ b/packages/vite/src/node/rpc/functions/vite-meta-info.ts
@@ -0,0 +1,19 @@
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+
+export const viteMetaInfo = defineRpcFunction({
+  name: 'vite:meta-info',
+  type: 'query',
+  setup: (context) => {
+    return {
+      handler: async () => {
+        const { root, base, plugins } = context.viteConfig
+
+        return {
+          root,
+          base,
+          plugins: plugins.map(p => p.name),
+        }
+      },
+    }
+  },
+})
diff --git a/packages/vite/src/node/rpc/index.ts b/packages/vite/src/node/rpc/index.ts
index 7f08436b..b68ece44 100644
--- a/packages/vite/src/node/rpc/index.ts
+++ b/packages/vite/src/node/rpc/index.ts
@@ -1,9 +1,11 @@
 import type { RpcDefinitionsToFunctions } from '@vitejs/devtools-kit'
-import { viteHi } from './functions/hi'
+import { viteEnvInfo } from './functions/vite-env-info'
+import { viteMetaInfo } from './functions/vite-meta-info'
 import '@vitejs/devtools-kit'
 
 export const rpcFunctions = [
-  viteHi,
+  viteMetaInfo,
+  viteEnvInfo,
 ] as const
 
 export type ServerFunctions = RpcDefinitionsToFunctions<typeof rpcFunctions>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 75675bc8..30b1e887 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -52,6 +52,9 @@ catalogs:
     diff:
       specifier: ^8.0.3
       version: 8.0.3
+    envinfo:
+      specifier: ^7.21.0
+      version: 7.21.0
     get-port-please:
       specifier: ^3.2.0
       version: 3.2.0
@@ -272,6 +275,9 @@ catalogs:
     '@iconify-json/logos':
       specifier: ^1.2.10
       version: 1.2.10
+    '@iconify-json/material-icon-theme':
+      specifier: ^1.2.54
+      version: 1.2.54
     '@iconify-json/octicon':
       specifier: ^1.2.21
       version: 1.2.21
@@ -287,6 +293,9 @@ catalogs:
     '@iconify-json/svg-spinners':
       specifier: ^1.2.4
       version: 1.2.4
+    '@iconify-json/system-uicons':
+      specifier: ^1.2.4
+      version: 1.2.4
     '@iconify-json/tabler':
       specifier: ^1.2.31
       version: 1.2.31
@@ -336,6 +345,9 @@ catalogs:
     '@types/diff':
       specifier: ^8.0.0
       version: 8.0.0
+    '@types/envinfo':
+      specifier: ^7.8.4
+      version: 7.8.4
     '@types/react':
       specifier: ^19.2.14
       version: 19.2.14
@@ -401,6 +413,9 @@ importers:
       '@iconify-json/logos':
         specifier: catalog:icons
         version: 1.2.10
+      '@iconify-json/material-icon-theme':
+        specifier: catalog:icons
+        version: 1.2.54
       '@iconify-json/octicon':
         specifier: catalog:icons
         version: 1.2.21
@@ -416,6 +431,9 @@ importers:
       '@iconify-json/svg-spinners':
         specifier: catalog:icons
         version: 1.2.4
+      '@iconify-json/system-uicons':
+        specifier: catalog:icons
+        version: 1.2.4
       '@iconify-json/tabler':
         specifier: catalog:icons
         version: 1.2.31
@@ -907,6 +925,9 @@ importers:
       birpc:
         specifier: catalog:deps
         version: 4.0.0
+      envinfo:
+        specifier: catalog:deps
+        version: 7.21.0
       get-port-please:
         specifier: catalog:deps
         version: 3.2.0
@@ -929,6 +950,9 @@ importers:
         specifier: catalog:deps
         version: 8.19.0
     devDependencies:
+      '@types/envinfo':
+        specifier: catalog:types
+        version: 7.8.4
       '@unocss/nuxt':
         specifier: catalog:build
         version: 66.6.6(magicast@0.5.2)(vite@8.0.0-beta.18(@types/node@25.0.3)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.104.1(esbuild@0.27.3))
@@ -1547,6 +1571,9 @@ packages:
   '@iconify-json/logos@1.2.10':
     resolution: {integrity: sha512-qxaXKJ6fu8jzTMPQdHtNxlfx6tBQ0jXRbHZIYy5Ilh8Lx9US9FsAdzZWUR8MXV8PnWTKGDFO4ZZee9VwerCyMA==}
 
+  '@iconify-json/material-icon-theme@1.2.54':
+    resolution: {integrity: sha512-m5GpLcWICmtaLntgaSbQBWYzzScp2wQIBj0I/9ak2xUFXWxQUws42mZGWRA5W5e1Nn7DsyyMYVBgisnnCQSlhA==}
+
   '@iconify-json/octicon@1.2.21':
     resolution: {integrity: sha512-iMW8IT7suHRKVcHnci9wHKY79LU9mQ4rCAcVgKQQsI5SHoBi0r6z0leOXrI/oRCGJDiJDy9cLqweF3C5wSnm0A==}
 
@@ -1556,15 +1583,15 @@ packages:
   '@iconify-json/ri@1.2.10':
     resolution: {integrity: sha512-WWMhoncVVM+Xmu9T5fgu2lhYRrKTEWhKk3Com0KiM111EeEsRLiASjpsFKnC/SrB6covhUp95r2mH8tGxhgd5Q==}
 
-  '@iconify-json/simple-icons@1.2.72':
-    resolution: {integrity: sha512-wkcixntHvaCoqPqerGrNFcHQ3Yx1ux4ZkhscCDK0DEHpP62XCH+cxq1HTsRjbUiQl/M9K8bj03HF6Wgn5iE2rQ==}
-
   '@iconify-json/simple-icons@1.2.73':
     resolution: {integrity: sha512-nQZTwul4c2zBqH/aLP4zMOiElj93T6HawbrP+sFQKpxmBdS5x1duCK3cAnkj6dntHz84EYkzaQRM83V2pj4qxA==}
 
   '@iconify-json/svg-spinners@1.2.4':
     resolution: {integrity: sha512-ayn0pogFPwJA1WFZpDnoq9/hjDxN+keeCMyThaX4d3gSJ3y0mdKUxIA/b1YXWGtY9wVtZmxwcvOIeEieG4+JNg==}
 
+  '@iconify-json/system-uicons@1.2.4':
+    resolution: {integrity: sha512-9WB9dmEm+TRCXI5Ml2IY8zQAPZES8euKxY0VOaf8D6E6ZaEr7ztO6DChMlGg7qWECs3m3FjFUqNgBx8ZpB+djw==}
+
   '@iconify-json/tabler@1.2.31':
     resolution: {integrity: sha512-Jfcw5TpGhfKKWyz1dGk7e79zIgDmpMKNYL0bjt17sURBPifAxowQcWAzcEhuiWU7FGXUM2NT6UhvACFZp7Hnjw==}
 
@@ -3074,6 +3101,9 @@ packages:
     resolution: {integrity: sha512-o7jqJM04gfaYrdCecCVMbZhNdG6T1MHg/oQoRFdERLV+4d+V7FijhiEAbFu0Usww84Yijk9yH58U4Jk4HbtzZw==}
     deprecated: This is a stub types definition. diff provides its own type definitions, so you do not need this installed.
 
+  '@types/envinfo@7.8.4':
+    resolution: {integrity: sha512-K5WaRgSlqjc408IyPbxOFnz7rVG9E8ELhj7XR3Ncui15EgeyIXTcCfmwrRnU4uEOCJQhzZRAQurYznEEc1dD2g==}
+
   '@types/eslint-scope@3.7.7':
     resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
 
@@ -4650,6 +4680,11 @@ packages:
     resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
     engines: {node: '>=0.12'}
 
+  envinfo@7.21.0:
+    resolution: {integrity: sha512-Lw7I8Zp5YKHFCXL7+Dz95g4CcbMEpgvqZNNq3AmlT5XAV6CgAAk6gyAMqn2zjw08K9BHfcNuKrMiCPLByGafow==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   error-ex@1.3.4:
     resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
 
@@ -8438,6 +8473,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/material-icon-theme@1.2.54':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/octicon@1.2.21':
     dependencies:
       '@iconify/types': 2.0.0
@@ -8450,15 +8489,15 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify-json/simple-icons@1.2.72':
+  '@iconify-json/simple-icons@1.2.73':
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify-json/simple-icons@1.2.73':
+  '@iconify-json/svg-spinners@1.2.4':
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify-json/svg-spinners@1.2.4':
+  '@iconify-json/system-uicons@1.2.4':
     dependencies:
       '@iconify/types': 2.0.0
 
@@ -10063,6 +10102,8 @@ snapshots:
     dependencies:
       diff: 8.0.3
 
+  '@types/envinfo@7.8.4': {}
+
   '@types/eslint-scope@3.7.7':
     dependencies:
       '@types/eslint': 9.6.1
@@ -11852,6 +11893,8 @@ snapshots:
 
   entities@7.0.1: {}
 
+  envinfo@7.21.0: {}
+
   error-ex@1.3.4:
     dependencies:
       is-arrayish: 0.2.1
@@ -15437,7 +15480,7 @@ snapshots:
       '@docsearch/css': 4.5.4
       '@docsearch/js': 4.5.4
       '@docsearch/sidepanel-js': 4.5.4
-      '@iconify-json/simple-icons': 1.2.72
+      '@iconify-json/simple-icons': 1.2.73
       '@shikijs/core': 3.22.0
       '@shikijs/transformers': 3.21.0
       '@shikijs/types': 3.22.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 1cca2e09..c6ad43b6 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -37,6 +37,7 @@ catalogs:
     birpc: ^4.0.0
     cac: ^7.0.0
     diff: ^8.0.3
+    envinfo: ^7.21.0
     get-port-please: ^3.2.0
     h3: ^1.15.6
     immer: ^11.1.4
@@ -115,11 +116,13 @@ catalogs:
     '@iconify-json/fluent': ^1.2.40
     '@iconify-json/fluent-emoji-flat': ^1.2.5
     '@iconify-json/logos': ^1.2.10
+    '@iconify-json/material-icon-theme': ^1.2.54
     '@iconify-json/octicon': ^1.2.21
     '@iconify-json/ph': ^1.2.2
     '@iconify-json/ri': ^1.2.10
     '@iconify-json/simple-icons': ^1.2.73
     '@iconify-json/svg-spinners': ^1.2.4
+    '@iconify-json/system-uicons': ^1.2.4
     '@iconify-json/tabler': ^1.2.31
   inlined:
     '@antfu/utils': ^9.3.0
@@ -143,6 +146,7 @@ catalogs:
     '@types/d3': ^7.4.3
     '@types/d3-hierarchy': ^3.1.7
     '@types/diff': ^8.0.0
+    '@types/envinfo': ^7.8.4
     '@types/react': ^19.2.14
     '@types/react-dom': ^19.2.3
     '@types/split2': ^4.2.3