diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.js
index e3f4e608196..56e3a832823 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.js
@@ -111,14 +111,27 @@ class ApplicationListing extends Component {
 
     componentWillMount() {
         //Fetch all the applications from backend and create application objects.
+        this.setState({data: this.data});
     }
 
     /**
      * Handles the search action.
      * When typing in the search bar, this method will be invoked.
      * */
-    _searchApplications(word) {
-        let searchedData = [];
+    _searchApplications(event, word) {
+        let searchedData;
+            if (word){
+                searchedData = this.data.filter((dataItem) => {
+                        return dataItem.applicationName.includes(word);
+                    });
+            } else {
+                console.log("no")
+                console.log(this.data)
+                searchedData = this.data;
+            }
+
+        this.setState({data: searchedData}, console.log("Searched data ", this.state.data));
+
     }
 
     /**
@@ -155,7 +168,7 @@ class ApplicationListing extends Component {
 
                     </CardActions>
                     <DataTable headers={this.headers}
-                               data={this.data}
+                               data={this.state.data}
                                handleRowClick={this._onRowClick.bind(this)}
                                noDataMessage={{type: 'button', text: 'Create Application'}}/>
                 </Card>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js
index 0c558b8f8d3..f14a8dbb396 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.js
@@ -63,6 +63,12 @@ class DataTable extends Component {
         this.setState({data: this.props.data, headers: this.props.headers})
     }
 
+    shouldComponentUpdate(nextProps, nextState) {
+        console.log("next Props", nextProps.data);
+        this.setState({data: nextProps.data});
+        return true;
+    }
+
     /**
      * Triggers when user click on table row.
      * This method invokes the parent method handleRowClick, which is passed via props.
@@ -75,6 +81,8 @@ class DataTable extends Component {
     render() {
         const {data, headers} = this.state;
 
+        console.log(data);
+
         let noDataContent = null;
 
         if (this.props.noDataMessage.type === 'button') {