diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/AssignGroups/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/AssignGroups/index.js
index 38df0b9605..533d23ab11 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/AssignGroups/index.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/AssignGroups/index.js
@@ -48,6 +48,22 @@ class AssignGroups extends React.Component {
     }
   };
 
+  // generate payload by adding Assign Groups
+  onHandleContinue = (e, formName) => {
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        if (!values.users) {
+          delete values.users;
+        }
+        if (values.deviceGroups === 'NONE') {
+          delete values.deviceGroups;
+        }
+        this.props.getPolicyPayloadData(formName, values);
+        this.props.getNextStep();
+      }
+    });
+  };
+
   getRolesList = () => {
     let apiURL =
       window.location.origin +
@@ -164,7 +180,9 @@ class AssignGroups extends React.Component {
             style={{ display: 'block' }}
           >
             <Form.Item>
-              {getFieldDecorator('roles', {})(
+              {getFieldDecorator('roles', {
+                initialValue: 'ANY',
+              })(
                 <Select
                   mode="multiple"
                   style={{ width: '100%' }}
@@ -203,7 +221,9 @@ class AssignGroups extends React.Component {
           </div>
         </div>
         <Form.Item label={'Select Groups'} style={{ display: 'block' }}>
-          {getFieldDecorator('deviceGroups', {})(
+          {getFieldDecorator('deviceGroups', {
+            initialValue: 'NONE',
+          })(
             <Select mode="multiple" style={{ width: '100%' }}>
               <Option value={'NONE'}>NONE</Option>
               {this.state.groups.map(group => (
@@ -219,7 +239,10 @@ class AssignGroups extends React.Component {
             <Button style={{ marginRight: 8 }} onClick={this.props.getPrevStep}>
               Back
             </Button>
-            <Button type="primary" onClick={this.props.getNextStep}>
+            <Button
+              type="primary"
+              onClick={e => this.onHandleContinue(e, 'groupData')}
+            >
               Continue
             </Button>
           </div>
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/ConfigureProfile/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/ConfigureProfile/index.js
index a17ad5d6a0..7d0d45c27c 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/ConfigureProfile/index.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/ConfigureProfile/index.js
@@ -295,6 +295,16 @@ class ConfigureProfile extends React.Component {
     return columns;
   };
 
+  // generate payload by adding policy configurations
+  onHandleContinue = (e, formname) => {
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        this.props.getPolicyPayloadData(formname, values);
+        this.props.getNextStep();
+      }
+    });
+  };
+
   // generate form items
   getPanelItems = panel => {
     const { getFieldDecorator } = this.props.form;
@@ -710,9 +720,24 @@ class ConfigureProfile extends React.Component {
                             </div>
                           }
                         >
-                          <div>
-                            <Form>{this.getPanelItems(panel.panelItem)}</Form>
-                          </div>
+                          {panel.hasOwnProperty('panelItem') && (
+                            <div>
+                              <Form>{this.getPanelItems(panel.panelItem)}</Form>
+                            </div>
+                          )}
+                          {panel.hasOwnProperty('subFormLists') && (
+                            <div>
+                              {Object.values(panel.subFormLists).map(
+                                (form, i) => {
+                                  return (
+                                    <Form key={i}>
+                                      {this.getPanelItems(form.panelItem)}
+                                    </Form>
+                                  );
+                                },
+                              )}
+                            </div>
+                          )}
                         </Collapse.Panel>
                       </Collapse>
                     </div>
@@ -727,7 +752,10 @@ class ConfigureProfile extends React.Component {
             <Button style={{ marginRight: 8 }} onClick={this.props.getPrevStep}>
               Back
             </Button>
-            <Button type="primary" onClick={this.props.getNextStep}>
+            <Button
+              type="primary"
+              onClick={e => this.onHandleContinue(e, 'configureProfileData')}
+            >
               Continue
             </Button>
           </div>
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/PublishDevices/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/PublishDevices/index.js
index 8075d5789c..af7de28dd4 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/PublishDevices/index.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/PublishDevices/index.js
@@ -26,6 +26,17 @@ class PublishDevices extends React.Component {
     this.config = this.props.context;
   }
 
+  onClickSavePolicy = (event, isPublish, formName) => {
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        if (isPublish) {
+          Object.assign(values, { active: isPublish });
+        }
+        this.props.getPolicyPayloadData(formName, values);
+      }
+    });
+  };
+
   render() {
     const { getFieldDecorator } = this.props.form;
     return (
@@ -51,10 +62,23 @@ class PublishDevices extends React.Component {
             <Button style={{ marginRight: 8 }} onClick={this.props.getPrevStep}>
               Back
             </Button>
-            <Button type="primary" style={{ marginRight: 8 }}>
+            <Button
+              type="primary"
+              style={{ marginRight: 8 }}
+              onClick={e =>
+                this.onClickSavePolicy(e, true, 'publishDevicesData')
+              }
+            >
               Save & Publish
             </Button>
-            <Button type="primary">Save</Button>
+            <Button
+              type="primary"
+              onClick={e =>
+                this.onClickSavePolicy(e, false, 'publishDevicesData')
+              }
+            >
+              Save
+            </Button>
           </div>
         </Col>
       </div>
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/SelectPlatform/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/SelectPlatform/index.js
index 4a335dfed1..cb67f39898 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/SelectPlatform/index.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/SelectPlatform/index.js
@@ -19,15 +19,11 @@
 import React from 'react';
 import axios from 'axios';
 import { Card, Col, Icon, message, notification, Row } from 'antd';
-import TimeAgo from 'javascript-time-ago';
-// Load locale-specific relative date/time formatting rules.
-import en from 'javascript-time-ago/locale/en';
 import { withConfigContext } from '../../../../../../../../components/ConfigContext';
 
 class SelectPlatform extends React.Component {
   constructor(props) {
     super(props);
-    TimeAgo.addLocale(en);
     this.config = this.props.context;
     this.state = {
       data: [],
@@ -39,8 +35,12 @@ class SelectPlatform extends React.Component {
     this.getDeviceTypes();
   }
 
-  onClickCard = (e, type) => {
+  onClickCard = (e, type, formname) => {
     this.props.getPolicyConfigJson(type);
+    let deviceType = {
+      deviceType: type,
+    };
+    this.props.getPolicyPayloadData(formname, deviceType);
   };
 
   // fetch data from api
@@ -91,7 +91,9 @@ class SelectPlatform extends React.Component {
             size="default"
             style={{ width: 150 }}
             bordered={true}
-            onClick={e => this.onClickCard(e, data.name)}
+            onClick={e =>
+              this.onClickCard(e, data.name, 'selectedPlatformData')
+            }
             cover={
               <Icon
                 type="android"
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/SelectPolicyType/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/SelectPolicyType/index.js
index 88d2b79134..7c0c66be17 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/SelectPolicyType/index.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/SelectPolicyType/index.js
@@ -44,6 +44,19 @@ class SelectPolicyType extends React.Component {
     this.fetchPolicies();
   }
 
+  // generate payload using Select policy type
+  onHandleContinue = (e, formName) => {
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        if (values.correctiveActions === 'NONE') {
+          values.correctiveActions = [];
+        }
+        this.props.getPolicyPayloadData(formName, values);
+        this.props.getNextStep();
+      }
+    });
+  };
+
   fetchPolicies = () => {
     let apiUrl =
       window.location.origin +
@@ -142,7 +155,10 @@ class SelectPolicyType extends React.Component {
             <Button style={{ marginRight: 8 }} onClick={this.props.getPrevStep}>
               Back
             </Button>
-            <Button type="primary" onClick={this.props.getNextStep}>
+            <Button
+              type="primary"
+              onClick={e => this.onHandleContinue(e, 'policyTypeData')}
+            >
               Continue
             </Button>
           </div>
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/index.js
index 082aaaec85..908c110cf0 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/index.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/index.js
@@ -35,9 +35,47 @@ class AddPolicy extends React.Component {
       currentStepIndex: 0,
       isLoading: false,
       policyUIConfigurationsList: [],
+      newPolicyPayload: { compliance: 'enforce' },
+      policyProfile: {},
+      payloadData: {},
     };
   }
 
+  getPolicyPayloadData = (dataName, dataValue) => {
+    Object.defineProperty(this.state.payloadData, dataName, {
+      value: dataValue,
+      writable: true,
+    });
+    if (dataName === 'publishDevicesData') {
+      this.createPayload();
+    }
+  };
+
+  createPayload = () => {
+    const { newPolicyPayload } = this.state;
+    const {
+      publishDevicesData,
+      selectedPlatformData,
+      policyProfile,
+      policyTypeData,
+      groupData,
+    } = this.state.payloadData;
+    let profile = {
+      policyName: publishDevicesData.policyName,
+      devicetype: selectedPlatformData.deviceType,
+    };
+
+    let payload = Object.assign(
+      newPolicyPayload,
+      publishDevicesData,
+      policyProfile,
+      policyTypeData,
+      groupData,
+      { profile: profile },
+    );
+    console.log(payload);
+  };
+
   getPolicyConfigJson = type => {
     this.setState({ isLoading: true });
 
@@ -107,6 +145,7 @@ class AddPolicy extends React.Component {
               >
                 <SelectPlatform
                   getPolicyConfigJson={this.getPolicyConfigJson}
+                  getPolicyPayloadData={this.getPolicyPayloadData}
                 />
               </div>
               <div
@@ -114,6 +153,7 @@ class AddPolicy extends React.Component {
               >
                 <ConfigureProfile
                   policyUIConfigurationsList={policyUIConfigurationsList}
+                  getPolicyPayloadData={this.getPolicyPayloadData}
                   getPrevStep={this.getPrevStep}
                   getNextStep={this.getNextStep}
                 />
@@ -122,6 +162,7 @@ class AddPolicy extends React.Component {
                 style={{ display: currentStepIndex === 2 ? 'unset' : 'none' }}
               >
                 <SelectPolicyType
+                  getPolicyPayloadData={this.getPolicyPayloadData}
                   getPrevStep={this.getPrevStep}
                   getNextStep={this.getNextStep}
                 />
@@ -130,6 +171,7 @@ class AddPolicy extends React.Component {
                 style={{ display: currentStepIndex === 3 ? 'unset' : 'none' }}
               >
                 <AssignGroups
+                  getPolicyPayloadData={this.getPolicyPayloadData}
                   getPrevStep={this.getPrevStep}
                   getNextStep={this.getNextStep}
                 />
@@ -137,7 +179,10 @@ class AddPolicy extends React.Component {
               <div
                 style={{ display: currentStepIndex === 4 ? 'unset' : 'none' }}
               >
-                <PublishDevices getPrevStep={this.getPrevStep} />
+                <PublishDevices
+                  getPolicyPayloadData={this.getPolicyPayloadData}
+                  getPrevStep={this.getPrevStep}
+                />
               </div>
             </Card>
           </Col>
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.extensions/src/main/java/org/wso2/carbon/device/mgt/extensions/device/type/template/config/DataPanel.java b/components/device-mgt/org.wso2.carbon.device.mgt.extensions/src/main/java/org/wso2/carbon/device/mgt/extensions/device/type/template/config/DataPanel.java
index efb9fe2edb..2ab613f523 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.extensions/src/main/java/org/wso2/carbon/device/mgt/extensions/device/type/template/config/DataPanel.java
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.extensions/src/main/java/org/wso2/carbon/device/mgt/extensions/device/type/template/config/DataPanel.java
@@ -67,6 +67,10 @@ public class DataPanel {
     @XmlElement(name = "PanelItem")
     private List<PanelItem> panelItem;
 
+    @XmlElementWrapper(name = "SubFormsList")
+    @XmlElement(name = "SubForm")
+    private List<SubFormList> subFormLists;
+
     public String getPaneId() {
         return panelId;
     }
@@ -99,4 +103,11 @@ public class DataPanel {
         this.panelItem = panelItem;
     }
 
+    public List<SubFormList> getSubPanelLists() {
+        return subFormLists;
+    }
+
+    public void setSubPanelLists(List<SubFormList> subFormLists) {
+        this.subFormLists = subFormLists;
+    }
 }
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.extensions/src/main/java/org/wso2/carbon/device/mgt/extensions/device/type/template/config/SubFormList.java b/components/device-mgt/org.wso2.carbon.device.mgt.extensions/src/main/java/org/wso2/carbon/device/mgt/extensions/device/type/template/config/SubFormList.java
new file mode 100644
index 0000000000..d4a020e823
--- /dev/null
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.extensions/src/main/java/org/wso2/carbon/device/mgt/extensions/device/type/template/config/SubFormList.java
@@ -0,0 +1,24 @@
+package org.wso2.carbon.device.mgt.extensions.device.type.template.config;
+
+import javax.xml.bind.annotation.XmlAttribute;
+import javax.xml.bind.annotation.XmlElement;
+import javax.xml.bind.annotation.XmlElementWrapper;
+import java.util.List;
+
+public class SubFormList {
+    @XmlAttribute(name = "id", required = true)
+    protected String id;
+
+    @XmlElementWrapper(name = "PanelItems")
+    @XmlElement(name = "PanelItem")
+    private List<PanelItem> panelItem;
+
+    public List<PanelItem> getPanelItemList() {
+        return panelItem;
+    }
+
+    public void setPanelItemList(List<PanelItem> panelItem) {
+        this.panelItem = panelItem;
+    }
+}
+