diff --git a/src/modules/settings/routes/roles/detail/components/role-info-drawer-detail/index.ts b/src/modules/settings/routes/roles/detail/components/role-info-drawer-detail/index.ts
new file mode 100644
index 0000000000..cfb321d98f
--- /dev/null
+++ b/src/modules/settings/routes/roles/detail/components/role-info-drawer-detail/index.ts
@@ -0,0 +1,4 @@
+import RoleInfoDrawerDetail from './role-info-drawer-detail.vue';
+
+export { RoleInfoDrawerDetail };
+export default RoleInfoDrawerDetail;
diff --git a/src/modules/settings/routes/roles/detail/components/role-info-drawer-detail/role-info-drawer-detail.vue b/src/modules/settings/routes/roles/detail/components/role-info-drawer-detail/role-info-drawer-detail.vue
new file mode 100644
index 0000000000..0485d71a40
--- /dev/null
+++ b/src/modules/settings/routes/roles/detail/components/role-info-drawer-detail/role-info-drawer-detail.vue
@@ -0,0 +1,27 @@
+<template>
+	<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<dl v-if="!isNew && role">
+			<div>
+				<dt>{{ $t('primary_key') }}</dt>
+				<dd>{{ role.id }}</dd>
+			</div>
+		</dl>
+	</drawer-detail>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from '@vue/composition-api';
+
+export default defineComponent({
+	props: {
+		isNew: {
+			type: Boolean,
+			default: false,
+		},
+		role: {
+			type: Object as PropType<any>,
+			default: null,
+		},
+	},
+});
+</script>
diff --git a/src/modules/settings/routes/roles/detail/detail.vue b/src/modules/settings/routes/roles/detail/detail.vue
index 3feaa93cf7..3b9a77f3bd 100644
--- a/src/modules/settings/routes/roles/detail/detail.vue
+++ b/src/modules/settings/routes/roles/detail/detail.vue
@@ -65,9 +65,7 @@
 		</div>
 
 		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div class="format-markdown" v-html="marked($t('page_help_settings_roles_detail'))" />
-			</drawer-detail>
+			<role-info-drawer-detail :is-new="isNew" :role="item" />
 			<revisions-drawer-detail v-if="isNew === false" collection="directus_roles" :primary-key="primaryKey" />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
 				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
@@ -87,6 +85,7 @@ import SaveOptions from '@/views/private/components/save-options';
 import PermissionsManagement from './components/permissions-management';
 import marked from 'marked';
 import useUserStore from '@/stores/user';
+import RoleInfoDrawerDetail from './components/role-info-drawer-detail';
 
 type Values = {
 	[field: string]: any;
@@ -94,7 +93,7 @@ type Values = {
 
 export default defineComponent({
 	name: 'roles-detail',
-	components: { SettingsNavigation, RevisionsDrawerDetail, SaveOptions, PermissionsManagement },
+	components: { SettingsNavigation, RevisionsDrawerDetail, SaveOptions, PermissionsManagement, RoleInfoDrawerDetail },
 	props: {
 		primaryKey: {
 			type: String,