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 7512d9fcd76..781fc652efd 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,6 +13,7 @@
     "antd": "^3.15.0",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
+    "react-highlight-words": "^0.16.0",
     "react-router-config": "^5.0.0",
     "react-router-dom": "latest",
     "react-scripts": "2.1.8"
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.css
index 8b45ed5931f..36d26ff0fbd 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.css
@@ -1,3 +1,23 @@
 .App {
   padding: 20px;
+}
+
+.ant-layout-header{
+  padding: 0;
+  height: auto;
+  box-shadow: 0 2px 8px #f0f1f2;
+}
+
+.steps-content {
+    margin-top: 16px;
+    border: 1px dashed #e9e9e9;
+    border-radius: 6px;
+    background-color: #fafafa;
+    min-height: 200px;
+    text-align: center;
+    padding-top: 80px;
+}
+
+.steps-action {
+    margin-top: 24px;
 }
\ 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 7ccba02f0c2..166528a210c 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,10 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import * as serviceWorker from './serviceWorker';
-import App from "./App"
-import Login from "./pages/Login"
-import Dashboard from "./pages/dashboard/Dashboard"
+import App from "./App";
+import Login from "./pages/Login";
+import Dashboard from "./pages/dashboard/Dashboard";
+import Apps from "./pages/dashboard/apps/Apps";
+import AddNewApp from "./pages/dashboard/add-new-app/AddNewApp";
+import './index.css';
 
 
 
@@ -15,7 +17,17 @@ const routes = [
     },
     {
         path: '/publisher/dashboard',
-        component: Dashboard
+        component: Dashboard,
+        routes: [
+            {
+                path: '/publisher/dashboard/apps',
+                component: Apps
+            },
+            {
+                path: '/publisher/dashboard/new-app',
+                component: AddNewApp
+            }
+        ]
     }
 ]
 
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 cca9ef97b55..02815546af7 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, PageHeader } from 'antd';
+import { Layout, Menu, Icon } from 'antd';
 
 const { Header, Content, Footer } = Layout;
 
@@ -7,7 +7,7 @@ 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";
+import {Link, NavLink} from "react-router-dom";
 import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
 
 
@@ -30,25 +30,16 @@ class Dashboard extends React.Component {
                         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.Item key="1"><Link to="apps"><Icon type="appstore" />Apps</Link></Menu.Item>
+                        <Menu.Item key="2"><Link to="apps"><Icon type="line-chart" />Apps</Link></Menu.Item>
+                        <Menu.Item key="3"><Link to="new-app"><Icon type="upload" />Add New App</Link></Menu.Item>
                     </Menu>
                 </Header>
                 <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>
-                    <PageHeader
-                        title="Title"
-                    />
-                    <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
-                        {this.state.routes.map((route) => (
-                            <RouteWithSubRoutes key={route.path} {...route} />
-                        ))}
-                    </div>
+                    {this.state.routes.map((route) => (
+                        <RouteWithSubRoutes key={route.path} {...route} />
+                    ))}
+
                 </Content>
                 <Footer style={{ textAlign: 'center' }}>
                     ©2019 entgra.io
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
new file mode 100644
index 00000000000..f91b642adc3
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
@@ -0,0 +1,108 @@
+import React from "react";
+import "antd/dist/antd.css";
+import {PageHeader, Typography, Card, Steps, Button, message} from "antd";
+
+const Paragraph = Typography;
+
+const routes = [
+    {
+        path: 'index',
+        breadcrumbName: 'publisher',
+    },
+    {
+        path: 'first',
+        breadcrumbName: 'dashboard',
+    },
+    {
+        path: 'second',
+        breadcrumbName: 'add new app',
+    },
+];
+
+const Step = Steps.Step;
+
+const steps = [{
+    title: 'First',
+    content: 'First-content',
+}, {
+    title: 'Second',
+    content: 'Second-content',
+}, {
+    title: 'Last',
+    content: 'Last-content',
+}];
+
+
+class AddNewApp extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            current: 0,
+        };
+    }
+
+    next() {
+        const current = this.state.current + 1;
+        this.setState({current});
+    }
+
+    prev() {
+        const current = this.state.current - 1;
+        this.setState({current});
+    }
+
+
+    render() {
+        const { current } = this.state;
+        return (
+            <div>
+                <PageHeader
+                    title="Add New App"
+                    breadcrumb={{routes}}
+                >
+                    <div className="wrap">
+                        <div className="content">
+                            <Paragraph>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
+                            </Paragraph>
+                        </div>
+                    </div>
+                </PageHeader>
+                <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
+                    <Card>
+                        <div>
+                            <Steps current={current}>
+                                {steps.map(item => <Step key={item.title} title={item.title}/>)}
+                            </Steps>
+                            <div className="steps-content">{steps[current].content}</div>
+                            <div className="steps-action">
+                                {
+                                    current < steps.length - 1
+                                    && <Button type="primary" onClick={() => this.next()}>Next</Button>
+                                }
+                                {
+                                    current === steps.length - 1
+                                    && <Button type="primary"
+                                               onClick={() => message.success('Processing complete!')}>Done</Button>
+                                }
+                                {
+                                    current > 0
+                                    && (
+                                        <Button style={{marginLeft: 8}} onClick={() => this.prev()}>
+                                            Previous
+                                        </Button>
+                                    )
+                                }
+                            </div>
+                        </div>
+                    </Card>
+                </div>
+
+            </div>
+
+        );
+    }
+}
+
+export default AddNewApp;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js
new file mode 100644
index 00000000000..8df73c4db05
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js
@@ -0,0 +1,203 @@
+import React from "react";
+import "antd/dist/antd.css";
+import {Table, Divider, Tag, Card, PageHeader, Typography, Avatar,Input, Button, Icon} from "antd";
+import Highlighter from 'react-highlight-words';
+
+const Paragraph = Typography;
+
+const routes = [
+    {
+        path: 'index',
+        breadcrumbName: 'Publisher',
+    },
+    {
+        path: 'first',
+        breadcrumbName: 'Dashboard',
+    },
+    {
+        path: 'second',
+        breadcrumbName: 'Apps',
+    },
+];
+
+
+
+
+const data = [{
+    key: '1',
+    icon: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
+    name: 'John Brown',
+    platform: 'android',
+    type: 'Enterprise',
+    status: 'published',
+    version: '13.0.0.1',
+    updated_at: '27-03-2019 08:27'
+},{
+    key: '2',
+    icon: 'http://aztechbeat.com/wp-content/uploads/2014/04/confide-app-icon.png',
+    name: 'Lorem Ipsum',
+    platform: 'ios',
+    type: 'Enterprise',
+    status: 'published',
+    version: '2.3.1.2',
+    updated_at: '27-03-2019 09:45'
+},{
+    key: '3',
+    icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRx2Xx1-hnH16EGZHUlT06nOcfGODPoboA2TXKaBVtODto4lJtK',
+    name: 'Lorem Ipsum',
+    platform: 'ios',
+    type: 'Enterprise',
+    status: 'removed',
+    version: '4.1.1.0',
+    updated_at: '27-03-2019 09:46'
+}];
+
+class Apps extends React.Component {
+    routes;
+
+
+    state = {
+        searchText: '',
+    };
+
+
+    constructor(props) {
+        super(props);
+        this.routes = props.routes;
+    }
+
+    getColumnSearchProps = (dataIndex) => ({
+        filterDropdown: ({
+                             setSelectedKeys, selectedKeys, confirm, clearFilters,
+                         }) => (
+            <div style={{ padding: 8 }}>
+                <Input
+                    ref={node => { this.searchInput = node; }}
+                    placeholder={`Search ${dataIndex}`}
+                    value={selectedKeys[0]}
+                    onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+                    onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
+                    style={{ width: 188, marginBottom: 8, display: 'block' }}
+                />
+                <Button
+                    type="primary"
+                    onClick={() => this.handleSearch(selectedKeys, confirm)}
+                    icon="search"
+                    size="small"
+                    style={{ width: 90, marginRight: 8 }}
+                >
+                    Search
+                </Button>
+                <Button
+                    onClick={() => this.handleReset(clearFilters)}
+                    size="small"
+                    style={{ width: 90 }}
+                >
+                    Reset
+                </Button>
+            </div>
+        ),
+        filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />,
+        onFilter: (value, record) => record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
+        onFilterDropdownVisibleChange: (visible) => {
+            if (visible) {
+                setTimeout(() => this.searchInput.select());
+            }
+        },
+        render: (text) => (
+            <Highlighter
+                highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
+                searchWords={[this.state.searchText]}
+                autoEscape
+                textToHighlight={text.toString()}
+            />
+        ),
+    })
+
+    handleSearch = (selectedKeys, confirm) => {
+        confirm();
+        this.setState({ searchText: selectedKeys[0] });
+    }
+
+    handleReset = (clearFilters) => {
+        clearFilters();
+        this.setState({ searchText: '' });
+    }
+
+
+    render() {
+        const columns = [{
+            title: '',
+            dataIndex: 'icon',
+            key: 'icon',
+            render: text => <Avatar size="large" src={text}/>,
+        }, {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+            render: text => <a href="javascript:;">{text}</a>,
+            ...this.getColumnSearchProps('name'),
+        }, {
+            title: 'Platform',
+            dataIndex: 'platform',
+            key: 'platform',
+        }, {
+            title: 'Type',
+            dataIndex: 'type',
+            key: 'type',
+        }, {
+            title: 'Status',
+            key: 'status',
+            dataIndex: 'status',
+            render: tag => {
+                let color;
+                switch (tag) {
+                    case 'published':
+                        color = 'green';
+                        break;
+                    case 'removed':
+                        color = 'red'
+                        break;
+                    case 'default':
+                        color = 'blue'
+                }
+                return <Tag color={color} key={tag}>{tag.toUpperCase()}</Tag>;
+            },
+        },  {
+            title: 'Published Version',
+            dataIndex: 'version',
+            key: 'version',
+        },  {
+            title: 'Last Updated',
+            dataIndex: 'updated_at',
+            key: 'updated_at',
+        },{
+            title: 'Action',
+            key: 'action',
+            render: () => (
+                <span>
+      <a href="javascript:;">Edit</a>
+      <Divider type="vertical" />
+      <a href="javascript:;">Manage</a>
+    </span>
+            ),
+        }];
+
+        return (
+            <div>
+                <PageHeader
+                    breadcrumb={{routes}}
+                />
+                <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
+                    <Card>
+                        <Table columns={columns} dataSource={data}/>
+                    </Card>
+                </div>
+
+            </div>
+
+        );
+    }
+}
+
+export default Apps;