diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index 9fb9ab45fb..906a391086 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -21,6 +21,12 @@
 	"markdown": "Markdown",
 	"tabbed": "Tabbed",
 
+	"all_access": "All Access",
+	"no_access": "No Access",
+	"use_custom": "Use Custom",
+	"edit_custom": "Edit Custom",
+
+
 	"presentation_and_aliases": "Presentation & Aliases",
 
 	"revision_post_update": "Here is what this item looked like after the update...",
diff --git a/app/src/modules/settings/routes/roles/detail/components/permissions-overview/index.ts b/app/src/modules/settings/routes/roles/detail/components/permissions-overview/index.ts
new file mode 100644
index 0000000000..70f90574a9
--- /dev/null
+++ b/app/src/modules/settings/routes/roles/detail/components/permissions-overview/index.ts
@@ -0,0 +1,4 @@
+import PermissionsOverview from './permissions-overview.vue';
+
+export { PermissionsOverview };
+export default PermissionsOverview;
diff --git a/app/src/modules/settings/routes/roles/detail/components/permissions-overview/permissions-overview-header.vue b/app/src/modules/settings/routes/roles/detail/components/permissions-overview/permissions-overview-header.vue
new file mode 100644
index 0000000000..96cb7c3487
--- /dev/null
+++ b/app/src/modules/settings/routes/roles/detail/components/permissions-overview/permissions-overview-header.vue
@@ -0,0 +1,34 @@
+<template>
+	<div class="permissions-overview-header">
+		<span class="name">{{ $t('collection') }}</span>
+		<v-icon name="add" />
+		<v-icon name="visibility" />
+		<v-icon name="edit" />
+		<v-icon name="delete" />
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({});
+</script>
+
+<style lang="scss" scoped>
+.permissions-overview-header {
+	--v-icon-color: var(--foreground-subdued);
+
+	display: flex;
+	padding: 12px;
+	border-bottom: var(--border-width) solid var(--border-normal);
+
+	.name {
+		flex-grow: 1;
+		font-weight: 600;
+	}
+
+	.v-icon + .v-icon {
+		margin-left: 20px;
+	}
+}
+</style>
diff --git a/app/src/modules/settings/routes/roles/detail/components/permissions-overview/permissions-overview-row.vue b/app/src/modules/settings/routes/roles/detail/components/permissions-overview/permissions-overview-row.vue
new file mode 100644
index 0000000000..a19a9927d4
--- /dev/null
+++ b/app/src/modules/settings/routes/roles/detail/components/permissions-overview/permissions-overview-row.vue
@@ -0,0 +1,52 @@
+<template>
+	<div class="permissions-overview-row">
+		<span class="name">
+			{{ collection.name }}
+		</span>
+
+		<permissions-overview-toggle :collection="collection" :role="role" action="create" />
+		<permissions-overview-toggle :collection="collection" :role="role" action="read" />
+		<permissions-overview-toggle :collection="collection" :role="role" action="update" />
+		<permissions-overview-toggle :collection="collection" :role="role" action="delete" />
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from '@vue/composition-api';
+import { Collection } from '@/types';
+import PermissionsOverviewToggle from './permissions-overview-toggle.vue';
+
+export default defineComponent({
+	components: { PermissionsOverviewToggle },
+	props: {
+		role: {
+			type: String,
+			required: true,
+		},
+		collection: {
+			type: Object as PropType<Collection>,
+			required: true,
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.permissions-overview-row {
+	display: flex;
+	padding: 12px;
+	background-color: var(--background-page);
+
+	.name {
+		flex-grow: 1;
+	}
+
+	.permissions-overview-toggle + .permissions-overview-toggle {
+		margin-left: 20px;
+	}
+
+	& + .permissions-overview-row {
+		border-top: var(--border-width) solid var(--border-subdued);
+	}
+}
+</style>
diff --git a/app/src/modules/settings/routes/roles/detail/components/permissions-overview/permissions-overview-toggle.vue b/app/src/modules/settings/routes/roles/detail/components/permissions-overview/permissions-overview-toggle.vue
new file mode 100644
index 0000000000..2c88ebbd86
--- /dev/null
+++ b/app/src/modules/settings/routes/roles/detail/components/permissions-overview/permissions-overview-toggle.vue
@@ -0,0 +1,73 @@
+<template>
+	<div class="permissions-overview-toggle">
+		<v-menu show-arrow>
+			<template #activator="{ toggle }">
+				<v-icon @click="toggle" name="check" />
+			</template>
+
+			<v-list dense>
+				<v-list-item>
+					<v-list-item-icon>
+						<v-icon name="check" />
+					</v-list-item-icon>
+					<v-list-item-content>
+						{{ $t('all_access') }}
+					</v-list-item-content>
+				</v-list-item>
+
+				<v-list-item>
+					<v-list-item-icon>
+						<v-icon name="block" />
+					</v-list-item-icon>
+					<v-list-item-content>
+						{{ $t('no_access') }}
+					</v-list-item-content>
+				</v-list-item>
+
+				<v-divider />
+
+				<v-list-item>
+					<v-list-item-icon>
+						<v-icon name="rule" />
+					</v-list-item-icon>
+					<v-list-item-content>
+						{{ $t('use_custom') }}
+					</v-list-item-content>
+					<v-list-item-icon>
+						<v-icon name="launch" />
+					</v-list-item-icon>
+				</v-list-item>
+			</v-list>
+		</v-menu>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from '@vue/composition-api';
+import { Collection } from '@/types';
+
+export default defineComponent({
+	props: {
+		collection: {
+			type: Object as PropType<Collection>,
+			required: true,
+		},
+		role: {
+			type: String,
+			required: true,
+		},
+		action: {
+			type: String,
+			required: true,
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.permissions-overview-toggle {
+	--v-icon-color: var(--success);
+
+	position: relative;
+}
+</style>
diff --git a/app/src/modules/settings/routes/roles/detail/components/permissions-overview/permissions-overview.vue b/app/src/modules/settings/routes/roles/detail/components/permissions-overview/permissions-overview.vue
new file mode 100644
index 0000000000..c349cd0a87
--- /dev/null
+++ b/app/src/modules/settings/routes/roles/detail/components/permissions-overview/permissions-overview.vue
@@ -0,0 +1,73 @@
+<template>
+	<div class="permissions-overview">
+		<h2 class="title type-label">
+			{{ $t('permissions') }}
+			<span class="instant-save">{{ $t('saves_automatically') }}</span>
+		</h2>
+
+		<div class="table">
+			<permissions-overview-header />
+			<permissions-overview-row
+				v-for="collection in regularCollections"
+				:key="collection.collection"
+				:collection="collection"
+				:role="role"
+			/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from '@vue/composition-api';
+import { useCollectionsStore } from '@/stores';
+import PermissionsOverviewHeader from './permissions-overview-header.vue';
+import PermissionsOverviewRow from './permissions-overview-row.vue';
+
+export default defineComponent({
+	components: { PermissionsOverviewHeader, PermissionsOverviewRow },
+	props: {
+		role: {
+			type: String,
+			required: true,
+		},
+	},
+	setup(props) {
+		const collectionsStore = useCollectionsStore();
+
+		const regularCollections = computed(() =>
+			collectionsStore.state.collections.filter(
+				(collection) => collection.collection.startsWith('directus_') === false
+			)
+		);
+		const systemCollections = computed(() =>
+			collectionsStore.state.collections.filter(
+				(collection) => collection.collection.startsWith('directus_') === false
+			)
+		);
+
+		return { regularCollections, systemCollections };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.permissions-overview {
+	position: relative;
+}
+
+.title {
+	margin-bottom: 12px;
+
+	.instant-save {
+		margin-left: 4px;
+		color: var(--warning);
+	}
+}
+
+.table {
+	max-width: 792px;
+	background-color: var(--background-page);
+	border: var(--border-width) solid var(--border-normal);
+	border-radius: var(--border-radius);
+}
+</style>
diff --git a/app/src/modules/settings/routes/roles/detail/detail.vue b/app/src/modules/settings/routes/roles/detail/detail.vue
index b4c2e4a081..0023ded78c 100644
--- a/app/src/modules/settings/routes/roles/detail/detail.vue
+++ b/app/src/modules/settings/routes/roles/detail/detail.vue
@@ -1,5 +1,13 @@
 <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')
+				: isNew === false
+				? $t('editing_role', { role: item && item.name })
+				: $t('creating_role')
+		"
+	>
 		<template #headline>{{ $t('settings_permissions') }}</template>
 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded icon exact :to="`/settings/roles/`">
@@ -61,23 +69,8 @@
 		</template>
 
 		<div class="roles">
-			<div class="permissions" v-if="primaryKey != 1">
-				<h2 class="title type-label">
-					{{ $t('permissions') }}
-					<span class="instant-save">{{ $t('saves_automatically') }}</span>
-				</h2>
+			<permissions-overview :role="primaryKey" />
 
-				<v-skeleton-loader v-if="loading" />
-				<template v-else>
-					<v-notice v-if="(edits.admin !== undefined ? edits.admin : item && item.admin) === true">
-						{{ $t('admins_have_all_permissions') }}
-					</v-notice>
-
-					<v-notice v-else>
-						Pre-Release: Feature not yet available
-					</v-notice>
-				</template>
-			</div>
 			<v-form
 				collection="directus_roles"
 				:primary-key="primaryKey"
@@ -105,6 +98,7 @@ import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 import { useUserStore } from '@/stores/';
 import RoleInfoDrawerDetail from './components/role-info-drawer-detail';
+import PermissionsOverview from './components/permissions-overview';
 
 type Values = {
 	[field: string]: any;
@@ -112,7 +106,7 @@ type Values = {
 
 export default defineComponent({
 	name: 'roles-detail',
-	components: { SettingsNavigation, RevisionsDrawerDetail, SaveOptions, RoleInfoDrawerDetail },
+	components: { SettingsNavigation, RevisionsDrawerDetail, SaveOptions, RoleInfoDrawerDetail, PermissionsOverview },
 	props: {
 		primaryKey: {
 			type: String,
@@ -213,16 +207,7 @@ export default defineComponent({
 	--v-button-color-hover: var(--warning);
 }
 
-.title {
-	margin-bottom: 12px;
-
-	.instant-save {
-		margin-left: 4px;
-		color: var(--warning);
-	}
-}
-
-.permissions {
+.permissions-overview {
 	margin-bottom: 48px;
 }
 </style>
diff --git a/app/src/types/index.ts b/app/src/types/index.ts
index 3da823c5e3..039a8dee19 100644
--- a/app/src/types/index.ts
+++ b/app/src/types/index.ts
@@ -4,3 +4,4 @@ export * from './relations';
 export * from './presets';
 export * from './notifications';
 export * from './fields';
+export * from './permissions';
diff --git a/app/src/types/permissions.ts b/app/src/types/permissions.ts
new file mode 100644
index 0000000000..3bd7bfe109
--- /dev/null
+++ b/app/src/types/permissions.ts
@@ -0,0 +1,10 @@
+export type Permission = {
+	id: number;
+	role: string | null;
+	collection: string;
+	operation: 'create' | 'read' | 'update' | 'validate' | 'delete';
+	permissions: Record<string, any> | null;
+	presets: Record<string, any> | null;
+	fields: string | null;
+	limit: number | null;
+};