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 5cf9be115e3..f09d174c336 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,31 @@
 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>
+                <ul>
+                    <li><Link to="/publisher/tacos">Tacos</Link></li>
+                    <li><Link to="/publisher/sandwiches">Sandwiches</Link></li>
+                </ul>
+
+                {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/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js
index 96931fc788c..2478ce82871 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,123 @@
-import React from 'react';
+// import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+// import './index.css';
 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";
+// import { renderRoutes } from "react-router-config";
+// 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
+//             }
+//         ]
+//     }
+// ];
+//
+// 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.
+// // Learn more about service workers: https://bit.ly/CRA-PWA
+// serviceWorker.unregister();
+
+
+import React from 'react';
+import {
+    BrowserRouter as Router,
+    Route,
+    Link,
+} from 'react-router-dom';
+import RouteWithSubRoutes from "./components/RouteWithSubRoutes"
+import App from "./App"
+import Login from "./pages/Login"
+
+const Sandwiches = () => <h2>Sandwiches</h2>
+
+const Tacos = ({ routes }) => (
+    <div>
+        <h2>Tacos</h2>
+        <ul>
+            <li><Link to="/publisher/tacos/bus">Bus</Link></li>
+            <li><Link to="/publisher/tacos/cart">Cart</Link></li>
+        </ul>
 
+        {routes.map((route) => (
+            <RouteWithSubRoutes key={route.path} {...route} />
+        ))}
+    </div>
+)
+
+const Bus = () => <h3>Bus</h3>
+const Cart = () => <h3>Cart</h3>
 
 const routes = [
     {
-        component: App,
+        path: '/publisher/Login',
+        component: Login
+    },
+    {
+        path: '/publisher/tacos',
+        component: Tacos,
         routes: [
             {
-                path: "/publisher",
-                exact: true,
-                component: Dashboard,
-                routes: [
-                    {
-                        path: "/publisher/a",
-                        component: Login
-                    }
-                ]
+                path: '/publisher/tacos/bus',
+                component: Login
             },
             {
-                path: "/publisher/login",
-                component: Login
+                path: '/publisher/tacos/cart',
+                component: Cart
             }
         ]
     }
-];
+]
+
+// const RouteWithSubRoutes = (route) => (
+//     <Route path={route.path} render={(props) => (
+//         <route.component {...props} routes={route.routes}/>
+//     )}/>
+// )
+
+// class App extends React.Component {
+//     render() {
+//         return (
+//             <Router>
+//                 <div>
+//                     <ul>
+//                         <li><Link to="/publisher/tacos">Tacos</Link></li>
+//                         <li><Link to="/publisher/sandwiches">Sandwiches</Link></li>
+//                     </ul>
+//
+//                     {routes.map((route) => (
+//                         <RouteWithSubRoutes key={route.path} {...route} />
+//                     ))}
+//                 </div>
+//             </Router>
+//         )
+//     }
+// }
 
-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.