diff --git a/app/src/composables/use-preset/use-preset.ts b/app/src/composables/use-preset/use-preset.ts
index 2d71a8f114..ccc101e9b7 100644
--- a/app/src/composables/use-preset/use-preset.ts
+++ b/app/src/composables/use-preset/use-preset.ts
@@ -206,8 +206,7 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 		if (collectionInfo.value?.meta?.archive_field && collectionInfo.value?.meta?.archive_app_filter === true) {
 			localPreset.value = {
 				...localPreset.value,
-				filters: [
-					...(localPreset.value.filters || []),
+				filters: localPreset.value.filters || [
 					{
 						key: 'hide-archived',
 						field: collectionInfo.value.meta.archive_field,
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..12c6774a16 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';
@@ -25,7 +26,7 @@ export default defineModule(({ i18n }) => ({
 	routes: [
 		{
 			path: '/',
-			redirect: '/project',
+			redirect: '/data-model',
 		},
 		{
 			name: 'settings-project',
@@ -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/data-model/new-collection.vue b/app/src/modules/settings/routes/data-model/new-collection.vue
index 45590f5677..e09f56fb83 100644
--- a/app/src/modules/settings/routes/data-model/new-collection.vue
+++ b/app/src/modules/settings/routes/data-model/new-collection.vue
@@ -279,8 +279,8 @@ export default defineComponent({
 						options: {
 							choices: [
 								{
-									value: 'published',
 									text: 'Published',
+									value: 'published',
 								},
 								{
 									text: 'Draft',
@@ -293,6 +293,23 @@ export default defineComponent({
 							],
 						},
 						interface: 'dropdown',
+						display: 'color-dot',
+						display_options: {
+							choices: [
+								{
+									color: '#2F80ED',
+									value: 'published',
+								},
+								{
+									color: '#ECEFF1',
+									value: 'draft',
+								},
+								{
+									color: '#F2994A',
+									value: 'archived',
+								},
+							],
+						}
 					},
 					schema: {
 						default_value: 'draft',
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,