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 dece5f9363..dbba25e052 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
@@ -39,7 +39,8 @@
     "redux-thunk": "^2.3.0",
     "shade-blend-color": "^1.0.0",
     "storm-react-diagrams": "^5.2.1",
-    "typescript": "^3.6.4"
+    "typescript": "^3.6.4",
+    "lodash.debounce": "latest"
   },
   "devDependencies": {
     "@babel/core": "^7.5.0",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/detailed-rating/DetailedRating.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/detailed-rating/DetailedRating.js
index 2ef88827be..dba024f2ed 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/detailed-rating/DetailedRating.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/detailed-rating/DetailedRating.js
@@ -61,7 +61,7 @@ class DetailedRating extends React.Component{
             }
 
         }).catch(function (error) {
-            handleApiError(error, "Error occurred while trying to load rating for the release.");
+            handleApiError(error, "Error occurred while trying to load rating for the release.", true);
         });
     };
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js
index fc54ab399b..7eaea07d32 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js
@@ -136,7 +136,7 @@ class AppDetailsDrawer extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load app details.");
+            handleApiError(error, "Error occurred while trying to load categories.", true);
             this.setState({
                 loading: false
             });
@@ -509,8 +509,8 @@ class AppDetailsDrawer extends React.Component {
                                                                         title="Published"
                                                                         style={{
                                                                             backgroundColor: '#52c41a',
-                                                                            borderRadius:"50%",
-                                                                            color:"white"
+                                                                            borderRadius: "50%",
+                                                                            color: "white"
                                                                         }}
                                                                         count={
                                                                             <Icon
@@ -547,10 +547,10 @@ class AppDetailsDrawer extends React.Component {
                             />
                         </div>
 
-                        <Divider dashed={true}/>
                         {/*display add new release only if app type is enterprise*/}
                         {(app.type === "ENTERPRISE") && (
                             <div>
+                                <Divider dashed={true}/>
                                 <div style={{paddingBottom: 16}}>
                                     <Text>
                                         Add new release for the application
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/Filters.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/Filters.js
index e042def20d..14c76e24a7 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/Filters.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/Filters.js
@@ -30,7 +30,7 @@ import {
     Form,
     message,
     Radio,
-    notification
+    notification, Alert
 } from "antd";
 import axios from "axios";
 import {withConfigContext} from "../../../context/ConfigContext";
@@ -46,7 +46,12 @@ class FiltersForm extends React.Component {
         this.state = {
             categories: [],
             tags: [],
-            deviceTypes: []
+            deviceTypes: [],
+            forbiddenErrors: {
+                categories: false,
+                tags: false,
+                deviceTypes: false
+            }
         };
     }
 
@@ -59,11 +64,11 @@ class FiltersForm extends React.Component {
                 }
             }
 
-            if(values.hasOwnProperty("deviceType") && values.deviceType==="ALL"){
+            if (values.hasOwnProperty("deviceType") && values.deviceType === "ALL") {
                 delete values["deviceType"];
             }
 
-            if(values.hasOwnProperty("appType") && values.appType==="ALL"){
+            if (values.hasOwnProperty("appType") && values.appType === "ALL") {
                 delete values["appType"];
             }
 
@@ -73,16 +78,17 @@ class FiltersForm extends React.Component {
 
     componentDidMount() {
         this.getCategories();
+        this.getTags();
+        this.getDeviceTypes();
     }
 
     getCategories = () => {
         const config = this.props.context;
         axios.get(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories"
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories"
         ).then(res => {
             if (res.status === 200) {
                 let categories = JSON.parse(res.data.data);
-                this.getTags();
                 this.setState({
                     categories: categories,
                     loading: false
@@ -90,21 +96,29 @@ class FiltersForm extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load categories.");
-            this.setState({
-                loading: false
-            });
+            handleApiError(error, "Error occurred while trying to load categories.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.categories = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
     getTags = () => {
         const config = this.props.context;
         axios.get(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags"
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags"
         ).then(res => {
             if (res.status === 200) {
                 let tags = JSON.parse(res.data.data);
-                this.getDeviceTypes();
                 this.setState({
                     tags: tags,
                     loading: false,
@@ -112,10 +126,19 @@ class FiltersForm extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load tags.");
-            this.setState({
-                loading: false
-            });
+            handleApiError(error, "Error occurred while trying to load tags.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.tags = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -123,7 +146,7 @@ class FiltersForm extends React.Component {
     getDeviceTypes = () => {
         const config = this.props.context;
         axios.get(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt + "/device-types"
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt + "/device-types"
         ).then(res => {
             if (res.status === 200) {
                 const deviceTypes = JSON.parse(res.data.data);
@@ -134,15 +157,24 @@ class FiltersForm extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load device types.");
-            this.setState({
-                loading: false
-            });
+            handleApiError(error, "Error occurred while trying to load device types.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.deviceTypes = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
     render() {
-        const {categories, tags, deviceTypes} = this.state;
+        const {categories, tags, deviceTypes, forbiddenErrors} = this.state;
         const {getFieldDecorator} = this.props.form;
 
         return (
@@ -170,7 +202,13 @@ class FiltersForm extends React.Component {
                             </Form.Item>
                         </Col>
                     </Row>
-
+                    {(forbiddenErrors.categories) && (
+                        <Alert
+                            message="You don't have permission to view categories."
+                            type="warning"
+                            banner
+                            closable/>
+                    )}
                     <Form.Item label="Categories">
                         {getFieldDecorator('categories', {
                             rules: [{
@@ -182,8 +220,7 @@ class FiltersForm extends React.Component {
                                 mode="multiple"
                                 style={{width: '100%'}}
                                 placeholder="Select a Category"
-                                onChange={this.handleCategoryChange}
-                            >
+                                onChange={this.handleCategoryChange}>
                                 {
                                     categories.map(category => {
                                         return (
@@ -198,7 +235,13 @@ class FiltersForm extends React.Component {
                         )}
                     </Form.Item>
 
-
+                    {(forbiddenErrors.deviceTypes) && (
+                        <Alert
+                            message="You don't have permission to view device types."
+                            type="warning"
+                            banner
+                            closable/>
+                    )}
                     <Form.Item label="Device Type">
                         {getFieldDecorator('deviceType', {
                             rules: [{
@@ -208,8 +251,7 @@ class FiltersForm extends React.Component {
                         })(
                             <Select
                                 style={{width: '100%'}}
-                                placeholder="Select device types"
-                            >
+                                placeholder="Select device types">
                                 {
                                     deviceTypes.map(deviceType => {
                                         return (
@@ -226,7 +268,13 @@ class FiltersForm extends React.Component {
                             </Select>
                         )}
                     </Form.Item>
-
+                    {(forbiddenErrors.tags) && (
+                        <Alert
+                            message="You don't have permission to view tags."
+                            type="warning"
+                            banner
+                            closable/>
+                    )}
                     <Form.Item label="Tags">
                         {getFieldDecorator('tags', {
                             rules: [{
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js
index d008cf5609..01d6c8c159 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js
@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Avatar, Table, Tag, Icon, message, notification, Col, Badge} from "antd";
+import {Avatar, Table, Tag, Icon, message, notification, Col, Badge, Alert} from "antd";
 import axios from "axios";
 import pSBC from 'shade-blend-color';
 import "./AppsTable.css";
@@ -58,7 +58,7 @@ const columns = [
                 avatar = (hasPublishedRelease) ? (
                     <Badge
                         title="Published"
-                        style={{ backgroundColor: '#52c41a', borderRadius:"50%", color:"white"}}
+                        style={{backgroundColor: '#52c41a', borderRadius: "50%", color: "white"}}
                         count={
                             <Icon
                                 type="check-circle"/>
@@ -74,7 +74,6 @@ const columns = [
                 ) : (
                     <Avatar shape="square" size="large"
                             style={{
-                                marginRight: 20,
                                 borderRadius: "28%",
                                 border: "1px solid #ddd"
                             }}
@@ -148,7 +147,8 @@ class AppsTable extends React.Component {
             isDrawerVisible: false,
             selectedApp: null,
             selectedAppIndex: -1,
-            loading: false
+            loading: false,
+            isForbiddenErrorVisible: false
         };
         config = this.props.context;
     }
@@ -240,7 +240,12 @@ class AppsTable extends React.Component {
                 });
             }
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load apps.");
+            handleApiError(error, "Error occurred while trying to load apps.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbiddenErrorVisible: true
+                })
+            }
             this.setState({loading: false});
         });
     };
@@ -256,29 +261,37 @@ class AppsTable extends React.Component {
     render() {
         const {isDrawerVisible, loading} = this.state;
         return (
-            <div className="apps-table">
-                <Table
-                    rowKey={record => record.id}
-                    dataSource={this.state.apps}
-                    columns={columns}
-                    pagination={this.state.pagination}
-                    onChange={this.handleTableChange}
-                    rowClassName="app-row"
-                    loading={loading}
-                    onRow={(record, rowIndex) => {
-                        return {
-                            onClick: event => {
-                                this.showDrawer(record, rowIndex);
-                            },
-                        };
-                    }}/>
-                <AppDetailsDrawer
-                    visible={isDrawerVisible}
-                    onClose={this.closeDrawer}
-                    app={this.state.selectedApp}
-                    onUpdateApp={this.onUpdateApp}/>
+            <div>
+                {(this.state.isForbiddenErrorVisible) && (
+                    <Alert
+                        message="You don't have permission to view apps."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
+                <div className="apps-table">
+                    <Table
+                        rowKey={record => record.id}
+                        dataSource={this.state.apps}
+                        columns={columns}
+                        pagination={this.state.pagination}
+                        onChange={this.handleTableChange}
+                        rowClassName="app-row"
+                        loading={loading}
+                        onRow={(record, rowIndex) => {
+                            return {
+                                onClick: event => {
+                                    this.showDrawer(record, rowIndex);
+                                },
+                            };
+                        }}/>
+                    <AppDetailsDrawer
+                        visible={isDrawerVisible}
+                        onClose={this.closeDrawer}
+                        app={this.state.selectedApp}
+                        onUpdateApp={this.onUpdateApp}/>
+                </div>
             </div>
-
         );
     }
 }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
index 0c208c776b..6ea67eee20 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
@@ -24,6 +24,7 @@ import "../../../App.css";
 import DetailedRating from "../detailed-rating/DetailedRating";
 import EditRelease from "./edit-release/EditRelease";
 import {withConfigContext} from "../../../context/ConfigContext";
+import NewAppUploadForm from "../../new-app/subForms/NewAppUploadForm";
 
 const {Title, Text, Paragraph} = Typography;
 
@@ -97,6 +98,7 @@ class ReleaseView extends React.Component {
                             <Text>Version : {release.version}</Text><br/>
 
                             <EditRelease
+                                forbiddenErrors={this.props.forbiddenErrors}
                                 isAppUpdatable={isAppUpdatable}
                                 type={app.type}
                                 deviceType={app.deviceType}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/edit-release/EditRelease.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/edit-release/EditRelease.js
index 062fa56542..f4c6e84670 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/edit-release/EditRelease.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/edit-release/EditRelease.js
@@ -31,7 +31,7 @@ import {
     Divider,
     Row,
     Col,
-    Select
+    Select, Alert
 } from 'antd';
 import axios from "axios";
 import "@babel/polyfill";
@@ -522,63 +522,72 @@ class EditReleaseModal extends React.Component {
                                     )}
                                 </Form.Item>
                                 {(config.deviceTypes.mobileTypes.includes(deviceType)) && (
-                                    <Form.Item {...formItemLayout} label="Supported OS Versions">
-                                        {getFieldDecorator('supportedOS')(
-                                            <div>
-                                                <InputGroup>
-                                                    <Row gutter={8}>
-                                                        <Col span={11}>
-                                                            <Form.Item>
-                                                                {getFieldDecorator('lowerOsVersion', {
-                                                                    rules: [{
-                                                                        required: true,
-                                                                        message: 'Please select Value'
-                                                                    }],
-                                                                })(
-                                                                    <Select
-                                                                        placeholder="Lower version"
-                                                                        style={{width: "100%"}}
-                                                                        onChange={this.handleLowerOsVersionChange}>
-                                                                        {supportedOsVersions.map(version => (
-                                                                            <Option key={version.versionName}
-                                                                                    value={version.versionName}>
-                                                                                {version.versionName}
-                                                                            </Option>
-                                                                        ))}
-                                                                    </Select>
-                                                                )}
-                                                            </Form.Item>
-                                                        </Col>
-                                                        <Col span={2}>
-                                                            <p> - </p>
-                                                        </Col>
-                                                        <Col span={11}>
-                                                            <Form.Item>
-                                                                {getFieldDecorator('upperOsVersion', {
-                                                                    rules: [{
-                                                                        required: true,
-                                                                        message: 'Please select Value'
-                                                                    }],
-                                                                })(
-                                                                    <Select style={{width: "100%"}}
-                                                                            placeholder="Upper version"
-                                                                            onChange={this.handleUpperOsVersionChange}>
-                                                                        {supportedOsVersions.map(version => (
-                                                                            <Option key={version.versionName}
-                                                                                    value={version.versionName}>
-                                                                                {version.versionName}
-                                                                            </Option>
-                                                                        ))}
-                                                                    </Select>
-                                                                )}
-                                                            </Form.Item>
-
-                                                        </Col>
-                                                    </Row>
-                                                </InputGroup>
-                                            </div>
+                                    <div>
+                                        {(this.props.forbiddenErrors.supportedOsVersions) && (
+                                            <Alert
+                                                message="You don't have permission to view supported OS versions."
+                                                type="warning"
+                                                banner
+                                                closable/>
                                         )}
-                                    </Form.Item>
+                                        <Form.Item {...formItemLayout} label="Supported OS Versions">
+                                            {getFieldDecorator('supportedOS')(
+                                                <div>
+                                                    <InputGroup>
+                                                        <Row gutter={8}>
+                                                            <Col span={11}>
+                                                                <Form.Item>
+                                                                    {getFieldDecorator('lowerOsVersion', {
+                                                                        rules: [{
+                                                                            required: true,
+                                                                            message: 'Please select Value'
+                                                                        }],
+                                                                    })(
+                                                                        <Select
+                                                                            placeholder="Lower version"
+                                                                            style={{width: "100%"}}
+                                                                            onChange={this.handleLowerOsVersionChange}>
+                                                                            {supportedOsVersions.map(version => (
+                                                                                <Option key={version.versionName}
+                                                                                        value={version.versionName}>
+                                                                                    {version.versionName}
+                                                                                </Option>
+                                                                            ))}
+                                                                        </Select>
+                                                                    )}
+                                                                </Form.Item>
+                                                            </Col>
+                                                            <Col span={2}>
+                                                                <p> - </p>
+                                                            </Col>
+                                                            <Col span={11}>
+                                                                <Form.Item>
+                                                                    {getFieldDecorator('upperOsVersion', {
+                                                                        rules: [{
+                                                                            required: true,
+                                                                            message: 'Please select Value'
+                                                                        }],
+                                                                    })(
+                                                                        <Select style={{width: "100%"}}
+                                                                                placeholder="Upper version"
+                                                                                onChange={this.handleUpperOsVersionChange}>
+                                                                            {supportedOsVersions.map(version => (
+                                                                                <Option key={version.versionName}
+                                                                                        value={version.versionName}>
+                                                                                    {version.versionName}
+                                                                                </Option>
+                                                                            ))}
+                                                                        </Select>
+                                                                    )}
+                                                                </Form.Item>
+
+                                                            </Col>
+                                                        </Row>
+                                                    </InputGroup>
+                                                </div>
+                                            )}
+                                        </Form.Item>
+                                    </div>
                                 )}
                                 <Form.Item {...formItemLayout} label="Meta Data">
                                     {getFieldDecorator('meta', {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/review/Reviews.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/review/Reviews.js
index 0e75a3d663..53aa43d298 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/review/Reviews.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/review/Reviews.js
@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {List, message, Avatar, Spin, Button, notification} from 'antd';
+import {List, message, Avatar, Spin, Button, notification, Alert} from 'antd';
 import "./Reviews.css";
 
 import InfiniteScroll from 'react-infinite-scroller';
@@ -33,7 +33,10 @@ class Reviews extends React.Component {
         data: [],
         loading: false,
         hasMore: false,
-        loadMore: false
+        loadMore: false,
+        forbiddenErrors: {
+            reviews: false
+        }
     };
 
 
@@ -49,17 +52,34 @@ class Reviews extends React.Component {
         const config = this.props.context;
 
         const {uuid, type} = this.props;
-
+        this.setState({
+            loading: true
+        });
         axios.get(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/admin/reviews/" + type + "/" + uuid
+            window.location.origin +
+            config.serverConfig.invoker.uri +
+            config.serverConfig.invoker.publisher +
+            "/admin/reviews/" + type + "/" + uuid
         ).then(res => {
             if (res.status === 200) {
                 let reviews = res.data.data.data;
                 callback(reviews);
             }
 
-        }).catch(function (error) {
-            handleApiError(error, "Error occurred while trying to load reviews.");
+        }).catch((error) => {
+            handleApiError(error, "Error occurred while trying to load reviews.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.reviews = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -101,32 +121,39 @@ class Reviews extends React.Component {
 
     render() {
         return (
-            <div className="demo-infinite-container">
-                <InfiniteScroll
-                    initialLoad={false}
-                    pageStart={0}
-                    loadMore={this.handleInfiniteOnLoad}
-                    hasMore={!this.state.loading && this.state.hasMore}
-                    useWindow={true}
-                >
-                    <List
-                        dataSource={this.state.data}
-                        renderItem={item => (
-                            <List.Item key={item.id}>
-                                <SingleReview review={item}/>
-                            </List.Item>
-                        )}
-                    >
-                        {this.state.loading && this.state.hasMore && (
-                            <div className="demo-loading-container">
-                                <Spin/>
-                            </div>
-                        )}
-                    </List>
-                </InfiniteScroll>
-                {!this.state.loadMore && (this.state.data.length >= limit) && (<div style={{textAlign: "center"}}>
-                    <Button type="dashed" htmlType="button" onClick={this.enableLoading}>Read All Reviews</Button>
-                </div>)}
+            <div>
+                {(this.state.forbiddenErrors.reviews) && (
+                    <Alert
+                        message="You don't have permission to view reviews."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
+                <div className="demo-infinite-container">
+                    <InfiniteScroll
+                        initialLoad={false}
+                        pageStart={0}
+                        loadMore={this.handleInfiniteOnLoad}
+                        hasMore={!this.state.loading && this.state.hasMore}
+                        useWindow={true}>
+                        <List
+                            dataSource={this.state.data}
+                            renderItem={item => (
+                                <List.Item key={item.id}>
+                                    <SingleReview review={item}/>
+                                </List.Item>
+                            )}>
+                            {this.state.loading && this.state.hasMore && (
+                                <div className="demo-loading-container">
+                                    <Spin/>
+                                </div>
+                            )}
+                        </List>
+                    </InfiniteScroll>
+                    {!this.state.loadMore && (this.state.data.length >= limit) && (<div style={{textAlign: "center"}}>
+                        <Button type="dashed" htmlType="button" onClick={this.enableLoading}>Read All Reviews</Button>
+                    </div>)}
+                </div>
             </div>
         );
     }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/categories/ManageCategories.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/categories/ManageCategories.js
index 984cd5d67d..a4de159263 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/categories/ManageCategories.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/categories/ManageCategories.js
@@ -32,7 +32,7 @@ import {
     Modal,
     Row,
     Col,
-    Typography
+    Typography, Alert
 } from "antd";
 import axios from "axios";
 import {TweenOneGroup} from 'rc-tween-one';
@@ -53,13 +53,16 @@ class ManageCategories extends React.Component {
         isAddNewVisible: false,
         isEditModalVisible: false,
         currentlyEditingId: null,
-        editingValue: null
+        editingValue: null,
+        forbiddenErrors: {
+            categories: false
+        }
     };
 
     componentDidMount() {
         const config = this.props.context;
         axios.get(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories",
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories",
         ).then(res => {
             if (res.status === 200) {
                 let categories = JSON.parse(res.data.data);
@@ -70,10 +73,19 @@ class ManageCategories extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error, "Error occured while trying to load categories");
-            this.setState({
-                loading: false
-            });
+            handleApiError(error, "Error occured while trying to load categories", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.categories = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     }
 
@@ -90,7 +102,7 @@ class ManageCategories extends React.Component {
             loading: true
         });
         axios.delete(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/admin/applications/categories/" + id,
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/admin/applications/categories/" + id,
         ).then(res => {
             if (res.status === 200) {
                 notification["success"]({
@@ -125,8 +137,7 @@ class ManageCategories extends React.Component {
         const tagElem = (
             <Tag
                 color={pSBC(0.30, config.theme.primaryColor)}
-                style={{marginTop:8}}
-            >
+                style={{marginTop: 8}}>
                 {categoryName}
                 <Divider type="vertical"/>
                 <Tooltip title="edit">
@@ -150,8 +161,7 @@ class ManageCategories extends React.Component {
                             }
                         }}
                         okText="Yes"
-                        cancelText="No"
-                    >
+                        cancelText="No">
                         <Icon type="delete"/>
                     </Popconfirm>
                 </Tooltip>
@@ -168,7 +178,7 @@ class ManageCategories extends React.Component {
         const config = this.props.context;
         const tagElem = (
             <Tag
-                style={{marginTop:8}}
+                style={{marginTop: 8}}
                 closable
                 onClose={e => {
                     e.preventDefault();
@@ -229,7 +239,7 @@ class ManageCategories extends React.Component {
         const data = tempElements.map(category => category.categoryName);
 
         axios.post(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/admin/applications/categories",
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/admin/applications/categories",
             data,
         ).then(res => {
             if (res.status === 200) {
@@ -287,7 +297,7 @@ class ManageCategories extends React.Component {
         });
 
         axios.put(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/admin/applications/categories/rename?from=" + currentlyEditingId + "&to=" + editingValue,
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/admin/applications/categories/rename?from=" + currentlyEditingId + "&to=" + editingValue,
             {},
         ).then(res => {
             if (res.status === 200) {
@@ -324,11 +334,18 @@ class ManageCategories extends React.Component {
     };
 
     render() {
-        const {categories, inputVisible, inputValue, tempElements, isAddNewVisible} = this.state;
+        const {categories, inputVisible, inputValue, tempElements, isAddNewVisible, forbiddenErrors} = this.state;
         const categoriesElements = categories.map(this.renderElement);
         const temporaryElements = tempElements.map(this.renderTempElement);
         return (
             <div style={{marginBottom: 16}}>
+                {(forbiddenErrors.categories) && (
+                    <Alert
+                        message="You don't have permission to view categories."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <Card>
                     <Spin tip="Working on it..." spinning={this.state.loading}>
                         <Row>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/categories/ManageTags.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/categories/ManageTags.js
index 69c269bc17..8b9ed800b1 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/categories/ManageTags.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/categories/ManageTags.js
@@ -31,7 +31,7 @@ import {
     Popconfirm,
     Modal,
     Row, Col,
-    Typography
+    Typography, Alert
 } from "antd";
 import axios from "axios";
 import {TweenOneGroup} from 'rc-tween-one';
@@ -51,13 +51,16 @@ class ManageTags extends React.Component {
         isAddNewVisible: false,
         isEditModalVisible: false,
         currentlyEditingId: null,
-        editingValue: null
+        editingValue: null,
+        forbiddenErrors: {
+            tags: false
+        }
     };
 
     componentDidMount() {
         const config = this.props.context;
         axios.get(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags",
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags",
         ).then(res => {
             if (res.status === 200) {
                 let tags = JSON.parse(res.data.data);
@@ -68,10 +71,19 @@ class ManageTags extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load tags.");
-            this.setState({
-                loading: false
-            });
+            handleApiError(error, "Error occurred while trying to load tags.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.tags = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     }
 
@@ -90,7 +102,7 @@ class ManageTags extends React.Component {
         });
 
         axios.delete(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/admin/applications/tags/" + id
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/admin/applications/tags/" + id
         ).then(res => {
             if (res.status === 200) {
                 notification["success"]({
@@ -124,7 +136,7 @@ class ManageTags extends React.Component {
         const tagElem = (
             <Tag
                 color="#34495e"
-                style={{marginTop:8}}
+                style={{marginTop: 8}}
             >
                 {tagName}
                 <Divider type="vertical"/>
@@ -167,7 +179,7 @@ class ManageTags extends React.Component {
         const {tempElements} = this.state;
         const tagElem = (
             <Tag
-                style={{marginTop:8}}
+                style={{marginTop: 8}}
                 closable
                 onClose={e => {
                     e.preventDefault();
@@ -226,7 +238,7 @@ class ManageTags extends React.Component {
 
         const data = tempElements.map(tag => tag.tagName);
 
-        axios.post(window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags",
+        axios.post(window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags",
             data,
         ).then(res => {
             if (res.status === 200) {
@@ -284,7 +296,7 @@ class ManageTags extends React.Component {
         });
 
         axios.put(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags/rename?from=" + currentlyEditingId + "&to=" + editingValue,
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags/rename?from=" + currentlyEditingId + "&to=" + editingValue,
             {},
         ).then(res => {
             if (res.status === 200) {
@@ -321,11 +333,18 @@ class ManageTags extends React.Component {
     };
 
     render() {
-        const {tags, inputVisible, inputValue, tempElements, isAddNewVisible} = this.state;
+        const {tags, inputVisible, inputValue, tempElements, isAddNewVisible, forbiddenErrors} = this.state;
         const tagsElements = tags.map(this.renderElement);
         const temporaryElements = tempElements.map(this.renderTempElement);
         return (
             <div style={{marginBottom: 16}}>
+                {(forbiddenErrors.tags) && (
+                    <Alert
+                        message="You don't have permission to view tags."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <Card>
                     <Spin tip="Working on it..." spinning={this.state.loading}>
                         <Row>
@@ -365,8 +384,7 @@ class ManageTags extends React.Component {
                                         },
                                     }}
                                     leave={{opacity: 0, width: 0, scale: 0, duration: 200}}
-                                    appear={false}
-                                >
+                                    appear={false}>
                                     {temporaryElements}
 
                                     {inputVisible && (
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js
index 340d28aa93..39dc99ddb1 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js
@@ -55,7 +55,10 @@ class AddNewAppFormComponent extends React.Component {
             isError: false,
             deviceType: null,
             supportedOsVersions: [],
-            errorText: ""
+            errorText: "",
+            forbiddenErrors: {
+                supportedOsVersions: false
+            }
         };
     }
 
@@ -143,15 +146,24 @@ class AddNewAppFormComponent extends React.Component {
                 });
             }
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load supported OS versions.");
-            this.setState({
-                loading: false
-            });
+            handleApiError(error, "Error occurred while trying to load supported OS versions.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.supportedOsVersions = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
     render() {
-        const {loading, current, isError, supportedOsVersions, errorText} = this.state;
+        const {loading, current, isError, supportedOsVersions, errorText, forbiddenErrors} = this.state;
         const {formConfig} = this.props;
         return (
             <div>
@@ -171,6 +183,7 @@ class AddNewAppFormComponent extends React.Component {
                                 </div>
                                 <div style={{display: (current === 1 ? 'unset' : 'none')}}>
                                     <NewAppUploadForm
+                                        forbiddenErrors={forbiddenErrors}
                                         formConfig={formConfig}
                                         supportedOsVersions={supportedOsVersions}
                                         onSuccessReleaseData={this.onSuccessReleaseData}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js
index 1667f2bb4c..1a0ac43127 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js
@@ -17,10 +17,11 @@
  */
 
 import React from "react";
-import {Button, Col, Divider, Form, Icon, Input, notification, Row, Select, Switch, Upload} from "antd";
+import {Alert, Button, Col, Divider, Form, Icon, Input, notification, Row, Select, Spin, Switch, Upload} from "antd";
 import axios from "axios";
 import {withConfigContext} from "../../../context/ConfigContext";
 import {handleApiError} from "../../../js/Utils";
+import debounce from 'lodash.debounce';
 
 const formItemLayout = {
     labelCol: {
@@ -42,12 +43,21 @@ class NewAppDetailsForm extends React.Component {
         this.state = {
             categories: [],
             tags: [],
-            deviceTypes:[]
+            deviceTypes: [],
+            fetching: false,
+            roleSearchValue: [],
+            unrestrictedRoles: [],
+            forbiddenErrors: {
+                categories: false,
+                tags: false,
+                deviceTypes: false,
+                roles: false
+            }
         };
-
+        this.lastFetchId = 0;
+        this.fetchRoles = debounce(this.fetchRoles, 800);
     }
 
-
     handleSubmit = e => {
         e.preventDefault();
         const {formConfig} = this.props;
@@ -58,13 +68,17 @@ class NewAppDetailsForm extends React.Component {
                 this.setState({
                     loading: true
                 });
-                const {name, description, categories, tags, price, isSharedWithAllTenants, binaryFile, icon, screenshots, releaseDescription, releaseType} = values;
+                const {name, description, categories, tags, unrestrictedRoles} = values;
+                const unrestrictedRolesData = [];
+                unrestrictedRoles.map(val => {
+                    unrestrictedRolesData.push(val.key);
+                });
                 const application = {
                     name,
                     description,
                     categories,
                     tags,
-                    unrestrictedRoles: [],
+                    unrestrictedRoles: unrestrictedRolesData,
                 };
 
                 if (formConfig.installationType !== "WEB_CLIP") {
@@ -81,6 +95,8 @@ class NewAppDetailsForm extends React.Component {
 
     componentDidMount() {
         this.getCategories();
+        this.getTags();
+        this.getDeviceTypes();
     }
 
     getCategories = () => {
@@ -95,13 +111,20 @@ class NewAppDetailsForm extends React.Component {
                     loading: false
                 });
             }
-            this.getTags();
-
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load categories.");
-            this.setState({
-                loading: false
-            });
+            handleApiError(error, "Error occurred while trying to load categories.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.categories = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -117,13 +140,20 @@ class NewAppDetailsForm extends React.Component {
                     loading: false,
                 });
             }
-            this.getDeviceTypes();
-
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load tags.");
-            this.setState({
-                loading: false
-            });
+            handleApiError(error, "Error occurred while trying to load tags.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.tags = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -141,15 +171,15 @@ class NewAppDetailsForm extends React.Component {
                 const allowedDeviceTypes = [];
 
                 // exclude mobile device types if installation type is custom
-                if(installationType==="CUSTOM"){
-                    allDeviceTypes.forEach(deviceType=>{
-                        if(!mobileDeviceTypes.includes(deviceType.name)){
+                if (installationType === "CUSTOM") {
+                    allDeviceTypes.forEach(deviceType => {
+                        if (!mobileDeviceTypes.includes(deviceType.name)) {
                             allowedDeviceTypes.push(deviceType);
                         }
                     });
-                }else{
-                    allDeviceTypes.forEach(deviceType=>{
-                        if(mobileDeviceTypes.includes(deviceType.name)){
+                } else {
+                    allDeviceTypes.forEach(deviceType => {
+                        if (mobileDeviceTypes.includes(deviceType.name)) {
                             allowedDeviceTypes.push(deviceType);
                         }
                     });
@@ -161,16 +191,76 @@ class NewAppDetailsForm extends React.Component {
                 });
             }
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load device types.");
-            this.setState({
-                loading: false
-            });
+            handleApiError(error, "Error occurred while trying to load device types.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.deviceTypes = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
+        });
+    };
+
+    fetchRoles = value => {
+        const config = this.props.context;
+        this.lastFetchId += 1;
+        const fetchId = this.lastFetchId;
+        this.setState({data: [], fetching: true});
+
+        axios.get(
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt + "/roles?filter=" + value,
+        ).then(res => {
+            if (res.status === 200) {
+                if (fetchId !== this.lastFetchId) {
+                    // for fetch callback order
+                    return;
+                }
+
+                const data = res.data.data.roles.map(role => ({
+                    text: role,
+                    value: role,
+                }));
+
+                this.setState({
+                    unrestrictedRoles: data,
+                    fetching: false
+                });
+            }
+
+        }).catch((error) => {
+            handleApiError(error, "Error occurred while trying to load roles.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.roles = true;
+                this.setState({
+                    forbiddenErrors,
+                    fetching: false
+                })
+            } else {
+                this.setState({
+                    fetching: false
+                });
+            }
+        });
+    };
+
+    handleRoleSearch = roleSearchValue => {
+        this.setState({
+            roleSearchValue,
+            unrestrictedRoles: [],
+            fetching: false,
         });
     };
 
     render() {
         const {formConfig} = this.props;
-        const {categories, tags, deviceTypes} = this.state;
+        const {categories, tags, deviceTypes, fetching, roleSearchValue, unrestrictedRoles, forbiddenErrors} = this.state;
         const {getFieldDecorator} = this.props.form;
 
         return (
@@ -185,34 +275,41 @@ class NewAppDetailsForm extends React.Component {
                             layout="horizontal"
                             onSubmit={this.handleSubmit}>
                             {formConfig.installationType !== "WEB_CLIP" && (
-                                <Form.Item {...formItemLayout} label="Device Type">
-                                    {getFieldDecorator('deviceType', {
-                                            rules: [
+                                <div>
+                                    {(forbiddenErrors.deviceTypes) && (
+                                        <Alert
+                                            message="You don't have permission to view device types."
+                                            type="warning"
+                                            banner
+                                            closable/>
+                                    )}
+                                    <Form.Item {...formItemLayout} label="Device Type">
+                                        {getFieldDecorator('deviceType', {
+                                                rules: [
+                                                    {
+                                                        required: true,
+                                                        message: 'Please select device type'
+                                                    }
+                                                ],
+                                            }
+                                        )(
+                                            <Select
+                                                style={{width: '100%'}}
+                                                placeholder="select device type">
                                                 {
-                                                    required: true,
-                                                    message: 'Please select device type'
+                                                    deviceTypes.map(deviceType => {
+                                                        return (
+                                                            <Option
+                                                                key={deviceType.name}>
+                                                                {deviceType.name}
+                                                            </Option>
+                                                        )
+                                                    })
                                                 }
-                                            ],
-                                        }
-                                    )(
-                                        <Select
-                                            style={{width: '100%'}}
-                                            placeholder="select device type"
-                                            onChange={this.handleCategoryChange}
-                                        >
-                                            {
-                                                deviceTypes.map(deviceType => {
-                                                    return (
-                                                        <Option
-                                                            key={deviceType.name}>
-                                                            {deviceType.name}
-                                                        </Option>
-                                                    )
-                                                })
-                                            }
-                                        </Select>
-                                    )}
-                                </Form.Item>
+                                            </Select>
+                                        )}
+                                    </Form.Item>
+                                </div>
                             )}
 
                             {/*app name*/}
@@ -238,6 +335,43 @@ class NewAppDetailsForm extends React.Component {
                                     <TextArea placeholder="Enter the description..." rows={7}/>
                                 )}
                             </Form.Item>
+
+                            {/*Unrestricted Roles*/}
+                            {(forbiddenErrors.roles) && (
+                                <Alert
+                                    message="You don't have permission to view roles."
+                                    type="warning"
+                                    banner
+                                    closable/>
+                            )}
+                            <Form.Item {...formItemLayout} label="Unrestricted Roles">
+                                {getFieldDecorator('unrestrictedRoles', {
+                                    rules: [],
+                                    initialValue: []
+                                })(
+                                    <Select
+                                        mode="multiple"
+                                        labelInValue
+                                        // value={roleSearchValue}
+                                        placeholder="Search roles"
+                                        notFoundContent={fetching ? <Spin size="small"/> : null}
+                                        filterOption={false}
+                                        onSearch={this.fetchRoles}
+                                        onChange={this.handleRoleSearch}
+                                        style={{width: '100%'}}>
+                                        {unrestrictedRoles.map(d => (
+                                            <Option key={d.value}>{d.text}</Option>
+                                        ))}
+                                    </Select>
+                                )}
+                            </Form.Item>
+                            {(forbiddenErrors.categories) && (
+                                <Alert
+                                    message="You don't have permission to view categories."
+                                    type="warning"
+                                    banner
+                                    closable/>
+                            )}
                             <Form.Item {...formItemLayout} label="Categories">
                                 {getFieldDecorator('categories', {
                                     rules: [{
@@ -249,8 +383,7 @@ class NewAppDetailsForm extends React.Component {
                                         mode="multiple"
                                         style={{width: '100%'}}
                                         placeholder="Select a Category"
-                                        onChange={this.handleCategoryChange}
-                                    >
+                                        onChange={this.handleCategoryChange}>
                                         {
                                             categories.map(category => {
                                                 return (
@@ -264,6 +397,13 @@ class NewAppDetailsForm extends React.Component {
                                     </Select>
                                 )}
                             </Form.Item>
+                            {(forbiddenErrors.tags) && (
+                                <Alert
+                                    message="You don't have permission to view tags."
+                                    type="warning"
+                                    banner
+                                    closable/>
+                            )}
                             <Form.Item {...formItemLayout} label="Tags">
                                 {getFieldDecorator('tags', {
                                     rules: [{
@@ -274,8 +414,7 @@ class NewAppDetailsForm extends React.Component {
                                     <Select
                                         mode="tags"
                                         style={{width: '100%'}}
-                                        placeholder="Tags"
-                                    >
+                                        placeholder="Tags">
                                         {
                                             tags.map(tag => {
                                                 return (
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js
index c7916c2c13..ebb761c322 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js
@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Button, Col, Form, Icon, Input, Row, Select, Switch, Upload, InputNumber, Modal} from "antd";
+import {Button, Col, Form, Icon, Input, Row, Select, Switch, Upload, InputNumber, Modal, Alert} from "antd";
 import "@babel/polyfill";
 import axios from "axios";
 import {handleApiError} from "../../../js/Utils";
@@ -117,7 +117,7 @@ class NewAppUploadForm extends React.Component {
                             osVersionsHelperText: 'Please select supported OS versions',
                             osVersionsValidateStatus: 'error',
                         });
-                    } else if (this.lowerOsVersion >= this.upperOsVersion) {
+                    } else if (parseFloat(this.lowerOsVersion) >= parseFloat(this.upperOsVersion)) {
                         isFormValid = false;
                         this.setState({
                             osVersionsHelperText: 'Please select valid range',
@@ -221,7 +221,7 @@ class NewAppUploadForm extends React.Component {
     };
 
     handleLowerOsVersionChange = (lowerOsVersion) => {
-        this.lowerOsVersion = parseFloat(lowerOsVersion);
+        this.lowerOsVersion = lowerOsVersion;
         this.setState({
             osVersionsValidateStatus: 'validating',
             osVersionsHelperText: ''
@@ -229,7 +229,11 @@ class NewAppUploadForm extends React.Component {
     };
 
     handleUpperOsVersionChange = (upperOsVersion) => {
-        this.upperOsVersion = parseFloat(upperOsVersion);
+        if (upperOsVersion === "all") {
+            this.upperOsVersion = this.props.supportedOsVersions[this.props.supportedOsVersions.length - 1]["versionName"];
+        }else{
+            this.upperOsVersion = upperOsVersion;
+        }
         this.setState({
             osVersionsValidateStatus: 'validating',
             osVersionsHelperText: ''
@@ -400,60 +404,69 @@ class NewAppUploadForm extends React.Component {
                             </Form.Item>
 
                             {(formConfig.installationType !== "WEB_CLIP" && formConfig.installationType !== "CUSTOM") && (
-                                <Form.Item
-                                    {...formItemLayout}
-                                    label="Supported OS Versions"
-                                    validateStatus={osVersionsValidateStatus}
-                                    help={osVersionsHelperText}>
-                                    {getFieldDecorator('supportedOS', {
-                                        rules: [{
-                                            required: true
-                                        }],
-                                        initialValue: false
-                                    })(
-                                        <div>
-                                            <InputGroup>
-                                                <Row gutter={8}>
-                                                    <Col span={11}>
-                                                        <Select
-                                                            placeholder="Lower version"
-                                                            style={{width: "100%"}}
-                                                            onChange={this.handleLowerOsVersionChange}>
-                                                            {supportedOsVersions.map(version => (
-                                                                <Option key={version.versionName}
-                                                                        value={version.versionName}>
-                                                                    {version.versionName}
-                                                                </Option>
-                                                            ))}
-                                                        </Select>
-                                                    </Col>
-                                                    <Col span={2}>
-                                                        <p> - </p>
-                                                    </Col>
-                                                    <Col span={11}>
-                                                        <Select style={{width: "100%"}}
-                                                                placeholder="Upper version"
-                                                                defaultActiveFirstOption={true}
-                                                                onChange={this.handleUpperOsVersionChange}>
-                                                            {(supportedOsVersions.length > 0) &&(
-                                                                <Option key="all"
-                                                                        value={supportedOsVersions[supportedOsVersions.length-1]["versionName"]}>
-                                                                    All
-                                                                </Option>
-                                                            )}
-                                                            {supportedOsVersions.map(version => (
-                                                                <Option key={version.versionName}
-                                                                        value={version.versionName}>
-                                                                    {version.versionName}
-                                                                </Option>
-                                                            ))}
-                                                        </Select>
-                                                    </Col>
-                                                </Row>
-                                            </InputGroup>
-                                        </div>
+                                <div>
+                                    {(this.props.forbiddenErrors.supportedOsVersions) && (
+                                        <Alert
+                                            message="You don't have permission to view supported OS versions."
+                                            type="warning"
+                                            banner
+                                            closable/>
                                     )}
-                                </Form.Item>
+                                    <Form.Item
+                                        {...formItemLayout}
+                                        label="Supported OS Versions"
+                                        validateStatus={osVersionsValidateStatus}
+                                        help={osVersionsHelperText}>
+                                        {getFieldDecorator('supportedOS', {
+                                            rules: [{
+                                                required: true
+                                            }],
+                                            initialValue: false
+                                        })(
+                                            <div>
+                                                <InputGroup>
+                                                    <Row gutter={8}>
+                                                        <Col span={11}>
+                                                            <Select
+                                                                placeholder="Lower version"
+                                                                style={{width: "100%"}}
+                                                                onChange={this.handleLowerOsVersionChange}>
+                                                                {supportedOsVersions.map(version => (
+                                                                    <Option key={version.versionName}
+                                                                            value={version.versionName}>
+                                                                        {version.versionName}
+                                                                    </Option>
+                                                                ))}
+                                                            </Select>
+                                                        </Col>
+                                                        <Col span={2}>
+                                                            <p> - </p>
+                                                        </Col>
+                                                        <Col span={11}>
+                                                            <Select style={{width: "100%"}}
+                                                                    placeholder="Upper version"
+                                                                    defaultActiveFirstOption={true}
+                                                                    onChange={this.handleUpperOsVersionChange}>
+                                                                {(supportedOsVersions.length > 0) && (
+                                                                    <Option key="all"
+                                                                            value="all">
+                                                                        All
+                                                                    </Option>
+                                                                )}
+                                                                {supportedOsVersions.map(version => (
+                                                                    <Option key={version.versionName}
+                                                                            value={version.versionName}>
+                                                                        {version.versionName}
+                                                                    </Option>
+                                                                ))}
+                                                            </Select>
+                                                        </Col>
+                                                    </Row>
+                                                </InputGroup>
+                                            </div>
+                                        )}
+                                    </Form.Item>
+                                </div>
                             )}
                             <Form.Item {...formItemLayout} label="Meta Data">
                                 {getFieldDecorator('meta', {})(
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-release/AddReleaseForm.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-release/AddReleaseForm.js
index 1fa47170e9..abaea5dbe9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-release/AddReleaseForm.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-release/AddReleaseForm.js
@@ -41,7 +41,10 @@ class AddNewReleaseFormComponent extends React.Component {
             supportedOsVersions: [],
             application: null,
             release: null,
-            deviceType: null
+            deviceType: null,
+            forbiddenErrors: {
+                supportedOsVersions: false
+            }
         };
     }
 
@@ -63,10 +66,19 @@ class AddNewReleaseFormComponent extends React.Component {
                 });
             }
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load supported OS versions.");
-            this.setState({
-                loading: false
-            });
+            handleApiError(error, "Error occurred while trying to load supported OS versions.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.supportedOsVersions = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -85,7 +97,7 @@ class AddNewReleaseFormComponent extends React.Component {
         data.append("applicationRelease", blob);
 
         const url = window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher +
-                    "/applications/" + deviceType + "/ent-app/" + appId;
+            "/applications/" + deviceType + "/ent-app/" + appId;
         axios.post(
             url,
             data
@@ -122,14 +134,15 @@ class AddNewReleaseFormComponent extends React.Component {
     };
 
     render() {
-        const {loading, supportedOsVersions} = this.state;
+        const {loading, supportedOsVersions, forbiddenErrors} = this.state;
         return (
             <div>
                 <Spin tip="Uploading..." spinning={loading}>
                     <Row>
-                        <Col span={17} offset={4} >
+                        <Col span={17} offset={4}>
                             <Card>
                                 <NewAppUploadForm
+                                    forbiddenErrors={forbiddenErrors}
                                     formConfig={formConfig}
                                     supportedOsVersions={supportedOsVersions}
                                     onSuccessReleaseData={this.onSuccessReleaseData}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/Utils.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/Utils.js
index 2ef4f8bf0f..d5b976499e 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/Utils.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/Utils.js
@@ -18,11 +18,12 @@
 
 import {notification} from "antd";
 
-export const handleApiError = (error, message) => {
+export const handleApiError = (error, message, isForbiddenMessageSilent = false) => {
     if (error.hasOwnProperty("response") && error.response.status === 401) {
         const redirectUrl = encodeURI(window.location.href);
         window.location.href = window.location.origin + `/publisher/login?redirect=${redirectUrl}`;
-    } else {
+        // silence 403 forbidden message
+    } else if (!(isForbiddenMessageSilent && error.hasOwnProperty("response") && error.response.status === 403)) {
         notification["error"]({
             message: "There was a problem",
             duration: 10,
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js
index 40fd63a0ba..fc653d7bf4 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js
@@ -24,6 +24,7 @@ import ReleaseView from "../../../../components/apps/release/ReleaseView";
 import LifeCycle from "../../../../components/apps/release/lifeCycle/LifeCycle";
 import {withConfigContext} from "../../../../context/ConfigContext";
 import {handleApiError} from "../../../../js/Utils";
+import NewAppUploadForm from "../../../../components/new-app/subForms/NewAppUploadForm";
 
 const {Title} = Typography;
 
@@ -40,13 +41,19 @@ class Release extends React.Component {
             release: null,
             currentLifecycleStatus: null,
             lifecycle: null,
-            supportedOsVersions:[]
+            supportedOsVersions: [],
+            forbiddenErrors: {
+                supportedOsVersions: false,
+                lifeCycle: false
+            }
         };
     }
 
     componentDidMount() {
         const {uuid} = this.props.match.params;
         this.fetchData(uuid);
+        this.getLifecycle();
+
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
@@ -86,10 +93,8 @@ class Release extends React.Component {
                     loading: false,
                     uuid: uuid
                 });
-                if(config.deviceTypes.mobileTypes.includes(app.deviceType)){
+                if (config.deviceTypes.mobileTypes.includes(app.deviceType)) {
                     this.getSupportedOsVersions(app.deviceType);
-                }else{
-                    this.getLifecycle();
                 }
             }
 
@@ -111,8 +116,15 @@ class Release extends React.Component {
                 })
             }
 
-        }).catch(function (error) {
-            handleApiError(error, "Error occurred while trying to load lifecycle configuration.");
+        }).catch((error) => {
+            handleApiError(error, "Error occurred while trying to load lifecycle configuration.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.lifeCycle = true;
+                this.setState({
+                    forbiddenErrors
+                })
+            }
         });
     };
 
@@ -125,21 +137,28 @@ class Release extends React.Component {
             if (res.status === 200) {
                 let supportedOsVersions = JSON.parse(res.data.data);
                 this.setState({
-                    supportedOsVersions,
-                    loading: false,
+                    supportedOsVersions
                 });
-                this.getLifecycle();
             }
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load supported OS versions.");
-            this.setState({
-                loading: false
-            });
+            handleApiError(error, "Error occurred while trying to load supported OS versions.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.supportedOsVersions = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
     render() {
-        const {app, release, currentLifecycleStatus, lifecycle, loading} = this.state;
+        const {app, release, currentLifecycleStatus, lifecycle, loading, forbiddenErrors} = this.state;
 
         if (release == null && loading === false) {
             return (
@@ -159,12 +178,13 @@ class Release extends React.Component {
                                 <Skeleton loading={loading} avatar={{size: 'large'}} active paragraph={{rows: 18}}>
                                     {(release !== null) && (
                                         <ReleaseView
+                                            forbiddenErrors={forbiddenErrors}
                                             app={app}
                                             release={release}
                                             currentLifecycleStatus={currentLifecycleStatus}
                                             lifecycle={lifecycle}
                                             updateRelease={this.updateRelease}
-                                            supportedOsVersions = {[...this.state.supportedOsVersions]}
+                                            supportedOsVersions={[...this.state.supportedOsVersions]}
                                         />)
                                     }
                                 </Skeleton>
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/AppList.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js
index 241ea12acd..710821f324 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppList.js
@@ -18,7 +18,7 @@
 
 import React from "react";
 import AppCard from "./AppCard";
-import {Col, message, notification, Row, Result, Skeleton} from "antd";
+import {Col, message, notification, Row, Result, Skeleton, Alert} from "antd";
 import axios from "axios";
 import {withConfigContext} from "../../context/ConfigContext";
 import {handleApiError} from "../../js/Utils";
@@ -28,7 +28,10 @@ class AppList extends React.Component {
         super(props);
         this.state = {
             apps: [],
-            loading: true
+            loading: true,
+            forbiddenErrors: {
+                apps: false
+            }
         }
     }
 
@@ -60,7 +63,7 @@ class AppList extends React.Component {
         });
         //send request to the invoker
         axios.post(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/applications/",
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/applications/",
             payload,
         ).then(res => {
             if (res.status === 200) {
@@ -73,18 +76,37 @@ class AppList extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error,"Error occurred while trying to load apps.");
-            this.setState({loading: false});
+            handleApiError(error, "Error occurred while trying to load apps.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.apps = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
     render() {
-        const {apps,loading} = this.state;
+        const {apps, loading, forbiddenErrors} = this.state;
 
         return (
             <Skeleton loading={loading} active>
                 <Row gutter={16}>
-                    {apps.length === 0 && (
+                    {(forbiddenErrors.apps) && (
+                        <Result
+                            status="403"
+                            title="403"
+                            subTitle="You don't have permission to view apps."
+                            // extra={<Button type="primary">Back Home</Button>}
+                        />
+                    )}
+                    {!((forbiddenErrors.apps)) && apps.length === 0 && (
                         <Result
                             status="404"
                             title="No apps, yet."
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 78%
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..be71eb4e8f 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
@@ -18,7 +18,20 @@
 
 import React from "react";
 import axios from "axios";
-import {Tag, message, notification, Table, Typography, Tooltip, Icon, Divider, Button, Modal, Select} from "antd";
+import {
+    Tag,
+    message,
+    notification,
+    Table,
+    Typography,
+    Tooltip,
+    Icon,
+    Divider,
+    Button,
+    Modal,
+    Select,
+    Alert
+} from "antd";
 import TimeAgo from 'javascript-time-ago'
 
 // Load locale-specific relative date/time formatting rules.
@@ -53,7 +66,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 +150,7 @@ const getTimeAgo = (time) => {
 };
 
 
-class InstalledDevicesTable extends React.Component {
+class SubscriptionDetails extends React.Component {
     constructor(props) {
         super(props);
         config = this.props.context;
@@ -140,7 +162,8 @@ class InstalledDevicesTable extends React.Component {
             selectedRows: [],
             deviceGroups: [],
             groupModalVisible: false,
-            selectedGroupId: []
+            selectedGroupId: [],
+            isForbidden: false
         };
     }
 
@@ -171,18 +194,25 @@ 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
                 });
             }
 
         }).catch((error) => {
-            handleApiError(error, "Something went wrong when trying to load subscription data.");
-            this.setState({loading: false});
+            handleApiError(error, "Something went wrong when trying to load subscription data.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbidden: true,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -190,11 +220,23 @@ class InstalledDevicesTable extends React.Component {
         const {data, pagination, loading, selectedRows} = this.state;
         return (
             <div>
+                {(this.state.isForbidden) && (
+                    <Alert
+                        message="You don't have permission to view subscription details."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <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 +256,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
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js
index 3e67c54c03..ed69db96ef 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js
@@ -18,7 +18,7 @@
 
 import React from "react";
 import axios from "axios";
-import {Button, message, DatePicker, Table, Typography} from "antd";
+import {Button, message, DatePicker, Table, Typography, Alert} from "antd";
 import TimeAgo from 'javascript-time-ago'
 
 // Load locale-specific relative date/time formatting rules.
@@ -112,7 +112,8 @@ class DeviceInstall extends React.Component {
             loading: false,
             selectedRows: [],
             scheduledTime: null,
-            isScheduledInstallVisible: false
+            isScheduledInstallVisible: false,
+            isForbidden: false
         };
     }
 
@@ -169,8 +170,17 @@ class DeviceInstall extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load devices.");
-            this.setState({loading: false});
+            handleApiError(error, "Error occurred while trying to load devices.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbidden: true,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -209,6 +219,13 @@ class DeviceInstall extends React.Component {
                     Start installing the application for one or more users by entering the corresponding user name.
                     Select install to automatically start downloading the application for the respective user/users.
                 </Text>
+                {(this.state.isForbidden) && (
+                    <Alert
+                        message="You don't have permission to view devices."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <Table
                     style={{paddingTop: 20}}
                     columns={columns}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceUninstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceUninstall.js
index 4daf769792..fa449ccd37 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceUninstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceUninstall.js
@@ -18,7 +18,7 @@
 
 import React from "react";
 import axios from "axios";
-import {Button, Select, Table, Typography} from "antd";
+import {Alert, Button, Select, Table, Typography} from "antd";
 import TimeAgo from 'javascript-time-ago'
 
 // Load locale-specific relative date/time formatting rules.
@@ -109,7 +109,8 @@ class DeviceUninstall extends React.Component {
             data: [],
             pagination: {},
             loading: false,
-            selectedRows: []
+            selectedRows: [],
+            isForbidden: false
         };
     }
 
@@ -164,8 +165,17 @@ class DeviceUninstall extends React.Component {
                 });
             }
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load devices.");
-            this.setState({loading: false});
+            handleApiError(error, "Error occurred while trying to load devices.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbidden: true,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -204,6 +214,13 @@ class DeviceUninstall extends React.Component {
                     Start uninstalling the application for devices by selecting the corresponding devices.
                     Select uninstall to automatically start uninstalling the application for the respective devices.
                 </Text>
+                {(this.state.isForbidden) && (
+                    <Alert
+                        message="You don't have permission to view installed devices."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <Table
                     style={{paddingTop: 20}}
                     columns={columns}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js
index be8c598a23..7d1d41a048 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupInstall.js
@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Typography, Select, Spin, message, notification, Button} from "antd";
+import {Typography, Select, Spin, message, notification, Button, Alert} from "antd";
 import debounce from 'lodash.debounce';
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";
@@ -40,6 +40,7 @@ class GroupInstall extends React.Component {
         data: [],
         value: [],
         fetching: false,
+        isForbidden: false
     };
 
     fetchUser = value => {
@@ -67,8 +68,17 @@ class GroupInstall extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error,"Error occurred while trying to load groups.");
-            this.setState({fetching: false});
+            handleApiError(error,"Error occurred while trying to load groups.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbidden: true,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -96,6 +106,13 @@ class GroupInstall extends React.Component {
         return (
             <div>
                 <Text>Start installing the application for one or more groups by entering the corresponding group name. Select install to automatically start downloading the application for the respective device group/ groups.</Text>
+                {(this.state.isForbidden) && (
+                    <Alert
+                        message="You don't have permission to view groups."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <br/>
                 <br/>
                 <Select
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupUninstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupUninstall.js
index 82061b434c..b7f998a9d7 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupUninstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/GroupUninstall.js
@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Typography, Select, Spin, message, notification, Button} from "antd";
+import {Typography, Select, Spin, message, notification, Button, Alert} from "antd";
 import debounce from 'lodash.debounce';
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";
@@ -39,6 +39,7 @@ class GroupUninstall extends React.Component {
         data: [],
         value: [],
         fetching: false,
+        isForbidden: false
     };
 
     fetchUser = value => {
@@ -50,9 +51,8 @@ class GroupUninstall extends React.Component {
         const uuid = this.props.uuid;
 
         axios.get(
-                window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store+ "/subscription/" + uuid + "/"+
-                "/GROUP?",
-
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/subscription/" + uuid + "/" +
+            "/GROUP?",
         ).then(res => {
             if (res.status === 200) {
                 if (fetchId !== this.lastFetchId) {
@@ -69,8 +69,17 @@ class GroupUninstall extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error,"Error occurred while trying to load groups.");
-            this.setState({fetching: false});
+            handleApiError(error, "Error occurred while trying to load groups.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbidden: true,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -82,13 +91,13 @@ class GroupUninstall extends React.Component {
         });
     };
 
-    uninstall = (timestamp=null) =>{
+    uninstall = (timestamp = null) => {
         const {value} = this.state;
         const data = [];
-        value.map(val=>{
+        value.map(val => {
             data.push(val.key);
         });
-        this.props.onUninstall("group", data, "uninstall",timestamp);
+        this.props.onUninstall("group", data, "uninstall", timestamp);
     };
 
     render() {
@@ -96,26 +105,35 @@ class GroupUninstall extends React.Component {
         const {fetching, data, value} = this.state;
 
         return (
-                <div>
-                    <Text>Start uninstalling the application for one or more groups by entering the corresponding group name. Select uninstall to automatically start uninstalling the application for the respective device group/ groups.</Text>
-                    <br/>
-                    <br/>
-                    <Select
-                            mode="multiple"
-                            labelInValue
-                            value={value}
-                            placeholder="Search groups"
-                            notFoundContent={fetching ? <Spin size="small"/> : null}
-                            filterOption={false}
-                            onSearch={this.fetchUser}
-                            onChange={this.handleChange}
-                            style={{width: '100%'}}>
-                        {data.map(d => (
-                                <Option key={d.value}>{d.text}</Option>
-                        ))}
-                    </Select>
-                    <InstallModalFooter type="Uninstall" operation={this.uninstall} disabled={value.length===0}/>
-                </div>
+            <div>
+                <Text>Start uninstalling the application for one or more groups by entering the corresponding group
+                    name. Select uninstall to automatically start uninstalling the application for the respective device
+                    group/ groups.</Text>
+                {(this.state.isForbidden) && (
+                    <Alert
+                        message="You don't have permission to view installed groups."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
+                <br/>
+                <br/>
+                <Select
+                    mode="multiple"
+                    labelInValue
+                    value={value}
+                    placeholder="Search groups"
+                    notFoundContent={fetching ? <Spin size="small"/> : null}
+                    filterOption={false}
+                    onSearch={this.fetchUser}
+                    onChange={this.handleChange}
+                    style={{width: '100%'}}>
+                    {data.map(d => (
+                        <Option key={d.value}>{d.text}</Option>
+                    ))}
+                </Select>
+                <InstallModalFooter type="Uninstall" operation={this.uninstall} disabled={value.length === 0}/>
+            </div>
         );
     }
 }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js
index 276ba34ab3..063311953a 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleInstall.js
@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Typography, Select, Spin, message, notification, Button} from "antd";
+import {Typography, Select, Spin, message, notification, Button, Alert} from "antd";
 import debounce from 'lodash.debounce';
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";
@@ -40,6 +40,7 @@ class RoleInstall extends React.Component {
         data: [],
         value: [],
         fetching: false,
+        isForbidden: false
     };
 
     fetchUser = value => {
@@ -67,8 +68,17 @@ class RoleInstall extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error,"Error occurred while trying to load roles.");
-            this.setState({fetching: false});
+            handleApiError(error,"Error occurred while trying to load roles.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbidden: true,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -96,6 +106,13 @@ class RoleInstall extends React.Component {
         return (
             <div>
                 <Text>Start installing the application for one or more roles by entering the corresponding role name. Select install to automatically start downloading the application for the respective user role/roles.</Text>
+                {(this.state.isForbidden) && (
+                    <Alert
+                        message="You don't have permission to view roles."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <br/>
                 <br/>
                 <Select
@@ -107,8 +124,7 @@ class RoleInstall extends React.Component {
                     filterOption={false}
                     onSearch={this.fetchUser}
                     onChange={this.handleChange}
-                    style={{width: '100%'}}
-                >
+                    style={{width: '100%'}}>
                     {data.map(d => (
                         <Option key={d.value}>{d.text}</Option>
                     ))}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleUninstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleUninstall.js
index 5e7462de3c..0076e80b70 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleUninstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/RoleUninstall.js
@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Typography, Select, Spin, message, notification, Button} from "antd";
+import {Typography, Select, Spin, message, notification, Button, Alert} from "antd";
 import debounce from 'lodash.debounce';
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";
@@ -39,6 +39,7 @@ class RoleUninstall extends React.Component {
         data: [],
         value: [],
         fetching: false,
+        isForbidden: false
     };
 
     fetchUser = value => {
@@ -50,8 +51,8 @@ class RoleUninstall extends React.Component {
         const uuid = this.props.uuid;
 
         axios.get(
-                window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store+ "/subscription/" + uuid + "/"+
-                "/ROLE?",
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/subscription/" + uuid + "/" +
+            "/ROLE?",
         ).then(res => {
             if (res.status === 200) {
                 if (fetchId !== this.lastFetchId) {
@@ -68,53 +69,71 @@ class RoleUninstall extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error,"Error occurred while trying to load roles.");
-            this.setState({fetching: false});
+            handleApiError(error, "Error occurred while trying to load roles.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbidden: true,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
     handleChange = value => {
         this.setState({
-                          value,
-                          data: [],
-                          fetching: false,
-                      });
+            value,
+            data: [],
+            fetching: false,
+        });
     };
 
-    uninstall = (timestamp=null) =>{
+    uninstall = (timestamp = null) => {
         const {value} = this.state;
         const data = [];
-        value.map(val=>{
+        value.map(val => {
             data.push(val.key);
         });
-        this.props.onUninstall("role", data, "uninstall",timestamp);
+        this.props.onUninstall("role", data, "uninstall", timestamp);
     };
 
     render() {
         const {fetching, data, value} = this.state;
 
         return (
-                <div>
-                    <Text>Start uninstalling the application for one or more roles by entering the corresponding role name. Select uninstall to automatically start uninstalling the application for the respective user role/roles.</Text>
-                    <br/>
-                    <br/>
-                    <Select
-                            mode="multiple"
-                            labelInValue
-                            value={value}
-                            placeholder="Search roles"
-                            notFoundContent={fetching ? <Spin size="small"/> : null}
-                            filterOption={false}
-                            onSearch={this.fetchUser}
-                            onChange={this.handleChange}
-                            style={{width: '100%'}}
-                    >
-                        {data.map(d => (
-                                <Option key={d.value}>{d.text}</Option>
-                        ))}
-                    </Select>
-                    <InstallModalFooter type="Uninstall" operation={this.uninstall} disabled={value.length===0}/>
-                </div>
+            <div>
+                <Text>Start uninstalling the application for one or more roles by entering the corresponding role name.
+                    Select uninstall to automatically start uninstalling the application for the respective user
+                    role/roles.</Text>
+                {(this.state.isForbidden) && (
+                    <Alert
+                        message="You don't have permission to view uninstalled roles."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
+                <br/>
+                <br/>
+                <Select
+                    mode="multiple"
+                    labelInValue
+                    value={value}
+                    placeholder="Search roles"
+                    notFoundContent={fetching ? <Spin size="small"/> : null}
+                    filterOption={false}
+                    onSearch={this.fetchUser}
+                    onChange={this.handleChange}
+                    style={{width: '100%'}}
+                >
+                    {data.map(d => (
+                        <Option key={d.value}>{d.text}</Option>
+                    ))}
+                </Select>
+                <InstallModalFooter type="Uninstall" operation={this.uninstall} disabled={value.length === 0}/>
+            </div>
         );
     }
 }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js
index 82f91bddff..ddac89bcab 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js
@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Typography, Select, Spin, message, notification, Button} from "antd";
+import {Typography, Select, Spin, message, notification, Button, Alert} from "antd";
 import debounce from 'lodash.debounce';
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";
@@ -69,8 +69,17 @@ class UserInstall extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error,"Error occurred while trying to load users.");
-            this.setState({fetching: false});
+            handleApiError(error,"Error occurred while trying to load users.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbidden: true,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -79,6 +88,7 @@ class UserInstall extends React.Component {
             value,
             data: [],
             fetching: false,
+            isForbidden: false
         });
     };
 
@@ -97,6 +107,13 @@ class UserInstall extends React.Component {
         return (
             <div>
                 <Text>Start installing the application for one or more users by entering the corresponding user name. Select install to automatically start downloading the application for the respective user/users. </Text>
+                {(this.state.isForbidden) && (
+                    <Alert
+                        message="You don't have permission to view users."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <p>Select users</p>
                 <Select
                     mode="multiple"
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserUninstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserUninstall.js
index cc53ca8504..935d2f47a0 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserUninstall.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserUninstall.js
@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Typography, Select, Spin, message, notification, Button} from "antd";
+import {Typography, Select, Spin, message, notification, Button, Alert} from "antd";
 import debounce from 'lodash.debounce';
 import axios from "axios";
 import {withConfigContext} from "../../../../context/ConfigContext";
@@ -39,6 +39,7 @@ class UserUninstall extends React.Component {
         data: [],
         value: [],
         fetching: false,
+        isForbidden: false
     };
 
     fetchUser = (value) => {
@@ -67,8 +68,17 @@ class UserUninstall extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to load users.");
-            this.setState({fetching: false});
+            handleApiError(error, "Error occurred while trying to load users.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                this.setState({
+                    isForbidden: true,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -97,6 +107,13 @@ class UserUninstall extends React.Component {
                 <Text>Start uninstalling the application for one or more users by entering the corresponding user name.
                     Select uninstall to automatically start uninstalling the application for the respective
                     user/users. </Text>
+                {(this.state.isForbidden) && (
+                    <Alert
+                        message="You don't have permission to view uninstalled users."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
                 <p>Select users</p>
                 <Select
                     mode="multiple"
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js
index 8489a26800..44d464b128 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js
@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {List, message, Typography, Empty, Button, Row, Col, notification} from "antd";
+import {List, message, Typography, Empty, Button, Row, Col, notification, Alert} from "antd";
 import SingleReview from "./singleReview/SingleReview";
 import axios from "axios";
 import AddReview from "./AddReview";
@@ -34,52 +34,59 @@ class CurrentUsersReview extends React.Component {
         return (
             <div>
                 <Text>MY REVIEW</Text>
-                <div style={{
-                    overflow: "auto",
-                    paddingTop: 8,
-                    paddingLeft: 24
-                }}>
-                    {currentUserReviews.length > 0 && (
-                        <div>
-                            <List
-                                dataSource={currentUserReviews}
-                                renderItem={item => (
-                                    <List.Item key={item.id}>
-                                        <SingleReview
-                                            uuid={uuid}
-                                            review={item}
-                                            isDeletable={true}
-                                            isEditable={true}
-                                            deleteCallback={this.props.deleteCallback}
-                                            onUpdateReview={this.props.onUpdateReview}
-                                            isPersonalReview={true}/>
-                                    </List.Item>
-                                )}
-                            >
-                            </List>
-                        </div>
-                    )}
+                {(this.props.forbidden) && (
+                    <Alert
+                        message="You don't have permission to add reviews."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
+                {(!this.props.forbidden) && (
+                    <div style={{
+                        overflow: "auto",
+                        paddingTop: 8,
+                        paddingLeft: 24
+                    }}>
+                        {currentUserReviews.length > 0 && (
+                            <div>
+                                <List
+                                    dataSource={currentUserReviews}
+                                    renderItem={item => (
+                                        <List.Item key={item.id}>
+                                            <SingleReview
+                                                uuid={uuid}
+                                                review={item}
+                                                isDeletable={true}
+                                                isEditable={true}
+                                                deleteCallback={this.props.deleteCallback}
+                                                onUpdateReview={this.props.onUpdateReview}
+                                                isPersonalReview={true}/>
+                                        </List.Item>
+                                    )}
+                                >
+                                </List>
+                            </div>
+                        )}
 
-                    {currentUserReviews.length === 0 && (
-                        <div>
-                            <Empty
-                                image={Empty.PRESENTED_IMAGE_DEFAULT}
-                                imagestyle={{
-                                    height: 60,
-                                }}
-                                description={
-                                    <span>Share your experience with your community by adding a review.</span>
-                                }
-                            >
-                                {/*<Button type="primary">Add review</Button>*/}
-                                <AddReview
-                                    uuid={uuid}
-                                    onUpdateReview={this.props.onUpdateReview}/>
-                            </Empty>
-                        </div>
-                    )}
-
-                </div>
+                        {currentUserReviews.length === 0 && (
+                            <div>
+                                <Empty
+                                    image={Empty.PRESENTED_IMAGE_DEFAULT}
+                                    imagestyle={{
+                                        height: 60,
+                                    }}
+                                    description={
+                                        <span>Share your experience with your community by adding a review.</span>
+                                    }>
+                                    {/*<Button type="primary">Add review</Button>*/}
+                                    <AddReview
+                                        uuid={uuid}
+                                        onUpdateReview={this.props.onUpdateReview}/>
+                                </Empty>
+                            </div>
+                        )}
+                    </div>
+                )}
             </div>
         );
     }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/ReviewContainer.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/ReviewContainer.js
index 2b8f124cb2..291d032939 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/ReviewContainer.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/ReviewContainer.js
@@ -32,7 +32,12 @@ class ReviewContainer extends React.Component {
         super(props);
         this.state = {
             currentUserReviews: [],
-            detailedRating: null
+            detailedRating: null,
+            forbiddenErrors: {
+                currentReview: false,
+                reviews: false,
+                rating: false
+            }
         }
     }
 
@@ -54,7 +59,19 @@ class ReviewContainer extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error, "Error occurred while trying to get your review.");
+            handleApiError(error, "Error occurred while trying to get your review.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.currentReview = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -79,7 +96,7 @@ class ReviewContainer extends React.Component {
             }
 
         }).catch(function (error) {
-            handleApiError(error, "Error occurred while trying to load ratings.");
+            handleApiError(error, "Error occurred while trying to load ratings.", true);
         });
     };
 
@@ -90,10 +107,11 @@ class ReviewContainer extends React.Component {
 
     render() {
         const {uuid} = this.props;
-        const {currentUserReviews,detailedRating} = this.state;
+        const {currentUserReviews,detailedRating, forbiddenErrors} = this.state;
         return (
             <div>
                 <CurrentUsersReview
+                    forbidden={forbiddenErrors.currentReview}
                     uuid={uuid}
                     currentUserReviews={currentUserReviews}
                     onUpdateReview={this.onUpdateReview}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js
index 7c74574b6b..fff6364c78 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js
@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {List, message, Avatar, Spin, Button, notification} from 'antd';
+import {List, message, Avatar, Spin, Button, notification, Alert} from 'antd';
 import "./Reviews.css";
 
 import InfiniteScroll from 'react-infinite-scroller';
@@ -33,7 +33,10 @@ class Reviews extends React.Component {
         data: [],
         loading: false,
         hasMore: false,
-        loadMore: false
+        loadMore: false,
+        forbiddenErrors: {
+            reviews: false
+        }
     };
 
 
@@ -51,7 +54,7 @@ class Reviews extends React.Component {
         const config = this.props.context;
 
         axios.get(
-            window.location.origin+ config.serverConfig.invoker.uri +config.serverConfig.invoker.store+"/reviews/"+type+"/"+uuid,
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/" + type + "/" + uuid,
             {
                 headers: {'X-Platform': config.serverConfig.platform}
             }).then(res => {
@@ -60,8 +63,20 @@ class Reviews extends React.Component {
                 callback(reviews);
             }
 
-        }).catch(function (error) {
-            handleApiError(error,"Error occurred while trying to load reviews.");
+        }).catch((error) => {
+            handleApiError(error, "Error occurred while trying to load reviews.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.reviews = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -101,7 +116,7 @@ class Reviews extends React.Component {
         });
     };
 
-    deleteCallback = () =>{
+    deleteCallback = () => {
         this.fetchData(0, limit, res => {
             this.setState({
                 data: res,
@@ -114,30 +129,40 @@ class Reviews extends React.Component {
         const {loading, hasMore, data, loadMore} = this.state;
         const {uuid} = this.props;
         return (
-            <div className="infinite-container">
-                <InfiniteScroll
-                    initialLoad={false}
-                    pageStart={0}
-                    loadMore={this.handleInfiniteOnLoad}
-                    hasMore={!loading && hasMore}
-                    useWindow={true}>
-                    <List
-                        dataSource={data}
-                        renderItem={item => (
-                            <List.Item key={item.id}>
-                                <SingleReview uuid={uuid} review={item} isDeletable={true} isEditable={false} deleteCallback={this.deleteCallback}/>
-                            </List.Item>
-                        )}>
-                        {loading && hasMore && (
-                            <div className="loading-container">
-                                <Spin/>
-                            </div>
-                        )}
-                    </List>
-                </InfiniteScroll>
-                {!loadMore && (data.length >= limit) && (<div style={{textAlign: "center"}}>
-                    <Button type="dashed" htmlType="button" onClick={this.enableLoading}>Read All Reviews</Button>
-                </div>)}
+            <div>
+                {(this.state.forbiddenErrors.reviews) && (
+                    <Alert
+                        message="You don't have permission to view reviews."
+                        type="warning"
+                        banner
+                        closable/>
+                )}
+                <div className="infinite-container">
+                    <InfiniteScroll
+                        initialLoad={false}
+                        pageStart={0}
+                        loadMore={this.handleInfiniteOnLoad}
+                        hasMore={!loading && hasMore}
+                        useWindow={true}>
+                        <List
+                            dataSource={data}
+                            renderItem={item => (
+                                <List.Item key={item.id}>
+                                    <SingleReview uuid={uuid} review={item} isDeletable={true} isEditable={false}
+                                                  deleteCallback={this.deleteCallback}/>
+                                </List.Item>
+                            )}>
+                            {loading && hasMore && (
+                                <div className="loading-container">
+                                    <Spin/>
+                                </div>
+                            )}
+                        </List>
+                    </InfiniteScroll>
+                    {!loadMore && (data.length >= limit) && (<div style={{textAlign: "center"}}>
+                        <Button type="dashed" htmlType="button" onClick={this.enableLoading}>Read All Reviews</Button>
+                    </div>)}
+                </div>
             </div>
         );
     }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/Utils.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/Utils.js
index 7bdcef3eea..aea3333985 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/Utils.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/Utils.js
@@ -18,14 +18,15 @@
 
 import {notification} from "antd";
 
-export const handleApiError = (error, message) => {
+export const handleApiError = (error, message, isForbiddenMessageSilent = false) => {
     if (error.hasOwnProperty("response") && error.response.status === 401) {
         const redirectUrl = encodeURI(window.location.href);
         window.location.href = window.location.origin + `/store/login?redirect=${redirectUrl}`;
-    } else {
+        // silence 403 forbidden message
+    } else if (!(isForbiddenMessageSilent && error.hasOwnProperty("response") && error.response.status === 403)) {
         notification["error"]({
             message: "There was a problem",
-            duration: 2,
+            duration: 10,
             description: message,
         });
     }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
index 30c7da2df1..b0a5108ddf 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
@@ -17,7 +17,8 @@
  */
 
 import React from "react";
-import {Layout, Menu, Icon, Drawer, Button} from 'antd';
+import {Layout, Menu, Icon, Drawer, Button, Alert} from 'antd';
+
 const {Header, Content, Footer} = Layout;
 import {Link} from "react-router-dom";
 import RouteWithSubRoutes from "../../components/RouteWithSubRoutes";
@@ -38,7 +39,10 @@ class Dashboard extends React.Component {
             selectedKeys: [],
             deviceTypes: [],
             visible: false,
-            collapsed: false
+            collapsed: false,
+            forbiddenErrors: {
+                deviceTypes: false
+            }
         };
         this.logo = this.props.context.theme.logo;
         this.config = this.props.context;
@@ -62,10 +66,19 @@ class Dashboard extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error,"Error occurred while trying to load device types.");
-            this.setState({
-                loading: false
-            });
+            handleApiError(error, "Error occurred while trying to load device types.", true);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.deviceTypes = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };
 
@@ -81,7 +94,7 @@ class Dashboard extends React.Component {
             collapsed: !this.state.collapsed,
         });
     };
-    
+
     onCloseMobileNavigationBar = () => {
         this.setState({
             visible: false,
@@ -90,7 +103,7 @@ class Dashboard extends React.Component {
 
     render() {
         const config = this.props.context;
-        const {selectedKeys, deviceTypes} = this.state;
+        const {selectedKeys, deviceTypes, forbiddenErrors} = this.state;
 
         const DeviceTypesData = deviceTypes.map((deviceType) => {
             const platform = deviceType.name;
@@ -116,7 +129,7 @@ class Dashboard extends React.Component {
                 <Layout>
                     <Header style={{paddingLeft: 0, paddingRight: 0, backgroundColor: "white"}}>
                         <div className="logo-image">
-                            <Link to="/store/android"><img alt="logo" src={this.logo}/></Link>
+                            <Link to="/store"><img alt="logo" src={this.logo}/></Link>
                         </div>
 
                         <div className="web-layout">
@@ -131,7 +144,7 @@ class Dashboard extends React.Component {
                                 <Menu.Item key="web-clip">
                                     <Link to="/store/web-clip">
                                         <Icon type="upload"/>
-                                            Web Clips
+                                        Web Clips
                                     </Link>
                                 </Menu.Item>
 
@@ -140,7 +153,7 @@ class Dashboard extends React.Component {
                                              <span className="submenu-title-wrapper">
                                      <Icon type="user"/>
                                                  {this.config.user}
-                                     </span> }>
+                                     </span>}>
                                     <Logout/>
                                 </SubMenu>
                             </Menu>
@@ -156,32 +169,32 @@ class Dashboard extends React.Component {
                         </Button>
                     </div>
                 </Layout>
-                    <Drawer
-                        title={<Link to="/store/android" onClick={this.onCloseMobileNavigationBar}>
-                            <img alt="logo" src={this.logo} style={{marginLeft: 30}} width={"60%"}/>
-                        </Link>}
-                        placement="left"
-                        closable={false}
-                        onClose={this.onCloseMobileNavigationBar}
-                        visible={this.state.visible}
-                        getContainer={false}
-                        style={{position: 'absolute'}}>
-                        <Menu
-                            theme="light"
-                            mode="inline"
-                            defaultSelectedKeys={selectedKeys}
-                            style={{lineHeight: '64px', width: 231}}
-                            onClick={this.onCloseMobileNavigationBar}>
-
-                            {DeviceTypesData}
-
-                            <Menu.Item key="web-clip">
-                                <Link to="/store/web-clip">
+                <Drawer
+                    title={<Link to="/store" onClick={this.onCloseMobileNavigationBar}>
+                        <img alt="logo" src={this.logo} style={{marginLeft: 30}} width={"60%"}/>
+                    </Link>}
+                    placement="left"
+                    closable={false}
+                    onClose={this.onCloseMobileNavigationBar}
+                    visible={this.state.visible}
+                    getContainer={false}
+                    style={{position: 'absolute'}}>
+                    <Menu
+                        theme="light"
+                        mode="inline"
+                        defaultSelectedKeys={selectedKeys}
+                        style={{lineHeight: '64px', width: 231}}
+                        onClick={this.onCloseMobileNavigationBar}>
+
+                        {DeviceTypesData}
+
+                        <Menu.Item key="web-clip">
+                            <Link to="/store/web-clip">
                                 <Icon type="upload"/>Web Clips
-                                </Link>
-                            </Menu.Item>
-                        </Menu>
-                    </Drawer>
+                            </Link>
+                        </Menu.Item>
+                    </Menu>
+                </Drawer>
                 <Layout className="mobile-layout">
                     <Menu
                         mode="horizontal"
@@ -198,6 +211,13 @@ class Dashboard extends React.Component {
                 </Layout>
 
                 <Layout className="dashboard-body">
+                    {(forbiddenErrors.deviceTypes) && (
+                        <Alert
+                            message="You don't have permission to view device types."
+                            type="warning"
+                            banner
+                            closable/>
+                    )}
                     <Content style={{padding: '0 0'}}>
                         <Switch>
                             {this.state.routes.map((route) => (
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
index adac67e737..80cfe2b9cb 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/apps/release/Release.js
@@ -36,7 +36,10 @@ class Release extends React.Component {
         this.state = {
             loading: true,
             app: null,
-            uuid: null
+            uuid: null,
+            forbiddenErrors: {
+                app: false
+            }
         };
     }
 
@@ -72,8 +75,19 @@ class Release extends React.Component {
             }
 
         }).catch((error) => {
-            handleApiError(error,"Error occurred while trying to load releases.");
-            this.setState({loading: false});
+            handleApiError(error,"Error occurred while trying to load releases.", false);
+            if (error.hasOwnProperty("response") && error.response.status === 403) {
+                const {forbiddenErrors} = this.state;
+                forbiddenErrors.app = true;
+                this.setState({
+                    forbiddenErrors,
+                    loading: false
+                })
+            } else {
+                this.setState({
+                    loading: false
+                });
+            }
         });
     };