diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js
index e60e8652a1..64d155299f 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js
@@ -50,7 +50,7 @@ class AppCard extends React.Component {
                         </Col>
                         <Col span={24} style={{paddingTop:10}}>
                             <Text className="app-name" strong level={4}>{app.name}</Text><br/>
-                            <Text type="secondary" level={4}>{app.subMethod.toLowerCase()}</Text><br/>
+                            <Text type="secondary" level={4}>{app.type.toLowerCase()}</Text><br/>
                             <StarRatings
                                 rating={app.rating}
                                 starRatedColor="#777"
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
index 83fce13416..7fd5c6eee1 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
@@ -27,7 +27,7 @@ import AppUninstallModal from "./install/AppUninstallModal";
 import {withConfigContext} from "../../../context/ConfigContext";
 import {handleApiError} from "../../../js/Utils";
 import ReviewContainer from "./review/ReviewContainer";
-import InstalledDevicesTable from "./InstalledDevicesTable";
+import SubscriptionDetails from "./SubscriptionDetails";
 
 const {Title, Text, Paragraph} = Typography;
 const {TabPane} = Tabs;
@@ -205,7 +205,7 @@ class ReleaseView extends React.Component {
                             <ReviewContainer uuid={release.uuid}/>
                         </TabPane>
                         <TabPane tab="Subscription Details" key="2">
-                            <InstalledDevicesTable uuid={release.uuid}/>
+                            <SubscriptionDetails uuid={release.uuid}/>
                         </TabPane>
                     </Tabs>
                 </div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/InstalledDevicesTable.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/SubscriptionDetails.js
similarity index 88%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/InstalledDevicesTable.js
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/SubscriptionDetails.js
index 39fd3ef27c..f6bace7dd0 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/InstalledDevicesTable.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/SubscriptionDetails.js
@@ -53,7 +53,16 @@ const columns = [
         title: 'Action',
         dataIndex: 'action',
         key: 'action',
-        render: action => action.toLowerCase()
+        render: action => {
+            action = action.toLowerCase();
+            let color = "fff";
+            if(action==="subscribed"){
+                color = "#6ab04c"
+            }else if(action === "unsubscribed"){
+                color = "#f0932b"
+            }
+            return <span style={{color:color}}>{action}</span>
+        }
     },
     {
         title: 'Triggered By',
@@ -128,7 +137,7 @@ const getTimeAgo = (time) => {
 };
 
 
-class InstalledDevicesTable extends React.Component {
+class SubscriptionDetails extends React.Component {
     constructor(props) {
         super(props);
         config = this.props.context;
@@ -171,12 +180,10 @@ class InstalledDevicesTable extends React.Component {
             `/admin/subscription/${this.props.uuid}?` + encodedExtraParams,
         ).then(res => {
             if (res.status === 200) {
-                const pagination = {...this.state.pagination};
                 console.log(res.data.data.data);
                 this.setState({
                     loading: false,
-                    data: res.data.data.data,
-                    pagination,
+                    data: res.data.data.data
                 });
             }
 
@@ -192,9 +199,14 @@ class InstalledDevicesTable extends React.Component {
             <div>
                 <div style={{paddingBottom: 24}}>
                     <Text>
-                       The following are the subscription details of the application in each respective device.
+                        The following are the subscription details of the application in each respective device.
                     </Text>
                 </div>
+                <div style={{textAlign: "right", paddingBottom: 6}}>
+                    <Button icon="sync" onClick={this.fetch}>
+                        Refresh
+                    </Button>
+                </div>
                 <Table
                     columns={columns}
                     rowKey={record => (record.device.deviceIdentifier + record.device.enrolmentInfo.owner + record.device.enrolmentInfo.ownership)}
@@ -214,4 +226,4 @@ class InstalledDevicesTable extends React.Component {
     }
 }
 
-export default withConfigContext(InstalledDevicesTable);
\ No newline at end of file
+export default withConfigContext(SubscriptionDetails);
\ No newline at end of file