diff --git a/app/src/composables/use-field-tree.ts b/app/src/composables/use-field-tree.ts
index ecf316b8eb..662a320f28 100644
--- a/app/src/composables/use-field-tree.ts
+++ b/app/src/composables/use-field-tree.ts
@@ -45,16 +45,38 @@ export function useFieldTree(
 		const fields = fieldsStore
 			.getFieldsForCollection(collection!)
 			.concat(injectedFields || [])
-			.filter((field: Field) => !field.meta?.special?.includes('alias') && !field.meta?.special?.includes('no-data'))
+			.filter(
+				(field: Field) =>
+					field.meta?.special?.includes('group') ||
+					(!field.meta?.special?.includes('alias') && !field.meta?.special?.includes('no-data'))
+			);
+
+		const nonGroupFields = fields.filter((field: Field) => !field.meta?.group);
+
+		const sortGroupFields = (a: Field, b: Field) => {
+			if (!a.meta?.sort || !b.meta?.sort) return 0;
+			return a.meta.sort - b.meta.sort;
+		};
+
+		for (const [index, field] of nonGroupFields.entries()) {
+			const groupFields = fields.filter((groupField: Field) => groupField.meta?.group === field.field);
+			if (groupFields.length) {
+				nonGroupFields.splice(index + 1, 0, ...groupFields.sort(sortGroupFields));
+			}
+		}
+
+		const sortedFields = nonGroupFields
+			.filter((field) => !field.meta?.special?.includes('alias') && !field.meta?.special?.includes('no-data'))
 			.filter(filter)
 			.flatMap((field) => makeNode(field, parent));
 
-		return fields.length > 0 ? fields : undefined;
+		return sortedFields.length ? sortedFields : undefined;
 	}
 
 	function makeNode(field: Field, parent?: FieldNode): FieldNode | FieldNode[] {
 		const relatedCollections = getRelatedCollections(field);
 		const context = parent ? parent.key + '.' : '';
+
 		if (relatedCollections.length <= 1) {
 			return {
 				name: field.name,