diff --git a/src/components/Modal/Common/ModalFrame.vue b/src/components/Modal/Common/ModalFrame.vue
index 8637f7af9b..d56806dafd 100644
--- a/src/components/Modal/Common/ModalFrame.vue
+++ b/src/components/Modal/Common/ModalFrame.vue
@@ -28,7 +28,7 @@ import { useModalStore } from '/@/store/ui/modal'
 withDefaults(
   defineProps<{
     iconMdi?: boolean
-    iconName: string
+    iconName?: string
     title: string
     subtitle?: string
     returnButton?: boolean
diff --git a/src/components/Modal/Common/ModalHeader.vue b/src/components/Modal/Common/ModalHeader.vue
index 314098f4d4..0b892a5810 100644
--- a/src/components/Modal/Common/ModalHeader.vue
+++ b/src/components/Modal/Common/ModalHeader.vue
@@ -3,11 +3,17 @@
     <modal-return-button v-if="returnButton" :class="$style.returnButton" />
     <div :class="$style.content">
       <h1 :class="$style.title">
-        <a-icon :class="$style.icon" :name="iconName" :mdi="iconMdi" />{{
-          title
-        }}
+        <a-icon
+          v-if="iconName"
+          :class="$style.icon"
+          :name="iconName"
+          :mdi="iconMdi"
+        />
+        {{ title }}
       </h1>
-      <h2 :class="$style.subtitle"><slot name="subtitle" /></h2>
+      <h2 :class="$style.subtitle" :data-has-icon="$boolAttr(!iconName)">
+        <slot name="subtitle" />
+      </h2>
     </div>
   </div>
 </template>
@@ -19,7 +25,7 @@ import ModalReturnButton from './ModalReturnButton.vue'
 withDefaults(
   defineProps<{
     iconMdi?: boolean
-    iconName: string
+    iconName?: string
     title: string
     subtitle?: string
     returnButton?: boolean
@@ -69,6 +75,9 @@ withDefaults(
     weight: 500;
     size: 0.875rem;
   }
+  &[data-has-icon] {
+    padding-left: 0;
+  }
 }
 .icon {
   margin-right: 16px;
diff --git a/src/components/Modal/GroupCreateModal/GroupCreateModal.vue b/src/components/Modal/GroupCreateModal/GroupCreateModal.vue
index 0c157361f1..24f2c3032c 100644
--- a/src/components/Modal/GroupCreateModal/GroupCreateModal.vue
+++ b/src/components/Modal/GroupCreateModal/GroupCreateModal.vue
@@ -22,8 +22,9 @@
     <form-checkbox
       v-model="addMember"
       :class="[$style.item, $style.memberCheckbox]"
-      label="自分自身をメンバーに追加する"
-    />
+    >
+      自分自身をメンバーに追加する
+    </form-checkbox>
     <div :class="$style.createButtonWrapper">
       <form-button label="作成" @click="create" />
     </div>
diff --git a/src/components/Modal/ModalContainer.vue b/src/components/Modal/ModalContainer.vue
index a30bf2153a..bac8ab0333 100644
--- a/src/components/Modal/ModalContainer.vue
+++ b/src/components/Modal/ModalContainer.vue
@@ -63,6 +63,7 @@ import GroupCreateModal from './GroupCreateModal/GroupCreateModal.vue'
 import GroupMemberEditModal from './GroupMemberEditModal/GroupMemberEditModal.vue'
 import GroupAdminAddModal from './GroupAdminAddModal/GroupAdminAddModal.vue'
 import GroupMemberAddModal from './GroupMemberAddModal/GroupMemberAddModal.vue'
+import SettingsCacheClearModal from './SettingsCacheClearModal/SettingsCacheClearModal.vue'
 
 const { shouldShowModal, currentState } = useModalStore()
 
@@ -96,6 +97,8 @@ const component = computed(() => {
       return GroupAdminAddModal
     case 'group-member-add':
       return GroupMemberAddModal
+    case 'settings-cache-clear':
+      return SettingsCacheClearModal
   }
   // eslint-disable-next-line no-console
   console.error('Unexpected modal type:', currentState.value)
diff --git a/src/components/Modal/SettingsCacheClearModal/SettingsCacheClearModal.vue b/src/components/Modal/SettingsCacheClearModal/SettingsCacheClearModal.vue
new file mode 100644
index 0000000000..e87d011a49
--- /dev/null
+++ b/src/components/Modal/SettingsCacheClearModal/SettingsCacheClearModal.vue
@@ -0,0 +1,227 @@
+<template>
+  <modal-frame
+    title="キャッシュの削除"
+    subtitle="キャッシュを削除する項目を選んで下さい。"
+  >
+    <div :class="$style.content">
+      <div :class="$style.checkboxContainer">
+        <form-checkbox
+          v-for="name in cacheCategories"
+          :key="name"
+          v-model="cacheCategoryToIsSelected[name]"
+          :class="$style.checkbox"
+        >
+          <div :class="$style.label">
+            {{ cacheLabel(name) }}
+            <span>{{ cacheSize[name] }}</span>
+          </div>
+        </form-checkbox>
+      </div>
+      <div :class="$style.buttonContainer">
+        <form-button label="キャンセル" type="tertiary" @click="clearModal" />
+        <form-button
+          label="削除する"
+          type="secondary"
+          :disabled="!anyCacheSelected"
+          is-danger
+          @click="clearCache"
+        />
+      </div>
+    </div>
+  </modal-frame>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, computed } from 'vue'
+import { useToastStore } from '/@/store/ui/toast'
+import { wait } from '/@/lib/basic/timer'
+import ModalFrame from '../Common/ModalFrame.vue'
+import FormButton from '/@/components/UI/FormButton.vue'
+import { useModalStore } from '/@/store/ui/modal'
+import FormCheckbox from '/@/components/UI/FormCheckbox.vue'
+import { prettifyFileSize } from '/@/lib/basic/file'
+
+declare global {
+  interface StorageEstimate {
+    usageDetails: Record<CacheCategory, number>
+  }
+}
+
+const confirmClear = () => window.confirm('本当に削除しますか？')
+
+/* CacheStorageのnameはsw.jsを参照 */
+const clearCacheStorage = (cacheCategory: string) =>
+  window.caches.delete(cacheCategory)
+
+const { addSuccessToast } = useToastStore()
+const showToast = (extraMessage?: string) => {
+  addSuccessToast(
+    `削除に成功しました${extraMessage ? `: ${extraMessage}` : ''}`
+  )
+}
+
+const cacheCategories = [
+  'traQ_S-precache',
+  'files-cache',
+  'thumbnail-cache'
+] as const
+type CacheCategory = (typeof cacheCategories)[number]
+
+const cacheCategoryToIsSelected = ref(
+  Object.fromEntries(cacheCategories.map(name => [name, false]))
+)
+const anyCacheSelected = computed(() => {
+  return Object.values(cacheCategoryToIsSelected).includes(true)
+})
+
+const cacheSize = ref(
+  Object.fromEntries(cacheCategories.map(name => [name, '']))
+)
+
+const cacheNames = async (category: CacheCategory) => {
+  if (!(category === 'traQ_S-precache')) {
+    return [category]
+  }
+  const allNames = await window.caches.keys()
+  return allNames.filter(name => name.startsWith(category))
+}
+
+const updateCacheSize = async () => {
+  await Promise.all(
+    cacheCategories.map(async category => {
+      cacheSize.value[category] = prettifyFileSize(
+        await calculateCacheSizeSum(await cacheNames(category))
+      )
+    })
+  )
+}
+onMounted(updateCacheSize)
+
+const calculateCacheSizeSum = async (cacheNames: string[]) => {
+  let size = 0
+  await Promise.all(
+    cacheNames.map(async cacheName => {
+      size += await calculateEachCacheSize(cacheName)
+    })
+  )
+  return size
+}
+
+const calculateEachCacheSize = async (cacheName: string) => {
+  const cache = await window.caches.open(cacheName)
+  const keys = await cache.keys()
+  let size = 0
+  await Promise.all(
+    keys.map(async key => {
+      const response = await cache.match(key)
+      if (!response) return
+      const blob = await response.blob()
+      size += blob.size
+    })
+  )
+  return size
+}
+
+const cacheLabel = (cacheCategory: CacheCategory) => {
+  switch (cacheCategory) {
+    case 'traQ_S-precache':
+      return 'traQ本体'
+    case 'files-cache':
+      return 'ファイルの本体一覧'
+    case 'thumbnail-cache':
+      return 'ファイルのサムネイル一覧'
+    default:
+      throw new Error(
+        `Unknown cache name: ${cacheCategory satisfies CacheCategory}`
+      )
+  }
+}
+
+const { clearModal } = useModalStore()
+
+const isClearingCache = ref(false)
+
+const clearMainCachePromises = async () => {
+  const names = await cacheNames('traQ_S-precache')
+  return names.map(name => {
+    clearCacheStorage(name)
+  })
+}
+
+const clearCache = async () => {
+  if (isClearingCache.value || !confirmClear()) return
+  isClearingCache.value = true
+  const promises = []
+  if (cacheCategoryToIsSelected.value['traQ_S-precache']) {
+    promises.push(clearMainCachePromises())
+  }
+  if (cacheCategoryToIsSelected.value['files-cache']) {
+    promises.push(clearCacheStorage('files-cache'))
+  }
+  if (cacheCategoryToIsSelected.value['thumbnail-cache']) {
+    promises.push(clearCacheStorage('thumbnail-cache'))
+  }
+  await Promise.all(promises.flat())
+  if (!cacheCategoryToIsSelected.value['traQ_S-precache']) {
+    isClearingCache.value = false
+    clearModal()
+    showToast()
+    return
+  }
+  const registration = await navigator.serviceWorker?.getRegistration()
+  if (!registration) {
+    isClearingCache.value = false
+    clearModal()
+    showToast()
+    return
+  }
+  registration.unregister()
+  isClearingCache.value = false
+  showToast('1秒後にリロードします')
+  await wait(1000)
+  clearModal()
+  window.location.reload()
+}
+</script>
+
+<style lang="scss" module>
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+.checkboxContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.checkbox {
+  @include color-ui-secondary;
+  &:has(:checked) {
+    @include color-ui-primary;
+  }
+  display: flex;
+  justify-content: space-between;
+  gap: 4px;
+  padding: 8px;
+  align-items: center;
+  cursor: pointer;
+  border: solid 2px transparent;
+  border-radius: 4px;
+  &:focus-within {
+    border-color: $theme-accent-focus-default;
+  }
+}
+.label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 8px 16px;
+}
+.buttonContainer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+}
+</style>
diff --git a/src/components/Settings/BrowserTab/CacheManager.vue b/src/components/Settings/BrowserTab/CacheManager.vue
index fd32f080c3..14140cf35b 100644
--- a/src/components/Settings/BrowserTab/CacheManager.vue
+++ b/src/components/Settings/BrowserTab/CacheManager.vue
@@ -1,32 +1,16 @@
 <template>
   <div>
-    <h3 :class="$style.header">キャッシュの削除</h3>
-    <div :class="$style.content">
+    <h3 :class="$style.header">キャッシュ</h3>
+    <div>
       <p v-if="cacheData && cacheData.usage" :class="$style.usage">
-        使用量:
-        <template v-if="cacheData.usageDetails">
-          <span v-for="(usage, key) in cacheData.usageDetails" :key="key">
-            {{ prettifyFileSize(usage) }} ({{ key }})
-          </span>
-        </template>
-        <template v-else>
-          {{ prettifyFileSize(cacheData.usage) }}
-        </template>
+        <span>{{ prettifyFileSize(cacheData.usage) }}</span>
       </p>
       <form-button
         :class="$style.button"
-        label="traQ本体"
-        @click="clearMainCache"
-      />
-      <form-button
-        :class="$style.button"
-        label="ファイルの本体一覧"
-        @click="clearFileCache"
-      />
-      <form-button
-        :class="$style.button"
-        label="ファイルのサムネイル一覧"
-        @click="clearThumbnailCache"
+        label="削除する"
+        type="secondary"
+        is-danger
+        @click="openClearCacheModal"
       />
     </div>
   </div>
@@ -34,17 +18,8 @@
 
 <script lang="ts">
 import { onMounted, ref } from 'vue'
-import { useToastStore } from '/@/store/ui/toast'
-import { wait } from '/@/lib/basic/timer'
 import { checkStorageManagerSupport } from '/@/lib/dom/browser'
 import { prettifyFileSize } from '/@/lib/basic/file'
-import { useStampsStore } from '/@/store/entities/stamps'
-
-declare global {
-  interface StorageEstimate {
-    usageDetails: Record<string, number>
-  }
-}
 
 const isStorageManagerSupported = checkStorageManagerSupport()
 const getStorageUsage = async () => {
@@ -52,21 +27,11 @@ const getStorageUsage = async () => {
 
   return navigator.storage.estimate()
 }
-
-const confirmClear = () => window.confirm('本当に削除しますか？')
-
-/* CacheStorageのnameはsw.jsを参照 */
-const clearCacheStorage = (cacheName: string) => window.caches.delete(cacheName)
 </script>
 
 <script lang="ts" setup>
 import FormButton from '/@/components/UI/FormButton.vue'
-
-const { fetchStamps } = useStampsStore()
-const { addSuccessToast } = useToastStore()
-const showToast = (extraMesage?: string) => {
-  addSuccessToast(`削除に成功しました${extraMesage ? `: ${extraMesage}` : ''}`)
-}
+import { useModalStore } from '/@/store/ui/modal'
 
 const cacheData = ref<StorageEstimate | null>(null)
 const setCacheData = async () => {
@@ -74,37 +39,11 @@ const setCacheData = async () => {
 }
 onMounted(setCacheData)
 
-const clearMainCache = async () => {
-  if (!confirmClear()) return
-
-  const names = await window.caches.keys()
-  await Promise.all(
-    names
-      .filter(name => name.startsWith('traQ_S-precache'))
-      .map(name => clearCacheStorage(name))
-  )
-  const registration = await navigator.serviceWorker?.getRegistration()
-  if (registration) {
-    registration.unregister()
-    showToast('1秒後にリロードします')
-    setCacheData()
-    await wait(1000)
-    window.location.reload()
-  } else {
-    showToast()
-  }
-}
-const clearFileCache = async () => {
-  if (!confirmClear()) return
-  await clearCacheStorage('files-cache')
-  setCacheData()
-  showToast()
-}
-const clearThumbnailCache = async () => {
-  if (!confirmClear()) return
-  await clearCacheStorage('thumbnail-cache')
-  setCacheData()
-  showToast()
+const { pushModal } = useModalStore()
+const openClearCacheModal = async () => {
+  pushModal({
+    type: 'settings-cache-clear'
+  })
 }
 </script>
 
@@ -112,9 +51,6 @@ const clearThumbnailCache = async () => {
 .header {
   margin-bottom: 8px;
 }
-.content {
-  margin-left: 12px;
-}
 .usage {
   margin-bottom: 8px;
 }
diff --git a/src/components/Settings/BrowserTab/ModifierKeys.vue b/src/components/Settings/BrowserTab/ModifierKeys.vue
index 6740db4fbd..3d1eada6fc 100644
--- a/src/components/Settings/BrowserTab/ModifierKeys.vue
+++ b/src/components/Settings/BrowserTab/ModifierKeys.vue
@@ -2,20 +2,24 @@
   <div :class="$style.container">
     <h3>修飾キーとして利用するキー</h3>
     <div :class="$style.checkbox" :data-is-checked="shift">
-      <form-checkbox v-model="shift" :label="getModifierKeyName('shift')" />
+      <form-checkbox v-model="shift">
+        {{ getModifierKeyName('shift') }}
+      </form-checkbox>
     </div>
     <div :class="$style.checkbox" :data-is-checked="alt">
-      <form-checkbox v-model="alt" :label="getModifierKeyName('alt')" />
+      <form-checkbox v-model="alt">
+        {{ getModifierKeyName('alt') }}
+      </form-checkbox>
     </div>
     <div :class="$style.checkbox" :data-is-checked="ctrl">
-      <form-checkbox v-model="ctrl" :label="getModifierKeyName('ctrl')" />
+      <form-checkbox v-model="ctrl">
+        {{ getModifierKeyName('ctrl') }}
+      </form-checkbox>
     </div>
     <div :class="$style.checkbox" :data-is-checked="macCtrl">
-      <form-checkbox
-        v-if="macFlag"
-        v-model="macCtrl"
-        :label="getModifierKeyName('macCtrl')"
-      />
+      <form-checkbox v-if="macFlag" v-model="macCtrl">
+        {{ getModifierKeyName('macCtrl') }}
+      </form-checkbox>
     </div>
   </div>
 </template>
diff --git a/src/components/UI/FormCheckbox.vue b/src/components/UI/FormCheckbox.vue
index 86d4914e7f..73eda8d360 100644
--- a/src/components/UI/FormCheckbox.vue
+++ b/src/components/UI/FormCheckbox.vue
@@ -1,7 +1,7 @@
 <template>
-  <label :class="$style.label">
+  <label :class="$style.checkbox">
     <form-checkbox-inner v-model="value" />
-    {{ label }}
+    <slot></slot>
   </label>
 </template>
 
@@ -12,11 +12,9 @@ import { useModelValueSyncer } from '/@/composables/useModelSyncer'
 const props = withDefaults(
   defineProps<{
     modelValue?: boolean
-    label?: string
   }>(),
   {
-    modelValue: false,
-    label: ''
+    modelValue: false
   }
 )
 
@@ -28,7 +26,7 @@ const value = useModelValueSyncer(props, emit)
 </script>
 
 <style lang="scss" module>
-.label {
+.checkbox {
   cursor: pointer;
 
   border: solid 2px transparent;
@@ -37,40 +35,4 @@ const value = useModelValueSyncer(props, emit)
     border-color: $theme-accent-focus-default;
   }
 }
-
-.checkbox {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.pseudoCheckbox {
-  display: inline-block;
-  position: relative;
-  height: 13px;
-  width: 13px;
-  border: solid 2px $theme-ui-primary-default;
-  border-radius: 4px;
-  vertical-align: middle;
-  &[aria-checked='false'] {
-    opacity: 0.5;
-  }
-}
-.pseudoCheckboxInner {
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  height: 5px;
-  width: 5px;
-  margin: auto;
-  border-radius: 1px;
-  .pseudoCheckbox[aria-checked='true'] & {
-    background: $theme-ui-primary-background;
-  }
-}
 </style>
diff --git a/src/lib/basic/file.ts b/src/lib/basic/file.ts
index 785ee5a82c..3da90d8e52 100644
--- a/src/lib/basic/file.ts
+++ b/src/lib/basic/file.ts
@@ -59,6 +59,6 @@ const sizePrefix = ['', 'K', 'M', 'G']
 
 /** byteを適当にKBなどに直す */
 export const prettifyFileSize = (byte: number) => {
-  const s = Math.floor(Math.log10(byte) / 3)
+  const s = byte ? Math.floor(Math.log10(byte) / 3) : 0
   return `${Math.round((byte / 1000 ** s) * 100) / 100}${sizePrefix[s]}B`
 }
diff --git a/src/store/ui/modal/states.ts b/src/store/ui/modal/states.ts
index 4e105b4829..208542ee86 100644
--- a/src/store/ui/modal/states.ts
+++ b/src/store/ui/modal/states.ts
@@ -24,6 +24,7 @@ type ModalStateType =
   | 'group-member-edit'
   | 'group-admin-add'
   | 'group-member-add'
+  | 'settings-cache-clear'
 
 export type ModalState =
   | UserModalState
@@ -40,6 +41,7 @@ export type ModalState =
   | GroupMemberEditModalState
   | GroupAdminAddModalState
   | GroupMemberAddModalState
+  | SettingsCacheClearModalState
 
 interface BaseModalState {
   /** モーダル種別 */
@@ -123,3 +125,7 @@ interface GroupMemberAddModalState extends BaseModalState {
   type: 'group-member-add'
   id: UserGroupId
 }
+
+interface SettingsCacheClearModalState extends BaseModalState {
+  type: 'settings-cache-clear'
+}