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 6088af4b6f3..cca9ef97b55 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