diff --git a/api/src/services/permissions.ts b/api/src/services/permissions.ts
index 8440678898..75c65d968b 100644
--- a/api/src/services/permissions.ts
+++ b/api/src/services/permissions.ts
@@ -1,4 +1,4 @@
-import { AbstractServiceOptions, PermissionsAction } from '../types';
+import { AbstractServiceOptions, PermissionsAction, Item, PrimaryKey } from '../types';
 import { ItemsService } from '../services/items';
 
 export class PermissionsService extends ItemsService {
diff --git a/app/src/modules/settings/index.ts b/app/src/modules/settings/index.ts
index 285f9eb340..02a3d45815 100644
--- a/app/src/modules/settings/index.ts
+++ b/app/src/modules/settings/index.ts
@@ -17,6 +17,7 @@ import SettingsNotFound from './routes/not-found.vue';
 import api from '@/api';
 import { useCollection } from '@/composables/use-collection';
 import { ref } from '@vue/composition-api';
+import { useCollectionsStore, useFieldsStore } from '@/stores';
 
 export default defineModule(({ i18n }) => ({
 	id: 'settings',
@@ -37,6 +38,11 @@ export default defineModule(({ i18n }) => ({
 			name: 'settings-collections',
 			path: '/data-model',
 			component: SettingsCollections,
+			beforeEnter(to, from, next) {
+				const collectionsStore = useCollectionsStore();
+				collectionsStore.hydrate();
+				next();
+			},
 			children: [
 				{
 					path: '+',
@@ -53,11 +59,14 @@ export default defineModule(({ i18n }) => ({
 			component: SettingsFields,
 			async beforeEnter(to, from, next) {
 				const { info } = useCollection(ref(to.params.collection));
+				const fieldsStore = useFieldsStore();
 
 				if (!info.value?.meta) {
 					await api.patch(`/collections/${to.params.collection}`, { meta: {} });
 				}
 
+				fieldsStore.hydrate();
+
 				next();
 			},
 			props: (route) => ({
diff --git a/app/src/modules/settings/routes/roles/detail/components/permissions-overview-toggle.vue b/app/src/modules/settings/routes/roles/detail/components/permissions-overview-toggle.vue
index adb532c496..c82169cea2 100644
--- a/app/src/modules/settings/routes/roles/detail/components/permissions-overview-toggle.vue
+++ b/app/src/modules/settings/routes/roles/detail/components/permissions-overview-toggle.vue
@@ -102,6 +102,14 @@ export default defineComponent({
 		async function setFullAccess() {
 			saving.value = true;
 
+			// If this collection isn't "managed" yet, make sure to add it to directus_collections first
+			// before trying to associate any permissions with it
+			if (props.collection.meta === null) {
+				await api.patch(`/collections/${props.collection.collection}`, {
+					meta: {},
+				});
+			}
+
 			if (props.permission) {
 				try {
 					await api.patch(`/permissions/${props.permission.id}`, {
@@ -148,6 +156,14 @@ export default defineComponent({
 		}
 
 		async function openPermissions() {
+			// If this collection isn't "managed" yet, make sure to add it to directus_collections first
+			// before trying to associate any permissions with it
+			if (props.collection.meta === null) {
+				await api.patch(`/collections/${props.collection.collection}`, {
+					meta: {},
+				});
+			}
+
 			if (props.permission) {
 				router.push(`/settings/roles/${props.role || 'public'}/${props.permission.id}`);
 			} else {