diff --git a/api/src/services/fields.ts b/api/src/services/fields.ts
index 5f6bee14e8..08a48ea4d2 100644
--- a/api/src/services/fields.ts
+++ b/api/src/services/fields.ts
@@ -94,9 +94,16 @@ export class FieldsService {
 
 		let aliasFields = [
 			...((await this.payloadService.processValues('read', await aliasQuery)) as FieldMeta[]),
-			...systemFieldRows,
 		];
 
+		if (collection) {
+			aliasFields.push(
+				...systemFieldRows.filter((fieldMeta) => fieldMeta.collection === collection)
+			);
+		} else {
+			aliasFields.push(...systemFieldRows);
+		}
+
 		const aliasTypes = ['alias', 'o2m', 'm2m', 'files', 'files', 'translations'];
 
 		aliasFields = aliasFields.filter((field) => {
@@ -113,7 +120,7 @@ export class FieldsService {
 			const data = {
 				collection: field.collection,
 				field: field.field,
-				type: field.special?.[0],
+				type: Array.isArray(field.special) ? field.special[0] : field.special,
 				schema: null,
 				meta: field,
 			};
diff --git a/app/src/composables/use-sync/use-sync.ts b/app/src/composables/use-sync/use-sync.ts
index 21bfc436f0..38801968a1 100644
--- a/app/src/composables/use-sync/use-sync.ts
+++ b/app/src/composables/use-sync/use-sync.ts
@@ -4,7 +4,7 @@ export default function useSync<T, K extends keyof T>(
 	props: T,
 	key: K,
 	emit: (event: string, ...args: any[]) => void
-): Ref<Readonly<T[K]>> {
+): Ref<T[K]> {
 	return computed<T[K]>({
 		get() {
 			return props[key];
diff --git a/app/src/layouts/cards/cards.vue b/app/src/layouts/cards/cards.vue
index a48a747020..2296a97755 100644
--- a/app/src/layouts/cards/cards.vue
+++ b/app/src/layouts/cards/cards.vue
@@ -112,6 +112,18 @@
 			</div>
 		</template>
 
+		<v-info v-else-if="error" type="danger" :title="$t('unexpected_error')" icon="error" center>
+			{{ $t('unexpected_error_copy') }}
+
+			<template #append>
+				<v-error :error="error" />
+
+				<v-button small @click="resetPresetAndRefresh" class="reset-preset">
+					{{ $t('reset_page_preferences') }}
+				</v-button>
+			</template>
+		</v-info>
+
 		<slot v-else-if="itemCount === 0 && activeFilterCount > 0" name="no-results" />
 		<slot v-else-if="itemCount === 0" name="no-items" />
 	</div>
@@ -119,18 +131,18 @@
 
 <script lang="ts">
 import { defineComponent, PropType, toRefs, inject, computed, ref } from '@vue/composition-api';
-import { Filter } from '@/types';
-import useSync from '@/composables/use-sync/';
-import useCollection from '@/composables/use-collection/';
-import useItems from '@/composables/use-items';
+import { Filter } from '../../types';
+import useSync from '../../composables/use-sync/';
+import useCollection from '../../composables/use-collection/';
+import useItems from '../../composables/use-items';
 import Card from './components/card.vue';
-import getFieldsFromTemplate from '@/utils/get-fields-from-template';
-import { useRelationsStore } from '@/stores/';
+import getFieldsFromTemplate from '../../utils/get-fields-from-template';
+import { useRelationsStore } from '../../stores/';
 
 import CardsHeader from './components/header.vue';
-import i18n from '@/lang';
-import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
-import useElementSize from '@/composables/use-element-size';
+import i18n from '../../lang';
+import adjustFieldsForDisplays from '../../utils/adjust-fields-for-displays';
+import useElementSize from '../../composables/use-element-size';
 import { clone } from 'lodash';
 
 type Item = Record<string, any>;
@@ -189,6 +201,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		resetPreset: {
+			type: Function as PropType<() => Promise<void>>,
+			default: null,
+		},
 	},
 	setup(props, { emit }) {
 		const relationsStore = useRelationsStore();
@@ -230,7 +246,7 @@ export default defineComponent({
 			page,
 			fields: fields,
 			filters: _filters,
-			searchQuery: _searchQuery,
+			searchQuery: _searchQuery as any,
 		});
 
 		const newLink = computed(() => {
@@ -287,8 +303,14 @@ export default defineComponent({
 			activeFilterCount,
 			refresh,
 			selectAll,
+			resetPresetAndRefresh,
 		};
 
+		async function resetPresetAndRefresh() {
+			await props?.resetPreset?.();
+			refresh();
+		}
+
 		function refresh() {
 			getItems();
 		}
@@ -405,8 +427,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/mixins/breakpoint';
-@import '@/styles/mixins/form-grid';
+@import '../../styles/mixins/breakpoint';
+@import '../../styles/mixins/form-grid';
 
 .layout-cards {
 	padding: var(--content-padding);
@@ -476,4 +498,8 @@ export default defineComponent({
 .nested-options {
 	@include form-grid;
 }
+
+.reset-preset {
+	margin-top: 24px;
+}
 </style>
diff --git a/app/src/layouts/cards/components/header.vue b/app/src/layouts/cards/components/header.vue
index 51843f3ce5..950297c97f 100644
--- a/app/src/layouts/cards/components/header.vue
+++ b/app/src/layouts/cards/components/header.vue
@@ -29,6 +29,7 @@
 					<v-list-item
 						v-for="field in fieldsWithoutFake"
 						:key="field.field"
+						:disabled="field.disabled"
 						:active="field.field === sortKey"
 						@click="_sort = field.field"
 					>
@@ -49,8 +50,8 @@
 
 <script lang="ts">
 import { defineComponent, PropType, computed } from '@vue/composition-api';
-import { Field } from '@/types';
-import useSync from '@/composables/use-sync';
+import { Field } from '../../../types';
+import useSync from '../../../composables/use-sync';
 
 export default defineComponent({
 	props: {
@@ -83,7 +84,15 @@ export default defineComponent({
 			return props.fields.find((field) => field.field === sortKey.value);
 		});
 
-		const fieldsWithoutFake = computed(() => props.fields.filter((field) => field.field.startsWith('$') === false));
+		const fieldsWithoutFake = computed(() => {
+			return props.fields
+				.filter((field) => field.field.startsWith('$') === false)
+				.map((field) => ({
+					field: field.field,
+					name: field.name,
+					disabled: ['json', 'o2m', 'm2o', 'file', 'files', 'alias', 'presentation'].includes(field.type),
+				}));
+		});
 
 		return {
 			toggleSize,
diff --git a/app/src/layouts/tabular/tabular.vue b/app/src/layouts/tabular/tabular.vue
index 5b44c8e8ea..bf143bbc35 100644
--- a/app/src/layouts/tabular/tabular.vue
+++ b/app/src/layouts/tabular/tabular.vue
@@ -145,18 +145,18 @@
 import Vue from 'vue';
 import { defineComponent, PropType, ref, computed, inject, toRefs, Ref, watch } from '@vue/composition-api';
 
-import { HeaderRaw, Item } from '@/components/v-table/types';
-import { Field, Filter } from '@/types';
-import router from '@/router';
-import useSync from '@/composables/use-sync';
+import { HeaderRaw, Item } from '../../components/v-table/types';
+import { Field, Filter } from '../../types';
+import router from '../../router';
+import useSync from '../../composables/use-sync';
 import { debounce, clone } from 'lodash';
 import Draggable from 'vuedraggable';
-import useCollection from '@/composables/use-collection';
-import useItems from '@/composables/use-items';
-import i18n from '@/lang';
-import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
-import hideDragImage from '@/utils/hide-drag-image';
-import useShortcut from '@/composables/use-shortcut';
+import useCollection from '../../composables/use-collection';
+import useItems from '../../composables/use-items';
+import i18n from '../../lang';
+import adjustFieldsForDisplays from '../../utils/adjust-fields-for-displays';
+import hideDragImage from '../../utils/hide-drag-image';
+import useShortcut from '../../composables/use-shortcut';
 
 type layoutOptions = {
 	widths?: {
@@ -432,6 +432,9 @@ export default defineComponent({
 							type: field.type,
 							field: field.field,
 						},
+						sortable:
+							['json', 'o2m', 'm2o', 'file', 'files', 'alias', 'presentation'].includes(field.type) ===
+							false,
 					}));
 				},
 				set(val) {
@@ -525,7 +528,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/mixins/breakpoint';
+@import '../../styles/mixins/breakpoint';
 
 .layout-tabular {
 	display: contents;
diff --git a/app/src/modules/files/routes/collection.vue b/app/src/modules/files/routes/collection.vue
index 71c56da348..e9a132977f 100644
--- a/app/src/modules/files/routes/collection.vue
+++ b/app/src/modules/files/routes/collection.vue
@@ -110,6 +110,7 @@
 			:layout-query.sync="layoutQuery"
 			:filters="filtersWithFolderAndType"
 			:search-query="searchQuery"
+			:reset-preset="resetPreset"
 			@update:filters="filters = $event"
 		>
 			<template #no-results>
@@ -201,7 +202,9 @@ export default defineComponent({
 
 		const userStore = useUserStore();
 
-		const { layout, layoutOptions, layoutQuery, filters, searchQuery } = usePreset(ref('directus_files'));
+		const { layout, layoutOptions, layoutQuery, filters, searchQuery, resetPreset } = usePreset(
+			ref('directus_files')
+		);
 		const { batchLink } = useLinks();
 		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
 		const { breadcrumb, title } = useBreadcrumb();
@@ -303,6 +306,7 @@ export default defineComponent({
 			batchDeleteAllowed,
 			createAllowed,
 			createFolderAllowed,
+			resetPreset,
 		};
 
 		function useBatchDelete() {
diff --git a/app/src/modules/users/routes/collection.vue b/app/src/modules/users/routes/collection.vue
index 103efc6494..7b56cc4588 100644
--- a/app/src/modules/users/routes/collection.vue
+++ b/app/src/modules/users/routes/collection.vue
@@ -95,6 +95,7 @@
 			:layout-query.sync="layoutQuery"
 			:filters="_filters"
 			:search-query="searchQuery"
+			:reset-preset="resetPreset"
 			@update:filters="filters = $event"
 		>
 			<template #no-results>
@@ -165,7 +166,9 @@ export default defineComponent({
 
 		const selection = ref<Item[]>([]);
 
-		const { layout, layoutOptions, layoutQuery, filters, searchQuery } = usePreset(ref('directus_users'));
+		const { layout, layoutOptions, layoutQuery, filters, searchQuery, resetPreset } = usePreset(
+			ref('directus_users')
+		);
 		const { addNewLink, batchLink } = useLinks();
 		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
 		const { breadcrumb, title } = useBreadcrumb();
@@ -230,6 +233,7 @@ export default defineComponent({
 			batchEditAllowed,
 			batchDeleteAllowed,
 			createAllowed,
+			resetPreset,
 		};
 
 		async function refresh() {