diff --git a/api/src/types/field.ts b/api/src/types/field.ts
index 139b965972..f46d105f68 100644
--- a/api/src/types/field.ts
+++ b/api/src/types/field.ts
@@ -28,8 +28,7 @@ export type FieldMeta = {
 	locked: boolean;
 	required: boolean;
 	readonly: boolean;
-	hidden_detail: boolean;
-	hidden_browse: boolean;
+	hidden: boolean;
 	sort: number | null;
 	width: string | null;
 	group: number | null;
diff --git a/app/src/components/v-upload/v-upload.vue b/app/src/components/v-upload/v-upload.vue
index 50f44a49b3..88d2db2680 100644
--- a/app/src/components/v-upload/v-upload.vue
+++ b/app/src/components/v-upload/v-upload.vue
@@ -52,7 +52,7 @@
 					</v-list>
 				</v-menu>
 
-				<modal-browse
+				<modal-collection-detail
 					collection="directus_files"
 					:active="activeDialog === 'choose'"
 					@update:active="activeDialog = null"
@@ -83,7 +83,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed, watch } from '@vue/composition-api';
 import uploadFiles from '@/utils/upload-files';
-import ModalBrowse from '@/views/private/components/modal-browse';
+import ModalBrowse from '@/views/private/components/modal-collection-detail';
 import api from '@/api';
 import useItem from '@/composables/use-item';
 
diff --git a/app/src/interfaces/file/file.vue b/app/src/interfaces/file/file.vue
index 649af6e682..66646da5f8 100644
--- a/app/src/interfaces/file/file.vue
+++ b/app/src/interfaces/file/file.vue
@@ -79,7 +79,7 @@
 			</v-card>
 		</v-dialog>
 
-		<modal-browse
+		<modal-collection-detail
 			collection="directus_files"
 			:active="activeDialog === 'choose'"
 			@update:active="activeDialog = null"
@@ -107,7 +107,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, watch, computed } from '@vue/composition-api';
-import ModalBrowse from '@/views/private/components/modal-browse';
+import ModalBrowse from '@/views/private/components/modal-collection-detail';
 import api from '@/api';
 import readableMimeType from '@/utils/readable-mime-type';
 import getRootPath from '@/utils/get-root-path';
diff --git a/app/src/interfaces/files/files.vue b/app/src/interfaces/files/files.vue
index 1e53e236d2..fb4011238e 100644
--- a/app/src/interfaces/files/files.vue
+++ b/app/src/interfaces/files/files.vue
@@ -34,7 +34,7 @@
 			</v-button>
 		</div>
 
-		<modal-detail
+		<modal-item-detail
 			v-if="!disabled"
 			:active="showDetailModal"
 			:collection="junctionCollection"
@@ -46,7 +46,7 @@
 			@update:active="cancelEdit"
 		/>
 
-		<modal-browse
+		<modal-collection-detail
 			v-if="!disabled"
 			:active.sync="showBrowseModal"
 			:collection="relationJunctionToRelated.one_collection"
@@ -71,8 +71,8 @@
 <script lang="ts">
 import { defineComponent, ref, computed, toRefs } from '@vue/composition-api';
 import { Header as TableHeader } from '@/components/v-table/types';
-import ModalBrowse from '@/views/private/components/modal-browse';
-import ModalDetail from '@/views/private/components/modal-detail';
+import ModalBrowse from '@/views/private/components/modal-collection-detail';
+import ModalDetail from '@/views/private/components/modal-item-detail';
 import { get } from 'lodash';
 import i18n from '@/lang';
 
diff --git a/app/src/interfaces/many-to-many/many-to-many.vue b/app/src/interfaces/many-to-many/many-to-many.vue
index 488e8cd4e5..c58b12d0ad 100644
--- a/app/src/interfaces/many-to-many/many-to-many.vue
+++ b/app/src/interfaces/many-to-many/many-to-many.vue
@@ -39,7 +39,7 @@
 			</v-button>
 		</div>
 
-		<modal-detail
+		<modal-item-detail
 			v-if="!disabled"
 			:active.sync="showDetailModal"
 			:collection="junctionCollection"
@@ -51,7 +51,7 @@
 			@update:active="cancelEdit"
 		/>
 
-		<modal-browse
+		<modal-collection-detail
 			v-if="!disabled"
 			:active.sync="showBrowseModal"
 			:collection="relationJunctionToRelated.one_collection"
@@ -67,8 +67,8 @@
 import { defineComponent, ref, watch, PropType, toRefs, computed } from '@vue/composition-api';
 import { useFieldsStore } from '@/stores/';
 import { Header as TableHeader } from '@/components/v-table/types';
-import ModalBrowse from '@/views/private/components/modal-browse';
-import ModalDetail from '@/views/private/components/modal-detail';
+import ModalBrowse from '@/views/private/components/modal-collection-detail';
+import ModalDetail from '@/views/private/components/modal-item-detail';
 import { get } from 'lodash';
 
 import useRelation from './use-relation';
diff --git a/app/src/interfaces/many-to-one/many-to-one.vue b/app/src/interfaces/many-to-one/many-to-one.vue
index 0ec502020a..a8a8bc5c4e 100644
--- a/app/src/interfaces/many-to-one/many-to-one.vue
+++ b/app/src/interfaces/many-to-one/many-to-one.vue
@@ -82,7 +82,7 @@
 			</v-list>
 		</v-menu>
 
-		<modal-detail
+		<modal-item-detail
 			v-if="!disabled"
 			:active.sync="editModalActive"
 			:collection="relatedCollection.collection"
@@ -91,7 +91,7 @@
 			@input="stageEdits"
 		/>
 
-		<modal-browse
+		<modal-collection-detail
 			v-if="!disabled"
 			:active.sync="selectModalActive"
 			:collection="relatedCollection.collection"
@@ -107,8 +107,8 @@ import { useCollectionsStore, useRelationsStore } from '@/stores/';
 import useCollection from '@/composables/use-collection';
 import getFieldsFromTemplate from '@/utils/get-fields-from-template';
 import api from '@/api';
-import ModalDetail from '@/views/private/components/modal-detail';
-import ModalBrowse from '@/views/private/components/modal-browse';
+import ModalDetail from '@/views/private/components/modal-item-detail';
+import ModalBrowse from '@/views/private/components/modal-collection-detail';
 
 /**
  * @NOTE
diff --git a/app/src/interfaces/one-to-many/one-to-many.vue b/app/src/interfaces/one-to-many/one-to-many.vue
index b139232cfb..1ffd3cc8ff 100644
--- a/app/src/interfaces/one-to-many/one-to-many.vue
+++ b/app/src/interfaces/one-to-many/one-to-many.vue
@@ -38,7 +38,7 @@
 			</v-button>
 		</div>
 
-		<modal-detail
+		<modal-item-detail
 			v-if="!disabled"
 			:active="currentlyEditing !== null"
 			:collection="relatedCollection.collection"
@@ -48,7 +48,7 @@
 			@update:active="cancelEdit"
 		/>
 
-		<modal-browse
+		<modal-collection-detail
 			v-if="!disabled"
 			:active.sync="selectModalActive"
 			:collection="relatedCollection.collection"
@@ -65,8 +65,8 @@ import { defineComponent, ref, computed, watch, PropType } from '@vue/compositio
 import api from '@/api';
 import useCollection from '@/composables/use-collection';
 import { useCollectionsStore, useRelationsStore, useFieldsStore } from '@/stores/';
-import ModalDetail from '@/views/private/components/modal-detail';
-import ModalBrowse from '@/views/private/components/modal-browse';
+import ModalDetail from '@/views/private/components/modal-item-detail';
+import ModalBrowse from '@/views/private/components/modal-collection-detail';
 import { Filter, Field } from '@/types';
 import { Header } from '@/components/v-table/types';
 
diff --git a/app/src/interfaces/user/user.vue b/app/src/interfaces/user/user.vue
index abfc875a01..b3184f0027 100644
--- a/app/src/interfaces/user/user.vue
+++ b/app/src/interfaces/user/user.vue
@@ -72,7 +72,7 @@
 			</v-list>
 		</v-menu>
 
-		<modal-detail
+		<modal-item-detail
 			:active.sync="editModalActive"
 			collection="directus_users"
 			:primary-key="currentPrimaryKey"
@@ -81,7 +81,7 @@
 			v-if="!disabled"
 		/>
 
-		<modal-browse
+		<modal-collection-detail
 			:active.sync="selectModalActive"
 			collection="directus_users"
 			:selection="selection"
@@ -95,8 +95,8 @@
 import { defineComponent, computed, ref, watch, PropType } from '@vue/composition-api';
 import useCollection from '@/composables/use-collection';
 import api from '@/api';
-import ModalDetail from '@/views/private/components/modal-detail';
-import ModalBrowse from '@/views/private/components/modal-browse';
+import ModalDetail from '@/views/private/components/modal-item-detail';
+import ModalBrowse from '@/views/private/components/modal-collection-detail';
 
 export default defineComponent({
 	components: { ModalDetail, ModalBrowse },
@@ -178,7 +178,7 @@ export default defineComponent({
 			const currentPrimaryKey = computed<string | number>(() => {
 				if (!currentUser.value) return '+';
 				if (!props.value) return '+';
-				
+
 				return props.value;
 			});
 
diff --git a/app/src/views/private/components/modal-browse/index.ts b/app/src/views/private/components/modal-browse/index.ts
deleted file mode 100644
index e0d32e7eaf..0000000000
--- a/app/src/views/private/components/modal-browse/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ModalBrowse from './modal-browse.vue';
-
-export { ModalBrowse };
-export default ModalBrowse;
diff --git a/app/src/views/private/components/modal-collection-detail/index.ts b/app/src/views/private/components/modal-collection-detail/index.ts
new file mode 100644
index 0000000000..f77d95b78e
--- /dev/null
+++ b/app/src/views/private/components/modal-collection-detail/index.ts
@@ -0,0 +1,4 @@
+import ModalCollectionDetail from './modal-collection-detail.vue';
+
+export { ModalCollectionDetail };
+export default ModalCollectionDetail;
diff --git a/app/src/views/private/components/modal-browse/modal-browse.vue b/app/src/views/private/components/modal-collection-detail/modal-collection-detail.vue
similarity index 100%
rename from app/src/views/private/components/modal-browse/modal-browse.vue
rename to app/src/views/private/components/modal-collection-detail/modal-collection-detail.vue
diff --git a/app/src/views/private/components/modal-detail/index.ts b/app/src/views/private/components/modal-detail/index.ts
deleted file mode 100644
index 5119da6305..0000000000
--- a/app/src/views/private/components/modal-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ModalDetail from './modal-detail.vue';
-
-export { ModalDetail };
-export default ModalDetail;
diff --git a/app/src/views/private/components/modal-item-detail/index.ts b/app/src/views/private/components/modal-item-detail/index.ts
new file mode 100644
index 0000000000..f4ee425336
--- /dev/null
+++ b/app/src/views/private/components/modal-item-detail/index.ts
@@ -0,0 +1,4 @@
+import ModalItemDetail from './modal-item-detail.vue';
+
+export { ModalItemDetail };
+export default ModalItemDetail;
diff --git a/app/src/views/private/components/modal-detail/modal-detail.vue b/app/src/views/private/components/modal-item-detail/modal-item-detail.vue
similarity index 91%
rename from app/src/views/private/components/modal-detail/modal-detail.vue
rename to app/src/views/private/components/modal-item-detail/modal-item-detail.vue
index c74eb7a554..b90c1a959c 100644
--- a/app/src/views/private/components/modal-detail/modal-detail.vue
+++ b/app/src/views/private/components/modal-item-detail/modal-item-detail.vue
@@ -75,7 +75,12 @@ export default defineComponent({
 		const relationsStore = useRelationsStore();
 
 		const { _active } = useActiveState();
-		const { junctionFieldInfo, junctionRelatedCollection, junctionRelatedCollectionInfo, setJunctionEdits } = useJunction();
+		const {
+			junctionFieldInfo,
+			junctionRelatedCollection,
+			junctionRelatedCollectionInfo,
+			setJunctionEdits,
+		} = useJunction();
 		const { _edits, loading, error, item } = useItem();
 		const { save, cancel } = useActions();
 
@@ -85,14 +90,22 @@ export default defineComponent({
 
 		const title = computed(() => {
 			if (props.primaryKey === '+') {
-				return i18n.t('creating_in', { collection: junctionRelatedCollectionInfo?.value?.name || collectionInfo.value?.name });
+				return i18n.t('creating_in', {
+					collection: junctionRelatedCollectionInfo?.value?.name || collectionInfo.value?.name,
+				});
 			}
 
-			return i18n.t('editing_in', { collection: junctionRelatedCollectionInfo?.value?.name || collectionInfo.value?.name });
+			return i18n.t('editing_in', {
+				collection: junctionRelatedCollectionInfo?.value?.name || collectionInfo.value?.name,
+			});
 		});
 
 		const showDivider = computed(() => {
-			return fieldsStore.getFieldsForCollection(props.collection).filter((field: Field) => field.meta?.hidden !== true).length > 0;
+			return (
+				fieldsStore
+					.getFieldsForCollection(props.collection)
+					.filter((field: Field) => field.meta?.hidden !== true).length > 0
+			);
 		});
 
 		return {