diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/.npmrc b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/.npmrc
new file mode 100644
index 00000000000..f7425e8e442
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/.npmrc
@@ -0,0 +1 @@
+registry=http://nexus.entgra.io/repository/npm-group/
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 df1743f0961..49eae0fc0da 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
@@ -10,15 +10,17 @@
   },
   "license": "Apache License 2.0",
   "dependencies": {
+    "@ant-design/compatible": "^1.0.0",
     "@ant-design/dark-theme": "^0.2.2",
     "@ant-design/icons": "^4.0.6",
     "@babel/polyfill": "^7.6.0",
     "acorn": "^6.2.0",
-    "antd": "^3.23.6",
+    "antd": "^4.0.0",
     "axios": "^0.19.0",
     "babel-eslint": "^9.0.0",
     "d3": "^5.9.7",
     "dagre": "^0.8.4",
+    "entgra-icons-react": "^1.0.0",
     "eslint": "^5.16.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
@@ -58,6 +60,7 @@
     "chai": "^4.1.2",
     "cross-env": "^7.0.0",
     "css-loader": "^0.28.11",
+    "entgra-icons": "^1.4.0",
     "eslint": "^5.16.0",
     "eslint-config-prettier": "4.3.0",
     "eslint-plugin-babel": "5.3.0",
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 93174ff8275..de1726ce398 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
@@ -18,73 +18,69 @@
   },
   "defaultPlatformIcons": {
     "default": {
-      "icon": "global",
-      "color": "#535c68",
-      "theme": "outlined"
+      "icon": "fw-globe",
+      "color": "#535c68"
     },
     "android": {
-      "icon": "android",
-      "color": "#7db343",
-      "theme": "filled"
+      "icon": "fw-android",
+      "color": "#7db343"
     },
     "ios": {
-      "icon": "apple",
-      "color": "#535c68",
-      "theme": "filled"
+      "icon": "fw-apple",
+      "color": "#535c68"
     },
     "windows": {
-      "icon": "windows",
-      "color": "#008cc4",
-      "theme": "filled"
+      "icon": "fw-windows",
+      "color": "#008cc4"
     }
   },
   "lifecycle": {
     "CREATED": {
       "title": "Created",
       "text": "The initial most state of an application.\n You can only proceed to one of the following states:",
-      "icon": "file-text",
+      "icon": "fw-document",
       "step": 0
     },
     "IN-REVIEW": {
       "title": "In-Review",
       "text": "In this state the application is being reviewed by approvers. You can move from this state to APPROVED state if it is approved by reviewers. Otherwise, you can move the application into either REJECTED state or CREATED state based on the feedback getting by reviewers.",
-      "icon": "audit",
+      "icon": "fw-throttling-policy",
       "step": 1
     },
     "APPROVED": {
       "title": "Approved",
       "text": "The approved state is a compulsory state prior to publishing the application.\n You can only proceed to one of the following states:",
-      "icon": "file-done",
+      "icon": "fw-check",
       "step": 2
     },
     "PUBLISHED": {
       "title": "Published",
       "text": "The state which is applied for applications which are qualified for your Corporate App Store. Only the applications of Published state can be installed to your corporate devices.\n You can only proceed to one of the following states:",
-      "icon": "global",
+      "icon": "fw-globe",
       "step": 3
     },
     "BLOCKED": {
       "title": "Blocked",
       "text": "This state allows you to block your application either to publish or deprecate at a future date.\n You can only proceed to one of the following states:",
-      "icon": "exception",
+      "icon": "fw-lock",
       "step": 4
     },
     "DEPRECATED": {
       "title": "Deprecated",
       "text": "The applications which are outdated and no longer suit your app store.\n You can only proceed to one of the following states:",
-      "icon": "file-excel",
+      "icon": "fw-warning",
       "step": 5
     },
     "REJECTED": {
       "title": "Rejected",
       "text": "The Approvers can reject an application due to a faulty of the app or not being in compliance with company policies.\n You can only proceed to one of the following states:",
-      "icon": "frown",
+      "icon": "fw-error",
       "step": 6
     },
     "RETIRED": {
       "title": "Retired",
       "text": "The final state of an application, where no transition of states will be allowed after this.",
-      "icon": "rest",
+      "icon": "fw-delete",
       "step": 7
     }
   },
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/components/Logout/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/components/Logout/index.js
index 1d94718fd14..f41e654bcc3 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/components/Logout/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/components/Logout/index.js
@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { notification, Menu, Icon } from 'antd';
+import { LogoutOutlined } from '@ant-design/icons';
+import { notification, Menu } from 'antd';
 import axios from 'axios';
 import { withConfigContext } from '../../../../components/ConfigContext';
 
@@ -70,7 +71,7 @@ class Logout extends React.Component {
     return (
       <Menu>
         <Menu.Item key="1" onClick={this.handleSubmit}>
-          <Icon type="logout" />
+          <LogoutOutlined />
           Logout
         </Menu.Item>
       </Menu>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/index.js
index 983e74c07ba..080ac912b68 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/index.js
@@ -17,7 +17,19 @@
  */
 
 import React from 'react';
-import { Layout, Menu, Icon, Drawer, Button } from 'antd';
+
+import {
+  AndroidFilled,
+  AppstoreOutlined,
+  ControlOutlined,
+  PlusOutlined,
+  SettingOutlined,
+  UserOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+} from '@ant-design/icons';
+
+import { Layout, Menu, Drawer, Button } from 'antd';
 import { Switch, Link } from 'react-router-dom';
 import RouteWithSubRoutes from '../../components/RouteWithSubRoutes';
 import { Redirect } from 'react-router';
@@ -81,7 +93,7 @@ class Dashboard extends React.Component {
               >
                 <Menu.Item key="1">
                   <Link to="/publisher/apps">
-                    <Icon type="appstore" />
+                    <AppstoreOutlined />
                     Apps
                   </Link>
                 </Menu.Item>
@@ -92,7 +104,7 @@ class Dashboard extends React.Component {
                   <SubMenu
                     title={
                       <span className="submenu-title-wrapper">
-                        <Icon type="plus" />
+                        <PlusOutlined />
                         Add New App
                       </span>
                     }
@@ -118,21 +130,20 @@ class Dashboard extends React.Component {
                 <SubMenu
                   title={
                     <span className="submenu-title-wrapper">
-                      <Icon type="control" />
+                      <ControlOutlined />
                       Manage
                     </span>
                   }
                 >
                   <Menu.Item key="manage">
                     <Link to="/publisher/manage">
-                      <Icon type="setting" /> General
+                      <SettingOutlined /> General
                     </Link>
                   </Menu.Item>
                   {this.config.androidEnterpriseToken != null && (
                     <Menu.Item key="manage-android-enterprise">
                       <Link to="/publisher/manage/android-enterprise">
-                        <Icon type="android" theme="filled" /> Android
-                        Enterprise
+                        <AndroidFilled /> Android Enterprise
                       </Link>
                     </Menu.Item>
                   )}
@@ -142,7 +153,7 @@ class Dashboard extends React.Component {
                   className="profile"
                   title={
                     <span className="submenu-title-wrapper">
-                      <Icon type="user" />
+                      <UserOutlined />
                       {this.config.username}
                     </span>
                   }
@@ -157,10 +168,11 @@ class Dashboard extends React.Component {
         <Layout className="mobile-layout">
           <div className="mobile-menu-button">
             <Button type="link" onClick={this.showMobileNavigationBar}>
-              <Icon
-                type={this.state.collapsed ? 'menu-fold' : 'menu-unfold'}
-                className="bar-icon"
-              />
+              {this.state.collapsed ? (
+                <MenuFoldOutlined />
+              ) : (
+                <MenuUnfoldOutlined />
+              )}
             </Button>
           </div>
         </Layout>
@@ -194,14 +206,14 @@ class Dashboard extends React.Component {
           >
             <Menu.Item key="1">
               <Link to="/publisher/apps">
-                <Icon type="appstore" />
+                <AppstoreOutlined />
                 Apps
               </Link>
             </Menu.Item>
             <SubMenu
               title={
                 <span className="submenu-title-wrapper">
-                  <Icon type="plus" />
+                  <PlusOutlined />
                   Add New App
                 </span>
               }
@@ -223,7 +235,7 @@ class Dashboard extends React.Component {
             </SubMenu>
             <Menu.Item key="2">
               <Link to="/publisher/manage">
-                <Icon type="control" />
+                <ControlOutlined />
                 Manage
               </Link>
             </Menu.Item>
@@ -238,7 +250,7 @@ class Dashboard extends React.Component {
             <SubMenu
               title={
                 <span className="submenu-title-wrapper">
-                  <Icon type="user" />
+                  <UserOutlined />
                 </span>
               }
             >
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/components/AddNewAppForm/components/NewAppDetailsForm/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/components/AddNewAppForm/components/NewAppDetailsForm/index.js
index 3be2c38fc66..4219e5fcd66 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/components/AddNewAppForm/components/NewAppDetailsForm/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/components/AddNewAppForm/components/NewAppDetailsForm/index.js
@@ -17,7 +17,9 @@
  */
 
 import React from 'react';
-import { Alert, Button, Col, Form, Input, Row, Select, Spin } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Alert, Button, Col, Input, Row, Select, Spin } from 'antd';
 import axios from 'axios';
 import { withConfigContext } from '../../../../../../../../components/ConfigContext';
 import { handleApiError } from '../../../../../../../../services/utils/errorHandler';
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/components/AddNewAppForm/components/NewAppUploadForm/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/components/AddNewAppForm/components/NewAppUploadForm/index.js
index 1073adbd787..32368cb26a0 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/components/AddNewAppForm/components/NewAppUploadForm/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/components/AddNewAppForm/components/NewAppUploadForm/index.js
@@ -17,11 +17,12 @@
  */
 
 import React from 'react';
+import { MinusOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
 import {
   Button,
   Col,
-  Form,
-  Icon,
   Input,
   Row,
   Select,
@@ -280,7 +281,7 @@ class NewAppUploadForm extends React.Component {
     } = this.state;
     const uploadButton = (
       <div>
-        <Icon type="plus" />
+        <PlusOutlined />
         <div className="ant-upload-text">Select</div>
       </div>
     );
@@ -315,7 +316,7 @@ class NewAppUploadForm extends React.Component {
                     >
                       {binaryFiles.length !== 1 && (
                         <Button>
-                          <Icon type="upload" /> Click to upload
+                          <UploadOutlined /> Click to upload
                         </Button>
                       )}
                     </Upload>,
@@ -577,7 +578,7 @@ class NewAppUploadForm extends React.Component {
                               <Button
                                 type="dashed"
                                 shape="circle"
-                                icon="minus"
+                                icon={<MinusOutlined />}
                                 onClick={() => {
                                   metaData.splice(index, 1);
                                   this.setState({
@@ -592,7 +593,7 @@ class NewAppUploadForm extends React.Component {
                     })}
                     <Button
                       type="dashed"
-                      icon="plus"
+                      icon={<PlusOutlined />}
                       onClick={this.addNewMetaData}
                     >
                       Add
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/components/AddNewAppForm/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/components/AddNewAppForm/index.js
index 5fdbe3c5c0e..b237a163604 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/components/AddNewAppForm/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/components/AddNewAppForm/index.js
@@ -17,7 +17,9 @@
  */
 
 import React from 'react';
-import { Card, Button, Steps, Row, Col, Form, Result, Spin } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Card, Button, Steps, Row, Col, Result, Spin } from 'antd';
 import axios from 'axios';
 import { withRouter } from 'react-router-dom';
 import NewAppDetailsForm from './components/NewAppDetailsForm';
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/Custom/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/Custom/index.js
index 19c891a0fe1..3a6fa9c24dd 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/Custom/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/Custom/index.js
@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { PageHeader, Typography, Breadcrumb, Icon, Result } from 'antd';
+import { HomeOutlined } from '@ant-design/icons';
+import { PageHeader, Typography, Breadcrumb, Result } from 'antd';
 import AddNewAppForm from '../../components/AddNewAppForm';
 import { Link } from 'react-router-dom';
 import Authorized from '../../../../../../components/Authorized/Authorized';
@@ -58,7 +59,7 @@ class AddNewCustomApp extends React.Component {
           <Breadcrumb style={{ paddingBottom: 16 }}>
             <Breadcrumb.Item>
               <Link to="/publisher/apps">
-                <Icon type="home" /> Home
+                <HomeOutlined /> Home
               </Link>
             </Breadcrumb.Item>
             <Breadcrumb.Item>Add New Custom App</Breadcrumb.Item>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/Enterprise/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/Enterprise/index.js
index 0e199439d8e..38fd3e1341b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/Enterprise/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/Enterprise/index.js
@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { PageHeader, Typography, Breadcrumb, Icon, Result } from 'antd';
+import { HomeOutlined } from '@ant-design/icons';
+import { PageHeader, Typography, Breadcrumb, Result } from 'antd';
 import AddNewAppForm from '../../components/AddNewAppForm';
 import { Link } from 'react-router-dom';
 import Authorized from '../../../../../../components/Authorized/Authorized';
@@ -52,7 +53,7 @@ class AddNewEnterpriseApp extends React.Component {
           <Breadcrumb style={{ paddingBottom: 16 }}>
             <Breadcrumb.Item>
               <Link to="/publisher/apps">
-                <Icon type="home" /> Home
+                <HomeOutlined /> Home
               </Link>
             </Breadcrumb.Item>
             <Breadcrumb.Item>Add New Enterprise App</Breadcrumb.Item>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/Public/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/Public/index.js
index 987da9a2ce9..8860227d0d5 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/Public/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/Public/index.js
@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { Icon, PageHeader, Typography, Breadcrumb, Result } from 'antd';
+import { HomeOutlined } from '@ant-design/icons';
+import { PageHeader, Typography, Breadcrumb, Result } from 'antd';
 import AddNewAppForm from '../../components/AddNewAppForm';
 import { Link } from 'react-router-dom';
 import Authorized from '../../../../../../components/Authorized/Authorized';
@@ -59,7 +60,7 @@ class AddNewPublicApp extends React.Component {
           <Breadcrumb style={{ paddingBottom: 16 }}>
             <Breadcrumb.Item>
               <Link to="/publisher/apps">
-                <Icon type="home" /> Home
+                <HomeOutlined /> Home
               </Link>
             </Breadcrumb.Item>
             <Breadcrumb.Item>Add New Public App</Breadcrumb.Item>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/WebClip/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/WebClip/index.js
index c002c687569..5423c471ebf 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/WebClip/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewApp/scenes/WebClip/index.js
@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { Icon, PageHeader, Typography, Breadcrumb, Result } from 'antd';
+import { HomeOutlined } from '@ant-design/icons';
+import { PageHeader, Typography, Breadcrumb, Result } from 'antd';
 import AddNewAppForm from '../../components/AddNewAppForm';
 import { Link } from 'react-router-dom';
 import Authorized from '../../../../../../components/Authorized/Authorized';
@@ -55,7 +56,7 @@ class AddNewEnterpriseApp extends React.Component {
           <Breadcrumb style={{ paddingBottom: 16 }}>
             <Breadcrumb.Item>
               <Link to="/publisher/apps">
-                <Icon type="home" /> Home
+                <HomeOutlined /> Home
               </Link>
             </Breadcrumb.Item>
             <Breadcrumb.Item>Add New Web Clip</Breadcrumb.Item>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewRelease/components/AddNewReleaseForm/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewRelease/components/AddNewReleaseForm/index.js
index d531c3c9bf6..0ae2d7ae595 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewRelease/components/AddNewReleaseForm/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewRelease/components/AddNewReleaseForm/index.js
@@ -17,7 +17,9 @@
  */
 
 import React from 'react';
-import { Form, notification, Spin, Card, Row, Col } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { notification, Spin, Card, Row, Col } from 'antd';
 import axios from 'axios';
 import { withRouter } from 'react-router-dom';
 import { withConfigContext } from '../../../../../../components/ConfigContext';
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewRelease/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewRelease/index.js
index fc335d84656..b15efedfd79 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewRelease/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/AddNewRelease/index.js
@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { Icon, PageHeader, Typography, Breadcrumb } from 'antd';
+import { HomeOutlined } from '@ant-design/icons';
+import { PageHeader, Typography, Breadcrumb } from 'antd';
 import AddNewReleaseForm from './components/AddNewReleaseForm';
 import { Link } from 'react-router-dom';
 
@@ -40,7 +41,7 @@ class AddNewRelease extends React.Component {
           <Breadcrumb style={{ paddingBottom: 16 }}>
             <Breadcrumb.Item>
               <Link to="/publisher/apps">
-                <Icon type="home" /> Home
+                <HomeOutlined /> Home
               </Link>
             </Breadcrumb.Item>
             <Breadcrumb.Item>Add New Release</Breadcrumb.Item>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/components/ApssTable/AppDetailsDrawer/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/components/ApssTable/AppDetailsDrawer/index.js
index 12c38e55b7f..32b5031d6a8 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/components/ApssTable/AppDetailsDrawer/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/components/ApssTable/AppDetailsDrawer/index.js
@@ -29,7 +29,6 @@ import {
   Button,
   Spin,
   message,
-  Icon,
   Card,
   Badge,
   Tooltip,
@@ -48,7 +47,14 @@ import ManagedConfigurationsIframe from './components/ManagedConfigurationsIfram
 import { handleApiError } from '../../../../../../../../../services/utils/errorHandler';
 import Authorized from '../../../../../../../../../components/Authorized/Authorized';
 import { isAuthorized } from '../../../../../../../../../services/utils/authorizationHandler';
-import { MoreOutlined } from '@ant-design/icons';
+import {
+  CheckCircleOutlined,
+  EditOutlined,
+  MoreOutlined,
+  StarOutlined,
+  UploadOutlined,
+  CheckOutlined,
+} from '@ant-design/icons';
 import DeleteApp from './components/DeleteApp';
 import RetireApp from './components/RetireApp';
 
@@ -56,13 +62,6 @@ const { Meta } = Card;
 const { Text, Title } = Typography;
 const { Option } = Select;
 
-const IconText = ({ type, text }) => (
-  <span>
-    <Icon type={type} style={{ marginRight: 8 }} />
-    {text}
-  </span>
-);
-
 const modules = {
   toolbar: [
     ['bold', 'italic', 'underline', 'strike', 'blockquote'],
@@ -603,13 +602,12 @@ class AppDetailsDrawer extends React.Component {
                                       title="Published"
                                       count={
                                         <Tooltip title="Published">
-                                          <Icon
+                                          <CheckCircleOutlined
                                             style={{
                                               backgroundColor: '#52c41a',
                                               borderRadius: '50%',
                                               color: 'white',
                                             }}
-                                            type="check-circle"
                                           />
                                         </Tooltip>
                                       }
@@ -633,24 +631,15 @@ class AppDetailsDrawer extends React.Component {
                               description={
                                 <div
                                   style={{
-                                    fontSize: '0.7em',
+                                    fontSize: '0.8em',
                                   }}
                                   className="description-view"
                                 >
-                                  <IconText
-                                    type="check"
-                                    text={release.currentStatus}
-                                  />
+                                  <CheckOutlined /> {release.currentStatus}
                                   <Divider type="vertical" />
-                                  <IconText
-                                    type="upload"
-                                    text={release.releaseType}
-                                  />
+                                  <UploadOutlined /> {release.releaseType}
                                   <Divider type="vertical" />
-                                  <IconText
-                                    type="star-o"
-                                    text={release.rating.toFixed(1)}
-                                  />
+                                  <StarOutlined /> {release.rating.toFixed(1)}
                                 </div>
                               }
                             />
@@ -698,7 +687,7 @@ class AppDetailsDrawer extends React.Component {
                     }}
                     onClick={this.enableDescriptionEdit}
                   >
-                    <Icon type="edit" />
+                    <EditOutlined />
                   </Text>
                 )
               }
@@ -754,7 +743,7 @@ class AppDetailsDrawer extends React.Component {
                     }}
                     onClick={this.enableCategoriesEdit}
                   >
-                    <Icon type="edit" />
+                    <EditOutlined />
                   </Text>
                 )
               }
@@ -821,7 +810,7 @@ class AppDetailsDrawer extends React.Component {
                     }}
                     onClick={this.enableTagsEdit}
                   >
-                    <Icon type="edit" />
+                    <EditOutlined />
                   </Text>
                 )
               }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/components/ApssTable/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/components/ApssTable/index.js
index 5010e23e205..48fa42e3955 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/components/ApssTable/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/components/ApssTable/index.js
@@ -17,13 +17,15 @@
  */
 
 import React from 'react';
-import { Avatar, Table, Tag, Icon, Badge, Alert, Tooltip } from 'antd';
+import { CheckCircleOutlined } from '@ant-design/icons';
+import { Avatar, Table, Tag, Badge, Alert, Tooltip } from 'antd';
 import axios from 'axios';
 import pSBC from 'shade-blend-color';
 import './styles.css';
 import { withConfigContext } from '../../../../../../../../components/ConfigContext';
 import AppDetailsDrawer from './AppDetailsDrawer';
 import { handleApiError } from '../../../../../../../../services/utils/errorHandler';
+import { EntgraIcon } from 'entgra-icons-react';
 
 let config = null;
 
@@ -69,13 +71,12 @@ const columns = [
             }}
             count={
               <Tooltip title="Published">
-                <Icon
+                <CheckCircleOutlined
                   style={{
                     backgroundColor: '#52c41a',
                     borderRadius: '50%',
                     color: 'white',
                   }}
-                  type="check-circle"
                 />
               </Tooltip>
             }
@@ -139,15 +140,13 @@ const columns = [
       const defaultPlatformIcons = config.defaultPlatformIcons;
       let icon = defaultPlatformIcons.default.icon;
       let color = defaultPlatformIcons.default.color;
-      let theme = defaultPlatformIcons.default.theme;
       if (defaultPlatformIcons.hasOwnProperty(platform)) {
         icon = defaultPlatformIcons[platform].icon;
         color = defaultPlatformIcons[platform].color;
-        theme = defaultPlatformIcons[platform].theme;
       }
       return (
         <span style={{ fontSize: 20, color: color, textAlign: 'center' }}>
-          <Icon type={icon} theme={theme} />
+          <EntgraIcon type={icon} />
         </span>
       );
     },
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/components/Filters/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/components/Filters/index.js
index 8ddbb6e0c45..649f3f8dc67 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/components/Filters/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/AppList/components/Filters/index.js
@@ -17,16 +17,9 @@
  */
 
 import React from 'react';
-import {
-  Card,
-  Col,
-  Row,
-  Typography,
-  Divider,
-  Select,
-  Button,
-  Form,
-} from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Card, Col, Row, Typography, Divider, Select, Button } from 'antd';
 import axios from 'axios';
 import { withConfigContext } from '../../../../../../../../components/ConfigContext';
 import { handleApiError } from '../../../../../../../../services/utils/errorHandler';
@@ -196,7 +189,8 @@ class FiltersForm extends React.Component {
             permission="/permission/admin/app-mgt/publisher/application/update"
             yes={
               <div>
-                <Form.Item label="Categories">
+                <p>Categories:</p>
+                <Form.Item>
                   {getFieldDecorator('categories', {
                     rules: [
                       {
@@ -221,7 +215,8 @@ class FiltersForm extends React.Component {
                     </Select>,
                   )}
                 </Form.Item>
-                <Form.Item label="Tags">
+                <p>Tags:</p>
+                <Form.Item>
                   {getFieldDecorator('tags', {
                     rules: [
                       {
@@ -244,10 +239,11 @@ class FiltersForm extends React.Component {
               </div>
             }
           />
+          <p>Device Type:</p>
           <Authorized
             permission="/permission/admin/device-mgt/admin/device-type/view"
             yes={
-              <Form.Item label="Device Type">
+              <Form.Item>
                 {getFieldDecorator('deviceType', {
                   rules: [
                     {
@@ -271,7 +267,8 @@ class FiltersForm extends React.Component {
               </Form.Item>
             }
           />
-          <Form.Item label="App Type">
+          <p>App Type:</p>
+          <Form.Item>
             {getFieldDecorator('appType', {})(
               <Select style={{ width: '100%' }} placeholder="Select app type">
                 <Option value="ENTERPRISE">Enterprise</Option>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/DetailedRating/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/DetailedRating/index.js
index df83a5ab63f..282c727665c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/DetailedRating/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/components/DetailedRating/index.js
@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { Row, Typography, Icon } from 'antd';
+import { TeamOutlined } from '@ant-design/icons';
+import { Row, Typography } from 'antd';
 import StarRatings from 'react-star-ratings';
 import './styles.css';
 import axios from 'axios';
@@ -118,7 +119,7 @@ class DetailedRating extends React.Component {
           />
           <br />
           <Text type="secondary" className="people-count">
-            <Icon type="team" /> {totalCount} total
+            <TeamOutlined /> {totalCount} total
           </Text>
         </div>
         <div className="bar-containers">
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/LifeCycle/components/lifeCycleDetailsModal/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/LifeCycle/components/lifeCycleDetailsModal/index.js
index b2683751bf7..74797e8f230 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/LifeCycle/components/lifeCycleDetailsModal/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/LifeCycle/components/lifeCycleDetailsModal/index.js
@@ -17,6 +17,7 @@
  */
 
 import React from 'react';
+import { QuestionCircleOutlined } from '@ant-design/icons';
 import { Modal, Button, Tag, List, Typography } from 'antd';
 import pSBC from 'shade-blend-color';
 import { withConfigContext } from '../../../../../../../../../../components/ConfigContext';
@@ -47,7 +48,11 @@ class LifeCycleDetailsModal extends React.Component {
     const { lifecycle } = this.props;
     return (
       <div>
-        <Button size="small" icon="question-circle" onClick={this.showModal}>
+        <Button
+          size="small"
+          icon={<QuestionCircleOutlined />}
+          onClick={this.showModal}
+        >
           Learn more
         </Button>
         <Modal
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/LifeCycle/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/LifeCycle/index.js
index b5c3b3e0352..4e715f0d87e 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/LifeCycle/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/LifeCycle/index.js
@@ -25,7 +25,6 @@ import {
   Modal,
   notification,
   Steps,
-  Icon,
   Alert,
   Tabs,
 } from 'antd';
@@ -36,7 +35,7 @@ import './styles.css';
 import { withConfigContext } from '../../../../../../../../components/ConfigContext';
 import { handleApiError } from '../../../../../../../../services/utils/errorHandler';
 import LifeCycleHistory from './components/LifeCycleHistory';
-
+import { EntgraIcon } from 'entgra-icons-react';
 const { Text, Title, Paragraph } = Typography;
 const { TabPane } = Tabs;
 
@@ -216,7 +215,6 @@ class LifeCycle extends React.Component {
     ) {
       proceedingStates = lifecycle[currentStatus].proceedingStates;
     }
-
     return (
       <div>
         <Title level={4}>Manage Lifecycle</Title>
@@ -236,36 +234,38 @@ class LifeCycle extends React.Component {
                 onChange={this.onChange}
                 size="small"
               >
-                {lifecycleSteps.map((step, index) => (
-                  <Step
-                    key={index}
-                    icon={<Icon type={step.icon} />}
-                    title={step.title}
-                    disabled={current !== step.step}
-                    description={
-                      current === step.step && (
-                        <div style={{ width: 400 }}>
-                          <p>{step.text}</p>
-                          {proceedingStates.map(lifecycleState => {
-                            return (
-                              <Button
-                                size={'small'}
-                                style={{ marginRight: 3 }}
-                                onClick={() =>
-                                  this.showReasonModal(lifecycleState)
-                                }
-                                key={lifecycleState}
-                                type={'primary'}
-                              >
-                                {lifecycleState}
-                              </Button>
-                            );
-                          })}
-                        </div>
-                      )
-                    }
-                  />
-                ))}
+                {lifecycleSteps.map((step, index) => {
+                  return (
+                    <Step
+                      key={index}
+                      icon={<EntgraIcon type={step.icon} />}
+                      title={step.title}
+                      disabled={current !== step.step}
+                      description={
+                        current === step.step && (
+                          <div style={{ width: 400 }}>
+                            <p>{step.text}</p>
+                            {proceedingStates.map(lifecycleState => {
+                              return (
+                                <Button
+                                  size={'small'}
+                                  style={{ marginRight: 3 }}
+                                  onClick={() =>
+                                    this.showReasonModal(lifecycleState)
+                                  }
+                                  key={lifecycleState}
+                                  type={'primary'}
+                                >
+                                  {lifecycleState}
+                                </Button>
+                              );
+                            })}
+                          </div>
+                        )
+                      }
+                    />
+                  );
+                })}
               </Steps>
             </div>
           </TabPane>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleaseView/components/DeleteRelease/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleaseView/components/DeleteRelease/index.js
index 70767280973..9ea21c343c0 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleaseView/components/DeleteRelease/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleaseView/components/DeleteRelease/index.js
@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { Modal, Button, Icon, notification } from 'antd';
+import { DeleteOutlined } from '@ant-design/icons';
+import { Modal, Button, notification } from 'antd';
 import axios from 'axios';
 import { handleApiError } from '../../../../../../../../../../services/utils/errorHandler';
 import { withConfigContext } from '../../../../../../../../../../components/ConfigContext';
@@ -77,7 +78,7 @@ class DeleteRelease extends React.Component {
           type="danger"
           onClick={this.showModal}
         >
-          <Icon type="delete" /> Delete
+          <DeleteOutlined /> Delete
         </Button>
       </>
     );
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleaseView/components/EditRelease/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleaseView/components/EditRelease/index.js
index 790513658ff..9aac12affa7 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleaseView/components/EditRelease/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleaseView/components/EditRelease/index.js
@@ -17,16 +17,22 @@
  */
 
 import React from 'react';
+import {
+  EditOutlined,
+  MinusOutlined,
+  PlusOutlined,
+  UploadOutlined,
+} from '@ant-design/icons';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
 import {
   Modal,
   Button,
-  Icon,
   notification,
   Spin,
   Tooltip,
   Upload,
   Input,
-  Form,
   Divider,
   Row,
   Col,
@@ -397,7 +403,7 @@ class EditReleaseModal extends React.Component {
     const config = this.props.context;
     const uploadButton = (
       <div>
-        <Icon type="plus" />
+        <PlusOutlined />
         <div className="ant-upload-text">Select</div>
       </div>
     );
@@ -417,7 +423,7 @@ class EditReleaseModal extends React.Component {
             type="primary"
             onClick={this.showModal}
           >
-            <Icon type="edit" /> Edit
+            <EditOutlined /> Edit
           </Button>
         </Tooltip>
         <Modal
@@ -450,7 +456,7 @@ class EditReleaseModal extends React.Component {
                       >
                         {binaryFiles.length !== 1 && (
                           <Button>
-                            <Icon type="upload" /> Change
+                            <UploadOutlined /> Change
                           </Button>
                         )}
                       </Upload>,
@@ -676,7 +682,7 @@ class EditReleaseModal extends React.Component {
                                 <Button
                                   type="dashed"
                                   shape="circle"
-                                  icon="minus"
+                                  icon={<MinusOutlined />}
                                   onClick={() => {
                                     metaData.splice(index, 1);
                                     this.setState({
@@ -691,7 +697,7 @@ class EditReleaseModal extends React.Component {
                       })}
                       <Button
                         type="dashed"
-                        icon="plus"
+                        icon={<PlusOutlined />}
                         onClick={this.addNewMetaData}
                       >
                         Add
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleaseView/components/Reviews/components/Review/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleaseView/components/Reviews/components/Review/index.js
index 5573bfdd73f..7dbd0139b78 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleaseView/components/Reviews/components/Review/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleaseView/components/Reviews/components/Review/index.js
@@ -63,7 +63,7 @@ class SingleReview extends React.Component {
     );
 
     return (
-      <div>
+      <div style={{ width: '100%' }}>
         <List.Item.Meta
           avatar={
             <Avatar
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleaseView/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleaseView/index.js
index e416d0d8a44..1a4e7a943b2 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleaseView/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Apps/scenes/Release/components/ReleaseView/index.js
@@ -17,16 +17,8 @@
  */
 
 import React from 'react';
-import {
-  Divider,
-  Row,
-  Col,
-  Typography,
-  Button,
-  Icon,
-  Tooltip,
-  Alert,
-} from 'antd';
+import { ShopOutlined } from '@ant-design/icons';
+import { Divider, Row, Col, Typography, Button, Tooltip, Alert } from 'antd';
 import StarRatings from 'react-star-ratings';
 import Reviews from './components/Reviews';
 import '../../../../../../../../App.css';
@@ -35,6 +27,7 @@ import EditRelease from './components/EditRelease';
 import { withConfigContext } from '../../../../../../../../components/ConfigContext';
 import Authorized from '../../../../../../../../components/Authorized/Authorized';
 import DeleteRelease from './components/DeleteRelease';
+import { EntgraIcon } from 'entgra-icons-react';
 
 const { Title, Text, Paragraph } = Typography;
 
@@ -64,12 +57,10 @@ class ReleaseView extends React.Component {
     const defaultPlatformIcons = config.defaultPlatformIcons;
     let icon = defaultPlatformIcons.default.icon;
     let color = defaultPlatformIcons.default.color;
-    let theme = defaultPlatformIcons.default.theme;
 
     if (defaultPlatformIcons.hasOwnProperty(platform)) {
       icon = defaultPlatformIcons[platform].icon;
       color = defaultPlatformIcons[platform].color;
-      theme = defaultPlatformIcons[platform].theme;
     }
     let metaData = [];
     try {
@@ -98,7 +89,7 @@ class ReleaseView extends React.Component {
               <br />
               <Text>Platform : </Text>
               <span style={{ fontSize: 20, color: color, textAlign: 'center' }}>
-                <Icon type={icon} theme={theme} />
+                <EntgraIcon type={icon} />
               </span>
               <Divider type="vertical" />
               <Text>Version : {release.version}</Text>
@@ -140,7 +131,7 @@ class ReleaseView extends React.Component {
                         style={{ float: 'right' }}
                         htmlType="button"
                         type="primary"
-                        icon="shop"
+                        icon={<ShopOutlined />}
                         disabled={!isAppInstallable}
                         onClick={() => {
                           window.open(
@@ -161,7 +152,7 @@ class ReleaseView extends React.Component {
             </Col>
           </Row>
           <Divider />
-          <Row className="release-images">
+          <Row className="release-images" style={{ flexFlow: 'nowrap' }}>
             {release.screenshots.map((screenshotUrl, index) => {
               return (
                 <div key={index} className="release-screenshot">
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/components/Categories/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/components/Categories/index.js
index 1251709cd1d..0a0ebe0bb8d 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/components/Categories/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/components/Categories/index.js
@@ -17,11 +17,11 @@
  */
 
 import React from 'react';
+import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
 import {
   Card,
   Tag,
   message,
-  Icon,
   Input,
   notification,
   Divider,
@@ -157,11 +157,10 @@ class ManageCategories extends React.Component {
           <>
             <Divider type="vertical" />
             <Tooltip title="edit">
-              <Icon
+              <EditOutlined
                 onClick={() => {
                   this.openEditModal(categoryName);
                 }}
-                type="edit"
               />
             </Tooltip>
             <Divider type="vertical" />
@@ -182,7 +181,7 @@ class ManageCategories extends React.Component {
                 okText="Yes"
                 cancelText="No"
               >
-                <Icon type="delete" />
+                <DeleteOutlined />
               </Popconfirm>
             </Tooltip>
           </>
@@ -399,7 +398,7 @@ class ManageCategories extends React.Component {
                 {!isAddNewVisible && (
                   <div style={{ float: 'right' }}>
                     <Button
-                      icon="plus"
+                      icon={<PlusOutlined />}
                       // type="primary"
                       size="small"
                       onClick={() => {
@@ -456,7 +455,7 @@ class ManageCategories extends React.Component {
                         onClick={this.showInput}
                         style={{ background: '#fff', borderStyle: 'dashed' }}
                       >
-                        <Icon type="plus" /> New Category
+                        <PlusOutlined /> New Category
                       </Tag>
                     )}
                   </TweenOneGroup>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/components/Tags/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/components/Tags/index.js
index 7acd6f9049a..8401b27e603 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/components/Tags/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/components/Tags/index.js
@@ -17,11 +17,11 @@
  */
 
 import React from 'react';
+import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
 import {
   Card,
   Tag,
   message,
-  Icon,
   Input,
   notification,
   Divider,
@@ -151,11 +151,10 @@ class ManageTags extends React.Component {
           <>
             <Divider type="vertical" />
             <Tooltip title="edit">
-              <Icon
+              <EditOutlined
                 onClick={() => {
                   this.openEditModal(tagName);
                 }}
-                type="edit"
               />
             </Tooltip>
             <Divider type="vertical" />
@@ -176,7 +175,7 @@ class ManageTags extends React.Component {
                 okText="Yes"
                 cancelText="No"
               >
-                <Icon type="delete" />
+                <DeleteOutlined />
               </Popconfirm>
             </Tooltip>
           </>
@@ -390,7 +389,7 @@ class ManageTags extends React.Component {
                 {!isAddNewVisible && (
                   <div style={{ float: 'right' }}>
                     <Button
-                      icon="plus"
+                      icon={<PlusOutlined />}
                       // type="primary"
                       size="small"
                       onClick={() => {
@@ -447,7 +446,7 @@ class ManageTags extends React.Component {
                         onClick={this.showInput}
                         style={{ background: '#fff', borderStyle: 'dashed' }}
                       >
-                        <Icon type="plus" /> New Tag
+                        <PlusOutlined /> New Tag
                       </Tag>
                     )}
                   </TweenOneGroup>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/index.js
index f0e4bc45aff..6a8b8122cf4 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/index.js
@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { PageHeader, Typography, Breadcrumb, Row, Col, Icon } from 'antd';
+import { HomeOutlined } from '@ant-design/icons';
+import { PageHeader, Typography, Breadcrumb, Row, Col } from 'antd';
 import ManageCategories from './components/Categories';
 import ManageTags from './components/Tags';
 import { Link } from 'react-router-dom';
@@ -40,7 +41,7 @@ class Manage extends React.Component {
           <Breadcrumb style={{ paddingBottom: 16 }}>
             <Breadcrumb.Item>
               <Link to="/publisher/apps">
-                <Icon type="home" /> Home
+                <HomeOutlined /> Home
               </Link>
             </Breadcrumb.Item>
             <Breadcrumb.Item>Manage</Breadcrumb.Item>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/components/Pages/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/components/Pages/index.js
index f94ccbce133..33d67ef4ed2 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/components/Pages/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/components/Pages/index.js
@@ -18,13 +18,13 @@
 
 import React from 'react';
 import axios from 'axios';
+import { DeleteOutlined, HomeOutlined } from '@ant-design/icons';
 import {
   Tag,
   notification,
   Table,
   Typography,
   Divider,
-  Icon,
   Popconfirm,
   Button,
 } from 'antd';
@@ -239,7 +239,7 @@ class Pages extends React.Component {
                 <Button
                   disabled={page.id === this.state.homePageId}
                   className="btn-warning"
-                  icon="home"
+                  icon={<HomeOutlined />}
                   type="link"
                   onClick={() => {
                     this.updateHomePage(page.id);
@@ -259,7 +259,7 @@ class Pages extends React.Component {
               >
                 <span className="action">
                   <Text type="danger">
-                    <Icon type="delete" /> delete
+                    <DeleteOutlined /> delete
                   </Text>
                 </span>
               </Popconfirm>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/components/SyncAndroidApps/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/components/SyncAndroidApps/index.js
index 85021dd9649..3f681cb6faf 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/components/SyncAndroidApps/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/components/SyncAndroidApps/index.js
@@ -17,6 +17,7 @@
  */
 
 import React from 'react';
+import { SyncOutlined } from '@ant-design/icons';
 import { Button, notification } from 'antd';
 import axios from 'axios';
 import { withConfigContext } from '../../../../../../../../components/ConfigContext';
@@ -69,7 +70,7 @@ class SyncAndroidApps extends React.Component {
           loading={loading}
           style={{ marginTop: 16 }}
           type="primary"
-          icon="sync"
+          icon={<SyncOutlined />}
         >
           Sync{loading && 'ing...'}
         </Button>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/index.js
index 09b57429e55..ffdf934e903 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/index.js
@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { PageHeader, Breadcrumb, Divider, Icon, Result } from 'antd';
+import { HomeOutlined } from '@ant-design/icons';
+import { PageHeader, Breadcrumb, Divider, Result } from 'antd';
 import { Link } from 'react-router-dom';
 import SyncAndroidApps from './components/SyncAndroidApps';
 import { withConfigContext } from '../../../../../../components/ConfigContext';
@@ -41,7 +42,7 @@ class ManageAndroidEnterprise extends React.Component {
           <Breadcrumb style={{ paddingBottom: 16 }}>
             <Breadcrumb.Item>
               <Link to="/publisher/apps">
-                <Icon type="home" /> Home
+                <HomeOutlined /> Home
               </Link>
             </Breadcrumb.Item>
             <Breadcrumb.Item>Manage</Breadcrumb.Item>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/scenes/Page/components/Cluster/components/AddAppsToClusterModal/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/scenes/Page/components/Cluster/components/AddAppsToClusterModal/index.js
index ad434d9cb7c..5b9638142fd 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/scenes/Page/components/Cluster/components/AddAppsToClusterModal/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/scenes/Page/components/Cluster/components/AddAppsToClusterModal/index.js
@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { Modal, Icon, Table, Avatar } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { Modal, Table, Avatar } from 'antd';
 import '../../styles.css';
 import { withConfigContext } from '../../../../../../../../../../../../components/ConfigContext';
 
@@ -84,7 +85,7 @@ class AddAppsToClusterModal extends React.Component {
         <div className="btn-add-new-wrapper">
           <div className="btn-add-new">
             <button className="btn" onClick={this.showModal}>
-              <Icon style={{ position: 'relative' }} type="plus" />
+              <PlusOutlined style={{ position: 'relative' }} />
             </button>
           </div>
           <div className="title">Add app</div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/scenes/Page/components/Cluster/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/scenes/Page/components/Cluster/index.js
index 1c823752072..adc1c47c59b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/scenes/Page/components/Cluster/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/scenes/Page/components/Cluster/index.js
@@ -17,11 +17,18 @@
  */
 
 import React from 'react';
+import {
+  CaretDownOutlined,
+  CaretLeftFilled,
+  CaretRightFilled,
+  CaretUpOutlined,
+  CloseCircleFilled,
+  DeleteOutlined,
+} from '@ant-design/icons';
 import {
   Button,
   Col,
   Divider,
-  Icon,
   message,
   notification,
   Popconfirm,
@@ -304,7 +311,7 @@ class Cluster extends React.Component {
                   this.swapProduct(index, index - 1);
                 }}
               >
-                <Icon type="caret-left" theme="filled" />
+                <CaretLeftFilled />
               </button>
             )}
           </div>
@@ -324,7 +331,7 @@ class Cluster extends React.Component {
                   }}
                   className="btn btn-right"
                 >
-                  <Icon type="caret-right" theme="filled" />
+                  <CaretRightFilled />
                 </button>
               </div>
               <div className="delete-btn">
@@ -334,7 +341,7 @@ class Cluster extends React.Component {
                     this.removeProduct(index);
                   }}
                 >
-                  <Icon type="close-circle" theme="filled" />
+                  <CloseCircleFilled />
                 </button>
               </div>
             </>
@@ -363,7 +370,7 @@ class Cluster extends React.Component {
                   <Tooltip title="Move Up">
                     <Button
                       type="link"
-                      icon="caret-up"
+                      icon={<CaretUpOutlined />}
                       size="large"
                       onClick={() => {
                         this.props.swapClusters(index, index - 1);
@@ -374,7 +381,7 @@ class Cluster extends React.Component {
                   <Tooltip title="Move Down">
                     <Button
                       type="link"
-                      icon="caret-down"
+                      icon={<CaretDownOutlined />}
                       size="large"
                       onClick={() => {
                         this.props.swapClusters(index, index + 1);
@@ -391,7 +398,7 @@ class Cluster extends React.Component {
                     >
                       <Button
                         type="danger"
-                        icon="delete"
+                        icon={<DeleteOutlined />}
                         shape="circle"
                         htmlType="button"
                       />
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/scenes/Page/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/scenes/Page/index.js
index 066e17c6ad9..c0d80db1de7 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/scenes/Page/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Home/scenes/Manage/scenes/AndroidEnterprise/scenes/Page/index.js
@@ -17,12 +17,12 @@
  */
 
 import React from 'react';
+import { HomeOutlined, PlusOutlined } from '@ant-design/icons';
 import {
   PageHeader,
   Typography,
   Breadcrumb,
   Button,
-  Icon,
   Col,
   Row,
   notification,
@@ -326,7 +326,7 @@ class Page extends React.Component {
           <Breadcrumb style={{ paddingBottom: 16 }}>
             <Breadcrumb.Item>
               <Link to="/publisher/apps">
-                <Icon type="home" /> Home
+                <HomeOutlined /> Home
               </Link>
             </Breadcrumb.Item>
             <Breadcrumb.Item>Manage</Breadcrumb.Item>
@@ -406,7 +406,7 @@ class Page extends React.Component {
                       <Button
                         type="dashed"
                         shape="round"
-                        icon="plus"
+                        icon={<PlusOutlined />}
                         size="large"
                         onClick={() => {
                           this.toggleAddNewClusterVisibility(true);
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Login/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Login/index.js
index 8c6c619f432..95e8039c3b7 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Login/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/scenes/Login/index.js
@@ -17,12 +17,13 @@
  */
 
 import React from 'react';
+import { LockOutlined, UserOutlined } from '@ant-design/icons';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
 import {
   Typography,
   Row,
   Col,
-  Form,
-  Icon,
   Input,
   Button,
   message,
@@ -156,7 +157,7 @@ class NormalLoginForm extends React.Component {
           })(
             <Input
               style={{ height: 32 }}
-              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
               placeholder="Username"
             />,
           )}
@@ -167,7 +168,7 @@ class NormalLoginForm extends React.Component {
           })(
             <Input
               style={{ height: 32 }}
-              prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
               type="password"
               placeholder="Password"
             />,