diff --git a/packages/client/client/plugins/router.ts b/packages/client/client/plugins/router.ts
index 5ea1b92..c098490 100644
--- a/packages/client/client/plugins/router.ts
+++ b/packages/client/client/plugins/router.ts
@@ -17,7 +17,7 @@ declare module '../context' {
   interface Context {
     $router: RouterService
     slot(options: SlotOptions): () => void
-    page(options: Activity.Options): () => void
+    page(options: Activity.Options): Activity
   }
 
   interface Events {
@@ -166,8 +166,7 @@ export default class RouterService extends Service {
     const caller = this[Context.current]
     options.component = caller.wrapComponent(options.component)
     return caller.effect(() => {
-      const activity = new Activity(caller, options)
-      return () => activity.dispose()
+      return new Activity(caller, options)
     })
   }
 }
diff --git a/plugins/manager/client/components/forks.vue b/plugins/manager/client/components/forks.vue
index 55f8bb3..19524f4 100644
--- a/plugins/manager/client/components/forks.vue
+++ b/plugins/manager/client/components/forks.vue
@@ -1,16 +1,16 @@
 <template>
   <el-dialog
-    :model-value="!!dialogFork"
-    @update:model-value="dialogFork = undefined"
+    :model-value="!!ctx.manager.dialogFork"
+    @update:model-value="ctx.manager.dialogFork = undefined"
     class="dialog-config-fork"
     destroy-on-close>
     <template #header="{ titleId, titleClass }">
       <span :id="titleId" :class="titleClass">
-        {{ dialogFork + (local?.workspace ? ' (工作区)' : '') }}
+        {{ ctx.manager.dialogFork + (local?.workspace ? ' (工作区)' : '') }}
       </span>
     </template>
     <table>
-      <tr v-for="id in plugins.forks[dialogFork!]" :key="id">
+      <tr v-for="id in plugins.forks[ctx.manager.dialogFork!]" :key="id">
         <td class="text-left">
           <span class="status-light" :class="getStatusClass(plugins.entries[id].status)"></span>
           <span class="path">{{ getFullPath(plugins.entries[id]) }}</span>
@@ -25,8 +25,8 @@
     </table>
     <template #footer>
       <div class="left">
-        <template v-if="plugins.forks[dialogFork!]?.length">
-          此插件目前存在 {{ plugins.forks[dialogFork!]?.length }} 份配置。
+        <template v-if="plugins.forks[ctx.manager.dialogFork!]?.length">
+          此插件目前存在 {{ plugins.forks[ctx.manager.dialogFork!]?.length }} 份配置。
         </template>
         <template v-else>
           此插件尚未被配置。
@@ -48,12 +48,8 @@ import { EntryData } from '../../src'
 
 const ctx = useContext()
 const plugins = computed(() => ctx.manager.plugins.value)
-const dialogFork = computed({
-  get: () => ctx.manager.dialogFork.value,
-  set: (value) => ctx.manager.dialogFork.value = value,
-})
 
-const local = computed(() => ctx.manager.data.value.packages[dialogFork.value!])
+const local = computed(() => ctx.manager.data.value.packages[ctx.manager.dialogFork!])
 
 function getLabel(data: EntryData) {
   return `${data.label ? `${data.label} ` : ''}[${data.id}]`
@@ -71,12 +67,12 @@ function getFullPath(data: EntryData) {
 async function configure(id?: string) {
   if (!id) {
     id = await send('manager.config.create', {
-      name: dialogFork.value!,
+      name: ctx.manager.dialogFork!,
       disabled: true,
     })
   }
   await router.push('/plugins/' + id)
-  dialogFork.value = undefined
+  ctx.manager.dialogFork = undefined
 }
 
 </script>
diff --git a/plugins/manager/client/components/index.vue b/plugins/manager/client/components/index.vue
index 1be8c36..97060d7 100644
--- a/plugins/manager/client/components/index.vue
+++ b/plugins/manager/client/components/index.vue
@@ -11,7 +11,7 @@
 
       <!-- plugin -->
       <template v-else>
-        {{ current.label || current.name }} [{{ current.id }}]
+        {{ current.label || current.name }}
       </template>
     </template>
 
@@ -89,15 +89,11 @@ const ctx = useContext()
 const current = computed(() => ctx.manager.current.value)
 const plugins = computed(() => ctx.manager.plugins.value)
 
-const dialogFork = computed({
-  get: () => ctx.manager.dialogFork.value,
-  set: (value) => ctx.manager.dialogFork.value = value,
-})
-
 const path = computed<string>({
   get() {
-    const name = route.path.slice(9)
-    return name in plugins.value.entries ? name : ''
+    if (!route.path.startsWith('/plugins/')) return ''
+    if (typeof route.params.id !== 'string') return ''
+    return route.params.id in plugins.value.entries ? route.params.id : ''
   },
   set(name) {
     if (!(name in plugins.value.entries)) name = ''
@@ -139,7 +135,7 @@ ctx.define('config.tree', ctx.manager.current)
 
 ctx.action('config.tree.add-plugin', {
   hidden: ({ config }) => config.tree && !config.tree.isGroup,
-  action: ({ config }) => ctx.manager.dialogSelect.value = config.tree,
+  action: ({ config }) => ctx.manager.dialogSelect = config.tree,
 })
 
 ctx.action('config.tree.add-group', {
@@ -176,7 +172,7 @@ ctx.action('config.tree.clone', {
 ctx.action('config.tree.manage', {
   hidden: ({ config }) => !config.tree || !!config.tree.isGroup,
   action: async ({ config }) => {
-    dialogFork.value = config.tree.name
+    ctx.manager.dialogFork = config.tree.name
   },
 })
 
diff --git a/plugins/manager/client/components/plugin.vue b/plugins/manager/client/components/plugin.vue
index 5aebd6d..01bbb0d 100644
--- a/plugins/manager/client/components/plugin.vue
+++ b/plugins/manager/client/components/plugin.vue
@@ -6,75 +6,9 @@
     <k-comment v-else-if="local.runtime.failed" type="danger">
       <p>插件加载失败，这可能是插件本身的问题所致。{{ hint }}</p>
     </k-comment>
-
-    <k-slot v-else name="plugin-details">
-      <!-- dependency -->
-      <k-slot-item :order="800">
-        <k-slot name="plugin-dependency" single>
-          <k-comment
-            v-for="({ required, provider }, name) in env.using" :key="name"
-            :type="provider ? 'success' : required ? 'warning' : 'primary'">
-            <p>
-              {{ required ? '必需' : '可选' }}服务：{{ name }}
-              <template v-if="provider">
-                (<span :class="{ 'k-link': provider.length }" @click="gotoProvider(provider)">已加载</span>)
-              </template>
-              <template v-else>(未加载)</template>
-            </p>
-          </k-comment>
-        </k-slot>
-      </k-slot-item>
-
-      <!-- implements -->
-      <k-slot-item :order="600">
-        <template v-for="name in env.impl" :key="name">
-          <k-comment v-if="name in data.services && current.disabled" type="warning">
-            <p>此插件将会提供 {{ name }} 服务，但此服务已被其他插件实现。</p>
-          </k-comment>
-          <k-comment v-else :type="current.disabled ? 'primary' : 'success'">
-            <p>此插件{{ current.disabled ? '启用后将会提供' : '提供了' }} {{ name }} 服务。</p>
-          </k-comment>
-        </template>
-      </k-slot-item>
-
-      <!-- reusability -->
-      <k-slot-item :order="400">
-        <k-comment v-if="local.runtime.id && !local.runtime.forkable && current.disabled" type="warning">
-          <p>此插件已在运行且不可重用，启用可能会导致非预期的问题。</p>
-        </k-comment>
-        <k-comment v-if="plugins.forks[current.name]?.length > 1" type="primary">
-          <p>此插件存在多份配置，<span class="k-link" @click.stop="dialogFork = current.name">点击前往管理</span>。</p>
-        </k-comment>
-      </k-slot-item>
-
-      <!-- implements -->
-      <k-slot-item :order="300">
-        <template v-for="(activity, key) in ctx.$router.pages" :key="key">
-          <k-comment type="success" v-if="activity.ctx.$entry?.paths.includes(current.id) && !activity.disabled()">
-            <p>
-              <span>此插件提供了页面：</span>
-              <k-activity-link :id="activity.id" />
-            </p>
-          </k-comment>
-        </template>
-      </k-slot-item>
-
-      <!-- usage -->
-      <k-slot-item :order="-200" v-if="local.runtime?.usage">
-        <k-markdown unsafe class="usage" :source="local.runtime?.usage"></k-markdown>
-      </k-slot-item>
-
-      <!-- modifier -->
-      <k-slot-item :order="-600">
-      </k-slot-item>
-
-      <!-- config -->
-      <k-slot-item :order="-1000">
-        <k-form v-if="local.runtime.schema" :schema="local.runtime.schema" :initial="current!.config" v-model="config">
-          <template #hint>{{ hint }}</template>
-        </k-form>
-      </k-slot-item>
-    </k-slot>
+    <template v-else>
+      <router-view></router-view>
+    </template>
   </template>
 
   <template v-else>
@@ -88,7 +22,7 @@
 
 <script lang="ts" setup>
 
-import { send, router, useContext, useRpc } from '@cordisjs/client'
+import { send, useContext, useRpc } from '@cordisjs/client'
 import { computed, provide, watch } from 'vue'
 import { Data } from '../../src'
 
@@ -104,11 +38,6 @@ const data = useRpc<Data>()
 const current = computed(() => ctx.manager.current.value)
 const plugins = computed(() => ctx.manager.plugins.value)
 
-const dialogFork = computed({
-  get: () => ctx.manager.dialogFork.value,
-  set: (value) => ctx.manager.dialogFork.value = value,
-})
-
 const config = computed({
   get: () => props.modelValue,
   set: value => emit('update:modelValue', value),
@@ -127,23 +56,8 @@ provide('manager.settings.local', local)
 provide('manager.settings.config', config)
 provide('manager.settings.current', current)
 
-function gotoProvider(provider: string[]) {
-  if (!provider.length) return
-  router.push('/plugins/' + provider[0])
-}
-
 </script>
 
 <style lang="scss">
 
-.plugin-view {
-  .markdown.usage {
-    margin-bottom: 2rem;
-
-    h2 {
-      font-size: 1.25rem;
-    }
-  }
-}
-
 </style>
diff --git a/plugins/manager/client/components/select.vue b/plugins/manager/client/components/select.vue
index a1debbf..6df2c54 100644
--- a/plugins/manager/client/components/select.vue
+++ b/plugins/manager/client/components/select.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dialog
-    :modelValue="!!dialogSelect"
-    @update:modelValue="dialogSelect = undefined"
+    :modelValue="!!ctx.manager.dialogSelect"
+    @update:modelValue="ctx.manager.dialogSelect = undefined"
     class="plugin-select"
   >
     <template #header>
@@ -44,11 +44,6 @@ import type { LocalObject } from '@cordisjs/registry'
 const ctx = useContext()
 const tt = useI18nText()
 
-const dialogSelect = computed({
-  get: () => ctx.manager.dialogSelect.value,
-  set: (value) => ctx.manager.dialogSelect.value = value,
-})
-
 const keyword = ref('')
 const input = ref()
 
@@ -62,8 +57,8 @@ function joinName(name: string, base: string) {
 }
 
 async function configure(name: string) {
-  const parent = dialogSelect.value!.id
-  dialogSelect.value = undefined
+  const parent = ctx.manager.dialogSelect!.id
+  ctx.manager.dialogSelect = undefined
   keyword.value = ''
   const id = await send('manager.config.create', {
     name,
@@ -73,7 +68,7 @@ async function configure(name: string) {
   router.push('/plugins/' + id)
 }
 
-watch(dialogSelect, async (value) => {
+watch(() => ctx.manager.dialogSelect, async (value) => {
   if (!value) return
   await nextTick()
   await input.value.focus()
diff --git a/plugins/manager/client/index.ts b/plugins/manager/client/index.ts
index b26c10e..2f74b11 100644
--- a/plugins/manager/client/index.ts
+++ b/plugins/manager/client/index.ts
@@ -4,6 +4,8 @@ import type { Data, EntryData } from '../src'
 import Settings from './components/index.vue'
 import Forks from './components/forks.vue'
 import Select from './components/select.vue'
+import Main from './routes/main.vue'
+import Config from './routes/config.vue'
 
 import './index.scss'
 import './icons'
@@ -44,9 +46,26 @@ export default class Manager extends Service {
     optional: ['manager'],
   }
 
+  #dialogFork = ref<string>()
+  #dialogSelect = ref<EntryData>()
+
+  get dialogFork() {
+    return this.#dialogFork.value
+  }
+
+  set dialogFork(value) {
+    this.#dialogFork.value = value
+  }
+
+  get dialogSelect() {
+    return this.#dialogSelect.value
+  }
+
+  set dialogSelect(value) {
+    this.#dialogSelect.value = value
+  }
+
   current = ref<EntryData>()
-  dialogFork = ref<string>()
-  dialogSelect = ref<EntryData>()
 
   plugins = computed(() => {
     const expanded: string[] = []
@@ -114,8 +133,8 @@ export default class Manager extends Service {
     })
 
     this.ctx.page({
-      id: 'config',
-      path: '/plugins/:name*',
+      id: 'plugins',
+      path: '/plugins/:id?',
       name: '插件配置',
       icon: 'activity:plugin',
       order: 800,
@@ -123,6 +142,20 @@ export default class Manager extends Service {
       component: Settings,
     })
 
+    this.ctx.page({
+      parent: 'plugins',
+      path: '',
+      name: '概览',
+      component: Main,
+    })
+
+    this.ctx.page({
+      parent: 'plugins',
+      path: 'config',
+      name: '配置',
+      component: Config,
+    })
+
     this.ctx.menu('config.tree', [{
       id: 'config.tree.toggle',
       type: ({ config }) => config.tree?.disabled ? '' : this.type.value,
@@ -174,7 +207,7 @@ export default class Manager extends Service {
     } else if (forks.length === 1) {
       if (!passive) router.push('/plugins/' + forks[0])
     } else {
-      if (!passive) this.dialogFork.value = name
+      if (!passive) this.dialogFork = name
     }
   }
 
diff --git a/plugins/manager/client/routes/config.vue b/plugins/manager/client/routes/config.vue
new file mode 100644
index 0000000..168634d
--- /dev/null
+++ b/plugins/manager/client/routes/config.vue
@@ -0,0 +1,29 @@
+<template>
+  <template v-if="current && local.runtime?.schema">
+    <k-form :schema="local.runtime.schema" :initial="current!.config" v-model="config">
+    </k-form>
+  </template>
+  <k-empty v-else>
+    当前插件未声明配置。
+  </k-empty>
+</template>
+
+<script lang="ts" setup>
+
+import { computed, ref, watch } from 'vue'
+import { clone, useContext, useRpc } from '@cordisjs/client'
+import { Data } from '../../src'
+
+const ctx = useContext()
+const data = useRpc<Data>()
+const config = ref()
+
+const current = computed(() => ctx.manager.current.value)
+const local = computed(() => data.value.packages[current.value?.name!])
+
+watch(current, (value) => {
+  if (!value) return
+  config.value = clone(value.config)
+}, { immediate: true })
+
+</script>
diff --git a/plugins/manager/client/routes/main.vue b/plugins/manager/client/routes/main.vue
new file mode 100644
index 0000000..d365c89
--- /dev/null
+++ b/plugins/manager/client/routes/main.vue
@@ -0,0 +1,95 @@
+<template>
+  <template v-if="current && local.runtime">
+    <k-slot name="plugin-details">
+      <!-- dependency -->
+      <k-slot-item :order="800">
+        <k-slot name="plugin-dependency" single>
+          <k-comment
+            v-for="({ required, provider }, name) in env.using" :key="name"
+            :type="provider ? 'success' : required ? 'warning' : 'primary'">
+            <p>
+              {{ required ? '必需' : '可选' }}服务：{{ name }}
+              <template v-if="provider">
+                (<span :class="{ 'k-link': provider.length }" @click="gotoProvider(provider)">已加载</span>)
+              </template>
+              <template v-else>(未加载)</template>
+            </p>
+          </k-comment>
+        </k-slot>
+      </k-slot-item>
+
+      <!-- implements -->
+      <k-slot-item :order="600">
+        <template v-for="name in env.impl" :key="name">
+          <k-comment v-if="name in data.services && current.disabled" type="warning">
+            <p>此插件将会提供 {{ name }} 服务，但此服务已被其他插件实现。</p>
+          </k-comment>
+          <k-comment v-else :type="current.disabled ? 'primary' : 'success'">
+            <p>此插件{{ current.disabled ? '启用后将会提供' : '提供了' }} {{ name }} 服务。</p>
+          </k-comment>
+        </template>
+      </k-slot-item>
+
+      <!-- reusability -->
+      <k-slot-item :order="400">
+        <k-comment v-if="local.runtime.id && !local.runtime.forkable && current.disabled" type="warning">
+          <p>此插件已在运行且不可重用，启用可能会导致非预期的问题。</p>
+        </k-comment>
+        <k-comment v-if="ctx.manager.plugins.value.forks[current.name]?.length > 1" type="primary">
+          <p>此插件存在多份配置，<span class="k-link" @click.stop="ctx.manager.dialogFork = current.name">点击前往管理</span>。</p>
+        </k-comment>
+      </k-slot-item>
+
+      <!-- implements -->
+      <k-slot-item :order="300">
+        <template v-for="(activity, key) in ctx.$router.pages" :key="key">
+          <k-comment type="success" v-if="activity.ctx.$entry?.paths.includes(current.id) && !activity.disabled()">
+            <p>
+              <span>此插件提供了页面：</span>
+              <k-activity-link :id="activity.id" />
+            </p>
+          </k-comment>
+        </template>
+      </k-slot-item>
+
+      <!-- usage -->
+      <k-slot-item :order="-200" v-if="local.runtime?.usage">
+        <k-markdown unsafe class="usage" :source="local.runtime?.usage"></k-markdown>
+      </k-slot-item>
+    </k-slot>
+  </template>
+</template>
+
+<script lang="ts" setup>
+
+import { computed } from 'vue'
+import { router, useContext, useRpc } from '@cordisjs/client'
+import { Data } from '../../src'
+
+const ctx = useContext()
+const data = useRpc<Data>()
+
+const current = computed(() => ctx.manager.current.value)
+const local = computed(() => data.value.packages[current.value?.name!])
+const env = computed(() => ctx.manager.getEnvInfo(current.value)!)
+
+function gotoProvider(provider: string[]) {
+  if (!provider.length) return
+  router.push('/plugins/' + provider[0])
+}
+
+</script>
+
+<style lang="scss">
+
+.plugin-view {
+  .markdown.usage {
+    margin-bottom: 2rem;
+
+    h2 {
+      font-size: 1.25rem;
+    }
+  }
+}
+
+</style>