diff --git a/packages/client/app/index.ts b/packages/client/app/index.ts
index 9144f7ed..3ac07de8 100644
--- a/packages/client/app/index.ts
+++ b/packages/client/app/index.ts
@@ -16,9 +16,9 @@ root.plugin(status)
 root.plugin(styles)
 root.plugin(theme)
 
-root.app.mount('#app')
+root.start()
 
 if (!global.static) {
   const endpoint = new URL(global.endpoint, location.origin).toString()
-  connect(() => new WebSocket(endpoint.replace(/^http/, 'ws')))
+  connect(root, () => new WebSocket(endpoint.replace(/^http/, 'ws')))
 }
diff --git a/packages/client/app/status/loading.vue b/packages/client/app/status/loading.vue
index 951dff19..03865f96 100644
--- a/packages/client/app/status/loading.vue
+++ b/packages/client/app/status/loading.vue
@@ -14,7 +14,7 @@ import { computed } from 'vue'
 const ctx = useContext()
 
 const progress = computed(() => {
-  const states = Object.values(ctx.internal.extensions)
+  const states = Object.values(ctx.$loader.extensions)
   return states.filter(state => state.done.value).length / states.length
 })
 
diff --git a/packages/client/app/theme/activity/index.vue b/packages/client/app/theme/activity/index.vue
index 50805313..3bdc12a2 100644
--- a/packages/client/app/theme/activity/index.vue
+++ b/packages/client/app/theme/activity/index.vue
@@ -21,10 +21,11 @@
 
 import { computed, provide } from 'vue'
 import { useWindowSize } from '@vueuse/core'
-import { activities, Activity, useConfig, useMenu } from '@koishijs/client'
+import { Activity, useConfig, useContext, useMenu } from '@koishijs/client'
 import ActivityItem from './item.vue'
 import ActivitySeparator from './separator.vue'
 
+const ctx = useContext()
 const config = useConfig()
 const trigger = useMenu('theme.activity')
 const { height, width } = useWindowSize()
@@ -34,7 +35,7 @@ const groups = computed(() => {
   const unit = width.value <= 768 ? 52 : 56
   const total = height.value - (width.value <= 768 ? 4 : 8)
   const available = Object.fromEntries(Object
-    .entries(activities)
+    .entries(ctx.$router.pages)
     .filter(([, data]) => !data.disabled())
     .map(([key, data]) => [key, [data]]))
   for (const id of Object.keys(available)) {
diff --git a/packages/client/app/theme/activity/separator.vue b/packages/client/app/theme/activity/separator.vue
index 962c8bb3..171d34a8 100644
--- a/packages/client/app/theme/activity/separator.vue
+++ b/packages/client/app/theme/activity/separator.vue
@@ -12,7 +12,7 @@
 <script lang="ts" setup>
 
 import { ComputedRef, ref, inject } from 'vue'
-import { activities, Activity, useConfig } from '@koishijs/client'
+import { Activity, useConfig, useContext } from '@koishijs/client'
 
 type Position = 'top' | 'bottom'
 
@@ -34,6 +34,7 @@ function handleDragLeave(event: DragEvent) {
 }
 
 const config = useConfig()
+const ctx = useContext()
 
 function handleDrop(event: DragEvent) {
   hasDragOver.value = false
@@ -46,7 +47,7 @@ function handleDrop(event: DragEvent) {
   event.preventDefault()
 
   let index = props.index
-  const item = activities[id]
+  const item = ctx.$router.pages[id]
   if (oldIndex < 0) {
     list.splice(index, 0, item)
   } else {
diff --git a/packages/client/client/activity.ts b/packages/client/client/activity.ts
deleted file mode 100644
index 6f065f85..00000000
--- a/packages/client/client/activity.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { Component, reactive, ref } from 'vue'
-import { MaybeRefOrGetter, toValue } from '@vueuse/core'
-import { Context, Dict, Disposable, omit, root, routeCache, router, store, Store } from '.'
-
-declare module 'vue-router' {
-  interface RouteMeta {
-    activity?: Activity
-  }
-}
-
-export namespace Activity {
-  export interface Options {
-    id?: string
-    path: string
-    strict?: boolean
-    component: Component
-    name: MaybeRefOrGetter<string>
-    desc?: MaybeRefOrGetter<string>
-    icon?: MaybeRefOrGetter<string>
-    order?: number
-    authority?: number
-    position?: 'top' | 'bottom'
-    fields?: (keyof Store)[]
-    /** @deprecated */
-    when?: () => boolean
-    disabled?: () => boolean
-  }
-}
-
-export const activities = reactive<Dict<Activity>>({})
-
-export interface Activity extends Activity.Options {}
-
-function getActivityId(path: string) {
-  return path.split('/').find(Boolean) ?? ''
-}
-
-export const redirectTo = ref<string>()
-
-export class Activity {
-  id: string
-  _disposables: Disposable[] = []
-
-  constructor(public ctx: Context, public options: Activity.Options) {
-    options.order ??= 0
-    options.position ??= 'top'
-    Object.assign(this, omit(options, ['icon', 'name', 'desc', 'disabled']))
-    const { path, id = getActivityId(path), component } = options
-    this._disposables.push(router.addRoute({ path, name: id, component, meta: { activity: this } }))
-    this.id ??= id
-    this.handleUpdate()
-    this.authority ??= 0
-    this.fields ??= []
-    activities[this.id] = this
-  }
-
-  handleUpdate() {
-    if (redirectTo.value) {
-      const location = router.resolve(redirectTo.value)
-      if (location.matched.length) {
-        redirectTo.value = null
-        router.replace(location)
-      }
-    }
-  }
-
-  get icon() {
-    return toValue(this.options.icon ?? 'activity:default')
-  }
-
-  get name() {
-    return toValue(this.options.name ?? this.id)
-  }
-
-  get desc() {
-    return toValue(this.options.desc)
-  }
-
-  disabled() {
-    if (root.bail('activity', this)) return true
-    if (!this.fields.every(key => store[key])) return true
-    if (this.when && !this.when()) return true
-    if (this.options.disabled?.()) return true
-  }
-
-  dispose() {
-    this._disposables.forEach(dispose => dispose())
-    const current = router.currentRoute.value
-    if (current?.meta?.activity === this) {
-      redirectTo.value = current.fullPath
-      router.push(routeCache['home'] || '/')
-    }
-    return delete activities[this.id]
-  }
-}
diff --git a/packages/client/client/components/link.ts b/packages/client/client/components/link.ts
index 35e3c64b..8f001722 100644
--- a/packages/client/client/components/link.ts
+++ b/packages/client/client/components/link.ts
@@ -9,9 +9,9 @@ const KActivityLink = defineComponent({
   setup(props, { slots }) {
     const ctx = useContext()
     return () => {
-      const activity = ctx.internal.activities[props.id]
+      const activity = ctx.$router.pages[props.id]
       return h(RouterLink, {
-        to: ctx.internal.routeCache[activity?.id] || activity?.path.replace(/:.+/, ''),
+        to: ctx.$router.cache[activity?.id] || activity?.path.replace(/:.+/, ''),
       }, {
         default: () => slots.default?.() ?? activity?.name,
       })
diff --git a/packages/client/client/components/slot.ts b/packages/client/client/components/slot.ts
index 1ca6390f..643e4c3b 100644
--- a/packages/client/client/components/slot.ts
+++ b/packages/client/client/components/slot.ts
@@ -25,7 +25,7 @@ export const KSlot = defineComponent({
       const internal = props.single ? [] : [...slots.default?.() || []]
         .filter(node => node.type === KSlotItem)
         .map(node => ({ node, order: node.props?.order || 0 }))
-      const external = [...ctx.internal.views[props.name] || []]
+      const external = [...ctx.$router.views[props.name] || []]
         .filter(item => !item.disabled?.())
         .map(item => ({
           node: h(item.component, { ...props.data }, slots),
diff --git a/packages/client/client/context.ts b/packages/client/client/context.ts
index 3d5d1a2c..62f82a42 100644
--- a/packages/client/client/context.ts
+++ b/packages/client/client/context.ts
@@ -1,26 +1,22 @@
 import * as cordis from 'cordis'
-import { Dict, remove } from 'cosmokit'
 import {
   App, Component, createApp, defineComponent, h, inject, markRaw,
-  onBeforeUnmount, provide, reactive, Ref, resolveComponent,
+  onBeforeUnmount, provide, Ref, resolveComponent,
 } from 'vue'
-import { createI18n } from 'vue-i18n'
-import { activities, Activity } from './activity'
-import { SlotOptions } from './components'
-import { extensions, LoadResult } from './loader'
 import ActionService from './plugins/action'
+import I18nService from './plugins/i18n'
+import LoaderService from './plugins/loader'
+import RouterService from './plugins/router'
 import SettingService from './plugins/setting'
 import ThemeService from './plugins/theme'
-import { insert } from './utils'
 
 // layout api
 
-export interface Events<C extends Context> extends cordis.Events<C> {
-  'activity'(activity: Activity): boolean
-}
+export interface Events<C extends Context> extends cordis.Events<C> {}
 
 export interface Context {
   [Context.events]: Events<this>
+  internal: Internal
 }
 
 export function useContext() {
@@ -35,18 +31,7 @@ export function useRpc<T>(): Ref<T> {
   return parent.extension?.data
 }
 
-export class Internal {
-  extensions = extensions
-  activities = activities
-  routeCache = routeCache
-  views = reactive<Dict<SlotOptions[]>>({})
-  i18n = createI18n({
-    legacy: false,
-    fallbackLocale: 'zh-CN',
-  })
-}
-
-export const routeCache = reactive<Record<keyof any, string>>({})
+export interface Internal {}
 
 export class Context extends cordis.Context {
   // workaround injection check
@@ -55,25 +40,31 @@ export class Context extends cordis.Context {
 
   app: App
 
-  extension?: LoadResult
-  internal = new Internal()
-
   constructor() {
     super()
-    this.provide('extension')
-
+    this.extension = null
+    this.internal = {} as Internal
     this.app = createApp(defineComponent({
       setup: () => () => [
         h(resolveComponent('k-slot'), { name: 'root', single: true }),
         h(resolveComponent('k-slot'), { name: 'global' }),
       ],
     }))
-    this.app.use(this.internal.i18n)
     this.app.provide('cordis', this)
 
     this.plugin(ActionService)
+    this.plugin(I18nService)
+    this.plugin(LoaderService)
+    this.plugin(RouterService)
     this.plugin(SettingService)
     this.plugin(ThemeService)
+
+    this.on('ready', async () => {
+      await this.$loader.initTask
+      this.app.use(this.$i18n.i18n)
+      this.app.use(this.$router.router)
+      this.app.mount('#app')
+    })
   }
 
   addEventListener<K extends keyof WindowEventMap>(
@@ -96,31 +87,6 @@ export class Context extends cordis.Context {
       return () => h(component, props, slots)
     })
   }
-
-  /** @deprecated */
-  addView(options: SlotOptions) {
-    return this.slot(options)
-  }
-
-  /** @deprecated */
-  addPage(options: Activity.Options) {
-    return this.page(options)
-  }
-
-  slot(options: SlotOptions) {
-    options.order ??= 0
-    options.component = this.wrapComponent(options.component)
-    if (options.when) options.disabled = () => !options.when()
-    const list = this.internal.views[options.type] ||= []
-    insert(list, options)
-    return this.scope.collect('view', () => remove(list, options))
-  }
-
-  page(options: Activity.Options) {
-    options.component = this.wrapComponent(options.component)
-    const activity = new Activity(this, options)
-    return this.scope.collect('page', () => activity.dispose())
-  }
 }
 
 markRaw(cordis.Context.prototype)
diff --git a/packages/client/client/data.ts b/packages/client/client/data.ts
index a7561bf8..be02a6c9 100644
--- a/packages/client/client/data.ts
+++ b/packages/client/client/data.ts
@@ -1,7 +1,7 @@
 import type { ClientConfig, Console, DataService, Events } from '@koishijs/plugin-console'
 import type { Promisify, Universal } from 'koishi'
 import { markRaw, reactive, ref } from 'vue'
-import { root } from '.'
+import { Context } from './context'
 
 export type Store = {
   [K in keyof Console.Services]?: Console.Services[K] extends DataService<infer T> ? T : never
@@ -61,7 +61,7 @@ receive('response', ({ id, value, error }) => {
   }
 })
 
-export function connect(callback: () => Universal.WebSocket) {
+export function connect(ctx: Context, callback: () => Universal.WebSocket) {
   const value = callback()
 
   let sendTimer: number
@@ -81,7 +81,7 @@ export function connect(callback: () => Universal.WebSocket) {
     }
     console.log('[koishi] websocket disconnected, will retry in 1s...')
     setTimeout(() => {
-      connect(callback).then(location.reload, () => {
+      connect(ctx, callback).then(location.reload, () => {
         console.log('[koishi] websocket disconnected, will retry in 1s...')
       })
     }, 1000)
@@ -94,7 +94,7 @@ export function connect(callback: () => Universal.WebSocket) {
     if (data.type in listeners) {
       listeners[data.type](data.body)
     }
-    root.emit(data.type, data.body)
+    ctx.emit(data.type, data.body)
   })
 
   value.addEventListener('close', reconnect)
diff --git a/packages/client/client/index.ts b/packages/client/client/index.ts
index 0f73113c..6eeb738d 100644
--- a/packages/client/client/index.ts
+++ b/packages/client/client/index.ts
@@ -1,10 +1,5 @@
-import { createRouter, createWebHistory, START_LOCATION } from 'vue-router'
-import { global } from './data'
 import install, { Dict } from './components'
-import Overlay from './components/chat/overlay.vue'
-import { redirectTo } from './activity'
-import { initTask } from './loader'
-import { Context, routeCache } from './context'
+import { Context } from './context'
 
 declare module '@koishijs/plugin-console' {
   export interface ClientConfig {
@@ -16,12 +11,13 @@ declare module '@koishijs/plugin-console' {
 export * as Satori from '@satorijs/protocol'
 export * as Universal from '@satorijs/protocol'
 export * from './plugins/action'
+export * from './plugins/i18n'
+export * from './plugins/loader'
+export * from './plugins/router'
 export * from './plugins/setting'
 export * from './plugins/theme'
-export * from './activity'
 export * from './components'
 export * from './context'
-export * from './loader'
 export * from './data'
 export { Service } from './utils'
 
@@ -30,63 +26,17 @@ export default install
 export interface ActionContext {}
 
 export interface Config {
-  theme: Config.Theme
   locale?: string
 }
 
-export namespace Config {
-  export interface Theme {
-    mode: 'auto' | 'dark' | 'light'
-    dark: string
-    light: string
-  }
-}
-
 export const root = new Context()
 
-export const router = createRouter({
-  history: createWebHistory(global.uiPath),
-  linkActiveClass: 'active',
-  routes: [],
-})
-
-const initialTitle = document.title
-
-router.afterEach((route) => {
-  const { name, fullPath } = router.currentRoute.value
-  routeCache[name] = fullPath
-  if (route.meta.activity) {
-    document.title = `${route.meta.activity.name}`
-    if (initialTitle) document.title += ` | ${initialTitle}`
-  }
-})
-
 root.app.use(install)
-root.app.use(router)
-
-root.slot({
-  type: 'global',
-  component: Overlay,
-})
 
 root.on('activity', data => !data)
 
-router.beforeEach(async (to, from) => {
-  if (to.matched.length) {
-    if (to.matched[0].path !== '/') {
-      redirectTo.value = null
-    }
-    return
-  }
-
-  if (from === START_LOCATION) {
-    await initTask
-    to = router.resolve(to)
-    if (to.matched.length) return to
-  }
+/** @deprecated use `useRouter()` */
+export const router = root.$router.router
 
-  redirectTo.value = to.fullPath
-  const result = routeCache['home'] || '/'
-  if (result === to.fullPath) return
-  return result
-})
+/** @deprecated use `useRouter()` */
+export const activities = root.$router.pages
diff --git a/packages/client/client/loader.ts b/packages/client/client/loader.ts
deleted file mode 100644
index dc909d25..00000000
--- a/packages/client/client/loader.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { ref, Ref, shallowReactive, watch } from 'vue'
-import { Context, Dict, receive, root, store } from '.'
-import { EffectScope } from 'cordis'
-
-export type Disposable = () => void
-export type Extension = (ctx: Context) => void
-
-export function defineExtension(callback: Extension) {
-  return callback
-}
-
-export function unwrapExports(module: any) {
-  return module?.default || module
-}
-
-const loaders: Dict<(ctx: Context, url: string) => Promise<void>> = {
-  async [`.css`](ctx, url) {
-    const link = document.createElement('link')
-    link.rel = 'stylesheet'
-    link.href = url
-    await new Promise((resolve, reject) => {
-      link.onload = resolve
-      link.onerror = reject
-      document.head.appendChild(link)
-      ctx.on('dispose', () => {
-        document.head.removeChild(link)
-      })
-    })
-  },
-  async [``](ctx, url) {
-    const exports = await import(/* @vite-ignore */ url)
-    ctx.plugin(unwrapExports(exports), ctx.extension.data)
-  },
-}
-
-export interface LoadResult {
-  scope: EffectScope
-  paths: string[]
-  done: Ref<boolean>
-  data: Ref
-}
-
-export const extensions: Dict<LoadResult> = shallowReactive({})
-
-let backendId: any
-
-export const initTask = new Promise<void>((resolve) => {
-  watch(() => store.entry, async (newValue, oldValue) => {
-    const { _id, ...rest } = newValue || {}
-    if (backendId && _id && backendId !== _id) {
-      window.location.reload()
-      return
-    }
-    backendId = _id
-
-    for (const key in extensions) {
-      if (rest[key]) continue
-      extensions[key].scope.dispose()
-      delete extensions[key]
-    }
-
-    await Promise.all(Object.entries(rest).map(([key, { files, paths, data }]) => {
-      if (extensions[key]) return
-      const scope = root.isolate(['extension']).plugin(() => {})
-      scope.ctx.extension = extensions[key] = { done: ref(false), scope, paths, data: ref(data) }
-      const task = Promise.all(files.map((url) => {
-        for (const ext in loaders) {
-          if (!url.endsWith(ext)) continue
-          return loaders[ext](scope.ctx, url)
-        }
-      }))
-      task.finally(() => extensions[key].done.value = true)
-    }))
-
-    if (!oldValue) {
-      resolve()
-      if (!root.events.isActive) root.start()
-    }
-  }, { deep: true })
-})
-
-receive('entry-data', ({ id, data }) => {
-  const entry = store.entry?.[id]
-  if (!entry) return
-  entry.data = data
-  extensions[id].data.value = data
-})
diff --git a/packages/client/client/plugins/action.ts b/packages/client/client/plugins/action.ts
index 4fdcceb2..5da97fb5 100644
--- a/packages/client/client/plugins/action.ts
+++ b/packages/client/client/plugins/action.ts
@@ -117,8 +117,8 @@ export default class ActionService extends Service {
   action(id: string, options: ActionOptions) {
     markRaw(options)
     return this[Context.current].effect(() => {
-      this.ctx.internal.scope[id] = options
-      return () => delete this.ctx.internal.scope[id]
+      this.ctx.internal.actions[id] = options
+      return () => delete this.ctx.internal.actions[id]
     })
   }
 
diff --git a/packages/client/client/plugins/i18n.ts b/packages/client/client/plugins/i18n.ts
new file mode 100644
index 00000000..a8f114cd
--- /dev/null
+++ b/packages/client/client/plugins/i18n.ts
@@ -0,0 +1,28 @@
+import { watchEffect } from 'vue'
+import { createI18n } from 'vue-i18n'
+import { useConfig } from './setting'
+import { Context } from '../context'
+import { Service } from '../utils'
+
+declare module '../context' {
+  interface Context {
+    $i18n: I18nService
+  }
+}
+
+const config = useConfig()
+
+export default class I18nService extends Service {
+  public i18n = createI18n({
+    legacy: false,
+    fallbackLocale: 'zh-CN',
+  })
+
+  constructor(ctx: Context) {
+    super(ctx, '$i18n', true)
+
+    ctx.effect(() => watchEffect(() => {
+      this.i18n.global.locale.value = config.value.locale
+    }, { flush: 'post' }))
+  }
+}
diff --git a/packages/client/client/plugins/loader.ts b/packages/client/client/plugins/loader.ts
new file mode 100644
index 00000000..136fbf08
--- /dev/null
+++ b/packages/client/client/plugins/loader.ts
@@ -0,0 +1,100 @@
+import { Ref, ref, shallowReactive, watch } from 'vue'
+import { Context } from '../context'
+import { Service } from '../utils'
+import { receive, store } from '../data'
+import { EffectScope } from 'cordis'
+import { Dict } from 'cosmokit'
+
+declare module '../context' {
+  interface Context {
+    $loader: LoaderService
+    extension?: LoadResult
+  }
+}
+
+export type Disposable = () => void
+export type Extension = (ctx: Context) => void
+
+export function defineExtension(callback: Extension) {
+  return callback
+}
+
+export function unwrapExports(module: any) {
+  return module?.default || module
+}
+
+const loaders: Dict<(ctx: Context, url: string) => Promise<void>> = {
+  async [`.css`](ctx, url) {
+    const link = document.createElement('link')
+    link.rel = 'stylesheet'
+    link.href = url
+    await new Promise((resolve, reject) => {
+      link.onload = resolve
+      link.onerror = reject
+      ctx.effect(() => {
+        document.head.appendChild(link)
+        return () => document.head.removeChild(link)
+      })
+    })
+  },
+  async [``](ctx, url) {
+    const exports = await import(/* @vite-ignore */ url)
+    ctx.plugin(unwrapExports(exports), ctx.extension.data)
+  },
+}
+
+export interface LoadResult {
+  scope: EffectScope
+  paths: string[]
+  done: Ref<boolean>
+  data: Ref
+}
+
+export default class LoaderService extends Service {
+  private backendId: any
+
+  public extensions: Dict<LoadResult> = shallowReactive({})
+
+  constructor(ctx: Context) {
+    super(ctx, '$loader', true)
+
+    receive('entry-data', ({ id, data }) => {
+      const entry = store.entry?.[id]
+      if (!entry) return
+      entry.data = data
+      this.extensions[id].data.value = data
+    })
+  }
+
+  initTask = new Promise<void>((resolve) => {
+    watch(() => store.entry, async (newValue, oldValue) => {
+      const { _id, ...rest } = newValue || {}
+      if (this.backendId && _id && this.backendId !== _id) {
+        window.location.reload()
+        return
+      }
+      this.backendId = _id
+
+      for (const key in this.extensions) {
+        if (rest[key]) continue
+        this.extensions[key].scope.dispose()
+        delete this.extensions[key]
+      }
+
+      await Promise.all(Object.entries(rest).map(([key, { files, paths, data }]) => {
+        if (this.extensions[key]) return
+        const scope = this.ctx.isolate(['extension']).plugin(() => {})
+        scope.ctx.extension = this.extensions[key] = { done: ref(false), scope, paths, data: ref(data) }
+        const task = Promise.all(files.map((url) => {
+          for (const ext in loaders) {
+            if (!url.endsWith(ext)) continue
+            return loaders[ext](scope.ctx, url)
+          }
+        }))
+        task.finally(() => this.extensions[key].done.value = true)
+      }))
+
+      if (!oldValue) resolve()
+    }, { deep: true })
+  })
+}
diff --git a/packages/client/client/plugins/router.ts b/packages/client/client/plugins/router.ts
new file mode 100644
index 00000000..85d059dc
--- /dev/null
+++ b/packages/client/client/plugins/router.ts
@@ -0,0 +1,187 @@
+import { createRouter, createWebHistory, START_LOCATION } from 'vue-router'
+import Overlay from '../components/chat/overlay.vue'
+import { Context } from '../context'
+import { insert, Service } from '../utils'
+import { Component, MaybeRefOrGetter, reactive, ref, toValue } from 'vue'
+import { global, Store, store } from '../data'
+import { Dict, omit, remove } from 'cosmokit'
+import { Disposable } from 'cordis'
+import { SlotOptions } from '../components'
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    activity?: Activity
+  }
+}
+
+declare module '../context' {
+  interface Context {
+    $router: RouterService
+    slot(options: SlotOptions): () => void
+    page(options: Activity.Options): () => void
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Events<C> {
+    'activity'(activity: Activity): boolean
+  }
+}
+
+export namespace Activity {
+  export interface Options {
+    id?: string
+    path: string
+    strict?: boolean
+    component: Component
+    name: MaybeRefOrGetter<string>
+    desc?: MaybeRefOrGetter<string>
+    icon?: MaybeRefOrGetter<string>
+    order?: number
+    authority?: number
+    position?: 'top' | 'bottom'
+    fields?: (keyof Store)[]
+    /** @deprecated */
+    when?: () => boolean
+    disabled?: () => boolean
+  }
+}
+
+export interface Activity extends Activity.Options {}
+
+function getActivityId(path: string) {
+  return path.split('/').find(Boolean) ?? ''
+}
+
+export const redirectTo = ref<string>()
+
+export class Activity {
+  id: string
+  _disposables: Disposable[] = []
+
+  constructor(public ctx: Context, public options: Activity.Options) {
+    options.order ??= 0
+    options.position ??= 'top'
+    Object.assign(this, omit(options, ['icon', 'name', 'desc', 'disabled']))
+    const { path, id = getActivityId(path), component } = options
+    this._disposables.push(ctx.$router.router.addRoute({ path, name: id, component, meta: { activity: this } }))
+    this.id ??= id
+    this.handleUpdate()
+    this.authority ??= 0
+    this.fields ??= []
+    ctx.$router.pages[this.id] = this
+  }
+
+  handleUpdate() {
+    if (redirectTo.value) {
+      const location = this.ctx.$router.router.resolve(redirectTo.value)
+      if (location.matched.length) {
+        redirectTo.value = null
+        this.ctx.$router.router.replace(location)
+      }
+    }
+  }
+
+  get icon() {
+    return toValue(this.options.icon ?? 'activity:default')
+  }
+
+  get name() {
+    return toValue(this.options.name ?? this.id)
+  }
+
+  get desc() {
+    return toValue(this.options.desc)
+  }
+
+  disabled() {
+    if (this.ctx.bail('activity', this)) return true
+    if (!this.fields.every(key => store[key])) return true
+    if (this.when && !this.when()) return true
+    if (this.options.disabled?.()) return true
+  }
+
+  dispose() {
+    this._disposables.forEach(dispose => dispose())
+    const current = this.ctx.$router.router.currentRoute.value
+    if (current?.meta?.activity === this) {
+      redirectTo.value = current.fullPath
+      this.ctx.$router.router.push(this.ctx.$router.cache['home'] || '/')
+    }
+    return delete this.ctx.$router.pages[this.id]
+  }
+}
+
+export default class RouterService extends Service {
+  public views = reactive<Dict<SlotOptions[]>>({})
+  public cache = reactive<Record<keyof any, string>>({})
+  public pages = reactive<Dict<Activity>>({})
+  public router = createRouter({
+    history: createWebHistory(global.uiPath),
+    linkActiveClass: 'active',
+    routes: [],
+  })
+
+  constructor(ctx: Context) {
+    super(ctx, '$router', true)
+    ctx.mixin('$router', ['slot', 'page'])
+
+    const initialTitle = document.title
+    ctx.effect(() => this.router.afterEach((route) => {
+      const { name, fullPath } = this.router.currentRoute.value
+      this.cache[name] = fullPath
+      if (route.meta.activity) {
+        document.title = `${route.meta.activity.name}`
+        if (initialTitle) document.title += ` | ${initialTitle}`
+      }
+    }))
+
+    this.router.beforeEach(async (to, from) => {
+      if (to.matched.length) {
+        if (to.matched[0].path !== '/') {
+          redirectTo.value = null
+        }
+        return
+      }
+
+      if (from === START_LOCATION) {
+        await ctx.$loader.initTask
+        to = this.router.resolve(to)
+        if (to.matched.length) return to
+      }
+
+      redirectTo.value = to.fullPath
+      const result = this.cache['home'] || '/'
+      if (result === to.fullPath) return
+      return result
+    })
+
+    this.slot({
+      type: 'global',
+      component: Overlay,
+    })
+  }
+
+  slot(options: SlotOptions) {
+    const caller = this[Context.current]
+    options.order ??= 0
+    options.component = caller.wrapComponent(options.component)
+    if (options.when) options.disabled = () => !options.when()
+    return caller.effect(() => {
+      const list = this.views[options.type] ||= []
+      insert(list, options)
+      return () => {
+        remove(list, options)
+        if (!list.length) delete this.views[options.type]
+      }
+    })
+  }
+
+  page(options: Activity.Options) {
+    const caller = this[Context.current]
+    options.component = caller.wrapComponent(options.component)
+    return caller.effect(() => {
+      const activity = new Activity(caller, options)
+      return () => activity.dispose()
+    })
+  }
+}
diff --git a/packages/client/client/plugins/setting.ts b/packages/client/client/plugins/setting.ts
index 410cada2..b089c1ea 100644
--- a/packages/client/client/plugins/setting.ts
+++ b/packages/client/client/plugins/setting.ts
@@ -3,7 +3,7 @@ import { RemovableRef, useLocalStorage } from '@vueuse/core'
 import { Context } from '../context'
 import { insert, Ordered, Service } from '../utils'
 import { Dict, remove } from 'cosmokit'
-import { Component, computed, markRaw, reactive, ref, watch, watchEffect } from 'vue'
+import { Component, computed, markRaw, reactive, ref, watch } from 'vue'
 import { Config } from '..'
 
 declare module '../context' {
@@ -66,10 +66,6 @@ export const original = useStorage<Config>('config', undefined, () => ({
   locale: 'zh-CN',
 }))
 
-watch(original, (value) => {
-  console.log(value)
-})
-
 export const resolved = ref({} as Config)
 
 export const useConfig = (useOriginal = false) => useOriginal ? original : resolved
@@ -123,10 +119,6 @@ export default class SettingService extends Service {
 
     ctx.effect(() => watch(original, update, { deep: true }))
     ctx.effect(() => watch(schema, update))
-
-    ctx.effect(() => watchEffect(() => {
-      ctx.internal.i18n.global.locale.value = resolved.value.locale
-    }, { flush: 'post' }))
   }
 
   schema(extension: SchemaBase.Extension) {
diff --git a/packages/client/client/plugins/theme.ts b/packages/client/client/plugins/theme.ts
index ed22b481..c3a49d01 100644
--- a/packages/client/client/plugins/theme.ts
+++ b/packages/client/client/plugins/theme.ts
@@ -17,6 +17,20 @@ declare module '../context' {
   }
 }
 
+declare module '..' {
+  interface Config {
+    theme: Config.Theme
+  }
+
+  export namespace Config {
+    export interface Theme {
+      mode: 'auto' | 'dark' | 'light'
+      dark: string
+      light: string
+    }
+  }
+}
+
 export interface ThemeOptions {
   id: string
   name: string | Dict<string>
@@ -29,7 +43,6 @@ const config = useConfig()
 
 const colorMode = computed(() => {
   const mode = config.value.theme.mode
-  console.log(mode, preferDark.value)
   if (mode !== 'auto') return mode
   return preferDark.value ? 'dark' : 'light'
 })
diff --git a/packages/online/app/index.ts b/packages/online/app/index.ts
index 8df25822..3e77d50d 100644
--- a/packages/online/app/index.ts
+++ b/packages/online/app/index.ts
@@ -40,7 +40,7 @@ if (!('chrome' in window)) {
     '请使用最新版本的 Chrome 或 Edge 浏览器。',
   ]
 } else {
-  connect(() => new ClientWebSocket())
+  connect(root, () => new ClientWebSocket())
 }
 
 if (process.env.NODE_ENV === 'production') {
diff --git a/plugins/config/client/components/plugin.vue b/plugins/config/client/components/plugin.vue
index a3e5c14e..35cf7ff3 100644
--- a/plugins/config/client/components/plugin.vue
+++ b/plugins/config/client/components/plugin.vue
@@ -52,7 +52,7 @@
 
       <!-- implements -->
       <k-slot-item :order="300">
-        <template v-for="(activity, key) in activities" :key="key">
+        <template v-for="(activity, key) in ctx.$router.pages" :key="key">
           <k-comment type="success" v-if="activity.ctx.extension?.paths.includes(current.path) && !activity.disabled()">
             <p>
               <span>此插件提供了页面：</span>
@@ -95,7 +95,7 @@
 
 <script lang="ts" setup>
 
-import { activities, store, send } from '@koishijs/client'
+import { store, send, useContext } from '@koishijs/client'
 import { computed, provide, watch } from 'vue'
 import { envMap, name, plugins, dialogFork, Tree } from './utils'
 import KModifier from './modifier.vue'
@@ -107,6 +107,8 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:modelValue'])
 
+const ctx = useContext()
+
 const config = computed({
   get: () => props.modelValue,
   set: value => emit('update:modelValue', value),
diff --git a/plugins/market/client/components/progress.vue b/plugins/market/client/components/progress.vue
index 7ff097a1..5c1e2b97 100644
--- a/plugins/market/client/components/progress.vue
+++ b/plugins/market/client/components/progress.vue
@@ -8,13 +8,13 @@
 
 <script lang="ts" setup>
 
-import { store, activities, useContext } from '@koishijs/client'
+import { store, useContext } from '@koishijs/client'
 import { computed } from 'vue'
 
 const ctx = useContext()
 
 const isLoading = computed(() => {
-  if (ctx.bail('activity', activities['market'])) return false
+  if (ctx.bail('activity', ctx.$router.pages['market'])) return false
   return !store.market || store.market.total > store.market.progress
 })