diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index a04d59b0a4..133d229f3d 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1098,7 +1098,6 @@ likeOnlyForRemote: "全て (リモートはいいねのみ)"
 nonSensitiveOnly: "非センシティブのみ"
 nonSensitiveOnlyForLocalLikeOnlyForRemote: "非センシティブのみ (リモートはいいねのみ)"
 rolesAssignedToMe: "自分に割り当てられたロール"
-roleSettings: "ロール設定"
 resetPasswordConfirm: "パスワードリセットしますか？"
 sensitiveWords: "センシティブワード"
 sensitiveWordsDescription: "設定したワードが含まれるノートの公開範囲をホームにします。改行で区切って複数設定できます。"
@@ -3247,10 +3246,9 @@ _gridComponent:
     notUnique: "この値は一意である必要があります"
 
 _roleDisplay:
-  title: "表示するロール/ロールバッジ"
-  description: "自分のプロフィールやノートに表示する公開ロールを選択します。"
+  description: "自分のプロフィールやノートに表示するロールを選択します。"
+  displayToggle: "ロール/ロールバッジを表示する"
   alwaysShownByAdmin: "管理者により常に表示するよう設定されています。"
-  noRoles: "表示できる公開ロールはありません。"
 
 _roleSelectDialog:
   notSelected: "選択されていません"
diff --git a/packages/frontend/assets/label_3d.png b/packages/frontend/assets/label_3d.png
new file mode 100644
index 0000000000..27993d0a7f
Binary files /dev/null and b/packages/frontend/assets/label_3d.png differ
diff --git a/packages/frontend/src/pages/admin/roles.editor.vue b/packages/frontend/src/pages/admin/roles.editor.vue
index 94261865e9..81f00666b2 100644
--- a/packages/frontend/src/pages/admin/roles.editor.vue
+++ b/packages/frontend/src/pages/admin/roles.editor.vue
@@ -62,12 +62,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<template #caption>{{ i18n.ts._role.descriptionOfIsPublic }}</template>
 	</MkSwitch>
 
-	<MkSwitch v-if="role.isPublic" v-model="role.isPublicDisplayRequired" :readonly="readonly">
+	<MkSwitch v-model="role.isPublicDisplayRequired" :disabled="!role.isPublic" :readonly="readonly">
 		<template #label>{{ i18n.ts._role.isPublicDisplayRequired }}</template>
 		<template #caption>{{ i18n.ts._role.descriptionOfIsPublicDisplayRequired }}</template>
 	</MkSwitch>
 
-	<MkSwitch v-model="role.asBadge" :readonly="readonly">
+	<MkSwitch v-model="role.asBadge" :disabled="!role.isPublic" :readonly="readonly">
 		<template #label>{{ i18n.ts._role.asBadge }}</template>
 		<template #caption>{{ i18n.ts._role.descriptionOfAsBadge }}</template>
 	</MkSwitch>
diff --git a/packages/frontend/src/pages/settings/index.vue b/packages/frontend/src/pages/settings/index.vue
index 9a1f1291f3..e92abe3095 100644
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@@ -95,7 +95,7 @@ const menuDef = computed<SuperMenuDef[]>(() => [{
 		active: currentPage.value?.route.name === 'privacy',
 	}, {
 		icon: 'ti ti-badges',
-		text: i18n.ts.roleSettings,
+		text: i18n.ts.roles,
 		to: '/settings/roles',
 		active: currentPage.value?.route.name === 'roles',
 	}, {
diff --git a/packages/frontend/src/pages/settings/roles.vue b/packages/frontend/src/pages/settings/roles.vue
index 2f09ea6970..bcb51d1a46 100644
--- a/packages/frontend/src/pages/settings/roles.vue
+++ b/packages/frontend/src/pages/settings/roles.vue
@@ -4,19 +4,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<SearchMarker path="/settings/roles" :label="i18n.ts.roleSettings" :keywords="['role', 'badge']" icon="ti ti-badges">
+<SearchMarker path="/settings/roles" :label="i18n.ts.roles" :keywords="['role', 'badge']" icon="ti ti-badges">
 	<div class="_gaps_m">
+		<MkFeatureBanner icon="/client-assets/label_3d.png" color="#ffbf00">
+			<SearchText>{{ i18n.ts._roleDisplay.description }}</SearchText>
+		</MkFeatureBanner>
 		<SearchMarker :keywords="['roles']">
 			<div class="_gaps_s">
-				<MkInfo v-if="roleDisplayRoles.length === 0">{{ i18n.ts._roleDisplay.noRoles }}</MkInfo>
-				<div v-for="role in roleDisplayRoles" :key="role.id" :class="$style.roleItem">
+				<MkResult v-if="roleDisplayRoles.length === 0" type="empty"/>
+				<div v-for="role in roleDisplayRoles" :key="role.id" class="_panel _gaps_s" :class="$style.roleItem">
 					<MkRolePreview :role="role" :forModeration="false"/>
 					<MkSwitch
 						:modelValue="isRoleDisplayShown(role)"
 						:disabled="role.isPublicDisplayRequired"
 						@update:modelValue="value => updateRoleDisplay(role, value)"
 					>
-						<template #label>{{ i18n.ts._roleDisplay.title }}</template>
+						<template #label>{{ i18n.ts._roleDisplay.displayToggle }}</template>
 						<template v-if="role.isPublicDisplayRequired" #caption>{{ i18n.ts._roleDisplay.alwaysShownByAdmin }}</template>
 					</MkSwitch>
 				</div>
@@ -30,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref, computed } from 'vue';
 import type * as Misskey from 'misskey-js';
 import MkSwitch from '@/components/MkSwitch.vue';
-import MkInfo from '@/components/MkInfo.vue';
+import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
 import MkRolePreview from '@/components/MkRolePreview.vue';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
@@ -40,31 +43,18 @@ import { updateCurrentAccount } from '@/accounts.js';
 
 const $i = ensureSignin();
 
-type RoleDisplayRole = Misskey.entities.IResponse['roles'][number] & {
-	isPublicDisplayRequired?: boolean;
-};
-type MeDetailedWithRoleDisplay = Misskey.entities.MeDetailed & {
-	hiddenRoleIds?: string[];
-	roles: RoleDisplayRole[];
-};
-type IUpdateWithHiddenRoleIdsRequest = Misskey.Endpoints['i/update']['req'] & {
-	hiddenRoleIds: string[];
-};
-
-const me = $i as MeDetailedWithRoleDisplay;
-
-const hiddenRoleIds = ref([...getHiddenRoleIds(me)]);
-const roleDisplayRoles = computed(() => me.roles);
+const hiddenRoleIds = ref([...getHiddenRoleIds($i)]);
+const roleDisplayRoles = computed(() => $i.roles);
 
 function getHiddenRoleIds(user: { hiddenRoleIds?: string[] }): string[] {
 	return user.hiddenRoleIds ?? [];
 }
 
-function isRoleDisplayShown(role: RoleDisplayRole): boolean {
+function isRoleDisplayShown(role: Misskey.entities.RoleLite): boolean {
 	return role.isPublicDisplayRequired === true || !hiddenRoleIds.value.includes(role.id);
 }
 
-async function updateRoleDisplay(role: RoleDisplayRole, visible: boolean) {
+async function updateRoleDisplay(role: Misskey.entities.RoleLite, visible: boolean) {
 	if (role.isPublicDisplayRequired === true) return;
 
 	const nextHiddenRoleIds = new Set(hiddenRoleIds.value);
@@ -77,7 +67,8 @@ async function updateRoleDisplay(role: RoleDisplayRole, visible: boolean) {
 	const nextIds = roleDisplayRoles.value
 		.filter(role => role.isPublicDisplayRequired !== true && nextHiddenRoleIds.has(role.id))
 		.map(role => role.id);
-	const updated = await misskeyApi<MeDetailedWithRoleDisplay, 'i/update', IUpdateWithHiddenRoleIdsRequest>('i/update', {
+
+	const updated = await misskeyApi('i/update', {
 		hiddenRoleIds: nextIds,
 	});
 
@@ -86,15 +77,13 @@ async function updateRoleDisplay(role: RoleDisplayRole, visible: boolean) {
 }
 
 definePage(() => ({
-	title: i18n.ts.roleSettings,
+	title: i18n.ts.roles,
 	icon: 'ti ti-badges',
 }));
 </script>
 
 <style lang="scss" module>
 .roleItem {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
+	padding: 16px;
 }
 </style>
diff --git a/packages/i18n/src/autogen/locale.ts b/packages/i18n/src/autogen/locale.ts
index 6a9c829f77..556c5e1aec 100644
--- a/packages/i18n/src/autogen/locale.ts
+++ b/packages/i18n/src/autogen/locale.ts
@@ -4404,10 +4404,6 @@ export interface Locale extends ILocale {
      * 自分に割り当てられたロール
      */
     "rolesAssignedToMe": string;
-    /**
-     * ロール設定
-     */
-    "roleSettings": string;
     /**
      * パスワードリセットしますか？
      */
@@ -12185,21 +12181,17 @@ export interface Locale extends ILocale {
     };
     "_roleDisplay": {
         /**
-         * 表示するロール/ロールバッジ
-         */
-        "title": string;
-        /**
-         * 自分のプロフィールやノートに表示する公開ロールを選択します。
+         * 自分のプロフィールやノートに表示するロールを選択します。
          */
         "description": string;
+        /**
+         * ロール/ロールバッジを表示する
+         */
+        "displayToggle": string;
         /**
          * 管理者により常に表示するよう設定されています。
          */
         "alwaysShownByAdmin": string;
-        /**
-         * 表示できる公開ロールはありません。
-         */
-        "noRoles": string;
     };
     "_roleSelectDialog": {
         /**