diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 2fd9ea7a..5d195a3f 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -83,7 +83,10 @@ export default function Modal({
       }
     >
       <Stack direction="row" alignItems="flex-start">
-        <DialogTitle id="modal-title" style={{ flexGrow: 1 }}>
+        <DialogTitle
+          id="modal-title"
+          style={{ flexGrow: 1, userSelect: "none" }}
+        >
           {title}
         </DialogTitle>
 
diff --git a/src/components/Table/ColumnMenu/FieldsDropdown.tsx b/src/components/Table/ColumnMenu/FieldsDropdown.tsx
index 447557af..30e367a8 100644
--- a/src/components/Table/ColumnMenu/FieldsDropdown.tsx
+++ b/src/components/Table/ColumnMenu/FieldsDropdown.tsx
@@ -1,34 +1,13 @@
-import { makeStyles, createStyles } from "@material-ui/styles";
-import {
-  TextField,
-  MenuItem,
-  ListItemIcon,
-  TextFieldProps,
-} from "@material-ui/core";
+import MultiSelect from "@antlerengineering/multiselect";
+import { ListItemIcon } from "@material-ui/core";
 
 import { FIELDS } from "components/fields";
 import { FieldType } from "constants/fields";
 import { getFieldProp } from "components/fields";
 
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    helperText: {
-      ...theme.typography.body2,
-      marginTop: theme.spacing(1),
-    },
-
-    listItemIcon: {
-      verticalAlign: "text-bottom",
-      minWidth: theme.spacing(5),
-      "& svg": { margin: theme.spacing(-0.5, 0) },
-    },
-  })
-);
-
 export interface IFieldsDropdownProps {
   value: FieldType;
-  onChange: TextFieldProps["onChange"];
-  className?: string;
+  onChange: (value: FieldType) => void;
   hideLabel?: boolean;
   options?: FieldType[];
 }
@@ -39,42 +18,58 @@ export interface IFieldsDropdownProps {
 export default function FieldsDropdown({
   value,
   onChange,
-  className,
   hideLabel = false,
   options: optionsProp,
 }: IFieldsDropdownProps) {
-  const classes = useStyles();
-
   const options = optionsProp
     ? FIELDS.filter((fieldConfig) => optionsProp.indexOf(fieldConfig.type) > -1)
     : FIELDS;
 
   return (
-    <TextField
-      fullWidth
-      select
+    <MultiSelect
+      multiple={false}
       value={value ? value : ""}
       onChange={onChange}
-      inputProps={{ name: "type", id: "type" }}
-      label={!hideLabel ? "Field Type" : ""}
-      aria-label="Field Type"
-      hiddenLabel={hideLabel}
-      helperText={value && getFieldProp("description", value)}
-      FormHelperTextProps={{ classes: { root: classes.helperText } }}
-      className={className}
-    >
-      {options.map((fieldConfig) => (
-        <MenuItem
-          key={`select-field-${fieldConfig.type}`}
-          id={`select-field-${fieldConfig.type}`}
-          value={fieldConfig.type}
-        >
-          <ListItemIcon className={classes.listItemIcon}>
-            {fieldConfig.icon}
+      options={options.map((fieldConfig) => ({
+        label: fieldConfig.name,
+        value: fieldConfig.type,
+      }))}
+      {...({
+        AutocompleteProps: {
+          groupBy: (option) => getFieldProp("group", option.value),
+        },
+      } as any)}
+      itemRenderer={(option) => (
+        <>
+          <ListItemIcon style={{ minWidth: 40 }}>
+            {getFieldProp("icon", option.value as FieldType)}
           </ListItemIcon>
-          {fieldConfig.name}
-        </MenuItem>
-      ))}
-    </TextField>
+          {option.label}
+        </>
+      )}
+      label="Field Type"
+      labelPlural="Field Types"
+      TextFieldProps={{
+        hiddenLabel: hideLabel,
+        helperText: value && getFieldProp("description", value),
+        SelectProps: {
+          displayEmpty: true,
+          renderValue: () => (
+            <>
+              <ListItemIcon
+                sx={{
+                  minWidth: 40,
+                  verticalAlign: "text-bottom",
+                  "& svg": { my: -0.5 },
+                }}
+              >
+                {getFieldProp("icon", value as FieldType)}
+              </ListItemIcon>
+              {getFieldProp("name", value as FieldType)}
+            </>
+          ),
+        },
+      }}
+    />
   );
 }
diff --git a/src/components/Table/ColumnMenu/NewColumn.tsx b/src/components/Table/ColumnMenu/NewColumn.tsx
index 75c8c332..3b54a1e7 100644
--- a/src/components/Table/ColumnMenu/NewColumn.tsx
+++ b/src/components/Table/ColumnMenu/NewColumn.tsx
@@ -89,10 +89,7 @@ export default function FormDialog({
           </section>
 
           <section>
-            <FieldsDropdown
-              value={type}
-              onChange={(newType) => setType(newType.target.value as FieldType)}
-            />
+            <FieldsDropdown value={type} onChange={setType} />
           </section>
         </>
       }
diff --git a/src/components/Table/ColumnMenu/TypeChange.tsx b/src/components/Table/ColumnMenu/TypeChange.tsx
index 6435279a..6e9a227b 100644
--- a/src/components/Table/ColumnMenu/TypeChange.tsx
+++ b/src/components/Table/ColumnMenu/TypeChange.tsx
@@ -19,14 +19,7 @@ export default function FormDialog({
     <Modal
       onClose={handleClose}
       title="Change Column Type"
-      children={
-        <FieldsDropdown
-          value={newType}
-          onChange={(newType: any) => {
-            setType(newType.target.value);
-          }}
-        />
-      }
+      children={<FieldsDropdown value={newType} onChange={setType} />}
       actions={{
         primary: {
           onClick: () => {
@@ -39,10 +32,6 @@ export default function FormDialog({
           },
           children: "Update",
         },
-        secondary: {
-          onClick: handleClose,
-          children: "Cancel",
-        },
       }}
       maxWidth="xs"
     />
diff --git a/src/components/Wizards/ImportCsvWizard/Step2NewColumns.tsx b/src/components/Wizards/ImportCsvWizard/Step2NewColumns.tsx
index 3ad383a9..a1cebf74 100644
--- a/src/components/Wizards/ImportCsvWizard/Step2NewColumns.tsx
+++ b/src/components/Wizards/ImportCsvWizard/Step2NewColumns.tsx
@@ -43,9 +43,9 @@ export default function Step2NewColumns({
 
   const [fieldToEdit, setFieldToEdit] = useState(0);
 
-  const handleChange = (e) => {
+  const handleChange = (v) => {
     const newColumns = [...config.newColumns];
-    newColumns[fieldToEdit].type = e.target.value;
+    newColumns[fieldToEdit].type = v;
 
     setConfig((config) => ({ ...config, newColumns }));
   };
diff --git a/src/components/Wizards/ImportWizard/Step3Types.tsx b/src/components/Wizards/ImportWizard/Step3Types.tsx
index 8eb7f254..41fa7696 100644
--- a/src/components/Wizards/ImportWizard/Step3Types.tsx
+++ b/src/components/Wizards/ImportWizard/Step3Types.tsx
@@ -37,8 +37,7 @@ export default function Step3Types({ config, updateConfig, isXs }: IStepProps) {
 
   const [fieldToEdit, setFieldToEdit] = useState(Object.keys(config)[0]);
 
-  const handleChange = (e) =>
-    updateConfig({ [fieldToEdit]: { type: e.target.value } });
+  const handleChange = (v) => updateConfig({ [fieldToEdit]: { type: v } });
 
   const { tableState } = useProjectContext();
 
diff --git a/src/components/fields/Action/index.tsx b/src/components/fields/Action/index.tsx
index fb1f0eaa..96c1f88e 100644
--- a/src/components/fields/Action/index.tsx
+++ b/src/components/fields/Action/index.tsx
@@ -19,6 +19,7 @@ const Settings = lazy(
 export const config: IFieldConfig = {
   type: FieldType.action,
   name: "Action",
+  group: "Cloud Function",
   dataType: "any",
   initialValue: {},
   icon: <ActionIcon />,
diff --git a/src/components/fields/Aggregate/Settings.tsx b/src/components/fields/Aggregate/Settings.tsx
index c9d8c2e9..ec2e8ada 100644
--- a/src/components/fields/Aggregate/Settings.tsx
+++ b/src/components/fields/Aggregate/Settings.tsx
@@ -67,8 +67,8 @@ switch (triggerType){
               FieldType.action,
             ].includes(f)
         )}
-        onChange={(newType: any) => {
-          handleChange("renderFieldType")(newType.target.value);
+        onChange={(value) => {
+          handleChange("renderFieldType")(value);
         }}
       />
     </>
diff --git a/src/components/fields/Aggregate/index.tsx b/src/components/fields/Aggregate/index.tsx
index 9ad5117f..5220e558 100644
--- a/src/components/fields/Aggregate/index.tsx
+++ b/src/components/fields/Aggregate/index.tsx
@@ -8,6 +8,7 @@ import NullEditor from "components/Table/editors/NullEditor";
 export const config: IFieldConfig = {
   type: FieldType.aggregate,
   name: "Aggregate",
+  group: "Cloud Function",
   dataType: "string",
   initialValue: "",
   initializable: false,
diff --git a/src/components/fields/Checkbox/index.tsx b/src/components/fields/Checkbox/index.tsx
index bae30a18..1d21a676 100644
--- a/src/components/fields/Checkbox/index.tsx
+++ b/src/components/fields/Checkbox/index.tsx
@@ -19,6 +19,7 @@ const SideDrawerField = lazy(
 export const config: IFieldConfig = {
   type: FieldType.checkbox,
   name: "Toggle",
+  group: "Numeric",
   dataType: "boolean",
   initialValue: false,
   initializable: true,
diff --git a/src/components/fields/Code/index.tsx b/src/components/fields/Code/index.tsx
index 033f4057..d373f37e 100644
--- a/src/components/fields/Code/index.tsx
+++ b/src/components/fields/Code/index.tsx
@@ -14,6 +14,7 @@ const SideDrawerField = lazy(
 export const config: IFieldConfig = {
   type: FieldType.code,
   name: "Code",
+  group: "Code",
   dataType: "string",
   initialValue: "",
   initializable: true,
diff --git a/src/components/fields/Color/index.tsx b/src/components/fields/Color/index.tsx
index 58f49891..de8d3607 100644
--- a/src/components/fields/Color/index.tsx
+++ b/src/components/fields/Color/index.tsx
@@ -18,6 +18,7 @@ const SideDrawerField = lazy(
 export const config: IFieldConfig = {
   type: FieldType.color,
   name: "Color",
+  group: "Numeric",
   dataType: "Record<string, any>",
   initialValue: {},
   initializable: true,
diff --git a/src/components/fields/ConnectService/index.tsx b/src/components/fields/ConnectService/index.tsx
index 83e4cdaf..de773e8d 100644
--- a/src/components/fields/ConnectService/index.tsx
+++ b/src/components/fields/ConnectService/index.tsx
@@ -24,6 +24,7 @@ const Settings = lazy(
 export const config: IFieldConfig = {
   type: FieldType.connectService,
   name: "Connect Service",
+  group: "Connection",
   dataType: "{ docPath: string; snapshot: Record<string, any>; }",
   initialValue: [],
   icon: <ConnectServiceIcon />,
diff --git a/src/components/fields/ConnectTable/index.tsx b/src/components/fields/ConnectTable/index.tsx
index bbb880be..a7ceee5a 100644
--- a/src/components/fields/ConnectTable/index.tsx
+++ b/src/components/fields/ConnectTable/index.tsx
@@ -24,6 +24,7 @@ const Settings = lazy(
 export const config: IFieldConfig = {
   type: FieldType.connectTable,
   name: "Connect Table",
+  group: "Connection",
   dataType: "{ docPath: string; snapshot: Record<string, any>; }",
   initialValue: [],
   icon: <ConnectTableIcon />,
diff --git a/src/components/fields/Date/index.tsx b/src/components/fields/Date/index.tsx
index 1ed045c1..53e4415b 100644
--- a/src/components/fields/Date/index.tsx
+++ b/src/components/fields/Date/index.tsx
@@ -21,6 +21,7 @@ const Settings = lazy(
 export const config: IFieldConfig = {
   type: FieldType.date,
   name: "Date",
+  group: "Date & Time",
   dataType: "firebase.firestore.Timestamp",
   initialValue: null,
   initializable: true,
diff --git a/src/components/fields/DateTime/index.tsx b/src/components/fields/DateTime/index.tsx
index 4f9d35ea..33f286e6 100644
--- a/src/components/fields/DateTime/index.tsx
+++ b/src/components/fields/DateTime/index.tsx
@@ -20,6 +20,7 @@ const SideDrawerField = lazy(
 export const config: IFieldConfig = {
   type: FieldType.dateTime,
   name: "Time & Date",
+  group: "Date & Time",
   dataType: "firebase.firestore.Timestamp",
   initialValue: null,
   initializable: true,
diff --git a/src/components/fields/Derivative/Settings.tsx b/src/components/fields/Derivative/Settings.tsx
index de6172fe..01fbbe5b 100644
--- a/src/components/fields/Derivative/Settings.tsx
+++ b/src/components/fields/Derivative/Settings.tsx
@@ -50,8 +50,8 @@ const Settings = ({ config, handleChange }) => {
                   FieldType.action,
                 ].includes(f)
             )}
-            onChange={(newType: any) => {
-              handleChange("renderFieldType")(newType.target.value);
+            onChange={(value) => {
+              handleChange("renderFieldType")(value);
             }}
           />
         </Grid>
diff --git a/src/components/fields/Derivative/index.tsx b/src/components/fields/Derivative/index.tsx
index 81764087..85fd18c8 100644
--- a/src/components/fields/Derivative/index.tsx
+++ b/src/components/fields/Derivative/index.tsx
@@ -9,6 +9,7 @@ import Settings from "./Settings";
 export const config: IFieldConfig = {
   type: FieldType.derivative,
   name: "Derivative",
+  group: "Cloud Function",
   dataType: "string",
   initialValue: "",
   initializable: true,
diff --git a/src/components/fields/Duration/index.tsx b/src/components/fields/Duration/index.tsx
index 4465b709..cb592f68 100644
--- a/src/components/fields/Duration/index.tsx
+++ b/src/components/fields/Duration/index.tsx
@@ -19,6 +19,7 @@ const SideDrawerField = lazy(
 export const config: IFieldConfig = {
   type: FieldType.duration,
   name: "Duration",
+  group: "Date & Time",
   dataType:
     "{ start: firebase.firestore.Timestamp, end?: firebase.firestore.Timestamp }",
   initialValue: {},
diff --git a/src/components/fields/Email/index.tsx b/src/components/fields/Email/index.tsx
index 783cbdad..392f699d 100644
--- a/src/components/fields/Email/index.tsx
+++ b/src/components/fields/Email/index.tsx
@@ -14,6 +14,7 @@ const SideDrawerField = lazy(
 export const config: IFieldConfig = {
   type: FieldType.email,
   name: "Email",
+  group: "Text",
   dataType: "string",
   initialValue: "",
   initializable: true,
diff --git a/src/components/fields/File/index.tsx b/src/components/fields/File/index.tsx
index a99ff8de..bb30651a 100644
--- a/src/components/fields/File/index.tsx
+++ b/src/components/fields/File/index.tsx
@@ -17,6 +17,7 @@ const SideDrawerField = lazy(
 export const config: IFieldConfig = {
   type: FieldType.file,
   name: "File",
+  group: "File",
   dataType:
     "{ downloadURL: string, lastModifiedTS: number, name: string, type, ref }[]",
   initialValue: [],
diff --git a/src/components/fields/Id/index.tsx b/src/components/fields/Id/index.tsx
index 2ca5c776..52645928 100644
--- a/src/components/fields/Id/index.tsx
+++ b/src/components/fields/Id/index.tsx
@@ -16,6 +16,7 @@ const SideDrawerField = lazy(
 export const config: IFieldConfig = {
   type: FieldType.id,
   name: "ID",
+  group: "Metadata",
   dataType: "undefined",
   initialValue: "",
   icon: <IdIcon />,
diff --git a/src/components/fields/Image/index.tsx b/src/components/fields/Image/index.tsx
index d9045cfd..f5870507 100644
--- a/src/components/fields/Image/index.tsx
+++ b/src/components/fields/Image/index.tsx
@@ -17,6 +17,7 @@ const SideDrawerField = lazy(
 export const config: IFieldConfig = {
   type: FieldType.image,
   name: "Image",
+  group: "File",
   dataType:
     "{ downloadURL: string, lastModifiedTS: number, name: string, type, ref }[]",
   initialValue: [],
diff --git a/src/components/fields/Json/index.tsx b/src/components/fields/Json/index.tsx
index 4592efc5..404ca58b 100644
--- a/src/components/fields/Json/index.tsx
+++ b/src/components/fields/Json/index.tsx
@@ -18,6 +18,7 @@ const Settings = lazy(
 export const config: IFieldConfig = {
   type: FieldType.json,
   name: "JSON",
+  group: "Code",
   dataType: "any",
   initialValue: {},
   initializable: true,
diff --git a/src/components/fields/LongText/index.tsx b/src/components/fields/LongText/index.tsx
index ac4f3b70..fb7bd1f1 100644
--- a/src/components/fields/LongText/index.tsx
+++ b/src/components/fields/LongText/index.tsx
@@ -16,6 +16,7 @@ const SideDrawerField = lazy(
 export const config: IFieldConfig = {
   type: FieldType.longText,
   name: "Long Text",
+  group: "Text",
   dataType: "string",
   initialValue: "",
   initializable: true,
diff --git a/src/components/fields/MultiSelect/index.tsx b/src/components/fields/MultiSelect/index.tsx
index f808be1b..fc7f186a 100644
--- a/src/components/fields/MultiSelect/index.tsx
+++ b/src/components/fields/MultiSelect/index.tsx
@@ -27,6 +27,7 @@ const Settings = lazy(
 export const config: IFieldConfig = {
   type: FieldType.multiSelect,
   name: "Multi Select",
+  group: "Select",
   dataType: "string[]",
   initialValue: [],
   initializable: true,
diff --git a/src/components/fields/Number/index.tsx b/src/components/fields/Number/index.tsx
index 7177c659..20b67ce0 100644
--- a/src/components/fields/Number/index.tsx
+++ b/src/components/fields/Number/index.tsx
@@ -14,6 +14,7 @@ const SideDrawerField = lazy(
 export const config: IFieldConfig = {
   type: FieldType.number,
   name: "Number",
+  group: "Numeric",
   dataType: "number",
   initialValue: 0,
   initializable: true,
diff --git a/src/components/fields/Percentage/index.tsx b/src/components/fields/Percentage/index.tsx
index caebe928..7d6e9558 100644
--- a/src/components/fields/Percentage/index.tsx
+++ b/src/components/fields/Percentage/index.tsx
@@ -16,6 +16,7 @@ const SideDrawerField = lazy(
 export const config: IFieldConfig = {
   type: FieldType.percentage,
   name: "Percentage",
+  group: "Numeric",
   dataType: "number",
   initialValue: 0,
   initializable: true,
diff --git a/src/components/fields/Phone/index.tsx b/src/components/fields/Phone/index.tsx
index d47767c0..10390b15 100644
--- a/src/components/fields/Phone/index.tsx
+++ b/src/components/fields/Phone/index.tsx
@@ -14,6 +14,7 @@ const SideDrawerField = lazy(
 export const config: IFieldConfig = {
   type: FieldType.phone,
   name: "Phone",
+  group: "Text",
   dataType: "string",
   initialValue: "",
   initializable: true,
diff --git a/src/components/fields/Rating/index.tsx b/src/components/fields/Rating/index.tsx
index fb3a2eef..3202fcfa 100644
--- a/src/components/fields/Rating/index.tsx
+++ b/src/components/fields/Rating/index.tsx
@@ -20,6 +20,7 @@ const Settings = lazy(
 export const config: IFieldConfig = {
   type: FieldType.rating,
   name: "Rating",
+  group: "Numeric",
   dataType: "number",
   initialValue: 0,
   initializable: true,
diff --git a/src/components/fields/RichText/index.tsx b/src/components/fields/RichText/index.tsx
index 8e56e34d..6e874846 100644
--- a/src/components/fields/RichText/index.tsx
+++ b/src/components/fields/RichText/index.tsx
@@ -19,6 +19,7 @@ const SideDrawerField = lazy(
 export const config: IFieldConfig = {
   type: FieldType.richText,
   name: "Rich Text",
+  group: "Code",
   dataType: "string",
   initialValue: "",
   initializable: true,
diff --git a/src/components/fields/ShortText/index.tsx b/src/components/fields/ShortText/index.tsx
index 3929e7cb..9e146a31 100644
--- a/src/components/fields/ShortText/index.tsx
+++ b/src/components/fields/ShortText/index.tsx
@@ -19,6 +19,7 @@ const Settings = lazy(
 export const config: IFieldConfig = {
   type: FieldType.shortText,
   name: "Short Text",
+  group: "Text",
   dataType: "string",
   initialValue: "",
   initializable: true,
diff --git a/src/components/fields/SingleSelect/index.tsx b/src/components/fields/SingleSelect/index.tsx
index 1389e102..fd56639e 100644
--- a/src/components/fields/SingleSelect/index.tsx
+++ b/src/components/fields/SingleSelect/index.tsx
@@ -24,6 +24,7 @@ const Settings = lazy(
 export const config: IFieldConfig = {
   type: FieldType.singleSelect,
   name: "Single Select",
+  group: "File",
   dataType: "string | null",
   initialValue: null,
   initializable: true,
diff --git a/src/components/fields/Slider/index.tsx b/src/components/fields/Slider/index.tsx
index 646d6daa..b8592c3e 100644
--- a/src/components/fields/Slider/index.tsx
+++ b/src/components/fields/Slider/index.tsx
@@ -20,6 +20,7 @@ const Settings = lazy(
 export const config: IFieldConfig = {
   type: FieldType.slider,
   name: "Slider",
+  group: "Numeric",
   dataType: "number",
   initialValue: 0,
   initializable: true,
diff --git a/src/components/fields/Status/index.tsx b/src/components/fields/Status/index.tsx
index 707e25dc..bf8073b3 100644
--- a/src/components/fields/Status/index.tsx
+++ b/src/components/fields/Status/index.tsx
@@ -20,6 +20,7 @@ const Settings = lazy(
 export const config: IFieldConfig = {
   type: FieldType.status,
   name: "Status",
+  group: "Cloud Function",
   dataType: "any",
   initialValue: undefined,
   initializable: true,
diff --git a/src/components/fields/SubTable/index.tsx b/src/components/fields/SubTable/index.tsx
index 654205ba..e730d8f6 100644
--- a/src/components/fields/SubTable/index.tsx
+++ b/src/components/fields/SubTable/index.tsx
@@ -21,6 +21,7 @@ const Settings = lazy(
 export const config: IFieldConfig = {
   type: FieldType.subTable,
   name: "SubTable",
+  group: "Connection",
   dataType: "undefined",
   initialValue: null,
   icon: <SubTableIcon />,
diff --git a/src/components/fields/Url/index.tsx b/src/components/fields/Url/index.tsx
index 2a4d96f1..b758fba8 100644
--- a/src/components/fields/Url/index.tsx
+++ b/src/components/fields/Url/index.tsx
@@ -14,6 +14,7 @@ const SideDrawerField = lazy(
 export const config: IFieldConfig = {
   type: FieldType.url,
   name: "URL",
+  group: "Text",
   dataType: "string",
   initialValue: "",
   initializable: true,
diff --git a/src/components/fields/User/index.tsx b/src/components/fields/User/index.tsx
index 2109af90..3dcdcc5d 100644
--- a/src/components/fields/User/index.tsx
+++ b/src/components/fields/User/index.tsx
@@ -17,6 +17,7 @@ const SideDrawerField = lazy(
 export const config: IFieldConfig = {
   type: FieldType.user,
   name: "User",
+  group: "Metadata",
   dataType:
     "{ displayName: string, email: string, emailVerified: boolean, isAnonymous: boolean, photoURL: string, timestamp: firebase.firestore.Timestamp, uid: string }",
   initialValue: null,
diff --git a/src/components/fields/index.tsx b/src/components/fields/index.tsx
index afa107d5..0f623bb7 100644
--- a/src/components/fields/index.tsx
+++ b/src/components/fields/index.tsx
@@ -44,6 +44,9 @@ export const FIELDS: IFieldConfig[] = [
   Email,
   Phone,
   Url,
+  // SELECT
+  SingleSelect,
+  MultiSelect,
   // NUMERIC
   Checkbox,
   Number_,
@@ -58,9 +61,6 @@ export const FIELDS: IFieldConfig[] = [
   // FILE
   Image_,
   File_,
-  // SELECT
-  SingleSelect,
-  MultiSelect,
   // CONNECTION
   SubTable,
   ConnectTable,
@@ -74,7 +74,7 @@ export const FIELDS: IFieldConfig[] = [
   Derivative,
   Aggregate,
   Status,
-  // INTERNAL
+  // METADATA
   User,
   Id,
 ];
diff --git a/src/components/fields/types.ts b/src/components/fields/types.ts
index 8ac53be0..5750ecf4 100644
--- a/src/components/fields/types.ts
+++ b/src/components/fields/types.ts
@@ -9,6 +9,7 @@ export { FieldType };
 export interface IFieldConfig {
   type: FieldType;
   name: string;
+  group: string;
   dataType: string;
   initializable?: boolean;
   requireConfiguration?: boolean;
diff --git a/src/constants/fields.ts b/src/constants/fields.ts
index 3751cb38..63c30a49 100644
--- a/src/constants/fields.ts
+++ b/src/constants/fields.ts
@@ -6,6 +6,9 @@ export enum FieldType {
   email = "EMAIL",
   phone = "PHONE_NUMBER",
   url = "URL",
+  // SELECT
+  singleSelect = "SINGLE_SELECT",
+  multiSelect = "MULTI_SELECT",
   // NUMERIC
   checkbox = "CHECK_BOX",
   number = "NUMBER",
@@ -20,9 +23,6 @@ export enum FieldType {
   // FILE
   image = "IMAGE",
   file = "FILE",
-  // SELECT
-  singleSelect = "SINGLE_SELECT",
-  multiSelect = "MULTI_SELECT",
   // CONNECTION
   subTable = "SUB_TABLE",
   connectTable = "DOCUMENT_SELECT",
@@ -35,9 +35,9 @@ export enum FieldType {
   action = "ACTION",
   derivative = "DERIVATIVE",
   aggregate = "AGGREGATE",
-  // INTERNAL
+  status = "STATUS",
+  // METADATA
   user = "USER",
   id = "ID",
   last = "LAST",
-  status = "STATUS",
 }