diff --git a/package.json b/package.json
index af88245d..19a71493 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "prepare": "simple-git-hooks",
     "test": "vitest --environment jsdom",
     "play": "turbo dev --filter=./packages/playground/basic",
+    "play:applet": "turbo dev --filter=./packages/playground/applet",
     "play:ui": "turbo dev --filter=./packages/playground/ui",
     "play:multi-app": "turbo dev --filter=./packages/playground/multi-app",
     "play:webpack": "turbo dev --filter=./packages/playground/webpack",
diff --git a/packages/playground/applet/package.json b/packages/playground/applet/package.json
index 536152e3..6a3bb583 100644
--- a/packages/playground/applet/package.json
+++ b/packages/playground/applet/package.json
@@ -6,6 +6,7 @@
     "dev": "vite"
   },
   "dependencies": {
+    "@iconify/json": "^2.2.191",
     "@vueuse/core": "^10.7.2",
     "pinia": "^2.1.7",
     "unplugin-auto-import": "^0.17.5",
@@ -15,6 +16,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.3",
     "@vue/devtools-applet": "workspace:*",
+    "@vue/devtools-core": "workspace:*",
     "@vue/devtools-kit": "workspace:*",
     "sass": "^1.70.0",
     "serve": "^14.2.1",
diff --git a/packages/playground/applet/src/App.vue b/packages/playground/applet/src/App.vue
index 69f17b12..e49c099c 100644
--- a/packages/playground/applet/src/App.vue
+++ b/packages/playground/applet/src/App.vue
@@ -1,14 +1,67 @@
 <script setup lang="ts">
-import { useColorMode } from '@vueuse/core'
+import { useColorMode, useDark } from '@vueuse/core'
 import { Pinia } from '@vue/devtools-applet'
+import '@vue/devtools-applet/style.css'
+import { HandShakeServer, getDevToolsState, initDevToolsSeparateWindow, initDevToolsSeparateWindowBridge, onDevToolsStateUpdated, setupDevToolsBridge } from '@vue/devtools-core'
+import { useCounterStore } from './stores'
+
+const isDark = useDark()
+// user app
+const counterStore = useCounterStore()
+
+// devtools
+const appConnected = ref(false)
+const clientConnected = ref(false)
+const connected = computed(() => appConnected.value && clientConnected.value)
+
+initDevToolsSeparateWindow({
+  onConnected(channel) {
+    const bridge = initDevToolsSeparateWindowBridge(channel)
+    setupDevToolsBridge(bridge)
+    new HandShakeServer(bridge).onnConnect().then(() => {
+      bridge.emit('devtools:client-ready')
+      initVueDevToolsState()
+    })
+    bridge.on('disconnect', () => {
+      channel.close()
+      initDevToolsSeparateWindow()
+    })
+  },
+})
+
+function initVueDevToolsState() {
+  getDevToolsState().then((data) => {
+    if (data)
+      return
+    appConnected.value = data!.connected
+    clientConnected.value = data!.clientConnected
+  })
+
+  onDevToolsStateUpdated((data) => {
+    if (!data)
+      return
+    appConnected.value = data!.connected
+    clientConnected.value = data!.clientConnected
+  })
+}
 
 useColorMode()
 </script>
 
 <template>
   <div class="h-screen w-screen flex flex-col items-center justify-center">
+    <div i-carbon-sun dark:i-carbon-moon translate-y--1px @click="isDark = !isDark" />
+
+    <div select-none>
+      Count:{{ counterStore.count }}
+      <span @click="counterStore.increment">➕</span>
+      <span @click="counterStore.decrement">➖</span>
+    </div>
     <div h-150 w-200 border="1 green solid">
-      <Pinia />
+      <Pinia v-if="connected" />
+      <div v-else class="h-full flex items-center justify-center">
+        Connecting...
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/playground/applet/src/main.ts b/packages/playground/applet/src/main.ts
index 4f663754..29b17cb9 100644
--- a/packages/playground/applet/src/main.ts
+++ b/packages/playground/applet/src/main.ts
@@ -1,8 +1,12 @@
+import { createPinia } from 'pinia'
 import App from './App.vue'
 
 import './style.css'
 import 'uno.css'
 import '@vue/devtools-applet/style.css'
 
+const pinia = createPinia()
 const app = createApp(App)
+app.use(pinia)
+
 app.mount('#app')
diff --git a/packages/playground/applet/src/stores/index.ts b/packages/playground/applet/src/stores/index.ts
new file mode 100644
index 00000000..6074f807
--- /dev/null
+++ b/packages/playground/applet/src/stores/index.ts
@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+export const useAppStore = defineStore('app', () => {
+  const count = ref(120)
+  const map = ref(new Map([['a', 1], ['b', 2]]))
+  const set = ref(new Set([1, 2, 3]))
+  function increment() {
+    count.value++
+  }
+  const doubledCount = computed(() => count.value * 2)
+
+  return { count, doubledCount, increment, map, set }
+})
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(10)
+  const name = ref('webfansplz!!!')
+  function increment() {
+    count.value++
+  }
+  function decrement() {
+    count.value--
+  }
+
+  return { count, name, increment, decrement }
+})
diff --git a/packages/playground/applet/uno.config.ts b/packages/playground/applet/uno.config.ts
index b1d9fa57..319b9b86 100644
--- a/packages/playground/applet/uno.config.ts
+++ b/packages/playground/applet/uno.config.ts
@@ -1,6 +1,7 @@
 import {
   defineConfig,
   presetAttributify,
+  presetIcons,
   presetTypography,
   presetUno,
   transformerDirectives,
@@ -12,6 +13,12 @@ export default defineConfig({
     presetUno(),
     presetAttributify(),
     presetTypography(),
+    presetIcons({
+      prefix: ['i-', ''],
+      collections: {},
+      cdn: 'https://esm.sh/',
+      scale: 1.2,
+    }),
   ],
   transformers: [
     transformerDirectives(),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f8a997d4..cdb7b85d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -459,6 +459,9 @@ importers:
 
   packages/playground/applet:
     dependencies:
+      '@iconify/json':
+        specifier: ^2.2.191
+        version: 2.2.191
       '@vueuse/core':
         specifier: ^10.7.2
         version: 10.9.0(vue@3.4.21)
@@ -481,6 +484,9 @@ importers:
       '@vue/devtools-applet':
         specifier: workspace:*
         version: link:../../applet
+      '@vue/devtools-core':
+        specifier: workspace:*
+        version: link:../../core
       '@vue/devtools-kit':
         specifier: workspace:*
         version: link:../../devtools-kit
@@ -3079,7 +3085,6 @@ packages:
     dependencies:
       '@iconify/types': 2.0.0
       pathe: 1.1.2
-    dev: true
 
   /@iconify/types@2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}