diff --git a/package-lock.json b/package-lock.json
index f35e808f05..12ad1728b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@mdi/js": "^7.4.47",
         "@sapphi-red/web-noise-suppressor": "^0.3.5",
+        "@shiguredo/virtual-background": "^2023.2.0",
         "@traptitech/traq": "^3.17.0-3",
         "@traptitech/traq-markdown-it": "^6.3.0",
         "autosize": "^6.0.1",
@@ -20,7 +21,9 @@
         "firebase": "^11.2.0",
         "highlight.js": "^11.11.1",
         "idb-keyval": "^6.2.0",
+        "livekit-client": "^2.8.0",
         "mitt": "^3.0.0",
+        "party-js": "^2.2.0",
         "skyway-js": "^4.4.5",
         "text-field-edit": "^4.1.1",
         "throttle-debounce": "^5.0.2",
@@ -1664,6 +1667,11 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "node_modules/@bufbuild/protobuf": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-1.10.0.tgz",
+      "integrity": "sha512-QDdVFLoN93Zjg36NoQPZfsVH9tZew7wKDKyV5qRdj8ntT4wQCOradQjRaTdwMhWUYsgKsvCINKKm87FdEk96Ag=="
+    },
     "node_modules/@colors/colors": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -3220,6 +3228,19 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@livekit/mutex": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@livekit/mutex/-/mutex-1.1.1.tgz",
+      "integrity": "sha512-EsshAucklmpuUAfkABPxJNhzj9v2sG7JuzFDL4ML1oJQSV14sqrpTYnsaOudMAw9yOaW53NU3QQTlUQoRs4czw=="
+    },
+    "node_modules/@livekit/protocol": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/@livekit/protocol/-/protocol-1.30.0.tgz",
+      "integrity": "sha512-SDI9ShVKj8N3oOSinr8inaxD3FXgmgoJlqN35uU/Yx1sdoDeQbzAuBFox7bYjM+VhnZ1V22ivIDjAsKr00H+XQ==",
+      "dependencies": {
+        "@bufbuild/protobuf": "^1.10.0"
+      }
+    },
     "node_modules/@mdi/js": {
       "version": "7.4.47",
       "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
@@ -3997,6 +4018,14 @@
       "resolved": "https://registry.npmjs.org/@sapphi-red/web-noise-suppressor/-/web-noise-suppressor-0.3.5.tgz",
       "integrity": "sha512-jh3+V9yM+zxLriQexoGm0GatoPaJWjs6ypFIbFYwQp+AoUb55eUXrjKtKQyuC5zShzzeAQUl0M5JzqB7SSrsRA=="
     },
+    "node_modules/@shiguredo/virtual-background": {
+      "version": "2023.2.0",
+      "resolved": "https://registry.npmjs.org/@shiguredo/virtual-background/-/virtual-background-2023.2.0.tgz",
+      "integrity": "sha512-nvJAsf29ThXMN7tEvlvZ45MeIoXW2uoJxvBwsesYInjoSy0RASQr7qxrLMglX2yyztOeYZqJknQBttjJTGH/QA==",
+      "dependencies": {
+        "@types/dom-mediacapture-transform": "^0.1.4"
+      }
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
@@ -4121,12 +4150,25 @@
       "integrity": "sha512-o0ZyU3ePp3+KRbhHsY4ogjc+ZQWgVN5h6j8BHW5RII4cFKi6PEKK9QPAcphJVkD0dGpyFnD3VRR0WMvHVjCv9w==",
       "dev": true
     },
+    "node_modules/@types/dom-mediacapture-transform": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/@types/dom-mediacapture-transform/-/dom-mediacapture-transform-0.1.10.tgz",
+      "integrity": "sha512-zUxMN2iShu7p3Fz5sqfvLp93qW/3sLs+RwXWWOkMb969hsuoVqUUokqrENjXqTMNmEEcVXKoHuMMbIGcWyrVVA==",
+      "dependencies": {
+        "@types/dom-webcodecs": "*"
+      }
+    },
     "node_modules/@types/dom-screen-wake-lock": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@types/dom-screen-wake-lock/-/dom-screen-wake-lock-1.0.3.tgz",
       "integrity": "sha512-3Iten7X3Zgwvk6kh6/NRdwN7WbZ760YgFCsF5AxDifltUQzW1RaW+WRmcVtgwFzLjaNu64H+0MPJ13yRa8g3Dw==",
       "dev": true
     },
+    "node_modules/@types/dom-webcodecs": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/@types/dom-webcodecs/-/dom-webcodecs-0.1.13.tgz",
+      "integrity": "sha512-O5hkiFIcjjszPIYyUSyvScyvrBoV3NOEEZx/pMlsu44TKzWNkLVBBxnxJz42in5n3QIolYOcBYFCPZZ0h8SkwQ=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -8777,6 +8819,22 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/livekit-client": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.8.0.tgz",
+      "integrity": "sha512-8/IXhacAFYdXMU1wFyc8/MSGCzHr02Hn9T5o3MX19TR03RHSaBKBF2xK8fQFINBmpcYkiMAnQL0P6K3nfcifQA==",
+      "dependencies": {
+        "@livekit/mutex": "1.1.1",
+        "@livekit/protocol": "1.30.0",
+        "events": "^3.3.0",
+        "loglevel": "^1.8.0",
+        "sdp-transform": "^2.14.1",
+        "ts-debounce": "^4.0.0",
+        "tslib": "2.8.1",
+        "typed-emitter": "^2.1.0",
+        "webrtc-adapter": "^9.0.0"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -8892,6 +8950,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/loglevel": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.2.tgz",
+      "integrity": "sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==",
+      "engines": {
+        "node": ">= 0.6.0"
+      },
+      "funding": {
+        "type": "tidelift",
+        "url": "https://tidelift.com/funding/github/npm/loglevel"
+      }
+    },
     "node_modules/long": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/long/-/long-5.2.4.tgz",
@@ -9412,6 +9482,11 @@
       "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
       "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow=="
     },
+    "node_modules/party-js": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/party-js/-/party-js-2.2.0.tgz",
+      "integrity": "sha512-50hGuALCpvDTrQLPQ1fgUgxKIWAH28ShVkmeK/3zhO0YJyCqkhrZhQEkWPxDYLvbFJ7YAXyROmFEu35gKpZLtQ=="
+    },
     "node_modules/patch-package": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-8.0.0.tgz",
@@ -10163,7 +10238,7 @@
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
       "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -10260,6 +10335,11 @@
         "node": ">=v12.22.7"
       }
     },
+    "node_modules/sdp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.0.tgz",
+      "integrity": "sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw=="
+    },
     "node_modules/sdp-transform": {
       "version": "2.14.2",
       "resolved": "https://registry.npmjs.org/sdp-transform/-/sdp-transform-2.14.2.tgz",
@@ -11213,6 +11293,11 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/ts-debounce": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/ts-debounce/-/ts-debounce-4.0.0.tgz",
+      "integrity": "sha512-+1iDGY6NmOGidq7i7xZGA4cm8DAa6fqdYcvO5Z6yBevH++Bdo9Qt/mN0TzHUgcCcKv1gmh9+W5dHqz8pMWbCbg=="
+    },
     "node_modules/ts-pattern": {
       "version": "5.6.1",
       "resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.6.1.tgz",
@@ -11360,6 +11445,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typed-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/typed-emitter/-/typed-emitter-2.1.0.tgz",
+      "integrity": "sha512-g/KzbYKbH5C2vPkaXGu8DJlHrGKHLsM25Zg9WuC9pMGfuvT+X25tZQWo5fK1BjBm8+UrVE9LDCvaY0CQk+fXDA==",
+      "optionalDependencies": {
+        "rxjs": "*"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.7.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
@@ -12987,6 +13080,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/webrtc-adapter": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-9.0.1.tgz",
+      "integrity": "sha512-1AQO+d4ElfVSXyzNVTOewgGT/tAomwwztX/6e3totvyyzXPvXIIuUUjAmyZGbKBKbZOXauuJooZm3g6IuFuiNQ==",
+      "dependencies": {
+        "sdp": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/websocket-driver": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
diff --git a/package.json b/package.json
index 14289a448f..27cfe22ca8 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
   "dependencies": {
     "@mdi/js": "^7.4.47",
     "@sapphi-red/web-noise-suppressor": "^0.3.5",
+    "@shiguredo/virtual-background": "^2023.2.0",
     "@traptitech/traq": "^3.17.0-3",
     "@traptitech/traq-markdown-it": "^6.3.0",
     "autosize": "^6.0.1",
@@ -37,7 +38,9 @@
     "firebase": "^11.2.0",
     "highlight.js": "^11.11.1",
     "idb-keyval": "^6.2.0",
+    "livekit-client": "^2.8.0",
     "mitt": "^3.0.0",
+    "party-js": "^2.2.0",
     "skyway-js": "^4.4.5",
     "text-field-edit": "^4.1.1",
     "throttle-debounce": "^5.0.2",
@@ -51,8 +54,8 @@
     "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@stylistic/eslint-plugin-ts": "^2.13.0",
     "@pinia/testing": "^0.1.6",
+    "@stylistic/eslint-plugin-ts": "^2.13.0",
     "@types/autosize": "^4.0.3",
     "@types/dom-screen-wake-lock": "^1.0.3",
     "@types/katex": "^0.16.7",
@@ -63,9 +66,9 @@
     "@types/throttle-debounce": "^5.0.2",
     "@types/turndown": "^5.0.5",
     "@types/vue-select": "^3.16.8",
+    "@types/webappsec-credential-management": "^0.6.9",
     "@typescript-eslint/eslint-plugin": "^8.20.0",
     "@typescript-eslint/parser": "^8.20.0",
-    "@types/webappsec-credential-management": "^0.6.9",
     "@typescript/lib-dom": "npm:@types/web@^0.0.72",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/coverage-v8": "^2.1.8",
@@ -73,14 +76,14 @@
     "autoprefixer": "^10.4.20",
     "axios": "^1.7.9",
     "browserslist": "^4.24.4",
+    "cypress": "^13.17.0",
+    "esbuild": "^0.24.2",
+    "esbuild-plugin-browserslist": "^0.15.0",
     "eslint": "^9.18.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-cypress": "^4.1.0",
     "eslint-plugin-unused-imports": "^4.1.4",
     "eslint-plugin-vue": "^9.32.0",
-    "cypress": "^13.17.0",
-    "esbuild": "^0.24.2",
-    "esbuild-plugin-browserslist": "^0.15.0",
     "fonteditor-core": "^2.4.1",
     "jsdom": "^26.0.0",
     "patch-package": "^8.0.0",
diff --git a/src/App.vue b/src/App.vue
index f3a67b06cb..ce16092de2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,14 +17,15 @@ import useHtmlDataset from '/@/composables/document/useHtmlDataset'
 import { useThemeVariables } from '/@/composables/document/useThemeVariables'
 import { useResponsiveStore } from '/@/store/ui/responsive'
 import { useBrowserSettings } from '/@/store/app/browserSettings'
-import { useAppRtcStore } from '/@/store/app/rtc'
 import { useTts } from '/@/store/app/tts'
 import { useThemeSettings } from '/@/store/app/themeSettings'
 import useDocumentTitle from '/@/composables/document/useDocumentTitle'
 
 const useQallConfirmer = () => {
-  const { isCurrentDevice } = useAppRtcStore()
   window.addEventListener('beforeunload', event => {
+    // TODO: Qall
+    // ここは適切な変数を置く
+    const isCurrentDevice = computed(() => false)
     if (isCurrentDevice.value) {
       const unloadMessage = 'Qall中ですが本当に終了しますか？'
       event.preventDefault()
diff --git a/src/assets/icons/add_reaction.svg b/src/assets/icons/add_reaction.svg
new file mode 100644
index 0000000000..f93c6d661f
--- /dev/null
+++ b/src/assets/icons/add_reaction.svg
@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_400_4816" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+<rect width="32" height="32" fill="white"/>
+</mask>
+<g mask="url(#mask0_400_4816)">
+<path d="M16.0058 29.3333C14.1652 29.3333 12.4355 28.9833 10.8168 28.2833C9.19817 27.5833 7.78506 26.6296 6.5775 25.4223C5.37017 24.2147 4.4165 22.8016 3.7165 21.1829C3.0165 19.5643 2.6665 17.8346 2.6665 15.9939C2.6665 14.1535 3.01728 12.4221 3.71884 10.7999C4.42017 9.1777 5.37217 7.76659 6.57484 6.56659C7.77728 5.36659 9.19128 4.41659 10.8168 3.71659C12.4426 3.01659 14.1703 2.66659 15.9998 2.66659C16.8325 2.66659 17.6406 2.73692 18.4242 2.87759C19.2079 3.01847 19.9739 3.23336 20.7222 3.52225C20.9888 3.61847 21.1944 3.78236 21.3388 4.01392C21.4833 4.24525 21.5555 4.49981 21.5555 4.77759V6.92225C21.5555 7.5287 21.7687 8.04503 22.1952 8.47125C22.6214 8.8977 23.1377 9.11092 23.7442 9.11092H24.2222V9.81092C24.2222 10.3518 24.4147 10.8148 24.7998 11.1999C25.1849 11.585 25.6479 11.7776 26.1888 11.7776H27.7108C27.9851 11.7776 28.2364 11.8595 28.4648 12.0233C28.6935 12.1868 28.8459 12.4049 28.9222 12.6776C29.0628 13.2185 29.1665 13.7616 29.2332 14.3069C29.2998 14.8523 29.3332 15.4166 29.3332 15.9999C29.3332 17.8295 28.9832 19.5571 28.2832 21.1829C27.5832 22.8085 26.6332 24.2225 25.4332 25.4249C24.2332 26.6276 22.8221 27.5796 21.1998 28.2809C19.5776 28.9825 17.8463 29.3333 16.0058 29.3333ZM15.9888 23.3109C17.2702 23.3109 18.4516 23.0147 19.5332 22.4223C20.6147 21.8296 21.4888 21.0118 22.1555 19.9689C22.2888 19.708 22.2795 19.4517 22.1275 19.1999C21.9757 18.9481 21.7479 18.8223 21.4442 18.8223H10.5535C10.2437 18.8223 10.0147 18.9481 9.8665 19.1999C9.71828 19.4517 9.71084 19.708 9.84417 19.9689C10.5108 21.0118 11.3868 21.8296 12.4722 22.4223C13.5573 23.0147 14.7295 23.3109 15.9888 23.3109ZM11.1998 14.3776C11.7183 14.3776 12.1591 14.1961 12.5222 13.8333C12.8851 13.4704 13.0665 13.0296 13.0665 12.5109C13.0665 11.9925 12.8851 11.5518 12.5222 11.1889C12.1591 10.8258 11.7183 10.6443 11.1998 10.6443C10.6814 10.6443 10.2406 10.8258 9.8775 11.1889C9.51462 11.5518 9.33317 11.9925 9.33317 12.5109C9.33317 13.0296 9.51462 13.4704 9.8775 13.8333C10.2406 14.1961 10.6814 14.3776 11.1998 14.3776ZM20.7998 14.3776C21.3183 14.3776 21.7591 14.1961 22.1222 13.8333C22.4851 13.4704 22.6665 13.0296 22.6665 12.5109C22.6665 11.9925 22.4851 11.5518 22.1222 11.1889C21.7591 10.8258 21.3183 10.6443 20.7998 10.6443C20.2814 10.6443 19.8406 10.8258 19.4775 11.1889C19.1146 11.5518 18.9332 11.9925 18.9332 12.5109C18.9332 13.0296 19.1146 13.4704 19.4775 13.8333C19.8406 14.1961 20.2814 14.3776 20.7998 14.3776ZM26.8888 6.44425H25.1108C24.7962 6.44425 24.5323 6.33747 24.3192 6.12392C24.1063 5.91014 23.9998 5.64525 23.9998 5.32925C23.9998 5.01347 24.1063 4.75003 24.3192 4.53892C24.5323 4.32781 24.7962 4.22225 25.1108 4.22225H26.8888V2.44425C26.8888 2.12959 26.9956 1.8657 27.2092 1.65259C27.423 1.4397 27.6878 1.33325 28.0038 1.33325C28.3196 1.33325 28.5831 1.4397 28.7942 1.65259C29.0053 1.8657 29.1108 2.12959 29.1108 2.44425V4.22225H30.8888C31.2035 4.22225 31.4674 4.32903 31.6805 4.54259C31.8934 4.75636 31.9998 5.02125 31.9998 5.33725C31.9998 5.65303 31.8934 5.91647 31.6805 6.12759C31.4674 6.3387 31.2035 6.44425 30.8888 6.44425H29.1108V8.22225C29.1108 8.53692 29.0041 8.80081 28.7905 9.01392C28.5767 9.22681 28.3118 9.33325 27.9958 9.33325C27.6801 9.33325 27.4166 9.22681 27.2055 9.01392C26.9944 8.80081 26.8888 8.53692 26.8888 8.22225V6.44425Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/assets/icons/call_end.svg b/src/assets/icons/call_end.svg
new file mode 100644
index 0000000000..f70c5d3a3a
--- /dev/null
+++ b/src/assets/icons/call_end.svg
@@ -0,0 +1,9 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="64" height="64" rx="32" fill="#F26451"/>
+<mask id="mask0_12_1284" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="16" y="16" width="32" height="32">
+<rect x="16" y="16" width="32" height="32" fill="white"/>
+</mask>
+<g mask="url(#mask0_12_1284)">
+<path d="M32 26.6667C34.6222 26.6667 37.2055 27.1945 39.75 28.2501C42.2944 29.3056 44.5555 30.889 46.5333 33.0001C46.8 33.2667 46.9333 33.5779 46.9333 33.9334C46.9333 34.289 46.8 34.6001 46.5333 34.8667L43.4667 37.8667C43.2222 38.1112 42.9389 38.2445 42.6167 38.2667C42.2944 38.289 42 38.2001 41.7333 38.0001L37.8667 35.0667C37.6889 34.9334 37.5555 34.7779 37.4667 34.6001C37.3778 34.4223 37.3333 34.2223 37.3333 34.0001V30.2001C36.4889 29.9334 35.6222 29.7223 34.7333 29.5667C33.8444 29.4112 32.9333 29.3334 32 29.3334C31.0667 29.3334 30.1555 29.4112 29.2667 29.5667C28.3778 29.7223 27.5111 29.9334 26.6667 30.2001V34.0001C26.6667 34.2223 26.6222 34.4223 26.5333 34.6001C26.4444 34.7779 26.3111 34.9334 26.1333 35.0667L22.2667 38.0001C22 38.2001 21.7055 38.289 21.3833 38.2667C21.0611 38.2445 20.7778 38.1112 20.5333 37.8667L17.4667 34.8667C17.2 34.6001 17.0667 34.289 17.0667 33.9334C17.0667 33.5779 17.2 33.2667 17.4667 33.0001C19.4222 30.889 21.6778 29.3056 24.2333 28.2501C26.7889 27.1945 29.3778 26.6667 32 26.6667Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/assets/icons/group_qall.svg b/src/assets/icons/group_qall.svg
new file mode 100644
index 0000000000..903365b189
--- /dev/null
+++ b/src/assets/icons/group_qall.svg
@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_164_694" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+<rect width="32" height="32" fill="white"/>
+</mask>
+<g mask="url(#mask0_164_694)">
+<path d="M1.28894 23.3333C1.28894 22.5628 1.48705 21.8609 1.88327 21.2276C2.2795 20.5943 2.82205 20.1184 3.51094 19.7999C5.05183 19.0962 6.49261 18.5832 7.83327 18.2609C9.17394 17.9387 10.5481 17.7776 11.9556 17.7776C13.3629 17.7776 14.7333 17.9387 16.0666 18.2609C17.3999 18.5832 18.8369 19.0962 20.3776 19.7999C21.0665 20.1184 21.6128 20.5943 22.0166 21.2276C22.4204 21.8609 22.6223 22.5628 22.6223 23.3333V24.4443C22.6223 25.0592 22.4056 25.5833 21.9723 26.0166C21.5389 26.45 21.0148 26.6666 20.3999 26.6666H3.51094C2.89627 26.6666 2.37227 26.45 1.93894 26.0166C1.50561 25.5833 1.28894 25.0592 1.28894 24.4443V23.3333ZM24.2889 26.6666C24.4445 26.3111 24.5759 25.9499 24.6833 25.5833C24.7906 25.2166 24.8443 24.837 24.8443 24.4443V23.2443C24.8443 21.9852 24.5387 20.9204 23.9276 20.0499C23.3165 19.1795 22.4147 18.4443 21.2223 17.8443C22.6223 18.0074 23.9407 18.2463 25.1776 18.561C26.4147 18.8758 27.4592 19.2592 28.3109 19.7109C29.0665 20.1407 29.6554 20.6537 30.0776 21.2499C30.4998 21.8462 30.7109 22.511 30.7109 23.2443V24.4443C30.7109 25.0592 30.4943 25.5833 30.0609 26.0166C29.6276 26.45 29.1036 26.6666 28.4889 26.6666H24.2889ZM11.9556 15.9776C10.4889 15.9776 9.27039 15.4925 8.29994 14.5223C7.3295 13.5518 6.84427 12.3333 6.84427 10.8666C6.84427 9.39995 7.3295 8.18139 8.29994 7.21095C9.27039 6.24073 10.4889 5.75562 11.9556 5.75562C13.4223 5.75562 14.6407 6.24073 15.6109 7.21095C16.5814 8.18139 17.0666 9.39995 17.0666 10.8666C17.0666 12.3333 16.5814 13.5518 15.6109 14.5223C14.6407 15.4925 13.4223 15.9776 11.9556 15.9776ZM24.3999 10.8666C24.3999 12.3333 23.9147 13.5518 22.9443 14.5223C21.9741 15.4925 20.7556 15.9776 19.2889 15.9776C19.0445 15.9776 18.7593 15.9573 18.4333 15.9166C18.1073 15.8759 17.8221 15.8148 17.5776 15.7333C18.1332 15.1259 18.5573 14.4074 18.8499 13.5776C19.1426 12.7481 19.2889 11.8444 19.2889 10.8666C19.2889 9.88884 19.1426 8.99995 18.8499 8.19995C18.5573 7.39995 18.1332 6.66662 17.5776 5.99995C17.8443 5.91839 18.1295 5.85728 18.4333 5.81662C18.7371 5.77595 19.0223 5.75562 19.2889 5.75562C20.7556 5.75562 21.9741 6.24073 22.9443 7.21095C23.9147 8.18139 24.3999 9.39995 24.3999 10.8666Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/assets/icons/mic.svg b/src/assets/icons/mic.svg
new file mode 100644
index 0000000000..ac0583091f
--- /dev/null
+++ b/src/assets/icons/mic.svg
@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_32_698" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+<rect width="32" height="32" fill="#333333"/>
+<rect width="32" height="32" fill="black" fill-opacity="0.2"/>
+</mask>
+<g mask="url(#mask0_32_698)">
+<path d="M16.0001 18.6667C14.8889 18.6667 13.9445 18.2779 13.1667 17.5001C12.3889 16.7223 12.0001 15.7779 12.0001 14.6667V6.66675C12.0001 5.55564 12.3889 4.61119 13.1667 3.83341C13.9445 3.05564 14.8889 2.66675 16.0001 2.66675C17.1112 2.66675 18.0556 3.05564 18.8334 3.83341C19.6112 4.61119 20.0001 5.55564 20.0001 6.66675V14.6667C20.0001 15.7779 19.6112 16.7223 18.8334 17.5001C18.0556 18.2779 17.1112 18.6667 16.0001 18.6667ZM14.6667 26.6667V23.9001C12.6223 23.6112 10.8723 22.7445 9.41673 21.3001C7.96117 19.8556 7.07784 18.1001 6.76673 16.0334C6.72228 15.6556 6.82228 15.3334 7.06673 15.0667C7.31117 14.8001 7.62228 14.6667 8.00006 14.6667C8.37784 14.6667 8.6945 14.7945 8.95006 15.0501C9.20562 15.3056 9.37784 15.6223 9.46673 16.0001C9.77784 17.5556 10.5501 18.8334 11.7834 19.8334C13.0167 20.8334 14.4223 21.3334 16.0001 21.3334C17.6001 21.3334 19.0112 20.8279 20.2334 19.8167C21.4556 18.8056 22.2223 17.5334 22.5334 16.0001C22.6223 15.6223 22.7945 15.3056 23.0501 15.0501C23.3056 14.7945 23.6223 14.6667 24.0001 14.6667C24.3778 14.6667 24.6889 14.8001 24.9334 15.0667C25.1778 15.3334 25.2778 15.6556 25.2334 16.0334C24.9223 18.0556 24.0445 19.8001 22.6001 21.2667C21.1556 22.7334 19.4001 23.6112 17.3334 23.9001V26.6667C17.3334 27.0445 17.2056 27.3612 16.9501 27.6167C16.6945 27.8723 16.3778 28.0001 16.0001 28.0001C15.6223 28.0001 15.3056 27.8723 15.0501 27.6167C14.7945 27.3612 14.6667 27.0445 14.6667 26.6667Z" fill="#333333"/>
+<path d="M16.0001 18.6667C14.8889 18.6667 13.9445 18.2779 13.1667 17.5001C12.3889 16.7223 12.0001 15.7779 12.0001 14.6667V6.66675C12.0001 5.55564 12.3889 4.61119 13.1667 3.83341C13.9445 3.05564 14.8889 2.66675 16.0001 2.66675C17.1112 2.66675 18.0556 3.05564 18.8334 3.83341C19.6112 4.61119 20.0001 5.55564 20.0001 6.66675V14.6667C20.0001 15.7779 19.6112 16.7223 18.8334 17.5001C18.0556 18.2779 17.1112 18.6667 16.0001 18.6667ZM14.6667 26.6667V23.9001C12.6223 23.6112 10.8723 22.7445 9.41673 21.3001C7.96117 19.8556 7.07784 18.1001 6.76673 16.0334C6.72228 15.6556 6.82228 15.3334 7.06673 15.0667C7.31117 14.8001 7.62228 14.6667 8.00006 14.6667C8.37784 14.6667 8.6945 14.7945 8.95006 15.0501C9.20562 15.3056 9.37784 15.6223 9.46673 16.0001C9.77784 17.5556 10.5501 18.8334 11.7834 19.8334C13.0167 20.8334 14.4223 21.3334 16.0001 21.3334C17.6001 21.3334 19.0112 20.8279 20.2334 19.8167C21.4556 18.8056 22.2223 17.5334 22.5334 16.0001C22.6223 15.6223 22.7945 15.3056 23.0501 15.0501C23.3056 14.7945 23.6223 14.6667 24.0001 14.6667C24.3778 14.6667 24.6889 14.8001 24.9334 15.0667C25.1778 15.3334 25.2778 15.6556 25.2334 16.0334C24.9223 18.0556 24.0445 19.8001 22.6001 21.2667C21.1556 22.7334 19.4001 23.6112 17.3334 23.9001V26.6667C17.3334 27.0445 17.2056 27.3612 16.9501 27.6167C16.6945 27.8723 16.3778 28.0001 16.0001 28.0001C15.6223 28.0001 15.3056 27.8723 15.0501 27.6167C14.7945 27.3612 14.6667 27.0445 14.6667 26.6667Z" fill="black" fill-opacity="0.2"/>
+</g>
+</svg>
diff --git a/src/assets/icons/mic_off.svg b/src/assets/icons/mic_off.svg
new file mode 100644
index 0000000000..1d544dd91f
--- /dev/null
+++ b/src/assets/icons/mic_off.svg
@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_32_706" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+<rect width="32" height="32" fill="white"/>
+</mask>
+<g mask="url(#mask0_32_706)">
+<path d="M22.4 19.4334C22.0889 19.2556 21.8889 18.9834 21.8 18.6168C21.7111 18.2501 21.7556 17.9112 21.9333 17.6001C22.0889 17.3556 22.2167 17.0945 22.3167 16.8167C22.4167 16.539 22.4889 16.2556 22.5333 15.9668C22.6222 15.589 22.7945 15.2779 23.05 15.0334C23.3056 14.789 23.6222 14.6667 24 14.6667C24.3778 14.6667 24.6889 14.8001 24.9333 15.0667C25.1778 15.3334 25.2778 15.6556 25.2334 16.0334C25.1667 16.5445 25.05 17.0445 24.8834 17.5334C24.7167 18.0223 24.5 18.489 24.2334 18.9334C24.0556 19.2445 23.7833 19.4501 23.4167 19.5501C23.05 19.6501 22.7111 19.6112 22.4 19.4334ZM17.7334 13.9334L12.7667 8.96675C12.5222 8.7223 12.3334 8.43897 12.2 8.11675C12.0667 7.79453 12 7.45564 12 7.10008V6.66675C12 5.55564 12.3889 4.61119 13.1667 3.83341C13.9445 3.05564 14.8889 2.66675 16 2.66675C17.1111 2.66675 18.0556 3.05564 18.8334 3.83341C19.6111 4.61119 20 5.55564 20 6.66675V12.9667C20 13.5667 19.7278 13.9834 19.1833 14.2167C18.6389 14.4501 18.1556 14.3556 17.7334 13.9334ZM14.6667 26.6668V23.8668C12.6222 23.6001 10.8722 22.7445 9.41668 21.3001C7.96113 19.8556 7.07779 18.1001 6.76668 16.0334C6.72224 15.6556 6.82224 15.3334 7.06668 15.0667C7.31113 14.8001 7.62224 14.6667 8.00002 14.6667C8.37779 14.6667 8.69446 14.7945 8.95002 15.0501C9.20557 15.3056 9.37779 15.6223 9.46668 16.0001C9.77779 17.5556 10.55 18.8334 11.7833 19.8334C13.0167 20.8334 14.4222 21.3334 16 21.3334C16.7556 21.3334 17.4722 21.2167 18.15 20.9834C18.8278 20.7501 19.4445 20.4223 20 20.0001L21.9 21.9001C21.2556 22.4112 20.55 22.839 19.7833 23.1834C19.0167 23.5279 18.2 23.7556 17.3334 23.8668V26.6668C17.3334 27.0445 17.2056 27.3612 16.95 27.6168C16.6945 27.8723 16.3778 28.0001 16 28.0001C15.6222 28.0001 15.3056 27.8723 15.05 27.6168C14.7945 27.3612 14.6667 27.0445 14.6667 26.6668ZM25.4667 29.2001L2.80002 6.53342C2.55557 6.28897 2.43335 5.97786 2.43335 5.60008C2.43335 5.2223 2.55557 4.91119 2.80002 4.66675C3.04446 4.4223 3.35557 4.30008 3.73335 4.30008C4.11113 4.30008 4.42224 4.4223 4.66668 4.66675L27.3334 27.3334C27.5778 27.5779 27.7 27.889 27.7 28.2668C27.7 28.6445 27.5778 28.9556 27.3334 29.2001C27.0889 29.4445 26.7778 29.5667 26.4 29.5667C26.0222 29.5667 25.7111 29.4445 25.4667 29.2001Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/assets/icons/screen-share.svg b/src/assets/icons/screen-share.svg
new file mode 100644
index 0000000000..d3d66c0b50
--- /dev/null
+++ b/src/assets/icons/screen-share.svg
@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_12_1273" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+<rect width="32" height="32" fill="#333333"/>
+<rect width="32" height="32" fill="black" fill-opacity="0.2"/>
+</mask>
+<g mask="url(#mask0_12_1273)">
+<path d="M14.6666 14.6667H17.3333V16.5333C17.3333 16.6889 17.4 16.7944 17.5333 16.85C17.6666 16.9056 17.7889 16.8778 17.9 16.7667L20.8666 13.8C21 13.6667 21.0666 13.5111 21.0666 13.3333C21.0666 13.1556 21 13 20.8666 12.8667L17.9 9.9C17.7889 9.78889 17.6666 9.76111 17.5333 9.81667C17.4 9.87222 17.3333 9.97778 17.3333 10.1333V12H14.6666C13.5555 12 12.6111 12.3889 11.8333 13.1667C11.0555 13.9444 10.6666 14.8889 10.6666 16V17.3333C10.6666 17.7111 10.7944 18.0278 11.05 18.2833C11.3055 18.5389 11.6222 18.6667 12 18.6667C12.3778 18.6667 12.6944 18.5389 12.95 18.2833C13.2055 18.0278 13.3333 17.7111 13.3333 17.3333V16C13.3333 15.6222 13.4611 15.3056 13.7166 15.05C13.9722 14.7944 14.2889 14.6667 14.6666 14.6667ZM2.66665 28C2.28887 28 1.9722 27.8722 1.71665 27.6167C1.46109 27.3611 1.33331 27.0444 1.33331 26.6667C1.33331 26.2889 1.46109 25.9722 1.71665 25.7167C1.9722 25.4611 2.28887 25.3333 2.66665 25.3333H29.3333C29.7111 25.3333 30.0278 25.4611 30.2833 25.7167C30.5389 25.9722 30.6666 26.2889 30.6666 26.6667C30.6666 27.0444 30.5389 27.3611 30.2833 27.6167C30.0278 27.8722 29.7111 28 29.3333 28H2.66665ZM5.33331 24C4.59998 24 3.9722 23.7389 3.44998 23.2167C2.92776 22.6944 2.66665 22.0667 2.66665 21.3333V6.66667C2.66665 5.93333 2.92776 5.30556 3.44998 4.78333C3.9722 4.26111 4.59998 4 5.33331 4H26.6666C27.4 4 28.0278 4.26111 28.55 4.78333C29.0722 5.30556 29.3333 5.93333 29.3333 6.66667V21.3333C29.3333 22.0667 29.0722 22.6944 28.55 23.2167C28.0278 23.7389 27.4 24 26.6666 24H5.33331Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/assets/icons/sound_detection_loud_sound.svg b/src/assets/icons/sound_detection_loud_sound.svg
new file mode 100644
index 0000000000..b506f23f79
--- /dev/null
+++ b/src/assets/icons/sound_detection_loud_sound.svg
@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_400_4449" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+<rect width="32" height="32" fill="white"/>
+</mask>
+<g mask="url(#mask0_400_4449)">
+<path d="M16.0889 23.4778L11.9889 27.5778C11.5667 28 11.0426 28.2111 10.4166 28.2111C9.7906 28.2111 9.26649 28 8.84427 27.5778L4.4556 23.1668C4.03338 22.7446 3.82227 22.2223 3.82227 21.6001C3.82227 20.9779 4.03338 20.4557 4.4556 20.0334L8.52227 15.9444V11.0891C8.52227 10.5927 8.75004 10.2519 9.2056 10.0668C9.66116 9.88167 10.0629 9.96311 10.4109 10.3111L21.7223 21.5891C22.0703 21.9371 22.1462 22.3389 21.9499 22.7944C21.7537 23.25 21.4074 23.4778 20.9109 23.4778H16.0889ZM22.9109 9.05578C21.4963 7.64089 19.8315 6.752 17.9166 6.38911C16.0017 6.026 14.1332 6.21489 12.3109 6.95578C12.0369 7.06689 11.7536 7.06867 11.4609 6.96111C11.1685 6.85378 10.974 6.66311 10.8776 6.38911C10.7592 6.07045 10.7666 5.76111 10.8999 5.46111C11.0333 5.16111 11.2592 4.95189 11.5776 4.83345C13.7776 3.94456 16.048 3.72789 18.3889 4.18345C20.7296 4.639 22.7666 5.73345 24.4999 7.46678C26.2184 9.18523 27.3092 11.2019 27.7723 13.5168C28.2352 15.8317 28.0407 18.0853 27.1889 20.2778C27.0703 20.6038 26.8554 20.8501 26.5443 21.0168C26.2332 21.1834 25.9147 21.2038 25.5889 21.0778C25.3 20.9742 25.1093 20.778 25.0166 20.4891C24.9239 20.2002 24.9369 19.9002 25.0556 19.5891C25.7814 17.7816 25.9554 15.9241 25.5776 14.0168C25.1998 12.1094 24.3109 10.4558 22.9109 9.05578ZM20.4223 11.5778C20.9112 12.0667 21.2982 12.6204 21.5833 13.2391C21.8684 13.8576 22.0517 14.5112 22.1333 15.2001C22.1628 15.4963 22.0665 15.7444 21.8443 15.9444C21.622 16.1444 21.3592 16.2371 21.0556 16.2224C20.7592 16.2076 20.5017 16.0927 20.2833 15.8778C20.0648 15.6631 19.9259 15.4076 19.8666 15.1111C19.7926 14.7556 19.6759 14.4111 19.5166 14.0778C19.3573 13.7444 19.1406 13.4408 18.8666 13.1668C18.5926 12.8928 18.2889 12.6687 17.9556 12.4944C17.6223 12.3204 17.274 12.1964 16.9109 12.1224C16.5998 12.0631 16.3387 11.9298 16.1276 11.7224C15.9165 11.5149 15.8036 11.2519 15.7889 10.9334C15.774 10.6223 15.8685 10.352 16.0723 10.1224C16.2758 9.89267 16.5295 9.8 16.8333 9.84445C17.5073 9.93334 18.1536 10.1241 18.7723 10.4168C19.3907 10.7094 19.9407 11.0964 20.4223 11.5778Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/assets/icons/stop-screen-share.svg b/src/assets/icons/stop-screen-share.svg
new file mode 100644
index 0000000000..6949cc3ce0
--- /dev/null
+++ b/src/assets/icons/stop-screen-share.svg
@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_16_749" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+<rect width="32" height="32" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_16_749)">
+<path d="M24.2666 28H2.66665C2.28887 28 1.9722 27.8723 1.71665 27.6167C1.46109 27.3611 1.33331 27.0445 1.33331 26.6667C1.33331 26.2889 1.46109 25.9723 1.71665 25.7167C1.9722 25.4611 2.28887 25.3334 2.66665 25.3334H21.5666L20.2333 24H5.33331C4.59998 24 3.9722 23.7389 3.44998 23.2167C2.92776 22.6945 2.66665 22.0667 2.66665 21.3334V6.4667L1.83331 5.60003C1.58887 5.33337 1.46665 5.02225 1.46665 4.6667C1.46665 4.31114 1.59998 4.00003 1.86665 3.73337C2.11109 3.48892 2.4222 3.3667 2.79998 3.3667C3.17776 3.3667 3.48887 3.48892 3.73331 3.73337L28.2666 28.2667C28.5111 28.5111 28.6333 28.8223 28.6333 29.2C28.6333 29.5778 28.5111 29.8889 28.2666 30.1334C28.0222 30.3778 27.7111 30.5 27.3333 30.5C26.9555 30.5 26.6444 30.3778 26.4 30.1334L24.2666 28ZM13.3333 17.1334L10.9 14.6667C10.7889 14.8667 10.7222 15.0778 10.7 15.3C10.6778 15.5223 10.6666 15.7556 10.6666 16V17.3334C10.6666 17.7111 10.7944 18.0278 11.05 18.2834C11.3055 18.5389 11.6222 18.6667 12 18.6667C12.3778 18.6667 12.6944 18.5389 12.95 18.2834C13.2055 18.0278 13.3333 17.7111 13.3333 17.3334V17.1334ZM27.6 23.8L19.2333 15.4334L20.8666 13.8C21 13.6667 21.0666 13.5111 21.0666 13.3334C21.0666 13.1556 21 13 20.8666 12.8667L17.9 9.90003C17.7889 9.78892 17.6666 9.76114 17.5333 9.8167C17.4 9.87225 17.3333 9.97781 17.3333 10.1334V12H15.8L7.79998 4.00003H26.6666C27.4 4.00003 28.0278 4.26114 28.55 4.78337C29.0722 5.30559 29.3333 5.93337 29.3333 6.6667V21.3334C29.3333 21.9111 29.1722 22.4167 28.85 22.85C28.5278 23.2834 28.1111 23.6 27.6 23.8Z" fill="#333333"/>
+<path d="M24.2666 28H2.66665C2.28887 28 1.9722 27.8723 1.71665 27.6167C1.46109 27.3611 1.33331 27.0445 1.33331 26.6667C1.33331 26.2889 1.46109 25.9723 1.71665 25.7167C1.9722 25.4611 2.28887 25.3334 2.66665 25.3334H21.5666L20.2333 24H5.33331C4.59998 24 3.9722 23.7389 3.44998 23.2167C2.92776 22.6945 2.66665 22.0667 2.66665 21.3334V6.4667L1.83331 5.60003C1.58887 5.33337 1.46665 5.02225 1.46665 4.6667C1.46665 4.31114 1.59998 4.00003 1.86665 3.73337C2.11109 3.48892 2.4222 3.3667 2.79998 3.3667C3.17776 3.3667 3.48887 3.48892 3.73331 3.73337L28.2666 28.2667C28.5111 28.5111 28.6333 28.8223 28.6333 29.2C28.6333 29.5778 28.5111 29.8889 28.2666 30.1334C28.0222 30.3778 27.7111 30.5 27.3333 30.5C26.9555 30.5 26.6444 30.3778 26.4 30.1334L24.2666 28ZM13.3333 17.1334L10.9 14.6667C10.7889 14.8667 10.7222 15.0778 10.7 15.3C10.6778 15.5223 10.6666 15.7556 10.6666 16V17.3334C10.6666 17.7111 10.7944 18.0278 11.05 18.2834C11.3055 18.5389 11.6222 18.6667 12 18.6667C12.3778 18.6667 12.6944 18.5389 12.95 18.2834C13.2055 18.0278 13.3333 17.7111 13.3333 17.3334V17.1334ZM27.6 23.8L19.2333 15.4334L20.8666 13.8C21 13.6667 21.0666 13.5111 21.0666 13.3334C21.0666 13.1556 21 13 20.8666 12.8667L17.9 9.90003C17.7889 9.78892 17.6666 9.76114 17.5333 9.8167C17.4 9.87225 17.3333 9.97781 17.3333 10.1334V12H15.8L7.79998 4.00003H26.6666C27.4 4.00003 28.0278 4.26114 28.55 4.78337C29.0722 5.30559 29.3333 5.93337 29.3333 6.6667V21.3334C29.3333 21.9111 29.1722 22.4167 28.85 22.85C28.5278 23.2834 28.1111 23.6 27.6 23.8Z" fill="black" fill-opacity="0.2"/>
+</g>
+</svg>
diff --git a/src/assets/icons/videocam.svg b/src/assets/icons/videocam.svg
new file mode 100644
index 0000000000..c267aa9bf4
--- /dev/null
+++ b/src/assets/icons/videocam.svg
@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_32_789" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+<rect width="32" height="32" fill="#333333"/>
+<rect width="32" height="32" fill="black" fill-opacity="0.2"/>
+</mask>
+<g mask="url(#mask0_32_789)">
+<path d="M5.33329 26.6666C4.59996 26.6666 3.97218 26.4055 3.44996 25.8833C2.92774 25.361 2.66663 24.7333 2.66663 23.9999V7.99992C2.66663 7.26659 2.92774 6.63881 3.44996 6.11659C3.97218 5.59436 4.59996 5.33325 5.33329 5.33325H21.3333C22.0666 5.33325 22.6944 5.59436 23.2166 6.11659C23.7388 6.63881 24 7.26659 24 7.99992V13.9999L28.2 9.79992C28.4222 9.5777 28.6666 9.52214 28.9333 9.63325C29.2 9.74436 29.3333 9.95547 29.3333 10.2666V21.7333C29.3333 22.0444 29.2 22.2555 28.9333 22.3666C28.6666 22.4777 28.4222 22.4221 28.2 22.1999L24 17.9999V23.9999C24 24.7333 23.7388 25.361 23.2166 25.8833C22.6944 26.4055 22.0666 26.6666 21.3333 26.6666H5.33329Z" fill="#333333"/>
+<path d="M5.33329 26.6666C4.59996 26.6666 3.97218 26.4055 3.44996 25.8833C2.92774 25.361 2.66663 24.7333 2.66663 23.9999V7.99992C2.66663 7.26659 2.92774 6.63881 3.44996 6.11659C3.97218 5.59436 4.59996 5.33325 5.33329 5.33325H21.3333C22.0666 5.33325 22.6944 5.59436 23.2166 6.11659C23.7388 6.63881 24 7.26659 24 7.99992V13.9999L28.2 9.79992C28.4222 9.5777 28.6666 9.52214 28.9333 9.63325C29.2 9.74436 29.3333 9.95547 29.3333 10.2666V21.7333C29.3333 22.0444 29.2 22.2555 28.9333 22.3666C28.6666 22.4777 28.4222 22.4221 28.2 22.1999L24 17.9999V23.9999C24 24.7333 23.7388 25.361 23.2166 25.8833C22.6944 26.4055 22.0666 26.6666 21.3333 26.6666H5.33329Z" fill="black" fill-opacity="0.2"/>
+</g>
+</svg>
diff --git a/src/assets/icons/videocam_off.svg b/src/assets/icons/videocam_off.svg
new file mode 100644
index 0000000000..e93196c843
--- /dev/null
+++ b/src/assets/icons/videocam_off.svg
@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_32_819" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+<rect width="32" height="32" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_32_819)">
+<path d="M24 14L28.2 9.80005C28.4222 9.57783 28.6667 9.52227 28.9334 9.63338C29.2 9.74449 29.3334 9.9556 29.3334 10.2667V21.7334C29.3334 22.0445 29.2 22.2556 28.9334 22.3667C28.6667 22.4778 28.4222 22.4223 28.2 22.2001L23.7667 17.7667C23.5445 18.0778 23.2278 18.2667 22.8167 18.3334C22.4056 18.4001 22.0445 18.2778 21.7334 17.9667L11.3667 7.60005C11.1445 7.37783 11.0167 7.14449 10.9834 6.90005C10.95 6.6556 10.9889 6.41116 11.1 6.16672C11.2111 5.92227 11.3667 5.72227 11.5667 5.56672C11.7667 5.41116 12.0222 5.33338 12.3334 5.33338H21.3334C22.0667 5.33338 22.6945 5.59449 23.2167 6.11672C23.7389 6.63894 24 7.26672 24 8.00005V14ZM26.4667 30.2001L1.80002 5.53338C1.55557 5.28894 1.43335 4.97783 1.43335 4.60005C1.43335 4.22227 1.55557 3.91116 1.80002 3.66672C2.04446 3.42227 2.35557 3.30005 2.73335 3.30005C3.11113 3.30005 3.42224 3.42227 3.66668 3.66672L28.3334 28.3334C28.5778 28.5778 28.7 28.8889 28.7 29.2667C28.7 29.6445 28.5778 29.9556 28.3334 30.2001C28.0889 30.4445 27.7778 30.5667 27.4 30.5667C27.0222 30.5667 26.7111 30.4445 26.4667 30.2001ZM5.33335 5.33338L24 24C24 24.7334 23.7389 25.3612 23.2167 25.8834C22.6945 26.4056 22.0667 26.6667 21.3334 26.6667H5.33335C4.60002 26.6667 3.97224 26.4056 3.45002 25.8834C2.92779 25.3612 2.66668 24.7334 2.66668 24V8.00005C2.66668 7.26672 2.92779 6.63894 3.45002 6.11672C3.97224 5.59449 4.60002 5.33338 5.33335 5.33338Z" fill="white"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/mdi.ts b/src/assets/mdi.ts
index 2130c677b9..05e7af93f6 100644
--- a/src/assets/mdi.ts
+++ b/src/assets/mdi.ts
@@ -24,18 +24,23 @@ import {
   mdiEmail,
   mdiTag,
   mdiPlus,
+  mdiPlusCircle,
   mdiMagnify,
   mdiHistory,
   mdiDownload,
   mdiEmoticonOutline,
   mdiCog,
   mdiAccount,
+  mdiAccountMultiple,
+  mdiAccountMinus,
   mdiCogs,
   mdiBrightness6,
   mdiPencilOutline,
   mdiToggleSwitchOff,
   mdiToggleSwitch,
   mdiChevronDoubleLeft,
+  mdiChevronDoubleUp,
+  mdiChevronDoubleDown,
   mdiChevronLeft,
   mdiChevronRight,
   mdiBookmark,
@@ -80,7 +85,11 @@ import {
   mdiFormatTitle,
   mdiCloseCircle,
   mdiNotebook,
-  mdiDelete
+  mdiDelete,
+  mdiVideo,
+  mdiVideoOff,
+  mdiCommentTextMultipleOutline,
+  mdiCommentOffOutline
 } from '@mdi/js'
 
 interface MdiIconsMapping {
@@ -117,10 +126,13 @@ const mdi: MdiIconsMapping = {
   tags: mdiTagMultiple,
   email: mdiEmail,
   plus: mdiPlus,
+  'plus-circle': mdiPlusCircle,
   download: mdiDownload,
   'emoticon-outline': mdiEmoticonOutline,
   cog: mdiCog,
   account: mdiAccount,
+  'account-multiple': mdiAccountMultiple,
+  'account-minus': mdiAccountMinus,
   cogs: mdiCogs,
   'brightness-6': mdiBrightness6,
   pencil: mdiPencil,
@@ -128,6 +140,8 @@ const mdi: MdiIconsMapping = {
   'toggle-switch-off': mdiToggleSwitchOff,
   'toggle-switch-on': mdiToggleSwitch,
   'chevron-double': mdiChevronDoubleLeft,
+  'chevron-double-up': mdiChevronDoubleUp,
+  'chevron-double-down': mdiChevronDoubleDown,
   'chevron-left': mdiChevronLeft,
   'chevron-right': mdiChevronRight,
   'chevron-up': mdiChevronUp,
@@ -169,7 +183,11 @@ const mdi: MdiIconsMapping = {
   stop: mdiStop,
   crown: mdiCrown,
   'format-title': mdiFormatTitle,
-  delete: mdiDelete
+  delete: mdiDelete,
+  video: mdiVideo,
+  'video-off': mdiVideoOff,
+  'comment-outline': mdiCommentTextMultipleOutline,
+  'comment-off-outline': mdiCommentOffOutline
 }
 
 export default mdi
diff --git a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsList.vue b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsList.vue
index 09b79d83ea..e7fe77bc34 100644
--- a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsList.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsList.vue
@@ -2,15 +2,15 @@
   <div :class="$style.container">
     <template v-if="!isMobile">
       <header-tools-item
-        v-if="isQallFeatureEnabled"
+        v-if="true"
         icon-mdi
-        :icon-name="qallIconName"
+        :icon-name="isCallingHere ? 'phone' : 'phone-outline'"
         :class="$style.qallIcon"
-        :disabled="!canToggleQall"
-        :data-is-active="$boolAttr(isQallSessionOpened)"
-        :data-is-joined="$boolAttr(canEndQall)"
-        :tooltip="qallLabel"
-        @click="toggleQall"
+        :disabled="disabled"
+        :data-is-active="$boolAttr(isCallingHere)"
+        :data-is-joined="$boolAttr(isCallingHere)"
+        :tooltip="'Qallボタン'"
+        @click="joinQall(props.channelId)"
       />
       <header-tools-item
         :class="$style.notificationIcon"
@@ -55,8 +55,8 @@ import { ChannelSubscribeLevel } from '@traptitech/traq'
 import { useResponsiveStore } from '/@/store/ui/responsive'
 import type { ChannelId } from '/@/types/entity-ids'
 import HeaderToolsItem from '/@/components/Main/MainView/PrimaryViewHeader/PrimaryViewHeaderToolsItem.vue'
-import useQall from './composables/useQall'
 import useStarChannel from './composables/useStarChannel'
+import { useQall } from '/@/composables/qall/useQall'
 
 const props = withDefaults(
   defineProps<{
@@ -78,15 +78,9 @@ const emit = defineEmits<{
 
 const { isMobile } = useResponsiveStore()
 
-const {
-  isQallFeatureEnabled,
-  isQallSessionOpened,
-  canEndQall,
-  canToggleQall,
-  qallIconName,
-  qallLabel,
-  toggleQall
-} = useQall(props)
+const { joinQall, callingChannel } = useQall()
+const isCallingHere = computed(() => callingChannel.value === props.channelId)
+const disabled = computed(() => !!callingChannel.value && !isCallingHere.value)
 
 const { changeToNextSubscriptionLevel, currentChannelSubscription } =
   useChannelSubscriptionState(toRef(props, 'channelId'))
diff --git a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsMenu.vue b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsMenu.vue
index 9594bd6f41..f5d7c77b03 100644
--- a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsMenu.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsMenu.vue
@@ -1,14 +1,14 @@
 <template>
   <primary-view-header-popup-frame>
     <header-tools-menu-item
-      v-if="isMobile && isQallFeatureEnabled"
-      :icon-name="qallIconName"
+      v-if="isMobile"
+      :icon-name="isCallingHere ? 'phone' : 'phone-outline'"
       icon-mdi
       :class="$style.qallIcon"
-      :label="qallLabel"
-      :disabled="!canToggleQall"
-      :data-is-active="$boolAttr(isQallSessionOpened)"
-      @click="toggleQall"
+      :label="'Qallを開始'"
+      :disabled="disabled"
+      :data-is-active="$boolAttr(isCallingHere)"
+      @click="joinQall(props.channelId)"
       @click-item="emit('clickItem')"
     />
     <header-tools-menu-item
@@ -48,6 +48,13 @@
       @click="openChannelManageModal"
       @click-item="emit('clickItem')"
     />
+    <header-tools-menu-item
+      icon-name="phone-outline"
+      icon-mdi
+      label="ウェビナーモードでQallを開始"
+      @click="() => joinQall(props.channelId, true)"
+      @click-item="emit('clickItem')"
+    />
   </primary-view-header-popup-frame>
 </template>
 
@@ -58,7 +65,7 @@ import { UserPermission } from '@traptitech/traq'
 import { useMeStore } from '/@/store/domain/me'
 import PrimaryViewHeaderPopupFrame from '/@/components/Main/MainView/PrimaryViewHeader/PrimaryViewHeaderPopupFrame.vue'
 import HeaderToolsMenuItem from '/@/components/Main/MainView/PrimaryViewHeader/PrimaryViewHeaderPopupMenuItem.vue'
-import useQall from './composables/useQall'
+import { useQall } from '/@/composables/qall/useQall'
 import type { ChannelId } from '/@/types/entity-ids'
 import useChannelCreateModal from './composables/useChannelCreateModal'
 import useNotificationModal from './composables/useNotificationModal'
@@ -84,14 +91,9 @@ const props = withDefaults(
 
 const { isMobile } = useResponsiveStore()
 
-const {
-  isQallFeatureEnabled,
-  isQallSessionOpened,
-  canToggleQall,
-  qallIconName,
-  qallLabel,
-  toggleQall
-} = useQall(props)
+const { joinQall, callingChannel } = useQall()
+const isCallingHere = computed(() => callingChannel.value === props.channelId)
+const disabled = computed(() => !!callingChannel.value && !isCallingHere.value)
 
 const { isChildChannelCreatable, openChannelCreateModal } =
   useChannelCreateModal(props)
diff --git a/src/components/Main/MainView/ChannelView/ChannelHeader/composables/useQall.ts b/src/components/Main/MainView/ChannelView/ChannelHeader/composables/useQall.ts
deleted file mode 100644
index 0c665d5fa8..0000000000
--- a/src/components/Main/MainView/ChannelView/ChannelHeader/composables/useQall.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import { computed } from 'vue'
-import type { ChannelId } from '/@/types/entity-ids'
-import { useToastStore } from '/@/store/ui/toast'
-import { useAppRtcStore } from '/@/store/app/rtc'
-import { useDomainRtcStore } from '/@/store/domain/rtc'
-import { useRtcSettings } from '/@/store/app/rtcSettings'
-
-const isSkywayApikeySet = window.traQConfig.skyway !== undefined
-
-const useQall = (props: { channelId: ChannelId; isArchived: boolean }) => {
-  const { isEnabled: isRtcEnabled } = useRtcSettings()
-  const {
-    /** この端末でチャンネル問わず自分がQallに参加している */
-    isCurrentDevice: isJoinedWithCurrentDevice,
-    startQall,
-    endQall
-  } = useAppRtcStore()
-  const { sessionInfoMap, qallSession, currentRTCState } = useDomainRtcStore()
-  const { addErrorToast } = useToastStore()
-
-  const isQallFeatureEnabled = computed(
-    () => isSkywayApikeySet && isRtcEnabled.value
-  )
-
-  /** このチャンネルでQallが開始されている */
-  const isQallSessionOpened = computed(() =>
-    [...sessionInfoMap.value.values()].some(
-      s => s?.channelId === props.channelId && s?.type === 'qall'
-    )
-  )
-  /** 端末・チャンネルを問わず自分がQallに参加している */
-  const hasActiveQallSession = computed(() => !!qallSession.value)
-  /** 端末問わず自分がこのチャンネルのQallに参加している */
-  const isJoinedQallSession = computed(
-    () =>
-      hasActiveQallSession.value &&
-      currentRTCState.value?.channelId === props.channelId
-  )
-
-  /**
-   * Qallが開始できるのは、このチャンネルがアーカイブされていなく
-   * どの端末でもどのチャンネルにもQallに参加していないとき
-   */
-  const canStartQall = computed(
-    () => !props.isArchived && !hasActiveQallSession.value
-  )
-  /**
-   * Qallが終了できるのは、
-   * 自分がこの端末でこのチャンネルのQallに参加しているとき
-   */
-  const canEndQall = computed(
-    () => isJoinedQallSession.value && isJoinedWithCurrentDevice.value
-  )
-  const canToggleQall = computed(() => canStartQall.value || canEndQall.value)
-
-  const qallIconName = computed(() =>
-    isJoinedQallSession.value ? 'phone' : 'phone-outline'
-  )
-  const qallLabel = computed(() => {
-    if (isQallSessionOpened.value) {
-      if (isJoinedWithCurrentDevice.value) {
-        return 'Qallを終了'
-      }
-      if (isJoinedQallSession.value) {
-        return '別のデバイスでQall中'
-      }
-      return 'Qallに参加'
-    }
-    if (hasActiveQallSession.value) {
-      return '他チャンネルでQall中'
-    }
-    return 'Qallを開始'
-  })
-
-  const startQallOnCurrentChannel = async () => {
-    try {
-      await startQall(props.channelId)
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error('Qallの開始に失敗しました', e)
-
-      addErrorToast('Qallの開始に失敗しました')
-    }
-  }
-  const toggleQall = () => {
-    if (isJoinedQallSession.value) {
-      if (isJoinedWithCurrentDevice.value) {
-        endQall()
-      }
-    } else {
-      startQallOnCurrentChannel()
-    }
-  }
-  return {
-    isQallFeatureEnabled,
-    isQallSessionOpened,
-    canEndQall,
-    canToggleQall,
-    qallIconName,
-    qallLabel,
-    toggleQall
-  }
-}
-export default useQall
diff --git a/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarContent.vue b/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarContent.vue
index 8da728d95a..08fea5d80b 100644
--- a/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarContent.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarContent.vue
@@ -49,8 +49,9 @@ import ChannelSidebarRelation from './ChannelSidebarRelation.vue'
 import ChannelSidebarQall from './ChannelSidebarQall.vue'
 import ChannelSidebarBots from './ChannelSidebarBots.vue'
 import type { UserId, ChannelId } from '/@/types/entity-ids'
-import { useQallSession } from './composables/useChannelRTCSession'
 import { useModelSyncer } from '/@/composables/useModelSyncer'
+import { useQall } from '/@/composables/qall/useQall'
+import { computed } from 'vue'
 
 const props = withDefaults(
   defineProps<{
@@ -70,7 +71,14 @@ const emit = defineEmits<{
   (e: 'update:isViewersDetailOpen', value: boolean): void
 }>()
 
-const { sessionUserIds: qallUserIds } = useQallSession(props)
+const { rooms: roomWithParticipants } = useQall()
+
+const qallUserIds = computed(
+  () =>
+    roomWithParticipants.value
+      .find(room => room.channel.id === props.channelId)
+      ?.participants?.map(participant => participant.user.id) ?? []
+)
 
 const isViewersDetailOpen = useModelSyncer(props, emit, 'isViewersDetailOpen')
 </script>
diff --git a/src/components/Main/MainView/ChannelView/ChannelSidebar/composables/useChannelRTCSession.ts b/src/components/Main/MainView/ChannelView/ChannelSidebar/composables/useChannelRTCSession.ts
deleted file mode 100644
index 4de13bfcd7..0000000000
--- a/src/components/Main/MainView/ChannelView/ChannelSidebar/composables/useChannelRTCSession.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { ChannelId } from '/@/types/entity-ids'
-import { computed } from 'vue'
-import type { SessionType } from '/@/store/domain/rtc'
-import { useDomainRtcStore } from '/@/store/domain/rtc'
-
-const useRTCSession =
-  (sessionType: SessionType) => (props: { channelId: ChannelId }) => {
-    const { userStateMap, getChannelRTCSessionId } = useDomainRtcStore()
-
-    const sessionId = computed(() =>
-      getChannelRTCSessionId(sessionType, props.channelId)
-    )
-    const sessionUserIds = computed(() =>
-      [...userStateMap.value.entries()]
-        .filter(([_, userState]) =>
-          userState.sessionStates.some(
-            sessionState => sessionState.sessionId === sessionId.value
-          )
-        )
-        .map(([userId, _]) => userId)
-    )
-    return { sessionId, sessionUserIds }
-  }
-
-export const useQallSession = useRTCSession('qall')
diff --git a/src/components/Main/MainView/ChannelView/ChannelView.vue b/src/components/Main/MainView/ChannelView/ChannelView.vue
index b2023ce6ef..d04e38d9b7 100644
--- a/src/components/Main/MainView/ChannelView/ChannelView.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelView.vue
@@ -4,7 +4,10 @@
       <channel-header :channel-id="channelId" />
     </template>
     <template #default>
+      <QallAudio />
+      <QallView v-if="getQallingState(channelId) === 'mainView'" />
       <channel-view-content
+        v-else
         :channel-id="channelId"
         :entry-message-id="entryMessageId"
         :pinned-messages="pinnedMessages"
@@ -13,6 +16,7 @@
     </template>
     <template #sidebar>
       <channel-sidebar
+        v-if="getQallingState(channelId) !== 'mainView'"
         :channel-id="channelId"
         :is-sidebar-opener-ready="isReady"
         :pinned-messages="pinnedMessages"
@@ -31,6 +35,9 @@ import type { ChannelId, MessageId } from '/@/types/entity-ids'
 import { toRef } from 'vue'
 import usePinnedMessages from '/@/composables/message/usePinnedMessages'
 import useCurrentViewers from '/@/composables/useCurrentViewers'
+import { useQall } from '/@/composables/qall/useQall'
+import QallView from '../QallView/QallView.vue'
+import QallAudio from '../QallView/QallAudio.vue'
 
 const props = defineProps<{
   isReady: boolean
@@ -41,4 +48,5 @@ const props = defineProps<{
 const channelId = toRef(props, 'channelId')
 const pinnedMessages = usePinnedMessages(channelId)
 const { viewingUsers, typingUsers } = useCurrentViewers(channelId)
+const { getQallingState } = useQall()
 </script>
diff --git a/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelView.ts b/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelView.ts
new file mode 100644
index 0000000000..2258c21b61
--- /dev/null
+++ b/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelView.ts
@@ -0,0 +1,71 @@
+import { computed, ref, type ShallowRef } from 'vue'
+import useChannelMessageFetcher from './useChannelMessageFetcher'
+import { useChannelsStore } from '/@/store/entities/channels'
+import { useSubscriptionStore } from '/@/store/domain/subscription'
+export const useChannelView = ({
+  channelId,
+  entryMessageId,
+  scrollerEle
+}: {
+  channelId: string
+  entryMessageId?: string
+  scrollerEle: ShallowRef<{ $el: HTMLDivElement } | undefined>
+}) => {
+  const isMessageShow = ref(false)
+
+  const {
+    messageIds,
+    isReachedEnd,
+    isReachedLatest,
+    isLoading,
+    lastLoadingDirection,
+    onLoadFormerMessagesRequest,
+    onLoadLatterMessagesRequest
+  } = useChannelMessageFetcher(scrollerEle, { channelId, entryMessageId })
+
+  const { channelsMap } = useChannelsStore()
+  const isArchived = computed(
+    () => channelsMap.value.get(channelId)?.archived ?? false
+  )
+
+  const { unreadChannelsMap } = useSubscriptionStore()
+  const resetIsReachedLatest = () => {
+    if (!unreadChannelsMap.value.get(channelId)) return
+    isReachedLatest.value = false
+  }
+
+  const showToNewMessageButton = ref(false)
+  const toNewMessage = (behavior?: ScrollBehavior) => {
+    if (!scrollerEle.value) return
+    showToNewMessageButton.value = false
+    scrollerEle.value.$el.scrollTo({
+      top: scrollerEle.value.$el.scrollHeight,
+      behavior: behavior
+    })
+  }
+
+  const handleScroll = () => {
+    if (scrollerEle.value === undefined || isLoading.value) return
+    const { scrollTop, scrollHeight, clientHeight } = scrollerEle.value.$el
+    showToNewMessageButton.value = scrollHeight - 2 * clientHeight > scrollTop
+    if (!isReachedLatest.value) {
+      showToNewMessageButton.value = true
+    }
+  }
+
+  return {
+    isMessageShow,
+    messageIds,
+    isReachedEnd,
+    isReachedLatest,
+    isLoading,
+    lastLoadingDirection,
+    onLoadFormerMessagesRequest,
+    onLoadLatterMessagesRequest,
+    isArchived,
+    resetIsReachedLatest,
+    showToNewMessageButton,
+    toNewMessage,
+    handleScroll
+  }
+}
diff --git a/src/components/Main/MainView/MessageInput/MessageInput.vue b/src/components/Main/MainView/MessageInput/MessageInput.vue
index 711a50d5d7..818b87cd76 100644
--- a/src/components/Main/MainView/MessageInput/MessageInput.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInput.vue
@@ -2,7 +2,7 @@
   <div
     ref="containerEle"
     :class="$style.container"
-    :data-is-mobile="$boolAttr(isMobile)"
+    :data-is-mobile="$boolAttr(forceMobileStyle || isMobile)"
   >
     <button
       v-if="showToNewMessageButton"
@@ -36,7 +36,9 @@
         v-model="state.text"
         :channel-id="channelId"
         :is-posting="isPosting"
-        :shrink-to-one-line="isMobile && isLeftControlsExpanded"
+        :shrink-to-one-line="
+          (forceMobileStyle || isMobile) && isLeftControlsExpanded
+        "
         @focus="onFocus"
         @blur="onBlur"
         @add-attachments="onAddAttachments"
@@ -85,6 +87,7 @@ const props = defineProps<{
   channelId: ChannelId | DMChannelId
   typingUsers: UserId[]
   showToNewMessageButton: boolean
+  forceMobileStyle?: boolean
 }>()
 const emit = defineEmits<{
   (e: 'clickToNewMessageButton'): void
diff --git a/src/components/Main/MainView/QallView/AudioComponent.vue b/src/components/Main/MainView/QallView/AudioComponent.vue
new file mode 100644
index 0000000000..75c8370756
--- /dev/null
+++ b/src/components/Main/MainView/QallView/AudioComponent.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
+import { useUsersStore } from '/@/store/entities/users'
+import { buildUserIconPath } from '/@/lib/apis'
+import AudioTrack from './AudioTrack.vue'
+import { useUserVolume } from '/@/store/app/userVolume'
+import UserCard from './UserCard.vue'
+const { trackInfo, isShow } = defineProps<{
+  trackInfo: TrackInfo
+  isShow?: boolean
+}>()
+const { getStore, setStore, restoringPromise } = useUserVolume()
+const volume = computed<number | string>(
+  () => getStore(trackInfo.username) ?? 1
+)
+
+const { findUserByName } = useUsersStore()
+const user = computed(() => findUserByName(trackInfo.username))
+const userIconFileId = computed(() => user.value?.iconFileId ?? '')
+const iconImage = computed(() => buildUserIconPath(userIconFileId.value))
+
+const parseToFloat = (value: number | string): number => {
+  if (typeof value === 'number') {
+    return value
+  }
+  return parseFloat(value)
+}
+</script>
+
+<template>
+  <div :class="isShow ? $style.container : []">
+    <UserCard :track-info="trackInfo" />
+    <AudioTrack :track-info="trackInfo" :volume="parseToFloat(volume)" />
+  </div>
+</template>
+<style lang="scss" module>
+.container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/AudioTrack.vue b/src/components/Main/MainView/QallView/AudioTrack.vue
new file mode 100644
index 0000000000..f38deee085
--- /dev/null
+++ b/src/components/Main/MainView/QallView/AudioTrack.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, useTemplateRef, watchEffect } from 'vue'
+import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
+import { useRtcSettings } from '/@/store/app/rtcSettings'
+const { trackInfo, volume } = defineProps<{
+  trackInfo: TrackInfo
+  volume: number
+}>()
+const audioElement = useTemplateRef<HTMLMediaElement>('audioElement')
+const audioContext = new AudioContext()
+const gainNode = audioContext.createGain()
+const { masterVolume } = useRtcSettings()
+gainNode.gain.value = volume * masterVolume.value
+
+watchEffect(() => {
+  gainNode.gain.exponentialRampToValueAtTime(
+    Math.max(volume * masterVolume.value, 1e-44),
+    audioContext.currentTime + 0.2
+  )
+})
+
+onMounted(() => {
+  if (audioElement.value) {
+    // chromeだと一回要素に入れないと上手く再生してくれない
+    trackInfo.trackPublication?.track?.attach(audioElement.value)
+    if (trackInfo.trackPublication?.track?.mediaStream) {
+      audioContext
+        .createMediaStreamSource(trackInfo.trackPublication?.track?.mediaStream)
+        .connect(gainNode)
+        .connect(audioContext.destination)
+      audioElement.value.muted = true
+    }
+  }
+})
+
+onUnmounted(() => {
+  audioContext.close()
+  if (audioElement.value) {
+    trackInfo.trackPublication?.track?.detach(audioElement.value)
+  }
+})
+</script>
+
+<template>
+  <audio :id="trackInfo.trackPublication?.trackSid" ref="audioElement"></audio>
+</template>
+<style lang="scss" module>
+.UserCard {
+  height: 108px;
+  width: 192px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 12px;
+}
+.InnerIcon {
+  height: 96px;
+  width: 96px;
+  background-size: cover;
+  border-radius: 50%;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.OuterIcon {
+  height: 250px;
+  width: 250px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  -webkit-transform: translateY(-50%) translateX(-50%);
+  overflow: hidden;
+  filter: blur(40px);
+}
+.NameLabel {
+  position: absolute;
+  left: 8px;
+  bottom: 8px;
+  display: flex;
+  padding: 4px 12px;
+  align-items: flex-start;
+  gap: 8px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/BackgroundSettingsModal.vue b/src/components/Main/MainView/QallView/BackgroundSettingsModal.vue
new file mode 100644
index 0000000000..466b61fbcd
--- /dev/null
+++ b/src/components/Main/MainView/QallView/BackgroundSettingsModal.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Props {
+  isOpen: boolean
+  backgroundType: 'original' | 'blur' | 'file' | 'screen'
+  onClose: () => void
+  onApply: (type: 'original' | 'blur' | 'file' | 'screen', image?: File) => void
+}
+
+const props = defineProps<Props>()
+
+const localBackgroundType = ref(props.backgroundType)
+const backgroundImage = ref<File>()
+
+const handleApply = () => {
+  props.onApply(localBackgroundType.value, backgroundImage.value)
+}
+</script>
+
+<template>
+  <div v-if="isOpen" :class="$style.modal">
+    <div :class="$style.modalContent">
+      <h3>背景設定</h3>
+      <div :class="$style.modalBody">
+        <div :class="$style.backgroundOptions">
+          <div>
+            <input
+              id="original"
+              v-model="localBackgroundType"
+              type="radio"
+              value="original"
+            />
+            <label for="original">オリジナル</label>
+          </div>
+          <div>
+            <input
+              id="blur"
+              v-model="localBackgroundType"
+              type="radio"
+              value="blur"
+            />
+            <label for="blur">ぼかし</label>
+          </div>
+          <div>
+            <input
+              id="file"
+              v-model="localBackgroundType"
+              type="radio"
+              value="file"
+            />
+            <label for="file">画像</label>
+          </div>
+          <div>
+            <input
+              id="screen"
+              v-model="localBackgroundType"
+              type="radio"
+              value="screen"
+            />
+            <label for="screen">画面共有</label>
+          </div>
+        </div>
+
+        <div v-if="localBackgroundType === 'file'" :class="$style.fileUpload">
+          <input
+            type="file"
+            accept="image/*"
+            @change="
+              e => {
+                const target = e.target as HTMLInputElement
+                backgroundImage = target?.files?.[0]
+              }
+            "
+          />
+        </div>
+
+        <div :class="$style.modalButtons">
+          <button :class="$style.cancelButton" @click="onClose">
+            キャンセル
+          </button>
+          <button :class="$style.applyButton" @click="handleApply">適用</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modalContent {
+  @include background-primary;
+  padding: 24px;
+  border-radius: 8px;
+  width: 400px;
+
+  h3 {
+    margin: 0 0 16px;
+    font-size: 18px;
+    font-weight: bold;
+    @include color-ui-primary;
+  }
+}
+
+.modalBody {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.backgroundOptions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  div {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  label {
+    @include color-ui-primary;
+  }
+}
+
+.fileUpload {
+  margin-top: 8px;
+}
+
+.modalButtons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 16px;
+
+  button {
+    padding: 8px 16px;
+    border-radius: 4px;
+    border: none;
+    cursor: pointer;
+    font-weight: bold;
+  }
+}
+
+.cancelButton {
+  background-color: transparent;
+  border: 1px solid $theme-ui-secondary;
+  color: $theme-ui-secondary;
+
+  &:hover {
+    background-color: rgba($theme-ui-secondary, 0.1);
+  }
+}
+
+.applyButton {
+  background-color: $theme-accent-primary;
+  color: white;
+
+  &:hover {
+    background-color: darken($theme-accent-primary, 5%);
+  }
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/CallControlButton.vue b/src/components/Main/MainView/QallView/CallControlButton.vue
new file mode 100644
index 0000000000..bdf28e22e5
--- /dev/null
+++ b/src/components/Main/MainView/QallView/CallControlButton.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { defineProps, computed, useCssModule } from 'vue'
+import AIcon from '/@/components/UI/AIcon.vue'
+
+const props = defineProps({
+  icon: {
+    type: String,
+    default: ''
+  },
+  onClick: {
+    type: Function,
+    default: null
+  },
+  isOn: {
+    type: Boolean,
+    required: true
+  },
+  inverted: {
+    type: Boolean,
+    default: false
+  },
+  mdi: {
+    type: Boolean,
+    default: true
+  },
+  onBackgroundColor: {
+    type: String,
+    default: 'white'
+  }
+})
+
+const style = useCssModule()
+
+const buttonClass = computed(() => ({
+  [style.callControlButton]: true,
+  [style.off]: !props.isOn
+}))
+
+const iconClass = computed(() => ({
+  [style.icon]: true,
+  [style.inverted]: props.inverted
+}))
+
+const buttonStyle = computed(() => ({
+  backgroundColor: props.isOn ? props.onBackgroundColor : ''
+}))
+
+function handleClick() {
+  props.onClick?.()
+}
+</script>
+
+<template>
+  <button :class="buttonClass" :style="buttonStyle" @click="handleClick">
+    <AIcon v-if="icon" :name="icon" :mdi="mdi" :size="32" :class="iconClass" />
+  </button>
+</template>
+
+<style lang="scss" module>
+.callControlButton {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.3s;
+  color: white;
+}
+
+.callControlButton.off {
+  background-color: #49535b;
+}
+
+.callControlButton:hover {
+  opacity: 0.85;
+}
+
+.icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.inverted {
+  filter: invert(1);
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/CallControlButtonSmall.vue b/src/components/Main/MainView/QallView/CallControlButtonSmall.vue
new file mode 100644
index 0000000000..9850162137
--- /dev/null
+++ b/src/components/Main/MainView/QallView/CallControlButtonSmall.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { defineProps, useCssModule, computed } from 'vue'
+import AIcon from '/@/components/UI/AIcon.vue'
+
+const props = defineProps({
+  icon: {
+    type: String,
+    default: ''
+  },
+  onClick: {
+    type: Function,
+    default: null
+  },
+  mdi: {
+    type: Boolean,
+    default: false
+  },
+  inverted: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const style = useCssModule()
+
+const iconClass = computed(() => ({
+  [style.icon]: true,
+  [style.inverted]: props.inverted
+}))
+
+function handleClick() {
+  props.onClick?.()
+}
+</script>
+
+<template>
+  <button :class="style.callControlBtnSmall" @click="handleClick">
+    <AIcon v-if="icon" :name="icon" :mdi="mdi" :size="32" :class="iconClass" />
+  </button>
+</template>
+
+<style lang="scss" module>
+.callControlBtnSmall {
+  width: 48px;
+  height: 48px;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 0.3s;
+  @include background-tertiary;
+  @include color-ui-primary;
+}
+
+.callControlBtnSmall:hover {
+  opacity: 0.5;
+}
+
+.icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.inverted {
+  filter: invert(1);
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/CameraDetailSetting.vue b/src/components/Main/MainView/QallView/CameraDetailSetting.vue
new file mode 100644
index 0000000000..4deb7733c4
--- /dev/null
+++ b/src/components/Main/MainView/QallView/CameraDetailSetting.vue
@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import { ref, defineProps, defineEmits, onMounted, watch } from 'vue'
+import { useQall } from '/@/composables/qall/useQall'
+import FormButton from '/@/components/UI/FormButton.vue'
+import ClickOutside from '/@/components/UI/ClickOutside'
+
+const props = defineProps<{
+  open: boolean
+  videoInputs: MediaDeviceInfo[]
+}>()
+
+const emit = defineEmits<{
+  (
+    e: 'save',
+    data: {
+      backgroundType: 'original' | 'blur' | 'file' | 'screen'
+      backgroundImage?: File
+      selectedVideoInput?: MediaDeviceInfo
+    }
+  ): void
+  (e: 'add'): void
+  (e: 'close'): void
+}>()
+
+const backgroundType = ref<'original' | 'blur' | 'file' | 'screen'>('original')
+const backgroundImage = ref<File | undefined>()
+const selectedCamera = ref('')
+const selectedVideoInput = ref<MediaDeviceInfo>()
+
+const { addCameraTrack } = useQall()
+
+watch(selectedCamera, () => {
+  handleSave()
+})
+onMounted(() => {
+  if (props.videoInputs[0] !== undefined && props.videoInputs.length > 0) {
+    selectedCamera.value = props.videoInputs[0].deviceId
+    selectedVideoInput.value = props.videoInputs[0]
+  }
+})
+
+const handleFileChange = (e: Event) => {
+  const target = e.target as HTMLInputElement
+  if (target.files?.[0]) {
+    backgroundImage.value = target.files[0]
+    handleSave()
+  }
+}
+
+const handleSave = () => {
+  const selectedVideoInput = props.videoInputs.find(
+    d => d.deviceId === selectedCamera.value
+  )
+
+  emit('save', {
+    backgroundType: backgroundType.value,
+    backgroundImage: backgroundImage.value,
+    selectedVideoInput
+  })
+}
+
+const handleAddCameraTrack = () => {
+  addCameraTrack(
+    selectedVideoInput.value,
+    backgroundType.value,
+    backgroundImage.value
+  )
+  emit('add')
+  emit('close')
+}
+
+const handleClose = () => {
+  emit('close')
+}
+</script>
+
+<template>
+  <div v-if="open" :class="$style.popoverContainer">
+    <ClickOutside @click-outside="handleClose">
+      <div :class="$style.popoverContent">
+        <div>
+          <h3 :class="$style.popoverTitle">カメラ設定</h3>
+          <div :class="$style.formGroup">
+            <div :class="$style.formItem">
+              <label for="camera-select" :class="$style.formItemLabel"
+                >カメラを選択</label
+              >
+              <select
+                id="camera-select"
+                v-model="selectedCamera"
+                :class="$style.input"
+              >
+                <option value="" disabled>選択してください</option>
+                <option
+                  v-for="device in videoInputs"
+                  :key="device.deviceId"
+                  :value="device.deviceId"
+                >
+                  {{ device.label || 'No Label' }}
+                </option>
+              </select>
+            </div>
+
+            <div :class="$style.formItem">
+              <label :class="$style.formItemLabel">背景を選択</label>
+              <div :class="$style.radioGroup">
+                <div :class="$style.radioItem">
+                  <input
+                    id="original"
+                    v-model="backgroundType"
+                    type="radio"
+                    value="original"
+                  />
+                  <label for="original" :class="$style.radioLabel">
+                    <span>何もしない</span>
+                  </label>
+                </div>
+                <div :class="$style.radioItem">
+                  <input
+                    id="blur"
+                    v-model="backgroundType"
+                    type="radio"
+                    value="blur"
+                  />
+                  <label for="blur" :class="$style.radioLabel">
+                    <span>ぼかし</span>
+                  </label>
+                </div>
+                <div :class="$style.radioItem">
+                  <input
+                    id="file"
+                    v-model="backgroundType"
+                    type="radio"
+                    value="file"
+                  />
+                  <label for="file" :class="$style.radioLabel">
+                    <span>ファイル</span>
+                  </label>
+                </div>
+                <div :class="$style.radioItem">
+                  <input
+                    id="screen"
+                    v-model="backgroundType"
+                    type="radio"
+                    value="screen"
+                  />
+                  <label for="screen" :class="$style.radioLabel">
+                    <span>画面配信</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="backgroundType === 'file'" :class="$style.formItem">
+              <button type="button" :class="$style.fileButton">
+                背景画像を選択
+                <input
+                  type="file"
+                  :class="$style.fileInput"
+                  accept="image/*,video/*"
+                  @change="handleFileChange"
+                />
+              </button>
+              <p v-if="backgroundImage" :class="$style.fileName">
+                選択中: {{ backgroundImage.name }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div :class="$style.actions">
+          <FormButton
+            label="カメラを追加"
+            type="primary"
+            @click="handleAddCameraTrack"
+          />
+        </div>
+      </div>
+    </ClickOutside>
+  </div>
+</template>
+
+<style module lang="scss">
+.popoverContainer {
+  position: absolute;
+  z-index: 50;
+  bottom: 0;
+}
+
+.popoverContent {
+  @include background-primary;
+  @include color-ui-primary;
+  padding: 24px;
+  border-radius: 8px;
+  width: 20rem;
+  border: 1px solid $theme-text-primary-default;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+}
+
+.popoverTitle {
+  font-size: 1.25rem;
+  margin-bottom: 16px;
+  font-weight: bold;
+}
+
+.formGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.formItem {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.formItemLabel {
+  font-weight: bold;
+}
+
+.input {
+  padding: 8px;
+  border-radius: 4px;
+  @include background-primary;
+  @include color-ui-primary;
+  border: 1px solid $theme-ui-secondary-default;
+}
+
+.radioGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.radioItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.radioLabel {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.fileButton {
+  position: relative;
+  padding: 12px 16px;
+  border-radius: 4px;
+  @include background-primary;
+  @include color-ui-primary;
+  border: 1px solid $theme-ui-secondary-default;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.fileInput {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.fileName {
+  font-size: 0.875rem;
+  color: $theme-text-secondary-default;
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/DanmakuComment.vue b/src/components/Main/MainView/QallView/DanmakuComment.vue
new file mode 100644
index 0000000000..94c1bad454
--- /dev/null
+++ b/src/components/Main/MainView/QallView/DanmakuComment.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+import InlineMarkdown from '/@/components/UI/InlineMarkdown.vue'
+
+const { markdown } = defineProps<{
+  markdown: string
+}>()
+
+const danmakuRef = useTemplateRef<HTMLDivElement>('danmakuRef')
+
+const startAnimation = () => {
+  const danmaku = danmakuRef.value
+  if (danmaku) {
+    const top =
+      Math.random() *
+      ((danmaku.parentElement?.offsetHeight ?? 0) - danmaku.offsetHeight)
+    danmaku.style.top = `${top}px`
+    danmaku.animate(
+      [
+        {
+          transform: 'translateX(0)'
+        },
+        {
+          transform: `translateX(${-(danmaku.parentElement?.offsetWidth ?? 0) - 1 * danmaku.offsetWidth}px)`
+        }
+      ],
+      {
+        duration: 5000,
+        easing: 'linear',
+        iterations: 1
+      }
+    )
+  }
+}
+</script>
+
+<template>
+  <div ref="danmakuRef" :class="$style.danmaku">
+    <InlineMarkdown :content="markdown" @render="startAnimation" />
+  </div>
+</template>
+
+<style lang="scss" module>
+.danmaku {
+  position: absolute;
+  white-space: nowrap;
+  animation-name: flow;
+  animation-timing-function: linear;
+  animation-iteration-count: 1;
+  left: 100%;
+  font-size: 32px;
+  color: black;
+  text-shadow: 1px 1px 2px white;
+  z-index: 301;
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/DanmakuContainer.vue b/src/components/Main/MainView/QallView/DanmakuContainer.vue
new file mode 100644
index 0000000000..dce1e600c0
--- /dev/null
+++ b/src/components/Main/MainView/QallView/DanmakuContainer.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { nextTick, ref, useTemplateRef } from 'vue'
+import DanmakuComment from './DanmakuComment.vue'
+import DanmakuStamp from './DanmakuStamp.vue'
+
+import party from 'party-js'
+import { useDanmakuSparkle } from './useDanmakuSparkle'
+import { useQall } from '/@/composables/qall/useQall'
+
+import { messageMitt } from '/@/store/entities/messages'
+import useMittListener from '/@/composables/utils/useMittListener'
+
+const { callingChannel, publishData, qallMitt } = useQall()
+
+const comments = ref<{ id: string; markdown: string }[]>([])
+const stamps = ref<{ id: string; stampId: string }[]>([])
+const danmakuContainer = useTemplateRef<HTMLDivElement>('danmakuContainer')
+
+const showSparkle = (stampElement: HTMLElement) => {
+  if (!danmakuContainer.value) return
+  const source = party.sources.elementSource(danmakuContainer.value)()
+  const rect = new party.Rect(source.x, source.y, source.x, source.y)
+  party.confetti(rect, {
+    count: party.variation.range(100, 100),
+    size: 2,
+    shapes: stampElement
+  })
+}
+
+messageMitt.on('addMessage', ({ message }) => {
+  if (message.channelId !== callingChannel.value) return
+
+  comments.value.push({
+    id: message.id,
+    markdown: message.content
+  })
+  setTimeout(() => {
+    comments.value = comments.value.filter(v => v.id !== message.id)
+  }, 6000)
+})
+
+messageMitt.on('deleteMessage', messageId => {
+  comments.value = comments.value.filter(v => v.id !== messageId)
+})
+
+messageMitt.on('updateMessage', async message => {
+  if (message.channelId !== callingChannel.value) return
+  comments.value = comments.value.filter(v => v.id !== message.id)
+  await nextTick()
+  comments.value.push({
+    id: message.id,
+    markdown: message.content
+  })
+  setTimeout(() => {
+    comments.value = comments.value.filter(v => v.id !== message.id)
+  }, 6000)
+})
+
+useMittListener(qallMitt, 'pushStamp', stamp => {
+  stamps.value.push({
+    id: Math.random().toString(36).substring(2, 15),
+    stampId: stamp
+  })
+  setTimeout(() => {
+    stamps.value.shift()
+  }, 1400)
+
+  //TODO: 出現ロジックを考える
+  if (Math.random() < 0.005) {
+    sparkle(stamp)
+  }
+})
+
+const { sparkle } = useDanmakuSparkle(showSparkle)
+</script>
+
+<template>
+  <div ref="danmakuContainer" :class="$style.danmakuContainer">
+    <DanmakuComment
+      v-for="comment in comments"
+      :key="comment.id"
+      :markdown="comment.markdown"
+    />
+    <DanmakuStamp
+      v-for="stamp in stamps"
+      :key="stamp.id"
+      :stamp-id="stamp.stampId"
+    />
+  </div>
+</template>
+
+<style lang="scss" module>
+.danmakuContainer {
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  overflow: hidden; /* 領域外のコメントを隠す */
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/DanmakuStamp.vue b/src/components/Main/MainView/QallView/DanmakuStamp.vue
new file mode 100644
index 0000000000..a14b7d5229
--- /dev/null
+++ b/src/components/Main/MainView/QallView/DanmakuStamp.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { onMounted, useTemplateRef } from 'vue'
+import AStamp from '/@/components/UI/AStamp.vue'
+
+const { stampId } = defineProps<{
+  stampId: string
+}>()
+
+const danmakuRef = useTemplateRef<HTMLDivElement>('danmakuRef')
+
+const startAnimation = () => {
+  const danmaku = danmakuRef.value
+  if (danmaku) {
+    const top =
+      96 + Math.random() * ((danmaku.parentElement?.offsetHeight ?? 0) - 144)
+    const left =
+      Math.random() * ((danmaku.parentElement?.offsetWidth ?? 0) - 48)
+    danmaku.style.top = `${top}px`
+    danmaku.style.left = `${left}px`
+    danmaku.animate(
+      [
+        {
+          transform: `scale(1)`,
+          opacity: 0.0
+        },
+        {
+          transform: `scale(2) translateY(-4rem)`,
+          opacity: 1
+        }
+      ],
+      {
+        duration: 1500,
+        easing: 'ease-in',
+        iterations: 1
+      }
+    )
+  }
+}
+
+onMounted(() => startAnimation())
+</script>
+
+<template>
+  <div ref="danmakuRef" :class="$style.danmaku">
+    <AStamp :stamp-id="stampId" :size="48" />
+  </div>
+</template>
+
+<style lang="scss" module>
+.danmaku {
+  position: absolute;
+  white-space: nowrap;
+  animation-name: flow;
+  animation-timing-function: linear;
+  animation-iteration-count: 1;
+  left: 100%;
+  font-size: 32px;
+  color: black;
+  text-shadow: 1px 1px 2px white;
+  z-index: 300;
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/DetailButton.vue b/src/components/Main/MainView/QallView/DetailButton.vue
new file mode 100644
index 0000000000..7bf48228fc
--- /dev/null
+++ b/src/components/Main/MainView/QallView/DetailButton.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { defineProps, useCssModule, computed } from 'vue'
+import AIcon from '/@/components/UI/AIcon.vue'
+
+const props = defineProps({
+  onClick: {
+    type: Function,
+    required: true
+  },
+  inverted: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const style = useCssModule()
+
+function handleClick() {
+  props.onClick?.()
+}
+
+const iconClass = computed(() => ({
+  [style.inverted]: props.inverted
+}))
+
+const buttonClass = computed(() => ({
+  [style.detailButton]: true,
+  [style.invertedBackground]: props.inverted,
+  [style.normalBackground]: !props.inverted
+}))
+</script>
+
+<template>
+  <button :class="buttonClass" @click="handleClick">
+    <AIcon name="plus-circle" mdi :class="iconClass" :size="24" />
+  </button>
+</template>
+
+<style lang="scss" module>
+.detailButton {
+  position: absolute;
+  bottom: -6px;
+  right: -6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+}
+
+.inverted {
+  filter: invert(1);
+}
+
+.invertedBackground {
+  background-color: white;
+  width: 24px;
+  height: 24px;
+}
+
+.normalBackground {
+  background-color: black;
+  width: 24px;
+  height: 24px;
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/ParticipantList.vue b/src/components/Main/MainView/QallView/ParticipantList.vue
new file mode 100644
index 0000000000..2c4ca72ead
--- /dev/null
+++ b/src/components/Main/MainView/QallView/ParticipantList.vue
@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import UserIcon from '/@/components/UI/UserIcon.vue'
+import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
+import { useUserVolume } from '/@/store/app/userVolume'
+import { ref, watch, useCssModule, computed } from 'vue'
+import type { User } from '@traptitech/traq'
+
+const { participant, trackInfo } = defineProps<{
+  participant: User
+  trackInfo: TrackInfo
+}>()
+
+const { getStore, setStore } = useUserVolume()
+
+const parseToFloat = (value: number | string): number => {
+  if (typeof value === 'number') return value
+  return parseFloat(value)
+}
+
+const isMuted = ref(false)
+const toggleMute = (trackInfo: TrackInfo) => {
+  isMuted.value = !isMuted.value
+}
+
+const style = useCssModule()
+const minValue = 0
+const maxValue = 2
+const volume = ref<number | string>(getStore(trackInfo.username) ?? 1)
+
+const sliderStyle = computed(() => {
+  const val = parseToFloat(volume.value)
+  const percent = ((val - minValue) / (maxValue - minValue)) * 100
+  const startColor = isMuted.value ? '#6b7d8a' : '#005BAC'
+  // TODO ここもSCSS変数でかける？
+  return {
+    background: `
+      linear-gradient(to right,
+        ${startColor} 0%,
+        ${startColor} ${percent}%,
+        #ced6db ${percent}%,
+        #ced6db 100%)
+    `
+  }
+})
+watch(
+  () => getStore(trackInfo.username),
+  v => {
+    if (v) {
+      volume.value = v
+    }
+  },
+  { deep: true }
+)
+watch(
+  () => volume.value,
+  v => {
+    setStore(trackInfo.username, parseToFloat(v))
+  },
+  { deep: true, immediate: true }
+)
+const volumeSliderClass = computed(() => ({
+  [style.volumeSlider]: true,
+  [style.muted]: isMuted.value
+}))
+</script>
+
+<template>
+  <div :class="$style.container">
+    <div :class="$style.leftSide">
+      <user-icon :size="40" :user-id="participant.id" />
+      <span :class="$style.userName">{{ participant.displayName }}</span>
+      <!-- TODO: Qall: ミュートを実装する -->
+      <!-- <button :class="$style.micIconButton">
+        <a-icon v-if="isMuted" name="microphone-off" mdi />
+      </button> -->
+    </div>
+    <div :class="$style.rightSide">
+      <!-- <button :class="$style.iconButton" @click="toggleMute(trackInfo)">
+        <a-icon v-if="isMuted" name="volume-off" :size="24" mdi />
+        <a-icon v-else name="volume-high" mdi :size="24" />
+      </button> -->
+      <input
+        v-model="volume"
+        type="range"
+        :min="minValue"
+        :max="maxValue"
+        step="0.01"
+        :style="sliderStyle"
+        :class="volumeSliderClass"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  padding: 8px;
+  border-bottom: 1px solid rgba(206, 214, 219, 0.2);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  &:last-child {
+    border-bottom: none;
+  }
+  @include background-primary;
+}
+
+.leftSide {
+  display: flex;
+  align-items: center;
+}
+
+.userName {
+  line-height: 24px;
+  margin-left: 12px;
+}
+
+.micIconButton {
+  margin-left: 4px;
+  color: black;
+  cursor: pointer;
+}
+
+.rightSide {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.iconButton {
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.volumeSlider {
+  width: 100px;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: transparent;
+  border-radius: 8px;
+
+  &::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 8px;
+    border-radius: 8px;
+  }
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    background: $theme-ui-primary-default;
+    border-radius: 8px;
+    cursor: pointer;
+    margin-top: -4px;
+  }
+  &::-moz-range-track {
+    -moz-appearance: none;
+    width: 100%;
+    height: 8px;
+    border-radius: 8px;
+  }
+  &::-moz-range-thumb {
+    -moz-appearance: none;
+    width: 16px;
+    height: 16px;
+    background: $theme-ui-primary-default;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+  &::-ms-track {
+    width: 100%;
+    height: 8px;
+    background: transparent;
+    border-color: transparent;
+    color: transparent;
+  }
+  &::-ms-fill-lower {
+    border-radius: 8px;
+  }
+  &::-ms-fill-upper {
+    border-radius: 8px;
+  }
+  &::-ms-thumb {
+    width: 16px;
+    height: 16px;
+    background: $theme-ui-primary-default;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+}
+
+.muted::-webkit-slider-thumb {
+  background: $theme-ui-secondary-default !important;
+}
+.muted::-moz-range-thumb {
+  background: $theme-ui-secondary-default !important;
+}
+.muted::-ms-thumb {
+  background: $theme-ui-secondary-default !important;
+}
+
+.accountMinusButton {
+  cursor: pointer;
+  color: $theme-accent-error-default;
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/QallAudio.vue b/src/components/Main/MainView/QallView/QallAudio.vue
new file mode 100644
index 0000000000..a10081a631
--- /dev/null
+++ b/src/components/Main/MainView/QallView/QallAudio.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useQall } from '/@/composables/qall/useQall'
+import AudioComponent from './AudioComponent.vue'
+
+const { tracksMap, screenShareTrackSidMap, screenShareTracks } = useQall()
+</script>
+<template>
+  <template v-for="[sid, track] in Array.from(tracksMap.entries())" :key="sid">
+    <AudioComponent
+      v-if="
+        track.trackPublication?.kind === 'audio' &&
+        track.isRemote &&
+        !screenShareTracks?.some?.(([_, valueSid]) => valueSid === sid)
+      "
+      :track-info="track"
+      :is-show="false"
+    />
+  </template>
+</template>
diff --git a/src/components/Main/MainView/QallView/QallMessageView.vue b/src/components/Main/MainView/QallView/QallMessageView.vue
new file mode 100644
index 0000000000..c5ccd2bf03
--- /dev/null
+++ b/src/components/Main/MainView/QallView/QallMessageView.vue
@@ -0,0 +1,222 @@
+<script lang="ts" setup>
+import MessagesScroller from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
+import MessageInput from '/@/components/Main/MainView/MessageInput/MessageInput.vue'
+import ScrollLoadingBar from '/@/components/Main/MainView/ScrollLoadingBar.vue'
+import { computed, nextTick, ref, shallowRef } from 'vue'
+import type { ChannelId, UserId } from '/@/types/entity-ids'
+import useChannelMessageFetcher from '../ChannelView/ChannelViewContent/composables/useChannelMessageFetcher'
+import { useChannelsStore } from '/@/store/entities/channels'
+import MessageElement from '/@/components/Main/MainView/MessageElement/MessageElement.vue'
+import { useSubscriptionStore } from '/@/store/domain/subscription'
+import IconButton from '/@/components/UI/IconButton.vue'
+
+const props = defineProps<{
+  channelId: ChannelId
+  typingUsers: UserId[]
+}>()
+
+const isMessageShow = ref(false)
+
+const scrollerEle = shallowRef<{ $el: HTMLDivElement } | undefined>()
+const {
+  messageIds,
+  isReachedEnd,
+  isReachedLatest,
+  isLoading,
+  lastLoadingDirection,
+  onLoadFormerMessagesRequest,
+  onLoadLatterMessagesRequest
+} = useChannelMessageFetcher(scrollerEle, props)
+
+const { channelsMap } = useChannelsStore()
+const isArchived = computed(
+  () => channelsMap.value.get(props.channelId)?.archived ?? false
+)
+
+const { unreadChannelsMap } = useSubscriptionStore()
+const resetIsReachedLatest = () => {
+  if (!unreadChannelsMap.value.get(props.channelId)) return
+  isReachedLatest.value = false
+}
+
+const showToNewMessageButton = ref(false)
+const toNewMessage = (behavior?: ScrollBehavior) => {
+  if (!scrollerEle.value) return
+  showToNewMessageButton.value = false
+  scrollerEle.value.$el.scrollTo({
+    top: scrollerEle.value.$el.scrollHeight,
+    behavior: behavior
+  })
+}
+
+const handleScroll = () => {
+  if (scrollerEle.value === undefined || isLoading.value) return
+  const { scrollTop, scrollHeight, clientHeight } = scrollerEle.value.$el
+  showToNewMessageButton.value = scrollHeight - 2 * clientHeight > scrollTop
+  if (!isReachedLatest.value) {
+    showToNewMessageButton.value = true
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="$style.container"
+    :data-is-not-messages-show="$boolAttr(!isMessageShow)"
+  >
+    <div :class="$style.mainViewContainer">
+      <div
+        :class="$style.messageContainer"
+        :data-is-not-messages-show="$boolAttr(!isMessageShow)"
+      >
+        <scroll-loading-bar
+          :class="$style.loadingBar"
+          :show="isLoading && isMessageShow"
+        />
+        <transition name="fade-bottom" mode="out-in">
+          <div
+            v-if="isMessageShow"
+            :class="$style.messageContainerBackgroundContainer"
+          >
+            <div :class="$style.messageContainerBackground"></div>
+
+            <messages-scroller
+              v-if="isMessageShow"
+              ref="scrollerEle"
+              :message-ids="messageIds"
+              :is-reached-end="isReachedEnd"
+              :is-reached-latest="isReachedLatest"
+              :is-loading="isLoading"
+              :last-loading-direction="lastLoadingDirection"
+              @request-load-former="onLoadFormerMessagesRequest"
+              @request-load-latter="onLoadLatterMessagesRequest"
+              @scroll-passive="handleScroll"
+              @reset-is-reached-latest="resetIsReachedLatest"
+            >
+              <template
+                #default="{ messageId, onChangeHeight, onEntryMessageLoaded }"
+              >
+                <message-element
+                  :class="$style.element"
+                  :message-id="messageId"
+                  :is-archived="isArchived"
+                  @change-height="onChangeHeight"
+                  @entry-message-loaded="onEntryMessageLoaded"
+                />
+              </template>
+            </messages-scroller>
+          </div>
+        </transition>
+        <div :class="[$style.uiElement, $style.uiToggleButton]">
+          <IconButton
+            :icon-name="`chevron-double-${isMessageShow ? 'down' : 'up'}`"
+            icon-mdi
+            @click="
+              () => {
+                if (isMessageShow) {
+                  isMessageShow = false
+                  toNewMessage('smooth')
+                } else {
+                  isMessageShow = true
+                  nextTick(() => toNewMessage())
+                }
+              }
+            "
+          />
+        </div>
+      </div>
+      <slot name="default"></slot>
+    </div>
+    <message-input
+      :channel-id="channelId"
+      :typing-users="typingUsers"
+      :show-to-new-message-button="false"
+      force-mobile-style
+    />
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+}
+
+.mainViewContainer {
+  flex-grow: 1;
+  position: relative;
+}
+
+.messageContainer {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 33%;
+  min-width: 25rem;
+  height: 100%;
+
+  display: flex;
+  flex: 1 1;
+  flex-direction: column;
+  justify-content: end;
+  &[data-is-not-messages-show] {
+    pointer-events: none;
+  }
+  z-index: 400;
+}
+
+.messageContainerBackgroundContainer {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.messageContainerBackground {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.7;
+  backdrop-filter: blur(100px);
+
+  @include background-primary;
+}
+
+.loadingBar {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 12px;
+  z-index: $z-index-message-loading;
+}
+
+.unreadSeparator {
+  color: $theme-accent-notification-default;
+}
+
+.dateSeparator {
+  @include color-ui-secondary;
+}
+.element {
+  margin: 4px 0;
+  contain: content;
+}
+.uiElement {
+  pointer-events: all;
+}
+
+.uiToggleButton {
+  @include color-ui-secondary;
+  @include background-primary;
+  padding: 0.5rem;
+  border-radius: 2rem;
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index b39ff3fc74..e2120af3ff 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -1,19 +1,394 @@
+<script setup lang="ts">
+import { useQall } from '/@/composables/qall/useQall'
+import { onMounted, ref, useTemplateRef, computed } from 'vue'
+import DanmakuContainer from './DanmakuContainer.vue'
+import CallControlButtonSmall from './CallControlButtonSmall.vue'
+import CallControlButton from './CallControlButton.vue'
+import SoundBoard from './SoundBoard.vue'
+import ClickOutside from '/@/components/UI/ClickOutside'
+import { useStampPickerInvoker } from '/@/store/ui/stampPicker'
+import ParticipantList from './ParticipantList.vue'
+import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
+import UserList from './UserList.vue'
+import CameraDetailSetting from './CameraDetailSetting.vue'
+import ScreenShareDetailSetting from './ScreenShareDetailSetting.vue'
+import DetailButton from './DetailButton.vue'
+import IconButton from '/@/components/UI/IconButton.vue'
+import QallMessageView from './QallMessageView.vue'
+
+const {
+  tracksMap,
+  screenShareTracks,
+  callingChannel,
+  leaveQall,
+  addScreenShareTrack,
+  addCameraTrack,
+  removeVideoTrack,
+  publishData,
+  toggleMicMute,
+  qallMitt,
+  rooms,
+  isMicOn,
+  isCameraOn,
+  isScreenSharing,
+  isSubView
+} = useQall()
+
+const micIcon = computed(() =>
+  isMicOn.value ? 'microphone' : 'microphone-off'
+)
+const cameraIcon = computed(() => (isCameraOn.value ? 'video' : 'video-off'))
+const screenShareIcon = computed(() =>
+  isScreenSharing.value ? 'stop-screen-share' : 'screen-share'
+)
+
+const toggleAudio = async () => {
+  try {
+    toggleMicMute()
+    isMicOn.value = !isMicOn.value
+  } catch (err) {}
+}
+
+const toggleVideo = async () => {
+  try {
+    if (!isCameraOn.value) {
+      await addCameraTrack(selectedVideoInput.value)
+      isCameraOn.value = true
+    } else {
+      for (const trackInfo of tracksMap.value.values()) {
+        if (
+          !trackInfo.isRemote &&
+          trackInfo.trackPublication?.kind === 'video' &&
+          !trackInfo.trackPublication.source?.includes('screen')
+        ) {
+          await removeVideoTrack(trackInfo.trackPublication)
+        }
+      }
+      isCameraOn.value = false
+    }
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to toggle video:', err)
+  }
+}
+
+const toggleScreen = async () => {
+  try {
+    if (!isScreenSharing.value) {
+      await addScreenShareTrack()
+      isScreenSharing.value = true
+    } else {
+      for (const trackInfo of tracksMap.value.values()) {
+        if (
+          !trackInfo.isRemote &&
+          trackInfo.trackPublication?.kind === 'video' &&
+          trackInfo.trackPublication.source?.includes('screen')
+        ) {
+          await removeVideoTrack(trackInfo.trackPublication)
+        }
+      }
+      isScreenSharing.value = false
+    }
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to toggle screen sharing:', err)
+  }
+}
+
+const handleSound = () => {
+  showSoundBoard.value = true
+}
+
+const reactionButton = useTemplateRef<HTMLDivElement>('reactionButton')
+const { openStampPicker, closeStampPicker } = useStampPickerInvoker(
+  async stampData => {
+    try {
+      await publishData({ type: 'stamp', message: stampData.id })
+      qallMitt.emit('pushStamp', stampData.id)
+      openStampPicker()
+    } catch (e) {}
+  },
+  reactionButton,
+  false,
+  'bottom-left'
+)
+const handleReaction = () => {
+  openStampPicker()
+}
+
+const showParticipants = ref(false)
+
+const currentRoomParticipants = computed(() => {
+  return (
+    rooms.value.find(
+      (room: { channel: { id: string } }) =>
+        room.channel.id === callingChannel.value
+    )?.participants ?? []
+  )
+})
+
+const handleGroup = () => {
+  showParticipants.value = !showParticipants.value
+}
+
+const videoInputs = ref<MediaDeviceInfo[]>([])
+onMounted(async () => {
+  const devices = await navigator.mediaDevices.enumerateDevices()
+  videoInputs.value = devices.filter(d => d.kind === 'videoinput')
+})
+const selectedVideoInput = ref<MediaDeviceInfo>()
+const backgroundImage = ref<File>()
+const backgroundType = ref<'original' | 'blur' | 'file' | 'screen'>('original')
+
+const showSoundBoard = ref(false)
+const getParticipantTrackInfo = (participant: {
+  user: { name: string }
+}): TrackInfo | undefined => {
+  for (const [, trackInfo] of tracksMap.value.entries()) {
+    if (
+      trackInfo.username === participant.user.name &&
+      trackInfo.trackPublication?.kind === 'audio' &&
+      !screenShareTracks.value?.some?.(
+        ([_, valueSid]) => valueSid === trackInfo.trackPublication?.trackSid
+      )
+    ) {
+      return trackInfo
+    }
+  }
+  return undefined
+}
+
+const filteredParticipants = computed(() =>
+  currentRoomParticipants.value.filter(
+    participant => getParticipantTrackInfo(participant) !== undefined
+  )
+)
+
+const handleBackgroundSave = (data: {
+  backgroundType: 'original' | 'blur' | 'file' | 'screen'
+  backgroundImage?: File
+  selectedVideoInput?: MediaDeviceInfo
+}) => {
+  backgroundType.value = data.backgroundType
+  backgroundImage.value = data.backgroundImage
+  showCameraDetailSetting.value = false
+}
+
+const showCameraDetailSetting = ref(false)
+const showShareScreenSettingDetail = ref(false)
+
+const showDanmaku = ref(true)
+const toggleDanmaku = () => {
+  showDanmaku.value = !showDanmaku.value
+}
+</script>
+
 <template>
   <div :class="$style.Block">
-    <h1 :class="$style.Header">Qall View</h1>
+    <QallMessageView :channel-id="callingChannel" :typing-users="[]">
+      <DanmakuContainer v-if="showDanmaku" />
+      <div :class="$style.iconContainer">
+        <IconButton
+          :icon-name="`comment${showDanmaku ? '' : '-off'}-outline`"
+          icon-mdi
+          @click="toggleDanmaku"
+        />
+        <IconButton icon-name="close" icon-mdi @click="isSubView = true" />
+      </div>
+      <div :class="$style.stackContainer">
+        <UserList :class="$style.userList" />
+        <div :class="$style.controlBarContainer">
+          <div :class="$style.controlBar">
+            <div :class="$style.smallButtonGroup">
+              <div :class="$style.soundBoardButton">
+                <CallControlButtonSmall
+                  icon="sound_detection_loud_sound"
+                  :on-click="handleSound"
+                />
+                <ClickOutside @click-outside="showSoundBoard = false">
+                  <SoundBoard v-if="showSoundBoard" />
+                </ClickOutside>
+              </div>
+              <div ref="reactionButton">
+                <CallControlButtonSmall
+                  icon="add_reaction"
+                  :on-click="handleReaction"
+                />
+              </div>
+            </div>
+            <div :class="$style.verticalBar"></div>
+            <div :class="$style.buttonWithDetail">
+              <CallControlButton
+                :icon="screenShareIcon"
+                :is-on="isScreenSharing"
+                :on-click="toggleScreen"
+                :mdi="false"
+                :inverted="isScreenSharing"
+              />
+              <DetailButton @click="showShareScreenSettingDetail = true" />
+              <ScreenShareDetailSetting
+                :open="showShareScreenSettingDetail"
+                @add="isScreenSharing = true"
+                @close="showShareScreenSettingDetail = false"
+              />
+            </div>
+            <div :class="$style.buttonWithDetail">
+              <CallControlButton
+                :icon="cameraIcon"
+                :is-on="isCameraOn"
+                :on-click="toggleVideo"
+                :inverted="isCameraOn"
+              />
+              <DetailButton
+                :inverted="isCameraOn"
+                @click="showCameraDetailSetting = true"
+              />
+              <CameraDetailSetting
+                :open="showCameraDetailSetting"
+                :video-inputs="videoInputs"
+                @save="handleBackgroundSave"
+                @add="isCameraOn = true"
+                @close="showCameraDetailSetting = false"
+              />
+            </div>
+            <CallControlButton
+              :icon="micIcon"
+              :is-on="isMicOn"
+              :on-click="toggleAudio"
+              :inverted="isMicOn"
+            />
+            <CallControlButton
+              icon="phone-hangup"
+              is-on
+              :on-click="leaveQall"
+              :on-background-color="'#F26451'"
+            />
+            <div :class="$style.verticalBar"></div>
+            <div :class="$style.smallButtonGroup">
+              <div :class="$style.participantsContainer">
+                <ClickOutside @click-outside="showParticipants = false">
+                  <div v-if="showParticipants" :class="$style.participantsList">
+                    <div :class="$style.participantsContent">
+                      <participant-list
+                        v-for="participant in filteredParticipants"
+                        :key="participant.user.id"
+                        :participant="participant.user"
+                        :track-info="getParticipantTrackInfo(participant)!"
+                      />
+                    </div>
+                  </div>
+                </ClickOutside>
+                <CallControlButtonSmall
+                  icon="account-multiple"
+                  :on-click="handleGroup"
+                  mdi
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </QallMessageView>
   </div>
 </template>
 
 <style lang="scss" module>
 .Block {
-  color: green;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.Header {
-  font: {
-    size: 30px;
-    weight: bold;
-  }
-  color: green;
+.stackContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  height: 100%;
+}
+
+.userList {
+  flex-grow: 1;
+}
+
+.controlBarContainer {
+  width: 100%;
+  display: flex;
+  justify-content: end;
+  flex-grow: 0;
+  margin-bottom: 24px;
+}
+
+.controlBar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+}
+
+.smallButtonGroup {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.buttonWithDetail {
+  position: relative;
+  display: inline-block;
+}
+
+.soundBoardButton {
+  position: relative;
+}
+
+.participantsContainer {
+  position: relative;
+}
+
+.participantsList {
+  position: absolute;
+  bottom: 100%;
+  right: 50%;
+  width: 450px;
+  height: 300px;
+  @include background-primary;
+  border-radius: 8px;
+  margin-bottom: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  transform: translateX(50%);
+  @include color-ui-primary;
+}
+
+.participantsContent {
+  height: 100%;
+  overflow-y: auto;
+  padding: 16px;
+  border: 2px solid $theme-background-secondary-default;
+  border-radius: 8px;
+}
+
+.verticalBar {
+  width: 1px;
+  height: 64px;
+  background-color: #ced6db;
+  margin: 0 16px;
+}
+
+.closeButton {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+}
+
+.iconContainer {
+  display: flex;
+  gap: 4px;
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
 }
 </style>
diff --git a/src/components/Main/MainView/QallView/ScreenShareComponent.vue b/src/components/Main/MainView/QallView/ScreenShareComponent.vue
new file mode 100644
index 0000000000..01eec8f155
--- /dev/null
+++ b/src/components/Main/MainView/QallView/ScreenShareComponent.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
+import AudioTrack from './AudioTrack.vue'
+import VideoComponent from './VideoComponent.vue'
+
+const { trackInfo, audioTrackInfo } = defineProps<{
+  trackInfo: TrackInfo
+  audioTrackInfo: TrackInfo | undefined
+  notMute?: boolean
+}>()
+
+const volume = ref(1)
+</script>
+
+<template>
+  <div :class="$style.container">
+    <VideoComponent v-if="trackInfo.trackPublication" :track-info="trackInfo" />
+    <AudioTrack
+      v-if="notMute && trackInfo.isRemote && audioTrackInfo?.trackPublication"
+      :track-info="audioTrackInfo"
+      :volume="volume"
+    />
+    <input
+      v-model="volume"
+      type="range"
+      min="0"
+      max="2"
+      step="0.01"
+      :class="$style.volume"
+    />
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.volume {
+  position: absolute;
+  bottom: 0;
+  right: 4px;
+  width: 4rem;
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/ScreenShareDetailSetting.vue b/src/components/Main/MainView/QallView/ScreenShareDetailSetting.vue
new file mode 100644
index 0000000000..e6aac20542
--- /dev/null
+++ b/src/components/Main/MainView/QallView/ScreenShareDetailSetting.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue'
+import { useQall } from '/@/composables/qall/useQall'
+import FormButton from '/@/components/UI/FormButton.vue'
+import ClickOutside from '/@/components/UI/ClickOutside'
+
+const props = defineProps<{
+  open: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'add'): void
+  (e: 'close'): void
+}>()
+
+const { addScreenShareTrack } = useQall()
+
+const handleScreenShare = () => {
+  addScreenShareTrack()
+  emit('add')
+  emit('close')
+}
+
+const handleClose = () => {
+  emit('close')
+}
+</script>
+
+<template>
+  <ClickOutside @click-outside="handleClose">
+    <div v-if="open" :class="$style.popoverContainer">
+      <div :class="$style.popoverContent">
+        <h3 :class="$style.popoverTitle">画面共有の設定</h3>
+        <div :class="$style.actions">
+          <FormButton
+            label="画面共有を追加"
+            type="primary"
+            @click="handleScreenShare"
+          />
+        </div>
+      </div>
+    </div>
+  </ClickOutside>
+</template>
+
+<style module lang="scss">
+.popoverContainer {
+  position: absolute;
+  z-index: 50;
+  bottom: 0;
+}
+
+.popoverContent {
+  @include background-primary;
+  @include color-ui-primary;
+  padding: 24px;
+  border-radius: 8px;
+  border: 1px solid $theme-text-primary-default;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  width: 15rem;
+}
+
+.popoverTitle {
+  font-size: 1.25rem;
+  margin-bottom: 16px;
+  font-weight: bold;
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/SoundBoard.vue b/src/components/Main/MainView/QallView/SoundBoard.vue
new file mode 100644
index 0000000000..1cfed90d15
--- /dev/null
+++ b/src/components/Main/MainView/QallView/SoundBoard.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import SoundBoardElement from './SoundBoardElement.vue'
+import FormInput from '/@/components/UI/FormInput.vue'
+import { useToastStore } from '/@/store/ui/toast'
+import { useQall, type SoundboardItem } from '/@/composables/qall/useQall'
+
+const searchQuery = ref('')
+
+const { addErrorToast, addSuccessToast } = useToastStore()
+
+const { getSoundboardList, postSoundboardPlay, callingChannel } = useQall()
+const soundboardList = ref<SoundboardItem[]>([])
+/**
+ * サウンド一覧を読み込み
+ */
+const loadSoundboardList = async () => {
+  try {
+    const list = await getSoundboardList()
+    soundboardList.value = list
+  } catch (e) {
+    addErrorToast(`サウンド一覧の取得に失敗しました: ${String(e)}`)
+  }
+}
+
+/**
+ * 指定サウンドを再生
+ */
+const handlePlaySound = async (soundId: string) => {
+  if (!callingChannel.value) {
+    addErrorToast('再生するには通話中である必要があります')
+    return
+  }
+  try {
+    const result = await postSoundboardPlay(soundId, callingChannel.value)
+    // resultには ingressId 等が返る
+    addSuccessToast(`サウンドを再生中 (IngressID: ${result.ingressId})`)
+  } catch (e) {
+    addErrorToast(`サウンド再生に失敗しました: ${String(e)}`)
+  }
+}
+
+onMounted(() => {
+  loadSoundboardList()
+})
+</script>
+
+<template>
+  <div :class="$style.soundBoard">
+    <div><FormInput v-model="searchQuery" placeholder="検索" /></div>
+    <div :class="$style.elementContainer">
+      <SoundBoardElement
+        v-for="item in soundboardList"
+        :key="item.soundId"
+        :sound-name="item.soundName"
+        :stamp-id="item.stampId"
+        @click="handlePlaySound(item.soundId)"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.soundBoard {
+  position: absolute;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  bottom: 48px;
+  left: 0;
+  height: 4rem;
+  overflow-y: scroll;
+  border-radius: 0.5rem;
+  @include background-primary;
+  overflow: scroll;
+}
+.elementContainer {
+  width: 30.5rem;
+  max-width: 100%;
+
+  margin: 0.5rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  gap: 0.25rem;
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/SoundBoardElement.vue b/src/components/Main/MainView/QallView/SoundBoardElement.vue
new file mode 100644
index 0000000000..ddefa9973c
--- /dev/null
+++ b/src/components/Main/MainView/QallView/SoundBoardElement.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import AStamp from '/@/components/UI/AStamp.vue'
+const { soundName, stampId } = defineProps<{
+  soundName: string
+  stampId: string
+}>()
+</script>
+
+<template>
+  <div :class="$style.soundBoardContainer">
+    <div>
+      <AStamp :stamp-id="stampId" :size="32" />
+    </div>
+    <div :class="$style.soundNameContainer">
+      {{ soundName }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.soundBoardContainer {
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  gap: 0.5rem;
+  display: flex;
+  align-items: center;
+  &:hover {
+    @include background-tertiary;
+  }
+  width: 15rem;
+  min-height: 3rem;
+  user-select: none;
+  @include color-ui-primary;
+  @include size-body2;
+}
+.soundNameContainer {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/SubQallView.vue b/src/components/Main/MainView/QallView/SubQallView.vue
new file mode 100644
index 0000000000..bbecdf1b27
--- /dev/null
+++ b/src/components/Main/MainView/QallView/SubQallView.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import VideoComponent from '/@/components/Main/MainView/QallView/VideoComponent.vue'
+import { useQall } from '/@/composables/qall/useQall'
+import { useRouter } from 'vue-router'
+import { constructChannelPath } from '/@/router'
+import useChannelPath from '/@/composables/useChannelPath'
+import { Track } from 'livekit-client'
+import UserCard from './UserCard.vue'
+import ScreenShareComponent from './ScreenShareComponent.vue'
+
+const {
+  tracksMap,
+  callingChannel,
+  isSubView,
+  selectedTrack,
+  screenShareTrackSidMap
+} = useQall()
+const router = useRouter()
+const { channelIdToPathString } = useChannelPath()
+
+const track = computed(() =>
+  selectedTrack.value
+    ? [
+        selectedTrack.value.trackPublication?.trackSid ?? '',
+        selectedTrack.value
+      ]
+    : tracksMap.value && Array.from(tracksMap.value.entries())?.[0]
+)
+
+const restoreMainView = () => {
+  const channelPath = channelIdToPathString(callingChannel.value)
+  router.push(constructChannelPath(channelPath))
+  isSubView.value = false
+}
+</script>
+<template>
+  <div :class="$style.container" @click="restoreMainView">
+    <div
+      v-if="
+        track && typeof track[0] === 'string' && typeof track[1] === 'object'
+      "
+      :class="$style.subContainer"
+    >
+      <UserCard
+        v-if="track[1].trackPublication?.kind === Track.Kind.Audio"
+        :track-info="track[1]"
+      />
+      <ScreenShareComponent
+        v-else-if="
+          track[1].trackPublication?.kind === Track.Kind.Video &&
+          screenShareTrackSidMap.has(track[0] ?? '')
+        "
+        :track-info="track[1]"
+        :audio-track-info="
+          tracksMap.get(screenShareTrackSidMap.get(track[0] ?? '') ?? '')
+        "
+      />
+      <VideoComponent
+        v-else-if="track[1].trackPublication?.kind === Track.Kind.Video"
+        :track-info="track[1]"
+      />
+      <span v-else>Qallにもどる</span>
+    </div>
+    <div v-else>Qallにもどる</div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  cursor: pointer;
+  margin: 0.5rem;
+  margin-bottom: 1rem;
+}
+.subContainer {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/UserCard.vue b/src/components/Main/MainView/QallView/UserCard.vue
new file mode 100644
index 0000000000..5d5b6ac642
--- /dev/null
+++ b/src/components/Main/MainView/QallView/UserCard.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
+import { useUsersStore } from '/@/store/entities/users'
+import { buildUserIconPath } from '/@/lib/apis'
+
+const { trackInfo } = defineProps<{
+  trackInfo: TrackInfo
+}>()
+const { findUserByName } = useUsersStore()
+const user = computed(() => findUserByName(trackInfo.username))
+const userIconFileId = computed(() => user.value?.iconFileId ?? '')
+const iconImage = computed(() => buildUserIconPath(userIconFileId.value))
+</script>
+
+<template>
+  <div v-if="user" :class="$style.UserCard">
+    <div :class="$style.OuterIcon">
+      <img :src="iconImage" :class="$style.OuterImage" />
+    </div>
+    <div :class="$style.InnerIcon">
+      <img :src="iconImage" :class="$style.InnerImage" />
+    </div>
+
+    <div :class="$style.NameLabel">{{ trackInfo.username }}</div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.UserCard {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  border-radius: 12px;
+  pointer-events: none;
+  user-select: none;
+}
+
+.InnerIcon {
+  width: calc(100% / 3);
+  max-width: 128px;
+  aspect-ratio: 1;
+  background-size: cover;
+  border-radius: 50%;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.OuterIcon {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  -webkit-transform: translateY(-50%) translateX(-50%);
+  overflow: hidden;
+  filter: blur(40px);
+}
+.NameLabel {
+  position: absolute;
+  left: 8px;
+  bottom: 8px;
+  display: flex;
+  padding: 4px 12px;
+  align-items: flex-start;
+  gap: 8px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+}
+.OuterImage {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+.InnerImage {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/UserList.vue b/src/components/Main/MainView/QallView/UserList.vue
new file mode 100644
index 0000000000..d2364aea3e
--- /dev/null
+++ b/src/components/Main/MainView/QallView/UserList.vue
@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { useQall } from '/@/composables/qall/useQall'
+import VideoComponent from '/@/components/Main/MainView/QallView/VideoComponent.vue'
+import { onMounted, onUnmounted, ref, useTemplateRef, watchEffect } from 'vue'
+import ScreenShareComponent from './ScreenShareComponent.vue'
+import UserCard from './UserCard.vue'
+
+const { tracksMap, screenShareTrackSidMap, screenShareTracks, selectedTrack } =
+  useQall()
+
+const videoInputs = ref<MediaDeviceInfo[]>([])
+onMounted(async () => {
+  const devices = await navigator.mediaDevices.enumerateDevices()
+  videoInputs.value = devices.filter(d => d.kind === 'videoinput')
+})
+const selectedVideoInput = ref<MediaDeviceInfo>()
+const selectedSid = ref<string>()
+const showAllTracks = ref(false)
+
+const largeCard = useTemplateRef<HTMLDivElement>('largeCard')
+const largeCardParent = useTemplateRef<HTMLDivElement>('largeCardParent')
+
+const resizeObserver = new ResizeObserver(entries => {
+  for (const entry of entries) {
+    const element = entry.target
+    keepAspectRatio(element)
+  }
+})
+
+const keepAspectRatio = (element: Element) => {
+  if (!(element instanceof HTMLDivElement)) return
+  if (!largeCard.value) return
+  const { height, width } = element.getBoundingClientRect()
+  const originalRatio = height / width
+  const targetRatio = 9 / 16
+
+  let newWidth
+  let newHeight
+
+  if (originalRatio > targetRatio) {
+    newWidth = width
+    newHeight = (newWidth * 9) / 16
+  } else {
+    newHeight = height
+    newWidth = (newHeight * 16) / 9
+  }
+  largeCard.value.style.width = `${newWidth}px`
+  largeCard.value.style.height = `${newHeight}px`
+}
+
+watchEffect(() => {
+  if (!largeCardParent.value) return
+  resizeObserver.unobserve(largeCardParent.value)
+  resizeObserver.observe(largeCardParent.value)
+  keepAspectRatio(largeCardParent.value)
+})
+
+onUnmounted(() => {
+  if (!largeCardParent.value) return
+  resizeObserver.unobserve(largeCardParent.value)
+})
+</script>
+
+<template>
+  <div
+    v-if="selectedTrack !== undefined"
+    :key="selectedTrack.trackPublication?.trackSid"
+    :class="$style.parentContainer"
+  >
+    <div :class="$style.flexContainer">
+      <div ref="largeCardParent" :class="$style.largeCardParent">
+        <div ref="largeCard" :class="$style.largeCard">
+          <VideoComponent
+            v-if="
+              selectedTrack.trackPublication?.kind === 'video' &&
+              !screenShareTrackSidMap.has(selectedSid ?? '')
+            "
+            :track-info="selectedTrack"
+          />
+          <ScreenShareComponent
+            v-else-if="selectedTrack.trackPublication?.kind === 'video'"
+            :track-info="selectedTrack"
+            :audio-track-info="
+              tracksMap.get(screenShareTrackSidMap.get(selectedSid ?? '') ?? '')
+            "
+            not-mute
+          />
+          <UserCard
+            v-else-if="
+              selectedTrack.trackPublication?.kind === 'audio' &&
+              !screenShareTrackSidMap
+                .values()
+                ?.some?.(valueSid => valueSid === selectedSid)
+            "
+            :track-info="selectedTrack"
+          />
+        </div>
+      </div>
+
+      <div :class="$style.subViewContainer">
+        <template
+          v-for="([sid, track], index) in tracksMap.entries()"
+          :key="sid"
+        >
+          <div
+            v-if="index < 5"
+            :class="$style.card"
+            @click="[selectedTrack, selectedSid] = [track, sid]"
+          >
+            <VideoComponent
+              v-if="
+                track.trackPublication?.kind === 'video' &&
+                !screenShareTrackSidMap.has(sid)
+              "
+              :track-info="track"
+            />
+            <ScreenShareComponent
+              v-else-if="track.trackPublication?.kind === 'video'"
+              :track-info="track"
+              :audio-track-info="
+                tracksMap.get(screenShareTrackSidMap.get(sid) ?? '')
+              "
+            />
+            <UserCard
+              v-else-if="
+                track.trackPublication?.kind === 'audio' &&
+                !screenShareTracks.some?.(([_, valueSid]) => valueSid === sid)
+              "
+              :track-info="track"
+            />
+          </div>
+        </template>
+        <div v-if="tracksMap.size > 5" :class="$style.card">
+          <button
+            @click="
+              () => {
+                selectedTrack = undefined
+              }
+            "
+          >
+            +{{ tracksMap.size - 5 }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div v-else :class="$style.gridContainer">
+    <template v-for="[sid, track] in tracksMap.entries()" :key="sid">
+      <div
+        v-if="
+          track.trackPublication?.kind === 'video' &&
+          !screenShareTrackSidMap.has(sid)
+        "
+        :class="$style.smallCard"
+        @click="[selectedTrack, selectedSid] = [track, sid]"
+      >
+        <VideoComponent :track-info="track" />
+      </div>
+      <div
+        v-else-if="track.trackPublication?.kind === 'video'"
+        :class="$style.smallCard"
+        @click="[selectedTrack, selectedSid] = [track, sid]"
+      >
+        <ScreenShareComponent
+          :track-info="track"
+          :audio-track-info="
+            tracksMap.get(screenShareTrackSidMap.get(sid) ?? '')
+          "
+        />
+      </div>
+      <div
+        v-else-if="
+          track.trackPublication?.kind === 'audio' &&
+          !screenShareTracks.some?.(([_, valueSid]) => valueSid === sid)
+        "
+        :class="$style.smallCard"
+        @click="[selectedTrack, selectedSid] = [track, sid]"
+      >
+        <UserCard :track-info="track" />
+      </div>
+    </template>
+  </div>
+</template>
+<style lang="scss" module>
+.parentContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  height: 100%;
+  width: 100%;
+}
+
+.flexContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  height: 100%;
+  width: 100%;
+}
+
+.largeCardParent {
+  flex-grow: 1;
+  max-width: 100%;
+  max-height: 100%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.largeCard {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+}
+
+.subViewContainer {
+  flex-grow: 0;
+  height: 108px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+}
+
+.gridContainer {
+  display: grid;
+  grid-template-columns: repeat(5, 192px);
+  grid-auto-rows: 108px;
+  gap: 8px;
+  overflow-y: auto;
+  max-height: calc(100vh - 200px);
+  margin: 0 auto;
+}
+
+.smallCard {
+  height: 108px;
+  width: 192px;
+}
+
+.card {
+  height: 108px;
+  width: 192px;
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/VideoComponent.vue b/src/components/Main/MainView/QallView/VideoComponent.vue
new file mode 100644
index 0000000000..41186421e8
--- /dev/null
+++ b/src/components/Main/MainView/QallView/VideoComponent.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { useQall } from '/@/composables/qall/useQall'
+import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
+import VideoTrack from './VideoTrack.vue'
+
+const { trackInfo } = defineProps<{
+  trackInfo: TrackInfo
+}>()
+
+const { removeVideoTrack } = useQall()
+</script>
+
+<template>
+  <div :class="$style.UserCard">
+    <!-- <button
+      v-if="!trackInfo.isRemote && trackInfo.trackPublication"
+      @click="removeVideoTrack(trackInfo.trackPublication)"
+    >
+      Remove Video
+    </button> -->
+    <VideoTrack :track-info="trackInfo" :class="$style.video" />
+    <div :class="$style.NameLabel">{{ trackInfo.username }}</div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.video {
+  width: 100%;
+  height: 100%;
+}
+.NameLabel {
+  position: absolute;
+  left: 8px;
+  bottom: 8px;
+  display: flex;
+  padding: 4px 12px;
+  align-items: flex-start;
+  gap: 8px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+}
+.UserCard {
+  background-color: #000;
+  position: relative;
+  overflow: hidden;
+  border-radius: 12px;
+
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/VideoTrack.vue b/src/components/Main/MainView/QallView/VideoTrack.vue
new file mode 100644
index 0000000000..872f057158
--- /dev/null
+++ b/src/components/Main/MainView/QallView/VideoTrack.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, useTemplateRef, watchEffect } from 'vue'
+import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
+
+const { trackInfo } = defineProps<{
+  trackInfo: TrackInfo
+}>()
+
+const videoElement = useTemplateRef<HTMLVideoElement>('videoElement')
+const volume = ref(1)
+watchEffect(() => {
+  if (videoElement.value) {
+    videoElement.value.volume = volume.value
+  }
+})
+
+onMounted(() => {
+  if (videoElement.value) {
+    trackInfo.trackPublication?.track?.attach(videoElement.value)
+  }
+})
+
+onUnmounted(() => {
+  if (videoElement.value) {
+    trackInfo.trackPublication?.track?.detach(videoElement.value)
+  }
+})
+</script>
+
+<template>
+  <video v-if="trackInfo.trackPublication" ref="videoElement"></video>
+</template>
diff --git a/src/components/Main/MainView/QallView/useDanmakuSparkle.ts b/src/components/Main/MainView/QallView/useDanmakuSparkle.ts
new file mode 100644
index 0000000000..347bdeef9c
--- /dev/null
+++ b/src/components/Main/MainView/QallView/useDanmakuSparkle.ts
@@ -0,0 +1,24 @@
+import { useStampsStore } from '/@/store/entities/stamps'
+import { buildFilePath } from '/@/lib/apis'
+
+export const useDanmakuSparkle = (
+  showSparkle: (stampElement: HTMLElement) => void
+) => {
+  const { stampsMap } = useStampsStore()
+
+  const sparkle = (stampId: string) => {
+    const fileId = stampsMap.value.get(stampId)?.fileId
+    const imageUrl = fileId ? buildFilePath(fileId) : ''
+
+    const stampImage = document.createElement('img')
+    stampImage.src = imageUrl
+    stampImage.style.width = '24px'
+    stampImage.addEventListener('load', () => {
+      showSparkle(stampImage)
+    })
+
+    return stampImage
+  }
+
+  return { sparkle }
+}
diff --git a/src/components/Main/NavigationBar/ChannelList/ChannelElementName.vue b/src/components/Main/NavigationBar/ChannelList/ChannelElementName.vue
index b9968fd7a9..34656a8708 100644
--- a/src/components/Main/NavigationBar/ChannelList/ChannelElementName.vue
+++ b/src/components/Main/NavigationBar/ChannelList/ChannelElementName.vue
@@ -3,6 +3,7 @@
     <span :class="$style.name" :title="pathTooltip">
       {{ pathToShow }}
     </span>
+    <!-- デザインが確定したら消すか消さないか決める -->
     <template v-if="qallUserIds.length > 0">
       <a-icon :class="$style.qallIcon" :size="16" mdi name="phone-outline" />
       <user-icon-ellipsis-list
@@ -20,12 +21,14 @@
 </template>
 
 <script lang="ts" setup>
-import AIcon from '/@/components/UI/AIcon.vue'
-import UserIconEllipsisList from '/@/components/UI/UserIconEllipsisList.vue'
 import type { ChannelTreeNode } from '/@/lib/channelTree'
 import type { Channel } from '@traptitech/traq'
 import type { TypedProps } from './composables/usePath'
-import { usePath, useRTCState } from './composables/usePath'
+import { usePath } from './composables/usePath'
+import AIcon from '/@/components/UI/AIcon.vue'
+import UserIconEllipsisList from '/@/components/UI/UserIconEllipsisList.vue'
+import { useQall } from '/@/composables/qall/useQall'
+import { computed } from 'vue'
 
 const props = withDefaults(
   defineProps<{
@@ -41,7 +44,13 @@ const props = withDefaults(
 const typedProps = props as TypedProps
 
 const { pathToShow, pathTooltip } = usePath(typedProps)
-const { qallUserIds } = useRTCState(typedProps)
+const { rooms } = useQall()
+const qallUserIds = computed(
+  () =>
+    rooms.value
+      .find(room => room.channel.id === props.channel.id)
+      ?.participants.map(participant => participant.user.id) ?? []
+)
 </script>
 
 <style lang="scss" module>
diff --git a/src/components/Main/NavigationBar/ChannelList/composables/usePath.ts b/src/components/Main/NavigationBar/ChannelList/composables/usePath.ts
index ff91c463a9..b0c4ecd4bf 100644
--- a/src/components/Main/NavigationBar/ChannelList/composables/usePath.ts
+++ b/src/components/Main/NavigationBar/ChannelList/composables/usePath.ts
@@ -1,6 +1,5 @@
 import type { Channel } from '@traptitech/traq'
-import { computed, reactive } from 'vue'
-import { useQallSession } from '/@/components/Main/MainView/ChannelView/ChannelSidebar/composables/useChannelRTCSession'
+import { computed } from 'vue'
 import useChannelPath from '/@/composables/useChannelPath'
 import type { ChannelTreeNode } from '/@/lib/channelTree'
 
@@ -38,11 +37,3 @@ export const usePath = (typedProps: TypedProps) => {
 
   return { pathToShow, pathTooltip }
 }
-
-export const useRTCState = (typedProps: TypedProps) => {
-  const { sessionUserIds } = useQallSession(
-    reactive({ channelId: computed(() => typedProps.channel.id) })
-  )
-
-  return { qallUserIds: sessionUserIds }
-}
diff --git a/src/components/Main/NavigationBar/EphemeralNavigationContent/EphemeralNavigationContent.vue b/src/components/Main/NavigationBar/EphemeralNavigationContent/EphemeralNavigationContent.vue
index 15f1a5fbd8..099f2e3a6a 100644
--- a/src/components/Main/NavigationBar/EphemeralNavigationContent/EphemeralNavigationContent.vue
+++ b/src/components/Main/NavigationBar/EphemeralNavigationContent/EphemeralNavigationContent.vue
@@ -1,8 +1,8 @@
 <template>
   <ephemeral-navigation-content-container :transparent="transparent">
     <transition name="fade-bottom" mode="out-in">
-      <qall-controller v-if="currentEphemeralNavigation === 'qallController'" />
-      <draft-list v-else-if="currentEphemeralNavigation === 'draftList'" />
+      <SubQallView v-if="currentEphemeralNavigation === 'qallController'" />
+      <DraftList v-else-if="currentEphemeralNavigation === 'draftList'" />
       <audio-controller
         v-else-if="currentEphemeralNavigation === 'audioController'"
       />
@@ -12,10 +12,10 @@
 
 <script lang="ts" setup>
 import EphemeralNavigationContentContainer from './EphemeralNavigationContentContainer.vue'
-import QallController from './QallController/QallController.vue'
-import DraftList from './DraftList/DraftList.vue'
 import AudioController from './AudioController/AudioController.vue'
 import type { EphemeralNavigationItemType } from '/@/components/Main/NavigationBar/composables/useNavigationConstructor'
+import SubQallView from '../../MainView/QallView/SubQallView.vue'
+import DraftList from './DraftList/DraftList.vue'
 
 withDefaults(
   defineProps<{
diff --git a/src/components/Main/NavigationBar/EphemeralNavigationContent/QallController/QallControlPanel.vue b/src/components/Main/NavigationBar/EphemeralNavigationContent/QallController/QallControlPanel.vue
deleted file mode 100644
index 4966b8a237..0000000000
--- a/src/components/Main/NavigationBar/EphemeralNavigationContent/QallController/QallControlPanel.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-  <div :class="$style.container">
-    <button :class="$style.top" @click="emit('topToggleClick')">
-      <a-icon name="phone" mdi />
-    </button>
-    <div :class="$style.info">
-      <div :class="$style.status">
-        {{ status }}
-      </div>
-      <router-link :to="channelLink" :class="$style.channelName">
-        #{{ channelName }}
-      </router-link>
-    </div>
-    <button
-      :class="$style.mic"
-      :data-is-mute="$boolAttr(isMicMuted)"
-      @click="emit('micClick')"
-    >
-      <a-icon :name="micIconName" mdi />
-    </button>
-    <button :class="$style.end" @click="emit('endQallClick')">
-      <a-icon name="phone-hangup" mdi />
-    </button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import AIcon from '/@/components/UI/AIcon.vue'
-import { computed } from 'vue'
-import useChannelPath from '/@/composables/useChannelPath'
-
-const props = withDefaults(
-  defineProps<{
-    status?: string
-    channelId: string
-    isMicMuted?: boolean
-  }>(),
-  {
-    status: '',
-    isMicMuted: false
-  }
-)
-
-const emit = defineEmits<{
-  (e: 'topToggleClick'): void
-  (e: 'micClick'): void
-  (e: 'endQallClick'): void
-}>()
-
-const { channelIdToShortPathString, channelIdToLink } = useChannelPath()
-const channelName = computed(() => channelIdToShortPathString(props.channelId))
-const channelLink = computed(() => channelIdToLink(props.channelId))
-
-const micIconName = computed(() =>
-  props.isMicMuted ? 'microphone-off' : 'microphone'
-)
-</script>
-
-<style lang="scss" module>
-.container {
-  @include color-ui-secondary;
-  display: grid;
-  grid-template:
-    'top info mic end' 1fr
-    / 24px 1fr 24px 24px;
-  column-gap: 12px;
-  width: 100%;
-  padding: 12px;
-  align-items: center;
-  border-top: {
-    style: solid;
-    width: 2px;
-    color: $theme-background-secondary-border;
-  }
-}
-.top,
-.mic,
-.end {
-  color: inherit;
-  cursor: pointer;
-}
-.top {
-  grid-area: top;
-}
-.info {
-  grid-area: info;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-.mic {
-  @include color-ui-secondary;
-  grid-area: mic;
-  &[data-is-mute] {
-    color: $common-ui-muted;
-  }
-}
-.end {
-  grid-area: end;
-}
-.status {
-  font: {
-    size: 0.875rem;
-    weight: bold;
-  }
-  user-select: none;
-}
-.channelName {
-  @include size-caption;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>
diff --git a/src/components/Main/NavigationBar/EphemeralNavigationContent/QallController/QallController.vue b/src/components/Main/NavigationBar/EphemeralNavigationContent/QallController/QallController.vue
deleted file mode 100644
index 734585aaed..0000000000
--- a/src/components/Main/NavigationBar/EphemeralNavigationContent/QallController/QallController.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div v-if="currentChannel">
-    <qall-details-panel />
-    <qall-control-panel
-      :status="status"
-      :channel-id="currentChannel"
-      :is-mic-muted="isMicMuted"
-      @end-qall-click="endQall"
-      @mic-click="onMicClick"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import QallControlPanel from './QallControlPanel.vue'
-import QallDetailsPanel from './QallDetailsPanel.vue'
-import { computed } from 'vue'
-import { useAppRtcStore } from '/@/store/app/rtc'
-import { useDomainRtcStore } from '/@/store/domain/rtc'
-
-const { isMicMuted, endQall, mute, unmute } = useAppRtcStore()
-const { qallSession, currentRTCState } = useDomainRtcStore()
-const currentChannel = computed(() =>
-  qallSession.value ? currentRTCState.value?.channelId : undefined
-)
-const onMicClick = () => {
-  if (isMicMuted.value) {
-    unmute()
-  } else {
-    mute()
-  }
-}
-const status = computed(() => '通話中')
-</script>
diff --git a/src/components/Main/NavigationBar/EphemeralNavigationContent/QallController/QallDetailsPanel.vue b/src/components/Main/NavigationBar/EphemeralNavigationContent/QallController/QallDetailsPanel.vue
deleted file mode 100644
index 0beb33e241..0000000000
--- a/src/components/Main/NavigationBar/EphemeralNavigationContent/QallController/QallDetailsPanel.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <collapse-content>
-    <qall-details-panel-user
-      v-if="myId"
-      :key="myId"
-      :class="$style.slider"
-      :user-id="myId"
-      :mic-muted="mutedUsers.has(myId)"
-      :show-tune-button="!isVolumeTuneShown"
-      :show-tune-done-button="isVolumeTuneShown"
-      disabled
-      @tune="showVolumeTune"
-      @tune-done="hideVolumeTune"
-    />
-    <qall-details-panel-user
-      v-for="id in users"
-      :key="id"
-      :class="$style.slider"
-      :user-id="id"
-      :mic-muted="mutedUsers.has(id)"
-      :show-volume-control="isVolumeTuneShown"
-    />
-  </collapse-content>
-</template>
-
-<script lang="ts" setup>
-import QallDetailsPanelUser from './QallDetailsPanelUser.vue'
-import CollapseContent from '../CollapseContent.vue'
-import { computed } from 'vue'
-import { useDomainRtcStore } from '/@/store/domain/rtc'
-import { useMeStore } from '/@/store/domain/me'
-import useToggle from '/@/composables/utils/useToggle'
-
-const { myId } = useMeStore()
-const { currentSessionUsers, currentMutedUsers: mutedUsers } =
-  useDomainRtcStore()
-
-const {
-  value: isVolumeTuneShown,
-  open: showVolumeTune,
-  close: hideVolumeTune
-} = useToggle()
-
-const users = computed(() =>
-  [...currentSessionUsers.value].filter(id => id !== myId.value)
-)
-</script>
-
-<style lang="scss" module>
-.slider {
-  margin: 12px 0;
-  &:first-child {
-    margin-top: 0;
-  }
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-</style>
diff --git a/src/components/Main/NavigationBar/EphemeralNavigationContent/QallController/QallDetailsPanelUser.vue b/src/components/Main/NavigationBar/EphemeralNavigationContent/QallController/QallDetailsPanelUser.vue
deleted file mode 100644
index 11308a9f6a..0000000000
--- a/src/components/Main/NavigationBar/EphemeralNavigationContent/QallController/QallDetailsPanelUser.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<template>
-  <div :class="$style.container">
-    <div :class="$style.userIcon" :data-talking-level="talkingLevel">
-      <user-icon :user-id="userId" :size="24" />
-    </div>
-    <div :class="$style.userDesc">
-      <a-slider
-        v-if="showVolumeControl"
-        v-model="volume"
-        :min="0"
-        :max="200"
-        tooltip-formatter="{value}%"
-        :disabled="disabled || volume === undefined"
-        :tooltip="disabled ? 'none' : 'active'"
-      />
-      <span v-else :class="$style.userName">{{ userName }}</span>
-    </div>
-    <button v-if="showTuneButton" :class="$style.button" @click="emit('tune')">
-      <a-icon mdi name="tune" :size="16" />
-    </button>
-    <button
-      v-else-if="showTuneDoneButton"
-      :class="[$style.button, $style.tuneDone]"
-      @click="emit('tuneDone')"
-    >
-      <a-icon mdi name="check" :size="16" />
-    </button>
-    <div v-else-if="micMuted" :class="$style.icon">
-      <a-icon mdi name="microphone-off" :size="16" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-import type { UserId } from '/@/types/entity-ids'
-import { useAppRtcStore } from '/@/store/app/rtc'
-import { useUsersStore } from '/@/store/entities/users'
-import ASlider from '/@/components/UI/ASlider.vue'
-import UserIcon from '/@/components/UI/UserIcon.vue'
-import AIcon from '/@/components/UI/AIcon.vue'
-
-const props = withDefaults(
-  defineProps<{
-    userId: UserId
-    showVolumeControl?: boolean
-    disabled?: boolean
-    showTuneButton?: boolean
-    showTuneDoneButton?: boolean
-    micMuted?: boolean
-  }>(),
-  {
-    showVolumeControl: false,
-    disabled: false,
-    showTuneButton: false,
-    showTuneDoneButton: false,
-    micMuted: false
-  }
-)
-
-const emit = defineEmits<{
-  (e: 'tune'): void
-  (e: 'tuneDone'): void
-}>()
-
-const maxVolumeValue = 200
-
-const { talkingUsersState, streamVolumeMap, setUserVolume } = useAppRtcStore()
-const { usersMap } = useUsersStore()
-const volume = computed({
-  get() {
-    return Math.round(
-      (streamVolumeMap.value.get(props.userId) ?? 1) * maxVolumeValue
-    )
-  },
-  set(value: number) {
-    setUserVolume(props.userId, value / maxVolumeValue)
-  }
-})
-const userName = computed(
-  () => usersMap.value.get(props.userId)?.displayName ?? ''
-)
-const talkingLevel = computed(() => talkingUsersState.value.get(props.userId))
-</script>
-
-<style lang="scss" module>
-.container {
-  display: grid;
-  grid-template-columns: min-content 1fr 16px;
-  column-gap: 12px;
-  align-items: center;
-}
-.userIcon {
-  margin: 4px;
-  border: {
-    style: solid;
-    color: $common-ui-qall;
-    width: 0;
-    radius: 50%;
-  }
-  &[data-talking-level='1'] {
-    margin: 3px;
-    border-width: 1px;
-  }
-  &[data-talking-level='2'] {
-    margin: 2px;
-    border-width: 2px;
-  }
-  &[data-talking-level='3'] {
-    margin: 1px;
-    border-width: 3px;
-  }
-  &[data-talking-level='4'] {
-    margin: 0;
-    border-width: 4px;
-  }
-}
-.icon {
-  @include color-ui-secondary-inactive;
-  height: 20px;
-}
-.button {
-  @include color-ui-secondary-inactive;
-  height: 20px;
-  cursor: pointer;
-  &:hover {
-    @include color-ui-secondary;
-  }
-}
-.tuneDone {
-  @include color-accent-primary;
-}
-.userDesc {
-  min-width: 0;
-}
-.userName {
-  @include color-ui-secondary;
-  @include size-body2;
-  display: inline-block;
-  width: 100%;
-  vertical-align: middle;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-</style>
diff --git a/src/components/Main/NavigationBar/NavigationContent/HomeTab.vue b/src/components/Main/NavigationBar/NavigationContent/HomeTab.vue
index 515d2eff6d..477c1c48b8 100644
--- a/src/components/Main/NavigationBar/NavigationContent/HomeTab.vue
+++ b/src/components/Main/NavigationBar/NavigationContent/HomeTab.vue
@@ -26,11 +26,11 @@
       <empty-state v-else>購読していません</empty-state>
     </navigation-content-container>
     <navigation-content-container
-      v-if="channelsWithRtc.length > 0"
+      v-if="qallingChannels.length > 0"
       subtitle="Qall中チャンネル"
       :class="$style.item"
     >
-      <channel-list :channels="channelsWithRtc" />
+      <channel-list :channels="qallingChannels" />
     </navigation-content-container>
   </div>
 </template>
@@ -42,19 +42,18 @@ import ChannelTree from '/@/components/Main/NavigationBar/ChannelList/ChannelTre
 import NavigationContentContainer from '/@/components/Main/NavigationBar/NavigationContentContainer.vue'
 import DMChannelList from '/@/components/Main/NavigationBar/DMChannelList/DMChannelList.vue'
 import { computed, toRaw } from 'vue'
-import { isDefined } from '/@/lib/basic/array'
 import { constructTreeFromIds } from '/@/lib/channelTree'
 import { useChannelTree } from '/@/store/domain/channelTree'
-import { useDomainRtcStore } from '/@/store/domain/rtc'
 import { useMeStore } from '/@/store/domain/me'
 import { useChannelsStore } from '/@/store/entities/channels'
 import useChannelsWithNotification from '/@/composables/subscription/useChannelsWithNotification'
 import { filterTrees } from '/@/lib/basic/tree'
+import { useQall } from '/@/composables/qall/useQall'
 
 const { homeChannelTree } = useChannelTree()
-const { channelSessionsMap } = useDomainRtcStore()
 const { detail } = useMeStore()
 const { channelsMap } = useChannelsStore()
+const { rooms: roomWithParticipants } = useQall()
 
 const homeChannelWithTree = computed(() => {
   if (!detail.value?.homeChannel) return []
@@ -73,11 +72,9 @@ const topLevelChannels = computed(() =>
   // filterTreesは重いのと内部ではreactiveである必要がないのでtoRawする
   filterTrees(toRaw(homeChannelTree.value.children), node => !node.archived)
 )
-const channelsWithRtc = computed(() =>
-  [...channelSessionsMap.value.entries()]
-    .filter(([, sessionIds]) => sessionIds.size > 0)
-    .map(([channelId]) => channelsMap.value.get(channelId))
-    .filter(isDefined)
+
+const qallingChannels = computed(() =>
+  roomWithParticipants.value.map(room => room.channel)
 )
 </script>
 
diff --git a/src/components/Main/NavigationBar/composables/useNavigationSelectorEntry.ts b/src/components/Main/NavigationBar/composables/useNavigationSelectorEntry.ts
index b69e818e0e..842c02a2d8 100644
--- a/src/components/Main/NavigationBar/composables/useNavigationSelectorEntry.ts
+++ b/src/components/Main/NavigationBar/composables/useNavigationSelectorEntry.ts
@@ -7,9 +7,10 @@ import type { ThemeClaim } from '/@/lib/styles'
 import { isDefined } from '/@/lib/basic/array'
 import { useMessageInputStateStore } from '/@/store/ui/messageInputStateStore'
 import { useAudioController } from '/@/store/ui/audioController'
-import { useAppRtcStore } from '/@/store/app/rtc'
 import { useChannelsStore } from '/@/store/entities/channels'
 import { useSubscriptionStore } from '/@/store/domain/subscription'
+import { useQall } from '/@/composables/qall/useQall'
+import { useMainViewStore } from '/@/store/ui/mainView'
 
 export type NavigationSelectorEntry = {
   type: NavigationItemType
@@ -79,11 +80,12 @@ export const ephemeralItems: Record<
 }
 
 const useNavigationSelectorEntry = () => {
-  const { isCurrentDevice: hasActiveQallSession } = useAppRtcStore()
   const { unreadChannelsMap } = useSubscriptionStore()
   const { channelsMap, dmChannelsMap } = useChannelsStore()
   const { hasInputChannel } = useMessageInputStateStore()
   const { fileId } = useAudioController()
+  const { getQallingState } = useQall()
+  const { primaryView } = useMainViewStore()
 
   const unreadChannels = computed(() => [...unreadChannelsMap.value.values()])
   const notificationState = reactive({
@@ -96,6 +98,11 @@ const useNavigationSelectorEntry = () => {
   })
   const entries = computed(() => createItems(notificationState))
 
+  const hasActiveQallSession = computed(
+    () =>
+      primaryView.value.type === 'channel' &&
+      getQallingState(primaryView.value.channelId) === 'subView'
+  )
   const ephemeralEntries = computed(() =>
     [
       hasActiveQallSession.value ? ephemeralItems.qallController : undefined,
diff --git a/src/components/Main/StampPicker/StampPickerContainer.vue b/src/components/Main/StampPicker/StampPickerContainer.vue
index 00ad6cecb7..ccb2c0f867 100644
--- a/src/components/Main/StampPicker/StampPickerContainer.vue
+++ b/src/components/Main/StampPicker/StampPickerContainer.vue
@@ -35,6 +35,14 @@ const style = computed(() => {
       transform: 'translateX(-100%)'
     }
   }
+  if (alignment.value === 'bottom-left') {
+    return {
+      bottom: `min(calc(100% - ${height + margin}px), calc(100% - ${
+        position.value.y
+      }px))`,
+      left: `min(calc(100% - ${width}px), ${position.value.x}px)`
+    }
+  }
   if (alignment.value === 'bottom-right') {
     return {
       bottom: `min(calc(100% - ${height + margin}px), calc(100% - ${
diff --git a/src/components/Settings/composables/useNavigation.ts b/src/components/Settings/composables/useNavigation.ts
index 3957e63857..0849afd4ea 100644
--- a/src/components/Settings/composables/useNavigation.ts
+++ b/src/components/Settings/composables/useNavigation.ts
@@ -12,6 +12,7 @@ export type NavigationItemType =
   | 'qall'
   | 'stamp'
   | 'theme'
+  | 'audio'
 
 // TODO: 言語系リソースの置き場所
 export const navigationRouteNameTitleMap: Record<SettingsRouteName, string> = {
@@ -20,7 +21,8 @@ export const navigationRouteNameTitleMap: Record<SettingsRouteName, string> = {
   settingsBrowser: 'ブラウザ',
   settingsQall: '通話 (Qall)',
   settingsStamp: 'スタンプ',
-  settingsTheme: 'テーマ'
+  settingsTheme: 'テーマ',
+  settingsAudio: '音声'
 }
 
 export const navigations: {
@@ -60,6 +62,11 @@ export const navigations: {
     routeName: 'settingsTheme',
     iconName: 'brightness-6',
     iconMdi: true
+  },
+  {
+    routeName: 'settingsAudio',
+    iconName: 'volume-high',
+    iconMdi: true
   }
 ]
 
diff --git a/src/components/UI/AIcon.vue b/src/components/UI/AIcon.vue
index 444cb74802..b98a4dc25a 100644
--- a/src/components/UI/AIcon.vue
+++ b/src/components/UI/AIcon.vue
@@ -3,7 +3,7 @@
     v-if="mdi"
     :width="size"
     :height="size"
-    viewBox="0 0 24 24"
+    :viewBox="`0 0 24 24`"
     v-bind="$attrs"
     role="img"
     :class="$style.icon"
@@ -15,7 +15,7 @@
     v-else
     :width="size"
     :height="size"
-    viewBox="0 0 24 24"
+    :viewBox="`0 0 ${size} ${size}`"
     v-bind="$attrs"
     role="img"
     :class="$style.icon"
diff --git a/src/components/UI/InlineMarkdown.vue b/src/components/UI/InlineMarkdown.vue
index 5c189a2322..8668b8272a 100644
--- a/src/components/UI/InlineMarkdown.vue
+++ b/src/components/UI/InlineMarkdown.vue
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
 import { renderInline } from '/@/lib/markdown/markdown'
 import type { MarkdownRenderResult } from '@traptitech/traq-markdown-it'
-import { computed, ref, watchEffect } from 'vue'
+import { computed, nextTick, ref, watchEffect } from 'vue'
 import useSpoilerToggler from '/@/composables/markdown/useSpoilerToggler'
 
 const props = withDefaults(
@@ -24,10 +24,15 @@ const props = withDefaults(
     acceptAction: false
   }
 )
+const emit = defineEmits<{
+  render: []
+}>()
 
 const rendered = ref<MarkdownRenderResult>()
 watchEffect(async () => {
   rendered.value = await renderInline(props.content)
+  await nextTick()
+  emit('render')
 })
 const renderedContent = computed(() => rendered.value?.renderedText)
 
diff --git a/src/composables/qall/useLiveKitSDK.ts b/src/composables/qall/useLiveKitSDK.ts
new file mode 100644
index 0000000000..1a378bbd7e
--- /dev/null
+++ b/src/composables/qall/useLiveKitSDK.ts
@@ -0,0 +1,644 @@
+import {
+  Track,
+  RoomEvent,
+  AudioPresets,
+  createLocalScreenTracks,
+  Room,
+  LocalVideoTrack
+} from 'livekit-client'
+import type {
+  RemoteTrack,
+  RemoteTrackPublication,
+  RemoteParticipant,
+  LocalTrackPublication,
+  LocalParticipant,
+  Participant,
+  LocalTrack
+} from 'livekit-client'
+import { computed, ref, type Ref } from 'vue'
+import { useToastStore } from '/@/store/ui/toast'
+import apis from '/@/lib/apis'
+import { VirtualBackgroundProcessor } from '@shiguredo/virtual-background'
+import mitt from 'mitt'
+import rnnoiseWorkletPath from '@sapphi-red/web-noise-suppressor/rnnoiseWorklet.js?url'
+import rnnoiseWasmPath from '@sapphi-red/web-noise-suppressor/rnnoise.wasm?url'
+import rnnoiseSimdWasmPath from '@sapphi-red/web-noise-suppressor/rnnoise_simd.wasm?url'
+import {
+  loadRnnoise as loadRnnoiseLib,
+  loadSpeex as loadSpeexLib,
+  RnnoiseWorkletNode,
+  SpeexWorkletNode
+} from '@sapphi-red/web-noise-suppressor'
+import speexWasmPath from '@sapphi-red/web-noise-suppressor/speex.wasm?url'
+import speexWorkletPath from '@sapphi-red/web-noise-suppressor/speexWorklet.js?url'
+
+type NoiseSuppressionType = 'rnnoise' | 'speex' | 'none'
+
+let speexWasmBinary: ArrayBuffer | undefined
+const loadSpeexWasmBinary = async () => {
+  if (speexWasmBinary) return speexWasmBinary
+  speexWasmBinary = await loadSpeexLib({ url: speexWasmPath })
+  return speexWasmBinary
+}
+
+let rnnoiseWasmBinary: ArrayBuffer | undefined
+const loadRnnoiseWasmBinary = async () => {
+  if (rnnoiseWasmBinary) return rnnoiseWasmBinary
+  rnnoiseWasmBinary = await loadRnnoiseLib({
+    url: rnnoiseWasmPath,
+    simdUrl: rnnoiseSimdWasmPath
+  })
+  return rnnoiseWasmBinary
+}
+import ExtendedAudioContext from '/@/lib/webrtc/ExtendedAudioContext'
+import AudioStreamMixer from '/@/lib/webrtc/AudioStreamMixer'
+import { useRtcSettings } from '/@/store/app/rtcSettings'
+
+const virtualBackgroundAssetsPath =
+  'https://cdn.jsdelivr.net/npm/@shiguredo/virtual-background@latest/dist'
+type QallEventMap = {
+  pushStamp: string
+}
+const { addErrorToast } = useToastStore()
+const qallMitt = mitt<QallEventMap>()
+const rtcSettings = useRtcSettings()
+
+export type TrackInfo = (
+  | {
+      isRemote: true
+      trackPublication: RemoteTrackPublication
+    }
+  | {
+      isRemote: false
+      trackPublication: LocalTrackPublication | undefined
+    }
+) & {
+  username: string
+}
+
+type CameraProcessor = {
+  processor: VirtualBackgroundProcessor
+  track: MediaStreamVideoTrack
+  backgroundImageSrc?: MediaStream
+}
+
+const room = ref<Room>()
+const audioContext = ref<AudioContext>()
+const isRnnoiseSupported = computed(() => !!audioContext.value)
+const speakerIdentity = ref<string[]>([])
+const tracksMap: Ref<Map<string, TrackInfo>> = ref(new Map())
+const cameraProcessorMap: Ref<Map<string, CameraProcessor>> = ref(new Map())
+const screenShareTrackSidMap = ref<Map<string, string>>(new Map())
+const mixer = ref<AudioStreamMixer>()
+const audioTrackId = ref<string>()
+
+function handleTrackSubscribed(
+  track: RemoteTrack,
+  publication: RemoteTrackPublication,
+  participant: RemoteParticipant
+) {
+  if (track.kind === Track.Kind.Video || track.kind === Track.Kind.Audio) {
+    // attach it to a new HTMLVideoElement or HTMLAudioElement
+    tracksMap.value.set(publication.trackSid, {
+      isRemote: true,
+      trackPublication: publication,
+      username: participant.identity.slice(0, -37)
+    })
+  }
+}
+
+function handleTrackUnsubscribed(
+  track: RemoteTrack,
+  publication: RemoteTrackPublication,
+  participant: RemoteParticipant
+) {
+  // remove tracks from all attached elements
+  tracksMap.value.delete(publication.trackSid)
+  screenShareTrackSidMap.value.delete(publication.trackSid)
+}
+
+function handleLocalTrackUnpublished(
+  publication: LocalTrackPublication,
+  participant: LocalParticipant
+) {
+  // when local tracks are ended, update UI to remove them from rendering
+  tracksMap.value.delete(publication.trackSid)
+  screenShareTrackSidMap.value.delete(publication.trackSid)
+}
+
+function handleLocalTrackPublished(
+  publication: LocalTrackPublication,
+  participant: LocalParticipant
+) {
+  // when local tracks are ended, update UI to remove them from rendering
+  if (!publication.track) return
+  tracksMap.value.set(publication.trackSid, {
+    isRemote: false,
+    trackPublication: publication,
+    username: participant.identity.slice(0, -37)
+  })
+}
+
+function handleActiveSpeakerChange(speakers: Participant[]) {
+  // show UI indicators when participant is speaking
+  speakerIdentity.value = speakers.map(s => s.identity)
+}
+
+function handleDisconnect() {
+  //
+}
+
+function handleDataReceived(payload: Uint8Array<ArrayBufferLike>) {
+  const data = JSON.parse(decoder.decode(payload))
+  if (!data.type || !data.message) return
+  if (data.type === 'stamp') {
+    qallMitt.emit('pushStamp', data.message)
+  }
+}
+
+function handleParticipantAttributesChanged(
+  changed: Record<string, string>,
+  participant: Participant
+) {
+  Object.keys(changed).forEach(key =>
+    screenShareTrackSidMap.value.set(key, changed[key] ?? '')
+  )
+}
+
+function handleParticipantConnected(participant: Participant) {
+  mixer.value?.playFileSource('qall_joined')
+}
+
+function handleParticipantDisconnected(participant: Participant) {
+  mixer.value?.playFileSource('qall_left')
+}
+
+const joinRoom = async (roomName: string, isWebinar: boolean = false) => {
+  try {
+    const traQtoken = (await apis.getMyQRCode(true)).data
+    const res = await fetch(
+      `https://qall-microservice-for-livekit.trap.show/api/token?room=${roomName}&isWebinar=${isWebinar}`,
+      {
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${traQtoken}`,
+          'Content-Type': 'application/json'
+        }
+      }
+    )
+    const json = await res.json()
+    const token = json.token
+
+    // pre-warm connection, this can be called as early as your page is loaded
+    //room.prepareConnection("https://livekit-test.trap.show:39357", token);
+    room.value = new Room({ dynacast: true, adaptiveStream: true })
+    await room.value.prepareConnection(
+      'wss://livekit.qall-dev.trapti.tech',
+      token
+    )
+
+    // set up event listeners
+    room.value
+      .on(RoomEvent.TrackSubscribed, handleTrackSubscribed)
+      .on(RoomEvent.TrackUnsubscribed, handleTrackUnsubscribed)
+      .on(RoomEvent.ActiveSpeakersChanged, handleActiveSpeakerChange)
+      .on(RoomEvent.Disconnected, handleDisconnect)
+      .on(RoomEvent.LocalTrackUnpublished, handleLocalTrackUnpublished)
+      .on(RoomEvent.LocalTrackPublished, handleLocalTrackPublished)
+      .on(RoomEvent.DataReceived, handleDataReceived)
+      .on(
+        RoomEvent.ParticipantAttributesChanged,
+        handleParticipantAttributesChanged
+      )
+      .on(RoomEvent.ParticipantConnected, handleParticipantConnected)
+      .on(RoomEvent.ParticipantDisconnected, handleParticipantDisconnected)
+
+    // connect to room
+    await room.value.connect('wss://livekit.qall-dev.trapti.tech', token)
+
+    if (room.value.localParticipant?.permissions?.canPublish) {
+      await addMicTrack()
+    }
+
+    await room.value.localParticipant.setAttributes({})
+    room.value.remoteParticipants.forEach(participant => {
+      Object.keys(participant.attributes).forEach(key => {
+        screenShareTrackSidMap.value.set(key, participant.attributes[key] ?? '')
+      })
+    })
+
+    const audioContext = new ExtendedAudioContext()
+    mixer.value = new AudioStreamMixer(
+      audioContext,
+      rtcSettings.masterVolume.value
+    )
+    await mixer.value.initializePromise
+    await mixer.value.playFileSource('qall_start')
+  } catch {
+    addErrorToast('Qallの接続に失敗しました')
+    await leaveRoom()
+  }
+
+  window.addEventListener('beforeunload', leaveRoom)
+}
+const screenShareTracks = computed(() =>
+  Array.from(screenShareTrackSidMap.value.entries())
+)
+
+async function leaveRoom() {
+  // Leave the room by calling 'disconnect' method over the Room object
+  await room.value?.disconnect()
+  await mixer.value?.playFileSource('qall_end')
+
+  // Empty all variables
+  room.value = undefined
+  tracksMap.value.clear()
+  screenShareTrackSidMap.value.clear()
+  mixer.value = undefined
+  window.removeEventListener('beforeunload', leaveRoom)
+}
+
+const addMicTrack = async () => {
+  let stream: MediaStream | undefined
+
+  const noiseSuppression = useRtcSettings().noiseSuppression
+    .value as NoiseSuppressionType
+  try {
+    if (!room.value?.localParticipant?.permissions?.canPublish) {
+      throw new Error('権限がありません')
+    }
+
+    if (!audioContext.value) {
+      audioContext.value = new AudioContext()
+    }
+
+    stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+    const source = audioContext.value.createMediaStreamSource(stream)
+
+    let lastNode: AudioNode = source
+
+    if (noiseSuppression === 'rnnoise') {
+      const [rnnoiseBinary] = await Promise.all([
+        loadRnnoiseWasmBinary(),
+        audioContext.value?.audioWorklet.addModule(rnnoiseWorkletPath)
+      ])
+      const rnnoiseNode = new RnnoiseWorkletNode(audioContext.value, {
+        wasmBinary: rnnoiseBinary,
+        maxChannels: 2
+      })
+      source.connect(rnnoiseNode)
+      lastNode = rnnoiseNode
+    } else if (noiseSuppression === 'speex') {
+      const [speexBinary] = await Promise.all([
+        loadSpeexWasmBinary(),
+        audioContext.value?.audioWorklet.addModule(speexWorkletPath)
+      ])
+      const speexNode = new SpeexWorkletNode(audioContext.value, {
+        wasmBinary: speexBinary,
+        maxChannels: 2
+      })
+      source.connect(speexNode)
+      lastNode = speexNode
+    }
+
+    const destination = audioContext.value.createMediaStreamDestination()
+    lastNode.connect(destination)
+
+    const audioTrack = destination.stream.getAudioTracks()[0]
+    if (!audioTrack) {
+      throw new Error('Failed to get audio track')
+    }
+
+    audioTrackId.value = audioTrack.id
+
+    // Publish the processed stream
+    await room.value.localParticipant.publishTrack(audioTrack, {
+      audioPreset: AudioPresets.musicHighQualityStereo,
+      forceStereo: true,
+      red: false,
+      dtx: false
+    })
+    isMicOn.value = true
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e)
+    // Cleanup
+    stream?.getTracks().forEach(track => track.stop())
+    if (audioContext.value) {
+      await audioContext.value.close()
+      audioContext.value = undefined
+    }
+    addErrorToast('マイクの共有に失敗しました')
+  }
+}
+
+const removeMicTrack = async () => {
+  try {
+    if (!room.value) {
+      addErrorToast('ルームが存在しません')
+      return
+    }
+    for (const [trackSid, trackInfo] of tracksMap.value) {
+      if (trackInfo.isRemote) continue
+      if (trackInfo.trackPublication?.track?.id === audioTrackId.value) {
+        if (audioContext.value) {
+          await audioContext.value.close()
+          audioContext.value = undefined
+        }
+        await trackInfo.trackPublication?.track?.mute()
+      }
+    }
+    // await room.value.localParticipant.setMicrophoneEnabled(false)
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e)
+    addErrorToast('マイクのミュートに失敗しました')
+  }
+}
+
+const toggleMicTrack = async () => {
+  if (!room.value) {
+    addErrorToast('ルームが存在しません')
+    return
+  }
+  if (isMicOn.value) {
+    await removeMicTrack()
+  } else {
+    if (!room.value) {
+      addErrorToast('ルームが存在しません')
+      return
+    }
+    for (const [trackSid, trackInfo] of tracksMap.value) {
+      if (trackInfo.isRemote) continue
+      if (trackInfo.trackPublication?.track?.id === audioTrackId.value) {
+        if (audioContext.value) {
+          await audioContext.value.close()
+          audioContext.value = undefined
+        }
+        await trackInfo.trackPublication?.track?.unmute()
+      }
+    }
+  }
+}
+
+const addCameraTrack = async (
+  videoInputDevice?: MediaDeviceInfo,
+  backgroundType?: 'original' | 'blur' | 'file' | 'screen',
+  backgroundFile?: File
+) => {
+  try {
+    if (!room.value) {
+      addErrorToast('ルームが存在しません')
+      return
+    }
+    if (!room.value?.localParticipant?.permissions?.canPublish) {
+      addErrorToast('権限がありません')
+      return
+    }
+
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: { deviceId: videoInputDevice?.deviceId }
+    })
+    const track = stream.getVideoTracks()[0]
+    if (!track) {
+      addErrorToast('映像が取得できませんでした')
+      return
+    }
+    let backgroundImageSrc: MediaStream | undefined
+    const processor = new VirtualBackgroundProcessor(
+      virtualBackgroundAssetsPath
+    )
+    let options = {}
+
+    if (backgroundType === 'blur') {
+      options = {
+        blurRadius: 10
+      }
+    } else if (backgroundType === 'file' && backgroundFile) {
+      const blob = new Blob([backgroundFile], { type: backgroundFile.type })
+
+      if (backgroundFile.type.startsWith('image/')) {
+        //画像のとき
+        const imageBitmap = await createImageBitmap(blob)
+        options = {
+          backgroundImage: imageBitmap
+        }
+      } else if (backgroundFile.type.startsWith('video/')) {
+        //動画のとき
+        const videoElement = await new Promise<HTMLVideoElement>(resolve => {
+          const video = document.createElement('video')
+          video.addEventListener('loadedmetadata', () => {
+            video.play()
+            resolve(video)
+          })
+          video.src = URL.createObjectURL(blob)
+          video.muted = true
+          video.loop = true
+        })
+        const canvas = drawVideoToCanvas(videoElement)
+        options = {
+          backgroundImage: canvas
+        }
+      }
+    } else if (backgroundType === 'screen') {
+      backgroundImageSrc = await navigator.mediaDevices.getDisplayMedia({
+        video: true
+      })
+      const videoElement = await new Promise<HTMLVideoElement>(resolve => {
+        const video = document.createElement('video')
+        video.addEventListener('loadedmetadata', () => {
+          video.play()
+          resolve(video)
+        })
+        if (backgroundImageSrc) {
+          video.srcObject = backgroundImageSrc
+          video.autoplay = true
+          video.muted = true
+        }
+      })
+
+      const canvas = drawVideoToCanvas(videoElement)
+      options = {
+        backgroundImage: canvas
+      }
+    }
+    const processedTrack = await processor.startProcessing(track, options)
+    const localTrack = new LocalVideoTrack(processedTrack)
+    await room.value?.localParticipant
+      .publishTrack(localTrack, { simulcast: true })
+      .catch(() => {
+        addErrorToast('カメラの共有に失敗しました')
+        track.stop()
+        processor.stopProcessing()
+        return
+      })
+    if (localTrack.sid) {
+      cameraProcessorMap.value.set(localTrack.sid, {
+        processor,
+        track,
+        backgroundImageSrc
+      })
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e)
+    addErrorToast('カメラの共有に失敗しました')
+    return
+  }
+}
+
+const drawVideoToCanvas = (video: HTMLVideoElement) => {
+  const canvas = new OffscreenCanvas(video.videoWidth, video.videoHeight)
+  const canvasCtx = canvas.getContext('2d', {
+    desynchronized: true
+  })
+  if (!canvasCtx) return
+  const updateCanvas = () => {
+    canvasCtx.drawImage(video, 0, 0)
+    requestAnimationFrame(updateCanvas)
+  }
+  updateCanvas()
+  return canvas
+}
+
+const addScreenShareTrack = async () => {
+  try {
+    if (!room.value) {
+      addErrorToast('ルームが存在しません')
+      return
+    }
+    if (!room.value?.localParticipant?.permissions?.canPublish) {
+      addErrorToast('権限がありません')
+      return
+    }
+    const localTracks = await createLocalScreenTracks({
+      audio: {
+        channelCount: 2,
+        autoGainControl: false,
+        noiseSuppression: false,
+        echoCancellation: false,
+        voiceIsolation: false
+      }
+    })
+
+    await Promise.all(
+      localTracks.map(async t => {
+        if (t.kind === Track.Kind.Video) {
+          await room.value?.localParticipant.publishTrack(t, {
+            simulcast: true
+          })
+        } else {
+          await room.value?.localParticipant.publishTrack(t, {
+            audioPreset: AudioPresets.musicHighQualityStereo,
+            dtx: false,
+            red: false
+          })
+        }
+      })
+    )
+    const videoSid = localTracks.find(t => t.kind === Track.Kind.Video)?.sid
+    const audioSid = localTracks.find(t => t.kind === Track.Kind.Audio)?.sid
+    if (audioSid && videoSid) {
+      screenShareTrackSidMap.value.set(videoSid, audioSid)
+      await room.value.localParticipant.setAttributes({
+        ...room.value.localParticipant.attributes,
+        [videoSid]: audioSid
+      })
+    }
+  } catch {
+    // TODO:シェアをキャンセルした時も失敗しましたメッセージがでるのはちょっと違和感があるかも
+    addErrorToast('スクリーン共有に失敗しました')
+    throw new Error('スクリーン共有に失敗しました')
+  }
+}
+
+const removeVideoTrack = async (localpublication: LocalTrackPublication) => {
+  if (localpublication.track) {
+    if (!room.value) {
+      addErrorToast('ルームが存在しません')
+      return
+    }
+    const cameraProcessor = cameraProcessorMap.value.get(
+      localpublication.trackSid
+    )
+    if (cameraProcessor) {
+      cameraProcessor.processor.stopProcessing()
+      cameraProcessor.track.stop()
+      cameraProcessor.backgroundImageSrc
+        ?.getTracks()
+        .forEach(track => track.stop())
+      cameraProcessorMap.value.delete(localpublication.trackSid)
+    }
+
+    const { [localpublication.trackSid]: audioSid, ...newAttributes } =
+      room.value.localParticipant.attributes
+    await room.value.localParticipant.unpublishTrack(
+      localpublication.track,
+      true
+    )
+    await room.value.localParticipant.setAttributes(newAttributes)
+    if (!audioSid) {
+      return
+    }
+
+    const audioTrack = tracksMap.value.get(audioSid)
+    if (
+      !audioTrack ||
+      audioTrack.isRemote ||
+      !audioTrack.trackPublication?.track
+    ) {
+      return
+    }
+
+    await room.value.localParticipant.unpublishTrack(
+      audioTrack.trackPublication.track,
+      true
+    )
+  }
+}
+
+const setLocalTrackMute = async (track: LocalTrack, muted: boolean) => {
+  if (muted) {
+    await track.mute()
+  } else {
+    await track.unmute()
+  }
+}
+
+const setTrackEnabled = (
+  publication: RemoteTrackPublication,
+  muted: boolean
+) => {
+  publication.setEnabled(!muted)
+}
+
+const publishData = async (data: { type: 'stamp'; message: string }) => {
+  if (!room.value) return
+  const strData = JSON.stringify(data)
+  const encoder = new TextEncoder()
+
+  // publishData takes in a Uint8Array, so we need to convert it
+  const encoded = encoder.encode(strData)
+  await room.value.localParticipant.publishData(encoded, { reliable: true })
+}
+const decoder = new TextDecoder()
+const isMicOn = ref(false)
+
+export const useLiveKitSDK = () => {
+  return {
+    joinRoom,
+    leaveRoom,
+    addScreenShareTrack,
+    addCameraTrack,
+    removeVideoTrack,
+    publishData,
+    setTrackEnabled,
+    setLocalTrackMute,
+    toggleMicTrack,
+    tracksMap,
+    screenShareTrackSidMap,
+    screenShareTracks,
+    isMicOn,
+    qallMitt
+  }
+}
diff --git a/src/composables/qall/useQall.ts b/src/composables/qall/useQall.ts
new file mode 100644
index 0000000000..3b82bd2e5d
--- /dev/null
+++ b/src/composables/qall/useQall.ts
@@ -0,0 +1,326 @@
+import { ref } from 'vue'
+import {
+  useLiveKitSDK,
+  type TrackInfo
+} from '/@/composables/qall/useLiveKitSDK'
+import { useMeStore } from '/@/store/domain/me'
+import { useToastStore } from '/@/store/ui/toast'
+import type { LocalAudioTrack, LocalVideoTrack } from 'livekit-client'
+import AutoReconnectWebSocket from '/@/lib/websocket/AutoReconnectWebSocket'
+import type { Channel, User } from '@traptitech/traq'
+import { useChannelsStore } from '/@/store/entities/channels'
+import { useUsersStore } from '/@/store/entities/users'
+import { messageMitt } from '/@/store/entities/messages'
+import { useTts } from '/@/store/app/tts'
+import { useRtcSettings } from '/@/store/app/rtcSettings'
+import apis from '/@/lib/apis'
+
+type RoomsWithParticipants =
+  | {
+      roomId: string
+      participants:
+        | {
+            identity: string
+            joinedAt: string
+            name: string
+            canPublish: boolean
+            attributes: { [key: string]: string }
+          }[]
+        | null
+      isWebinar: boolean
+    }[]
+  | null
+
+type Participant = {
+  user: User
+  joinedAt: string
+  canPublish: boolean
+  attributes: { [key: string]: string }
+}
+type Room = {
+  channel: Channel
+  participants: Participant[]
+  isWebinar: boolean
+}
+type Rooms = Room[]
+
+const rooms = ref<Rooms>([])
+
+const {
+  joinRoom,
+  leaveRoom,
+  addScreenShareTrack,
+  removeVideoTrack,
+  addCameraTrack,
+  setLocalTrackMute,
+  publishData,
+  toggleMicTrack,
+  tracksMap,
+  screenShareTrackSidMap,
+  screenShareTracks,
+  isMicOn,
+  qallMitt
+} = useLiveKitSDK()
+const { myId } = useMeStore()
+const { addErrorToast } = useToastStore()
+const { channelsMap, bothChannelsMapInitialFetchPromise } = useChannelsStore()
+const { findUserByName, usersMap } = useUsersStore()
+const { addQueue } = useTts()
+
+const meStore = useMeStore()
+const rtcSettings = useRtcSettings()
+
+/**
+ * 認証付きFetch
+ * qallFetch(input, init) -> fetch(...) にBearerトークンやheadersを付与
+ */
+const BASE_URL = 'https://qall-microservice-for-livekit.trap.show/'
+
+/**
+ * この型を用意し、RequestInit.headers を string-based で管理できるようにする
+ */
+type QallFetchInit = Omit<RequestInit, 'headers'> & {
+  headers?: Record<string, string>
+}
+
+const qallFetch = async (
+  input: string | URL | Request,
+  init: QallFetchInit = {}
+): Promise<Response> => {
+  // 1) URLを組み立て
+  const url =
+    typeof input === 'string' && !input.startsWith('http')
+      ? new URL(input, BASE_URL).toString()
+      : input
+
+  // 2) 認証トークン取得
+  const traQtoken = (await apis.getMyQRCode(true)).data
+
+  // 3) ヘッダを構築
+  //    → Record<string, string> を new Headers() に変換し、Content-Type を調整
+  const finalHeaders = new Headers(init.headers)
+
+  // 4) Bearer トークンを強制付与
+  finalHeaders.set('Authorization', `Bearer ${traQtoken}`)
+
+  // 5) Content-Type を自動 or 削除
+  //   - ヘッダになければ application/json をセット
+  //   - '' (空) なら削除してマルチパート送信を許可
+  if (!finalHeaders.has('Content-Type')) {
+    // Content-Type が指定されていないなら、デフォルト 'application/json'
+    finalHeaders.set('Content-Type', 'application/json')
+  } else {
+    // 呼び出し側で '' (空文字) としている場合 → ヘッダを削除 (ブラウザが適切に設定する)
+    if (finalHeaders.get('Content-Type') === '') {
+      finalHeaders.delete('Content-Type')
+    }
+  }
+
+  // 6) fetch 実行
+  return await fetch(url, {
+    ...init,
+    headers: finalHeaders
+  })
+}
+
+export type SoundboardItem = {
+  soundId: string
+  soundName: string
+  stampId: string
+  creatorId: string
+}
+/** サウンドボード一覧 */
+type SoundboardListResponse = SoundboardItem[]
+
+/**
+ * GET /soundboard
+ * サウンドボード一覧を取得する
+ */
+const getSoundboardList = async (): Promise<SoundboardListResponse> => {
+  const res = await qallFetch('/api/soundboard', { method: 'GET' })
+  if (!res.ok) {
+    const text = await res.text()
+    throw new Error(`GET /soundboard failed: ${text}`)
+  }
+  return (await res.json()) as SoundboardListResponse
+}
+
+/**
+ * POST /soundboard (multipart/form-data)
+ * @param file アップロードする音声ファイル
+ * @param soundName ユーザがつける音声の名前
+ */
+const postSoundboard = async (
+  file: File,
+  soundName: string,
+  stampId: string
+): Promise<{ soundId: string }> => {
+  const formData = new FormData()
+  formData.append('audio', file)
+  formData.append('soundName', soundName)
+  formData.append('stampId', stampId)
+
+  // 「headers.Content-Type = ''」でヘッダを削除し、multipartを有効にする
+  const res = await qallFetch('/api/soundboard', {
+    method: 'POST',
+    headers: {
+      'Content-Type': '' // これで multipart boundary を自動設定
+    },
+    body: formData
+  })
+
+  if (!res.ok) {
+    const text = await res.text()
+    throw new Error(`POST /soundboard failed: ${text}`)
+  }
+  return await res.json()
+}
+
+/**
+ * POST /soundboard/play
+ * @param soundId 再生したい音声のID
+ * @param roomName 対象ルームのUUID文字列
+ */
+const postSoundboardPlay = async (soundId: string, roomName: string) => {
+  const body = { soundId, roomName }
+  const res = await qallFetch('/api/soundboard/play', {
+    method: 'POST',
+    body: JSON.stringify(body)
+    // headers: Content-Type は JSONでOK
+    // 問題なくqallFetch内で 'application/json' が付与される
+  })
+  if (!res.ok) {
+    const text = await res.text()
+    throw new Error(`POST /soundboard/play failed: ${text}`)
+  }
+  // 正常時に IngressInfo(ingressId, url, streamKey)が返る想定
+  return await res.json()
+}
+
+const purifyRoomData = async (data: RoomsWithParticipants): Promise<Rooms> => {
+  if (!data) return []
+  await bothChannelsMapInitialFetchPromise.value
+  return data
+    .filter(room => room.participants && room.participants.length > 0)
+    .map(room => {
+      return {
+        channel: channelsMap.value.get(room.roomId),
+        participants:
+          room.participants
+            ?.map(p => ({
+              joinedAt: p.joinedAt,
+              user: findUserByName(p.identity.slice(0, -37)),
+              canPublish: p.canPublish ?? false,
+              attributes: p.attributes ?? {}
+            }))
+            .filter((p): p is Participant => !!p.user) ?? [],
+        isWebinar: room.isWebinar ?? false
+      }
+    })
+    .filter((room): room is Room => {
+      if (!room.channel) return false
+      return !room.channel.archived
+    })
+}
+const ws = new AutoReconnectWebSocket(
+  'wss://qall-microservice-for-livekit.trap.show/api/ws',
+  undefined,
+  {
+    maxReconnectionDelay: 3000,
+    minReconnectionDelay: 1000
+  }
+)
+ws.addEventListener('message', async event => {
+  try {
+    const data: RoomsWithParticipants = JSON.parse(event.detail as string)
+    rooms.value = await purifyRoomData(data)
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn('[WebSocket] Failed to parse: ', e)
+  }
+})
+ws.connect()
+
+const setSpeakerMute = (track: LocalAudioTrack, muted: boolean) => {
+  setLocalTrackMute(track, muted)
+}
+
+const setVideoMute = (track: LocalVideoTrack, muted: boolean) => {
+  setLocalTrackMute(track, muted)
+}
+
+messageMitt.on('addMessage', ({ message }) => {
+  if (!rtcSettings.isTtsEnabled.value) return
+  if (callingChannel.value !== message.channelId) return
+  if (meStore.myId.value === message.userId) return
+
+  const userDisplayName =
+    usersMap.value.get(message.userId)?.displayName ?? 'はてな'
+  addQueue({
+    channelId: message.channelId,
+    userDisplayName,
+    text: message.content
+  })
+})
+const callingChannel = ref('')
+const isSubView = ref(false)
+const getQallingState = (channelId: string) => {
+  if (!callingChannel.value) return 'none'
+  if (callingChannel.value === channelId && !isSubView.value) return 'mainView'
+  return 'subView'
+}
+
+const isCameraOn = ref(false)
+const isScreenSharing = ref(false)
+
+const selectedTrack = ref<TrackInfo>()
+
+export const useQall = () => {
+  const joinQall = (channelName: string, isWebinar: boolean = false) => {
+    if (callingChannel.value) {
+      leaveRoom()
+    }
+    if (!myId.value) {
+      addErrorToast('接続に失敗しました')
+      return
+    }
+    joinRoom(channelName, isWebinar)
+
+    callingChannel.value = channelName
+  }
+  const leaveQall = async () => {
+    callingChannel.value = ''
+    await leaveRoom()
+    isSubView.value = false
+    selectedTrack.value = undefined
+    isMicOn.value = true
+    isCameraOn.value = false
+    isScreenSharing.value = false
+  }
+  return {
+    callingChannel,
+    isSubView,
+    rooms,
+    joinQall,
+    leaveQall,
+    addScreenShareTrack,
+    addCameraTrack,
+    removeVideoTrack,
+    publishData,
+    setSpeakerMute,
+    toggleMicMute: toggleMicTrack,
+    qallFetch,
+    tracksMap,
+    screenShareTrackSidMap,
+    screenShareTracks,
+    qallMitt,
+    getQallingState,
+    getSoundboardList,
+    postSoundboard,
+    postSoundboardPlay,
+    isMicOn,
+    isCameraOn,
+    isScreenSharing,
+    selectedTrack
+  }
+}
diff --git a/src/router/settings.ts b/src/router/settings.ts
index 23eecff27a..fb2d5dc9b5 100644
--- a/src/router/settings.ts
+++ b/src/router/settings.ts
@@ -9,6 +9,7 @@ export type SettingsRouteName =
   | 'settingsQall'
   | 'settingsStamp'
   | 'settingsTheme'
+  | 'settingsAudio'
 
 export const isSettingsRouteName = (
   name: string
@@ -33,6 +34,8 @@ const pathByRouteName = (routeName: SettingsRouteName) => {
       return 'stamp'
     case 'settingsTheme':
       return 'theme'
+    case 'settingsAudio':
+      return 'audio'
   }
 }
 
@@ -42,6 +45,7 @@ const Browser = () => import('/@/views/Settings/BrowserTab.vue')
 const Qall = () => import('/@/views/Settings/QallTab.vue')
 const Stamp = () => import('/@/views/Settings/StampTab.vue')
 const Theme = () => import('/@/views/Settings/ThemeTab.vue')
+const Audio = () => import('/@/views/Settings/AudioTab.vue')
 
 const createRoute = (name: SettingsRouteName, component: Component) => ({
   name,
@@ -55,7 +59,8 @@ export const settingsRoutes: RouteRecordRaw[] = [
   createRoute('settingsBrowser', Browser),
   createRoute('settingsQall', Qall),
   createRoute('settingsStamp', Stamp),
-  createRoute('settingsTheme', Theme)
+  createRoute('settingsTheme', Theme),
+  createRoute('settingsAudio', Audio)
 ]
 
 export const defaultSettingsName: SettingsRouteName = 'settingsProfile'
diff --git a/src/store/app/rtc.ts b/src/store/app/rtc.ts
deleted file mode 100644
index 2a5302e0cd..0000000000
--- a/src/store/app/rtc.ts
+++ /dev/null
@@ -1,369 +0,0 @@
-import { defineStore, acceptHMRUpdate } from 'pinia'
-import { computed, markRaw, ref, watch } from 'vue'
-import { convertToRefsStore } from '/@/store/utils/convertToRefsStore'
-import ExtendedAudioContext from '/@/lib/webrtc/ExtendedAudioContext'
-import AudioStreamMixer from '/@/lib/webrtc/AudioStreamMixer'
-import LocalStreamManager from '/@/lib/webrtc/LocalStreamManager'
-import type { ChannelId, UserId } from '/@/types/entity-ids'
-import { getTalkingLoudnessLevel } from '/@/lib/webrtc/loudness'
-import { useRtcSettings } from '/@/store/app/rtcSettings'
-import { isIOSApp } from '/@/lib/dom/browser'
-import { client, destroyClient, initClient } from '/@/lib/webrtc/traQRTCClient'
-import type { SessionId, SessionType } from '/@/store/domain/rtc'
-import { useDomainRtcStore } from '/@/store/domain/rtc'
-import { useMeStore } from '/@/store/domain/me'
-import { getCurrentTimeString } from '/@/lib/basic/date'
-
-const defaultState = 'joined'
-const talkingStateUpdateFPS = 30
-
-/**
- * 接続中のQallの情報を持つストア
- * 接続していないものも含むQallの情報はdomain/rtc
- */
-const useAppRtcPinia = defineStore('app/rtc', () => {
-  const rtcSettings = useRtcSettings()
-  const domainRtcStore = useDomainRtcStore()
-  const meStore = useMeStore()
-
-  const audioContext = ref<ExtendedAudioContext>()
-  const mixer = ref<AudioStreamMixer>()
-  const localStreamManager = ref<LocalStreamManager>()
-
-  const setContext = (input: {
-    audioContext: ExtendedAudioContext
-    mixer: AudioStreamMixer
-    localStreamManager: LocalStreamManager
-  }) => {
-    audioContext.value = markRaw(input.audioContext)
-    mixer.value = markRaw(input.mixer)
-    localStreamManager.value = markRaw(input.localStreamManager)
-  }
-  const unsetContext = () => {
-    audioContext.value = undefined
-    mixer.value = undefined
-    localStreamManager.value = undefined
-  }
-
-  /** マイクミュート */
-  const muteLocalStream = () => {
-    if (!localStreamManager.value) return
-    localStreamManager.value.mute()
-    rtcSettings.isMute.value = true
-  }
-  const unmuteLocalStream = () => {
-    if (!localStreamManager.value) return
-    localStreamManager.value.unmute()
-    rtcSettings.isMute.value = false
-  }
-
-  /** 現在発話しているユーザーを判定するsetIntervalのID */
-  let talkingStateUpdateId = 0
-  const startTalkingStateUpdate = () => {
-    const id = window.setInterval(() => {
-      const myId = meStore.myId.value
-      const userStateDiff = new Map<UserId, number>()
-
-      domainRtcStore.currentSessionUsers.value.forEach(userId => {
-        if (userId === myId) return
-
-        const loudness = domainRtcStore.currentMutedUsers.value.has(userId)
-          ? 0
-          : getTalkingLoudnessLevel(mixer.value?.getLevelOfStream(userId) ?? 0)
-        if (talkingUsersState.value.get(userId) !== loudness) {
-          userStateDiff.set(userId, loudness)
-        }
-      })
-
-      if (localStreamManager.value && myId) {
-        const level = localStreamManager.value.getLevel()
-        const loudness = getTalkingLoudnessLevel(level)
-        if (talkingUsersState.value.get(myId) !== loudness) {
-          userStateDiff.set(myId, loudness)
-        }
-      }
-
-      userStateDiff.forEach((loudnessLevel, userId) => {
-        talkingUsersState.value.set(userId, loudnessLevel)
-      })
-    }, 1000 / talkingStateUpdateFPS)
-    talkingStateUpdateId = id
-  }
-  const stopTalkingStateUpdate = () => {
-    clearInterval(talkingStateUpdateId)
-  }
-
-  /** 現在発話してるユーザーの声の大きさのレベル */
-  const talkingUsersState = ref(new Map<UserId, number>())
-
-  const isCurrentDevice = computed(() => mixer.value !== undefined)
-
-  const setUserVolume = (userId: UserId, volume: number) => {
-    mixer.value?.setStreamVolume(userId, volume)
-  }
-  const streamVolumeMap = ref(new Map<string, number>())
-  const onStreamVolumeChange = (key: string) => {
-    if (!mixer.value) return
-    streamVolumeMap.value.set(key, mixer.value.getStreamVolume(key))
-  }
-  watch(
-    mixer,
-    (newMixer, oldMixer) => {
-      if (oldMixer) {
-        oldMixer.listener.off('streamVolumeChange', onStreamVolumeChange)
-      }
-      if (newMixer) {
-        streamVolumeMap.value = new Map()
-        newMixer.listener.on('streamVolumeChange', onStreamVolumeChange)
-      }
-    },
-    { immediate: true }
-  )
-
-  const startOrJoinRTCSession = ({
-    channelId,
-    sessionType
-  }: {
-    channelId: ChannelId
-    sessionType: SessionType
-  }) => {
-    if (
-      domainRtcStore.currentRTCState.value &&
-      domainRtcStore.currentRTCState.value.channelId !== channelId
-    ) {
-      throw `RTC session is already open for channel ${channelId}`
-    }
-
-    const sessionId = `${sessionType}-${channelId}` as const
-
-    domainRtcStore.addRTCSession(channelId, {
-      sessionId,
-      states: [defaultState]
-    })
-    return sessionId
-  }
-
-  const ensureDevicePermission = async () => {
-    if (!rtcSettings.isEnabled.value) {
-      return false
-    }
-    if (
-      isIOSApp(window) &&
-      !(await window.webkit.messageHandlers.scriptMessageHandler.postMessage(
-        'RequestMicrophone'
-      ))
-    ) {
-      window.alert('設定アプリからマイクの使用を許可してください')
-      return false
-    }
-    if (!(await rtcSettings.ensureDeviceIds())) {
-      window.alert('マイクの設定に失敗しました')
-      return false
-    }
-    return true
-  }
-
-  const initializeContext = async () => {
-    const audioContext = new ExtendedAudioContext()
-    const mixer = new AudioStreamMixer(
-      audioContext,
-      rtcSettings.masterVolume.value
-    )
-    const localStreamManager = new LocalStreamManager(audioContext, {
-      outputNode: mixer.masterVolumeGain,
-      audioInputDeviceId: rtcSettings.audioInputDeviceId.value,
-      noiseSuppression: rtcSettings.noiseSuppression.value,
-      noiseGateThreshold: rtcSettings.noiseGateThreshold.value
-    })
-
-    await Promise.all([
-      mixer.initializePromise,
-      localStreamManager.initializePromise
-    ])
-    setContext({ audioContext, mixer, localStreamManager }) // initializeが終わってからセットすること
-  }
-
-  const logRTC = (message: string) => {
-    // eslint-disable-next-line no-console
-    console.log(`[RTC] (${getCurrentTimeString()}) ${message}`)
-  }
-
-  const establishConnection = async () => {
-    const myId = meStore.myId.value
-    if (!myId) {
-      throw 'application not initialized'
-    }
-
-    client?.closeConnection()
-
-    initClient(myId)
-    client?.addEventListener('connectionerror', async e => {
-      if (e.detail.err.type === 'unavailable-id') {
-        // eslint-disable-next-line no-console
-        console.error(
-          '[RTC] Failed to establish connection: Peer Id already in use!'
-        )
-      } else {
-        // eslint-disable-next-line no-console
-        console.error('[RTC] Failed to establish connection', e.detail.err)
-      }
-      window.alert('接続に失敗しました')
-
-      closeConnection()
-      // session接続後にCredential expiredで切れる場合は退出しないといけない
-      const qallSession = domainRtcStore.qallSession.value
-      if (qallSession) {
-        domainRtcStore.removeRTCSession(qallSession.sessionId)
-      }
-    })
-    client?.addEventListener('connectionclose', () => {
-      logRTC('connection closed')
-    })
-    await client?.establishConnection()
-  }
-
-  const closeConnection = () => {
-    if (!client) {
-      return
-    }
-
-    const audioContextVal = audioContext.value
-    mixer.value?.playFileSource('qall_end').then(() => {
-      // closeConnectionなどの処理をqall_endの再生が終わるのを待っていないのは
-      // これを待つと接続解除がかなり後になるため
-      // audioContextのcloseはqall_endを待たないと音がならなくなるので、
-      // これに限って待っている
-      audioContextVal?.close()
-    })
-    stopTalkingStateUpdate()
-    localStreamManager.value?.deinitialize()
-    unsetContext()
-
-    client.closeConnection()
-    destroyClient()
-  }
-
-  const joinVoiceChannel = async (room: SessionId) => {
-    if (!client) {
-      throw new Error('client not initialized')
-    }
-
-    await initializeContext()
-    if (!mixer.value) {
-      throw new Error('mixer not initialized')
-    }
-    if (!localStreamManager.value) {
-      throw new Error('localStreamManager not initialized')
-    }
-    startTalkingStateUpdate()
-
-    client.addEventListener('userjoin', async e => {
-      const userId = e.detail.userId
-      logRTC(`User joined, ID: ${userId}`)
-      await mixer.value?.playFileSource('qall_joined')
-    })
-
-    client.addEventListener('userleave', async e => {
-      const userId = e.detail.userId
-      logRTC(`User left, ID: ${userId}`)
-
-      if (mixer.value) {
-        await mixer.value.stopAndRemoveStream(userId)
-        await mixer.value.playFileSource('qall_left')
-      }
-    })
-
-    client.addEventListener('streamchange', async e => {
-      const stream = e.detail.stream
-      const userId = stream.peerId
-      logRTC(`Recieved stream from ${userId}`)
-
-      await mixer.value?.addAndPlayStream(stream.peerId, stream)
-      setUserVolume(userId, 0.5)
-    })
-
-    if (rtcSettings.isMute.value) {
-      mute()
-    } else {
-      unmute()
-    }
-
-    client.joinRoom(room, localStreamManager.value.outputStream)
-
-    await mixer.value.playFileSource('qall_start')
-  }
-
-  watch(rtcSettings.masterVolume, newMasterVolume => {
-    mixer.value?.setMasterVolume(newMasterVolume)
-  })
-  watch(rtcSettings.audioInputDeviceId, newAudioInputDeviceId => {
-    localStreamManager.value?.setAudioInputDevice(newAudioInputDeviceId)
-  })
-  watch(rtcSettings.noiseSuppression, newNoiseSuppression => {
-    localStreamManager.value?.setNoiseSuppression(newNoiseSuppression)
-  })
-  watch(rtcSettings.noiseGateThreshold, newNoiseGateThreshold => {
-    localStreamManager.value?.setNoiseGateThreshold(newNoiseGateThreshold)
-  })
-
-  const mute = () => {
-    const qallSession = domainRtcStore.qallSession.value
-    if (!localStreamManager.value || !qallSession) {
-      return
-    }
-    muteLocalStream()
-    const statesSet = new Set(qallSession.states)
-    statesSet.add('micmuted')
-    domainRtcStore.modifyRTCSession(qallSession.sessionId, [...statesSet])
-  }
-  const unmute = () => {
-    const qallSession = domainRtcStore.qallSession.value
-    if (!localStreamManager.value || !qallSession) {
-      return
-    }
-    unmuteLocalStream()
-    const stateSet = new Set(qallSession.states)
-    stateSet.delete('micmuted')
-    domainRtcStore.modifyRTCSession(qallSession.sessionId, [...stateSet])
-  }
-
-  const startQall = async (channelId: ChannelId) => {
-    if (!(await ensureDevicePermission())) {
-      return
-    }
-
-    await establishConnection()
-    const sessionId = startOrJoinRTCSession({
-      channelId,
-      sessionType: 'qall'
-    })
-    await joinVoiceChannel(sessionId)
-  }
-  const endQall = async () => {
-    const qallSession = domainRtcStore.qallSession.value
-    if (!qallSession) {
-      throw 'something went wrong'
-    }
-
-    domainRtcStore.removeRTCSession(qallSession.sessionId)
-    closeConnection()
-  }
-
-  return {
-    isCurrentDevice,
-    isMicMuted: rtcSettings.isMute,
-    talkingUsersState,
-    startQall,
-    endQall,
-    mute,
-    unmute,
-    streamVolumeMap,
-    setUserVolume
-  }
-})
-
-export const useAppRtcStore = convertToRefsStore(useAppRtcPinia)
-
-if (import.meta.hot) {
-  import.meta.hot.accept(acceptHMRUpdate(useAppRtcPinia, import.meta.hot))
-}
diff --git a/src/store/app/tts.ts b/src/store/app/tts.ts
index ecb20e4903..f76568a5e8 100644
--- a/src/store/app/tts.ts
+++ b/src/store/app/tts.ts
@@ -1,16 +1,11 @@
 import { defineStore, acceptHMRUpdate } from 'pinia'
-import { useAppRtcStore } from '/@/store/app/rtc'
 import { useRtcSettings } from '/@/store/app/rtcSettings'
 import { convertToRefsStore } from '/@/store/utils/convertToRefsStore'
 import type { ChannelId } from '/@/types/entity-ids'
-import { messageMitt } from '/@/store/entities/messages'
 import { parse } from '/@/lib/markdown/markdown'
 import { format } from '/@/lib/tts/format'
 import { embeddingOrigin } from '/@/lib/apis'
 import { watchEffect } from 'vue'
-import { useDomainRtcStore } from '/@/store/domain/rtc'
-import { useMeStore } from '/@/store/domain/me'
-import { useUsersStore } from '../entities/users'
 
 interface Speach {
   channelId: ChannelId
@@ -24,12 +19,7 @@ const MAX_SPEED_RATIO = 2
 const MAX_CHAR_COUNT = 140
 
 const useTtsPinia = defineStore('ui/tts', () => {
-  const appRtcStore = useAppRtcStore()
-  const domainRtcStore = useDomainRtcStore()
   const rtcSettings = useRtcSettings()
-  const meStore = useMeStore()
-  const usersStore = useUsersStore()
-
   let lastSpeachPromise = Promise.resolve()
   const queue: Speach[] = []
 
@@ -41,18 +31,6 @@ const useTtsPinia = defineStore('ui/tts', () => {
     })
   }
 
-  messageMitt.on('addMessage', ({ message }) => {
-    if (meStore.myId.value === message.userId) return
-
-    const userDisplayName =
-      usersStore.usersMap.value.get(message.userId)?.displayName ?? 'はてな'
-    addQueue({
-      channelId: message.channelId,
-      userDisplayName,
-      text: message.content
-    })
-  })
-
   // タブ閉じたときには止める
   window.addEventListener('pagehide', () => {
     stop()
@@ -75,15 +53,6 @@ const useTtsPinia = defineStore('ui/tts', () => {
     return defaultRate * Math.min(Math.max(ratio, 1), MAX_SPEED_RATIO)
   }
 
-  const isNeeded = (channelId: ChannelId): boolean => {
-    if (!rtcSettings.isTtsEnabled.value) return false
-    if (!domainRtcStore.qallSession.value) return false
-    if (domainRtcStore.currentRTCState.value?.channelId !== channelId) {
-      return false
-    }
-    return appRtcStore.isCurrentDevice.value
-  }
-
   const createUtter = (text: string): SpeechSynthesisUtterance => {
     const utter = new SpeechSynthesisUtterance(text)
     const voice = speechSynthesis
@@ -99,9 +68,7 @@ const useTtsPinia = defineStore('ui/tts', () => {
     return utter
   }
 
-  const speak = async ({ channelId, userDisplayName, text }: Speach) => {
-    if (!isNeeded(channelId)) return
-
+  const speak = async ({ userDisplayName, text }: Speach) => {
     const tokens = await parse(text)
     let formatedText = format(tokens, embeddingOrigin)
 
@@ -129,18 +96,13 @@ const useTtsPinia = defineStore('ui/tts', () => {
     speechSynthesis.cancel()
   }
 
-  watchEffect(() => {
-    if (!appRtcStore.isCurrentDevice.value) {
-      stop()
-    }
-  })
   watchEffect(() => {
     if (!rtcSettings.isTtsEnabled) {
       stop()
     }
   })
 
-  return {}
+  return { addQueue }
 })
 
 export const useTts = convertToRefsStore(useTtsPinia)
diff --git a/src/store/app/userVolume.ts b/src/store/app/userVolume.ts
new file mode 100644
index 0000000000..3a0d9744c1
--- /dev/null
+++ b/src/store/app/userVolume.ts
@@ -0,0 +1,50 @@
+import { defineStore, acceptHMRUpdate } from 'pinia'
+import { toRef, unref, type Ref } from 'vue'
+import { convertToRefsStore } from '/@/store/utils/convertToRefsStore'
+import useIndexedDbValue, { key } from '/@/composables/utils/useIndexedDbValue'
+import { debounce } from 'throttle-debounce'
+import { promisifyRequest } from 'idb-keyval'
+
+const useUserVolumePinia = defineStore('store/app/userVolume', () => {
+  const initialValue = {
+    userVolumeMap: new Map<string, number>()
+  }
+
+  const [_state, restoring, restoringPromise] = useIndexedDbValue(
+    'store/app/userVolume',
+    1,
+    {
+      1: async getStore => {
+        const store = getStore()
+        const setReq = store.put(initialValue, key)
+        await promisifyRequest(setReq)
+      }
+    },
+    initialValue
+  )
+
+  const state = toRef(() => _state.userVolumeMap)
+  const getStore = (cId: string | Ref<string, string>) =>
+    state.value.get(unref(cId))
+  const setStore = (cId: string | Ref<string, string>, v: number) => {
+    // 空のときは削除、空でないときはセット
+    // コピーしないと参照が変わらないから上書きされる
+    // toRawしちゃうとreactiveで包めなくなるので、そうはしない
+    state.value.set(unref(cId), window.structuredClone(v))
+  }
+  const setUserVolume = debounce(100, (userId: string, volume: number) => {
+    setStore(userId, volume)
+  })
+  return {
+    getStore,
+    setStore,
+    setUserVolume,
+    restoringPromise
+  }
+})
+
+export const useUserVolume = convertToRefsStore(useUserVolumePinia)
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useUserVolumePinia, import.meta.hot))
+}
diff --git a/src/store/domain/rtc.ts b/src/store/domain/rtc.ts
deleted file mode 100644
index 28707b004b..0000000000
--- a/src/store/domain/rtc.ts
+++ /dev/null
@@ -1,342 +0,0 @@
-import type { WebRTCUserState } from '@traptitech/traq'
-import { defineStore, acceptHMRUpdate } from 'pinia'
-import { computed, ref } from 'vue'
-import type { WebRTCUserStateSessions } from '/@/lib/apis'
-import apis from '/@/lib/apis'
-import { createSingleflight } from '/@/lib/basic/async'
-import { formatSnakeKeysToCamelShallow } from '/@/lib/basic/record'
-import { changeRTCState, wsListener } from '/@/lib/websocket'
-import { convertToRefsStore } from '/@/store/utils/convertToRefsStore'
-import type { ChannelId, UserId } from '/@/types/entity-ids'
-import { useMeStore } from '/@/store/domain/me'
-
-export type SessionId = string
-export type SessionType = 'qall' | 'draw'
-export type SessionInfoBase = {
-  sessionId: SessionId
-  type: SessionType
-  channelId: ChannelId
-}
-export type QallSessionInfo = SessionInfoBase & { type: 'qall' }
-export type DrawSessionInfo = SessionInfoBase & { type: 'draw' }
-export type SessionInfo = QallSessionInfo | DrawSessionInfo
-
-export type UserSessionState = {
-  sessionId: SessionId
-  states: string[]
-}
-export type UserRTCState = {
-  channelId: ChannelId
-  sessionStates: UserSessionState[]
-}
-
-const toUserRTCState = (
-  userState: Readonly<WebRTCUserState>
-): UserRTCState => ({
-  channelId: userState.channelId,
-  sessionStates: userState.sessions.map(session => ({
-    sessionId: session.sessionId,
-    states: session.state.split('.')
-  }))
-})
-
-const toSessionInfo = (
-  sessionId: SessionId,
-  channelId: ChannelId
-): SessionInfo => {
-  const [sessionType, id] = sessionId.split('-')
-  if (
-    id &&
-    (sessionType === ('qall' as const) || sessionType === ('draw' as const))
-  ) {
-    return {
-      sessionId,
-      channelId,
-      type: sessionType
-    }
-  }
-  throw 'invalid session id'
-}
-
-/**
- * 現在のチャンネルセッションと、新規に追加するユーザー状態が整合性をもつか
- */
-const isSessionCompatible = (
-  channelSessionsMap: ReadonlyMap<ChannelId, ReadonlySet<SessionId>>,
-  userSessionState: Readonly<UserRTCState>
-) => {
-  // チャンネルにセッションが立っていないか、既存セッションの部分集合か
-  const currentSessions = channelSessionsMap.get(userSessionState.channelId)
-  if (!currentSessions) return true
-
-  const sessionInfoSet = new Set<SessionId>([
-    ...currentSessions,
-    ...userSessionState.sessionStates.map(s => s.sessionId)
-  ])
-  return sessionInfoSet.size <= currentSessions.size
-}
-
-const getWebRTCState = createSingleflight(apis.getWebRTCState.bind(apis))
-
-/**
- * サーバーに状態を送信する
- */
-const postRTCState = (state: Readonly<UserRTCState> | null) => {
-  if (!state) {
-    changeRTCState(null, [])
-    return
-  }
-  const userStateSessions: WebRTCUserStateSessions[] = state.sessionStates.map(
-    s => ({
-      state: s.states.join('.'),
-      sessionId: s.sessionId
-    })
-  )
-  changeRTCState(state.channelId, userStateSessions)
-}
-
-/**
- * traQサーバーでのRTC状態を扱うstore
- */
-const useDomainRtcStorePinia = defineStore('domain/rtc', () => {
-  const meStore = useMeStore()
-
-  /** 一度でも取得が完了したかどうか */
-  const rtcStateFetched = ref(false)
-  /** ユーザーのRTC状態のマップ */
-  const userStateMap = ref(new Map<UserId, UserRTCState>())
-  /** チャンネルIDと立っているセッションIDのマップ */
-  const channelSessionsMap = ref(new Map<ChannelId, Set<SessionId>>())
-  /** セッションIDとセッションの状態のマップ */
-  const sessionInfoMap = ref(new Map<SessionId, SessionInfo>())
-  /** セッションIDとセッションの状態のマップ */
-  const sessionUsersMap = ref(new Map<SessionId, Set<UserId>>())
-
-  const getChannelRTCSessionId = (
-    sessionType: SessionType,
-    channelId: ChannelId
-  ) => {
-    const sessionIds = channelSessionsMap.value.get(channelId)
-    if (!sessionIds) return
-    return [...sessionIds].find(
-      sessionId => sessionInfoMap.value.get(sessionId)?.type === sessionType
-    )
-  }
-  const currentRTCState = computed(() =>
-    userStateMap.value.get(meStore.myId.value ?? '')
-  )
-  const qallSession = computed(() =>
-    currentRTCState.value?.sessionStates.find(
-      s => sessionInfoMap.value.get(s.sessionId)?.type === 'qall'
-    )
-  )
-  const currentSessionUsers = computed((): Set<UserId> => {
-    if (!qallSession.value) return new Set()
-    return sessionUsersMap.value.get(qallSession.value.sessionId) ?? new Set()
-  })
-  const currentMutedUsers = computed((): Set<UserId> => {
-    const session = qallSession.value
-    if (!session) return new Set()
-
-    const mutedUsers = new Set<UserId>()
-    userStateMap.value.forEach((userState, userId) => {
-      const isMuted = userState.sessionStates.some(
-        s => s.sessionId === session.sessionId && s.states.includes('micmuted')
-      )
-      if (isMuted) {
-        mutedUsers.add(userId)
-      }
-    })
-    return mutedUsers
-  })
-
-  const setRTCState = (payload: readonly WebRTCUserState[]) => {
-    const userStateMapVal = new Map<UserId, UserRTCState>()
-    const channelSessionsMapVal = new Map<ChannelId, Set<SessionId>>()
-    const sessionInfoMapVal = new Map<SessionId, SessionInfo>()
-    const sessionUsersMapVal = new Map<SessionId, Set<UserId>>()
-
-    payload.forEach(rtcState => {
-      const userSessionState = toUserRTCState(rtcState)
-      if (!isSessionCompatible(channelSessionsMapVal, userSessionState)) {
-        throw 'channel session conflict'
-      }
-
-      userStateMapVal.set(rtcState.userId, userSessionState)
-      channelSessionsMapVal.set(
-        rtcState.channelId,
-        new Set(userSessionState.sessionStates.map(s => s.sessionId))
-      )
-      userSessionState.sessionStates.forEach(s => {
-        if (sessionInfoMapVal.has(s.sessionId)) {
-          sessionUsersMapVal.get(s.sessionId)?.add(rtcState.userId)
-        } else {
-          const newSessionInfo = toSessionInfo(s.sessionId, rtcState.channelId)
-          sessionInfoMapVal.set(s.sessionId, newSessionInfo)
-          sessionUsersMapVal.set(s.sessionId, new Set([rtcState.userId]))
-        }
-      })
-    })
-
-    userStateMap.value = userStateMapVal
-    channelSessionsMap.value = channelSessionsMapVal
-    sessionInfoMap.value = sessionInfoMapVal
-    sessionUsersMap.value = sessionUsersMapVal
-  }
-
-  /** サーバーの情報をローカルに反映する */
-  const updateRTCState = (payload: Readonly<WebRTCUserState>) => {
-    const userSessionState = toUserRTCState(payload)
-    if (!isSessionCompatible(channelSessionsMap.value, userSessionState)) {
-      throw 'channel session conflict'
-    }
-
-    const currentSessionIds =
-      userStateMap.value
-        .get(payload.userId)
-        ?.sessionStates?.map(s => s.sessionId) ?? []
-    const newSessionIds = userSessionState.sessionStates.map(s => s.sessionId)
-    const removedSessionIds = currentSessionIds.filter(
-      id => !newSessionIds.includes(id)
-    )
-    const addedSessionIds = newSessionIds.filter(
-      id => !currentSessionIds.includes(id)
-    )
-    if (userSessionState.sessionStates.length === 0) {
-      userStateMap.value.delete(payload.userId)
-    } else {
-      userStateMap.value.set(payload.userId, userSessionState)
-    }
-
-    addedSessionIds.forEach(sessionId => {
-      if (sessionInfoMap.value.has(sessionId)) {
-        sessionUsersMap.value.get(sessionId)?.add(payload.userId)
-      } else {
-        const newSessionInfo = toSessionInfo(sessionId, payload.channelId)
-        const newChannelSessions =
-          channelSessionsMap.value.get(payload.channelId) ?? new Set()
-        newChannelSessions.add(sessionId)
-        channelSessionsMap.value.set(payload.channelId, newChannelSessions)
-        sessionInfoMap.value.set(sessionId, newSessionInfo)
-        sessionUsersMap.value.set(sessionId, new Set([payload.userId]))
-      }
-    })
-
-    removedSessionIds.forEach(sessionId => {
-      const deleted = sessionUsersMap.value
-        .get(sessionId)
-        ?.delete(payload.userId)
-      if (!deleted) {
-        throw 'something went wrong'
-      }
-      // セッションの最後の一人が消えた
-      const isLastUserforSession =
-        (sessionUsersMap.value.get(sessionId)?.size ?? 0) === 0
-      if (isLastUserforSession) {
-        const channelId = sessionInfoMap.value.get(sessionId)?.channelId ?? ''
-        const sessionIds = channelSessionsMap.value.get(channelId)
-        if (!sessionIds) return
-        sessionIds.delete(sessionId)
-        sessionInfoMap.value.delete(sessionId)
-        if (sessionIds.size === 0) {
-          channelSessionsMap.value.delete(channelId)
-        }
-      }
-    })
-  }
-
-  const fetchRTCState = async ({
-    ignoreCache = false
-  }: { ignoreCache?: boolean } = {}) => {
-    if (!ignoreCache && rtcStateFetched.value) {
-      return
-    }
-
-    const [{ data: webRTCStates }, shared] = await getWebRTCState()
-    if (!shared) {
-      setRTCState(webRTCStates)
-      rtcStateFetched.value = true
-    }
-  }
-
-  /** サーバーに状態を追加するリクエストを送信する */
-  const addRTCSession = (channelId: ChannelId, state: UserSessionState) => {
-    const currentState = currentRTCState.value ?? {
-      channelId,
-      sessionStates: []
-    }
-
-    postRTCState({
-      channelId: currentState.channelId,
-      sessionStates: [...currentState.sessionStates, state]
-    })
-  }
-
-  /** サーバーに状態を削除するリクエストを送信する */
-  const removeRTCSession = (sessionId: SessionId) => {
-    const currentState = currentRTCState.value
-    if (!currentState) return
-
-    const sessionStates = currentState.sessionStates.filter(
-      s => s.sessionId !== sessionId
-    )
-
-    if (sessionStates.length === 0) {
-      postRTCState(null)
-    } else {
-      postRTCState({
-        channelId: currentState.channelId,
-        sessionStates: sessionStates
-      })
-    }
-  }
-
-  /** サーバーに状態を変更するリクエストを送信する */
-  const modifyRTCSession = (sessionId: SessionId, states: string[]) => {
-    const currentState = currentRTCState.value
-    if (!currentState) return
-
-    const index = currentState.sessionStates.findIndex(
-      s => s.sessionId === sessionId
-    )
-    if (index < 0) return
-    const newSessionStates = [...currentState.sessionStates]
-    newSessionStates[index] = { sessionId, states }
-
-    postRTCState({
-      channelId: currentState.channelId,
-      sessionStates: newSessionStates
-    })
-  }
-
-  wsListener.on('USER_WEBRTC_STATE_CHANGED', dataSnake => {
-    const data = formatSnakeKeysToCamelShallow(dataSnake) as WebRTCUserState
-    updateRTCState(data)
-  })
-  wsListener.on('reconnect', () => {
-    fetchRTCState({ ignoreCache: true })
-  })
-
-  return {
-    userStateMap,
-    channelSessionsMap,
-    sessionInfoMap,
-    qallSession,
-    currentRTCState,
-    currentSessionUsers,
-    currentMutedUsers,
-    fetchRTCState,
-    getChannelRTCSessionId,
-    addRTCSession,
-    removeRTCSession,
-    modifyRTCSession
-  }
-})
-
-export const useDomainRtcStore = convertToRefsStore(useDomainRtcStorePinia)
-
-if (import.meta.hot) {
-  import.meta.hot.accept(
-    acceptHMRUpdate(useDomainRtcStorePinia, import.meta.hot)
-  )
-}
diff --git a/src/store/ui/stampPicker.ts b/src/store/ui/stampPicker.ts
index 13c6845235..5fdb601913 100644
--- a/src/store/ui/stampPicker.ts
+++ b/src/store/ui/stampPicker.ts
@@ -17,20 +17,24 @@ export type StampSelectHandler = (stamp: SelectedStampData) => void
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 export const defaultSelectHandler = (_: SelectedStampData) => {}
 
-export type AlignmentPosition = `top-${'left' | 'right'}` | 'bottom-right'
+export type AlignmentPosition = `${'top' | 'bottom'}-${'left' | 'right'}`
 
 const MARGIN_BETWEEN = 4
 const getBottomLeftPosition = (rect: DOMRect) => ({
   x: rect.left,
   y: rect.bottom + MARGIN_BETWEEN
 })
+const getBottomRightPosition = (rect: DOMRect) => ({
+  x: rect.right,
+  y: rect.bottom + MARGIN_BETWEEN
+})
 const getTopRightPosition = (rect: DOMRect) => ({
   x: rect.right,
   y: rect.top - MARGIN_BETWEEN
 })
-const getBottomRightPosition = (rect: DOMRect) => ({
-  x: rect.right,
-  y: rect.bottom + MARGIN_BETWEEN
+const getTopLeftPosition = (rect: DOMRect) => ({
+  x: rect.left,
+  y: rect.top - MARGIN_BETWEEN
 })
 
 const getPositionFromAlignment = (
@@ -46,6 +50,8 @@ const getPositionFromAlignment = (
       return getBottomRightPosition(rect)
     case 'bottom-right':
       return getTopRightPosition(rect)
+    case 'bottom-left':
+      return getTopLeftPosition(rect)
   }
 }
 
@@ -88,7 +94,7 @@ export const useStampPicker = convertToRefsStore(useStampPickerPinia)
  */
 export const useStampPickerInvoker = (
   newSelectHandler: StampSelectHandler,
-  element: Ref<HTMLElement | undefined>,
+  element: Ref<HTMLElement | undefined | null>,
   argIsEffectEnabled: boolean,
   newAlignment: AlignmentPosition = 'top-right'
 ) => {
diff --git a/src/views/Settings/AudioTab.vue b/src/views/Settings/AudioTab.vue
new file mode 100644
index 0000000000..c2594671ff
--- /dev/null
+++ b/src/views/Settings/AudioTab.vue
@@ -0,0 +1,226 @@
+<template>
+  <div :class="$style.container">
+    <h2>音声ファイル管理</h2>
+
+    <div :class="$style.content">
+      <div :class="$style.fileSection">
+        <input
+          ref="fileInput"
+          type="file"
+          accept="audio/*"
+          style="display: none"
+          @change="handleFileSelect"
+        />
+
+        <form-button
+          label="音声ファイルを選択"
+          type="secondary"
+          icon="plus"
+          mdi
+          @click="openFileDialog"
+        />
+      </div>
+      <div v-if="selectedFile" :class="$style.fileInfo">
+        <p>選択されたファイル: {{ selectedFile.name }}</p>
+        <div :class="$style.nameInput">
+          <label for="audioName">ファイル名: </label>
+          <input
+            id="audioName"
+            v-model="audioName"
+            type="text"
+            placeholder="音声ファイルの名前を入力"
+            required
+          />
+        </div>
+        <AStamp v-if="stampId" :stamp-id="stampId" :size="32" />
+        <div ref="stampPickerButton">
+          <form-button
+            label="アイコンスタンプを選択"
+            type="secondary"
+            icon="plus"
+            mdi
+            @click="toggleStampPicker"
+          />
+        </div>
+        <form-button
+          label="アップロード"
+          type="primary"
+          :disabled="!audioName"
+          @click="handleUpload"
+        />
+      </div>
+    </div>
+
+    <!-- サウンド一覧の表示 -->
+    <div v-if="soundboardList.length" :class="$style.listSection">
+      <h3>登録されている音声一覧</h3>
+      <ul>
+        <li
+          v-for="item in soundboardList"
+          :key="item.soundId"
+          :class="$style.soundItem"
+        >
+          <!-- 音声の名前表示 -->
+          <span>{{ item.soundName }}</span>
+          <!-- Stampアイコンなど表示したければ、stampIdとcreatorId等も表示 -->
+          <AStamp v-if="item.stampId" :stamp-id="item.stampId" :size="20" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, useTemplateRef } from 'vue'
+import FormButton from '/@/components/UI/FormButton.vue'
+import { useStampPickerInvoker } from '/@/store/ui/stampPicker'
+import AStamp from '/@/components/UI/AStamp.vue'
+
+// UI imports
+import { useToastStore } from '/@/store/ui/toast'
+
+// Qall関連のcomposableを利用
+import { useQall, type SoundboardItem } from '/@/composables/qall/useQall'
+
+// ◆ Qallの通信インターフェイスを取得
+const { getSoundboardList, postSoundboard, postSoundboardPlay } = useQall()
+
+// UI・状態
+const fileInput = ref<HTMLInputElement | null>(null)
+const selectedFile = ref<File | null>(null)
+const audioName = ref('')
+
+// StampPicker関連
+const stampId = ref('')
+const stampPickerButton = useTemplateRef<HTMLButtonElement>('stampPickerButton')
+const { toggleStampPicker } = useStampPickerInvoker(
+  async stampData => {
+    stampId.value = stampData.id
+  },
+  stampPickerButton,
+  false,
+  'bottom-left'
+)
+const soundboardList = ref<SoundboardItem[]>([])
+
+// エラーメッセージなどUI表示
+const { addErrorToast, addSuccessToast } = useToastStore()
+
+/**
+ * ファイル選択ダイアログを開く
+ */
+const openFileDialog = () => {
+  fileInput.value?.click()
+}
+
+/**
+ * 選択されたファイルをstateに保存
+ */
+const handleFileSelect = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (!file) return
+
+  selectedFile.value = file
+  audioName.value = file.name.replace(/\.[^/.]+$/, '')
+}
+
+/**
+ * アップロードボタン押下時
+ */
+const handleUpload = async () => {
+  if (!selectedFile.value) {
+    addErrorToast('音声ファイルが指定されていません')
+    return
+  }
+  if (!audioName.value) {
+    addErrorToast('音声名が指定されていません')
+    return
+  }
+  if (!stampId.value) {
+    addErrorToast('スタンプIDが指定されていません')
+    return
+  }
+
+  try {
+    await postSoundboard(selectedFile.value, audioName.value, stampId.value) // 必須フィールドを送信
+    addSuccessToast('アップロードが完了しました')
+    await loadSoundboardList() // サウンド一覧を再取得
+    resetUploadForm() // フォームリセット
+  } catch (e) {
+    addErrorToast(`アップロードに失敗しました: ${String(e)}`)
+  }
+}
+
+const resetUploadForm = () => {
+  selectedFile.value = null
+  audioName.value = ''
+  stampId.value = ''
+  if (fileInput.value) {
+    fileInput.value.value = ''
+  }
+}
+
+/**
+ * サウンド一覧を読み込み
+ */
+const loadSoundboardList = async () => {
+  try {
+    const list = await getSoundboardList()
+    soundboardList.value = list
+  } catch (e) {
+    addErrorToast(`サウンド一覧の取得に失敗しました: ${String(e)}`)
+  }
+}
+
+onMounted(() => {
+  loadSoundboardList()
+})
+</script>
+
+<style lang="scss" module>
+.container {
+  padding: 16px;
+}
+.content {
+  margin-top: 16px;
+}
+.fileSection {
+  margin-bottom: 16px;
+}
+.fileInfo {
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.nameInput {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  input {
+    padding: 4px 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    width: 300px;
+  }
+}
+
+/* 音声一覧 */
+.listSection {
+  margin-top: 16px;
+  margin-bottom: 24px;
+
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+}
+.soundItem {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+</style>
diff --git a/src/views/Settings/QallTab.vue b/src/views/Settings/QallTab.vue
index 0311dfd10e..d813884a5a 100644
--- a/src/views/Settings/QallTab.vue
+++ b/src/views/Settings/QallTab.vue
@@ -68,6 +68,17 @@
           <p v-else>デバイスが取得できませんでした。</p>
         </div>
       </section>
+      <section :class="$style.element">
+        <h3 :class="$style.heading">出力デバイス</h3>
+        <div>
+          <form-selector
+            v-if="!fetchFailed && audioOutputDevices.length"
+            v-model="state.audioOutputDeviceId"
+            :options="audioOutputDeviceOptions"
+          />
+          <p v-else>デバイスが取得できませんでした。</p>
+        </div>
+      </section>
       <section :class="$style.element">
         <h3 :class="$style.heading">マスターボリューム</h3>
         <form-range-with-value
@@ -199,7 +210,7 @@ const formatMasterVolume = (v: number) =>
 
 const formatNoiseGateThreshold = (v: number) => `${v}dB`
 
-const { fetchFailed, audioInputDevices } = useDevicesInfo()
+const { fetchFailed, audioInputDevices, audioOutputDevices } = useDevicesInfo()
 
 const audioInputDeviceOptions = computed(() =>
   audioInputDevices.value.map(d => ({
@@ -208,6 +219,13 @@ const audioInputDeviceOptions = computed(() =>
   }))
 )
 
+const audioOutputDeviceOptions = computed(() =>
+  audioOutputDevices.value.map(d => ({
+    key: d.label,
+    value: d.deviceId
+  }))
+)
+
 const voiceOptions = useVoices()
 </script>
 
diff --git a/src/views/SettingsPage.vue b/src/views/SettingsPage.vue
index 1a59b959e4..9224b9f553 100644
--- a/src/views/SettingsPage.vue
+++ b/src/views/SettingsPage.vue
@@ -6,6 +6,7 @@
     <desktop-setting-modal v-else>
       <router-view />
     </desktop-setting-modal>
+    <StampPickerContainer />
   </div>
   <div v-else></div>
 </template>
@@ -18,6 +19,7 @@ import { RouteName } from '/@/router'
 import { defaultSettingsName } from '/@/router/settings'
 import { useResponsiveStore } from '/@/store/ui/responsive'
 import useLoginCheck from './composables/useLoginCheck'
+import StampPickerContainer from '../components/Main/StampPicker/StampPickerContainer.vue'
 
 const useSettingsRootPathWatcher = (
   isMobile: Ref<boolean>,
diff --git a/src/views/composables/useInitialFetch.ts b/src/views/composables/useInitialFetch.ts
index 48f8f851f2..7749cfc946 100644
--- a/src/views/composables/useInitialFetch.ts
+++ b/src/views/composables/useInitialFetch.ts
@@ -1,6 +1,5 @@
 import { ref } from 'vue'
 import useLoginCheck from './useLoginCheck'
-import { useDomainRtcStore } from '/@/store/domain/rtc'
 import { useUsersStore } from '/@/store/entities/users'
 import { useGroupsStore } from '/@/store/entities/groups'
 import { useChannelsStore } from '/@/store/entities/channels'
@@ -12,6 +11,8 @@ import { useStaredChannels } from '/@/store/domain/staredChannels'
 import { useViewStatesStore } from '/@/store/domain/viewStates'
 import { useSubscriptionStore } from '/@/store/domain/subscription'
 
+// TODO: Qall
+
 const useInitialFetch_ = () => {
   const { fetchUsers } = useUsersStore()
   const { fetchUserGroups } = useGroupsStore()
@@ -23,7 +24,6 @@ const useInitialFetch_ = () => {
   const { fetchViewStates } = useViewStatesStore()
   const { fetchStampHistory } = useStampHistory()
   const { fetchStaredChannels } = useStaredChannels()
-  const { fetchRTCState } = useDomainRtcStore()
   return () => {
     // 初回fetch
     fetchUsers()
@@ -40,7 +40,6 @@ const useInitialFetch_ = () => {
 
     fetchStaredChannels()
     fetchClipFolders()
-    fetchRTCState()
   }
 }