diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/AppList.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/AppList.js
new file mode 100644
index 0000000000..0c2b611cd2
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/AppList.js
@@ -0,0 +1,39 @@
+import React from "react";
+import AppCard from "./AppCard";
+import {Col, Row} from "antd";
+
+class AppList extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            apps: [
+                {
+                    id: 1,
+                    title: 'Hi',
+                    platform: 'android',
+                    description: 'lorem',
+                    subType: 'FREE',
+                    type: 'ENTERPRISE'
+                }
+            ]
+        }
+    }
+
+    render() {
+        return (
+            <Row gutter={16}>
+                {this.state.apps.map(app => (
+                    <Col xs={24} sm={12} md={6} lg={6}>
+                        <AppCard title={app.title}
+                                 platform={app.platform}
+                                 type={app.type}
+                                 subType={app.subType}
+                                 description={app.description}/>
+                    </Col>
+                ))}
+            </Row>
+        );
+    }
+}
+
+export default AppList;
\ 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/apps/Apps.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js
index 80a7f20486..16fc0687f5 100644
--- 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
@@ -3,6 +3,7 @@ import "antd/dist/antd.css";
 import {PageHeader, Typography,Input, Button, Row, Col} from "antd";
 
 import AppCard from "../../../components/AppCard";
+import AppList from "../../../components/AppList";
 
 const Search = Input.Search;
 
@@ -47,18 +48,7 @@ class Apps extends React.Component {
                             <Button style={{margin:5}}>Advanced Search</Button>
                         </Col>
                     </Row>
-
-                    <Row gutter={16}>
-                        <Col xs={24} sm={12} md={6} lg={6}>
-                            <AppCard title="Forest" platform="android" type="ENTERPRISE" subType="FREE" description="This function is a valid React component because it accepts a single “props” (which stands for properties) object"/>
-                        </Col>
-                        <Col xs={24} sm={12} md={6} lg={6}>
-                            <AppCard title="hi" platform="ios" type="ENTERPRISE" subType="FREE" description="This function is a valid React component because it accepts a single “props” (which stands for properties) object"/>
-                        </Col>
-                        <Col xs={24} sm={12} md={6} lg={6}>
-                            <AppCard title="Unknown App" type="ENTERPRISE" subType="FREE" description="This function is a valid React component because it accepts a single “props” (which stands for properties) object"/>
-                        </Col>
-                    </Row>
+                    <AppList/>
                 </div>
 
             </div>