diff --git a/packages/frontend/src/components/MkRoleSelectDialog.vue b/packages/frontend/src/components/MkRoleSelectDialog.vue
index 14c8232b02..ebafbe5e5b 100644
--- a/packages/frontend/src/components/MkRoleSelectDialog.vue
+++ b/packages/frontend/src/components/MkRoleSelectDialog.vue
@@ -1,15 +1,17 @@
 <template>
-<MkWindow
+<MkModalWindow
 	ref="windowEl"
-	:initialWidth="400"
-	:initialHeight="500"
-	:canResize="false"
-	@close="windowEl?.close()"
-	@closed="$emit('closed')"
+	:withOkButton="false"
+	:okButtonDisabled="false"
+	:width="400"
+	:height="500"
+	@close="onCloseModalWindow"
+	@closed="console.log('MkRoleSelectDialog: closed') ; $emit('dispose')"
 >
 	<template #header>{{ title }}</template>
 	<MkSpacer :marginMin="20" :marginMax="28">
-		<div class="_gaps">
+		<MkLoading v-if="fetching"/>
+		<div v-else class="_gaps">
 			<div :class="$style.header">
 				<MkButton rounded @click="addRole"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 			</div>
@@ -35,7 +37,7 @@
 			</div>
 		</div>
 	</MkSpacer>
-</MkWindow>
+</MkModalWindow>
 </template>
 
 <script setup lang="ts">
@@ -46,14 +48,15 @@ import MkButton from '@/components/MkButton.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkRolePreview from '@/components/MkRolePreview.vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
-import Section from '@/components/form/section.vue';
 import * as os from '@/os.js';
-import MkWindow from '@/components/MkWindow.vue';
 import MkSpacer from '@/components/global/MkSpacer.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import MkLoading from '@/components/global/MkLoading.vue';
 
 const emit = defineEmits<{
 	(ev: 'done', value: Misskey.entities.Role[]),
-	(ev: 'closed'),
+	(ev: 'close'),
+	(ev: 'dispose'),
 }>();
 
 const props = withDefaults(defineProps<{
@@ -70,9 +73,10 @@ const props = withDefaults(defineProps<{
 
 const { initialRoleIds, infoMessage, title, publicOnly } = toRefs(props);
 
-const windowEl = ref<InstanceType<typeof MkWindow>>();
+const windowEl = ref<InstanceType<typeof MkModalWindow>>();
 const roles = ref<Misskey.entities.Role[]>([]);
 const selectedRoleIds = ref<string[]>(initialRoleIds.value ?? []);
+const fetching = ref(false);
 
 const selectedRoles = computed(() => {
 	const r = roles.value.filter(role => selectedRoleIds.value.includes(role.id));
@@ -87,8 +91,10 @@ const selectedRoles = computed(() => {
 });
 
 async function fetchRoles() {
+	fetching.value = true;
 	const result = await misskeyApi('admin/roles/list', {});
 	roles.value = result.filter(it => publicOnly.value ? it.isPublic : true);
+	fetching.value = false;
 }
 
 async function addRole() {
@@ -115,7 +121,13 @@ function onOkClicked() {
 }
 
 function onCancelClicked() {
-	emit('closed');
+	emit('close');
+	windowEl.value?.close();
+}
+
+function onCloseModalWindow() {
+	emit('close');
+	windowEl.value?.close();
 }
 
 fetchRoles();
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index 5f8ffe70bd..e5000f677d 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -489,10 +489,10 @@ export async function selectRole(params: {
 			done: roles => {
 				resolve({ canceled: false, result: roles });
 			},
-			closed: () => {
+			close: () => {
 				resolve({ canceled: true, result: undefined });
 			},
-		}, 'closed');
+		}, 'dispose');
 	});
 }
 
diff --git a/packages/frontend/src/pages/admin/custom-emojis-grid.local.list.vue b/packages/frontend/src/pages/admin/custom-emojis-grid.local.list.vue
index 5e3f1a335d..8d4bd7d3cc 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-grid.local.list.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-grid.local.list.vue
@@ -275,9 +275,9 @@ function setupGrid(): GridSetting {
 				},
 				customValueEditor: async (row) => {
 					// ID直記入は体験的に最悪なのでモーダルを使って入力する
-					const current = gridItems.value[row.index].roleIdsThatCanBeUsedThisEmojiAsReaction.map(it => it.id);
+					const current = gridItems.value[row.index].roleIdsThatCanBeUsedThisEmojiAsReaction;
 					const result = await os.selectRole({
-						initialRoleIds: current,
+						initialRoleIds: current.map(it => it.id),
 						title: i18n.ts.rolesThatCanBeUsedThisEmojiAsReaction,
 						infoMessage: i18n.ts.rolesThatCanBeUsedThisEmojiAsReactionEmptyDescription,
 						publicOnly: true,
diff --git a/packages/frontend/src/pages/admin/custom-emojis-grid.local.register.vue b/packages/frontend/src/pages/admin/custom-emojis-grid.local.register.vue
index 37e4672e2e..07c44326bc 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-grid.local.register.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-grid.local.register.vue
@@ -169,9 +169,9 @@ function setupGrid(): GridSetting {
 				},
 				customValueEditor: async (row) => {
 					// ID直記入は体験的に最悪なのでモーダルを使って入力する
-					const current = gridItems.value[row.index].roleIdsThatCanBeUsedThisEmojiAsReaction.map(it => it.id);
+					const current = gridItems.value[row.index].roleIdsThatCanBeUsedThisEmojiAsReaction;
 					const result = await os.selectRole({
-						initialRoleIds: current,
+						initialRoleIds: current.map(it => it.id),
 						title: i18n.ts.rolesThatCanBeUsedThisEmojiAsReaction,
 						infoMessage: i18n.ts.rolesThatCanBeUsedThisEmojiAsReactionEmptyDescription,
 						publicOnly: true,