diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/index.html b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/index.html
index 3d41cf4be5a..fdbaea7b4a3 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/index.html
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/index.html
@@ -21,14 +21,14 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
-    <link rel="stylesheet" type="text/css" href="/css/font-wso2.css">
-    <link rel="stylesheet" type="text/css" href="/themes/default/default-theme.css">
+    <link rel="stylesheet" type="text/css" href="/publisher/css/font-wso2.css">
+    <link rel="stylesheet" type="text/css" href="/publisher/themes/default/default-theme.css">
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="/manifest.json">
-    <link rel="shortcut icon" href="/images/favicon.png">
+    <link rel="manifest" href="/publisher/manifest.json">
+    <link rel="shortcut icon" href="/publisher/images/favicon.png">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -45,7 +45,7 @@
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
-    <script src='/dist/index.js'></script>
+    <script src='/publisher/dist/index.js'></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/appImage.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/appImage.css
similarity index 98%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/appImage.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/appImage.css
index 2747960b965..48bcc9e756b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/appImage.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/appImage.css
@@ -31,6 +31,7 @@
     height: auto;
     transition: .5s ease;
     backface-visibility: hidden;
+    width: 100%;
 }
 
 .btn-content {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/chip.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/chip.css
similarity index 100%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/chip.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/chip.css
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/drawer.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/drawer.css
similarity index 100%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/drawer.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/drawer.css
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/floatingButton.css
similarity index 100%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/floatingButton.css
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/imageUploader.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/imageUploader.css
similarity index 100%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/imageUploader.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/imageUploader.css
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/notification.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/notification.css
similarity index 100%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/notification.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/notification.css
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/switch.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/switch.css
similarity index 100%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/switch.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/switch.css
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/AppImage.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/AppImage.js
index e4e8f09cc25..8b5a28c1017 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/AppImage.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/AppImage.js
@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import './appImage.css';
+import Theme from '../../../theme';
 
 /**
  * Component for holding uploaded image.
@@ -29,6 +29,18 @@ class AppImage extends Component {
     constructor() {
         super();
         this.removeImage = this.removeImage.bind(this);
+        this.scriptId = "appImage";
+    }
+
+    componentWillMount() {
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+        Theme.insertThemingScripts(this.scriptId);
+    }
+
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     /**
@@ -44,7 +56,7 @@ class AppImage extends Component {
         const {image, imageId} = this.props;
         return (
             <div className="image-container" style={this.props.imageStyles}>
-                <img src={image} style={{width: '100%'}} className="image" id={imageId}/>
+                <img src={image} className="image" id={imageId}/>
                 <div className="btn-content">
                     <i className="close-btn" id={imageId} onClick={this.removeImage}>X</i>
                 </div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/Chip.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/Chip.jsx
index d614564b614..783ce7a833c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/Chip.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/Chip.jsx
@@ -17,9 +17,24 @@
  */
 
 import React, {Component} from 'react';
-import './chip.css';
+import Theme from '../../../theme';
 
 class Chip extends Component {
+    constructor() {
+        super();
+        this.scriptId = "chip";
+    }
+
+    componentWillMount() {
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+        Theme.insertThemingScripts(this.scriptId);
+    }
+
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId);
+    }
 
     render() {
         return (
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/Drawer.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/Drawer.jsx
index 3c7f21c2e1a..3326d5dd757 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/Drawer.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/Drawer.jsx
@@ -18,8 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import './drawer.css';
-import {Row} from "reactstrap";
+import Theme from '../../../theme'
 
 /**
  * Custom React component for Application View.
@@ -29,6 +28,18 @@ class Drawer extends Component {
     constructor() {
         super();
         this.closeDrawer = this.closeDrawer.bind(this);
+        this.scriptId = "drawer";
+    }
+
+    componentWillMount() {
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+        Theme.insertThemingScripts(this.scriptId);
+    }
+
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     /**
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/FloatingButton.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/FloatingButton.jsx
index 08d73aca4d8..e511be3ad4e 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/FloatingButton.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/FloatingButton.jsx
@@ -18,13 +18,29 @@
 
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import './floatingButton.css';
+import Theme from '../../../theme';
 
 /**
  * Floating Action button.
  * */
 class FloatingButton extends Component {
 
+    constructor() {
+        super();
+        this.scriptId = "floatingButton";
+    }
+
+    componentWillMount() {
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+        Theme.insertThemingScripts(this.scriptId);
+    }
+
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId);
+    }
+
     handleClick(event) {
         this.props.onClick(event);
     }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/ImageUploader.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/ImageUploader.jsx
index 3f719e47459..1a577285860 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/ImageUploader.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/ImageUploader.jsx
@@ -18,9 +18,9 @@
 
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import './imageUploader.css';
 import Dropzone from "react-dropzone";
 import {Row} from "reactstrap";
+import Theme from '../../../theme';
 
 
 class ImageUploader extends Component {
@@ -29,7 +29,19 @@ class ImageUploader extends Component {
         this.setImages = this.setImages.bind(this);
         this.state = {
             images: []
-        }
+        };
+        this.scriptId = "imageUploader";
+    }
+
+    componentWillMount() {
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+        Theme.insertThemingScripts(this.scriptId);
+    }
+
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     setImages(images) {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationItem.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationItem.jsx
index 8fd19e88f4d..f5ef6803d1b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationItem.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationItem.jsx
@@ -18,11 +18,23 @@
 
 import React, {Component} from 'react';
 import {Col, Row} from "reactstrap";
-import './notification.css';
+import Theme from '../../../theme'
 
 class NotificationItem extends Component {
     constructor() {
         super();
+        this.scriptId = "notification";
+    }
+
+    componentWillMount() {
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+        Theme.insertThemingScripts(this.scriptId);
+    }
+
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     render() {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationView.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationView.jsx
index bfcade671b4..aac4b70844b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationView.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationView.jsx
@@ -19,10 +19,23 @@
 import React, {Component} from 'react';
 import {Col, Row} from "reactstrap";
 import './notification.css';
+import Theme from '../../../theme'
 
 class NotificationView extends Component {
     constructor() {
         super();
+        this.scriptId = "notification";
+    }
+
+    componentWillMount() {
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+        Theme.insertThemingScripts(this.scriptId);
+    }
+
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     render() {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/Switch.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/Switch.jsx
index 285ea9f66d2..5634d7993f5 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/Switch.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/Switch.jsx
@@ -17,10 +17,26 @@
  */
 
 import React, {Component} from 'react';
-import './switch.css';
+import Theme from '../../../theme';
 
 class Switch extends Component {
 
+    constructor() {
+        super();
+        this.scriptId = "switch";
+    }
+
+    componentWillMount() {
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+        Theme.insertThemingScripts(this.scriptId);
+    }
+
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId);
+    }
+
     render() {
         const {height, width} = this.props;
         return (
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js
index 2437370729e..8b9124b3f24 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js
@@ -16,7 +16,6 @@
  * under the License.
  */
 var path = require('path');
-import '!!style-loader!css-loader!src/css/font-wso2.css';
 
 const config = {
     entry: {
diff --git a/features/application-mgt/org.wso2.carbon.device.application.mgt.server.feature/pom.xml b/features/application-mgt/org.wso2.carbon.device.application.mgt.server.feature/pom.xml
index 65eafbf0df6..520ffee18e3 100644
--- a/features/application-mgt/org.wso2.carbon.device.application.mgt.server.feature/pom.xml
+++ b/features/application-mgt/org.wso2.carbon.device.application.mgt.server.feature/pom.xml
@@ -49,6 +49,11 @@
             <artifactId>org.wso2.carbon.device.application.mgt.api.feature</artifactId>
             <type>zip</type>
         </dependency>
+        <dependency>
+            <groupId>org.wso2.carbon.devicemgt</groupId>
+            <artifactId>org.wso2.carbon.device.application.mgt.auth.handler.feature</artifactId>
+            <type>zip</type>
+        </dependency>
     </dependencies>
 
     <build>
@@ -100,6 +105,7 @@
                             </adviceFile>
                             <includedFeatures>
                                 <includedFeatureDef>org.wso2.carbon.devicemgt:org.wso2.carbon.device.application.mgt.api.feature:${carbon.device.mgt.version}</includedFeatureDef>
+                                <includedFeatureDef>org.wso2.carbon.devicemgt:org.wso2.carbon.device.application.mgt.auth.handler.feature:${carbon.device.mgt.version}</includedFeatureDef>
                             </includedFeatures>
                             <bundles>
                                 <bundleDef>
diff --git a/pom.xml b/pom.xml
index dcb5432ce86..29e44058542 100644
--- a/pom.xml
+++ b/pom.xml
@@ -329,6 +329,12 @@
                 <type>zip</type>
                 <version>${carbon.device.mgt.version}</version>
             </dependency>
+            <dependency>
+                <groupId>org.wso2.carbon.devicemgt</groupId>
+                <artifactId>org.wso2.carbon.device.application.mgt.auth.handler.feature</artifactId>
+                <type>zip</type>
+                <version>${carbon.device.mgt.version}</version>
+            </dependency>
             <dependency>
                 <groupId>org.wso2.carbon.devicemgt</groupId>
                 <artifactId>org.wso2.carbon.device.application.mgt.publisher.ui.feature</artifactId>