diff --git a/CommonUI/src/Components/CategoryCheckbox/Index.tsx b/CommonUI/src/Components/CategoryCheckbox/Index.tsx
index 12089a7ab4..cdd88ff621 100644
--- a/CommonUI/src/Components/CategoryCheckbox/Index.tsx
+++ b/CommonUI/src/Components/CategoryCheckbox/Index.tsx
@@ -2,15 +2,16 @@ import React, { FunctionComponent, ReactElement } from 'react';
 import { CategoryCheckboxOption, CheckboxCategory, CategoryCheckboxValue } from './CategoryCheckboxTypes';
 import Category from './Category';
 
-export interface ComponentProps {
+export interface CategoryCheckboxProps {
     categories: Array<CheckboxCategory>;
     options: Array<CategoryCheckboxOption>;
     onChange: (value: Array<CategoryCheckboxValue>) => void;
     initialValue?: undefined | Array<CategoryCheckboxValue>;
+    error?: string | undefined;
 }
 
-const LabelElement: FunctionComponent<ComponentProps> = (
-    props: ComponentProps
+const CategoryCheckbox: FunctionComponent<CategoryCheckboxProps> = (
+    props: CategoryCheckboxProps
 ): ReactElement => {
 
     const [currentValues, setCurrentValues] = React.useState<Array<CategoryCheckboxValue>>(props.initialValue || []);
@@ -43,8 +44,16 @@ const LabelElement: FunctionComponent<ComponentProps> = (
 
                 }} />)
             })}
+            {props.error && (
+                <p
+                    data-testid="error-message"
+                    className="mt-1 text-sm text-red-400"
+                >
+                    {props.error}
+                </p>
+            )}
         </div>
     );
 };
 
-export default LabelElement;
+export default CategoryCheckbox;
diff --git a/CommonUI/src/Components/Forms/Fields/FormField.tsx b/CommonUI/src/Components/Forms/Fields/FormField.tsx
index ef623c879c..28960862a0 100644
--- a/CommonUI/src/Components/Forms/Fields/FormField.tsx
+++ b/CommonUI/src/Components/Forms/Fields/FormField.tsx
@@ -21,6 +21,8 @@ import { JSONValue } from 'Common/Types/JSON';
 import IDGenerator from '../../ObjectID/IDGenerator';
 import ObjectID from 'Common/Types/ObjectID';
 import OneUptimeDate from 'Common/Types/Date';
+import CheckboxElement, { CategoryCheckboxValue } from '../../Checkbox/Checkbox';
+import CategoryCheckbox from '../../CategoryCheckbox/Index';
 
 export interface ComponentProps<T extends Object> {
     field: Field<T>;
@@ -41,521 +43,593 @@ const FormField: <T extends Object>(
 ) => ReactElement = <T extends Object>(
     props: ComponentProps<T>
 ): ReactElement => {
-    const getFieldType: Function = (fieldType: FormFieldSchemaType): string => {
-        switch (fieldType) {
-            case FormFieldSchemaType.Email:
-                return 'email';
-            case FormFieldSchemaType.Password:
-                return 'password';
-            case FormFieldSchemaType.EncryptedText:
-                return 'password';
-            case FormFieldSchemaType.Number:
-                return 'number';
-            case FormFieldSchemaType.Date:
-                return 'date';
-            case FormFieldSchemaType.DateTime:
-                return 'datetime-local';
-            case FormFieldSchemaType.Time:
-                return 'time';
-            case FormFieldSchemaType.LongText:
-                return 'textarea';
-            case FormFieldSchemaType.Color:
-                return 'color';
-            case FormFieldSchemaType.URL:
-                return 'url';
-            default:
-                return 'text';
-        }
-    };
+        const getFieldType: Function = (fieldType: FormFieldSchemaType): string => {
+            switch (fieldType) {
+                case FormFieldSchemaType.Email:
+                    return 'email';
+                case FormFieldSchemaType.Password:
+                    return 'password';
+                case FormFieldSchemaType.EncryptedText:
+                    return 'password';
+                case FormFieldSchemaType.Number:
+                    return 'number';
+                case FormFieldSchemaType.Date:
+                    return 'date';
+                case FormFieldSchemaType.DateTime:
+                    return 'datetime-local';
+                case FormFieldSchemaType.Time:
+                    return 'time';
+                case FormFieldSchemaType.LongText:
+                    return 'textarea';
+                case FormFieldSchemaType.Color:
+                    return 'color';
+                case FormFieldSchemaType.URL:
+                    return 'url';
+                default:
+                    return 'text';
+            }
+        };
 
-    const getFormField: Function = (): ReactElement => {
-        const index: number = props.index + 1;
+        const getFormField: Function = (): ReactElement => {
+            const index: number = props.index + 1;
 
-        const fieldType: string = props.field.fieldType
-            ? getFieldType(props.field.fieldType)
-            : 'text';
+            const fieldType: string = props.field.fieldType
+                ? getFieldType(props.field.fieldType)
+                : 'text';
 
-        if (Object.keys(props.field.field || {}).length === 0) {
-            throw new BadDataException('Object cannot be without Field');
-        }
-
-        if (props.field.showIf && !props.field.showIf(props.currentValues)) {
-            return <></>;
-        }
-
-        let codeType: CodeType = CodeType.HTML;
-
-        if (props.field.fieldType === FormFieldSchemaType.CSS) {
-            codeType = CodeType.CSS;
-        }
-
-        if (props.field.fieldType === FormFieldSchemaType.JavaScript) {
-            codeType = CodeType.JavaScript;
-        }
-
-        let fieldDescription: string | undefined = props.field.description;
-
-        if (
-            props.field.fieldType === FormFieldSchemaType.DateTime ||
-            props.field.fieldType === FormFieldSchemaType.Time
-        ) {
-            if (!fieldDescription) {
-                fieldDescription = '';
+            if (Object.keys(props.field.field || {}).length === 0) {
+                throw new BadDataException('Object cannot be without Field');
             }
 
-            fieldDescription +=
-                ' This is in your local timezone - ' +
-                OneUptimeDate.getCurrentTimezoneString();
-        }
+            if (props.field.showIf && !props.field.showIf(props.currentValues)) {
+                return <></>;
+            }
 
-        return (
-            <div className="sm:col-span-4 mt-0 mb-2" key={props.fieldName}>
-                <FieldLabelElement
-                    title={props.field.title || ''}
-                    description={fieldDescription}
-                    sideLink={props.field.sideLink}
-                    required={props.field.required}
-                    isHeading={
-                        props.field.styleType === FormFieldStyleType.Heading
-                    }
-                />
+            let codeType: CodeType = CodeType.HTML;
 
-                <div className="mt-2">
-                    {props.field.fieldType === FormFieldSchemaType.Color && (
-                        <ColorPicker
-                            error={
-                                props.touched && props.error
-                                    ? props.error
-                                    : undefined
-                            }
-                            onChange={async (value: Color | null) => {
-                                props.field.onChange &&
-                                    props.field.onChange(value);
-                                props.setFieldValue(props.fieldName, value);
-                                props.setFieldTouched(props.fieldName, true);
-                            }}
-                            tabIndex={index}
-                            placeholder={props.field.placeholder || ''}
-                            initialValue={
-                                props.currentValues &&
-                                (props.currentValues as any)[props.fieldName]
-                                    ? (props.currentValues as any)[
-                                          props.fieldName
-                                      ]
-                                    : ''
-                            }
-                        />
-                    )}
+            if (props.field.fieldType === FormFieldSchemaType.CSS) {
+                codeType = CodeType.CSS;
+            }
 
-                    {(props.field.fieldType === FormFieldSchemaType.Dropdown ||
-                        props.field.fieldType ===
-                            FormFieldSchemaType.MultiSelectDropdown) && (
-                        <Dropdown
-                            error={
-                                props.touched && props.error
-                                    ? props.error
-                                    : undefined
-                            }
-                            tabIndex={index}
-                            onChange={async (
-                                value:
-                                    | DropdownValue
-                                    | Array<DropdownValue>
-                                    | null
-                            ) => {
-                                props.field.onChange &&
-                                    props.field.onChange(value);
-                                props.setFieldValue(props.fieldName, value);
-                            }}
-                            onBlur={async () => {
-                                props.setFieldTouched(props.fieldName, true);
-                            }}
-                            isMultiSelect={
-                                props.field.fieldType ===
-                                FormFieldSchemaType.MultiSelectDropdown
-                            }
-                            options={props.field.dropdownOptions || []}
-                            placeholder={props.field.placeholder || ''}
-                            initialValue={
-                                props.currentValues &&
-                                (props.currentValues as any)[props.fieldName]
-                                    ? (props.currentValues as any)[
-                                          props.fieldName
-                                      ]
-                                    : ''
-                            }
-                        />
-                    )}
+            if (props.field.fieldType === FormFieldSchemaType.JavaScript) {
+                codeType = CodeType.JavaScript;
+            }
 
-                    {props.field.fieldType === FormFieldSchemaType.ObjectID && (
-                        <IDGenerator
-                            tabIndex={index}
-                            disabled={props.isDisabled || props.field.disabled}
-                            error={
-                                props.touched && props.error
-                                    ? props.error
-                                    : undefined
-                            }
-                            dataTestId={fieldType}
-                            onChange={(value: ObjectID) => {
-                                props.field.onChange &&
-                                    props.field.onChange(value);
-                                props.setFieldValue(props.fieldName, value);
-                            }}
-                            onEnterPress={() => {
-                                props.submitForm && props.submitForm();
-                            }}
-                            initialValue={
-                                props.currentValues &&
-                                (props.currentValues as any)[props.fieldName]
-                                    ? (props.currentValues as any)[
-                                          props.fieldName
-                                      ]
-                                    : props.field.defaultValue || null
-                            }
-                        />
-                    )}
+            let fieldDescription: string | undefined = props.field.description;
 
-                    {props.field.fieldType ===
-                        FormFieldSchemaType.RadioButton && (
-                        <RadioButtons
-                            error={
-                                props.touched && props.error
-                                    ? props.error
-                                    : undefined
-                            }
-                            onChange={async (value: string) => {
-                                props.field.onChange &&
-                                    props.field.onChange(value);
-                                props.setFieldValue(props.fieldName, value);
-                            }}
-                            options={props.field.radioButtonOptions || []}
-                            initialValue={
-                                props.currentValues &&
-                                (props.currentValues as any)[props.fieldName]
-                                    ? (props.currentValues as any)[
-                                          props.fieldName
-                                      ]
-                                    : ''
-                            }
-                        />
-                    )}
+            if (
+                props.field.fieldType === FormFieldSchemaType.DateTime ||
+                props.field.fieldType === FormFieldSchemaType.Time
+            ) {
+                if (!fieldDescription) {
+                    fieldDescription = '';
+                }
 
-                    {props.field.fieldType === FormFieldSchemaType.LongText && (
-                        <TextArea
-                            autoFocus={!props.disableAutofocus && index === 1}
-                            error={
-                                props.touched && props.error
-                                    ? props.error
-                                    : undefined
-                            }
-                            tabIndex={index}
-                            onChange={async (value: string) => {
-                                props.field.onChange &&
-                                    props.field.onChange(value);
-                                props.setFieldValue(props.fieldName, value);
-                            }}
-                            onBlur={async () => {
-                                props.setFieldTouched(props.fieldName, true);
-                            }}
-                            initialValue={
-                                props.currentValues &&
-                                (props.currentValues as any)[props.fieldName]
-                                    ? (props.currentValues as any)[
-                                          props.fieldName
-                                      ]
-                                    : ''
-                            }
-                            placeholder={props.field.placeholder || ''}
-                        />
-                    )}
+                fieldDescription +=
+                    ' This is in your local timezone - ' +
+                    OneUptimeDate.getCurrentTimezoneString();
+            }
 
-                    {props.field.fieldType === FormFieldSchemaType.JSON && (
-                        <CodeEditor
-                            error={
-                                props.touched && props.error
-                                    ? props.error
-                                    : undefined
-                            }
-                            type={CodeType.JSON}
-                            tabIndex={index}
-                            onChange={async (value: string) => {
-                                props.field.onChange &&
-                                    props.field.onChange(value);
-                                props.setFieldValue(props.fieldName, value);
-                            }}
-                            onBlur={async () => {
-                                props.setFieldTouched(props.fieldName, true);
-                            }}
-                            initialValue={
-                                props.currentValues &&
-                                (props.currentValues as any)[props.fieldName]
-                                    ? (props.currentValues as any)[
-                                          props.fieldName
-                                      ]
-                                    : ''
-                            }
-                            value={
-                                props.currentValues &&
-                                (props.currentValues as any)[props.fieldName]
-                                    ? (props.currentValues as any)[
-                                          props.fieldName
-                                      ]
-                                    : ''
-                            }
-                            placeholder={props.field.placeholder || ''}
-                        />
-                    )}
+            return (
+                <div className="sm:col-span-4 mt-0 mb-2" key={props.fieldName}>
 
-                    {props.field.fieldType === FormFieldSchemaType.Markdown && (
-                        <CodeEditor
-                            error={
-                                props.touched && props.error
-                                    ? props.error
-                                    : undefined
-                            }
-                            tabIndex={index}
-                            type={CodeType.Markdown}
-                            onChange={async (value: string) => {
-                                props.field.onChange &&
-                                    props.field.onChange(value);
-                                props.setFieldValue(props.fieldName, value);
-                            }}
-                            onBlur={async () => {
-                                props.setFieldTouched(props.fieldName, true);
-                            }}
-                            initialValue={
-                                props.currentValues &&
-                                (props.currentValues as any)[props.fieldName]
-                                    ? (props.currentValues as any)[
-                                          props.fieldName
-                                      ]
-                                    : ''
-                            }
-                            placeholder={props.field.placeholder || ''}
-                        />
-                    )}
+                    {/*** Do not display label on checkbox because checkbox can display its own label */}
 
-                    {props.field.fieldType ===
-                        FormFieldSchemaType.CustomComponent &&
-                        props.field.getCustomElement &&
-                        props.field.getCustomElement(props.currentValues, {
-                            error:
-                                props.touched && props.error
-                                    ? props.error
-                                    : undefined,
-                            tabIndex: index,
-                            onChange: async (value: string) => {
-                                props.field.onChange &&
-                                    props.field.onChange(value);
-                                props.setFieldValue(props.fieldName, value);
-                            },
-                            onBlur: async () => {
-                                props.setFieldTouched(props.fieldName, true);
-                            },
+                    {props.field.fieldType !== FormFieldSchemaType.Checkbox && <FieldLabelElement
+                        title={props.field.title || ''}
+                        description={fieldDescription}
+                        sideLink={props.field.sideLink}
+                        required={props.field.required}
+                        isHeading={
+                            props.field.styleType === FormFieldStyleType.Heading
+                        }
+                    />}
 
-                            initialValue:
-                                props.currentValues &&
-                                (props.currentValues as any)[props.fieldName]
-                                    ? (props.currentValues as any)[
-                                          props.fieldName
-                                      ]
-                                    : '',
-
-                            placeholder: props.field.placeholder || '',
-                        })}
-
-                    {(props.field.fieldType === FormFieldSchemaType.HTML ||
-                        props.field.fieldType === FormFieldSchemaType.CSS ||
-                        props.field.fieldType ===
-                            FormFieldSchemaType.JavaScript) && (
-                        <CodeEditor
-                            error={
-                                props.touched && props.error
-                                    ? props.error
-                                    : undefined
-                            }
-                            tabIndex={index}
-                            onChange={async (value: string) => {
-                                props.field.onChange &&
-                                    props.field.onChange(value);
-                                props.setFieldValue(props.fieldName, value);
-                            }}
-                            onBlur={async () => {
-                                props.setFieldTouched(props.fieldName, true);
-                            }}
-                            type={codeType}
-                            initialValue={
-                                props.currentValues &&
-                                (props.currentValues as any)[props.fieldName]
-                                    ? (props.currentValues as any)[
-                                          props.fieldName
-                                      ]
-                                    : ''
-                            }
-                            placeholder={props.field.placeholder || ''}
-                        />
-                    )}
-
-                    {(props.field.fieldType === FormFieldSchemaType.File ||
-                        props.field.fieldType ===
-                            FormFieldSchemaType.ImageFile) && (
-                        <FilePicker
-                            error={
-                                props.touched && props.error
-                                    ? props.error
-                                    : undefined
-                            }
-                            tabIndex={index}
-                            onChange={async (files: Array<FileModel>) => {
-                                let fileResult:
-                                    | FileModel
-                                    | Array<FileModel>
-                                    | null = files.map((i: FileModel) => {
-                                    const strippedModel: FileModel =
-                                        new FileModel();
-                                    strippedModel._id = i._id!;
-                                    return strippedModel;
-                                });
-
-                                if (
-                                    (props.field.fieldType ===
-                                        FormFieldSchemaType.File ||
-                                        props.field.fieldType ===
-                                            FormFieldSchemaType.ImageFile) &&
-                                    Array.isArray(fileResult)
-                                ) {
-                                    if (fileResult.length > 0) {
-                                        fileResult = fileResult[0] as FileModel;
-                                    } else {
-                                        fileResult = null;
-                                    }
+                    <div className="mt-2">
+                        {props.field.fieldType === FormFieldSchemaType.Color && (
+                            <ColorPicker
+                                error={
+                                    props.touched && props.error
+                                        ? props.error
+                                        : undefined
                                 }
-
-                                props.field.onChange &&
-                                    props.field.onChange(fileResult);
-                                props.setFieldValue(
-                                    props.fieldName,
-                                    fileResult
-                                );
-                            }}
-                            onBlur={async () => {
-                                props.setFieldTouched(props.fieldName, true);
-                            }}
-                            mimeTypes={
-                                props.field.fieldType ===
-                                FormFieldSchemaType.ImageFile
-                                    ? [
-                                          MimeType.png,
-                                          MimeType.jpeg,
-                                          MimeType.jpg,
-                                      ]
-                                    : []
-                            }
-                            initialValue={
-                                props.currentValues &&
-                                (props.currentValues as any)[props.fieldName]
-                                    ? (props.currentValues as any)[
-                                          props.fieldName
-                                      ]
-                                    : []
-                            }
-                            placeholder={props.field.placeholder || ''}
-                        />
-                    )}
-
-                    {props.field.fieldType === FormFieldSchemaType.Toggle && (
-                        <Toggle
-                            error={
-                                props.touched && props.error
-                                    ? props.error
-                                    : undefined
-                            }
-                            onChange={async (value: boolean) => {
-                                props.field.onChange &&
-                                    props.field.onChange(value);
-                                props.setFieldValue(props.fieldName, value);
-                            }}
-                            onBlur={async () => {
-                                props.setFieldTouched(props.fieldName, true);
-                            }}
-                            initialValue={
-                                props.currentValues &&
-                                (props.currentValues as any)[props.fieldName] &&
-                                ((props.currentValues as any)[
-                                    props.fieldName
-                                ] === true ||
-                                    (props.currentValues as any)[
+                                onChange={async (value: Color | null) => {
+                                    props.field.onChange &&
+                                        props.field.onChange(value);
+                                    props.setFieldValue(props.fieldName, value);
+                                    props.setFieldTouched(props.fieldName, true);
+                                }}
+                                tabIndex={index}
+                                placeholder={props.field.placeholder || ''}
+                                initialValue={
+                                    props.currentValues &&
+                                        (props.currentValues as any)[props.fieldName]
+                                        ? (props.currentValues as any)[
                                         props.fieldName
-                                    ] === false)
-                                    ? (props.currentValues as any)[
-                                          props.fieldName
-                                      ]
-                                    : false
-                            }
-                        />
-                    )}
+                                        ]
+                                        : ''
+                                }
+                            />
+                        )}
 
-                    {/* Default Field */}
-                    {(props.field.fieldType === FormFieldSchemaType.Name ||
-                        props.field.fieldType === FormFieldSchemaType.Email ||
-                        props.field.fieldType ===
+                        {(props.field.fieldType === FormFieldSchemaType.Dropdown ||
+                            props.field.fieldType ===
+                            FormFieldSchemaType.MultiSelectDropdown) && (
+                                <Dropdown
+                                    error={
+                                        props.touched && props.error
+                                            ? props.error
+                                            : undefined
+                                    }
+                                    tabIndex={index}
+                                    onChange={async (
+                                        value:
+                                            | DropdownValue
+                                            | Array<DropdownValue>
+                                            | null
+                                    ) => {
+                                        props.field.onChange &&
+                                            props.field.onChange(value);
+                                        props.setFieldValue(props.fieldName, value);
+                                    }}
+                                    onBlur={async () => {
+                                        props.setFieldTouched(props.fieldName, true);
+                                    }}
+                                    isMultiSelect={
+                                        props.field.fieldType ===
+                                        FormFieldSchemaType.MultiSelectDropdown
+                                    }
+                                    options={props.field.dropdownOptions || []}
+                                    placeholder={props.field.placeholder || ''}
+                                    initialValue={
+                                        props.currentValues &&
+                                            (props.currentValues as any)[props.fieldName]
+                                            ? (props.currentValues as any)[
+                                            props.fieldName
+                                            ]
+                                            : ''
+                                    }
+                                />
+                            )}
+
+                        {props.field.fieldType === FormFieldSchemaType.ObjectID && (
+                            <IDGenerator
+                                tabIndex={index}
+                                disabled={props.isDisabled || props.field.disabled}
+                                error={
+                                    props.touched && props.error
+                                        ? props.error
+                                        : undefined
+                                }
+                                dataTestId={fieldType}
+                                onChange={(value: ObjectID) => {
+                                    props.field.onChange &&
+                                        props.field.onChange(value);
+                                    props.setFieldValue(props.fieldName, value);
+                                }}
+                                onEnterPress={() => {
+                                    props.submitForm && props.submitForm();
+                                }}
+                                initialValue={
+                                    props.currentValues &&
+                                        (props.currentValues as any)[props.fieldName]
+                                        ? (props.currentValues as any)[
+                                        props.fieldName
+                                        ]
+                                        : props.field.defaultValue || null
+                                }
+                            />
+                        )}
+
+                        {props.field.fieldType ===
+                            FormFieldSchemaType.RadioButton && (
+                                <RadioButtons
+                                    error={
+                                        props.touched && props.error
+                                            ? props.error
+                                            : undefined
+                                    }
+                                    onChange={async (value: string) => {
+                                        props.field.onChange &&
+                                            props.field.onChange(value);
+                                        props.setFieldValue(props.fieldName, value);
+                                    }}
+                                    options={props.field.radioButtonOptions || []}
+                                    initialValue={
+                                        props.currentValues &&
+                                            (props.currentValues as any)[props.fieldName]
+                                            ? (props.currentValues as any)[
+                                            props.fieldName
+                                            ]
+                                            : ''
+                                    }
+                                />
+                            )}
+
+                        {props.field.fieldType === FormFieldSchemaType.LongText && (
+                            <TextArea
+                                autoFocus={!props.disableAutofocus && index === 1}
+                                error={
+                                    props.touched && props.error
+                                        ? props.error
+                                        : undefined
+                                }
+                                tabIndex={index}
+                                onChange={async (value: string) => {
+                                    props.field.onChange &&
+                                        props.field.onChange(value);
+                                    props.setFieldValue(props.fieldName, value);
+                                }}
+                                onBlur={async () => {
+                                    props.setFieldTouched(props.fieldName, true);
+                                }}
+                                initialValue={
+                                    props.currentValues &&
+                                        (props.currentValues as any)[props.fieldName]
+                                        ? (props.currentValues as any)[
+                                        props.fieldName
+                                        ]
+                                        : ''
+                                }
+                                placeholder={props.field.placeholder || ''}
+                            />
+                        )}
+
+                        {props.field.fieldType === FormFieldSchemaType.JSON && (
+                            <CodeEditor
+                                error={
+                                    props.touched && props.error
+                                        ? props.error
+                                        : undefined
+                                }
+                                type={CodeType.JSON}
+                                tabIndex={index}
+                                onChange={async (value: string) => {
+                                    props.field.onChange &&
+                                        props.field.onChange(value);
+                                    props.setFieldValue(props.fieldName, value);
+                                }}
+                                onBlur={async () => {
+                                    props.setFieldTouched(props.fieldName, true);
+                                }}
+                                initialValue={
+                                    props.currentValues &&
+                                        (props.currentValues as any)[props.fieldName]
+                                        ? (props.currentValues as any)[
+                                        props.fieldName
+                                        ]
+                                        : ''
+                                }
+                                value={
+                                    props.currentValues &&
+                                        (props.currentValues as any)[props.fieldName]
+                                        ? (props.currentValues as any)[
+                                        props.fieldName
+                                        ]
+                                        : ''
+                                }
+                                placeholder={props.field.placeholder || ''}
+                            />
+                        )}
+
+                        {props.field.fieldType === FormFieldSchemaType.Markdown && (
+                            <CodeEditor
+                                error={
+                                    props.touched && props.error
+                                        ? props.error
+                                        : undefined
+                                }
+                                tabIndex={index}
+                                type={CodeType.Markdown}
+                                onChange={async (value: string) => {
+                                    props.field.onChange &&
+                                        props.field.onChange(value);
+                                    props.setFieldValue(props.fieldName, value);
+                                }}
+                                onBlur={async () => {
+                                    props.setFieldTouched(props.fieldName, true);
+                                }}
+                                initialValue={
+                                    props.currentValues &&
+                                        (props.currentValues as any)[props.fieldName]
+                                        ? (props.currentValues as any)[
+                                        props.fieldName
+                                        ]
+                                        : ''
+                                }
+                                placeholder={props.field.placeholder || ''}
+                            />
+                        )}
+
+                        {props.field.fieldType ===
+                            FormFieldSchemaType.CustomComponent &&
+                            props.field.getCustomElement &&
+                            props.field.getCustomElement(props.currentValues, {
+                                error:
+                                    props.touched && props.error
+                                        ? props.error
+                                        : undefined,
+                                tabIndex: index,
+                                onChange: async (value: string) => {
+                                    props.field.onChange &&
+                                        props.field.onChange(value);
+                                    props.setFieldValue(props.fieldName, value);
+                                },
+                                onBlur: async () => {
+                                    props.setFieldTouched(props.fieldName, true);
+                                },
+
+                                initialValue:
+                                    props.currentValues &&
+                                        (props.currentValues as any)[props.fieldName]
+                                        ? (props.currentValues as any)[
+                                        props.fieldName
+                                        ]
+                                        : '',
+
+                                placeholder: props.field.placeholder || '',
+                            })}
+
+                        {(props.field.fieldType === FormFieldSchemaType.HTML ||
+                            props.field.fieldType === FormFieldSchemaType.CSS ||
+                            props.field.fieldType ===
+                            FormFieldSchemaType.JavaScript) && (
+                                <CodeEditor
+                                    error={
+                                        props.touched && props.error
+                                            ? props.error
+                                            : undefined
+                                    }
+                                    tabIndex={index}
+                                    onChange={async (value: string) => {
+                                        props.field.onChange &&
+                                            props.field.onChange(value);
+                                        props.setFieldValue(props.fieldName, value);
+                                    }}
+                                    onBlur={async () => {
+                                        props.setFieldTouched(props.fieldName, true);
+                                    }}
+                                    type={codeType}
+                                    initialValue={
+                                        props.currentValues &&
+                                            (props.currentValues as any)[props.fieldName]
+                                            ? (props.currentValues as any)[
+                                            props.fieldName
+                                            ]
+                                            : ''
+                                    }
+                                    placeholder={props.field.placeholder || ''}
+                                />
+                            )}
+
+                        {(props.field.fieldType === FormFieldSchemaType.File ||
+                            props.field.fieldType ===
+                            FormFieldSchemaType.ImageFile) && (
+                                <FilePicker
+                                    error={
+                                        props.touched && props.error
+                                            ? props.error
+                                            : undefined
+                                    }
+                                    tabIndex={index}
+                                    onChange={async (files: Array<FileModel>) => {
+                                        let fileResult:
+                                            | FileModel
+                                            | Array<FileModel>
+                                            | null = files.map((i: FileModel) => {
+                                                const strippedModel: FileModel =
+                                                    new FileModel();
+                                                strippedModel._id = i._id!;
+                                                return strippedModel;
+                                            });
+
+                                        if (
+                                            (props.field.fieldType ===
+                                                FormFieldSchemaType.File ||
+                                                props.field.fieldType ===
+                                                FormFieldSchemaType.ImageFile) &&
+                                            Array.isArray(fileResult)
+                                        ) {
+                                            if (fileResult.length > 0) {
+                                                fileResult = fileResult[0] as FileModel;
+                                            } else {
+                                                fileResult = null;
+                                            }
+                                        }
+
+                                        props.field.onChange &&
+                                            props.field.onChange(fileResult);
+                                        props.setFieldValue(
+                                            props.fieldName,
+                                            fileResult
+                                        );
+                                    }}
+                                    onBlur={async () => {
+                                        props.setFieldTouched(props.fieldName, true);
+                                    }}
+                                    mimeTypes={
+                                        props.field.fieldType ===
+                                            FormFieldSchemaType.ImageFile
+                                            ? [
+                                                MimeType.png,
+                                                MimeType.jpeg,
+                                                MimeType.jpg,
+                                            ]
+                                            : []
+                                    }
+                                    initialValue={
+                                        props.currentValues &&
+                                            (props.currentValues as any)[props.fieldName]
+                                            ? (props.currentValues as any)[
+                                            props.fieldName
+                                            ]
+                                            : []
+                                    }
+                                    placeholder={props.field.placeholder || ''}
+                                />
+                            )}
+
+                        {props.field.fieldType === FormFieldSchemaType.Toggle && (
+                            <Toggle
+                                error={
+                                    props.touched && props.error
+                                        ? props.error
+                                        : undefined
+                                }
+                                onChange={async (value: boolean) => {
+                                    props.field.onChange &&
+                                        props.field.onChange(value);
+                                    props.setFieldValue(props.fieldName, value);
+                                }}
+                                onBlur={async () => {
+                                    props.setFieldTouched(props.fieldName, true);
+                                }}
+                                initialValue={
+                                    props.currentValues &&
+                                        (props.currentValues as any)[props.fieldName] &&
+                                        ((props.currentValues as any)[
+                                            props.fieldName
+                                        ] === true ||
+                                            (props.currentValues as any)[
+                                            props.fieldName
+                                            ] === false)
+                                        ? (props.currentValues as any)[
+                                        props.fieldName
+                                        ]
+                                        : false
+                                }
+                            />
+                        )}
+
+                        {props.field.fieldType === FormFieldSchemaType.Checkbox && (
+                            <CheckboxElement
+                                error={
+                                    props.touched && props.error
+                                        ? props.error
+                                        : undefined
+                                }
+                                title={props.field.title || ''}
+                                description={props.field.description || ''}
+                                onChange={async (value: boolean) => {
+                                    props.field.onChange &&
+                                        props.field.onChange(value);
+                                    props.setFieldValue(props.fieldName, value);
+                                }}
+                                onBlur={async () => {
+                                    props.setFieldTouched(props.fieldName, true);
+                                }}
+                                onFocus={async () => {
+                                    props.setFieldTouched(props.fieldName, true);
+                                }}
+                                initialValue={
+                                    props.currentValues &&
+                                        (props.currentValues as any)[props.fieldName] &&
+                                        ((props.currentValues as any)[
+                                            props.fieldName
+                                        ] === true ||
+                                            (props.currentValues as any)[
+                                            props.fieldName
+                                            ] === false)
+                                        ? (props.currentValues as any)[
+                                        props.fieldName
+                                        ]
+                                        : false
+                                }
+                            />
+                        )}
+
+
+                        {props.field.fieldType === FormFieldSchemaType.CategoryCheckbox && (
+                            <CategoryCheckbox
+                                categories={props.field.categoryCheckboxProps?.categories || []}
+                                options={props.field.categoryCheckboxProps?.options || []}
+                                error={
+                                    props.touched && props.error
+                                        ? props.error
+                                        : undefined
+                                }
+                                onChange={async (value: Array<CategoryCheckboxValue>) => {
+                                    props.field.onChange &&
+                                        props.field.onChange(value);
+                                    props.setFieldValue(props.fieldName, value);
+                                }}
+                                initialValue={
+                                    props.currentValues &&
+                                        (props.currentValues as any)[props.fieldName] &&
+                                        ((props.currentValues as any)[
+                                            props.fieldName
+                                        ] === true ||
+                                            (props.currentValues as any)[
+                                            props.fieldName
+                                            ] === false)
+                                        ? (props.currentValues as any)[
+                                        props.fieldName
+                                        ]
+                                        : false
+                                }
+                            />
+                        )}
+
+                        {/* Default Field */}
+                        {(props.field.fieldType === FormFieldSchemaType.Name ||
+                            props.field.fieldType === FormFieldSchemaType.Email ||
+                            props.field.fieldType ===
                             FormFieldSchemaType.Hostname ||
-                        props.field.fieldType === FormFieldSchemaType.URL ||
-                        props.field.fieldType === FormFieldSchemaType.Route ||
-                        props.field.fieldType === FormFieldSchemaType.Text ||
-                        props.field.fieldType === FormFieldSchemaType.Number ||
-                        props.field.fieldType ===
+                            props.field.fieldType === FormFieldSchemaType.URL ||
+                            props.field.fieldType === FormFieldSchemaType.Route ||
+                            props.field.fieldType === FormFieldSchemaType.Text ||
+                            props.field.fieldType === FormFieldSchemaType.Number ||
+                            props.field.fieldType ===
                             FormFieldSchemaType.Password ||
-                        props.field.fieldType ===
+                            props.field.fieldType ===
                             FormFieldSchemaType.EncryptedText ||
-                        props.field.fieldType === FormFieldSchemaType.Date ||
-                        props.field.fieldType ===
+                            props.field.fieldType === FormFieldSchemaType.Date ||
+                            props.field.fieldType ===
                             FormFieldSchemaType.DateTime ||
-                        props.field.fieldType === FormFieldSchemaType.Port ||
-                        props.field.fieldType === FormFieldSchemaType.Phone ||
-                        props.field.fieldType === FormFieldSchemaType.Domain ||
-                        props.field.fieldType ===
+                            props.field.fieldType === FormFieldSchemaType.Port ||
+                            props.field.fieldType === FormFieldSchemaType.Phone ||
+                            props.field.fieldType === FormFieldSchemaType.Domain ||
+                            props.field.fieldType ===
                             FormFieldSchemaType.PositiveNumber) && (
-                        <Input
-                            autoFocus={!props.disableAutofocus && index === 1}
-                            tabIndex={index}
-                            disabled={props.isDisabled || props.field.disabled}
-                            error={
-                                props.touched && props.error
-                                    ? props.error
-                                    : undefined
-                            }
-                            dataTestId={fieldType}
-                            type={fieldType as InputType}
-                            onChange={(value: string) => {
-                                props.field.onChange &&
-                                    props.field.onChange(value);
-                                props.setFieldValue(props.fieldName, value);
-                            }}
-                            onEnterPress={() => {
-                                props.submitForm && props.submitForm();
-                            }}
-                            onBlur={() => {
-                                props.setFieldTouched(props.fieldName, true);
-                            }}
-                            initialValue={
-                                props.currentValues &&
-                                (props.currentValues as any)[props.fieldName]
-                                    ? (props.currentValues as any)[
-                                          props.fieldName
-                                      ]
-                                    : props.field.defaultValue || ''
-                            }
-                            placeholder={props.field.placeholder || ''}
-                        />
-                    )}
+                                <Input
+                                    autoFocus={!props.disableAutofocus && index === 1}
+                                    tabIndex={index}
+                                    disabled={props.isDisabled || props.field.disabled}
+                                    error={
+                                        props.touched && props.error
+                                            ? props.error
+                                            : undefined
+                                    }
+                                    dataTestId={fieldType}
+                                    type={fieldType as InputType}
+                                    onChange={(value: string) => {
+                                        props.field.onChange &&
+                                            props.field.onChange(value);
+                                        props.setFieldValue(props.fieldName, value);
+                                    }}
+                                    onEnterPress={() => {
+                                        props.submitForm && props.submitForm();
+                                    }}
+                                    onBlur={() => {
+                                        props.setFieldTouched(props.fieldName, true);
+                                    }}
+                                    initialValue={
+                                        props.currentValues &&
+                                            (props.currentValues as any)[props.fieldName]
+                                            ? (props.currentValues as any)[
+                                            props.fieldName
+                                            ]
+                                            : props.field.defaultValue || ''
+                                    }
+                                    placeholder={props.field.placeholder || ''}
+                                />
+                            )}
+                    </div>
                 </div>
-            </div>
-        );
+            );
+        };
+
+        return <>{getFormField()}</>;
     };
 
-    return <>{getFormField()}</>;
-};
-
 export default FormField;
diff --git a/CommonUI/src/Components/Forms/Types/Field.ts b/CommonUI/src/Components/Forms/Types/Field.ts
index a4ef50ee49..c023b7bd01 100644
--- a/CommonUI/src/Components/Forms/Types/Field.ts
+++ b/CommonUI/src/Components/Forms/Types/Field.ts
@@ -8,6 +8,7 @@ import MimeType from 'Common/Types/File/MimeType';
 import FormValues from './FormValues';
 import { RadioButton } from '../../RadioButtons/GroupRadioButtons';
 import { ReactElement } from 'react';
+import { CategoryCheckboxOption, CheckboxCategory } from '../../CategoryCheckbox/CategoryCheckboxTypes';
 
 export enum FormFieldStyleType {
     Default = 'Default',
@@ -30,6 +31,12 @@ export interface CustomElementProps {
     placeholder?: string | undefined;
 }
 
+
+export interface CategoryCheckboxProps {
+    categories: Array<CheckboxCategory>;
+    options: Array<CategoryCheckboxOption>;
+}
+
 export default interface Field<TEntity> {
     name?: string; // form field name, should be unique in thr form. If not provided, the field will be auto generated.
     title?: string;
@@ -75,4 +82,5 @@ export default interface Field<TEntity> {
         values: FormValues<TEntity>,
         props: CustomElementProps
     ) => ReactElement | undefined; // custom element to render instead of the elements in the form.
+    categoryCheckboxProps?: CategoryCheckboxProps | undefined; // props for the category checkbox component. If fieldType is CategoryCheckbox, this prop is required.
 }
diff --git a/CommonUI/src/Components/Forms/Types/FormFieldSchemaType.ts b/CommonUI/src/Components/Forms/Types/FormFieldSchemaType.ts
index f48473c038..38c0ce3d37 100644
--- a/CommonUI/src/Components/Forms/Types/FormFieldSchemaType.ts
+++ b/CommonUI/src/Components/Forms/Types/FormFieldSchemaType.ts
@@ -32,6 +32,8 @@ enum FormFieldSchemaType {
     JSON = 'JSON',
     Query = 'Query',
     CustomComponent = 'CustomComponent',
+    Checkbox = 'Checkbox',
+    CategoryCheckbox = 'CategoryCheckbox',
 }
 
 export default FormFieldSchemaType;