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 4896801b578..0447bd02131 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
@@ -12,7 +12,8 @@ const mapDispatchToProps = dispatch => ({
 
 const mapStateToProps = state => {
     return {
-        lifecycle: state.lifecycle
+        lifecycle: state.lifecycle,
+        currentStatus : state.release.currentStatus.toUpperCase()
     };
 };
 
@@ -29,17 +30,15 @@ class ConnectedLifeCycle extends React.Component {
     }
 
     openModal() {
-        console.log(this.props);
         this.props.openLifecycleModal("IN_REVIEW");
     }
 
     render() {
-        console.log();
         const lifecycle = this.props.lifecycle;
         if (lifecycle != null) {
             return (
                 <div>
-                    <LifecycleModal/>
+                    <LifecycleModal currentStatus={this.props.currentStatus}/>
                     <Button onClick={this.openModal}>aaaa</Button>
                     <LifeCycleGraph 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/LifecycleModal.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifecycleModal.js
index 2bef078f8f9..fa1e7194501 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,16 +1,23 @@
 import React from "react";
-import {Modal, Typography,List, Avatar} from 'antd';
+import {Modal, Typography,Icon,Input} from 'antd';
 import {connect} from 'react-redux';
+import {closeLifecycleModal} from "../../../js/actions";
+
+const { TextArea } = Input;
+const { Title } = Typography;
 
 // connecting state.releaseView with the component
 const mapStateToProps = state => {
-    console.log(state);
     return {
         nextState: state.lifecycleModal.nextState,
         visible: state.lifecycleModal.visible
     }
 };
 
+const mapDispatchToProps = dispatch => ({
+    closeLifecycleModal : () => dispatch(closeLifecycleModal())
+});
+
 const Text = Typography;
 
 class ConnectedLifecycleModal extends React.Component {
@@ -23,7 +30,6 @@ class ConnectedLifecycleModal extends React.Component {
 
     componentWillReceiveProps(nextProps) {
         if (nextProps !== this.props) {
-            console.log(nextProps);
             this.setState({
                 visible: nextProps.visible
             })
@@ -46,6 +52,7 @@ class ConnectedLifecycleModal extends React.Component {
         this.setState({
             visible: false,
         });
+        this.props.closeLifecycleModal();
     };
 
     render() {
@@ -59,7 +66,9 @@ class ConnectedLifecycleModal extends React.Component {
                         onOk={this.handleOk}
                         onCancel={this.handleCancel}
                     >
-                        <p>Some contents...</p>
+                        <Title level={4}>{this.props.currentStatus} <Icon type="arrow-right" /> {nextState}</Title>
+                        <p>Reason:</p>
+                        <TextArea placeholder="Please enter the reason..." autosize />
                     </Modal>
                 </div>
             );
@@ -69,6 +78,6 @@ class ConnectedLifecycleModal extends React.Component {
     }
 }
 
-const LifecycleModal = connect(mapStateToProps, null)(ConnectedLifecycleModal);
+const LifecycleModal = connect(mapStateToProps, mapDispatchToProps)(ConnectedLifecycleModal);
 
 export default LifecycleModal;
\ No newline at end of file
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 442fa33f73c..b64296dea97 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
@@ -57,7 +57,6 @@ export const openReleasesModal = (app) => dispatch => {
 
 
 export const openLifecycleModal = (nextState) => dispatch => {
-    console.log(nextState);
     dispatch({
         type: ActionTypes.OPEN_LIFECYCLE_MODAL,
         payload: {
@@ -66,6 +65,12 @@ export const openLifecycleModal = (nextState) => dispatch => {
     });
 };
 
+export const closeLifecycleModal = () => dispatch => {
+    dispatch({
+        type: ActionTypes.CLOSE_LIFECYCLE_MODAL
+    });
+};
+
 export const getLifecycle = ()=> dispatch =>{
     const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications/lifecycle-config";
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/ActionTypes.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/ActionTypes.js
index 53bf7e8e57c..cf9dd0f39f1 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/ActionTypes.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/ActionTypes.js
@@ -7,7 +7,8 @@ const ActionTypes = keyMirror({
     CLOSE_RELEASES_MODAL: null,
     GET_RELEASE: null,
     GET_LIFECYCLE: null,
-    OPEN_LIFECYCLE_MODAL: null
+    OPEN_LIFECYCLE_MODAL: null,
+    CLOSE_LIFECYCLE_MODAL: null
 });
 
 export default ActionTypes;
\ No newline at end of file
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 0a29b775005..6d770920f07 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
@@ -41,6 +41,13 @@ function rootReducer(state = initialState, action) {
                 nextState: action.payload.nextState
             }
         });
+    }else if (action.type === ActionTypes.CLOSE_LIFECYCLE_MODAL) {
+        return Object.assign({}, state, {
+            lifecycleModal: {
+                visible: false,
+                nextState: null
+            }
+        });
     }
     return state;
 }