diff --git a/app/javascript/components/automate-method-form/automate-method-code-mirror/index.jsx b/app/javascript/components/automate-method-form/automate-method-code-mirror/index.jsx
index 4c87a43077a9..1495f76f9439 100644
--- a/app/javascript/components/automate-method-form/automate-method-code-mirror/index.jsx
+++ b/app/javascript/components/automate-method-form/automate-method-code-mirror/index.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { Button } from 'carbon-components-react';
+import { Button, Accordion, AccordionItem } from 'carbon-components-react';
 import { Controlled as CodeMirror } from 'react-codemirror2';
 import { http } from '../../../http_api';
 import NotificationMessage from '../../notification-message';
@@ -38,29 +38,27 @@ const AutomateMethodCodeMirror = () => {
 
   return (
     <div className="automate-code-mirror custom-form-wrapper">
-      <div className="custom-form-title-wrapper">
-        <div className="custom-form-title">{__('Data')}</div>
-      </div>
-      <div className="custom-form-component-wrapper">
-        {
-          data.validation && <NotificationMessage type={data.validation.status ? 'success' : 'error'} message={data.validation.message} />
-        }
-        <CodeMirror
-          className="miq-codemirror miq-structured-list-code-mirror"
-          options={{
-            mode: 'ruby',
-            lineNumbers: true,
-            matchBrackets: true,
-            theme: 'eclipse',
-            viewportMargin: Infinity,
-            readOnly: false,
-          }}
-          onBeforeChange={(_editor, _data, value) => setData({ ...data, validation: undefined, editorContents: value })}
-          value={data.editorContents}
-        />
-        {renderValidateButton()}
-      </div>
-
+      <Accordion align="start" className="miq-custom-form-accordion">
+        <AccordionItem title={__('Data')} open>
+          {
+            data.validation && <NotificationMessage type={data.validation.status ? 'success' : 'error'} message={data.validation.message} />
+          }
+          <CodeMirror
+            className="miq-codemirror miq-structured-list-code-mirror"
+            options={{
+              mode: 'ruby',
+              lineNumbers: true,
+              matchBrackets: true,
+              theme: 'eclipse',
+              viewportMargin: Infinity,
+              readOnly: false,
+            }}
+            onBeforeChange={(_editor, _data, value) => setData({ ...data, validation: undefined, editorContents: value })}
+            value={data.editorContents}
+          />
+          {renderValidateButton()}
+        </AccordionItem>
+      </Accordion>
     </div>
   );
 };
diff --git a/app/javascript/components/automate-method-form/automate-method-input-parameter/automate-method-input-parameter-form.jsx b/app/javascript/components/automate-method-form/automate-method-input-parameter/automate-method-input-parameter-form.jsx
index 36b061068272..bdae78610120 100644
--- a/app/javascript/components/automate-method-form/automate-method-input-parameter/automate-method-input-parameter-form.jsx
+++ b/app/javascript/components/automate-method-form/automate-method-input-parameter/automate-method-input-parameter-form.jsx
@@ -7,12 +7,14 @@ import { InputParameterRecordActions } from './helper';
 import AutomateMethodContext from '../automate-method-context';
 
 const AutomateMethodInputParameterForm = ({ modalStatus }) => {
+  /** Context to access data from parent component */
   const { formData, updateInputParameter } = useContext(AutomateMethodContext);
 
   const [data, setData] = useState({
     initialValues: undefined,
   });
 
+  /** Effect hook to update initial values when selectedId changes */
   useEffect(() => {
     const { selectedId, items } = formData.inputParameter;
     if (selectedId) {
diff --git a/app/javascript/components/automate-method-form/automate-method-input-parameter/helper.js b/app/javascript/components/automate-method-form/automate-method-input-parameter/helper.js
index dd5debfb075a..571093133dbc 100644
--- a/app/javascript/components/automate-method-form/automate-method-input-parameter/helper.js
+++ b/app/javascript/components/automate-method-form/automate-method-input-parameter/helper.js
@@ -30,6 +30,7 @@ const deleteInputParameterButton = () => ({
   callback: InputParameterButtonActions.DELETE,
 });
 
+/** Input parameter data for table  */
 export const reformatList = (items) => items.map((item, index) => ({
   ...item,
   id: index.toString(),
@@ -45,6 +46,7 @@ export const headers = [
   { key: 'delete', header: __('Delete') },
 ];
 
+/* Function to handle the action buttons  */
 export const handleInputParameterUpdate = (actionType, data, formData) => {
   const { inputParameter } = formData;
 
@@ -78,3 +80,29 @@ export const handleInputParameterUpdate = (actionType, data, formData) => {
 
   return { ...formData.inputParameter };
 };
+
+/** Helper function to get provider details and restructure its options */
+export const initialState = {
+  manager_id: null,
+};
+
+export const reducer = (state, action) => {
+  switch (action.type) {
+    case 'SET_MANAGER_ID':
+      return {
+        ...state,
+        manager_id: action.payload,
+      };
+    default:
+      return state;
+  }
+};
+
+export const handleManagerChange = (formData, setFormData, dispatch) => (managerId) => {
+  dispatch({ type: 'SET_MANAGER_ID', payload: managerId });
+  setFormData({
+    ...formData,
+    // eslint-disable-next-line radix
+    manager_id: parseInt(managerId),
+  });
+};
diff --git a/app/javascript/components/automate-method-form/automate-method-input-parameter/index.jsx b/app/javascript/components/automate-method-form/automate-method-input-parameter/index.jsx
index 7cdbff68d6b4..75c462584678 100644
--- a/app/javascript/components/automate-method-form/automate-method-input-parameter/index.jsx
+++ b/app/javascript/components/automate-method-form/automate-method-input-parameter/index.jsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Button } from 'carbon-components-react';
+import { Button, Accordion, AccordionItem } from 'carbon-components-react';
 import {
   InputParameterButtonActions, InputParameterRecordActions, headers, reformatList,
 } from './helper';
@@ -8,8 +8,10 @@ import NotificationMessage from '../../notification-message';
 import AutomateMethodContext from '../automate-method-context';
 
 const AutomateMethodInputParameter = () => {
+  /** Context to access data from parent component */
   const { formData, updateInputParameter } = useContext(AutomateMethodContext);
 
+  /** Input parameter selection handler */
   const onSelect = (item) => {
     if (item && item.callbackAction) {
       switch (item.callbackAction) {
@@ -35,29 +37,28 @@ const AutomateMethodInputParameter = () => {
 
   return (
     <div className="automate-custom-form custom-form-wrapper">
-      <div className="custom-form-title-wrapper">
-        <div className="custom-form-title">{__('Input Parameters')}</div>
-      </div>
-      <div className="custom-form-component-wrapper">
-        {renderAddButton()}
-        {
-          formData.inputParameter.items.length > 0
-            ? (
-              <MiqDataTable
-                headers={headers}
-                rows={reformatList(formData.inputParameter.items)}
-                onCellClick={(selectedRow) => onSelect(selectedRow)}
-                mode="button-group-list"
-              />
-            )
-            : (
-              <>
-                <br />
-                <NotificationMessage type="info" message={__('Input parameters are not available.')} />
-              </>
-            )
-        }
-      </div>
+      <Accordion align="start" className="miq-custom-form-accordion">
+        <AccordionItem title={__('Input Parameters')} open>
+          {renderAddButton()}
+          {
+            formData.inputParameter.items.length > 0
+              ? (
+                <MiqDataTable
+                  headers={headers}
+                  rows={reformatList(formData.inputParameter.items)}
+                  onCellClick={(selectedRow) => onSelect(selectedRow)}
+                  mode="button-group-list"
+                />
+              )
+              : (
+                <>
+                  <br />
+                  <NotificationMessage type="info" message={__('Input parameters are not available.')} />
+                </>
+              )
+          }
+        </AccordionItem>
+      </Accordion>
     </div>
   );
 };
diff --git a/app/javascript/components/automate-method-form/index.jsx b/app/javascript/components/automate-method-form/index.jsx
index 52c37a7b7199..eeaf9198b85b 100644
--- a/app/javascript/components/automate-method-form/index.jsx
+++ b/app/javascript/components/automate-method-form/index.jsx
@@ -23,7 +23,7 @@ const AutomateMethodForm = ({ availableLocations, levels }) => {
     loading: false,
     apiResponse: undefined,
     selectedType: undefined,
-    providerId: undefined,
+    manager_id: undefined,
     workflowTemplates: undefined,
     levels,
     codeEditor: undefined,
@@ -34,6 +34,7 @@ const AutomateMethodForm = ({ availableLocations, levels }) => {
     },
   });
 
+  /** Fetching data based on selected type */
   useEffect(() => {
     if (formData.selectedType && formData.selectedType.id) {
       http.get(`/miq_ae_class/method_form_fields/new?location=${formData.selectedType.id}`).then((apiResponse) => {
@@ -46,10 +47,11 @@ const AutomateMethodForm = ({ availableLocations, levels }) => {
     }
   }, [formData.selectedType]);
 
+  /** Fetching templates based on manager_id */
   useEffect(() => {
-    if (formData.providerId) {
+    if (formData.manager_id) {
       const collectionClass = 'collection_class=ManageIQ::Providers::AnsibleTower::AutomationManager::ConfigurationScript';
-      const filter = `filter[]=manager_id=${formData.providerId}`;
+      const filter = `filter[]=manager_id=${formData.manager_id}`;
       const sort = `sort_by=name&sort_order=asc`;
       const url = `/api/configuration_scripts?expand=resources&${collectionClass}&${filter}&${sort}`;
       API.get(url).then((response) => {
@@ -66,8 +68,9 @@ const AutomateMethodForm = ({ availableLocations, levels }) => {
         workflowTemplates: undefined,
       });
     }
-  }, [formData.providerId]);
+  }, [formData.manager_id]);
 
+  /** Function to update input parameters */
   const updateInputParameter = (actionType, data) => {
     setFormData({
       ...formData,
@@ -75,6 +78,7 @@ const AutomateMethodForm = ({ availableLocations, levels }) => {
     });
   };
 
+  /** Function to render code editor */
   const updateCodeEditor = (data) => {
     setFormData({
       ...formData,
@@ -82,6 +86,15 @@ const AutomateMethodForm = ({ availableLocations, levels }) => {
     });
   };
 
+  const onSubmit = (values) => {
+    let extraVars;
+    if (formData.inputParameter.items) {
+      extraVars = formData.inputParameter.items.map((item) => Object.values(item));
+    }
+    console.log({ ...values, extra_vars: extraVars });
+  };
+
+  /** Function to render automate types dropdown */
   const renderAutomateTypes = () => (
     <div className="mainClass">
       <h3>{__('Main Info')}</h3>
@@ -100,6 +113,7 @@ const AutomateMethodForm = ({ availableLocations, levels }) => {
     </div>
   );
 
+  /** Function to render input parameter modal */
   const renderInputParameterModal = ({ inputParameter }) => (
     <AutomateMethodInputParameterForm
       recordId={formData.inputParameter.selectedId}
@@ -119,8 +133,10 @@ const AutomateMethodForm = ({ availableLocations, levels }) => {
         formData.selectedType && (
           <AutomateMethodContext.Provider value={{ formData, updateInputParameter, updateCodeEditor }}>
             <MiqFormRenderer
+              initialValues={formData}
               schema={createSchema(formData, setFormData)}
               componentMapper={mapper}
+              onSubmit={onSubmit}
             />
             {
               formData.inputParameter.modal && renderInputParameterModal(formData)
diff --git a/app/javascript/components/automate-method-form/schema.config.js b/app/javascript/components/automate-method-form/schema.config.js
index 8153e0fdaa5a..2a305f397f96 100644
--- a/app/javascript/components/automate-method-form/schema.config.js
+++ b/app/javascript/components/automate-method-form/schema.config.js
@@ -5,21 +5,24 @@ const dropdownOptions = (items) => items.map((item) => ({ label: item.name, valu
 export const ansibleFields = (formData, setFormData) => ([
   {
     component: componentTypes.SELECT,
-    id: 'provider',
-    name: 'provider',
+    id: 'manager_id',
+    name: 'manager_id',
     label: __('Provider'),
     placeholder: __('<Choose>'),
     includeEmpty: true,
     options: formData.apiResponse && formData.apiResponse.managers ? dropdownOptions(formData.apiResponse.managers) : [],
-    onChange: (providerId) => setFormData({
-      ...formData,
-      providerId,
-    }),
+    onChange: (managerId) => {
+      setFormData({
+        ...formData,
+        // eslint-disable-next-line radix
+        manager_id: parseInt(managerId),
+      });
+    },
   },
   {
     component: componentTypes.SELECT,
-    id: 'workflowTemplate',
-    name: 'workflowTemplate',
+    id: 'ansible_template_id',
+    name: 'ansible_template_id',
     label: __('Workflow Template'),
     placeholder: __('<Choose>'),
     includeEmpty: true,
@@ -32,14 +35,14 @@ export const ansibleFields = (formData, setFormData) => ([
 const ansibleFieldsCommon = ({ levels }) => ([
   {
     component: componentTypes.TEXT_FIELD,
-    id: 'maxttl',
-    name: 'maxttl',
+    id: 'execution_ttl',
+    name: 'execution_ttl',
     label: __('Max TTL(mins)'),
   },
   {
     component: componentTypes.SELECT,
-    id: 'loggingOutput',
-    name: 'loggingOutput',
+    id: 'log_output',
+    name: 'log_output',
     label: __('Logging Output'),
     options: Object.entries(levels.output).map(([id, name]) => ({ label: name, value: id })),
   },
@@ -47,10 +50,10 @@ const ansibleFieldsCommon = ({ levels }) => ([
 
 const additionalFields = [
   {
-    id: 'hostValue',
+    id: 'host',
     component: componentTypes.RADIO,
     label: __('Hosts'),
-    name: 'hostValue',
+    name: 'host',
     options: [
       { value: 'localhost', label: 'Localhost' },
       { value: 'specify', label: 'Specify host values' },
@@ -58,10 +61,10 @@ const additionalFields = [
   },
   {
     component: componentTypes.TEXTAREA,
-    name: 'specify-details',
+    name: 'provisioning_inventory',
     label: __('Specify details'),
     condition: {
-      and: [{ when: 'hostValue', is: 'specify' }],
+      and: [{ when: 'host', is: 'specify' }],
     },
   },
 ];
@@ -69,8 +72,8 @@ const additionalFields = [
 const builtInFields = [
   {
     component: componentTypes.TEXT_FIELD,
-    id: 'built-in',
-    name: 'built-in',
+    id: 'cls_method_data',
+    name: 'cls_method_data',
     label: __('Builtin name'),
     helperText: 'Optional, if not specified, method name is used',
   },
@@ -79,8 +82,8 @@ const builtInFields = [
 const expressionFields = [
   {
     component: componentTypes.SELECT,
-    id: 'expressionObject',
-    name: 'expressionObject',
+    id: 'cls_exp_object',
+    name: 'cls_exp_object',
     label: __('Expression Object'),
     options: [],
   },
@@ -163,7 +166,7 @@ const verbosityField = ({ levels }) => ([
 
 export const schemaConfig = (formData, setFormData) => ({
   ansibleJobTemplate: [...ansibleFields(formData, setFormData), ...additionalFields, ...(ansibleFieldsCommon(formData))],
-  ansibleWorkflowTemplate: [...ansibleFields(setFormData), ...ansibleFieldsCommon(formData)],
+  ansibleWorkflowTemplate: [...ansibleFields(formData, setFormData), ...ansibleFieldsCommon(formData)],
   builtIn: [...builtInFields],
   expression: [...expressionFields],
   playbook: [...playBookFields, ...additionalFields, ...ansibleFieldsCommon(formData), ...verbosityField(formData)],
diff --git a/app/javascript/components/automate-method-form/schema.js b/app/javascript/components/automate-method-form/schema.js
index dee05ec56597..03317b7496b6 100644
--- a/app/javascript/components/automate-method-form/schema.js
+++ b/app/javascript/components/automate-method-form/schema.js
@@ -24,8 +24,8 @@ const commonFields = [
   },
   {
     component: componentTypes.TEXT_FIELD,
-    id: 'displayName',
-    name: 'displayname',
+    id: 'display_name',
+    name: 'display_name',
     label: __('Display Name'),
     initialValue: '',
   },
diff --git a/app/javascript/components/automate-method-form/style.scss b/app/javascript/components/automate-method-form/style.scss
index 8979bcce8a6e..5542f8827fab 100644
--- a/app/javascript/components/automate-method-form/style.scss
+++ b/app/javascript/components/automate-method-form/style.scss
@@ -4,25 +4,29 @@
   display: flex;
   flex-direction: column;
 
-  .custom-form-title-wrapper {
-    background: lightgray;
-    display: flex;
-    flex-direction: row;
+  .miq-custom-form-accordion
+  {
+    border: 1px solid #e0e0e0;
 
-    .custom-form-title {
-      display: flex;
-      flex-grow: 1;
-      font-size: 16px;
-      padding: 8px 10px;
+    li button.bx--accordion__heading {
+      background: #e0e0e0;
     }
-  }
+    .bx--accordion__item:last-child{
+      border: 0;
+    }
+
+    .bx--accordion__content {
+      padding: 20px;
+      margin: 0;
 
-  .custom-form-component-wrapper {
-    padding: 10px;
+      .custom-form-buttons {
+        display: flex;
+        justify-content: flex-end;
+      }
 
-    .custom-form-buttons {
-      display: flex;
-      justify-content: flex-end;
+      .ae-inline-methods-notification {
+        margin-top: 20px;
+      }
     }
   }
 }