diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
index 62810cf4b1..df3708acca 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
@@ -29,6 +29,7 @@
     "react-scripts": "2.1.8",
     "react-star-ratings": "^2.3.0",
     "redux-thunk": "^2.3.0",
+    "shade-blend-color": "^1.0.0",
     "storm-react-diagrams": "^5.2.1"
   },
   "devDependencies": {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json
index 1a98c1a6dc..fcea32d729 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json
@@ -1,7 +1,9 @@
 {
   "theme": {
     "type": "default",
-    "value": "lightBaseTheme"
+    "value": "lightBaseTheme",
+    "logo" : "https://www.brandchannel.com/wp-content/uploads/2016/05/instagram-new-logo-may-2016.jpg",
+    "primaryColor": "#F62459"
   },
   "serverConfig": {
     "protocol": "https",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
index 94ce220af4..f4f68f0f70 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
@@ -22,9 +22,9 @@
 }
 
 .logo-image {
-  width: 120px;
+  /*width: 120px;*/
   height: 31px;
-  margin: 0 0 16px 20px;
+  margin: 0 5px 16px 24px;
   float: left;
 }
 
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 64bbaca6b1..d9eed2d699 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
@@ -24,6 +24,7 @@ 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";
 
 const {Text, Title} = Typography;
 const {Option} = Select;
@@ -456,7 +457,7 @@ class AppDetailsDrawer extends React.Component {
                         {!isDescriptionEditEnabled && (
                             <Text
                                 style={{
-                                    color: "#1890ff",
+                                    color: config.theme.primaryColor,
                                     cursor: "pointer"
                                 }}
                                 onClick={this.enableDescriptionEdit}>
@@ -492,7 +493,7 @@ class AppDetailsDrawer extends React.Component {
                         <Divider dashed={true}/>
                         <Text strong={true}>Categories </Text>
                         {!isCategoriesEditEnabled && (<Text
-                                style={{color: "#1890ff", cursor: "pointer"}}
+                                style={{color: config.theme.primaryColor, cursor: "pointer"}}
                                 onClick={this.enableCategoriesEdit}>
                                 <Icon type="edit"/>
                             </Text>
@@ -525,7 +526,7 @@ class AppDetailsDrawer extends React.Component {
                             <span>{
                                 categories.map(category => {
                                     return (
-                                        <Tag color="#108ee9" key={category} style={{marginBottom: 5}}>
+                                        <Tag color={pSBC ( 0.30, config.theme.primaryColor )} key={category} style={{marginBottom: 5}}>
                                             {category}
                                         </Tag>
                                     );
@@ -537,7 +538,7 @@ class AppDetailsDrawer extends React.Component {
                         <Divider dashed={true}/>
                         <Text strong={true}>Tags </Text>
                         {!isTagsEditEnabled && (<Text
-                                style={{color: "#1890ff", cursor: "pointer"}}
+                                style={{color: config.theme.primaryColor, cursor: "pointer"}}
                                 onClick={this.enableTagsEdit}>
                                 <Icon type="edit"/>
                             </Text>
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 29e1207ad0..033c05cd85 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
@@ -1,6 +1,7 @@
 import React from "react";
 import {Avatar, Card, Col, Row, Table, Typography, Tag, Icon, message} from "antd";
 import axios from "axios";
+import pSBC from 'shade-blend-color';
 import config from "../../../../../public/conf/config.json";
 import "./AppsTable.css";
 
@@ -30,7 +31,7 @@ const columns = [
             <span>
                 {categories.map(category => {
                     return (
-                        <Tag color="blue" key={category}>
+                        <Tag color={pSBC ( 0.30, config.theme.primaryColor )} key={category}>
                             {category}
                         </Tag>
                     );
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 7b6fe35f75..6edc414cbc 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
@@ -3,6 +3,7 @@ import {Card, Tag, message, Icon, Input, notification, Divider, Button, Spin, To
 import axios from "axios";
 import config from "../../../../public/conf/config.json";
 import {TweenOneGroup} from 'rc-tween-one';
+import pSBC from "shade-blend-color";
 
 
 class ManageCategories extends React.Component {
@@ -95,14 +96,14 @@ class ManageCategories extends React.Component {
         const categoryName = category.categoryName;
         const tagElem = (
             <Tag
-                color="blue"
+                color={pSBC ( 0.30, config.theme.primaryColor )}
             >
                 {categoryName}
                 <Divider type="vertical"/>
                 <Tooltip title="edit">
                     <Icon onClick={() => {
                         this.openEditModal(categoryName)
-                    }} style={{color: 'rgba(0,0,0,0.45)'}} type="edit"/>
+                    }} type="edit"/>
                 </Tooltip>
                 <Divider type="vertical"/>
                 <Tooltip title="delete">
@@ -122,7 +123,7 @@ class ManageCategories extends React.Component {
                         okText="Yes"
                         cancelText="No"
                     >
-                        <Icon style={{color: 'rgba(0,0,0,0.45)'}} type="delete"/>
+                        <Icon type="delete"/>
                     </Popconfirm>
                 </Tooltip>
             </Tag>
@@ -306,7 +307,7 @@ class ManageCategories extends React.Component {
         const categoriesElements = categories.map(this.renderElement);
         const temporaryElements = tempElements.map(this.renderTempElement);
         return (
-            <div>
+            <div style={{marginBottom: 16}}>
                 <Card title="Categories">
                     <Spin tip="Working on it..." spinning={this.state.loading}>
                         {!isAddNewVisible &&
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 a815bdb78d..e2a7e14993 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
@@ -98,14 +98,14 @@ class ManageTags extends React.Component {
         const tagName = tag.tagName;
         const tagElem = (
             <Tag
-                color="gold"
+                color="#34495e"
             >
                 {tagName}
                 <Divider type="vertical"/>
                 <Tooltip title="edit">
                     <Icon onClick={() => {
                         this.openEditModal(tagName)
-                    }} style={{color: 'rgba(0,0,0,0.45)'}} type="edit"/>
+                    }} type="edit"/>
                 </Tooltip>
                 <Divider type="vertical"/>
                 <Tooltip title="delete">
@@ -125,7 +125,7 @@ class ManageTags extends React.Component {
                         okText="Yes"
                         cancelText="No"
                     >
-                        <Icon style={{color: 'rgba(0,0,0,0.45)'}} type="delete"/>
+                        <Icon type="delete"/>
                     </Popconfirm>
                 </Tooltip>
             </Tag>
@@ -307,7 +307,7 @@ class ManageTags extends React.Component {
         const tagsElements = tags.map(this.renderElement);
         const temporaryElements = tempElements.map(this.renderTempElement);
         return (
-            <div>
+            <div style={{marginBottom: 16}}>
                 <Card title="Tags">
                     <Spin tip="Working on it..." spinning={this.state.loading}>
                         {!isAddNewVisible &&
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 48701cf09d..32104673fb 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
@@ -11,15 +11,30 @@ class Login extends React.Component {
     render() {
         return (
             <div className={styles.main}>
-                <div className={styles.content}>
+                <div style={{
+                    backgroundImage: "url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg')",
+                    backgroundRepeat: "no-repeat",
+                    backgroundPosition: "center 110px",
+                    backgroundSize: "100%",
+                    height: 1500
+                }}>
                     <Row>
-                        <Col span={4} offset={10}>
+                        <Col xs={3} sm={3} md={10}>
+
+                        </Col>
+                        <Col xs={18} sm={18} md={4}>
                             <Row style={{marginBottom: 20}}>
-                                <Col>
-                                    <img className={styles.logo} src={require('../../public/images/logo.svg')}/>
+                                <Col style={{textAlign: "center"}}>
+                                    <img style={
+                                        {
+                                            marginTop: 36,
+                                            height: 60
+                                        }
+                                    }
+                                         className={styles.logo} src={config.theme.logo}/>
                                 </Col>
                             </Row>
-                            <Title type="secondary" level={2}>Login</Title>
+                            <Title level={2}>Login</Title>
                             <WrappedNormalLoginForm/>
 
                         </Col>
@@ -42,7 +57,7 @@ class NormalLoginForm extends React.Component {
         super(props);
         this.state = {
             inValid: false,
-            loading : false
+            loading: false
         };
     }
 
@@ -65,7 +80,7 @@ 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(config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.loginUri, request
                 ).then(res => {
                     if (res.status === 200) {
                         window.location = res.data.url;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.less b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.less
index f04eeb84c8..4d0606375a 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.less
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/Login.less
@@ -17,14 +17,13 @@
 
 
 }
-
 .content{
   padding-top: 128px;
 }
 
 .logo{
+  margin-top: 36px;
   height: 44px;
-  margin: auto;
   width: 100%;
 
 }
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 108bc123fe..4f82e49fbe 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
@@ -1,10 +1,11 @@
 import React from "react";
 import {Layout, Menu, Icon} from 'antd';
-import Logo from "../../../public/images/logo.svg";
+// import Logo from "../../../public/images/logo.svg";
 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";
 
 const {Header, Content, Footer} = Layout;
 const {SubMenu} = Menu;
@@ -15,6 +16,8 @@ class Dashboard extends React.Component {
         this.state = {
             routes: props.routes
         };
+
+        this.Logo = config.theme.logo;
     }
 
     render() {
@@ -22,8 +25,8 @@ class Dashboard extends React.Component {
             <div>
                 <Layout className="layout">
                     <Header style={{paddingLeft: 0, paddingRight: 0}}>
-                        <div style={{width: 120}} className="logo-image">
-                            <img alt="logo" src={Logo}/>
+                        <div className="logo-image">
+                            <img alt="logo" src={this.Logo}/>
                         </div>
                         <Menu
                             theme="light"
@@ -53,7 +56,7 @@ class Dashboard extends React.Component {
                     </Header>
                 </Layout>
                 <Layout>
-                    <Content style={{padding: '0 0'}}>
+                    <Content style={{marginTop: 2}}>
                         <Switch>
                             <Redirect exact from="/publisher" to="/publisher/apps"/>
                             {this.state.routes.map((route) => (
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewEnterpriseApp.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewEnterpriseApp.js
index cfa062f84d..085f6592a3 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewEnterpriseApp.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewEnterpriseApp.js
@@ -10,7 +10,7 @@ const Paragraph = Typography;
 const formConfig = {
     installationType: "ENTERPRISE",
     endpoint: "/ent-app",
-    jsonPayloadName:"application",
+    jsonPayloadName: "application",
     releaseWrapperName: "entAppReleaseWrappers",
     specificElements: {
         binaryFile: {
@@ -41,11 +41,9 @@ class AddNewEnterpriseApp extends React.Component {
                     title="Add New Enterprise App"
                 >
                     <div className="wrap">
-                        <div className="content">
-                            <Paragraph>
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
-                            </Paragraph>
-                        </div>
+                        <Paragraph>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
+                        </Paragraph>
                     </div>
                 </PageHeader>
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewPublicApp.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewPublicApp.js
index 4d4f70558d..e6aa284574 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewPublicApp.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewPublicApp.js
@@ -45,11 +45,9 @@ class AddNewEnterpriseApp extends React.Component {
                     title="Add New Public App"
                 >
                     <div className="wrap">
-                        <div className="content">
-                            <Paragraph>
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
-                            </Paragraph>
-                        </div>
+                        <Paragraph>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
+                        </Paragraph>
                     </div>
                 </PageHeader>
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewWebClip.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewWebClip.js
index 09e723afb7..a280309159 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewWebClip.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewWebClip.js
@@ -45,11 +45,9 @@ class AddNewEnterpriseApp extends React.Component {
                     title="Add New Web Clip"
                 >
                     <div className="wrap">
-                        <div className="content">
-                            <Paragraph>
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
-                            </Paragraph>
-                        </div>
+                        <Paragraph>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
+                        </Paragraph>
                     </div>
                 </PageHeader>
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/manage/Manage.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/manage/Manage.js
index 40c628b3b2..d550bf206f 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/manage/Manage.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/manage/Manage.js
@@ -36,21 +36,23 @@ class Manage extends React.Component {
             <div>
                 <PageHeader
                     // breadcrumb={{routes}}
-                    title = "Manage"
+                    title="Manage"
                 >
                     <div className="wrap">
-                        <div className="content">
-                            <Paragraph>
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
-                            </Paragraph>
-                        </div>
+                        <Paragraph>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
+                        </Paragraph>
                     </div>
                 </PageHeader>
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
-                    <ManageCategories/>
-                    <br/>
-                    <ManageTags/>
-
+                    <Row gutter={16}>
+                        <Col sm={24} md={12}>
+                            <ManageCategories/>
+                        </Col>
+                        <Col sm={24} md={12}>
+                            <ManageTags/>
+                        </Col>
+                    </Row>
                 </div>
 
             </div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js
index 127a2df261..f32cbd8a01 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/webpack.config.js
@@ -18,6 +18,7 @@
 var path = require('path');
 const HtmlWebPackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const configurations = require("./public/conf/config.json");
 
 const config = {
     devtool: "source-map",
@@ -87,8 +88,8 @@ const config = {
                         loader: "less-loader",
                         options: {
                             modifyVars: {
-                                'primary-color': '#1890ff',
-                                'link-color': '#1890ff',
+                                'primary-color': configurations.theme.primaryColor,
+                                'link-color': configurations.theme.primaryColor,
                             },
                             javascriptEnabled: true,
                         },