diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js
index cdce5b08384..661ba1efbd0 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/ReleaseModal.js
@@ -1,6 +1,7 @@
 import React from "react";
 import {Modal, Typography,List, Avatar} from 'antd';
 import {connect} from 'react-redux';
+import {Link} from "react-router-dom";
 
 // connecting state.releaseView with the component
 const mapStateToProps = state => {
@@ -60,12 +61,12 @@ class ConnectedReleaseModal extends React.Component {
                         <List
                         itemLayout="horizontal"
                         dataSource={app.applicationReleases}
-                        renderItem={item => (
+                        renderItem={release => (
                             <List.Item>
                                 <List.Item.Meta
-                                    avatar={<Avatar src={item.iconPath} />}
-                                    title={<a href="https://ant.design">Title</a>}
-                                    description={item.description}
+                                    avatar={<Avatar src={release.iconPath} />}
+                                    title={<Link to={"/publisher/apps/releases/"+release.uuid}>{release.version}</Link>}
+                                    description={release.description}
                                 />
                             </List.Item>
                         )}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js
index 829941613a6..623840107a2 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js
@@ -5,6 +5,7 @@ import App from "./App";
 import Login from "./pages/Login";
 import Dashboard from "./pages/dashboard/Dashboard";
 import Apps from "./pages/dashboard/apps/Apps";
+import Release from "./pages/dashboard/apps/release/Release";
 import AddNewApp from "./pages/dashboard/add-new-app/AddNewApp";
 import './index.css';
 import store from "./js/store/index";
@@ -31,6 +32,11 @@ const routes = [
                 path: '/publisher/apps/new-app',
                 component: AddNewApp,
                 exact: true
+            },
+            {
+                path: '/publisher/apps/releases/:uuid',
+                exact: true,
+                component: Release
             }
         ]
     }
@@ -39,7 +45,7 @@ const routes = [
 
 ReactDOM.render(
     <Provider store={store}>
-            <App routes={routes}/>
+        <App routes={routes}/>
     </Provider>,
     document.getElementById('root'));
 
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
new file mode 100644
index 00000000000..d497aed19d3
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js
@@ -0,0 +1,63 @@
+import React from "react";
+import "antd/dist/antd.css";
+import {PageHeader, Typography, Input, Button, Row, Col} from "antd";
+
+
+const Search = Input.Search;
+
+const routes = [
+    {
+        path: 'index',
+        breadcrumbName: 'Publisher',
+    },
+    {
+        path: 'first',
+        breadcrumbName: 'Dashboard',
+    },
+    {
+        path: 'second',
+        breadcrumbName: 'Apps',
+    },
+];
+
+
+class Release extends React.Component {
+    routes;
+
+    constructor(props) {
+        super(props);
+        this.routes = props.routes;
+
+    }
+
+    componentDidMount() {
+
+    }
+
+    render() {
+        const {uuid} = this.props.match.params;
+        return (
+            <div>
+                <PageHeader
+                    breadcrumb={{routes}}
+                />
+                <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
+                    <Row style={{padding: 10}}>
+                        <Col span={6} offset={18}>
+                            <Search
+                                placeholder="search"
+                                onSearch={value => console.log(value)}
+                                style={{width: 200}}
+                            />
+                            <Button style={{margin: 5}}>Advanced Search</Button>
+                        </Col>
+                    </Row>
+                </div>
+
+            </div>
+
+        );
+    }
+}
+
+export default Release;