diff --git a/new-client/index.html b/new-client/index.html
index 81a196a..d7256ce 100644
--- a/new-client/index.html
+++ b/new-client/index.html
@@ -8,7 +8,7 @@
 
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Unbounded:wght@200..900&display=swap" rel="stylesheet">
 
         <link rel="stylesheet" href="/src/shared/styles/reset.css" />
         <link rel="stylesheet" href="/src/shared/styles/sanitize.css" />
diff --git a/new-client/package.json b/new-client/package.json
index c1fb7df..e400431 100644
--- a/new-client/package.json
+++ b/new-client/package.json
@@ -10,13 +10,21 @@
   },
   "dependencies": {
     "@ark-ui/vue": "^5.36.2",
+    "@lucide/vue": "^1.14.0",
+    "@tanstack/vue-query": "^5.100.10",
     "@tauri-apps/plugin-global-shortcut": "^2.3.1",
     "@tauri-apps/plugin-opener": "~2",
     "@tauri-apps/plugin-process": "^2.3.1",
     "@tauri-apps/plugin-updater": "^2.10.1",
     "@vueuse/core": "^14.3.0",
+    "@zag-js/avatar": "^1.40.0",
+    "@zag-js/collapsible": "^1.40.0",
+    "@zag-js/password-input": "^1.40.0",
     "@zag-js/vue": "^1.40.0",
+    "date-fns": "^4.1.0",
+    "mitt": "^3.0.1",
     "primevue": "^4.5.5",
+    "socket.io-client": "^4.8.3",
     "vue": "^3.5.32",
     "vue-router": "^5.0.6"
   },
diff --git a/new-client/src-tauri/target/.rustc_info.json b/new-client/src-tauri/target/.rustc_info.json
new file mode 100644
index 0000000..2a30e1b
--- /dev/null
+++ b/new-client/src-tauri/target/.rustc_info.json
@@ -0,0 +1 @@
+{"rustc_fingerprint":1074701663444030447,"outputs":{"17747080675513052775":{"success":true,"status":"","code":0,"stdout":"rustc 1.95.0 (59807616e 2026-04-14)\nbinary: rustc\ncommit-hash: 59807616e1fa2540724bfbac14d7976d7e4a3860\ncommit-date: 2026-04-14\nhost: x86_64-pc-windows-msvc\nrelease: 1.95.0\nLLVM version: 22.1.2\n","stderr":""},"7971740275564407648":{"success":true,"status":"","code":0,"stdout":"___.exe\nlib___.rlib\n___.dll\n___.dll\n___.lib\n___.dll\nC:\\Users\\opti\\.rustup\\toolchains\\stable-x86_64-pc-windows-msvc\npacked\n___\ndebug_assertions\npanic=\"unwind\"\nproc_macro\ntarget_abi=\"\"\ntarget_arch=\"x86_64\"\ntarget_endian=\"little\"\ntarget_env=\"msvc\"\ntarget_family=\"windows\"\ntarget_feature=\"cmpxchg16b\"\ntarget_feature=\"fxsr\"\ntarget_feature=\"sse\"\ntarget_feature=\"sse2\"\ntarget_feature=\"sse3\"\ntarget_has_atomic=\"128\"\ntarget_has_atomic=\"16\"\ntarget_has_atomic=\"32\"\ntarget_has_atomic=\"64\"\ntarget_has_atomic=\"8\"\ntarget_has_atomic=\"ptr\"\ntarget_os=\"windows\"\ntarget_pointer_width=\"64\"\ntarget_vendor=\"pc\"\nwindows\n","stderr":""}},"successes":{}}
\ No newline at end of file
diff --git a/new-client/src-tauri/target/debug/.fingerprint/app-4e7dc2d6835c5d74/bin-app.json b/new-client/src-tauri/target/debug/.fingerprint/app-4e7dc2d6835c5d74/bin-app.json
new file mode 100644
index 0000000..8db7964
--- /dev/null
+++ b/new-client/src-tauri/target/debug/.fingerprint/app-4e7dc2d6835c5d74/bin-app.json
@@ -0,0 +1 @@
+{"rustc":8891013984288978370,"features":"[]","declared_features":"[]","target":12687594469746301899,"profile":8731458305071235362,"path":4942398508502643691,"deps":[[1322478694103194923,"app_lib",false,8070585750093435046],[1322478694103194923,"build_script_build",false,16691984141835454783],[2700615264719386388,"tauri_plugin_opener",false,7350390124577390804],[4736393929136623228,"tauri_plugin_global_shortcut",false,15267933955632970549],[5673630358394410545,"tauri_plugin_updater",false,14019643380268120922],[8695090098768911186,"windows",false,17298248671909505349],[10630857666389190470,"log",false,5016507518680283320],[12653526805862679340,"tauri_plugin_log",false,15855325777720298125],[13548984313718623784,"serde",false,7298479236282139191],[13795362694956882968,"serde_json",false,4974751760879812175],[13905323280135927163,"tauri_plugin_single_instance",false,10523578089830730283],[14261240476176424521,"tauri",false,8738078672178348289],[18393575805749125025,"tauri_plugin_process",false,17190748950968290852]],"local":[{"CheckDepInfo":{"dep_info":"debug\\.fingerprint\\app-4e7dc2d6835c5d74\\dep-bin-app","checksum":false}}],"rustflags":[],"config":8247474407144887393,"compile_kind":0}
\ No newline at end of file
diff --git a/new-client/src-tauri/target/debug/app_lib.dll.lib b/new-client/src-tauri/target/debug/app_lib.dll.lib
new file mode 100644
index 0000000..0814d1d
Binary files /dev/null and b/new-client/src-tauri/target/debug/app_lib.dll.lib differ
diff --git a/new-client/src/app/Error.vue b/new-client/src/app/Error.vue
index ef06c66..e58e0d0 100644
--- a/new-client/src/app/Error.vue
+++ b/new-client/src/app/Error.vue
@@ -24,12 +24,19 @@ defineProps<{
 
   &__image {
     width: 120px;
-    margin-bottom: 32px;
+    margin-bottom: var(--space-6);
     user-select: none;
+    opacity: 0.9;
   }
 
   &__message {
-    color: var(--text-muted);
+    @include font-body-bold;
+
+    padding: var(--space-2) var(--space-3);
+    background-color: var(--paper);
+    outline: var(--border-w) solid var(--ink);
+    outline-offset: calc(var(--border-w) * -1);
+    box-shadow: var(--shadow);
   }
 }
 </style>
diff --git a/new-client/src/app/Preloader.vue b/new-client/src/app/Preloader.vue
index 4a7dd6d..1567ec6 100644
--- a/new-client/src/app/Preloader.vue
+++ b/new-client/src/app/Preloader.vue
@@ -16,10 +16,14 @@
   height: 100%;
 
   > p {
+    @include font-body-bold;
+
     margin: auto;
-    padding: 8px 16px;
-    border-radius: 16px;
-    background-color: var(--bg-light);
+    padding: var(--space-2) var(--space-3);
+    background-color: var(--paper);
+    outline: var(--border-w) solid var(--ink);
+    outline-offset: calc(var(--border-w) * -1);
+    box-shadow: var(--shadow);
   }
 }
 </style>
diff --git a/new-client/src/app/Updater.vue b/new-client/src/app/Updater.vue
index 875539d..6a84174 100644
--- a/new-client/src/app/Updater.vue
+++ b/new-client/src/app/Updater.vue
@@ -21,10 +21,14 @@ const { checking, lastUpdate } = useUpdater()
   height: 100%;
 
   > p {
+    @include font-body-bold;
+
     margin: auto;
-    padding: 8px 16px;
-    border-radius: 16px;
-    background-color: var(--bg-light);
+    padding: var(--space-2) var(--space-3);
+    background-color: var(--paper);
+    outline: var(--border-w) solid var(--ink);
+    outline-offset: calc(var(--border-w) * -1);
+    box-shadow: var(--shadow);
   }
 }
 </style>
diff --git a/new-client/src/app/bootstrap/app.ts b/new-client/src/app/bootstrap/app.ts
index 80d4b7a..6b43fdd 100644
--- a/new-client/src/app/bootstrap/app.ts
+++ b/new-client/src/app/bootstrap/app.ts
@@ -2,6 +2,7 @@ import { useAuth } from '@shared/composables/use-auth'
 import { createApp } from 'vue'
 import App from '../App.vue'
 import routerPlugin, { router } from '../plugins/router'
+import tanstackQueryPlugin from '../plugins/tanstack-query'
 
 const mountPoint = '#app'
 
@@ -14,8 +15,14 @@ export default async function () {
   await router.isReady()
 
   if (!authorized.value && router.currentRoute.value.meta.auth === undefined) {
-    router.push('/auth/login')
+    await router.push({ name: '/auth/login', replace: true })
   }
 
+  if (authorized.value && router.currentRoute.value.meta.auth === 'guest') {
+    await router.push({ name: '/', replace: true })
+  }
+
+  app.use(tanstackQueryPlugin)
+
   app.mount(mountPoint)
 }
diff --git a/new-client/src/app/entry.ts b/new-client/src/app/entry.ts
index 0ab2aff..679296d 100644
--- a/new-client/src/app/entry.ts
+++ b/new-client/src/app/entry.ts
@@ -13,16 +13,16 @@ import checkUpdates from './bootstrap/updater'
 
     await authorize()
 
-    initializeApp()
+    await initializeApp()
   }
   catch (error) {
     console.error(error)
 
     if (error instanceof Error && error.message) {
-      showError(error.message)
+      await showError(error.message)
     }
     else {
-      showError('Something went wrong')
+      await showError('Something went wrong')
     }
   }
   finally {
diff --git a/new-client/src/app/plugins/router.ts b/new-client/src/app/plugins/router.ts
index 6a38f6f..973448f 100644
--- a/new-client/src/app/plugins/router.ts
+++ b/new-client/src/app/plugins/router.ts
@@ -1,4 +1,5 @@
 import type { Component, FunctionPlugin } from 'vue'
+import { useAuth } from '@shared/composables/use-auth'
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'
 
@@ -13,6 +14,23 @@ export const router = createRouter({
   history: createWebHistory(),
   routes,
 })
+router.onError((e) => {
+  console.log('wtf', e)
+})
+
+router.isReady().then(() => {
+  router.beforeEach((to) => {
+    const { authorized } = useAuth()
+
+    if (authorized.value && to.meta.auth === 'guest') {
+      return { name: '/', replace: true }
+    }
+
+    if (!authorized.value && to.meta.auth === undefined) {
+      return { name: '/auth/login', replace: true }
+    }
+  })
+})
 
 export default {
   install(app) {
diff --git a/new-client/src/app/plugins/tanstack-query.ts b/new-client/src/app/plugins/tanstack-query.ts
new file mode 100644
index 0000000..ea934de
--- /dev/null
+++ b/new-client/src/app/plugins/tanstack-query.ts
@@ -0,0 +1,8 @@
+import type { FunctionPlugin } from 'vue'
+import { VueQueryPlugin } from '@tanstack/vue-query'
+
+export default {
+  install(app) {
+    app.use(VueQueryPlugin, {})
+  },
+} as FunctionPlugin
diff --git a/new-client/src/pages/auth.vue b/new-client/src/pages/auth.vue
index 092fa96..504b2d7 100644
--- a/new-client/src/pages/auth.vue
+++ b/new-client/src/pages/auth.vue
@@ -10,5 +10,6 @@ definePage({
     auth: 'guest',
     layout: AuthLayout,
   },
+  // redirect: '/auth/login',
 })
 </script>
diff --git a/new-client/src/pages/auth/login.vue b/new-client/src/pages/auth/login.vue
index 4f23ef8..638e7a3 100644
--- a/new-client/src/pages/auth/login.vue
+++ b/new-client/src/pages/auth/login.vue
@@ -1,35 +1,71 @@
 <template>
-  <div class="login-page">
-    <form class="login-page__form" @submit.prevent="">
-      <div class="login-page__fields">
-        <ChadInput placeholder="Login" error="Jopa" />
-        <ChadInput placeholder="Password" />
-        <ChadPasswordInput placeholder="Password" label="Test" />
-      </div>
+  <ChadCard class="login-page" as="form" title="Sign In" @submit.prevent="submit">
+    <div class="login-page__fields">
+      <ChadInput v-model="formData.username" label="Username" />
+      <ChadPasswordInput v-model="formData.password" label="Password" />
+    </div>
 
-      <ChadButton class="login-page__submit" full type="submit">
+    <template #actions>
+      <ChadButton full type="submit" :disabled="!valid" :loading="submitting">
         Let's go
       </ChadButton>
-    </form>
-  </div>
+    </template>
+
+    <template #bottom>
+      Don't have an account?
+
+      <RouterLink :to="{ name: '/auth/register' }">
+        Register
+      </RouterLink>
+    </template>
+  </ChadCard>
 </template>
 
 <script setup lang="ts">
 import ChadButton from '@shared/components/ui/Button.vue'
+import ChadCard from '@shared/components/ui/Card.vue'
 import ChadInput from '@shared/components/ui/Input.vue'
 import ChadPasswordInput from '@shared/components/ui/PasswordInput.vue'
+import { useAuth } from '@shared/composables/use-auth.ts'
+import { computed, reactive, ref } from 'vue'
+
+const { login } = useAuth()
+
+const submitting = ref(false)
+
+const formData = reactive({
+  username: '',
+  password: '',
+})
+
+const valid = computed(() => {
+  if (!formData.username)
+    return false
+
+  if (!formData.password)
+    return false
+
+  return true
+})
+
+async function submit() {
+  if (!valid.value || submitting.value)
+    return
+
+  submitting.value = true
+
+  await login(formData.username, formData.password)
+
+  submitting.value = false
+}
 </script>
 
 <style lang="scss">
 .login-page {
   &__fields {
     > *:not(:last-child) {
-      margin-bottom: 16px;
+      margin-bottom: var(--space-4);
     }
   }
-
-  &__submit {
-    margin-top: 24px;
-  }
 }
 </style>
diff --git a/new-client/src/pages/auth/register.vue b/new-client/src/pages/auth/register.vue
index b436366..8eb2d35 100644
--- a/new-client/src/pages/auth/register.vue
+++ b/new-client/src/pages/auth/register.vue
@@ -1,6 +1,76 @@
 <template>
-  Register page
+  <ChadCard class="register-page" as="form" title="Register" @submit.prevent="submit">
+    <div class="register-page__fields">
+      <ChadInput v-model="formData.username" label="Username" />
+      <ChadPasswordInput v-model="formData.password" label="Password" />
+      <ChadPasswordInput v-model="formData.repeatPassword" label="Repeat password" />
+    </div>
+
+    <template #actions>
+      <ChadButton full type="submit" :disabled="!valid" :loading="submitting">
+        Create an account
+      </ChadButton>
+    </template>
+
+    <template #bottom>
+      Already have an account?
+
+      <RouterLink :to="{ name: '/auth/login' }">
+        Sign In
+      </RouterLink>
+    </template>
+  </ChadCard>
 </template>
 
 <script setup lang="ts">
+import ChadButton from '@shared/components/ui/Button.vue'
+import ChadCard from '@shared/components/ui/Card.vue'
+import ChadInput from '@shared/components/ui/Input.vue'
+import ChadPasswordInput from '@shared/components/ui/PasswordInput.vue'
+import { useAuth } from '@shared/composables/use-auth.ts'
+import { computed, reactive, ref } from 'vue'
+
+const { login } = useAuth()
+
+const submitting = ref(false)
+
+const formData = reactive({
+  username: '',
+  password: '',
+  repeatPassword: '',
+})
+
+const valid = computed(() => {
+  if (!formData.username)
+    return false
+
+  if (!formData.password)
+    return false
+
+  if (formData.password !== formData.repeatPassword)
+    return false
+
+  return true
+})
+
+async function submit() {
+  if (!valid.value || submitting.value)
+    return
+
+  submitting.value = true
+
+  await login(formData.username, formData.password)
+
+  submitting.value = false
+}
 </script>
+
+<style lang="scss">
+.register-page {
+  &__fields {
+    > *:not(:last-child) {
+      margin-bottom: var(--space-4);
+    }
+  }
+}
+</style>
diff --git a/new-client/src/pages/index.vue b/new-client/src/pages/index.vue
index e84d75b..e7b3d57 100644
--- a/new-client/src/pages/index.vue
+++ b/new-client/src/pages/index.vue
@@ -1,5 +1,7 @@
 <template>
-  Index page
+  <Chat />
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import Chat from '@widgets/chat/ui/Chat.vue'
+</script>
diff --git a/new-client/src/shared/api/generated-chad-api.ts b/new-client/src/shared/api/generated-chad-api.ts
index 7f4256c..5c4e4ac 100644
--- a/new-client/src/shared/api/generated-chad-api.ts
+++ b/new-client/src/shared/api/generated-chad-api.ts
@@ -232,7 +232,7 @@ export class HttpClient<SecurityDataType = unknown> {
     fetch(...fetchParams);
 
   private baseApiParams: RequestParams = {
-    credentials: "same-origin",
+    credentials: "include",
     headers: {},
     redirect: "follow",
     referrerPolicy: "no-referrer",
diff --git a/new-client/src/shared/components/AppLogo.vue b/new-client/src/shared/components/AppLogo.vue
index 4615f70..4aaf8b3 100644
--- a/new-client/src/shared/components/AppLogo.vue
+++ b/new-client/src/shared/components/AppLogo.vue
@@ -17,15 +17,21 @@ const { version } = useApp()
 
 <style lang="scss">
 .app-logo {
+  background-color: var(--ink);
+  padding: var(--space-2);
+  text-align: center;
+
   &__title {
-    color: var(--primary);
-    font-weight: 700;
-    line-height: 20px;
+    @include font-display-22;
+
+    color: var(--yellow);
   }
 
   &__version {
-    font-size: 0.75rem;
-    color: var(--text-muted);
+    @include font-micro;
+
+    color: var(--grey-3);
+    margin-top: var(--space-1);
   }
 }
 </style>
diff --git a/new-client/src/shared/components/ui/Avatar.vue b/new-client/src/shared/components/ui/Avatar.vue
new file mode 100644
index 0000000..224ee9f
--- /dev/null
+++ b/new-client/src/shared/components/ui/Avatar.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="chad-avatar" v-bind="api.getRootProps()">
+    <span class="chad-avatar__fallback" v-bind="api.getFallbackProps()">{{ fallback }}</span>
+    <img class="chad-avatar__image" :alt="fallback" :src="src" v-bind="api.getImageProps()">
+  </div>
+</template>
+
+<script setup lang="ts">
+import * as avatar from '@zag-js/avatar'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
+
+defineOptions({
+  name: 'ChadAvatar',
+})
+
+defineProps<{
+  src: string
+  fallback: string
+  size?: 'sm'
+}>()
+
+const service = useMachine(avatar.machine, { id: useId() })
+
+const api = computed(() => avatar.connect(service, normalizeProps))
+</script>
+
+<style lang="scss">
+.chad-avatar {
+  outline: var(--border-w) solid var(--ink);
+  outline-offset: calc(var(--border-w) * -1);
+  width: 40px;
+  aspect-ratio: 1;
+
+  &__fallback {
+    @include font-label;
+
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+</style>
diff --git a/new-client/src/shared/components/ui/Button.vue b/new-client/src/shared/components/ui/Button.vue
index 32c100d..83deb62 100644
--- a/new-client/src/shared/components/ui/Button.vue
+++ b/new-client/src/shared/components/ui/Button.vue
@@ -2,6 +2,7 @@
   <button
     class="chad-button"
     :data-loading="loading || undefined"
+    :data-disabled="disabled || undefined"
     :disabled="disabled"
     :type="type"
     :data-full="full || undefined"
@@ -32,28 +33,43 @@ interface Props {
 
 <style lang="scss">
 .chad-button {
+  @include font-display-14;
+
   border: none;
-  color: var(--bg-dark);
-  border-radius: 12px;
-  padding-inline: 12px;
+  color: var(--ink);
+  padding-inline: var(--space-3);
   height: 44px;
-  background-color: var(--primary);
+  background-color: var(--yellow);
   font-weight: 700;
   text-align: center;
   cursor: pointer;
-  transition-property: color, background-color;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
-  outline: none;
+  outline: var(--border-w) solid var(--ink);
+  outline-offset: calc(var(--border-w) * -1);
 
   &[data-full] {
     width: 100%;
   }
 
   &:hover,
-  &:focus,
+  &:focus {
+    background-color: var(--yellow-deep);
+  }
+
   &:active {
-    background-color: var(--secondary);
+    background-color: var(--ink);
+    color: var(--yellow);
+  }
+
+  &[data-disabled],
+  &[data-loading],
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--grey-1);
+    color: var(--grey-3);
+  }
+
+  &[data-loading] {
+    cursor: wait;
   }
 }
 </style>
diff --git a/new-client/src/shared/components/ui/Card.vue b/new-client/src/shared/components/ui/Card.vue
new file mode 100644
index 0000000..c3a4a25
--- /dev/null
+++ b/new-client/src/shared/components/ui/Card.vue
@@ -0,0 +1,68 @@
+<template>
+  <Component :is="as" class="chad-card">
+    <p v-if="title" class="chad-card__title">
+      {{ title }}
+    </p>
+
+    <div class="chad-card__content">
+      <slot />
+    </div>
+
+    <div v-if="!!slots.actions" class="chad-card__actions">
+      <slot name="actions" />
+    </div>
+
+    <div v-if="!!slots.bottom" class="chad-card__bottom">
+      <slot name="bottom" />
+    </div>
+  </Component>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: 'ChadCard',
+})
+
+withDefaults(
+  defineProps<Props>(),
+  {
+    as: 'div',
+  },
+)
+
+const slots = defineSlots<{
+  default: []
+  actions: []
+  bottom: []
+}>()
+
+interface Props {
+  as?: string
+  title?: string
+}
+</script>
+
+<style lang="scss">
+.chad-card {
+  display: block;
+  background-color: var(--paper);
+  padding: var(--space-6);
+  outline: var(--border-w) solid var(--ink);
+  outline-offset: calc(var(--border-w) * -1);
+  box-shadow: var(--shadow);
+
+  &__title {
+    @include font-display-22;
+
+    margin-bottom: var(--space-6);
+  }
+
+  &__actions {
+    margin-top: var(--space-6);
+  }
+
+  &__bottom {
+    margin-top: var(--space-4);
+  }
+}
+</style>
diff --git a/new-client/src/shared/components/ui/Input.vue b/new-client/src/shared/components/ui/Input.vue
index 9c2b8a2..187027d 100644
--- a/new-client/src/shared/components/ui/Input.vue
+++ b/new-client/src/shared/components/ui/Input.vue
@@ -1,40 +1,47 @@
 <template>
-  <FieldRoot class="chad-input" :invalid="!!error">
-    <FieldLabel v-if="label" class="chad-input__label">
+  <div
+    class="chad-input"
+    :class="{
+      'is-invalid': !!error,
+    }"
+  >
+    <label v-if="label" :for="inputId" class="chad-input__label">
       {{ label }}
-    </FieldLabel>
+    </label>
 
-    <div class="chad-input__control">
-      <FieldInput v-model="modelValue" class="chad-input__input" :placeholder="placeholder" type="text" />
-    </div>
+    <input :id="inputId" v-model="modelValue" class="chad-input__input" :placeholder="placeholder" type="text">
 
-    <FieldHelperText v-if="helper" class="chad-input__helper">
+    <p v-if="helper" class="chad-input__helper">
       {{ helper }}
-    </FieldHelperText>
-    <FieldErrorText v-if="error" class="chad-input__error">
+    </p>
+    <p v-if="error" class="chad-input__error">
       {{ error }}
-    </FieldErrorText>
-  </FieldRoot>
+    </p>
+  </div>
 </template>
 
 <script setup lang="ts">
-import type { FieldInputProps, FieldRootProps } from '@ark-ui/vue/field'
-import { FieldErrorText, FieldHelperText, FieldInput, FieldLabel, FieldRoot } from '@ark-ui/vue/field'
+import { computed, useId } from 'vue'
 
-defineOptions({
-  name: 'ChadInput',
-})
-
-defineProps<Props>()
-
-const modelValue = defineModel<FieldInputProps['modelValue']>('modelValue')
-
-interface Props extends Omit<FieldRootProps, 'ids' | 'invalid'> {
+interface Props {
+  id?: string
   label?: string
   placeholder?: string
   helper?: string
   error?: string
 }
+
+defineOptions({
+  name: 'ChadInput',
+})
+
+const props = defineProps<Props>()
+
+const modelValue = defineModel<string>('modelValue')
+
+const inputId = computed(() => {
+  return props.id ?? `input-${useId()}`
+})
 </script>
 
 <style lang="scss">
@@ -42,47 +49,30 @@ interface Props extends Omit<FieldRootProps, 'ids' | 'invalid'> {
   $self: &;
 
   &__label {
+    @include font-label;
+
     display: block;
-    color: var(--text-muted);
-    margin-bottom: 6px;
-    font-size: 0.75rem;
-  }
-
-  &__control {
-    border-radius: 12px;
-    padding-inline: 12px;
-    height: 44px;
-    background-color: var(--bg-light);
-    border: none;
-    outline: 1px solid var(--border);
-    outline-offset: -1px;
-    font-size: 1rem;
-    transition-property: background-color, outline-color;
-    transition-duration: 150ms;
-    transition-timing-function: ease-out;
-
-    &:hover,
-    &:focus-within {
-      outline-color: var(--primary);
-    }
-
-    #{$self}[data-invalid] & {
-      outline-color: var(--danger);
-    }
+    color: var(--grey-3);
+    margin-bottom: var(--space-2);
   }
 
   &__input {
+    padding-inline: var(--space-3);
+    height: 44px;
+    background-color: var(--paper);
+    outline: var(--border-w) solid var(--ink);
+    outline-offset: calc(var(--border-w) * -1);
     width: 100%;
-    height: 100%;
-    background: none;
     border: none;
-    outline: none;
-    color: var(--text);
-    caret-color: var(--secondary);
+    color: var(--ink);
+    caret-color: var(--yellow);
+    caret-shape: block;
 
     &::placeholder {
-      color: var(--text-muted);
+      font: inherit;
+      color: var(--grey-3);
       opacity: 0.4;
+      font-style: italic;
     }
 
     &:-webkit-autofill,
@@ -94,21 +84,26 @@ interface Props extends Omit<FieldRootProps, 'ids' | 'invalid'> {
       box-shadow: 0 0 0px 1000px var(--bg) inset;
       background-color: var(--bg);
     }
+
+    #{$self}.is-invalid & {
+      outline-color: var(--red);
+    }
   }
 
   &__helper,
   &__error {
+    @include font-micro;
+
     display: block;
-    font-size: 0.75rem;
-    margin-top: 6px;
+    margin-top: var(--space-1);
   }
 
   &__helper {
-    color: var(--text-muted);
+    color: var(--grey-3);
   }
 
   &__error {
-    color: var(--danger);
+    color: var(--red);
   }
 }
 </style>
diff --git a/new-client/src/shared/components/ui/PasswordInput.vue b/new-client/src/shared/components/ui/PasswordInput.vue
index a672572..e88e004 100644
--- a/new-client/src/shared/components/ui/PasswordInput.vue
+++ b/new-client/src/shared/components/ui/PasswordInput.vue
@@ -1,126 +1,131 @@
 <template>
-  <FieldRoot class="chad-password-input" :invalid="!!error">
-    <FieldLabel v-if="label" class="chad-password-input__label">
+  <div class="chad-password-input" v-bind="api.getRootProps()">
+    <label v-if="label" class="chad-password-input__label" v-bind="api.getLabelProps()">
       {{ label }}
-    </FieldLabel>
+    </label>
 
-    <PasswordInputRoot>
-      <PasswordInputControl class="chad-password-input__control">
-        <PasswordInputInput v-model="modelValue" class="chad-password-input__input" :placeholder="placeholder" />
-        <PasswordInputVisibilityTrigger class="chad-password-input__visibility-trigger">
-          <PasswordInputIndicator>
-            Z
-            <template #fallback>
-              X
-            </template>
-          </PasswordInputIndicator>
-        </PasswordInputVisibilityTrigger>
-      </PasswordInputControl>
-    </PasswordInputRoot>
+    <div class="chad-password-input__control" v-bind="api.getControlProps()">
+      <input v-bind="api.getInputProps()" v-model="modelValue" class="chad-password-input__input">
 
-    <FieldHelperText v-if="helper" class="chad-password-input__helper">
-      {{ helper }}
-    </FieldHelperText>
-    <FieldErrorText v-if="error" class="chad-password-input__error">
-      {{ error }}
-    </FieldErrorText>
-  </FieldRoot>
+      <button class="chad-password-input__visibility-trigger" v-bind="api.getVisibilityTriggerProps()">
+        <Component :is="api.visible ? EyeIcon : EyeOffIcon " v-bind="api.getIndicatorProps()" />
+      </button>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import type { FieldInputProps, FieldRootProps } from '@ark-ui/vue/field'
-import { FieldErrorText, FieldHelperText, FieldLabel, FieldRoot } from '@ark-ui/vue/field'
-import { PasswordInputControl, PasswordInputIndicator, PasswordInputInput, PasswordInputRoot, PasswordInputVisibilityTrigger } from '@ark-ui/vue/password-input'
+import { EyeIcon, EyeOffIcon } from '@lucide/vue'
+import * as passwordInput from '@zag-js/password-input'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
 
-defineOptions({
-  name: 'ChadPasswordInput',
-})
-
-defineProps<Props>()
-
-const modelValue = defineModel<FieldInputProps['modelValue']>('modelValue')
-
-interface Props extends Omit<FieldRootProps, 'ids' | 'invalid'> {
+interface Props {
+  id?: string
   label?: string
   placeholder?: string
   helper?: string
   error?: string
 }
+
+defineOptions({
+  name: 'ChadPasswordInput',
+})
+
+const props = defineProps<Props>()
+
+const modelValue = defineModel<string>('modelValue')
+
+const inputId = computed(() => {
+  return props.id ?? `input-${useId()}`
+})
+
+const service = useMachine(passwordInput.machine, computed(() => {
+  return {
+    id: inputId.value,
+    ignorePasswordManagers: true,
+    autoComplete: undefined,
+  }
+}))
+
+const api = computed(() => passwordInput.connect(service, normalizeProps))
 </script>
 
 <style lang="scss">
 .chad-password-input {
+  $self: &;
+
   &__label {
+    @include font-label;
+
     display: block;
-    color: var(--text-muted);
-    margin-bottom: 6px;
-    font-size: 0.75rem;
+    color: var(--grey-3);
+    margin-bottom: var(--space-2);
   }
 
   &__control {
-    position: relative;
-    border-radius: 12px;
-    padding-inline: 12px;
+    display: flex;
+    align-items: center;
     height: 44px;
-    width: 100%;
-    background-color: var(--bg-light);
-    border: none;
-    outline: 1px solid var(--border);
-    outline-offset: -1px;
-    color: var(--text);
-    caret-color: var(--secondary);
-    font-size: 1rem;
-
-    &:hover,
-    &:focus {
-      outline-color: var(--primary);
-    }
-
-    &::placeholder {
-      color: var(--text-muted);
-      opacity: 0.4;
-    }
-
-    &[data-invalid] {
-      outline-color: var(--danger);
-    }
-
-    &:-webkit-autofill,
-    &:-webkit-autofill:enabled,
-    &:-webkit-autofill:hover,
-    &:-webkit-autofill:focus {
-      -webkit-text-fill-color: var(--text);
-      -webkit-box-shadow: 0 0 0px 1000px var(--bg) inset;
-      box-shadow: 0 0 0px 1000px var(--bg) inset;
-      background-color: var(--bg);
-    }
   }
 
   &__input {
+    flex: 1;
+    padding-inline: var(--space-3);
+    background-color: var(--paper);
+    outline: var(--border-w) solid var(--ink);
+    outline-offset: calc(var(--border-w) * -1);
     width: 100%;
     height: 100%;
-    background: none;
     border: none;
-    outline: none;
+    color: var(--ink);
+    caret-color: var(--yellow);
+    caret-shape: block;
+
+    &::placeholder {
+      font: inherit;
+      color: var(--grey-3);
+      opacity: 0.4;
+      font-style: italic;
+    }
+
+    &[data-state='invalid'] {
+      outline-color: var(--red);
+    }
   }
 
   &__visibility-trigger {
-    position: absolute;
+    flex-shrink: 0;
+    background-color: var(--grey-1);
+    border: var(--border-w) solid var(--ink);
+    aspect-ratio: 1;
+    border-left: 0;
+    height: 100%;
+
+    &:hover,
+    &:focus {
+      background-color: var(--grey-2);
+    }
+
+    &:active {
+      background-color: var(--grey-3);
+    }
   }
 
   &__helper,
   &__error {
+    @include font-micro;
+
     display: block;
-    font-size: 0.75rem;
-    margin-top: 6px;
+    margin-top: var(--space-1);
   }
 
   &__helper {
-    color: var(--text-muted);
+    color: var(--grey-3);
   }
 
   &__error {
-    color: var(--danger);
+    color: var(--red);
   }
 }
 </style>
diff --git a/new-client/src/shared/composables/use-auth.ts b/new-client/src/shared/composables/use-auth.ts
index d7b0182..c8e6421 100644
--- a/new-client/src/shared/composables/use-auth.ts
+++ b/new-client/src/shared/composables/use-auth.ts
@@ -1,4 +1,5 @@
 import type { User } from '../api/generated-chad-api'
+import { router } from '@app/plugins/router'
 import { createGlobalState } from '@vueuse/core'
 import { computed, readonly, shallowRef } from 'vue'
 import api from '../api/client'
@@ -20,6 +21,8 @@ export const useAuth = createGlobalState(() => {
       })
 
       setMe(response.data)
+
+      await router.push({ name: '/', replace: true })
     }
     catch {
       setMe(undefined)
@@ -34,6 +37,8 @@ export const useAuth = createGlobalState(() => {
       })
 
       setMe(response.data)
+
+      await router.push({ name: '/', replace: true })
     }
     catch {}
   }
@@ -43,6 +48,8 @@ export const useAuth = createGlobalState(() => {
       await api.chad.authLogout()
 
       setMe(undefined)
+
+      await router.push({ name: '/auth/login' })
     }
     catch {}
   }
diff --git a/new-client/src/shared/composables/use-event-bus.ts b/new-client/src/shared/composables/use-event-bus.ts
new file mode 100644
index 0000000..6ecf5ec
--- /dev/null
+++ b/new-client/src/shared/composables/use-event-bus.ts
@@ -0,0 +1,43 @@
+import type { EventType } from 'mitt'
+import mitt from 'mitt'
+
+export interface AppEvents extends Record<EventType, unknown> {
+  // 'socket:connected': void
+  // 'socket:disconnected': void
+  // 'socket:authenticated': { socketId: string }
+  //
+  // 'client:added': ChadClient
+  // 'client:removed': ChadClient
+  // 'client:updated': { socketId: string, oldClient: ChadClient, updatedClient: Partial<ChadClient> }
+  //
+  // 'consumer:added': Consumer
+  // 'consumer:removed': Consumer
+  // 'consumer:paused': Consumer
+  // 'consumer:resumed': Consumer
+  //
+  // 'producer:added': Producer
+  // 'producer:removed': Producer
+  // 'producer:paused': Producer
+  // 'producer:resumed': Producer
+
+  'audio:muted': void
+  'audio:unmuted': void
+  'output:muted': void
+  'output:unmuted': void
+  'video:enabled': void
+  'video:disabled': void
+  'share:enabled': void
+  'share:disabled': void
+
+  'chat:new-message': void
+}
+
+const emitter = mitt<AppEvents>()
+
+export function useEventBus() {
+  return {
+    emit: emitter.emit,
+    on: emitter.on,
+    off: emitter.off,
+  }
+}
diff --git a/new-client/src/shared/composables/use-signaling.ts b/new-client/src/shared/composables/use-signaling.ts
new file mode 100644
index 0000000..af06f62
--- /dev/null
+++ b/new-client/src/shared/composables/use-signaling.ts
@@ -0,0 +1,87 @@
+import type { Socket } from 'socket.io-client'
+import { createSharedComposable } from '@vueuse/core'
+import { io } from 'socket.io-client'
+import { parseURL } from 'ufo'
+import { onScopeDispose, ref, shallowRef, watch } from 'vue'
+import { useAuth } from './use-auth'
+import { useEventBus } from './use-event-bus'
+
+export const useSignaling = createSharedComposable(() => {
+  const { emit } = useEventBus()
+  const { me } = useAuth()
+
+  const socket = shallowRef<Socket>()
+
+  const connected = ref(false)
+
+  watch(socket, (socket, prevSocket) => {
+    if (prevSocket) {
+      prevSocket.close()
+    }
+
+    if (!socket) {
+      return
+    }
+
+    if (import.meta.dev) {
+      socket.onAny((event, ...args) => {
+        console.info('[onAny]', event, args)
+      })
+
+      socket.onAnyOutgoing((event, ...args) => {
+        console.info('[onAnyOutgoing]', event, args)
+      })
+    }
+
+    socket.on('connect', async () => {
+      connected.value = true
+    })
+
+    socket.on('disconnect', async () => {
+      connected.value = false
+    })
+  }, { immediate: true, flush: 'sync' })
+
+  watch(connected, (connected) => {
+    if (connected)
+      emit('socket:connected')
+    else
+      emit('socket:disconnected')
+  }, { immediate: true })
+
+  watch(me, (me) => {
+    if (!me) {
+      socket.value?.close()
+      socket.value = undefined
+    }
+  })
+
+  onScopeDispose(() => {
+    socket.value?.close()
+    socket.value = undefined
+  })
+
+  function connect() {
+    if (socket.value || !me.value)
+      return
+
+    const { protocol, host, pathname } = parseURL(__API_BASE_URL__)
+
+    const uri = host ? `${protocol}//${host}` : ``
+
+    socket.value = io(uri, {
+      path: `${pathname}/ws`,
+      transports: ['websocket'],
+      withCredentials: true,
+      auth: {
+        userId: me.value.id,
+      },
+    })
+  }
+
+  return {
+    socket,
+    connected,
+    connect,
+  }
+})
diff --git a/new-client/src/shared/layouts/Auth.vue b/new-client/src/shared/layouts/Auth.vue
index eaedcbe..227a9b2 100644
--- a/new-client/src/shared/layouts/Auth.vue
+++ b/new-client/src/shared/layouts/Auth.vue
@@ -27,18 +27,12 @@ defineOptions({
   &__container {
     margin: auto;
     width: 100%;
-    max-width: 380px;
+    max-width: 440px;
   }
 
   &__logo {
-    text-align: center;
-    margin-bottom: 24px;
-  }
-
-  &__content {
-    padding: 24px;
-    background-color: var(--bg);
-    border-radius: 36px;
+    justify-self: center;
+    margin-bottom: var(--space-6);
   }
 }
 </style>
diff --git a/new-client/src/shared/layouts/Default.vue b/new-client/src/shared/layouts/Default.vue
index eae6993..ee812ff 100644
--- a/new-client/src/shared/layouts/Default.vue
+++ b/new-client/src/shared/layouts/Default.vue
@@ -1,30 +1,42 @@
 <template>
   <div class="default-layout">
-    <header class="app-header">
-      <div class="app-header__sidebar">
-        <AppLogo />
+    <header class="header">
+      <div class="header__left">
+        <p class="header__app-title">
+          Chad
+        </p>
+
+        <p class="header__version">
+          {{ version }}
+        </p>
       </div>
-      <div class="app-header__content">
-        Header
+
+      <div class="header__right">
+        <p class="header__title">
+          Messages
+        </p>
       </div>
     </header>
 
-    <aside class="app-sidebar">
-      Sidebar
+    <aside class="sidebar">
+      <ChannelList class="sidebar__channel-list" />
     </aside>
 
-    <div class="default-layout__content">
+    <div class="content">
       <slot />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import AppLogo from '@shared/components/AppLogo.vue'
+import { useApp } from '@shared/composables/use-app.js'
+import ChannelList from '@widgets/channel-list/ui/ChannelList.vue'
 
 defineOptions({
   name: 'DefaultLayout',
 })
+
+const { version } = useApp()
 </script>
 
 <style lang="scss">
@@ -37,46 +49,62 @@ defineOptions({
   grid-template-rows: auto 1fr;
   grid-template-areas: 'header header' 'sidebar content';
 
-  &__content {
-    grid-area: content;
-  }
-
-  .app-header {
+  .header {
     grid-area: header;
     display: grid;
     grid-template-columns: var(--sidebar-width) 1fr;
     align-items: stretch;
     background-color: var(--bg);
     border-bottom: 1px solid var(--border-muted);
-    height: 52px;
+    height: 56px;
+    border-bottom: var(--border-w) solid var(--ink);
 
-    &__sidebar {
-      border-right: 1px solid var(--border-muted);
-    }
-
-    &__sidebar,
-    &__content {
+    &__left {
       display: flex;
       align-items: center;
-      padding: 8px;
+      justify-content: space-between;
+      background-color: var(--ink);
+      padding-inline: var(--space-4);
     }
 
-    &__title {
-      font-weight: 700;
+    &__app-title {
+      @include font-display-14;
+
+      color: var(--white);
     }
 
     &__version {
-      margin-left: 4px;
-      color: var(--text-muted);
-      font-size: 0.75rem;
+      @include font-micro;
+
+      color: var(--grey-3);
+    }
+
+    &__right {
+      display: flex;
+      align-items: center;
+      padding-inline: var(--space-4);
+    }
+
+    &__title {
+      @include font-display-14;
     }
   }
 
-  .app-sidebar {
+  .sidebar {
     grid-area: sidebar;
-    background-color: var(--bg);
-    border-right: 1px solid var(--border-muted);
-    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    border-right: var(--border-w) solid var(--ink);
+    overflow-y: auto;
+
+    &__channel-list {
+      flex: 1;
+    }
+  }
+
+  .content {
+    grid-area: content;
+    overflow-y: auto;
   }
 }
 </style>
diff --git a/new-client/src/shared/styles/main.scss b/new-client/src/shared/styles/main.scss
index 8031a69..c6c6ba5 100644
--- a/new-client/src/shared/styles/main.scss
+++ b/new-client/src/shared/styles/main.scss
@@ -3,27 +3,41 @@
 html,
 body,
 [data-mount-point]:not(:empty) {
-    height: 100%;
+  height: 100%;
 }
 
 [data-mount-point]:empty {
-    display: none;
+  display: none;
 }
 
 body {
-    background-color: var(--bg-dark);
-    color: var(--text);
-    height: 100%;
+  @include font-body;
+
+  background-color: var(--paper);
+  color: var(--ink);
+  height: 100%;
 }
 
-*,
-*::before,
-*::after {
-    font-family: 'Inter', sans-serif;
-    font-optical-sizing: auto;
-    font-weight: 400;
-    font-style: normal;
-    font-variation-settings:
-            'wdth' 100,
-            'YTLC' 500;
+a {
+  background-color: var(--yellow);
+  text-decoration: none;
+  color: var(--ink);
+  padding-inline: var(--space-1);
+  outline: none;
+
+  &:focus,
+  &:hover {
+    background-color: var(--yellow-deep);
+  }
+
+  &:active {
+    background-color: var(--ink);
+    color: var(--yellow);
+  }
 }
+//
+//*,
+//*::before,
+//*::after {
+//  @include font-body;
+//}
diff --git a/new-client/src/shared/styles/mixins.scss b/new-client/src/shared/styles/mixins.scss
new file mode 100644
index 0000000..4f93b35
--- /dev/null
+++ b/new-client/src/shared/styles/mixins.scss
@@ -0,0 +1 @@
+@forward 'mixins/typography';
diff --git a/new-client/src/shared/styles/mixins/typography.scss b/new-client/src/shared/styles/mixins/typography.scss
new file mode 100644
index 0000000..2a23c12
--- /dev/null
+++ b/new-client/src/shared/styles/mixins/typography.scss
@@ -0,0 +1,54 @@
+$display-font-family: 'Unbounded', 'Manrope', system-ui, sans-serif;
+$regular-font-family: 'Manrope', system-ui, sans-serif;
+
+@mixin font-display-36 {
+  font-family: $display-font-family;
+  font-size: 36px;
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+  font-weight: 900;
+}
+
+@mixin font-display-22 {
+  font-family: $display-font-family;
+  font-size: 22px;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  font-weight: 900;
+}
+
+@mixin font-display-14 {
+  font-family: $display-font-family;
+  font-size: 14px;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  font-weight: 900;
+}
+
+@mixin font-body {
+  font-family: $regular-font-family;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+@mixin font-body-bold {
+  font-family: $regular-font-family;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+@mixin font-label {
+  font-family: $regular-font-family;
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+@mixin font-micro {
+  font-family: $regular-font-family;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  font-weight: 500;
+}
diff --git a/new-client/src/shared/styles/tokens.scss b/new-client/src/shared/styles/tokens.scss
index 17790de..3ebcfba 100644
--- a/new-client/src/shared/styles/tokens.scss
+++ b/new-client/src/shared/styles/tokens.scss
@@ -1,64 +1,25 @@
 :root {
-  /* hsl (fallback color) */
-  --bg-dark: hsl(208 100% 2%);
-  --bg: hsl(201 86% 4%);
-  --bg-light: hsl(198 56% 8%);
-  --text: hsl(199 100% 93%);
-  --text-muted: hsl(199 36% 68%);
-  --highlight: hsl(199 28% 37%);
-  --border: hsl(198 40% 26%);
-  --border-muted: hsl(197 70% 15%);
-  --primary: hsl(198 69% 65%);
-  --secondary: hsl(20 68% 69%);
-  --danger: hsl(9 26% 64%);
-  --warning: hsl(52 19% 57%);
-  --success: hsl(146 17% 59%);
-  --info: hsl(217 28% 65%);
-  /* oklch */
-  --bg-dark: oklch(0.1 0.025 228);
-  --bg: oklch(0.15 0.025 228);
-  --bg-light: oklch(0.2 0.025 228);
-  --text: oklch(0.96 0.05 228);
-  --text-muted: oklch(0.76 0.05 228);
-  --highlight: oklch(0.5 0.05 228);
-  --border: oklch(0.4 0.05 228);
-  --border-muted: oklch(0.3 0.05 228);
-  --primary: oklch(0.76 0.1 228);
-  --secondary: oklch(0.76 0.1 48);
-  --danger: oklch(0.7 0.05 30);
-  --warning: oklch(0.7 0.05 100);
-  --success: oklch(0.7 0.05 160);
-  --info: oklch(0.7 0.05 260);
-}
-[data-theme="light"] {
-  /* hsl (fallback color) */
-  --bg-dark: hsl(199 53% 89%);
-  --bg: hsl(199 100% 94%);
-  --bg-light: hsl(199 100% 99%);
-  --text: hsl(204 100% 4%);
-  --text-muted: hsl(198 40% 26%);
-  --highlight: hsl(199 100% 99%);
-  --border: hsl(199 22% 49%);
-  --border-muted: hsl(199 28% 61%);
-  --primary: hsl(193 100% 16%);
-  --secondary: hsl(23 81% 25%);
-  --danger: hsl(9 21% 41%);
-  --warning: hsl(52 23% 34%);
-  --success: hsl(147 19% 36%);
-  --info: hsl(217 22% 41%);
-  /* oklch */
-  --bg-dark: oklch(0.92 0.025 228);
-  --bg: oklch(0.96 0.025 228);
-  --bg-light: oklch(1 0.025 228);
-  --text: oklch(0.15 0.05 228);
-  --text-muted: oklch(0.4 0.05 228);
-  --highlight: oklch(1 0.05 228);
-  --border: oklch(0.6 0.05 228);
-  --border-muted: oklch(0.7 0.05 228);
-  --primary: oklch(0.4 0.1 228);
-  --secondary: oklch(0.4 0.1 48);
-  --danger: oklch(0.5 0.05 30);
-  --warning: oklch(0.5 0.05 100);
-  --success: oklch(0.5 0.05 160);
-  --info: oklch(0.5 0.05 260);
+  --white: #fff;
+  --paper: #f4f1e8;
+  --ink: #0d0d0d;
+  --yellow: #ffd400;
+  --yellow-deep: #f5c400;
+  --red: #ff3b30;
+  --green: #1f9d55;
+  --grey-1: #ededed;
+  --grey-2: #c9c6bd;
+  --grey-3: #8a8a82;
+
+  --shadow: 6px 6px 0 0 var(--ink);
+
+  --border-w: 2px;
+
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 28px;
+  --space-8: 32px;
 }
diff --git a/new-client/src/shared/types.ts b/new-client/src/shared/types.ts
new file mode 100644
index 0000000..8f0307c
--- /dev/null
+++ b/new-client/src/shared/types.ts
@@ -0,0 +1,7 @@
+export interface ChadClient {
+  socketId: string
+  userId: string
+  channelId: string
+  inputMuted?: boolean
+  outputMuted?: boolean
+}
diff --git a/new-client/src/widgets/channel-list/api/qChannelList.ts b/new-client/src/widgets/channel-list/api/qChannelList.ts
new file mode 100644
index 0000000..49dcdef
--- /dev/null
+++ b/new-client/src/widgets/channel-list/api/qChannelList.ts
@@ -0,0 +1,16 @@
+import type { Channel, ResponseError } from '@shared/api/generated-chad-api.ts'
+import api from '@shared/api/client.ts'
+import { useQuery } from '@tanstack/vue-query'
+
+export function qChannelList() {
+  return useQuery<Channel[], ResponseError>({
+    queryKey: ['channel-list'],
+    queryFn: async () => {
+      const response = await api.chad.channelList()
+
+      return response.data
+    },
+    placeholderData: () => [],
+    staleTime: Infinity,
+  })
+}
diff --git a/new-client/src/widgets/channel-list/ui/ChannelItem.vue b/new-client/src/widgets/channel-list/ui/ChannelItem.vue
new file mode 100644
index 0000000..53878d1
--- /dev/null
+++ b/new-client/src/widgets/channel-list/ui/ChannelItem.vue
@@ -0,0 +1,41 @@
+<template>
+  <li v-bind="api.getRootProps()" class="channel">
+    <div class="channel__header" v-bind="api.getTriggerProps()">
+      {{ channel.name }}
+    </div>
+
+    <div v-bind="api.getContentProps()" class="channel__content">
+      Clients...
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+import type { Channel } from '@shared/api/generated-chad-api.ts'
+import type { ChadClient } from '@shared/types.ts'
+import * as collapsible from '@zag-js/collapsible'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  channel: Channel
+  clients: ChadClient[]
+}>()
+
+const service = useMachine(collapsible.machine, { id: '1' })
+
+const api = computed(() => collapsible.connect(service, normalizeProps))
+</script>
+
+<style lang="scss">
+.channel {
+  padding-inline: var(--space-3);
+
+  &__header {
+    @include font-micro;
+
+    padding-block: var(--space-2);
+    color: var(--grey-3);
+  }
+}
+</style>
diff --git a/new-client/src/widgets/channel-list/ui/ChannelList.vue b/new-client/src/widgets/channel-list/ui/ChannelList.vue
new file mode 100644
index 0000000..feebf9c
--- /dev/null
+++ b/new-client/src/widgets/channel-list/ui/ChannelList.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="channel-list">
+    <ul class="channel-list__list">
+      <ChannelItem v-for="channel in channels" :key="channel.id" :channel="channel" />
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { qChannelList } from '../api/qChannelList.ts'
+import ChannelItem from './ChannelItem.vue'
+
+const { data: channels } = qChannelList()
+</script>
+
+<style lang="scss">
+.channel-list {
+  > *:not(:last-child) {
+    margin-bottom: var(--space-6);
+  }
+}
+</style>
diff --git a/new-client/src/widgets/chat/api/qChatMessages.ts b/new-client/src/widgets/chat/api/qChatMessages.ts
new file mode 100644
index 0000000..baf189e
--- /dev/null
+++ b/new-client/src/widgets/chat/api/qChatMessages.ts
@@ -0,0 +1,33 @@
+import type { ChatMessage, ResponseError } from '@shared/api/generated-chad-api.ts'
+import type { InfiniteData, QueryKey } from '@tanstack/vue-query'
+import api from '@shared/api/client.ts'
+import { useInfiniteQuery } from '@tanstack/vue-query'
+
+interface Response {
+  messages: ChatMessage[]
+  nextCursor?: string
+}
+type PageParam = string | undefined
+
+export function qChatMessages() {
+  return useInfiniteQuery<Response, ResponseError, InfiniteData<Response, PageParam>, QueryKey, PageParam>({
+    queryKey: ['chat-messages'],
+    queryFn: async ({ pageParam }) => {
+      const response = await api.chad.chatMessages({ cursor: pageParam, limit: 30 })
+
+      return {
+        messages: response.data.messages.reverse(),
+        nextCursor: response.data.nextCursor,
+      }
+    },
+    select: data => ({
+      pages: [...data.pages].reverse(),
+      pageParams: [...data.pageParams].reverse(),
+    }),
+    initialPageParam: undefined,
+    getNextPageParam: (lastPage) => {
+      return lastPage.nextCursor
+    },
+    shallow: true,
+  })
+}
diff --git a/new-client/src/widgets/chat/composables/use-chat.ts b/new-client/src/widgets/chat/composables/use-chat.ts
new file mode 100644
index 0000000..35d3b63
--- /dev/null
+++ b/new-client/src/widgets/chat/composables/use-chat.ts
@@ -0,0 +1,12 @@
+import { createGlobalState } from '@vueuse/core'
+import { qChatMessages } from '../api/qChatMessages.ts'
+
+export const useChat = createGlobalState(() => {
+  const { data: messages, hasNextPage: hasMoreMessages, fetchNextPage } = qChatMessages()
+
+  return {
+    messages,
+    hasMoreMessages,
+    fetchNextPage,
+  }
+})
diff --git a/new-client/src/widgets/chat/ui/Chat.vue b/new-client/src/widgets/chat/ui/Chat.vue
new file mode 100644
index 0000000..4145457
--- /dev/null
+++ b/new-client/src/widgets/chat/ui/Chat.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="chat">
+    <button v-if="hasMoreMessages" type="button" @click="fetchNextPage()">
+      Load more
+    </button>
+
+    <div v-if="messages" class="chat__messages">
+      <template v-for="(page, pageIdx) in messages.pages" :key="pageIdx">
+        <ChatMessage v-for="message in page.messages" :key="message.id" :message="message" />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ChatMessage from '@widgets/chat/ui/ChatMessage.vue'
+import { useChat } from '../composables/use-chat'
+
+const { messages, hasMoreMessages, fetchNextPage } = useChat()
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/new-client/src/widgets/chat/ui/ChatMessage.vue b/new-client/src/widgets/chat/ui/ChatMessage.vue
new file mode 100644
index 0000000..a2941a0
--- /dev/null
+++ b/new-client/src/widgets/chat/ui/ChatMessage.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chat-message">
+    <ChadAvatar class="chat-message__avatar" src="" :fallback="initials" />
+    <p class="chat-message__sender">
+      {{ message.senderId }}
+    </p>
+    <p class="chat-message__body">
+      {{ message.text }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ChatMessage } from '@shared/api/generated-chad-api.ts'
+import ChadAvatar from '@shared/components/ui/Avatar.vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  message: ChatMessage
+}>()
+
+const initials = computed(() => props.message.senderId.slice(props.message.senderId.length - 2))
+</script>
+
+<style lang="scss">
+.chat-message {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-areas: 'avatar sender' 'avatar body';
+  column-gap: var(--space-3);
+  padding: var(--space-3) var(--space-6);
+
+  &__avatar {
+    grid-area: avatar;
+  }
+
+  &__sender {
+    @include font-body-bold;
+
+    grid-area: sender;
+  }
+
+  &__body {
+    grid-area: body;
+  }
+}
+</style>
diff --git a/new-client/vite.config.ts b/new-client/vite.config.ts
index 22afb65..db3651d 100644
--- a/new-client/vite.config.ts
+++ b/new-client/vite.config.ts
@@ -3,7 +3,6 @@ import VuePlugin from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
 import VueRouterPlugin from 'vue-router/vite'
 
-// https://vite.dev/config/
 export default defineConfig({
   plugins: [
     VueRouterPlugin(),
@@ -20,15 +19,15 @@ export default defineConfig({
       { find: '@', replacement: path.resolve(__dirname, './src') },
     ],
   },
-  // css: {
-  //   preprocessorOptions: {
-  //     scss: {
-  //       additionalData: `
-  //         @use '${path.resolve(__dirname, './shared/styles/tokens.scss')}'' as *;
-  //       `,
-  //     },
-  //   },
-  // },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `
+          @use "@shared/styles/mixins.scss" as *;
+        `,
+      },
+    },
+  },
   server: {
     port: 3000,
     strictPort: true,
diff --git a/new-client/yarn.lock b/new-client/yarn.lock
index ab39f23..05a14c6 100644
--- a/new-client/yarn.lock
+++ b/new-client/yarn.lock
@@ -442,6 +442,11 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@lucide/vue@^1.14.0":
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/@lucide/vue/-/vue-1.14.0.tgz#e85ed1165d1b5e8ec1012a83a704191ce4268046"
+  integrity sha512-0s2fsXJGXYqcuyigsRtoTPqbeGGFOiLTYMDFfYvWO4rQNOongaJe1XDiExOLiybbI9+uQPBr5aGoiCdQNlSfQg==
+
 "@napi-rs/wasm-runtime@^1.1.4":
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz#a46bbfedc29751b7170c5d23bc1d8ee8c7e3c1e1"
@@ -777,6 +782,11 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/base62/-/base62-1.0.0.tgz#c47c42410e5212e4fa4657670e118ddfba39acd6"
   integrity sha512-TeheYy0ILzBEI/CO55CP6zJCSdSWeRtGnHy8U8dWSUH4I68iqTsy7HkMktR4xakThc9jotkPQUXT4ITdbV7cHA==
 
+"@socket.io/component-emitter@~3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz#821f8442f4175d8f0467b9daf26e3a18e2d02af2"
+  integrity sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==
+
 "@stylistic/eslint-plugin@^5.10.0":
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/@stylistic/eslint-plugin/-/eslint-plugin-5.10.0.tgz#471bbd9f7a27ceaac4a217e7f5b3890855e5640c"
@@ -796,6 +806,28 @@
   dependencies:
     tslib "^2.8.0"
 
+"@tanstack/match-sorter-utils@^8.19.4":
+  version "8.19.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.19.4.tgz#dacf772b5d94f4684f10dbeb2518cf72dccab8a5"
+  integrity sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==
+  dependencies:
+    remove-accents "0.5.0"
+
+"@tanstack/query-core@5.100.10":
+  version "5.100.10"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.100.10.tgz#aeb34d301fd4ff9762e67dfa018adc33b7a18be4"
+  integrity sha512-8UR0yJR+GiQ40m3lPhUr0xbfAupe6GSQiksSBSa9SM2NjezFyxXCIA69/lz8cSoNKZLrw1/PktIyQBJcVeMi3w==
+
+"@tanstack/vue-query@^5.100.10":
+  version "5.100.10"
+  resolved "https://registry.yarnpkg.com/@tanstack/vue-query/-/vue-query-5.100.10.tgz#eafed0d51887c12dcbba5edb1b7108522ebc3891"
+  integrity sha512-S1aOmIPQNd5axR2Sw7H8d96EybY3kEZ396KA90e0SGLDYSfd2QgWi7+ItYXRGIDiSjOjlPUnthKDP0mDDBV8Kw==
+  dependencies:
+    "@tanstack/match-sorter-utils" "^8.19.4"
+    "@tanstack/query-core" "5.100.10"
+    "@vue/devtools-api" "^6.6.3"
+    vue-demi "^0.14.10"
+
 "@tauri-apps/api@^2.10.1", "@tauri-apps/api@^2.11.0", "@tauri-apps/api@^2.8.0":
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/@tauri-apps/api/-/api-2.11.0.tgz#00fb69996010178a5153798d4a84f6fe3a1e1182"
@@ -1156,6 +1188,11 @@
     "@vue/compiler-dom" "3.5.34"
     "@vue/shared" "3.5.34"
 
+"@vue/devtools-api@^6.6.3":
+  version "6.6.4"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
+  integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
+
 "@vue/devtools-api@^8.0.6":
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-8.1.1.tgz#367caf696349b1a49c655939ce605f4c96e30357"
@@ -1303,7 +1340,7 @@
   dependencies:
     "@zag-js/dom-query" "1.40.0"
 
-"@zag-js/avatar@1.40.0":
+"@zag-js/avatar@1.40.0", "@zag-js/avatar@^1.40.0":
   version "1.40.0"
   resolved "https://registry.yarnpkg.com/@zag-js/avatar/-/avatar-1.40.0.tgz#6d412fe7f7726f7924fcb6a46da397650f07987c"
   integrity sha512-DayZDsNXbipT+1GUkX29tVhO4hZonDnidwE3SjEQv9Ic9vCdnwP95+B0FPEuaca03F5ZXFqVXjnPmRVbRMyDYQ==
@@ -1365,7 +1402,7 @@
     "@zag-js/types" "1.40.0"
     "@zag-js/utils" "1.40.0"
 
-"@zag-js/collapsible@1.40.0":
+"@zag-js/collapsible@1.40.0", "@zag-js/collapsible@^1.40.0":
   version "1.40.0"
   resolved "https://registry.yarnpkg.com/@zag-js/collapsible/-/collapsible-1.40.0.tgz#a8cf143963df8be1421ec5b3f3cbd76581c36f62"
   integrity sha512-xDLY4j9D3gdoTirkwzMaCtelfCjnMhBzPyY6c/mh4oPvD3RB6dr3V3kI80i3yxHaUUeDCIUm/XAxK0InPsRBug==
@@ -1695,7 +1732,7 @@
     "@zag-js/types" "1.40.0"
     "@zag-js/utils" "1.40.0"
 
-"@zag-js/password-input@1.40.0":
+"@zag-js/password-input@1.40.0", "@zag-js/password-input@^1.40.0":
   version "1.40.0"
   resolved "https://registry.yarnpkg.com/@zag-js/password-input/-/password-input-1.40.0.tgz#8d70e938ad5646aef8869d967741a58608d0a16f"
   integrity sha512-mD4tbA4m82oV+0NbJ+P00Q4Gwz+zf1kZEZ3Z48ohICfK/WO1KhCgviY7vu/7bCMnRiD3dbi+nEeym8Kb29wRHw==
@@ -2240,7 +2277,12 @@ csstype@3.2.3, csstype@^3.2.3:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.2.3.tgz#ec48c0f3e993e50648c86da559e2610995cf989a"
   integrity sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==
 
-debug@^4.0.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.4.0, debug@^4.4.3:
+date-fns@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-4.1.0.tgz#64b3d83fff5aa80438f5b1a633c2e83b8a1c2d14"
+  integrity sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==
+
+debug@^4.0.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.4.0, debug@^4.4.3, debug@~4.4.1:
   version "4.4.3"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.3.tgz#c6ae432d9bd9662582fce08709b038c58e9e3d6a"
   integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==
@@ -2291,6 +2333,22 @@ empathic@^2.0.0:
   resolved "https://registry.yarnpkg.com/empathic/-/empathic-2.0.0.tgz#71d3c2b94fad49532ef98a6c34be0386659f6131"
   integrity sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA==
 
+engine.io-client@~6.6.1:
+  version "6.6.4"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.6.4.tgz#a04998787dd342b543eec5d4452da7bb540e7ff8"
+  integrity sha512-+kjUJnZGwzewFDw951CDWcwj35vMNf2fcj7xQWOctq1F2i1jkDdVvdFG9kM/BEChymCH36KgjnW0NsL58JYRxw==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.4.1"
+    engine.io-parser "~5.2.1"
+    ws "~8.18.3"
+    xmlhttprequest-ssl "~2.1.1"
+
+engine.io-parser@~5.2.1:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.2.3.tgz#00dc5b97b1f233a23c9398d0209504cf5f94d92f"
+  integrity sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==
+
 enhanced-resolve@^5.17.1:
   version "5.21.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.21.0.tgz#bb8e6fabaf74930de70e61397798750429e5b1ae"
@@ -3518,6 +3576,11 @@ minimatch@^10.2.2, minimatch@^10.2.4:
   dependencies:
     brace-expansion "^5.0.5"
 
+mitt@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
+  integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
+
 mlly@^1.7.4, mlly@^1.8.0:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.8.2.tgz#e7f7919a82d13b174405613117249a3f449d78bb"
@@ -3834,6 +3897,11 @@ regjsparser@^0.13.0:
   dependencies:
     jsesc "~3.1.0"
 
+remove-accents@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.5.0.tgz#77991f37ba212afba162e375b627631315bed687"
+  integrity sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==
+
 reserved-identifiers@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/reserved-identifiers/-/reserved-identifiers-1.2.0.tgz#d2982cd698e317dd3dced1ee1c52412dbd64fc64"
@@ -4048,6 +4116,24 @@ sisteransi@^1.0.5:
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
   integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
 
+socket.io-client@^4.8.3:
+  version "4.8.3"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.8.3.tgz#62717edd46a318c918125b57e92dc7f8bb71c34c"
+  integrity sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.4.1"
+    engine.io-client "~6.6.1"
+    socket.io-parser "~4.2.4"
+
+socket.io-parser@~4.2.4:
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.6.tgz#19156bf179af3931abd05260cfb1491822578a6f"
+  integrity sha512-asJqbVBDsBCJx0pTqw3WfesSY0iRX+2xzWEWzrpcH7L6fLzrhyF8WPI8UaeM4YCuDfpwA/cgsdugMsmtz8EJeg==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.4.1"
+
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
@@ -4283,6 +4369,11 @@ vscode-uri@^3.0.8:
   resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.1.0.tgz#dd09ec5a66a38b5c3fffc774015713496d14e09c"
   integrity sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==
 
+vue-demi@^0.14.10:
+  version "0.14.10"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
+  integrity sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==
+
 vue-eslint-parser@^10.4.0:
   version "10.4.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-10.4.0.tgz#fd7251d0e710a88a6618f50e8a27973bc3c8d69c"
@@ -4354,11 +4445,21 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
+ws@~8.18.3:
+  version "8.18.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.3.tgz#b56b88abffde62791c639170400c93dcb0c95472"
+  integrity sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==
+
 xml-name-validator@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"
   integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
 
+xmlhttprequest-ssl@~2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz#e9e8023b3f29ef34b97a859f584c5e6c61418e23"
+  integrity sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==
+
 yaml-eslint-parser@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/yaml-eslint-parser/-/yaml-eslint-parser-2.0.0.tgz#8cb63e3e28787557b9f295df0a8307c327b7fde4"