diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js
index 76e9922736d..b637fcf2e62 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js
@@ -3,30 +3,89 @@ import "antd/dist/antd.less";
 import RouteWithSubRoutes from "./components/RouteWithSubRoutes";
 import {
     BrowserRouter as Router,
-    Link, Redirect, Switch,
+    Redirect, Switch,
 } from 'react-router-dom';
+import axios from "axios";
+import {Layout, Spin, Result} from "antd";
+import ConfigContext from "./context/ConfigContext";
+
+const {Content} = Layout;
+const loadingView = (
+    <Layout>
+        <Content style={{
+            padding: '0 0',
+            paddingTop: 300,
+            backgroundColor: '#fff',
+            textAlign: 'center'
+        }}>
+            <Spin tip="Loading..."/>
+        </Content>
+    </Layout>
+);
+
+const errorView = (
+    <Result
+        style={{
+            paddingTop: 200
+        }}
+        status="500"
+        title="Error occurred while loading the configuration"
+        subTitle="Please refresh your browser window"
+    />
+);
 
 class App extends React.Component {
-    routes;
 
     constructor(props) {
         super(props);
-        this.routes = props.routes;
+        this.state = {
+            loading: true,
+            error: false,
+            config: {}
+        }
+    }
+
+    componentDidMount() {
+        axios.get(
+            window.location.origin + "/publisher/public/conf/config.json",
+        ).then(res => {
+            console.log(res);
+            this.setState({
+                loading: false,
+                config: res.data
+            })
+        }).catch((error) => {
+            this.setState({
+                loading: false,
+                error: true
+            })
+        });
     }
 
     render() {
-        return (
+        const {loading, error} = this.state;
+
+        const applicationView = (
             <Router>
-                <div>
-                    <Switch>
-                        <Redirect exact from="/publisher" to="/publisher/apps"/>
-                        {this.routes.map((route) => (
-                            <RouteWithSubRoutes key={route.path} {...route} />
-                        ))}
-                    </Switch>
-                </div>
+                <ConfigContext.Provider value={this.state.config}>
+                    <div>
+                        <Switch>
+                            <Redirect exact from="/publisher" to="/publisher/apps"/>
+                            {this.props.routes.map((route) => (
+                                <RouteWithSubRoutes key={route.path} {...route} />
+                            ))}
+                        </Switch>
+                    </div>
+                </ConfigContext.Provider>
             </Router>
+        );
 
+        return (
+            <div>
+                {loading && loadingView}
+                {!loading && !error && applicationView}
+                {error && errorView}
+            </div>
         );
     }
 }
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 b861e212233..0598fef83e3 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
@@ -1,9 +1,9 @@
 import React from "react";
-import {Row, Typography, Icon, message, notification} from "antd";
+import {Row, Typography, Icon, notification} from "antd";
 import StarRatings from "react-star-ratings";
 import "./DetailedRating.css";
-import config from "../../../../public/conf/config.json";
 import axios from "axios";
+import {withConfigContext} from "../../../context/ConfigContext";
 
 const { Text } = Typography;
 
@@ -30,8 +30,9 @@ class DetailedRating extends React.Component{
     }
 
     getData = (type, uuid)=>{
+        const config = this.props.context;
         return axios.get(
-            config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher+"/admin/reviews/"+uuid+"/"+type+"-rating",
+            window.location.origin+ config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher+"/admin/reviews/"+uuid+"/"+type+"-rating",
             ).then(res => {
             if (res.status === 200) {
                 let detailedRating = res.data.data;
@@ -42,7 +43,7 @@ class DetailedRating extends React.Component{
 
         }).catch(function (error) {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
+                window.location.href = window.location.origin+'/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -125,4 +126,4 @@ class DetailedRating extends React.Component{
 }
 
 
-export default DetailedRating;
\ No newline at end of file
+export default withConfigContext(DetailedRating);
\ No newline at end of file
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 c5eb6331b53..4a8cefada97 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
@@ -15,17 +15,17 @@ import {
     Card
 } from 'antd';
 
-const {Meta} = Card;
 import "../../../../App.css";
 import DetailedRating from "../../detailed-rating/DetailedRating";
 import {Link} from "react-router-dom";
 import axios from "axios";
-import config from "../../../../../public/conf/config.json";
 import ReactQuill from "react-quill";
 import ReactHtmlParser, {processNodes, convertNodeToElement, htmlparser2} from 'react-html-parser';
 import "./AppDetailsDrawer.css";
 import pSBC from "shade-blend-color";
+import {withConfigContext} from "../../../../context/ConfigContext";
 
+const {Meta} = Card;
 const {Text, Title} = Typography;
 const {Option} = Select;
 
@@ -91,8 +91,9 @@ class AppDetailsDrawer extends React.Component {
     }
 
     getCategories = () => {
+        const config = this.props.context;
         axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + 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) {
                 const categories = JSON.parse(res.data.data);
@@ -114,7 +115,7 @@ class AppDetailsDrawer extends React.Component {
 
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                window.location.href = window.location.origin+ '/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -130,8 +131,9 @@ class AppDetailsDrawer extends React.Component {
     };
 
     getTags = () => {
+        const config = this.props.context;
         axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + 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) {
                 const tags = JSON.parse(res.data.data);
@@ -153,7 +155,7 @@ class AppDetailsDrawer extends React.Component {
 
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                window.location.href = window.location.origin+ '/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -171,11 +173,12 @@ class AppDetailsDrawer extends React.Component {
 
     // change the app name
     handleNameSave = name => {
+        const config = this.props.context;
         const {id} = this.props.app;
         if (name !== this.state.name && name !== "") {
             const data = {name: name};
             axios.put(
-                config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
+                window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
                 data
             ).then(res => {
                 if (res.status === 200) {
@@ -192,7 +195,7 @@ class AppDetailsDrawer extends React.Component {
             }).catch((error) => {
                 if (error.hasOwnProperty("response") && error.response.status === 401) {
                     message.error('You are not logged in');
-                    window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                    window.location.href = window.location.origin+ '/publisher/login';
                 } else {
                     notification["error"]({
                         message: "There was a problem",
@@ -245,6 +248,7 @@ class AppDetailsDrawer extends React.Component {
 
     // change app categories
     handleCategorySave = () => {
+        const config = this.props.context;
         const {id} = this.props.app;
         const {temporaryCategories, categories} = this.state;
 
@@ -255,7 +259,7 @@ class AppDetailsDrawer extends React.Component {
         if (difference.length !== 0 && temporaryCategories.length !== 0) {
             const data = {categories: temporaryCategories};
             axios.put(
-                config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
+                window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
                 data
             ).then(res => {
                 if (res.status === 200) {
@@ -273,7 +277,7 @@ class AppDetailsDrawer extends React.Component {
             }).catch((error) => {
                 if (error.hasOwnProperty("response") && error.response.status === 401) {
                     message.error('You are not logged in');
-                    window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                    window.location.href = window.location.origin+ '/publisher/login';
                 } else {
                     notification["error"]({
                         message: "There was a problem",
@@ -308,6 +312,7 @@ class AppDetailsDrawer extends React.Component {
 
     // change app tags
     handleTagsSave = () => {
+        const config = this.props.context;
         const {id} = this.props.app;
         const {temporaryTags, tags} = this.state;
 
@@ -319,7 +324,7 @@ class AppDetailsDrawer extends React.Component {
         if (difference.length !== 0 && temporaryTags.length !== 0) {
             const data = {tags: temporaryTags};
             axios.put(
-                config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
+                window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
                 data
             ).then(res => {
                 if (res.status === 200) {
@@ -336,7 +341,7 @@ class AppDetailsDrawer extends React.Component {
             }).catch((error) => {
                 if (error.hasOwnProperty("response") && error.response.status === 401) {
                     message.error('You are not logged in');
-                    window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                    window.location.href = window.location.origin+ '/publisher/login';
                 } else {
                     notification["error"]({
                         message: "There was a problem",
@@ -353,14 +358,14 @@ class AppDetailsDrawer extends React.Component {
 
     //handle description save
     handleDescriptionSave = () => {
-
+        const config = this.props.context;
         const {id} = this.props.app;
         const {description, temporaryDescription} = this.state;
 
         if (temporaryDescription !== description && temporaryDescription !== "<p><br></p>") {
             const data = {description: temporaryDescription};
             axios.put(
-                config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
+                window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
                 data
             ).then(res => {
                 if (res.status === 200) {
@@ -377,7 +382,7 @@ class AppDetailsDrawer extends React.Component {
             }).catch((error) => {
                 if (error.hasOwnProperty("response") && error.response.status === 401) {
                     message.error('You are not logged in');
-                    window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                    window.location.href = window.location.origin+ '/publisher/login';
                 } else {
                     message.error('Something went wrong... :(');
                 }
@@ -391,6 +396,7 @@ class AppDetailsDrawer extends React.Component {
 
 
     render() {
+        const config = this.props.context;
         const {app, visible, onClose} = this.props;
         const {
             name, loading, description, isDescriptionEditEnabled, isCategoriesEditEnabled,
@@ -402,7 +408,6 @@ class AppDetailsDrawer extends React.Component {
         }
         return (
             <div>
-
                 <Drawer
                     placement="right"
                     width={640}
@@ -600,4 +605,4 @@ class AppDetailsDrawer extends React.Component {
     }
 }
 
-export default AppDetailsDrawer;
\ No newline at end of file
+export default withConfigContext(AppDetailsDrawer);
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 716612a5d13..dcaeb974c06 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
@@ -15,7 +15,7 @@ import {
     notification
 } from "antd";
 import axios from "axios";
-import config from "../../../../public/conf/config.json";
+import {withConfigContext} from "../../../context/ConfigContext";
 
 const {Option} = Select;
 const {Title} = Typography;
@@ -62,8 +62,9 @@ class FiltersForm extends React.Component {
     }
 
     getCategories = () => {
+        const config = this.props.context;
         axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + 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);
@@ -75,7 +76,7 @@ class FiltersForm extends React.Component {
 
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                window.location.href = window.location.origin+ '/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -91,8 +92,9 @@ class FiltersForm extends React.Component {
     };
 
     getTags = () => {
+        const config = this.props.context;
         axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + 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);
@@ -104,7 +106,7 @@ class FiltersForm extends React.Component {
 
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                window.location.href = window.location.origin+ '/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -121,8 +123,9 @@ class FiltersForm extends React.Component {
 
 
     getDeviceTypes = () => {
+        const config = this.props.context;
         axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + 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,7 +137,7 @@ class FiltersForm extends React.Component {
 
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                window.location.href = window.location.origin+ '/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -293,7 +296,7 @@ class FiltersForm extends React.Component {
 }
 
 
-const Filters = Form.create({name: 'filter-apps'})(FiltersForm);
+const Filters = withConfigContext(Form.create({name: 'filter-apps'})(FiltersForm));
 
 
-export default Filters;
\ No newline at end of file
+export default withConfigContext(Filters);
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js
index 2273df72357..191f4ee07f2 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js
@@ -1,16 +1,11 @@
 import React from "react";
-import {Avatar, Card, Col, Row, Table, Typography, Input, Divider, Checkbox, Select, Button} from "antd";
+import {Card, Col, Row, Typography, Input, Divider} from "antd";
 import AppsTable from "./appsTable/AppsTable";
 import Filters from "./Filters";
 import AppDetailsDrawer from "./AppDetailsDrawer/AppDetailsDrawer";
 
-const {Option} = Select;
-const {Title, Text} = Typography;
+const {Title} = Typography;
 const Search = Input.Search;
-// connecting state.apps with the component
-// const mapStateToProps = state => {
-//     return {apps: state.apps}
-// };
 
 
 class ListApps extends React.Component {
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 2d39f518b73..de407a4da6d 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
@@ -2,8 +2,10 @@ import React from "react";
 import {Avatar, Table, Tag, Icon, message, notification} from "antd";
 import axios from "axios";
 import pSBC from 'shade-blend-color';
-import config from "../../../../../public/conf/config.json";
 import "./AppsTable.css";
+import {withConfigContext} from "../../../../context/ConfigContext";
+
+let config = null;
 
 const columns = [
     {
@@ -74,6 +76,7 @@ class AppsTable extends React.Component {
             apps: [],
             filters: {}
         };
+        config = this.props.context;
     }
 
     componentDidMount() {
@@ -114,6 +117,7 @@ class AppsTable extends React.Component {
 
     fetch = (filters,params = {}) => {
         this.setState({loading: true});
+        const config = this.props.context;
 
         if(!params.hasOwnProperty("page")){
            params.page = 1;
@@ -124,10 +128,9 @@ class AppsTable extends React.Component {
             limit: 10,
             ...filters
         };
-        console.log("f", data);
 
        axios.post(
-            config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher+"/applications",
+            window.location.origin+ config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher+"/applications",
             data,
 
         ).then(res => {
@@ -153,7 +156,7 @@ class AppsTable extends React.Component {
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort+'/publisher/login';
+                window.location.href = window.location.origin+'/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -190,4 +193,4 @@ class AppsTable extends React.Component {
     }
 }
 
-export default AppsTable;
\ No newline at end of file
+export default withConfigContext(AppsTable);
\ No newline at end of file
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 b7022888ec1..62795984f03 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
@@ -3,14 +3,15 @@ import {Divider, Row, Col, Typography, Button, Drawer, Icon} from "antd";
 import StarRatings from "react-star-ratings";
 import Reviews from "./review/Reviews";
 import "../../../App.css";
-import config from "../../../../public/conf/config.json";
 import DetailedRating from "../detailed-rating/DetailedRating";
 import EditRelease from "./edit-release/EditRelease";
+import {withConfigContext} from "../../../context/ConfigContext";
 
 const {Title, Text, Paragraph} = Typography;
 
 class ReleaseView extends React.Component {
     render() {
+        const config = this.props.context;
         const app = this.props.app;
         const release = (app !== null) ? app.applicationReleases[0] : null;
         if (release == null) {
@@ -102,4 +103,4 @@ class ReleaseView extends React.Component {
     }
 }
 
-export default ReleaseView;
\ No newline at end of file
+export default withConfigContext(ReleaseView);
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 a8a12a029cd..79aa5bd433f 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
@@ -1,7 +1,7 @@
 import React from "react";
 import {Modal, Button, Icon, notification, Spin, Row, Col, Card, Upload, Input, Switch, Form} from 'antd';
-import config from "../../../../../public/conf/config.json";
 import axios from "axios";
+import {withConfigContext} from "../../../../context/ConfigContext";
 
 const {TextArea} = Input;
 
@@ -116,6 +116,7 @@ class EditReleaseModal extends React.Component {
     handleSubmit = e => {
         e.preventDefault();
         const {uuid} = this.props;
+        const config = this.props.context;
 
         const {formConfig} = this.state;
         const {specificElements} = formConfig;
@@ -180,7 +181,7 @@ class EditReleaseModal extends React.Component {
 
                 data.append("applicationRelease", blob);
 
-                const url = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications" + formConfig.endpoint + "/" + uuid;
+                const url = window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications" + formConfig.endpoint + "/" + uuid;
 
                 axios.put(
                     url,
@@ -205,7 +206,7 @@ class EditReleaseModal extends React.Component {
 
                 }).catch((error) => {
                     if (error.hasOwnProperty("response") && error.response.status === 401) {
-                        window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                        window.location.href = window.location.origin+ '/publisher/login';
                     } else {
                         notification["error"]({
                             message: "Something went wrong!",
@@ -412,6 +413,6 @@ class EditReleaseModal extends React.Component {
     }
 }
 
-const EditRelease = Form.create({name: 'add-new-release'})(EditReleaseModal);
+const EditRelease = withConfigContext(Form.create({name: 'add-new-release'})(EditReleaseModal));
 
 export default EditRelease;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.js
index ecbc782b739..27dae7a1e37 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.js
@@ -1,16 +1,14 @@
 import React from "react";
 import {Typography, Tag, Divider, Select, Button, Modal, message, notification, Collapse} from "antd";
 import axios from "axios";
-import config from "../../../../../public/conf/config.json";
-import pSBC from "shade-blend-color";
 import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
 import './LifeCycle.css';
 import LifeCycleDetailsModal from "./lifeCycleDetailsModal/lifeCycleDetailsModal";
+import {withConfigContext} from "../../../../context/ConfigContext";
 
 const {Text, Title, Paragraph} = Typography;
 const {Option} = Select;
-const Panel = Collapse.Panel;
 
 const modules = {
     toolbar: [
@@ -57,8 +55,9 @@ class LifeCycle extends React.Component {
 
 
     fetchData = () => {
+        const config = this.props.context;
         axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/lifecycle-config"
+            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/lifecycle-config"
         ).then(res => {
             if (res.status === 200) {
                 const lifecycle = res.data.data;
@@ -69,7 +68,7 @@ class LifeCycle extends React.Component {
 
         }).catch(function (error) {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                window.location.href = window.location.origin+ '/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -102,6 +101,7 @@ class LifeCycle extends React.Component {
     };
 
     addLifeCycle = () => {
+        const config = this.props.context;
         const {selectedStatus, reasonText} = this.state;
         const {uuid} = this.props;
         const data = {
@@ -114,7 +114,7 @@ class LifeCycle extends React.Component {
         });
 
         axios.post(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/life-cycle/" + uuid,
+            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/life-cycle/" + uuid,
             data
         ).then(res => {
             if (res.status === 201) {
@@ -135,7 +135,7 @@ class LifeCycle extends React.Component {
 
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                window.location.href = window.location.origin+ '/publisher/login';
             } else {
                 notification["error"]({
                     message: "Error",
@@ -235,4 +235,4 @@ class LifeCycle extends React.Component {
 
 }
 
-export default LifeCycle;
\ No newline at end of file
+export default withConfigContext(LifeCycle);
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/lifeCycleDetailsModal/lifeCycleDetailsModal.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/lifeCycleDetailsModal/lifeCycleDetailsModal.js
index 9b4192d6364..b7c5c3d5ffe 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/lifeCycleDetailsModal/lifeCycleDetailsModal.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/lifeCycleDetailsModal/lifeCycleDetailsModal.js
@@ -1,10 +1,9 @@
 import React from "react";
-import {Modal, Button, Tag, Collapse, List,Typography} from 'antd';
+import {Modal, Button, Tag, List, Typography} from 'antd';
 import pSBC from "shade-blend-color";
-import config from "../../../../../../public/conf/config.json";
+import {withConfigContext} from "../../../../../context/ConfigContext";
 
 const {Text} = Typography;
-const lifeCycleConfig = config.lifecycle;
 
 class LifeCycleDetailsModal extends React.Component {
 
@@ -27,6 +26,8 @@ class LifeCycleDetailsModal extends React.Component {
     };
 
     render() {
+        const config = this.props.context;
+        const lifeCycleConfig = config.lifecycle;
         const {lifecycle} = this.props;
         return (
             <div>
@@ -40,7 +41,7 @@ class LifeCycleDetailsModal extends React.Component {
                 <Modal
                     title="Lifecycle"
                     visible={this.state.visible}
-                    footer = {null}
+                    footer={null}
                     onCancel={this.handleCancel}
                 >
 
@@ -93,4 +94,4 @@ class LifeCycleDetailsModal extends React.Component {
     }
 }
 
-export default LifeCycleDetailsModal;
+export default withConfigContext(LifeCycleDetailsModal);
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 865e3efe81a..40a68143cbb 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
@@ -5,7 +5,7 @@ import "./Reviews.css";
 import InfiniteScroll from 'react-infinite-scroller';
 import SingleReview from "./SingleReview";
 import axios from "axios";
-import config from "../../../../../public/conf/config.json";
+import {withConfigContext} from "../../../../context/ConfigContext";
 
 const limit = 5;
 
@@ -27,11 +27,12 @@ class Reviews extends React.Component {
     }
 
     fetchData = (offset, limit, callback) => {
+        const config = this.props.context;
 
         const {uuid, type} = this.props;
 
         axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + 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;
@@ -40,7 +41,7 @@ class Reviews extends React.Component {
 
         }).catch(function (error) {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                window.location.href = window.location.origin+ '/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -121,4 +122,4 @@ class Reviews extends React.Component {
     }
 }
 
-export default Reviews;
\ No newline at end of file
+export default withConfigContext(Reviews);
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 0bafa61da3d..198f570f286 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
@@ -17,9 +17,9 @@ import {
     Typography
 } from "antd";
 import axios from "axios";
-import config from "../../../../public/conf/config.json";
 import {TweenOneGroup} from 'rc-tween-one';
 import pSBC from "shade-blend-color";
+import {withConfigContext} from "../../../context/ConfigContext";
 
 const {Title} = Typography;
 
@@ -38,8 +38,9 @@ class ManageCategories extends React.Component {
     };
 
     componentDidMount() {
+        const config = this.props.context;
         axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + 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);
@@ -51,7 +52,7 @@ class ManageCategories extends React.Component {
 
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                window.location.href = window.location.origin+ '/publisher/login';
             } else {
                 message.warning('Something went wrong');
 
@@ -70,11 +71,12 @@ class ManageCategories extends React.Component {
     };
 
     deleteCategory = (id) => {
+        const config = this.props.context;
         this.setState({
             loading: true
         });
         axios.delete(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + 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"]({
@@ -98,7 +100,7 @@ class ManageCategories extends React.Component {
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                window.location.href = window.location.origin+ '/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -114,6 +116,7 @@ class ManageCategories extends React.Component {
     };
 
     renderElement = (category) => {
+        const config = this.props.context;
         const categoryName = category.categoryName;
         const tagElem = (
             <Tag
@@ -157,6 +160,7 @@ class ManageCategories extends React.Component {
     };
 
     renderTempElement = (category) => {
+        const config = this.props.context;
         const tagElem = (
             <Tag
                 closable
@@ -210,6 +214,7 @@ class ManageCategories extends React.Component {
     };
 
     handleSave = () => {
+        const config = this.props.context;
         const {tempElements, categories} = this.state;
         this.setState({
             loading: true
@@ -218,7 +223,7 @@ class ManageCategories extends React.Component {
         const data = tempElements.map(category => category.categoryName);
 
         axios.post(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + 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) {
@@ -241,7 +246,7 @@ class ManageCategories extends React.Component {
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                window.location.href = window.location.origin+ '/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -276,6 +281,7 @@ class ManageCategories extends React.Component {
     };
 
     editItem = () => {
+        const config = this.props.context;
 
         const {editingValue, currentlyEditingId, categories} = this.state;
 
@@ -285,7 +291,7 @@ class ManageCategories extends React.Component {
         });
 
         axios.put(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + 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) {
@@ -307,7 +313,7 @@ class ManageCategories extends React.Component {
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                window.location.href = window.location.origin+ '/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -455,4 +461,4 @@ class ManageCategories extends React.Component {
     }
 }
 
-export default ManageCategories;
\ No newline at end of file
+export default withConfigContext(ManageCategories);
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 9831ab4a3c3..b7b8d5b5953 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
@@ -16,8 +16,8 @@ import {
     Typography
 } from "antd";
 import axios from "axios";
-import config from "../../../../public/conf/config.json";
 import {TweenOneGroup} from 'rc-tween-one';
+import {withConfigContext} from "../../../context/ConfigContext";
 
 const {Title} = Typography;
 
@@ -36,8 +36,9 @@ class ManageTags extends React.Component {
     };
 
     componentDidMount() {
+        const config = this.props.context;
         axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + 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);
@@ -49,7 +50,7 @@ class ManageTags extends React.Component {
 
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                window.location.href = window.location.origin+ '/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -72,13 +73,14 @@ class ManageTags extends React.Component {
     };
 
     deleteTag = (id) => {
+        const config = this.props.context;
 
         this.setState({
             loading: true
         });
 
         axios.delete(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + 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"]({
@@ -102,7 +104,7 @@ class ManageTags extends React.Component {
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                window.location.href = window.location.origin+ '/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -214,6 +216,7 @@ class ManageTags extends React.Component {
     };
 
     handleSave = () => {
+        const config = this.props.context;
         const {tempElements, tags} = this.state;
         this.setState({
             loading: true
@@ -221,7 +224,7 @@ class ManageTags extends React.Component {
 
         const data = tempElements.map(tag => tag.tagName);
 
-        axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + 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) {
@@ -244,7 +247,7 @@ class ManageTags extends React.Component {
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                window.location.href = window.location.origin+ '/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -279,6 +282,7 @@ class ManageTags extends React.Component {
     };
 
     editItem = () => {
+        const config = this.props.context;
 
         const {editingValue, currentlyEditingId, tags} = this.state;
 
@@ -288,7 +292,7 @@ class ManageTags extends React.Component {
         });
 
         axios.put(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + 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) {
@@ -310,7 +314,7 @@ class ManageTags extends React.Component {
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                window.location.href = window.location.origin+ '/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -416,45 +420,46 @@ class ManageTags extends React.Component {
                                         <Divider type="vertical"/>
                                     </span>
                                 )}
-                                    < Button
+                                < Button
                                     onClick={this.handleCloseButton}
                                     size="small">
                                     Cancel
-                                    </Button>
-                                    </div>
-                                    </div>
-                                }
-                                <Divider dashed="true"/>
-                                <div style={{marginTop: 16}}>
-                                    <TweenOneGroup
-                                        enter={{
-                                            scale: 0.8,
-                                            opacity: 0,
-                                            type: 'from',
-                                            duration: 100,
-                                            onComplete: e => {
-                                                e.target.style = '';
-                                            },
-                                        }}
-                                        leave={{opacity: 0, width: 0, scale: 0, duration: 200}}
-                                        appear={false}
-                                    >
-                                        {tagsElements}
-                                    </TweenOneGroup>
-                                </div>
-                            </Spin>
-                        </Card>
-                        < Modal
-                            title="Edit"
-                            visible={this.state.isEditModalVisible}
-                            onCancel={this.closeEditModal}
-                            onOk={this.editItem}
-                            >
-                            <Input value={this.state.editingValue} ref={(input) => this.editingInput = input} onChange={this.handleEditInputChange}/>
-                            </Modal>
+                                </Button>
                             </div>
-                            );
-                        }
+                        </div>
                         }
+                        <Divider dashed="true"/>
+                        <div style={{marginTop: 16}}>
+                            <TweenOneGroup
+                                enter={{
+                                    scale: 0.8,
+                                    opacity: 0,
+                                    type: 'from',
+                                    duration: 100,
+                                    onComplete: e => {
+                                        e.target.style = '';
+                                    },
+                                }}
+                                leave={{opacity: 0, width: 0, scale: 0, duration: 200}}
+                                appear={false}
+                            >
+                                {tagsElements}
+                            </TweenOneGroup>
+                        </div>
+                    </Spin>
+                </Card>
+                < Modal
+                    title="Edit"
+                    visible={this.state.isEditModalVisible}
+                    onCancel={this.closeEditModal}
+                    onOk={this.editItem}
+                >
+                    <Input value={this.state.editingValue} ref={(input) => this.editingInput = input}
+                           onChange={this.handleEditInputChange}/>
+                </Modal>
+            </div>
+        );
+    }
+}
 
-                        export default ManageTags;
\ No newline at end of file
+export default withConfigContext(ManageTags);
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 cf7d6fc4c9a..481716fd502 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
@@ -2,35 +2,22 @@ import React from "react";
 import {
     Card,
     Button,
-    message,
+    Steps,
     Row,
     Col,
-    Input,
-    Icon,
-    Select,
-    Switch,
     Form,
-    Upload,
-    Divider,
+    Result,
     notification,
     Spin
 } from "antd";
 import axios from "axios";
-import {withRouter} from 'react-router-dom'
-import config from "../../../public/conf/config.json";
+import {withRouter} from 'react-router-dom';
+import NewAppDetailsForm from "./subForms/NewAppDetailsForm";
+import NewAppUploadForm from "./subForms/NewAppUploadForm";
+import {withConfigContext} from "../../context/ConfigContext";
 
-const {Option} = Select;
-const {TextArea} = Input;
-const InputGroup = Input.Group;
+const {Step} = Steps;
 
-const formItemLayout = {
-    labelCol: {
-        span: 5,
-    },
-    wrapperCol: {
-        span: 19,
-    },
-};
 
 class AddNewAppFormComponent extends React.Component {
 
@@ -43,518 +30,135 @@ class AddNewAppFormComponent extends React.Component {
             icons: [],
             screenshots: [],
             loading: false,
-            binaryFiles: []
+            binaryFiles: [],
+            application: null,
+            release: null,
+            isError: false
         };
     }
 
-    componentDidMount() {
-        this.getCategories();
-        this.getTags();
-    }
+    onSuccessApplicationData = (application) => {
+        this.setState({
+            application,
+            current: 1
+        });
+    };
 
-    getCategories = () => {
-        axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories"
-        ).then(res => {
-            if (res.status === 200) {
-                let categories = JSON.parse(res.data.data);
-                this.setState({
-                    categories: categories,
-                    loading: false
-                });
-            }
+    onSuccessReleaseData = (releaseData) => {
+        const config = this.props.context;
+        this.setState({
+            loading: true,
+            isError: false
+        });
+        const {application} = this.state;
+        const {data, release} = releaseData;
+        const {formConfig} = this.props;
 
-        }).catch((error) => {
-            if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
-            } else {
-                notification["error"]({
-                    message: "There was a problem",
-                    duration: 0,
-                    description:
-                        "Error occurred while trying to load categories.",
-                });
-            }
-            this.setState({
-                loading: false
-            });
+        //add release wrapper
+        application[formConfig.releaseWrapperName] = [release];
+
+        const json = JSON.stringify(application);
+        const blob = new Blob([json], {
+            type: 'application/json'
         });
-    };
+        data.append(formConfig.jsonPayloadName, blob);
+
+        const url = window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications" + formConfig.endpoint;
 
-    getTags = () => {
-        axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags"
+        axios.post(
+            url,
+            data,
+            {
+                headers: {
+                    'X-Platform': config.serverConfig.platform
+                },
+            }
         ).then(res => {
-            if (res.status === 200) {
-                let tags = JSON.parse(res.data.data);
+            if (res.status === 201) {
+                this.setState({
+                    loading: false,
+                    current: 2
+                });
+            } else {
                 this.setState({
-                    tags: tags,
                     loading: false,
+                    isError: true,
+                    current: 2
                 });
             }
 
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                window.location.href = window.location.origin+ '/publisher/login';
             } else {
                 notification["error"]({
-                    message: "There was a problem",
-                    duration: 0,
+                    message: "Something went wrong!",
                     description:
-                        "Error occurred while trying to load tags.",
+                        "Sorry, we were unable to complete your request.",
                 });
+
             }
             this.setState({
-                loading: false
+                loading: false,
+                isError: true,
+                current: 2
             });
         });
-    };
 
-    handleCategoryChange = (value) => {
-        // console.log(`selected ${value}`);
     };
 
-    handleSubmit = e => {
-        e.preventDefault();
-        const {formConfig} = this.props;
-        const {specificElements} = formConfig;
-
-        this.props.form.validateFields((err, values) => {
-            if (!err) {
-                this.setState({
-                    loading: true
-                });
-                const {name, description, categories, tags, price, isSharedWithAllTenants, binaryFile, icon, screenshots, releaseDescription, releaseType} = values;
-                const application = {
-                    name,
-                    description,
-                    categories,
-                    subMethod: (price === undefined || parseInt(price) === 0) ? "FREE" : "PAID",
-                    tags,
-                    unrestrictedRoles: [],
-                };
-
-                const data = new FormData();
-
-                if (formConfig.installationType !== "WEB_CLIP") {
-                    application.deviceType = values.deviceType;
-                } else {
-                    application.type = "WEB_CLIP";
-                    application.deviceType = "ALL";
-                }
-
-                if (specificElements.hasOwnProperty("binaryFile")) {
-                    data.append('binaryFile', binaryFile[0].originFileObj);
-                }
-
-                //add release data
-                const release = {
-                    description: releaseDescription,
-                    price: (price === undefined) ? 0 : parseInt(price),
-                    isSharedWithAllTenants,
-                    metaData: "string",
-                    releaseType: releaseType
-                };
-
-                if (formConfig.installationType !== "WEB_CLIP") {
-                    release.supportedOsVersions = "4.0-10.0";
-                }
-
-                if (specificElements.hasOwnProperty("version")) {
-                    release.version = values.version;
-                }
-                if (specificElements.hasOwnProperty("url")) {
-                    release.url = values.url;
-                }
-                if (specificElements.hasOwnProperty("packageName")) {
-                    release.packageName = values.packageName;
-                }
-
-                //add release wrapper
-                application[formConfig.releaseWrapperName] = [release];
-
-                data.append('icon', icon[0].originFileObj);
-                data.append('screenshot1', screenshots[0].originFileObj);
-                data.append('screenshot2', screenshots[1].originFileObj);
-                data.append('screenshot3', screenshots[2].originFileObj);
-
-                const json = JSON.stringify(application);
-                const blob = new Blob([json], {
-                    type: 'application/json'
-                });
-                data.append(formConfig.jsonPayloadName, blob);
-
-                const url = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications" + formConfig.endpoint;
-
-                axios.post(
-                    url,
-                    data,
-                    {
-                        headers: {
-                            'X-Platform': config.serverConfig.platform
-                        },
-                    }
-                ).then(res => {
-                    if (res.status === 201) {
-                        this.setState({
-                            loading: false,
-                        });
-
-                        notification["success"]({
-                            message: "Done!",
-                            description:
-                                "New app was added successfully",
-                        });
-
-                        this.props.history.push('/publisher/apps');
-
-                        // window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/apps';
-
-                    }
-
-                }).catch((error) => {
-                    if (error.hasOwnProperty("response") && error.response.status === 401) {
-                        window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
-                    } else {
-                        notification["error"]({
-                            message: "Something went wrong!",
-                            description:
-                                "Sorry, we were unable to complete your request.",
-                        });
-
-                    }
-                    this.setState({
-                        loading: false
-                    });
-                });
-            }
-        });
-    };
-
-    normFile = e => {
-        if (Array.isArray(e)) {
-            return e;
-        }
-        return e && e.fileList;
-    };
-
-    handleIconChange = ({fileList}) => this.setState({icons: fileList});
-    handleBinaryFileChange = ({fileList}) => this.setState({binaryFiles: fileList});
-
-    handleScreenshotChange = ({fileList}) => this.setState({screenshots: fileList});
-
-    validateIcon = (rule, value, callback) => {
-        const {icons} = this.state;
-        if (icons.length !== 1) {
-            callback("Please select icon file");
-        }
-        callback();
+    onClickBackButton = () => {
+        const current = this.state.current - 1;
+        this.setState({current});
     };
 
     render() {
-        const {categories, tags, icons, screenshots, loading, binaryFiles} = this.state;
-        const {getFieldDecorator} = this.props.form;
+        const { loading, current, isError} = this.state;
         const {formConfig} = this.props;
+
         return (
             <div>
                 <Spin tip="Uploading..." spinning={loading}>
                     <Row>
-                        <Col span={20} offset={2}>
-                            <Card>
-                                <Form labelAlign="left" layout="horizontal"
-                                      hideRequiredMark
-                                      onSubmit={this.handleSubmit}>
-                                    <Row>
-                                        <Col span={12}>
-                                            <div>
-
-                                                {formConfig.installationType !== "WEB_CLIP" && (
-                                                    <Form.Item {...formItemLayout} label="Device Type">
-                                                        {getFieldDecorator('deviceType', {
-                                                                rules: [
-                                                                    {
-                                                                        required: true,
-                                                                        message: 'Please select device type'
-                                                                    },
-                                                                    {
-                                                                        // validator: this.validateIcon
-                                                                    }
-                                                                ],
-
-                                                            }
-                                                        )(
-                                                            <Select placeholder="select device type">
-                                                                <Option key="android">Android</Option>
-                                                                <Option key="ios">iOS</Option>
-                                                            </Select>
-                                                        )}
-                                                    </Form.Item>
-                                                )}
-
-                                                {/*app name*/}
-                                                <Form.Item {...formItemLayout} label="App Name">
-                                                    {getFieldDecorator('name', {
-                                                        rules: [{
-                                                            required: true,
-                                                            message: 'Please input a name'
-                                                        }],
-                                                    })(
-                                                        <Input placeholder="ex: Lorem App"/>
-                                                    )}
-                                                </Form.Item>
-
-                                                {/*description*/}
-                                                <Form.Item {...formItemLayout} label="Description">
-                                                    {getFieldDecorator('description', {
-                                                        rules: [{
-                                                            required: true,
-                                                            message: 'Please enter a description'
-                                                        }],
-                                                    })(
-                                                        <TextArea placeholder="Enter the description..." rows={7}/>
-                                                    )}
-                                                </Form.Item>
-                                                <Form.Item {...formItemLayout} label="Categories">
-                                                    {getFieldDecorator('categories', {
-                                                        rules: [{
-                                                            required: true,
-                                                            message: 'Please select categories'
-                                                        }],
-                                                    })(
-                                                        <Select
-                                                            mode="multiple"
-                                                            style={{width: '100%'}}
-                                                            placeholder="Select a Category"
-                                                            onChange={this.handleCategoryChange}
-                                                        >
-                                                            {
-                                                                categories.map(category => {
-                                                                    return (
-                                                                        <Option
-                                                                            key={category.categoryName}>
-                                                                            {category.categoryName}
-                                                                        </Option>
-                                                                    )
-                                                                })
-                                                            }
-                                                        </Select>
-                                                    )}
-                                                </Form.Item>
-                                                <Divider/>
-                                                <Form.Item {...formItemLayout} label="Tags">
-                                                    {getFieldDecorator('tags', {
-                                                        rules: [{
-                                                            required: true,
-                                                            message: 'Please select tags'
-                                                        }],
-                                                    })(
-                                                        <Select
-                                                            mode="tags"
-                                                            style={{width: '100%'}}
-                                                            placeholder="Tags"
-                                                        >
-                                                            {
-                                                                tags.map(tag => {
-                                                                    return (
-                                                                        <Option
-                                                                            key={tag.tagName}>
-                                                                            {tag.tagName}
-                                                                        </Option>
-                                                                    )
-                                                                })
-                                                            }
-                                                        </Select>
-                                                    )}
-                                                </Form.Item>
-                                                <Form.Item {...formItemLayout} label="Meta Data">
-                                                    <InputGroup>
-                                                        <Row gutter={8}>
-                                                            <Col span={10}>
-                                                                <Input placeholder="Key"/>
-                                                            </Col>
-                                                            <Col span={12}>
-                                                                <Input placeholder="value"/>
-                                                            </Col>
-                                                            <Col span={2}>
-                                                                <Button type="dashed" shape="circle" icon="plus"/>
-                                                            </Col>
-                                                        </Row>
-                                                    </InputGroup>
-                                                </Form.Item>
-                                            </div>
-                                        </Col>
-                                        <Col span={12} style={{paddingLeft: 20}}>
-                                            <p>Release Data</p>
-
-                                            {formConfig.specificElements.hasOwnProperty("binaryFile") && (
-                                                <Form.Item {...formItemLayout} label="Application">
-                                                    {getFieldDecorator('binaryFile', {
-                                                        valuePropName: 'binaryFile',
-                                                        getValueFromEvent: this.normFile,
-                                                        required: true,
-                                                        message: 'Please select application'
-                                                    })(
-                                                        <Upload
-                                                            name="binaryFile"
-                                                            onChange={this.handleBinaryFileChange}
-                                                            beforeUpload={() => false}
-                                                        >
-                                                            {binaryFiles.length !== 1 && (
-                                                                <Button>
-                                                                    <Icon type="upload"/> Click to upload
-                                                                </Button>
-                                                            )}
-                                                        </Upload>,
-                                                    )}
-                                                </Form.Item>
-                                            )}
-
-                                            <Form.Item {...formItemLayout} label="Icon">
-                                                {getFieldDecorator('icon', {
-                                                    valuePropName: 'icon',
-                                                    getValueFromEvent: this.normFile,
-                                                    required: true,
-                                                    message: 'Please select a icon'
-                                                })(
-                                                    <Upload
-                                                        name="logo"
-                                                        onChange={this.handleIconChange}
-                                                        beforeUpload={() => false}
-                                                    >
-                                                        {icons.length !== 1 && (
-                                                            <Button>
-                                                                <Icon type="upload"/> Click to upload
-                                                            </Button>
-                                                        )}
-                                                    </Upload>,
-                                                )}
-                                            </Form.Item>
-
-                                            <Row style={{marginTop: 40}}>
-                                                <Col span={24}>
-
-                                                </Col>
-                                            </Row>
-
-                                            <Form.Item {...formItemLayout} label="Screenshots">
-                                                {getFieldDecorator('screenshots', {
-                                                    valuePropName: 'icon',
-                                                    getValueFromEvent: this.normFile,
-                                                    required: true,
-                                                    message: 'Please select a icon'
-                                                })(
-                                                    <Upload
-                                                        name="screenshots"
-                                                        onChange={this.handleScreenshotChange}
-                                                        beforeUpload={() => false}
-                                                        multiple
-                                                    >
-
-                                                        {screenshots.length < 3 && (
-                                                            <Button>
-                                                                <Icon type="upload"/> Click to upload
-                                                            </Button>
-                                                        )}
-
-
-                                                    </Upload>,
-                                                )}
-                                            </Form.Item>
-
-                                            {formConfig.specificElements.hasOwnProperty("packageName") && (
-                                                <Form.Item {...formItemLayout} label="Package Name">
-                                                    {getFieldDecorator('packageName', {
-                                                        rules: [{
-                                                            required: true,
-                                                            message: 'Please input the package name'
-                                                        }],
-                                                    })(
-                                                        <Input placeholder="Package Name"/>
-                                                    )}
-                                                </Form.Item>
-                                            )}
-
-                                            {formConfig.specificElements.hasOwnProperty("url") && (
-                                                <Form.Item {...formItemLayout} label="URL">
-                                                    {getFieldDecorator('url', {
-                                                        rules: [{
-                                                            required: true,
-                                                            message: 'Please input the url'
-                                                        }],
-                                                    })(
-                                                        <Input placeholder="url"/>
-                                                    )}
-                                                </Form.Item>
-                                            )}
-
-                                            {formConfig.specificElements.hasOwnProperty("version") && (
-                                                <Form.Item {...formItemLayout} label="Version">
-                                                    {getFieldDecorator('version', {
-                                                        rules: [{
-                                                            required: true,
-                                                            message: 'Please input the version'
-                                                        }],
-                                                    })(
-                                                        <Input placeholder="Version"/>
-                                                    )}
-                                                </Form.Item>
-                                            )}
-
-                                            <Form.Item {...formItemLayout} label="Release Type">
-                                                {getFieldDecorator('releaseType', {
-                                                    rules: [{
-                                                        required: true,
-                                                        message: 'Please input the Release Type'
-                                                    }],
-                                                })(
-                                                    <Input placeholder="Release Type"/>
-                                                )}
-                                            </Form.Item>
-
-                                            <Form.Item {...formItemLayout} label="Description">
-                                                {getFieldDecorator('releaseDescription', {
-                                                    rules: [{
-                                                        required: true,
-                                                        message: 'Please enter a description for release'
-                                                    }],
-                                                })(
-                                                    <TextArea placeholder="Enter a description for release" rows={5}/>
-                                                )}
-                                            </Form.Item>
-
-                                            <Form.Item {...formItemLayout} label="Price">
-                                                {getFieldDecorator('price', {
-                                                    rules: [{
-                                                        required: false
-                                                    }],
-                                                })(
-                                                    <Input prefix="$" placeholder="00.00"/>
-                                                )}
-                                            </Form.Item>
-
-                                            <Form.Item {...formItemLayout} label="Is Shared?">
-                                                {getFieldDecorator('isSharedWithAllTenants', {
-                                                    rules: [{
-                                                        required: true,
-                                                        message: 'Please select'
-                                                    }],
-                                                    initialValue: false
-                                                })(
-                                                    <Switch checkedChildren={<Icon type="check"/>}
-                                                            unCheckedChildren={<Icon type="close"/>}
-                                                    />
-                                                )}
-
-                                            </Form.Item>
-                                        </Col>
-
-                                    </Row>
-                                    <Form.Item style={{float: "right"}}>
-                                        <Button type="primary" htmlType="submit">
-                                            Submit
-                                        </Button>
-                                    </Form.Item>
-                                </Form>
+                        <Col span={16} offset={4}>
+                            <Steps style={{minHeight: 32}} current={current}>
+                                <Step key="Application" title="Application"/>
+                                <Step key="Release" title="Release"/>
+                                <Step key="Result" title="Result"/>
+                            </Steps>
+                            <Card style={{marginTop: 24}}>
+                                <div style={{display: (current === 0 ? 'unset' : 'none')}}>
+                                    <NewAppDetailsForm
+                                        formConfig={formConfig}
+                                        onSuccessApplicationData={this.onSuccessApplicationData}/>
+                                </div>
+                                <div style={{display: (current === 1 ? 'unset' : 'none')}}>
+                                    <NewAppUploadForm
+                                        formConfig={formConfig}
+                                        onSuccessReleaseData={this.onSuccessReleaseData}
+                                        onClickBackButton={this.onClickBackButton}/>
+                                </div>
+
+                                <div style={{display: (current === 2 ? 'unset' : 'none')}}>
+
+                                    {!isError && (<Result
+                                        status="success"
+                                        title="Application created successfully!"
+                                        extra={[
+                                            <Button type="primary" key="console"
+                                                    onClick={() => this.props.history.push('/publisher/apps')}>
+                                                Go to applications
+                                            </Button>
+                                        ]}
+                                    />)}
+
+                                    {isError && (<Result
+                                        status="500"
+                                        title="Error occurred while creating the application."
+                                        subTitle="Go back to edit the details and submit again."
+                                        extra={<Button onClick={this.onClickBackButton}>Back</Button>}
+                                    />)}
+                                </div>
                             </Card>
                         </Col>
                     </Row>
@@ -566,4 +170,4 @@ class AddNewAppFormComponent extends React.Component {
 }
 
 const AddNewAppForm = withRouter(Form.create({name: 'add-new-app'})(AddNewAppFormComponent));
-export default AddNewAppForm;
+export default withConfigContext(AddNewAppForm);
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
new file mode 100644
index 00000000000..634683273db
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js
@@ -0,0 +1,268 @@
+import React from "react";
+import {Button, Col, Divider, Form, Icon, Input, notification, Row, Select, Switch, Upload} from "antd";
+import axios from "axios";
+import {withConfigContext} from "../../../context/ConfigContext";
+
+const formItemLayout = {
+    labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 },
+    },
+    wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 19 },
+    },
+};
+const {Option} = Select;
+const {TextArea} = Input;
+
+class NewAppDetailsForm extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            categories: [],
+            tags: []
+        }
+    }
+
+
+    handleSubmit = e => {
+        e.preventDefault();
+        const {formConfig} = this.props;
+        const {specificElements} = formConfig;
+
+        this.props.form.validateFields((err, values) => {
+            if (!err) {
+                this.setState({
+                    loading: true
+                });
+                const {name, description, categories, tags, price, isSharedWithAllTenants, binaryFile, icon, screenshots, releaseDescription, releaseType} = values;
+                const application = {
+                    name,
+                    description,
+                    categories,
+                    subMethod: (price === undefined || parseInt(price) === 0) ? "FREE" : "PAID",
+                    tags,
+                    unrestrictedRoles: [],
+                };
+
+                if (formConfig.installationType !== "WEB_CLIP") {
+                    application.deviceType = values.deviceType;
+                } else {
+                    application.type = "WEB_CLIP";
+                    application.deviceType = "ALL";
+                }
+
+                this.props.onSuccessApplicationData(application);
+            }
+        });
+    };
+
+    componentDidMount() {
+        this.getCategories();
+        this.getTags();
+    }
+
+    getCategories = () => {
+        const config = this.props.context;
+        axios.get(
+            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.setState({
+                    categories: categories,
+                    loading: false
+                });
+            }
+
+        }).catch((error) => {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
+                window.location.href = window.location.origin+ '/publisher/login';
+            } else {
+                notification["error"]({
+                    message: "There was a problem",
+                    duration: 0,
+                    description:
+                        "Error occurred while trying to load categories.",
+                });
+            }
+            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"
+        ).then(res => {
+            if (res.status === 200) {
+                let tags = JSON.parse(res.data.data);
+                this.setState({
+                    tags: tags,
+                    loading: false,
+                });
+            }
+
+        }).catch((error) => {
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
+                window.location.href = window.location.origin+ '/publisher/login';
+            } else {
+                notification["error"]({
+                    message: "There was a problem",
+                    duration: 0,
+                    description:
+                        "Error occurred while trying to load tags.",
+                });
+            }
+            this.setState({
+                loading: false
+            });
+        });
+    };
+
+    render() {
+        const {formConfig} = this.props;
+        const {categories, tags} = this.state;
+        const {getFieldDecorator} = this.props.form;
+
+        return (
+            <div>
+                <Row>
+                    <Col md={5}>
+
+                    </Col>
+                    <Col md={14}>
+                        <Form
+                            labelAlign="right"
+                            layout="horizontal"
+                            onSubmit={this.handleSubmit}
+                        >
+                            {formConfig.installationType !== "WEB_CLIP" && (
+                                <Form.Item {...formItemLayout} label="Device Type">
+                                    {getFieldDecorator('deviceType', {
+                                            rules: [
+                                                {
+                                                    required: true,
+                                                    message: 'Please select device type'
+                                                }
+                                            ],
+
+                                        }
+                                    )(
+                                        <Select placeholder="select device type">
+                                            <Option key="android">Android</Option>
+                                            <Option key="ios">iOS</Option>
+                                        </Select>
+                                    )}
+                                </Form.Item>
+                            )}
+
+                            {/*app name*/}
+                            <Form.Item {...formItemLayout} label="App Name">
+                                {getFieldDecorator('name', {
+                                    rules: [{
+                                        required: true,
+                                        message: 'Please input a name'
+                                    }],
+                                })(
+                                    <Input placeholder="ex: Lorem App"/>
+                                )}
+                            </Form.Item>
+
+                            {/*description*/}
+                            <Form.Item {...formItemLayout} label="Description">
+                                {getFieldDecorator('description', {
+                                    rules: [{
+                                        required: true,
+                                        message: 'Please enter a description'
+                                    }],
+                                })(
+                                    <TextArea placeholder="Enter the description..." rows={7}/>
+                                )}
+                            </Form.Item>
+                            <Form.Item {...formItemLayout} label="Categories">
+                                {getFieldDecorator('categories', {
+                                    rules: [{
+                                        required: true,
+                                        message: 'Please select categories'
+                                    }],
+                                })(
+                                    <Select
+                                        mode="multiple"
+                                        style={{width: '100%'}}
+                                        placeholder="Select a Category"
+                                        onChange={this.handleCategoryChange}
+                                    >
+                                        {
+                                            categories.map(category => {
+                                                return (
+                                                    <Option
+                                                        key={category.categoryName}>
+                                                        {category.categoryName}
+                                                    </Option>
+                                                )
+                                            })
+                                        }
+                                    </Select>
+                                )}
+                            </Form.Item>
+                            <Form.Item {...formItemLayout} label="Tags">
+                                {getFieldDecorator('tags', {
+                                    rules: [{
+                                        required: true,
+                                        message: 'Please select tags'
+                                    }],
+                                })(
+                                    <Select
+                                        mode="tags"
+                                        style={{width: '100%'}}
+                                        placeholder="Tags"
+                                    >
+                                        {
+                                            tags.map(tag => {
+                                                return (
+                                                    <Option
+                                                        key={tag.tagName}>
+                                                        {tag.tagName}
+                                                    </Option>
+                                                )
+                                            })
+                                        }
+                                    </Select>
+                                )}
+                            </Form.Item>
+                            //todo implement add meta data
+                            {/*<Form.Item {...formItemLayout} label="Meta Data">*/}
+                                {/*<InputGroup>*/}
+                                    {/*<Row gutter={8}>*/}
+                                        {/*<Col span={10}>*/}
+                                            {/*<Input placeholder="Key"/>*/}
+                                        {/*</Col>*/}
+                                        {/*<Col span={12}>*/}
+                                            {/*<Input placeholder="value"/>*/}
+                                        {/*</Col>*/}
+                                        {/*<Col span={2}>*/}
+                                            {/*<Button type="dashed" shape="circle" icon="plus"/>*/}
+                                        {/*</Col>*/}
+                                    {/*</Row>*/}
+                                {/*</InputGroup>*/}
+                            {/*</Form.Item>*/}
+                            <Form.Item style={{float: "right"}}>
+                                <Button type="primary" htmlType="submit">
+                                    Next
+                                </Button>
+                            </Form.Item>
+                        </Form>
+                    </Col>
+                </Row>
+            </div>
+        );
+    }
+
+}
+
+export default withConfigContext(Form.create({name: 'app-details-form'})(NewAppDetailsForm));
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
new file mode 100644
index 00000000000..86c63f2b250
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js
@@ -0,0 +1,323 @@
+import React from "react";
+import {Button, Col, Form, Icon, Input, Row, Select, Switch, Upload, InputNumber} from "antd";
+
+const formItemLayout = {
+    labelCol: {
+        xs: {span: 24},
+        sm: {span: 5},
+    },
+    wrapperCol: {
+        xs: {span: 24},
+        sm: {span: 19},
+    },
+};
+const {Option} = Select;
+const {TextArea} = Input;
+
+class NewAppUploadForm extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            icons: [],
+            screenshots: [],
+            loading: false,
+            binaryFiles: [],
+            application: null,
+            isFree: true
+        }
+    }
+
+    normFile = e => {
+        if (Array.isArray(e)) {
+            return e;
+        }
+        return e && e.fileList;
+    };
+
+    handleSubmit = e => {
+        e.preventDefault();
+        const {formConfig} = this.props;
+        const {specificElements} = formConfig;
+
+        this.props.form.validateFields((err, values) => {
+            if (!err) {
+                this.setState({
+                    loading: true
+                });
+
+                console.log(values);
+
+                const {price, isSharedWithAllTenants, binaryFile, icon, screenshots, releaseDescription, releaseType} = values;
+
+                //add release data
+                const release = {
+                    description: releaseDescription,
+                    price: (price === undefined) ? 0 : parseInt(price),
+                    isSharedWithAllTenants,
+                    metaData: "string",
+                    releaseType: releaseType
+                };
+
+                if (formConfig.installationType !== "WEB_CLIP") {
+                    release.supportedOsVersions = "4.0-10.0";
+                }
+
+                if (specificElements.hasOwnProperty("version")) {
+                    release.version = values.version;
+                }
+                if (specificElements.hasOwnProperty("url")) {
+                    release.url = values.url;
+                }
+                if (specificElements.hasOwnProperty("packageName")) {
+                    release.packageName = values.packageName;
+                }
+
+                const data = new FormData();
+
+                if (specificElements.hasOwnProperty("binaryFile")) {
+                    data.append('binaryFile', binaryFile[0].originFileObj);
+                }
+
+                data.append('icon', icon[0].originFileObj);
+                data.append('screenshot1', screenshots[0].originFileObj);
+                data.append('screenshot2', screenshots[1].originFileObj);
+                data.append('screenshot3', screenshots[2].originFileObj);
+
+                this.props.onSuccessReleaseData({data, release});
+            }
+        });
+    };
+
+    handleIconChange = ({fileList}) => this.setState({icons: fileList});
+    handleBinaryFileChange = ({fileList}) => this.setState({binaryFiles: fileList});
+
+    handleScreenshotChange = ({fileList}) => this.setState({screenshots: fileList});
+
+    handlePriceTypeChange = (value) => {
+        this.setState({
+            isFree: (value === 'free')
+        })
+
+    };
+
+    render() {
+        const {formConfig} = this.props;
+        const {getFieldDecorator} = this.props.form;
+        const {icons, screenshots, binaryFiles, isFree} = this.state;
+
+
+        return (
+            <div>
+                <Row>
+                    <Col md={5}>
+
+                    </Col>
+                    <Col md={14}>
+                        <Form
+                            labelAlign="right"
+                            layout="horizontal"
+                            onSubmit={this.handleSubmit}
+                        >
+                            {formConfig.specificElements.hasOwnProperty("binaryFile") && (
+                                <Form.Item {...formItemLayout} label="Application">
+                                    {getFieldDecorator('binaryFile', {
+                                        valuePropName: 'binaryFile',
+                                        getValueFromEvent: this.normFile,
+                                        required: true,
+                                        message: 'Please select application'
+                                    })(
+                                        <Upload
+                                            name="binaryFile"
+                                            onChange={this.handleBinaryFileChange}
+                                            beforeUpload={() => false}
+                                        >
+                                            {binaryFiles.length !== 1 && (
+                                                <Button>
+                                                    <Icon type="upload"/> Click to upload
+                                                </Button>
+                                            )}
+                                        </Upload>,
+                                    )}
+                                </Form.Item>
+                            )}
+
+                            <Form.Item {...formItemLayout} label="Icon">
+                                {getFieldDecorator('icon', {
+                                    valuePropName: 'icon',
+                                    getValueFromEvent: this.normFile,
+                                    required: true,
+                                    message: 'Please select a icon'
+                                })(
+                                    <Upload
+                                        name="logo"
+                                        onChange={this.handleIconChange}
+                                        beforeUpload={() => false}
+                                    >
+                                        {icons.length !== 1 && (
+                                            <Button>
+                                                <Icon type="upload"/> Click to upload
+                                            </Button>
+                                        )}
+                                    </Upload>,
+                                )}
+                            </Form.Item>
+
+                            <Row style={{marginTop: 40}}>
+                                <Col span={24}>
+
+                                </Col>
+                            </Row>
+
+                            <Form.Item {...formItemLayout} label="Screenshots">
+                                {getFieldDecorator('screenshots', {
+                                    valuePropName: 'icon',
+                                    getValueFromEvent: this.normFile,
+                                    required: true,
+                                    message: 'Please select a icon'
+                                })(
+                                    <Upload
+                                        name="screenshots"
+                                        onChange={this.handleScreenshotChange}
+                                        beforeUpload={() => false}
+                                        multiple
+                                    >
+
+                                        {screenshots.length < 3 && (
+                                            <Button>
+                                                <Icon type="upload"/> Click to upload
+                                            </Button>
+                                        )}
+
+
+                                    </Upload>,
+                                )}
+                            </Form.Item>
+
+                            {formConfig.specificElements.hasOwnProperty("packageName") && (
+                                <Form.Item {...formItemLayout} label="Package Name">
+                                    {getFieldDecorator('packageName', {
+                                        rules: [{
+                                            required: true,
+                                            message: 'Please input the package name'
+                                        }],
+                                    })(
+                                        <Input placeholder="Package Name"/>
+                                    )}
+                                </Form.Item>
+                            )}
+
+                            {formConfig.specificElements.hasOwnProperty("url") && (
+                                <Form.Item {...formItemLayout} label="URL">
+                                    {getFieldDecorator('url', {
+                                        rules: [{
+                                            required: true,
+                                            message: 'Please input the url'
+                                        }],
+                                    })(
+                                        <Input placeholder="url"/>
+                                    )}
+                                </Form.Item>
+                            )}
+
+                            {formConfig.specificElements.hasOwnProperty("version") && (
+                                <Form.Item {...formItemLayout} label="Version">
+                                    {getFieldDecorator('version', {
+                                        rules: [{
+                                            required: true,
+                                            message: 'Please input the version'
+                                        }],
+                                    })(
+                                        <Input placeholder="Version"/>
+                                    )}
+                                </Form.Item>
+                            )}
+
+                            <Form.Item {...formItemLayout} label="Release Type">
+                                {getFieldDecorator('releaseType', {
+                                    rules: [{
+                                        required: true,
+                                        message: 'Please input the Release Type'
+                                    }],
+                                })(
+                                    <Input placeholder="Release Type"/>
+                                )}
+                            </Form.Item>
+
+                            <Form.Item {...formItemLayout} label="Description">
+                                {getFieldDecorator('releaseDescription', {
+                                    rules: [{
+                                        required: true,
+                                        message: 'Please enter a description for release'
+                                    }],
+                                })(
+                                    <TextArea placeholder="Enter a description for release" rows={5}/>
+                                )}
+                            </Form.Item>
+
+                            <Form.Item {...formItemLayout} label="Price Type">
+                                {getFieldDecorator('select', {
+                                    rules: [{required: true, message: 'Please select price Type'}],
+                                })(
+                                    <Select
+                                        placeholder="Please select a price type"
+                                        onChange={this.handlePriceTypeChange}>
+                                        <Option value="free">Free</Option>
+                                        <Option value="paid">Paid</Option>
+                                    </Select>,
+                                )}
+                            </Form.Item>
+
+                            <Form.Item {...formItemLayout} label="Price">
+                                {getFieldDecorator('price', {
+                                    rules: [{
+                                        required: !isFree
+                                    }],
+                                })(
+                                    <InputNumber
+                                        disabled={isFree}
+                                        options={{
+                                            initialValue: 1
+                                        }}
+                                        min={0}
+                                        max={10000}
+                                        formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+                                        parser={value => value.replace(/\$\s?|(,*)/g, '')}
+                                    />
+                                )}
+                            </Form.Item>
+
+                            <Form.Item {...formItemLayout} label="Is Shared?">
+                                {getFieldDecorator('isSharedWithAllTenants', {
+                                    rules: [{
+                                        required: true,
+                                        message: 'Please select'
+                                    }],
+                                    initialValue: false
+                                })(
+                                    <Switch checkedChildren={<Icon type="check"/>}
+                                            unCheckedChildren={<Icon type="close"/>}
+                                    />
+                                )}
+
+                            </Form.Item>
+                            <Form.Item style={{float: "right", marginLeft: 8}}>
+                                <Button type="primary" htmlType="submit">
+                                    Submit
+                                </Button>
+                            </Form.Item>
+                            <Form.Item style={{float: "right"}}>
+                                <Button htmlType="button" onClick={this.props.onClickBackButton}>
+                                    Back
+                                </Button>
+                            </Form.Item>
+                        </Form>
+                    </Col>
+                </Row>
+            </div>
+        );
+    }
+
+}
+
+export default (Form.create({name: 'app-upload-form'})(NewAppUploadForm));
\ No newline at end of file
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 c537d8698ab..d4ed95ade4d 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
@@ -17,7 +17,7 @@ import {
 } from "antd";
 import axios from "axios";
 import {withRouter} from 'react-router-dom'
-import config from "../../../public/conf/config.json";
+import {withConfigContext} from "../../context/ConfigContext";
 
 const {Option} = Select;
 const {TextArea} = Input;
@@ -47,11 +47,8 @@ class AddNewReleaseFormComponent extends React.Component {
         };
     }
 
-    componentDidMount() {
-
-    }
-
     handleSubmit = e => {
+        const config = this.props.context;
         e.preventDefault();
         const {appId} = this.props;
 
@@ -88,7 +85,7 @@ class AddNewReleaseFormComponent extends React.Component {
 
                 data.append("applicationRelease", blob);
 
-                const url = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/ent-app/" + appId;
+                const url = window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/ent-app/" + appId;
 
                 axios.post(
                     url,
@@ -117,7 +114,7 @@ class AddNewReleaseFormComponent extends React.Component {
 
                 }).catch((error) => {
                     if (error.hasOwnProperty("response") && error.response.status === 401) {
-                        window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                        window.location.href = window.location.origin+ '/publisher/login';
                     } else {
                         notification["error"]({
                             message: "Something went wrong!",
@@ -299,4 +296,4 @@ class AddNewReleaseFormComponent extends React.Component {
 }
 
 const AddReleaseForm = withRouter(Form.create({name: 'add-new-release'})(AddNewReleaseFormComponent));
-export default AddReleaseForm;
+export default withConfigContext(AddReleaseForm);
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/context/ConfigContext.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/context/ConfigContext.js
new file mode 100644
index 00000000000..3dfb011d50b
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/context/ConfigContext.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+const ConfigContext = React.createContext();
+
+export const withConfigContext = Component => {
+    return props => (
+        <ConfigContext.Consumer>
+            {context => {
+                return <Component {...props} context={context}/>;
+            }}
+        </ConfigContext.Consumer>
+    );
+};
+
+export default ConfigContext;
+
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 eb0913ab556..4042d179a5f 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
@@ -2,14 +2,15 @@ import React from "react";
 import {Typography, Row, Col, Form, Icon, Input, Button, Checkbox, message, notification} from 'antd';
 import './Login.css';
 import axios from 'axios';
-import config from "../../public/conf/config.json";
 import "./Login.css";
+import {withConfigContext} from "../context/ConfigContext";
 
 const {Title} = Typography;
 const {Text} = Typography;
 
 class Login extends React.Component {
     render() {
+        const config = this.props.context;
         return (
             <div>
                 <div className="background">
@@ -57,6 +58,7 @@ class NormalLoginForm extends React.Component {
     }
 
     handleSubmit = (e) => {
+        const config = this.props.context;
         const thisForm = this;
         e.preventDefault();
         this.props.form.validateFields((err, values) => {
@@ -75,10 +77,10 @@ class NormalLoginForm extends React.Component {
 
                 const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&');
 
-                axios.post(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.loginUri, request
+                axios.post(window.location.origin+ config.serverConfig.loginUri, request
                 ).then(res=>{
                     if (res.status === 200) {
-                        window.location = res.data.url;
+                        window.location = window.location.origin+"publisher";
                     }
                 }).catch(function (error) {
                     if (error.hasOwnProperty("response") && error.response.status === 400) {
@@ -151,6 +153,6 @@ class NormalLoginForm extends React.Component {
     }
 }
 
-const WrappedNormalLoginForm = Form.create({name: 'normal_login'})(NormalLoginForm);
+const WrappedNormalLoginForm = Form.create({name: 'normal_login'})(withConfigContext(NormalLoginForm));
 
-export default Login;
+export default withConfigContext(Login);
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 ec1ae9affd4..61b3975d71e 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,7 +4,7 @@ import {Switch, Link} from "react-router-dom";
 import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
 import {Redirect} from 'react-router'
 import "../../App.css";
-import config from "../../../public/conf/config.json";
+import {withConfigContext} from "../../context/ConfigContext";
 
 const {Header, Content, Footer} = Layout;
 const {SubMenu} = Menu;
@@ -15,7 +15,7 @@ class Dashboard extends React.Component {
         this.state = {
             routes: props.routes
         };
-
+        const config = this.props.context;
         this.Logo = config.theme.logo;
     }
 
@@ -73,4 +73,4 @@ class Dashboard extends React.Component {
     }
 }
 
-export default Dashboard;
+export default withConfigContext(Dashboard);
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps-old.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps-old.js
deleted file mode 100644
index 1ba489a6ac9..00000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps-old.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from "react";
-import "antd/dist/antd.css";
-import {PageHeader, Typography,Input, Button, Row, Col} from "antd";
-import AppList from "../../../components/apps/AppList";
-// import ReleaseModal from "../../../components/apps/ReleaseModal";
-
-const Search = Input.Search;
-
-const routes = [
-    {
-        path: 'index',
-        breadcrumbName: 'Publisher',
-    },
-    {
-        path: 'first',
-        breadcrumbName: 'Dashboard',
-    },
-    {
-        path: 'second',
-        breadcrumbName: 'Apps',
-    },
-];
-
-
-class Apps extends React.Component {
-    routes;
-    constructor(props) {
-        super(props);
-        this.routes = props.routes;
-
-    }
-
-    render() {
-        return (
-            <div>
-                <PageHeader
-                    breadcrumb={{routes}}
-                />
-                <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
-                    <Row style={{padding:10}}>
-                        <Col span={6} offset={18}>
-                            <Search
-                                placeholder="search"
-                                // onSearch={value => console.log(value)}
-                                style={{ width: 200}}
-                            />
-                            <Button style={{margin:5}}>Advanced Search</Button>
-                        </Col>
-                    </Row>
-                    {/*<ReleaseModal/>*/}
-                    <AppList/>
-                </div>
-
-            </div>
-
-        );
-    }
-}
-
-export default Apps;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js
index 9c6848d5f8c..b982ecf2f7e 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js
@@ -1,25 +1,6 @@
 import React from "react";
-import {PageHeader, Typography,Input, Button, Row, Col} from "antd";
 import ListApps from "../../../components/apps/list-apps/ListApps";
 
-const Search = Input.Search;
-
-const routes = [
-    {
-        path: 'index',
-        breadcrumbName: 'Publisher',
-    },
-    {
-        path: 'first',
-        breadcrumbName: 'Dashboard',
-    },
-    {
-        path: 'second',
-        breadcrumbName: 'Apps',
-    },
-];
-
-
 class Apps extends React.Component {
     routes;
     constructor(props) {
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 e987994df38..a4a739a06d9 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
@@ -2,9 +2,9 @@ import React from "react";
 import '../../../../App.css';
 import {Typography, Row, Col, message, Card, notification} from "antd";
 import axios from 'axios';
-import config from "../../../../../public/conf/config.json";
 import ReleaseView from "../../../../components/apps/release/ReleaseView";
 import LifeCycle from "../../../../components/apps/release/lifeCycle/LifeCycle";
+import {withConfigContext} from "../../../../context/ConfigContext";
 
 const {Title} = Typography;
 
@@ -43,10 +43,11 @@ class Release extends React.Component {
     };
 
     fetchData = (uuid) => {
+        const config = this.props.context;
 
         //send request to the invoker
         axios.get(
-            config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/release/"+ uuid,
+            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/release/"+ uuid,
         ).then(res => {
             if (res.status === 200) {
                 const app = res.data.data;
@@ -65,7 +66,7 @@ class Release extends React.Component {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
                 //todo display a popop with error
                 message.error('You are not logged in');
-                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                window.location.href = window.location.origin+ '/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -112,4 +113,4 @@ class Release extends React.Component {
     }
 }
 
-export default Release;
+export default withConfigContext(Release);