diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json
index 47b11b05c19..8ac3b835777 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json
@@ -4,6 +4,7 @@
     "value": "lightBaseTheme"
   },
   "serverConfig": {
+    "protocol": "https",
     "hostname": "localhost",
     "httpsPort": "9443",
     "invokerUri": "/api/application-mgt-handler/v1.0/invoke",
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 5d764c99ea1..da83fc878f3 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
@@ -30,7 +30,7 @@ class DetailedRating extends React.Component{
     getData = (uuid)=>{
         const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/reviews/"+uuid+"/rating";
 
-        return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+        return axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
         ).then(res => {
             if (res.status === 200) {
                 let detailedRating = res.data.data;
@@ -41,7 +41,7 @@ class DetailedRating extends React.Component{
 
         }).catch(function (error) {
             if (error.response.status === 401) {
-                window.location.href = 'https://localhost:9443/store/login';
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
             }
         });
     };
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppsTable.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppsTable.js
index 9095b68b158..89949eb56e9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppsTable.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppsTable.js
@@ -120,7 +120,7 @@ class ConnectedAppsTable extends React.Component {
 
         const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&');
         console.log(request);
-        axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+        axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
         ).then(res => {
             if (res.status === 200) {
                 let apps = [];
@@ -143,7 +143,7 @@ class ConnectedAppsTable extends React.Component {
         }).catch((error) => {
             if (error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = 'https://localhost:9443/publisher/login';
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
             } else {
                 message.error('Something went wrong... :(');
             }
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 d1d7ef41574..9339835363b 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
@@ -21,7 +21,7 @@ class ManageCategories extends React.Component {
 
     componentDidMount() {
         const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications/categories";
-        axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+        axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
         ).then(res => {
             if (res.status === 200) {
                 let categories = JSON.parse(res.data.data);
@@ -33,7 +33,7 @@ class ManageCategories extends React.Component {
 
         }).catch((error) => {
             if (error.response.status === 401) {
-                window.location.href = 'https://localhost:9443/publisher/login';
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
             } else {
                 message.warning('Something went wrong');
 
@@ -56,7 +56,7 @@ class ManageCategories extends React.Component {
             loading: true
         });
         const request = "method=delete&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/admin/applications/categories/" + id;
-        axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+        axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
         ).then(res => {
             if (res.status === 200) {
                 notification["success"]({
@@ -65,23 +65,22 @@ class ManageCategories extends React.Component {
                         "Category Removed Successfully!",
                 });
 
+                const {categories} = this.state;
+                const remainingElements = categories.filter(function (value) {
+                    return value.categoryName !== id;
+
+                });
+
                 this.setState({
-                    loading: false
+                    loading: false,
+                    categories: remainingElements
                 });
-                // this.setState({
-                //     categories: [...categories, ...tempElements],
-                //     tempElements: [],
-                //     inputVisible: false,
-                //     inputValue: '',
-                //     loading: false,
-                //     isAddNewVisible: false
-                // });
             }
 
         }).catch((error) => {
             if (error.response.hasOwnProperty("status") && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = 'https://localhost:9443/publisher/login';
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
             } else {
                 message.warning('Something went wrong');
             }
@@ -135,12 +134,12 @@ class ManageCategories extends React.Component {
     };
 
     renderTempElement = (category) => {
-        const {tempElements} = this.state;
         const tagElem = (
             <Tag
                 closable
-                onClose={e => {
+                onClose={e=>{
                     e.preventDefault();
+                    const {tempElements} = this.state;
                     const remainingElements = tempElements.filter(function (value) {
 
                         return value.categoryName !== category.categoryName;
@@ -196,7 +195,7 @@ class ManageCategories extends React.Component {
         const dataArray = JSON.stringify(tempElements.map(category => category.categoryName));
 
         const request = "method=post&content-type=application/json&payload=" + dataArray + "&api-endpoint=/application-mgt-publisher/v1.0/admin/applications/categories";
-        axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+        axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
         ).then(res => {
             if (res.status === 200) {
                 notification["success"]({
@@ -218,7 +217,7 @@ class ManageCategories extends React.Component {
         }).catch((error) => {
             if (error.response.hasOwnProperty("status") && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = 'https://localhost:9443/publisher/login';
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
             } else {
                 message.warning('Something went wrong');
             }
@@ -257,7 +256,7 @@ class ManageCategories extends React.Component {
             isEditModalVisible: false,
         });
         const request = "method=put&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/admin/applications/categories/rename?from="+currentlyEditingId+"%26to="+editingValue;
-        axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+        axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
         ).then(res => {
             if (res.status === 200) {
                 notification["success"]({
@@ -278,7 +277,7 @@ class ManageCategories extends React.Component {
         }).catch((error) => {
             if (error.response.hasOwnProperty("status") && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = 'https://localhost:9443/publisher/login';
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
             } else {
                 message.warning('Something went wrong');
             }
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 726b9225d2f..047669ca593 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
@@ -21,7 +21,7 @@ class ManageTags extends React.Component {
 
     componentDidMount() {
         const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications/tags";
-        axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+        axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
         ).then(res => {
             if (res.status === 200) {
                 let categories = JSON.parse(res.data.data);
@@ -33,7 +33,7 @@ class ManageTags extends React.Component {
 
         }).catch((error) => {
             if (error.response.status === 401) {
-                window.location.href = 'https://localhost:9443/publisher/login';
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
             } else {
                 message.warning('Something went wrong');
 
@@ -56,7 +56,7 @@ class ManageTags extends React.Component {
             loading: true
         });
         const request = "method=delete&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/admin/applications/categories/" + id;
-        axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+        axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
         ).then(res => {
             if (res.status === 200) {
                 notification["success"]({
@@ -81,7 +81,7 @@ class ManageTags extends React.Component {
         }).catch((error) => {
             if (error.response.hasOwnProperty("status") && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = 'https://localhost:9443/publisher/login';
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
             } else {
                 message.warning('Something went wrong');
             }
@@ -196,7 +196,7 @@ class ManageTags extends React.Component {
         const dataArray = JSON.stringify(tempElements.map(category => category.categoryName));
 
         const request = "method=post&content-type=application/json&payload=" + dataArray + "&api-endpoint=/application-mgt-publisher/v1.0/admin/applications/categories";
-        axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+        axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
         ).then(res => {
             if (res.status === 200) {
                 notification["success"]({
@@ -218,7 +218,7 @@ class ManageTags extends React.Component {
         }).catch((error) => {
             if (error.response.hasOwnProperty("status") && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = 'https://localhost:9443/publisher/login';
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
             } else {
                 message.warning('Something went wrong');
             }
@@ -257,7 +257,7 @@ class ManageTags extends React.Component {
             isEditModalVisible: false,
         });
         const request = "method=put&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/admin/applications/categories?from="+currentlyEditingId+"%26to="+editingValue;
-        axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+        axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
         ).then(res => {
             if (res.status === 200) {
                 notification["success"]({
@@ -278,7 +278,7 @@ class ManageTags extends React.Component {
         }).catch((error) => {
             if (error.response.hasOwnProperty("status") && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = 'https://localhost:9443/publisher/login';
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
             } else {
                 message.warning('Something went wrong');
             }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js
index 42bfd2c3a93..b26e84c2093 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js
@@ -6,7 +6,7 @@ export const getApps = () => dispatch => {
 
     const request = "method=post&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications";
 
-    return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+    return axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
     ).then(res => {
         if (res.status === 200) {
             let apps = [];
@@ -19,7 +19,7 @@ export const getApps = () => dispatch => {
 
     }).catch(function (error) {
         if (error.response.status === 401) {
-            window.location.href = 'https://localhost:9443/publisher/login';
+            window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
         }
     });
 
@@ -29,7 +29,7 @@ export const getRelease = (uuid) => dispatch => {
 
     const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications/release/" + uuid;
 
-    return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+    return axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
     ).then(res => {
         if (res.status === 200) {
             let release = res.data.data;
@@ -38,7 +38,7 @@ export const getRelease = (uuid) => dispatch => {
 
     }).catch(function (error) {
         if (error.response.status === 401) {
-            window.location.href = 'https://localhost:9443/publisher/login';
+            window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
         }
     });
 
@@ -73,7 +73,7 @@ export const closeLifecycleModal = () => dispatch => {
 export const getLifecycle = () => dispatch => {
     const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications/lifecycle-config";
 
-    return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+    return axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
     ).then(res => {
         if (res.status === 200) {
             let lifecycle = res.data.data;
@@ -82,7 +82,7 @@ export const getLifecycle = () => dispatch => {
 
     }).catch(function (error) {
         if (error.response.status === 401) {
-            window.location.href = 'https://localhost:9443/publisher/login';
+            window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
         }
     });
 };
@@ -97,7 +97,7 @@ export const updateLifecycleState = (uuid, nextState, reason) => dispatch => {
     const request = "method=post&content-type=application/json&payload=" + JSON.stringify(payload) + "&api-endpoint=/application-mgt-publisher/v1.0/applications/life-cycle/" + uuid;
 
 
-    return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+    return axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
     ).then(res => {
         if (res.status === 201) {
             let release = res.data.data;
@@ -111,7 +111,7 @@ export const updateLifecycleState = (uuid, nextState, reason) => dispatch => {
 
     }).catch(function (error) {
         if (error.response.status === 401) {
-            window.location.href = 'https://localhost:9443/publisher/login';
+            window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
         } else if (error.response.status === 500) {
             alert("error");
             dispatch({
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js
index 8953e323527..030a43dfe43 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.js
@@ -59,7 +59,7 @@ class NormalLoginForm extends React.Component {
                 });
                 console.log('Received values of form: ', values);
                 let data = "username=" + values.username + "&password=" + values.password + "&platform=publisher";
-                axios.post('https://'+config.serverConfig.hostname+':'+config.serverConfig.httpsPort+config.serverConfig.loginUri, data
+                axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname+':'+config.serverConfig.httpsPort+config.serverConfig.loginUri, data
                 ).then(res => {
                     if (res.status === 200) {
                         window.location = res.data.url;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js
index e32d5fff1b2..58f562f14e8 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js
@@ -4,9 +4,9 @@ import {Layout, Menu, Icon} from 'antd';
 const {Header, Content, Footer} = Layout;
 
 import Logo from "../../../public/images/logo.svg";
-import {Link, NavLink} from "react-router-dom";
+import {BrowserRouter,Switch,Link, NavLink} from "react-router-dom";
 import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
-import {Switch, Redirect} from 'react-router'
+import {Redirect} from 'react-router'
 import "../../App.css";
 
 class Dashboard extends React.Component {
@@ -41,13 +41,15 @@ class Dashboard extends React.Component {
                 </Layout>
                 <Layout>
                     <Content style={{padding: '0 0'}}>
-                        <Switch>
-                            <Redirect exact from="/publisher" to="/publisher/apps"/>
-                            {this.state.routes.map((route) => (
-                                <RouteWithSubRoutes key={route.path} {...route} />
-                            ))}
+                        <BrowserRouter>
+                            <Switch>
+                                <Redirect exact from="/publisher" to="/publisher/apps"/>
+                                {this.state.routes.map((route) => (
+                                    <RouteWithSubRoutes key={route.path} {...route} />
+                                ))}
 
-                        </Switch>
+                            </Switch>
+                        </BrowserRouter>
 
                     </Content>
                     <Footer style={{textAlign: 'center'}}>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/manage/Manage.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/manage/Manage.js
index 268400357a4..b69e3237772 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/manage/Manage.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/manage/Manage.js
@@ -35,7 +35,7 @@ class Manage extends React.Component {
         return (
             <div>
                 <PageHeader
-                    breadcrumb={{routes}}
+                    // breadcrumb={{routes}}
                     title = "Manage"
                 >
                     <div className="wrap">
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json
index 388f4ef0fdc..ac80be19a0c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/package.json
@@ -16,6 +16,7 @@
     "d3": "^5.9.2",
     "dagre": "^0.8.4",
     "keymirror": "^0.1.1",
+    "lodash.debounce": "^4.0.8",
     "rc-viewer": "0.0.9",
     "react": "^16.8.4",
     "react-d3-graph": "^2.0.2",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/conf/config.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/conf/config.json
index c2e66dda140..6f469f5e029 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/conf/config.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/public/conf/config.json
@@ -4,6 +4,7 @@
     "value": "lightBaseTheme"
   },
   "serverConfig": {
+    "protocol": "https",
     "hostname": "localhost",
     "httpsPort": "9443",
     "invokerUri": "/api/application-mgt-handler/v1.0/invoke",
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 823a9e075c4..d95377e1c9d 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
@@ -8,38 +8,47 @@ import Reviews from "./review/Reviews";
 import AddReview from "./review/AddReview";
 import axios from "axios";
 import config from "../../../../public/conf/config.json";
+import AppInstallModal from "./install/AppInstallModal";
 
 const {Title, Text, Paragraph} = Typography;
 
 class ReleaseView extends React.Component {
-    constructor(props){
+    constructor(props) {
         super(props);
         this.state = {
-            loading: false
+            loading: false,
+            appInstallModalVisible: false
         }
     }
 
-    installApp = () =>{
+    installApp = (type,payload) => {
         const {uuid} = this.props.release;
-        const payload = ["admin"];
-        const request = "method=post&content-type=application/json&payload="+JSON.stringify(payload)+"&api-endpoint=/application-mgt-store/v1.0/subscription/install/"+uuid+"/user/install";
 
+        const parameters = {
+            method: "post",
+            'content-type': "application/json",
+            payload: JSON.stringify(payload),
+            'api-endpoint': "/application-mgt-store/v1.0/subscription/install/" + uuid + "/"+type+"/install"
+        };
+
+        const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&');
         this.setState({
             loading: true,
         });
 
-        axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+        axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
         ).then(res => {
             if (res.status === 201) {
                 this.setState({
-                    loading: false
+                    loading: false,
+                    appInstallModalVisible: false
                 });
                 notification["success"]({
                     message: 'Done!',
                     description:
                         'App installed successfully.',
                 });
-            }else{
+            } else {
                 this.setState({
                     loading: false
                 });
@@ -50,10 +59,10 @@ class ReleaseView extends React.Component {
                 });
             }
 
-        }).catch((error) =>{
+        }).catch((error) => {
             if (error.response.status === 401) {
-                window.location.href = 'https://localhost:9443/store/login';
-            } else{
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
+            } else {
                 this.setState({
                     loading: false,
                     visible: false
@@ -67,10 +76,24 @@ class ReleaseView extends React.Component {
         });
     };
 
+    showAppInstallModal = () => {
+        this.setState({
+            appInstallModalVisible: true
+        });
+    };
+
+    closeAppInstallModal = () => {
+        this.setState({
+            appInstallModalVisible: false
+        });
+    };
+
     render() {
         const release = this.props.release;
         return (
             <div>
+                <AppInstallModal uuid={release.uuid} visible={this.state.appInstallModalVisible}
+                                 onClose={this.closeAppInstallModal} onInstall={this.installApp}/>
                 <div className="release">
                     <Row>
                         <Col xl={4} sm={6} xs={8} className="release-icon">
@@ -91,7 +114,8 @@ class ReleaseView extends React.Component {
                         <Col xl={8} md={10} sm={24} xs={24} style={{float: "right"}}>
                             <div>
                                 <Button.Group style={{float: "right"}}>
-                                    <Button onClick={this.installApp} loading={this.state.loading}  htmlType="button" type="primary" icon="download">Install</Button>
+                                    <Button onClick={this.showAppInstallModal} loading={this.state.loading}
+                                            htmlType="button" type="primary" icon="download">Install</Button>
                                 </Button.Group>
                             </div>
                         </Col>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/AppInstallModal.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/AppInstallModal.js
new file mode 100644
index 00000000000..c0e562348e7
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/AppInstallModal.js
@@ -0,0 +1,38 @@
+import React from "react";
+import {Button, Modal, Tabs} from "antd";
+import UserInstall from "./UserInstall";
+
+const { TabPane } = Tabs;
+
+class AppInstallModal extends React.Component{
+    render() {
+        return (
+            <div>
+                <Modal
+                    title="Install App"
+                    visible={this.props.visible}
+                    // onOk={this.handleOk}
+                    onCancel={this.props.onClose}
+                    footer={null}
+                >
+                    <Tabs defaultActiveKey="1">
+                        <TabPane tab="User" key="1">
+                            <UserInstall onInstall={this.props.onInstall}/>
+                        </TabPane>
+                        <TabPane tab="Device" key="2">
+                            Tab 2
+                        </TabPane>
+                        <TabPane tab="Role" key="3">
+                            Tab 3
+                        </TabPane>
+                        <TabPane tab="Group" key="4">
+                            Tab 3
+                        </TabPane>
+                    </Tabs>
+                </Modal>
+            </div>
+        );
+    }
+}
+
+export default AppInstallModal;
\ 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/UserInstall.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js
new file mode 100644
index 00000000000..3b6f45e534d
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/UserInstall.js
@@ -0,0 +1,115 @@
+import React from "react";
+import {Typography, Select, Spin, message, notification, Button} from "antd";
+import debounce from 'lodash.debounce';
+import axios from "axios";
+import config from "../../../../../public/conf/config.json";
+
+const {Text} = Typography;
+const {Option} = Select;
+
+
+class UserInstall extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.lastFetchId = 0;
+        this.fetchUser = debounce(this.fetchUser, 800);
+    }
+
+    state = {
+        data: [],
+        value: [],
+        fetching: false,
+    };
+
+    fetchUser = value => {
+        console.log('fetching user', value);
+        this.lastFetchId += 1;
+        const fetchId = this.lastFetchId;
+        this.setState({data: [], fetching: true});
+
+
+        const parameters = {
+            method: "get",
+            'content-type': "application/json",
+            payload: "{}",
+            'api-endpoint': "/device-mgt/v1.0/users/search?username=" + value
+        };
+
+        const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&');
+        console.log(request);
+        axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+        ).then(res => {
+            if (res.status === 200) {
+                if (fetchId !== this.lastFetchId) {
+                    // for fetch callback order
+                    return;
+                }
+
+                console.log(res.data.data);
+
+                const data = res.data.data.users.map(user => ({
+                    text: user.username,
+                    value: user.username,
+                }));
+
+                this.setState({data, fetching: false});
+            }
+
+        }).catch((error) => {
+            if (error.response.hasOwnProperty(status) && error.response.status === 401) {
+                message.error('You are not logged in');
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
+            } else {
+                message.error('Something went wrong... :(');
+            }
+
+            this.setState({fetching: false});
+        });
+    };
+
+    handleChange = value => {
+        this.setState({
+            value,
+            data: [],
+            fetching: false,
+        });
+    };
+
+    install = () =>{
+        this.props.onInstall("user",this.state.data);
+    };
+
+    render() {
+
+        const {fetching, data, value} = this.state;
+
+        return (
+            <div>
+                <Text>Lorem ipsum dolor sit amet, ne tation labores quo, errem facilisis expetendis vel in. Ut choro
+                    decore ubique sed,</Text>
+                <p>Select users</p>
+                <Select
+                    mode="multiple"
+                    labelInValue
+                    value={value}
+                    placeholder="Enter the username"
+                    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>
+                <div style={{paddingTop:10}}>
+                    <Button htmlType="button" type="primary" onClick={this.install}>Install</Button>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default UserInstall;
\ 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/review/AddReview.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/AddReview.js
index fa3af4c680a..41f2a1b067c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/AddReview.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/AddReview.js
@@ -54,7 +54,7 @@ class AddReview extends React.Component {
 
         const request = "method=post&content-type=application/json&payload="+JSON.stringify(payload)+"&api-endpoint=/application-mgt-store/v1.0/reviews/"+uuid;
 
-        axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+        axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
         ).then(res => {
             if (res.status === 201) {
                 this.setState({
@@ -84,7 +84,7 @@ class AddReview extends React.Component {
 
         }).catch((error) =>{
             if (error.response.status === 401) {
-                window.location.href = 'https://localhost:9443/store/login';
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
             } else{
                 this.setState({
                     loading: false,
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 6cc4442894b..dadce12a044 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
@@ -27,8 +27,8 @@ class Reviews extends React.Component {
     }
 
     fetchData = (offset, limit, callback) => {
-        const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/reviews/" + this.props.uuid+"?offset="+offset+"%26limit="+limit;
-        axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+        const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/reviews/" + this.props.uuid + "?offset=" + offset + "%26limit=" + limit;
+        axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
         ).then(res => {
             if (res.status === 200) {
                 let reviews = res.data.data.data;
@@ -37,8 +37,8 @@ class Reviews extends React.Component {
 
         }).catch(function (error) {
             if (error.response.status === 401) {
-                window.location.href = 'https://localhost:9443/store/login';
-            }else{
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
+            } else {
                 message.warning('Something went wrong');
 
             }
@@ -46,7 +46,7 @@ class Reviews extends React.Component {
     };
 
     handleInfiniteOnLoad = (count) => {
-        const offset = count*limit;
+        const offset = count * limit;
         let data = this.state.data;
         this.setState({
             loading: true,
@@ -59,13 +59,13 @@ class Reviews extends React.Component {
             return;
         }
         this.fetchData(offset, limit, res => {
-            if(res.length>0){
+            if (res.length > 0) {
                 data = data.concat(res);
                 this.setState({
                     data,
                     loading: false,
                 });
-            }else {
+            } else {
                 this.setState({
                     hasMore: false,
                     loading: false
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/actions/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/actions/index.js
index 4fdcd14c1b1..aad30831b36 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/actions/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/js/actions/index.js
@@ -6,7 +6,7 @@ export const getApps = () => dispatch => {
 
     const request = "method=post&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/applications";
 
-    return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+    return axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
     ).then(res => {
         if (res.status === 200) {
             let apps = [];
@@ -19,7 +19,7 @@ export const getApps = () => dispatch => {
 
     }).catch(function (error) {
         if (error.response.status === 401) {
-            window.location.href = 'https://localhost:9443/store/login';
+            window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
         }
     });
 
@@ -29,7 +29,7 @@ export const getRelease = (uuid) => dispatch => {
 
     const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/applications/" + uuid;
 
-    return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+    return axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
     ).then(res => {
         if (res.status === 200) {
             let release = res.data.data.applicationReleases[0];
@@ -43,7 +43,7 @@ export const getRelease = (uuid) => dispatch => {
         }
     }).catch(function (error) {
         if (error.response.status === 401) {
-            window.location.href = 'https://localhost:9443/store/login';
+            window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
         }else if(error.response.status===404){
             dispatch({
                 type: ActionTypes.GET_RELEASE,
@@ -94,7 +94,7 @@ export const setLoading = (stateToLoad) => dispatch => {
 export const getLifecycle = () => dispatch => {
     const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/applications/lifecycle-config";
 
-    return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+    return axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
     ).then(res => {
         if (res.status === 200) {
             let lifecycle = res.data.data;
@@ -103,7 +103,7 @@ export const getLifecycle = () => dispatch => {
 
     }).catch(function (error) {
         if (error.response.status === 401) {
-            window.location.href = 'https://localhost:9443/store/login';
+            window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
         }
     });
 };
@@ -118,7 +118,7 @@ export const updateLifecycleState = (uuid, nextState, reason) => dispatch => {
     const request = "method=post&content-type=application/json&payload=" + JSON.stringify(payload) + "&api-endpoint=/application-mgt-store/v1.0/applications/life-cycle/" + uuid;
 
 
-    return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+    return axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
     ).then(res => {
         if (res.status === 201) {
             let release = res.data.data;
@@ -132,7 +132,7 @@ export const updateLifecycleState = (uuid, nextState, reason) => dispatch => {
 
     }).catch(function (error) {
         if (error.response.status === 401) {
-            window.location.href = 'https://localhost:9443/store/login';
+            window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
         } else if (error.response.status === 500) {
             alert("error");
             dispatch({
@@ -147,7 +147,7 @@ export const updateLifecycleState = (uuid, nextState, reason) => dispatch => {
 export const getDetailedRating = (uuid) => dispatch => {
     const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-store/v1.0/reviews/"+uuid+"/rating";
 
-    return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+    return axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
     ).then(res => {
         if (res.status === 200) {
             let detailedRating = res.data.data;
@@ -156,7 +156,7 @@ export const getDetailedRating = (uuid) => dispatch => {
 
     }).catch(function (error) {
         if (error.response.status === 401) {
-            window.location.href = 'https://localhost:9443/store/login';
+            window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/store/login';
         } else{
             dispatch({
                 type: ActionTypes.GET_DETAILED_RATING, payload: null
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js
index 3e91317e0fd..863d02aae9c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js
@@ -58,7 +58,7 @@ class NormalLoginForm extends React.Component {
                     loading: true
                 });
                 let data = "username=" + values.username + "&password=" + values.password + "&platform=store";
-                axios.post('https://'+config.serverConfig.hostname+':'+config.serverConfig.httpsPort+config.serverConfig.loginUri, data
+                axios.post(config.serverConfig.protocol + "://"+config.serverConfig.hostname+':'+config.serverConfig.httpsPort+config.serverConfig.loginUri, data
                 ).then(res => {
                     if (res.status === 200) {
                         window.location = res.data.url;