diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index 61a233e728..4c666a8276 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -10,6 +10,8 @@
 	"only_show_the_file_extension": "Only show the file extension",
 	"textarea": "Textarea",
 
+	"role_name": "Role Name",
+
 	"db_only_click_to_configure": "Database Only: Click to Configure ",
 
 	"show_archived_items": "Show Archived Items",
@@ -412,6 +414,7 @@
 	"true": "True",
 	"false": "False",
 	"creating_new_collection": "Creating New Collection",
+	"creating_new_role": "Creating New Role",
 	"status": "Status",
 	"sort": "Sort",
 	"created_by": "Created By",
diff --git a/app/src/modules/settings/index.ts b/app/src/modules/settings/index.ts
index bb9e512ab4..65e2523f71 100644
--- a/app/src/modules/settings/index.ts
+++ b/app/src/modules/settings/index.ts
@@ -12,6 +12,7 @@ import SettingsPresetsBrowse from './routes/presets/browse/browse.vue';
 import SettingsPresetsDetail from './routes/presets/detail.vue';
 import SettingsWebhooksBrowse from './routes/webhooks/browse.vue';
 import SettingsWebhooksDetail from './routes/webhooks/detail.vue';
+import SettingsNewRole from './routes/roles/add-new.vue';
 import SettingsNotFound from './routes/not-found.vue';
 import api from '@/api';
 import { useCollection } from '@/composables/use-collection';
@@ -78,6 +79,15 @@ export default defineModule(({ i18n }) => ({
 			name: 'settings-roles-browse',
 			path: '/roles',
 			component: SettingsRolesBrowse,
+			children: [
+				{
+					path: '+',
+					name: 'settings-add-new-role',
+					components: {
+						add: SettingsNewRole,
+					},
+				}
+			]
 		},
 		{
 			path: '/roles/public',
diff --git a/app/src/modules/settings/routes/roles/add-new.vue b/app/src/modules/settings/routes/roles/add-new.vue
new file mode 100644
index 0000000000..88b57f537b
--- /dev/null
+++ b/app/src/modules/settings/routes/roles/add-new.vue
@@ -0,0 +1,53 @@
+<template>
+	<v-dialog active persistent>
+		<v-card>
+			<v-card-title>
+				{{ $t('create_role') }}
+			</v-card-title>
+			<v-card-text>
+				<v-input v-model="roleName" autofocus :placeholder="$t('role_name') + '...'" />
+			</v-card-text>
+			<v-card-actions>
+				<v-button to="/settings/roles">{{ $t('cancel') }}</v-button>
+				<v-button @click="save" :loading="saving">{{ $t('save') }}</v-button>
+			</v-card-actions>
+		</v-card>
+	</v-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api';
+import api from '@/api';
+import router from '@/router';
+
+export default defineComponent({
+	setup() {
+		const roleName = ref<string>();
+
+		const { saving, error, save } = useSave();
+
+		return { roleName, saving, error, save };
+
+		function useSave() {
+			const saving = ref(false);
+			const error = ref<any>();
+
+			return { saving, error, save };
+
+			async function save() {
+				saving.value = true;
+				error.value = null;
+
+				try {
+					const roleResponse = await api.post('/roles', { name: roleName.value });
+					router.push(`/settings/roles/${roleResponse.data.data.id}`);
+				} catch (err) {
+					error.value = err;
+				} finally {
+					saving.value = false;
+				}
+			}
+		}
+	}
+});
+</script>
diff --git a/app/src/modules/settings/routes/roles/browse.vue b/app/src/modules/settings/routes/roles/browse.vue
index 9cf1b4d06d..43bd1e4e35 100644
--- a/app/src/modules/settings/routes/roles/browse.vue
+++ b/app/src/modules/settings/routes/roles/browse.vue
@@ -52,6 +52,7 @@
 				</template>
 			</v-table>
 		</div>
+		<router-view name="add" />
 	</private-view>
 </template>
 
diff --git a/app/src/modules/settings/routes/roles/detail/detail.vue b/app/src/modules/settings/routes/roles/detail/detail.vue
index a565d43fbb..a671d20f25 100644
--- a/app/src/modules/settings/routes/roles/detail/detail.vue
+++ b/app/src/modules/settings/routes/roles/detail/detail.vue
@@ -1,13 +1,5 @@
 <template>
-	<private-view
-		:title="
-			loading
-				? $t('loading')
-				: isNew === false
-				? $t('editing_role', { role: item && item.name })
-				: $t('creating_role')
-		"
-	>
+	<private-view :title="loading ? $t('loading') : $t('editing_role', { role: item && item.name })">
 		<template #headline>{{ $t('settings_permissions') }}</template>
 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded icon exact :to="`/settings/roles/`">
@@ -85,8 +77,8 @@
 		</div>
 
 		<template #drawer>
-			<role-info-drawer-detail :is-new="isNew" :role="item" />
-			<revisions-drawer-detail v-if="isNew === false" collection="directus_roles" :primary-key="primaryKey" />
+			<role-info-drawer-detail :role="item" />
+			<revisions-drawer-detail collection="directus_roles" :primary-key="primaryKey" />
 		</template>
 	</private-view>
 </template>
@@ -125,7 +117,7 @@ export default defineComponent({
 
 		const { primaryKey } = toRefs(props);
 
-		const { isNew, edits, item, saving, loading, error, save, remove, deleting, saveAsCopy, isBatch } = useItem(
+		const { edits, item, saving, loading, error, save, remove, deleting, saveAsCopy, isBatch } = useItem(
 			ref('directus_roles'),
 			primaryKey
 		);
@@ -147,7 +139,6 @@ export default defineComponent({
 			item,
 			loading,
 			error,
-			isNew,
 			edits,
 			hasEdits,
 			saving,