diff --git a/package-lock.json b/package-lock.json
index 3ad55dc1a1..e8f88783d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@shiguredo/virtual-background": "^2023.2.0",
         "@traptitech/traq": "^3.26.1-1",
         "@traptitech/traq-markdown-it": "^7.0.2",
+        "@vueuse/core": "^14.1.0",
         "autosize": "^6.0.1",
         "browser-image-compression": "^2.0.2",
         "cropperjs": "^1.6.2",
@@ -4806,6 +4807,12 @@
         "csstype": "^3.1.0"
       }
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
     "node_modules/@types/webappsec-credential-management": {
       "version": "0.6.9",
       "resolved": "https://registry.npmjs.org/@types/webappsec-credential-management/-/webappsec-credential-management-0.6.9.tgz",
@@ -5569,6 +5576,44 @@
         "vue-component-type-helpers": "^2.0.0"
       }
     },
+    "node_modules/@vueuse/core": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.1.0.tgz",
+      "integrity": "sha512-rgBinKs07hAYyPF834mDTigH7BtPqvZ3Pryuzt1SD/lg5wEcWqvwzXXYGEDb2/cP0Sj5zSvHl3WkmMELr5kfWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.1.0",
+        "@vueuse/shared": "14.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.1.0.tgz",
+      "integrity": "sha512-7hK4g015rWn2PhKcZ99NyT+ZD9sbwm7SGvp7k+k+rKGWnLjS/oQozoIZzWfCewSUeBmnJkIb+CNr7Zc/EyRnnA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.1.0.tgz",
+      "integrity": "sha512-EcKxtYvn6gx1F8z9J5/rsg3+lTQnvOruQd8fUecW99DCK04BkWD7z5KQ/wTAx+DazyoEE9dJt/zV8OIEQbM6kw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/@xmldom/xmldom": {
       "version": "0.8.10",
       "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
diff --git a/package.json b/package.json
index 2f2883344a..781782293e 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "@shiguredo/virtual-background": "^2023.2.0",
     "@traptitech/traq": "^3.26.1-1",
     "@traptitech/traq-markdown-it": "^7.0.2",
+    "@vueuse/core": "^14.1.0",
     "autosize": "^6.0.1",
     "browser-image-compression": "^2.0.2",
     "cropperjs": "^1.6.2",
diff --git a/src/App.vue b/src/App.vue
index ecb81852e3..e73a240deb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,23 +18,17 @@ import { computed, watch, watchEffect } from 'vue'
 import useDocumentTitle from '/@/composables/document/useDocumentTitle'
 import useHtmlDataset from '/@/composables/document/useHtmlDataset'
 import { useThemeVariables } from '/@/composables/document/useThemeVariables'
+import { useBeforeUnload } from '/@/composables/dom/useBeforeUnload'
+import useResponsive from '/@/composables/useResponsive'
 import { useBrowserSettings } from '/@/store/app/browserSettings'
 import { useThemeSettings } from '/@/store/app/themeSettings'
 import { useTts } from '/@/store/app/tts'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 
 const useQallConfirmer = () => {
-  window.addEventListener('beforeunload', event => {
-    // TODO: Qall
-    // ここは適切な変数を置く
-    const isCurrentDevice = computed(() => false)
-    if (isCurrentDevice.value) {
-      const unloadMessage = 'Qall中ですが本当に終了しますか？'
-      event.preventDefault()
-      event.returnValue = unloadMessage
-      return unloadMessage
-    }
-  })
+  //TODO: 適切な変数にする
+  const isCurrentDevice = computed(() => false)
+
+  useBeforeUnload(isCurrentDevice, 'Qall中ですが本当に終了しますか？')
 }
 
 const useThemeObserver = () => {
@@ -106,7 +100,7 @@ watch(
 
 useTts()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 useDocumentTitle()
 useQallConfirmer()
diff --git a/src/components/Main/CommandPalette/CommandPalette.vue b/src/components/Main/CommandPalette/CommandPalette.vue
index 6df755340d..15faac6c8f 100644
--- a/src/components/Main/CommandPalette/CommandPalette.vue
+++ b/src/components/Main/CommandPalette/CommandPalette.vue
@@ -19,14 +19,14 @@
 import { computed } from 'vue'
 
 import ClickOutside from '/@/components/UI/ClickOutside'
+import useResponsive from '/@/composables/useResponsive'
 import { useCommandPalette } from '/@/store/app/commandPalette'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 
 import CommandPaletteInput from './CommandPaletteInput.vue'
 import SearchResult from './SearchResult.vue'
 import SearchSuggestion from './SearchSuggestion.vue'
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const { mode, query, closeCommandPalette } = useCommandPalette()
 
 type SupplementalViewType = 'search-result' | 'search-suggestion' | undefined
diff --git a/src/components/Main/CommandPalette/CommandPaletteInput.vue b/src/components/Main/CommandPalette/CommandPaletteInput.vue
index f136cf966c..f3ec324b17 100644
--- a/src/components/Main/CommandPalette/CommandPaletteInput.vue
+++ b/src/components/Main/CommandPalette/CommandPaletteInput.vue
@@ -28,10 +28,10 @@ import { computed, onMounted, shallowRef, watch } from 'vue'
 
 import AIcon from '/@/components/UI/AIcon.vue'
 import CloseButton from '/@/components/UI/CloseButton.vue'
+import useResponsive from '/@/composables/useResponsive'
 import { useCommandPalette } from '/@/store/app/commandPalette'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const inputRef = shallowRef<HTMLInputElement | null>(null)
 const focus = () => {
   inputRef.value?.focus()
diff --git a/src/components/Main/CommandPalette/SearchSuggestion.vue b/src/components/Main/CommandPalette/SearchSuggestion.vue
index 61dee49063..1a0ba6a58e 100644
--- a/src/components/Main/CommandPalette/SearchSuggestion.vue
+++ b/src/components/Main/CommandPalette/SearchSuggestion.vue
@@ -30,8 +30,8 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
+import useResponsive from '/@/composables/useResponsive'
 import { useCommandPalette } from '/@/store/app/commandPalette'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 
 import SearchSuggestionHistoryItem from './SearchSuggestionHistoryItem.vue'
 import type { SuggestionItem } from './SearchSuggestionItem.vue'
@@ -42,7 +42,7 @@ const emit = defineEmits<{
   (e: 'queryInsert'): void
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const querySuggestions = computed(() => [
   {
diff --git a/src/components/Main/CommandPalette/SearchSuggestionQueryItem.vue b/src/components/Main/CommandPalette/SearchSuggestionQueryItem.vue
index 078f521f4c..f155123885 100644
--- a/src/components/Main/CommandPalette/SearchSuggestionQueryItem.vue
+++ b/src/components/Main/CommandPalette/SearchSuggestionQueryItem.vue
@@ -14,14 +14,14 @@
 </template>
 
 <script lang="ts" setup>
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
 defineProps<{
   description: string
   example: string
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const emit = defineEmits<{
   (e: 'select'): void
diff --git a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderChannelName.vue b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderChannelName.vue
index 1f43766cf8..f083f96f29 100644
--- a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderChannelName.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderChannelName.vue
@@ -26,15 +26,15 @@
 import { computed } from 'vue'
 
 import useChannelPath from '/@/composables/useChannelPath'
+import useResponsive from '/@/composables/useResponsive'
 import { constructChannelPath } from '/@/router'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 import type { ChannelId } from '/@/types/entity-ids'
 
 const props = defineProps<{
   channelId: ChannelId
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const { channelIdToPath } = useChannelPath()
 
diff --git a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderRelationButton.vue b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderRelationButton.vue
index 73b27f13c8..f5513e05c7 100644
--- a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderRelationButton.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderRelationButton.vue
@@ -12,7 +12,7 @@
     <AIcon :size="20" name="rounded-triangle" :class="$style.icon" />
   </button>
   <!-- NOTE: ボタンから Tab 移動した際に popup のはじめに飛べるように Focus を管理する -->
-  <div v-if="isOpen" ref="focusPopupRef" tabindex="0" @focus="focusPopup" />
+  <div v-if="isOpen" tabindex="0" @focus="focusPopup" />
   <ChannelHeaderRelationPopup
     v-if="isOpen"
     ref="popup"
@@ -25,8 +25,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
-import { reactive } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
+
+import { useEventListener } from '@vueuse/core'
 
 import AIcon from '/@/components/UI/AIcon.vue'
 import type { Point } from '/@/lib/basic/point'
@@ -39,7 +40,6 @@ const props = defineProps<{
 }>()
 
 const trigger = ref<HTMLElement | null>(null)
-const focusPopupRef = ref<HTMLElement | null>(null)
 const popup = ref<InstanceType<typeof ChannelHeaderRelationPopup> | null>(null)
 
 const popupId = randomString()
@@ -70,12 +70,15 @@ const updateTriggerPosition = () => {
   triggerBottomRightPosition.y = rect.bottom
 }
 
+useEventListener(
+  computed(() => (isOpen.value ? window : null)),
+  'resize',
+  updateTriggerPosition
+)
+useEventListener(window, 'resize', updateTriggerPosition)
+
 onMounted(() => {
   updateTriggerPosition()
-  window.addEventListener('resize', updateTriggerPosition)
-})
-onUnmounted(() => {
-  window.removeEventListener('resize', updateTriggerPosition)
 })
 
 const focusPopup = () => {
diff --git a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsList.vue b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsList.vue
index 047b21c2e0..0fd6da1f8a 100644
--- a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsList.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsList.vue
@@ -56,7 +56,7 @@ import { computed, toRef } from 'vue'
 import HeaderToolsItem from '/@/components/Main/MainView/PrimaryViewHeader/PrimaryViewHeaderToolsItem.vue'
 import { useQall } from '/@/composables/qall/useQall'
 import useChannelSubscriptionState from '/@/composables/subscription/useChannelSubscriptionState'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 import type { ChannelId } from '/@/types/entity-ids'
 
 import useStarChannel from './composables/useStarChannel'
@@ -79,7 +79,7 @@ const emit = defineEmits<{
   (e: 'clickMore'): void
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const { joinQall, callingChannel } = useQall()
 const isCallingHere = computed(() => callingChannel.value === props.channelId)
diff --git a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsMenu.vue b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsMenu.vue
index 5b8001c846..9703d28c28 100644
--- a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsMenu.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsMenu.vue
@@ -66,9 +66,9 @@ import { computed } from 'vue'
 import PrimaryViewHeaderPopupFrame from '/@/components/Main/MainView/PrimaryViewHeader/PrimaryViewHeaderPopupFrame.vue'
 import HeaderToolsMenuItem from '/@/components/Main/MainView/PrimaryViewHeader/PrimaryViewHeaderPopupMenuItem.vue'
 import { useQall } from '/@/composables/qall/useQall'
+import useResponsive from '/@/composables/useResponsive'
 import { useCommandPalette } from '/@/store/app/commandPalette'
 import { useMeStore } from '/@/store/domain/me'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 import type { ChannelId } from '/@/types/entity-ids'
 
 import useChannelCreateModal from './composables/useChannelCreateModal'
@@ -92,7 +92,7 @@ const props = withDefaults(
   }
 )
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const { joinQall, callingChannel } = useQall()
 const isCallingHere = computed(() => callingChannel.value === props.channelId)
diff --git a/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue b/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue
index ca07d4609f..87d3508a33 100644
--- a/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue
@@ -2,7 +2,7 @@
   <div :class="$style.container">
     <ScrollLoadingBar :class="$style.loadingBar" :show="isLoading" />
     <MessagesScroller
-      ref="scrollerEle"
+      ref="scrollerRef"
       :message-ids="messageIds"
       :is-reached-end="isReachedEnd"
       :is-reached-latest="isReachedLatest"
@@ -53,11 +53,14 @@ import { useRouter } from 'vue-router'
 
 import MessageElement from '/@/components/Main/MainView/MessageElement/MessageElement.vue'
 import MessageInput from '/@/components/Main/MainView/MessageInput/MessageInput.vue'
-import MessagesScroller from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
+import MessagesScroller, {
+  type MessageScrollerInstance
+} from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
 import MessagesScrollerSeparator from '/@/components/Main/MainView/MessagesScroller/MessagesScrollerSeparator.vue'
 import ScrollLoadingBar from '/@/components/Main/MainView/ScrollLoadingBar.vue'
 import useChannelPath from '/@/composables/useChannelPath'
 import { getFullDayString } from '/@/lib/basic/date'
+import { unrefElement } from '/@/lib/dom/unrefElement'
 import { constructChannelPath, constructUserPath } from '/@/router'
 import { useSubscriptionStore } from '/@/store/domain/subscription'
 import { useChannelsStore } from '/@/store/entities/channels'
@@ -76,7 +79,7 @@ const props = defineProps<{
 
 const router = useRouter()
 
-const scrollerEle = shallowRef<{ $el: HTMLDivElement } | undefined>()
+const scrollerRef = shallowRef<MessageScrollerInstance>()
 const {
   messageIds,
   isReachedEnd,
@@ -86,7 +89,7 @@ const {
   unreadSince,
   onLoadFormerMessagesRequest,
   onLoadLatterMessagesRequest
-} = useChannelMessageFetcher(scrollerEle, props)
+} = useChannelMessageFetcher(scrollerRef, props)
 
 const { messagesMap } = useMessagesStore()
 const firstUnreadMessageId = computed(() => {
@@ -134,15 +137,18 @@ const toNewMessage = () => {
     }
   }
 
-  if (scrollerEle.value === undefined) return
-  scrollerEle.value.$el.scrollTo({
-    top: scrollerEle.value.$el.scrollHeight
+  const element = unrefElement(scrollerRef)
+  if (!element) return
+
+  element.scrollTo({
+    top: element.scrollHeight
   })
 }
 
 const handleScroll = () => {
-  if (scrollerEle.value === undefined || isLoading.value) return
-  const { scrollTop, scrollHeight, clientHeight } = scrollerEle.value.$el
+  const element = unrefElement(scrollerRef)
+  if (!element || isLoading.value) return
+  const { scrollTop, scrollHeight, clientHeight } = element
   showToNewMessageButton.value = scrollHeight - 2 * clientHeight > scrollTop
   if (!isReachedLatest.value) {
     showToNewMessageButton.value = true
diff --git a/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelMessageFetcher.ts b/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelMessageFetcher.ts
index 191feae03e..1e8dd3c1fd 100644
--- a/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelMessageFetcher.ts
+++ b/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelMessageFetcher.ts
@@ -1,8 +1,9 @@
 import type { Message } from '@traptitech/traq'
 
-import type { Ref } from 'vue'
+import type { Ref, ShallowRef } from 'vue'
 import { computed, onActivated, onMounted, ref, watch } from 'vue'
 
+import type { MessageScrollerInstance } from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
 import useFetchLimit from '/@/components/Main/MainView/MessagesScroller/composables/useFetchLimit'
 import useMessageFetcher from '/@/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher'
 import useMittListener from '/@/composables/utils/useMittListener'
@@ -27,7 +28,7 @@ interface GetMessagesParams {
 }
 
 const useChannelMessageFetcher = (
-  scrollerEle: Ref<{ $el: HTMLDivElement } | undefined>,
+  scrollerRef: ShallowRef<MessageScrollerInstance | undefined>,
   props: {
     channelId: ChannelId
     entryMessageId?: MessageId
@@ -41,7 +42,7 @@ const useChannelMessageFetcher = (
     deleteUnreadChannelWithSend
   } = useSubscriptionStore()
   const { fetchLimit, waitHeightResolved } = useFetchLimit(
-    scrollerEle,
+    scrollerRef,
     MESSAGE_HEIGHT
   )
   const loadedMessageLatestDate = ref<Date>()
diff --git a/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelView.ts b/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelView.ts
index cacfe3211f..429794408b 100644
--- a/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelView.ts
+++ b/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelView.ts
@@ -1,18 +1,20 @@
 import { type ShallowRef, computed, ref } from 'vue'
 
+import { unrefElement } from '/@/lib/dom/unrefElement'
 import { useSubscriptionStore } from '/@/store/domain/subscription'
 import { useChannelsStore } from '/@/store/entities/channels'
 
+import type { MessageScrollerInstance } from '../../../MessagesScroller/MessagesScroller.vue'
 import useChannelMessageFetcher from './useChannelMessageFetcher'
 
 export const useChannelView = ({
   channelId,
   entryMessageId,
-  scrollerEle
+  scrollerRef
 }: {
   channelId: string
   entryMessageId?: string
-  scrollerEle: ShallowRef<{ $el: HTMLDivElement } | undefined>
+  scrollerRef: ShallowRef<MessageScrollerInstance | undefined>
 }) => {
   const isMessageShow = ref(false)
 
@@ -24,7 +26,7 @@ export const useChannelView = ({
     lastLoadingDirection,
     onLoadFormerMessagesRequest,
     onLoadLatterMessagesRequest
-  } = useChannelMessageFetcher(scrollerEle, { channelId, entryMessageId })
+  } = useChannelMessageFetcher(scrollerRef, { channelId, entryMessageId })
 
   const { channelsMap } = useChannelsStore()
   const isArchived = computed(
@@ -39,17 +41,20 @@ export const useChannelView = ({
 
   const showToNewMessageButton = ref(false)
   const toNewMessage = (behavior?: ScrollBehavior) => {
-    if (!scrollerEle.value) return
+    if (!scrollerRef.value) return
     showToNewMessageButton.value = false
-    scrollerEle.value.$el.scrollTo({
-      top: scrollerEle.value.$el.scrollHeight,
+    const element = unrefElement(scrollerRef)
+    if (!element) return
+    element.scrollTo({
+      top: element.scrollHeight,
       behavior: behavior
     })
   }
 
   const handleScroll = () => {
-    if (scrollerEle.value === undefined || isLoading.value) return
-    const { scrollTop, scrollHeight, clientHeight } = scrollerEle.value.$el
+    const element = unrefElement(scrollerRef)
+    if (!element || isLoading.value) return
+    const { scrollTop, scrollHeight, clientHeight } = element
     showToNewMessageButton.value = scrollHeight - 2 * clientHeight > scrollTop
     if (!isReachedLatest.value) {
       showToNewMessageButton.value = true
diff --git a/src/components/Main/MainView/ClipsView/ClipsViewContent/ClipsViewContentMain.vue b/src/components/Main/MainView/ClipsView/ClipsViewContent/ClipsViewContentMain.vue
index ae918ca2b6..16aaacf510 100644
--- a/src/components/Main/MainView/ClipsView/ClipsViewContent/ClipsViewContentMain.vue
+++ b/src/components/Main/MainView/ClipsView/ClipsViewContent/ClipsViewContentMain.vue
@@ -2,7 +2,7 @@
   <div :class="$style.container">
     <ScrollLoadingBar :class="$style.loadingBar" :show="isLoading" />
     <MessagesScroller
-      ref="scrollerEle"
+      ref="scrollerRef"
       :message-ids="messageIds"
       :is-reached-end="isReachedEnd"
       :is-reached-latest="isReachedLatest"
@@ -25,18 +25,20 @@
 <script lang="ts" setup>
 import { shallowRef } from 'vue'
 
-import ClipElement from '/@/components/Main/MainView/MessageElement/ClipElement.vue'
-import MessagesScroller from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
+import MessagesScroller, {
+  type MessageScrollerInstance
+} from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
 import ScrollLoadingBar from '/@/components/Main/MainView/ScrollLoadingBar.vue'
 import type { ClipFolderId } from '/@/types/entity-ids'
 
+import ClipElement from '../../MessageElement/ClipElement.vue'
 import useClipsFetcher from './composables/useClipsFetcher'
 
 const props = defineProps<{
   clipFolderId: ClipFolderId
 }>()
 
-const scrollerEle = shallowRef<{ $el: HTMLDivElement } | undefined>()
+const scrollerRef = shallowRef<MessageScrollerInstance>()
 const {
   messageIds,
   isReachedEnd,
@@ -44,7 +46,7 @@ const {
   isLoading,
   lastLoadingDirection,
   onLoadFormerMessagesRequest
-} = useClipsFetcher(scrollerEle, props)
+} = useClipsFetcher(scrollerRef, props)
 </script>
 
 <style lang="scss" module>
diff --git a/src/components/Main/MainView/ClipsView/ClipsViewContent/composables/useClipsFetcher.ts b/src/components/Main/MainView/ClipsView/ClipsViewContent/composables/useClipsFetcher.ts
index c4611b1b30..5a197338c1 100644
--- a/src/components/Main/MainView/ClipsView/ClipsViewContent/composables/useClipsFetcher.ts
+++ b/src/components/Main/MainView/ClipsView/ClipsViewContent/composables/useClipsFetcher.ts
@@ -1,6 +1,13 @@
-import type { Ref } from 'vue'
-import { computed, onMounted, reactive, watch } from 'vue'
-
+import {
+  type Ref,
+  type ShallowRef,
+  computed,
+  onMounted,
+  reactive,
+  watch
+} from 'vue'
+
+import type { MessageScrollerInstance } from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
 import useFetchLimit from '/@/components/Main/MainView/MessagesScroller/composables/useFetchLimit'
 import useMessageFetcher from '/@/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher'
 import useMittListener from '/@/composables/utils/useMittListener'
@@ -20,7 +27,7 @@ interface GetClipsParam {
 }
 
 const useClipsFetcher = (
-  scrollerEle: Ref<{ $el: HTMLDivElement } | undefined>,
+  scrollerRef: ShallowRef<MessageScrollerInstance | undefined>,
   props: {
     clipFolderId: ClipFolderId
     entryMessageId?: MessageId
@@ -28,7 +35,7 @@ const useClipsFetcher = (
 ) => {
   const { fetchMessage, extendMessagesMap } = useMessagesStore()
   const { fetchLimit, waitHeightResolved } = useFetchLimit(
-    scrollerEle,
+    scrollerRef,
     MESSAGE_HEIGHT
   )
   const state = reactive({
diff --git a/src/components/Main/MainView/MessageElement/ClipElement.vue b/src/components/Main/MainView/MessageElement/ClipElement.vue
index d4ad883221..328825d9e9 100644
--- a/src/components/Main/MainView/MessageElement/ClipElement.vue
+++ b/src/components/Main/MainView/MessageElement/ClipElement.vue
@@ -32,9 +32,9 @@ import { computed, ref, shallowRef, toRef } from 'vue'
 
 import ClickOutside from '/@/components/UI/ClickOutside'
 import useEmbeddings from '/@/composables/message/useEmbeddings'
+import useResponsive from '/@/composables/useResponsive'
 import { useMessagesStore } from '/@/store/entities/messages'
 import { useMessageEditingStateStore } from '/@/store/ui/messageEditingStateStore'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 import type { MessageId } from '/@/types/entity-ids'
 
 import MessageQuoteListItemFooter from './Embeddings/MessageQuoteListItemFooter.vue'
@@ -60,7 +60,7 @@ const { editingMessageId } = useMessageEditingStateStore()
 const isEditing = computed(() => props.messageId === editingMessageId.value)
 
 const bodyRef = shallowRef<HTMLDivElement | null>(null)
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const message = computed(() => messagesMap.value.get(props.messageId))
 
 const { embeddingsState } = useEmbeddings(props)
diff --git a/src/components/Main/MainView/MessageElement/MessageEditor.vue b/src/components/Main/MainView/MessageElement/MessageEditor.vue
index 1e1945af8f..d833fe7287 100644
--- a/src/components/Main/MainView/MessageElement/MessageEditor.vue
+++ b/src/components/Main/MainView/MessageElement/MessageEditor.vue
@@ -45,7 +45,7 @@
 
 <script lang="ts">
 import type { Ref } from 'vue'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, shallowRef } from 'vue'
 
 import type { AxiosProgressEvent } from 'axios'
 
@@ -162,13 +162,15 @@ const { editMessage, cancel } = useEditMessage(props, text, emit)
 const { isModifierKeyPressed, onModifierKeyDown, onModifierKeyUp } =
   useModifierKey()
 
-const textareaComponentRef = ref<{
-  textareaAutosizeRef: { $el: HTMLTextAreaElement }
-}>()
+const textareaComponentRef =
+  shallowRef<InstanceType<typeof MessageInputTextArea>>()
+
+const textareaRef = computed(() => textareaComponentRef.value?.textareaRef)
+
 const containerEle = ref<HTMLDivElement>()
 const { toggleStampPicker } = useTextStampPickerInvoker(
   text,
-  computed(() => textareaComponentRef.value?.textareaAutosizeRef.$el),
+  textareaRef,
   containerEle
 )
 
@@ -180,7 +182,7 @@ const {
 } = useAttachmentsEditor(props, text)
 
 onMounted(() => {
-  textareaComponentRef.value?.textareaAutosizeRef.$el?.focus()
+  textareaRef.value?.focus()
 })
 </script>
 
diff --git a/src/components/Main/MainView/MessageElement/MessageElement.vue b/src/components/Main/MainView/MessageElement/MessageElement.vue
index a7cefa9882..266e052c85 100644
--- a/src/components/Main/MainView/MessageElement/MessageElement.vue
+++ b/src/components/Main/MainView/MessageElement/MessageElement.vue
@@ -47,9 +47,9 @@ import MessageTools, {
 } from '/@/components/Main/MainView/MessageElement/MessageTools.vue'
 import ClickOutside from '/@/components/UI/ClickOutside'
 import useEmbeddings from '/@/composables/message/useEmbeddings'
+import useResponsive from '/@/composables/useResponsive'
 import { useMessagesStore } from '/@/store/entities/messages'
 import { useMessageEditingStateStore } from '/@/store/ui/messageEditingStateStore'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 import type { MessageId, UserId } from '/@/types/entity-ids'
 
 import MessageContents from './MessageContents.vue'
@@ -79,7 +79,7 @@ const emit = defineEmits<{
 const isActive = ref(false)
 
 const bodyRef = shallowRef<HTMLDivElement | null>(null)
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const { messagesMap } = useMessagesStore()
 const message = computed(() => messagesMap.value.get(props.messageId))
 
diff --git a/src/components/Main/MainView/MessageElement/MessageTools.vue b/src/components/Main/MainView/MessageElement/MessageTools.vue
index 465bd88c04..7544143b7f 100644
--- a/src/components/Main/MainView/MessageElement/MessageTools.vue
+++ b/src/components/Main/MainView/MessageElement/MessageTools.vue
@@ -92,6 +92,7 @@ import AIcon from '/@/components/UI/AIcon.vue'
 import AStamp from '/@/components/UI/AStamp.vue'
 import useCopyLink from '/@/composables/contextMenu/useCopyLink'
 import useContextMenu from '/@/composables/useContextMenu'
+import useResponsive from '/@/composables/useResponsive'
 import useToggle from '/@/composables/utils/useToggle'
 import { isDefined } from '/@/lib/basic/array'
 import { useStampUpdater } from '/@/lib/updater/stamp'
@@ -100,7 +101,6 @@ import { useTopStampIds } from '/@/store/domain/stampRecommendations'
 import { useMessagesStore } from '/@/store/entities/messages'
 import { useStampsStore } from '/@/store/entities/stamps'
 import { useMessageEditingStateStore } from '/@/store/ui/messageEditingStateStore'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 import { useStampPickerInvoker } from '/@/store/ui/stampPicker'
 import type { MessageId, StampId } from '/@/types/entity-ids'
 
@@ -189,7 +189,7 @@ watch(
   { immediate: true }
 )
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const { value: showQuickReaction, toggle: toggleQuickReaction } = useToggle(
   !isMobile.value
diff --git a/src/components/Main/MainView/MessageElement/StampElement.vue b/src/components/Main/MainView/MessageElement/StampElement.vue
index 5e9c111267..3ddfbb0d3b 100644
--- a/src/components/Main/MainView/MessageElement/StampElement.vue
+++ b/src/components/Main/MainView/MessageElement/StampElement.vue
@@ -34,9 +34,9 @@ import { computed, onMounted, ref, watch } from 'vue'
 import AStamp from '/@/components/UI/AStamp.vue'
 import SpinNumber from '/@/components/UI/SpinNumber.vue'
 import useHover from '/@/composables/dom/useHover'
+import useResponsive from '/@/composables/useResponsive'
 import type { MessageStampById } from '/@/lib/messageStampList'
 import { useStampsStore } from '/@/store/entities/stamps'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 import { useToastStore } from '/@/store/ui/toast'
 
 import StampScaledElement from './StampScaledElement.vue'
@@ -52,7 +52,7 @@ const emit = defineEmits<{
   (e: 'removeStamp', _stampId: string): void
 }>()
 
-const { isTouchDevice } = useResponsiveStore()
+const { isTouchDevice } = useResponsive()
 const { stampsMap } = useStampsStore()
 const { addErrorToast } = useToastStore()
 
diff --git a/src/components/Main/MainView/MessageInput/MessageInput.vue b/src/components/Main/MainView/MessageInput/MessageInput.vue
index f70267a1e1..b241dfa3db 100644
--- a/src/components/Main/MainView/MessageInput/MessageInput.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInput.vue
@@ -73,10 +73,10 @@ import AIcon from '/@/components/UI/AIcon.vue'
 import useFocus from '/@/composables/dom/useFocus'
 import useMessageInputState from '/@/composables/messageInputState/useMessageInputState'
 import useMessageInputStateAttachment from '/@/composables/messageInputState/useMessageInputStateAttachment'
+import useResponsive from '/@/composables/useResponsive'
 import { useBrowserSettings } from '/@/store/app/browserSettings'
 import { useViewStateSenderStore } from '/@/store/domain/viewStateSenderStore'
 import { useChannelsStore } from '/@/store/entities/channels'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 import { useToastStore } from '/@/store/ui/toast'
 import type { ChannelId, DMChannelId, UserId } from '/@/types/entity-ids'
 
@@ -103,7 +103,7 @@ const emit = defineEmits<{
   (e: 'clickToNewMessageButton'): void
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const channelId = toRef(props, 'channelId')
 const { state, isEmpty, isTextEmpty } = useMessageInputState(channelId)
 const { addErrorToast } = useToastStore()
@@ -163,7 +163,7 @@ const textareaComponentRef = ref<InstanceType<typeof MessageInputTextArea>>()
 const containerEle = ref<HTMLDivElement>()
 const { toggleStampPicker } = useTextStampPickerInvoker(
   toRef(state, 'text'),
-  computed(() => textareaComponentRef.value?.textareaAutosizeRef?.$el),
+  computed(() => textareaComponentRef.value?.textareaRef),
   containerEle
 )
 
diff --git a/src/components/Main/MainView/MessageInput/MessageInputLeftControls.vue b/src/components/Main/MainView/MessageInput/MessageInputLeftControls.vue
index 04a6f6ce56..0fe3760cef 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputLeftControls.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputLeftControls.vue
@@ -33,7 +33,7 @@
 import { computed } from 'vue'
 
 import IconButton from '/@/components/UI/IconButton.vue'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
 import MessageInputPreviewButton from './MessageInputPreviewButton.vue'
 import MessageInputUploadButton from './MessageInputUploadButton.vue'
@@ -60,7 +60,7 @@ const emit = defineEmits<{
   (e: 'toggleLeftControlsExpanded'): void
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const toggleLeftControlsExpanded = () => {
   isLeftControlsExpanded.value = !isLeftControlsExpanded.value
   emit('toggleLeftControlsExpanded')
diff --git a/src/components/Main/MainView/MessageInput/MessageInputPreview.vue b/src/components/Main/MainView/MessageInput/MessageInputPreview.vue
index 12d912f202..c87d73f256 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputPreview.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputPreview.vue
@@ -14,9 +14,9 @@
 import { ref, watchEffect } from 'vue'
 
 import MarkdownContent from '/@/components/UI/MarkdownContent.vue'
+import useResponsive from '/@/composables/useResponsive'
 import { isMessage } from '/@/lib/guard/embeddingOrUrl'
 import { render } from '/@/lib/markdown/markdown'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 import type { MessageId } from '/@/types/entity-ids'
 
 import MessageQuoteList from '../MessageElement/Embeddings/MessageQuoteList.vue'
@@ -26,7 +26,7 @@ const props = defineProps<{
   text: string
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const previewRendered = ref('')
 const quoteMessageIds = ref<MessageId[]>([])
diff --git a/src/components/Main/MainView/MessageInput/MessageInputRightControls.vue b/src/components/Main/MainView/MessageInput/MessageInputRightControls.vue
index 95bab4d654..236196a720 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputRightControls.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputRightControls.vue
@@ -17,7 +17,7 @@
 
 <script lang="ts" setup>
 import AIcon from '/@/components/UI/AIcon.vue'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
 import MessageInputInsertStampButton from './MessageInputInsertStampButton.vue'
 
@@ -37,7 +37,7 @@ const emit = defineEmits<{
   (e: 'clickStamp'): void
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const onClickSendButton = () => {
   if (props.canPostMessage) {
diff --git a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
index c4fcd1b85c..d104fe653b 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
@@ -37,13 +37,13 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, shallowRef, watch } from 'vue'
 
 import TextareaAutosize from '/@/components/UI/TextareaAutosize.vue'
 import useInsertText from '/@/composables/dom/useInsertText'
+import useResponsive from '/@/composables/useResponsive'
 import { isFirefox } from '/@/lib/dom/browser'
 import { getScrollbarWidth } from '/@/lib/dom/scrollbar'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 import type { ChannelId } from '/@/types/entity-ids'
 
 import DropdownSuggester from './DropdownSuggester/DropdownSuggester.vue'
@@ -90,12 +90,14 @@ const emit = defineEmits<{
 
 const firefoxFlag = isFirefox()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
-const textareaAutosizeRef = ref<InstanceType<typeof TextareaAutosize>>()
-const textareaRef = computed(() => textareaAutosizeRef.value?.$el)
+const textareaAutosizeRef = shallowRef<InstanceType<typeof TextareaAutosize>>()
+const textareaRef = computed(
+  () => textareaAutosizeRef.value?.textareaEle ?? undefined
+)
 
-defineExpose({ textareaAutosizeRef })
+defineExpose({ textareaRef, textareaAutosizeRef })
 
 const { insertText } = useInsertText(textareaRef)
 const { onPaste } = usePaste(emit, insertText)
diff --git a/src/components/Main/MainView/MessageInput/MessageInputTypingUsers.vue b/src/components/Main/MainView/MessageInput/MessageInputTypingUsers.vue
index 88f521ebb4..5fec84228c 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputTypingUsers.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputTypingUsers.vue
@@ -26,7 +26,7 @@
 import { computed } from 'vue'
 
 import UserIconEllipsisList from '/@/components/UI/UserIconEllipsisList.vue'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 import type { UserId } from '/@/types/entity-ids'
 
 import MessageInputTypingAnimation from './MessageInputTypingAnimation.vue'
@@ -35,7 +35,7 @@ const props = defineProps<{
   typingUsers: readonly UserId[]
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const text = computed(
   () =>
diff --git a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
index a7f3bfac60..00e21cb7e8 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
@@ -33,17 +33,11 @@
 </template>
 
 <script lang="ts">
-import type { Ref } from 'vue'
-import {
-  nextTick,
-  onMounted,
-  onUnmounted,
-  reactive,
-  shallowRef,
-  watch
-} from 'vue'
+import type { ComponentPublicInstance, Ref } from 'vue'
+import { nextTick, onMounted, reactive, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+import { useEventListener } from '@vueuse/core'
 import { throttle } from 'throttle-debounce'
 
 import { useOpenLink } from '/@/composables/useOpenLink'
@@ -57,6 +51,10 @@ import type { MessageId } from '/@/types/entity-ids'
 import useMessageScrollerElementResizeObserver from './composables/useMessageScrollerElementResizeObserver'
 import type { LoadingDirection } from './composables/useMessagesFetcher'
 
+export interface MessageScrollerInstance extends ComponentPublicInstance {
+  $el: HTMLDivElement
+}
+
 const LOAD_MORE_THRESHOLD = 10
 
 type HTMLElementTargetMouseEvent = MouseEvent & { target: HTMLElement }
@@ -282,12 +280,8 @@ const visibilitychangeListener = () => {
   }
   emit('resetIsReachedLatest')
 }
-onMounted(() => {
-  document.addEventListener('visibilitychange', visibilitychangeListener)
-})
-onUnmounted(() => {
-  document.removeEventListener('visibilitychange', visibilitychangeListener)
-})
+
+useEventListener(document, 'visibilitychange', visibilitychangeListener)
 
 const { onClick } = useMarkdownInternalHandler()
 useScrollRestoration(rootRef, state)
diff --git a/src/components/Main/MainView/MessagesScroller/composables/useFetchLimit.ts b/src/components/Main/MainView/MessagesScroller/composables/useFetchLimit.ts
index aec6b522ef..daf05ad4a5 100644
--- a/src/components/Main/MainView/MessagesScroller/composables/useFetchLimit.ts
+++ b/src/components/Main/MainView/MessagesScroller/composables/useFetchLimit.ts
@@ -1,16 +1,19 @@
-import type { Ref } from 'vue'
+import type { ShallowRef } from 'vue'
 import { computed, watch } from 'vue'
 
 import useBoxSize from '/@/composables/dom/useBoxSize'
+import { unrefElement } from '/@/lib/dom/unrefElement'
+
+import type { MessageScrollerInstance } from '../MessagesScroller.vue'
 
 const MAX_COUNT = 20
 
 const useFetchLimit = (
-  scrollerEle: Ref<{ $el: HTMLDivElement } | undefined>,
+  scrollerRef: ShallowRef<MessageScrollerInstance | undefined>,
   messageHeight: number
 ) => {
   const { height } = useBoxSize(
-    computed(() => scrollerEle.value?.$el ?? null),
+    computed(() => unrefElement(scrollerRef) ?? null),
     false
   )
 
diff --git a/src/components/Main/MainView/PrimaryViewHeader/PrimaryViewHeader.vue b/src/components/Main/MainView/PrimaryViewHeader/PrimaryViewHeader.vue
index 689a9b4e19..c4e424417f 100644
--- a/src/components/Main/MainView/PrimaryViewHeader/PrimaryViewHeader.vue
+++ b/src/components/Main/MainView/PrimaryViewHeader/PrimaryViewHeader.vue
@@ -17,9 +17,9 @@
 <script lang="ts" setup>
 import PopupNavigator from '/@/components/Main/PopupNavigatior/PopupNavigator.vue'
 import useNavigationController from '/@/composables/mainView/useNavigationController'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const { openNav } = useNavigationController()
 </script>
 
diff --git a/src/components/Main/MainView/PrimaryViewSidebar/PrimaryViewSidebar.vue b/src/components/Main/MainView/PrimaryViewSidebar/PrimaryViewSidebar.vue
index 1f0544c0d4..5f8804621e 100644
--- a/src/components/Main/MainView/PrimaryViewSidebar/PrimaryViewSidebar.vue
+++ b/src/components/Main/MainView/PrimaryViewSidebar/PrimaryViewSidebar.vue
@@ -15,12 +15,12 @@
 
 <script lang="ts" setup>
 import useSidebar from '/@/composables/mainView/useSidebar'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
 defineProps<{
   isSidebarOpenerReady: boolean
 }>()
 
 const { shouldShowSidebar, shouldShowHiddenSidebar } = useSidebar()
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 </script>
diff --git a/src/components/Main/MainView/QallView/QallMessageView.vue b/src/components/Main/MainView/QallView/QallMessageView.vue
index 951c57c744..a5c44f9605 100644
--- a/src/components/Main/MainView/QallView/QallMessageView.vue
+++ b/src/components/Main/MainView/QallView/QallMessageView.vue
@@ -1,16 +1,19 @@
 <script lang="ts" setup>
 import { computed, nextTick, ref, shallowRef } from 'vue'
 
-import MessageElement from '/@/components/Main/MainView/MessageElement/MessageElement.vue'
 import MessageInput from '/@/components/Main/MainView/MessageInput/MessageInput.vue'
-import MessagesScroller from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
+import MessagesScroller, {
+  type MessageScrollerInstance
+} from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
 import ScrollLoadingBar from '/@/components/Main/MainView/ScrollLoadingBar.vue'
 import IconButton from '/@/components/UI/IconButton.vue'
+import { unrefElement } from '/@/lib/dom/unrefElement'
 import { useSubscriptionStore } from '/@/store/domain/subscription'
 import { useChannelsStore } from '/@/store/entities/channels'
 import type { ChannelId, UserId } from '/@/types/entity-ids'
 
 import useChannelMessageFetcher from '../ChannelView/ChannelViewContent/composables/useChannelMessageFetcher'
+import MessageElement from '../MessageElement/MessageElement.vue'
 
 const props = defineProps<{
   channelId: ChannelId
@@ -19,7 +22,7 @@ const props = defineProps<{
 
 const isMessageShow = ref(false)
 
-const scrollerEle = shallowRef<{ $el: HTMLDivElement } | undefined>()
+const scrollerRef = shallowRef<MessageScrollerInstance>()
 const {
   messageIds,
   isReachedEnd,
@@ -28,7 +31,7 @@ const {
   lastLoadingDirection,
   onLoadFormerMessagesRequest,
   onLoadLatterMessagesRequest
-} = useChannelMessageFetcher(scrollerEle, props)
+} = useChannelMessageFetcher(scrollerRef, props)
 
 const { channelsMap } = useChannelsStore()
 const isArchived = computed(
@@ -43,17 +46,19 @@ const resetIsReachedLatest = () => {
 
 const showToNewMessageButton = ref(false)
 const toNewMessage = (behavior?: ScrollBehavior) => {
-  if (!scrollerEle.value) return
+  const element = unrefElement(scrollerRef)
+  if (!element) return
   showToNewMessageButton.value = false
-  scrollerEle.value.$el.scrollTo({
-    top: scrollerEle.value.$el.scrollHeight,
+  element.scrollTo({
+    top: element.scrollHeight,
     behavior: behavior
   })
 }
 
 const handleScroll = () => {
-  if (scrollerEle.value === undefined || isLoading.value) return
-  const { scrollTop, scrollHeight, clientHeight } = scrollerEle.value.$el
+  const element = unrefElement(scrollerRef)
+  if (!element || isLoading.value) return
+  const { scrollTop, scrollHeight, clientHeight } = element
   showToNewMessageButton.value = scrollHeight - 2 * clientHeight > scrollTop
   if (!isReachedLatest.value) {
     showToNewMessageButton.value = true
@@ -84,7 +89,7 @@ const handleScroll = () => {
 
             <MessagesScroller
               v-if="isMessageShow"
-              ref="scrollerEle"
+              ref="scrollerRef"
               :message-ids="messageIds"
               :is-reached-end="isReachedEnd"
               :is-reached-latest="isReachedLatest"
diff --git a/src/components/Main/NavigationBar/NavigationBar.vue b/src/components/Main/NavigationBar/NavigationBar.vue
index 702a5e24d9..cf19a3891c 100644
--- a/src/components/Main/NavigationBar/NavigationBar.vue
+++ b/src/components/Main/NavigationBar/NavigationBar.vue
@@ -8,9 +8,9 @@
 <script lang="ts" setup>
 import DesktopNavigationBar from '/@/components/Main/NavigationBar/DesktopNavigationBar.vue'
 import MobileNavigationBar from '/@/components/Main/NavigationBar/MobileNavigationBar.vue'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 </script>
 
 <style lang="scss" module>
diff --git a/src/components/Main/NavigationBar/composables/useNavigationResizer.ts b/src/components/Main/NavigationBar/composables/useNavigationResizer.ts
index b9cbe76e3c..3e5c7747c8 100644
--- a/src/components/Main/NavigationBar/composables/useNavigationResizer.ts
+++ b/src/components/Main/NavigationBar/composables/useNavigationResizer.ts
@@ -1,6 +1,7 @@
 import { computed, onUnmounted, ref } from 'vue'
 
-import useInnerWindowSize from '/@/composables/dom/useInnerWindowSize'
+import { useWindowSize } from '@vueuse/core'
+
 import { createAnimationFrameController } from '/@/lib/dom/animationFrame'
 import {
   MAX_NAVIGATION_WIDTH_RATIO,
@@ -12,9 +13,7 @@ import {
 const useNavigationResizer = () => {
   const animationFrame = createAnimationFrameController()
 
-  const { width: windowWidth } = useInnerWindowSize({
-    fallback: { width: Infinity }
-  })
+  const { width: windowWidth } = useWindowSize({ initialWidth: Infinity })
 
   const {
     resizerRef,
diff --git a/src/components/Main/PopupNavigatior/PopupNavigator.vue b/src/components/Main/PopupNavigatior/PopupNavigator.vue
index edc1b76ad8..e960dd7f54 100644
--- a/src/components/Main/PopupNavigatior/PopupNavigator.vue
+++ b/src/components/Main/PopupNavigatior/PopupNavigator.vue
@@ -25,17 +25,11 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  onMounted,
-  onUnmounted,
-  reactive,
-  readonly,
-  shallowRef,
-  watch
-} from 'vue'
+import { computed, reactive, readonly, shallowRef, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
+import { useEventListener } from '@vueuse/core'
+
 import useToggle from '/@/composables/utils/useToggle'
 
 const popupNavigatorButtonId = 'popup-navigation-button'
@@ -43,30 +37,20 @@ const popupNavigatorId = 'popup-navigator'
 const POPUP_MARGIN = 4
 const LONG_CLICK_DELAY = 150
 
-type MouseTouchEventHandler = (e: MouseEvent | TouchEvent) => void
+type PointerEventHandler = (e: PointerEvent) => void
 
-const useWindowMouseTouch = (
+const useWindowPointer = (
   {
-    onMouseTouchStart,
-    onMouseTouchEnd
+    onPointerDown,
+    onPointerUp
   }: {
-    onMouseTouchStart: MouseTouchEventHandler
-    onMouseTouchEnd: MouseTouchEventHandler
+    onPointerDown: PointerEventHandler
+    onPointerUp: PointerEventHandler
   },
   options?: boolean | AddEventListenerOptions | undefined
 ) => {
-  onMounted(() => {
-    window.addEventListener('mousedown', onMouseTouchStart, options)
-    window.addEventListener('touchstart', onMouseTouchStart, options)
-    window.addEventListener('mouseup', onMouseTouchEnd, options)
-    window.addEventListener('touchend', onMouseTouchEnd, options)
-  })
-  onUnmounted(() => {
-    window.removeEventListener('mousedown', onMouseTouchStart, options)
-    window.removeEventListener('touchstart', onMouseTouchStart, options)
-    window.removeEventListener('mouseup', onMouseTouchEnd, options)
-    window.removeEventListener('touchend', onMouseTouchEnd, options)
-  })
+  useEventListener('pointerdown', onPointerDown, options)
+  useEventListener('pointerup', onPointerUp, options)
 }
 
 /**
@@ -81,7 +65,7 @@ const useIsLongClicking = (
   let timer = 0
   let isClickStarted = false
 
-  const onMouseTouchStart = (e: MouseEvent | TouchEvent) => {
+  const onPointerDown = (e: PointerEvent) => {
     if (!isTarget(e.target)) return
     // スワイプを無効化するため
     e.stopPropagation()
@@ -93,7 +77,8 @@ const useIsLongClicking = (
       onLongClick()
     }, LONG_CLICK_DELAY)
   }
-  const onMouseTouchEnd = (e: MouseEvent | TouchEvent) => {
+
+  const onPointerUp = (e: PointerEvent) => {
     // document.elementFromPointが起きるとレイアウトの計算がかかるので、
     // targetでのmousetouchstartが起きていないなら無視する
     if (!isClickStarted) return
@@ -101,9 +86,7 @@ const useIsLongClicking = (
     isClickStarted = false
     window.clearTimeout(timer)
 
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const point = 'changedTouches' in e ? e.changedTouches[0]! : e
-    const target = document.elementFromPoint(point.clientX, point.clientY)
+    const target = document.elementFromPoint(e.clientX, e.clientY)
     if (!isTarget(target)) {
       return
     }
@@ -122,7 +105,7 @@ const useIsLongClicking = (
     }
     isLongClicking = false
   }
-  return { onMouseTouchStart, onMouseTouchEnd }
+  return { onPointerDown, onPointerUp }
 }
 
 const useNavigator = (emit: (name: 'clickIcon') => void) => {
@@ -156,22 +139,23 @@ const useNavigator = (emit: (name: 'clickIcon') => void) => {
     hidePopupNavigator()
   }
 
-  const { onMouseTouchStart, onMouseTouchEnd } = useIsLongClicking(
+  const { onPointerDown, onPointerUp } = useIsLongClicking(
     isTarget,
     showPopupNavigator,
     () => {
       emit('clickIcon')
     }
   )
-  useWindowMouseTouch(
+
+  useWindowPointer(
     {
-      onMouseTouchStart: e => {
+      onPointerDown: e => {
         if (!isPopup(e.target)) {
           hidePopupNavigator()
         }
-        onMouseTouchStart(e)
+        onPointerDown(e)
       },
-      onMouseTouchEnd
+      onPointerUp
     },
     // capture=trueなのはstopPropergationでスワイプを無効化するため
     { capture: true, passive: true }
diff --git a/src/components/Main/StampPicker/StampPicker.vue b/src/components/Main/StampPicker/StampPicker.vue
index 6bd2379f49..ed2c686e1a 100644
--- a/src/components/Main/StampPicker/StampPicker.vue
+++ b/src/components/Main/StampPicker/StampPicker.vue
@@ -52,9 +52,9 @@ import { onMounted, ref } from 'vue'
 
 import ClickOutside from '/@/components/UI/ClickOutside'
 import FilterInput from '/@/components/UI/FilterInput.vue'
+import useResponsive from '/@/composables/useResponsive'
 import { useStampHistory } from '/@/store/domain/stampHistory'
 import { useStampRecommendations } from '/@/store/domain/stampRecommendations'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 import { useStampPicker } from '/@/store/ui/stampPicker'
 import type { StampId } from '/@/types/entity-ids'
 
@@ -76,8 +76,7 @@ const {
   closeStampPicker
 } = useStampPicker()
 const { upsertLocalStampHistory } = useStampHistory()
-const { recordStampUsage } = useStampRecommendations()
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const animationKeys = ref(new Map<StampId, number>())
 const incrementAnimationKey = (id: StampId) => {
@@ -97,6 +96,8 @@ const {
 } = useEffectSelector()
 const { preselected, onHoverStamp } = useStampPreselector()
 
+const { recordStampUsage } = useStampRecommendations()
+
 const filterInputRef = ref<InstanceType<typeof FilterInput> | null>(null)
 
 const onInputStamp = (id: StampId) => {
diff --git a/src/components/Modal/UserModal/FeatureContainer/FeatureContainer.vue b/src/components/Modal/UserModal/FeatureContainer/FeatureContainer.vue
index 5fad28adc8..5c61127034 100644
--- a/src/components/Modal/UserModal/FeatureContainer/FeatureContainer.vue
+++ b/src/components/Modal/UserModal/FeatureContainer/FeatureContainer.vue
@@ -6,7 +6,7 @@
 <script lang="ts" setup>
 import type { User, UserDetail } from '@traptitech/traq'
 
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
 import DesktopFeatureContainer from './DesktopFeatureContainer.vue'
 import MobileFeatureContainer from './MobileFeatureContainer.vue'
@@ -16,7 +16,7 @@ defineProps<{
   detail?: UserDetail
 }>()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 </script>
 
 <style lang="scss" module>
diff --git a/src/components/Modal/UserModal/FeatureContainer/LinkButton.vue b/src/components/Modal/UserModal/FeatureContainer/LinkButton.vue
index a58ddad1e1..f62f7b3e9a 100644
--- a/src/components/Modal/UserModal/FeatureContainer/LinkButton.vue
+++ b/src/components/Modal/UserModal/FeatureContainer/LinkButton.vue
@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import AIcon from '/@/components/UI/AIcon.vue'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
 withDefaults(
   defineProps<{
@@ -25,7 +25,7 @@ withDefaults(
   }
 )
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 </script>
 
 <style lang="scss" module>
diff --git a/src/components/Modal/UserModal/UserModal.vue b/src/components/Modal/UserModal/UserModal.vue
index 36eb65400b..7de77d5397 100644
--- a/src/components/Modal/UserModal/UserModal.vue
+++ b/src/components/Modal/UserModal/UserModal.vue
@@ -36,17 +36,17 @@
 <script lang="ts" setup>
 import { computed, reactive } from 'vue'
 
-import { useOpenLinkAndClearModal } from '/@/components/Modal/composables/useOpenLinkFromModal'
 import ClickOutside from '/@/components/UI/ClickOutside'
 import CloseButton from '/@/components/UI/CloseButton.vue'
 import UserIcon from '/@/components/UI/UserIcon.vue'
+import useResponsive from '/@/composables/useResponsive'
 import { useMeStore } from '/@/store/domain/me'
 import { useUsersStore } from '/@/store/entities/users'
 import { useModalStore } from '/@/store/ui/modal'
 import type { UserModalNavigationItemType } from '/@/store/ui/modal/states'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 import type { UserId } from '/@/types/entity-ids'
 
+import { useOpenLinkAndClearModal } from '../composables/useOpenLinkFromModal'
 import FeatureContainer from './FeatureContainer/FeatureContainer.vue'
 import NavigationContent from './NavigationContent.vue'
 import NavigationSelector from './NavigationSelector.vue'
@@ -59,7 +59,7 @@ const props = defineProps<{
 }>()
 
 const { clearModal, replaceModal } = useModalStore()
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const { usersMap } = useUsersStore()
 const { openLinkAndClearModal } = useOpenLinkAndClearModal()
 
diff --git a/src/components/Modal/UserModal/UserModalEditButton.vue b/src/components/Modal/UserModal/UserModalEditButton.vue
index d866f7edec..f5d9d3afce 100644
--- a/src/components/Modal/UserModal/UserModalEditButton.vue
+++ b/src/components/Modal/UserModal/UserModalEditButton.vue
@@ -8,9 +8,9 @@
 import { computed } from 'vue'
 
 import AIcon from '/@/components/UI/AIcon.vue'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const props = defineProps<{
   size: number
 }>()
diff --git a/src/components/ShareTarget/ShareTarget.vue b/src/components/ShareTarget/ShareTarget.vue
index fc8d55f60b..a1fc34fd0f 100644
--- a/src/components/ShareTarget/ShareTarget.vue
+++ b/src/components/ShareTarget/ShareTarget.vue
@@ -15,8 +15,8 @@
 import { computed, ref, watchEffect } from 'vue'
 
 import AuthenticateHeader from '/@/components/Authenticate/AuthenticateHeader.vue'
+import useResponsive from '/@/composables/useResponsive'
 import { wait } from '/@/lib/basic/timer'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 
 import ShareTargetForm from './ShareTargetForm.vue'
 
@@ -36,7 +36,7 @@ const props = withDefaults(
 const defaultText = computed(() =>
   [props.title, props.text, props.url].filter(text => text !== '').join('\n')
 )
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const donePost = ref(false)
 const onPost = () => {
diff --git a/src/components/UI/ClickOutside.ts b/src/components/UI/ClickOutside.ts
index c64dd1320b..3334420ed9 100644
--- a/src/components/UI/ClickOutside.ts
+++ b/src/components/UI/ClickOutside.ts
@@ -3,15 +3,15 @@ import {
   Comment,
   Text,
   cloneVNode,
+  computed,
   defineComponent,
-  onBeforeUnmount,
-  onMounted,
   ref,
-  shallowRef,
-  watch
+  shallowRef
 } from 'vue'
 
-import { isIOS } from '/@/lib/dom/browser'
+import { useEventListener } from '@vueuse/core'
+
+import { unrefElement } from '/@/lib/dom/unrefElement'
 import { useModalStore } from '/@/store/ui/modal'
 
 /**
@@ -26,9 +26,6 @@ const filterChildren = <T extends VNode>(vnodes: T[]) =>
     return true
   })
 
-const startEventName = isIOS() ? 'touchstart' : 'mousedown'
-const endEventName = isIOS() ? 'touchend' : 'mouseup'
-
 /**
  * そのデフォルトスロットに指定した要素の外でクリックされたときにclickOutsideイベントを発火する
  */
@@ -55,23 +52,20 @@ export default defineComponent({
     }
   },
   emits: {
-    clickOutside: (_e: MouseEvent | TouchEvent) => true
+    clickOutside: (_e: PointerEvent) => true
   },
   setup(props, { slots, emit }) {
-    const element = shallowRef<Element | ComponentPublicInstance>()
+    const element = shallowRef<HTMLElement | ComponentPublicInstance>()
 
     const { shouldShowModal } = useModalStore()
     const isMouseDown = ref(false)
-    let listening = false
 
-    const onMouseDown = (e: MouseEvent | TouchEvent) => {
+    const onPointerDown = (e: PointerEvent) => {
       if (!element.value) return
 
       if (props.unableWhileModalOpen && shouldShowModal.value) return
 
-      const ele =
-        element.value instanceof Element ? element.value : element.value.$el
-
+      const ele = unrefElement(element)
       if (ele === e.target || e.composedPath().includes(ele)) {
         return
       }
@@ -81,14 +75,12 @@ export default defineComponent({
         e.stopPropagation()
       }
     }
-    const onMouseUp = (e: MouseEvent | TouchEvent) => {
+
+    const onPointerUp = (e: PointerEvent) => {
       if (!isMouseDown.value) return
       isMouseDown.value = false
 
-      if (!element.value) return
-      const ele =
-        element.value instanceof Element ? element.value : element.value.$el
-
+      const ele = unrefElement(element)
       if (ele === e.target || e.composedPath().includes(ele)) {
         return
       }
@@ -102,33 +94,11 @@ export default defineComponent({
       }
     }
 
-    const addListeners = () => {
-      if (listening) return
-      window.addEventListener(startEventName, onMouseDown, { capture: true })
-      window.addEventListener(endEventName, onMouseUp, { capture: true })
-      listening = true
-    }
-    const removeListeners = () => {
-      if (!listening) return
-      window.removeEventListener(startEventName, onMouseDown, { capture: true })
-      window.removeEventListener(endEventName, onMouseUp, { capture: true })
-      listening = false
-    }
+    const target = computed(() => (props.enabled ? window : null))
+    const listenerOptions = { capture: true }
 
-    onMounted(() => {
-      if (props.enabled) addListeners()
-    })
-    onBeforeUnmount(() => {
-      removeListeners()
-    })
-
-    watch(
-      () => props.enabled,
-      enabled => {
-        if (enabled) addListeners()
-        else removeListeners()
-      }
-    )
+    useEventListener(target, 'pointerdown', onPointerDown, listenerOptions)
+    useEventListener(target, 'pointerup', onPointerUp, listenerOptions)
 
     return () => {
       if (!slots['default']) {
diff --git a/src/components/UI/TextareaAutosize.vue b/src/components/UI/TextareaAutosize.vue
index 45435870c8..54428651a8 100644
--- a/src/components/UI/TextareaAutosize.vue
+++ b/src/components/UI/TextareaAutosize.vue
@@ -20,6 +20,7 @@
 <script lang="ts" setup>
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
+import { useEventListener } from '@vueuse/core'
 import autosize from 'autosize'
 
 import useOnInput from '/@/composables/useOnInput'
@@ -60,12 +61,13 @@ const autosizeUpdateTextarea = async () => {
   }
 }
 
+useEventListener(textareaEle, 'autosize:resized', () => {
+  emit('autosize-updated')
+})
+
 onMounted(() => {
   if (textareaEle.value) {
     autosize(textareaEle.value)
-    textareaEle.value.addEventListener('autosize:resized', () => {
-      emit('autosize-updated')
-    })
   }
 })
 watch([modelValue], autosizeUpdateTextarea)
@@ -77,7 +79,8 @@ onBeforeUnmount(() => {
 
 defineExpose({
   focus,
-  autosizeUpdateTextarea
+  autosizeUpdateTextarea,
+  textareaEle
 })
 </script>
 
diff --git a/src/components/UI/composables/useImageViewer.ts b/src/components/UI/composables/useImageViewer.ts
index 5f4eb91514..497bf54504 100644
--- a/src/components/UI/composables/useImageViewer.ts
+++ b/src/components/UI/composables/useImageViewer.ts
@@ -1,5 +1,7 @@
 import type { Ref } from 'vue'
-import { computed, onBeforeUnmount, onMounted, reactive } from 'vue'
+import { computed, reactive } from 'vue'
+
+import { useEventListener } from '@vueuse/core'
 
 import type { Point } from '/@/lib/basic/point'
 import {
@@ -109,26 +111,18 @@ const useMouseMove = (
       lastPoint = newPoint
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    containerEle.value!.addEventListener('mousemove', moveUpdate)
-
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    containerEle.value!.addEventListener(
-      'mouseup',
-      _upEvent => {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        containerEle.value!.removeEventListener('mousemove', moveUpdate)
-      },
-      { once: true }
+    const stopWatchMousemove = useEventListener(
+      containerEle,
+      'mousemove',
+      moveUpdate
     )
+
+    useEventListener(containerEle, 'mouseup', stopWatchMousemove, {
+      once: true
+    })
   }
 
-  onMounted(() => {
-    containerEle.value?.addEventListener('mousedown', onDown)
-  })
-  onBeforeUnmount(() => {
-    containerEle.value?.removeEventListener('mousedown', onDown)
-  })
+  useEventListener(containerEle, 'mousedown', onDown)
 }
 
 const useMouseWheel = (
@@ -145,12 +139,7 @@ const useMouseWheel = (
     e.preventDefault()
   }
 
-  onMounted(() => {
-    containerEle.value?.addEventListener('wheel', onWheel)
-  })
-  onBeforeUnmount(() => {
-    containerEle.value?.removeEventListener('wheel', onWheel)
-  })
+  useEventListener(containerEle, 'wheel', onWheel)
 }
 
 const useTouch = (
@@ -230,16 +219,9 @@ const useTouch = (
     return newPinchTouches
   }
 
-  onMounted(() => {
-    containerEle.value?.addEventListener('touchstart', onTouchStart)
-    containerEle.value?.addEventListener('touchmove', onMove)
-    containerEle.value?.addEventListener('touchend', onTouchEnd)
-  })
-  onBeforeUnmount(() => {
-    containerEle.value?.removeEventListener('touchstart', onTouchStart)
-    containerEle.value?.removeEventListener('touchmove', onMove)
-    containerEle.value?.removeEventListener('touchend', onTouchEnd)
-  })
+  useEventListener(containerEle, 'touchstart', onTouchStart)
+  useEventListener(containerEle, 'touchmove', onMove)
+  useEventListener(containerEle, 'touchend', onTouchEnd)
 }
 
 const useImageViewer = (
diff --git a/src/composables/dom/useBeforeUnload.ts b/src/composables/dom/useBeforeUnload.ts
index a12ba16504..8e58f8fec1 100644
--- a/src/composables/dom/useBeforeUnload.ts
+++ b/src/composables/dom/useBeforeUnload.ts
@@ -1,21 +1,17 @@
-import { type ComputedRef, type Ref, onMounted, onUnmounted } from 'vue'
+import { type MaybeRefOrGetter, toValue } from 'vue'
+
+import { useEventListener } from '@vueuse/core'
 
 export const useBeforeUnload = (
-  isEnabled: Ref<boolean> | ComputedRef<boolean>,
+  isEnabled: MaybeRefOrGetter<boolean>,
   message: string,
   onBeforeUnload?: (event: BeforeUnloadEvent) => void
 ) => {
-  const handleBeforeUnload = (event: BeforeUnloadEvent) => {
-    if (!isEnabled.value) return
+  useEventListener('beforeunload', (event: BeforeUnloadEvent) => {
+    if (!toValue(isEnabled)) return
     onBeforeUnload?.(event)
     event.preventDefault()
     event.returnValue = message
     return message
-  }
-  onMounted(() => {
-    window.addEventListener('beforeunload', handleBeforeUnload)
-  })
-  onUnmounted(() => {
-    window.removeEventListener('beforeunload', handleBeforeUnload)
   })
 }
diff --git a/src/composables/dom/useFileSelect.ts b/src/composables/dom/useFileSelect.ts
index 063b2d654e..a50bf106bc 100644
--- a/src/composables/dom/useFileSelect.ts
+++ b/src/composables/dom/useFileSelect.ts
@@ -1,4 +1,4 @@
-import { onBeforeUnmount } from 'vue'
+import { useEventListener } from '@vueuse/core'
 
 import type { MaybePromise } from '/@/types/utility'
 
@@ -28,10 +28,7 @@ export const useFileSelect = (
     input.value = ''
   }
 
-  input.addEventListener('change', onChangeInternal)
-  onBeforeUnmount(() => {
-    input.removeEventListener('change', onChangeInternal)
-  })
+  useEventListener(input, 'change', onChangeInternal)
 
   const selectImage = () => {
     input.click()
diff --git a/src/composables/dom/useInnerWindowSize.ts b/src/composables/dom/useInnerWindowSize.ts
deleted file mode 100644
index d23c5d92db..0000000000
--- a/src/composables/dom/useInnerWindowSize.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { type ComputedRef, onMounted, onUnmounted, ref } from 'vue'
-
-import { debounce } from 'throttle-debounce'
-
-type Fallback = {
-  width?: number
-  height?: number
-}
-
-type Options<F extends Fallback = object> = {
-  fallback?: F
-  delay?: number
-}
-
-type ReturnWidth<F> =
-  | number
-  | (F extends { width: infer T extends number } ? T : undefined)
-
-type ReturnHeight<F> =
-  | number
-  | (F extends { height: infer T extends number } ? T : undefined)
-
-type Return<F> = {
-  width: ComputedRef<ReturnWidth<F>>
-  height: ComputedRef<ReturnHeight<F>>
-}
-
-function useInnerWindowSize<F extends Fallback>({
-  fallback = {} as F,
-  delay = 64
-}: Options<F> = {}) {
-  const width = ref(fallback.width)
-  const height = ref(fallback.height)
-
-  const updateSize = debounce(delay, () => {
-    if (typeof window === 'undefined') return
-    width.value = window.innerWidth
-    height.value = window.innerHeight
-  })
-
-  onMounted(() => {
-    updateSize()
-    window.addEventListener('resize', updateSize)
-  })
-
-  onUnmounted(() => {
-    window.removeEventListener('resize', updateSize)
-  })
-
-  return {
-    width,
-    height
-  } as Return<F>
-}
-
-export { useInnerWindowSize }
-
-export default useInnerWindowSize
diff --git a/src/composables/dom/useInsertText.ts b/src/composables/dom/useInsertText.ts
index ef35caa533..94b141f67f 100644
--- a/src/composables/dom/useInsertText.ts
+++ b/src/composables/dom/useInsertText.ts
@@ -1,4 +1,4 @@
-import type { Ref } from 'vue'
+import { type MaybeRefOrGetter, type Ref, toValue } from 'vue'
 
 import { insert } from 'text-field-edit'
 
@@ -6,22 +6,24 @@ import { insert } from 'text-field-edit'
  * これを利用したときはCtrl+Zなどがきく
  */
 const useInsertText = (
-  textareaRef: Ref<HTMLTextAreaElement | undefined>,
+  textareaRef: MaybeRefOrGetter<HTMLTextAreaElement | undefined>,
   target?: Ref<{ begin: number; end: number }>
 ) => {
   const insertText = (text: string) => {
-    if (!textareaRef.value) return
+    const textarea = toValue(textareaRef)
+
+    if (!textarea) return
 
     if (target) {
-      textareaRef.value.selectionStart = target.value.begin
-      textareaRef.value.selectionEnd = target.value.end
+      textarea.selectionStart = target.value.begin
+      textarea.selectionEnd = target.value.end
     }
 
     // Windowsでの\r\nを含む文字列を貼り付けた後に
     // Ctrl+Zでアンドゥすると、キャレットの位置がずれるので
     // ずれないように\nに統一しておく
     const normalizedText = text.replaceAll('\r\n', '\n')
-    insert(textareaRef.value, normalizedText)
+    insert(textarea, normalizedText)
   }
 
   return { insertText }
diff --git a/src/composables/dom/useScreenWakeLock.ts b/src/composables/dom/useScreenWakeLock.ts
index ff3ec09abf..c32f38f8d2 100644
--- a/src/composables/dom/useScreenWakeLock.ts
+++ b/src/composables/dom/useScreenWakeLock.ts
@@ -1,5 +1,7 @@
 import { onMounted, onUnmounted } from 'vue'
 
+import { useEventListener } from '@vueuse/core'
+
 const useScreenWakeLock = () => {
   if (!navigator.wakeLock) return
 
@@ -10,13 +12,12 @@ const useScreenWakeLock = () => {
     }
   }
 
+  useEventListener(document, 'visibilitychange', reacquireWakeLock)
+
   onMounted(async () => {
     wakeLock = await navigator.wakeLock.request('screen')
-    document.addEventListener('visibilitychange', reacquireWakeLock)
   })
   onUnmounted(async () => {
-    document.removeEventListener('visibilitychange', reacquireWakeLock)
-
     await wakeLock?.release()
     wakeLock = null
   })
diff --git a/src/composables/mainView/useNavigationController.ts b/src/composables/mainView/useNavigationController.ts
index 1dd64e9481..06f281c5b4 100644
--- a/src/composables/mainView/useNavigationController.ts
+++ b/src/composables/mainView/useNavigationController.ts
@@ -1,11 +1,11 @@
+import useResponsive from '/@/composables/useResponsive'
 import { MainViewComponentState, useMainViewStore } from '/@/store/ui/mainView'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 
 /**
  * モバイル用にナビゲーションの開閉を行う
  */
 const useNavigationController = () => {
-  const { isMobile } = useResponsiveStore()
+  const { isMobile } = useResponsive()
   const { currentMainViewComponentState, isNavOpen, isNoComponentOpen } =
     useMainViewStore()
 
diff --git a/src/composables/mainView/useSidebar.ts b/src/composables/mainView/useSidebar.ts
index 8b6a23b03e..7f592db9bb 100644
--- a/src/composables/mainView/useSidebar.ts
+++ b/src/composables/mainView/useSidebar.ts
@@ -1,12 +1,12 @@
 import { computed } from 'vue'
 
+import useResponsive from '/@/composables/useResponsive'
 import { MainViewComponentState, useMainViewStore } from '/@/store/ui/mainView'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 
 const useSidebar = () => {
   const { currentMainViewComponentState: state, isSidebarOpen } =
     useMainViewStore()
-  const { isMobile } = useResponsiveStore()
+  const { isMobile } = useResponsive()
 
   /**
    * サイドバーが表示されている必要があるか
diff --git a/src/composables/useResponsive.ts b/src/composables/useResponsive.ts
new file mode 100644
index 0000000000..c50ebf5bf5
--- /dev/null
+++ b/src/composables/useResponsive.ts
@@ -0,0 +1,28 @@
+import { ref } from 'vue'
+
+import { createSharedComposable, useEventListener } from '@vueuse/core'
+
+import { mobileMinBreakpoint } from '/@/lib/media'
+
+const useResponsive = () => {
+  const isMobileQuery = matchMedia(`(max-width: ${mobileMinBreakpoint}px)`)
+  const isHoverSupportedQuery = matchMedia('(hover: hover) and (pointer: fine)')
+
+  const isMobile = ref(isMobileQuery.matches)
+  const isTouchDevice = ref(!isHoverSupportedQuery.matches)
+
+  const updateIsMobile = (event: MediaQueryListEvent) => {
+    isMobile.value = event.matches
+  }
+
+  const updateIsTouchDevice = (event: MediaQueryListEvent) => {
+    isTouchDevice.value = event.matches
+  }
+
+  useEventListener(isMobileQuery, 'change', updateIsMobile)
+  useEventListener(isHoverSupportedQuery, 'change', updateIsTouchDevice)
+
+  return { isMobile, isTouchDevice }
+}
+
+export default createSharedComposable(useResponsive)
diff --git a/src/lib/basic/array.ts b/src/lib/basic/array.ts
index 1f0eae7d31..74cf8d6fb8 100644
--- a/src/lib/basic/array.ts
+++ b/src/lib/basic/array.ts
@@ -1,3 +1,5 @@
+import type { MaybeArray } from '/@/types/utility'
+
 /**
  * 一致するキーの一覧を返す
  * priorityが0のとき完全一致
@@ -59,6 +61,9 @@ export const pickSomeAroundIndex = <T>(
   return arr.slice(first, last + 1)
 }
 
+export const toArray = <T>(array: MaybeArray<T>): T[] =>
+  Array.isArray(array) ? array : [array]
+
 export const isDefined = <T>(o: T): o is Exclude<T, undefined> => {
   return o !== undefined
 }
diff --git a/src/lib/dom/unrefElement.ts b/src/lib/dom/unrefElement.ts
new file mode 100644
index 0000000000..345ebd21c7
--- /dev/null
+++ b/src/lib/dom/unrefElement.ts
@@ -0,0 +1,18 @@
+import { type MaybeRefOrGetter, toValue } from 'vue'
+
+import { type MaybeElement } from '@vueuse/core'
+
+import { isObjectAndHasKey } from '../basic/object'
+
+export type UnrefElementReturn<T> = T extends { $el: infer E } ? E : T
+
+export const unrefElement = <T extends MaybeElement>(
+  elementRef: MaybeRefOrGetter<T>
+) => {
+  const impl = <T extends MaybeElement>(element: MaybeRefOrGetter<T>) => {
+    if (isObjectAndHasKey(element, '$el')) return element.$el
+    return element
+  }
+
+  return impl(toValue(elementRef)) as UnrefElementReturn<T>
+}
diff --git a/src/store/ui/responsive.ts b/src/store/ui/responsive.ts
deleted file mode 100644
index e87f0b825a..0000000000
--- a/src/store/ui/responsive.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { ref } from 'vue'
-
-import { acceptHMRUpdate, defineStore } from 'pinia'
-
-import { mobileMinBreakpoint } from '/@/lib/media'
-import { convertToRefsStore } from '/@/store/utils/convertToRefsStore'
-
-const useResponsiveStorePinia = defineStore('ui/responsive', () => {
-  const queryList = window.matchMedia(`(max-width: ${mobileMinBreakpoint}px)`)
-  const isHoverSupported = window.matchMedia(
-    '(hover: hover) and (pointer: fine)'
-  )
-
-  const isMobile = ref(queryList.matches)
-  const isTouchDevice = ref(!isHoverSupported.matches)
-  queryList.addEventListener('change', (event: MediaQueryListEvent) => {
-    isMobile.value = event.matches
-  })
-  isHoverSupported.addEventListener('change', (event: MediaQueryListEvent) => {
-    isTouchDevice.value = event.matches
-  })
-
-  return { isMobile, isTouchDevice }
-})
-
-export const useResponsiveStore = convertToRefsStore(useResponsiveStorePinia)
-
-if (import.meta.hot) {
-  import.meta.hot.accept(
-    acceptHMRUpdate(useResponsiveStorePinia, import.meta.hot)
-  )
-}
diff --git a/src/store/ui/stampPicker.ts b/src/store/ui/stampPicker.ts
index 361a2b6e1b..4515cb4e65 100644
--- a/src/store/ui/stampPicker.ts
+++ b/src/store/ui/stampPicker.ts
@@ -1,8 +1,9 @@
 import type { AnimeEffect, SizeEffect } from '@traptitech/traq-markdown-it'
 
 import type { Ref } from 'vue'
-import { computed, ref, watch, watchEffect } from 'vue'
+import { computed, ref, watch } from 'vue'
 
+import { useEventListener } from '@vueuse/core'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import { throttle } from 'throttle-debounce'
 
@@ -152,13 +153,11 @@ export const useStampPickerInvoker = (
     position.value = getPositionFromAlignment(newAlignment, rect)
   })
 
-  watchEffect(() => {
-    if (isThisOpen.value) {
-      window.addEventListener('resize', setPosition)
-    } else {
-      window.removeEventListener('resize', setPosition)
-    }
-  })
+  useEventListener(
+    computed(() => (isThisOpen.value ? window : null)),
+    'resize',
+    setPosition
+  )
 
   const openStampPicker = () => {
     setPosition()
diff --git a/src/types/utility.d.ts b/src/types/utility.d.ts
index d7e07f67c2..8fcc1db8b1 100644
--- a/src/types/utility.d.ts
+++ b/src/types/utility.d.ts
@@ -2,3 +2,5 @@
 export type Invocable = (...args: any[]) => any
 
 export type MaybePromise<T> = T | Promise<T> | PromiseLike<T>
+
+export type MaybeArray<T> = T | T[]
diff --git a/src/views/GroupManagerPage.vue b/src/views/GroupManagerPage.vue
index 9c438a4358..e4d7f789fc 100644
--- a/src/views/GroupManagerPage.vue
+++ b/src/views/GroupManagerPage.vue
@@ -9,11 +9,11 @@
 <script lang="ts" setup>
 import DesktopGroupManager from '/@/components/GroupManager/DesktopGroupManager.vue'
 import MobileGroupManager from '/@/components/GroupManager/MobileGroupManager.vue'
-import { useResponsiveStore } from '/@/store/ui/responsive'
+import useResponsive from '/@/composables/useResponsive'
 
 import useLoginCheck from './composables/useLoginCheck'
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 // ログイン必要ルート
 const { isLoginCheckDone } = useLoginCheck()
diff --git a/src/views/MainPage.vue b/src/views/MainPage.vue
index 4ad8f7601e..a80ab63e0d 100644
--- a/src/views/MainPage.vue
+++ b/src/views/MainPage.vue
@@ -39,18 +39,14 @@
 
 <script lang="ts">
 import type { Ref } from 'vue'
-import {
-  computed,
-  defineAsyncComponent,
-  onBeforeUnmount,
-  onMounted,
-  reactive
-} from 'vue'
+import { computed, defineAsyncComponent, reactive } from 'vue'
+
+import { useEventListener } from '@vueuse/core'
 
 import useNavigationController from '/@/composables/mainView/useNavigationController'
+import useResponsive from '/@/composables/useResponsive'
 import { connectFirebase } from '/@/lib/notification/notification'
 import { useCommandPalette } from '/@/store/app/commandPalette'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 import { useToastStore } from '/@/store/ui/toast'
 
 import useInitialFetch from './composables/useInitialFetch'
@@ -100,12 +96,7 @@ const useCommandPaletteShortcutKey = () => {
     }
   }
 
-  onMounted(() => {
-    window.addEventListener('keydown', onKeyDown)
-  })
-  onBeforeUnmount(() => {
-    window.removeEventListener('keydown', onKeyDown)
-  })
+  useEventListener('keydown', onKeyDown)
 }
 
 const NotFoundPage = defineAsyncComponent(
@@ -139,7 +130,7 @@ const { addToast } = useToastStore()
 
 useCommandPaletteShortcutKey()
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 const shouldShowNav = computed(() => !isMobile.value || isNavAppeared.value)
 const { closeNav } = useNavigationController()
 const hideOuter = computed(
diff --git a/src/views/SettingsPage.vue b/src/views/SettingsPage.vue
index 229839cb5b..8ac47c95c4 100644
--- a/src/views/SettingsPage.vue
+++ b/src/views/SettingsPage.vue
@@ -15,9 +15,9 @@ import type { Ref } from 'vue'
 import { ref, toRef, watch } from 'vue'
 import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
 
+import useResponsive from '/@/composables/useResponsive'
 import { RouteName } from '/@/router'
 import { defaultSettingsName } from '/@/router/settings'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 
 import useLoginCheck from './composables/useLoginCheck'
 
@@ -47,7 +47,7 @@ const useSettingsRootPathWatcher = (
 import DesktopSettingModal from '/@/components/Settings/DesktopSetting.vue'
 import MobileSettingModal from '/@/components/Settings/MobileSetting.vue'
 
-const { isMobile } = useResponsiveStore()
+const { isMobile } = useResponsive()
 
 const settingsRootShown = ref(false)
 onBeforeRouteLeave(() => {
diff --git a/src/views/composables/useMainViewLayout.ts b/src/views/composables/useMainViewLayout.ts
index 06e1a1d0e6..fe858c9107 100644
--- a/src/views/composables/useMainViewLayout.ts
+++ b/src/views/composables/useMainViewLayout.ts
@@ -3,8 +3,8 @@ import { computed, watch } from 'vue'
 
 import useSwipeDetector from '/@/composables/mainView/useSwipeDetector'
 import useSwipeDrawer from '/@/composables/mainView/useSwipeDrawer'
+import useResponsive from '/@/composables/useResponsive'
 import { MainViewComponentState, useMainViewStore } from '/@/store/ui/mainView'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 
 type DrawerType = 'none' | 'nav' | 'sidebar'
 
@@ -28,7 +28,7 @@ const stateMachineDrawerTypeMap: Record<MainViewComponentState, DrawerType> = {
 
 const useMainViewLayout = (navWidth: number, sidebarWidth: number) => {
   const { currentMainViewComponentState: mState } = useMainViewStore()
-  const { isMobile } = useResponsiveStore()
+  const { isMobile } = useResponsive()
   const {
     swipeDetectorState,
     touchmoveHandler,
diff --git a/src/views/composables/useViewStateSender.ts b/src/views/composables/useViewStateSender.ts
index 09322de057..e36d9e8f72 100644
--- a/src/views/composables/useViewStateSender.ts
+++ b/src/views/composables/useViewStateSender.ts
@@ -1,8 +1,10 @@
 import { ChannelViewState } from '@traptitech/traq'
 
-import { computed, onMounted, onUnmounted, watchEffect } from 'vue'
+import { computed, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
 
+import { useEventListener } from '@vueuse/core'
+
 import { changeViewState } from '/@/lib/websocket'
 import { RouteName } from '/@/router'
 import { useViewStateSenderStore } from '/@/store/domain/viewStateSenderStore'
@@ -75,16 +77,9 @@ const useViewStateSender = () => {
     changeViewState(currentChannelId.value, ChannelViewState.None)
   }
 
-  onMounted(() => {
-    document.addEventListener('visibilitychange', visibilitychangeListener)
-    window.addEventListener('focus', focusListener)
-    window.addEventListener('blur', blurListener)
-  })
-  onUnmounted(() => {
-    document.removeEventListener('visibilitychange', visibilitychangeListener)
-    window.removeEventListener('focus', focusListener)
-    window.removeEventListener('blur', blurListener)
-  })
+  useEventListener(document, 'visibilitychange', visibilitychangeListener)
+  useEventListener('focus', focusListener)
+  useEventListener('blur', blurListener)
 }
 
 export default useViewStateSender