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..ffc17622b8 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 = () => {
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        if (!values.users) {
+          delete values.users;
+        }
+        if (values.deviceGroups === 'NONE') {
+          delete values.deviceGroups;
+        }
+        Object.assign(this.props.newPolicyPayload, 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,7 @@ 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={this.onHandleContinue}>
               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..d73a62c163 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 = () => {
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        console.log(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,7 @@ 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={this.onHandleContinue}>
               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..10726d2b4d 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,23 @@ class PublishDevices extends React.Component {
     this.config = this.props.context;
   }
 
+  onClickSavePolicy = (event, isPublish) => {
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        let policyProfile = Object.assign(this.props.policyProfile, {
+          profileName: values.policyName,
+        });
+        Object.assign(values, { profile: policyProfile });
+        Object.assign(this.props.newPolicyPayload, values);
+        if (isPublish) {
+          Object.assign(this.props.newPolicyPayload, {
+            active: isPublish,
+          });
+        }
+      }
+    });
+  };
+
   render() {
     const { getFieldDecorator } = this.props.form;
     return (
@@ -51,10 +68,16 @@ 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={() => this.onClickSavePolicy(true)}
+            >
               Save & Publish
             </Button>
-            <Button type="primary">Save</Button>
+            <Button type="primary" onClick={this.onClickSavePolicy}>
+              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..d790408422 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: [],
@@ -41,6 +37,10 @@ class SelectPlatform extends React.Component {
 
   onClickCard = (e, type) => {
     this.props.getPolicyConfigJson(type);
+    let deviceType = {
+      deviceType: type,
+    };
+    Object.assign(this.props.policyProfile, deviceType);
   };
 
   // fetch data from api
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..199a14ba0a 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,20 @@ class SelectPolicyType extends React.Component {
     this.fetchPolicies();
   }
 
+  // generate payload using Select policy type
+  onHandleContinue = () => {
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        if (values.correctiveActions === 'NONE') {
+          values.correctiveActions = [];
+        }
+        Object.assign(this.props.newPolicyPayload, values);
+      }
+      console.log('aaaaaaa');
+    });
+    this.props.getNextStep();
+  };
+
   fetchPolicies = () => {
     let apiUrl =
       window.location.origin +
@@ -142,7 +156,7 @@ 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={this.onHandleContinue}>
               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..2140bd4059 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,6 +35,8 @@ class AddPolicy extends React.Component {
       currentStepIndex: 0,
       isLoading: false,
       policyUIConfigurationsList: [],
+      newPolicyPayload: { compliance: 'enforce' },
+      policyProfile: {},
     };
   }
 
@@ -107,6 +109,8 @@ class AddPolicy extends React.Component {
               >
                 <SelectPlatform
                   getPolicyConfigJson={this.getPolicyConfigJson}
+                  newPolicyPayload={this.state.newPolicyPayload}
+                  policyProfile={this.state.policyProfile}
                 />
               </div>
               <div
@@ -114,6 +118,7 @@ class AddPolicy extends React.Component {
               >
                 <ConfigureProfile
                   policyUIConfigurationsList={policyUIConfigurationsList}
+                  policyProfile={this.state.policyProfile}
                   getPrevStep={this.getPrevStep}
                   getNextStep={this.getNextStep}
                 />
@@ -122,6 +127,7 @@ class AddPolicy extends React.Component {
                 style={{ display: currentStepIndex === 2 ? 'unset' : 'none' }}
               >
                 <SelectPolicyType
+                  newPolicyPayload={this.state.newPolicyPayload}
                   getPrevStep={this.getPrevStep}
                   getNextStep={this.getNextStep}
                 />
@@ -130,6 +136,7 @@ class AddPolicy extends React.Component {
                 style={{ display: currentStepIndex === 3 ? 'unset' : 'none' }}
               >
                 <AssignGroups
+                  newPolicyPayload={this.state.newPolicyPayload}
                   getPrevStep={this.getPrevStep}
                   getNextStep={this.getNextStep}
                 />
@@ -137,7 +144,11 @@ class AddPolicy extends React.Component {
               <div
                 style={{ display: currentStepIndex === 4 ? 'unset' : 'none' }}
               >
-                <PublishDevices getPrevStep={this.getPrevStep} />
+                <PublishDevices
+                  newPolicyPayload={this.state.newPolicyPayload}
+                  policyProfile={this.state.policyProfile}
+                  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;
+    }
+}
+