diff --git a/src/admin/components/Customize.jsx b/src/admin/components/Customize.jsx
index 5e7548a..aeb27b1 100644
--- a/src/admin/components/Customize.jsx
+++ b/src/admin/components/Customize.jsx
@@ -74,11 +74,11 @@ const Customize = () => {
     <Tabs
       className="scrollableTabs"
       centered
-      style={{ flex: 1 }}
+      style={{ height: "100%", width: "100%" }}
       items={[
         {
           key: "1",
-          label: "Schema Settings",
+          label: "Settings",
           children: (
             <PropertyKeyEditorForm
               schema={schema && schema}
@@ -92,7 +92,7 @@ const Customize = () => {
         },
         {
           key: "2",
-          label: "UI Schema Settings",
+          label: "UI Settings",
           children:
             path.length != 0 ? (
               <PropertyKeyEditorForm
@@ -105,10 +105,7 @@ const Customize = () => {
                 key={uiPath}
               />
             ) : (
-              <Space
-                direction="vertical"
-                style={{ padding: "0 12px", width: "100%" }}
-              >
+              <Space direction="vertical" style={{ padding: "0 12px" }}>
                 <Typography.Text>Size Options</Typography.Text>
                 <Radio.Group
                   size="small"
diff --git a/src/admin/components/PropertyEditor.jsx b/src/admin/components/PropertyEditor.jsx
index d9c381d..53347f0 100644
--- a/src/admin/components/PropertyEditor.jsx
+++ b/src/admin/components/PropertyEditor.jsx
@@ -18,6 +18,8 @@ import {
   renameIdByPath,
 } from "../../store/schemaWizard";
 import CustomizationContext from "../../contexts/CustomizationContext";
+import { get } from "lodash-es";
+import { getIconByType } from "../utils";
 
 const { useBreakpoint } = Grid;
 
@@ -48,6 +50,7 @@ const renderPath = (path) => {
 
   return <Breadcrumb items={breadcrumbItems} />;
 };
+
 const PropertyEditor = () => {
   const [name, setName] = useState();
   const screens = useBreakpoint();
@@ -57,6 +60,13 @@ const PropertyEditor = () => {
   const path = useSelector((state) => state.schemaWizard.field.path);
   const uiPath = useSelector((state) => state.schemaWizard.field.uiPath);
 
+  const schema = useSelector((state) =>
+    get(state.schemaWizard, ["current", "schema", ...path]),
+  );
+  const uiSchema = useSelector((state) =>
+    get(state.schemaWizard, ["current", "uiSchema", ...uiPath]),
+  );
+
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -97,7 +107,7 @@ const PropertyEditor = () => {
         }
       />
       <Row justify="center">
-        <Col xs={22} style={{ paddingBottom: "10px", textAlign: "center" }}>
+        <Col xs={22} style={{ paddingBottom: "10px" }}>
           {renderPath(path)}
         </Col>
         <Col xs={18} data-cy="editFieldId">
@@ -116,13 +126,20 @@ const PropertyEditor = () => {
                   ),
               }
             }
-            style={{ textAlign: "center" }}
+            style={{ textAlign: "center", margin: "10px 0" }}
           >
+            {getIconByType(
+              schema,
+              uiSchema,
+              customizationContext.allFieldTypes,
+            )}{" "}
             {name}
           </Typography.Title>
         </Col>
       </Row>
-      <Customize />
+      <Row style={{ overflowY: "hidden", flex: 1 }}>
+        <Customize />
+      </Row>
     </div>
   );
 };
diff --git a/src/admin/components/SchemaPreview.jsx b/src/admin/components/SchemaPreview.jsx
index 929652f..b736ddb 100644
--- a/src/admin/components/SchemaPreview.jsx
+++ b/src/admin/components/SchemaPreview.jsx
@@ -6,10 +6,9 @@ import { useDispatch, useSelector } from "react-redux";
 import { selectProperty } from "../../store/schemaWizard";
 
 const SchemaPreview = () => {
+  const schema = useSelector((state) => state.schemaWizard.current.schema);
 
-  const schema = useSelector((state) => state.schemaWizard.current.schema)
-
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
 
   return (
     <div style={{ height: "80%" }} data-cy="schemaTree">
@@ -29,18 +28,25 @@ const SchemaPreview = () => {
         align="middle"
         style={{ padding: "0 10px" }}
       >
-        <Typography.Title level={5} style={{ margin: 0 }} ellipsis data-cy="rootTitle">
+        <Typography.Title
+          level={5}
+          style={{ margin: 0 }}
+          ellipsis
+          data-cy="rootTitle"
+        >
           {(schema && schema.title) || "root"}
         </Typography.Title>
         <Tooltip title="Edit root settings">
-        <Button
-          type="link"
-          shape="circle"
-          icon={<SettingOutlined />}
-          onClick={() => dispatch(selectProperty({ path: { schema: [], uiSchema: [] }}))}
-          className="tour-root-settings"
-          data-cy="rootSettings"
-        />
+          <Button
+            type="link"
+            shape="circle"
+            icon={<SettingOutlined />}
+            onClick={() =>
+              dispatch(selectProperty({ path: { schema: [], uiSchema: [] } }))
+            }
+            className="tour-root-settings"
+            data-cy="rootSettings"
+          />
         </Tooltip>
       </Row>
       <Row style={{ padding: "0 10px" }}>
diff --git a/src/admin/formComponents/SchemaTreeItem.jsx b/src/admin/formComponents/SchemaTreeItem.jsx
index 5e2c416..ed39067 100644
--- a/src/admin/formComponents/SchemaTreeItem.jsx
+++ b/src/admin/formComponents/SchemaTreeItem.jsx
@@ -1,18 +1,12 @@
 import { useDispatch } from "react-redux";
 import { PropTypes } from "prop-types";
 
-import {
-  DownOutlined,
-  QuestionOutlined,
-  UpOutlined,
-  CopyOutlined,
-} from "@ant-design/icons";
+import { DownOutlined, UpOutlined, CopyOutlined } from "@ant-design/icons";
 import { Col, Dropdown, Row, Tag, Typography } from "antd";
-import { isItTheArrayField } from "../utils";
+import { getIconByType, isItTheArrayField } from "../utils";
 import { useContext } from "react";
 import CustomizationContext from "../../contexts/CustomizationContext";
 import { selectProperty } from "../../store/schemaWizard";
-import { hiddenFields } from "../utils/fieldTypes";
 
 const SchemaTreeItem = ({
   path,
@@ -45,46 +39,6 @@ const SchemaTreeItem = ({
     return uiSchema["ui:field"] !== undefined;
   };
 
-  const getIconByType = (uiSchema = {}, schema = {}) => {
-    let type = "unknown";
-    // in case we can not define the type of the element from the uiSchema,
-    // extract the type from the schema
-    if (
-      !uiSchema ||
-      (!uiSchema["ui:widget"] &&
-        !uiSchema["ui:field"] &&
-        !uiSchema["ui:object"])
-    ) {
-      type = schema.type === "string" ? "text" : schema.type;
-    } else {
-      if (uiSchema["ui:widget"]) {
-        type = schema.format === "uri" ? schema.format : uiSchema["ui:widget"];
-      }
-      if (uiSchema["ui:field"]) {
-        type = uiSchema["ui:field"];
-      }
-      if (uiSchema["ui:object"]) {
-        type = uiSchema["ui:object"];
-      }
-    }
-
-    const allFieldTypes = {
-      ...customizationContext.allFieldTypes,
-      hidden: { fields: hiddenFields },
-    };
-
-    for (const category in allFieldTypes) {
-      for (const [key, value] of Object.entries(
-        allFieldTypes[category].fields,
-      )) {
-        if (key === type) {
-          return value.icon;
-        }
-      }
-    }
-    return <QuestionOutlined />;
-  };
-
   const dropdownItems = [
     {
       key: "copy",
@@ -114,7 +68,13 @@ const SchemaTreeItem = ({
         trigger={["contextMenu"]}
       >
         <Row gutter={8} onClick={handleClick} align="middle" wrap={false}>
-          <Col flex="none">{getIconByType(uiSchema, schema)}</Col>
+          <Col flex="none">
+            {getIconByType(
+              schema,
+              uiSchema,
+              customizationContext.allFieldTypes,
+            )}
+          </Col>
           <Col flex="auto">
             <Row
               style={{
diff --git a/src/admin/utils/fieldTypes.jsx b/src/admin/utils/fieldTypes.jsx
index d7cafd9..3bd9f80 100644
--- a/src/admin/utils/fieldTypes.jsx
+++ b/src/admin/utils/fieldTypes.jsx
@@ -18,6 +18,8 @@ import {
   UnorderedListOutlined,
 } from "@ant-design/icons";
 import { placeholder } from "@codemirror/view";
+import PropKeyEditorObjectFieldTemplate from "../../forms/templates/PropKeyEditorObjectFieldTemplate";
+import UiOptionsObjectFieldTemplate from "../../forms/templates/UiOptionsObjectFieldTemplate";
 
 // COMMON / EXTRA PROPERTIES:
 
@@ -34,6 +36,9 @@ export const common = {
       description: "Provide a description to be displayed for your field",
     },
   },
+  optionsSchemaUiSchema: {
+    "ui:ObjectFieldTemplate": PropKeyEditorObjectFieldTemplate,
+  },
   optionsUiSchema: {
     type: "object",
     title: "UI Schema",
@@ -112,10 +117,12 @@ export const common = {
         "ui:widget": "switch",
       },
       "ui:order": ["showAsModal", "modal", "*"],
+      "ui:ObjectFieldTemplate": UiOptionsObjectFieldTemplate,
     },
     "ui:label": {
       "ui:widget": "switch",
     },
+    "ui:ObjectFieldTemplate": PropKeyEditorObjectFieldTemplate,
   },
 };
 
@@ -145,7 +152,7 @@ export const extra = {
 const collections = {
   object: {
     title: "Object",
-    icon: <div>&#123;&#32;&#125;</div>,
+    icon: <span>&#123;&#32;&#125;</span>,
     description: "Data in JSON format, Grouped section",
     className: "tour-object-field",
     child: {},
@@ -156,7 +163,9 @@ const collections = {
         ...common.optionsSchema,
       },
     },
-    optionsSchemaUiSchema: {},
+    optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
+    },
     optionsUiSchema: {
       type: "object",
       title: "UI Schema",
@@ -203,7 +212,9 @@ const collections = {
         ...common.optionsSchema,
       },
     },
-    optionsSchemaUiSchema: {},
+    optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
+    },
     optionsUiSchema: {
       type: "object",
       title: "UI Schema",
@@ -227,6 +238,7 @@ const collections = {
       },
     },
     optionsUiSchemaUiSchema: {
+      ...common.optionsUiSchemaUiSchema,
       "ui:options": {
         ...common.optionsUiSchemaUiSchema["ui:options"],
         itemsDisplayTitle: {
@@ -248,7 +260,6 @@ const collections = {
           "ui:field": "codeEditor",
         },
       },
-      "ui:label": common.optionsUiSchemaUiSchema["ui:label"],
     },
 
     default: {
@@ -271,7 +282,9 @@ const collections = {
         ...common.optionsSchema,
       },
     },
-    optionsSchemaUiSchema: {},
+    optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
+    },
     optionsUiSchema: {
       ...common.optionsUiSchema,
     },
@@ -300,7 +313,9 @@ const collections = {
         ...common.optionsSchema,
       },
     },
-    optionsSchemaUiSchema: {},
+    optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
+    },
     optionsUiSchema: {
       ...common.optionsUiSchema,
     },
@@ -329,7 +344,9 @@ const collections = {
         ...common.optionsSchema,
       },
     },
-    optionsSchemaUiSchema: {},
+    optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
+    },
     optionsUiSchema: {
       ...common.optionsUiSchema,
     },
@@ -372,6 +389,7 @@ const simple = {
       },
     },
     optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
       readOnly: extra.optionsSchemaUiSchema.readOnly,
       isRequired: extra.optionsSchemaUiSchema.isRequired,
       pattern: {
@@ -410,6 +428,7 @@ const simple = {
       },
     },
     optionsUiSchemaUiSchema: {
+      ...common.optionsUiSchemaUiSchema,
       "ui:options": {
         ...common.optionsUiSchemaUiSchema["ui:options"],
         mask: {
@@ -420,7 +439,6 @@ const simple = {
           },
         },
       },
-      "ui:label": common.optionsUiSchemaUiSchema["ui:label"],
     },
     default: {
       schema: {
@@ -446,6 +464,7 @@ const simple = {
       },
     },
     optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
       readOnly: extra.optionsSchemaUiSchema.readOnly,
       isRequired: extra.optionsSchemaUiSchema.isRequired,
     },
@@ -520,6 +539,7 @@ const simple = {
       },
     },
     optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
       readOnly: extra.optionsSchemaUiSchema.readOnly,
       isRequired: extra.optionsSchemaUiSchema.isRequired,
     },
@@ -604,6 +624,7 @@ const simple = {
       },
     },
     optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
       readOnly: extra.optionsSchemaUiSchema.readOnly,
       isRequired: extra.optionsSchemaUiSchema.isRequired,
     },
@@ -652,6 +673,7 @@ const simple = {
       },
     },
     optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
       readOnly: extra.optionsSchemaUiSchema.readOnly,
       isRequired: extra.optionsSchemaUiSchema.isRequired,
     },
@@ -713,6 +735,7 @@ const simple = {
       },
     },
     optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
       readOnly: extra.optionsSchemaUiSchema.readOnly,
       isRequired: extra.optionsSchemaUiSchema.isRequired,
     },
@@ -829,6 +852,7 @@ const simple = {
       ],
     },
     optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
       readOnly: extra.optionsSchemaUiSchema.readOnly,
       isRequired: extra.optionsSchemaUiSchema.isRequired,
     },
@@ -885,6 +909,7 @@ const simple = {
       },
     },
     optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
       customFormat: {
         "ui:placeholder": "DD/MM/YYYY",
         "ui:options": {
@@ -934,6 +959,7 @@ const advanced = {
       },
     },
     optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
       readOnly: extra.optionsSchemaUiSchema.readOnly,
       isRequired: extra.optionsSchemaUiSchema.isRequired,
     },
@@ -986,6 +1012,7 @@ const advanced = {
       },
     },
     optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
       readOnly: extra.optionsSchemaUiSchema.readOnly,
       isRequired: extra.optionsSchemaUiSchema.isRequired,
     },
@@ -1030,6 +1057,7 @@ const advanced = {
       },
     },
     optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
       readOnly: extra.optionsSchemaUiSchema.readOnly,
       isRequired: extra.optionsSchemaUiSchema.isRequired,
     },
@@ -1066,6 +1094,7 @@ const advanced = {
       },
     },
     optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
       readOnly: extra.optionsSchemaUiSchema.readOnly,
       isRequired: extra.optionsSchemaUiSchema.isRequired,
     },
@@ -1167,6 +1196,7 @@ const advanced = {
       },
     },
     optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
       readOnly: extra.optionsSchemaUiSchema.readOnly,
       isRequired: extra.optionsSchemaUiSchema.isRequired,
       validateWithUrl: {
@@ -1274,6 +1304,7 @@ export const hiddenFields = {
       },
     },
     optionsSchemaUiSchema: {
+      ...common.optionsSchemaUiSchema,
       readOnly: extra.optionsSchemaUiSchema.readOnly,
       isRequired: extra.optionsSchemaUiSchema.isRequired,
     },
diff --git a/src/admin/utils/index.js b/src/admin/utils/index.jsx
similarity index 61%
rename from src/admin/utils/index.js
rename to src/admin/utils/index.jsx
index c03454d..456862a 100644
--- a/src/admin/utils/index.js
+++ b/src/admin/utils/index.jsx
@@ -1,3 +1,7 @@
+import { QuestionOutlined } from "@ant-design/icons";
+import { hiddenFields } from "./fieldTypes";
+import { Tooltip } from "antd";
+
 export const SIZE_OPTIONS = {
   xsmall: 8,
   small: 12,
@@ -70,3 +74,39 @@ export const combineFieldTypes = (fieldTypes, customFieldTypes) => {
 };
 
 export const timer = (ms) => new Promise((res) => setTimeout(res, ms));
+
+export const getIconByType = (schema, uiSchema, fieldTypes) => {
+  let type = "unknown";
+  // in case we can not define the type of the element from the uiSchema,
+  // extract the type from the schema
+  if (
+    !uiSchema ||
+    (!uiSchema["ui:widget"] && !uiSchema["ui:field"] && !uiSchema["ui:object"])
+  ) {
+    type = schema.type === "string" ? "text" : schema.type;
+  } else {
+    if (uiSchema["ui:widget"]) {
+      type = schema.format === "uri" ? schema.format : uiSchema["ui:widget"];
+    }
+    if (uiSchema["ui:field"]) {
+      type = uiSchema["ui:field"];
+    }
+    if (uiSchema["ui:object"]) {
+      type = uiSchema["ui:object"];
+    }
+  }
+
+  const allFieldTypes = {
+    ...fieldTypes,
+    hidden: { fields: hiddenFields },
+  };
+
+  for (const category in allFieldTypes) {
+    for (const [key, value] of Object.entries(allFieldTypes[category].fields)) {
+      if (key === type) {
+        return <Tooltip title={value.title}>{value.icon}</Tooltip>;
+      }
+    }
+  }
+  return <QuestionOutlined />;
+};
diff --git a/src/forms/Form.less b/src/forms/Form.less
index ca7e29a..bc46183 100644
--- a/src/forms/Form.less
+++ b/src/forms/Form.less
@@ -157,9 +157,29 @@
   .bounceShadow {
     animation: bounceShadow 5s forwards;
   }
+
+  .propKeyCollapse
+    .ant-collapse-content-box
+    fieldset
+    .ant-col
+    .ant-col:last-of-type
+    .ant-form-item:last-of-type {
+    margin-bottom: 0;
+  }
+
+  .propKeyCollapse
+    .ant-collapse-content-box
+    > .form-group
+    > .ant-form-item:last-of-type {
+    margin-bottom: 0;
+  }
 }
 
 .tabItemError {
   background-color: @field-error-bg-color !important;
   color: @field-error-color !important;
 }
+
+.scrollableTabs .ant-tabs-content-holder {
+  overflow-y: scroll;
+}
diff --git a/src/forms/templates/ArrayFieldTemplates/AccordionArrayFieldTemplate.jsx b/src/forms/templates/ArrayFieldTemplates/AccordionArrayFieldTemplate.jsx
index 6f8c044..047c164 100644
--- a/src/forms/templates/ArrayFieldTemplates/AccordionArrayFieldTemplate.jsx
+++ b/src/forms/templates/ArrayFieldTemplates/AccordionArrayFieldTemplate.jsx
@@ -8,7 +8,7 @@ const AccordionArrayFieldTemplate = ({ items = [], formContext, id }) => {
 
   return (
     <Collapse
-      expandIconPosition="right"
+      expandIconPosition="end"
       items={items.map((item, index) => ({
         key: index,
         label: `Item #${index + 1}`,
diff --git a/src/forms/templates/Field/FieldTemplate.jsx b/src/forms/templates/Field/FieldTemplate.jsx
index 58fc6ec..b086a47 100644
--- a/src/forms/templates/Field/FieldTemplate.jsx
+++ b/src/forms/templates/Field/FieldTemplate.jsx
@@ -98,7 +98,11 @@ const FieldTemplate = ({
         <Form.Item
           colon={colon}
           hasFeedback={schema.type !== "array" && schema.type !== "object"}
-          help={(!!rawHelp && help) || (!!rawErrors && renderFieldErrors())}
+          help={
+            (!!rawHelp && help) ||
+            (!!rawErrors && renderFieldErrors()) ||
+            undefined
+          }
           htmlFor={id}
           // displayLabel is always false for custom fields, so we need the or condition
           label={
diff --git a/src/forms/templates/ObjectFieldTemplate.jsx b/src/forms/templates/ObjectFieldTemplate.jsx
index 6a16616..b1d2829 100644
--- a/src/forms/templates/ObjectFieldTemplate.jsx
+++ b/src/forms/templates/ObjectFieldTemplate.jsx
@@ -21,6 +21,7 @@ const ObjectFieldTemplate = ({
   schema,
   title,
   uiSchema,
+  isUiOptions,
 }) => {
   const {
     colSpan = 24,
@@ -86,26 +87,37 @@ const ObjectFieldTemplate = ({
       />
     );
   return (
-    <fieldset style={{ margin: "0 12px" }} id={idSchema.$id}>
-      <Row gutter={rowGutter}>
+    <fieldset
+      style={{
+        padding: isUiOptions && 0,
+      }}
+      id={idSchema.$id}
+    >
+      <Row gutter={rowGutter} style={{ margin: 0 }}>
+        {!isUiOptions && (
+          <Col
+            style={{
+              padding: "0",
+              marginBottom: "12px",
+            }}
+            className={labelColClassName}
+            span={24}
+          >
+            <FieldHeader
+              label={uiSchema["ui:title"] || title}
+              isObject
+              description={uiSchema["ui:description"] || description}
+              uiSchema={uiSchema}
+              idSchema={idSchema}
+              hideAnchors={hideAnchors}
+            />
+          </Col>
+        )}
         <Col
-          style={{
-            padding: "0",
-            marginBottom: "12px",
-          }}
-          className={labelColClassName}
           span={24}
+          className="nestedObject"
+          style={{ padding: isUiOptions && 0 }}
         >
-          <FieldHeader
-            label={uiSchema["ui:title"] || title}
-            isObject
-            description={uiSchema["ui:description"] || description}
-            uiSchema={uiSchema}
-            idSchema={idSchema}
-            hideAnchors={hideAnchors}
-          />
-        </Col>
-        <Col span={24} className="nestedObject">
           <Row gutter={10}>
             {properties
               .filter((e) => !e.hidden)
@@ -121,7 +133,6 @@ const ObjectFieldTemplate = ({
           </Row>
         </Col>
       </Row>
-
       {canExpand(schema, uiSchema, formData) && !readonly && (
         <Col span={24}>
           <Row gutter={rowGutter} justify="end">
diff --git a/src/forms/templates/PropKeyEditorObjectFieldTemplate.jsx b/src/forms/templates/PropKeyEditorObjectFieldTemplate.jsx
new file mode 100644
index 0000000..904a224
--- /dev/null
+++ b/src/forms/templates/PropKeyEditorObjectFieldTemplate.jsx
@@ -0,0 +1,30 @@
+import { Collapse, Space } from "antd";
+
+const PropKeyEditorObjectFieldTemplate = ({ properties }) => {
+  const [first, ...rest] = properties;
+  const elements = [first, { title: "Field UI Options", content: rest }];
+
+  const isUiSettings = properties.find((prop) => prop.name === "ui:options");
+
+  return isUiSettings ? (
+    <Collapse
+      className="propKeyCollapse"
+      style={{ margin: "0 10px 10px 10px" }}
+      defaultActiveKey={Array.from(Array(properties.length).keys())}
+      expandIconPosition="end"
+      items={elements.map((item, index) => ({
+        key: index,
+        label: item.title || item.content.props.schema.title,
+        children: item.content.length
+          ? item.content.map((i) => i.content)
+          : item.content,
+      }))}
+    />
+  ) : (
+    <Space direction="vertical" style={{ margin: "0 10px" }}>
+      {properties.map((item) => item.content)}
+    </Space>
+  );
+};
+
+export default PropKeyEditorObjectFieldTemplate;
diff --git a/src/forms/templates/UiOptionsObjectFieldTemplate.jsx b/src/forms/templates/UiOptionsObjectFieldTemplate.jsx
new file mode 100644
index 0000000..4eb7c6c
--- /dev/null
+++ b/src/forms/templates/UiOptionsObjectFieldTemplate.jsx
@@ -0,0 +1,7 @@
+import ObjectFieldTemplate from "./ObjectFieldTemplate";
+
+const UiOptionsObjectFieldTemplate = (props) => {
+  return <ObjectFieldTemplate {...props} isUiOptions />;
+};
+
+export default UiOptionsObjectFieldTemplate;