diff --git a/apps/stage-tamagotchi-electron/src/renderer/main.ts b/apps/stage-tamagotchi-electron/src/renderer/main.ts
index 27c201a92..88c8fe621 100644
--- a/apps/stage-tamagotchi-electron/src/renderer/main.ts
+++ b/apps/stage-tamagotchi-electron/src/renderer/main.ts
@@ -1,6 +1,12 @@
-import { initializeApp } from '@proj-airi/stage-ui/services'
+import type { Plugin } from 'vue'
+
+import Tres from '@tresjs/core'
+
+import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
+import { MotionPlugin } from '@vueuse/motion'
 import { createPinia } from 'pinia'
 import { setupLayouts } from 'virtual:generated-layouts'
+import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'
 
@@ -32,11 +38,12 @@ const router = createRouter({
   routes: setupLayouts(routes),
 })
 
-// Initialize and mount the app using the shared initialization logic
-initializeApp(App, {
-  router,
-  pinia,
-  i18n,
-}).then((app) => {
-  app.mount('#app')
-})
+createApp(App)
+  .use(MotionPlugin)
+  // TODO: Fix autoAnimatePlugin type error
+  .use(autoAnimatePlugin as unknown as Plugin)
+  .use(router)
+  .use(pinia)
+  .use(i18n)
+  .use(Tres)
+  .mount('#app')
diff --git a/apps/stage-tamagotchi/src/main.ts b/apps/stage-tamagotchi/src/main.ts
index 27c201a92..88c8fe621 100644
--- a/apps/stage-tamagotchi/src/main.ts
+++ b/apps/stage-tamagotchi/src/main.ts
@@ -1,6 +1,12 @@
-import { initializeApp } from '@proj-airi/stage-ui/services'
+import type { Plugin } from 'vue'
+
+import Tres from '@tresjs/core'
+
+import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
+import { MotionPlugin } from '@vueuse/motion'
 import { createPinia } from 'pinia'
 import { setupLayouts } from 'virtual:generated-layouts'
+import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'
 
@@ -32,11 +38,12 @@ const router = createRouter({
   routes: setupLayouts(routes),
 })
 
-// Initialize and mount the app using the shared initialization logic
-initializeApp(App, {
-  router,
-  pinia,
-  i18n,
-}).then((app) => {
-  app.mount('#app')
-})
+createApp(App)
+  .use(MotionPlugin)
+  // TODO: Fix autoAnimatePlugin type error
+  .use(autoAnimatePlugin as unknown as Plugin)
+  .use(router)
+  .use(pinia)
+  .use(i18n)
+  .use(Tres)
+  .mount('#app')
diff --git a/apps/stage-web/src/App.vue b/apps/stage-web/src/App.vue
index 2bf66bfb8..6f5f66d60 100644
--- a/apps/stage-web/src/App.vue
+++ b/apps/stage-web/src/App.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { OnboardingDialog, ToasterRoot } from '@proj-airi/stage-ui/components'
+import { useConfiguratorForAiriSdk } from '@proj-airi/stage-ui/stores/configurator'
 import { useDisplayModelsStore } from '@proj-airi/stage-ui/stores/display-models'
 import { useOnboardingStore } from '@proj-airi/stage-ui/stores/onboarding'
 import { useSettings } from '@proj-airi/stage-ui/stores/settings'
 import { StageTransitionGroup } from '@proj-airi/ui-transitions'
 import { useDark } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { computed, onMounted, watch } from 'vue'
+import { computed, onMounted, onUnmounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterView } from 'vue-router'
 import { toast, Toaster } from 'vue-sonner'
@@ -23,6 +24,7 @@ const settings = storeToRefs(settingsStore)
 const onboardingStore = useOnboardingStore()
 const { shouldShowSetup } = storeToRefs(onboardingStore)
 const isDark = useDark()
+const { dispose } = useConfiguratorForAiriSdk()
 
 const primaryColor = computed(() => {
   return isDark.value
@@ -66,6 +68,10 @@ onMounted(async () => {
   await settingsStore.initializeStageModel()
 })
 
+onUnmounted(() => {
+  dispose()
+})
+
 // Handle first-time setup events
 function handleSetupConfigured() {
   onboardingStore.markSetupCompleted()
diff --git a/apps/stage-web/src/main.ts b/apps/stage-web/src/main.ts
index bc0339f12..abd8a0c6d 100644
--- a/apps/stage-web/src/main.ts
+++ b/apps/stage-web/src/main.ts
@@ -1,11 +1,14 @@
-import type { App as VueApp } from 'vue'
+import type { Plugin } from 'vue'
 import type { Router } from 'vue-router'
 
+import Tres from '@tresjs/core'
 import NProgress from 'nprogress'
 
-import { initializeApp } from '@proj-airi/stage-ui/services'
+import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
+import { MotionPlugin } from '@vueuse/motion'
 import { createPinia } from 'pinia'
 import { setupLayouts } from 'virtual:generated-layouts'
+import { createApp } from 'vue'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'
 
@@ -37,30 +40,12 @@ router.afterEach(() => {
   NProgress.done()
 })
 
-// Custom initialization callback for web-specific post-initialization
-async function onInitialized(_app: VueApp, router: Router) {
-  // Handle PWA registration after router is ready
-  router.isReady()
-    .then(async () => {
-      if (import.meta.env.SSR) {
-        return
-      }
-      if (import.meta.env.VITE_APP_TARGET_HUGGINGFACE_SPACE) {
-        return
-      }
-
-      const { registerSW } = await import('./modules/pwa')
-      registerSW({ immediate: true })
-    })
-    .catch(error => console.error('Failed during post-initialization:', error))
-}
-
-// Initialize and mount the app using the shared initialization logic with web-specific options
-initializeApp(App, {
-  router,
-  pinia,
-  i18n,
-  onInitialized,
-}).then((app) => {
-  app.mount('#app')
-})
+createApp(App)
+  .use(MotionPlugin)
+  // TODO: Fix autoAnimatePlugin type error
+  .use(autoAnimatePlugin as unknown as Plugin)
+  .use(router)
+  .use(pinia)
+  .use(i18n)
+  .use(Tres)
+  .mount('#app')
diff --git a/apps/stage-web/vite.config.ts b/apps/stage-web/vite.config.ts
index 57a2531d9..f3182a7e4 100644
--- a/apps/stage-web/vite.config.ts
+++ b/apps/stage-web/vite.config.ts
@@ -49,6 +49,7 @@ export default defineConfig({
 
   resolve: {
     alias: {
+      '@proj-airi/server-sdk': resolve(join(import.meta.dirname, '..', '..', 'packages', 'server-sdk', 'src')),
       '@proj-airi/stage-ui': resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-ui', 'src')),
       '@proj-airi/i18n': resolve(join(import.meta.dirname, '..', '..', 'packages', 'i18n', 'src')),
     },
diff --git a/packages/server-sdk/src/client.ts b/packages/server-sdk/src/client.ts
index 13e57a6a3..e6a8451be 100644
--- a/packages/server-sdk/src/client.ts
+++ b/packages/server-sdk/src/client.ts
@@ -4,6 +4,13 @@ import WebSocket from 'crossws/websocket'
 
 import { sleep } from '@moeru/std'
 
+class ReconnectingError extends Error {
+  constructor(message: string) {
+    super(message)
+    this.name = 'ReconnectingError'
+  }
+}
+
 export interface ClientOptions<C = undefined> {
   url?: string
   name: string
@@ -18,6 +25,7 @@ export interface ClientOptions<C = undefined> {
 
 export class Client<C = undefined> {
   private connected = false
+  private connecting = false
   private websocket?: WebSocket
   private shouldClose = false
 
@@ -70,6 +78,10 @@ export class Client<C = undefined> {
         return
       }
       catch (err) {
+        if (err instanceof ReconnectingError) {
+          return
+        }
+
         this.opts.onError?.(err)
         const delay = Math.min(2 ** attempts * 1000, 30_000) // capped exponential backoff
         await sleep(delay)
@@ -82,6 +94,7 @@ export class Client<C = undefined> {
     if (this.shouldClose) {
       return
     }
+
     await this.retryWithExponentialBackoff(() => this._connect())
   }
 
@@ -89,18 +102,27 @@ export class Client<C = undefined> {
     if (this.shouldClose || this.connected) {
       return Promise.resolve()
     }
+    if (this.connecting) {
+      return Promise.reject(new ReconnectingError('Already connecting'))
+    }
 
     return new Promise((resolve, reject) => {
+      this.connecting = true
+
       const ws = new WebSocket(this.opts.url)
       this.websocket = ws
 
+      ws.onmessage = this.handleMessageBound
       ws.onerror = (event: any) => {
+        this.connecting = false
         this.connected = false
+
         this.opts.onError?.(event)
         reject(event?.error ?? new Error('WebSocket error'))
       }
-
       ws.onclose = () => {
+        this.connecting = false
+
         if (this.connected) {
           this.connected = false
           this.opts.onClose?.()
@@ -109,11 +131,10 @@ export class Client<C = undefined> {
           void this.tryReconnectWithExponentialBackoff()
         }
       }
-
-      ws.onmessage = this.handleMessageBound
-
       ws.onopen = () => {
+        this.connecting = false
         this.connected = true
+
         this.opts.token ? this.tryAuthenticate() : this.tryAnnounce()
         resolve()
       }
diff --git a/packages/stage-ui/package.json b/packages/stage-ui/package.json
index 516ffb098..d4a93dca6 100644
--- a/packages/stage-ui/package.json
+++ b/packages/stage-ui/package.json
@@ -26,8 +26,6 @@
     "./constants": "./src/constants/index.ts",
     "./libs/*": "./src/libs/*.ts",
     "./libs": "./src/libs/index.ts",
-    "./services/*": "./src/services/*.ts",
-    "./services": "./src/services/index.ts",
     "./stores/*": "./src/stores/*.ts",
     "./stores": "./src/stores/index.ts",
     "./utils": "./src/utils/index.ts"
diff --git a/packages/stage-ui/src/services/app-initializer.ts b/packages/stage-ui/src/services/app-initializer.ts
deleted file mode 100644
index 981ea1e1f..000000000
--- a/packages/stage-ui/src/services/app-initializer.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import type { Pinia } from 'pinia'
-import type { App, Component, Plugin } from 'vue'
-import type { I18n } from 'vue-i18n'
-import type { Router } from 'vue-router'
-
-import Tres from '@tresjs/core'
-
-import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
-import { MotionPlugin } from '@vueuse/motion'
-import { createApp } from 'vue'
-
-import { settingsBroadcaster } from './settings-broadcaster'
-
-interface AppInitializationOptions {
-  /** Router for the app - must be provided */
-  router: Router
-  /** Pinia instance for state management */
-  pinia: Pinia
-  /** I18n instance for internationalization - using any to maintain compatibility with various locale configurations */
-  i18n: I18n<any, any, any, any, any>
-  /** Optional callback to run before mounting the app */
-  beforeMountCallback?: () => void | Promise<void>
-  /** Callback to run after the app is initialized but before mounting */
-  onInitialized?: (app: App, router: Router) => void | Promise<void>
-}
-
-/**
- * Initializes a Vue application with common plugins and services.
- * This function creates a Vue app instance with all the standard plugins
- * and services used across AIRI applications.
- *
- * Note: The router, pinia, and i18n instances must be provided by the caller
- * as they are application-specific and cannot be created in the shared module.
- */
-export async function initializeApp(
-  AppComponent: Component,
-  options: AppInitializationOptions,
-): Promise<App> {
-  const app = createApp(AppComponent)
-    .use(MotionPlugin)
-    .use(autoAnimatePlugin as unknown as Plugin) // TODO: Fix autoAnimatePlugin type error
-    .use(options.router)
-    .use(options.pinia)
-    .use(options.i18n)
-    .use(Tres)
-
-  // Run any custom initialization logic
-  if (options.onInitialized) {
-    await options.onInitialized(app, options.router)
-  }
-
-  // Initialize settings broadcaster connection
-  try {
-    await settingsBroadcaster.connect()
-  }
-  catch (error) {
-    console.error('Failed to connect settings broadcaster:', error)
-  }
-
-  // Run any custom before-mount logic
-  if (options.beforeMountCallback) {
-    await options.beforeMountCallback()
-  }
-
-  return app
-}
diff --git a/packages/stage-ui/src/services/index.ts b/packages/stage-ui/src/services/index.ts
deleted file mode 100644
index 4c47f9201..000000000
--- a/packages/stage-ui/src/services/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { initializeApp } from './app-initializer'
-export { settingsBroadcaster } from './settings-broadcaster'
diff --git a/packages/stage-ui/src/services/settings-broadcaster.ts b/packages/stage-ui/src/services/settings-broadcaster.ts
deleted file mode 100644
index b22fdab5a..000000000
--- a/packages/stage-ui/src/services/settings-broadcaster.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Client } from '@proj-airi/server-sdk'
-
-class SettingsBroadcaster {
-  private client: Client | null = null
-  private connected = false
-  private pendingConfigurations: Array<{ moduleName: string, config: Record<string, unknown> }> = []
-
-  constructor() {
-    this.initClient()
-  }
-
-  private initClient() {
-    try {
-      this.client = new Client({
-        name: 'settings-broadcaster',
-        url: import.meta.env.VITE_AIRI_WS_URL || 'ws://localhost:6121/ws',
-        possibleEvents: [
-          'ui:configure',
-          'module:authenticated',
-        ],
-      })
-
-      this.client.onEvent('module:authenticated', (event) => {
-        if (event.data.authenticated) {
-          this.connected = true
-          // Send any pending configurations
-          this.sendPendingConfigurations()
-        }
-      })
-    }
-    catch (error) {
-      // In a real implementation, you might want to use a proper error handling mechanism
-      // For now, we'll just log the error to comply with linting rules
-      console.error('Failed to initialize SettingsBroadcaster client:', error)
-    }
-  }
-
-  private sendPendingConfigurations() {
-    if (!this.client) {
-      console.warn('SettingsBroadcaster client is not initialized. Pending configurations were not sent.')
-      return
-    }
-    for (const { moduleName, config } of this.pendingConfigurations) {
-      this.client.send({
-        type: 'ui:configure' as const,
-        data: {
-          moduleName,
-          config,
-        },
-      })
-    }
-    this.pendingConfigurations = []
-  }
-
-  public sendConfiguration(moduleName: string, config: Record<string, unknown>): void {
-    if (!this.client) {
-      console.warn('SettingsBroadcaster client is not initialized. Configuration was not sent.', { moduleName, config })
-      return
-    }
-
-    const configData = {
-      type: 'ui:configure' as const,
-      data: {
-        moduleName,
-        config,
-      },
-    }
-
-    if (this.connected) {
-      this.client.send(configData)
-    }
-    else {
-      // Queue the configuration to send when connected
-      this.pendingConfigurations.push({ moduleName, config })
-    }
-  }
-
-  public async connect(): Promise<void> {
-    if (this.client) {
-      await this.client.connect()
-    }
-  }
-
-  public disconnect(): void {
-    if (this.client) {
-      this.client.close()
-    }
-  }
-}
-
-// Create a singleton instance
-export const settingsBroadcaster = new SettingsBroadcaster()
diff --git a/packages/stage-ui/src/stores/configurator.ts b/packages/stage-ui/src/stores/configurator.ts
new file mode 100644
index 000000000..bffe92790
--- /dev/null
+++ b/packages/stage-ui/src/stores/configurator.ts
@@ -0,0 +1,97 @@
+import { Client } from '@proj-airi/server-sdk'
+import { defineStore } from 'pinia'
+import { onMounted, ref } from 'vue'
+
+export const useConfiguratorForAiriSdk = defineStore('configurator:adapter:proj-airi:server-sdk', () => {
+  const connected = ref(false)
+  const client = ref<Client>()
+  const pendingUpdates = ref<Array<{
+    moduleName: string
+    config: Record<string, unknown>
+  }>>([])
+
+  function flushPending() {
+    if (client.value && connected.value) {
+      for (const update of pendingUpdates.value) {
+        client.value.send({
+          type: 'ui:configure' as const,
+          data: {
+            moduleName: update.moduleName,
+            config: update.config,
+          },
+        })
+      }
+
+      pendingUpdates.value = []
+    }
+  }
+
+  function updateFor(moduleName: string, config: Record<string, unknown>) {
+    if (client.value && connected.value) {
+      client.value.send({
+        type: 'ui:configure' as const,
+        data: {
+          moduleName,
+          config,
+        },
+      })
+
+      return
+    }
+
+    pendingUpdates.value.push({ moduleName, config })
+  }
+
+  function init(options?: { token?: string }) {
+    return new Promise((resolve, reject) => {
+      client.value = new Client({
+        name: 'proj-airi:ui:stage',
+        url: import.meta.env.VITE_AIRI_WS_URL || 'ws://localhost:6121/ws',
+        token: options?.token,
+        possibleEvents: [
+          'ui:configure',
+          'module:authenticated',
+        ],
+        onError: (error) => {
+          reject(error)
+        },
+      })
+
+      client.value.onEvent('module:authenticated', (event) => {
+        if (event.data.authenticated) {
+          connected.value = true
+          flushPending()
+          resolve(true)
+        }
+      })
+    })
+  }
+
+  function clearAllPending() {
+    pendingUpdates.value = []
+  }
+
+  function dispose() {
+    flushPending()
+
+    client.value?.close()
+    connected.value = false
+    client.value = undefined
+  }
+
+  onMounted(() => {
+    init()
+  })
+
+  return {
+    connected,
+    client,
+
+    flushPending,
+    clearAllPending,
+    updateFor,
+
+    dispose,
+    init,
+  }
+})
diff --git a/packages/stage-ui/src/stores/modules/discord.ts b/packages/stage-ui/src/stores/modules/discord.ts
index 0d2341801..5fa90dd66 100644
--- a/packages/stage-ui/src/stores/modules/discord.ts
+++ b/packages/stage-ui/src/stores/modules/discord.ts
@@ -2,16 +2,17 @@ import { useLocalStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { computed } from 'vue'
 
-import { settingsBroadcaster } from '../../services/settings-broadcaster'
+import { useConfiguratorForAiriSdk } from '../configurator'
 
 export const useDiscordStore = defineStore('discord', () => {
+  const configurator = useConfiguratorForAiriSdk()
   const enabled = useLocalStorage('settings/discord/enabled', false)
   const token = useLocalStorage('settings/discord/token', '')
 
   function saveSettings() {
     // Data is automatically saved to localStorage via useLocalStorage
     // Also broadcast configuration to backend
-    settingsBroadcaster.sendConfiguration('discord', {
+    configurator.updateFor('discord', {
       token: token.value,
       enabled: enabled.value,
     })
diff --git a/packages/stage-ui/src/stores/modules/gaming-module-factory.ts b/packages/stage-ui/src/stores/modules/gaming-module-factory.ts
index 1c8ebfd53..276298d60 100644
--- a/packages/stage-ui/src/stores/modules/gaming-module-factory.ts
+++ b/packages/stage-ui/src/stores/modules/gaming-module-factory.ts
@@ -2,17 +2,19 @@ import { useLocalStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { computed } from 'vue'
 
-import { settingsBroadcaster } from '../../services/settings-broadcaster'
+import { useConfiguratorForAiriSdk } from '../configurator'
 
 export function createGamingModuleStore(moduleName: string, defaultPort: number) {
   return defineStore(moduleName, () => {
+    const configurator = useConfiguratorForAiriSdk()
+
     const enabled = useLocalStorage(`settings/${moduleName}/enabled`, false)
     const serverAddress = useLocalStorage(`settings/${moduleName}/server-address`, '')
     const serverPort = useLocalStorage<number | null>(`settings/${moduleName}/server-port`, defaultPort)
     const username = useLocalStorage(`settings/${moduleName}/username`, '')
 
     function saveSettings() {
-      settingsBroadcaster.sendConfiguration(moduleName, {
+      configurator.updateFor(moduleName, {
         enabled: enabled.value,
         serverAddress: serverAddress.value,
         serverPort: serverPort.value,
diff --git a/packages/stage-ui/src/stores/modules/twitter.ts b/packages/stage-ui/src/stores/modules/twitter.ts
index da2ae3b89..09c6d4905 100644
--- a/packages/stage-ui/src/stores/modules/twitter.ts
+++ b/packages/stage-ui/src/stores/modules/twitter.ts
@@ -2,9 +2,11 @@ import { useLocalStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { computed } from 'vue'
 
-import { settingsBroadcaster } from '../../services/settings-broadcaster'
+import { useConfiguratorForAiriSdk } from '../configurator'
 
 export const useTwitterStore = defineStore('twitter', () => {
+  const configurator = useConfiguratorForAiriSdk()
+
   const enabled = useLocalStorage('settings/twitter/enabled', false)
   const apiKey = useLocalStorage('settings/twitter/api-key', '')
   const apiSecret = useLocalStorage('settings/twitter/api-secret', '')
@@ -14,7 +16,7 @@ export const useTwitterStore = defineStore('twitter', () => {
   function saveSettings() {
     // Data is automatically saved to localStorage via useLocalStorage
     // Also broadcast configuration to backend
-    settingsBroadcaster.sendConfiguration('twitter', {
+    configurator.updateFor('twitter', {
       enabled: enabled.value,
       apiKey: apiKey.value,
       apiSecret: apiSecret.value,