diff --git a/src/lang/en-US/index.json b/src/lang/en-US/index.json
index 883efc96b4..ac65ad2705 100644
--- a/src/lang/en-US/index.json
+++ b/src/lang/en-US/index.json
@@ -122,6 +122,8 @@
 	"files": "Files",
 	"activity": "Activity",
 	"webhooks": "Webhooks",
+	"roles": "User Roles",
+
 
 
   "about_directus": "About Directus",
@@ -545,7 +547,6 @@
   "revert_copy": "Do you want to revert this item to how it was on {date}?",
   "role_count": "No Roles | One Role | {count} Roles",
   "role_settings": "Role Settings",
-  "roles": "User Roles",
   "save": "Save",
   "save_as_bookmark": "Save as Bookmark",
   "scan_in_authenticator": "Scan this code in your authenticator app",
diff --git a/src/modules/settings/index.ts b/src/modules/settings/index.ts
index b2d2434563..20ea7def9b 100644
--- a/src/modules/settings/index.ts
+++ b/src/modules/settings/index.ts
@@ -1,7 +1,7 @@
 import { defineModule } from '@/modules/define';
 import SettingsGlobal from './routes/global';
 import { SettingsCollections, SettingsFields } from './routes/data-model/';
-import SettingsRoles from './routes/roles';
+import { SettingsRolesBrowse, SettingsRolesDetail } from './routes/roles';
 import { SettingsWebhooksBrowse, SettingsWebhooksDetail } from './routes/webhooks';
 import SettingsNotFound from './routes/not-found';
 
@@ -31,9 +31,15 @@ export default defineModule(({ i18n }) => ({
 			props: true,
 		},
 		{
-			name: 'settings-roles',
+			name: 'settings-roles-browse',
 			path: '/roles',
-			component: SettingsRoles,
+			component: SettingsRolesBrowse,
+		},
+		{
+			name: 'settings-roles-detail',
+			path: '/roles/:primaryKey',
+			component: SettingsRolesDetail,
+			props: true,
 		},
 		{
 			name: 'settings-webhooks-browse',
diff --git a/src/modules/settings/routes/roles/browse/browse.vue b/src/modules/settings/routes/roles/browse/browse.vue
new file mode 100644
index 0000000000..9eb00fa41a
--- /dev/null
+++ b/src/modules/settings/routes/roles/browse/browse.vue
@@ -0,0 +1,178 @@
+<template>
+	<private-view :title="$t('roles')">
+		<template #title-outer:prepend>
+			<v-button rounded disabled icon secondary>
+				<v-icon name="people" />
+			</v-button>
+		</template>
+
+		<template #drawer><portal-target name="drawer" /></template>
+
+		<template #actions>
+			<v-dialog v-model="confirmDelete">
+				<template #activator="{ on }">
+					<v-button
+						rounded
+						icon
+						class="action-delete"
+						v-if="selection.length > 0"
+						@click="on"
+					>
+						<v-icon name="delete" />
+					</v-button>
+				</template>
+
+				<v-card>
+					<v-card-title>{{ $tc('batch_delete_confirm', selection.length) }}</v-card-title>
+
+					<v-card-actions>
+						<v-button @click="confirmDelete = false" secondary>
+							{{ $t('cancel') }}
+						</v-button>
+						<v-button @click="batchDelete" class="action-delete" :loading="deleting">
+							{{ $t('delete') }}
+						</v-button>
+					</v-card-actions>
+				</v-card>
+			</v-dialog>
+
+			<v-button rounded icon class="action-batch" v-if="selection.length > 1" :to="batchLink">
+				<v-icon name="edit" />
+			</v-button>
+
+			<v-button rounded icon :to="addNewLink">
+				<v-icon name="add" />
+			</v-button>
+		</template>
+
+		<template #navigation>
+			<settings-navigation />
+		</template>
+
+		<layout-tabular
+			class="layout"
+			ref="layout"
+			collection="directus_roles"
+			:selection.sync="selection"
+			:view-options.sync="viewOptions"
+			:view-query.sync="viewQuery"
+			:detail-route="'/{{project}}/settings/roles/{{primaryKey}}'"
+		/>
+	</private-view>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, ref } from '@vue/composition-api';
+import SettingsNavigation from '../../../components/navigation/';
+import useProjectsStore from '@/stores/projects';
+import { i18n } from '@/lang';
+import api from '@/api';
+import { LayoutComponent } from '@/layouts/types';
+import useCollectionPreset from '@/compositions/use-collection-preset';
+
+type Item = {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	[field: string]: any;
+};
+
+export default defineComponent({
+	name: 'roles-browse',
+	components: { SettingsNavigation },
+	props: {},
+	setup() {
+		const layout = ref<LayoutComponent>(null);
+		const projectsStore = useProjectsStore();
+
+		const selection = ref<Item[]>([]);
+
+		const { viewOptions, viewQuery } = useCollectionPreset(ref('directus_roles'));
+		const { addNewLink, batchLink } = useLinks();
+		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
+		const { breadcrumb } = useBreadcrumb();
+
+		return {
+			addNewLink,
+			batchLink,
+			selection,
+			breadcrumb,
+			confirmDelete,
+			batchDelete,
+			deleting,
+			layout,
+			viewOptions,
+			viewQuery,
+		};
+
+		function useBatchDelete() {
+			const confirmDelete = ref(false);
+			const deleting = ref(false);
+
+			return { confirmDelete, deleting, batchDelete };
+
+			async function batchDelete() {
+				const currentProjectKey = projectsStore.state.currentProjectKey;
+
+				deleting.value = true;
+
+				confirmDelete.value = false;
+
+				const batchPrimaryKeys = selection.value.map((item) => item.id).join();
+
+				await api.delete(`/${currentProjectKey}/settings/roles/${batchPrimaryKeys}`);
+
+				await layout.value?.refresh();
+
+				selection.value = [];
+				deleting.value = false;
+				confirmDelete.value = false;
+			}
+		}
+
+		function useLinks() {
+			const addNewLink = computed<string>(() => {
+				const currentProjectKey = projectsStore.state.currentProjectKey;
+				return `/${currentProjectKey}/settings/roles/+`;
+			});
+
+			const batchLink = computed<string>(() => {
+				const currentProjectKey = projectsStore.state.currentProjectKey;
+				const batchPrimaryKeys = selection.value.map((item) => item.id).join();
+				return `/${currentProjectKey}/settings/roles/${batchPrimaryKeys}`;
+			});
+
+			return { addNewLink, batchLink };
+		}
+
+		function useBreadcrumb() {
+			const breadcrumb = computed(() => {
+				const currentProjectKey = projectsStore.state.currentProjectKey;
+
+				return [
+					{
+						name: i18n.tc('collection', 2),
+						to: `/${currentProjectKey}/collections`,
+					},
+				];
+			});
+
+			return { breadcrumb };
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.action-delete {
+	--v-button-background-color: var(--danger);
+	--v-button-background-color-hover: var(--danger-dark);
+}
+
+.action-batch {
+	--v-button-background-color: var(--warning);
+	--v-button-background-color-hover: var(--warning-150);
+}
+
+.layout {
+	--layout-offset-top: 64px;
+}
+</style>
diff --git a/src/modules/settings/routes/roles/browse/index.ts b/src/modules/settings/routes/roles/browse/index.ts
new file mode 100644
index 0000000000..0128cff703
--- /dev/null
+++ b/src/modules/settings/routes/roles/browse/index.ts
@@ -0,0 +1,4 @@
+import RolesBrowse from './browse.vue';
+
+export { RolesBrowse };
+export default RolesBrowse;
diff --git a/src/modules/settings/routes/roles/detail/detail.vue b/src/modules/settings/routes/roles/detail/detail.vue
new file mode 100644
index 0000000000..c22b58bdd5
--- /dev/null
+++ b/src/modules/settings/routes/roles/detail/detail.vue
@@ -0,0 +1,197 @@
+<template>
+	<private-view :title="$t('editing', { collection: $t('roles') })">
+		<template #title-outer:prepend>
+			<v-button rounded icon secondary exact :to="breadcrumb[0].to">
+				<v-icon name="arrow_back" />
+			</v-button>
+		</template>
+
+		<template #headline>
+			<v-breadcrumb :items="breadcrumb" />
+		</template>
+
+		<template #actions>
+			<v-dialog v-model="confirmDelete">
+				<template #activator="{ on }">
+					<v-button
+						rounded
+						icon
+						class="action-delete"
+						:disabled="item === null"
+						@click="on"
+					>
+						<v-icon name="delete" />
+					</v-button>
+				</template>
+
+				<v-card>
+					<v-card-title>{{ $t('delete_are_you_sure') }}</v-card-title>
+
+					<v-card-actions>
+						<v-button @click="confirmDelete = false" secondary>
+							{{ $t('cancel') }}
+						</v-button>
+						<v-button @click="deleteAndQuit" class="action-delete" :loading="deleting">
+							{{ $t('delete') }}
+						</v-button>
+					</v-card-actions>
+				</v-card>
+			</v-dialog>
+
+			<v-button
+				rounded
+				icon
+				:loading="saving"
+				:disabled="hasEdits === false"
+				@click="saveAndQuit"
+			>
+				<v-icon name="check" />
+
+				<template #append-outer>
+					<save-options
+						:disabled="hasEdits === false"
+						@save-and-stay="saveAndStay"
+						@save-and-add-new="saveAndAddNew"
+						@save-as-copy="saveAsCopyAndNavigate"
+					/>
+				</template>
+			</v-button>
+		</template>
+
+		<template #navigation>
+			<settings-navigation />
+		</template>
+
+		<v-form
+			collection="directus_roles"
+			:loading="loading"
+			:initial-values="item"
+			:batch-mode="isBatch"
+			v-model="edits"
+		/>
+
+		<template #drawer>
+			<activity-drawer-detail
+				v-if="isNew === false"
+				collection="directus_roles"
+				:primary-key="primaryKey"
+			/>
+		</template>
+	</private-view>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, toRefs, ref } from '@vue/composition-api';
+import useProjectsStore from '@/stores/projects';
+import SettingsNavigation from '../../../components/navigation/';
+import { i18n } from '@/lang';
+import router from '@/router';
+import ActivityDrawerDetail from '@/views/private/components/activity-drawer-detail';
+import useItem from '@/compositions/use-item';
+import SaveOptions from '@/views/private/components/save-options';
+
+type Values = {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	[field: string]: any;
+};
+
+export default defineComponent({
+	name: 'roles-detail',
+	components: { SettingsNavigation, ActivityDrawerDetail, SaveOptions },
+	props: {
+		primaryKey: {
+			type: String,
+			required: true,
+		},
+	},
+	setup(props) {
+		const projectsStore = useProjectsStore();
+		const { currentProjectKey } = toRefs(projectsStore.state);
+		const { primaryKey } = toRefs(props);
+		const { breadcrumb } = useBreadcrumb();
+
+		const {
+			isNew,
+			edits,
+			item,
+			saving,
+			loading,
+			error,
+			save,
+			remove,
+			deleting,
+			saveAsCopy,
+			isBatch,
+		} = useItem(ref('directus_roles'), primaryKey);
+
+		const hasEdits = computed<boolean>(() => Object.keys(edits.value).length > 0);
+
+		const confirmDelete = ref(false);
+
+		return {
+			item,
+			loading,
+			error,
+			isNew,
+			breadcrumb,
+			edits,
+			hasEdits,
+			saving,
+			saveAndQuit,
+			deleteAndQuit,
+			confirmDelete,
+			deleting,
+			saveAndStay,
+			saveAndAddNew,
+			saveAsCopyAndNavigate,
+			isBatch,
+		};
+
+		function useBreadcrumb() {
+			const breadcrumb = computed(() => [
+				{
+					name: i18n.t('roles'),
+					to: `/${currentProjectKey.value}/settings/roles/`,
+				},
+			]);
+
+			return { breadcrumb };
+		}
+
+		async function saveAndQuit() {
+			await save();
+			router.push(`/${currentProjectKey.value}/settings/roles`);
+		}
+
+		async function saveAndStay() {
+			await save();
+		}
+
+		async function saveAndAddNew() {
+			await save();
+			router.push(`/${currentProjectKey.value}/settings/roles/+`);
+		}
+
+		async function saveAsCopyAndNavigate() {
+			const newPrimaryKey = await saveAsCopy();
+			router.push(`/${currentProjectKey.value}/settings/roles/${newPrimaryKey}`);
+		}
+
+		async function deleteAndQuit() {
+			await remove();
+			router.push(`/${currentProjectKey.value}/settings/roles`);
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.action-delete {
+	--v-button-background-color: var(--danger);
+	--v-button-background-color-hover: var(--danger-dark);
+}
+
+.v-form {
+	padding: var(--content-padding);
+}
+</style>
diff --git a/src/modules/settings/routes/roles/detail/index.ts b/src/modules/settings/routes/roles/detail/index.ts
new file mode 100644
index 0000000000..8dde27d52e
--- /dev/null
+++ b/src/modules/settings/routes/roles/detail/index.ts
@@ -0,0 +1,4 @@
+import RolesDetail from './detail.vue';
+
+export { RolesDetail };
+export default RolesDetail;
diff --git a/src/modules/settings/routes/roles/global/global.vue b/src/modules/settings/routes/roles/global/global.vue
deleted file mode 100644
index ab6f266bae..0000000000
--- a/src/modules/settings/routes/roles/global/global.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-	<private-view :title="$t('settings_global')">
-		<template #navigation>
-			<settings-navigation />
-		</template>
-	</private-view>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-import SettingsNavigation from '../../../components/navigation/';
-
-export default defineComponent({
-	components: { SettingsNavigation },
-});
-</script>
diff --git a/src/modules/settings/routes/roles/global/index.ts b/src/modules/settings/routes/roles/global/index.ts
deleted file mode 100644
index b016d6a58e..0000000000
--- a/src/modules/settings/routes/roles/global/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import SettingsGlobal from './global.vue';
-
-export { SettingsGlobal };
-export default SettingsGlobal;
diff --git a/src/modules/settings/routes/roles/index.ts b/src/modules/settings/routes/roles/index.ts
index 503b10ba03..f18b1ee0ee 100644
--- a/src/modules/settings/routes/roles/index.ts
+++ b/src/modules/settings/routes/roles/index.ts
@@ -1,4 +1,5 @@
-import SettingsRoles from './roles.vue';
+import SettingsRolesBrowse from './browse/';
+import SettingsRolesDetail from './detail/';
 
-export { SettingsRoles };
-export default SettingsRoles;
+export { SettingsRolesBrowse, SettingsRolesDetail };
+export default { SettingsRolesBrowse, SettingsRolesDetail };
diff --git a/src/modules/settings/routes/roles/roles.vue b/src/modules/settings/routes/roles/roles.vue
deleted file mode 100644
index 05fabd7421..0000000000
--- a/src/modules/settings/routes/roles/roles.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-	<private-view :title="$t('settings_permissions')">
-		<template #navigation>
-			<settings-navigation />
-		</template>
-	</private-view>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-import SettingsNavigation from '../../components/navigation/';
-
-export default defineComponent({
-	components: { SettingsNavigation },
-});
-</script>
diff --git a/src/modules/settings/routes/webhooks/browse/browse.vue b/src/modules/settings/routes/webhooks/browse/browse.vue
index ed4c8f8efe..ddd0eb01b6 100644
--- a/src/modules/settings/routes/webhooks/browse/browse.vue
+++ b/src/modules/settings/routes/webhooks/browse/browse.vue
@@ -56,7 +56,7 @@
 			:selection.sync="selection"
 			:view-options.sync="viewOptions"
 			:view-query.sync="viewQuery"
-			:detail-route="'/{{project}}/settings/settings/webhooks/{{primaryKey}}'"
+			:detail-route="'/{{project}}/settings/webhooks/{{primaryKey}}'"
 		/>
 	</private-view>
 </template>
diff --git a/src/modules/settings/routes/webhooks/browse/index.ts b/src/modules/settings/routes/webhooks/browse/index.ts
index c0ef6ea919..0d357e16f4 100644
--- a/src/modules/settings/routes/webhooks/browse/index.ts
+++ b/src/modules/settings/routes/webhooks/browse/index.ts
@@ -1,4 +1,4 @@
-import FilesBrowse from './browse.vue';
+import WebhooksBrowse from './browse.vue';
 
-export { FilesBrowse };
-export default FilesBrowse;
+export { WebhooksBrowse };
+export default WebhooksBrowse;
diff --git a/src/modules/settings/routes/webhooks/detail/detail.vue b/src/modules/settings/routes/webhooks/detail/detail.vue
index da3176c5e4..a4c8c281de 100644
--- a/src/modules/settings/routes/webhooks/detail/detail.vue
+++ b/src/modules/settings/routes/webhooks/detail/detail.vue
@@ -160,7 +160,7 @@ export default defineComponent({
 
 		async function saveAndQuit() {
 			await save();
-			router.push(`/${currentProjectKey.value}/webhooks`);
+			router.push(`/${currentProjectKey.value}/settings/webhooks`);
 		}
 
 		async function saveAndStay() {
diff --git a/src/modules/settings/routes/webhooks/detail/index.ts b/src/modules/settings/routes/webhooks/detail/index.ts
index 99de591237..2a233474ca 100644
--- a/src/modules/settings/routes/webhooks/detail/index.ts
+++ b/src/modules/settings/routes/webhooks/detail/index.ts
@@ -1,4 +1,4 @@
-import FilesDetail from './detail.vue';
+import WebhooksDetail from './detail.vue';
 
-export { FilesDetail };
-export default FilesDetail;
+export { WebhooksDetail };
+export default WebhooksDetail;