diff --git a/api/src/constants.ts b/api/src/constants.ts
index 2fec591861..56729b3210 100644
--- a/api/src/constants.ts
+++ b/api/src/constants.ts
@@ -40,7 +40,7 @@ export const ASSET_TRANSFORM_QUERY_KEYS = [
 
 export const FILTER_VARIABLES = ['$NOW', '$CURRENT_USER', '$CURRENT_ROLE'];
 
-export const ALIAS_TYPES = ['alias', 'o2m', 'm2m', 'm2a', 'files', 'files', 'translations'];
+export const ALIAS_TYPES = ['alias', 'o2m', 'm2m', 'm2a', 'files', 'translations'];
 
 export const DEFAULT_AUTH_PROVIDER = 'default';
 
diff --git a/api/src/services/graphql.ts b/api/src/services/graphql.ts
index 595c5a2e27..716c68d7f3 100644
--- a/api/src/services/graphql.ts
+++ b/api/src/services/graphql.ts
@@ -410,7 +410,7 @@ export class GraphQLService {
 						acc[field.field] = {
 							type,
 							description: field.note,
-							resolve: (obj: Record<string, any>, _, __, info) => {
+							resolve: (obj: Record<string, any>) => {
 								return obj[field.field];
 							},
 						};
diff --git a/app/src/components/v-button/v-button.vue b/app/src/components/v-button/v-button.vue
index 211bf01b86..2383b13e62 100644
--- a/app/src/components/v-button/v-button.vue
+++ b/app/src/components/v-button/v-button.vue
@@ -200,7 +200,7 @@ export default defineComponent({
 	--v-button-background-color: var(--primary);
 	--v-button-background-color-hover: var(--primary-125);
 	--v-button-background-color-active: var(--primary);
-	--v-button-background-color-disabled: var(--background-normal);
+	--v-button-background-color-disabled: var(--background-subdued);
 	--v-button-font-size: 16px;
 	--v-button-font-weight: 600;
 	--v-button-line-height: 22px;
diff --git a/app/src/components/v-checkbox/v-checkbox.vue b/app/src/components/v-checkbox/v-checkbox.vue
index 89c1e03e58..3d61209b3c 100644
--- a/app/src/components/v-checkbox/v-checkbox.vue
+++ b/app/src/components/v-checkbox/v-checkbox.vue
@@ -31,7 +31,7 @@ export default defineComponent({
 		},
 		modelValue: {
 			type: [Boolean, Array],
-			default: false,
+			default: null,
 		},
 		label: {
 			type: String,
@@ -86,6 +86,8 @@ export default defineComponent({
 
 		const icon = computed<string>(() => {
 			if (props.indeterminate === true) return props.iconIndeterminate;
+			if (props.checked === null && props.modelValue === null) return props.iconIndeterminate;
+
 			return isChecked.value ? props.iconOn : props.iconOff;
 		});
 
@@ -175,6 +177,7 @@ body {
 		width: 100%;
 		height: var(--input-height);
 		padding: 10px; // 14 - 4 (border)
+		background-color: var(--background-page);
 		border: var(--border-width) solid var(--border-normal);
 		border-radius: var(--border-radius);
 		transition: all var(--fast) var(--transition);
diff --git a/app/src/components/v-field-template/v-field-template.vue b/app/src/components/v-field-template/v-field-template.vue
index 66f7edcc4d..bd318efa95 100644
--- a/app/src/components/v-field-template/v-field-template.vue
+++ b/app/src/components/v-field-template/v-field-template.vue
@@ -52,7 +52,7 @@ export default defineComponent({
 		},
 		collection: {
 			type: String,
-			required: true,
+			default: null,
 		},
 		depth: {
 			type: Number,
diff --git a/app/src/components/v-input/v-input.vue b/app/src/components/v-input/v-input.vue
index 7e7fe1b7f6..8f6dfabbbc 100644
--- a/app/src/components/v-input/v-input.vue
+++ b/app/src/components/v-input/v-input.vue
@@ -86,7 +86,7 @@ export default defineComponent({
 			default: true,
 		},
 		placeholder: {
-			type: String,
+			type: [String, Number],
 			default: null,
 		},
 		modelValue: {
diff --git a/app/src/constants.ts b/app/src/constants.ts
index 5ec6f044be..1d5e05fb4f 100644
--- a/app/src/constants.ts
+++ b/app/src/constants.ts
@@ -1,3 +1,5 @@
+import { Type } from '@directus/shared/types';
+
 export const VALIDATION_TYPES = ['FAILED_VALIDATION', 'RECORD_NOT_UNIQUE'];
 
 export const DIRECTUS_LOGO = `
@@ -70,4 +72,76 @@ export const MODULE_BAR_DEFAULT = [
 	},
 ];
 
+export const FIELD_TYPES_SELECT: Array<{ value: Type; text: string } | { divider: true }> = [
+	{
+		text: '$t:string',
+		value: 'string',
+	},
+	{
+		text: '$t:text',
+		value: 'text',
+	},
+	{ divider: true },
+	{
+		text: '$t:boolean',
+		value: 'boolean',
+	},
+	{ divider: true },
+	{
+		text: '$t:integer',
+		value: 'integer',
+	},
+	{
+		text: '$t:bigInteger',
+		value: 'bigInteger',
+	},
+	{
+		text: '$t:float',
+		value: 'float',
+	},
+	{
+		text: '$t:decimal',
+		value: 'decimal',
+	},
+	{ divider: true },
+	{
+		text: '$t:geometry',
+		value: 'geometry',
+	},
+	{ divider: true },
+	{
+		text: '$t:timestamp',
+		value: 'timestamp',
+	},
+	{
+		text: '$t:datetime',
+		value: 'dateTime',
+	},
+	{
+		text: '$t:date',
+		value: 'date',
+	},
+	{
+		text: '$t:time',
+		value: 'time',
+	},
+	{ divider: true },
+	{
+		text: '$t:json',
+		value: 'json',
+	},
+	{
+		text: '$t:csv',
+		value: 'csv',
+	},
+	{
+		text: '$t:uuid',
+		value: 'uuid',
+	},
+	{
+		text: '$t:hash',
+		value: 'hash',
+	},
+];
+
 export const AUTH_SSO_DRIVERS = ['oauth2', 'openid'];
diff --git a/app/src/displays/file/index.ts b/app/src/displays/file/index.ts
index 1610d61607..7071792eb1 100644
--- a/app/src/displays/file/index.ts
+++ b/app/src/displays/file/index.ts
@@ -8,7 +8,7 @@ export default defineDisplay({
 	icon: 'insert_drive_file',
 	component: DisplayFile,
 	types: ['uuid'],
-	groups: ['file'],
+	localTypes: ['file'],
 	options: [],
 	fields: ['id', 'type', 'title'],
 });
diff --git a/app/src/displays/image/index.ts b/app/src/displays/image/index.ts
index fad5caf564..49e71ed79e 100644
--- a/app/src/displays/image/index.ts
+++ b/app/src/displays/image/index.ts
@@ -6,7 +6,7 @@ export default defineDisplay({
 	name: '$t:displays.image.image',
 	description: '$t:displays.image.description',
 	types: ['uuid'],
-	groups: ['file'],
+	localTypes: ['file'],
 	icon: 'insert_photo',
 	component: DisplayImage,
 	options: [
diff --git a/app/src/displays/raw/index.ts b/app/src/displays/raw/index.ts
index 4e0fba1f8d..b1209469d8 100644
--- a/app/src/displays/raw/index.ts
+++ b/app/src/displays/raw/index.ts
@@ -8,5 +8,5 @@ export default defineDisplay({
 	component: ({ value }) => String(value),
 	options: [],
 	types: TYPES,
-	groups: ['file', 'files', 'group', 'm2a', 'm2m', 'm2o', 'o2m', 'presentation', 'standard', 'translations'],
+	localTypes: ['file', 'files', 'group', 'm2a', 'm2m', 'm2o', 'o2m', 'presentation', 'standard', 'translations'],
 });
diff --git a/app/src/displays/related-values/index.ts b/app/src/displays/related-values/index.ts
index edbc920e8e..ad536cb6bd 100644
--- a/app/src/displays/related-values/index.ts
+++ b/app/src/displays/related-values/index.ts
@@ -18,7 +18,7 @@ export default defineDisplay({
 	component: DisplayRelatedValues,
 	options: options,
 	types: ['alias', 'string', 'uuid', 'integer', 'bigInteger', 'json'],
-	groups: ['m2m', 'm2o', 'o2m', 'translations', 'm2a'],
+	localTypes: ['m2m', 'm2o', 'o2m', 'translations', 'm2a'],
 	fields: (options: Options | null, { field, collection }) => {
 		const relatedCollection = getRelatedCollection(collection, field);
 		const fieldsStore = useFieldsStore();
diff --git a/app/src/displays/translations/index.ts b/app/src/displays/translations/index.ts
index 907bb05845..69025e3c2c 100644
--- a/app/src/displays/translations/index.ts
+++ b/app/src/displays/translations/index.ts
@@ -18,7 +18,7 @@ export default defineDisplay({
 	component: DisplayTranslations,
 	options: options,
 	types: ['alias'],
-	groups: ['translations'],
+	localTypes: ['translations'],
 	fields: (options: Options | null, { field, collection }) => {
 		const fieldsStore = useFieldsStore();
 		const relationsStore = useRelationsStore();
diff --git a/app/src/interfaces/_system/system-display-template/system-display-template.vue b/app/src/interfaces/_system/system-display-template/system-display-template.vue
index 7649080b31..989792f622 100644
--- a/app/src/interfaces/_system/system-display-template/system-display-template.vue
+++ b/app/src/interfaces/_system/system-display-template/system-display-template.vue
@@ -1,11 +1,9 @@
 <template>
 	<div class="system-display-template">
-		<v-notice v-if="!collectionField && !collectionName" type="warning">
-			{{ t('interfaces.system-display-template.collection_field_not_setup') }}
-		</v-notice>
-		<v-notice v-else-if="collection === null" type="warning">
+		<v-notice v-if="collection === null" type="info">
 			{{ t('interfaces.system-display-template.select_a_collection') }}
 		</v-notice>
+
 		<v-field-template
 			v-else
 			:collection="collection"
diff --git a/app/src/interfaces/_system/system-interface-options/system-interface-options.vue b/app/src/interfaces/_system/system-interface-options/system-interface-options.vue
index 562a3a7089..60b44686be 100644
--- a/app/src/interfaces/_system/system-interface-options/system-interface-options.vue
+++ b/app/src/interfaces/_system/system-interface-options/system-interface-options.vue
@@ -3,23 +3,24 @@
 		{{ t('select_interface') }}
 	</v-notice>
 
-	<v-notice v-else-if="!selectedInterface.options">
+	<v-notice v-else-if="usesCustomComponent === false && optionsFields.length === 0">
 		{{ t('no_options_available') }}
 	</v-notice>
 
 	<div v-else class="inset">
 		<v-form
-			v-if="Array.isArray(selectedInterface.options)"
-			:fields="selectedInterface.options"
+			v-if="usesCustomComponent === false"
+			v-model="options"
+			class="extension-options"
+			:fields="optionsFields"
 			primary-key="+"
-			:model-value="value"
-			@update:model-value="$emit('input', $event)"
 		/>
 
 		<component
 			:is="`interface-options-${selectedInterface.id}`"
 			v-else
 			:value="value"
+			:collection="collection"
 			@input="$emit('input', $event)"
 		/>
 	</div>
@@ -29,7 +30,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, inject, ref } from 'vue';
 import { getInterfaces } from '@/interfaces';
-import { InterfaceConfig } from '@directus/shared/types';
+import { InterfaceConfig, DeepPartial, Field, ExtensionsOptionsContext } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {
@@ -45,6 +46,10 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		collection: {
+			type: String,
+			default: null,
+		},
 	},
 	emits: ['input'],
 	setup(props) {
@@ -64,7 +69,58 @@ export default defineComponent({
 			return interfaces.value.find((inter: InterfaceConfig) => inter.id === values.value[props.interfaceField]);
 		});
 
-		return { t, selectedInterface, values };
+		const usesCustomComponent = computed(() => {
+			if (!selectedInterface.value) return false;
+
+			return selectedInterface.value.options && 'render' in selectedInterface.value.options;
+		});
+
+		const optionsFields = computed(() => {
+			if (!selectedInterface.value) return [];
+			if (!selectedInterface.value.options) return [];
+			if (usesCustomComponent.value === true) return [];
+
+			let optionsObjectOrArray;
+
+			if (typeof selectedInterface.value.options === 'function') {
+				optionsObjectOrArray = (
+					selectedInterface.value.options as (x: ExtensionsOptionsContext) => DeepPartial<Field>[]
+				)({
+					field: {
+						type: 'unknown',
+					},
+					editing: '+',
+					collection: props.collection,
+					relations: {
+						o2m: undefined,
+						m2o: undefined,
+						m2a: undefined,
+					},
+					collections: {
+						related: undefined,
+						junction: undefined,
+					},
+					fields: {
+						corresponding: undefined,
+						junctionCurrent: undefined,
+						junctionRelated: undefined,
+						sort: undefined,
+					},
+					items: {},
+					localType: 'standard',
+					autoGenerateJunctionRelation: false,
+					saving: false,
+				});
+			} else {
+				optionsObjectOrArray = selectedInterface.value.options;
+			}
+
+			if (Array.isArray(optionsObjectOrArray)) return optionsObjectOrArray;
+
+			return [...optionsObjectOrArray.standard, ...optionsObjectOrArray.advanced];
+		});
+
+		return { t, selectedInterface, values, usesCustomComponent, optionsFields };
 	},
 });
 </script>
diff --git a/app/src/interfaces/boolean/index.ts b/app/src/interfaces/boolean/index.ts
index e806e5a38d..1d852ecbb3 100644
--- a/app/src/interfaces/boolean/index.ts
+++ b/app/src/interfaces/boolean/index.ts
@@ -8,6 +8,7 @@ export default defineInterface({
 	icon: 'check_box',
 	component: InterfaceBoolean,
 	types: ['boolean'],
+	group: 'selection',
 	recommendedDisplays: ['boolean'],
 	options: [
 		{
diff --git a/app/src/interfaces/datetime/index.ts b/app/src/interfaces/datetime/index.ts
index ed0860d6f1..ab653e92e9 100644
--- a/app/src/interfaces/datetime/index.ts
+++ b/app/src/interfaces/datetime/index.ts
@@ -1,5 +1,6 @@
 import { defineInterface } from '@directus/shared/utils';
 import InterfaceDateTime from './datetime.vue';
+import PreviewSVG from './preview.svg?raw';
 
 export default defineInterface({
 	id: 'datetime',
@@ -8,6 +9,7 @@ export default defineInterface({
 	icon: 'today',
 	component: InterfaceDateTime,
 	types: ['dateTime', 'date', 'time', 'timestamp'],
+	group: 'selection',
 	options: [
 		{
 			field: 'includeSeconds',
@@ -35,4 +37,5 @@ export default defineInterface({
 		},
 	],
 	recommendedDisplays: ['datetime'],
+	preview: PreviewSVG,
 });
diff --git a/app/src/interfaces/datetime/preview.svg b/app/src/interfaces/datetime/preview.svg
new file mode 100644
index 0000000000..41f8992cb0
--- /dev/null
+++ b/app/src/interfaces/datetime/preview.svg
@@ -0,0 +1,40 @@
+<svg width="156" height="96" viewBox="0 0 156 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="29" y="10" width="98" height="77" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="30" y="11" width="96" height="75" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="39" y="20" width="30" height="5.03704" rx="2" fill="var(--primary)" />
+	<rect x="39" y="41" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="39" y="51" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="39" y="61" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="39" y="71" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="51" y="41" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="51" y="61" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="51" y="71" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="87" y="71" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.1" />
+	<rect x="63" y="31" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="39" y="31" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.1" />
+	<rect x="63" y="41" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="63" y="51" width="6" height="6" rx="2" fill="var(--primary)" />
+	<rect x="63" y="61" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="63" y="71" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="99" y="71" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.1" />
+	<rect x="75" y="31" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="51" y="31" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.1" />
+	<rect x="75" y="41" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="75" y="51" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="75" y="61" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="75" y="71" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="111" y="71" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.1" />
+	<rect x="87" y="31" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="87" y="41" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="87" y="51" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="87" y="61" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="99" y="31" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="99" y="41" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="99" y="51" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="99" y="61" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="111" y="31" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="111" y="41" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="111" y="51" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="111" y="61" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="51" y="51" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+</svg>
diff --git a/app/src/interfaces/file-image/index.ts b/app/src/interfaces/file-image/index.ts
index 5a5f2a5a37..61cc7b718a 100644
--- a/app/src/interfaces/file-image/index.ts
+++ b/app/src/interfaces/file-image/index.ts
@@ -8,7 +8,8 @@ export default defineInterface({
 	icon: 'insert_photo',
 	component: InterfaceFileImage,
 	types: ['uuid'],
-	groups: ['file'],
+	localTypes: ['file'],
+	group: 'relational',
 	relational: true,
 	options: [
 		{
diff --git a/app/src/interfaces/file/index.ts b/app/src/interfaces/file/index.ts
index 91bb445412..3610eb8d55 100644
--- a/app/src/interfaces/file/index.ts
+++ b/app/src/interfaces/file/index.ts
@@ -8,7 +8,8 @@ export default defineInterface({
 	icon: 'note_add',
 	component: InterfaceFile,
 	types: ['uuid'],
-	groups: ['file'],
+	localTypes: ['file'],
+	group: 'relational',
 	relational: true,
 	options: [
 		{
diff --git a/app/src/interfaces/files/index.ts b/app/src/interfaces/files/index.ts
index 1c9f3ca02a..32905da98c 100644
--- a/app/src/interfaces/files/index.ts
+++ b/app/src/interfaces/files/index.ts
@@ -1,6 +1,7 @@
 import { defineInterface } from '@directus/shared/utils';
 import InterfaceFiles from './files.vue';
-import Options from '../list-m2m/options.vue';
+// import Options from '../list-m2m/options.vue';
+import PreviewSVG from './preview.svg?raw';
 
 export default defineInterface({
 	id: 'files',
@@ -10,7 +11,10 @@ export default defineInterface({
 	component: InterfaceFiles,
 	relational: true,
 	types: ['alias'],
-	groups: ['files'],
-	options: Options,
+	localTypes: ['files'],
+	group: 'relational',
+	// options: Options,
+	options: [],
 	recommendedDisplays: ['related-values'],
+	preview: PreviewSVG,
 });
diff --git a/app/src/interfaces/files/preview.svg b/app/src/interfaces/files/preview.svg
new file mode 100644
index 0000000000..fd5d996243
--- /dev/null
+++ b/app/src/interfaces/files/preview.svg
@@ -0,0 +1,22 @@
+<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="19" y="9" width="56" height="36" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="20" y="10" width="54" height="34" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="25" y="15" width="44" height="24" rx="4" fill="var(--primary)" fill-opacity=".25" />
+	<path d="M36.695 27.2L45.39 35H28l8.695-7.8z" fill="var(--primary)" />
+	<path d="M52.153 23L66 35H38.305l13.848-12z" fill="var(--primary)" />
+	<rect x="81" y="9" width="56" height="36" rx="6" fill="var(--background-page)" />
+	<rect x="82" y="10" width="54" height="34" rx="5" stroke="var(--primary)" stroke-opacity=".25" stroke-width="2" />
+	<rect x="87" y="15" width="44" height="24" rx="4" fill="var(--primary)" fill-opacity=".25" />
+	<path d="M98.695 27.2l8.695 7.8H90l8.695-7.8z" fill="var(--primary)" />
+	<path d="M114.153 23L128 35h-27.695l13.848-12z" fill="var(--primary)" />
+	<rect x="19" y="51" width="56" height="36" rx="6" fill="var(--background-page)" />
+	<rect x="20" y="52" width="54" height="34" rx="5" stroke="var(--primary)" stroke-opacity=".25" stroke-width="2" />
+	<rect x="25" y="57" width="44" height="24" rx="4" fill="var(--primary)" fill-opacity=".25" />
+	<path d="M36.695 69.2L45.39 77H28l8.695-7.8z" fill="var(--primary)" />
+	<path d="M52.153 65L66 77H38.305l13.848-12z" fill="var(--primary)" />
+	<rect x="81" y="51" width="56" height="36" rx="6" fill="var(--background-page)" />
+	<rect x="82" y="52" width="54" height="34" rx="5" stroke="var(--primary)" stroke-opacity=".25" stroke-width="2" />
+	<rect x="87" y="57" width="44" height="24" rx="4" fill="var(--primary)" fill-opacity=".25" />
+	<path d="M98.695 69.2l8.695 7.8H90l8.695-7.8z" fill="var(--primary)" />
+	<path d="M114.153 65L128 77h-27.695l13.848-12z" fill="var(--primary)" />
+</svg>
diff --git a/app/src/interfaces/group-accordion/index.ts b/app/src/interfaces/group-accordion/index.ts
index e58b884b9d..e158905343 100644
--- a/app/src/interfaces/group-accordion/index.ts
+++ b/app/src/interfaces/group-accordion/index.ts
@@ -10,7 +10,8 @@ export default defineInterface({
 	hideLabel: true,
 	hideLoader: true,
 	types: ['alias'],
-	groups: ['group'],
+	localTypes: ['group'],
+	group: 'group',
 	options: [
 		{
 			field: 'accordionMode',
diff --git a/app/src/interfaces/group-detail/index.ts b/app/src/interfaces/group-detail/index.ts
index 8cf2d945e7..cf97cb57e6 100644
--- a/app/src/interfaces/group-detail/index.ts
+++ b/app/src/interfaces/group-detail/index.ts
@@ -7,7 +7,8 @@ export default defineInterface({
 	description: '$t:interfaces.group-detail.description',
 	icon: 'menu_open',
 	component: InterfaceGroupDetail,
-	groups: ['group'],
+	localTypes: ['group'],
+	group: 'group',
 	types: ['alias'],
 	options: [
 		{
diff --git a/app/src/interfaces/group-raw/index.ts b/app/src/interfaces/group-raw/index.ts
index ab7a28fb73..4e1f3874e2 100644
--- a/app/src/interfaces/group-raw/index.ts
+++ b/app/src/interfaces/group-raw/index.ts
@@ -7,7 +7,8 @@ export default defineInterface({
 	description: '$t:interfaces.group-raw.description',
 	icon: 'view_in_ar',
 	component: InterfaceGroupRaw,
-	groups: ['group'],
+	localTypes: ['group'],
+	group: 'group',
 	types: ['alias'],
 	options: [],
 });
diff --git a/app/src/interfaces/input-autocomplete-api/index.ts b/app/src/interfaces/input-autocomplete-api/index.ts
index 507b960e81..2dbd6ff299 100644
--- a/app/src/interfaces/input-autocomplete-api/index.ts
+++ b/app/src/interfaces/input-autocomplete-api/index.ts
@@ -1,5 +1,6 @@
 import { defineInterface } from '@directus/shared/utils';
 import InterfaceInputAutocompleteAPI from './input-autocomplete-api.vue';
+import PreviewSVG from './preview.svg?raw';
 
 export default defineInterface({
 	id: 'input-autocomplete-api',
@@ -8,7 +9,8 @@ export default defineInterface({
 	icon: 'find_in_page',
 	component: InterfaceInputAutocompleteAPI,
 	types: ['string', 'text'],
-	groups: ['standard'],
+	localTypes: ['standard'],
+	group: 'standard',
 	recommendedDisplays: ['formatted-value'],
 	options: [
 		{
@@ -135,4 +137,5 @@ export default defineInterface({
 			},
 		},
 	],
+	preview: PreviewSVG,
 });
diff --git a/app/src/interfaces/input-autocomplete-api/preview.svg b/app/src/interfaces/input-autocomplete-api/preview.svg
new file mode 100644
index 0000000000..ca7ea9ea99
--- /dev/null
+++ b/app/src/interfaces/input-autocomplete-api/preview.svg
@@ -0,0 +1,6 @@
+<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="18" y="35" width="120" height="26" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="19" y="36" width="118" height="24" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="28" y="45" width="50" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="82" y="45" width="20" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+</svg>
diff --git a/app/src/interfaces/input-code/index.ts b/app/src/interfaces/input-code/index.ts
index 0609a36f15..4994bebb84 100644
--- a/app/src/interfaces/input-code/index.ts
+++ b/app/src/interfaces/input-code/index.ts
@@ -2,6 +2,7 @@ import { defineInterface } from '@directus/shared/utils';
 import CodeMirror from 'codemirror';
 import 'codemirror/mode/meta';
 import InterfaceCode from './input-code.vue';
+import PreviewSVG from './preview.svg?raw';
 
 const choicesMap = CodeMirror.modeInfo.reduce((acc: Record<string, string>, choice) => {
 	if (['JSON', 'JSON-LD'].includes(choice.name)) {
@@ -34,6 +35,8 @@ export default defineInterface({
 	icon: 'code',
 	component: InterfaceCode,
 	types: ['string', 'json', 'text', 'geometry'],
+	group: 'standard',
+	preview: PreviewSVG,
 	options: [
 		{
 			field: 'language',
diff --git a/app/src/interfaces/input-code/preview.svg b/app/src/interfaces/input-code/preview.svg
new file mode 100644
index 0000000000..4561483e4c
--- /dev/null
+++ b/app/src/interfaces/input-code/preview.svg
@@ -0,0 +1,14 @@
+<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="18" y="15" width="120" height="66" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="19" y="16" width="118" height="64" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="28" y="25" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="28" y="45.148" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="28" y="55.222" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="28" y="65.296" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="28" y="35.074" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="42" y="25" width="10" height="6" rx="2" fill="var(--primary)" />
+	<rect x="46" y="35" width="50" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="46" y="45" width="60" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="46" y="55" width="40" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="42" y="65" width="10" height="6" rx="2" fill="var(--primary)" />
+</svg>
diff --git a/app/src/interfaces/input-hash/index.ts b/app/src/interfaces/input-hash/index.ts
index 90aec5123b..ef4cab11bc 100644
--- a/app/src/interfaces/input-hash/index.ts
+++ b/app/src/interfaces/input-hash/index.ts
@@ -1,5 +1,6 @@
 import { defineInterface } from '@directus/shared/utils';
 import InterfaceInputHash from './input-hash.vue';
+import PreviewSVG from './preview.svg?raw';
 
 export default defineInterface({
 	id: 'input-hash',
@@ -8,6 +9,8 @@ export default defineInterface({
 	icon: 'fingerprint',
 	component: InterfaceInputHash,
 	types: ['hash'],
+	group: 'other',
+	preview: PreviewSVG,
 	options: [
 		{
 			field: 'placeholder',
diff --git a/app/src/interfaces/input-hash/preview.svg b/app/src/interfaces/input-hash/preview.svg
new file mode 100644
index 0000000000..ca7ea9ea99
--- /dev/null
+++ b/app/src/interfaces/input-hash/preview.svg
@@ -0,0 +1,6 @@
+<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="18" y="35" width="120" height="26" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="19" y="36" width="118" height="24" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="28" y="45" width="50" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="82" y="45" width="20" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+</svg>
diff --git a/app/src/interfaces/input-multiline/index.ts b/app/src/interfaces/input-multiline/index.ts
index 69cde8b2eb..87435a94e5 100644
--- a/app/src/interfaces/input-multiline/index.ts
+++ b/app/src/interfaces/input-multiline/index.ts
@@ -1,5 +1,6 @@
 import { defineInterface } from '@directus/shared/utils';
 import InterfaceInputMultiline from './input-multiline.vue';
+import Preview from './preview.svg?raw';
 
 export default defineInterface({
 	id: 'input-multiline',
@@ -8,6 +9,7 @@ export default defineInterface({
 	icon: 'text_fields',
 	component: InterfaceInputMultiline,
 	types: ['text'],
+	group: 'standard',
 	options: [
 		{
 			field: 'placeholder',
@@ -71,4 +73,5 @@ export default defineInterface({
 			},
 		},
 	],
+	preview: Preview,
 });
diff --git a/app/src/interfaces/input-multiline/preview.svg b/app/src/interfaces/input-multiline/preview.svg
new file mode 100644
index 0000000000..b74fba6b5a
--- /dev/null
+++ b/app/src/interfaces/input-multiline/preview.svg
@@ -0,0 +1,9 @@
+<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="18" y="18" width="120" height="60" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="19" y="19" width="118" height="58" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="28" y="28" width="60" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="28" y="48" width="60" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="28" y="38" width="40" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="92" y="28" width="30" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="72" y="38" width="50" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+</svg>
diff --git a/app/src/interfaces/input-rich-text-html/index.ts b/app/src/interfaces/input-rich-text-html/index.ts
index a8c1e36ce0..57a5e2742e 100644
--- a/app/src/interfaces/input-rich-text-html/index.ts
+++ b/app/src/interfaces/input-rich-text-html/index.ts
@@ -1,5 +1,6 @@
 import { defineInterface } from '@directus/shared/utils';
 import { defineAsyncComponent } from 'vue';
+import PreviewSVG from './preview.svg?raw';
 
 const InterfaceWYSIWYG = defineAsyncComponent(() => import('./input-rich-text-html.vue'));
 
@@ -10,6 +11,8 @@ export default defineInterface({
 	icon: 'format_quote',
 	component: InterfaceWYSIWYG,
 	types: ['text'],
+	group: 'standard',
+	preview: PreviewSVG,
 	options: [
 		{
 			field: 'toolbar',
diff --git a/app/src/interfaces/input-rich-text-html/preview.svg b/app/src/interfaces/input-rich-text-html/preview.svg
new file mode 100644
index 0000000000..7ad3aca76d
--- /dev/null
+++ b/app/src/interfaces/input-rich-text-html/preview.svg
@@ -0,0 +1,15 @@
+<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="18" y="15" width="120" height="66" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="19" y="16" width="118" height="64" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="28" y="25" width="8" height="8" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="42" y="25" width="8" height="8" rx="2" fill="var(--primary)" />
+	<rect x="56" y="25" width="8" height="8" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="70" y="25" width="8" height="8" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="84" y="25" width="8" height="8" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="98" y="25" width="8" height="8" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="28" y="39" width="60" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="28" y="59" width="60" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="28" y="49" width="40" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="92" y="39" width="30" height="6" rx="2" fill="var(--primary)" />
+	<rect x="72" y="49" width="50" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+</svg>
diff --git a/app/src/interfaces/input-rich-text-md/index.ts b/app/src/interfaces/input-rich-text-md/index.ts
index 166fdc2225..5a7b760525 100644
--- a/app/src/interfaces/input-rich-text-md/index.ts
+++ b/app/src/interfaces/input-rich-text-md/index.ts
@@ -1,5 +1,6 @@
 import { defineInterface } from '@directus/shared/utils';
 import InterfaceInputRichTextMD from './input-rich-text-md.vue';
+import PreviewSVG from './preview.svg?raw';
 
 export default defineInterface({
 	id: 'input-rich-text-md',
@@ -8,6 +9,8 @@ export default defineInterface({
 	icon: 'functions',
 	component: InterfaceInputRichTextMD,
 	types: ['text'],
+	group: 'standard',
+	preview: PreviewSVG,
 	options: [
 		{
 			field: 'placeholder',
diff --git a/app/src/interfaces/input-rich-text-md/preview.svg b/app/src/interfaces/input-rich-text-md/preview.svg
new file mode 100644
index 0000000000..7ad3aca76d
--- /dev/null
+++ b/app/src/interfaces/input-rich-text-md/preview.svg
@@ -0,0 +1,15 @@
+<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="18" y="15" width="120" height="66" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="19" y="16" width="118" height="64" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="28" y="25" width="8" height="8" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="42" y="25" width="8" height="8" rx="2" fill="var(--primary)" />
+	<rect x="56" y="25" width="8" height="8" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="70" y="25" width="8" height="8" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="84" y="25" width="8" height="8" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="98" y="25" width="8" height="8" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="28" y="39" width="60" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="28" y="59" width="60" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="28" y="49" width="40" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="92" y="39" width="30" height="6" rx="2" fill="var(--primary)" />
+	<rect x="72" y="49" width="50" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+</svg>
diff --git a/app/src/interfaces/input/index.ts b/app/src/interfaces/input/index.ts
index 869ba573f1..27cc296f6d 100644
--- a/app/src/interfaces/input/index.ts
+++ b/app/src/interfaces/input/index.ts
@@ -1,6 +1,7 @@
+import { ExtensionsOptionsContext } from '@directus/shared/types';
 import { defineInterface } from '@directus/shared/utils';
 import InterfaceInput from './input.vue';
-import Options from './options.vue';
+import PreviewSVG from './preview.svg?raw';
 
 export default defineInterface({
 	id: 'input',
@@ -9,5 +10,210 @@ export default defineInterface({
 	icon: 'text_fields',
 	component: InterfaceInput,
 	types: ['string', 'uuid', 'bigInteger', 'integer', 'float', 'decimal', 'text'],
-	options: Options,
+	group: 'standard',
+	options: ({ field }: ExtensionsOptionsContext) => {
+		const textOptions = {
+			standard: [
+				{
+					field: 'placeholder',
+					name: '$t:placeholder',
+					meta: {
+						width: 'full',
+						interface: 'input',
+						options: {
+							placeholder: '$t:enter_a_placeholder',
+						},
+					},
+				},
+				{
+					field: 'iconLeft',
+					name: '$t:icon_left',
+					type: 'string',
+					meta: {
+						width: 'half',
+						interface: 'select-icon',
+					},
+				},
+				{
+					field: 'iconRight',
+					name: '$t:icon_right',
+					type: 'string',
+					meta: {
+						width: 'half',
+						interface: 'select-icon',
+					},
+				},
+			],
+			advanced: [
+				{
+					field: 'font',
+					name: '$t:font',
+					type: 'string',
+					meta: {
+						width: 'half',
+						interface: 'select-dropdown',
+						options: {
+							choices: [
+								{ text: '$t:sans_serif', value: 'sans-serif' },
+								{ text: '$t:monospace', value: 'monospace' },
+								{ text: '$t:serif', value: 'serif' },
+							],
+						},
+					},
+					schema: {
+						default_value: 'sans-serif',
+					},
+				},
+				{
+					field: 'trim',
+					name: '$t:interfaces.input.trim',
+					type: 'boolean',
+					meta: {
+						width: 'half',
+						interface: 'boolean',
+						options: {
+							label: '$t:interfaces.input.trim_label',
+						},
+					},
+					schema: {
+						default_value: false,
+					},
+				},
+				{
+					field: 'masked',
+					name: '$t:interfaces.input.mask',
+					type: 'boolean',
+					meta: {
+						width: 'half',
+						interface: 'boolean',
+						options: {
+							label: '$t:interfaces.input.mask_label',
+						},
+					},
+					schema: {
+						default_value: false,
+					},
+				},
+				{
+					field: 'clear',
+					name: '$t:interfaces.input.clear',
+					type: 'boolean',
+					meta: {
+						width: 'half',
+						interface: 'boolean',
+						options: {
+							label: '$t:interfaces.input.clear_label',
+						},
+					},
+					schema: {
+						default_value: false,
+					},
+				},
+				{
+					field: 'slug',
+					name: '$t:interfaces.input.slug',
+					type: 'boolean',
+					meta: {
+						width: 'half',
+						interface: 'boolean',
+						options: {
+							label: '$t:interfaces.input.slug_label',
+						},
+					},
+					schema: {
+						default_value: false,
+					},
+				},
+			],
+		};
+
+		const numberOptions = [
+			{
+				field: 'min',
+				name: '$t:interfaces.input.minimum_value',
+				type: 'integer',
+				meta: {
+					width: 'half',
+					interface: 'input',
+				},
+			},
+			{
+				field: 'max',
+				name: '$t:interfaces.input.maximum_value',
+				type: 'integer',
+				meta: {
+					width: 'half',
+					interface: 'input',
+				},
+			},
+			{
+				field: 'step',
+				name: '$t:interfaces.input.step_interval',
+				type: 'integer',
+				meta: {
+					width: 'half',
+					interface: 'input',
+				},
+				schema: {
+					default_value: 1,
+				},
+			},
+			{
+				field: 'placeholder',
+				name: '$t:placeholder',
+				type: 'string',
+				meta: {
+					width: 'half',
+					interface: 'input',
+					options: {
+						placeholder: '$t:enter_a_placeholder',
+					},
+				},
+			},
+			{
+				field: 'iconLeft',
+				name: '$t:icon_left',
+				type: 'string',
+				meta: {
+					width: 'half',
+					interface: 'select-icon',
+				},
+			},
+			{
+				field: 'iconRight',
+				name: '$t:icon_right',
+				type: 'string',
+				meta: {
+					width: 'half',
+					interface: 'select-icon',
+				},
+			},
+			{
+				field: 'font',
+				name: '$t:font',
+				type: 'string',
+				meta: {
+					width: 'half',
+					interface: 'select-dropdown',
+					options: {
+						choices: [
+							{ text: '$t:sans_serif', value: 'sans-serif' },
+							{ text: '$t:monospace', value: 'monospace' },
+							{ text: '$t:serif', value: 'serif' },
+						],
+					},
+				},
+				schema: {
+					default_value: 'sans-serif',
+				},
+			},
+		];
+
+		if (field.type && ['bigInteger', 'integer', 'float', 'decimal'].includes(field.type)) {
+			return numberOptions;
+		}
+
+		return textOptions;
+	},
+	preview: PreviewSVG,
 });
diff --git a/app/src/interfaces/input/options.vue b/app/src/interfaces/input/options.vue
deleted file mode 100644
index 0f52e794c4..0000000000
--- a/app/src/interfaces/input/options.vue
+++ /dev/null
@@ -1,237 +0,0 @@
-<template>
-	<div>
-		<v-form v-model="options" :fields="fields" />
-	</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import { Field } from '@directus/shared/types';
-
-export default defineComponent({
-	props: {
-		fieldData: {
-			type: Object as PropType<Field>,
-			default: null,
-		},
-		value: {
-			type: Object,
-			default: null,
-		},
-	},
-	emits: ['input'],
-	setup(props, { emit }) {
-		const options = computed({
-			get() {
-				return props.value || {};
-			},
-			set(options: Record<string, unknown>) {
-				emit('input', options);
-			},
-		});
-
-		const textOptions = [
-			{
-				field: 'placeholder',
-				name: '$t:placeholder',
-				meta: {
-					width: 'half',
-					interface: 'input',
-					options: {
-						placeholder: '$t:enter_a_placeholder',
-					},
-				},
-			},
-			{
-				field: 'font',
-				name: '$t:font',
-				type: 'string',
-				meta: {
-					width: 'half',
-					interface: 'select-dropdown',
-					options: {
-						choices: [
-							{ text: '$t:sans_serif', value: 'sans-serif' },
-							{ text: '$t:monospace', value: 'monospace' },
-							{ text: '$t:serif', value: 'serif' },
-						],
-					},
-				},
-				schema: {
-					default_value: 'sans-serif',
-				},
-			},
-			{
-				field: 'iconLeft',
-				name: '$t:icon_left',
-				type: 'string',
-				meta: {
-					width: 'half',
-					interface: 'select-icon',
-				},
-			},
-			{
-				field: 'iconRight',
-				name: '$t:icon_right',
-				type: 'string',
-				meta: {
-					width: 'half',
-					interface: 'select-icon',
-				},
-			},
-			{
-				field: 'trim',
-				name: '$t:interfaces.input.trim',
-				type: 'boolean',
-				meta: {
-					width: 'half',
-					interface: 'boolean',
-					options: {
-						label: '$t:interfaces.input.trim_label',
-					},
-				},
-				schema: {
-					default_value: false,
-				},
-			},
-			{
-				field: 'masked',
-				name: '$t:interfaces.input.mask',
-				type: 'boolean',
-				meta: {
-					width: 'half',
-					interface: 'boolean',
-					options: {
-						label: '$t:interfaces.input.mask_label',
-					},
-				},
-				schema: {
-					default_value: false,
-				},
-			},
-			{
-				field: 'clear',
-				name: '$t:interfaces.input.clear',
-				type: 'boolean',
-				meta: {
-					width: 'half',
-					interface: 'boolean',
-					options: {
-						label: '$t:interfaces.input.clear_label',
-					},
-				},
-				schema: {
-					default_value: false,
-				},
-			},
-			{
-				field: 'slug',
-				name: '$t:interfaces.input.slug',
-				type: 'boolean',
-				meta: {
-					width: 'half',
-					interface: 'boolean',
-					options: {
-						label: '$t:interfaces.input.slug_label',
-					},
-				},
-				schema: {
-					default_value: false,
-				},
-			},
-		];
-
-		const numberOptions = [
-			{
-				field: 'min',
-				name: '$t:interfaces.input.minimum_value',
-				type: 'integer',
-				meta: {
-					width: 'half',
-					interface: 'input',
-				},
-			},
-			{
-				field: 'max',
-				name: '$t:interfaces.input.maximum_value',
-				type: 'integer',
-				meta: {
-					width: 'half',
-					interface: 'input',
-				},
-			},
-			{
-				field: 'step',
-				name: '$t:interfaces.input.step_interval',
-				type: 'integer',
-				meta: {
-					width: 'half',
-					interface: 'input',
-				},
-				schema: {
-					default_value: 1,
-				},
-			},
-			{
-				field: 'placeholder',
-				name: '$t:placeholder',
-				type: 'string',
-				meta: {
-					width: 'half',
-					interface: 'input',
-					options: {
-						placeholder: '$t:enter_a_placeholder',
-					},
-				},
-			},
-			{
-				field: 'iconLeft',
-				name: '$t:icon_left',
-				type: 'string',
-				meta: {
-					width: 'half',
-					interface: 'select-icon',
-				},
-			},
-			{
-				field: 'iconRight',
-				name: '$t:icon_right',
-				type: 'string',
-				meta: {
-					width: 'half',
-					interface: 'select-icon',
-				},
-			},
-			{
-				field: 'font',
-				name: '$t:font',
-				type: 'string',
-				meta: {
-					width: 'half',
-					interface: 'select-dropdown',
-					options: {
-						choices: [
-							{ text: '$t:sans_serif', value: 'sans-serif' },
-							{ text: '$t:monospace', value: 'monospace' },
-							{ text: '$t:serif', value: 'serif' },
-						],
-					},
-				},
-				schema: {
-					default_value: 'sans-serif',
-				},
-			},
-		];
-
-		const fields = computed(() => {
-			if (['bigInteger', 'integer', 'float', 'decimal'].includes(props.fieldData?.type)) {
-				return numberOptions;
-			}
-
-			return textOptions;
-		});
-
-		return { fields, options };
-	},
-});
-</script>
diff --git a/app/src/interfaces/input/preview.svg b/app/src/interfaces/input/preview.svg
new file mode 100644
index 0000000000..cd4b749c59
--- /dev/null
+++ b/app/src/interfaces/input/preview.svg
@@ -0,0 +1,6 @@
+<svg width="156" height="96" viewBox="0 0 156 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="18" y="35" width="120" height="26" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="19" y="36" width="118" height="24" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="28" y="45" width="50" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="82" y="45" width="20" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+</svg>
diff --git a/app/src/interfaces/list-m2a/index.ts b/app/src/interfaces/list-m2a/index.ts
index e187b839b4..cdfbd75381 100644
--- a/app/src/interfaces/list-m2a/index.ts
+++ b/app/src/interfaces/list-m2a/index.ts
@@ -1,5 +1,6 @@
 import { defineInterface } from '@directus/shared/utils';
 import InterfaceListM2A from './list-m2a.vue';
+import PreviewSVG from './preview.svg?raw';
 
 export default defineInterface({
 	id: 'list-m2a',
@@ -8,7 +9,8 @@ export default defineInterface({
 	component: InterfaceListM2A,
 	relational: true,
 	types: ['alias'],
-	groups: ['m2a'],
+	localTypes: ['m2a'],
+	group: 'relational',
 	options: [
 		{
 			field: 'enableSelect',
@@ -39,4 +41,5 @@ export default defineInterface({
 			},
 		},
 	],
+	preview: PreviewSVG,
 });
diff --git a/app/src/interfaces/list-m2a/preview.svg b/app/src/interfaces/list-m2a/preview.svg
new file mode 100644
index 0000000000..e3a5f6e2fd
--- /dev/null
+++ b/app/src/interfaces/list-m2a/preview.svg
@@ -0,0 +1,20 @@
+<svg width="156" height="96" viewBox="0 0 156 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="18.4443" y="9" width="120" height="22" rx="6" fill="var(--background-page)" />
+	<rect x="19.4443" y="10" width="118" height="20" rx="5" stroke="var(--primary)" stroke-opacity="0.25"
+		stroke-width="2" />
+	<rect x="46" y="17" width="10" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="60" y="17" width="40" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<path opacity="0.5" d="M38 18H28V19.2691H38V18ZM28 21.7778H38V20.5087H28V21.7778Z" fill="var(--primary)" />
+	<rect x="18" y="65" width="120" height="22" rx="6" fill="var(--background-page)" />
+	<rect x="19" y="66" width="118" height="20" rx="5" stroke="var(--primary)" stroke-opacity="0.25" stroke-width="2" />
+	<rect x="46" y="73" width="60" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<path opacity="0.5" d="M38 74H28V75.2691H38V74ZM28 77.7778H38V76.5087H28V77.7778Z" fill="var(--primary)" />
+	<rect x="18" y="37" width="120" height="22" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="19" y="38" width="118" height="20" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="46" y="45" width="30" height="6" rx="2" fill="var(--primary)" />
+	<rect x="80" y="45" width="10" height="6" rx="2" fill="var(--primary)" />
+	<path d="M38 46H28V47.2691H38V46ZM28 49.7778H38V48.5087H28V49.7778Z" fill="var(--primary)" />
+	<path
+		d="M127.074 52.0742H118.926V43.9258H123V42.75H118.926C118.27 42.75 117.75 43.2695 117.75 43.9258V52.0742C117.75 52.7305 118.27 53.25 118.926 53.25H127.074C127.73 53.25 128.25 52.7305 128.25 52.0742V48H127.074V52.0742ZM124.176 42.75V43.9258H126.254L120.539 49.6406L121.359 50.4609L127.074 44.7461V46.8242H128.25V42.75H124.176Z"
+		fill="var(--primary)" />
+</svg>
diff --git a/app/src/interfaces/list-m2m/index.ts b/app/src/interfaces/list-m2m/index.ts
index 538fe8b731..16fa561d61 100644
--- a/app/src/interfaces/list-m2m/index.ts
+++ b/app/src/interfaces/list-m2m/index.ts
@@ -1,6 +1,7 @@
 import { defineInterface } from '@directus/shared/utils';
 import InterfaceListM2M from './list-m2m.vue';
-import Options from './options.vue';
+import PreviewSVG from './preview.svg?raw';
+import { ExtensionsOptionsContext } from '@directus/shared/types';
 
 export default defineInterface({
 	id: 'list-m2m',
@@ -10,7 +11,50 @@ export default defineInterface({
 	component: InterfaceListM2M,
 	relational: true,
 	types: ['alias'],
-	groups: ['m2m'],
-	options: Options,
+	localTypes: ['m2m'],
+	group: 'relational',
+	options: ({ relations }: ExtensionsOptionsContext) => {
+		return [
+			{
+				field: 'template',
+				name: '$t:display_template',
+				meta: {
+					interface: 'system-display-template',
+					options: {
+						collectionName: relations.m2o?.related_collection ?? null,
+					},
+				},
+			},
+			{
+				field: 'enableCreate',
+				name: '$t:creating_items',
+				schema: {
+					default_value: true,
+				},
+				meta: {
+					interface: 'boolean',
+					options: {
+						label: '$t:enable_create_button',
+					},
+					width: 'half',
+				},
+			},
+			{
+				field: 'enableSelect',
+				name: '$t:selecting_items',
+				schema: {
+					default_value: true,
+				},
+				meta: {
+					interface: 'boolean',
+					options: {
+						label: '$t:enable_select_button',
+					},
+					width: 'half',
+				},
+			},
+		];
+	},
 	recommendedDisplays: ['related-values'],
+	preview: PreviewSVG,
 });
diff --git a/app/src/interfaces/list-m2m/options.vue b/app/src/interfaces/list-m2m/options.vue
deleted file mode 100644
index 52411a6aa0..0000000000
--- a/app/src/interfaces/list-m2m/options.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-	<v-notice v-if="junctionCollection === null" type="warning">
-		{{ t('interfaces.list-o2m.no_collection') }}
-	</v-notice>
-	<div v-else class="form-grid">
-		<div class="field full">
-			<p class="type-label">{{ t('display_template') }}</p>
-			<v-field-template
-				v-model="template"
-				:collection="junctionCollection"
-				:depth="2"
-				:inject="!!junctionCollectionInfo ? null : { fields: newFields, collections: newCollections, relations }"
-				:placeholder="
-					junctionCollectionInfo && junctionCollectionInfo.meta && junctionCollectionInfo.meta.display_template
-				"
-			/>
-		</div>
-
-		<div class="field half-left">
-			<p class="type-label">{{ t('creating_items') }}</p>
-			<v-checkbox v-model="enableCreate" block :label="t('enable_create_button')" />
-		</div>
-
-		<div class="field half-right">
-			<p class="type-label">{{ t('selecting_items') }}</p>
-			<v-checkbox v-model="enableSelect" block :label="t('enable_select_button')" />
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { Field, Relation } from '@directus/shared/types';
-import { Collection } from '@/types';
-import { defineComponent, PropType, computed } from 'vue';
-import { useCollectionsStore } from '@/stores';
-export default defineComponent({
-	props: {
-		collection: {
-			type: String,
-			required: true,
-		},
-		fieldData: {
-			type: Object as PropType<Field>,
-			default: null,
-		},
-		relations: {
-			type: Array as PropType<Relation[]>,
-			default: () => [],
-		},
-		value: {
-			type: Object as PropType<Record<string, any>>,
-			default: null,
-		},
-		newCollections: {
-			type: Array as PropType<Collection[]>,
-			default: () => [],
-		},
-		newFields: {
-			type: Array as PropType<Field[]>,
-			default: () => [],
-		},
-	},
-	emits: ['input'],
-	setup(props, { emit }) {
-		const { t } = useI18n();
-
-		const collectionsStore = useCollectionsStore();
-
-		const template = computed({
-			get() {
-				return props.value?.template;
-			},
-			set(newTemplate: string) {
-				emit('input', {
-					...(props.value || {}),
-					template: newTemplate,
-				});
-			},
-		});
-
-		const enableCreate = computed({
-			get() {
-				return props.value?.enableCreate ?? true;
-			},
-			set(val: boolean) {
-				emit('input', {
-					...(props.value || {}),
-					enableCreate: val,
-				});
-			},
-		});
-
-		const enableSelect = computed({
-			get() {
-				return props.value?.enableSelect ?? true;
-			},
-			set(val: boolean) {
-				emit('input', {
-					...(props.value || {}),
-					enableSelect: val,
-				});
-			},
-		});
-
-		const junctionCollection = computed(() => {
-			if (!props.fieldData || !props.relations || props.relations.length === 0) return null;
-			const { field } = props.fieldData;
-			const junctionRelation = props.relations.find(
-				(relation) => relation.related_collection === props.collection && relation.meta?.one_field === field
-			);
-			return junctionRelation?.collection || null;
-		});
-
-		const junctionCollectionInfo = computed(() => {
-			if (!junctionCollection.value) return null;
-
-			return collectionsStore.getCollection(junctionCollection.value);
-		});
-
-		return { t, template, enableCreate, enableSelect, junctionCollection, junctionCollectionInfo };
-	},
-});
-</script>
diff --git a/app/src/interfaces/list-m2m/preview.svg b/app/src/interfaces/list-m2m/preview.svg
new file mode 100644
index 0000000000..e3a5f6e2fd
--- /dev/null
+++ b/app/src/interfaces/list-m2m/preview.svg
@@ -0,0 +1,20 @@
+<svg width="156" height="96" viewBox="0 0 156 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="18.4443" y="9" width="120" height="22" rx="6" fill="var(--background-page)" />
+	<rect x="19.4443" y="10" width="118" height="20" rx="5" stroke="var(--primary)" stroke-opacity="0.25"
+		stroke-width="2" />
+	<rect x="46" y="17" width="10" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="60" y="17" width="40" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<path opacity="0.5" d="M38 18H28V19.2691H38V18ZM28 21.7778H38V20.5087H28V21.7778Z" fill="var(--primary)" />
+	<rect x="18" y="65" width="120" height="22" rx="6" fill="var(--background-page)" />
+	<rect x="19" y="66" width="118" height="20" rx="5" stroke="var(--primary)" stroke-opacity="0.25" stroke-width="2" />
+	<rect x="46" y="73" width="60" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<path opacity="0.5" d="M38 74H28V75.2691H38V74ZM28 77.7778H38V76.5087H28V77.7778Z" fill="var(--primary)" />
+	<rect x="18" y="37" width="120" height="22" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="19" y="38" width="118" height="20" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="46" y="45" width="30" height="6" rx="2" fill="var(--primary)" />
+	<rect x="80" y="45" width="10" height="6" rx="2" fill="var(--primary)" />
+	<path d="M38 46H28V47.2691H38V46ZM28 49.7778H38V48.5087H28V49.7778Z" fill="var(--primary)" />
+	<path
+		d="M127.074 52.0742H118.926V43.9258H123V42.75H118.926C118.27 42.75 117.75 43.2695 117.75 43.9258V52.0742C117.75 52.7305 118.27 53.25 118.926 53.25H127.074C127.73 53.25 128.25 52.7305 128.25 52.0742V48H127.074V52.0742ZM124.176 42.75V43.9258H126.254L120.539 49.6406L121.359 50.4609L127.074 44.7461V46.8242H128.25V42.75H124.176Z"
+		fill="var(--primary)" />
+</svg>
diff --git a/app/src/interfaces/list-o2m-tree-view/index.ts b/app/src/interfaces/list-o2m-tree-view/index.ts
index 0d24009ce4..074482ffdf 100644
--- a/app/src/interfaces/list-o2m-tree-view/index.ts
+++ b/app/src/interfaces/list-o2m-tree-view/index.ts
@@ -1,6 +1,6 @@
 import { defineInterface } from '@directus/shared/utils';
-import Options from './options.vue';
 import InterfaceListO2MTreeView from './list-o2m-tree-view.vue';
+import { ExtensionsOptionsContext } from '@directus/shared/types';
 
 export default defineInterface({
 	id: 'list-o2m-tree-view',
@@ -8,8 +8,53 @@ export default defineInterface({
 	description: '$t:interfaces.list-o2m-tree-view.description',
 	icon: 'account_tree',
 	types: ['alias'],
-	groups: ['o2m'],
+	localTypes: ['o2m'],
+	group: 'relational',
 	relational: true,
 	component: InterfaceListO2MTreeView,
-	options: Options,
+	options: ({ relations }: ExtensionsOptionsContext) => {
+		const collection = relations.o2m?.collection;
+
+		return [
+			{
+				field: 'template',
+				name: '$t:display_template',
+				meta: {
+					interface: 'system-display-template',
+					options: {
+						collectionName: collection,
+					},
+					width: 'full',
+				},
+			},
+			{
+				field: 'enableCreate',
+				name: '$t:creating_items',
+				schema: {
+					default_value: true,
+				},
+				meta: {
+					interface: 'boolean',
+					options: {
+						label: '$t:enable_create_button',
+					},
+					width: 'half',
+				},
+			},
+			{
+				field: 'enableSelect',
+				name: '$t:selecting_items',
+				schema: {
+					default_value: true,
+				},
+				meta: {
+					interface: 'boolean',
+					options: {
+						label: '$t:enable_select_button',
+					},
+					width: 'half',
+				},
+			},
+		];
+	},
 });
diff --git a/app/src/interfaces/list-o2m-tree-view/options.vue b/app/src/interfaces/list-o2m-tree-view/options.vue
deleted file mode 100644
index 8fa62edf09..0000000000
--- a/app/src/interfaces/list-o2m-tree-view/options.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-	<v-notice v-if="collection === null" class="full" type="warning">
-		{{ t('interfaces.list-o2m.no_collection') }}
-	</v-notice>
-	<div v-else class="form-grid">
-		<div class="field full">
-			<p class="type-label">{{ t('interfaces.select-dropdown-m2o.display_template') }}</p>
-			<v-field-template v-model="template" :collection="collection" :depth="1"></v-field-template>
-		</div>
-
-		<div class="field half-left">
-			<p class="type-label">{{ t('creating_items') }}</p>
-			<v-checkbox v-model="enableCreate" block :label="t('enable_create_button')" />
-		</div>
-
-		<div class="field half-right">
-			<p class="type-label">{{ t('selecting_items') }}</p>
-			<v-checkbox v-model="enableSelect" block :label="t('enable_select_button')" />
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { Field, Relation } from '@directus/shared/types';
-import { defineComponent, PropType, computed } from 'vue';
-export default defineComponent({
-	props: {
-		collection: {
-			type: String,
-			required: true,
-		},
-		fieldData: {
-			type: Object as PropType<Field>,
-			default: null,
-		},
-		relations: {
-			type: Array as PropType<Relation[]>,
-			default: () => [],
-		},
-		value: {
-			type: Object as PropType<Record<string, any>>,
-			default: null,
-		},
-	},
-	emits: ['input'],
-	setup(props, { emit }) {
-		const { t } = useI18n();
-
-		const template = computed({
-			get() {
-				return props.value?.displayTemplate;
-			},
-			set(newTemplate: string) {
-				emit('input', {
-					...(props.value || {}),
-					displayTemplate: newTemplate,
-				});
-			},
-		});
-
-		const enableCreate = computed({
-			get() {
-				return props.value?.enableCreate ?? true;
-			},
-			set(val: boolean) {
-				emit('input', {
-					...(props.value || {}),
-					enableCreate: val,
-				});
-			},
-		});
-
-		const enableSelect = computed({
-			get() {
-				return props.value?.enableSelect ?? true;
-			},
-			set(val: boolean) {
-				emit('input', {
-					...(props.value || {}),
-					enableSelect: val,
-				});
-			},
-		});
-
-		return { t, template, enableCreate, enableSelect };
-	},
-});
-</script>
diff --git a/app/src/interfaces/list-o2m/index.ts b/app/src/interfaces/list-o2m/index.ts
index d47303e4df..864ee3b53f 100644
--- a/app/src/interfaces/list-o2m/index.ts
+++ b/app/src/interfaces/list-o2m/index.ts
@@ -1,6 +1,7 @@
 import { defineInterface } from '@directus/shared/utils';
 import InterfaceListO2M from './list-o2m.vue';
-import Options from './options.vue';
+import PreviewSVG from './preview.svg?raw';
+import { ExtensionsOptionsContext } from '@directus/shared/types';
 
 export default defineInterface({
 	id: 'list-o2m',
@@ -9,8 +10,54 @@ export default defineInterface({
 	icon: 'arrow_right_alt',
 	component: InterfaceListO2M,
 	types: ['alias'],
-	groups: ['o2m'],
+	localTypes: ['o2m'],
+	group: 'relational',
 	relational: true,
-	options: Options,
+	options: ({ relations }: ExtensionsOptionsContext) => {
+		const collection = relations.o2m?.collection;
+
+		return [
+			{
+				field: 'template',
+				name: '$t:display_template',
+				meta: {
+					interface: 'system-display-template',
+					options: {
+						collectionName: collection,
+					},
+					width: 'full',
+				},
+			},
+			{
+				field: 'enableCreate',
+				name: '$t:creating_items',
+				schema: {
+					default_value: true,
+				},
+				meta: {
+					interface: 'boolean',
+					options: {
+						label: '$t:enable_create_button',
+					},
+					width: 'half',
+				},
+			},
+			{
+				field: 'enableSelect',
+				name: '$t:selecting_items',
+				schema: {
+					default_value: true,
+				},
+				meta: {
+					interface: 'boolean',
+					options: {
+						label: '$t:enable_select_button',
+					},
+					width: 'half',
+				},
+			},
+		];
+	},
 	recommendedDisplays: ['related-values'],
+	preview: PreviewSVG,
 });
diff --git a/app/src/interfaces/list-o2m/options.vue b/app/src/interfaces/list-o2m/options.vue
deleted file mode 100644
index 0ad041586b..0000000000
--- a/app/src/interfaces/list-o2m/options.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-	<v-notice v-if="relatedCollection === null" type="warning">
-		{{ t('interfaces.list-o2m.no_collection') }}
-	</v-notice>
-	<div v-else class="form-grid">
-		<div class="field full">
-			<p class="type-label">{{ t('display_template') }}</p>
-			<v-field-template
-				v-model="template"
-				:collection="relatedCollection"
-				:depth="2"
-				:inject="!!relatedCollectionInfo ? null : { fields: newFields, collections: newCollections, relations }"
-				:placeholder="
-					relatedCollectionInfo && relatedCollectionInfo.meta && relatedCollectionInfo.meta.display_template
-				"
-			/>
-		</div>
-
-		<div class="field half-left">
-			<p class="type-label">{{ t('creating_items') }}</p>
-			<v-checkbox v-model="enableCreate" block :label="t('enable_create_button')" />
-		</div>
-
-		<div class="field half-right">
-			<p class="type-label">{{ t('selecting_items') }}</p>
-			<v-checkbox v-model="enableSelect" block :label="t('enable_select_button')" />
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { Field, Relation } from '@directus/shared/types';
-import { Collection } from '@/types';
-import { defineComponent, PropType, computed } from 'vue';
-import { useCollectionsStore } from '@/stores/';
-
-export default defineComponent({
-	props: {
-		collection: {
-			type: String,
-			required: true,
-		},
-		fieldData: {
-			type: Object as PropType<Field>,
-			default: null,
-		},
-		relations: {
-			type: Array as PropType<Relation[]>,
-			default: () => [],
-		},
-		value: {
-			type: Object as PropType<Record<string, any>>,
-			default: null,
-		},
-		newCollections: {
-			type: Array as PropType<Collection[]>,
-			default: () => [],
-		},
-		newFields: {
-			type: Array as PropType<Field[]>,
-			default: () => [],
-		},
-	},
-	emits: ['input'],
-	setup(props, { emit }) {
-		const { t } = useI18n();
-
-		const collectionsStore = useCollectionsStore();
-
-		const template = computed({
-			get() {
-				return props.value?.template;
-			},
-			set(newTemplate: string) {
-				emit('input', {
-					...(props.value || {}),
-					template: newTemplate,
-				});
-			},
-		});
-
-		const enableCreate = computed({
-			get() {
-				return props.value?.enableCreate ?? true;
-			},
-			set(val: boolean) {
-				emit('input', {
-					...(props.value || {}),
-					enableCreate: val,
-				});
-			},
-		});
-
-		const enableSelect = computed({
-			get() {
-				return props.value?.enableSelect ?? true;
-			},
-			set(val: boolean) {
-				emit('input', {
-					...(props.value || {}),
-					enableSelect: val,
-				});
-			},
-		});
-
-		const relatedCollection = computed(() => {
-			if (!props.fieldData || !props.relations || props.relations.length === 0) return null;
-			const { field } = props.fieldData;
-			const relatedRelation = props.relations.find(
-				(relation) => relation.related_collection === props.collection && relation.meta?.one_field === field
-			);
-			return relatedRelation?.collection || null;
-		});
-
-		const relatedCollectionInfo = computed(() => {
-			if (!relatedCollection.value) return null;
-			return collectionsStore.getCollection(relatedCollection.value);
-		});
-
-		return { t, template, enableCreate, enableSelect, relatedCollection, relatedCollectionInfo };
-	},
-});
-</script>
diff --git a/app/src/interfaces/list-o2m/preview.svg b/app/src/interfaces/list-o2m/preview.svg
new file mode 100644
index 0000000000..e3a5f6e2fd
--- /dev/null
+++ b/app/src/interfaces/list-o2m/preview.svg
@@ -0,0 +1,20 @@
+<svg width="156" height="96" viewBox="0 0 156 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="18.4443" y="9" width="120" height="22" rx="6" fill="var(--background-page)" />
+	<rect x="19.4443" y="10" width="118" height="20" rx="5" stroke="var(--primary)" stroke-opacity="0.25"
+		stroke-width="2" />
+	<rect x="46" y="17" width="10" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="60" y="17" width="40" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<path opacity="0.5" d="M38 18H28V19.2691H38V18ZM28 21.7778H38V20.5087H28V21.7778Z" fill="var(--primary)" />
+	<rect x="18" y="65" width="120" height="22" rx="6" fill="var(--background-page)" />
+	<rect x="19" y="66" width="118" height="20" rx="5" stroke="var(--primary)" stroke-opacity="0.25" stroke-width="2" />
+	<rect x="46" y="73" width="60" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<path opacity="0.5" d="M38 74H28V75.2691H38V74ZM28 77.7778H38V76.5087H28V77.7778Z" fill="var(--primary)" />
+	<rect x="18" y="37" width="120" height="22" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="19" y="38" width="118" height="20" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="46" y="45" width="30" height="6" rx="2" fill="var(--primary)" />
+	<rect x="80" y="45" width="10" height="6" rx="2" fill="var(--primary)" />
+	<path d="M38 46H28V47.2691H38V46ZM28 49.7778H38V48.5087H28V49.7778Z" fill="var(--primary)" />
+	<path
+		d="M127.074 52.0742H118.926V43.9258H123V42.75H118.926C118.27 42.75 117.75 43.2695 117.75 43.9258V52.0742C117.75 52.7305 118.27 53.25 118.926 53.25H127.074C127.73 53.25 128.25 52.7305 128.25 52.0742V48H127.074V52.0742ZM124.176 42.75V43.9258H126.254L120.539 49.6406L121.359 50.4609L127.074 44.7461V46.8242H128.25V42.75H124.176Z"
+		fill="var(--primary)" />
+</svg>
diff --git a/app/src/interfaces/list/index.ts b/app/src/interfaces/list/index.ts
index 6e88dcaf84..e88a4bbc80 100644
--- a/app/src/interfaces/list/index.ts
+++ b/app/src/interfaces/list/index.ts
@@ -1,6 +1,7 @@
 import { defineInterface } from '@directus/shared/utils';
 import RepeaterOptions from './options.vue';
 import InterfaceList from './list.vue';
+import PreviewSVG from './preview.svg?raw';
 
 export default defineInterface({
 	id: 'list',
@@ -9,5 +10,7 @@ export default defineInterface({
 	icon: 'replay',
 	component: InterfaceList,
 	types: ['json'],
+	group: 'selection',
 	options: RepeaterOptions,
+	preview: PreviewSVG,
 });
diff --git a/app/src/interfaces/list/options.vue b/app/src/interfaces/list/options.vue
index 2a5d3b557c..a23e251572 100644
--- a/app/src/interfaces/list/options.vue
+++ b/app/src/interfaces/list/options.vue
@@ -27,7 +27,7 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed } from 'vue';
 import Repeater from './list.vue';
 import { Field, FieldMeta } from '@directus/shared/types';
-import { fieldTypes } from '@/modules/settings/routes/data-model/field-detail/components/schema.vue';
+import { FIELD_TYPES_SELECT } from '@/constants';
 import { DeepPartial } from '@directus/shared/types';
 import { translate } from '@/utils/translate-object-values';
 
@@ -111,7 +111,7 @@ export default defineComponent({
 					width: 'half',
 					sort: 4,
 					options: {
-						choices: translate(fieldTypes),
+						choices: translate(FIELD_TYPES_SELECT),
 					},
 				},
 				schema: null,
diff --git a/app/src/interfaces/list/preview.svg b/app/src/interfaces/list/preview.svg
new file mode 100644
index 0000000000..e3a5f6e2fd
--- /dev/null
+++ b/app/src/interfaces/list/preview.svg
@@ -0,0 +1,20 @@
+<svg width="156" height="96" viewBox="0 0 156 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="18.4443" y="9" width="120" height="22" rx="6" fill="var(--background-page)" />
+	<rect x="19.4443" y="10" width="118" height="20" rx="5" stroke="var(--primary)" stroke-opacity="0.25"
+		stroke-width="2" />
+	<rect x="46" y="17" width="10" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="60" y="17" width="40" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<path opacity="0.5" d="M38 18H28V19.2691H38V18ZM28 21.7778H38V20.5087H28V21.7778Z" fill="var(--primary)" />
+	<rect x="18" y="65" width="120" height="22" rx="6" fill="var(--background-page)" />
+	<rect x="19" y="66" width="118" height="20" rx="5" stroke="var(--primary)" stroke-opacity="0.25" stroke-width="2" />
+	<rect x="46" y="73" width="60" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<path opacity="0.5" d="M38 74H28V75.2691H38V74ZM28 77.7778H38V76.5087H28V77.7778Z" fill="var(--primary)" />
+	<rect x="18" y="37" width="120" height="22" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="19" y="38" width="118" height="20" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="46" y="45" width="30" height="6" rx="2" fill="var(--primary)" />
+	<rect x="80" y="45" width="10" height="6" rx="2" fill="var(--primary)" />
+	<path d="M38 46H28V47.2691H38V46ZM28 49.7778H38V48.5087H28V49.7778Z" fill="var(--primary)" />
+	<path
+		d="M127.074 52.0742H118.926V43.9258H123V42.75H118.926C118.27 42.75 117.75 43.2695 117.75 43.9258V52.0742C117.75 52.7305 118.27 53.25 118.926 53.25H127.074C127.73 53.25 128.25 52.7305 128.25 52.0742V48H127.074V52.0742ZM124.176 42.75V43.9258H126.254L120.539 49.6406L121.359 50.4609L127.074 44.7461V46.8242H128.25V42.75H124.176Z"
+		fill="var(--primary)" />
+</svg>
diff --git a/app/src/interfaces/map/index.ts b/app/src/interfaces/map/index.ts
index d9893d8175..51710e6021 100644
--- a/app/src/interfaces/map/index.ts
+++ b/app/src/interfaces/map/index.ts
@@ -9,6 +9,7 @@ export default defineInterface({
 	icon: 'map',
 	component: InterfaceMap,
 	types: ['geometry', 'json', 'string', 'text', 'binary', 'csv'],
+	group: 'selection',
 	options: Options,
 	recommendedDisplays: [],
 });
diff --git a/app/src/interfaces/map/options.vue b/app/src/interfaces/map/options.vue
index 18f05df818..1db7ba898f 100644
--- a/app/src/interfaces/map/options.vue
+++ b/app/src/interfaces/map/options.vue
@@ -34,7 +34,7 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
-		fieldData: {
+		field: {
 			type: Object as PropType<Field>,
 			default: null,
 		},
@@ -47,11 +47,11 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const { t } = useI18n();
 
-		const isGeometry = props.fieldData.type == 'geometry';
-		const nativeGeometryType = isGeometry ? (props.fieldData!.schema!.geometry_type as GeometryType) : undefined;
-		const geometryFormat = isGeometry ? ('native' as const) : getGeometryFormatForType(props.fieldData.type);
+		const isGeometry = props.field.type == 'geometry';
+		const nativeGeometryType = isGeometry ? (props.field!.schema!.geometry_type as GeometryType) : undefined;
+		const geometryFormat = isGeometry ? ('native' as const) : getGeometryFormatForType(props.field.type);
 		const geometryType = ref<GeometryType>(
-			geometryFormat.value == 'lnglat' ? 'Point' : nativeGeometryType ?? props.value?.geometryType
+			geometryFormat === 'lnglat' ? 'Point' : nativeGeometryType ?? props.value?.geometryType
 		);
 		const defaultView = ref<CameraOptions | undefined>(props.value?.defaultView);
 
diff --git a/app/src/interfaces/map/preview.svg b/app/src/interfaces/map/preview.svg
new file mode 100644
index 0000000000..45b2e461f7
--- /dev/null
+++ b/app/src/interfaces/map/preview.svg
@@ -0,0 +1,14 @@
+<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="18" y="13" width="120" height="70" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="19" y="14" width="118" height="68" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="24" y="19" width="107.999" height="58" rx="2" fill="var(--primary)" fill-opacity=".2" />
+	<path
+		d="M30.75 77h36.452l-.095-.564c-.388-2.288-2.591-3.969-5.165-3.94l-6.645.074-7.02.441a5.646 5.646 0 00-1.592.334l-3.967 1.458a5.697 5.697 0 01-3.933-.01l-.653-.244c-1.716-.641-3.684-.403-5.15.624l-1.166.816c-.411.288-.77.63-1.065 1.011zM109.568 77h-7.043a.58.58 0 01.525-.38l5.532-.348c.494-.031.925.291.986.728zM130.779 76.843c-.24.101-.503.157-.779.157h-3.483a.895.895 0 01.439-.457l1.031-.506 1.26-.786a1.29 1.29 0 011.069-.125c.81.262 1.028 1.177.463 1.717zM132 73.303V58.538l-1.671-.342a5.71 5.71 0 00-2.865.151l-9.861 3.14c-.736.235-1.351.704-1.728 1.32-.522.853-1.49 1.41-2.571 1.477l-2.387.15c-.544.035-1.016-.334-1.055-.824-.032-.417.264-.799.711-.915l.765-.2c.572-.148 1.039-.521 1.27-1.015l.03-.062c.319-.68.175-1.465-.37-2.017l-2.009-2.038c.013.01.035.006.041-.01l2.064-5.064a3.56 3.56 0 01.365-.675l1.734-2.531c1.036-1.512 2.941-2.36 4.905-2.183l.605.054c.29.026.581.03.872.011l5.838-.367a4.441 4.441 0 001.471-.348l3.383-1.454c.153-.066.308-.115.463-.15V21a2 2 0 00-2-2H91.93c.011.051.026.102.044.152l.313.868c.588 1.632-.473 3.374-2.32 3.806L76.76 26.914c-1.496.35-3.088.078-4.337-.74l-3.035-1.988c-.934-.612-1.35-1.68-1.044-2.682.298-.976-.08-1.908-.802-2.504H63.57c-.635.459-1.045 1.145-1.097 1.906l-.312 4.592c-.112 1.657-1.3 3.098-3.03 3.677-1.023.341-1.88.994-2.422 1.845l-1.687 2.644a4.782 4.782 0 01-1.073 1.18l-2.702 2.132c-1.207.952-2.838 1.345-4.412 1.062l-1.467-.263a4.265 4.265 0 00-1.958.107c-2.214.656-3.277 2.916-2.258 4.801l.099.184c.19.352.315.728.372 1.116l.438 2.988c.432 2.951-2.294 5.5-5.59 5.226l-1.062-.088c-2.656-.22-5.06 1.415-5.548 3.773l-.438 2.122c-.08.386-.104.779-.073 1.17l.563 7.246c.092 1.18 1.23 2.07 2.542 1.987l.347-.022c.885-.056 1.699.437 1.975 1.195.397 1.09 1.837 1.544 2.903.914l2.058-1.215a4.11 4.11 0 011.83-.556l.611-.038c1.465-.093 2.817-.741 3.717-1.785l.329-.38a4.38 4.38 0 001.069-2.5l.079-.952c.096-1.163.676-2.25 1.623-3.046l2.853-2.396c.382-.321.631-.75.707-1.215.178-1.093 1.277-1.869 2.5-1.764l4.925.424a5.725 5.725 0 001.588-.085l1.146-.224c1.628-.319 3.327.09 4.562 1.096l6.25 5.094c.34.278.721.514 1.132.7l2.9 1.322c1.023.466 1.845 1.226 2.334 2.159l1.866 3.555c.05.097.081.201.09.308.07.91 1.457 1.113 1.845.27l.859-1.868c.063-.137.1-.281.11-.429l.1-1.44c.03-.434.316-.821.75-1.014 1.003-.446 1.004-1.732.002-2.18l-6.436-2.868a4.858 4.858 0 01-1.612-1.152l-4.04-4.42c-.813-.89-.818-2.172-.013-3.068 1.13-1.257 3.284-1.19 4.314.135l1.77 2.276c.355.457.801.85 1.315 1.161l7.297 4.411a4.818 4.818 0 011.786 1.867l2.653 5.045c.126.24.275.47.445.686l3.26 4.167c.544.694 1.451 1.082 2.393 1.023l2.427-.153c1.666-.104 2.287-2.017.945-2.91-.569-.38-.838-1.022-.687-1.644l.347-1.431c.255-1.05 1.161-1.874 2.326-2.114 1.345-.278 2.732.28 3.396 1.368l1.479 2.42 2.643 3.51c.873 1.161 2.283 1.905 3.836 2.024l9.727.744c.266.02.532.022.798.006l4.366-.275a5.706 5.706 0 011.75.16z"
+		fill="var(--primary)" fill-opacity=".25" />
+	<path
+		d="M42.417 19h5.249c.006.24.053.481.142.715l.285.743.866 2.89c.096.32.147.65.154.982l.035 1.936c.013.687.538 1.28 1.28 1.444.708.157 1.223.708 1.274 1.363l.13 1.677c.12 1.522-.78 2.962-2.29 3.657-1.792.825-3.957 1.814-4.328 1.947-.194.062-.97.131-1.965.198-1.437.096-1.966-1.615-.695-2.225.846-.406.967-1.452.233-2.006l-.456-.343c-.702-.53-.833-1.457-.3-2.127l.925-1.162c.149-.187.273-.386.371-.598.355-.766 1.223-2.673 1.203-2.94l-.034-.432a4.349 4.349 0 00-.899-2.31l-.287-.375c-.684-.891-.996-1.965-.893-3.034zM76.543 19c1.102.977 2.735 1.429 4.354 1.047A4.688 4.688 0 0082.942 19h-6.4zM39.86 27.148a4.574 4.574 0 01-1.158 1.74l-1.355 1.285c-.53.503-1.28.769-2.05.726-1.852-.101-2.996-1.861-2.186-3.363l.636-1.178 2.021-2.783a1.483 1.483 0 011.11-.586c.497-.031.941-.29 1.176-.685l.324-.547c.255-.43.737-.71 1.278-.745.673-.042 1.3.306 1.56.866l.086.183c.181.39.193.83.032 1.228l-.646 1.6-.829 2.26zM64.316 57.705a.445.445 0 00-.227.414l.136 1.747c.038.489.586.81 1.098.642.438-.143.656-.584.48-.972l-.734-1.622c-.121-.268-.485-.369-.753-.209zM63.798 63.801c.37-.402 1.036-.45 1.471-.105l.632.501c.363.288.585.693.619 1.127l.1 1.297c.033.412-.156.813-.506 1.08-.9.683-2.283.158-2.365-.899l-.183-2.349a.864.864 0 01.232-.652zM78.695 73.3c.466.212 1.034.011 1.215-.43a.714.714 0 00.052-.326l-.07-.901c-.053-.678-.706-1.188-1.46-1.14l-2.827.177c-.397.025-.531.49-.198.685l2.35 1.491c.064.041.131.078.201.11l.737.334z"
+		fill="var(--primary)" fill-opacity=".25" />
+	<path
+		d="M88.472 36.868a1.267 1.267 0 01-1.258-1.258c0-.672.585-1.228 1.258-1.228.672 0 1.257.556 1.257 1.228 0 .702-.585 1.258-1.257 1.258zm3.742-1.111c0-2.281-1.666-3.89-3.742-3.89s-3.743 1.609-3.743 3.89c0 1.462 1.228 3.391 3.743 5.701 2.514-2.31 3.742-4.24 3.742-5.701zm-3.742-5.117c2.631 0 5 1.988 5 5.117 0 2.046-1.667 4.503-5 7.339-3.334-2.836-5-5.293-5-7.34 0-3.128 2.368-5.116 5-5.116z"
+		fill="var(--primary)" />
+</svg>
diff --git a/app/src/interfaces/presentation-divider/index.ts b/app/src/interfaces/presentation-divider/index.ts
index 850322f79e..145af32af8 100644
--- a/app/src/interfaces/presentation-divider/index.ts
+++ b/app/src/interfaces/presentation-divider/index.ts
@@ -10,7 +10,8 @@ export default defineInterface({
 	hideLabel: true,
 	hideLoader: true,
 	types: ['alias'],
-	groups: ['presentation'],
+	localTypes: ['presentation'],
+	group: 'presentation',
 	options: [
 		{
 			field: 'color',
diff --git a/app/src/interfaces/presentation-links/index.ts b/app/src/interfaces/presentation-links/index.ts
index 3161bec526..bd9584eaa1 100644
--- a/app/src/interfaces/presentation-links/index.ts
+++ b/app/src/interfaces/presentation-links/index.ts
@@ -1,6 +1,6 @@
 import { defineInterface } from '@directus/shared/utils';
 import InterfacePresentationLinks from './presentation-links.vue';
-import Options from './options.vue';
+import { ExtensionsOptionsContext } from '@directus/shared/types';
 
 export default defineInterface({
 	id: 'presentation-links',
@@ -11,6 +11,66 @@ export default defineInterface({
 	hideLabel: true,
 	hideLoader: true,
 	types: ['alias'],
-	groups: ['presentation'],
-	options: Options,
+	localTypes: ['presentation'],
+	group: 'presentation',
+	options: ({ collection }: ExtensionsOptionsContext) => [
+		{
+			field: 'label',
+			type: 'string',
+			name: '$t:label',
+			meta: {
+				width: 'full',
+				interface: 'input',
+				options: {
+					placeholder: '$t:label',
+				},
+			},
+		},
+		{
+			field: 'icon',
+			name: '$t:icon',
+			type: 'string',
+			meta: {
+				width: 'half',
+				interface: 'select-icon',
+			},
+		},
+		{
+			field: 'type',
+			name: '$t:type',
+			type: 'string',
+			meta: {
+				width: 'half',
+				interface: 'select-dropdown',
+				default_value: 'normal',
+				options: {
+					choices: [
+						{ text: '$t:primary', value: 'primary' },
+						{ text: '$t:normal', value: 'normal' },
+						{ text: '$t:info', value: 'info' },
+						{ text: '$t:success', value: 'success' },
+						{ text: '$t:warning', value: 'warning' },
+						{ text: '$t:danger', value: 'danger' },
+					],
+				},
+			},
+			schema: {
+				default_value: 'normal',
+			},
+		},
+		{
+			field: 'url',
+			type: 'string',
+			name: '$t:url',
+			meta: {
+				width: 'full',
+				interface: 'system-display-template',
+				options: {
+					collectionName: collection,
+					font: 'monospace',
+					placeholder: 'https://example.com/articles/{{ id }}/{{ slug }}',
+				},
+			},
+		},
+	],
 });
diff --git a/app/src/interfaces/presentation-links/options.vue b/app/src/interfaces/presentation-links/options.vue
deleted file mode 100644
index 7708931b29..0000000000
--- a/app/src/interfaces/presentation-links/options.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-	<div class="form-grid">
-		<div class="field full">
-			<p class="type-label">{{ t('interfaces.presentation-links.links') }}</p>
-			<interface-list
-				:collection="collection"
-				:value="links"
-				:placeholder="t('title')"
-				template="{{ label }}"
-				:fields="fields"
-				@input="links = $event"
-			/>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { Field } from '@directus/shared/types';
-import { defineComponent, PropType, computed } from 'vue';
-export default defineComponent({
-	props: {
-		collection: {
-			type: String,
-			required: true,
-		},
-		fieldData: {
-			type: Object as PropType<Field>,
-			default: null,
-		},
-		value: {
-			type: Object as PropType<Record<string, any>>,
-			default: null,
-		},
-	},
-	emits: ['input'],
-	setup(props, { emit }) {
-		const { t } = useI18n();
-
-		const links = computed({
-			get() {
-				return props.value?.links;
-			},
-			set(newLinks: string) {
-				emit('input', {
-					...(props.value || {}),
-					links: newLinks,
-				});
-			},
-		});
-
-		const fields = computed(() => {
-			return [
-				{
-					field: 'label',
-					type: 'string',
-					name: '$t:label',
-					meta: {
-						width: 'full',
-						interface: 'input',
-						options: {
-							placeholder: '$t:label',
-						},
-					},
-				},
-				{
-					field: 'icon',
-					name: '$t:icon',
-					type: 'string',
-					meta: {
-						width: 'half',
-						interface: 'select-icon',
-					},
-				},
-				{
-					field: 'type',
-					name: '$t:type',
-					type: 'string',
-					meta: {
-						width: 'half',
-						interface: 'select-dropdown',
-						default_value: 'normal',
-						options: {
-							choices: [
-								{ text: '$t:primary', value: 'primary' },
-								{ text: '$t:normal', value: 'normal' },
-								{ text: '$t:info', value: 'info' },
-								{ text: '$t:success', value: 'success' },
-								{ text: '$t:warning', value: 'warning' },
-								{ text: '$t:danger', value: 'danger' },
-							],
-						},
-					},
-					schema: {
-						default_value: 'normal',
-					},
-				},
-				{
-					field: 'url',
-					type: 'string',
-					name: '$t:url',
-					meta: {
-						width: 'full',
-						interface: 'system-display-template',
-						options: {
-							collectionName: props.collection,
-							font: 'monospace',
-							placeholder: 'https://example.com/articles/{{ id }}/{{ slug }}',
-						},
-					},
-				},
-			];
-		});
-
-		return { t, links, fields };
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-@import '@/styles/mixins/form-grid';
-
-.form-grid {
-	@include form-grid;
-}
-</style>
diff --git a/app/src/interfaces/presentation-notice/index.ts b/app/src/interfaces/presentation-notice/index.ts
index 302dadb9b8..d9fde47244 100644
--- a/app/src/interfaces/presentation-notice/index.ts
+++ b/app/src/interfaces/presentation-notice/index.ts
@@ -1,5 +1,6 @@
 import { defineInterface } from '@directus/shared/utils';
 import InterfacePresentationNotice from './presentation-notice.vue';
+import PreviewSVG from './preview.svg?raw';
 
 export default defineInterface({
 	id: 'presentation-notice',
@@ -10,7 +11,8 @@ export default defineInterface({
 	hideLabel: true,
 	hideLoader: true,
 	types: ['alias'],
-	groups: ['presentation'],
+	localTypes: ['presentation'],
+	group: 'presentation',
 	options: [
 		{
 			field: 'color',
@@ -55,4 +57,5 @@ export default defineInterface({
 			},
 		},
 	],
+	preview: PreviewSVG,
 });
diff --git a/app/src/interfaces/presentation-notice/preview.svg b/app/src/interfaces/presentation-notice/preview.svg
new file mode 100644
index 0000000000..b278cef20d
--- /dev/null
+++ b/app/src/interfaces/presentation-notice/preview.svg
@@ -0,0 +1,10 @@
+<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="18" y="25" width="120" height="46" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="46" y="35" width="50" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="46" y="45" width="74" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="46" y="55" width="30" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="100" y="35" width="20" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<path
+		d="M31.426 45.074h1.148v1.176h-1.148v-1.176zm0 2.352h1.148v3.5h-1.148v-3.5zm.574-5.25A5.811 5.811 0 0026.176 48 5.811 5.811 0 0032 53.824 5.811 5.811 0 0037.824 48 5.811 5.811 0 0032 42.176zm0 10.5A4.691 4.691 0 0127.324 48 4.691 4.691 0 0132 43.324 4.691 4.691 0 0136.676 48 4.691 4.691 0 0132 52.676z"
+		fill="var(--primary)" />
+</svg>
diff --git a/app/src/interfaces/select-color/index.ts b/app/src/interfaces/select-color/index.ts
index fa3c188e09..8482ac33c0 100644
--- a/app/src/interfaces/select-color/index.ts
+++ b/app/src/interfaces/select-color/index.ts
@@ -9,6 +9,7 @@ export default defineInterface({
 	component: InterfaceColor,
 	types: ['string'],
 	recommendedDisplays: ['color'],
+	group: 'selection',
 	options: [
 		{
 			field: 'presets',
diff --git a/app/src/interfaces/select-color/preview.svg b/app/src/interfaces/select-color/preview.svg
new file mode 100644
index 0000000000..a0ee02a1cb
--- /dev/null
+++ b/app/src/interfaces/select-color/preview.svg
@@ -0,0 +1,17 @@
+<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="18" y="21" width="120" height="54" rx="6" fill="var(--background-page)" />
+	<rect x="19" y="22" width="118" height="52" rx="5" stroke="var(--primary)" stroke-opacity=".25" stroke-width="2" />
+	<rect x="18" y="21" width="120" height="26" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="19" y="22" width="118" height="24" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="46" y="31" width="50" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<circle cx="33" cy="34" r="7" fill="var(--primary)" />
+	<circle cx="33" cy="60" r="7" fill="var(--primary)" />
+	<circle cx="51" cy="60" r="7" fill="var(--primary)" fill-opacity=".75" />
+	<circle cx="69" cy="60" r="7" fill="var(--primary)" fill-opacity=".5" />
+	<circle cx="87" cy="60" r="7" fill="var(--primary)" fill-opacity=".25" />
+	<circle cx="105" cy="60" r="7" fill="var(--primary)" fill-opacity=".1" />
+	<circle cx="123" cy="60" r="6" stroke="var(--primary)" stroke-opacity=".1" stroke-width="2" />
+	<path
+		d="M123 39.824A5.811 5.811 0 01117.176 34 5.811 5.811 0 01123 28.176c3.227 0 5.824 2.351 5.824 5.25 0 1.914-1.558 3.5-3.5 3.5h-1.012c-.164 0-.3.11-.3.273 0 .082.027.137.082.192.218.273.355.629.355.984 0 .793-.656 1.45-1.449 1.45zm0-10.5c-2.57 0-4.676 2.106-4.676 4.676 0 2.57 2.106 4.676 4.676 4.676a.304.304 0 00.301-.301.314.314 0 00-.082-.191 1.484 1.484 0 01-.383-.985c0-.793.656-1.449 1.476-1.449h1.012c1.285 0 2.352-1.04 2.352-2.324 0-2.27-2.106-4.102-4.676-4.102zm-4.074 4.375c0-.465.383-.875.875-.875a.9.9 0 01.875.875.88.88 0 01-.875.875.864.864 0 01-.875-.875zm1.75-2.324c0-.492.383-.875.875-.875a.88.88 0 01.875.875.88.88 0 01-.875.875.864.864 0 01-.875-.875zm2.898 0a.88.88 0 01.875-.875c.492 0 .875.383.875.875a.864.864 0 01-.875.875.88.88 0 01-.875-.875zm1.75 2.324a.9.9 0 01.875-.875c.492 0 .875.41.875.875a.864.864 0 01-.875.875.88.88 0 01-.875-.875z"
+		fill="var(--primary)" />
+</svg>
diff --git a/app/src/interfaces/select-dropdown-m2o/index.ts b/app/src/interfaces/select-dropdown-m2o/index.ts
index b600e93750..8f4afbfbff 100644
--- a/app/src/interfaces/select-dropdown-m2o/index.ts
+++ b/app/src/interfaces/select-dropdown-m2o/index.ts
@@ -1,6 +1,7 @@
 import { defineInterface } from '@directus/shared/utils';
 import InterfaceSelectDropdownM2O from './select-dropdown-m2o.vue';
-import Options from './options.vue';
+import PreviewSVG from './preview.svg?raw';
+import { ExtensionsOptionsContext } from '@directus/shared/types';
 
 export default defineInterface({
 	id: 'select-dropdown-m2o',
@@ -10,7 +11,24 @@ export default defineInterface({
 	component: InterfaceSelectDropdownM2O,
 	types: ['uuid', 'string', 'text', 'integer', 'bigInteger'],
 	relational: true,
-	groups: ['m2o'],
-	options: Options,
+	localTypes: ['m2o'],
+	group: 'relational',
+	options: ({ relations }: ExtensionsOptionsContext) => {
+		const collection = relations.m2o?.related_collection;
+
+		return [
+			{
+				field: 'template',
+				name: '$t:interfaces.select-dropdown-m2o.display_template',
+				meta: {
+					interface: 'system-display-template',
+					options: {
+						collectionName: collection,
+					},
+				},
+			},
+		];
+	},
 	recommendedDisplays: ['related-values'],
+	preview: PreviewSVG,
 });
diff --git a/app/src/interfaces/select-dropdown-m2o/options.vue b/app/src/interfaces/select-dropdown-m2o/options.vue
deleted file mode 100644
index 18638c9ac2..0000000000
--- a/app/src/interfaces/select-dropdown-m2o/options.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-	<v-notice v-if="collection === null" class="full" type="warning">
-		{{ t('interfaces.list-o2m.no_collection') }}
-	</v-notice>
-	<div v-else class="form-grid">
-		<div class="field full">
-			<p class="type-label">{{ t('interfaces.select-dropdown-m2o.display_template') }}</p>
-			<v-field-template v-model="template" :collection="relatedCollection" :depth="2"></v-field-template>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { Field, Relation } from '@directus/shared/types';
-import { defineComponent, PropType, computed } from 'vue';
-
-export default defineComponent({
-	props: {
-		collection: {
-			type: String,
-			required: true,
-		},
-		fieldData: {
-			type: Object as PropType<Field>,
-			default: null,
-		},
-		relations: {
-			type: Array as PropType<Relation[]>,
-			default: () => [],
-		},
-		value: {
-			type: Object as PropType<Record<string, any>>,
-			default: null,
-		},
-	},
-	emits: ['input'],
-	setup(props, { emit }) {
-		const { t } = useI18n();
-
-		const template = computed({
-			get() {
-				return props.value?.template;
-			},
-			set(newTemplate: string) {
-				emit('input', {
-					...(props.value || {}),
-					template: newTemplate,
-				});
-			},
-		});
-
-		const relatedCollection = computed(() => {
-			if (!props.fieldData || !props.relations || props.relations.length === 0) return null;
-			const { field } = props.fieldData;
-			const relation = props.relations.find(
-				(relation) => relation.collection === props.collection && relation.field === field
-			);
-			return relation?.related_collection || null;
-		});
-
-		return { t, template, relatedCollection };
-	},
-});
-</script>
diff --git a/app/src/interfaces/select-dropdown-m2o/preview.svg b/app/src/interfaces/select-dropdown-m2o/preview.svg
new file mode 100644
index 0000000000..46643e7aa1
--- /dev/null
+++ b/app/src/interfaces/select-dropdown-m2o/preview.svg
@@ -0,0 +1,12 @@
+<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="18" y="17.037" width="120" height="62" rx="6" fill="var(--background-page)" />
+	<rect x="19" y="18.037" width="118" height="60" rx="5" stroke="var(--primary)" stroke-opacity=".25"
+		stroke-width="2" />
+	<rect x="28" y="51" width="40" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="28" y="63" width="60" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="18" y="17" width="120" height="26" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="19" y="18" width="118" height="24" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="28" y="27" width="70" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<path d="M120.966 28a.4.4 0 00-.283.683l3.034 3.034a.4.4 0 00.566 0l3.034-3.034a.4.4 0 00-.283-.683h-6.068z"
+		fill="var(--primary)" />
+</svg>
diff --git a/app/src/interfaces/select-dropdown/index.ts b/app/src/interfaces/select-dropdown/index.ts
index 4d0e587974..90ff3e3db0 100644
--- a/app/src/interfaces/select-dropdown/index.ts
+++ b/app/src/interfaces/select-dropdown/index.ts
@@ -1,5 +1,6 @@
 import { defineInterface } from '@directus/shared/utils';
 import InterfaceSelectDropdown from './select-dropdown.vue';
+import PreviewSVG from './preview.svg?raw';
 
 export default defineInterface({
 	id: 'select-dropdown',
@@ -8,6 +9,8 @@ export default defineInterface({
 	icon: 'arrow_drop_down_circle',
 	component: InterfaceSelectDropdown,
 	types: ['string'],
+	group: 'selection',
+	preview: PreviewSVG,
 	options: [
 		{
 			field: 'choices',
diff --git a/app/src/interfaces/select-dropdown/preview.svg b/app/src/interfaces/select-dropdown/preview.svg
new file mode 100644
index 0000000000..46643e7aa1
--- /dev/null
+++ b/app/src/interfaces/select-dropdown/preview.svg
@@ -0,0 +1,12 @@
+<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="18" y="17.037" width="120" height="62" rx="6" fill="var(--background-page)" />
+	<rect x="19" y="18.037" width="118" height="60" rx="5" stroke="var(--primary)" stroke-opacity=".25"
+		stroke-width="2" />
+	<rect x="28" y="51" width="40" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="28" y="63" width="60" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="18" y="17" width="120" height="26" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="19" y="18" width="118" height="24" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="28" y="27" width="70" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<path d="M120.966 28a.4.4 0 00-.283.683l3.034 3.034a.4.4 0 00.566 0l3.034-3.034a.4.4 0 00-.283-.683h-6.068z"
+		fill="var(--primary)" />
+</svg>
diff --git a/app/src/interfaces/select-icon/index.ts b/app/src/interfaces/select-icon/index.ts
index 29221ea547..560276727c 100644
--- a/app/src/interfaces/select-icon/index.ts
+++ b/app/src/interfaces/select-icon/index.ts
@@ -8,6 +8,7 @@ export default defineInterface({
 	icon: 'insert_emoticon',
 	component: InterfaceSelectIcon,
 	types: ['string'],
+	group: 'selection',
 	options: [],
 	recommendedDisplays: ['icon'],
 });
diff --git a/app/src/interfaces/select-icon/preview.svg b/app/src/interfaces/select-icon/preview.svg
new file mode 100644
index 0000000000..2764fbb455
--- /dev/null
+++ b/app/src/interfaces/select-icon/preview.svg
@@ -0,0 +1,19 @@
+<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="18" y="13" width="120" height="70" rx="6" fill="var(--background-page)" />
+	<rect x="19" y="14" width="118" height="68" rx="5" stroke="var(--primary)" stroke-opacity=".25" stroke-width="2" />
+	<rect x="18" y="13" width="120" height="26" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="19" y="14" width="118" height="24" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="46" y="23" width="50" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<path
+		d="M120.966 24a.4.4 0 00-.283.683l3.034 3.034a.4.4 0 00.566 0l3.034-3.034a.4.4 0 00-.283-.683h-6.068zM33 20.176A5.811 5.811 0 0027.176 26 5.811 5.811 0 0033 31.824 5.811 5.811 0 0038.824 26 5.811 5.811 0 0033 20.176zm0 10.5A4.691 4.691 0 0128.324 26 4.691 4.691 0 0133 21.324 4.691 4.691 0 0137.676 26 4.691 4.691 0 0133 30.676zm2.05-5.25a.9.9 0 00.876-.875.881.881 0 00-.875-.875.864.864 0 00-.875.875c0 .465.383.875.875.875zm-4.1 0c.491 0 .874-.41.874-.875a.864.864 0 00-.875-.875.881.881 0 00-.875.875.9.9 0 00.875.875zM33 29.199a3.2 3.2 0 002.98-2.023h-5.96A3.2 3.2 0 0033 29.199z"
+		fill="var(--primary)" />
+	<path
+		d="M33 45.176A5.811 5.811 0 0027.176 51 5.811 5.811 0 0033 56.824 5.811 5.811 0 0038.824 51 5.811 5.811 0 0033 45.176zm0 10.5A4.691 4.691 0 0128.324 51 4.691 4.691 0 0133 46.324 4.691 4.691 0 0137.676 51 4.691 4.691 0 0133 55.676zm.3-7.602h-.874v3.5l3.062 1.86.438-.739-2.625-1.558v-3.063zM48.074 49.824c-1.285 0-2.324 1.067-2.324 2.352a2.322 2.322 0 002.324 2.324c1.285 0 2.352-1.04 2.352-2.324a2.37 2.37 0 00-2.352-2.352zm0 3.5c-.629 0-1.148-.52-1.148-1.148a1.161 1.161 0 112.324 0c0 .629-.52 1.148-1.176 1.148zm4.676-.574c-.957 0-1.75.793-1.75 1.75s.793 1.75 1.75 1.75 1.75-.793 1.75-1.75-.793-1.75-1.75-1.75zm0 2.324a.56.56 0 01-.574-.574.56.56 0 01.574-.574c.328 0 .602.246.602.574 0 .328-.274.574-.602.574zm.875-9.324c-1.777 0-3.2 1.45-3.2 3.2 0 1.777 1.423 3.226 3.2 3.226 1.777 0 3.2-1.45 3.2-3.227 0-1.75-1.423-3.199-3.2-3.199zm0 5.25a2.048 2.048 0 01-2.05-2.05c0-1.122.929-2.024 2.05-2.024 1.121 0 2.05.902 2.05 2.023 0 1.149-.929 2.051-2.05 2.051zM73.676 54.008l-.684-.684h-8.668v-7h9.352v7.684zm0-8.832h-9.352c-.629 0-1.148.52-1.148 1.148v7c0 .657.52 1.176 1.148 1.176H72.5l2.324 2.324v-10.5c0-.629-.52-1.148-1.148-1.148zM87 47.5a3.218 3.218 0 013.144 2.598l.165.875.902.054c.902.055 1.613.82 1.613 1.723 0 .957-.765 1.75-1.75 1.75H83.5a2.322 2.322 0 01-2.324-2.324c0-1.203.875-2.215 2.078-2.324l.602-.055.3-.574A3.178 3.178 0 0187 47.5zm0-1.176c-1.695 0-3.144.957-3.883 2.38-1.75.163-3.117 1.667-3.117 3.472 0 1.914 1.559 3.5 3.5 3.5h7.574A2.93 2.93 0 0094 52.75c0-1.531-1.203-2.79-2.707-2.898-.41-1.996-2.16-3.528-4.293-3.528z"
+		fill="var(--primary)" fill-opacity=".25" />
+	<path
+		d="M105 45.176A5.811 5.811 0 0099.176 51 5.811 5.811 0 00105 56.824 5.811 5.811 0 00110.824 51 5.811 5.811 0 00105 45.176zm0 10.5c-2.57 0-4.676-2.106-4.676-4.676 0-2.57 2.106-4.676 4.676-4.676 2.57 0 4.676 2.106 4.676 4.676 0 2.57-2.106 4.676-4.676 4.676zm2.051-5.25a.9.9 0 00.875-.875.88.88 0 00-.875-.875.864.864 0 00-.875.875c0 .465.383.875.875.875zm-4.102 0c.492 0 .875-.41.875-.875a.864.864 0 00-.875-.875.88.88 0 00-.875.875.9.9 0 00.875.875zM105 54.199a3.199 3.199 0 002.98-2.023h-5.96a3.199 3.199 0 002.98 2.023z"
+		fill="var(--primary)" />
+	<path
+		d="M123.219 47.5l.027.219.192.957h3.062v3.5h-1.969l-.027-.246-.192-.93h-4.238v-3.5h3.145zm.957-1.176h-5.25v9.926h1.148v-4.074h3.281l.219 1.148h4.102V47.5h-3.281l-.219-1.176zM31.414 63.625c-.957 4.402 2.188 7.246 4.457 8.04A4.643 4.643 0 0133 72.674 4.691 4.691 0 0128.324 68a4.623 4.623 0 013.09-4.375zM33 62.175c-3.254 0-5.824 2.653-5.824 5.825A5.811 5.811 0 0033 73.824a5.838 5.838 0 005.059-2.926c-4.375-.136-7.055-4.921-4.868-8.722H33zM55.95 62.75l-.083.027-3.117 1.203-3.5-1.23-3.281 1.121a.266.266 0 00-.219.273v8.805c0 .164.137.301.3.301l.083-.027 3.117-1.204 3.5 1.231 3.281-1.121a.266.266 0 00.219-.273V63.05c0-.164-.137-.301-.3-.301zm-6.126 1.45l2.352.82v6.78l-2.352-.82V64.2zm-2.898.573l1.75-.601v6.836l-1.75.683v-6.918zm8.148 6.454l-1.75.601v-6.836l1.75-.656v6.89zM72.856 64.856c-.848 0-1.641.328-2.215.902l-4.102 3.636c-.355.383-.848.575-1.395.575A1.96 1.96 0 0163.176 68a1.96 1.96 0 011.968-1.969c.547 0 1.04.192 1.422.602l.657.574.902-.766-.738-.656a3.143 3.143 0 00-2.243-.93A3.163 3.163 0 0062 68a3.163 3.163 0 003.144 3.144c.848 0 1.641-.328 2.215-.902l4.102-3.636c.355-.383.848-.575 1.395-.575A1.96 1.96 0 0174.824 68a1.96 1.96 0 01-1.968 1.969c-.52 0-1.04-.192-1.422-.602l-.684-.574-.875.766.738.656c.602.601 1.395.93 2.243.93A3.163 3.163 0 0076 68a3.145 3.145 0 00-3.144-3.144zM87 73.824c.629 0 1.176-.52 1.176-1.148h-2.352c0 .629.547 1.148 1.176 1.148zm3.5-3.5v-2.898c0-1.805-.957-3.309-2.625-3.692v-.41A.881.881 0 0087 62.45a.881.881 0 00-.875.875v.41c-1.668.383-2.625 1.887-2.625 3.692v2.898L82.324 71.5v.574h9.352V71.5L90.5 70.324zm-1.176.602h-4.648v-3.5c0-1.45.875-2.625 2.324-2.625 1.45 0 2.324 1.176 2.324 2.625v3.5zM110.824 66.387l-4.183-.356L105 62.176l-1.641 3.855-4.183.356 3.172 2.761-.957 4.102L105 71.062l3.609 2.188-.957-4.102 3.172-2.761zM105 69.997l-2.188 1.312.575-2.489-1.942-1.695 2.571-.219.984-2.351.984 2.351 2.571.219-1.942 1.695.575 2.489L105 69.996zM128.578 70.379l-.629-4.457a2.324 2.324 0 00-2.297-1.996h-5.304a2.324 2.324 0 00-2.297 1.996l-.629 4.457a1.463 1.463 0 001.449 1.695c.41 0 .793-.136 1.066-.437l1.313-1.313h3.5l1.312 1.313c.274.3.657.437 1.039.437.93 0 1.614-.793 1.477-1.695zm-1.203.437a.348.348 0 01-.246.11.344.344 0 01-.246-.11l-1.641-1.64h-4.484l-1.641 1.64a.348.348 0 01-.246.11.348.348 0 01-.246-.11c-.027-.054-.082-.136-.055-.273l.629-4.457a1.174 1.174 0 011.149-1.012h5.304c.574 0 1.067.438 1.149 1.012l.629 4.457c.027.137-.028.219-.055.273zm-6.125-5.14h-.574v1.148H119.5v.602h1.176v1.148h.574v-1.148h1.176v-.602h-1.176v-1.148zM125.324 68c0-.328.274-.574.602-.574.3 0 .574.246.574.574a.578.578 0 01-.574.574c-.328 0-.602-.246-.602-.574zm-1.148-1.75a.56.56 0 01.574-.574.56.56 0 01.574.574.56.56 0 01-.574.574.56.56 0 01-.574-.574z"
+		fill="var(--primary)" fill-opacity=".25" />
+</svg>
diff --git a/app/src/interfaces/select-multiple-checkbox-tree/index.ts b/app/src/interfaces/select-multiple-checkbox-tree/index.ts
index 31b1902746..a267519a42 100644
--- a/app/src/interfaces/select-multiple-checkbox-tree/index.ts
+++ b/app/src/interfaces/select-multiple-checkbox-tree/index.ts
@@ -69,6 +69,7 @@ export default defineInterface({
 	component: InterfaceSelectMultipleCheckboxesTree,
 	description: '$t:interfaces.select-multiple-checkbox-tree.description',
 	types: ['json', 'csv'],
+	group: 'selection',
 	options: [
 		{
 			field: 'choices',
diff --git a/app/src/interfaces/select-multiple-checkbox/index.ts b/app/src/interfaces/select-multiple-checkbox/index.ts
index 68ce93c0a3..8f7c3e8f66 100644
--- a/app/src/interfaces/select-multiple-checkbox/index.ts
+++ b/app/src/interfaces/select-multiple-checkbox/index.ts
@@ -1,5 +1,6 @@
 import { defineInterface } from '@directus/shared/utils';
 import InterfaceSelectMultipleCheckboxes from './select-multiple-checkbox.vue';
+import PreviewSVG from './preview.svg?raw';
 
 export default defineInterface({
 	id: 'select-multiple-checkbox',
@@ -8,6 +9,8 @@ export default defineInterface({
 	component: InterfaceSelectMultipleCheckboxes,
 	description: '$t:interfaces.select-multiple-checkbox.description',
 	types: ['json', 'csv'],
+	group: 'selection',
+	preview: PreviewSVG,
 	options: [
 		{
 			field: 'choices',
diff --git a/app/src/interfaces/select-multiple-checkbox/preview.svg b/app/src/interfaces/select-multiple-checkbox/preview.svg
new file mode 100644
index 0000000000..677b1f96af
--- /dev/null
+++ b/app/src/interfaces/select-multiple-checkbox/preview.svg
@@ -0,0 +1,18 @@
+<svg width="156" height="96" viewBox="0 0 156 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="54" y="36" width="70" height="6" rx="2" fill="var(--primary)" />
+	<path
+		d="M43.0742 33.75H34.9258C34.2695 33.75 33.75 34.2695 33.75 34.9258V43.0742C33.75 43.7305 34.2695 44.25 34.9258 44.25H43.0742C43.7305 44.25 44.25 43.7305 44.25 43.0742V34.9258C44.25 34.2695 43.7305 33.75 43.0742 33.75ZM43.0742 43.0742H34.9258V34.9258H43.0742V43.0742ZM42.5 37.25L41.6797 36.4297L37.8242 40.2578L36.3203 38.7539L35.5 39.6016L37.8242 41.9258L42.5 37.25Z"
+		fill="var(--primary)" />
+	<rect x="54" y="72" width="50" height="6" rx="2" fill="var(--primary)" />
+	<path
+		d="M43.0742 69.75H34.9258C34.2695 69.75 33.75 70.2695 33.75 70.9258V79.0742C33.75 79.7305 34.2695 80.25 34.9258 80.25H43.0742C43.7305 80.25 44.25 79.7305 44.25 79.0742V70.9258C44.25 70.2695 43.7305 69.75 43.0742 69.75ZM43.0742 79.0742H34.9258V70.9258H43.0742V79.0742ZM42.5 73.25L41.6797 72.4297L37.8242 76.2578L36.3203 74.7539L35.5 75.6016L37.8242 77.9258L42.5 73.25Z"
+		fill="var(--primary)" />
+	<rect x="54" y="18" width="50" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<path
+		d="M43.0742 16.9258V25.0742H34.9258V16.9258H43.0742ZM43.0742 15.75H34.9258C34.2695 15.75 33.75 16.2695 33.75 16.9258V25.0742C33.75 25.7305 34.2695 26.25 34.9258 26.25H43.0742C43.7305 26.25 44.25 25.7305 44.25 25.0742V16.9258C44.25 16.2695 43.7305 15.75 43.0742 15.75Z"
+		fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="54" y="54" width="60" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<path
+		d="M43.0742 52.9258V61.0742H34.9258V52.9258H43.0742ZM43.0742 51.75H34.9258C34.2695 51.75 33.75 52.2695 33.75 52.9258V61.0742C33.75 61.7305 34.2695 62.25 34.9258 62.25H43.0742C43.7305 62.25 44.25 61.7305 44.25 61.0742V52.9258C44.25 52.2695 43.7305 51.75 43.0742 51.75Z"
+		fill="var(--primary)" fill-opacity="0.25" />
+</svg>
diff --git a/app/src/interfaces/select-multiple-dropdown/index.ts b/app/src/interfaces/select-multiple-dropdown/index.ts
index fc32786c30..4faa019b7c 100644
--- a/app/src/interfaces/select-multiple-dropdown/index.ts
+++ b/app/src/interfaces/select-multiple-dropdown/index.ts
@@ -1,5 +1,6 @@
 import { defineInterface } from '@directus/shared/utils';
 import InterfaceSelectMultipleDropdown from './select-multiple-dropdown.vue';
+import PreviewSVG from './preview.svg?raw';
 
 export default defineInterface({
 	id: 'select-multiple-dropdown',
@@ -8,6 +9,8 @@ export default defineInterface({
 	icon: 'arrow_drop_down_circle',
 	component: InterfaceSelectMultipleDropdown,
 	types: ['json', 'csv'],
+	group: 'selection',
+	preview: PreviewSVG,
 	options: [
 		{
 			field: 'choices',
diff --git a/app/src/interfaces/select-multiple-dropdown/preview.svg b/app/src/interfaces/select-multiple-dropdown/preview.svg
new file mode 100644
index 0000000000..e22cf12a47
--- /dev/null
+++ b/app/src/interfaces/select-multiple-dropdown/preview.svg
@@ -0,0 +1,9 @@
+<svg width="156" height="96" viewBox="0 0 156 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="18" y="15" width="120" height="66" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="19" y="16" width="118" height="64" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="28" y="25" width="80" height="6" rx="2" fill="var(--primary)" />
+	<rect x="28" y="45.1479" width="70" height="6" rx="2" fill="var(--primary)" />
+	<rect x="28" y="55.2222" width="80" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="28" y="65.2959" width="90" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="28" y="35.0737" width="90" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+</svg>
diff --git a/app/src/interfaces/select-radio/index.ts b/app/src/interfaces/select-radio/index.ts
index bfedcd0f83..b2752c04bb 100644
--- a/app/src/interfaces/select-radio/index.ts
+++ b/app/src/interfaces/select-radio/index.ts
@@ -1,5 +1,6 @@
 import { defineInterface } from '@directus/shared/utils';
 import InterfaceSelectRadio from './select-radio.vue';
+import PreviewSVG from './preview.svg?raw';
 
 export default defineInterface({
 	id: 'select-radio',
@@ -9,6 +10,8 @@ export default defineInterface({
 	component: InterfaceSelectRadio,
 	types: ['string'],
 	recommendedDisplays: ['badge'],
+	group: 'selection',
+	preview: PreviewSVG,
 	options: [
 		{
 			field: 'choices',
diff --git a/app/src/interfaces/select-radio/preview.svg b/app/src/interfaces/select-radio/preview.svg
new file mode 100644
index 0000000000..fb3876228c
--- /dev/null
+++ b/app/src/interfaces/select-radio/preview.svg
@@ -0,0 +1,18 @@
+<svg width="156" height="96" viewBox="0 0 156 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="54" y="36" width="70" height="6" rx="2" fill="var(--primary)" />
+	<path
+		d="M39 33.1758C35.7734 33.1758 33.1758 35.7734 33.1758 39C33.1758 42.2266 35.7734 44.8242 39 44.8242C42.2266 44.8242 44.8242 42.2266 44.8242 39C44.8242 35.7734 42.2266 33.1758 39 33.1758ZM39 43.6758C36.4297 43.6758 34.3242 41.5703 34.3242 39C34.3242 36.4297 36.4297 34.3242 39 34.3242C41.5703 34.3242 43.6758 36.4297 43.6758 39C43.6758 41.5703 41.5703 43.6758 39 43.6758ZM36.0742 39C36.0742 37.3867 37.3867 36.0742 39 36.0742C40.6133 36.0742 41.9258 37.3867 41.9258 39C41.9258 40.6133 40.6133 41.9258 39 41.9258C37.3867 41.9258 36.0742 40.6133 36.0742 39Z"
+		fill="var(--primary)" />
+	<rect x="54" y="72" width="50" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<path
+		d="M39 69.1758C35.7734 69.1758 33.1758 71.7734 33.1758 75C33.1758 78.2266 35.7734 80.8242 39 80.8242C42.2266 80.8242 44.8242 78.2266 44.8242 75C44.8242 71.7734 42.2266 69.1758 39 69.1758ZM39 79.6758C36.4297 79.6758 34.3242 77.5703 34.3242 75C34.3242 72.4297 36.4297 70.3242 39 70.3242C41.5703 70.3242 43.6758 72.4297 43.6758 75C43.6758 77.5703 41.5703 79.6758 39 79.6758Z"
+		fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="54" y="18" width="50" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<path
+		d="M39 15.1758C35.7734 15.1758 33.1758 17.7734 33.1758 21C33.1758 24.2266 35.7734 26.8242 39 26.8242C42.2266 26.8242 44.8242 24.2266 44.8242 21C44.8242 17.7734 42.2266 15.1758 39 15.1758ZM39 25.6758C36.4297 25.6758 34.3242 23.5703 34.3242 21C34.3242 18.4297 36.4297 16.3242 39 16.3242C41.5703 16.3242 43.6758 18.4297 43.6758 21C43.6758 23.5703 41.5703 25.6758 39 25.6758Z"
+		fill="var(--primary)" fill-opacity="0.25" />
+	<rect x="54" y="54" width="60" height="6" rx="2" fill="var(--primary)" fill-opacity="0.25" />
+	<path
+		d="M39 51.1758C35.7734 51.1758 33.1758 53.7734 33.1758 57C33.1758 60.2266 35.7734 62.8242 39 62.8242C42.2266 62.8242 44.8242 60.2266 44.8242 57C44.8242 53.7734 42.2266 51.1758 39 51.1758ZM39 61.6758C36.4297 61.6758 34.3242 59.5703 34.3242 57C34.3242 54.4297 36.4297 52.3242 39 52.3242C41.5703 52.3242 43.6758 54.4297 43.6758 57C43.6758 59.5703 41.5703 61.6758 39 61.6758Z"
+		fill="var(--primary)" fill-opacity="0.25" />
+</svg>
diff --git a/app/src/interfaces/slider/index.ts b/app/src/interfaces/slider/index.ts
index d67633ffe1..114004c91f 100644
--- a/app/src/interfaces/slider/index.ts
+++ b/app/src/interfaces/slider/index.ts
@@ -8,6 +8,7 @@ export default defineInterface({
 	icon: 'linear_scale',
 	component: InterfaceSlider,
 	types: ['integer', 'decimal', 'float', 'bigInteger'],
+	group: 'other',
 	options: [
 		{
 			field: 'minValue',
diff --git a/app/src/interfaces/tags/index.ts b/app/src/interfaces/tags/index.ts
index 026b240b1a..da447e6cf6 100644
--- a/app/src/interfaces/tags/index.ts
+++ b/app/src/interfaces/tags/index.ts
@@ -8,6 +8,7 @@ export default defineInterface({
 	icon: 'local_offer',
 	component: InterfaceTags,
 	types: ['json', 'csv'],
+	group: 'standard',
 	options: [
 		{
 			field: 'presets',
diff --git a/app/src/interfaces/translations/index.ts b/app/src/interfaces/translations/index.ts
index 343bdc7e87..5c5e62c3dc 100644
--- a/app/src/interfaces/translations/index.ts
+++ b/app/src/interfaces/translations/index.ts
@@ -1,13 +1,43 @@
 import { defineInterface } from '@directus/shared/utils';
-import TranslationsOptions from './options.vue';
 import InterfaceTranslations from './translations.vue';
+import { ExtensionsOptionsContext } from '@directus/shared/types';
+import { useFieldsStore } from '@/stores';
 
 export default defineInterface({
 	id: 'translations',
 	name: '$t:translations',
 	icon: 'replay',
 	types: ['alias'],
+	localTypes: ['translations'],
+	group: 'relational',
 	relational: true,
 	component: InterfaceTranslations,
-	options: TranslationsOptions,
+	options: ({ relations }: ExtensionsOptionsContext) => {
+		const fieldsStore = useFieldsStore();
+
+		const languagesCollection = relations.m2o?.related_collection;
+
+		let choices: { text: string; value: string }[] = [];
+
+		if (languagesCollection) {
+			choices = fieldsStore.getFieldsForCollection(languagesCollection).map((field) => ({
+				text: field.name,
+				value: field.field,
+			}));
+		}
+
+		return [
+			{
+				field: 'languageField',
+				type: 'string',
+				name: '$t:interfaces.translations.language_field',
+				meta: {
+					interface: 'select-dropdown',
+					options: {
+						choices,
+					},
+				},
+			},
+		];
+	},
 });
diff --git a/app/src/interfaces/translations/options.vue b/app/src/interfaces/translations/options.vue
deleted file mode 100644
index c19bc432b1..0000000000
--- a/app/src/interfaces/translations/options.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-	<v-notice v-if="collection === null" class="full" type="warning">
-		{{ t('interfaces.translations.no_collection') }}
-	</v-notice>
-	<div v-else class="form-grid">
-		<div class="field half">
-			<p class="type-label">{{ t('interfaces.translations.language_field') }}</p>
-			<v-select v-model="languageField" :items="languageCollectionFields" item-text="name" item-value="field" />
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { Field, Relation } from '@directus/shared/types';
-import { defineComponent, PropType, computed, toRefs } from 'vue';
-import useRelation from '@/composables/use-m2m';
-
-export default defineComponent({
-	props: {
-		collection: {
-			type: String,
-			required: true,
-		},
-		fieldData: {
-			type: Object as PropType<Field>,
-			default: null,
-		},
-		relations: {
-			type: Array as PropType<Relation[]>,
-			default: () => [],
-		},
-		value: {
-			type: Object as PropType<Record<string, any>>,
-			default: null,
-		},
-	},
-	emits: ['input'],
-	setup(props, { emit }) {
-		const { t } = useI18n();
-		const { collection } = toRefs(props);
-
-		const field = computed(() => props.fieldData.field);
-
-		const languageField = computed({
-			get() {
-				return props.value?.languageField;
-			},
-			set(newTemplate: string) {
-				emit('input', {
-					...(props.value || {}),
-					languageField: newTemplate,
-				});
-			},
-		});
-
-		const { relationCollection: languageCollection, relationFields: languageCollectionFields } = useRelation(
-			collection,
-			field
-		);
-
-		return {
-			t,
-			languageField,
-			languageCollection,
-			languageCollectionFields,
-		};
-	},
-});
-</script>
diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index f73ec7e728..b38a6157a8 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -177,6 +177,8 @@ global: Global
 admins_have_all_permissions: Admins have all permissions
 camera: Camera
 show_zero: Show Zero
+create_in_advanced_field_creation_mode: Create in Advanced Field Creation Mode
+continue_in_advanced_field_creation_mode: Continue in Advanced Field Creation Mode
 sum: Sum
 sum_distinct: Sum Distinct
 avg: Average
@@ -204,6 +206,7 @@ boolean: Boolean
 date: Date
 date_range: Date Range
 datetime: DateTime
+dateTime: DateTime
 precision: Precision
 decimal: Decimal
 float: Float
@@ -237,9 +240,9 @@ new_data_alert: 'The following will be created within your Data Model:'
 search_collection: Search Collection...
 new_field: 'New Field'
 new_collection: 'New Collection'
-add_m2o_to_collection: 'Add Many-to-One to "{collection}"'
-add_o2m_to_collection: 'Add One-to-Many to "{collection}"'
-add_m2m_to_collection: 'Add Many-to-Many to "{collection}"'
+add_m2o_to_collection: 'Add M2O to "{collection}"'
+add_o2m_to_collection: 'Add O2M to "{collection}"'
+add_m2m_to_collection: 'Add M2M to "{collection}"'
 choose_a_type: Choose a Type...
 determined_by_relationship: Determined by Relationship
 add_note: Add a helpful note for users...
@@ -688,6 +691,12 @@ source: Source
 url_placeholder: Enter an url...
 display_text: Display Text
 display_text_placeholder: Enter a display text...
+interface_group_text_and_numbers: Text & Numbers
+interface_group_selection: Selection
+interface_group_relational: Relational
+interface_group_presentation: Presentation
+interface_group_groups: Groups
+interface_group_other: Other
 tooltip: Tooltip
 tooltip_placeholder: Enter a tooltip...
 unlimited: Unlimited
diff --git a/app/src/modules/register.ts b/app/src/modules/register.ts
index c7e231f16c..907f60e494 100644
--- a/app/src/modules/register.ts
+++ b/app/src/modules/register.ts
@@ -10,7 +10,7 @@ const { modulesRaw } = getModules();
 let queuedModules: ModuleConfig[] = [];
 
 export async function loadModules(): Promise<void> {
-	const moduleModules = import.meta.globEager('./*/**/index.ts');
+	const moduleModules = import.meta.globEager('./*/index.ts');
 
 	const modules: ModuleConfig[] = Object.values(moduleModules).map((module) => module.default);
 
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/actions.vue b/app/src/modules/settings/routes/data-model/field-detail/components/actions.vue
deleted file mode 100644
index 6148183f46..0000000000
--- a/app/src/modules/settings/routes/data-model/field-detail/components/actions.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-	<div class="actions">
-		<v-button
-			v-if="!isExisting && currentTabIndex < tabs.length - 1"
-			v-tooltip.bottom="t('next')"
-			:disabled="nextDisabled"
-			icon
-			rounded
-			@click="nextTab"
-		>
-			<v-icon name="arrow_forward" />
-		</v-button>
-
-		<v-button v-else v-tooltip.bottom="t('save')" :loading="saving" icon rounded @click="$emit('save')">
-			<v-icon name="check" />
-		</v-button>
-	</div>
-</template>
-
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, computed, PropType } from 'vue';
-import { useSync } from '@directus/shared/composables';
-
-type Tab = {
-	text: string;
-	value: string;
-	disabled: boolean;
-};
-
-export default defineComponent({
-	props: {
-		collection: {
-			type: String,
-			required: true,
-		},
-		current: {
-			type: Array,
-			required: true,
-		},
-		tabs: {
-			type: Array as PropType<Tab[]>,
-			required: true,
-		},
-		saving: {
-			type: Boolean,
-			default: false,
-		},
-		isExisting: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: ['save', 'update:current'],
-	setup(props, { emit }) {
-		const { t } = useI18n();
-
-		const internalCurrentTab = useSync(props, 'current', emit);
-
-		const currentTabIndex = computed(() => props.tabs.findIndex((tab) => tab.value === props.current[0]));
-
-		const previousDisabled = computed(() => {
-			return currentTabIndex.value === 0;
-		});
-
-		const nextDisabled = computed(() => {
-			const nextTab = props.tabs[currentTabIndex.value + 1];
-
-			if (nextTab) {
-				return nextTab.disabled;
-			}
-
-			return true;
-		});
-
-		return { t, internalCurrentTab, previousDisabled, previousTab, nextDisabled, nextTab, currentTabIndex };
-
-		function previousTab() {
-			const previousTab = props.tabs[currentTabIndex.value - 1];
-
-			if (previousTab) {
-				internalCurrentTab.value = [previousTab.value];
-			}
-		}
-
-		function nextTab() {
-			const nextTab = props.tabs[currentTabIndex.value + 1];
-
-			if (nextTab) {
-				internalCurrentTab.value = [nextTab.value];
-			}
-		}
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.actions {
-	display: contents;
-}
-
-.spacer {
-	flex-grow: 1;
-}
-
-.v-button:not(:last-child) {
-	margin-right: 8px;
-}
-</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/field.vue b/app/src/modules/settings/routes/data-model/field-detail/components/field.vue
deleted file mode 100644
index 999632cc2c..0000000000
--- a/app/src/modules/settings/routes/data-model/field-detail/components/field.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-	<div>
-		<div class="form">
-			<div v-if="fieldData.meta" class="field half-left">
-				<div class="label type-label">{{ t('readonly') }}</div>
-				<v-checkbox v-model="fieldData.meta.readonly" :label="t('disabled_editing_value')" block />
-			</div>
-
-			<div v-if="fieldData.meta" class="field half-right">
-				<div class="label type-label">{{ t('hidden') }}</div>
-				<v-checkbox v-model="fieldData.meta.hidden" :label="t('hidden_on_detail')" block />
-			</div>
-
-			<div v-if="fieldData.meta" class="field half-left">
-				<div class="label type-label">{{ t('required') }}</div>
-				<v-checkbox v-model="fieldData.meta.required" :label="t('require_value_to_be_set')" block />
-			</div>
-
-			<div v-if="type !== 'group'" class="field full">
-				<div class="label type-label">{{ t('note') }}</div>
-				<v-input v-model="fieldData.meta.note" :placeholder="t('add_note')" />
-			</div>
-
-			<div class="field full">
-				<div class="label type-label">{{ t('field_name_translations') }}</div>
-				<interface-list
-					:value="fieldData.meta.translations"
-					:template="'[{{ language }}] {{ translation }}'"
-					:fields="[
-						{
-							field: 'language',
-							type: 'string',
-							name: t('language'),
-							meta: {
-								interface: 'system-language',
-								width: 'half',
-								display: 'formatted-value',
-								display_options: {
-									font: 'monospace',
-									color: 'var(--foreground-subdued)',
-								},
-							},
-							schema: {
-								default_value: 'en-US',
-							},
-						},
-						{
-							field: 'translation',
-							type: 'string',
-							name: t('translation'),
-							meta: {
-								interface: 'input',
-								width: 'half',
-								options: {
-									placeholder: t('translation_placeholder'),
-								},
-							},
-						},
-					]"
-					@input="fieldData.meta.translations = $event"
-				/>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent } from 'vue';
-import { state } from '../store';
-
-export default defineComponent({
-	props: {
-		isExisting: {
-			type: Boolean,
-			required: true,
-		},
-		type: {
-			type: String,
-			required: true,
-		},
-	},
-	setup() {
-		const { t } = useI18n();
-
-		return { t, fieldData: state.fieldData };
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-@import '@/styles/mixins/form-grid';
-
-.type-title {
-	margin-bottom: 32px;
-}
-
-.form {
-	--form-vertical-gap: 32px;
-	--form-horizontal-gap: 32px;
-
-	@include form-grid;
-}
-
-.monospace {
-	--v-input-font-family: var(--family-monospace);
-}
-
-.required {
-	--v-icon-color: var(--primary);
-}
-
-.v-notice {
-	margin-bottom: 36px;
-}
-</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2a.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2a.vue
deleted file mode 100644
index d86bbdb443..0000000000
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2a.vue
+++ /dev/null
@@ -1,590 +0,0 @@
-<template>
-	<div>
-		<div class="grid">
-			<div class="field">
-				<div class="type-label">{{ t('this_collection') }}</div>
-				<v-input disabled :model-value="relations[0].related_collection" />
-			</div>
-			<div class="field">
-				<div class="type-label">{{ t('junction_collection') }}</div>
-				<v-input
-					v-model="junctionCollection"
-					:class="{ matches: junctionCollectionExists }"
-					:nullable="false"
-					:placeholder="t('collection') + '...'"
-					:disabled="autoFill || isExisting"
-					db-safe
-				>
-					<template v-if="!isExisting" #append>
-						<v-menu show-arrow placement="bottom-end">
-							<template #activator="{ toggle }">
-								<v-icon
-									v-tooltip="t('select_existing')"
-									name="list_alt"
-									clickable
-									:disabled="autoFill || isExisting"
-									@click="toggle"
-								/>
-							</template>
-
-							<v-list class="monospace">
-								<v-list-item
-									v-for="availableCollection in availableCollections"
-									:key="availableCollection.collection"
-									:active="relations[0].collection === availableCollection.collection"
-									clickable
-									@click="relations[0].collection = availableCollection.collection"
-								>
-									<v-list-item-content>
-										{{ availableCollection.collection }}
-									</v-list-item-content>
-								</v-list-item>
-
-								<v-divider />
-
-								<v-list-group>
-									<template #activator>{{ t('system') }}</template>
-									<v-list-item
-										v-for="systemCollection in systemCollections"
-										:key="systemCollection.collection"
-										:active="relations[0].collection === systemCollection.collection"
-										clickable
-										@click="relations[0].collection = systemCollection.collection"
-									>
-										<v-list-item-content>
-											{{ systemCollection.collection }}
-										</v-list-item-content>
-									</v-list-item>
-								</v-list-group>
-							</v-list>
-						</v-menu>
-					</template>
-
-					<template v-if="isExisting" #input>
-						<v-text-overflow :text="junctionCollection" />
-					</template>
-				</v-input>
-			</div>
-			<div class="field">
-				<div class="type-label">{{ t('related_collections') }}</div>
-
-				<v-select
-					v-model="relations[1].meta.one_allowed_collections"
-					:placeholder="t('collection') + '...'"
-					:items="availableCollections"
-					item-value="collection"
-					item-text="name"
-					item-disabled="meta.singleton"
-					multiple
-					:multiple-preview-threshold="0"
-				/>
-			</div>
-			<v-input disabled>
-				<template #input>
-					<v-text-overflow :text="currentPrimaryKeyField" />
-				</template>
-			</v-input>
-			<v-input
-				v-model="relations[0].field"
-				:class="{ matches: junctionFieldExists(relations[0].field) }"
-				:nullable="false"
-				:placeholder="t('foreign_key') + '...'"
-				:disabled="autoFill || isExisting"
-				db-safe
-			>
-				<template v-if="junctionCollectionExists && !isExisting" #append>
-					<v-menu show-arrow placement="bottom-end">
-						<template #activator="{ toggle }">
-							<v-icon
-								v-tooltip="t('select_existing')"
-								name="list_alt"
-								clickable
-								:disabled="autoFill || isExisting"
-								@click="toggle"
-							/>
-						</template>
-
-						<v-list class="monospace">
-							<v-list-item
-								v-for="item in junctionFields"
-								:key="item.value"
-								:active="relations[0].field === item.value"
-								:disabled="item.disabled"
-								clickable
-								@click="relations[0].field = item.value"
-							>
-								<v-list-item-content>
-									{{ item.text }}
-								</v-list-item-content>
-							</v-list-item>
-						</v-list>
-					</v-menu>
-				</template>
-
-				<template v-if="isExisting" #input>
-					<v-text-overflow :text="relations[0].field" />
-				</template>
-			</v-input>
-			<div class="related-collections-preview">{{ (relations[1].meta.one_allowed_collections || []).join(', ') }}</div>
-			<div class="spacer" />
-			<v-input
-				v-model="relations[1].meta.one_collection_field"
-				class="one-collection-field"
-				:class="{ matches: junctionFieldExists(relations[0].meta.one_collection_field) }"
-				:nullable="false"
-				:placeholder="t('collection_key') + '...'"
-				:disabled="autoFill || isExisting"
-				db-safe
-			>
-				<template v-if="junctionCollectionExists && !isExisting" #append>
-					<v-menu show-arrow placement="bottom-end">
-						<template #activator="{ toggle }">
-							<v-icon
-								v-tooltip="t('select_existing')"
-								name="list_alt"
-								clickable
-								:disabled="autoFill || isExisting"
-								@click="toggle"
-							/>
-						</template>
-
-						<v-list class="monospace">
-							<v-list-item
-								v-for="item in junctionFields"
-								:key="item.value"
-								:active="relations[0].field === item.value"
-								:disabled="item.disabled"
-								clickable
-								@click="relations[0].field = item.value"
-							>
-								<v-list-item-content>
-									{{ item.text }}
-								</v-list-item-content>
-							</v-list-item>
-						</v-list>
-					</v-menu>
-				</template>
-
-				<template v-if="isExisting" #input>
-					<v-text-overflow :text="relations[1].meta.one_collection_field" />
-				</template>
-			</v-input>
-			<div class="spacer" />
-			<v-input
-				v-model="relations[1].field"
-				:class="{ matches: junctionFieldExists(relations[1].field) }"
-				:nullable="false"
-				:placeholder="t('foreign_key') + '...'"
-				:disabled="autoFill || isExisting"
-				db-safe
-			>
-				<template v-if="junctionCollectionExists && !isExisting" #append>
-					<v-menu show-arrow placement="bottom-end">
-						<template #activator="{ toggle }">
-							<v-icon
-								v-tooltip="t('select_existing')"
-								name="list_alt"
-								clickable
-								:disabled="autoFill || isExisting"
-								@click="toggle"
-							/>
-						</template>
-
-						<v-list class="monospace">
-							<v-list-item
-								v-for="item in junctionFields"
-								:key="item.value"
-								:active="relations[1].field === item.value"
-								:disabled="item.disabled"
-								clickable
-								@click="relations[1].field = item.value"
-							>
-								<v-list-item-content>
-									{{ item.text }}
-								</v-list-item-content>
-							</v-list-item>
-						</v-list>
-					</v-menu>
-				</template>
-
-				<template v-if="isExisting" #input>
-					<v-text-overflow :text="relations[1].field" />
-				</template>
-			</v-input>
-			<v-input disabled :model-value="t('primary_key')" />
-			<div class="spacer" />
-			<v-checkbox v-if="!isExisting" v-model="autoFill" block :label="t('auto_fill')" />
-			<v-icon class="arrow" name="arrow_forward" />
-			<v-icon class="arrow" name="arrow_backward" />
-			<v-icon class="arrow" name="arrow_backward" />
-		</div>
-
-		<div class="sort-field">
-			<v-divider large :inline-title="false">{{ t('sort_field') }}</v-divider>
-
-			<v-input
-				v-model="relations[0].meta.sort_field"
-				:class="{ matches: junctionFieldExists(relations[0].meta.sort_field) }"
-				:placeholder="t('add_sort_field') + '...'"
-				db-safe
-			>
-				<template v-if="junctionCollectionExists && !isExisting" #append>
-					<v-menu show-arrow placement="bottom-end">
-						<template #activator="{ toggle }">
-							<v-icon v-tooltip="t('select_existing')" name="list_alt" clickable @click="toggle" />
-						</template>
-
-						<v-list class="monospace">
-							<v-list-item
-								v-for="item in junctionFields"
-								:key="item.value"
-								:active="relations[0].meta.sort_field === item.value"
-								:disabled="item.disabled"
-								clickable
-								@click="relations[0].meta.sort_field = item.value"
-							>
-								<v-list-item-content>
-									{{ item.text }}
-								</v-list-item-content>
-							</v-list-item>
-						</v-list>
-					</v-menu>
-				</template>
-			</v-input>
-		</div>
-
-		<div class="relational-triggers">
-			<v-divider class="field full" large :inline-title="false">{{ t('relational_triggers') }}</v-divider>
-
-			<div class="field">
-				<div class="type-label">
-					{{
-						t('referential_action_field_label_m2o', {
-							collection: currentCollectionName || 'related',
-						})
-					}}
-				</div>
-				<v-select
-					v-model="relations[0].schema.on_delete"
-					:disabled="relations[0].collection === relations[0].related_collection"
-					:placeholder="t('choose_action') + '...'"
-					:items="[
-						{
-							text: t('referential_action_set_null', { field: m2oFieldName }),
-							value: 'SET NULL',
-						},
-						{
-							text: t('referential_action_set_default', { field: m2oFieldName }),
-							value: 'SET DEFAULT',
-						},
-						{
-							text: t('referential_action_cascade', {
-								collection: relatedCollectionName,
-								field: m2oFieldName,
-							}),
-							value: 'CASCADE',
-						},
-						{
-							text: t('referential_action_no_action'),
-							value: 'NO ACTION',
-						},
-					]"
-				/>
-			</div>
-			<div class="field">
-				<div class="type-label">
-					{{
-						t('referential_action_field_label_o2m', {
-							collection: relatedCollectionName || 'related',
-						})
-					}}
-				</div>
-				<v-select
-					v-model="relations[0].meta.one_deselect_action"
-					:placeholder="t('choose_action') + '...'"
-					:items="[
-						{
-							text: t('referential_action_set_null', { field: m2oFieldName }),
-							value: 'nullify',
-						},
-						{
-							text: t('referential_action_cascade', {
-								collection: relatedCollectionName,
-								field: m2oFieldName,
-							}),
-							value: 'delete',
-						},
-					]"
-				/>
-			</div>
-		</div>
-
-		<v-notice v-if="generationInfo.length > 0" class="generated-data" type="warning">
-			<span>
-				{{ t('new_data_alert') }}
-				<ul>
-					<li v-for="(data, index) in generationInfo" :key="index">
-						<span class="field-name">{{ data.name }}</span>
-						({{ t(data.type === 'field' ? 'new_field' : 'new_collection') }})
-					</li>
-				</ul>
-			</span>
-		</v-notice>
-	</div>
-</template>
-
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, computed } from 'vue';
-import { orderBy } from 'lodash';
-import { useCollectionsStore, useFieldsStore } from '@/stores/';
-import { Field } from '@directus/shared/types';
-import formatTitle from '@directus/format-title';
-
-import { state, generationInfo } from '../store';
-
-export default defineComponent({
-	props: {
-		type: {
-			type: String,
-			required: true,
-		},
-		collection: {
-			type: String,
-			required: true,
-		},
-		isExisting: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup(props) {
-		const { t } = useI18n();
-
-		const collectionsStore = useCollectionsStore();
-		const fieldsStore = useFieldsStore();
-
-		const autoFill = computed({
-			get() {
-				return state.autoFillJunctionRelation;
-			},
-			set(newAuto: boolean) {
-				state.autoFillJunctionRelation = newAuto;
-			},
-		});
-
-		const availableCollections = computed(() => {
-			return orderBy(
-				[
-					...collectionsStore.collections.filter((collection) => {
-						return collection.collection.startsWith('directus_') === false;
-					}),
-					{
-						divider: true,
-					},
-					{
-						name: t('system'),
-						selectable: false,
-						children: collectionsStore.collections.filter((collection) => {
-							return collection.collection.startsWith('directus_') === true;
-						}),
-					},
-				],
-				['collection'],
-				['asc']
-			);
-		});
-
-		const systemCollections = computed(() => {
-			return orderBy(
-				collectionsStore.collections.filter((collection) => {
-					return collection.collection.startsWith('directus_') === true;
-				}),
-				['collection'],
-				['asc']
-			);
-		});
-
-		const junctionCollection = computed({
-			get() {
-				return state.relations[0].collection;
-			},
-			set(collection: string | undefined) {
-				state.relations[0].collection = collection;
-				state.relations[1].collection = collection;
-			},
-		});
-
-		const junctionCollectionExists = computed(() => {
-			return junctionCollection.value && collectionsStore.getCollection(junctionCollection.value) !== null;
-		});
-
-		const junctionFields = computed(() => {
-			if (!junctionCollection.value) return [];
-
-			return fieldsStore.getFieldsForCollectionAlphabetical(junctionCollection.value).map((field: Field) => ({
-				text: field.field,
-				value: field.field,
-				disabled:
-					state.relations?.[0]?.field === field.field ||
-					field.schema?.is_primary_key ||
-					state.relations?.[1]?.field === field.field,
-			}));
-		});
-
-		const currentPrimaryKeyField = computed<string | undefined>(() => {
-			return fieldsStore.getPrimaryKeyFieldForCollection(props.collection)?.field;
-		});
-
-		const relatedCollectionName = computed(() => {
-			if (!state.relations[0].collection) return null;
-			return (
-				collectionsStore.getCollection(state.relations[0].collection)?.name ||
-				formatTitle(state.relations[0].collection)
-			);
-		});
-
-		const currentCollectionName = computed(() => {
-			if (!state.relations[0].related_collection) return null;
-			return (
-				collectionsStore.getCollection(state.relations[0].related_collection)?.name ||
-				formatTitle(state.relations[0].related_collection)
-			);
-		});
-
-		const m2oFieldName = computed(() => {
-			if (!state.relations[0].collection || !state.relations[0].field) return null;
-			return (
-				fieldsStore.getField(state.relations[0].collection, state.relations[0].field)?.name ||
-				formatTitle(state.relations[0].field)
-			);
-		});
-
-		return {
-			t,
-			relations: state.relations,
-			autoFill,
-			availableCollections,
-			systemCollections,
-			junctionCollection,
-			junctionFields,
-			junctionCollectionExists,
-			junctionFieldExists,
-			generationInfo,
-			currentPrimaryKeyField,
-			relatedCollectionName,
-			currentCollectionName,
-			m2oFieldName,
-		};
-
-		function junctionFieldExists(fieldKey: string) {
-			if (!junctionCollection.value || !fieldKey) return false;
-			return !!fieldsStore.getField(junctionCollection.value, fieldKey);
-		}
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-@import '@/styles/mixins/form-grid';
-
-.grid {
-	--v-select-font-family: var(--family-monospace);
-	--v-input-font-family: var(--family-monospace);
-
-	position: relative;
-	display: grid;
-	grid-template-columns: repeat(3, minmax(0, 1fr));
-	gap: 12px 28px;
-	margin-top: 48px;
-
-	.v-icon.arrow {
-		--v-icon-color: var(--primary);
-
-		position: absolute;
-		transform: translateX(-50%);
-		pointer-events: none;
-
-		&:first-of-type {
-			top: 117px;
-			left: 32.5%;
-		}
-
-		&:nth-of-type(2) {
-			top: 190px;
-			left: 67.4%;
-		}
-
-		&:last-of-type {
-			top: 261px;
-			left: 67.4%;
-		}
-	}
-}
-
-.v-input.matches {
-	--v-input-color: var(--primary);
-}
-
-.type-label {
-	margin-bottom: 8px;
-}
-
-.v-list {
-	--v-list-item-content-font-family: var(--family-monospace);
-}
-
-.v-notice {
-	margin-bottom: 36px;
-}
-
-.generated-data {
-	margin-top: 36px;
-
-	ul {
-		padding-top: 4px;
-		padding-left: 24px;
-	}
-
-	.field-name {
-		font-family: var(--family-monospace);
-	}
-}
-
-.related-collections-preview {
-	grid-row: 2 / span 2;
-	grid-column: 3;
-	padding: var(--input-padding);
-	overflow: auto;
-	color: var(--foreground-subdued);
-	font-family: var(--family-monospace);
-	background-color: var(--background-subdued);
-	border: var(--border-width) solid var(--border-normal);
-	border-radius: var(--border-radius);
-}
-
-.one-collection-field {
-	align-self: flex-end;
-}
-
-.sort-field {
-	--v-input-font-family: var(--family-monospace);
-
-	.v-divider {
-		margin-top: 48px;
-		margin-bottom: 24px;
-	}
-}
-
-.relational-triggers {
-	--form-horizontal-gap: 12px;
-	--form-vertical-gap: 24px;
-
-	@include form-grid;
-
-	.v-divider {
-		margin-top: 48px;
-		margin-bottom: 0;
-	}
-}
-</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
deleted file mode 100644
index c0737306e5..0000000000
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
+++ /dev/null
@@ -1,761 +0,0 @@
-<template>
-	<div>
-		<div class="grid">
-			<div class="field">
-				<div class="type-label">{{ t('this_collection') }}</div>
-				<v-input disabled :model-value="relations[0].related_collection" />
-			</div>
-			<div class="field">
-				<div class="type-label">{{ t('junction_collection') }}</div>
-				<v-input
-					v-model="junctionCollection"
-					:class="{ matches: junctionCollectionExists }"
-					:nullable="false"
-					:placeholder="t('collection') + '...'"
-					:disabled="autoFill || isExisting"
-					db-safe
-				>
-					<template v-if="!isExisting" #append>
-						<v-menu show-arrow placement="bottom-end">
-							<template #activator="{ toggle }">
-								<v-icon
-									v-tooltip="t('select_existing')"
-									name="list_alt"
-									clickable
-									:disabled="autoFill || isExisting"
-									@click="toggle"
-								/>
-							</template>
-
-							<v-list class="monospace">
-								<v-list-item
-									v-for="availableCollection in availableCollections"
-									:key="availableCollection.collection"
-									:active="relations[0].collection === availableCollection.collection"
-									clickable
-									@click="junctionCollection = availableCollection.collection"
-								>
-									<v-list-item-content>
-										{{ availableCollection.collection }}
-									</v-list-item-content>
-								</v-list-item>
-
-								<v-divider />
-
-								<v-list-group>
-									<template #activator>{{ t('system') }}</template>
-									<v-list-item
-										v-for="systemCollection in systemCollections"
-										:key="systemCollection.collection"
-										:active="relations[0].collection === systemCollection.collection"
-										clickable
-										@click="junctionCollection = systemCollection.collection"
-									>
-										<v-list-item-content>
-											{{ systemCollection.collection }}
-										</v-list-item-content>
-									</v-list-item>
-								</v-list-group>
-							</v-list>
-						</v-menu>
-					</template>
-
-					<template v-if="isExisting" #input>
-						<v-text-overflow :text="junctionCollection" />
-					</template>
-				</v-input>
-			</div>
-			<div class="field">
-				<div class="type-label">{{ t('related_collection') }}</div>
-				<v-input
-					v-model="relations[1].related_collection"
-					:autofocus="autoFill"
-					:class="{ matches: relatedCollectionExists }"
-					:nullable="false"
-					:placeholder="t('collection') + '...'"
-					:disabled="type === 'files' || isExisting"
-					db-safe
-				>
-					<template #append>
-						<v-menu show-arrow placement="bottom-end">
-							<template v-if="!isExisting" #activator="{ toggle }">
-								<v-icon
-									v-tooltip="t('select_existing')"
-									name="list_alt"
-									clickable
-									:disabled="type === 'files' || isExisting"
-									@click="toggle"
-								/>
-							</template>
-
-							<v-list class="monospace">
-								<v-list-item
-									v-for="availableCollection in availableCollections"
-									:key="availableCollection.collection"
-									:active="relations[1].related_collection === availableCollection.collection"
-									clickable
-									@click="relations[1].related_collection = availableCollection.collection"
-								>
-									<v-list-item-content>
-										{{ availableCollection.collection }}
-									</v-list-item-content>
-								</v-list-item>
-
-								<v-divider />
-
-								<v-list-group>
-									<template #activator>{{ t('system') }}</template>
-									<v-list-item
-										v-for="systemCollection in systemCollections"
-										:key="systemCollection.collection"
-										:active="relations[1].related_collection === systemCollection.collection"
-										clickable
-										@click="relations[1].related_collection = systemCollection.collection"
-									>
-										<v-list-item-content>
-											{{ systemCollection.collection }}
-										</v-list-item-content>
-									</v-list-item>
-								</v-list-group>
-							</v-list>
-						</v-menu>
-					</template>
-
-					<template v-if="isExisting" #input>
-						<v-text-overflow :text="relations[1].related_collection" />
-					</template>
-				</v-input>
-			</div>
-			<v-input disabled :model-value="currentPrimaryKeyField" />
-			<v-input
-				v-model="relations[0].field"
-				:class="{ matches: junctionFieldExists(relations[0].field) }"
-				:nullable="false"
-				:placeholder="t('foreign_key') + '...'"
-				:disabled="autoFill || isExisting"
-				db-safe
-			>
-				<template v-if="junctionCollectionExists && !isExisting" #append>
-					<v-menu show-arrow placement="bottom-end">
-						<template #activator="{ toggle }">
-							<v-icon
-								v-tooltip="t('select_existing')"
-								name="list_alt"
-								clickable
-								:disabled="autoFill || isExisting"
-								@click="toggle"
-							/>
-						</template>
-
-						<v-list class="monospace">
-							<v-list-item
-								v-for="item in junctionFields"
-								:key="item.value"
-								:active="relations[0].field === item.value"
-								:disabled="item.disabled"
-								clickable
-								@click="relations[0].field = item.value"
-							>
-								<v-list-item-content>
-									{{ item.text }}
-								</v-list-item-content>
-							</v-list-item>
-						</v-list>
-					</v-menu>
-				</template>
-
-				<template v-if="isExisting" #input>
-					<v-text-overflow :text="relations[0].field" />
-				</template>
-			</v-input>
-			<div class="spacer" />
-			<div class="spacer" />
-			<v-input
-				v-model="relations[1].field"
-				:class="{ matches: junctionFieldExists(relations[1].field) }"
-				:nullable="false"
-				:placeholder="t('foreign_key') + '...'"
-				:disabled="autoFill || isExisting"
-				db-safe
-			>
-				<template v-if="junctionCollectionExists && !isExisting" #append>
-					<v-menu show-arrow placement="bottom-end">
-						<template #activator="{ toggle }">
-							<v-icon
-								v-tooltip="t('select_existing')"
-								name="list_alt"
-								clickable
-								:disabled="autoFill || isExisting"
-								@click="toggle"
-							/>
-						</template>
-
-						<v-list class="monospace">
-							<v-list-item
-								v-for="item in junctionFields"
-								:key="item.value"
-								:active="relations[1].field === item.value"
-								:disabled="item.disabled"
-								clickable
-								@click="relations[1].field = item.value"
-							>
-								<v-list-item-content>
-									{{ item.text }}
-								</v-list-item-content>
-							</v-list-item>
-						</v-list>
-					</v-menu>
-				</template>
-
-				<template v-if="isExisting" #input>
-					<v-text-overflow :text="relations[1].field" />
-				</template>
-			</v-input>
-			<v-input v-model="relatedPrimaryKeyField" disabled :placeholder="t('primary_key') + '...'" />
-			<div class="spacer" />
-			<v-checkbox v-if="!isExisting" v-model="autoFill" block :label="t('auto_fill')" />
-			<v-icon class="arrow" name="arrow_forward" />
-			<v-icon class="arrow" name="arrow_backward" />
-		</div>
-
-		<v-divider v-if="!isExisting" large :inline-title="false">{{ t('corresponding_field') }}</v-divider>
-
-		<div v-if="!isExisting" class="corresponding">
-			<div class="field">
-				<div class="type-label">{{ t('create_field') }}</div>
-				<v-checkbox v-model="hasCorresponding" block :label="correspondingLabel" />
-			</div>
-			<div class="field">
-				<div class="type-label">{{ t('field_name') }}</div>
-				<v-input
-					v-model="correspondingField"
-					:disabled="hasCorresponding === false"
-					:placeholder="t('field_name') + '...'"
-					db-safe
-				/>
-			</div>
-			<v-icon name="arrow_forward" class="arrow" />
-		</div>
-
-		<div class="sort-field">
-			<v-divider large :inline-title="false">{{ t('sort_field') }}</v-divider>
-
-			<v-input
-				v-model="relations[0].meta.sort_field"
-				:class="{ matches: junctionFieldExists(relations[0].meta.sort_field) }"
-				:placeholder="t('add_sort_field') + '...'"
-				db-safe
-			>
-				<template v-if="junctionCollectionExists" #append>
-					<v-menu show-arrow placement="bottom-end">
-						<template #activator="{ toggle }">
-							<v-icon v-tooltip="t('select_existing')" name="list_alt" clickable @click="toggle" />
-						</template>
-
-						<v-list class="monospace">
-							<v-list-item
-								v-for="item in junctionFields"
-								:key="item.value"
-								:active="relations[0].meta.sort_field === item.value"
-								:disabled="item.disabled"
-								clickable
-								@click="relations[0].meta.sort_field = item.value"
-							>
-								<v-list-item-content>
-									{{ item.text }}
-								</v-list-item-content>
-							</v-list-item>
-						</v-list>
-					</v-menu>
-				</template>
-			</v-input>
-		</div>
-
-		<div class="relational-triggers">
-			<v-divider class="field full" large :inline-title="false">{{ t('relational_triggers') }}</v-divider>
-
-			<div class="field">
-				<div class="type-label">
-					{{
-						t('referential_action_field_label_o2m', {
-							collection: junctionCollectionName || '',
-						})
-					}}
-				</div>
-				<v-select
-					v-model="relations[0].meta.one_deselect_action"
-					:placeholder="t('choose_action') + '...'"
-					:items="[
-						{
-							text: t('referential_action_set_null', {
-								collection: junctionCollectionName,
-								field: junctionM2OFieldName,
-							}),
-							value: 'nullify',
-						},
-						{
-							text: t('referential_action_cascade', {
-								collection: junctionCollectionName,
-								field: junctionM2OFieldName,
-							}),
-							value: 'delete',
-						},
-					]"
-				/>
-			</div>
-
-			<div class="field">
-				<div class="type-label">
-					{{
-						t('referential_action_field_label_m2o', {
-							collection: currentCollectionName || 'related',
-						})
-					}}
-				</div>
-				<v-select
-					v-model="relations[0].schema.on_delete"
-					:disabled="relations[0].collection === relations[0].related_collection"
-					:placeholder="t('choose_action') + '...'"
-					:items="[
-						{
-							text: t('referential_action_set_null', { field: junctionM2OFieldName }),
-							value: 'SET NULL',
-						},
-						{
-							text: t('referential_action_set_default', { field: junctionM2OFieldName }),
-							value: 'SET DEFAULT',
-						},
-						{
-							text: t('referential_action_cascade', {
-								collection: junctionCollectionName,
-								field: junctionM2OFieldName,
-							}),
-							value: 'CASCADE',
-						},
-						{
-							text: t('referential_action_no_action'),
-							value: 'NO ACTION',
-						},
-					]"
-				/>
-			</div>
-
-			<div class="field">
-				<div class="type-label">
-					{{
-						t('referential_action_field_label_m2o', {
-							collection: relatedCollectionName || 'related',
-						})
-					}}
-				</div>
-				<v-select
-					v-model="relations[1].schema.on_delete"
-					:disabled="relations[1].collection === relations[1].related_collection"
-					:placeholder="t('choose_action') + '...'"
-					:items="[
-						{
-							text: t('referential_action_set_null', { field: junctionRelatedM2OFieldName }),
-							value: 'SET NULL',
-						},
-						{
-							text: t('referential_action_set_default', { field: junctionRelatedM2OFieldName }),
-							value: 'SET DEFAULT',
-						},
-						{
-							text: t('referential_action_cascade', {
-								collection: junctionCollectionName,
-								field: junctionRelatedM2OFieldName,
-							}),
-							value: 'CASCADE',
-						},
-						{
-							text: t('referential_action_no_action'),
-							value: 'NO ACTION',
-						},
-					]"
-				/>
-			</div>
-		</div>
-
-		<v-notice v-if="generationInfo.length > 0" class="generated-data" type="warning">
-			<span>
-				{{ t('new_data_alert') }}
-
-				<ul>
-					<li v-for="(data, index) in generationInfo" :key="index">
-						<span class="field-name">{{ data.name }}</span>
-						({{ t(data.type === 'field' ? 'new_field' : 'new_collection') }})
-					</li>
-				</ul>
-			</span>
-		</v-notice>
-	</div>
-</template>
-
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, computed } from 'vue';
-import { orderBy } from 'lodash';
-import { useCollectionsStore, useFieldsStore } from '@/stores/';
-import { Field } from '@directus/shared/types';
-
-import { state, generationInfo } from '../store';
-import formatTitle from '@directus/format-title';
-
-export default defineComponent({
-	props: {
-		type: {
-			type: String,
-			required: true,
-		},
-		collection: {
-			type: String,
-			required: true,
-		},
-		isExisting: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup() {
-		const { t } = useI18n();
-
-		const collectionsStore = useCollectionsStore();
-		const fieldsStore = useFieldsStore();
-
-		const autoFill = computed({
-			get() {
-				return state.autoFillJunctionRelation;
-			},
-			set(newAuto: boolean) {
-				state.autoFillJunctionRelation = newAuto;
-			},
-		});
-
-		const availableCollections = computed(() => {
-			return orderBy(
-				collectionsStore.collections.filter((collection) => {
-					return collection.collection.startsWith('directus_') === false;
-				}),
-				['collection'],
-				['asc']
-			);
-		});
-
-		/**
-		 * These are the system endpoints that don't have full/regular CRUD operations available.
-		 */
-		const collectionsDenyList = [
-			'directus_activity',
-			'directus_collections',
-			'directus_fields',
-			'directus_migrations',
-			'directus_relations',
-			'directus_revisions',
-			'directus_sessions',
-			'directus_settings',
-		];
-
-		const systemCollections = computed(() => {
-			return orderBy(
-				collectionsStore.collections.filter((collection) => {
-					return collection.collection.startsWith('directus_') === true;
-				}),
-				['collection'],
-				['asc']
-			).filter((collection) => collectionsDenyList.includes(collection.collection) === false);
-		});
-
-		const junctionCollection = computed({
-			get() {
-				return state.relations[0].collection;
-			},
-			set(collection: string | undefined) {
-				state.relations[0].collection = collection;
-				state.relations[1].collection = collection;
-			},
-		});
-
-		const junctionCollectionExists = computed(() => {
-			return junctionCollection.value && collectionsStore.getCollection(junctionCollection.value) !== null;
-		});
-
-		const relatedCollectionExists = computed(() => {
-			return (
-				state.relations[1].related_collection &&
-				collectionsStore.getCollection(state.relations[1].related_collection) !== null
-			);
-		});
-
-		const junctionFields = computed(() => {
-			if (!junctionCollection.value) return [];
-
-			return fieldsStore.getFieldsForCollectionAlphabetical(junctionCollection.value).map((field: Field) => ({
-				text: field.field,
-				value: field.field,
-				disabled:
-					state.relations[0].field === field.field ||
-					field.schema?.is_primary_key ||
-					state.relations[1].field === field.field,
-			}));
-		});
-
-		const currentPrimaryKeyField = computed(
-			() => fieldsStore.getPrimaryKeyFieldForCollection(state.relations[0].related_collection).field
-		);
-
-		const relatedPrimaryKeyField = computed(() => {
-			if (!state.relations[1].related_collection) return '';
-
-			if (relatedCollectionExists.value) {
-				return fieldsStore.getPrimaryKeyFieldForCollection(state.relations[1].related_collection).field;
-			}
-
-			return 'id';
-		});
-
-		const currentCollectionName = computed(() => {
-			if (!state.relations[0].related_collection) return null;
-			return (
-				collectionsStore.getCollection(state.relations[0].related_collection)?.name ||
-				formatTitle(state.relations[0].related_collection)
-			);
-		});
-
-		const junctionCollectionName = computed(() => {
-			if (!state.relations[0].collection) return null;
-			return (
-				collectionsStore.getCollection(state.relations[0].collection)?.name ||
-				formatTitle(state.relations[0].collection)
-			);
-		});
-
-		const junctionM2OFieldName = computed(() => {
-			if (!state.relations[0].collection || !state.relations[0].field) return null;
-			return (
-				fieldsStore.getField(state.relations[0].collection, state.relations[0].field)?.name ||
-				formatTitle(state.relations[0].field)
-			);
-		});
-
-		const junctionRelatedM2OFieldName = computed(() => {
-			if (!state.relations[1].collection || !state.relations[1].field) return null;
-			return (
-				fieldsStore.getField(state.relations[1].collection, state.relations[1].field)?.name ||
-				formatTitle(state.relations[1].field)
-			);
-		});
-
-		const relatedCollectionName = computed(() => {
-			if (!state.relations[1].related_collection) return null;
-			return (
-				collectionsStore.getCollection(state.relations[1].related_collection)?.name ||
-				formatTitle(state.relations[1].related_collection)
-			);
-		});
-
-		const { hasCorresponding, correspondingField, correspondingLabel } = useCorresponding();
-
-		return {
-			t,
-			relations: state.relations,
-			autoFill,
-			availableCollections,
-			systemCollections,
-			junctionCollection,
-			junctionFields,
-			junctionCollectionExists,
-			relatedCollectionExists,
-			junctionFieldExists,
-			hasCorresponding,
-			correspondingField,
-			correspondingLabel,
-			generationInfo,
-			currentPrimaryKeyField,
-			relatedPrimaryKeyField,
-			junctionCollectionName,
-			junctionM2OFieldName,
-			currentCollectionName,
-			junctionRelatedM2OFieldName,
-			relatedCollectionName,
-		};
-
-		function junctionFieldExists(fieldKey: string) {
-			if (!junctionCollection.value || !fieldKey) return false;
-			return !!fieldsStore.getField(junctionCollection.value, fieldKey);
-		}
-
-		function useCorresponding() {
-			const hasCorresponding = computed({
-				get() {
-					return !!state.newFields.find((field: any) => field.$type === 'corresponding');
-				},
-				set(enabled: boolean) {
-					if (enabled === true && !!state.newFields.find((field: any) => field.$type === 'corresponding') === false) {
-						state.newFields = [
-							...state.newFields,
-							{
-								$type: 'corresponding',
-								field: state.relations[0].related_collection!,
-								collection: state.relations[1].related_collection!,
-								type: 'alias',
-								meta: {
-									special: ['m2m'],
-									interface: 'list-m2m',
-								},
-							},
-						];
-
-						state.relations[1].meta = {
-							...(state.relations[1].meta || {}),
-							one_field: state.relations[0].related_collection,
-						};
-					} else {
-						state.newFields = state.newFields.filter((field: any) => field.$type !== 'corresponding');
-						state.relations[1].meta = {
-							...(state.relations[1].meta || {}),
-							one_field: null,
-						};
-					}
-				},
-			});
-
-			const correspondingField = computed({
-				get() {
-					return state.newFields?.find((field: any) => field.$type === 'corresponding')?.field || null;
-				},
-				set(field: string | null) {
-					state.newFields = state.newFields.map((newField: any) => {
-						if (newField.$type === 'corresponding') {
-							return {
-								...newField,
-								field: field,
-							};
-						}
-
-						return newField;
-					});
-
-					state.relations[1].meta = {
-						...(state.relations[1].meta || {}),
-						one_field: field,
-					};
-				},
-			});
-
-			const correspondingLabel = computed(() => {
-				if (state.relations[0].related_collection) {
-					return t('add_m2m_to_collection', { collection: state.relations[1].related_collection });
-				}
-
-				return t('add_field_related');
-			});
-
-			return { hasCorresponding, correspondingField, correspondingLabel };
-		}
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-@import '@/styles/mixins/form-grid';
-
-.grid {
-	--v-select-font-family: var(--family-monospace);
-	--v-input-font-family: var(--family-monospace);
-
-	position: relative;
-	display: grid;
-	grid-template-columns: repeat(3, minmax(0, 1fr));
-	gap: 12px 28px;
-	margin-top: 48px;
-
-	.v-icon.arrow {
-		--v-icon-color: var(--primary);
-
-		position: absolute;
-		transform: translateX(-50%);
-		pointer-events: none;
-
-		&:first-of-type {
-			top: 117px;
-			left: 32.5%;
-		}
-
-		&:last-of-type {
-			top: 190px;
-			left: 67.4%;
-		}
-	}
-}
-
-.v-input.matches {
-	--v-input-color: var(--primary);
-}
-
-.type-label {
-	margin-bottom: 8px;
-}
-
-.v-divider {
-	margin: 48px 0 24px;
-}
-
-.v-list {
-	--v-list-item-content-font-family: var(--family-monospace);
-}
-
-.corresponding {
-	position: relative;
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 12px 32px;
-
-	.arrow {
-		--v-icon-color: var(--primary);
-
-		position: absolute;
-		bottom: 17px;
-		left: 50%;
-		transform: translateX(-50%);
-	}
-}
-
-.v-notice {
-	margin-bottom: 36px;
-}
-
-.generated-data {
-	margin-top: 36px;
-
-	ul {
-		padding-top: 4px;
-		padding-left: 24px;
-	}
-
-	.field-name {
-		font-family: var(--family-monospace);
-	}
-}
-
-.sort-field {
-	--v-input-font-family: var(--family-monospace);
-
-	.v-divider {
-		margin-top: 48px;
-		margin-bottom: 24px;
-	}
-}
-
-.relational-triggers {
-	--form-horizontal-gap: 12px;
-	--form-vertical-gap: 24px;
-
-	@include form-grid;
-
-	.v-divider {
-		margin-top: 48px;
-		margin-bottom: 0;
-	}
-}
-</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
deleted file mode 100644
index 4275eaf1d9..0000000000
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
+++ /dev/null
@@ -1,413 +0,0 @@
-<template>
-	<div>
-		<div class="grid">
-			<div class="field">
-				<div class="type-label">{{ t('this_collection') }}</div>
-				<v-input disabled :model-value="relations[0].collection" />
-			</div>
-			<div class="field">
-				<div class="type-label">{{ t('related_collection') }}</div>
-				<v-input
-					key="related-collection"
-					v-model="relations[0].related_collection"
-					:class="{ matches: relatedCollectionExists }"
-					db-safe
-					:nullable="false"
-					:disabled="isExisting"
-					:placeholder="t('collection') + '...'"
-				>
-					<template v-if="!isExisting" #append>
-						<v-menu show-arrow placement="bottom-end">
-							<template #activator="{ toggle }">
-								<v-icon
-									v-tooltip="t('select_existing')"
-									name="list_alt"
-									clickable
-									:disabled="isExisting"
-									@click="toggle"
-								/>
-							</template>
-
-							<v-list class="monospace">
-								<v-list-item
-									v-for="availableCollection in availableCollections"
-									:key="availableCollection.collection"
-									:active="relations[0].related_collection === availableCollection.collection"
-									clickable
-									@click="relations[0].related_collection = availableCollection.collection"
-								>
-									<v-list-item-content>
-										{{ availableCollection.collection }}
-									</v-list-item-content>
-								</v-list-item>
-
-								<v-divider />
-
-								<v-list-group>
-									<template #activator>{{ t('system') }}</template>
-									<v-list-item
-										v-for="systemCollection in systemCollections"
-										:key="systemCollection.collection"
-										:active="relations[0].related_collection === systemCollection.collection"
-										clickable
-										@click="relations[0].related_collection = systemCollection.collection"
-									>
-										<v-list-item-content>
-											{{ systemCollection.collection }}
-										</v-list-item-content>
-									</v-list-item>
-								</v-list-group>
-							</v-list>
-						</v-menu>
-					</template>
-
-					<template v-if="isExisting" #input>
-						<v-text-overflow :text="relations[0].related_collection" />
-					</template>
-				</v-input>
-			</div>
-			<v-input disabled>
-				<template #input>
-					<v-text-overflow :text="relations[0].field" />
-				</template>
-			</v-input>
-			<v-input v-model="relatedPrimaryKeyField" disabled :placeholder="t('primary_key') + '...'" />
-			<v-icon class="arrow" name="arrow_back" />
-		</div>
-
-		<v-divider v-if="!isExisting" large :inline-title="false">{{ t('corresponding_field') }}</v-divider>
-
-		<div v-if="!isExisting" class="grid">
-			<div class="field">
-				<div class="type-label">{{ t('create_field') }}</div>
-				<v-checkbox v-model="hasCorresponding" block :label="correspondingLabel" />
-			</div>
-			<div class="field">
-				<div class="type-label">{{ t('field_name') }}</div>
-				<v-input
-					v-model="correspondingField"
-					:disabled="hasCorresponding === false"
-					:placeholder="t('field_name') + '...'"
-					db-safe
-				/>
-			</div>
-			<v-icon name="arrow_forward" class="arrow" />
-		</div>
-
-		<div class="relational-triggers">
-			<v-divider class="field full" large :inline-title="false">{{ t('relational_triggers') }}</v-divider>
-
-			<div class="field">
-				<div class="type-label">
-					{{
-						t('referential_action_field_label_m2o', {
-							collection: relatedCollectionName || 'related',
-						})
-					}}
-				</div>
-				<v-select
-					v-model="relations[0].schema.on_delete"
-					:disabled="relations[0].collection === relations[0].related_collection"
-					:placeholder="t('choose_action') + '...'"
-					:items="[
-						{
-							text: t('referential_action_set_null', { field: m2oFieldName }),
-							value: 'SET NULL',
-						},
-						{
-							text: t('referential_action_set_default', { field: m2oFieldName }),
-							value: 'SET DEFAULT',
-						},
-						{
-							text: t('referential_action_cascade', {
-								collection: currentCollectionName,
-								field: m2oFieldName,
-							}),
-							value: 'CASCADE',
-						},
-						{
-							text: t('referential_action_no_action', {
-								field: m2oFieldName,
-							}),
-							value: 'NO ACTION',
-						},
-					]"
-				/>
-			</div>
-		</div>
-
-		<v-notice v-if="generationInfo.length > 0" class="generated-data" type="warning">
-			<span>
-				{{ t('new_data_alert') }}
-
-				<ul>
-					<li v-for="(data, index) in generationInfo" :key="index">
-						<span class="field-name">{{ data.name }}</span>
-						({{ t(data.type === 'field' ? 'new_field' : 'new_collection') }})
-					</li>
-				</ul>
-			</span>
-		</v-notice>
-	</div>
-</template>
-
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, computed } from 'vue';
-import { orderBy } from 'lodash';
-import { useCollectionsStore, useFieldsStore } from '@/stores';
-import formatTitle from '@directus/format-title';
-
-import { state, generationInfo } from '../store';
-
-export default defineComponent({
-	props: {
-		type: {
-			type: String,
-			required: true,
-		},
-		collection: {
-			type: String,
-			required: true,
-		},
-		isExisting: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup() {
-		const { t } = useI18n();
-
-		const collectionsStore = useCollectionsStore();
-		const fieldsStore = useFieldsStore();
-
-		const { availableCollections, systemCollections } = useRelation();
-		const { hasCorresponding, correspondingField, correspondingLabel } = useCorresponding();
-
-		const relatedCollectionExists = computed(() => {
-			return (
-				state.relations[0].related_collection && !!collectionsStore.getCollection(state.relations[0].related_collection)
-			);
-		});
-
-		const relatedPrimaryKeyField = computed(() => {
-			if (!state.relations[0].related_collection) return '';
-
-			if (relatedCollectionExists.value) {
-				return fieldsStore.getPrimaryKeyFieldForCollection(state.relations[0].related_collection).field;
-			}
-
-			return 'id';
-		});
-
-		const relatedCollectionName = computed(() => {
-			if (!state.relations[0].related_collection) return null;
-			return (
-				collectionsStore.getCollection(state.relations[0].related_collection)?.name ||
-				formatTitle(state.relations[0].related_collection)
-			);
-		});
-
-		const currentCollectionName = computed(() => {
-			if (!state.relations[0].collection) return null;
-			return (
-				collectionsStore.getCollection(state.relations[0].collection)?.name ||
-				formatTitle(state.relations[0].collection)
-			);
-		});
-
-		const m2oFieldName = computed(() => {
-			if (!state.relations[0].collection || !state.relations[0].field) return null;
-			return (
-				fieldsStore.getField(state.relations[0].collection, state.relations[0].field)?.name ||
-				formatTitle(state.relations[0].field)
-			);
-		});
-
-		return {
-			t,
-			relations: state.relations,
-			availableCollections,
-			systemCollections,
-			hasCorresponding,
-			correspondingField,
-			correspondingLabel,
-			fieldData: state.fieldData,
-			relatedCollectionExists,
-			generationInfo,
-			relatedPrimaryKeyField,
-			relatedCollectionName,
-			m2oFieldName,
-			currentCollectionName,
-		};
-
-		function useRelation() {
-			const availableCollections = computed(() => {
-				return orderBy(
-					collectionsStore.collections.filter((collection) => {
-						return collection.collection.startsWith('directus_') === false;
-					}),
-					['collection'],
-					['asc']
-				);
-			});
-
-			/**
-			 * These are the system endpoints that don't have full/regular CRUD operations available.
-			 */
-			const collectionsDenyList = [
-				'directus_activity',
-				'directus_collections',
-				'directus_fields',
-				'directus_migrations',
-				'directus_relations',
-				'directus_revisions',
-				'directus_sessions',
-				'directus_settings',
-			];
-
-			const systemCollections = computed(() => {
-				return orderBy(
-					collectionsStore.collections.filter((collection) => {
-						return collection.collection.startsWith('directus_') === true;
-					}),
-					['collection'],
-					['asc']
-				).filter((collection) => collectionsDenyList.includes(collection.collection) === false);
-			});
-
-			return { availableCollections, systemCollections };
-		}
-
-		function useCorresponding() {
-			const hasCorresponding = computed({
-				get() {
-					return state.newFields.length > 0;
-				},
-				set(enabled: boolean) {
-					if (enabled === true) {
-						state.relations[0].meta = {
-							...(state.relations[0].meta || {}),
-							one_field: state.relations[0].collection,
-						};
-
-						state.newFields.push({
-							$type: 'corresponding',
-							field: state.relations[0].meta.one_field!,
-							collection: state.relations[0].related_collection!,
-							meta: {
-								special: ['o2m'],
-								interface: 'list-o2m',
-							},
-						});
-					} else {
-						state.newFields = state.newFields.filter((field: any) => field.$type !== 'corresponding');
-					}
-				},
-			});
-
-			const correspondingField = computed({
-				get() {
-					return state.newFields?.find((field: any) => field.$type === 'corresponding')?.field || null;
-				},
-				set(field: string | null) {
-					state.newFields = state.newFields.map((newField: any) => {
-						if (newField.$type === 'corresponding') {
-							return {
-								...newField,
-								field,
-							};
-						}
-
-						return newField;
-					});
-
-					state.relations[0].meta = {
-						...(state.relations[0].meta || {}),
-						one_field: field,
-					};
-				},
-			});
-
-			const correspondingLabel = computed(() => {
-				if (state.relations[0].related_collection) {
-					return t('add_o2m_to_collection', { collection: state.relations[0].related_collection });
-				}
-
-				return t('add_field_related');
-			});
-
-			return { hasCorresponding, correspondingField, correspondingLabel };
-		}
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-@import '@/styles/mixins/form-grid';
-
-.grid {
-	--v-select-font-family: var(--family-monospace);
-	--v-input-font-family: var(--family-monospace);
-
-	position: relative;
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 12px 32px;
-	margin-top: 48px;
-
-	.v-input.matches {
-		--v-input-color: var(--primary);
-	}
-
-	.arrow {
-		--v-icon-color: var(--primary);
-
-		position: absolute;
-		bottom: 17px;
-		left: 50%;
-		transform: translateX(-50%);
-	}
-}
-
-.v-list {
-	--v-list-item-content-font-family: var(--family-monospace);
-}
-
-.v-divider {
-	margin: 48px 0;
-}
-
-.type-label {
-	margin-bottom: 8px;
-}
-
-.v-notice {
-	margin-bottom: 36px;
-}
-
-.generated-data {
-	margin-top: 36px;
-
-	ul {
-		padding-top: 4px;
-		padding-left: 24px;
-	}
-
-	.field-name {
-		font-family: var(--family-monospace);
-	}
-}
-
-.relational-triggers {
-	--form-horizontal-gap: 12px;
-	--form-vertical-gap: 24px;
-
-	@include form-grid;
-
-	.v-divider {
-		margin-top: 48px;
-		margin-bottom: 0;
-	}
-}
-</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
deleted file mode 100644
index 56ef2be767..0000000000
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
+++ /dev/null
@@ -1,584 +0,0 @@
-<template>
-	<div>
-		<div class="grid">
-			<div class="field">
-				<div class="type-label">{{ t('this_collection') }}</div>
-				<v-input disabled :model-value="collection" />
-			</div>
-			<div class="field">
-				<div class="type-label">{{ t('related_collection') }}</div>
-				<v-input
-					v-model="relations[0].collection"
-					db-safe
-					:placeholder="t('collection') + '...'"
-					:nullable="false"
-					:disabled="isExisting"
-					:class="{ matches: relatedCollectionExists }"
-				>
-					<template v-if="!isExisting" #append>
-						<v-menu show-arrow placement="bottom-end">
-							<template #activator="{ toggle }">
-								<v-icon
-									v-tooltip="t('select_existing')"
-									name="list_alt"
-									clickable
-									:disabled="isExisting"
-									@click="toggle"
-								/>
-							</template>
-
-							<v-list class="monospace">
-								<v-list-item
-									v-for="availableCollection in availableCollections"
-									:key="availableCollection.collection"
-									:active="relations[0].collection === availableCollection.collection"
-									clickable
-									@click="relations[0].collection = availableCollection.collection"
-								>
-									<v-list-item-content>
-										{{ availableCollection.collection }}
-									</v-list-item-content>
-								</v-list-item>
-
-								<v-divider />
-
-								<v-list-group>
-									<template #activator>{{ t('system') }}</template>
-									<v-list-item
-										v-for="systemCollection in systemCollections"
-										:key="systemCollection.collection"
-										:active="relations[0].collection === systemCollection.collection"
-										clickable
-										@click="relations[0].collection = systemCollection.collection"
-									>
-										<v-list-item-content>
-											{{ systemCollection.collection }}
-										</v-list-item-content>
-									</v-list-item>
-								</v-list-group>
-							</v-list>
-						</v-menu>
-					</template>
-
-					<template v-if="isExisting" #input>
-						<v-text-overflow :text="relations[0].collection" />
-					</template>
-				</v-input>
-			</div>
-			<v-input disabled :model-value="currentCollectionPrimaryKey.field">
-				<template #input>
-					<v-text-overflow :text="currentCollectionPrimaryKey.field" />
-				</template>
-			</v-input>
-			<v-input
-				v-model="relations[0].field"
-				db-safe
-				:nullable="false"
-				:disabled="isExisting"
-				:placeholder="t('foreign_key') + '...'"
-				:class="{ matches: relatedFieldExists }"
-			>
-				<template v-if="fields && fields.length > 0 && !isExisting" #append>
-					<v-menu show-arrow placement="bottom-end">
-						<template #activator="{ toggle }">
-							<v-icon v-tooltip="t('select_existing')" name="list_alt" clickable @click="toggle" />
-						</template>
-
-						<v-list class="monospace">
-							<v-list-item
-								v-for="field in fields"
-								:key="field.value"
-								:active="relations[0].field === field.value"
-								:disabled="field.disabled"
-								clickable
-								@click="relations[0].field = field.value"
-							>
-								<v-list-item-content>
-									{{ field.text }}
-								</v-list-item-content>
-							</v-list-item>
-						</v-list>
-					</v-menu>
-				</template>
-
-				<template v-if="isExisting" #input>
-					<v-text-overflow :text="relations[0].field" />
-				</template>
-			</v-input>
-			<v-icon class="arrow" name="arrow_forward" />
-		</div>
-
-		<v-divider v-if="!isExisting" large :inline-title="false">{{ t('corresponding_field') }}</v-divider>
-
-		<div v-if="!isExisting" class="corresponding">
-			<div class="field">
-				<div class="type-label">{{ t('create_field') }}</div>
-				<v-checkbox v-model="hasCorresponding" block :disabled="isExisting" :label="correspondingLabel" />
-			</div>
-			<div class="field">
-				<div class="type-label">{{ t('field_name') }}</div>
-				<v-input v-model="relations[0].field" disabled :placeholder="t('field_name') + '...'" db-safe />
-			</div>
-			<v-icon name="arrow_forward" class="arrow" />
-		</div>
-
-		<div class="sort-field">
-			<v-divider large :inline-title="false">{{ t('sort_field') }}</v-divider>
-
-			<v-input
-				v-model="relations[0].meta.sort_field"
-				db-safe
-				:placeholder="t('add_sort_field') + '...'"
-				:class="{ matches: sortFieldExists }"
-			>
-				<template v-if="fields && fields.length > 0 && !isExisting" #append>
-					<v-menu show-arrow placement="bottom-end">
-						<template #activator="{ toggle }">
-							<v-icon v-tooltip="t('select_existing')" name="list_alt" clickable @click="toggle" />
-						</template>
-
-						<v-list class="monospace">
-							<v-list-item
-								v-for="field in fields"
-								:key="field.value"
-								:active="relations[0].meta.sort_field === field.value"
-								clickable
-								:disabled="field.disabled"
-								@click="relations[0].meta.sort_field = field.value"
-							>
-								<v-list-item-content>
-									{{ field.text }}
-								</v-list-item-content>
-							</v-list-item>
-						</v-list>
-					</v-menu>
-				</template>
-			</v-input>
-		</div>
-
-		<div class="relational-triggers">
-			<v-divider class="field full" large :inline-title="false">{{ t('relational_triggers') }}</v-divider>
-
-			<div class="field">
-				<div class="type-label">
-					{{
-						t('referential_action_field_label_o2m', {
-							collection: relatedCollectionName || 'related',
-						})
-					}}
-				</div>
-				<v-select
-					v-model="relations[0].meta.one_deselect_action"
-					:placeholder="t('choose_action') + '...'"
-					:items="[
-						{
-							text: t('referential_action_set_null', { field: m2oFieldName }),
-							value: 'nullify',
-						},
-						{
-							text: t('referential_action_cascade', {
-								collection: relatedCollectionName,
-								field: m2oFieldName,
-							}),
-							value: 'delete',
-						},
-					]"
-				/>
-			</div>
-
-			<div class="field">
-				<div class="type-label">
-					{{
-						t('referential_action_field_label_m2o', {
-							collection: currentCollectionName || 'related',
-						})
-					}}
-				</div>
-				<v-select
-					v-model="relations[0].schema.on_delete"
-					:disabled="relations[0].collection === relations[0].related_collection"
-					:placeholder="t('choose_action') + '...'"
-					:items="[
-						{
-							text: t('referential_action_set_null', { field: m2oFieldName }),
-							value: 'SET NULL',
-						},
-						{
-							text: t('referential_action_set_default', { field: m2oFieldName }),
-							value: 'SET DEFAULT',
-						},
-						{
-							text: t('referential_action_cascade', {
-								collection: currentCollectionName,
-								field: m2oFieldName,
-							}),
-							value: 'CASCADE',
-						},
-						{
-							text: t('referential_action_no_action'),
-							value: 'NO ACTION',
-						},
-					]"
-				/>
-			</div>
-		</div>
-
-		<v-notice v-if="generationInfo.length > 0" class="generated-data" type="warning">
-			<span>
-				{{ t('new_data_alert') }}
-
-				<ul>
-					<li v-for="(data, index) in generationInfo" :key="index">
-						<span class="field-name">{{ data.name }}</span>
-						({{ t(data.type === 'field' ? 'new_field' : 'new_collection') }})
-					</li>
-				</ul>
-			</span>
-		</v-notice>
-	</div>
-</template>
-
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, computed } from 'vue';
-import { Field } from '@directus/shared/types';
-import { useFieldsStore, useCollectionsStore } from '@/stores';
-import { orderBy } from 'lodash';
-import { state, generationInfo } from '../store';
-import formatTitle from '@directus/format-title';
-
-export default defineComponent({
-	props: {
-		type: {
-			type: String,
-			required: true,
-		},
-		collection: {
-			type: String,
-			required: true,
-		},
-		isExisting: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup(props) {
-		const { t } = useI18n();
-
-		const collectionsStore = useCollectionsStore();
-		const fieldsStore = useFieldsStore();
-
-		const { availableCollections, systemCollections, fields, currentCollectionPrimaryKey, collectionMany } =
-			useRelation();
-		const { hasCorresponding, correspondingLabel } = useCorresponding();
-
-		const relatedCollectionExists = computed(() => {
-			return (
-				collectionsStore.collections.find((col) => col.collection === state.relations?.[0].collection) !== undefined
-			);
-		});
-
-		const relatedFieldExists = computed(() => {
-			if (!state?.relations?.[0].collection || !state?.relations?.[0].field) return false;
-			return !!fieldsStore.getField(state.relations[0].collection, state.relations[0].field);
-		});
-
-		const sortFieldExists = computed(() => {
-			if (!state?.relations?.[0].collection || !state?.relations?.[0].meta?.sort_field) return false;
-			return !!fieldsStore.getField(state.relations[0].collection, state.relations[0].meta.sort_field);
-		});
-
-		const relatedCollectionName = computed(() => {
-			if (!state.relations[0].collection) return null;
-			return (
-				collectionsStore.getCollection(state.relations[0].collection)?.name ||
-				formatTitle(state.relations[0].collection)
-			);
-		});
-
-		const currentCollectionName = computed(() => {
-			if (!state.relations[0].related_collection) return null;
-			return (
-				collectionsStore.getCollection(state.relations[0].related_collection)?.name ||
-				formatTitle(state.relations[0].related_collection)
-			);
-		});
-
-		const m2oFieldName = computed(() => {
-			if (!state.relations[0].collection || !state.relations[0].field) return null;
-			return (
-				fieldsStore.getField(state.relations[0].collection, state.relations[0].field)?.name ||
-				formatTitle(state.relations[0].field)
-			);
-		});
-
-		return {
-			t,
-			relations: state.relations,
-			availableCollections,
-			systemCollections,
-			fields,
-			currentCollectionPrimaryKey,
-			collectionMany,
-			hasCorresponding,
-			correspondingLabel,
-			relatedCollectionExists,
-			relatedFieldExists,
-			generationInfo,
-			sortFieldExists,
-			relatedCollectionName,
-			currentCollectionName,
-			m2oFieldName,
-		};
-
-		function useRelation() {
-			const availableCollections = computed(() => {
-				return orderBy(
-					collectionsStore.collections.filter((collection) => {
-						return collection.collection.startsWith('directus_') === false;
-					}),
-					['collection'],
-					['asc']
-				);
-			});
-
-			/**
-			 * These are the system endpoints that don't have full/regular CRUD operations available.
-			 */
-			const collectionsDenyList = [
-				'directus_activity',
-				'directus_collections',
-				'directus_fields',
-				'directus_migrations',
-				'directus_relations',
-				'directus_revisions',
-				'directus_sessions',
-				'directus_settings',
-			];
-
-			const systemCollections = computed(() => {
-				return orderBy(
-					collectionsStore.collections.filter((collection) => {
-						return collection.collection.startsWith('directus_') === true;
-					}),
-					['collection'],
-					['asc']
-				).filter((collection) => collectionsDenyList.includes(collection.collection) === false);
-			});
-
-			const currentCollectionPrimaryKey = computed(() => fieldsStore.getPrimaryKeyFieldForCollection(props.collection));
-
-			const fields = computed(() => {
-				if (!state.relations[0].collection) return [];
-
-				return fieldsStore.getFieldsForCollectionAlphabetical(state.relations[0].collection).map((field: Field) => ({
-					text: field.field,
-					value: field.field,
-					disabled:
-						!field.schema || field.schema?.is_primary_key || field.type !== currentCollectionPrimaryKey.value.type,
-				}));
-			});
-
-			const collectionMany = computed({
-				get() {
-					return state.relations[0].collection!;
-				},
-				set(collection: string) {
-					state.relations[0].collection = collection;
-					state.relations[0].field = '';
-				},
-			});
-
-			return { availableCollections, systemCollections, fields, currentCollectionPrimaryKey, collectionMany };
-		}
-
-		function useCorresponding() {
-			const hasCorresponding = computed({
-				get() {
-					if (!state?.relations?.[0]?.collection || !state?.relations?.[0]?.field) return false;
-
-					if (relatedFieldExists.value === true) {
-						return (
-							state.updateFields.find((updateField: any) => updateField.field === state.relations[0].field)?.meta
-								?.interface === 'select-dropdown-m2o' ||
-							fieldsStore.getField(state.relations[0].collection, state.relations[0].field)?.meta?.interface ===
-								'select-dropdown-m2o'
-						);
-					} else {
-						return (
-							state.newFields.find((newField: any) => newField.$type === 'manyRelated')?.meta?.interface ===
-							'select-dropdown-m2o'
-						);
-					}
-				},
-				set(enabled: boolean) {
-					if (!state?.relations?.[0]?.field) return;
-
-					if (relatedFieldExists.value === true) {
-						if (enabled === true) {
-							state.updateFields = [
-								{
-									collection: state.relations[0].related_collection!,
-									field: state.relations[0].field,
-									meta: {
-										interface: 'select-dropdown-m2o',
-										special: ['m2o'],
-									},
-								},
-							];
-						} else {
-							state.updateFields = [
-								{
-									collection: state.relations[0].related_collection!,
-									field: state.relations[0].field,
-									meta: {
-										interface: null,
-										special: null,
-									},
-								},
-							];
-						}
-					} else {
-						const newFieldCreated = !!state.newFields.find((newField: any) => newField.$type === 'manyRelated');
-
-						if (newFieldCreated === false) {
-							state.newFields = [
-								...state.newFields,
-								{
-									$type: 'manyRelated',
-									collection: state.relations[0].related_collection!,
-									field: state.relations[0].field,
-									meta: {
-										interface: 'select-dropdown-m2o',
-										special: ['m2o'],
-									},
-								},
-							];
-						} else {
-							state.newFields = state.newFields.map((newField: any) => {
-								if (newField.$type === 'manyRelated') {
-									if (!newField.meta) newField.meta = {};
-									if (enabled === true) {
-										newField.meta.interface = 'select-dropdown-m2o';
-										newField.meta.special = ['m2o'];
-									} else {
-										newField.meta.interface = null;
-										newField.meta.special = null;
-									}
-								}
-
-								return newField;
-							});
-						}
-					}
-				},
-			});
-
-			const correspondingLabel = computed(() => {
-				if (state.relations[0].collection) {
-					return t('add_m2o_to_collection', { collection: state.relations[0].collection });
-				}
-
-				return t('add_field_related');
-			});
-
-			return { hasCorresponding, correspondingLabel };
-		}
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-@import '@/styles/mixins/form-grid';
-
-.grid {
-	--v-select-font-family: var(--family-monospace);
-	--v-input-font-family: var(--family-monospace);
-
-	position: relative;
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 12px 32px;
-	margin-top: 48px;
-
-	.v-icon.arrow {
-		--v-icon-color: var(--primary);
-
-		position: absolute;
-		bottom: 17px;
-		left: 50%;
-		transform: translateX(-50%);
-	}
-}
-
-.v-input.matches {
-	--v-input-color: var(--primary);
-}
-
-.v-list {
-	--v-list-item-content-font-family: var(--family-monospace);
-}
-
-.type-label {
-	margin-bottom: 8px;
-}
-
-.v-divider {
-	margin: 48px 0;
-}
-
-.corresponding {
-	position: relative;
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 12px 32px;
-	margin-top: 48px;
-
-	.arrow {
-		--v-icon-color: var(--primary);
-
-		position: absolute;
-		bottom: 17px;
-		left: 50%;
-		transform: translateX(-50%);
-	}
-}
-
-.v-notice {
-	margin-bottom: 36px;
-}
-
-.generated-data {
-	margin-top: 36px;
-
-	ul {
-		padding-top: 4px;
-		padding-left: 24px;
-	}
-
-	.field-name {
-		font-family: var(--family-monospace);
-	}
-}
-
-.sort-field {
-	--v-input-font-family: var(--family-monospace);
-
-	.v-divider {
-		margin-top: 48px;
-		margin-bottom: 24px;
-	}
-}
-
-.relational-triggers {
-	--form-horizontal-gap: 12px;
-	--form-vertical-gap: 24px;
-
-	@include form-grid;
-
-	.v-divider {
-		margin-top: 48px;
-		margin-bottom: 0;
-	}
-}
-</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship.vue
deleted file mode 100644
index 603c9a505b..0000000000
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-	<relationship-m2o
-		v-if="type === 'm2o' || type === 'file'"
-		:collection="collection"
-		:is-existing="isExisting"
-		:type="type"
-	/>
-	<relationship-o2m v-else-if="type === 'o2m'" :collection="collection" :is-existing="isExisting" :type="type" />
-	<relationship-m2m
-		v-else-if="type === 'm2m' || type === 'files'"
-		:collection="collection"
-		:is-existing="isExisting"
-		:type="type"
-	/>
-	<relationship-m2a v-else-if="type === 'm2a'" :collection="collection" :is-existing="isExisting" :type="type" />
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import RelationshipM2o from './relationship-m2o.vue';
-import RelationshipO2m from './relationship-o2m.vue';
-import RelationshipM2m from './relationship-m2m.vue';
-import RelationshipM2a from './relationship-m2a.vue';
-
-export default defineComponent({
-	components: {
-		RelationshipM2o,
-		RelationshipO2m,
-		RelationshipM2m,
-		RelationshipM2a,
-	},
-	props: {
-		type: {
-			type: String,
-			required: true,
-		},
-		collection: {
-			type: String,
-			required: true,
-		},
-		isExisting: {
-			type: Boolean,
-			default: false,
-		},
-	},
-});
-</script>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/tabs.vue b/app/src/modules/settings/routes/data-model/field-detail/components/tabs.vue
deleted file mode 100644
index 23b66c0ecb..0000000000
--- a/app/src/modules/settings/routes/data-model/field-detail/components/tabs.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-	<v-tabs v-model="internalCurrentTab" vertical>
-		<v-tab v-for="tab in tabs" :key="tab.value" :value="tab.value" :disabled="tab.disabled">
-			{{ tab.text }}
-		</v-tab>
-	</v-tabs>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { useSync } from '@directus/shared/composables';
-
-export default defineComponent({
-	props: {
-		tabs: {
-			type: Array as PropType<string[]>,
-			required: true,
-		},
-		current: {
-			type: Array as PropType<string[]>,
-			default: () => ['schema'],
-		},
-		type: {
-			type: String,
-			default: 'standard',
-		},
-	},
-	emits: ['update:current'],
-	setup(props, { emit }) {
-		const internalCurrentTab = useSync(props, 'current', emit);
-
-		return { internalCurrentTab };
-	},
-});
-</script>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue b/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
deleted file mode 100644
index 728dff5f32..0000000000
--- a/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
+++ /dev/null
@@ -1,569 +0,0 @@
-<template>
-	<div>
-		<div class="grid">
-			<div class="field">
-				<div class="type-label">{{ t('this_collection') }}</div>
-				<v-input disabled :model-value="relations[0].related_collection" />
-			</div>
-			<div class="field">
-				<div class="type-label">{{ t('translations_collection') }}</div>
-				<v-input
-					v-model="junctionCollection"
-					:class="{ matches: junctionCollectionExists }"
-					:nullable="false"
-					:placeholder="t('collection') + '...'"
-					:disabled="autoFill || isExisting"
-					db-safe
-				>
-					<template #append>
-						<v-menu show-arrow placement="bottom-end">
-							<template #activator="{ toggle }">
-								<v-icon
-									v-tooltip="t('select_existing')"
-									name="list_alt"
-									clickable
-									:disabled="autoFill || isExisting"
-									@click="toggle"
-								/>
-							</template>
-
-							<v-list class="monospace">
-								<v-list-item
-									v-for="availableCollection in availableCollections"
-									:key="availableCollection.collection"
-									:active="relations[0].collection === availableCollection.collection"
-									clickable
-									@click="relations[0].collection = availableCollection.collection"
-								>
-									<v-list-item-content>
-										{{ availableCollection.collection }}
-									</v-list-item-content>
-								</v-list-item>
-
-								<v-divider />
-
-								<v-list-group>
-									<template #activator>{{ t('system') }}</template>
-									<v-list-item
-										v-for="systemCollection in systemCollections"
-										:key="systemCollection.collection"
-										:active="relations[0].collection === systemCollection.collection"
-										clickable
-										@click="relations[0].collection = systemCollection.collection"
-									>
-										<v-list-item-content>
-											{{ systemCollection.collection }}
-										</v-list-item-content>
-									</v-list-item>
-								</v-list-group>
-							</v-list>
-						</v-menu>
-					</template>
-				</v-input>
-			</div>
-			<div class="field">
-				<div class="type-label">{{ t('languages_collection') }}</div>
-				<v-input
-					v-model="relations[1].related_collection"
-					:autofocus="autoFill"
-					:class="{ matches: relatedCollectionExists }"
-					:nullable="false"
-					:placeholder="t('collection') + '...'"
-					:disabled="type === 'files' || isExisting"
-					db-safe
-				>
-					<template #append>
-						<v-menu show-arrow placement="bottom-end">
-							<template #activator="{ toggle }">
-								<v-icon
-									v-tooltip="t('select_existing')"
-									name="list_alt"
-									clickable
-									:disabled="type === 'files' || isExisting"
-									@click="toggle"
-								/>
-							</template>
-
-							<v-list class="monospace">
-								<v-list-item
-									v-for="availableCollection in availableCollections"
-									:key="availableCollection.collection"
-									:active="relations[1].related_collection === availableCollection.collection"
-									clickable
-									@click="relations[1].related_collection = availableCollection.collection"
-								>
-									<v-list-item-content>
-										{{ availableCollection.collection }}
-									</v-list-item-content>
-								</v-list-item>
-
-								<v-divider />
-
-								<v-list-group>
-									<template #activator>{{ t('system') }}</template>
-									<v-list-item
-										v-for="systemCollection in systemCollections"
-										:key="systemCollection.collection"
-										:active="relations[1].related_collection === systemCollection.collection"
-										clickable
-										@click="relations[1].related_collection = systemCollection.collection"
-									>
-										<v-list-item-content>
-											{{ systemCollection.collection }}
-										</v-list-item-content>
-									</v-list-item>
-								</v-list-group>
-							</v-list>
-						</v-menu>
-					</template>
-				</v-input>
-			</div>
-			<v-input disabled :model-value="currentPrimaryKeyField" />
-			<v-input
-				v-model="relations[0].field"
-				:class="{ matches: junctionFieldExists(relations[0].field) }"
-				:nullable="false"
-				:placeholder="t('foreign_key') + '...'"
-				:disabled="autoFill || isExisting"
-				db-safe
-			>
-				<template v-if="junctionCollectionExists" #append>
-					<v-menu show-arrow placement="bottom-end">
-						<template #activator="{ toggle }">
-							<v-icon
-								v-tooltip="t('select_existing')"
-								name="list_alt"
-								clickable
-								:disabled="autoFill || isExisting"
-								@click="toggle"
-							/>
-						</template>
-
-						<v-list class="monospace">
-							<v-list-item
-								v-for="item in junctionFields"
-								:key="item.value"
-								:active="relations[0].field === item.value"
-								:disabled="item.disabled"
-								clickable
-								@click="relations[0].field = item.value"
-							>
-								<v-list-item-content>
-									{{ item.text }}
-								</v-list-item-content>
-							</v-list-item>
-						</v-list>
-					</v-menu>
-				</template>
-			</v-input>
-			<div class="spacer" />
-			<div class="spacer" />
-			<v-input
-				v-model="relations[1].field"
-				:class="{ matches: junctionFieldExists(relations[1].field) }"
-				:nullable="false"
-				:placeholder="t('foreign_key') + '...'"
-				:disabled="autoFill || isExisting"
-				db-safe
-			>
-				<template v-if="junctionCollectionExists" #append>
-					<v-menu show-arrow placement="bottom-end">
-						<template #activator="{ toggle }">
-							<v-icon
-								v-tooltip="t('select_existing')"
-								name="list_alt"
-								clickable
-								:disabled="autoFill || isExisting"
-								@click="toggle"
-							/>
-						</template>
-
-						<v-list class="monospace">
-							<v-list-item
-								v-for="item in junctionFields"
-								:key="item.value"
-								:active="relations[1].field === item.value"
-								:disabled="item.disabled"
-								clickable
-								@click="relations[1].field = item.value"
-							>
-								<v-list-item-content>
-									{{ item.text }}
-								</v-list-item-content>
-							</v-list-item>
-						</v-list>
-					</v-menu>
-				</template>
-			</v-input>
-			<v-input v-model="relatedPrimaryKeyField" disabled :placeholder="t('primary_key') + '...'" />
-			<div class="spacer" />
-			<v-checkbox v-model="autoFill" :disabled="isExisting" block :label="t('auto_fill')" />
-			<v-icon class="arrow" name="arrow_forward" />
-			<v-icon class="arrow" name="arrow_backward" />
-		</div>
-
-		<div class="relational-triggers">
-			<v-divider class="field full" large :inline-title="false">{{ t('relational_triggers') }}</v-divider>
-
-			<div class="field">
-				<div class="type-label">
-					{{
-						t('referential_action_field_label_o2m', {
-							collection: junctionCollectionName || '',
-						})
-					}}
-				</div>
-				<v-select
-					v-model="relations[0].meta.one_deselect_action"
-					:placeholder="t('choose_action') + '...'"
-					:items="[
-						{
-							text: t('referential_action_set_null', {
-								collection: junctionCollectionName,
-								field: junctionM2OFieldName,
-							}),
-							value: 'nullify',
-						},
-						{
-							text: t('referential_action_cascade', {
-								collection: junctionCollectionName,
-								field: junctionM2OFieldName,
-							}),
-							value: 'delete',
-						},
-					]"
-				/>
-			</div>
-
-			<div class="field">
-				<div class="type-label">
-					{{
-						t('referential_action_field_label_m2o', {
-							collection: currentCollectionName || 'related',
-						})
-					}}
-				</div>
-				<v-select
-					v-model="relations[0].schema.on_delete"
-					:disabled="relations[0].collection === relations[0].related_collection"
-					:placeholder="t('choose_action') + '...'"
-					:items="[
-						{
-							text: t('referential_action_set_null', { field: junctionM2OFieldName }),
-							value: 'SET NULL',
-						},
-						{
-							text: t('referential_action_set_default', { field: junctionM2OFieldName }),
-							value: 'SET DEFAULT',
-						},
-						{
-							text: t('referential_action_cascade', {
-								collection: junctionCollectionName,
-								field: junctionM2OFieldName,
-							}),
-							value: 'CASCADE',
-						},
-						{
-							text: t('referential_action_no_action'),
-							value: 'NO ACTION',
-						},
-					]"
-				/>
-			</div>
-
-			<div class="field">
-				<div class="type-label">
-					{{
-						t('referential_action_field_label_m2o', {
-							collection: relatedCollectionName || 'related',
-						})
-					}}
-				</div>
-				<v-select
-					v-model="relations[1].schema.on_delete"
-					:disabled="relations[1].collection === relations[1].related_collection"
-					:placeholder="t('choose_action') + '...'"
-					:items="[
-						{
-							text: t('referential_action_set_null', { field: junctionRelatedM2OFieldName }),
-							value: 'SET NULL',
-						},
-						{
-							text: t('referential_action_set_default', { field: junctionRelatedM2OFieldName }),
-							value: 'SET DEFAULT',
-						},
-						{
-							text: t('referential_action_cascade', {
-								collection: relatedCollectionName,
-								field: junctionRelatedM2OFieldName,
-							}),
-							value: 'CASCADE',
-						},
-						{
-							text: t('referential_action_no_action'),
-							value: 'NO ACTION',
-						},
-					]"
-				/>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, computed } from 'vue';
-import { orderBy } from 'lodash';
-import { useCollectionsStore, useFieldsStore } from '@/stores/';
-import { Field } from '@directus/shared/types';
-import formatTitle from '@directus/format-title';
-
-import { state } from '../store';
-
-export default defineComponent({
-	props: {
-		type: {
-			type: String,
-			required: true,
-		},
-		collection: {
-			type: String,
-			required: true,
-		},
-		isExisting: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup() {
-		const { t } = useI18n();
-
-		const collectionsStore = useCollectionsStore();
-		const fieldsStore = useFieldsStore();
-
-		const autoFill = computed({
-			get() {
-				return state.autoFillJunctionRelation;
-			},
-			set(newAuto: boolean) {
-				state.autoFillJunctionRelation = newAuto;
-			},
-		});
-
-		const availableCollections = computed(() => {
-			return orderBy(
-				collectionsStore.collections.filter((collection) => {
-					return collection.collection.startsWith('directus_') === false;
-				}),
-				['collection'],
-				['asc']
-			);
-		});
-
-		/**
-		 * These are the system endpoints that don't have full/regular CRUD operations available.
-		 */
-		const collectionsDenyList = [
-			'directus_activity',
-			'directus_collections',
-			'directus_fields',
-			'directus_migrations',
-			'directus_relations',
-			'directus_revisions',
-			'directus_sessions',
-			'directus_settings',
-		];
-
-		const systemCollections = computed(() => {
-			return orderBy(
-				collectionsStore.collections.filter((collection) => {
-					return collection.collection.startsWith('directus_') === true;
-				}),
-				['collection'],
-				['asc']
-			).filter((collection) => collectionsDenyList.includes(collection.collection) === false);
-		});
-
-		const junctionCollection = computed({
-			get() {
-				return state.relations[0].collection;
-			},
-			set(collection: string | undefined) {
-				state.relations[0].collection = collection;
-				state.relations[1].collection = collection;
-			},
-		});
-
-		const junctionCollectionExists = computed(() => {
-			return junctionCollection.value && collectionsStore.getCollection(junctionCollection.value) !== null;
-		});
-
-		const relatedCollectionExists = computed(() => {
-			return (
-				state.relations[1].related_collection &&
-				collectionsStore.getCollection(state.relations[1].related_collection) !== null
-			);
-		});
-
-		const junctionFields = computed(() => {
-			if (!junctionCollection.value) return [];
-
-			return fieldsStore.getFieldsForCollection(junctionCollection.value).map((field: Field) => ({
-				text: field.field,
-				value: field.field,
-				disabled:
-					state.relations[0].field === field.field ||
-					field.schema?.is_primary_key ||
-					state.relations[1].field === field.field,
-			}));
-		});
-
-		const currentPrimaryKeyField = computed(
-			() => fieldsStore.getPrimaryKeyFieldForCollection(state.relations[0].related_collection).field
-		);
-
-		const relatedPrimaryKeyField = computed(() => {
-			if (!state.relations[1].related_collection) return '';
-
-			if (relatedCollectionExists.value) {
-				return fieldsStore.getPrimaryKeyFieldForCollection(state.relations[1].related_collection).field;
-			}
-
-			return 'id';
-		});
-
-		const currentCollectionName = computed(() => {
-			if (!state.relations[0].related_collection) return null;
-			return (
-				collectionsStore.getCollection(state.relations[0].related_collection)?.name ||
-				formatTitle(state.relations[0].related_collection)
-			);
-		});
-
-		const junctionCollectionName = computed(() => {
-			if (!state.relations[0].collection) return null;
-			return (
-				collectionsStore.getCollection(state.relations[0].collection)?.name ||
-				formatTitle(state.relations[0].collection)
-			);
-		});
-
-		const junctionM2OFieldName = computed(() => {
-			if (!state.relations[0].collection || !state.relations[0].field) return null;
-			return (
-				fieldsStore.getField(state.relations[0].collection, state.relations[0].field)?.name ||
-				formatTitle(state.relations[0].field)
-			);
-		});
-
-		const junctionRelatedM2OFieldName = computed(() => {
-			if (!state.relations[1].collection || !state.relations[1].field) return null;
-			return (
-				fieldsStore.getField(state.relations[1].collection, state.relations[1].field)?.name ||
-				formatTitle(state.relations[1].field)
-			);
-		});
-
-		const relatedCollectionName = computed(() => {
-			if (!state.relations[1].related_collection) return null;
-			return (
-				collectionsStore.getCollection(state.relations[1].related_collection)?.name ||
-				formatTitle(state.relations[1].related_collection)
-			);
-		});
-
-		return {
-			t,
-			relations: state.relations,
-			autoFill,
-			availableCollections,
-			systemCollections,
-			junctionCollection,
-			junctionFields,
-			junctionCollectionExists,
-			relatedCollectionExists,
-			junctionFieldExists,
-			currentPrimaryKeyField,
-			relatedPrimaryKeyField,
-			junctionCollectionName,
-			junctionM2OFieldName,
-			currentCollectionName,
-			junctionRelatedM2OFieldName,
-			relatedCollectionName,
-		};
-
-		function junctionFieldExists(fieldKey: string) {
-			if (!junctionCollection.value) return false;
-			return !!fieldsStore.getField(junctionCollection.value, fieldKey);
-		}
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-@import '@/styles/mixins/form-grid';
-@import '@/styles/mixins/no-wrap';
-
-.grid {
-	--v-select-font-family: var(--family-monospace);
-	--v-input-font-family: var(--family-monospace);
-
-	position: relative;
-	display: grid;
-	grid-template-columns: repeat(3, minmax(0, 1fr));
-	gap: 12px 28px;
-	margin-top: 48px;
-
-	.v-input.matches {
-		--v-input-color: var(--primary);
-	}
-
-	.v-icon.arrow {
-		--v-icon-color: var(--primary);
-
-		position: absolute;
-		transform: translateX(-50%);
-		pointer-events: none;
-
-		&:first-of-type {
-			bottom: 161px;
-			left: 32.5%;
-		}
-
-		&:last-of-type {
-			bottom: 89px;
-			left: 67.4%;
-		}
-	}
-}
-
-.type-label {
-	margin-bottom: 8px;
-
-	@include no-wrap;
-}
-
-.v-divider {
-	margin: 48px 0;
-}
-
-.v-list {
-	--v-list-item-content-font-family: var(--family-monospace);
-}
-
-.v-notice {
-	margin-bottom: 36px;
-}
-
-.relational-triggers {
-	--form-horizontal-gap: 12px;
-	--form-vertical-gap: 24px;
-
-	@include form-grid;
-
-	.v-divider {
-		margin-top: 48px;
-		margin-bottom: 0;
-	}
-}
-</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-actions.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-actions.vue
new file mode 100644
index 0000000000..9821db293d
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-actions.vue
@@ -0,0 +1,31 @@
+<template>
+	<v-button
+		v-tooltip.bottom="t('save')"
+		:disabled="readyToSave === false"
+		:loading="saving"
+		icon
+		rounded
+		@click="$emit('save')"
+	>
+		<v-icon name="check" />
+	</v-button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useFieldDetailStore } from '../store';
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
+export default defineComponent({
+	emits: ['save'],
+	setup() {
+		const fieldDetailStore = useFieldDetailStore();
+		const { saving, readyToSave } = storeToRefs(fieldDetailStore);
+
+		const { t } = useI18n();
+
+		return { saving, t, readyToSave };
+	},
+});
+</script>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/conditions.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-conditions.vue
similarity index 69%
rename from app/src/modules/settings/routes/data-model/field-detail/components/conditions.vue
rename to app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-conditions.vue
index 7ee6a92d47..851182f7ce 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/conditions.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-conditions.vue
@@ -1,38 +1,26 @@
 <template>
 	<div>
-		<interface-list :fields="repeaterFields" template="{{ name }}" :value="value" @input="value = $event" />
+		<interface-list :fields="repeaterFields" template="{{ name }}" :value="conditions" @input="conditions = $event" />
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
-import { Field, Condition, DeepPartial } from '@directus/shared/types';
+import { Field, DeepPartial } from '@directus/shared/types';
 import { useI18n } from 'vue-i18n';
-import { state } from '../store';
-import { get, set } from 'lodash';
+import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store';
+import { storeToRefs } from 'pinia';
 
 export default defineComponent({
-	props: {
-		type: {
-			type: String,
-			required: true,
-		},
-		collection: {
-			type: String,
-			required: true,
-		},
-	},
-	setup(props) {
+	setup() {
 		const { t } = useI18n();
 
-		const value = computed({
-			get() {
-				return get(state, 'fieldData.meta.conditions', []);
-			},
-			set(value: Condition[]) {
-				set(state, 'fieldData.meta.conditions', value);
-			},
-		});
+		const fieldDetailStore = useFieldDetailStore();
+
+		const { field, collection } = storeToRefs(fieldDetailStore);
+
+		const conditions = syncFieldDetailStoreProperty('field.meta.conditions');
+		const interfaceID = computed(() => field.value.meta?.interface);
 
 		const repeaterFields = computed<DeepPartial<Field>[]>(() => [
 			{
@@ -54,7 +42,7 @@ export default defineComponent({
 				meta: {
 					interface: 'system-filter',
 					options: {
-						collectionName: props.collection,
+						collectionName: collection.value,
 					},
 				},
 			},
@@ -101,13 +89,13 @@ export default defineComponent({
 				meta: {
 					interface: 'system-interface-options',
 					options: {
-						interface: state?.fieldData.meta?.interface,
+						interface: interfaceID.value,
 					},
 				},
 			},
 		]);
 
-		return { repeaterFields, value, state };
+		return { repeaterFields, conditions };
 	},
 });
 </script>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/display.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-display.vue
similarity index 55%
rename from app/src/modules/settings/routes/data-model/field-detail/components/display.vue
rename to app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-display.vue
index 00935d2e12..0e87985331 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/display.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-display.vue
@@ -1,70 +1,46 @@
 <template>
 	<div>
-		<v-fancy-select v-model="fieldData.meta.display" class="select" :items="selectItems" />
+		<v-fancy-select v-model="display" class="select" :items="selectItems" />
 
-		<v-notice v-if="fieldData.meta.display && !selectedDisplay" class="not-found" type="danger">
-			{{ t('display_not_found', { display: fieldData.meta.display }) }}
+		<v-notice v-if="display && !selectedDisplay" class="not-found" type="danger">
+			{{ t('display_not_found', { display: display }) }}
 			<div class="spacer" />
-			<button @click="fieldData.meta.display = null">{{ t('reset_display') }}</button>
+			<button @click="display = null">{{ t('reset_display') }}</button>
 		</v-notice>
 
-		<template v-if="fieldData.meta.display && selectedDisplay">
-			<v-notice v-if="!selectedDisplay.options || selectedDisplay.options.length === 0">
-				{{ t('no_options_available') }}
-			</v-notice>
-
-			<v-form
-				v-else-if="Array.isArray(selectedDisplay.options)"
-				v-model="fieldData.meta.display_options"
-				:fields="selectedDisplay.options"
-				primary-key="+"
-			/>
-
-			<component
-				:is="`display-options-${selectedDisplay.id}`"
-				v-else
-				:value="fieldData.meta.display_options"
-				:collection="collection"
-				:field-data="fieldData"
-				:relations="relations"
-				:new-fields="newFields"
-				:new-collections="newCollections"
-				@input="fieldData.meta.display_options = $event"
-			/>
-		</template>
+		<extension-options v-if="display && selectedDisplay" type="display" :extension="display" />
 	</div>
 </template>
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { defineComponent, computed, toRefs } from 'vue';
+import { defineComponent, computed } from 'vue';
 import { getDisplays } from '@/displays';
 import { getInterfaces } from '@/interfaces';
 import { FancySelectItem } from '@/components/v-fancy-select/types';
 import { clone } from 'lodash';
-
-import { state, availableDisplays } from '../store';
 import { InterfaceConfig, DisplayConfig } from '@directus/shared/types';
+import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store';
+import { storeToRefs } from 'pinia';
+import ExtensionOptions from '../shared/extension-options.vue';
 
 export default defineComponent({
-	props: {
-		type: {
-			type: String,
-			required: true,
-		},
-		collection: {
-			type: String,
-			required: true,
-		},
-	},
+	components: { ExtensionOptions },
 	setup() {
 		const { t } = useI18n();
 
+		const fieldDetailStore = useFieldDetailStore();
+
+		const { field, displaysForType } = storeToRefs(fieldDetailStore);
+
+		const interfaceID = computed(() => field.value.meta?.interface);
+		const display = syncFieldDetailStoreProperty('field.meta.display');
+
 		const { displays } = getDisplays();
 		const { interfaces } = getInterfaces();
 
 		const selectedInterface = computed(() => {
-			return interfaces.value.find((inter: InterfaceConfig) => inter.id === state.fieldData.meta?.interface);
+			return interfaces.value.find((inter: InterfaceConfig) => inter.id === interfaceID.value);
 		});
 
 		const selectItems = computed(() => {
@@ -73,7 +49,7 @@ export default defineComponent({
 			recommended.push('raw', 'formatted-value');
 			recommended = [...new Set(recommended)];
 
-			const displayItems: FancySelectItem[] = availableDisplays.value.map((display) => {
+			const displayItems: FancySelectItem[] = displaysForType.value.map((display) => {
 				const item: FancySelectItem = {
 					text: display.name,
 					description: display.description,
@@ -108,12 +84,10 @@ export default defineComponent({
 		});
 
 		const selectedDisplay = computed(() => {
-			return displays.value.find((display: DisplayConfig) => display.id === state.fieldData.meta?.display);
+			return displays.value.find((displayConfig: DisplayConfig) => displayConfig.id === display.value);
 		});
 
-		const { fieldData, relations, newCollections, newFields } = toRefs(state);
-
-		return { t, fieldData, selectItems, selectedDisplay, relations, newCollections, newFields };
+		return { t, selectItems, selectedDisplay, display };
 	},
 });
 </script>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-field.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-field.vue
new file mode 100644
index 0000000000..a3f5d03080
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-field.vue
@@ -0,0 +1,118 @@
+<template>
+	<div class="form">
+		<div class="field half-left">
+			<div class="label type-label">{{ t('readonly') }}</div>
+			<v-checkbox v-model="readonly" :label="t('disabled_editing_value')" block />
+		</div>
+
+		<div class="field half-right">
+			<div class="label type-label">{{ t('hidden') }}</div>
+			<v-checkbox v-model="hidden" :label="t('hidden_on_detail')" block />
+		</div>
+
+		<div class="field half-left">
+			<div class="label type-label">{{ t('required') }}</div>
+			<v-checkbox v-model="required" :label="t('require_value_to_be_set')" block />
+		</div>
+
+		<div v-if="type !== 'group'" class="field full">
+			<div class="label type-label">{{ t('note') }}</div>
+			<v-input v-model="note" :placeholder="t('add_note')" />
+		</div>
+
+		<div class="field full">
+			<div class="label type-label">{{ t('field_name_translations') }}</div>
+
+			<interface-list
+				:template="'[{{ language }}] {{ translation }}'"
+				:fields="[
+					{
+						field: 'language',
+						type: 'string',
+						name: t('language'),
+						meta: {
+							interface: 'system-language',
+							width: 'half',
+							display: 'formatted-value',
+							display_options: {
+								font: 'monospace',
+								color: 'var(--foreground-subdued)',
+							},
+						},
+						schema: {
+							default_value: 'en-US',
+						},
+					},
+					{
+						field: 'translation',
+						type: 'string',
+						name: t('translation'),
+						meta: {
+							interface: 'input',
+							width: 'half',
+							options: {
+								placeholder: t('translation_placeholder'),
+							},
+						},
+					},
+				]"
+				:value="translations"
+				@input="translations = $event"
+			/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { useI18n } from 'vue-i18n';
+import { defineComponent, computed } from 'vue';
+import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store';
+import { storeToRefs } from 'pinia';
+
+export default defineComponent({
+	setup() {
+		const { t } = useI18n();
+
+		const fieldDetailStore = useFieldDetailStore();
+
+		const readonly = syncFieldDetailStoreProperty('field.meta.readonly');
+		const hidden = syncFieldDetailStoreProperty('field.meta.hidden');
+		const required = syncFieldDetailStoreProperty('field.meta.required');
+		const note = syncFieldDetailStoreProperty('field.meta.note');
+		const translations = syncFieldDetailStoreProperty('field.meta.translations');
+
+		const { field } = storeToRefs(fieldDetailStore);
+
+		const type = computed(() => field.value.type);
+
+		return { t, readonly, hidden, required, note, translations, type };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/mixins/form-grid';
+
+.type-title {
+	margin-bottom: 32px;
+}
+
+.form {
+	--form-vertical-gap: 32px;
+	--form-horizontal-gap: 32px;
+
+	@include form-grid;
+}
+
+.monospace {
+	--v-input-font-family: var(--family-monospace);
+}
+
+.required {
+	--v-icon-color: var(--primary);
+}
+
+.v-notice {
+	margin-bottom: 36px;
+}
+</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-interface.vue
similarity index 56%
rename from app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
rename to app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-interface.vue
index edc8dfaecd..09818c72cd 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-interface.vue
@@ -1,68 +1,48 @@
 <template>
 	<div>
-		<v-fancy-select v-model="fieldData.meta.interface" class="select" :items="selectItems" />
+		<v-fancy-select v-model="interfaceID" class="select" :items="selectItems" />
 
-		<v-notice v-if="fieldData.meta.interface && !selectedInterface" class="not-found" type="danger">
-			{{ t('interface_not_found', { interface: fieldData.meta.interface }) }}
+		<v-notice v-if="interfaceID && !selectedInterface" class="not-found" type="danger">
+			{{ t('interface_not_found', { interface: interfaceID }) }}
 			<div class="spacer" />
-			<button @click="fieldData.meta.interface = null">{{ t('reset_interface') }}</button>
+			<button @click="interfaceID = null">{{ t('reset_interface') }}</button>
 		</v-notice>
 
-		<template v-if="fieldData.meta.interface && selectedInterface">
-			<v-notice v-if="!selectedInterface.options || selectedInterface.options.length === 0">
-				{{ t('no_options_available') }}
-			</v-notice>
-
-			<v-form
-				v-else-if="Array.isArray(selectedInterface.options)"
-				v-model="fieldData.meta.options"
-				:fields="selectedInterface.options"
-				primary-key="+"
-			/>
-
-			<component
-				:is="`interface-options-${selectedInterface.id}`"
-				v-else
-				:value="fieldData.meta.options"
-				:collection="collection"
-				:field-data="fieldData"
-				:relations="relations"
-				:new-fields="newFields"
-				:new-collections="newCollections"
-				@input="fieldData.meta.options = $event"
-			/>
-		</template>
+		<extension-options
+			v-if="interfaceID && selectedInterface"
+			type="interface"
+			:extension="interfaceID"
+			show-advanced
+		/>
 	</div>
 </template>
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { defineComponent, computed, toRefs } from 'vue';
+import { defineComponent, computed } from 'vue';
 import { getInterfaces } from '@/interfaces';
 import { FancySelectItem } from '@/components/v-fancy-select/types';
-
-import { state, availableInterfaces } from '../store';
 import { InterfaceConfig } from '@directus/shared/types';
+import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store/';
+import { storeToRefs } from 'pinia';
+import ExtensionOptions from '../shared/extension-options.vue';
 
 export default defineComponent({
-	props: {
-		type: {
-			type: String,
-			required: true,
-		},
-		collection: {
-			type: String,
-			required: true,
-		},
-	},
+	components: { ExtensionOptions },
 	setup() {
 		const { t } = useI18n();
 
+		const fieldDetailStore = useFieldDetailStore();
+
+		const interfaceID = syncFieldDetailStoreProperty('field.meta.interface');
+		const options = syncFieldDetailStoreProperty('field.meta.options');
+
+		const { field, interfacesForType } = storeToRefs(fieldDetailStore);
+		const type = computed(() => field.value.type);
+
 		const { interfaces } = getInterfaces();
 
 		const selectItems = computed(() => {
-			const type: string = state.fieldData?.type || 'alias';
-
 			const recommendedInterfacesPerType: { [type: string]: string[] } = {
 				string: ['input', 'select-dropdown'],
 				text: ['input-rich-text-html'],
@@ -80,9 +60,9 @@ export default defineComponent({
 				csv: ['tags'],
 			};
 
-			const recommended = recommendedInterfacesPerType[type] || [];
+			const recommended = recommendedInterfacesPerType[type.value ?? 'alias'] || [];
 
-			const interfaceItems: FancySelectItem[] = availableInterfaces.value.map((inter) => {
+			const interfaceItems: FancySelectItem[] = interfacesForType.value.map((inter) => {
 				const item: FancySelectItem = {
 					text: inter.name,
 					description: inter.description,
@@ -117,12 +97,10 @@ export default defineComponent({
 		});
 
 		const selectedInterface = computed(() => {
-			return interfaces.value.find((inter: InterfaceConfig) => inter.id === state.fieldData.meta?.interface);
+			return interfaces.value.find((inter: InterfaceConfig) => inter.id === interfaceID.value);
 		});
 
-		const { fieldData, relations, newCollections, newFields } = toRefs(state);
-
-		return { t, fieldData, relations, selectItems, selectedInterface, newCollections, newFields };
+		return { t, selectItems, selectedInterface, interfaceID, options };
 	},
 });
 </script>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2a.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2a.vue
new file mode 100644
index 0000000000..185d3b9f4f
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2a.vue
@@ -0,0 +1,323 @@
+<template>
+	<div>
+		<div class="grid">
+			<div class="field">
+				<div class="type-label">{{ t('this_collection') }}</div>
+				<v-input disabled :model-value="collection" />
+			</div>
+			<div class="field">
+				<div class="type-label">{{ t('junction_collection') }}</div>
+				<related-collection-select
+					v-model="junctionCollection"
+					:disabled="autoGenerateJunctionRelation || isExisting"
+				/>
+			</div>
+
+			<div class="field">
+				<div class="type-label">{{ t('related_collections') }}</div>
+
+				<v-select
+					v-model="oneAllowedCollections"
+					:placeholder="t('collection') + '...'"
+					:items="availableCollections"
+					item-value="collection"
+					item-text="name"
+					item-disabled="meta.singleton"
+					multiple
+					:multiple-preview-threshold="0"
+				/>
+			</div>
+
+			<v-input disabled :model-value="currentPrimaryKey" />
+
+			<related-field-select
+				v-model="junctionFieldCurrent"
+				:collection="junctionCollection"
+				:disabled="autoGenerateJunctionRelation || isExisting"
+			/>
+
+			<div class="related-collections-preview">{{ (oneAllowedCollections ?? []).join(', ') }}</div>
+
+			<div class="spacer" />
+
+			<related-field-select
+				v-model="oneCollectionField"
+				:collection="junctionCollection"
+				:placeholder="t('collection_key') + '...'"
+				:disabled="autoGenerateJunctionRelation || isExisting"
+			/>
+
+			<div class="spacer" />
+
+			<related-field-select v-model="junctionFieldRelated" :disabled="autoGenerateJunctionRelation || isExisting" />
+
+			<v-input disabled :model-value="t('primary_key')" />
+
+			<div class="spacer" />
+			<v-checkbox v-if="!isExisting" v-model="autoGenerateJunctionRelation" block :label="t('auto_fill')" />
+			<v-icon class="arrow" name="arrow_forward" />
+			<v-icon class="arrow" name="arrow_backward" />
+			<v-icon class="arrow" name="arrow_backward" />
+		</div>
+
+		<div class="sort-field">
+			<v-divider large :inline-title="false">{{ t('sort_field') }}</v-divider>
+			<related-field-select v-model="sortField" :collection="junctionCollection" :placeholder="t('add_sort_field')" />
+		</div>
+
+		<div class="relational-triggers">
+			<v-divider class="field full" large :inline-title="false">{{ t('relational_triggers') }}</v-divider>
+
+			<div class="field">
+				<div class="type-label">
+					{{
+						t('referential_action_field_label_m2o', {
+							collection: collection || 'related',
+						})
+					}}
+				</div>
+				<v-select
+					v-model="onDelete"
+					:disabled="collection === junctionCollection"
+					:placeholder="t('choose_action') + '...'"
+					:items="[
+						{
+							text: t('referential_action_set_null', { field: junctionFieldRelated }),
+							value: 'SET NULL',
+						},
+						{
+							text: t('referential_action_set_default', { field: junctionFieldRelated }),
+							value: 'SET DEFAULT',
+						},
+						{
+							text: t('referential_action_cascade', {
+								collection: junctionCollection,
+								field: junctionFieldRelated,
+							}),
+							value: 'CASCADE',
+						},
+						{
+							text: t('referential_action_no_action'),
+							value: 'NO ACTION',
+						},
+					]"
+				/>
+			</div>
+
+			<div class="field">
+				<div class="type-label">
+					{{
+						t('referential_action_field_label_o2m', {
+							collection: junctionCollection || 'related',
+						})
+					}}
+				</div>
+				<v-select
+					v-model="onDeselect"
+					:placeholder="t('choose_action') + '...'"
+					:items="[
+						{
+							text: t('referential_action_set_null', { field: junctionFieldRelated }),
+							value: 'nullify',
+						},
+						{
+							text: t('referential_action_cascade', {
+								collection: (oneAllowedCollections ?? []).join(' / '),
+								field: junctionFieldRelated,
+							}),
+							value: 'delete',
+						},
+					]"
+				/>
+			</div>
+		</div>
+
+		<v-notice v-if="generationInfo.length > 0" class="generated-data" type="warning">
+			<span>
+				{{ t('new_data_alert') }}
+				<ul>
+					<li v-for="(data, index) in generationInfo" :key="index">
+						<span class="field-name">{{ data.name }}</span>
+					</li>
+				</ul>
+			</span>
+		</v-notice>
+	</div>
+</template>
+
+<script lang="ts">
+import { useI18n } from 'vue-i18n';
+import { defineComponent, computed } from 'vue';
+import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store';
+import { storeToRefs } from 'pinia';
+import RelatedCollectionSelect from '../shared/related-collection-select.vue';
+import RelatedFieldSelect from '../shared/related-field-select.vue';
+import { useFieldsStore, useCollectionsStore } from '@/stores';
+import { orderBy } from 'lodash';
+
+export default defineComponent({
+	components: { RelatedCollectionSelect, RelatedFieldSelect },
+	setup() {
+		const { t } = useI18n();
+
+		const fieldDetailStore = useFieldDetailStore();
+		const collectionsStore = useCollectionsStore();
+		const fieldsStore = useFieldsStore();
+
+		const { collection, editing, generationInfo } = storeToRefs(fieldDetailStore);
+
+		const autoGenerateJunctionRelation = syncFieldDetailStoreProperty('autoGenerateJunctionRelation');
+		const junctionCollection = syncFieldDetailStoreProperty('relations.o2m.collection');
+		const junctionFieldCurrent = syncFieldDetailStoreProperty('relations.o2m.field');
+		const junctionFieldRelated = syncFieldDetailStoreProperty('relations.m2o.field');
+		const oneCollectionField = syncFieldDetailStoreProperty('relations.m2o.meta.one_collection_field');
+		const oneAllowedCollections = syncFieldDetailStoreProperty('relations.m2o.meta.one_allowed_collections', []);
+		const sortField = syncFieldDetailStoreProperty('relations.o2m.meta.sort_field');
+		const onDelete = syncFieldDetailStoreProperty('relations.o2m.schema.on_delete');
+		const onDeselect = syncFieldDetailStoreProperty('relations.o2m.meta.one_deselect_action');
+
+		const isExisting = computed(() => editing.value !== '+');
+		const currentPrimaryKey = computed(() => fieldsStore.getPrimaryKeyFieldForCollection(collection.value!)?.field);
+
+		const availableCollections = computed(() => {
+			return orderBy(
+				[
+					...collectionsStore.allCollections,
+					{
+						divider: true,
+					},
+					{
+						name: t('system'),
+						selectable: false,
+						children: collectionsStore.crudSafeSystemCollections,
+					},
+				],
+				['collection'],
+				['asc']
+			);
+		});
+
+		return {
+			t,
+			availableCollections,
+			generationInfo,
+			collection,
+			isExisting,
+			autoGenerateJunctionRelation,
+			junctionCollection,
+			oneAllowedCollections,
+			currentPrimaryKey,
+			junctionFieldCurrent,
+			junctionFieldRelated,
+			oneCollectionField,
+			sortField,
+			onDelete,
+			onDeselect,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/mixins/form-grid';
+
+.grid {
+	--v-select-font-family: var(--family-monospace);
+	--v-input-font-family: var(--family-monospace);
+
+	position: relative;
+	display: grid;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	gap: 12px 28px;
+	margin-top: 48px;
+
+	.v-icon.arrow {
+		--v-icon-color: var(--primary);
+
+		position: absolute;
+		transform: translateX(-50%);
+		pointer-events: none;
+
+		&:first-of-type {
+			top: 117px;
+			left: 32.5%;
+		}
+
+		&:nth-of-type(2) {
+			top: 190px;
+			left: 67.4%;
+		}
+
+		&:last-of-type {
+			top: 261px;
+			left: 67.4%;
+		}
+	}
+}
+
+.v-input.matches {
+	--v-input-color: var(--primary);
+}
+
+.type-label {
+	margin-bottom: 8px;
+}
+
+.v-list {
+	--v-list-item-content-font-family: var(--family-monospace);
+}
+
+.v-notice {
+	margin-bottom: 36px;
+}
+
+.generated-data {
+	margin-top: 36px;
+
+	ul {
+		padding-top: 4px;
+		padding-left: 24px;
+	}
+
+	.field-name {
+		font-family: var(--family-monospace);
+	}
+}
+
+.related-collections-preview {
+	grid-row: 2 / span 2;
+	grid-column: 3;
+	padding: var(--input-padding);
+	overflow: auto;
+	color: var(--foreground-subdued);
+	font-family: var(--family-monospace);
+	background-color: var(--background-subdued);
+	border: var(--border-width) solid var(--border-normal);
+	border-radius: var(--border-radius);
+}
+
+.one-collection-field {
+	align-self: flex-end;
+}
+
+.sort-field {
+	--v-input-font-family: var(--family-monospace);
+
+	.v-divider {
+		margin-top: 48px;
+		margin-bottom: 24px;
+	}
+}
+
+.relational-triggers {
+	--form-horizontal-gap: 12px;
+	--form-vertical-gap: 24px;
+
+	@include form-grid;
+
+	.v-divider {
+		margin-top: 48px;
+		margin-bottom: 0;
+	}
+}
+</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2m.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2m.vue
new file mode 100644
index 0000000000..38a7e71384
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2m.vue
@@ -0,0 +1,405 @@
+<template>
+	<div>
+		<div class="grid">
+			<div class="field">
+				<div class="type-label">{{ t('this_collection') }}</div>
+				<v-input disabled :model-value="collection" />
+			</div>
+
+			<div class="field">
+				<div class="type-label">{{ t('junction_collection') }}</div>
+
+				<related-collection-select
+					v-model="junctionCollection"
+					:disabled="autoGenerateJunctionRelation || isExisting"
+				/>
+			</div>
+
+			<div class="field">
+				<div class="type-label">{{ t('related_collection') }}</div>
+				<related-collection-select v-model="relatedCollection" :disabled="type === 'files' || isExisting" />
+			</div>
+
+			<v-input disabled :model-value="currentPrimaryKey" />
+
+			<related-field-select
+				v-model="junctionFieldCurrent"
+				:collection="junctionCollection"
+				:disabled="autoGenerateJunctionRelation || isExisting"
+			/>
+
+			<div class="spacer" />
+			<div class="spacer" />
+
+			<related-field-select
+				v-model="junctionFieldRelated"
+				:collection="junctionCollection"
+				:disabled="autoGenerateJunctionRelation || isExisting"
+			/>
+
+			<v-input v-model="relatedPrimaryKey" disabled :placeholder="t('primary_key') + '...'" />
+
+			<div class="spacer" />
+
+			<v-checkbox v-if="!isExisting" v-model="autoGenerateJunctionRelation" block :label="t('auto_fill')" />
+
+			<v-icon class="arrow" name="arrow_forward" />
+			<v-icon class="arrow" name="arrow_backward" />
+		</div>
+
+		<v-divider v-if="!isExisting" large :inline-title="false">{{ t('corresponding_field') }}</v-divider>
+
+		<div v-if="!isExisting" class="corresponding">
+			<div class="field">
+				<div class="type-label">{{ t('create_field') }}</div>
+				<v-checkbox v-model="hasCorresponding" block :label="correspondingLabel" />
+			</div>
+			<div class="field">
+				<div class="type-label">{{ t('field_name') }}</div>
+				<v-input
+					v-model="correspondingFieldKey"
+					:disabled="hasCorresponding === false"
+					:placeholder="t('field_name') + '...'"
+					db-safe
+				/>
+			</div>
+			<v-icon name="arrow_forward" class="arrow" />
+		</div>
+
+		<div class="sort-field">
+			<v-divider large :inline-title="false">{{ t('sort_field') }}</v-divider>
+			<related-field-select
+				v-model="sortField"
+				:collection="junctionCollection"
+				:placeholder="t('add_sort_field') + '...'"
+			/>
+		</div>
+
+		<div class="relational-triggers">
+			<v-divider class="field full" large :inline-title="false">{{ t('relational_triggers') }}</v-divider>
+
+			<div class="field">
+				<div class="type-label">
+					{{
+						t('referential_action_field_label_o2m', {
+							collection: junctionCollection || '',
+						})
+					}}
+				</div>
+				<v-select
+					v-model="deselectAction"
+					:placeholder="t('choose_action') + '...'"
+					:items="[
+						{
+							text: t('referential_action_set_null', {
+								collection: junctionCollection,
+								field: junctionFieldCurrent,
+							}),
+							value: 'nullify',
+						},
+						{
+							text: t('referential_action_cascade', {
+								collection: junctionCollection,
+								field: junctionFieldCurrent,
+							}),
+							value: 'delete',
+						},
+					]"
+				/>
+			</div>
+
+			<div class="field">
+				<div class="type-label">
+					{{
+						t('referential_action_field_label_m2o', {
+							collection: collection || 'related',
+						})
+					}}
+				</div>
+				<v-select
+					v-model="onDeleteCurrent"
+					:disabled="junctionCollection === collection"
+					:placeholder="t('choose_action') + '...'"
+					:items="[
+						{
+							text: t('referential_action_set_null', { field: junctionFieldCurrent }),
+							value: 'SET NULL',
+						},
+						{
+							text: t('referential_action_set_default', { field: junctionFieldCurrent }),
+							value: 'SET DEFAULT',
+						},
+						{
+							text: t('referential_action_cascade', {
+								collection: junctionCollection,
+								field: junctionFieldCurrent,
+							}),
+							value: 'CASCADE',
+						},
+						{
+							text: t('referential_action_no_action'),
+							value: 'NO ACTION',
+						},
+					]"
+				/>
+			</div>
+
+			<div class="field">
+				<div class="type-label">
+					{{
+						t('referential_action_field_label_m2o', {
+							collection: relatedCollection || 'related',
+						})
+					}}
+				</div>
+				<v-select
+					v-model="onDeleteRelated"
+					:disabled="junctionCollection === relatedCollection"
+					:placeholder="t('choose_action') + '...'"
+					:items="[
+						{
+							text: t('referential_action_set_null', { field: junctionFieldRelated }),
+							value: 'SET NULL',
+						},
+						{
+							text: t('referential_action_set_default', { field: junctionFieldRelated }),
+							value: 'SET DEFAULT',
+						},
+						{
+							text: t('referential_action_cascade', {
+								collection: junctionCollection,
+								field: junctionFieldRelated,
+							}),
+							value: 'CASCADE',
+						},
+						{
+							text: t('referential_action_no_action'),
+							value: 'NO ACTION',
+						},
+					]"
+				/>
+			</div>
+		</div>
+
+		<v-notice v-if="generationInfo.length > 0" class="generated-data" type="warning">
+			<span>
+				{{ t('new_data_alert') }}
+
+				<ul>
+					<li v-for="(data, index) in generationInfo" :key="index">
+						<span class="field-name">{{ data.name }}</span>
+					</li>
+				</ul>
+			</span>
+		</v-notice>
+	</div>
+</template>
+
+<script lang="ts">
+import { useI18n } from 'vue-i18n';
+import { defineComponent, computed } from 'vue';
+import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store';
+import { storeToRefs } from 'pinia';
+import RelatedCollectionSelect from '../shared/related-collection-select.vue';
+import RelatedFieldSelect from '../shared/related-field-select.vue';
+import { useFieldsStore } from '@/stores';
+
+export default defineComponent({
+	components: { RelatedCollectionSelect, RelatedFieldSelect },
+	setup() {
+		const { t } = useI18n();
+
+		const fieldDetailStore = useFieldDetailStore();
+		const fieldsStore = useFieldsStore();
+
+		const { field, collection, editing, generationInfo } = storeToRefs(fieldDetailStore);
+
+		const sortField = syncFieldDetailStoreProperty('relations.o2m.meta.sort_field');
+		const junctionCollection = syncFieldDetailStoreProperty('relations.o2m.collection');
+		const junctionFieldCurrent = syncFieldDetailStoreProperty('relations.o2m.field');
+		const junctionFieldRelated = syncFieldDetailStoreProperty('relations.m2o.field');
+		const relatedCollection = syncFieldDetailStoreProperty('relations.m2o.related_collection');
+		const autoGenerateJunctionRelation = syncFieldDetailStoreProperty('autoGenerateJunctionRelation');
+		const onDeleteCurrent = syncFieldDetailStoreProperty('relations.o2m.schema.on_delete');
+		const onDeleteRelated = syncFieldDetailStoreProperty('relations.m2o.schema.on_delete');
+		const deselectAction = syncFieldDetailStoreProperty('relations.o2m.meta.one_deselect_action');
+		const correspondingField = syncFieldDetailStoreProperty('fields.corresponding');
+
+		const type = computed(() => field.value.type);
+		const isExisting = computed(() => editing.value !== '+');
+
+		const currentPrimaryKey = computed(() => fieldsStore.getPrimaryKeyFieldForCollection(collection.value!)?.field);
+
+		const relatedPrimaryKey = computed(
+			() => fieldsStore.getPrimaryKeyFieldForCollection(relatedCollection.value)?.field ?? 'id'
+		);
+
+		const hasCorresponding = computed({
+			get() {
+				return !!correspondingField.value;
+			},
+			set(enabled: boolean) {
+				if (enabled) {
+					correspondingField.value = {
+						field: collection.value,
+						collection: relatedCollection.value,
+						type: 'alias',
+						meta: {
+							special: ['m2m'],
+							interface: 'list-m2m',
+						},
+					};
+				} else {
+					correspondingField.value = null;
+				}
+			},
+		});
+
+		const correspondingLabel = computed(() => {
+			if (junctionCollection.value) {
+				return t('add_m2m_to_collection', { collection: relatedCollection.value });
+			}
+
+			return t('add_field_related');
+		});
+
+		const correspondingFieldKey = computed({
+			get() {
+				return correspondingField.value?.field;
+			},
+			set(key: string | undefined) {
+				if (!hasCorresponding.value) {
+					hasCorresponding.value = true;
+				}
+
+				correspondingField.value!.field = key;
+			},
+		});
+
+		return {
+			t,
+			autoGenerateJunctionRelation,
+			collection,
+			type,
+			isExisting,
+			junctionCollection,
+			junctionFieldCurrent,
+			relatedCollection,
+			sortField,
+			currentPrimaryKey,
+			junctionFieldRelated,
+			relatedPrimaryKey,
+			onDeleteCurrent,
+			onDeleteRelated,
+			deselectAction,
+			hasCorresponding,
+			correspondingLabel,
+			correspondingFieldKey,
+			generationInfo,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/mixins/form-grid';
+
+.grid {
+	--v-select-font-family: var(--family-monospace);
+	--v-input-font-family: var(--family-monospace);
+
+	position: relative;
+	display: grid;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	gap: 12px 28px;
+	margin-top: 48px;
+
+	.v-icon.arrow {
+		--v-icon-color: var(--primary);
+
+		position: absolute;
+		transform: translateX(-50%);
+		pointer-events: none;
+
+		&:first-of-type {
+			top: 117px;
+			left: 32.5%;
+		}
+
+		&:last-of-type {
+			top: 190px;
+			left: 67.4%;
+		}
+	}
+}
+
+.v-input.matches {
+	--v-input-color: var(--primary);
+}
+
+.type-label {
+	margin-bottom: 8px;
+}
+
+.v-divider {
+	margin: 48px 0 24px;
+}
+
+.v-list {
+	--v-list-item-content-font-family: var(--family-monospace);
+}
+
+.corresponding {
+	position: relative;
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 12px 32px;
+
+	.arrow {
+		--v-icon-color: var(--primary);
+
+		position: absolute;
+		bottom: 17px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+}
+
+.v-notice {
+	margin-bottom: 36px;
+}
+
+.generated-data {
+	margin-top: 36px;
+
+	ul {
+		padding-top: 4px;
+		padding-left: 24px;
+	}
+
+	.field-name {
+		font-family: var(--family-monospace);
+	}
+}
+
+.sort-field {
+	--v-input-font-family: var(--family-monospace);
+
+	.v-divider {
+		margin-top: 48px;
+		margin-bottom: 24px;
+	}
+}
+
+.relational-triggers {
+	--form-horizontal-gap: 12px;
+	--form-vertical-gap: 24px;
+
+	@include form-grid;
+
+	.v-divider {
+		margin-top: 48px;
+		margin-bottom: 0;
+	}
+}
+</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2o.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2o.vue
new file mode 100644
index 0000000000..4bf7f59238
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2o.vue
@@ -0,0 +1,251 @@
+<template>
+	<div>
+		<div class="grid">
+			<div class="field">
+				<div class="type-label">{{ t('this_collection') }}</div>
+				<v-input disabled :model-value="collection" />
+			</div>
+
+			<div class="field">
+				<div class="type-label">{{ t('related_collection') }}</div>
+
+				<related-collection-select v-model="relatedCollection" :disabled="isExisting" />
+			</div>
+
+			<v-input disabled :model-value="currentField" />
+			<v-input :model-value="relatedPrimaryKey" disabled :placeholder="t('primary_key') + '...'" />
+			<v-icon class="arrow" name="arrow_back" />
+		</div>
+
+		<v-divider v-if="!isExisting" large :inline-title="false">{{ t('corresponding_field') }}</v-divider>
+
+		<div v-if="!isExisting" class="grid">
+			<div class="field">
+				<div class="type-label">{{ t('create_field') }}</div>
+				<v-checkbox v-model="hasCorresponding" block :label="correspondingLabel" />
+			</div>
+			<div class="field">
+				<div class="type-label">{{ t('field_name') }}</div>
+				<v-input
+					v-model="correspondingFieldKey"
+					:disabled="hasCorresponding === false"
+					:placeholder="t('field_name') + '...'"
+					db-safe
+				/>
+			</div>
+			<v-icon name="arrow_forward" class="arrow" />
+		</div>
+
+		<div class="relational-triggers">
+			<v-divider class="field full" large :inline-title="false">{{ t('relational_triggers') }}</v-divider>
+
+			<div class="field">
+				<div class="type-label">
+					{{
+						t('referential_action_field_label_m2o', {
+							collection: relatedCollection || 'related',
+						})
+					}}
+				</div>
+				<v-select
+					v-model="onDeleteRelated"
+					:disabled="collection === relatedCollection"
+					:placeholder="t('choose_action') + '...'"
+					:items="[
+						{
+							text: t('referential_action_set_null', { field: currentField }),
+							value: 'SET NULL',
+						},
+						{
+							text: t('referential_action_set_default', { field: currentField }),
+							value: 'SET DEFAULT',
+						},
+						{
+							text: t('referential_action_cascade', {
+								collection: collection,
+								field: currentField,
+							}),
+							value: 'CASCADE',
+						},
+						{
+							text: t('referential_action_no_action', {
+								field: currentField,
+							}),
+							value: 'NO ACTION',
+						},
+					]"
+				/>
+			</div>
+		</div>
+
+		<v-notice v-if="generationInfo.length > 0" class="generated-data" type="warning">
+			<span>
+				{{ t('new_data_alert') }}
+
+				<ul>
+					<li v-for="(data, index) in generationInfo" :key="index">
+						<span class="field-name">{{ data.name }}</span>
+					</li>
+				</ul>
+			</span>
+		</v-notice>
+	</div>
+</template>
+
+<script lang="ts">
+import { useI18n } from 'vue-i18n';
+import { defineComponent, computed } from 'vue';
+import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store';
+import { storeToRefs } from 'pinia';
+import RelatedCollectionSelect from '../shared/related-collection-select.vue';
+import { useFieldsStore } from '@/stores';
+
+export default defineComponent({
+	components: { RelatedCollectionSelect },
+	setup() {
+		const { t } = useI18n();
+
+		const fieldDetailStore = useFieldDetailStore();
+		const fieldsStore = useFieldsStore();
+
+		const relatedCollection = syncFieldDetailStoreProperty('relations.m2o.related_collection');
+		const correspondingField = syncFieldDetailStoreProperty('fields.corresponding');
+		const onDeleteRelated = syncFieldDetailStoreProperty('relations.m2o.schema.on_delete');
+
+		const { field, collection, editing, generationInfo } = storeToRefs(fieldDetailStore);
+
+		const isExisting = computed(() => editing.value !== '+');
+
+		const relatedPrimaryKey = computed(
+			() => fieldsStore.getPrimaryKeyFieldForCollection(relatedCollection.value)?.field ?? 'id'
+		);
+
+		const currentField = computed(() => field.value.field);
+
+		const hasCorresponding = computed({
+			get() {
+				return !!correspondingField.value;
+			},
+			set(enabled: boolean) {
+				if (enabled) {
+					correspondingField.value = {
+						field: collection.value,
+						collection: relatedCollection.value,
+						type: 'alias',
+						meta: {
+							special: ['o2m'],
+							interface: 'list-o2m',
+						},
+					};
+				} else {
+					correspondingField.value = null;
+				}
+			},
+		});
+
+		const correspondingLabel = computed(() => {
+			if (relatedCollection.value) {
+				return t('add_o2m_to_collection', { collection: relatedCollection.value });
+			}
+
+			return t('add_field_related');
+		});
+
+		const correspondingFieldKey = computed({
+			get() {
+				return correspondingField.value?.field;
+			},
+			set(key: string | undefined) {
+				if (!hasCorresponding.value) {
+					hasCorresponding.value = true;
+				}
+
+				correspondingField.value!.field = key;
+			},
+		});
+
+		return {
+			t,
+			collection,
+			relatedCollection,
+			isExisting,
+			relatedPrimaryKey,
+			currentField,
+			hasCorresponding,
+			correspondingLabel,
+			correspondingFieldKey,
+			generationInfo,
+			onDeleteRelated,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/mixins/form-grid';
+
+.grid {
+	--v-select-font-family: var(--family-monospace);
+	--v-input-font-family: var(--family-monospace);
+
+	position: relative;
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 12px 32px;
+	margin-top: 48px;
+
+	.v-input.matches {
+		--v-input-color: var(--primary);
+	}
+
+	.arrow {
+		--v-icon-color: var(--primary);
+
+		position: absolute;
+		bottom: 17px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+}
+
+.v-list {
+	--v-list-item-content-font-family: var(--family-monospace);
+}
+
+.v-divider {
+	margin: 48px 0;
+}
+
+.type-label {
+	margin-bottom: 8px;
+}
+
+.v-notice {
+	margin-bottom: 36px;
+}
+
+.generated-data {
+	margin-top: 36px;
+
+	ul {
+		padding-top: 4px;
+		padding-left: 24px;
+	}
+
+	.field-name {
+		font-family: var(--family-monospace);
+	}
+}
+
+.relational-triggers {
+	--form-horizontal-gap: 12px;
+	--form-vertical-gap: 24px;
+
+	@include form-grid;
+
+	.v-divider {
+		margin-top: 48px;
+		margin-bottom: 0;
+	}
+}
+</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-o2m.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-o2m.vue
new file mode 100644
index 0000000000..91a2cc5837
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-o2m.vue
@@ -0,0 +1,249 @@
+<template>
+	<div>
+		<div class="grid">
+			<div class="field">
+				<div class="type-label">{{ t('this_collection') }}</div>
+				<v-input disabled :model-value="collection" />
+			</div>
+
+			<div class="field">
+				<div class="type-label">{{ t('related_collection') }}</div>
+				<related-collection-select v-model="relatedCollection" :disabled="isExisting" />
+			</div>
+
+			<v-input disabled :model-value="currentPrimaryKey" />
+
+			<related-field-select v-model="relatedField" :collection="relatedCollection" />
+
+			<v-icon class="arrow" name="arrow_forward" />
+		</div>
+
+		<div class="sort-field">
+			<v-divider large :inline-title="false">{{ t('sort_field') }}</v-divider>
+
+			<related-field-select
+				v-model="sortField"
+				:collection="relatedCollection"
+				:placeholder="t('add_sort_field') + '...'"
+			/>
+		</div>
+
+		<div class="relational-triggers">
+			<v-divider class="field full" large :inline-title="false">{{ t('relational_triggers') }}</v-divider>
+
+			<div class="field">
+				<div class="type-label">
+					{{
+						t('referential_action_field_label_o2m', {
+							collection: relatedCollection || 'related',
+						})
+					}}
+				</div>
+				<v-select
+					v-model="onDeselect"
+					:placeholder="t('choose_action') + '...'"
+					:items="[
+						{
+							text: t('referential_action_set_null', { field: relatedField }),
+							value: 'nullify',
+						},
+						{
+							text: t('referential_action_cascade', {
+								collection: relatedCollection,
+								field: relatedField,
+							}),
+							value: 'delete',
+						},
+					]"
+				/>
+			</div>
+
+			<div class="field">
+				<div class="type-label">
+					{{
+						t('referential_action_field_label_m2o', {
+							collection: collection || 'related',
+						})
+					}}
+				</div>
+				<v-select
+					v-model="onDelete"
+					:disabled="collection === relatedCollection"
+					:placeholder="t('choose_action') + '...'"
+					:items="[
+						{
+							text: t('referential_action_set_null', { field: relatedField }),
+							value: 'SET NULL',
+						},
+						{
+							text: t('referential_action_set_default', { field: relatedField }),
+							value: 'SET DEFAULT',
+						},
+						{
+							text: t('referential_action_cascade', {
+								collection: collection,
+								field: relatedField,
+							}),
+							value: 'CASCADE',
+						},
+						{
+							text: t('referential_action_no_action'),
+							value: 'NO ACTION',
+						},
+					]"
+				/>
+			</div>
+		</div>
+
+		<v-notice v-if="generationInfo.length > 0" class="generated-data" type="warning">
+			<span>
+				{{ t('new_data_alert') }}
+
+				<ul>
+					<li v-for="(data, index) in generationInfo" :key="index">
+						<span class="field-name">{{ data.name }}</span>
+					</li>
+				</ul>
+			</span>
+		</v-notice>
+	</div>
+</template>
+
+<script lang="ts">
+import { useI18n } from 'vue-i18n';
+import { defineComponent, computed } from 'vue';
+import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store';
+import { storeToRefs } from 'pinia';
+import RelatedCollectionSelect from '../shared/related-collection-select.vue';
+import RelatedFieldSelect from '../shared/related-field-select.vue';
+import { useFieldsStore } from '@/stores';
+
+export default defineComponent({
+	components: { RelatedCollectionSelect, RelatedFieldSelect },
+	setup() {
+		const { t } = useI18n();
+
+		const fieldDetailStore = useFieldDetailStore();
+		const fieldsStore = useFieldsStore();
+
+		const relatedCollection = syncFieldDetailStoreProperty('relations.o2m.collection');
+		const relatedField = syncFieldDetailStoreProperty('relations.o2m.field');
+		const sortField = syncFieldDetailStoreProperty('relations.o2m.meta.sort_field');
+		const onDelete = syncFieldDetailStoreProperty('relations.o2m.schema.on_delete');
+		const onDeselect = syncFieldDetailStoreProperty('relations.o2m.meta.one_deselect_action');
+
+		const { collection, editing, generationInfo } = storeToRefs(fieldDetailStore);
+
+		const isExisting = computed(() => editing.value !== '+');
+		const currentPrimaryKey = computed(() => fieldsStore.getPrimaryKeyFieldForCollection(collection.value!)?.field);
+
+		return {
+			t,
+			isExisting,
+			collection,
+			relatedCollection,
+			currentPrimaryKey,
+			relatedField,
+			generationInfo,
+			sortField,
+			onDelete,
+			onDeselect,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/mixins/form-grid';
+
+.grid {
+	--v-select-font-family: var(--family-monospace);
+	--v-input-font-family: var(--family-monospace);
+
+	position: relative;
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 12px 32px;
+	margin-top: 48px;
+
+	.v-icon.arrow {
+		--v-icon-color: var(--primary);
+
+		position: absolute;
+		bottom: 17px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+}
+
+.v-input.matches {
+	--v-input-color: var(--primary);
+}
+
+.v-list {
+	--v-list-item-content-font-family: var(--family-monospace);
+}
+
+.type-label {
+	margin-bottom: 8px;
+}
+
+.v-divider {
+	margin: 48px 0;
+}
+
+.corresponding {
+	position: relative;
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 12px 32px;
+	margin-top: 48px;
+
+	.arrow {
+		--v-icon-color: var(--primary);
+
+		position: absolute;
+		bottom: 17px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+}
+
+.v-notice {
+	margin-bottom: 36px;
+}
+
+.generated-data {
+	margin-top: 36px;
+
+	ul {
+		padding-top: 4px;
+		padding-left: 24px;
+	}
+
+	.field-name {
+		font-family: var(--family-monospace);
+	}
+}
+
+.sort-field {
+	--v-input-font-family: var(--family-monospace);
+
+	.v-divider {
+		margin-top: 48px;
+		margin-bottom: 24px;
+	}
+}
+
+.relational-triggers {
+	--form-horizontal-gap: 12px;
+	--form-vertical-gap: 24px;
+
+	@include form-grid;
+
+	.v-divider {
+		margin-top: 48px;
+		margin-bottom: 0;
+	}
+}
+</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-translations.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-translations.vue
new file mode 100644
index 0000000000..d0794e26ea
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-translations.vue
@@ -0,0 +1,320 @@
+<template>
+	<div>
+		<div class="grid">
+			<div class="field">
+				<div class="type-label">{{ t('this_collection') }}</div>
+				<v-input disabled :model-value="collection" />
+			</div>
+
+			<div class="field">
+				<div class="type-label">{{ t('translations_collection') }}</div>
+				<related-collection-select
+					v-model="junctionCollection"
+					:disabled="autoGenerateJunctionRelation || isExisting"
+				/>
+			</div>
+			<div class="field">
+				<div class="type-label">{{ t('languages_collection') }}</div>
+				<related-collection-select v-model="relatedCollection" :disabled="type === 'files' || isExisting" />
+			</div>
+			<v-input disabled :model-value="currentPrimaryKey" />
+			<related-field-select
+				v-model="junctionFieldCurrent"
+				:collection="junctionCollection"
+				:disabled="autoGenerateJunctionRelation || isExisting"
+			/>
+			<div class="spacer" />
+			<div class="spacer" />
+			<related-field-select
+				v-model="junctionFieldRelated"
+				:collection="junctionCollection"
+				:disabled="autoGenerateJunctionRelation || isExisting"
+			/>
+			<v-input v-model="relatedPrimaryKey" disabled :placeholder="t('primary_key') + '...'" />
+			<div class="spacer" />
+			<v-checkbox v-model="autoGenerateJunctionRelation" :disabled="isExisting" block :label="t('auto_fill')" />
+			<v-icon class="arrow" name="arrow_forward" />
+			<v-icon class="arrow" name="arrow_backward" />
+		</div>
+
+		<div class="relational-triggers">
+			<v-divider class="field full" large :inline-title="false">{{ t('relational_triggers') }}</v-divider>
+
+			<div class="field">
+				<div class="type-label">
+					{{
+						t('referential_action_field_label_o2m', {
+							collection: junctionCollection || '',
+						})
+					}}
+				</div>
+				<v-select
+					v-model="deselectAction"
+					:placeholder="t('choose_action') + '...'"
+					:items="[
+						{
+							text: t('referential_action_set_null', {
+								collection: junctionCollection,
+								field: junctionFieldCurrent,
+							}),
+							value: 'nullify',
+						},
+						{
+							text: t('referential_action_cascade', {
+								collection: junctionCollection,
+								field: junctionFieldCurrent,
+							}),
+							value: 'delete',
+						},
+					]"
+				/>
+			</div>
+
+			<div class="field">
+				<div class="type-label">
+					{{
+						t('referential_action_field_label_m2o', {
+							collection: collection || 'related',
+						})
+					}}
+				</div>
+				<v-select
+					v-model="onDeleteCurrent"
+					:disabled="junctionCollection === collection"
+					:placeholder="t('choose_action') + '...'"
+					:items="[
+						{
+							text: t('referential_action_set_null', { field: junctionFieldCurrent }),
+							value: 'SET NULL',
+						},
+						{
+							text: t('referential_action_set_default', { field: junctionFieldCurrent }),
+							value: 'SET DEFAULT',
+						},
+						{
+							text: t('referential_action_cascade', {
+								collection: junctionCollection,
+								field: junctionFieldCurrent,
+							}),
+							value: 'CASCADE',
+						},
+						{
+							text: t('referential_action_no_action'),
+							value: 'NO ACTION',
+						},
+					]"
+				/>
+			</div>
+
+			<div class="field">
+				<div class="type-label">
+					{{
+						t('referential_action_field_label_m2o', {
+							collection: relatedCollection || 'related',
+						})
+					}}
+				</div>
+				<v-select
+					v-model="onDeleteRelated"
+					:disabled="junctionCollection === relatedCollection"
+					:placeholder="t('choose_action') + '...'"
+					:items="[
+						{
+							text: t('referential_action_set_null', { field: junctionFieldRelated }),
+							value: 'SET NULL',
+						},
+						{
+							text: t('referential_action_set_default', { field: junctionFieldRelated }),
+							value: 'SET DEFAULT',
+						},
+						{
+							text: t('referential_action_cascade', {
+								collection: junctionCollection,
+								field: junctionFieldRelated,
+							}),
+							value: 'CASCADE',
+						},
+						{
+							text: t('referential_action_no_action'),
+							value: 'NO ACTION',
+						},
+					]"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { useI18n } from 'vue-i18n';
+import { defineComponent, computed } from 'vue';
+import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store';
+import { storeToRefs } from 'pinia';
+import RelatedCollectionSelect from '../shared/related-collection-select.vue';
+import RelatedFieldSelect from '../shared/related-field-select.vue';
+import { useFieldsStore } from '@/stores';
+
+export default defineComponent({
+	components: { RelatedCollectionSelect, RelatedFieldSelect },
+	setup() {
+		const { t } = useI18n();
+
+		const fieldDetailStore = useFieldDetailStore();
+		const fieldsStore = useFieldsStore();
+
+		const { field, collection, editing, generationInfo } = storeToRefs(fieldDetailStore);
+
+		const sortField = syncFieldDetailStoreProperty('relations.o2m.meta.sort_field');
+		const junctionCollection = syncFieldDetailStoreProperty('relations.o2m.collection');
+		const junctionFieldCurrent = syncFieldDetailStoreProperty('relations.o2m.field');
+		const junctionFieldRelated = syncFieldDetailStoreProperty('relations.m2o.field');
+		const relatedCollection = syncFieldDetailStoreProperty('relations.m2o.related_collection');
+		const autoGenerateJunctionRelation = syncFieldDetailStoreProperty('autoGenerateJunctionRelation');
+		const onDeleteCurrent = syncFieldDetailStoreProperty('relations.o2m.schema.on_delete');
+		const onDeleteRelated = syncFieldDetailStoreProperty('relations.m2o.schema.on_delete');
+		const deselectAction = syncFieldDetailStoreProperty('relations.o2m.meta.one_deselect_action');
+		const correspondingField = syncFieldDetailStoreProperty('fields.corresponding');
+
+		const type = computed(() => field.value.type);
+		const isExisting = computed(() => editing.value !== '+');
+
+		const currentPrimaryKey = computed(() => fieldsStore.getPrimaryKeyFieldForCollection(collection.value!)?.field);
+
+		const relatedPrimaryKey = computed(
+			() => fieldsStore.getPrimaryKeyFieldForCollection(relatedCollection.value)?.field ?? 'id'
+		);
+
+		const hasCorresponding = computed({
+			get() {
+				return !!correspondingField.value;
+			},
+			set(enabled: boolean) {
+				if (enabled) {
+					correspondingField.value = {
+						field: collection.value,
+						collection: relatedCollection.value,
+						type: 'alias',
+						meta: {
+							special: ['m2m'],
+							interface: 'list-m2m',
+						},
+					};
+				} else {
+					correspondingField.value = null;
+				}
+			},
+		});
+
+		const correspondingLabel = computed(() => {
+			if (junctionCollection.value) {
+				return t('add_m2m_to_collection', { collection: relatedCollection.value });
+			}
+
+			return t('add_field_related');
+		});
+
+		const correspondingFieldKey = computed({
+			get() {
+				return correspondingField.value?.field;
+			},
+			set(key: string | undefined) {
+				if (!hasCorresponding.value) {
+					hasCorresponding.value = true;
+				}
+
+				correspondingField.value!.field = key;
+			},
+		});
+
+		return {
+			t,
+			autoGenerateJunctionRelation,
+			collection,
+			type,
+			isExisting,
+			junctionCollection,
+			junctionFieldCurrent,
+			relatedCollection,
+			sortField,
+			currentPrimaryKey,
+			junctionFieldRelated,
+			relatedPrimaryKey,
+			onDeleteCurrent,
+			onDeleteRelated,
+			deselectAction,
+			hasCorresponding,
+			correspondingLabel,
+			correspondingFieldKey,
+			generationInfo,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/mixins/form-grid';
+@import '@/styles/mixins/no-wrap';
+
+.grid {
+	--v-select-font-family: var(--family-monospace);
+	--v-input-font-family: var(--family-monospace);
+
+	position: relative;
+	display: grid;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	gap: 12px 28px;
+	margin-top: 48px;
+
+	.v-input.matches {
+		--v-input-color: var(--primary);
+	}
+
+	.v-icon.arrow {
+		--v-icon-color: var(--primary);
+
+		position: absolute;
+		transform: translateX(-50%);
+		pointer-events: none;
+
+		&:first-of-type {
+			bottom: 161px;
+			left: 32.5%;
+		}
+
+		&:last-of-type {
+			bottom: 89px;
+			left: 67.4%;
+		}
+	}
+}
+
+.type-label {
+	margin-bottom: 8px;
+
+	@include no-wrap;
+}
+
+.v-divider {
+	margin: 48px 0;
+}
+
+.v-list {
+	--v-list-item-content-font-family: var(--family-monospace);
+}
+
+.v-notice {
+	margin-bottom: 36px;
+}
+
+.relational-triggers {
+	--form-horizontal-gap: 12px;
+	--form-vertical-gap: 24px;
+
+	@include form-grid;
+
+	.v-divider {
+		margin-top: 48px;
+		margin-bottom: 0;
+	}
+}
+</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship.vue
new file mode 100644
index 0000000000..bcf3cd1710
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship.vue
@@ -0,0 +1,37 @@
+<template>
+	<relationship-m2o v-if="localType === 'm2o' || localType === 'file'" />
+	<relationship-o2m v-else-if="localType === 'o2m'" />
+	<relationship-m2m v-else-if="localType === 'm2m' || localType === 'files'" />
+	<relationship-m2a v-else-if="localType === 'm2a'" />
+	<relationship-translations v-else-if="localType === 'translations'" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import RelationshipM2o from './field-detail-advanced-relationship-m2o.vue';
+import RelationshipO2m from './field-detail-advanced-relationship-o2m.vue';
+import RelationshipM2m from './field-detail-advanced-relationship-m2m.vue';
+import RelationshipM2a from './field-detail-advanced-relationship-m2a.vue';
+import RelationshipTranslations from './field-detail-advanced-relationship-translations.vue';
+
+import { storeToRefs } from 'pinia';
+import { useFieldDetailStore } from '../store';
+
+export default defineComponent({
+	components: {
+		RelationshipM2o,
+		RelationshipO2m,
+		RelationshipM2m,
+		RelationshipM2a,
+		RelationshipTranslations,
+	},
+	setup() {
+		const fieldDetailStore = useFieldDetailStore();
+
+		const { collection, localType } = storeToRefs(fieldDetailStore);
+
+		return { collection, localType };
+	},
+});
+</script>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-schema.vue
similarity index 65%
rename from app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
rename to app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-schema.vue
index 9c920062b7..e0fcf4bccc 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-schema.vue
@@ -6,8 +6,9 @@
 					{{ t('key') }}
 					<v-icon class="required" sup name="star" />
 				</div>
+
 				<v-input
-					v-model="fieldData.field"
+					v-model="field"
 					:disabled="isExisting"
 					autofocus
 					class="monospace"
@@ -15,6 +16,7 @@
 					db-safe
 					:placeholder="t('a_unique_column_name')"
 				/>
+
 				<small class="note">{{ t('schema_setup_key') }}</small>
 			</div>
 
@@ -23,23 +25,23 @@
 					{{ t('type') }}
 					<v-icon class="required" sup name="star" />
 				</div>
-				<v-input v-if="!fieldData.schema" :model-value="t('alias')" disabled />
+				<v-input v-if="isAlias" :model-value="t('alias')" disabled />
 				<v-select
 					v-else
+					v-model="type"
 					:disabled="typeDisabled || isExisting"
-					:model-value="fieldData.type"
 					:items="typesWithLabels"
 					:placeholder="typePlaceholder"
-					@update:model-value="fieldData.type = $event"
 				/>
 			</div>
 
-			<template v-if="fieldData.type == 'geometry'">
-				<template v-if="fieldData.schema">
+			<template v-if="type == 'geometry'">
+				<template v-if="!isAlias">
 					<div class="field half-right">
 						<div class="label type-label">{{ t('interfaces.map.geometry_type') }}</div>
+
 						<v-select
-							v-model="fieldData.schema.geometry_type"
+							v-model="geometryType"
 							:show-deselect="true"
 							:placeholder="t('any')"
 							:disabled="isExisting"
@@ -49,24 +51,24 @@
 				</template>
 			</template>
 
-			<template v-else-if="['decimal', 'float'].includes(fieldData.type) === false">
-				<div v-if="fieldData.schema" class="field half">
+			<template v-else-if="['decimal', 'float'].includes(type) === false">
+				<div v-if="!isAlias" class="field half">
 					<div class="label type-label">{{ t('length') }}</div>
 					<v-input
-						v-model="fieldData.schema.max_length"
+						v-model="maxLength"
 						type="number"
-						:placeholder="fieldData.type !== 'string' ? t('not_available_for_type') : '255'"
-						:disabled="isExisting || fieldData.type !== 'string'"
+						:placeholder="type !== 'string' ? t('not_available_for_type') : '255'"
+						:disabled="isExisting || type !== 'string'"
 					/>
 				</div>
 			</template>
 
 			<template v-else>
-				<div v-if="fieldData.schema" class="field half">
+				<div v-if="!isAlias" class="field half">
 					<div class="label type-label">{{ t('precision_scale') }}</div>
 					<div class="precision-scale">
-						<v-input v-model="fieldData.schema.numeric_precision" type="number" :placeholder="10" />
-						<v-input v-model="fieldData.schema.numeric_scale" type="number" :placeholder="5" />
+						<v-input v-model="numericPrecision" type="number" :placeholder="10" />
+						<v-input v-model="numericScale" type="number" :placeholder="5" />
 					</div>
 				</div>
 			</template>
@@ -83,47 +85,27 @@
 				</div>
 			</template>
 
-			<!-- @TODO see https://github.com/directus/directus/issues/639
-
-			<div class="field half-left" v-if="fieldData.schema">
-				<div class="label type-label">{{ t('unique') }}</div>
-				<v-checkbox
-					:label="t('value_unique')"
-					:model-value="fieldData.schema.is_unique === false"
-					@update:model-value="fieldData.schema.is_unique = !$event"
-					block
-				/>
-			</div> -->
-
-			<div v-if="fieldData.schema && fieldData.schema.is_primary_key !== true" class="field full">
+			<div v-if="!isAlias && !isPrimaryKey" class="field full">
 				<div class="label type-label">{{ t('default_value') }}</div>
+
+				<v-input v-if="['string', 'uuid'].includes(type)" v-model="defaultValue" class="monospace" placeholder="NULL" />
+
+				<v-textarea v-else-if="['text'].includes(type)" v-model="defaultValue" class="monospace" placeholder="NULL" />
 				<v-input
-					v-if="['string', 'uuid'].includes(fieldData.type)"
-					v-model="defaultValue"
-					class="monospace"
-					placeholder="NULL"
-				/>
-				<v-textarea
-					v-else-if="['text'].includes(fieldData.type)"
-					v-model="defaultValue"
-					class="monospace"
-					placeholder="NULL"
-				/>
-				<v-input
-					v-else-if="['integer', 'bigInteger', 'float', 'decimal'].includes(fieldData.type)"
+					v-else-if="['integer', 'bigInteger', 'float', 'decimal'].includes(type)"
 					v-model="defaultValue"
 					type="number"
 					class="monospace"
 					placeholder="NULL"
 				/>
 				<v-input
-					v-else-if="['timestamp', 'dateTime', 'date', 'time'].includes(fieldData.type)"
+					v-else-if="['timestamp', 'dateTime', 'date', 'time'].includes(type)"
 					v-model="defaultValue"
 					class="monospace"
 					placeholder="NULL"
 				/>
 				<v-select
-					v-else-if="fieldData.type === 'boolean'"
+					v-else-if="type === 'boolean'"
 					v-model="defaultValue"
 					class="monospace"
 					:items="[
@@ -142,7 +124,7 @@
 					]"
 				/>
 				<interface-input-code
-					v-else-if="fieldData.type === 'json'"
+					v-else-if="type === 'json'"
 					:value="defaultValue || ''"
 					language="JSON"
 					placeholder="NULL"
@@ -152,24 +134,14 @@
 				<v-input v-else v-model="defaultValue" class="monospace" disabled placeholder="NULL" />
 			</div>
 
-			<div v-if="fieldData.schema" class="field half-left">
+			<div v-if="!isAlias" class="field half-left">
 				<div class="label type-label">{{ t('nullable') }}</div>
-				<v-checkbox
-					:model-value="fieldData.schema.is_nullable"
-					:label="t('allow_null_value')"
-					block
-					@update:model-value="fieldData.schema.is_nullable = $event"
-				/>
+				<v-checkbox v-model="nullable" :label="t('allow_null_value')" block />
 			</div>
 
-			<div v-if="fieldData.schema" class="field half-right">
+			<div v-if="!isAlias" class="field half-right">
 				<div class="label type-label">{{ t('unique') }}</div>
-				<v-checkbox
-					:model-value="fieldData.schema.is_unique"
-					:label="t('value_unique')"
-					block
-					@update:model-value="fieldData.schema.is_unique = $event"
-				/>
+				<v-checkbox v-model="unique" :label="t('value_unique')" block />
 			</div>
 		</div>
 	</div>
@@ -178,12 +150,12 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed } from 'vue';
-import { state } from '../store';
 import { GEOMETRY_TYPES } from '@directus/shared/constants';
 import { translate } from '@/utils/translate-object-values';
-
 import { Type } from '@directus/shared/types';
 import { TranslateResult } from 'vue-i18n';
+import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store';
+import { storeToRefs } from 'pinia';
 
 export const fieldTypes: Array<{ value: Type; text: TranslateResult | string } | { divider: true }> = [
 	{
@@ -258,57 +230,57 @@ export const fieldTypes: Array<{ value: Type; text: TranslateResult | string } |
 ];
 
 export default defineComponent({
-	props: {
-		isExisting: {
-			type: Boolean,
-			required: true,
-		},
-		type: {
-			type: String,
-			required: true,
-		},
-	},
-	setup(props) {
+	setup() {
+		const fieldDetailStore = useFieldDetailStore();
+
+		const { localType, relations, editing } = storeToRefs(fieldDetailStore);
+
+		const isExisting = computed(() => editing.value !== '+');
+
+		const type = syncFieldDetailStoreProperty('field.type');
+		const defaultValue = syncFieldDetailStoreProperty('field.schema.default_value');
+		const field = syncFieldDetailStoreProperty('field.field');
+		const special = syncFieldDetailStoreProperty('field.meta.special');
+		const geometryType = syncFieldDetailStoreProperty('field.schema.geometry_type');
+		const maxLength = syncFieldDetailStoreProperty('field.schema.max_length');
+		const numericPrecision = syncFieldDetailStoreProperty('field.schema.numeric_precision');
+		const nullable = syncFieldDetailStoreProperty('field.schema.is_nullable');
+		const unique = syncFieldDetailStoreProperty('field.schema.unique');
+		const numericScale = syncFieldDetailStoreProperty('field.schema.numeric_scale');
+
 		const { t } = useI18n();
 
 		const typesWithLabels = computed(() => translate(fieldTypes));
 
 		const typeDisabled = computed(() => {
-			return ['file', 'files', 'o2m', 'm2m', 'm2a', 'm2o', 'translations'].includes(props.type);
+			return ['file', 'files', 'o2m', 'm2m', 'm2a', 'm2o', 'translations'].includes(localType.value);
 		});
 
 		const typePlaceholder = computed(() => {
-			if (props.type === 'm2o') {
+			if (localType.value === 'm2o') {
 				return t('determined_by_relationship');
 			}
 
 			return t('choose_a_type');
 		});
 
-		const defaultValue = computed({
-			get() {
-				return state.fieldData.schema?.default_value;
-			},
-			set(newVal: any) {
-				state.fieldData.schema = {
-					...(state.fieldData.schema || {}),
-					default_value: newVal,
-				};
-			},
-		});
-
 		const { onCreateOptions, onCreateValue } = useOnCreate();
 		const { onUpdateOptions, onUpdateValue } = useOnUpdate();
 
 		const hasCreateUpdateTriggers = computed(() => {
-			return (
-				['uuid', 'date', 'time', 'dateTime', 'timestamp'].includes(state.fieldData.type || '') && props.type !== 'file'
-			);
+			return ['uuid', 'date', 'time', 'dateTime', 'timestamp'].includes(type.value) && localType.value !== 'file';
+		});
+
+		const isAlias = computed(() => {
+			return !fieldDetailStore.field.schema;
+		});
+
+		const isPrimaryKey = computed(() => {
+			return fieldDetailStore.field.schema?.is_primary_key === true;
 		});
 
 		return {
 			t,
-			fieldData: state.fieldData,
 			typesWithLabels,
 			GEOMETRY_TYPES,
 			typeDisabled,
@@ -319,13 +291,25 @@ export default defineComponent({
 			onUpdateOptions,
 			onUpdateValue,
 			hasCreateUpdateTriggers,
+			field,
+			isAlias,
+			type,
+			geometryType,
+			maxLength,
+			numericPrecision,
+			numericScale,
+			special,
+			nullable,
+			unique,
+			isPrimaryKey,
+			isExisting,
 		};
 
 		function useOnCreate() {
 			const onCreateSpecials = ['uuid', 'user-created', 'role-created', 'date-created'];
 
 			const onCreateOptions = computed(() => {
-				if (state.fieldData.type === 'uuid') {
+				if (type.value === 'uuid') {
 					const options = [
 						{
 							text: t('do_nothing'),
@@ -345,16 +329,16 @@ export default defineComponent({
 						},
 					];
 
-					if (props.type === 'm2o' && state.relations[0]?.related_collection === 'directus_users') {
+					if (localType.value === 'm2o' && relations.value.m2o?.related_collection === 'directus_users') {
 						return options.filter(({ value }) => [null, 'user-created'].includes(value));
 					}
 
-					if (props.type === 'm2o' && state.relations[0]?.related_collection === 'directus_roles') {
+					if (localType.value === 'm2o' && relations.value.m2o?.related_collection === 'directus_roles') {
 						return options.filter(({ value }) => [null, 'role-created'].includes(value));
 					}
 
 					return options;
-				} else if (['date', 'time', 'dateTime', 'timestamp'].includes(state.fieldData.type!)) {
+				} else if (['date', 'time', 'dateTime', 'timestamp'].includes(type.value!)) {
 					return [
 						{
 							text: t('do_nothing'),
@@ -366,13 +350,12 @@ export default defineComponent({
 						},
 					];
 				}
-
 				return [];
 			});
 
 			const onCreateValue = computed({
 				get() {
-					const specials = state.fieldData.meta?.special || [];
+					const specials = special.value ?? [];
 
 					for (const special of onCreateSpecials) {
 						if (specials.includes(special)) {
@@ -383,15 +366,12 @@ export default defineComponent({
 					return null;
 				},
 				set(newOption: string | null) {
-					state.fieldData.meta = {
-						...(state.fieldData.meta || {}),
-						special: (state.fieldData.meta?.special || []).filter(
-							(special: string) => onCreateSpecials.includes(special) === false
-						),
-					};
+					special.value = (special.value ?? []).filter(
+						(special: string) => onCreateSpecials.includes(special) === false
+					);
 
 					if (newOption) {
-						state.fieldData.meta.special = [...(state.fieldData.meta.special || []), newOption];
+						special.value = [...(special.value ?? []), newOption];
 					}
 				},
 			});
@@ -403,7 +383,7 @@ export default defineComponent({
 			const onUpdateSpecials = ['user-updated', 'role-updated', 'date-updated'];
 
 			const onUpdateOptions = computed(() => {
-				if (state.fieldData.type === 'uuid') {
+				if (type.value === 'uuid') {
 					const options = [
 						{
 							text: t('do_nothing'),
@@ -419,16 +399,16 @@ export default defineComponent({
 						},
 					];
 
-					if (props.type === 'm2o' && state.relations[0]?.related_collection === 'directus_users') {
+					if (localType.value === 'm2o' && relations.value.m2o?.related_collection === 'directus_users') {
 						return options.filter(({ value }) => [null, 'user-updated'].includes(value));
 					}
 
-					if (props.type === 'm2o' && state.relations[0]?.related_collection === 'directus_roles') {
+					if (localType.value === 'm2o' && relations.value.m2o?.related_collection === 'directus_roles') {
 						return options.filter(({ value }) => [null, 'role-updated'].includes(value));
 					}
 
 					return options;
-				} else if (['date', 'time', 'dateTime', 'timestamp'].includes(state.fieldData.type!)) {
+				} else if (['date', 'time', 'dateTime', 'timestamp'].includes(type.value!)) {
 					return [
 						{
 							text: t('do_nothing'),
@@ -446,7 +426,7 @@ export default defineComponent({
 
 			const onUpdateValue = computed({
 				get() {
-					const specials = state.fieldData.meta?.special || [];
+					const specials = special.value ?? [];
 
 					for (const special of onUpdateSpecials) {
 						if (specials.includes(special)) {
@@ -457,15 +437,12 @@ export default defineComponent({
 					return null;
 				},
 				set(newOption: string | null) {
-					state.fieldData.meta = {
-						...(state.fieldData.meta || {}),
-						special: (state.fieldData.meta?.special || []).filter(
-							(special: string) => onUpdateSpecials.includes(special) === false
-						),
-					};
+					special.value = (special.value ?? []).filter(
+						(special: string) => onUpdateSpecials.includes(special) === false
+					);
 
 					if (newOption) {
-						state.fieldData.meta.special = [...(state.fieldData.meta.special || []), newOption];
+						special.value = [...(special.value ?? []), newOption];
 					}
 				},
 			});
@@ -482,7 +459,6 @@ export default defineComponent({
 .form {
 	--form-vertical-gap: 32px;
 	--form-horizontal-gap: 32px;
-
 	@include form-grid;
 }
 
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-tabs.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-tabs.vue
new file mode 100644
index 0000000000..bca1c6a71f
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-tabs.vue
@@ -0,0 +1,87 @@
+<template>
+	<v-tabs v-model="currentTabSync" vertical>
+		<v-tab v-for="tab in tabs" :key="tab.value" :value="tab.value" :disabled="tab.disabled">
+			{{ tab.text }}
+		</v-tab>
+	</v-tabs>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useSync } from '@directus/shared/composables';
+import { useFieldDetailStore } from '../store';
+import { storeToRefs } from 'pinia';
+
+export default defineComponent({
+	props: {
+		currentTab: {
+			type: Array as PropType<string[]>,
+			required: true,
+		},
+	},
+	emits: ['update:currentTab'],
+	setup(props, { emit }) {
+		const fieldDetail = useFieldDetailStore();
+
+		const { localType } = storeToRefs(fieldDetail);
+
+		const currentTabSync = useSync(props, 'currentTab', emit);
+
+		const { t } = useI18n();
+
+		const tabs = computed(() => {
+			const tabs = [
+				{
+					text: t('schema'),
+					value: 'schema',
+				},
+				{
+					text: t('field', 1),
+					value: 'field',
+				},
+				{
+					text: t('interface_label'),
+					value: 'interface',
+				},
+			];
+
+			if (localType.value !== 'presentation' && localType.value !== 'group') {
+				tabs.push({
+					text: t('display'),
+					value: 'display',
+				});
+			}
+
+			if (['o2m', 'm2o', 'm2m', 'm2a', 'files'].includes(localType.value)) {
+				tabs.splice(1, 0, {
+					text: t('relationship'),
+					value: 'relationship',
+				});
+			}
+
+			if (localType.value === 'translations') {
+				tabs.splice(
+					1,
+					0,
+					...[
+						{
+							text: t('translations'),
+							value: 'relationship',
+						},
+					]
+				);
+			}
+
+			tabs.push({
+				text: t('conditions'),
+				value: 'conditions',
+			});
+
+			return tabs;
+		});
+
+		return { tabs, currentTabSync };
+	},
+});
+</script>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced.vue
new file mode 100644
index 0000000000..e2ee76b521
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced.vue
@@ -0,0 +1,45 @@
+<template>
+	<div class="content">
+		<field-detail-advanced-schema v-if="currentTab === 'schema'" />
+		<field-detail-advanced-relationship v-if="currentTab === 'relationship'" />
+		<field-detail-advanced-field v-if="currentTab === 'field'" />
+		<field-detail-advanced-interface v-if="currentTab === 'interface'" />
+		<field-detail-advanced-display v-if="currentTab === 'display'" />
+		<field-detail-advanced-conditions v-if="currentTab === 'conditions'" />
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import FieldDetailAdvancedSchema from './field-detail-advanced-schema.vue';
+import FieldDetailAdvancedRelationship from './field-detail-advanced-relationship.vue';
+import FieldDetailAdvancedField from './field-detail-advanced-field.vue';
+import FieldDetailAdvancedInterface from './field-detail-advanced-interface.vue';
+import FieldDetailAdvancedDisplay from './field-detail-advanced-display.vue';
+import FieldDetailAdvancedConditions from './field-detail-advanced-conditions.vue';
+
+export default defineComponent({
+	components: {
+		FieldDetailAdvancedSchema,
+		FieldDetailAdvancedRelationship,
+		FieldDetailAdvancedField,
+		FieldDetailAdvancedInterface,
+		FieldDetailAdvancedDisplay,
+		FieldDetailAdvancedConditions,
+	},
+	props: {
+		currentTab: {
+			type: String,
+			required: true,
+		},
+	},
+});
+</script>
+
+<style scoped>
+.content {
+	padding: var(--content-padding);
+	padding-top: 0;
+	padding-bottom: var(--content-padding-bottom);
+}
+</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-configuration.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-configuration.vue
new file mode 100644
index 0000000000..c70bffd66d
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-configuration.vue
@@ -0,0 +1,180 @@
+<template>
+	<div class="field-configuration" :style="{ 'grid-row': row }">
+		<div class="setup">
+			<div class="schema">
+				<div class="field half-left">
+					<div class="label type-label">
+						{{ t('key') }}
+						<v-icon v-tooltip="t('required')" class="required-mark" sup name="star" />
+					</div>
+
+					<v-input v-model="key" autofocus class="monospace" db-safe :placeholder="t('a_unique_column_name')" />
+				</div>
+
+				<div class="field half-right">
+					<div class="label type-label">
+						{{ t('type') }}
+					</div>
+
+					<v-select v-model="type" :items="typeOptions" :disabled="typeOptions.length === 1" />
+				</div>
+
+				<div class="field half-left">
+					<div class="label type-label">
+						{{ t('default_value') }}
+					</div>
+
+					<v-checkbox v-if="type === 'boolean'" v-model="defaultValue" block :label="t('enabled')" />
+					<v-input v-else v-model="defaultValue" class="monospace" placeholder="NULL" />
+				</div>
+
+				<div class="field half-right">
+					<div class="label type-label">
+						{{ t('required') }}
+					</div>
+
+					<v-checkbox v-model="required" block :label="t('require_value_to_be_set')" />
+				</div>
+			</div>
+
+			<relationship-configuration :local-type="localType" />
+
+			<v-divider inline />
+
+			<extension-options type="interface" :extension="chosenInterface" />
+
+			<v-button class="save" full-width :disabled="!readyToSave" :loading="saving" @click="$emit('save')">
+				{{ t('save') }}
+			</v-button>
+
+			<button class="toggle-advanced" @click="$emit('toggleAdvanced')">
+				{{ t('continue_in_advanced_field_creation_mode') }}
+			</button>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+import { getInterfaces } from '@/interfaces';
+import { useI18n } from 'vue-i18n';
+import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store/';
+import { storeToRefs } from 'pinia';
+import ExtensionOptions from '../shared/extension-options.vue';
+import RelationshipConfiguration from './relationship-configuration.vue';
+
+export default defineComponent({
+	components: { ExtensionOptions, RelationshipConfiguration },
+	props: {
+		row: {
+			type: Number,
+			default: null,
+		},
+		chosenInterface: {
+			type: String,
+			required: true,
+		},
+	},
+	emits: ['save', 'toggleAdvanced'],
+	setup(props) {
+		const fieldDetail = useFieldDetailStore();
+
+		const { readyToSave, saving, localType, collection } = storeToRefs(fieldDetail);
+		const { t } = useI18n();
+
+		const { interfaces } = getInterfaces();
+
+		const chosenInterface = computed(() => interfaces.value.find((inter) => inter.id === props.chosenInterface));
+
+		const typeOptions = computed(() => {
+			if (!chosenInterface.value) return [];
+
+			return chosenInterface.value.types.map((type) => ({
+				text: t(type),
+				value: type,
+			}));
+		});
+
+		const key = syncFieldDetailStoreProperty('field.field');
+		const type = syncFieldDetailStoreProperty('field.type');
+		const defaultValue = syncFieldDetailStoreProperty('field.schema.default_value');
+		const required = syncFieldDetailStoreProperty('field.meta.required', false);
+		const note = syncFieldDetailStoreProperty('field.meta.note');
+
+		return {
+			key,
+			t,
+			type,
+			typeOptions,
+			defaultValue,
+			required,
+			note,
+			readyToSave,
+			saving,
+			localType,
+			collection,
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/mixins/form-grid';
+
+.field-configuration {
+	--v-button-background-color-disabled: var(--background-normal);
+	--columns: 1;
+
+	@media (min-width: 400px) {
+		--columns: 2;
+	}
+
+	@media (min-width: 600px) {
+		--columns: 3;
+	}
+
+	@media (min-width: 840px) {
+		--columns: 4;
+	}
+
+	grid-column: 1 / span var(--columns);
+	background-color: var(--background-subdued);
+	border-top: var(--border-width) solid var(--border-normal);
+	border-bottom: var(--border-width) solid var(--border-normal);
+}
+
+.setup {
+	--form-vertical-gap: 20px;
+
+	margin: 34px;
+}
+
+.schema {
+	margin-bottom: 20px;
+	@include form-grid;
+}
+
+.monospace {
+	--v-input-font-family: var(--family-monospace);
+}
+
+.save {
+	margin-top: 40px;
+}
+
+.v-divider {
+	margin: 28px 0;
+}
+
+.toggle-advanced {
+	width: 100%;
+	margin-top: 20px;
+	color: var(--foreground-subdued);
+	text-align: center;
+	transition: color var(--fast) var(--transition);
+
+	&:hover {
+		color: var(--primary);
+	}
+}
+</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-detail-simple.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-detail-simple.vue
new file mode 100644
index 0000000000..46a4eb49e6
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-detail-simple.vue
@@ -0,0 +1,260 @@
+<template>
+	<div class="content">
+		<div v-for="group of groups" :key="group.key" class="group">
+			<h2>{{ group.name }}</h2>
+
+			<div class="grid">
+				<button
+					v-for="inter of group.interfaces"
+					:key="inter.id"
+					class="interface"
+					:class="{ active: chosenInterface === inter.id, gray: chosenInterface && chosenInterface !== inter.id }"
+					@click="toggleInterface(inter.id)"
+				>
+					<div class="preview">
+						<template v-if="inter.preview">
+							<span v-if="isSVG(inter.preview)" v-html="inter.preview" />
+							<img v-else :src="inter.preview" alt="" />
+						</template>
+
+						<span v-else class="fallback">
+							<v-icon large :name="inter.icon" />
+						</span>
+					</div>
+					<v-text-overflow :text="inter.name" class="name" />
+				</button>
+
+				<transition-expand>
+					<field-configuration
+						v-if="chosenInterface && !!group.interfaces.some((inter) => inter.id === chosenInterface)"
+						:row="configRow"
+						:chosen-interface="chosenInterface"
+						@save="$emit('save')"
+						@toggleAdvanced="$emit('toggleAdvanced')"
+					/>
+				</transition-expand>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed, toRefs, watch } from 'vue';
+import { Collection } from '@directus/shared/types';
+import { useI18n } from 'vue-i18n';
+import { getInterfaces } from '@/interfaces';
+import { orderBy } from 'lodash';
+import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store/';
+import { syncRefProperty } from '@/utils/sync-ref-property';
+import FieldConfiguration from './field-configuration.vue';
+
+export default defineComponent({
+	components: { FieldConfiguration },
+	props: {
+		collection: {
+			type: Object as PropType<Collection>,
+			required: true,
+		},
+	},
+	emits: ['save', 'toggleAdvanced'],
+	setup(props) {
+		const { collection } = toRefs(props);
+
+		const { t } = useI18n();
+
+		const fieldDetail = useFieldDetailStore();
+		watch(collection, () => fieldDetail.update({ collection: collection.value.collection }), { immediate: true });
+
+		const { interfaces } = getInterfaces();
+
+		const interfacesSorted = computed(() => {
+			return orderBy(
+				interfaces.value.filter((inter) => !inter.system),
+				['order']
+			);
+		});
+
+		const groups = computed(() => [
+			{
+				key: 'standard',
+				name: t('interface_group_text_and_numbers'),
+				interfaces: interfacesSorted.value.filter((inter) => inter.group === 'standard'),
+			},
+			{
+				key: 'selection',
+				name: t('interface_group_selection'),
+				interfaces: interfacesSorted.value.filter((inter) => inter.group === 'selection'),
+			},
+			{
+				key: 'relational',
+				name: t('interface_group_relational'),
+				interfaces: interfacesSorted.value.filter((inter) => inter.group === 'relational'),
+			},
+			{
+				key: 'presentation',
+				name: t('interface_group_presentation'),
+				interfaces: interfacesSorted.value.filter((inter) => inter.group === 'presentation'),
+			},
+			{
+				key: 'group',
+				name: t('interface_group_groups'),
+				interfaces: interfacesSorted.value.filter((inter) => inter.group === 'group'),
+			},
+			{
+				key: 'other',
+				name: t('interface_group_other'),
+				interfaces: interfacesSorted.value.filter((inter) => inter.group === 'other'),
+			},
+		]);
+
+		const chosenInterface = syncFieldDetailStoreProperty('field.meta.interface');
+
+		const configRow = computed(() => {
+			if (!chosenInterface.value) return null;
+
+			let indexInGroup: number | null = null;
+
+			groups.value.forEach((group) => {
+				const index = group.interfaces.findIndex((inter) => inter.id === chosenInterface.value);
+				if (index !== -1) indexInGroup = index;
+			});
+
+			if (indexInGroup === null) return null;
+
+			const windowWidth = window.innerWidth;
+
+			let columns = 1;
+
+			if (windowWidth > 400) {
+				columns = 2;
+			}
+
+			if (windowWidth > 600) {
+				columns = 3;
+			}
+
+			if (windowWidth > 840) {
+				columns = 4;
+			}
+
+			return Math.ceil((indexInGroup + 1) / columns) + 1;
+		});
+
+		return { t, interfaces, groups, isSVG, syncRefProperty, chosenInterface, configRow, toggleInterface };
+
+		function isSVG(path: string) {
+			return path.startsWith('<svg');
+		}
+
+		function toggleInterface(id: string) {
+			if (chosenInterface.value === id) {
+				chosenInterface.value = null;
+			} else {
+				chosenInterface.value = id;
+			}
+		}
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.content {
+	padding: var(--content-padding);
+	padding-top: 0;
+	padding-bottom: var(--content-padding-bottom);
+}
+
+.group h2 {
+	margin-bottom: 40px;
+	padding-bottom: 2px;
+	font-weight: 700;
+	border-bottom: var(--border-width) solid var(--border-subdued);
+}
+
+.group + .group {
+	margin-top: 80px;
+}
+
+.grid {
+	--columns: 1;
+
+	display: grid;
+	grid-template-columns: repeat(var(--columns), 1fr);
+	gap: 32px;
+
+	@media (min-width: 400px) {
+		--columns: 2;
+	}
+
+	@media (min-width: 600px) {
+		--columns: 3;
+	}
+
+	@media (min-width: 840px) {
+		--columns: 4;
+	}
+}
+
+.interface {
+	min-height: 100px;
+	overflow: hidden;
+	text-align: left;
+}
+
+.preview {
+	--v-icon-color: var(--background-page);
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 160px;
+	height: 100px;
+	margin-bottom: 8px;
+	border: var(--border-width) solid var(--border-subdued);
+	border-radius: var(--border-radius);
+	transition: var(--fast) var(--transition);
+	transition-property: background-color, border-color;
+}
+
+.preview img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.preview span {
+	display: contents;
+}
+
+.preview :deep(svg) {
+	width: 100%;
+	height: 100%;
+}
+
+.preview :deep(svg) .glow {
+	filter: drop-shadow(0 0 8px var(--primary-50));
+}
+
+.preview .fallback {
+	--v-icon-color: var(--primary-50);
+
+	display: block;
+	padding: 8px 16px;
+	border-radius: var(--border-radius);
+	box-shadow: 0 0 8px var(--primary-50);
+}
+
+.interface:hover .preview {
+	border-color: var(--border-normal);
+}
+
+.interface.active .preview {
+	background-color: var(--primary-alt);
+	border-color: var(--primary);
+}
+
+.interface.gray .preview {
+	background-color: var(--background-subdued);
+	filter: grayscale(1);
+}
+</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/relationship-configuration.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/relationship-configuration.vue
new file mode 100644
index 0000000000..4fb075683a
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/relationship-configuration.vue
@@ -0,0 +1,137 @@
+<template>
+	<div class="relationship">
+		<div v-if="localType === 'm2o'" class="field full">
+			<div class="label type-label">
+				{{ t('related_collection') }}
+				<v-icon v-tooltip="t('required')" class="required-mark" sup name="star" />
+			</div>
+
+			<related-collection-select v-model="relatedCollectionM2O" />
+		</div>
+
+		<template v-else-if="localType === 'o2m'">
+			<div class="field half-left">
+				<div class="label type-label">
+					{{ t('related_collection') }}
+					<v-icon v-tooltip="t('required')" class="required-mark" sup name="star" />
+				</div>
+
+				<related-collection-select v-model="o2mCollection" />
+			</div>
+
+			<div class="field half-right">
+				<div class="label type-label">
+					{{ t('foreign_key') }}
+					<v-icon v-tooltip="t('required')" class="required-mark" sup name="star" />
+				</div>
+
+				<related-field-select v-model="o2mField" :collection="o2mCollection" :disabled="!o2mCollection" />
+			</div>
+		</template>
+
+		<div v-if="localType === 'm2m'" class="field full">
+			<div class="label type-label">
+				{{ t('related_collection') }}
+				<v-icon v-tooltip="t('required')" class="required-mark" sup name="star" />
+			</div>
+
+			<related-collection-select v-model="relatedCollectionM2O" />
+		</div>
+
+		<div v-if="localType === 'translations'" class="field full">
+			<div class="label type-label">
+				{{ t('languages_collection') }}
+				<v-icon v-tooltip="t('required')" class="required-mark" sup name="star" />
+			</div>
+
+			<related-collection-select v-model="relatedCollectionM2O" />
+		</div>
+
+		<div v-if="localType === 'm2a'" class="field full">
+			<div class="label type-label">
+				{{ t('related_collections') }}
+				<v-icon v-tooltip="t('required')" class="required-mark" sup name="star" />
+			</div>
+
+			<v-select
+				v-model="oneAllowedCollections"
+				:placeholder="t('collection') + '...'"
+				:items="availableCollections"
+				item-value="collection"
+				item-text="name"
+				item-disabled="meta.singleton"
+				multiple
+				:multiple-preview-threshold="0"
+			/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed } from 'vue';
+import { LOCAL_TYPES } from '@directus/shared/constants';
+import { syncFieldDetailStoreProperty } from '../store';
+import { useI18n } from 'vue-i18n';
+import RelatedCollectionSelect from '../shared/related-collection-select.vue';
+import RelatedFieldSelect from '../shared/related-field-select.vue';
+import { orderBy } from 'lodash';
+import { useCollectionsStore } from '@/stores';
+
+export default defineComponent({
+	components: { RelatedCollectionSelect, RelatedFieldSelect },
+	props: {
+		localType: {
+			type: String as PropType<typeof LOCAL_TYPES[number]>,
+			required: true,
+		},
+	},
+	setup() {
+		const collectionsStore = useCollectionsStore();
+
+		const { t } = useI18n();
+		const relatedCollectionM2O = syncFieldDetailStoreProperty('relations.m2o.related_collection');
+		const o2mCollection = syncFieldDetailStoreProperty('relations.o2m.collection');
+		const o2mField = syncFieldDetailStoreProperty('relations.o2m.field');
+		const oneAllowedCollections = syncFieldDetailStoreProperty('relations.m2o.meta.one_allowed_fields', []);
+
+		const availableCollections = computed(() => {
+			return orderBy(
+				[
+					...collectionsStore.allCollections,
+					{
+						divider: true,
+					},
+					{
+						name: t('system'),
+						selectable: false,
+						children: collectionsStore.crudSafeSystemCollections,
+					},
+				],
+				['collection'],
+				['asc']
+			);
+		});
+
+		return { availableCollections, oneAllowedCollections, relatedCollectionM2O, o2mCollection, o2mField, t };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/mixins/form-grid';
+
+.relationship {
+	@include form-grid;
+
+	--v-select-font-family: var(--family-monospace);
+	--v-input-font-family: var(--family-monospace);
+
+	&:not(:empty) {
+		margin-bottom: 20px;
+	}
+
+	.v-input.matches {
+		--v-input-color: var(--primary);
+	}
+}
+</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
index 7b947520bc..10d27ee2b0 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
@@ -1,159 +1,42 @@
 <template>
-	<v-dialog
-		v-if="localType === 'translations' && translationsManual === false && field === '+'"
-		persistent
-		:model-value="isOpen"
-		@esc="cancelField"
-	>
-		<v-card class="auto-translations">
-			<v-card-title>{{ t('create_translations') }}</v-card-title>
-			<v-card-text>
-				<v-input v-model="fieldData.field" :placeholder="t('field_name') + '...'" />
-				<v-notice>
-					<div>
-						{{ t('this_will_auto_setup_fields_relations') }}
-						<button class="manual-toggle" @click="translationsManual = true">{{ t('click_here') }}</button>
-						{{ t('to_manually_setup_translations') }}
-					</div>
-				</v-notice>
-			</v-card-text>
-			<v-card-actions>
-				<v-button secondary @click="cancelField">{{ t('cancel') }}</v-button>
-				<div class="spacer" />
-				<v-button :disabled="!fieldData.field" :loading="saving" @click="saveField">
-					{{ t('auto_generate') }}
-				</v-button>
-			</v-card-actions>
-		</v-card>
-	</v-dialog>
+	<v-drawer :model-value="isOpen" :title="title" persistent @cancel="cancel" @update:model-value="cancel">
+		<field-detail-simple
+			v-if="!showAdvanced"
+			:collection="collectionInfo"
+			@save="save"
+			@toggleAdvanced="simple = false"
+		/>
 
-	<v-drawer
-		v-else
-		:model-value="isOpen"
-		:title="title"
-		:subtitle="localType ? t(`field_${localType}`) : null"
-		persistent
-		:sidebar-label="currentTabInfo.text"
-		@update:model-value="cancelField"
-		@cancel="cancelField"
-	>
-		<template #sidebar>
-			<setup-tabs v-model:current="currentTab" :tabs="tabs" :type="localType" />
+		<template v-if="showAdvanced" #sidebar>
+			<field-detail-advanced-tabs v-model:current-tab="currentTab" />
 		</template>
 
-		<div class="content">
-			<setup-schema
-				v-if="currentTab[0] === 'schema'"
-				:is-existing="field !== '+'"
-				:collection="collection"
-				:type="localType"
-			/>
-
-			<setup-field
-				v-if="currentTab[0] === 'field'"
-				:is-existing="field !== '+'"
-				:collection="collection"
-				:type="localType"
-			/>
-
-			<setup-relationship
-				v-if="currentTab[0] === 'relationship'"
-				:is-existing="field !== '+'"
-				:collection="collection"
-				:type="localType"
-			/>
-
-			<setup-translations
-				v-if="currentTab[0] === 'translations'"
-				:is-existing="field !== '+'"
-				:collection="collection"
-				:type="localType"
-			/>
-
-			<setup-interface
-				v-if="currentTab[0] === 'interface'"
-				:is-existing="field !== '+'"
-				:collection="collection"
-				:type="localType"
-			/>
-
-			<setup-display
-				v-if="currentTab[0] === 'display'"
-				:is-existing="field !== '+'"
-				:collection="collection"
-				:type="localType"
-			/>
-
-			<setup-conditions v-if="currentTab[0] === 'conditions'" :collection="collection" :type="localType" />
-		</div>
-
-		<template #actions>
-			<setup-actions
-				v-model:current="currentTab"
-				:saving="saving"
-				:collection="collection"
-				:tabs="tabs"
-				:is-existing="field !== '+'"
-				@save="saveField"
-				@cancel="cancelField"
-			/>
+		<template v-if="showAdvanced" #actions>
+			<field-detail-advanced-actions @save="save" />
 		</template>
 
-		<v-dialog v-model="nullValuesDialog" @esc="nullValuesDialog = false">
-			<v-card>
-				<v-card-title>{{ t('enter_value_to_replace_nulls') }}</v-card-title>
-				<v-card-text>
-					<v-input v-model="nullValueOverride" placeholder="NULL" />
-				</v-card-text>
-				<v-card-actions>
-					<v-button secondary @click="nullValuesDialog = false">{{ t('cancel') }}</v-button>
-					<v-button :disabled="nullValueOverride === null" :loading="nullOverrideSaving" @click="saveNullOverride">
-						{{ t('save') }}
-					</v-button>
-				</v-card-actions>
-			</v-card>
-		</v-dialog>
+		<field-detail-advanced v-if="showAdvanced" :collection="collectionInfo" :current-tab="currentTab[0]" @save="save" />
 	</v-drawer>
 </template>
 
 <script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, ref, computed, PropType, toRefs } from 'vue';
-import SetupTabs from './components/tabs.vue';
-import SetupActions from './components/actions.vue';
-import SetupSchema from './components/schema.vue';
-import SetupField from './components/field.vue';
-import SetupRelationship from './components/relationship.vue';
-import SetupTranslations from './components/translations.vue';
-import SetupInterface from './components/interface.vue';
-import SetupDisplay from './components/display.vue';
-import SetupConditions from './components/conditions.vue';
-import { isEmpty, cloneDeep } from 'lodash';
-import api from '@/api';
-import { useFieldsStore, useRelationsStore, useCollectionsStore } from '@/stores/';
-import { useRouter } from 'vue-router';
-import { useDialogRoute } from '@/composables/use-dialog-route';
-import { useCollection } from '@directus/shared/composables';
-import { getLocalTypeForField } from '../get-local-type';
-import { notify } from '@/utils/notify';
-import formatTitle from '@directus/format-title';
+import { defineComponent, PropType, ref, computed, toRefs, watch } from 'vue';
 import { LocalType } from '@directus/shared/types';
-
-import { initLocalStore, state, clearLocalStore } from './store';
-import { unexpectedError } from '@/utils/unexpected-error';
+import { useFieldDetailStore } from './store/';
+import FieldDetailSimple from './field-detail-simple/field-detail-simple.vue';
+import FieldDetailAdvanced from './field-detail-advanced/field-detail-advanced.vue';
+import FieldDetailAdvancedTabs from './field-detail-advanced/field-detail-advanced-tabs.vue';
+import FieldDetailAdvancedActions from './field-detail-advanced/field-detail-advanced-actions.vue';
+import { useRouter } from 'vue-router';
+import { useCollectionsStore, useFieldsStore } from '@/stores';
+import { useI18n } from 'vue-i18n';
+import formatTitle from '@directus/format-title';
+import { useDialogRoute } from '@/composables/use-dialog-route';
+import { storeToRefs } from 'pinia';
 
 export default defineComponent({
-	components: {
-		SetupTabs,
-		SetupActions,
-		SetupSchema,
-		SetupField,
-		SetupRelationship,
-		SetupTranslations,
-		SetupInterface,
-		SetupDisplay,
-		SetupConditions,
-	},
+	name: 'FieldDetail',
+	components: { FieldDetailSimple, FieldDetailAdvanced, FieldDetailAdvancedTabs, FieldDetailAdvancedActions },
 	props: {
 		collection: {
 			type: String,
@@ -169,356 +52,66 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		const { t } = useI18n();
-
-		const router = useRouter();
-
-		const collectionsStore = useCollectionsStore();
-		const fieldsStore = useFieldsStore();
-		const relationsStore = useRelationsStore();
+		const { collection } = toRefs(props);
 
 		const isOpen = useDialogRoute();
 
-		const translationsManual = ref(false);
+		const fieldDetail = useFieldDetailStore();
 
-		const { collection } = toRefs(props);
-		const { info: collectionInfo } = useCollection(collection);
+		const { editing } = storeToRefs(fieldDetail);
 
-		const { nullValueOverride, nullValuesDialog, nullOverrideSaving, saveNullOverride } = useContainsNull();
+		watch(
+			() => props.field,
+			() => fieldDetail.startEditing(props.collection, props.field, props.type),
+			{ immediate: true }
+		);
 
-		const existingField = computed(() => {
-			if (props.field === '+') return null;
+		const collectionsStore = useCollectionsStore();
+		const fieldsStore = useFieldsStore();
+		const router = useRouter();
+		const { t } = useI18n();
 
-			const existingField = fieldsStore.getField(props.collection, props.field);
-			return existingField;
+		const collectionInfo = computed(() => {
+			return collectionsStore.getCollection(collection.value);
 		});
 
-		const localType = computed(() => {
-			if (props.field === '+') return props.type;
-
-			const type = getLocalTypeForField(props.collection, props.field) || 'standard';
-
-			return type;
-		});
-
-		initLocalStore(props.collection, props.field, localType.value);
-
-		const { tabs, currentTab, currentTabInfo } = useTabs();
-
-		const saving = ref(false);
+		const simple = ref(props.type === null);
 
 		const title = computed(() => {
-			const fieldName = existingField.value?.name || formatTitle(state.fieldData.field || '');
+			const existingField = fieldsStore.getField(props.collection, props.field);
+			const fieldName = existingField?.name || formatTitle(fieldDetail.field.name || '');
 
-			if (props.field === '+' && fieldName === '')
+			if (props.field === '+' && fieldName === '') {
 				return t('creating_new_field', { collection: collectionInfo.value?.name });
-			else return t('field_in_collection', { field: fieldName, collection: collectionInfo.value?.name });
+			} else {
+				return t('field_in_collection', { field: fieldName, collection: collectionInfo.value?.name });
+			}
 		});
 
-		return {
-			t,
-			isOpen,
-			tabs,
-			currentTab,
-			fieldData: state.fieldData,
-			saveField,
-			saving,
-			relations: state.relations,
-			newFields: state.newFields,
-			cancelField,
-			localType,
-			existingField,
-			collectionInfo,
-			translationsManual,
-			currentTabInfo,
-			title,
-			nullValuesDialog,
-			nullValueOverride,
-			nullOverrideSaving,
-			saveNullOverride,
-		};
+		const currentTab = ref(['schema']);
 
-		function useTabs() {
-			const tabs = computed(() => {
-				const tabs = [
-					{
-						text: t('schema'),
-						value: 'schema',
-						disabled: false,
-					},
-					{
-						text: t('field', 1),
-						value: 'field',
-						disabled: interfaceDisplayDisabled(),
-					},
-					{
-						text: t('interface_label'),
-						value: 'interface',
-						disabled: interfaceDisplayDisabled(),
-					},
-				];
+		const showAdvanced = computed(() => {
+			return editing.value !== '+' || !simple.value;
+		});
 
-				if (props.type !== 'presentation' && props.type !== 'group') {
-					tabs.push({
-						text: t('display'),
-						value: 'display',
-						disabled: interfaceDisplayDisabled(),
-					});
-				}
+		return { simple, cancel, collectionInfo, t, title, save, isOpen, currentTab, showAdvanced };
 
-				if (['o2m', 'm2o', 'm2m', 'm2a', 'files'].includes(localType.value)) {
-					tabs.splice(1, 0, {
-						text: t('relationship'),
-						value: 'relationship',
-						disabled: relationshipDisabled(),
-					});
-				}
-
-				if (localType.value === 'translations') {
-					tabs.splice(
-						1,
-						0,
-						...[
-							{
-								text: t('translations'),
-								value: 'translations',
-								disabled: translationsDisabled(),
-							},
-						]
-					);
-				}
-
-				tabs.push({
-					text: t('conditions'),
-					value: 'conditions',
-					disabled: interfaceDisplayDisabled(),
-				});
-
-				return tabs;
-			});
-
-			const currentTab = ref(['schema']);
-
-			const currentTabInfo = computed(() => {
-				const tabKey = currentTab.value[0];
-				return tabs.value.find((tab) => tab.value === tabKey);
-			});
-
-			return { tabs, currentTab, currentTabInfo };
-
-			function relationshipDisabled() {
-				return isEmpty(state.fieldData.field);
-			}
-
-			function translationsDisabled() {
-				return isEmpty(state.fieldData.field);
-			}
-
-			function interfaceDisplayDisabled() {
-				if (['o2m', 'm2o', 'file'].includes(localType.value)) {
-					return (
-						state.relations.length === 0 ||
-						isEmpty(state.relations[0].collection) ||
-						isEmpty(state.relations[0].field) ||
-						isEmpty(state.relations[0].related_collection)
-					);
-				}
-
-				if (['m2m', 'files', 'translations'].includes(localType.value)) {
-					return (
-						state.relations.length !== 2 ||
-						isEmpty(state.relations[0].collection) ||
-						isEmpty(state.relations[0].field) ||
-						isEmpty(state.relations[0].meta?.one_field) ||
-						isEmpty(state.relations[1].collection) ||
-						isEmpty(state.relations[1].field) ||
-						isEmpty(state.relations[1].related_collection)
-					);
-				}
-
-				if (localType.value === 'm2a') {
-					return (
-						state.relations.length !== 2 ||
-						isEmpty(state.relations[0].collection) ||
-						isEmpty(state.relations[0].field) ||
-						isEmpty(state.relations[0].meta?.one_field) ||
-						isEmpty(state.relations[1].collection) ||
-						isEmpty(state.relations[1].field) ||
-						isEmpty(state.relations[1].meta?.one_collection_field) ||
-						isEmpty(state.relations[1].meta?.one_allowed_collections)
-					);
-				}
-
-				if (localType.value === 'presentation') {
-					return isEmpty(state.fieldData.field);
-				}
-
-				return isEmpty(state.fieldData.field) || isEmpty(state.fieldData.type);
-			}
+		async function cancel() {
+			await router.push(`/settings/data-model/${props.collection}`);
+			fieldDetail.$reset();
 		}
 
-		async function saveField() {
-			saving.value = true;
-
-			const fieldData = cloneDeep(state.fieldData);
-
-			// You can't alter PK columns in most database drivers. If this field is the PK, remove `schema` so we don't
-			// accidentally try altering the column
-
-			if (fieldData.schema?.is_primary_key === true) {
-				delete fieldData.schema;
-			}
-
-			try {
-				if (props.field !== '+') {
-					await api.patch(`/fields/${props.collection}/${props.field}`, fieldData);
-				} else {
-					await api.post(`/fields/${props.collection}`, fieldData);
-				}
-
-				await Promise.all(
-					state.newCollections.map((newCollection) => {
-						delete newCollection.$type;
-						return api.post(`/collections`, newCollection);
-					})
-				);
-
-				await Promise.all(
-					state.newFields.map((newField) => {
-						delete newField.$type;
-						return api.post(`/fields/${newField.collection}`, newField);
-					})
-				);
-
-				await Promise.all(
-					state.updateFields.map((updateField) => {
-						delete updateField.$type;
-						return api.post(`/fields/${updateField.collection}/${updateField.field}`, updateField);
-					})
-				);
-
-				await Promise.all(
-					state.relations.map((relation) => {
-						const relationExists = !!relationsStore.getRelationForField(relation.collection!, relation.field!);
-
-						if (relationExists) {
-							return api.patch(`/relations/${relation.collection}/${relation.field}`, relation);
-						} else {
-							return api.post(`/relations`, relation);
-						}
-					})
-				);
-
-				await Promise.all(
-					Object.keys(state.newRows).map((collection) => {
-						const rows = state.newRows[collection];
-						return api.post(`/items/${collection}`, rows);
-					})
-				);
-
-				await collectionsStore.hydrate();
-				await fieldsStore.hydrate();
-				await relationsStore.hydrate();
-
-				if (props.field !== '+') {
-					notify({
-						title: t('field_update_success', { field: props.field }),
-						type: 'success',
-					});
-				} else {
-					notify({
-						title: t('field_create_success', { field: fieldData.field }),
-						type: 'success',
-					});
-				}
-
-				router.push(`/settings/data-model/${props.collection}`);
-				clearLocalStore();
-			} catch (err: any) {
-				if (err?.response?.data?.errors?.[0]?.extensions?.code === 'CONTAINS_NULL_VALUES') {
-					nullValueOverride.value = state.fieldData?.schema?.default_value || null;
-					nullValuesDialog.value = true;
-				} else {
-					unexpectedError(err);
-				}
-			} finally {
-				saving.value = false;
-			}
-		}
-
-		function cancelField() {
+		async function save() {
+			await fieldDetail.save();
 			router.push(`/settings/data-model/${props.collection}`);
-			clearLocalStore();
-		}
-
-		/**
-		 * In case you're setting allow null to false and you have null values already stored, we need
-		 * to override those null values with a new value before you can try saving again
-		 */
-		function useContainsNull() {
-			const nullValuesDialog = ref(false);
-			const nullValueOverride = ref();
-			const nullOverrideSaving = ref(false);
-
-			return { nullValueOverride, nullValuesDialog, nullOverrideSaving, saveNullOverride };
-
-			async function saveNullOverride() {
-				nullOverrideSaving.value = true;
-
-				try {
-					const endpoint = props.collection.startsWith('directus_')
-						? `/${props.collection.substring(9)}`
-						: `/items/${props.collection}`;
-
-					await api.patch(endpoint, {
-						query: {
-							filter: {
-								[props.field]: {
-									_null: true,
-								},
-							},
-							limit: -1,
-						},
-						data: {
-							[props.field]: nullValueOverride.value,
-						},
-					});
-
-					nullValuesDialog.value = false;
-					return saveField();
-				} catch (err: any) {
-					unexpectedError(err);
-				} finally {
-					nullOverrideSaving.value = false;
-				}
-			}
+			fieldDetail.$reset();
 		}
 	},
 });
 </script>
 
-<style lang="scss" scoped>
-.auto-translations {
-	.v-input {
-		--v-input-font-family: var(--family-monospace);
-	}
-
-	.v-notice {
-		margin-top: 12px;
-	}
-
-	.spacer {
-		flex-grow: 1;
-	}
-
-	.manual-toggle {
-		color: var(--primary);
-	}
-}
-
-.content {
-	padding: var(--content-padding);
-	padding-top: 0;
-	padding-bottom: var(--content-padding-bottom);
+<style scoped>
+:deep(.required-mark) {
+	--v-icon-color: var(--primary);
 }
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/shared/extension-options.vue b/app/src/modules/settings/routes/data-model/field-detail/shared/extension-options.vue
new file mode 100644
index 0000000000..23c0ac61ed
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/shared/extension-options.vue
@@ -0,0 +1,132 @@
+<template>
+	<v-notice v-if="usesCustomComponent === false && optionsFields.length === 0">
+		{{ t('no_options_available') }}
+	</v-notice>
+
+	<v-form
+		v-else-if="usesCustomComponent === false"
+		v-model="options"
+		class="extension-options"
+		:fields="optionsFields"
+		primary-key="+"
+	/>
+
+	<component
+		:is="`interface-options-${extensionInfo.id}`"
+		v-else
+		:value="options"
+		:collection="collection"
+		:field="field"
+		@input="options = $event"
+	/>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed } from 'vue';
+import { getInterfaces } from '@/interfaces';
+import { getDisplays } from '@/displays';
+import { useFieldDetailStore } from '../store/';
+import { get } from 'lodash';
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+import { Field, DeepPartial } from '@directus/shared/types';
+
+export default defineComponent({
+	props: {
+		type: {
+			type: String as PropType<'interface' | 'display'>,
+			required: true,
+		},
+		extension: {
+			type: String,
+			required: true,
+		},
+		showAdvanced: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props) {
+		const fieldDetail = useFieldDetailStore();
+
+		const { t } = useI18n();
+
+		const { collection, field, relations, fields, collections } = storeToRefs(fieldDetail);
+
+		const { interfaces } = getInterfaces();
+		const { displays } = getDisplays();
+
+		const extensionInfo = computed(() => {
+			if (props.type === 'interface') {
+				return interfaces.value.find((inter) => inter.id === props.extension);
+			}
+
+			if (props.type === 'display') {
+				return displays.value.find((display) => display.id === props.extension);
+			}
+
+			return null;
+		});
+
+		const usesCustomComponent = computed(() => {
+			if (!extensionInfo.value) return false;
+
+			return extensionInfo.value.options && 'render' in extensionInfo.value.options;
+		});
+
+		const optionsFields = computed(() => {
+			if (!extensionInfo.value) return [];
+			if (!extensionInfo.value.options) return [];
+			if (usesCustomComponent.value === true) return [];
+
+			let optionsObjectOrArray;
+
+			if (typeof extensionInfo.value.options === 'function') {
+				optionsObjectOrArray = (extensionInfo.value.options as (x: typeof fieldDetail) => DeepPartial<Field>[])(
+					fieldDetail
+				);
+			} else {
+				optionsObjectOrArray = extensionInfo.value.options;
+			}
+
+			if (Array.isArray(optionsObjectOrArray)) return optionsObjectOrArray;
+
+			if (props.showAdvanced) {
+				return [...optionsObjectOrArray.standard, ...optionsObjectOrArray.advanced];
+			}
+
+			return optionsObjectOrArray.standard;
+		});
+
+		const options = computed({
+			get() {
+				const path = props.type === 'interface' ? 'field.meta.options' : 'field.meta.display_options';
+				return get(fieldDetail, path);
+			},
+			set(val: any) {
+				const key = props.type === 'interface' ? 'options' : 'display_options';
+
+				fieldDetail.$patch((state) => {
+					state.field.meta = {
+						...state.field.meta,
+						[key]: val,
+					};
+				});
+			},
+		});
+
+		return {
+			usesCustomComponent,
+			extensionInfo,
+			optionsFields,
+			options,
+			collection,
+			field,
+			relations,
+			fields,
+			collections,
+			t,
+		};
+	},
+});
+</script>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/shared/related-collection-select.vue b/app/src/modules/settings/routes/data-model/field-detail/shared/related-collection-select.vue
new file mode 100644
index 0000000000..df9f3979b9
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/shared/related-collection-select.vue
@@ -0,0 +1,106 @@
+<template>
+	<v-input
+		key="related-collection-select"
+		:model-value="modelValue"
+		:class="{ matches: collectionExists }"
+		db-safe
+		:nullable="false"
+		:disabled="disabled"
+		:placeholder="t('collection') + '...'"
+		@update:model-value="$emit('update:modelValue', $event)"
+	>
+		<template v-if="!disabled" #append>
+			<v-menu show-arrow placement="bottom-end">
+				<template #activator="{ toggle }">
+					<v-icon v-tooltip="t('select_existing')" name="list_alt" clickable :disabled="disabled" @click="toggle" />
+				</template>
+
+				<v-list class="monospace">
+					<v-list-item
+						v-for="availableCollection in availableCollections"
+						:key="availableCollection.collection"
+						:active="modelValue === availableCollection.collection"
+						clickable
+						@click="$emit('update:modelValue', availableCollection.collection)"
+					>
+						<v-list-item-content>
+							{{ availableCollection.collection }}
+						</v-list-item-content>
+					</v-list-item>
+
+					<v-divider />
+
+					<v-list-group>
+						<template #activator>{{ t('system') }}</template>
+						<v-list-item
+							v-for="systemCollection in systemCollections"
+							:key="systemCollection.collection"
+							:active="modelValue === systemCollection.collection"
+							clickable
+							@click="$emit('update:modelValue', systemCollection.collection)"
+						>
+							<v-list-item-content>
+								{{ systemCollection.collection }}
+							</v-list-item-content>
+						</v-list-item>
+					</v-list-group>
+				</v-list>
+			</v-menu>
+		</template>
+
+		<template v-if="disabled" #input>
+			<v-text-overflow :text="modelValue" />
+		</template>
+	</v-input>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useCollectionsStore } from '@/stores';
+import { orderBy } from 'lodash';
+
+export default defineComponent({
+	props: {
+		modelValue: {
+			type: String,
+			default: null,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ['update:modelValue'],
+	setup(props) {
+		const { t } = useI18n();
+		const collectionsStore = useCollectionsStore();
+
+		const collectionExists = computed(() => {
+			return !!collectionsStore.getCollection(props.modelValue);
+		});
+
+		const availableCollections = computed(() => {
+			return orderBy(
+				collectionsStore.collections.filter((collection) => {
+					return collection.collection.startsWith('directus_') === false && collection.schema;
+				}),
+				['sort', 'collection'],
+				['asc']
+			);
+		});
+
+		const systemCollections = computed(() => {
+			return orderBy(
+				collectionsStore.crudSafeSystemCollections.filter((collection) => {
+					return collection.collection.startsWith('directus_') === true;
+				}),
+				['collection'],
+				['asc']
+			);
+		});
+
+		return { t, collectionExists, availableCollections, systemCollections };
+	},
+});
+</script>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/shared/related-field-select.vue b/app/src/modules/settings/routes/data-model/field-detail/shared/related-field-select.vue
new file mode 100644
index 0000000000..f94ff68348
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/shared/related-field-select.vue
@@ -0,0 +1,92 @@
+<template>
+	<v-input
+		:model-value="modelValue"
+		db-safe
+		:nullable="false"
+		:disabled="disabled"
+		:placeholder="placeholder"
+		:class="{ matches: fieldExists }"
+		@update:model-value="$emit('update:modelValue', $event)"
+	>
+		<template v-if="fields && fields.length > 0 && !disabled" #append>
+			<v-menu show-arrow placement="bottom-end">
+				<template #activator="{ toggle }">
+					<v-icon v-tooltip="t('select_existing')" name="list_alt" clickable @click="toggle" />
+				</template>
+
+				<v-list class="monospace">
+					<v-list-item
+						v-for="field in fields"
+						:key="field.value"
+						:active="modelValue === field.value"
+						:disabled="field.disabled"
+						clickable
+						@click="$emit('update:modelValue', field.value)"
+					>
+						<v-list-item-content>
+							{{ field.text }}
+						</v-list-item-content>
+					</v-list-item>
+				</v-list>
+			</v-menu>
+		</template>
+
+		<template v-if="disabled" #input>
+			<v-text-overflow :text="modelValue" />
+		</template>
+	</v-input>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, PropType } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useFieldsStore } from '@/stores';
+import { i18n } from '@/lang';
+
+export default defineComponent({
+	props: {
+		modelValue: {
+			type: String,
+			default: null,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		collection: {
+			type: String,
+			default: null,
+		},
+		typeDenyList: {
+			type: Array as PropType<string[]>,
+			default: () => [],
+		},
+		placeholder: {
+			type: String,
+			default: () => i18n.global.t('foreign_key') + '...',
+		},
+	},
+	emits: ['update:modelValue'],
+	setup(props) {
+		const { t } = useI18n();
+		const fieldsStore = useFieldsStore();
+
+		const fields = computed(() => {
+			if (!props.collection) return [];
+
+			return fieldsStore.getFieldsForCollectionAlphabetical(props.collection).map((field) => ({
+				text: field.field,
+				value: field.field,
+				disabled: !field.schema || field.schema?.is_primary_key || props.typeDenyList.includes(field.type),
+			}));
+		});
+
+		const fieldExists = computed(() => {
+			if (!props.collection || !props.modelValue) return false;
+			return !!fieldsStore.getField(props.collection, props.modelValue);
+		});
+
+		return { t, fields, fieldExists };
+	},
+});
+</script>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store.ts b/app/src/modules/settings/routes/data-model/field-detail/store.ts
deleted file mode 100644
index 97acb9b9aa..0000000000
--- a/app/src/modules/settings/routes/data-model/field-detail/store.ts
+++ /dev/null
@@ -1,1156 +0,0 @@
-/**
- * This is a "local store" meant to make the field data shareable between the different panes
- * and components within the field setup modal flow.
- *
- * It's reset every time the modal opens and shouldn't be used outside of the field-detail flow.
- */
-
-import { getDisplays } from '@/displays';
-import { getInterfaces } from '@/interfaces';
-import {
-	DeepPartial,
-	DisplayConfig,
-	Field,
-	InterfaceConfig,
-	Item,
-	LocalType,
-	Collection,
-	Relation,
-} from '@directus/shared/types';
-import { useCollectionsStore, useFieldsStore, useRelationsStore } from '@/stores/';
-
-import { clone, throttle } from 'lodash';
-import { computed, ComputedRef, nextTick, reactive, watch, WatchStopHandle } from 'vue';
-
-type GenerationInfo = {
-	name: string;
-	type: 'collection' | 'field';
-};
-
-let state: {
-	fieldData: DeepPartial<Field>;
-	relations: DeepPartial<Relation>[];
-	newCollections: DeepPartial<Collection & { fields?: DeepPartial<Field>[]; $type?: string }>[];
-	newFields: DeepPartial<Field & { $type?: string }>[];
-	updateFields: DeepPartial<Field & { $type?: string }>[];
-	newRows: Record<string, Item[]>;
-	autoFillJunctionRelation: boolean;
-};
-
-let availableInterfaces: ComputedRef<InterfaceConfig[]>;
-let availableDisplays: ComputedRef<DisplayConfig[]>;
-let generationInfo: ComputedRef<GenerationInfo[]>;
-
-export { state, availableInterfaces, availableDisplays, generationInfo, initLocalStore, clearLocalStore };
-
-function initLocalStore(collection: string, field: string, type: LocalType): void {
-	const fieldsStore = useFieldsStore();
-	const relationsStore = useRelationsStore();
-	const collectionsStore = useCollectionsStore();
-
-	const { interfaces } = getInterfaces();
-	const { displays } = getDisplays();
-
-	clearLocalStore();
-
-	availableInterfaces = computed<InterfaceConfig[]>(() => {
-		return interfaces.value
-			.filter((inter: InterfaceConfig) => {
-				// Filter out all system interfaces
-				if (inter.system === true) return false;
-
-				const matchesType = inter.types.includes(state.fieldData?.type || 'alias');
-				const matchesLocalType = (inter.groups || ['standard']).includes(type);
-
-				return matchesType && matchesLocalType;
-			})
-			.sort((a: InterfaceConfig, b: InterfaceConfig) => (a.name > b.name ? 1 : -1));
-	});
-
-	availableDisplays = computed(() => {
-		return displays.value
-			.filter((inter: DisplayConfig) => {
-				const matchesType = inter.types.includes(state.fieldData?.type || 'alias');
-				const matchesLocalType = (inter.groups || ['standard']).includes(type);
-
-				return matchesType && matchesLocalType;
-			})
-			.sort((a: DisplayConfig, b: DisplayConfig) => (a.name > b.name ? 1 : -1));
-	});
-
-	generationInfo = computed(() => {
-		return [
-			...state.newCollections.map(
-				(newCollection): GenerationInfo => ({
-					name: newCollection.collection!,
-					type: 'collection',
-				})
-			),
-			...state.newCollections
-				.filter((newCollection) => !!newCollection.fields)
-				.map((newCollection) =>
-					newCollection.fields!.map((field) => ({ ...field, collection: newCollection.collection }))
-				)
-				.flat()
-				.map(
-					(newField): GenerationInfo => ({
-						name: `${newField.collection}.${newField.field}`,
-						type: 'field',
-					})
-				),
-			...state.newFields.map(
-				(newField): GenerationInfo => ({
-					name: `${newField.collection}.${newField.field}`,
-					type: 'field',
-				})
-			),
-		];
-	});
-
-	const isExisting = field !== '+';
-
-	if (isExisting) {
-		const existingField = clone(fieldsStore.getField(collection, field));
-
-		state.fieldData.field = existingField.field;
-		state.fieldData.type = existingField.type;
-		state.fieldData.schema = existingField.schema;
-		state.fieldData.meta = existingField.meta;
-
-		state.relations = relationsStore.getRelationsForField(collection, field);
-
-		// Make sure every relation has a schema we can operate on
-		for (const relation of state.relations) {
-			if (!relation.schema) {
-				relation.schema = {
-					on_delete: 'SET NULL',
-				};
-			}
-		}
-	} else {
-		state.autoFillJunctionRelation = true;
-
-		watch(
-			() => availableInterfaces.value,
-			() => {
-				if (availableInterfaces.value.length === 1 && state.fieldData.meta) {
-					state.fieldData.meta.interface = availableInterfaces.value[0].id;
-				}
-			}
-		);
-
-		watch(
-			() => availableDisplays.value,
-			() => {
-				if (availableDisplays.value.length === 1 && state.fieldData.meta) {
-					state.fieldData.meta.display = availableDisplays.value[0].id;
-				}
-			}
-		);
-	}
-
-	// Auto generate translations
-	if (isExisting === false && type === 'translations' && state.fieldData.meta) {
-		state.fieldData.meta.interface = 'translations';
-	}
-
-	if (type === 'file') useFile();
-	else if (type === 'm2o') useM2O();
-	else if (type === 'm2m' || type === 'files' || type === 'translations') useM2M();
-	else if (type === 'o2m') useO2M();
-	else if (type === 'presentation') usePresentation();
-	else if (type === 'group') useGroup();
-	else if (type === 'm2a') useM2A();
-	else useStandard();
-
-	function useFile() {
-		if (!isExisting) {
-			state.fieldData.type = 'uuid';
-
-			state.relations = [
-				{
-					collection: collection,
-					field: '',
-					related_collection: 'directus_files',
-					meta: {
-						sort_field: null,
-					},
-				},
-			];
-		}
-
-		watch(
-			() => state.fieldData.field,
-			() => {
-				state.relations[0].field = state.fieldData.field;
-			}
-		);
-	}
-
-	function useM2O() {
-		const syncNewCollectionsM2O = throttle(() => {
-			const collectionName = state.relations[0].related_collection;
-
-			if (!collectionName || collectionExists(collectionName)) {
-				state.newCollections = [];
-			} else {
-				const pkFieldName = state.newCollections?.[0]?.fields?.[0]?.field || 'id';
-
-				state.newCollections = [
-					{
-						collection: collectionName,
-						fields: [
-							{
-								field: pkFieldName,
-								type: 'integer',
-								schema: {
-									has_auto_increment: true,
-									is_primary_key: true,
-								},
-								meta: {
-									hidden: true,
-								},
-							},
-						],
-					},
-				];
-			}
-		}, 50);
-
-		if (isExisting === false) {
-			state.relations = [
-				{
-					collection: collection,
-					field: '',
-					related_collection: '',
-					meta: {
-						sort_field: null,
-					},
-					schema: {
-						on_delete: 'SET NULL',
-					},
-				},
-			];
-		}
-
-		watch(
-			() => state.relations[0].collection,
-			() => {
-				if (state.relations[0].collection === state.relations[0].related_collection) {
-					state.relations[0].schema = {
-						...state.relations[0].schema,
-						on_delete: 'NO ACTION',
-					};
-				}
-			}
-		);
-
-		watch(
-			() => state.fieldData.field,
-			() => {
-				state.relations[0].field = state.fieldData.field;
-			}
-		);
-
-		// Make sure to keep the current m2o field type in sync with the primary key of the
-		// selected related collection
-		watch(
-			() => state.relations[0].related_collection,
-			() => {
-				if (state.relations[0].related_collection && collectionExists(state.relations[0].related_collection)) {
-					const field = fieldsStore.getPrimaryKeyFieldForCollection(state.relations[0].related_collection);
-					state.fieldData.type = field.type;
-				} else {
-					state.fieldData.type = 'integer';
-				}
-			}
-		);
-
-		// Sync the "auto generate related o2m"
-		watch(
-			() => state.relations[0].related_collection,
-			() => {
-				if (state.newFields.length > 0 && state.relations[0].related_collection) {
-					state.newFields[0].collection = state.relations[0].related_collection;
-				}
-			}
-		);
-
-		watch([() => state.relations[0].related_collection], syncNewCollectionsM2O);
-	}
-
-	function useO2M() {
-		delete state.fieldData.schema;
-		state.fieldData.type = 'alias';
-
-		const syncNewCollectionsO2M = throttle(([collectionName, fieldName, sortField]) => {
-			state.newCollections = state.newCollections.filter((col: any) => ['related'].includes(col.$type) === false);
-			state.newFields = state.newFields.filter((field) => ['manyRelated', 'sort'].includes(field.$type!) === false);
-
-			if (collectionName && collectionExists(collectionName) === false) {
-				state.newCollections.push({
-					$type: 'related',
-					collection: collectionName,
-					fields: [
-						{
-							field: 'id',
-							type: 'integer',
-							schema: {
-								has_auto_increment: true,
-								is_primary_key: true,
-							},
-							meta: {
-								hidden: true,
-							},
-						},
-					],
-				});
-			}
-
-			if (fieldName && fieldExists(collectionName, fieldName) === false) {
-				state.newFields.push({
-					$type: 'manyRelated',
-					collection: collectionName,
-					field: fieldName,
-					type: collectionExists(collection)
-						? fieldsStore.getPrimaryKeyFieldForCollection(collection)?.type
-						: 'integer',
-					schema: {},
-				});
-			}
-
-			if (sortField && fieldExists(collectionName, sortField) === false) {
-				state.newFields.push({
-					$type: 'sort',
-					collection: collectionName,
-					field: sortField,
-					type: 'integer',
-					schema: {},
-					meta: {
-						hidden: true,
-					},
-				});
-			}
-		}, 50);
-
-		if (!isExisting) {
-			state.fieldData.meta = {
-				...(state.fieldData.meta || {}),
-				special: ['o2m'],
-			};
-
-			state.relations = [
-				{
-					collection: '',
-					field: '',
-					related_collection: collection,
-					meta: {
-						one_field: state.fieldData.field,
-						sort_field: null,
-						one_deselect_action: 'nullify',
-					},
-					schema: {
-						on_delete: 'SET NULL',
-					},
-				},
-			];
-		}
-
-		watch(
-			() => state.relations[0].collection,
-			() => {
-				if (state.relations[0].collection === state.relations[0].related_collection) {
-					state.relations[0].schema = {
-						...state.relations[0].schema,
-						on_delete: 'NO ACTION',
-					};
-				}
-			}
-		);
-
-		watch(
-			() => state.fieldData.field,
-			() => {
-				state.relations[0].meta = {
-					...(state.relations[0].meta || {}),
-					one_field: state.fieldData.field,
-				};
-			}
-		);
-
-		watch(
-			[() => state.relations[0].collection, () => state.relations[0].field, () => state.relations[0].meta?.sort_field],
-			([collectionName, fieldName, sortField]) => {
-				syncNewCollectionsO2M([collectionName, fieldName, sortField]);
-				syncOnDeleteTrigger(collectionName, fieldName);
-			}
-		);
-
-		/**
-		 * Syncs the on_delete value of the existing relationship with the new o2m one, so you don't
-		 * accidentally override it
-		 */
-		function syncOnDeleteTrigger(collection?: string | null, field?: string | null) {
-			if (!collection || !field) return;
-
-			const existingRelation = relationsStore.getRelationForField(collection, field) || {};
-			if (!existingRelation) return;
-
-			state.relations[0].schema = {
-				on_delete: existingRelation.schema?.on_delete || 'SET NULL',
-			};
-		}
-	}
-
-	function useM2M() {
-		delete state.fieldData.schema;
-		state.fieldData.type = 'alias';
-
-		const syncNewCollectionsM2M = throttle(
-			([junctionCollection, manyCurrent, manyRelated, relatedCollection, sortField]) => {
-				state.newCollections = state.newCollections.filter(
-					(col: any) => ['junction', 'related'].includes(col.$type) === false
-				);
-				state.newFields = state.newFields.filter(
-					(field) => ['manyCurrent', 'manyRelated', 'sort'].includes(field.$type!) === false
-				);
-
-				if (collectionExists(junctionCollection) === false) {
-					state.newCollections.push({
-						$type: 'junction',
-						collection: junctionCollection,
-						meta: {
-							hidden: true,
-							icon: 'import_export',
-						},
-						schema: {
-							name: junctionCollection,
-						},
-						fields: [
-							{
-								field: 'id',
-								type: 'integer',
-								schema: {
-									has_auto_increment: true,
-								},
-								meta: {
-									hidden: true,
-								},
-							},
-						],
-					});
-				}
-
-				if (fieldExists(junctionCollection, manyCurrent) === false) {
-					state.newFields.push({
-						$type: 'manyCurrent',
-						collection: junctionCollection,
-						field: manyCurrent,
-						type: fieldsStore.getPrimaryKeyFieldForCollection(collection)!.type,
-						schema: {},
-						meta: {
-							hidden: true,
-						},
-					});
-				}
-
-				if (fieldExists(junctionCollection, manyRelated) === false) {
-					if (type === 'translations') {
-						state.newFields.push({
-							$type: 'manyRelated',
-							collection: junctionCollection,
-							field: manyRelated,
-							type: collectionExists(relatedCollection)
-								? fieldsStore.getPrimaryKeyFieldForCollection(relatedCollection)?.type
-								: 'string',
-							schema: {},
-							meta: {
-								hidden: true,
-							},
-						});
-					} else {
-						state.newFields.push({
-							$type: 'manyRelated',
-							collection: junctionCollection,
-							field: manyRelated,
-							type: collectionExists(relatedCollection)
-								? fieldsStore.getPrimaryKeyFieldForCollection(relatedCollection)?.type
-								: 'integer',
-							schema: {},
-							meta: {
-								hidden: true,
-							},
-						});
-					}
-				}
-
-				if (collectionExists(relatedCollection) === false) {
-					if (type === 'translations') {
-						state.newCollections.push({
-							$type: 'related',
-							collection: relatedCollection,
-							meta: {
-								icon: 'translate',
-							},
-							fields: [
-								{
-									field: 'code',
-									type: 'string',
-									schema: {
-										is_primary_key: true,
-									},
-									meta: {
-										interface: 'input',
-										options: {
-											iconLeft: 'vpn_key',
-										},
-										width: 'half',
-									},
-								},
-								{
-									field: 'name',
-									type: 'string',
-									schema: {},
-									meta: {
-										interface: 'input',
-										options: {
-											iconLeft: 'translate',
-										},
-										width: 'half',
-									},
-								},
-							],
-						});
-					} else {
-						state.newCollections.push({
-							$type: 'related',
-							collection: relatedCollection,
-							fields: [
-								{
-									field: 'id',
-									type: 'integer',
-									schema: {
-										has_auto_increment: true,
-									},
-									meta: {
-										hidden: true,
-									},
-								},
-							],
-						});
-					}
-				}
-
-				if (type === 'translations') {
-					if (collectionExists(relatedCollection) === false) {
-						state.newRows = {
-							[relatedCollection]: [
-								{
-									code: 'en-US',
-									name: 'English',
-								},
-								{
-									code: 'de-DE',
-									name: 'German',
-								},
-								{
-									code: 'fr-FR',
-									name: 'French',
-								},
-								{
-									code: 'ru-RU',
-									name: 'Russian',
-								},
-								{
-									code: 'es-ES',
-									name: 'Spanish',
-								},
-								{
-									code: 'it-IT',
-									name: 'Italian',
-								},
-								{
-									code: 'pt-BR',
-									name: 'Portuguese',
-								},
-							],
-						};
-					} else {
-						state.newRows = {};
-					}
-				}
-
-				if (sortField && fieldExists(junctionCollection, sortField) === false) {
-					state.newFields.push({
-						$type: 'sort',
-						collection: junctionCollection,
-						field: sortField,
-						type: 'integer',
-						schema: {},
-						meta: {
-							hidden: true,
-						},
-					});
-				}
-			},
-			50
-		);
-
-		if (!isExisting) {
-			state.fieldData.meta = {
-				...(state.fieldData.meta || {}),
-				special: [type],
-			};
-
-			state.relations = [
-				{
-					collection: '',
-					field: '',
-					related_collection: collection,
-					meta: {
-						one_field: state.fieldData.field,
-						sort_field: null,
-						one_deselect_action: 'nullify',
-					},
-					schema: {
-						on_delete: 'SET NULL',
-					},
-				},
-				{
-					collection: '',
-					field: '',
-					related_collection: '',
-					meta: {
-						one_field: null,
-						sort_field: null,
-						one_deselect_action: 'nullify',
-					},
-					schema: {
-						on_delete: 'SET NULL',
-					},
-				},
-			];
-		}
-
-		watch(
-			() => state.relations[0].collection,
-			() => {
-				if (state.relations[0].collection === state.relations[0].related_collection) {
-					state.relations[0].schema = {
-						...state.relations[0].schema,
-						on_delete: 'NO ACTION',
-					};
-				}
-			}
-		);
-
-		watch(
-			() => state.relations[1].collection,
-			() => {
-				if (state.relations[1].collection === state.relations[1].related_collection) {
-					state.relations[1].schema = {
-						...state.relations[1].schema,
-						on_delete: 'NO ACTION',
-					};
-				}
-			}
-		);
-
-		watch(
-			() => state.relations[0].field,
-			() => {
-				state.relations[1].meta = {
-					...(state.relations[1].meta || {}),
-					junction_field: state.relations[0].field,
-				};
-			}
-		);
-
-		watch(
-			() => state.relations[1].field,
-			() => {
-				state.relations[0].meta = {
-					...(state.relations[0].meta || {}),
-					junction_field: state.relations[1].field,
-				};
-			}
-		);
-
-		watch(
-			[
-				() => state.relations[0].collection,
-				() => state.relations[0].field,
-				() => state.relations[1].field,
-				() => state.relations[1].related_collection,
-				() => state.relations[0].meta?.sort_field,
-			],
-			([junctionCollection, manyCurrent, manyRelated, relatedCollection, sortField]) => {
-				syncNewCollectionsM2M([junctionCollection, manyCurrent, manyRelated, relatedCollection, sortField]);
-				syncOnDeleteTrigger(junctionCollection, manyCurrent);
-			}
-		);
-
-		watch(
-			() => state.fieldData.field,
-			() => {
-				state.relations[0].meta = {
-					...(state.relations[0].meta || {}),
-					one_field: state.fieldData.field,
-				};
-
-				/**
-				 * When the pane is opened, if the current fieldname is the actual name of a related collection, we auto-fill all
-				 * the fields as if that related collection was already selected
-				 */
-				if (state.fieldData.field && collectionExists(state.fieldData.field) && type !== 'translations') {
-					autoFillFields(state.fieldData.field);
-				}
-			}
-		);
-
-		if (type === 'files') {
-			nextTick(() => {
-				state.relations[1].related_collection = state.relations[1].related_collection || 'directus_files';
-			});
-		}
-
-		if (type !== 'translations') {
-			let stop: WatchStopHandle;
-
-			watch(
-				() => state.autoFillJunctionRelation,
-				(startWatching) => {
-					if (startWatching) {
-						stop = watch(
-							() => state.relations[1].related_collection,
-							(newRelatedCollection) => autoFillFields(newRelatedCollection)
-						);
-					} else {
-						stop?.();
-					}
-				},
-				{ immediate: true }
-			);
-		}
-
-		if (type === 'translations') {
-			watch(
-				() => state.relations[0].collection,
-				(newManyCollection) => {
-					state.relations[1].collection = newManyCollection;
-				},
-				{ immediate: true }
-			);
-
-			if (isExisting === false) {
-				state.relations[0].collection = `${collection}_translations`;
-				state.relations[0].field = `${collection}_${fieldsStore.getPrimaryKeyFieldForCollection(collection)?.field}`;
-				state.relations[1].related_collection = 'languages';
-
-				const relatedPKField =
-					fieldsStore.getPrimaryKeyFieldForCollection(state.relations[1].related_collection)?.field || 'id';
-				state.relations[1].field = `${state.relations[1].related_collection}_${relatedPKField}`;
-
-				state.fieldData.field = 'translations';
-				state.relations[0].meta = {
-					...(state.relations[0].meta || {}),
-					one_field: 'translations',
-				};
-			}
-		}
-
-		function autoFillFields(relatedCollection: string | null | undefined) {
-			const currentPKField = fieldsStore.getPrimaryKeyFieldForCollection(collection)?.field || 'id';
-
-			if (!relatedCollection) {
-				state.relations[0].collection = undefined;
-				state.relations[1].collection = undefined;
-
-				state.relations[0].related_collection = collection;
-				state.relations[1].related_collection = undefined;
-
-				state.relations[0].field = undefined;
-				state.relations[1].field = undefined;
-			} else {
-				const junctionCollection = getAutomaticJunctionCollectionName(collection, relatedCollection);
-				const relatedPKField =
-					fieldsStore.getPrimaryKeyFieldForCollection(relatedCollection)?.field ||
-					state.newCollections?.find((collection) => collection.$type === 'related')?.fields?.[0]?.field ||
-					'id';
-
-				state.relations[0].collection = junctionCollection;
-				state.relations[1].collection = junctionCollection;
-
-				state.relations[0].related_collection = collection;
-				state.relations[1].related_collection = relatedCollection;
-
-				state.relations[0].field = `${collection}_${currentPKField}`;
-				state.relations[1].field = `${relatedCollection}_${relatedPKField}`;
-
-				if (state.relations[0].field === state.relations[1].field) {
-					state.relations[1].field = `related_${state.relations[1].field}`;
-				}
-			}
-		}
-
-		/**
-		 * Generate junction collection name for two given collections. Most of the time, it'll just
-		 * combine the two with a `_`. It'll check if that collection already exists, and append an
-		 * index if the junction collection already exists and is used for something else
-		 */
-		function getAutomaticJunctionCollectionName(collectionA: string, collectionB: string) {
-			let index = 0;
-			let name = getName(index);
-
-			while (collectionExists(name)) {
-				index++;
-				name = getName(index);
-			}
-
-			return name;
-
-			function getName(index: number) {
-				let name = `${collectionA}_${collectionB}`;
-
-				if (name.startsWith('directus_')) {
-					name = 'junction_' + name;
-				}
-
-				if (index) return name + '_' + index;
-				return name;
-			}
-		}
-
-		/**
-		 * Syncs the on_delete value of the existing relationship with the new m2m one, so you don't
-		 * accidentally override it
-		 */
-		function syncOnDeleteTrigger(collection?: string | null, field?: string | null) {
-			if (!collection || !field) return;
-
-			const existingRelation = relationsStore.getRelationForField(collection, field) || {};
-			if (!existingRelation) return;
-
-			state.relations[0].schema = {
-				on_delete: existingRelation.schema?.on_delete || 'SET NULL',
-			};
-		}
-	}
-
-	function useM2A() {
-		delete state.fieldData.schema;
-		state.fieldData.type = 'alias';
-
-		const syncNewCollectionsM2A = throttle(
-			([junctionCollection, manyCurrent, manyRelated, oneCollectionField, sortField]) => {
-				state.newCollections = state.newCollections.filter(
-					(col: any) => ['junction', 'related'].includes(col.$type) === false
-				);
-
-				state.newFields = state.newFields.filter(
-					(field) => ['manyCurrent', 'manyRelated', 'collectionField', 'sort'].includes(field.$type!) === false
-				);
-
-				if (collectionExists(junctionCollection) === false) {
-					state.newCollections.push({
-						$type: 'junction',
-						collection: junctionCollection,
-						meta: {
-							hidden: true,
-							icon: 'import_export',
-						},
-						schema: {
-							name: junctionCollection,
-						},
-						fields: [
-							{
-								field: 'id',
-								type: 'integer',
-								schema: {
-									has_auto_increment: true,
-								},
-								meta: {
-									hidden: true,
-								},
-							},
-						],
-					});
-				}
-
-				if (fieldExists(junctionCollection, manyCurrent) === false) {
-					state.newFields.push({
-						$type: 'manyCurrent',
-						collection: junctionCollection,
-						field: manyCurrent,
-						type: fieldsStore.getPrimaryKeyFieldForCollection(collection)!.type,
-						schema: {},
-						meta: {
-							hidden: true,
-						},
-					});
-				}
-
-				if (fieldExists(junctionCollection, manyRelated) === false) {
-					state.newFields.push({
-						$type: 'manyRelated',
-						collection: junctionCollection,
-						field: manyRelated,
-						// We'll have to save the foreign key as a string, as that's the only way to safely
-						// be able to store the PK of multiple typed collections
-						type: 'string',
-						schema: {},
-						meta: {
-							hidden: true,
-						},
-					});
-				}
-
-				if (fieldExists(junctionCollection, oneCollectionField) === false) {
-					state.newFields.push({
-						$type: 'collectionField',
-						collection: junctionCollection,
-						field: oneCollectionField,
-						type: 'string', // directus_collections.collection is a string
-						schema: {},
-						meta: {
-							hidden: true,
-						},
-					});
-				}
-
-				if (sortField && fieldExists(junctionCollection, sortField) === false) {
-					state.newFields.push({
-						$type: 'sort',
-						collection: junctionCollection,
-						field: sortField,
-						type: 'integer',
-						schema: {},
-						meta: {
-							hidden: true,
-						},
-					});
-				}
-			},
-			50
-		);
-
-		if (!isExisting) {
-			state.fieldData.meta = {
-				...(state.fieldData.meta || {}),
-				special: [type],
-			};
-
-			state.relations = [
-				{
-					collection: '',
-					field: '',
-					related_collection: collection,
-					meta: {
-						one_field: state.fieldData.field,
-						sort_field: null,
-						one_deselect_action: 'nullify',
-					},
-					schema: {
-						on_delete: 'SET NULL',
-					},
-				},
-				{
-					collection: '',
-					field: '',
-					related_collection: null,
-					meta: {
-						one_field: null,
-						one_allowed_collections: [],
-						one_collection_field: '',
-						sort_field: null,
-						one_deselect_action: 'nullify',
-					},
-				},
-			];
-		}
-
-		watch(
-			() => state.relations[0].collection,
-			() => {
-				if (state.relations[0].collection === state.relations[0].related_collection) {
-					state.relations[0].schema = {
-						...state.relations[0].schema,
-						on_delete: 'NO ACTION',
-					};
-				}
-			}
-		);
-
-		watch(
-			() => state.relations[0].field,
-			() => {
-				state.relations[1].meta = {
-					...(state.relations[1].meta || {}),
-					junction_field: state.relations[0].field,
-				};
-			}
-		);
-
-		watch(
-			() => state.relations[1].field,
-			() => {
-				state.relations[0].meta = {
-					...(state.relations[0].meta || {}),
-					junction_field: state.relations[1].field,
-				};
-			}
-		);
-
-		watch(
-			[
-				() => state.relations[0].collection,
-				() => state.relations[0].field,
-				() => state.relations[1].field,
-				() => state.relations[1].meta?.one_collection_field,
-				() => state.relations[0].meta?.sort_field,
-			],
-			syncNewCollectionsM2A
-		);
-
-		watch(
-			() => state.fieldData.field,
-			() => {
-				state.relations[0].meta = {
-					...(state.relations[0].meta || {}),
-					one_field: state.fieldData.field,
-				};
-
-				if (state.autoFillJunctionRelation) {
-					state.relations[0].collection = `${state.relations[0].related_collection}_${state.fieldData.field}`;
-					state.relations[1].collection = `${state.relations[0].related_collection}_${state.fieldData.field}`;
-				}
-			}
-		);
-
-		watch(
-			() => state.autoFillJunctionRelation,
-			() => {
-				if (state.autoFillJunctionRelation === true) {
-					const currentPrimaryKeyField = fieldsStore.getPrimaryKeyFieldForCollection(collection)?.field || 'id';
-					state.relations[0].collection = `${state.relations[0].related_collection}_${state.fieldData.field}`;
-					state.relations[1].collection = `${state.relations[0].related_collection}_${state.fieldData.field}`;
-					state.relations[0].field = `${state.relations[0].related_collection}_${currentPrimaryKeyField}`;
-					state.relations[1].meta = {
-						...(state.relations[1].meta || {}),
-						one_collection_field: 'collection',
-					};
-					state.relations[1].field = 'item';
-				}
-			},
-			{ immediate: true }
-		);
-	}
-
-	function usePresentation() {
-		delete state.fieldData.schema;
-		state.fieldData.type = 'alias';
-		state.fieldData.meta = {
-			...(state.fieldData.meta || {}),
-			special: ['alias', 'no-data'],
-		};
-	}
-
-	function useGroup() {
-		delete state.fieldData.schema;
-		state.fieldData.type = 'alias';
-		state.fieldData.meta = {
-			...(state.fieldData.meta || {}),
-			special: ['alias', 'no-data', 'group'],
-		};
-	}
-
-	function useStandard() {
-		watch(
-			() => state.fieldData.type,
-			() => {
-				state.fieldData.meta = {
-					...(state.fieldData.meta || {}),
-					interface: null,
-					options: null,
-					display: null,
-					display_options: null,
-					special: null,
-				};
-
-				state.fieldData.schema = {
-					...(state.fieldData.schema || {}),
-					default_value: undefined,
-					max_length: undefined,
-					is_nullable: true,
-					geometry_type: undefined,
-				};
-
-				switch (state.fieldData.type) {
-					case 'uuid':
-						state.fieldData.meta.special = ['uuid'];
-						break;
-					case 'hash':
-						state.fieldData.meta.special = ['hash'];
-						break;
-					case 'json':
-						state.fieldData.meta.special = ['json'];
-						break;
-					case 'csv':
-						state.fieldData.meta.special = ['csv'];
-						break;
-					case 'boolean':
-						state.fieldData.meta.special = ['boolean'];
-						state.fieldData.schema.default_value = false;
-						state.fieldData.schema.is_nullable = false;
-						break;
-					case 'geometry':
-						state.fieldData.meta.special = ['geometry'];
-						break;
-				}
-			}
-		);
-	}
-
-	function collectionExists(collection: string) {
-		return collectionsStore.getCollection(collection) !== null;
-	}
-
-	function fieldExists(collection: string, field: string) {
-		return collectionExists(collection) && !!fieldsStore.getField(collection, field);
-	}
-}
-
-function clearLocalStore(): void {
-	state = reactive({
-		fieldData: {
-			field: '',
-			type: 'string',
-			schema: {
-				default_value: undefined,
-				max_length: undefined,
-				is_nullable: true,
-				is_unique: false,
-				numeric_precision: null,
-				numeric_scale: null,
-				geometry_type: undefined,
-			},
-			meta: {
-				hidden: false,
-				interface: undefined,
-				options: undefined,
-				display: undefined,
-				display_options: undefined,
-				readonly: false,
-				special: undefined,
-				note: undefined,
-			},
-		},
-		relations: [],
-		newCollections: [],
-		newFields: [],
-		updateFields: [],
-		newRows: {},
-
-		autoFillJunctionRelation: false,
-	});
-}
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/file.ts b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/file.ts
new file mode 100644
index 0000000000..5ed81944c8
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/file.ts
@@ -0,0 +1,43 @@
+import { StateUpdates, State, HelperFunctions } from '../types';
+import { set } from 'lodash';
+
+export function applyChanges(updates: StateUpdates, state: State, helperFn: HelperFunctions) {
+	const { hasChanged } = helperFn;
+
+	if (hasChanged('localType')) {
+		setTypeToUUID(updates);
+		prepareRelation(updates, state);
+	}
+
+	if (hasChanged('field.field')) {
+		updateRelationField(updates);
+	}
+}
+
+export function setTypeToUUID(updates: StateUpdates) {
+	set(updates, 'field.type', 'uuid');
+}
+
+export function prepareRelation(updates: StateUpdates, state: State) {
+	// Add if existing
+	if (!updates.relations) updates.relations = {};
+
+	updates.relations.m2o = {
+		collection: state.collection,
+		field: state.field.field,
+		related_collection: 'directus_files',
+		meta: {
+			sort_field: null,
+		},
+		schema: {
+			on_delete: 'SET NULL',
+		},
+	};
+}
+
+export function updateRelationField(updates: StateUpdates) {
+	if (!updates.field?.field) return;
+
+	if (!updates.relations?.m2o) updates.relations = { m2o: {} };
+	set(updates, 'relations.m2o.field', updates.field.field);
+}
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/files.ts b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/files.ts
new file mode 100644
index 0000000000..26c1032db6
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/files.ts
@@ -0,0 +1,253 @@
+import { StateUpdates, State, HelperFunctions } from '../types';
+import { set } from 'lodash';
+import { useCollectionsStore, useFieldsStore } from '@/stores';
+
+export function applyChanges(updates: StateUpdates, state: State, helperFn: HelperFunctions) {
+	const { hasChanged } = helperFn;
+
+	if (hasChanged('localType')) {
+		removeSchema(updates);
+		setTypeToAlias(updates);
+		prepareRelation(updates, state);
+		setDefaults(updates, state);
+	}
+
+	if (hasChanged('field.field')) {
+		updateRelationField(updates);
+	}
+
+	if (hasChanged('relations.m2o.related_collection')) {
+		preventCircularConstraint(updates, state, helperFn);
+	}
+
+	if (hasChanged('relations.o2m.field')) {
+		setJunctionFields(updates, state, helperFn);
+	}
+
+	if (hasChanged('relations.m2o.field')) {
+		setJunctionFields(updates, state, helperFn);
+	}
+
+	if (hasChanged('relations.o2m.collection') || hasChanged('relations.m2o.collection')) {
+		matchJunctionCollectionName(updates);
+	}
+
+	if (
+		[
+			'relations.o2m.collection',
+			'relations.o2m.field',
+			'relations.m2o.field',
+			'relations.m2o.related_collection',
+			'relations.o2m.meta?.sort_field',
+		].some(hasChanged)
+	) {
+		generateCollections(updates, state, helperFn);
+		generateFields(updates, state, helperFn);
+	}
+}
+
+export function removeSchema(updates: StateUpdates) {
+	set(updates, 'field.schema', undefined);
+}
+
+export function setTypeToAlias(updates: StateUpdates) {
+	set(updates, 'field.type', 'alias');
+}
+
+export function prepareRelation(updates: StateUpdates, state: State) {
+	if (!updates.relations) updates.relations = {};
+
+	updates.relations.o2m = {
+		collection: undefined,
+		field: undefined,
+		related_collection: state.collection,
+		meta: {
+			one_field: updates.field?.field ?? state.field.field,
+			sort_field: null,
+			one_deselect_action: 'nullify',
+		},
+		schema: {
+			on_delete: 'SET NULL',
+		},
+	};
+
+	updates.relations.m2o = {
+		collection: undefined,
+		field: undefined,
+		related_collection: undefined,
+		meta: {
+			one_field: null,
+			sort_field: null,
+			one_deselect_action: 'nullify',
+		},
+		schema: {
+			on_delete: 'SET NULL',
+		},
+	};
+}
+
+export function updateRelationField(updates: StateUpdates) {
+	if (!updates.field?.field) return;
+
+	if (!updates.relations?.o2m) updates.relations = { o2m: {} };
+	set(updates, 'relations.o2m.meta.one_field', updates.field.field);
+}
+
+export function preventCircularConstraint(updates: StateUpdates, _state: State, { getCurrent }: HelperFunctions) {
+	if (getCurrent('relations.o2m.collection') === getCurrent('relations.o2m.related_collection')) {
+		set(updates, 'relations.o2m.schema.on_delete', 'NO ACTION');
+	}
+
+	if (getCurrent('relations.m2o.collection') === getCurrent('relations.m2o.related_collection')) {
+		set(updates, 'relations.m2o.schema.on_delete', 'NO ACTION');
+	}
+}
+
+export function setJunctionFields(updates: StateUpdates, _state: State, { getCurrent }: HelperFunctions) {
+	set(updates, 'relations.o2m.meta.junction_field', getCurrent('relations.m2o.field'));
+	set(updates, 'relations.m2o.meta.junction_field', getCurrent('relations.o2m.field'));
+}
+
+function collectionExists(collection: string) {
+	return !!useCollectionsStore().getCollection(collection);
+}
+
+function fieldExists(collection: string, field: string) {
+	return !!useFieldsStore().getField(collection, field);
+}
+
+export function generateCollections(updates: StateUpdates, state: State, { getCurrent }: HelperFunctions) {
+	const junctionCollection = getCurrent('relations.o2m.collection');
+
+	if (!junctionCollection || collectionExists(junctionCollection)) {
+		set(updates, 'collections.junction', undefined);
+	} else {
+		set(updates, 'collections.junction', {
+			collection: junctionCollection,
+			meta: {
+				hidden: true,
+				icon: 'import_export',
+			},
+			schema: {
+				name: junctionCollection,
+			},
+			fields: [
+				{
+					field: 'id',
+					type: 'integer',
+					schema: {
+						has_auto_increment: true,
+					},
+					meta: {
+						hidden: true,
+					},
+				},
+			],
+		});
+	}
+}
+
+function generateFields(updates: StateUpdates, state: State, { getCurrent }: HelperFunctions) {
+	const fieldsStore = useFieldsStore();
+
+	const currentPrimaryKeyField = fieldsStore.getPrimaryKeyFieldForCollection(state.collection!);
+	const junctionCollection = getCurrent('relations.o2m.collection');
+	const junctionCurrent = getCurrent('relations.o2m.field');
+	const junctionRelated = getCurrent('relations.m2o.field');
+	const relatedCollection = getCurrent('relations.m2o.related_collection');
+	const relatedPrimaryKeyField =
+		fieldsStore.getPrimaryKeyFieldForCollection(relatedCollection) ?? getCurrent('collections.related.fields[0]');
+	const sort = getCurrent('relations.o2m.meta.sort_field');
+
+	if (junctionCollection && junctionCurrent && fieldExists(junctionCollection, junctionCurrent) === false) {
+		set(updates, 'fields.junctionCurrent', {
+			collection: junctionCollection,
+			field: junctionCurrent,
+			type: currentPrimaryKeyField?.type ?? 'integer',
+			schema: {},
+			meta: {
+				hidden: true,
+			},
+		});
+	} else {
+		set(updates, 'fields.junctionCurrent', undefined);
+	}
+
+	if (junctionCollection && junctionRelated && fieldExists(junctionCollection, junctionRelated) === false) {
+		set(updates, 'fields.junctionRelated', {
+			collection: junctionCollection,
+			field: junctionRelated,
+			type: relatedPrimaryKeyField?.type ?? 'uuid',
+			schema: {},
+			meta: {
+				hidden: true,
+			},
+		});
+	} else {
+		set(updates, 'fields.junctionRelated', undefined);
+	}
+
+	if (junctionCollection && sort && fieldExists(junctionCollection, sort) === false) {
+		set(updates, 'fields.sort', {
+			collection: junctionCollection,
+			field: sort,
+			type: 'integer',
+			schema: {},
+			meta: {
+				hidden: true,
+			},
+		});
+	} else {
+		set(updates, 'fields.sort', undefined);
+	}
+}
+
+export function setDefaults(updates: StateUpdates, state: State) {
+	const fieldsStore = useFieldsStore();
+
+	const currentCollection = state.collection!;
+	const currentCollectionPrimaryKeyField =
+		fieldsStore.getPrimaryKeyFieldForCollection(currentCollection)?.field ?? 'id';
+
+	const junctionName = getAutomaticJunctionCollectionName(currentCollection);
+
+	set(updates, 'relations.o2m.collection', junctionName);
+	set(updates, 'relations.o2m.field', `${currentCollection}_${currentCollectionPrimaryKeyField}`);
+	set(updates, 'relations.m2o.collection', junctionName);
+	set(updates, 'relations.m2o.related_collection', 'directus_files');
+
+	set(updates, 'relations.m2o.field', 'directus_files_id');
+}
+
+export function matchJunctionCollectionName(updates: StateUpdates) {
+	if (updates?.relations?.o2m?.collection && updates.relations.o2m.collection !== updates.relations.m2o?.collection) {
+		set(updates, 'relations.m2o.collection', updates.relations.o2m.collection);
+	}
+
+	if (updates?.relations?.m2o?.collection && updates.relations.m2o.collection !== updates.relations.o2m?.collection) {
+		set(updates, 'relations.o2m.collection', updates.relations.m2o.collection);
+	}
+}
+
+export function getAutomaticJunctionCollectionName(collectionA: string) {
+	let index = 0;
+	let name = getName(index);
+
+	while (collectionExists(name)) {
+		index++;
+		name = getName(index);
+	}
+
+	return name;
+
+	function getName(index: number) {
+		let name = `${collectionA}_files`;
+
+		if (name.startsWith('directus_')) {
+			name = 'junction_' + name;
+		}
+
+		if (index) return name + '_' + index;
+		return name;
+	}
+}
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/global.ts b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/global.ts
new file mode 100644
index 0000000000..569336db68
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/global.ts
@@ -0,0 +1,96 @@
+import { set } from 'lodash';
+import { State, StateUpdates } from '../types';
+import { getInterfaces } from '@/interfaces';
+
+/**
+ * In case a relational field removed the schema object, we'll have to make sure it's re-added
+ * for the other types
+ */
+export function resetSchema(updates: StateUpdates, state: State) {
+	if (state.field.schema === undefined) {
+		set(updates, 'field.schema', {});
+	}
+}
+
+/**
+ * When an interface is chosen before a local type is set (which is the case when using the
+ * simple flow), we'll set the localType to match whatever the first supported localType is of
+ * the interface
+ */
+export function setLocalTypeForInterface(updates: StateUpdates) {
+	if (!updates.field?.meta?.interface) return;
+
+	const chosenInterface = getInterfaces().interfaces.value.find((inter) => inter.id === updates.field!.meta!.interface);
+
+	if (!chosenInterface) return;
+
+	const localType = chosenInterface?.localTypes?.[0] ?? 'standard';
+	set(updates, 'localType', localType);
+}
+
+/**
+ * Default to the first available type for this interface, if the currently selected type doesn't
+ * work with this interface. Makes sure you never end up saving like "Geometry" for a "Boolean"
+ * field etc.
+ */
+export function setTypeForInterface(updates: StateUpdates, state: State) {
+	if (!updates.field?.meta?.interface) return;
+
+	const chosenInterface = getInterfaces().interfaces.value.find((inter) => inter.id === updates.field!.meta!.interface);
+
+	if (!chosenInterface) return updates;
+
+	if (state.field.type && chosenInterface.types.includes(state.field.type)) return;
+
+	const defaultType = chosenInterface?.types[0];
+	set(updates, 'field.type', defaultType);
+}
+
+/**
+ * Make sure the special flag matches the relational/presentation localType. This isn't used when
+ * the local type is standard
+ */
+export function setSpecialForLocalType(updates: StateUpdates) {
+	if (updates?.localType === 'o2m') {
+		set(updates, 'field.meta.special', ['o2m']);
+	}
+
+	if (updates?.localType === 'm2m') {
+		set(updates, 'field.meta.special', ['m2m']);
+	}
+
+	if (updates?.localType === 'm2a') {
+		set(updates, 'field.meta.special', ['m2a']);
+	}
+
+	if (updates?.localType === 'm2o') {
+		set(updates, 'field.meta.special', ['m2o']);
+	}
+
+	if (updates?.localType === 'translations') {
+		set(updates, 'field.meta.special', ['translations']);
+	}
+
+	if (updates?.localType === 'file') {
+		set(updates, 'field.meta.special', ['file']);
+	}
+
+	if (updates?.localType === 'files') {
+		set(updates, 'field.meta.special', ['files']);
+	}
+
+	if (updates?.localType === 'presentation') {
+		set(updates, 'field.meta.special', ['alias', 'no-data']);
+	}
+
+	if (updates?.localType === 'group') {
+		set(updates, 'field.meta.special', ['alias', 'no-data', 'group']);
+	}
+}
+
+export function resetRelations(updates: StateUpdates) {
+	if (!updates.relations) updates.relations = {};
+	updates.relations.m2a = undefined;
+	updates.relations.m2o = undefined;
+	updates.relations.o2m = undefined;
+}
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/group.ts b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/group.ts
new file mode 100644
index 0000000000..416a36964c
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/group.ts
@@ -0,0 +1,24 @@
+import { StateUpdates, State, HelperFunctions } from '../types';
+import { set } from 'lodash';
+
+export function applyChanges(updates: StateUpdates, state: State, helperFn: HelperFunctions) {
+	const { hasChanged } = helperFn;
+
+	if (hasChanged('localType')) {
+		this.removeSchema(updates, state, helperFn);
+		this.setTypeToAlias(updates, state, helperFn);
+		this.setSpecialToGroup(updates, state, helperFn);
+	}
+}
+
+export function removeSchema(updates: StateUpdates) {
+	set(updates, 'field.schema', undefined);
+}
+
+export function setTypeToAlias(updates: StateUpdates) {
+	set(updates, 'field.type', 'alias');
+}
+
+export function setSpecialToGroup(updates: StateUpdates) {
+	set(updates, 'field.meta.special', ['alias', 'no-data', 'group']);
+}
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2a.ts b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2a.ts
new file mode 100644
index 0000000000..cbba6a8bf3
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2a.ts
@@ -0,0 +1,285 @@
+import { StateUpdates, State, HelperFunctions } from '../types';
+import { set } from 'lodash';
+import { useCollectionsStore, useFieldsStore } from '@/stores';
+
+export function applyChanges(updates: StateUpdates, state: State, helperFn: HelperFunctions) {
+	const { hasChanged } = helperFn;
+
+	if (hasChanged('localType')) {
+		removeSchema(updates);
+		setTypeToAlias(updates);
+		prepareRelation(updates, state);
+		setDefaults(updates, state, helperFn);
+	}
+
+	if (hasChanged('field.field')) {
+		updateRelationField(updates);
+		autoGenerateJunctionCollectionName(updates, state, helperFn);
+	}
+
+	if (hasChanged('relations.o2m.field')) {
+		setJunctionFields(updates, state, helperFn);
+	}
+
+	if (hasChanged('relations.m2o.field')) {
+		setJunctionFields(updates, state, helperFn);
+	}
+
+	if (hasChanged('relations.o2m.collection') || hasChanged('relations.m2o.collection')) {
+		matchJunctionCollectionName(updates);
+	}
+
+	if (hasChanged('fields.corresponding')) {
+		setRelatedOneFieldForCorrespondingField(updates);
+	}
+
+	if (
+		[
+			'relations.o2m.collection',
+			'relations.o2m.field',
+			'relations.m2o.field',
+			'relations.o2m.meta.sort_field',
+			'relations.m2o.meta.one_collection_field',
+		].some(hasChanged)
+	) {
+		generateCollections(updates, state, helperFn);
+		generateFields(updates, state, helperFn);
+	}
+}
+
+export function removeSchema(updates: StateUpdates) {
+	set(updates, 'field.schema', undefined);
+}
+
+export function setTypeToAlias(updates: StateUpdates) {
+	set(updates, 'field.type', 'alias');
+}
+
+export function prepareRelation(updates: StateUpdates, state: State) {
+	if (!updates.relations) updates.relations = {};
+
+	updates.relations.o2m = {
+		collection: undefined,
+		field: undefined,
+		related_collection: state.collection,
+		meta: {
+			one_field: updates.field?.field ?? state.field.field,
+			sort_field: null,
+			one_deselect_action: 'nullify',
+		},
+		schema: {
+			on_delete: 'SET NULL',
+		},
+	};
+
+	updates.relations.m2o = {
+		collection: undefined,
+		field: undefined,
+		related_collection: null,
+		meta: {
+			one_field: null,
+			sort_field: null,
+			one_deselect_action: 'nullify',
+		},
+		schema: null,
+	};
+}
+
+export function setDefaults(updates: StateUpdates, state: State, { getCurrent }: HelperFunctions) {
+	const fieldsStore = useFieldsStore();
+
+	const currentCollection = state.collection!;
+	const currentCollectionPrimaryKeyField =
+		fieldsStore.getPrimaryKeyFieldForCollection(currentCollection)?.field ?? 'id';
+
+	const junctionName = getAutomaticJunctionCollectionName(currentCollection, getCurrent('field.field'));
+
+	set(updates, 'relations.o2m.collection', junctionName);
+	set(updates, 'relations.o2m.field', `${currentCollection}_${currentCollectionPrimaryKeyField}`);
+	set(updates, 'relations.m2o.collection', junctionName);
+	set(updates, 'relations.m2o.field', 'item');
+	set(updates, 'relations.m2o.meta.one_collection_field', 'collection');
+}
+
+export function autoGenerateJunctionCollectionName(
+	updates: StateUpdates,
+	state: State,
+	{ getCurrent }: HelperFunctions
+) {
+	if (getCurrent('autoGenerateJunctionRelation') === false) return;
+
+	set(
+		updates,
+		'relations.o2m.collection',
+		getAutomaticJunctionCollectionName(getCurrent('collection'), getCurrent('field.field'))
+	);
+}
+
+export function getAutomaticJunctionCollectionName(collectionA: string, field: string) {
+	let index = 0;
+	let name = getName(index);
+
+	while (collectionExists(name)) {
+		index++;
+		name = getName(index);
+	}
+
+	return name;
+
+	function getName(index: number) {
+		let name = `${collectionA}_${field}`;
+
+		if (name.startsWith('directus_')) {
+			name = 'junction_' + name;
+		}
+
+		if (index) return name + '_' + index;
+		return name;
+	}
+}
+
+export function updateRelationField(updates: StateUpdates) {
+	if (!updates.field?.field) return;
+
+	if (!updates.relations?.o2m) updates.relations = { o2m: {} };
+	set(updates, 'relations.o2m.meta.one_field', updates.field.field);
+}
+
+export function preventCircularConstraint(updates: StateUpdates, _state: State, { getCurrent }: HelperFunctions) {
+	if (getCurrent('relations.o2m.collection') === getCurrent('relations.o2m.related_collection')) {
+		set(updates, 'relations.o2m.schema.on_delete', 'NO ACTION');
+	}
+}
+
+export function setJunctionFields(updates: StateUpdates, _state: State, { getCurrent }: HelperFunctions) {
+	set(updates, 'relations.o2m.meta.junction_field', getCurrent('relations.m2o.field'));
+	set(updates, 'relations.m2o.meta.junction_field', getCurrent('relations.o2m.field'));
+}
+
+function collectionExists(collection: string) {
+	return !!useCollectionsStore().getCollection(collection);
+}
+
+function fieldExists(collection: string, field: string) {
+	return !!useFieldsStore().getField(collection, field);
+}
+
+export function generateCollections(updates: StateUpdates, state: State, { getCurrent }: HelperFunctions) {
+	const junctionCollection = getCurrent('relations.o2m.collection');
+
+	if (!junctionCollection || collectionExists(junctionCollection)) {
+		set(updates, 'collections.junction', undefined);
+	} else {
+		set(updates, 'collections.junction', {
+			collection: junctionCollection,
+			meta: {
+				hidden: true,
+				icon: 'import_export',
+			},
+			schema: {
+				name: junctionCollection,
+			},
+			fields: [
+				{
+					field: 'id',
+					type: 'integer',
+					schema: {
+						has_auto_increment: true,
+					},
+					meta: {
+						hidden: true,
+					},
+				},
+			],
+		});
+	}
+}
+
+function generateFields(updates: StateUpdates, state: State, { getCurrent }: HelperFunctions) {
+	const fieldsStore = useFieldsStore();
+	const currentPrimaryKeyField = fieldsStore.getPrimaryKeyFieldForCollection(state.collection!);
+	const junctionCollection = getCurrent('relations.o2m.collection');
+	const junctionCurrent = getCurrent('relations.o2m.field');
+	const junctionRelated = getCurrent('relations.m2o.field');
+	const oneCollectionField = getCurrent('relations.m2o.meta.one_collection_field');
+	const sort = getCurrent('relations.o2m.meta.sort_field');
+
+	if (junctionCollection && junctionCurrent && fieldExists(junctionCollection, junctionCurrent) === false) {
+		set(updates, 'fields.junctionCurrent', {
+			collection: junctionCollection,
+			field: junctionCurrent,
+			type: currentPrimaryKeyField?.type ?? 'integer',
+			schema: {},
+			meta: {
+				hidden: true,
+			},
+		});
+	} else {
+		set(updates, 'fields.junctionCurrent', undefined);
+	}
+
+	if (junctionCollection && junctionRelated && fieldExists(junctionCollection, junctionRelated) === false) {
+		set(updates, 'fields.junctionRelated', {
+			collection: junctionCollection,
+			field: junctionRelated,
+			// We'll have to save the foreign key as a string, as that's the only way to safely
+			// be able to store the PK of multiple typed collections
+			type: 'string',
+			schema: {},
+			meta: {
+				hidden: true,
+			},
+		});
+	} else {
+		set(updates, 'fields.junctionRelated', undefined);
+	}
+
+	if (junctionCollection && oneCollectionField && fieldExists(junctionCollection, oneCollectionField) === false) {
+		set(updates, 'fields.oneCollectionField', {
+			collection: junctionCollection,
+			field: oneCollectionField,
+			// directus_collections.collection is a string
+			type: 'string',
+			schema: {},
+			meta: {
+				hidden: true,
+			},
+		});
+	} else {
+		set(updates, 'fields.oneCollectionField', undefined);
+	}
+
+	if (junctionCollection && sort && fieldExists(junctionCollection, sort) === false) {
+		set(updates, 'fields.sort', {
+			collection: junctionCollection,
+			field: sort,
+			type: 'integer',
+			schema: {},
+			meta: {
+				hidden: true,
+			},
+		});
+	} else {
+		set(updates, 'fields.sort', undefined);
+	}
+}
+
+export function matchJunctionCollectionName(updates: StateUpdates) {
+	if (updates?.relations?.o2m?.collection && updates.relations.o2m.collection !== updates.relations.m2o?.collection) {
+		set(updates, 'relations.m2o.collection', updates.relations.o2m.collection);
+	}
+
+	if (updates?.relations?.m2o?.collection && updates.relations.m2o.collection !== updates.relations.o2m?.collection) {
+		set(updates, 'relations.o2m.collection', updates.relations.m2o.collection);
+	}
+}
+
+export function setRelatedOneFieldForCorrespondingField(updates: StateUpdates) {
+	if (updates?.fields?.corresponding?.field) {
+		set(updates, 'relations.m2o.meta.one_field', updates.fields.corresponding.field);
+	}
+
+	if (!updates.fields?.corresponding) {
+		set(updates, 'relations.m2o.meta.one_field', null);
+	}
+}
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2m.ts b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2m.ts
new file mode 100644
index 0000000000..79c651cb6d
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2m.ts
@@ -0,0 +1,314 @@
+import { StateUpdates, State, HelperFunctions } from '../types';
+import { set } from 'lodash';
+import { useCollectionsStore, useFieldsStore } from '@/stores';
+
+export function applyChanges(updates: StateUpdates, state: State, helperFn: HelperFunctions) {
+	const { hasChanged } = helperFn;
+
+	if (hasChanged('localType')) {
+		removeSchema(updates);
+		setTypeToAlias(updates);
+		prepareRelation(updates, state);
+	}
+
+	if (hasChanged('autoGenerateJunctionRelation')) {
+		autoGenerateJunctionFields(updates, state, helperFn);
+	}
+
+	if (hasChanged('field.field')) {
+		updateRelationField(updates);
+	}
+
+	if (hasChanged('relations.m2o.related_collection')) {
+		preventCircularConstraint(updates, state, helperFn);
+		autoGenerateJunctionFields(updates, state, helperFn);
+	}
+
+	if (hasChanged('relations.o2m.field')) {
+		setJunctionFields(updates, state, helperFn);
+	}
+
+	if (hasChanged('relations.m2o.field')) {
+		setJunctionFields(updates, state, helperFn);
+	}
+
+	if (hasChanged('relations.o2m.collection') || hasChanged('relations.m2o.collection')) {
+		matchJunctionCollectionName(updates);
+	}
+
+	if (hasChanged('fields.corresponding')) {
+		setRelatedOneFieldForCorrespondingField(updates);
+	}
+
+	if (
+		[
+			'relations.o2m.collection',
+			'relations.o2m.field',
+			'relations.m2o.field',
+			'relations.m2o.related_collection',
+			'relations.o2m.meta.sort_field',
+		].some(hasChanged)
+	) {
+		generateCollections(updates, state, helperFn);
+		generateFields(updates, state, helperFn);
+	}
+}
+
+export function removeSchema(updates: StateUpdates) {
+	set(updates, 'field.schema', undefined);
+}
+
+export function setTypeToAlias(updates: StateUpdates) {
+	set(updates, 'field.type', 'alias');
+}
+
+export function prepareRelation(updates: StateUpdates, state: State) {
+	if (!updates.relations) updates.relations = {};
+
+	updates.relations.o2m = {
+		collection: undefined,
+		field: undefined,
+		related_collection: state.collection,
+		meta: {
+			one_field: updates.field?.field ?? state.field.field,
+			sort_field: null,
+			one_deselect_action: 'nullify',
+		},
+		schema: {
+			on_delete: 'SET NULL',
+		},
+	};
+
+	updates.relations.m2o = {
+		collection: undefined,
+		field: undefined,
+		related_collection: undefined,
+		meta: {
+			one_field: null,
+			sort_field: null,
+			one_deselect_action: 'nullify',
+		},
+		schema: {
+			on_delete: 'SET NULL',
+		},
+	};
+}
+
+export function updateRelationField(updates: StateUpdates) {
+	if (!updates.field?.field) return;
+
+	if (!updates.relations?.o2m) updates.relations = { o2m: {} };
+	set(updates, 'relations.o2m.meta.one_field', updates.field.field);
+}
+
+export function preventCircularConstraint(updates: StateUpdates, _state: State, { getCurrent }: HelperFunctions) {
+	if (getCurrent('relations.o2m.collection') === getCurrent('relations.o2m.related_collection')) {
+		set(updates, 'relations.o2m.schema.on_delete', 'NO ACTION');
+	}
+
+	if (getCurrent('relations.m2o.collection') === getCurrent('relations.m2o.related_collection')) {
+		set(updates, 'relations.m2o.schema.on_delete', 'NO ACTION');
+	}
+}
+
+export function setJunctionFields(updates: StateUpdates, _state: State, { getCurrent }: HelperFunctions) {
+	set(updates, 'relations.o2m.meta.junction_field', getCurrent('relations.m2o.field'));
+	set(updates, 'relations.m2o.meta.junction_field', getCurrent('relations.o2m.field'));
+}
+
+export function autoGenerateJunctionFields(updates: StateUpdates, state: State, { getCurrent }: HelperFunctions) {
+	if (getCurrent('autoGenerateJunctionRelation') === false) return;
+
+	const fieldsStore = useFieldsStore();
+
+	const currentCollection = state.collection!;
+	const currentPrimaryKeyField = fieldsStore.getPrimaryKeyFieldForCollection(currentCollection)?.field ?? 'id';
+	const relatedCollection = updates.relations?.m2o?.related_collection;
+
+	if (relatedCollection) {
+		const automaticJunctionCollectionName = getAutomaticJunctionCollectionName(currentCollection, relatedCollection);
+		const relatedPrimaryKeyField = fieldsStore.getPrimaryKeyFieldForCollection(relatedCollection)?.field ?? 'id';
+
+		set(updates, 'relations.o2m.collection', automaticJunctionCollectionName);
+		set(updates, 'relations.m2o.collection', automaticJunctionCollectionName);
+
+		set(updates, 'relations.o2m.related_collection', currentCollection);
+		set(updates, 'relations.m2o.related_collection', relatedCollection);
+
+		set(updates, 'relations.o2m.field', `${currentCollection}_${currentPrimaryKeyField}`);
+		set(updates, 'relations.m2o.field', `${relatedCollection}_${relatedPrimaryKeyField}`);
+
+		if (getCurrent('relations.o2m.field') === getCurrent('relations.m2o.field')) {
+			set(updates, 'relations.m2o.field', `related_${getCurrent('relations.m2o.field')}`);
+		}
+	} else {
+		// Reset the junction collection
+		set(updates, 'relations.o2m.collection', undefined);
+		set(updates, 'relations.m2o.collection', undefined);
+		set(updates, 'relations.o2m.related_collection', state.collection);
+		set(updates, 'relations.m2o.related_collection', undefined);
+		set(updates, 'relations.o2m.field', undefined);
+		set(updates, 'relations.m2o.field', undefined);
+	}
+}
+
+export function getAutomaticJunctionCollectionName(collectionA: string, collectionB: string) {
+	let index = 0;
+	let name = getName(index);
+
+	while (collectionExists(name)) {
+		index++;
+		name = getName(index);
+	}
+
+	return name;
+
+	function getName(index: number) {
+		let name = `${collectionA}_${collectionB}`;
+
+		if (name.startsWith('directus_')) {
+			name = 'junction_' + name;
+		}
+
+		if (index) return name + '_' + index;
+		return name;
+	}
+}
+
+function collectionExists(collection: string) {
+	return !!useCollectionsStore().getCollection(collection);
+}
+
+function fieldExists(collection: string, field: string) {
+	return !!useFieldsStore().getField(collection, field);
+}
+
+export function generateCollections(updates: StateUpdates, state: State, { getCurrent }: HelperFunctions) {
+	const junctionCollection = getCurrent('relations.o2m.collection');
+	const relatedCollection = getCurrent('relations.m2o.related_collection');
+
+	if (!junctionCollection || collectionExists(junctionCollection)) {
+		set(updates, 'collections.junction', undefined);
+	} else {
+		set(updates, 'collections.junction', {
+			collection: junctionCollection,
+			meta: {
+				hidden: true,
+				icon: 'import_export',
+			},
+			schema: {
+				name: junctionCollection,
+			},
+			fields: [
+				{
+					field: 'id',
+					type: 'integer',
+					schema: {
+						has_auto_increment: true,
+					},
+					meta: {
+						hidden: true,
+					},
+				},
+			],
+		});
+	}
+
+	if (relatedCollection && collectionExists(relatedCollection) === false) {
+		set(updates, 'collections.related', {
+			collection: relatedCollection,
+			meta: {},
+			schema: {
+				name: relatedCollection,
+			},
+			fields: [
+				{
+					field: 'id',
+					type: 'integer',
+					schema: {
+						has_auto_increment: true,
+					},
+					meta: {
+						hidden: true,
+					},
+				},
+			],
+		});
+	} else {
+		set(updates, 'collections.related', undefined);
+	}
+}
+
+function generateFields(updates: StateUpdates, state: State, { getCurrent }: HelperFunctions) {
+	const fieldsStore = useFieldsStore();
+	const currentPrimaryKeyField = fieldsStore.getPrimaryKeyFieldForCollection(state.collection!);
+	const junctionCollection = getCurrent('relations.o2m.collection');
+	const junctionCurrent = getCurrent('relations.o2m.field');
+	const junctionRelated = getCurrent('relations.m2o.field');
+	const sort = getCurrent('relations.o2m.meta.sort_field');
+	const relatedCollection = getCurrent('relations.m2o.related_collection');
+	const relatedPrimaryKeyField =
+		fieldsStore.getPrimaryKeyFieldForCollection(relatedCollection) ?? getCurrent('collections.related.fields[0]');
+
+	if (junctionCollection && junctionCurrent && fieldExists(junctionCollection, junctionCurrent) === false) {
+		set(updates, 'fields.junctionCurrent', {
+			collection: junctionCollection,
+			field: junctionCurrent,
+			type: currentPrimaryKeyField?.type ?? 'integer',
+			schema: {},
+			meta: {
+				hidden: true,
+			},
+		});
+	} else {
+		set(updates, 'fields.junctionCurrent', undefined);
+	}
+
+	if (junctionCollection && junctionRelated && fieldExists(junctionCollection, junctionRelated) === false) {
+		set(updates, 'fields.junctionRelated', {
+			collection: junctionCollection,
+			field: junctionRelated,
+			type: relatedPrimaryKeyField?.type ?? 'integer',
+			schema: {},
+			meta: {
+				hidden: true,
+			},
+		});
+	} else {
+		set(updates, 'fields.junctionRelated', undefined);
+	}
+
+	if (junctionCollection && sort && fieldExists(junctionCollection, sort) === false) {
+		set(updates, 'fields.sort', {
+			collection: junctionCollection,
+			field: sort,
+			type: 'integer',
+			schema: {},
+			meta: {
+				hidden: true,
+			},
+		});
+	} else {
+		set(updates, 'fields.sort', undefined);
+	}
+}
+
+export function matchJunctionCollectionName(updates: StateUpdates) {
+	if (updates?.relations?.o2m?.collection && updates.relations.o2m.collection !== updates.relations.m2o?.collection) {
+		set(updates, 'relations.m2o.collection', updates.relations.o2m.collection);
+	}
+
+	if (updates?.relations?.m2o?.collection && updates.relations.m2o.collection !== updates.relations.o2m?.collection) {
+		set(updates, 'relations.o2m.collection', updates.relations.m2o.collection);
+	}
+}
+
+export function setRelatedOneFieldForCorrespondingField(updates: StateUpdates) {
+	if (updates?.fields?.corresponding?.field) {
+		set(updates, 'relations.m2o.meta.one_field', updates.fields.corresponding.field);
+	}
+
+	if (!updates.fields?.corresponding) {
+		set(updates, 'relations.m2o.meta.one_field', null);
+	}
+}
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2o.ts b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2o.ts
new file mode 100644
index 0000000000..4036634446
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2o.ts
@@ -0,0 +1,101 @@
+import { StateUpdates, State, HelperFunctions } from '../types';
+import { set } from 'lodash';
+import { useCollectionsStore, useFieldsStore } from '@/stores';
+
+export function applyChanges(updates: StateUpdates, state: State, helperFn: HelperFunctions) {
+	const { hasChanged } = helperFn;
+
+	if (hasChanged('localType')) {
+		prepareRelation(updates, state);
+	}
+
+	if (hasChanged('field.field')) {
+		updateRelationField(updates);
+	}
+
+	if (hasChanged('relations.m2o.related_collection')) {
+		generateRelatedCollection(updates);
+		preventCircularConstraint(updates, state);
+		setTypeToRelatedPrimaryKey(updates, state);
+	}
+}
+
+export function prepareRelation(updates: StateUpdates, state: State) {
+	// Add if existing
+	if (!updates.relations) updates.relations = {};
+
+	updates.relations.m2o = {
+		collection: state.collection,
+		field: state.field.field,
+		related_collection: undefined,
+		meta: {
+			sort_field: null,
+		},
+		schema: {
+			on_delete: 'SET NULL',
+		},
+	};
+}
+
+export function updateRelationField(updates: StateUpdates) {
+	if (!updates.field?.field) return;
+
+	if (!updates.relations?.m2o) updates.relations = { m2o: {} };
+	set(updates, 'relations.m2o.field', updates.field.field);
+}
+
+export function generateRelatedCollection(updates: StateUpdates) {
+	const relatedCollection = updates.relations?.m2o?.related_collection;
+	if (!relatedCollection) return;
+	if (!updates.collections?.related) updates.collections = { related: undefined };
+
+	const collectionsStore = useCollectionsStore();
+
+	const exists = !!collectionsStore.getCollection(relatedCollection);
+
+	if (exists === false) {
+		updates.collections.related = {
+			collection: relatedCollection,
+			fields: [
+				{
+					field: 'id',
+					type: 'integer',
+					schema: {
+						has_auto_increment: true,
+						is_primary_key: true,
+					},
+					meta: {
+						hidden: true,
+					},
+				},
+			],
+			meta: {},
+			schema: {},
+		};
+	}
+}
+
+export function preventCircularConstraint(updates: StateUpdates, state: State) {
+	const relatedCollection = updates.relations?.m2o?.related_collection;
+	if (!relatedCollection) return;
+	if (!updates.relations) updates.relations = {};
+
+	if (relatedCollection === state.collection) {
+		set(updates, 'relations.m2o.schema.on_delete', 'NO ACTION');
+	}
+}
+
+export function setTypeToRelatedPrimaryKey(updates: StateUpdates, state: State) {
+	const relatedCollection = updates.relations?.m2o?.related_collection;
+	if (!relatedCollection) return;
+
+	const fieldsStore = useFieldsStore();
+
+	const primaryKeyField = fieldsStore.getPrimaryKeyFieldForCollection(relatedCollection);
+
+	if (primaryKeyField) {
+		set(updates, 'field.type', primaryKeyField.type);
+	} else if (state.collections.related?.fields?.[0]?.type) {
+		set(updates, 'field.type', state.collections.related.fields[0].type);
+	}
+}
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/o2m.ts b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/o2m.ts
new file mode 100644
index 0000000000..811546ca88
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/o2m.ts
@@ -0,0 +1,191 @@
+import { StateUpdates, State, HelperFunctions } from '../types';
+import { set } from 'lodash';
+import { useCollectionsStore, useFieldsStore, useRelationsStore } from '@/stores';
+
+export function applyChanges(updates: StateUpdates, state: State, helperFn: HelperFunctions) {
+	const { hasChanged } = helperFn;
+
+	if (hasChanged('localType')) {
+		removeSchema(updates);
+		setTypeToAlias(updates);
+		prepareRelation(updates, state);
+	}
+
+	if (hasChanged('field.field')) {
+		updateRelationField(updates);
+	}
+
+	if (hasChanged('relations.o2m.collection')) {
+		generateRelatedCollection(updates);
+		preventCircularConstraint(updates, state);
+		updateGeneratedRelatedField(updates, state);
+		generateSortField(updates, state, helperFn);
+	}
+
+	if (hasChanged('relations.o2m.field')) {
+		useExistingRelationValues(updates);
+		generateRelatedField(updates, state);
+	}
+
+	if (hasChanged('relations.o2m.meta.sort_field')) {
+		generateSortField(updates, state, helperFn);
+	}
+}
+
+export function removeSchema(updates: StateUpdates) {
+	set(updates, 'field.schema', undefined);
+}
+
+export function setTypeToAlias(updates: StateUpdates) {
+	set(updates, 'field.type', 'alias');
+}
+
+export function prepareRelation(updates: StateUpdates, state: State) {
+	if (!updates.relations) updates.relations = {};
+
+	updates.relations.o2m = {
+		collection: undefined,
+		field: undefined,
+		related_collection: state.collection,
+		meta: {
+			one_field: updates.field?.field ?? state.field.field,
+			sort_field: null,
+			one_deselect_action: 'nullify',
+		},
+		schema: {
+			on_delete: 'SET NULL',
+		},
+	};
+}
+
+export function preventCircularConstraint(updates: StateUpdates, state: State) {
+	const collection = updates.relations?.o2m?.collection;
+	if (!collection) return;
+	if (!updates.relations) updates.relations = {};
+
+	if (collection === state.collection) {
+		set(updates, 'relations.o2m.schema.on_delete', 'NO ACTION');
+	}
+}
+
+export function updateRelationField(updates: StateUpdates) {
+	if (!updates.field?.field) return;
+
+	if (!updates.relations?.o2m) updates.relations = { o2m: {} };
+	set(updates, 'relations.o2m.meta.one_field', updates.field.field);
+}
+
+export function useExistingRelationValues(updates: StateUpdates) {
+	if (!updates.relations) updates.relations = {};
+	const relationsStore = useRelationsStore();
+
+	const collection = updates.relations.o2m?.collection;
+	const field = updates.relations.o2m?.field;
+
+	if (collection && field) {
+		const existingRelation = relationsStore.getRelationForField(collection, field);
+
+		if (existingRelation) {
+			set(updates, 'relations.o2m.schema.on_delete', existingRelation.schema?.on_delete);
+			return;
+		}
+	}
+}
+
+export function generateRelatedCollection(updates: StateUpdates) {
+	const collection = updates.relations?.o2m?.collection;
+	if (!collection) return;
+
+	const collectionsStore = useCollectionsStore();
+
+	const exists = !!collectionsStore.getCollection(collection);
+
+	if (!updates.collections?.related) updates.collections = { related: undefined };
+
+	if (exists === false) {
+		updates.collections.related = {
+			collection: collection,
+			fields: [
+				{
+					field: 'id',
+					type: 'integer',
+					schema: {
+						has_auto_increment: true,
+						is_primary_key: true,
+					},
+					meta: {
+						hidden: true,
+					},
+				},
+			],
+			meta: {},
+			schema: {},
+		};
+	}
+}
+
+export function generateRelatedField(updates: StateUpdates, state: State) {
+	const fieldsStore = useFieldsStore();
+	const collection = updates.relations?.o2m?.collection ?? state.relations.o2m?.collection;
+	if (!collection) return;
+
+	const currentCollectionPrimaryKeyFieldType = state.collection
+		? fieldsStore.getPrimaryKeyFieldForCollection(state.collection)?.type ?? 'integer'
+		: 'integer';
+
+	const field = updates.relations?.o2m?.field;
+
+	if (!field) return;
+
+	const exists = !!fieldsStore.getField(collection, field);
+
+	if (!updates.fields?.corresponding) updates.fields = { corresponding: undefined };
+
+	if (exists === false) {
+		updates.fields.corresponding = {
+			collection: collection,
+			field: field,
+			type: currentCollectionPrimaryKeyFieldType,
+			schema: {},
+			meta: {
+				interface: 'select-dropdown-m2o',
+				hidden: true,
+			},
+		};
+	}
+}
+
+export function updateGeneratedRelatedField(updates: StateUpdates, state: State) {
+	const collection = updates.relations?.o2m?.collection;
+	if (!collection) return;
+
+	if (state.fields.corresponding) {
+		set(updates, 'fields.corresponding.collection', collection);
+	}
+}
+
+export function generateSortField(updates: StateUpdates, state: State, { getCurrent }: HelperFunctions) {
+	const sort = getCurrent('relations.o2m.meta.sort_field');
+
+	if (!sort) return;
+
+	const fieldsStore = useFieldsStore();
+
+	const relatedCollection = getCurrent('relations.o2m.collection');
+
+	const exists = !!fieldsStore.getField(relatedCollection, sort);
+
+	if (exists) {
+		set(updates, 'fields.sort', undefined);
+	} else {
+		set(updates, 'fields.sort', {
+			collection: relatedCollection,
+			field: sort,
+			type: 'integer',
+			schema: {},
+			meta: {
+				hidden: true,
+			},
+		});
+	}
+}
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/presentation.ts b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/presentation.ts
new file mode 100644
index 0000000000..3db7b668c7
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/presentation.ts
@@ -0,0 +1,24 @@
+import { StateUpdates, State, HelperFunctions } from '../types';
+import { set } from 'lodash';
+
+export function applyChanges(updates: StateUpdates, state: State, helperFn: HelperFunctions) {
+	const { hasChanged } = helperFn;
+
+	if (hasChanged('localType')) {
+		removeSchema(updates);
+		setTypeToAlias(updates);
+		setSpecialToNoData(updates);
+	}
+}
+
+export function removeSchema(updates: StateUpdates) {
+	set(updates, 'field.schema', undefined);
+}
+
+export function setTypeToAlias(updates: StateUpdates) {
+	set(updates, 'field.type', 'alias');
+}
+
+export function setSpecialToNoData(updates: StateUpdates) {
+	set(updates, 'field.meta.special', ['alias', 'no-data']);
+}
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/standard.ts b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/standard.ts
new file mode 100644
index 0000000000..741e989111
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/standard.ts
@@ -0,0 +1,39 @@
+import { HelperFunctions, State, StateUpdates } from '../types';
+import { set } from 'lodash';
+
+export function applyChanges(updates: StateUpdates, _state: State, helperFn: HelperFunctions) {
+	const { hasChanged } = helperFn;
+
+	if (hasChanged('field.type')) {
+		setSpecialForType(updates);
+	}
+}
+
+export function setSpecialForType(updates: StateUpdates) {
+	const type = updates.field?.type;
+
+	if (!type) return;
+
+	switch (type) {
+		case 'uuid':
+			set(updates, 'field.meta.special', ['uuid']);
+			break;
+		case 'hash':
+			set(updates, 'field.meta.special', ['hash']);
+			break;
+		case 'json':
+			set(updates, 'field.meta.special', ['json']);
+			break;
+		case 'csv':
+			set(updates, 'field.meta.special', ['csv']);
+			break;
+		case 'boolean':
+			set(updates, 'field.meta.special', ['boolean']);
+			break;
+		case 'geometry':
+			set(updates, 'field.meta.special', ['geometry']);
+			break;
+		default:
+			set(updates, 'field.meta.special', null);
+	}
+}
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/translations.ts b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/translations.ts
new file mode 100644
index 0000000000..ceda64ef63
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/translations.ts
@@ -0,0 +1,316 @@
+import { StateUpdates, State, HelperFunctions } from '../types';
+import { set, get } from 'lodash';
+import { useCollectionsStore, useFieldsStore } from '@/stores';
+
+export function applyChanges(updates: StateUpdates, state: State, helperFn: HelperFunctions) {
+	const { hasChanged } = helperFn;
+
+	if (hasChanged('localType')) {
+		removeSchema(updates);
+		setTypeToAlias(updates);
+		prepareRelation(updates, state);
+		setDefaults(updates, state, helperFn);
+	}
+
+	if (hasChanged('field.field')) {
+		updateRelationField(updates);
+	}
+
+	if (hasChanged('relations.m2o.related_collection')) {
+		preventCircularConstraint(updates, state, helperFn);
+	}
+
+	if (hasChanged('relations.o2m.field')) {
+		setJunctionFields(updates, state, helperFn);
+	}
+
+	if (hasChanged('relations.m2o.field')) {
+		setJunctionFields(updates, state, helperFn);
+	}
+
+	if (
+		[
+			'relations.o2m.collection',
+			'relations.o2m.field',
+			'relations.m2o.field',
+			'relations.m2o.related_collection',
+			'relations.o2m.meta?.sort_field',
+		].some(hasChanged)
+	) {
+		generateCollections(updates, state, helperFn);
+		generateFields(updates, state, helperFn);
+	}
+}
+
+export function removeSchema(updates: StateUpdates) {
+	set(updates, 'field.schema', undefined);
+}
+
+export function setTypeToAlias(updates: StateUpdates) {
+	set(updates, 'field.type', 'alias');
+}
+
+export function prepareRelation(updates: StateUpdates, state: State) {
+	if (!updates.relations) updates.relations = {};
+
+	updates.relations.o2m = {
+		collection: undefined,
+		field: undefined,
+		related_collection: state.collection,
+		meta: {
+			one_field: updates.field?.field ?? state.field.field,
+			sort_field: null,
+			one_deselect_action: 'nullify',
+		},
+		schema: {
+			on_delete: 'SET NULL',
+		},
+	};
+
+	updates.relations.m2o = {
+		collection: undefined,
+		field: undefined,
+		related_collection: undefined,
+		meta: {
+			one_field: null,
+			sort_field: null,
+			one_deselect_action: 'nullify',
+		},
+		schema: {
+			on_delete: 'SET NULL',
+		},
+	};
+}
+
+export function updateRelationField(updates: StateUpdates) {
+	if (!updates.field?.field) return;
+
+	if (!updates.relations?.o2m) updates.relations = { o2m: {} };
+	set(updates, 'relations.o2m.meta.one_field', updates.field.field);
+}
+
+export function preventCircularConstraint(updates: StateUpdates, _state: State, { getCurrent }: HelperFunctions) {
+	if (getCurrent('relations.o2m.collection') === getCurrent('relations.o2m.related_collection')) {
+		set(updates, 'relations.o2m.schema.on_delete', 'NO ACTION');
+	}
+
+	if (getCurrent('relations.m2o.collection') === getCurrent('relations.m2o.related_collection')) {
+		set(updates, 'relations.m2o.schema.on_delete', 'NO ACTION');
+	}
+}
+
+export function setJunctionFields(updates: StateUpdates, _state: State, { getCurrent }: HelperFunctions) {
+	set(updates, 'relations.o2m.meta.junction_field', getCurrent('relations.m2o.field'));
+	set(updates, 'relations.m2o.meta.junction_field', getCurrent('relations.o2m.field'));
+}
+
+function collectionExists(collection: string) {
+	return !!useCollectionsStore().getCollection(collection);
+}
+
+function fieldExists(collection: string, field: string) {
+	return !!useFieldsStore().getField(collection, field);
+}
+
+export function generateCollections(updates: StateUpdates, state: State, { getCurrent }: HelperFunctions) {
+	const junctionCollection = getCurrent('relations.o2m.collection');
+	const relatedCollection = getCurrent('relations.m2o.related_collection');
+
+	if (!junctionCollection || collectionExists(junctionCollection)) {
+		set(updates, 'collections.junction', undefined);
+	} else {
+		set(updates, 'collections.junction', {
+			collection: junctionCollection,
+			meta: {
+				hidden: true,
+				icon: 'import_export',
+			},
+			schema: {
+				name: junctionCollection,
+			},
+			fields: [
+				{
+					field: 'id',
+					type: 'integer',
+					schema: {
+						has_auto_increment: true,
+					},
+					meta: {
+						hidden: true,
+					},
+				},
+			],
+		});
+	}
+
+	if (relatedCollection && collectionExists(relatedCollection) === false) {
+		set(updates, 'collections.related', {
+			collection: relatedCollection,
+			meta: {},
+			schema: {
+				name: relatedCollection,
+			},
+			fields: [
+				{
+					field: 'code',
+					type: 'string',
+					schema: {
+						is_primary_key: true,
+					},
+					meta: {},
+				},
+				{
+					field: 'name',
+					type: 'string',
+					schema: {},
+					meta: {},
+				},
+			],
+		});
+
+		const previousName = get(state, 'relations.m2o.related_collection');
+		if (state.items && state.items[previousName]) {
+			delete state.items[previousName];
+		}
+
+		updates.items = {
+			[relatedCollection]: [
+				{
+					code: 'en-US',
+					name: 'English',
+				},
+				{
+					code: 'de-DE',
+					name: 'German',
+				},
+				{
+					code: 'fr-FR',
+					name: 'French',
+				},
+				{
+					code: 'ru-RU',
+					name: 'Russian',
+				},
+				{
+					code: 'es-ES',
+					name: 'Spanish',
+				},
+				{
+					code: 'it-IT',
+					name: 'Italian',
+				},
+				{
+					code: 'pt-BR',
+					name: 'Portuguese',
+				},
+			],
+		};
+	} else {
+		set(updates, 'collections.related', undefined);
+		updates.items = undefined;
+	}
+}
+
+function generateFields(updates: StateUpdates, state: State, { getCurrent }: HelperFunctions) {
+	const fieldsStore = useFieldsStore();
+
+	const currentPrimaryKeyField = fieldsStore.getPrimaryKeyFieldForCollection(state.collection!);
+	const junctionCollection = getCurrent('relations.o2m.collection');
+	const junctionCurrent = getCurrent('relations.o2m.field');
+	const junctionRelated = getCurrent('relations.m2o.field');
+	const relatedCollection = getCurrent('relations.m2o.related_collection');
+	const relatedPrimaryKeyField =
+		fieldsStore.getPrimaryKeyFieldForCollection(relatedCollection) ?? getCurrent('collections.related.fields[0]');
+	const sort = getCurrent('relations.o2m.sort_field');
+
+	if (junctionCollection && junctionCurrent && fieldExists(junctionCollection, junctionCurrent) === false) {
+		set(updates, 'fields.junctionCurrent', {
+			collection: junctionCollection,
+			field: junctionCurrent,
+			type: currentPrimaryKeyField?.type ?? 'integer',
+			schema: {},
+			meta: {
+				hidden: true,
+			},
+		});
+	} else {
+		set(updates, 'fields.junctionCurrent', undefined);
+	}
+
+	if (junctionCollection && junctionRelated && fieldExists(junctionCollection, junctionRelated) === false) {
+		set(updates, 'fields.junctionRelated', {
+			collection: junctionCollection,
+			field: junctionRelated,
+			type: relatedPrimaryKeyField?.type ?? 'string',
+			schema: {},
+			meta: {
+				hidden: true,
+			},
+		});
+	} else {
+		set(updates, 'fields.junctionRelated', undefined);
+	}
+
+	if (junctionCollection && sort && fieldExists(junctionCollection, sort) === false) {
+		set(updates, 'fields.sort', {
+			collection: junctionCollection,
+			field: sort,
+			type: 'integer',
+			schema: {},
+			meta: {
+				hidden: true,
+			},
+		});
+	} else {
+		set(updates, 'fields.sort', undefined);
+	}
+}
+
+export function setDefaults(updates: StateUpdates, state: State, { getCurrent }: HelperFunctions) {
+	const fieldsStore = useFieldsStore();
+
+	const currentCollection = state.collection!;
+	const currentCollectionPrimaryKeyField =
+		fieldsStore.getPrimaryKeyFieldForCollection(currentCollection)?.field ?? 'id';
+
+	const junctionName = getAutomaticJunctionCollectionName(currentCollection);
+
+	set(updates, 'relations.o2m.collection', junctionName);
+	set(updates, 'relations.o2m.field', `${currentCollection}_${currentCollectionPrimaryKeyField}`);
+	set(updates, 'relations.m2o.collection', junctionName);
+	set(updates, 'relations.m2o.related_collection', 'languages');
+
+	const languagesCollection = getCurrent('relations.m2o.related_collection');
+	const languagesCollectionPrimaryKeyField =
+		fieldsStore.getPrimaryKeyFieldForCollection(languagesCollection)?.field ?? 'id';
+
+	set(updates, 'relations.m2o.field', `${languagesCollection}_${languagesCollectionPrimaryKeyField}`);
+
+	if (!getCurrent('field.field')) {
+		set(updates, 'field.field', 'translations');
+		set(updates, 'relations.o2m.meta', 'translations');
+	}
+}
+
+export function getAutomaticJunctionCollectionName(collectionA: string) {
+	let index = 0;
+	let name = getName(index);
+
+	while (collectionExists(name)) {
+		index++;
+		name = getName(index);
+	}
+
+	return name;
+
+	function getName(index: number) {
+		let name = `${collectionA}_translations`;
+
+		if (name.startsWith('directus_')) {
+			name = 'junction_' + name;
+		}
+
+		if (index) return name + '_' + index;
+		return name;
+	}
+}
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/index.ts b/app/src/modules/settings/routes/data-model/field-detail/store/index.ts
new file mode 100644
index 0000000000..7e521472c7
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/index.ts
@@ -0,0 +1,318 @@
+import { defineStore } from 'pinia';
+import { getInterfaces } from '@/interfaces';
+import { getDisplays } from '@/displays';
+import { has, isEmpty, orderBy } from 'lodash';
+import {
+	InterfaceConfig,
+	DisplayConfig,
+	DeepPartial,
+	Field,
+	Relation,
+	Collection,
+	LocalType,
+} from '@directus/shared/types';
+import { LOCAL_TYPES } from '@directus/shared/constants';
+import { computed } from 'vue';
+import { get, set } from 'lodash';
+import { unexpectedError } from '@/utils/unexpected-error';
+import { useCollectionsStore, useFieldsStore, useRelationsStore } from '@/stores';
+
+import * as global from './alterations/global';
+import * as file from './alterations/file';
+import * as files from './alterations/files';
+import * as group from './alterations/group';
+import * as m2a from './alterations/m2a';
+import * as m2m from './alterations/m2m';
+import * as m2o from './alterations/m2o';
+import * as o2m from './alterations/o2m';
+import * as presentation from './alterations/presentation';
+import * as standard from './alterations/standard';
+import * as translations from './alterations/translations';
+import { getLocalTypeForField } from '../../get-local-type';
+import api from '@/api';
+
+export function syncFieldDetailStoreProperty(path: string, defaultValue?: any) {
+	const fieldDetailStore = useFieldDetailStore();
+
+	return computed({
+		get() {
+			return get(fieldDetailStore, path, defaultValue);
+		},
+		set(val: any) {
+			fieldDetailStore.update(set({}, path, val));
+		},
+	});
+}
+
+export const useFieldDetailStore = defineStore({
+	id: 'fieldDetailStore',
+	state: () => ({
+		// The current collection we're operating in
+		collection: undefined as string | undefined,
+
+		// What field we're currently editing ("+"" for new)
+		editing: '+' as string,
+
+		// Field edits
+		field: {
+			field: undefined,
+			type: undefined,
+			schema: {},
+			meta: {},
+		} as DeepPartial<Field>,
+
+		// Relations that will be upserted as part of this change
+		relations: {
+			m2o: undefined as DeepPartial<Relation> | undefined,
+			o2m: undefined as DeepPartial<Relation> | undefined,
+		},
+
+		// Collections that will be upserted as part of this change
+		collections: {
+			junction: undefined as DeepPartial<Collection & { fields: DeepPartial<Field>[] }> | undefined,
+			related: undefined as DeepPartial<Collection & { fields: DeepPartial<Field>[] }> | undefined,
+		},
+
+		// Fields that will be upserted as part of this change
+		fields: {
+			corresponding: undefined as DeepPartial<Field> | undefined,
+			junctionCurrent: undefined as DeepPartial<Field> | undefined,
+			junctionRelated: undefined as DeepPartial<Field> | undefined,
+			sort: undefined as DeepPartial<Field> | undefined,
+			oneCollectionField: undefined as DeepPartial<Field> | undefined,
+		},
+
+		// Any items that need to be injected into any collection
+		items: {} as Record<string, Record<string, any>[]>,
+
+		// Various flags that alter the operations of watchers and getters
+		localType: 'standard' as typeof LOCAL_TYPES[number],
+		autoGenerateJunctionRelation: true,
+		saving: false,
+	}),
+	actions: {
+		startEditing(collection: string, field: string, localType?: LocalType) {
+			// Make sure we clean up any stray values from unexpected paths
+			this.$reset();
+
+			this.collection = collection;
+			this.field.collection = collection;
+			this.editing = field;
+
+			if (field !== '+') {
+				const fieldsStore = useFieldsStore();
+				const relationsStore = useRelationsStore();
+
+				this.field = fieldsStore.getField(collection, field)!;
+
+				const relations = relationsStore.getRelationsForField(collection, field);
+
+				// o2m relation is the same regardless of type
+				this.relations.o2m = relations.find(
+					(relation) => relation.related_collection === collection && relation.meta?.one_field === field
+				) as DeepPartial<Relation> | undefined;
+
+				if (['files', 'm2m', 'translations'].includes(this.localType)) {
+					this.relations.m2o = relations.find((relation) => relation !== this.relations.o2m) as
+						| DeepPartial<Relation>
+						| undefined;
+				} else {
+					this.relations.m2o = relations.find(
+						(relation) => relation.collection === collection && relation.field === field
+					) as DeepPartial<Relation> | undefined;
+				}
+			}
+
+			this.update({
+				localType: localType ?? getLocalTypeForField(collection, field) ?? 'standard',
+			});
+		},
+		update(updates: DeepPartial<typeof this.$state>) {
+			const hasChanged = (path: string) => has(updates, path) && get(updates, path) !== get(this, path);
+			const getCurrent = (path: string) => (has(updates, path) ? get(updates, path) : get(this, path));
+
+			const helperFn = { hasChanged, getCurrent };
+
+			if (hasChanged('field.meta.interface')) {
+				global.setLocalTypeForInterface(updates);
+				global.setTypeForInterface(updates, this);
+			}
+
+			if (hasChanged('localType')) {
+				global.resetSchema(updates, this);
+				global.resetRelations(updates);
+				global.setSpecialForLocalType(updates);
+			}
+
+			switch (getCurrent('localType')) {
+				case 'file':
+					file.applyChanges(updates, this, helperFn);
+					break;
+				case 'files':
+					files.applyChanges(updates, this, helperFn);
+					break;
+				case 'group':
+					group.applyChanges(updates, this, helperFn);
+					break;
+				case 'm2a':
+					m2a.applyChanges(updates, this, helperFn);
+					break;
+				case 'm2m':
+					m2m.applyChanges(updates, this, helperFn);
+					break;
+				case 'm2o':
+					m2o.applyChanges(updates, this, helperFn);
+					break;
+				case 'o2m':
+					o2m.applyChanges(updates, this, helperFn);
+					break;
+				case 'presentation':
+					presentation.applyChanges(updates, this, helperFn);
+					break;
+				case 'standard':
+					standard.applyChanges(updates, this, helperFn);
+					break;
+				case 'translations':
+					translations.applyChanges(updates, this, helperFn);
+					break;
+			}
+
+			this.$patch(updates);
+		},
+		async save() {
+			if (!this.collection || !this.field.field) return;
+
+			const collectionsStore = useCollectionsStore();
+			const fieldsStore = useFieldsStore();
+			const relationsStore = useRelationsStore();
+
+			this.saving = true;
+
+			try {
+				await fieldsStore.upsertField(this.collection, this.editing, this.field);
+
+				for (const collection of Object.values(this.collections)) {
+					if (!collection || !collection.collection) continue;
+					await collectionsStore.upsertCollection(collection?.collection, collection);
+				}
+
+				for (const field of Object.values(this.fields)) {
+					if (!field || !field.collection || !field.field) continue;
+					await fieldsStore.upsertField(field.collection, field.field, field);
+				}
+
+				for (const relation of Object.values(this.relations)) {
+					if (!relation || !relation.collection || !relation.field) continue;
+					await relationsStore.upsertRelation(relation.collection, relation.field, relation);
+				}
+
+				for (const collection of Object.keys(this.items)) {
+					await api.post(`/items/${collection}`, this.items[collection]);
+				}
+			} catch (err: any) {
+				unexpectedError(err);
+			} finally {
+				this.saving = false;
+			}
+		},
+	},
+	getters: {
+		missingConfiguration(state) {
+			const requiredProperties = ['field.field', 'field.type', 'collection'];
+
+			const localType = state.localType;
+
+			if (localType === 'files' || localType === 'm2m' || localType === 'translations') {
+				requiredProperties.push(
+					'relations.o2m.collection',
+					'relations.o2m.field',
+					'relations.o2m.related_collection',
+					'relations.m2o.collection',
+					'relations.m2o.field',
+					'relations.m2o.related_collection'
+				);
+			}
+
+			if (localType === 'file' || localType === 'm2o') {
+				requiredProperties.push('relations.m2o.collection', 'relations.m2o.field', 'relations.m2o.related_collection');
+			}
+
+			if (localType === 'o2m') {
+				requiredProperties.push('relations.o2m.collection', 'relations.o2m.field', 'relations.o2m.related_collection');
+			}
+
+			if (localType === 'm2a') {
+				requiredProperties.push(
+					'relations.o2m.collection',
+					'relations.o2m.field',
+					'relations.o2m.related_collection',
+					'relations.m2o.collection',
+					'relations.m2o.field',
+					'relations.m2o.meta.one_allowed_collections',
+					'relations.m2o.meta.one_collection_field'
+				);
+			}
+
+			return requiredProperties.filter((path) => {
+				return (has(state, path) && isEmpty(get(state, path)) === false) === false;
+			});
+		},
+		readyToSave() {
+			// There's a bug in pinia where the other getters don't show up in the types for "this"
+			const missing = (this as typeof this & { missingConfiguration: string[] }).missingConfiguration;
+			return missing.length === 0;
+		},
+		interfacesForType(): InterfaceConfig[] {
+			const { interfaces } = getInterfaces();
+
+			return orderBy(
+				interfaces.value.filter((inter: InterfaceConfig) => {
+					// Filter out all system interfaces
+					if (inter.system === true) return false;
+
+					const matchesType = inter.types.includes(this.field.type || 'alias');
+					const matchesLocalType = (inter.localTypes || ['standard']).includes(this.localType);
+
+					return matchesType && matchesLocalType;
+				}),
+				['name']
+			);
+		},
+		displaysForType(): DisplayConfig[] {
+			const { displays } = getDisplays();
+
+			return orderBy(
+				displays.value.filter((inter: DisplayConfig) => {
+					const matchesType = inter.types.includes(this.field.type || 'alias');
+					const matchesLocalType = (inter.localTypes || ['standard']).includes(this.localType);
+
+					return matchesType && matchesLocalType;
+				}),
+				['name']
+			);
+		},
+		generationInfo() {
+			const items: { name: string; type: 'collection' | 'field' }[] = [];
+
+			for (const collection of Object.values(this.collections)) {
+				if (!collection || !collection.collection) continue;
+
+				items.push({
+					name: collection.collection,
+					type: 'collection',
+				});
+			}
+
+			for (const field of Object.values(this.fields)) {
+				if (!field || !field.collection || !field.field) continue;
+
+				items.push({
+					name: `${field.collection}.${field.field}`,
+					type: 'field',
+				});
+			}
+
+			return items;
+		},
+	},
+});
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/types.ts b/app/src/modules/settings/routes/data-model/field-detail/store/types.ts
new file mode 100644
index 0000000000..83a0828ba7
--- /dev/null
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/types.ts
@@ -0,0 +1,9 @@
+import { useFieldDetailStore } from './index';
+import { DeepPartial } from '@directus/shared/types';
+
+export type StateUpdates = DeepPartial<ReturnType<typeof useFieldDetailStore>['$state']>;
+export type State = ReturnType<typeof useFieldDetailStore>['$state'];
+export type HelperFunctions = {
+	getCurrent: (path: string) => any;
+	hasChanged: (path: string) => boolean;
+};
diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
index 1aa6adc761..04c2423a45 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
@@ -192,7 +192,7 @@ export default defineComponent({
 
 		const localType = computed(() => getLocalTypeForField(props.field.collection, props.field.field));
 
-		const nestedFields = computed(() => props.fields.filter((field) => field.meta?.group === props.field.meta?.field));
+		const nestedFields = computed(() => props.fields.filter((field) => field.meta?.group === props.field.field));
 
 		return {
 			t,
diff --git a/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue b/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
index 70e8d7b4c0..998d08f11f 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
@@ -22,23 +22,16 @@
 			</template>
 		</draggable>
 
-		<v-menu attached>
-			<template #activator="{ toggle, active }">
-				<v-button
-					class="add-field"
-					align="left"
-					:dashed="!active"
-					:class="{ active }"
-					outlined
-					large
-					full-width
-					@click="toggle"
-				>
-					<v-icon name="add" />
-					{{ t('create_field') }}
-				</v-button>
-			</template>
+		<v-button full-width :to="`/settings/data-model/${collection}/+`">
+			{{ t('create_field') }}
+		</v-button>
 
+		<v-menu show-arrow>
+			<template #activator="{ toggle, active }">
+				<button class="add-field-advanced" :dashed="!active" :class="{ active }" @click="toggle">
+					{{ t('create_in_advanced_field_creation_mode') }}
+				</button>
+			</template>
 			<v-list>
 				<template v-for="(option, index) in addOptions" :key="index">
 					<v-divider v-if="option.divider === true" />
@@ -208,13 +201,18 @@ export default defineComponent({
 	--v-button-background-color-hover: var(--primary-125);
 
 	margin-top: -12px;
+}
 
-	.v-icon {
-		margin-right: 8px;
-	}
+.add-field-advanced {
+	display: block;
+	width: max-content;
+	margin: 0 auto;
+	margin-top: 8px;
+	color: var(--foreground-subdued);
+	transition: color var(--fast) var(--transition);
 
-	&.active {
-		--v-button-background-color: var(--primary);
+	&:hover {
+		color: var(--foreground-normal);
 	}
 }
 
diff --git a/app/src/stores/collections.ts b/app/src/stores/collections.ts
index bcfea933fd..9a20503fab 100644
--- a/app/src/stores/collections.ts
+++ b/app/src/stores/collections.ts
@@ -1,6 +1,6 @@
 import api from '@/api';
 import { i18n } from '@/lang';
-import { Collection as CollectionRaw, DeepPartial } from '@directus/shared/types';
+import { Collection as CollectionRaw, DeepPartial, Field } from '@directus/shared/types';
 import { Collection } from '@/types';
 import { getCollectionType } from '@directus/shared/utils';
 import { notEmpty } from '@/utils/is-empty/';
@@ -8,9 +8,9 @@ import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
 import formatTitle from '@directus/format-title';
 import { defineStore } from 'pinia';
-import { TranslateResult } from 'vue-i18n';
 import { COLLECTIONS_DENY_LIST } from '@/constants';
-import { orderBy } from 'lodash';
+import { isEqual, orderBy, omit } from 'lodash';
+import { useFieldsStore } from '.';
 
 export const useCollectionsStore = defineStore({
 	id: 'collectionsStore',
@@ -42,60 +42,90 @@ export const useCollectionsStore = defineStore({
 
 			const collections: CollectionRaw[] = response.data.data;
 
-			this.collections = collections.map((collection: CollectionRaw) => {
-				const icon = collection.meta?.icon || 'label';
-				const color = collection.meta?.color;
-				const name = formatTitle(collection.collection);
-				const type = getCollectionType(collection);
-
-				if (collection.meta && notEmpty(collection.meta.translations)) {
-					for (let i = 0; i < collection.meta.translations.length; i++) {
-						const { language, translation, singular, plural } = collection.meta.translations[i];
-
-						i18n.global.mergeLocaleMessage(language, {
-							collection_names: {
-								[collection.collection]: translation,
-							},
-							collection_names_singular: {
-								[collection.collection]: singular,
-							},
-							collection_names_plural: {
-								[collection.collection]: plural,
-							},
-						});
-					}
-				}
-
-				return {
-					...collection,
-					name,
-					type,
-					icon,
-					color,
-				};
-			});
-
-			this.translateCollections();
+			this.collections = collections.map(this.prepareCollectionForApp);
 		},
-		translateCollections() {
-			this.collections = this.collections.map((collection: Collection) => {
-				let name: string | TranslateResult;
+		prepareCollectionForApp(collection: CollectionRaw): Collection {
+			const icon = collection.meta?.icon || 'label';
+			const color = collection.meta?.color;
+			let name = formatTitle(collection.collection);
+			const type = getCollectionType(collection);
 
-				if (i18n.global.te(`collection_names.${collection.collection}`)) {
-					name = i18n.global.t(`collection_names.${collection.collection}`);
-				} else {
-					name = formatTitle(collection.collection);
+			if (collection.meta && notEmpty(collection.meta.translations)) {
+				for (let i = 0; i < collection.meta.translations.length; i++) {
+					const { language, translation, singular, plural } = collection.meta.translations[i];
+
+					i18n.global.mergeLocaleMessage(language, {
+						collection_names: {
+							[collection.collection]: translation,
+						},
+						collection_names_singular: {
+							[collection.collection]: singular,
+						},
+						collection_names_plural: {
+							[collection.collection]: plural,
+						},
+					});
 				}
+			}
 
-				return {
-					...collection,
-					name,
-				};
-			});
+			if (i18n.global.te(`collection_names.${collection.collection}`)) {
+				name = i18n.global.t(`collection_names.${collection.collection}`);
+			}
+
+			return {
+				...collection,
+				name,
+				type,
+				icon,
+				color,
+			};
 		},
 		async dehydrate() {
 			this.$reset();
 		},
+		translateCollections() {
+			this.collections = this.collections.map((collection) => {
+				if (i18n.global.te(`collection_names.${collection.collection}`)) {
+					collection.name = i18n.global.t(`collection_names.${collection.collection}`);
+				}
+
+				return collection;
+			});
+		},
+		async upsertCollection(collection: string, values: DeepPartial<Collection & { fields: Field[] }>) {
+			const fieldsStore = useFieldsStore();
+			const existing = this.getCollection(collection);
+
+			// Strip out any fields the app might've auto-generated at some point
+			const rawValues = omit(values, ['name', 'type', 'icon', 'color']);
+
+			try {
+				if (existing) {
+					if (isEqual(existing, values)) return;
+
+					const updatedCollectionResponse = await api.patch<{ data: CollectionRaw }>(
+						`/collections/${collection}`,
+						rawValues
+					);
+
+					this.collections = this.collections.map((existingCollection: Collection) => {
+						if (existingCollection.collection === collection) {
+							return this.prepareCollectionForApp(updatedCollectionResponse.data.data);
+						}
+
+						return existingCollection;
+					});
+				} else {
+					const createdCollectionResponse = await api.post<{ data: CollectionRaw }>('/collections', rawValues);
+
+					this.collections = [...this.collections, this.prepareCollectionForApp(createdCollectionResponse.data.data)];
+				}
+			} catch (err: any) {
+				unexpectedError(err);
+			} finally {
+				await fieldsStore.hydrate();
+			}
+		},
 		async updateCollection(collection: string, updates: DeepPartial<Collection>) {
 			try {
 				await api.patch(`/collections/${collection}`, updates);
diff --git a/app/src/stores/fields.ts b/app/src/stores/fields.ts
index ed92463fd0..985ce64d6a 100644
--- a/app/src/stores/fields.ts
+++ b/app/src/stores/fields.ts
@@ -5,7 +5,7 @@ import { notEmpty } from '@/utils/is-empty/';
 import { unexpectedError } from '@/utils/unexpected-error';
 import formatTitle from '@directus/format-title';
 import { DeepPartial, Field, FieldRaw, Relation } from '@directus/shared/types';
-import { merge, orderBy } from 'lodash';
+import { isEqual, merge, orderBy, omit } from 'lodash';
 import { nanoid } from 'nanoid';
 import { defineStore } from 'pinia';
 
@@ -59,7 +59,7 @@ export const useFieldsStore = defineStore({
 	}),
 	actions: {
 		async hydrate() {
-			const fieldsResponse = await api.get(`/fields`, { params: { limit: -1 } });
+			const fieldsResponse = await api.get<any>(`/fields`, { params: { limit: -1 } });
 
 			const fields: FieldRaw[] = fieldsResponse.data.data;
 
@@ -71,7 +71,7 @@ export const useFieldsStore = defineStore({
 			this.$reset();
 		},
 		parseField(field: FieldRaw): Field {
-			const name = formatTitle(field.field);
+			let name = formatTitle(field.field);
 
 			if (field.meta && notEmpty(field.meta.translations) && field.meta.translations.length > 0) {
 				for (let i = 0; i < field.meta.translations.length; i++) {
@@ -87,6 +87,10 @@ export const useFieldsStore = defineStore({
 				}
 			}
 
+			if (i18n.global.te(`fields.${field.collection}.${field.field}`)) {
+				name = i18n.global.t(`fields.${field.collection}.${field.field}`);
+			}
+
 			return {
 				...field,
 				name,
@@ -94,49 +98,46 @@ export const useFieldsStore = defineStore({
 		},
 		translateFields() {
 			this.fields = this.fields.map((field) => {
-				let name: string;
-
 				if (i18n.global.te(`fields.${field.collection}.${field.field}`)) {
-					name = i18n.global.t(`fields.${field.collection}.${field.field}`);
-				} else {
-					name = formatTitle(field.field);
+					field.name = i18n.global.t(`fields.${field.collection}.${field.field}`);
 				}
-
-				return {
-					...field,
-					name,
-				};
+				return field;
 			});
 		},
-		async createField(collectionKey: string, newField: Field) {
-			const stateClone = [...this.fields];
+		async upsertField(collection: string, field: string, values: DeepPartial<Field>) {
+			const existing = this.getField(collection, field);
 
-			// Update locally first, so the changes are visible immediately
-			this.fields = [...this.fields, newField];
+			// Strip out auto-generated fields the app might've added
+			const rawField = omit(values, ['name']);
+
+			if (existing) {
+				if (isEqual(values, existing)) return;
+
+				return await this.updateField(collection, field, rawField);
+			} else {
+				return await this.createField(collection, rawField);
+			}
+		},
+		async createField(collectionKey: string, newField: DeepPartial<Field>) {
+			const stateClone = [...this.fields];
 
 			// Save to API, and update local state again to make sure everything is in sync with the
 			// API
 			try {
-				const response = await api.post(`/fields/${collectionKey}`, newField);
+				const response = await api.post<{ data: Field }>(`/fields/${collectionKey}`, newField);
 
-				const field = this.parseField(response.data.data);
+				const createdField = this.parseField(response.data.data);
 
-				this.fields = this.fields.map((field) => {
-					if (field.collection === collectionKey && field.field === newField.field) {
-						return field;
-					}
+				this.fields = [...this.fields, createdField];
 
-					return field;
-				});
-
-				return field;
+				return createdField;
 			} catch (err: any) {
 				// reset the changes if the api sync failed
 				this.fields = stateClone;
 				unexpectedError(err);
 			}
 		},
-		async updateField(collectionKey: string, fieldKey: string, updates: Record<string, Partial<Field>>) {
+		async updateField(collectionKey: string, fieldKey: string, updates: DeepPartial<Field>) {
 			const stateClone = [...this.fields];
 
 			// Update locally first, so the changes are visible immediately
@@ -151,7 +152,7 @@ export const useFieldsStore = defineStore({
 			// Save to API, and update local state again to make sure everything is in sync with the
 			// API
 			try {
-				const response = await api.patch(`/fields/${collectionKey}/${fieldKey}`, updates);
+				const response = await api.patch<any>(`/fields/${collectionKey}/${fieldKey}`, updates);
 
 				this.fields = this.fields.map((field) => {
 					if (field.collection === collectionKey && field.field === fieldKey) {
@@ -209,27 +210,35 @@ export const useFieldsStore = defineStore({
 			}
 		},
 		async deleteField(collectionKey: string, fieldKey: string) {
+			const relationsStore = useRelationsStore();
+
 			const stateClone = [...this.fields];
+			const relationsStateClone = [...relationsStore.relations];
 
 			this.fields = this.fields.filter((field) => {
 				if (field.field === fieldKey && field.collection === collectionKey) return false;
 				return true;
 			});
 
+			relationsStore.relations = relationsStore.relations.filter((relation) => {
+				if (relation.collection === collectionKey && relation.field === fieldKey) return false;
+				return true;
+			});
+
 			try {
 				await api.delete(`/fields/${collectionKey}/${fieldKey}`);
 			} catch (err: any) {
 				this.fields = stateClone;
+				relationsStore.relations = relationsStateClone;
 				unexpectedError(err);
 			}
 		},
-		getPrimaryKeyFieldForCollection(collection: string): Field {
-			/** @NOTE it's safe to assume every collection has a primary key */
+		getPrimaryKeyFieldForCollection(collection: string): Field | null {
 			const primaryKeyField = this.fields.find(
 				(field) => field.collection === collection && field.schema?.is_primary_key === true
-			)!;
+			);
 
-			return primaryKeyField;
+			return primaryKeyField ?? null;
 		},
 		getFieldsForCollection(collection: string): Field[] {
 			return orderBy(
diff --git a/app/src/stores/relations.ts b/app/src/stores/relations.ts
index 16f8ae128c..c73ea96a2f 100644
--- a/app/src/stores/relations.ts
+++ b/app/src/stores/relations.ts
@@ -1,6 +1,8 @@
 import api from '@/api';
 import { useFieldsStore } from '@/stores/';
-import { Relation } from '@directus/shared/types';
+import { unexpectedError } from '@/utils/unexpected-error';
+import { Relation, DeepPartial } from '@directus/shared/types';
+import { isEqual } from 'lodash';
 import { defineStore } from 'pinia';
 
 export const useRelationsStore = defineStore({
@@ -21,6 +23,34 @@ export const useRelationsStore = defineStore({
 				return relation.collection === collection || relation.related_collection === collection;
 			});
 		},
+		async upsertRelation(collection: string, field: string, values: DeepPartial<Relation>) {
+			const existing = this.getRelationForField(collection, field);
+
+			try {
+				if (existing) {
+					if (isEqual(existing, values)) return;
+
+					const updatedRelationResponse = await api.patch<{ data: Relation }>(
+						`/relations/${collection}/${field}`,
+						values
+					);
+
+					this.relations = this.relations.map((relation) => {
+						if (relation.collection === collection && relation.field === field) {
+							return updatedRelationResponse.data.data;
+						}
+
+						return relation;
+					});
+				} else {
+					const createdRelationResponse = await api.post<{ data: Relation }>(`/relations`, values);
+
+					this.relations = [...this.relations, createdRelationResponse.data.data];
+				}
+			} catch (err: any) {
+				unexpectedError(err);
+			}
+		},
 		/**
 		 * Retrieve all relation rows that apply to the current field. Regardless of relational direction
 		 */
diff --git a/changelog.md b/changelog.md
index f319c48f1a..1087787f73 100644
--- a/changelog.md
+++ b/changelog.md
@@ -6,80 +6,128 @@ _Changes marked with a :warning: contain potential breaking changes depending on
 
 ### ⚠️ Potential Breaking Changes
 
-The old grant-based oAuth2 setup has been replaced by the new `oauth2` driver. This new setup uses (slightly) different names for its environment variables. Please refer to https://docs.directus.io/reference/environment-variables/#auth for the correct names and update your environment where required.
+The old grant-based oAuth2 setup has been replaced by the new `oauth2` driver. This new setup uses (slightly) different
+names for its environment variables. Please refer to https://docs.directus.io/reference/environment-variables/#auth for
+the correct names and update your environment where required.
 
 ### :sparkles: New Features
 
 - **API**
-  - :warning: [#8660](https://github.com/directus/directus/pull/8660) New OpenID and OAuth2 drivers ([@aidenfoxx](https://github.com/aidenfoxx))
+  - :warning: [#8660](https://github.com/directus/directus/pull/8660) New OpenID and OAuth2 drivers
+    ([@aidenfoxx](https://github.com/aidenfoxx))
 
 ### :rocket: Improvements
 
 - **App**
-  - [#8995](https://github.com/directus/directus/pull/8995) Map layout and interface: fixes and improvements ([@Oreilles](https://github.com/Oreilles))
-  - [#8954](https://github.com/directus/directus/pull/8954) Improve folder picker selection highlight ([@azrikahar](https://github.com/azrikahar))
-  - [#8937](https://github.com/directus/directus/pull/8937) add default preset for webhooks page ([@azrikahar](https://github.com/azrikahar))
-  - [#8929](https://github.com/directus/directus/pull/8929) Tweak styling of the map layout ([@benhaynes](https://github.com/benhaynes))
-  - [#8908](https://github.com/directus/directus/pull/8908) Map layout and interface improvements ([@Oreilles](https://github.com/Oreilles))
+  - [#8995](https://github.com/directus/directus/pull/8995) Map layout and interface: fixes and improvements
+    ([@Oreilles](https://github.com/Oreilles))
+  - [#8954](https://github.com/directus/directus/pull/8954) Improve folder picker selection highlight
+    ([@azrikahar](https://github.com/azrikahar))
+  - [#8937](https://github.com/directus/directus/pull/8937) add default preset for webhooks page
+    ([@azrikahar](https://github.com/azrikahar))
+  - [#8929](https://github.com/directus/directus/pull/8929) Tweak styling of the map layout
+    ([@benhaynes](https://github.com/benhaynes))
+  - [#8908](https://github.com/directus/directus/pull/8908) Map layout and interface improvements
+    ([@Oreilles](https://github.com/Oreilles))
 - **sdk**
-  - [#8863](https://github.com/directus/directus/pull/8863) Add geo operators to FilterOperators type ([@TheBeastOfCaerbannog](https://github.com/TheBeastOfCaerbannog))
+  - [#8863](https://github.com/directus/directus/pull/8863) Add geo operators to FilterOperators type
+    ([@TheBeastOfCaerbannog](https://github.com/TheBeastOfCaerbannog))
 
 ### :bug: Bug Fixes
 
 - **API**
-  - [#9029](https://github.com/directus/directus/pull/9029) Cast "DB_EXCLUDE_TABLES" to array ([@rijkvanzanten](https://github.com/rijkvanzanten))
+  - [#9029](https://github.com/directus/directus/pull/9029) Cast "DB_EXCLUDE_TABLES" to array
+    ([@rijkvanzanten](https://github.com/rijkvanzanten))
   - [#9024](https://github.com/directus/directus/pull/9024) Update users.ts ([@aidenfoxx](https://github.com/aidenfoxx))
   - [#9012](https://github.com/directus/directus/pull/9012) Fix #8402 ([@filipproch](https://github.com/filipproch))
-  - [#8944](https://github.com/directus/directus/pull/8944) Fix o2m-resolver memory issue ([@Oreilles](https://github.com/Oreilles))
-  - [#8864](https://github.com/directus/directus/pull/8864) Fix collections endpoint not filtering `DB_EXCLUDE_TABLES` env ([@rijkvanzanten](https://github.com/rijkvanzanten))
-  - [#8814](https://github.com/directus/directus/pull/8814) Only unflatten item properties that needs to be unflattened ([@Oreilles](https://github.com/Oreilles))
+  - [#8944](https://github.com/directus/directus/pull/8944) Fix o2m-resolver memory issue
+    ([@Oreilles](https://github.com/Oreilles))
+  - [#8864](https://github.com/directus/directus/pull/8864) Fix collections endpoint not filtering `DB_EXCLUDE_TABLES`
+    env ([@rijkvanzanten](https://github.com/rijkvanzanten))
+  - [#8814](https://github.com/directus/directus/pull/8814) Only unflatten item properties that needs to be unflattened
+    ([@Oreilles](https://github.com/Oreilles))
 - **App**
-  - [#9019](https://github.com/directus/directus/pull/9019) Allow filesize display for bigInteger fields ([@rijkvanzanten](https://github.com/rijkvanzanten))
-  - [#9010](https://github.com/directus/directus/pull/9010) Fix error with table manual sort ([@Oreilles](https://github.com/Oreilles))
-  - [#9007](https://github.com/directus/directus/pull/9007) Fix click on relational filters with children ([@licitdev](https://github.com/licitdev))
-  - [#9002](https://github.com/directus/directus/pull/9002) Sort child collections in navigation ([@Oreilles](https://github.com/Oreilles))
-  - [#8939](https://github.com/directus/directus/pull/8939) hide folder-collections in permissions settings ([@azrikahar](https://github.com/azrikahar))
-  - [#8938](https://github.com/directus/directus/pull/8938) Fix labels display for non-null empty value ([@azrikahar](https://github.com/azrikahar))
-  - [#8936](https://github.com/directus/directus/pull/8936) show System Collections in empty Data Model page ([@azrikahar](https://github.com/azrikahar))
-  - [#8927](https://github.com/directus/directus/pull/8927) Fix missing display groups for file/image fields ([@rijkvanzanten](https://github.com/rijkvanzanten))
-  - [#8893](https://github.com/directus/directus/pull/8893) hydrate permissionsStore only if user has role ([@azrikahar](https://github.com/azrikahar))
-  - [#8889](https://github.com/directus/directus/pull/8889) Fix "Show Hidden Collection" context menu in collections navigation ([@azrikahar](https://github.com/azrikahar))
+  - [#9019](https://github.com/directus/directus/pull/9019) Allow filesize display for bigInteger fields
+    ([@rijkvanzanten](https://github.com/rijkvanzanten))
+  - [#9010](https://github.com/directus/directus/pull/9010) Fix error with table manual sort
+    ([@Oreilles](https://github.com/Oreilles))
+  - [#9007](https://github.com/directus/directus/pull/9007) Fix click on relational filters with children
+    ([@licitdev](https://github.com/licitdev))
+  - [#9002](https://github.com/directus/directus/pull/9002) Sort child collections in navigation
+    ([@Oreilles](https://github.com/Oreilles))
+  - [#8939](https://github.com/directus/directus/pull/8939) hide folder-collections in permissions settings
+    ([@azrikahar](https://github.com/azrikahar))
+  - [#8938](https://github.com/directus/directus/pull/8938) Fix labels display for non-null empty value
+    ([@azrikahar](https://github.com/azrikahar))
+  - [#8936](https://github.com/directus/directus/pull/8936) show System Collections in empty Data Model page
+    ([@azrikahar](https://github.com/azrikahar))
+  - [#8927](https://github.com/directus/directus/pull/8927) Fix missing display groups for file/image fields
+    ([@rijkvanzanten](https://github.com/rijkvanzanten))
+  - [#8893](https://github.com/directus/directus/pull/8893) hydrate permissionsStore only if user has role
+    ([@azrikahar](https://github.com/azrikahar))
+  - [#8889](https://github.com/directus/directus/pull/8889) Fix "Show Hidden Collection" context menu in collections
+    navigation ([@azrikahar](https://github.com/azrikahar))
   - [#8888](https://github.com/directus/directus/pull/8888) Fix slug input ([@azrikahar](https://github.com/azrikahar))
-  - [#8881](https://github.com/directus/directus/pull/8881) App: add 'schema' to body in M2M and M2A ([@joselcvarela](https://github.com/joselcvarela))
-  - [#8880](https://github.com/directus/directus/pull/8880) Set missing refresh timeout ([@licitdev](https://github.com/licitdev))
-  - [#8876](https://github.com/directus/directus/pull/8876) Fix settings page freeze when custom fields have a sort value ([@smilledge](https://github.com/smilledge))
+  - [#8881](https://github.com/directus/directus/pull/8881) App: add 'schema' to body in M2M and M2A
+    ([@joselcvarela](https://github.com/joselcvarela))
+  - [#8880](https://github.com/directus/directus/pull/8880) Set missing refresh timeout
+    ([@licitdev](https://github.com/licitdev))
+  - [#8876](https://github.com/directus/directus/pull/8876) Fix settings page freeze when custom fields have a sort
+    value ([@smilledge](https://github.com/smilledge))
 
 ### :sponge: Optimizations
 
 - **Misc.**
-  - [#8969](https://github.com/directus/directus/pull/8969) Fix warnings from ESLint ([@paescuj](https://github.com/paescuj))
-  - [#8957](https://github.com/directus/directus/pull/8957) Skip publish-npm job in the release workflow for forked repos ([@t7tran](https://github.com/t7tran))
+  - [#8969](https://github.com/directus/directus/pull/8969) Fix warnings from ESLint
+    ([@paescuj](https://github.com/paescuj))
+  - [#8957](https://github.com/directus/directus/pull/8957) Skip publish-npm job in the release workflow for forked
+    repos ([@t7tran](https://github.com/t7tran))
 
 ### :memo: Documentation
 
-- [#8948](https://github.com/directus/directus/pull/8948) Update iis.md ([@paulboudewijn](https://github.com/paulboudewijn))
-- [#8879](https://github.com/directus/directus/pull/8879) Fix field duplicate typo ([@licitdev](https://github.com/licitdev))
+- [#8948](https://github.com/directus/directus/pull/8948) Update iis.md
+  ([@paulboudewijn](https://github.com/paulboudewijn))
+- [#8879](https://github.com/directus/directus/pull/8879) Fix field duplicate typo
+  ([@licitdev](https://github.com/licitdev))
 
 ### :package: Dependency Updates
 
-- [#9025](https://github.com/directus/directus/pull/9025) Update dependency ts-node to v10.3.1 ([@renovate[bot]](https://github.com/apps/renovate))
-- [#9015](https://github.com/directus/directus/pull/9015) Update dependency knex-schema-inspector to v1.6.3 ([@renovate[bot]](https://github.com/apps/renovate))
-- [#8989](https://github.com/directus/directus/pull/8989) Update dependency @types/lodash to v4.14.176 ([@renovate[bot]](https://github.com/apps/renovate))
-- [#8980](https://github.com/directus/directus/pull/8980) Pin dependencies ([@renovate[bot]](https://github.com/apps/renovate))
-- [#8974](https://github.com/directus/directus/pull/8974) Update typescript-eslint monorepo to v5.1.0 ([@renovate[bot]](https://github.com/apps/renovate))
-- [#8971](https://github.com/directus/directus/pull/8971) Update dependency eslint-plugin-vue to v7.20.0 ([@renovate[bot]](https://github.com/apps/renovate))
-- [#8970](https://github.com/directus/directus/pull/8970) Update dependency @types/busboy to v0.3.0 ([@renovate[bot]](https://github.com/apps/renovate))
-- [#8967](https://github.com/directus/directus/pull/8967) Update jest monorepo to v27.3.1 ([@renovate[bot]](https://github.com/apps/renovate))
-- [#8964](https://github.com/directus/directus/pull/8964) Update dependency vite-plugin-md to v0.11.2 ([@renovate[bot]](https://github.com/apps/renovate))
-- [#8963](https://github.com/directus/directus/pull/8963) Update dependency vite to v2.6.10 ([@renovate[bot]](https://github.com/apps/renovate))
-- [#8962](https://github.com/directus/directus/pull/8962) Update dependency pinia to v2.0.0-rc.14 ([@renovate[bot]](https://github.com/apps/renovate))
-- [#8961](https://github.com/directus/directus/pull/8961) Update dependency nock to v13.1.4 ([@renovate[bot]](https://github.com/apps/renovate))
-- [#8959](https://github.com/directus/directus/pull/8959) Update dependency @rollup/plugin-node-resolve to v13.0.6 ([@renovate[bot]](https://github.com/apps/renovate))
-- [#8958](https://github.com/directus/directus/pull/8958) Update dependency @rollup/plugin-commonjs to v21.0.1 ([@renovate[bot]](https://github.com/apps/renovate))
-- [#8918](https://github.com/directus/directus/pull/8918) Update jest monorepo to v27.3.0 ([@renovate[bot]](https://github.com/apps/renovate))
-- [#8916](https://github.com/directus/directus/pull/8916) Update dependency vite to v2.6.9 ([@renovate[bot]](https://github.com/apps/renovate))
-- [#8915](https://github.com/directus/directus/pull/8915) Update dependency ts-jest to v27.0.7 ([@renovate[bot]](https://github.com/apps/renovate))
-- [#8772](https://github.com/directus/directus/pull/8772) Update fullcalendar monorepo to v5.10.0 ([@renovate[bot]](https://github.com/apps/renovate))
+- [#9025](https://github.com/directus/directus/pull/9025) Update dependency ts-node to v10.3.1
+  ([@renovate[bot]](https://github.com/apps/renovate))
+- [#9015](https://github.com/directus/directus/pull/9015) Update dependency knex-schema-inspector to v1.6.3
+  ([@renovate[bot]](https://github.com/apps/renovate))
+- [#8989](https://github.com/directus/directus/pull/8989) Update dependency @types/lodash to v4.14.176
+  ([@renovate[bot]](https://github.com/apps/renovate))
+- [#8980](https://github.com/directus/directus/pull/8980) Pin dependencies
+  ([@renovate[bot]](https://github.com/apps/renovate))
+- [#8974](https://github.com/directus/directus/pull/8974) Update typescript-eslint monorepo to v5.1.0
+  ([@renovate[bot]](https://github.com/apps/renovate))
+- [#8971](https://github.com/directus/directus/pull/8971) Update dependency eslint-plugin-vue to v7.20.0
+  ([@renovate[bot]](https://github.com/apps/renovate))
+- [#8970](https://github.com/directus/directus/pull/8970) Update dependency @types/busboy to v0.3.0
+  ([@renovate[bot]](https://github.com/apps/renovate))
+- [#8967](https://github.com/directus/directus/pull/8967) Update jest monorepo to v27.3.1
+  ([@renovate[bot]](https://github.com/apps/renovate))
+- [#8964](https://github.com/directus/directus/pull/8964) Update dependency vite-plugin-md to v0.11.2
+  ([@renovate[bot]](https://github.com/apps/renovate))
+- [#8963](https://github.com/directus/directus/pull/8963) Update dependency vite to v2.6.10
+  ([@renovate[bot]](https://github.com/apps/renovate))
+- [#8962](https://github.com/directus/directus/pull/8962) Update dependency pinia to v2.0.0-rc.14
+  ([@renovate[bot]](https://github.com/apps/renovate))
+- [#8961](https://github.com/directus/directus/pull/8961) Update dependency nock to v13.1.4
+  ([@renovate[bot]](https://github.com/apps/renovate))
+- [#8959](https://github.com/directus/directus/pull/8959) Update dependency @rollup/plugin-node-resolve to v13.0.6
+  ([@renovate[bot]](https://github.com/apps/renovate))
+- [#8958](https://github.com/directus/directus/pull/8958) Update dependency @rollup/plugin-commonjs to v21.0.1
+  ([@renovate[bot]](https://github.com/apps/renovate))
+- [#8918](https://github.com/directus/directus/pull/8918) Update jest monorepo to v27.3.0
+  ([@renovate[bot]](https://github.com/apps/renovate))
+- [#8916](https://github.com/directus/directus/pull/8916) Update dependency vite to v2.6.9
+  ([@renovate[bot]](https://github.com/apps/renovate))
+- [#8915](https://github.com/directus/directus/pull/8915) Update dependency ts-jest to v27.0.7
+  ([@renovate[bot]](https://github.com/apps/renovate))
+- [#8772](https://github.com/directus/directus/pull/8772) Update fullcalendar monorepo to v5.10.0
+  ([@renovate[bot]](https://github.com/apps/renovate))
 
 ## v9.0.0-rc.98 (October 15, 2021)
 
diff --git a/packages/shared/src/constants/fields.ts b/packages/shared/src/constants/fields.ts
index 046ee5ed28..0ff5176c5b 100644
--- a/packages/shared/src/constants/fields.ts
+++ b/packages/shared/src/constants/fields.ts
@@ -43,3 +43,15 @@ export const LOCAL_TYPES = [
 	'translations',
 	'group',
 ] as const;
+
+export type LocalTypes =
+	| 'standard'
+	| 'file'
+	| 'files'
+	| 'm2o'
+	| 'o2m'
+	| 'm2m'
+	| 'm2a'
+	| 'presentation'
+	| 'translations'
+	| 'group';
diff --git a/packages/shared/src/types/displays.ts b/packages/shared/src/types/displays.ts
index 77e9053ebf..e94848fcf8 100644
--- a/packages/shared/src/types/displays.ts
+++ b/packages/shared/src/types/displays.ts
@@ -20,6 +20,6 @@ export interface DisplayConfig {
 	component: Component;
 	options: DeepPartial<Field>[] | Component | null;
 	types: readonly Type[];
-	groups?: readonly LocalType[];
+	localTypes?: readonly LocalType[];
 	fields?: string[] | DisplayFieldsFunction;
 }
diff --git a/packages/shared/src/types/extensions.ts b/packages/shared/src/types/extensions.ts
index 791f49efb8..35992c051d 100644
--- a/packages/shared/src/types/extensions.ts
+++ b/packages/shared/src/types/extensions.ts
@@ -10,6 +10,8 @@ import {
 	EXTENSION_TYPES,
 } from '../constants';
 import { Accountability } from './accountability';
+import { Collection, Field, Relation, DeepPartial } from '.';
+import { LOCAL_TYPES } from '../constants';
 
 export type AppExtensionType = typeof APP_EXTENSION_TYPES[number];
 export type ApiExtensionType = typeof API_EXTENSION_TYPES[number];
@@ -68,3 +70,30 @@ export type ApiExtensionContext = {
 	logger: Logger;
 	getSchema: (options?: { accountability?: Accountability; database?: Knex }) => Promise<Record<string, any>>;
 };
+
+export type ExtensionsOptionsContext = {
+	collection: string;
+	editing: string;
+	field: DeepPartial<Field>;
+	relations: {
+		m2o: DeepPartial<Relation> | undefined;
+		m2a: DeepPartial<Relation> | undefined;
+		o2m: DeepPartial<Relation> | undefined;
+	};
+	collections: {
+		junction: DeepPartial<Collection & { fields: DeepPartial<Field>[] }> | undefined;
+		related: DeepPartial<Collection & { fields: DeepPartial<Field>[] }> | undefined;
+	};
+	fields: {
+		corresponding: DeepPartial<Field> | undefined;
+		junctionCurrent: DeepPartial<Field> | undefined;
+		junctionRelated: DeepPartial<Field> | undefined;
+		sort: DeepPartial<Field> | undefined;
+	};
+
+	items: Record<string, Record<string, any>[]>;
+
+	localType: typeof LOCAL_TYPES[number];
+	autoGenerateJunctionRelation: boolean;
+	saving: boolean;
+};
diff --git a/packages/shared/src/types/interfaces.ts b/packages/shared/src/types/interfaces.ts
index d50168aa55..690b1317e7 100644
--- a/packages/shared/src/types/interfaces.ts
+++ b/packages/shared/src/types/interfaces.ts
@@ -1,6 +1,7 @@
 import { Field, LocalType, Type } from './fields';
 import { Component } from 'vue';
 import { DeepPartial } from './misc';
+import { ExtensionsOptionsContext } from '.';
 
 export interface InterfaceConfig {
 	id: string;
@@ -9,12 +10,21 @@ export interface InterfaceConfig {
 	description?: string;
 
 	component: Component;
-	options: DeepPartial<Field>[] | Component | null;
+	options:
+		| DeepPartial<Field>[]
+		| ((ctx: ExtensionsOptionsContext) => DeepPartial<Field>[])
+		| { standard: DeepPartial<Field>[]; advanced: DeepPartial<Field>[] }
+		| ((ctx: ExtensionsOptionsContext) => { standard: DeepPartial<Field>[]; advanced: DeepPartial<Field>[] })
+		| Component
+		| null;
 	types: readonly Type[];
-	groups?: readonly LocalType[];
+	localTypes?: readonly LocalType[];
+	group?: 'standard' | 'selection' | 'relational' | 'presentation' | 'presentation' | 'group' | 'other';
+	order?: number;
 	relational?: boolean;
 	hideLabel?: boolean;
 	hideLoader?: boolean;
 	system?: boolean;
 	recommendedDisplays?: string[];
+	preview?: string;
 }
diff --git a/packages/shared/src/types/relations.ts b/packages/shared/src/types/relations.ts
index 199099c40a..e6384cf43a 100644
--- a/packages/shared/src/types/relations.ts
+++ b/packages/shared/src/types/relations.ts
@@ -13,6 +13,6 @@ export type Relation = {
 		one_deselect_action: 'nullify' | 'delete';
 		one_collection_field: null | string;
 		one_allowed_collections: null | string[];
-	};
-	schema?: Record<string, unknown>;
+	} | null;
+	schema?: Record<string, unknown> | null;
 };