diff --git a/app/javascript/components/automate-method-form/ansibleTowerJobTemplateSchema.js b/app/javascript/components/automate-method-form/ansibleTowerJobTemplateSchema.js
deleted file mode 100644
index c11030897af..00000000000
--- a/app/javascript/components/automate-method-form/ansibleTowerJobTemplateSchema.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { componentTypes } from '@@ddf';
-
-const baseSchema = (options, selectedOption) => {
-  const commonFields = [
-    {
-      component: componentTypes.TEXTAREA,
-      name: 'specify-details',
-      label: __('Specify details'),
-      condition: {
-        and: [{ when: 'hostValue', is: 'specify' }],
-      },
-    },
-    {
-      component: componentTypes.TEXT_FIELD,
-      id: 'maxttl',
-      name: 'maxttl',
-      label: __('Max TTL(mins)'),
-    },
-    {
-      component: componentTypes.SELECT,
-      id: 'loggingOutput',
-      name: 'loggingOutput',
-      label: __('Logging Output'),
-    },
-  ];
-
-  return {
-    fields: [
-      {
-        component: componentTypes.SELECT,
-        id: 'provider',
-        name: 'provider',
-        label: __('Provider'),
-        options: options,
-      },
-      {
-        component: componentTypes.SELECT,
-        id: 'workflowTemplate',
-        name: 'workflowTemplate',
-        label: __('Workflow Template'),
-        options: options,
-      },
-      ...(selectedOption && selectedOption.id === 'Ansible Tower Workflow Template'
-        ? []
-        : [
-            {
-              component: componentTypes.RADIO,
-              id: 'hostValue',
-              name: 'hostValue',
-              label: __('Hosts'),
-              options: [
-                { value: 'localhost', label: 'Localhost' },
-                { value: 'specify', label: 'Specify host values' },
-              ],
-            },
-          ]),
-      ...commonFields,
-    ],
-  };
-};
-
-const ansibleTowerJobTemplateSchema = (options, selectedOption) => {
-  let schema = baseSchema(options, selectedOption);
-
-  return schema;
-};
-
-export default ansibleTowerJobTemplateSchema;
diff --git a/app/javascript/components/automate-method-form/automateModal.jsx b/app/javascript/components/automate-method-form/automateModal.jsx
new file mode 100644
index 00000000000..00063a46a4d
--- /dev/null
+++ b/app/javascript/components/automate-method-form/automateModal.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Modal } from 'carbon-components-react';
+import MiqFormRenderer from '@@ddf';
+
+const AutomateModal = ({ isOpen, onClose, modalLabel, schema }) => {
+
+  return (
+    <Modal open={isOpen} onRequestClose={onClose} modalLabel={modalLabel} passiveModal>
+       <MiqFormRenderer schema={schema} />
+    </Modal>
+  );
+};
+
+export default AutomateModal;
diff --git a/app/javascript/components/automate-method-form/codeMirror.js b/app/javascript/components/automate-method-form/codeMirror.js
new file mode 100644
index 00000000000..17d0aaeff89
--- /dev/null
+++ b/app/javascript/components/automate-method-form/codeMirror.js
@@ -0,0 +1,35 @@
+import React, { useRef, useEffect } from 'react';
+import CodeMirror from 'codemirror';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/mode/javascript/javascript';
+
+const ReactCodeMirror = ({ code, onChange }) => {
+  const codeMirrorRef = useRef(null);
+
+  useEffect(() => {
+    const editor = CodeMirror.fromTextArea(codeMirrorRef.current, {
+      mode: 'javascript',
+      theme: 'material',
+      lineNumbers: true,
+    });
+
+    editor.on('change', (instance) => {
+      if (onChange) {
+        onChange(instance.getValue());
+      }
+    });
+    editor.setValue(code);
+
+    return () => {
+      editor.toTextArea();
+    };
+  }, [code, onChange]);
+
+  return (
+    <div>
+      <textarea ref={codeMirrorRef} />
+    </div>
+  );
+};
+
+export default ReactCodeMirror;
diff --git a/app/javascript/components/automate-method-form/combinedSchema.js b/app/javascript/components/automate-method-form/combinedSchema.js
new file mode 100644
index 00000000000..d16197a188c
--- /dev/null
+++ b/app/javascript/components/automate-method-form/combinedSchema.js
@@ -0,0 +1,137 @@
+import { componentTypes } from '@@ddf';
+
+const combinedSchema = (options, selectedOption) => {
+  const commonFields = [
+    {
+      component: componentTypes.TEXT_FIELD,
+      id: 'type',
+      name: 'type',
+      label: __('Type'),
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      id: 'fully-qualified-name',
+      name: 'fully-qualified-name',
+      label: __('Fully Qualified Name'),
+      initialValue: '',
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      id: 'name',
+      name: 'name',
+      label: __('Name'),
+      initialValue: '',
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      id: 'displayName',
+      name: 'displayname',
+      label: __('Display Name'),
+      initialValue: '',
+    },
+  ];
+
+  const builtInFields = [
+    {
+      component: componentTypes.TEXT_FIELD,
+      id: 'built-in',
+      name: 'built-in',
+      label: __('Optional, if not specified, method name is used'),
+    },
+  ];
+
+  const expressionFields = [
+    {
+      component: componentTypes.SELECT,
+      id: 'expressionObject',
+      name: 'expressionObject',
+      label: __('Expression Object'),
+      options: options,
+    },
+    {
+      component: componentTypes.TEXTAREA,
+      id: 'editexpression',
+      name: 'editexpression',
+      label: __('Placeholder For Edit Expression'),
+    },
+    {
+      component: componentTypes.TEXTAREA,
+      id: 'editselected',
+      name: 'editselected',
+      label: __('Placeholder For Edit Selected Element'),
+    }
+  ];
+
+  return {
+    fields: selectedOption && selectedOption.id === 'Built-in'
+      ? [...commonFields, ...builtInFields]
+      : selectedOption && selectedOption.id === 'Expression'
+        ? [...commonFields, ...expressionFields]
+        :selectedOption && selectedOption.id === 'Inline'
+        ?[...commonFields]
+        : [
+          ...commonFields,
+          {
+            component: componentTypes.SELECT,
+            id: 'provider',
+            name: 'provider',
+            label: __('Provider'),
+            options: options,
+          },
+          {
+            component: componentTypes.SELECT,
+            id: 'workflowTemplate',
+            name: 'workflowTemplate',
+            label: __('Workflow Template'),
+            options: options,
+          },
+          ...(selectedOption && (selectedOption.id === 'Ansible Tower Job Template' || selectedOption.id === 'Playbook')
+            ? [
+              {
+                component: componentTypes.RADIO,
+                id: 'hostValue',
+                name: 'hostValue',
+                label: __('Hosts'),
+                options: [
+                  { value: 'localhost', label: 'Localhost' },
+                  { value: 'specify', label: 'Specify host values' },
+                ],
+              },
+            ]
+            : []),
+          {
+            component: componentTypes.TEXTAREA,
+            name: 'specify-details',
+            label: __('Specify details'),
+            condition: {
+              and: [{ when: 'hostValue', is: 'specify' }],
+            },
+          },
+          {
+            component: componentTypes.TEXT_FIELD,
+            id: 'maxttl',
+            name: 'maxttl',
+            label: __('Max TTL(mins)'),
+          },
+          {
+            component: componentTypes.SELECT,
+            id: 'loggingOutput',
+            name: 'loggingOutput',
+            label: __('Logging Output'),
+          },
+          ...(selectedOption && selectedOption.id === 'Playbook'
+            ? [
+              {
+                component: componentTypes.SELECT,
+                id: 'verbosity',
+                name: 'verbosity',
+                label: __('Verbosity'),
+                options: options,
+              },
+            ]
+            : []),
+        ],
+  };
+};
+
+export default combinedSchema;
diff --git a/app/javascript/components/automate-method-form/commonSchema.js b/app/javascript/components/automate-method-form/commonSchema.js
deleted file mode 100644
index 172fe0fc06d..00000000000
--- a/app/javascript/components/automate-method-form/commonSchema.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { componentTypes } from '@@ddf';
-
-const commonSchema = () => ({
-  fields: [
-    {
-      component: componentTypes.TEXT_FIELD,
-      id: 'type',
-      name: 'type',
-      label: __('Type'),
-      disabled: true,
-      initialValue: 'Ansible Tower Job Template',
-    },
-    {
-      component: componentTypes.TEXT_FIELD,
-      id: 'fully-qualified-name',
-      name: 'fully-qualified-name',
-      label: __('Fully Qualified Name'),
-      disabled: true,
-      initialValue: '',
-    },
-    {
-      component: componentTypes.TEXT_FIELD,
-      id: 'name',
-      name: 'name',
-      label: __('Name'),
-      initialValue: '',
-    },
-    {
-      component: componentTypes.TEXT_FIELD,
-      id: 'displayName',
-      name: 'displayname',
-      label: __('Display Name'),
-      initialValue: '',
-    },
-  ],
-});
-
-export default commonSchema;
diff --git a/app/javascript/components/automate-method-form/index.jsx b/app/javascript/components/automate-method-form/index.jsx
index 2deed1e7ccb..fc90ab8b0a5 100644
--- a/app/javascript/components/automate-method-form/index.jsx
+++ b/app/javascript/components/automate-method-form/index.jsx
@@ -1,50 +1,91 @@
 import React, { useState } from 'react';
-import { Dropdown } from 'carbon-components-react';
+import { Dropdown, Button } from 'carbon-components-react';
 import MiqFormRenderer from '@@ddf';
-import commonSchema from './commonSchema';
-import ansibleTowerJobTemplateSchema from './ansibleTowerJobTemplateSchema';
+import combinedSchema from './combinedSchema';
+import InputParams from './method-input-parameters';
+import AutomateModal from './automateModal';
+import { inputParameterSchema } from './method-input-parameters/helper';
+import ReactCodeMirror from './codeMirror';
+
+const MainInfo = ({ options, selectedOption, handleSelect, ansibleSchema }) => (
+  <div className="mainClass">
+    <h3>Main Info</h3>
+    <Dropdown
+      id="choose"
+      label="Choose"
+      items={options}
+      itemToString={(item) => (item ? item.label : '')}
+      onChange={({ selectedItem }) => handleSelect(selectedItem)}
+      titleText={selectedOption ? selectedOption.label : ''}
+    />
+  </div>
+);
 
 const AutomateMethodForm = (props) => {
   const [selectedOption, setSelectedOption] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(undefined);
 
   const handleSelect = (selectedItem) => {
     setSelectedOption(selectedItem);
   };
 
+  const openModal = (type) => {
+    setIsModalOpen(type);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(undefined);
+  };
+
   const options = props.availableLocations.map(([id, label]) => ({ id, label }));
+  const ansibleSchema = combinedSchema(options, selectedOption);
+  let modalSchema;
+  modalSchema = isModalOpen === 'inputParameter' ? inputParameterSchema : undefined;
 
-  const ansibleSchema =
-    (selectedOption && selectedOption.id === 'Ansible Tower Job Template') ||
-    (selectedOption && selectedOption.id === 'Ansible Tower Workflow Template') ||
-    (selectedOption && selectedOption.id === 'Playbook')
-      ? [
-          ...commonSchema(options).fields,
-          ...ansibleTowerJobTemplateSchema(options, selectedOption).fields,
-        ]
-      : commonSchema().fields;
-        console.log(selectedOption)
   return (
     <>
-      {selectedOption &&
-      (selectedOption.id === 'Ansible Tower Job Template' ||
-        selectedOption.id === 'Ansible Tower Workflow Template' ||
-        selectedOption.id === 'Ansible Tower Workflow Playbook' ) ? (
-        <MiqFormRenderer schema={{ fields: ansibleSchema }} />
-      ) : (
-        <div className="mainClass">
-          <h3>Main Info</h3>
-          <Dropdown
-            id="choose"
-            label="Choose"
-            items={options}
-            itemToString={(item) => (item ? item.label : '')}
-            onChange={({ selectedItem }) => handleSelect(selectedItem)}
-            titleText={selectedOption ? selectedOption.label : ''}
-          />
-        </div>
+      <MainInfo options={options} selectedOption={selectedOption} handleSelect={handleSelect} ansibleSchema={ansibleSchema} />
+      {selectedOption && shouldRenderForm(selectedOption) && (
+        <MiqFormRenderer schema={{ fields: ansibleSchema.fields }} />
+      )}
+      {selectedOption && shouldRenderForm(selectedOption) && (
+        <>
+          {selectedOption.id === 'Inline' && (
+            <>
+               <Button onClick={openModal} kind="primary">
+                Add Method
+               </Button>
+              <ReactCodeMirror code={'fg'} onChange={(newCode) => console.log(newCode)} />
+              <Button kind="primary">
+                Validate
+               </Button>
+              <br/>
+            </>
+          )}
+          {selectedOption && shouldRenderForm(selectedOption) && (
+            <>
+            <br/>
+            <Button onClick={() => openModal('inputParameter')} kind="primary">
+              Add Input Parameters
+            </Button>
+            </>
+          )}
+          <br/>
+          <InputParams />
+        </>
       )}
+      <AutomateModal
+        isOpen={ isModalOpen && modalSchema }
+        onClose={closeModal}
+        modalLabel="Input Parameters"
+        schema={ modalSchema }/>
     </>
   );
 };
 
+const shouldRenderForm = (selectedOption) => {
+  const validOptions = ['Ansible Tower Job Template', 'Ansible Tower Workflow Template', 'Playbook', 'Built-in', 'Expression', 'Inline'];
+  return validOptions.includes(selectedOption.id);
+};
+
 export default AutomateMethodForm;
diff --git a/app/javascript/components/automate-method-form/method-input-parameters/helper.js b/app/javascript/components/automate-method-form/method-input-parameters/helper.js
new file mode 100644
index 00000000000..59cf5922b71
--- /dev/null
+++ b/app/javascript/components/automate-method-form/method-input-parameters/helper.js
@@ -0,0 +1,30 @@
+import { componentTypes } from '@@ddf';
+
+export const inputParameterSchema = {
+  fields: [
+    {
+      component: componentTypes.TEXT_FIELD,
+      id: 'type',
+      name: 'type',
+      label: __('Input Name'),
+    },
+    {
+      component: componentTypes.SELECT,
+      id: 'selectInput',
+      name: 'selectInput',
+      label: __('Choose'),
+      options: [
+        { id: 'option1', text: 'Option 1' },
+        { id: 'option2', text: 'Option 2' },
+        { id: 'option3', text: 'Option 3' },
+      ],
+    },
+    {
+      component: componentTypes.TEXT_FIELD,
+      id: 'DefaultValue',
+      name: 'DefaultValue',
+      label: __('Default Value'),
+    },
+  ],
+};
+
diff --git a/app/javascript/components/automate-method-form/method-input-parameters/index.js b/app/javascript/components/automate-method-form/method-input-parameters/index.js
new file mode 100644
index 00000000000..937f3ac2036
--- /dev/null
+++ b/app/javascript/components/automate-method-form/method-input-parameters/index.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import {
+  DataTable,
+} from 'carbon-components-react';
+
+const InputParams = () => {
+  /**SAmple data */
+  const data = [
+    { inputName: 'username', dataType: 'string', defaultValue: 'guest', actions: 'Edit, Delete' },
+    { inputName: 'password', dataType: 'password', defaultValue: '********', actions: 'Edit, Delete' },
+  ];
+
+  const headers = [
+    { key: 'inputName', header: 'Input Name' },
+    { key: 'dataType', header: 'Data Type' },
+    { key: 'defaultValue', header: 'Default Value' },
+    { key: 'actions', header: 'Actions' },
+  ];
+
+  return (
+    <DataTable
+      rows={data}
+      headers={headers}
+      render={({
+        rows,
+        headers,
+        getHeaderProps,
+        getRowProps,
+        getTableProps,
+        getTableContainerProps,
+      }) => (
+        <div {...getTableContainerProps()}>
+          <table {...getTableProps()} className="bx--data-table">
+            <thead>
+              <tr>
+                {headers.map((header) => (
+                  <th key={header.key} {...getHeaderProps({ header })}>
+                    {header.header}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row) => (
+                <tr key={row.id} {...getRowProps({ row })}>
+                  {headers.map((header) => (
+                    <td key={header.key}>{row[header.key]}</td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    />
+  );
+};
+
+export default InputParams;
diff --git a/app/javascript/components/automate-method-form/schemaHelper.js b/app/javascript/components/automate-method-form/schemaHelper.js
deleted file mode 100644
index 27aac283e7d..00000000000
--- a/app/javascript/components/automate-method-form/schemaHelper.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import { componentTypes } from '@@ddf';
-
-const typeField = () => ({
-  component: componentTypes.TEXT_FIELD,
-  id: 'type',
-  name: 'type',
-  label: __('Type'),
-  disabled: true,
-  initialValue: 'Ansible Tower Job Template',
-});
-
-const qualifiedNameField = () => ({
-  component: componentTypes.TEXT_FIELD,
-  id: 'fully-qualified-name',
-  name: 'fully-qualified-name',
-  label: __('Fully Qualified Name'),
-  disabled: true,
-  initialValue: '',
-});
-
-const nameField = () => ({
-  component: componentTypes.TEXT_FIELD,
-  id: 'name',
-  name: 'name',
-  label: __('Name'),
-  initialValue: '',
-});
-
-const displayNameField = () => ({
-  component: componentTypes.TEXT_FIELD,
-  id: 'displayName',
-  name: 'displayname',
-  label: __('Display Name'),
-  initialValue: '',
-});
-
-const providerField = () => ({
-  component: componentTypes.SELECT,
-  id: 'provider',
-  name: 'provider',
-  label: __('Provider'),
-  options: options,
-});
-
-const workflowProviderField = () => ({
-  component: componentTypes.SELECT,
-  id: 'workflowProvider',
-  name: 'workflowProvider',
-  label: __('Workflow Provider'),
-  options: options,
-});
-
-const hostValueField = () => ({
-  component: componentTypes.RADIO,
-  id: 'hostValue',
-  name: 'hostValue',
-  label: __('Hosts'),
-  options: [
-    { value: 'localhost', label: 'Localhost' },
-    { value: 'specify', label: 'Specify host values' },
-  ],
-});
-
-export const schemaHelper = () => ([
-  typeField(),
-  qualifiedNameField(),
-  nameField(),
-  displayNameField(),
-  providerField(),
-  workflowProviderField(),
-  hostValueField(),
-]);