diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
index be4c3bbe85..127a5e7eae 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
@@ -22,6 +22,7 @@
     "react-dom": "^16.8.4",
     "react-highlight-words": "^0.16.0",
     "react-infinite-scroller": "^1.2.4",
+    "react-quill": "^1.3.3",
     "react-router": "latest",
     "react-router-config": "^5.0.0",
     "react-router-dom": "latest",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.css
deleted file mode 100644
index 912a757eba..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.srd-diagram{
-    height: 100%;
-    min-height: 300px;
-    background-color: #3c3c3c !important;
-    background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent);
-    background-size: 50px 50px;
-}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
index 5764b8ce9a..31290b0a89 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
@@ -41,7 +41,7 @@ class ReleaseView extends React.Component {
                                     <Button htmlType="button"
                                             type="primary"
                                             icon="shop"
-                                            disabled={release.currentStatus !== "PUBLISHED"}
+                                            disabled={this.props.currentLifecycleStatus !== "PUBLISHED"}
                                             onClick={() => {
                                                 window.open("https://"+ config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+"/store/"+app.deviceType+"/apps/"+release.uuid)
                                             }}>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.css
new file mode 100644
index 0000000000..759174d9dd
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.css
@@ -0,0 +1,17 @@
+.ql-editor{
+    min-height: 100px !important;
+    max-height: 400px;
+    overflow: hidden;
+    overflow-y: scroll;
+    overflow-x: scroll;
+}
+
+.ql-toolbar.ql-snow{
+    border-radius: 10px 10px 0 0;
+}
+.ql-toolbar.ql-snow + .ql-container.ql-snow{
+    border-radius: 0 0 10px 10px;
+}
+.ql-editor.ql-blank::before {
+    font-style: unset;
+}
\ 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/lifeCycle/LifeCycle.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.js
new file mode 100644
index 0000000000..24f721a0c4
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.js
@@ -0,0 +1,253 @@
+import React from "react";
+import {Typography, Tag, Divider, Select, Button, Modal, message, notification, Collapse} from "antd";
+import axios from "axios";
+import config from "../../../../../public/conf/config.json";
+
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
+import './LifeCycle.css';
+
+const {Text, Title, Paragraph} = Typography;
+const {Option} = Select;
+const Panel = Collapse.Panel;
+
+const modules = {
+    toolbar: [
+        [{'header': [1, 2, false]}],
+        ['bold', 'italic', 'underline', 'strike', 'blockquote', 'code-block'],
+        [{'list': 'ordered'}, {'list': 'bullet'}],
+        ['link', 'image']
+    ],
+};
+
+const formats = [
+    'header',
+    'bold', 'italic', 'underline', 'strike', 'blockquote', 'code-block',
+    'list', 'bullet',
+    'link', 'image'
+];
+
+class LifeCycle extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            currentStatus: props.currentStatus,
+            selectedStatus: null,
+            lifecycle: [],
+            reasonText: '',
+            isReasonModalVisible: false,
+            isConfirmButtonLoading: false
+        }
+    }
+
+    componentDidMount() {
+        this.fetchData();
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        if (prevProps.currentStatus !== this.props.currentStatus || prevProps.uuid !== this.props.uuid) {
+            this.setState({
+                currentStatus: this.props.currentStatus
+            });
+        }
+    }
+
+
+    fetchData = () => {
+        axios.get(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/lifecycle-config",
+            {
+                headers: {'X-Platform': config.serverConfig.platform}
+            }).then(res => {
+            if (res.status === 200) {
+                const lifecycle = res.data.data;
+                console.log(lifecycle);
+                this.setState({
+                    lifecycle: lifecycle
+                })
+            }
+
+        }).catch(function (error) {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+            }
+        });
+    };
+
+    handleChange = (value) => {
+        this.setState({reasonText: value})
+    };
+
+    handleSelectChange = (value) => {
+        this.setState({selectedStatus: value})
+    };
+
+    showReasonModal = () => {
+        this.setState({
+            isReasonModalVisible: true
+        });
+    };
+
+    closeReasonModal = () => {
+        this.setState({
+            isReasonModalVisible: false
+        });
+    };
+
+    addLifeCycle = () => {
+        const {selectedStatus, reasonText} = this.state;
+        const {uuid} = this.props;
+        const data = {
+            action: selectedStatus,
+            reason: reasonText
+        };
+
+        this.setState({
+            isConfirmButtonLoading: true,
+        });
+
+        axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/life-cycle/" + uuid,
+            data,
+            {
+                headers: {'X-Platform': config.serverConfig.platform}
+            }).then(res => {
+            if (res.status === 201) {
+                this.setState({
+                    isReasonModalVisible: false,
+                    isConfirmButtonLoading: false,
+                    currentStatus: selectedStatus,
+                    selectedStatus: null,
+                    reasonText: ''
+                });
+                this.props.changeCurrentLifecycleStatus(selectedStatus);
+                notification["success"]({
+                    message: "Done!",
+                    description:
+                        "Lifecycle state updated successfully!",
+                });
+            }
+
+        }).catch((error) => {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+            } else {
+                notification["error"]({
+                    message: "Error",
+                    description:
+                        "Something went wrong",
+                });
+            }
+            this.setState({
+                isConfirmButtonLoading: false
+            });
+        });
+
+
+    };
+
+
+    render() {
+        const {currentStatus, lifecycle, selectedStatus} = this.state;
+        const selectedValue = selectedStatus == null ? [] : selectedStatus;
+        return (
+            <div>
+                <Title level={4}>Manage Lifecycle</Title>
+                <Divider/>
+                <Paragraph>
+                    Ensure that your security policies are not violated by the application. Have a thorough review and
+                    approval process before directly publishing it to your app store. You can easily transition from one
+                    state to another. <br/>Note: ‘Change State To’ displays only the next states allowed from the
+                    current state
+                </Paragraph>
+                <Divider dashed={true}/>
+                <Text strong={true}>Current State: </Text> <Tag color="blue">{currentStatus}</Tag><br/><br/>
+                <Text>Change State to: </Text>
+                <Select
+                    placeholder="Select state"
+                    style={{width: 120}}
+                    size="small"
+                    onChange={this.handleSelectChange}
+                    value={selectedValue}
+                    showSearch={true}
+                >
+                    {
+                        Object.keys(lifecycle).map(lifecycleState => {
+                            return (
+                                <Option
+                                    disabled={!(lifecycle[currentStatus].proceedingStates.includes(lifecycleState))}
+                                    key={lifecycleState}
+                                    value={lifecycleState}>
+                                    {lifecycleState}
+                                </Option>
+                            )
+                        })
+                    }
+                </Select>
+                <Button
+                    style={{marginLeft: 10}}
+                    size="small"
+                    type="primary"
+                    htmlType="button"
+                    onClick={this.showReasonModal}
+                    disabled={selectedStatus == null}
+                >
+                    Change
+                </Button>
+
+
+                <Divider/>
+                <Text strong={true}>Lorem Ipsum</Text>
+                <Collapse defaultActiveKey={currentStatus}>
+                    {
+                        Object.keys(lifecycle).map(lifecycleState => {
+                            return (
+                                <Panel header={lifecycleState} key={lifecycleState}>
+                                    {
+                                        Object.keys(lifecycle).map(state => {
+                                            // console.log(lifecycle[lifecycleState].proceedingStates);
+                                            const isEnabled = lifecycle[lifecycleState].hasOwnProperty("proceedingStates") && (lifecycle[lifecycleState].proceedingStates.includes(state));
+                                            const color = isEnabled ? "green" : "";
+                                            return (
+                                                <Tag
+                                                    disabled={!isEnabled}
+                                                    key={state} style={{marginBottom: 5}} color={color}>{state}</Tag>
+                                            )
+                                        })
+                                    }
+                                </Panel>
+                            )
+                        })
+                    }
+
+                </Collapse>
+
+                <Modal
+                    title="Confirm changing lifecycle state"
+                    visible={this.state.isReasonModalVisible}
+                    onOk={this.addLifeCycle}
+                    onCancel={this.closeReasonModal}
+                    okText="confirm"
+                >
+                    <Text>
+                        You are going to change the lifecycle state from,<br/>
+                        <Tag color="blue">{currentStatus}</Tag>to <Tag
+                        color="blue">{selectedStatus}</Tag>
+                    </Text>
+                    <br/><br/>
+                    <ReactQuill
+                        theme="snow"
+                        value={this.state.reasonText}
+                        onChange={this.handleChange}
+                        modules={modules}
+                        formats={formats}
+                        placeholder="Leave a comment (optional)"
+                    />
+                </Modal>
+
+            </div>
+        );
+    }
+
+}
+
+export default LifeCycle;
\ 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/review/Reviews.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/review/Reviews.js
index b4ace63734..bc3726ba01 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/review/Reviews.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/review/Reviews.js
@@ -42,7 +42,7 @@ class Reviews extends React.Component {
 
         }).catch(function (error) {
             if (error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
             } else {
                 message.warning('Something went wrong');
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js
index a9a18c6e4a..3536a8e06b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js
@@ -4,24 +4,10 @@ import {PageHeader, Typography, Row, Col, message, Card} from "antd";
 import axios from 'axios';
 import config from "../../../../../public/conf/config.json";
 import ReleaseView from "../../../../components/apps/release/ReleaseView";
-import LifeCycle from "../../../../components/apps/release/LifeCycle";
+import LifeCycle from "../../../../components/apps/release/lifeCycle/LifeCycle";
 
 const {Title} = Typography;
 
-const routes = [
-    {
-        path: 'index',
-        breadcrumbName: 'Publisher',
-    },
-    {
-        path: 'first',
-        breadcrumbName: 'Dashboard',
-    },
-    {
-        path: 'second',
-        breadcrumbName: 'Apps',
-    },
-];
 
 
 class Release extends React.Component {
@@ -33,7 +19,9 @@ class Release extends React.Component {
         this.state = {
             loading: true,
             app: null,
-            uuid: null
+            uuid: null,
+            release: null,
+            currentLifecycleStatus: null,
         }
     }
 
@@ -48,6 +36,11 @@ class Release extends React.Component {
             this.fetchData(uuid);
         }
     }
+    changeCurrentLifecycleStatus = (status) =>{
+        this.setState({
+            currentLifecycleStatus: status
+        });
+    };
 
     fetchData = (uuid) => {
 
@@ -59,19 +52,23 @@ class Release extends React.Component {
             }
         ).then(res => {
             if (res.status === 200) {
-                let app = res.data.data;
+                const app = res.data.data;
+                const release = (app !== null) ? app.applicationReleases[0] : null;
+                const currentLifecycleStatus = (release!==null) ? release.currentStatus : null;
                 this.setState({
                     app: app,
+                    release: release,
+                    currentLifecycleStatus: currentLifecycleStatus,
                     loading: false,
                     uuid: uuid
-                })
+                });
             }
 
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
                 //todo display a popop with error
                 message.error('You are not logged in');
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
             } else {
                 message.error('Something went wrong... :(');
             }
@@ -81,9 +78,9 @@ class Release extends React.Component {
     };
 
     render() {
-        const {app} = this.state;
+        const {app, release, currentLifecycleStatus} = this.state;
 
-        if (app == null) {
+        if (release == null) {
             return (
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
                     <Title level={3}>No Apps Found</Title>
@@ -98,12 +95,12 @@ class Release extends React.Component {
                     <Row style={{padding: 10}}>
                         <Col lg={16} md={24} style={{padding: 3}}>
                             <Card>
-                                <ReleaseView app={app}/>
+                                <ReleaseView app={app} currentLifecycleStatus={currentLifecycleStatus}/>
                             </Card>
                         </Col>
                         <Col lg={8} md={24} style={{padding: 3}}>
                             <Card lg={8} md={24}>
-                                {/*<LifeCycle currentStatus={release.currentStatus.toUpperCase()}/>*/}
+                                <LifeCycle uuid={release.uuid} currentStatus={release.currentStatus.toUpperCase()} changeCurrentLifecycleStatus={this.changeCurrentLifecycleStatus}/>
                             </Card>
                         </Col>
                     </Row>