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 5cf9be115e..be1c130124 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,19 +1,26 @@
 import React from "react";
 import "antd/dist/antd.css";
-import { renderRoutes } from "react-router-config";
+import RouteWithSubRoutes from "./components/RouteWithSubRoutes";
+import {
+    BrowserRouter as Router,
+    Link,
+} from 'react-router-dom';
 
 class App extends React.Component {
+    routes;
     constructor(props) {
         super(props);
-       this.state = {
-           route : props.route
-        }
+        this.routes = props.routes;
     }
   render() {
     return (
-        <div>
-            {renderRoutes(this.state.route.routes)}
-        </div>
+        <Router>
+            <div>
+                {this.routes.map((route) => (
+                    <RouteWithSubRoutes key={route.path} {...route} />
+                ))}
+            </div>
+        </Router>
 
     );
   }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/RouteWithSubRoutes.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/RouteWithSubRoutes.js
new file mode 100644
index 0000000000..c172b28edd
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/RouteWithSubRoutes.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import {Route} from 'react-router-dom';
+class RouteWithSubRoutes extends React.Component{
+    props;
+    constructor(props){
+        super(props);
+        this.props = props;
+    }
+    render() {
+        return(
+            <Route path={this.props.path} render={(props) => (
+                <this.props.component {...props} routes={this.props.routes}/>
+            )}/>
+        );
+    }
+
+}
+
+export default RouteWithSubRoutes;
\ No newline at end of file
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 96931fc788..7ccba02f0c 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
@@ -1,41 +1,27 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
 import * as serviceWorker from './serviceWorker';
-import { renderRoutes } from "react-router-config";
+import App from "./App"
+import Login from "./pages/Login"
 import Dashboard from "./pages/dashboard/Dashboard"
-import Login from "./pages/Login";
-import {BrowserRouter} from "react-router-dom";
+
 
 
 const routes = [
     {
-        component: App,
-        routes: [
-            {
-                path: "/publisher",
-                exact: true,
-                component: Dashboard,
-                routes: [
-                    {
-                        path: "/publisher/a",
-                        component: Login
-                    }
-                ]
-            },
-            {
-                path: "/publisher/login",
-                component: Login
-            }
-        ]
+        path: '/publisher/Login',
+        component: Login
+    },
+    {
+        path: '/publisher/dashboard',
+        component: Dashboard
     }
-];
+]
+
+
 
-ReactDOM.render( <BrowserRouter>
-    {/* kick it all off with the root route */}
-    {renderRoutes(routes)}
-</BrowserRouter>, document.getElementById('root'));
+ReactDOM.render( <App routes={routes}/>, 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
index 6088af4b6f..cca9ef97b5 100644
--- 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
@@ -1,5 +1,5 @@
 import React from "react";
-import { Layout, Menu, Breadcrumb } from 'antd';
+import { Layout, Menu, Breadcrumb, PageHeader } from 'antd';
 
 const { Header, Content, Footer } = Layout;
 
@@ -8,15 +8,15 @@ import Logo from "../../../public/images/logo.svg";
 import Login from "../Login";
 import {renderRoutes} from "react-router-config";
 import {NavLink} from "react-router-dom";
+import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
 
 
 class Dashboard extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            route : props.route
+            routes : props.routes
         }
-        console.log(props);
     }
 
     render() {
@@ -35,19 +35,20 @@ class Dashboard extends React.Component {
                         <Menu.Item key="3">nav 3</Menu.Item>
                     </Menu>
                 </Header>
-                <Content style={{ padding: '0 50px' }}>
-                    <Breadcrumb style={{ margin: '16px 0' }}>
+                <Content style={{ padding: '0 0' }}>
+                    <Breadcrumb style={{ margin: '16px 50px' }}>
                         <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>
+                    <PageHeader
+                        title="Title"
+                    />
+                    <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
+                        {this.state.routes.map((route) => (
+                            <RouteWithSubRoutes key={route.path} {...route} />
+                        ))}
+                    </div>
                 </Content>
                 <Footer style={{ textAlign: 'center' }}>
                     ©2019 entgra.io
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js
index dcb16b0f5e..c1724e9a8c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js
@@ -21,6 +21,9 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const config = {
     devtool: "source-map",
+    output: {
+        publicPath: '/publisher/' // <---- this
+    },
     watch: false,
     resolve: {
         alias: {