diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js
index 0447bd0213..485ff30e29 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js
@@ -13,7 +13,8 @@ const mapDispatchToProps = dispatch => ({
 const mapStateToProps = state => {
     return {
         lifecycle: state.lifecycle,
-        currentStatus : state.release.currentStatus.toUpperCase()
+        currentStatus : state.release.currentStatus.toUpperCase(),
+        uuid : state.release.uuid
     };
 };
 
@@ -38,9 +39,9 @@ class ConnectedLifeCycle extends React.Component {
         if (lifecycle != null) {
             return (
                 <div>
-                    <LifecycleModal currentStatus={this.props.currentStatus}/>
+                    <LifecycleModal uuid={this.props.uuid} currentStatus={this.props.currentStatus}/>
                     <Button onClick={this.openModal}>aaaa</Button>
-                    <LifeCycleGraph currentStatus={this.props.currentStatus} lifecycle={this.props.lifecycle}/>
+                    <LifeCycleGraph openModel={this.openModal} currentStatus={this.props.currentStatus} lifecycle={this.props.lifecycle}/>
                 </div>
             );
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js
index fa7ae3de7e..dd22c00eb4 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js
@@ -1,6 +1,11 @@
 import React from "react";
 import {Graph} from 'react-d3-graph';
+import {connect} from "react-redux";
+import {getLifecycle, openLifecycleModal} from "../../../js/actions";
 
+const mapDispatchToProps = dispatch => ({
+    openLifecycleModal: (nextState) => dispatch(openLifecycleModal(nextState))
+});
 
 // the graph configuration, you only need to pass down properties
 // that you want to override, otherwise default ones will be used
@@ -36,11 +41,23 @@ const myConfig = {
     }
 };
 
-const onClickNode = function(nodeId) {
-    window.alert(`Clicked node ${nodeId}`);
-};
 
-class LifeCycleGraph extends React.Component {
+
+class ConnectedLifeCycleGraph extends React.Component {
+
+
+    constructor(props){
+        super(props);
+        this.nextStates = null;
+        this.onClickNode = this.onClickNode.bind(this);
+    }
+
+    onClickNode = function(nodeId) {
+        const nextStates = this.nextStates;
+        if(nextStates.includes(nodeId)){
+            this.props.openLifecycleModal(nodeId);
+        }
+    };
 
     render() {
 // graph payload (with minimalist structure)
@@ -48,7 +65,7 @@ class LifeCycleGraph extends React.Component {
         const lifecycle = this.props.lifecycle;
         const nodes = [];
         const links = [];
-        const nextStates = lifecycle[this.props.currentStatus].proceedingStates;
+        this.nextStates = lifecycle[this.props.currentStatus].proceedingStates;
 
 
         Object.keys(lifecycle).forEach((stateName) => {
@@ -56,7 +73,7 @@ class LifeCycleGraph extends React.Component {
             let color = "rgb(83, 92, 104)";
             if (stateName === this.props.currentStatus) {
                 color = "rgb(39, 174, 96)";
-            } else if (nextStates.includes(stateName)) {
+            } else if (this.nextStates.includes(stateName)) {
                 color = "rgb(0,192,255)";
             }
             let node = {
@@ -67,7 +84,6 @@ class LifeCycleGraph extends React.Component {
 
             //todo: remove checking property
             if (state.hasOwnProperty("proceedingStates")) {
-
                 state.proceedingStates.forEach((proceedingState) => {
                     let link = {
                         source: stateName,
@@ -90,12 +106,12 @@ class LifeCycleGraph extends React.Component {
                     id="graph-id" // id is mandatory, if no id is defined rd3g will throw an error
                     data={data}
                     config={myConfig}
-                    onClickNode={onClickNode}
+                    onClickNode={this.onClickNode}
                 />
             </div>
         );
     }
 }
 
-
+const LifeCycleGraph = connect(null,mapDispatchToProps)(ConnectedLifeCycleGraph);
 export default LifeCycleGraph;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifecycleModal.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifecycleModal.js
index fa1e719450..e19510bad6 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifecycleModal.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifecycleModal.js
@@ -1,7 +1,7 @@
 import React from "react";
-import {Modal, Typography,Icon,Input} from 'antd';
+import {Modal, Typography, Icon, Input, Form, Checkbox, Button} from 'antd';
 import {connect} from 'react-redux';
-import {closeLifecycleModal} from "../../../js/actions";
+import {closeLifecycleModal, updateLifecycleState} from "../../../js/actions";
 
 const { TextArea } = Input;
 const { Title } = Typography;
@@ -15,7 +15,8 @@ const mapStateToProps = state => {
 };
 
 const mapDispatchToProps = dispatch => ({
-    closeLifecycleModal : () => dispatch(closeLifecycleModal())
+    closeLifecycleModal : () => dispatch(closeLifecycleModal()),
+    updateLifecycleState : (uuid, nextState, reason) => dispatch(updateLifecycleState(uuid, nextState, reason))
 });
 
 const Text = Typography;
@@ -24,6 +25,7 @@ class ConnectedLifecycleModal extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
+            loading: false,
             visible: false
         };
     }
@@ -46,14 +48,23 @@ class ConnectedLifecycleModal extends React.Component {
         this.setState({
             visible: false,
         });
+        this.props.closeLifecycleModal();
     };
 
     handleCancel = (e) => {
         this.setState({
             visible: false,
+            loading: false
         });
         this.props.closeLifecycleModal();
     };
+    handleSubmit = event => {
+        this.setState({ loading: true });
+        event.preventDefault();
+        console.log(this.reason);
+        console.log("uuid", this.props.uuid);
+        this.props.updateLifecycleState(this.props.uuid, this.props.nextState, this.reason.state.value)
+    };
 
     render() {
         if (this.props.nextState != null) {
@@ -63,12 +74,31 @@ class ConnectedLifecycleModal extends React.Component {
                     <Modal
                         title="Change State"
                         visible={this.state.visible}
-                        onOk={this.handleOk}
                         onCancel={this.handleCancel}
+                        footer={null}
                     >
                         <Title level={4}>{this.props.currentStatus} <Icon type="arrow-right" /> {nextState}</Title>
                         <p>Reason:</p>
-                        <TextArea placeholder="Please enter the reason..." autosize />
+                        <form onSubmit={this.handleSubmit}>
+                            <Form.Item>
+                                <label htmlFor="username">username</label>
+
+                                <Input placeholder="Basic usage"  ref={(input) => this.reason = input}/>
+                            </Form.Item>
+                            {/*<Form.Item>*/}
+                            {/*<TextArea*/}
+                                {/*placeholder="Please enter the reason..."*/}
+                                {/*ref={(input) => this.input = input}*/}
+                                {/*autosize*/}
+                            {/*/>*/}
+                            {/*</Form.Item>*/}
+                            <Button key="back" onClick={this.handleCancel}>
+                                Cancel
+                            </Button>,
+                            <Button key="submit" type="primary" htmlType="submit" loading={this.state.loading}>
+                                Submit
+                            </Button>
+                        </form>
                     </Modal>
                 </div>
             );
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js
index f4604d847e..e37566a2ff 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js
@@ -27,7 +27,7 @@ export const getApps = () => dispatch => {
 
 export const getRelease = (uuid) => dispatch => {
 
-    const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications/release/"+uuid;
+    const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications/release/" + uuid;
 
     return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
     ).then(res => {
@@ -49,7 +49,7 @@ export const openReleasesModal = (app) => dispatch => {
     dispatch({
         type: ActionTypes.OPEN_RELEASES_MODAL,
         payload: {
-            app:app
+            app: app
         }
     });
 };
@@ -70,7 +70,7 @@ export const closeLifecycleModal = () => dispatch => {
     });
 };
 
-export const getLifecycle = ()=> dispatch =>{
+export const getLifecycle = () => dispatch => {
     const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications/lifecycle-config";
 
     return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
@@ -88,20 +88,31 @@ export const getLifecycle = ()=> dispatch =>{
 };
 
 
-export const updateLifecycleState = (uuid, nextState) => dispatch => {
+export const updateLifecycleState = (uuid, nextState, reason) => dispatch => {
 
-    const request = "method=get&content-type=application/json&payload={}&api-endpoint=/applications/lifecycle-config/"+uuid+"?action="+nextState;
+    const payload = {
+        nextState: nextState,
+        reason: reason
+    };
+
+    const request = "method=get&content-type=application/json&payload=" + JSON.stringify(payload) + "&api-endpoint=/applications/lifecycle-config/" + uuid;
+
+    console.log(request);
 
     return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
     ).then(res => {
         if (res.status === 200) {
-            let release = res.data.data;
-            dispatch({type: ActionTypes.GET_RELEASE, payload: release});
+            dispatch({type: ActionTypes.UPDATE_LIFECYCLE_STATE, payload: {currentStatus: nextState}});
         }
 
     }).catch(function (error) {
         if (error.response.status === 401) {
             window.location.href = 'https://localhost:9443/publisher/login';
+        } else if (error.response.status === 500) {
+            dispatch({
+                type: ActionTypes.CLOSE_LIFECYCLE_MODAL
+            });
+            alert("error");
         }
     });
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js
index 6d770920f0..74a861fbf4 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js
@@ -48,6 +48,17 @@ function rootReducer(state = initialState, action) {
                 nextState: null
             }
         });
+    }else if (action.type === ActionTypes.UPDATE_LIFECYCLE_STATE) {
+        const release = {};
+        return Object.assign({}, state, {
+            lifecycleModal: {
+                visible: false,
+                nextState: null,
+            },
+            release:{
+                currentStatus : action.payload.currentStatus
+            }
+        });
     }
     return state;
 }