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 277146278a2..7512d9fcd76 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
@@ -13,8 +13,9 @@
     "antd": "^3.15.0",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
-    "react-scripts": "2.1.8",
-    "react-router-dom": "latest"
+    "react-router-config": "^5.0.0",
+    "react-router-dom": "latest",
+    "react-scripts": "2.1.8"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js
index 495a057468b..5cf9be115e3 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js
@@ -1,18 +1,20 @@
 import React from "react";
 import "antd/dist/antd.css";
-import {BrowserRouter, Route, Switch} from 'react-router-dom';
-import Dashboard from "./pages/dashboard"
-import Login from "./pages/Login"
+import { renderRoutes } from "react-router-config";
 
 class App extends React.Component {
+    constructor(props) {
+        super(props);
+       this.state = {
+           route : props.route
+        }
+    }
   render() {
     return (
-        <BrowserRouter>
-            <Switch>
-                <Route path="/publisher" component={Dashboard} exact/>
-                <Route path="/publisher/login" component={Login}/>
-            </Switch>
-        </BrowserRouter>
+        <div>
+            {renderRoutes(this.state.route.routes)}
+        </div>
+
     );
   }
 }
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 87d1be55189..96931fc788c 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
@@ -3,8 +3,39 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { renderRoutes } from "react-router-config";
+import Dashboard from "./pages/dashboard/Dashboard"
+import Login from "./pages/Login";
+import {BrowserRouter} from "react-router-dom";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+
+const routes = [
+    {
+        component: App,
+        routes: [
+            {
+                path: "/publisher",
+                exact: true,
+                component: Dashboard,
+                routes: [
+                    {
+                        path: "/publisher/a",
+                        component: Login
+                    }
+                ]
+            },
+            {
+                path: "/publisher/login",
+                component: Login
+            }
+        ]
+    }
+];
+
+ReactDOM.render( <BrowserRouter>
+    {/* kick it all off with the root route */}
+    {renderRoutes(routes)}
+</BrowserRouter>, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js
new file mode 100644
index 00000000000..6088af4b6f3
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js
@@ -0,0 +1,60 @@
+import React from "react";
+import { Layout, Menu, Breadcrumb } from 'antd';
+
+const { Header, Content, Footer } = Layout;
+
+import styles from './Dashboard.less';
+import Logo from "../../../public/images/logo.svg";
+import Login from "../Login";
+import {renderRoutes} from "react-router-config";
+import {NavLink} from "react-router-dom";
+
+
+class Dashboard extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            route : props.route
+        }
+        console.log(props);
+    }
+
+    render() {
+        return (
+            <Layout className="layout">
+                <Header>
+                    <div style={{backgroundImage: "url(" + { Logo} + ")"}} className={styles.logo}/>
+                    <Menu
+                        theme="light"
+                        mode="horizontal"
+                        defaultSelectedKeys={['2']}
+                        style={{ lineHeight: '64px' }}
+                    >
+                        <Menu.Item key="1">nav 1</Menu.Item>
+                        <Menu.Item key="2">nav 2</Menu.Item>
+                        <Menu.Item key="3">nav 3</Menu.Item>
+                    </Menu>
+                </Header>
+                <Content style={{ padding: '0 50px' }}>
+                    <Breadcrumb style={{ margin: '16px 0' }}>
+                        <Breadcrumb.Item>Home</Breadcrumb.Item>
+                        <Breadcrumb.Item>List</Breadcrumb.Item>
+                        <Breadcrumb.Item>App</Breadcrumb.Item>
+                    </Breadcrumb>
+                    <NavLink exact to="/publisher/a" className="nav-link" >
+                        Items
+                    </NavLink>
+
+                    {/* child routes won't render without this */}
+                    {renderRoutes(this.state.route.routes, { someProp: "these extra props are optional" })}
+                    <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>Content</div>
+                </Content>
+                <Footer style={{ textAlign: 'center' }}>
+                    ©2019 entgra.io
+                </Footer>
+            </Layout>
+        );
+    }
+}
+
+export default Dashboard;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.less b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.less
new file mode 100644
index 00000000000..483f13e1170
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.less
@@ -0,0 +1,7 @@
+.logo {
+  width: 120px;
+  height: 31px;
+  background: rgba(0,0,0,.2);
+  margin: 16px 24px 16px 0;
+  float: left;
+}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/index.js
deleted file mode 100644
index ac86a24b68d..00000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-import { version, Button } from 'antd';
-import {Link} from 'react-router-dom';
-
-class Dashboard extends React.Component {
-    render() {
-        return (
-                <div className="App">
-                    <p>Currentdddddd antd version: {version}</p>
-                    <p>Please fork this codesandbox to reproduce your issue.</p>
-                    <p>请 fork 这个链接来重现你碰到的问题。</p>
-                    <Link to="/publisher/login">login</Link>
-                    <Button type="primary">Hello</Button>
-                </div>
-        );
-    }
-}
-
-export default Dashboard;