diff --git a/cyclops-ui/src/components/pages/EditModule.tsx b/cyclops-ui/src/components/pages/EditModule/EditModule.tsx
similarity index 81%
rename from cyclops-ui/src/components/pages/EditModule.tsx
rename to cyclops-ui/src/components/pages/EditModule/EditModule.tsx
index 289fa041..4412e345 100644
--- a/cyclops-ui/src/components/pages/EditModule.tsx
+++ b/cyclops-ui/src/components/pages/EditModule/EditModule.tsx
@@ -37,21 +37,25 @@ import "ace-builds/src-noconflict/mode-toml";
 import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/mode-typescript";
 import "ace-builds/src-noconflict/snippets/yaml";
-import { fileExtension, findMaps, flattenObjectKeys } from "../../utils/form";
+import {
+  fileExtension,
+  findMaps,
+  flattenObjectKeys,
+} from "../../../utils/form";
 import "./custom.css";
-import { numberInputValidators } from "../../utils/validators/number";
-import { stringInputValidators } from "../../utils/validators/string";
-import { templateRef } from "../../utils/templateRef";
+import { numberInputValidators } from "../../../utils/validators/number";
+import { stringInputValidators } from "../../../utils/validators/string";
+import { templateRef } from "../../../utils/templateRef";
 import {
   FeedbackError,
   FormValidationErrors,
-} from "../errors/FormValidationErrors";
-import { mapResponseError } from "../../utils/api/errors";
+} from "../../errors/FormValidationErrors";
+import { mapResponseError } from "../../../utils/api/errors";
 import {
   getTemplate,
   getTemplateInitialValues,
   Template,
-} from "../../utils/api/template";
+} from "../../../utils/api/template";
 
 const { Title } = Typography;
 const layout = {
@@ -427,6 +431,10 @@ const EditModule = () => {
         {...arrayField}
         name={formItemName}
         rules={[{ required: isRequired }]}
+        style={{
+          paddingTop: "8px",
+          marginBottom: "12px",
+        }}
         label={
           <div>
             {field.display_name}
@@ -459,6 +467,10 @@ const EditModule = () => {
       <Form.Item
         {...arrayField}
         name={formItemName}
+        style={{
+          paddingTop: "8px",
+          marginBottom: "12px",
+        }}
         label={
           <div>
             {field.display_name}
@@ -494,49 +506,168 @@ const EditModule = () => {
   };
 
   const arrayInnerField = (
+    fieldName: string,
+    uniqueFieldName: string[],
+    formItemName: any,
     field: any,
-    parentFieldID: string[],
-    parent: string,
     level: number,
-    arrayField: any,
-    remove: Function,
+    header: React.JSX.Element,
   ) => {
-    if (!field.items || typeof field.items === "string") {
+    if (!field.items || field.items.type === "string") {
       return (
-        <Row>
-          <Form.Item
-            style={{ paddingBottom: "0px", marginBottom: "0px" }}
-            wrapperCol={24}
-            {...arrayField}
-            initialValue={field.initialValue}
-            name={[arrayField.name]}
-          >
-            <Input />
-          </Form.Item>
-          <MinusCircleOutlined
-            style={{ fontSize: "16px", paddingLeft: "10px" }}
-            onClick={() => remove(arrayField.name)}
-          />
-        </Row>
+        <Form.Item
+          wrapperCol={{ span: level === 0 ? 16 : 24 }}
+          name={fieldName}
+          style={{
+            paddingTop: "0px",
+            marginBottom: "12px",
+          }}
+          label={
+            <div>
+              {field.display_name}
+              <p style={{ color: "#8b8e91", marginBottom: "0px" }}>
+                {field.description}
+              </p>
+            </div>
+          }
+        >
+          <Form.List name={formItemName}>
+            {(arrFields, { add, remove }) => (
+              <div
+                style={{
+                  border: "solid 1px #d3d3d3",
+                  borderRadius: "7px",
+                  padding: "12px",
+                  width: "100%",
+                  backgroundColor: "#fafafa",
+                }}
+              >
+                {arrFields.map((arrField, index) => (
+                  <Col key={arrField.key}>
+                    <Row>
+                      <Form.Item
+                        style={{
+                          paddingBottom: "8px",
+                          marginBottom: "0px",
+                          width: "80%",
+                        }}
+                        wrapperCol={{ span: 24 }}
+                        {...arrField}
+                        initialValue={field.initialValue}
+                        name={[arrField.name]}
+                      >
+                        <Input />
+                      </Form.Item>
+                      <MinusCircleOutlined
+                        style={{ fontSize: "16px", paddingLeft: "10px" }}
+                        onClick={() => remove(arrField.name)}
+                      />
+                    </Row>
+                    {arrFields !== null &&
+                    arrFields !== undefined &&
+                    index + 1 === arrFields.length ? (
+                      <Divider
+                        style={{ marginTop: "4px", marginBottom: "12px" }}
+                      />
+                    ) : (
+                      <></>
+                    )}
+                  </Col>
+                ))}
+                <Form.Item style={{ marginBottom: "0" }}>
+                  <Button
+                    type="dashed"
+                    onClick={() => add()}
+                    block
+                    icon={<PlusOutlined />}
+                  >
+                    Add
+                  </Button>
+                </Form.Item>
+              </div>
+            )}
+          </Form.List>
+        </Form.Item>
       );
     }
-    if (field.items === "object") {
+    if (field.items.type === "object") {
       return (
-        <div>
-          {mapFields(
-            field.items.properties,
-            parentFieldID,
-            "",
-            level + 1,
-            2,
-            arrayField,
-            field.items.required,
-          )}
-          <MinusCircleOutlined
-            style={{ fontSize: "16px" }}
-            onClick={() => remove(arrayField.name)}
-          />
-        </div>
+        <Collapse
+          size={"small"}
+          bordered={false}
+          onChange={function (value: string | string[]) {
+            if (value.length === 0) {
+              updateActiveCollapses(uniqueFieldName, false);
+            } else {
+              updateActiveCollapses(uniqueFieldName, true);
+            }
+          }}
+        >
+          <Collapse.Panel
+            key={fieldName}
+            header={header}
+            style={{
+              borderRadius: "7px",
+              backgroundColor: getCollapseColor(uniqueFieldName.toString()),
+            }}
+            forceRender={true}
+          >
+            <Form.Item
+              wrapperCol={{ span: 16 }}
+              style={{
+                paddingTop: "8px",
+                marginBottom: "0",
+              }}
+            >
+              <Form.List name={formItemName}>
+                {(arrFields, { add, remove }) => (
+                  <>
+                    {arrFields.map((arrField) => (
+                      <Col
+                        key={arrField.key}
+                        style={{ padding: 0, paddingBottom: "12px" }}
+                      >
+                        <div
+                          style={{
+                            border: "solid 1.5px #c3c3c3",
+                            borderRadius: "7px",
+                            padding: "12px",
+                            width: "100%",
+                            backgroundColor: "#fafafa",
+                          }}
+                        >
+                          {mapFields(
+                            field.items.properties,
+                            [...uniqueFieldName, String(arrField.name)],
+                            "",
+                            level + 1,
+                            2,
+                            arrField,
+                            field.items.required,
+                          )}
+                          <MinusCircleOutlined
+                            style={{ fontSize: "16px" }}
+                            onClick={() => remove(arrField.name)}
+                          />
+                        </div>
+                      </Col>
+                    ))}
+                    <Form.Item style={{ marginBottom: "0" }}>
+                      <Button
+                        type="dashed"
+                        onClick={() => add()}
+                        block
+                        icon={<PlusOutlined />}
+                      >
+                        Add
+                      </Button>
+                    </Form.Item>
+                  </>
+                )}
+              </Form.List>
+            </Form.Item>
+          </Collapse.Panel>
+        </Collapse>
       );
     }
   };
@@ -617,6 +748,10 @@ const EditModule = () => {
             <Form.Item
               {...arrayField}
               name={formItemName}
+              style={{
+                paddingTop: "8px",
+                marginBottom: "12px",
+              }}
               label={
                 <div>
                   {field.display_name}
@@ -641,6 +776,10 @@ const EditModule = () => {
               {...arrayField}
               initialValue={field.initialValue}
               name={formItemName}
+              style={{
+                paddingTop: "8px",
+                marginBottom: "12px",
+              }}
               label={
                 <div>
                   {field.display_name}
@@ -679,6 +818,10 @@ const EditModule = () => {
               initialValue={field.initialValue}
               name={fieldName}
               id={fieldName}
+              style={{
+                paddingTop: "8px",
+                marginBottom: "12px",
+              }}
               label={
                 <div>
                   {field.display_name}
@@ -727,7 +870,8 @@ const EditModule = () => {
               span={level === 0 ? 16 : 24}
               offset={level === 0 ? 2 : 0}
               style={{
-                paddingBottom: "15px",
+                paddingTop: "8px",
+                paddingBottom: "8px",
                 paddingLeft: "0px",
                 paddingRight: "0px",
                 marginLeft: "0px",
@@ -736,6 +880,7 @@ const EditModule = () => {
             >
               <Collapse
                 size={"small"}
+                bordered={false}
                 style={{
                   borderColor: "#d3d3d3",
                 }}
@@ -812,66 +957,22 @@ const EditModule = () => {
               span={level === 0 ? 16 : 24}
               offset={level === 0 ? 2 : 0}
               style={{
-                paddingBottom: "15px",
-                marginLeft: "0px",
-                marginRight: "0px",
+                paddingTop: "8px",
+                paddingBottom: "8px",
                 paddingLeft: "0px",
                 paddingRight: "0px",
+                marginLeft: "0px",
+                marginRight: "0px",
               }}
             >
-              <Collapse
-                size={"small"}
-                onChange={function (value: string | string[]) {
-                  if (value.length === 0) {
-                    updateActiveCollapses(uniqueFieldName, false);
-                  } else {
-                    updateActiveCollapses(uniqueFieldName, true);
-                  }
-                }}
-              >
-                <Collapse.Panel
-                  key={fieldName}
-                  header={header}
-                  style={{
-                    borderRadius: "7px",
-                    backgroundColor: getCollapseColor(
-                      uniqueFieldName.toString(),
-                    ),
-                  }}
-                  forceRender={true}
-                >
-                  <Form.List name={formItemName}>
-                    {(arrFields, { add, remove }) => (
-                      <>
-                        {arrFields.map((arrField) => (
-                          <Col key={arrField.key}>
-                            {arrayInnerField(
-                              field,
-                              [...uniqueFieldName, String(arrField.name)],
-                              "",
-                              level + 1,
-                              arrField,
-                              remove,
-                            )}
-                            <Divider />
-                          </Col>
-                        ))}
-
-                        <Form.Item>
-                          <Button
-                            type="dashed"
-                            onClick={() => add()}
-                            block
-                            icon={<PlusOutlined />}
-                          >
-                            Add
-                          </Button>
-                        </Form.Item>
-                      </>
-                    )}
-                  </Form.List>
-                </Collapse.Panel>
-              </Collapse>
+              {arrayInnerField(
+                fieldName,
+                uniqueFieldName,
+                formItemName,
+                field,
+                level + 1,
+                header,
+              )}
             </Col>,
           );
           return;
@@ -881,6 +982,10 @@ const EditModule = () => {
               wrapperCol={{ span: level === 0 ? 16 : 24 }}
               name={fieldName}
               rules={[{ required: isRequired }]}
+              style={{
+                paddingTop: "8px",
+                marginBottom: "12px",
+              }}
               label={
                 <div>
                   {field.display_name}
@@ -947,9 +1052,7 @@ const EditModule = () => {
                       </Row>
                     ))}
                     <Col span={24}>
-                      <Form.Item
-                        style={{ marginBottom: "0", marginRight: "12px" }}
-                      >
+                      <Form.Item style={{ marginBottom: "0" }}>
                         <Button
                           type="dashed"
                           onClick={() => {
diff --git a/cyclops-ui/src/components/pages/EditModule/custom.css b/cyclops-ui/src/components/pages/EditModule/custom.css
new file mode 100644
index 00000000..b1e656c3
--- /dev/null
+++ b/cyclops-ui/src/components/pages/EditModule/custom.css
@@ -0,0 +1,28 @@
+.ant-col.ant-form-item-label {
+  padding: 0 !important;
+}
+
+label.ant-form-item-required:before {
+  bottom: 1em !important;
+  position: relative !important;
+}
+
+code {
+  color: #000080;
+}
+
+.ant-collapse-content-box {
+  padding-top: 12px;
+  border: 1px solid #d3d3d3;
+  border-top: none;
+  border-left: 3px solid #faca93;
+  border-bottom-left-radius: 7px;
+  border-bottom-right-radius: 7px;
+  background-color: #ffffff;
+}
+
+.custom {
+  .ant-collapse-content-box {
+    padding: 0;
+  }
+}
diff --git a/cyclops-ui/src/components/pages/ModuleDetails.tsx b/cyclops-ui/src/components/pages/ModuleDetails.tsx
index c76ba1d5..c947d506 100644
--- a/cyclops-ui/src/components/pages/ModuleDetails.tsx
+++ b/cyclops-ui/src/components/pages/ModuleDetails.tsx
@@ -47,6 +47,7 @@ import { gvkString } from "../../utils/k8s/gvk";
 import { mapResponseError } from "../../utils/api/errors";
 import Secret from "../k8s-resources/Secret";
 import { CheckboxChangeEvent } from "antd/es/checkbox";
+
 const languages = [
   "javascript",
   "java",
@@ -907,7 +908,6 @@ const ModuleDetails = () => {
           </Checkbox>
           <Divider style={{ marginTop: "12px", marginBottom: "12px" }} />
         </div>
-
         <ReactAce
           style={{ width: "100%" }}
           mode={"sass"}
diff --git a/cyclops-ui/src/components/pages/NewModule.tsx b/cyclops-ui/src/components/pages/NewModule/NewModule.tsx
similarity index 80%
rename from cyclops-ui/src/components/pages/NewModule.tsx
rename to cyclops-ui/src/components/pages/NewModule/NewModule.tsx
index f463bf48..7cafa6be 100644
--- a/cyclops-ui/src/components/pages/NewModule.tsx
+++ b/cyclops-ui/src/components/pages/NewModule/NewModule.tsx
@@ -24,8 +24,13 @@ import {
   PlusOutlined,
   InfoCircleOutlined,
 } from "@ant-design/icons";
-import { fileExtension, findMaps, flattenObjectKeys } from "../../utils/form";
+import {
+  fileExtension,
+  findMaps,
+  flattenObjectKeys,
+} from "../../../utils/form";
 import "./custom.css";
+import defaultTemplate from "../../../static/img/default-template-icon.png";
 
 import YAML from "yaml";
 
@@ -38,14 +43,14 @@ import "ace-builds/src-noconflict/mode-toml";
 import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/mode-typescript";
 import "ace-builds/src-noconflict/snippets/yaml";
-import { numberInputValidators } from "../../utils/validators/number";
-import { stringInputValidators } from "../../utils/validators/string";
+import { numberInputValidators } from "../../../utils/validators/number";
+import { stringInputValidators } from "../../../utils/validators/string";
 import { Option } from "antd/es/mentions";
 import {
   FeedbackError,
   FormValidationErrors,
-} from "../errors/FormValidationErrors";
-import { mapResponseError } from "../../utils/api/errors";
+} from "../../errors/FormValidationErrors";
+import { mapResponseError } from "../../../utils/api/errors";
 
 const { Title } = Typography;
 const layout = {
@@ -409,6 +414,10 @@ const NewModule = () => {
         {...arrayField}
         name={formItemName}
         rules={[{ required: isRequired }]}
+        style={{
+          paddingTop: "8px",
+          marginBottom: "12px",
+        }}
         label={
           <div>
             {field.display_name}
@@ -441,6 +450,10 @@ const NewModule = () => {
       <Form.Item
         {...arrayField}
         name={formItemName}
+        style={{
+          paddingTop: "8px",
+          marginBottom: "12px",
+        }}
         label={
           <div>
             {field.display_name}
@@ -476,49 +489,168 @@ const NewModule = () => {
   };
 
   const arrayInnerField = (
+    fieldName: string,
+    uniqueFieldName: string[],
+    formItemName: any,
     field: any,
-    parentFieldID: string[],
-    parent: string,
     level: number,
-    arrayField: any,
-    remove: Function,
+    header: React.JSX.Element,
   ) => {
-    if (!field.items || typeof field.items === "string") {
+    if (!field.items || field.items.type === "string") {
       return (
-        <Row>
-          <Form.Item
-            style={{ paddingBottom: "0px", marginBottom: "0px" }}
-            wrapperCol={24}
-            {...arrayField}
-            initialValue={field.initialValue}
-            name={[arrayField.name]}
-          >
-            <Input />
-          </Form.Item>
-          <MinusCircleOutlined
-            style={{ fontSize: "16px", paddingLeft: "10px" }}
-            onClick={() => remove(arrayField.name)}
-          />
-        </Row>
+        <Form.Item
+          wrapperCol={{ span: level === 0 ? 16 : 24 }}
+          name={fieldName}
+          style={{
+            paddingTop: "0px",
+            marginBottom: "12px",
+          }}
+          label={
+            <div>
+              {field.display_name}
+              <p style={{ color: "#8b8e91", marginBottom: "0px" }}>
+                {field.description}
+              </p>
+            </div>
+          }
+        >
+          <Form.List name={formItemName}>
+            {(arrFields, { add, remove }) => (
+              <div
+                style={{
+                  border: "solid 1px #d3d3d3",
+                  borderRadius: "7px",
+                  padding: "12px",
+                  width: "100%",
+                  backgroundColor: "#fafafa",
+                }}
+              >
+                {arrFields.map((arrField, index) => (
+                  <Col key={arrField.key}>
+                    <Row>
+                      <Form.Item
+                        style={{
+                          paddingBottom: "8px",
+                          marginBottom: "0px",
+                          width: "80%",
+                        }}
+                        wrapperCol={{ span: 24 }}
+                        {...arrField}
+                        initialValue={field.initialValue}
+                        name={[arrField.name]}
+                      >
+                        <Input />
+                      </Form.Item>
+                      <MinusCircleOutlined
+                        style={{ fontSize: "16px", paddingLeft: "10px" }}
+                        onClick={() => remove(arrField.name)}
+                      />
+                    </Row>
+                    {arrFields !== null &&
+                    arrFields !== undefined &&
+                    index + 1 === arrFields.length ? (
+                      <Divider
+                        style={{ marginTop: "4px", marginBottom: "12px" }}
+                      />
+                    ) : (
+                      <></>
+                    )}
+                  </Col>
+                ))}
+                <Form.Item style={{ marginBottom: "0" }}>
+                  <Button
+                    type="dashed"
+                    onClick={() => add()}
+                    block
+                    icon={<PlusOutlined />}
+                  >
+                    Add
+                  </Button>
+                </Form.Item>
+              </div>
+            )}
+          </Form.List>
+        </Form.Item>
       );
     }
-    if (field.items === "object") {
+    if (field.items.type === "object") {
       return (
-        <div>
-          {mapFields(
-            field.items.properties,
-            parentFieldID,
-            "",
-            level + 1,
-            2,
-            arrayField,
-            field.items.required,
-          )}
-          <MinusCircleOutlined
-            style={{ fontSize: "16px" }}
-            onClick={() => remove(arrayField.name)}
-          />
-        </div>
+        <Collapse
+          size={"small"}
+          bordered={false}
+          onChange={function (value: string | string[]) {
+            if (value.length === 0) {
+              updateActiveCollapses(uniqueFieldName, false);
+            } else {
+              updateActiveCollapses(uniqueFieldName, true);
+            }
+          }}
+        >
+          <Collapse.Panel
+            key={fieldName}
+            header={header}
+            style={{
+              borderRadius: "7px",
+              backgroundColor: getCollapseColor(uniqueFieldName.toString()),
+            }}
+            forceRender={true}
+          >
+            <Form.Item
+              wrapperCol={{ span: 16 }}
+              style={{
+                paddingTop: "8px",
+                marginBottom: "0",
+              }}
+            >
+              <Form.List name={formItemName}>
+                {(arrFields, { add, remove }) => (
+                  <>
+                    {arrFields.map((arrField) => (
+                      <Col
+                        key={arrField.key}
+                        style={{ padding: 0, paddingBottom: "12px" }}
+                      >
+                        <div
+                          style={{
+                            border: "solid 1.5px #c3c3c3",
+                            borderRadius: "7px",
+                            padding: "12px",
+                            width: "100%",
+                            backgroundColor: "#fafafa",
+                          }}
+                        >
+                          {mapFields(
+                            field.items.properties,
+                            [...uniqueFieldName, String(arrField.name)],
+                            "",
+                            level + 1,
+                            2,
+                            arrField,
+                            field.items.required,
+                          )}
+                          <MinusCircleOutlined
+                            style={{ fontSize: "16px" }}
+                            onClick={() => remove(arrField.name)}
+                          />
+                        </div>
+                      </Col>
+                    ))}
+                    <Form.Item style={{ marginBottom: "0" }}>
+                      <Button
+                        type="dashed"
+                        onClick={() => add()}
+                        block
+                        icon={<PlusOutlined />}
+                      >
+                        Add
+                      </Button>
+                    </Form.Item>
+                  </>
+                )}
+              </Form.List>
+            </Form.Item>
+          </Collapse.Panel>
+        </Collapse>
       );
     }
   };
@@ -604,6 +736,10 @@ const NewModule = () => {
             <Form.Item
               {...arrayField}
               name={formItemName}
+              style={{
+                paddingTop: "8px",
+                marginBottom: "12px",
+              }}
               label={
                 <div>
                   {field.display_name}
@@ -628,6 +764,10 @@ const NewModule = () => {
               {...arrayField}
               initialValue={field.initialValue}
               name={formItemName}
+              style={{
+                paddingTop: "8px",
+                marginBottom: "12px",
+              }}
               label={
                 <div>
                   {field.display_name}
@@ -665,6 +805,10 @@ const NewModule = () => {
               name={fieldName}
               id={fieldName}
               valuePropName={checked}
+              style={{
+                paddingTop: "8px",
+                marginBottom: "12px",
+              }}
               label={
                 <div>
                   {field.display_name}
@@ -712,7 +856,8 @@ const NewModule = () => {
               span={level === 0 ? 16 : 24}
               offset={level === 0 ? 2 : 0}
               style={{
-                paddingBottom: "15px",
+                paddingTop: "8px",
+                paddingBottom: "8px",
                 marginLeft: "0px",
                 marginRight: "0px",
                 paddingLeft: "0px",
@@ -721,6 +866,7 @@ const NewModule = () => {
             >
               <Collapse
                 size={"small"}
+                bordered={false}
                 onChange={function (value: string | string[]) {
                   if (value.length === 0) {
                     updateActiveCollapses(uniqueFieldName, false);
@@ -794,66 +940,22 @@ const NewModule = () => {
               span={level === 0 ? 16 : 24}
               offset={level === 0 ? 2 : 0}
               style={{
-                paddingBottom: "15px",
-                marginLeft: "0px",
-                marginRight: "0px",
+                paddingTop: "8px",
+                paddingBottom: "8px",
                 paddingLeft: "0px",
                 paddingRight: "0px",
+                marginLeft: "0px",
+                marginRight: "0px",
               }}
             >
-              <Collapse
-                size={"small"}
-                onChange={function (value: string | string[]) {
-                  if (value.length === 0) {
-                    updateActiveCollapses(uniqueFieldName, false);
-                  } else {
-                    updateActiveCollapses(uniqueFieldName, true);
-                  }
-                }}
-              >
-                <Collapse.Panel
-                  key={fieldName}
-                  header={header}
-                  style={{
-                    borderRadius: "7px",
-                    backgroundColor: getCollapseColor(
-                      uniqueFieldName.toString(),
-                    ),
-                  }}
-                  forceRender={true}
-                >
-                  <Form.List name={formItemName}>
-                    {(arrFields, { add, remove }) => (
-                      <>
-                        {arrFields.map((arrField) => (
-                          <Col key={arrField.key}>
-                            {arrayInnerField(
-                              field,
-                              [...uniqueFieldName, String(arrField.name)],
-                              "",
-                              level + 1,
-                              arrField,
-                              remove,
-                            )}
-                            <Divider />
-                          </Col>
-                        ))}
-
-                        <Form.Item>
-                          <Button
-                            type="dashed"
-                            onClick={() => add()}
-                            block
-                            icon={<PlusOutlined />}
-                          >
-                            Add
-                          </Button>
-                        </Form.Item>
-                      </>
-                    )}
-                  </Form.List>
-                </Collapse.Panel>
-              </Collapse>
+              {arrayInnerField(
+                fieldName,
+                uniqueFieldName,
+                formItemName,
+                field,
+                level + 1,
+                header,
+              )}
             </Col>,
           );
           return;
@@ -863,6 +965,10 @@ const NewModule = () => {
               wrapperCol={{ span: level === 0 ? 16 : 24 }}
               name={fieldName}
               rules={[{ required: isRequired }]}
+              style={{
+                paddingTop: "8px",
+                marginBottom: "12px",
+              }}
               label={
                 <div>
                   {field.display_name}
@@ -929,9 +1035,7 @@ const NewModule = () => {
                       </Row>
                     ))}
                     <Col span={24}>
-                      <Form.Item
-                        style={{ marginBottom: "0", marginRight: "12px" }}
-                      >
+                      <Form.Item style={{ marginBottom: "0" }}>
                         <Button
                           type="dashed"
                           onClick={() => {
@@ -1084,17 +1188,36 @@ const NewModule = () => {
             <Row>
               <Col span={16}>
                 <Select
+                  showSearch={true}
                   onChange={onTemplateStoreSelected}
                   style={{ width: "100%" }}
                   placeholder="Select an option"
                 >
                   {templateStore.map((option: any, index) => (
                     <Option key={option.name} value={option.name}>
-                      <img
-                        alt=""
-                        style={{ height: "1.5em", marginRight: "8px" }}
-                        src={option.iconURL}
-                      />
+                      {option.iconURL !== null &&
+                      option.iconURL !== undefined &&
+                      option.iconURL.length !== 0 ? (
+                        <img
+                          alt=""
+                          style={{
+                            maxHeight: "1.5em",
+                            maxWidth: "1.5em",
+                            marginRight: "8px",
+                          }}
+                          src={option.iconURL}
+                        />
+                      ) : (
+                        <img
+                          alt=""
+                          style={{
+                            maxHeight: "1.5em",
+                            maxWidth: "1.5em",
+                            marginRight: "8px",
+                          }}
+                          src={defaultTemplate}
+                        />
+                      )}
                       {option.name}
                     </Option>
                   ))}
diff --git a/cyclops-ui/src/components/pages/NewModule/custom.css b/cyclops-ui/src/components/pages/NewModule/custom.css
new file mode 100644
index 00000000..b1e656c3
--- /dev/null
+++ b/cyclops-ui/src/components/pages/NewModule/custom.css
@@ -0,0 +1,28 @@
+.ant-col.ant-form-item-label {
+  padding: 0 !important;
+}
+
+label.ant-form-item-required:before {
+  bottom: 1em !important;
+  position: relative !important;
+}
+
+code {
+  color: #000080;
+}
+
+.ant-collapse-content-box {
+  padding-top: 12px;
+  border: 1px solid #d3d3d3;
+  border-top: none;
+  border-left: 3px solid #faca93;
+  border-bottom-left-radius: 7px;
+  border-bottom-right-radius: 7px;
+  background-color: #ffffff;
+}
+
+.custom {
+  .ant-collapse-content-box {
+    padding: 0;
+  }
+}
diff --git a/cyclops-ui/src/components/pages/TemplateStore/TemplateStore.tsx b/cyclops-ui/src/components/pages/TemplateStore/TemplateStore.tsx
index 358a9ce1..5eaa2b14 100644
--- a/cyclops-ui/src/components/pages/TemplateStore/TemplateStore.tsx
+++ b/cyclops-ui/src/components/pages/TemplateStore/TemplateStore.tsx
@@ -22,6 +22,7 @@ import {
 import classNames from "classnames";
 import styles from "./styles.module.css";
 import { mapResponseError } from "../../../utils/api/errors";
+import defaultTemplate from "../../../static/img/default-template-icon.png";
 
 const TemplateStore = () => {
   const [templates, setTemplates] = useState([]);
@@ -187,13 +188,27 @@ const TemplateStore = () => {
             dataIndex="iconURL"
             width={"3%"}
             render={function (iconURL) {
+              if (!iconURL || iconURL.length === 0) {
+                return (
+                  <img
+                    alt=""
+                    style={{
+                      verticalAlign: "middle",
+                      margin: "-5px",
+                      maxHeight: "36px",
+                    }}
+                    src={defaultTemplate}
+                  />
+                );
+              }
+
               return (
                 <img
                   alt=""
                   style={{
                     verticalAlign: "middle",
                     margin: "-5px",
-                    height: "36px",
+                    maxHeight: "36px",
                   }}
                   src={iconURL}
                 />
diff --git a/cyclops-ui/src/routes/index.tsx b/cyclops-ui/src/routes/index.tsx
index 1b35f866..0e39e72c 100644
--- a/cyclops-ui/src/routes/index.tsx
+++ b/cyclops-ui/src/routes/index.tsx
@@ -3,11 +3,15 @@ import PathConstants from "./PathConstants";
 
 const Home = React.lazy(() => import("../components/pages/Modules/Modules"));
 const Modules = React.lazy(() => import("../components/pages/Modules/Modules"));
-const NewModule = React.lazy(() => import("../components/pages/NewModule"));
+const NewModule = React.lazy(
+  () => import("../components/pages/NewModule/NewModule"),
+);
 const ModuleDetails = React.lazy(
   () => import("../components/pages/ModuleDetails"),
 );
-const EditModule = React.lazy(() => import("../components/pages/EditModule"));
+const EditModule = React.lazy(
+  () => import("../components/pages/EditModule/EditModule"),
+);
 const ModuleHistory = React.lazy(() => import("../components/pages/History"));
 const Nodes = React.lazy(() => import("../components/pages/Nodes"));
 const NodeDetails = React.lazy(() => import("../components/pages/NodeDetails"));
diff --git a/cyclops-ui/src/static/img/default-template-icon.png b/cyclops-ui/src/static/img/default-template-icon.png
new file mode 100644
index 00000000..0d4f3c81
Binary files /dev/null and b/cyclops-ui/src/static/img/default-template-icon.png differ
diff --git a/cyclops-ui/src/utils/form.tsx b/cyclops-ui/src/utils/form.tsx
index 7ca3a6e0..a4996665 100644
--- a/cyclops-ui/src/utils/form.tsx
+++ b/cyclops-ui/src/utils/form.tsx
@@ -71,7 +71,7 @@ export function findMaps(fields: any[], values: any, initialValues: any): any {
         }
 
         let objectArr: any[] = [];
-        valuesList.forEach((valueFromList) => {
+        valuesList.forEach((valueFromList, index) => {
           if (field.items === null || field.items === undefined) {
             objectArr.push(valueFromList);
             return;
@@ -86,7 +86,7 @@ export function findMaps(fields: any[], values: any, initialValues: any): any {
                 findMaps(
                   field.items.properties,
                   valueFromList,
-                  initialValues[field.name],
+                  getObjectArrayInitialValue(initialValues, field.name, index),
                 ),
               );
               break;
@@ -113,3 +113,26 @@ export function findMaps(fields: any[], values: any, initialValues: any): any {
 
   return out;
 }
+
+function getObjectArrayInitialValue(
+  initialValue: any,
+  name: string,
+  index: number,
+): any | null {
+  if (initialValue === null || initialValue === undefined) {
+    return null;
+  }
+
+  if (initialValue[name] === null || initialValue[name] === undefined) {
+    return null;
+  }
+
+  if (
+    Array.isArray(initialValue[name]) &&
+    index >= 0 &&
+    index < initialValue[name].length
+  ) {
+    return initialValue[name][index];
+  }
+  return null;
+}